/* ---------- Der Kalender (neues Gewand) ----------
   So hat Evi es gewollt: schoener, uebersichtlicher, leichter zu bedienen.
   Ueber dem Blatt die Bilanz des Monats, oben im Blatt die Monate als
   Reiter, und der gewaehlte Tag als Zeitstrahl mit freien Luecken. */
.cal-kopf{align-items:center;margin-bottom:12px;}
.km-held{
  margin:0 0 12px;padding:14px 15px 13px;border-radius:22px;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz), var(--shadow);
}
.km-zahlen{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap;}
.km-gross{display:flex;align-items:baseline;gap:7px;min-width:0;}
.km-gross b{
  font-family:var(--font-display);font-size:30px;font-weight:700;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);
}
.km-gross span{font-size:13px;font-weight:600;color:var(--ink-soft);}
.km-klein{display:flex;gap:6px;flex-wrap:wrap;}
.km-pille{
  display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.km-pille svg{width:12px;height:12px;flex:none;stroke-width:2.2;}
.km-pille.frei{color:var(--ok);background:var(--ok-soft);}
.km-pille.zu{color:var(--off);background:var(--off-soft);}
/* Der Balken: wie die Termine des Monats stehen, in ihren drei Farben. */
.km-balken{display:flex;gap:3px;height:8px;margin:13px 0 9px;}
.km-balken i{display:block;min-width:8px;border-radius:999px;}
.km-balken .ok, .km-legende i.ok{background:var(--ok);}
.km-balken .offen, .km-legende i.offen{background:var(--wait);}
.km-balken .plan, .km-legende i.plan{background:var(--accent);}
.km-balken .ab, .km-legende i.ab{background:var(--off);}
.km-legende{display:flex;flex-wrap:wrap;gap:3px 13px;font-size:11.5px;color:var(--ink-soft);}
.km-legende span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.km-legende i{display:block;width:8px;height:8px;border-radius:50%;flex:none;}
.km-legende b{color:var(--ink);font-variant-numeric:tabular-nums;}
.km-leer{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-soft);}
.km-naechst{
  display:flex;align-items:center;gap:11px;width:100%;margin-top:13px;padding:9px 10px 9px 9px;
  border-radius:16px;cursor:pointer;text-align:left;font-family:var(--font-body);color:var(--ink);
  background:var(--accent-soft);
  background:color-mix(in srgb, var(--accent) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder), background var(--dur) var(--ease);
}
.km-naechst:active{transform:scale(.98);transition-duration:.06s;}
.km-n-zeichen{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);
}
.km-n-zeichen svg{width:17px;height:17px;stroke-width:2;}
.km-n-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.km-n-txt small{font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);}
.km-n-txt strong, .km-n-txt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.km-n-txt strong{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.km-n-txt span{font-size:12px;color:var(--ink-soft);}
.km-n-pfeil{flex:none;display:flex;color:var(--ink-soft);}
.km-n-pfeil svg{width:16px;height:16px;}
@media (hover:hover) and (pointer:fine){
  .km-naechst:hover{background:color-mix(in srgb, var(--accent) 14%, transparent);}
  .km-monat:not(.on):hover{background:color-mix(in srgb, var(--ink) 6%, transparent);}
}

/* Die Monate als Reiter oben im Blatt - ein Tipp statt vieler Pfeile. Die
   Zahl darunter: Termine in dem Monat. Der laufende Monat traegt einen
   feinen Ring, der gezeigte ist gefuellt wie ein gewaehlter Filter.
   Alle zwoelf stehen ganz im Kasten (so hat Evi es gewollt - vorher rollte
   die Leiste, Januar und Dezember waren angeschnitten): zwei Reihen zu
   sechs, ist das Blatt breit genug, eine Reihe mit zwoelf. */
.km-monate{
  display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:3px;
  margin:-2px 0 10px;padding:2px 0 10px;
  border-bottom:1px solid var(--line);
  border-bottom-color:color-mix(in srgb, var(--accent) 16%, transparent);
}
@container blatt (min-width:520px){
  .km-monate{grid-template-columns:repeat(12, minmax(0, 1fr));}
}
.km-monat{
  min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 2px 4px;border:none;border-radius:13px;cursor:pointer;
  background:transparent;color:var(--ink-soft);font-family:var(--font-body);
  font-size:12.5px;font-weight:700;line-height:1.2;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             transform var(--dur-schnell) var(--ease-feder);
}
.km-monat:active{transform:scale(.93);transition-duration:.06s;}
.km-monat i{
  display:block;height:12px;font-style:normal;font-size:10px;font-weight:700;line-height:12px;
  font-variant-numeric:tabular-nums;color:var(--accent-deep);
}
.km-monat.jetzt{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);color:var(--ink);}
.km-monat.on{background:var(--ink);color:var(--ground);box-shadow:none;}
.km-monat.on i{color:var(--ground);opacity:.75;}
.cal-blatt .cal-legende{border-top-style:solid;border-top-color:color-mix(in srgb, var(--accent) 16%, transparent);}

/* Blaettern: das neue Blatt und der neue Tag kommen aus der Richtung, in
   die geblaettert wurde - man sieht, wohin es ging. */
.cal-grid.kommt-rechts{animation:kmRechts .3s var(--ease) both;}
.cal-grid.kommt-links{animation:kmLinks .3s var(--ease) both;}
@keyframes kmRechts{from{opacity:0;transform:translateX(28px);}to{opacity:1;transform:none;}}
@keyframes kmLinks{from{opacity:0;transform:translateX(-28px);}to{opacity:1;transform:none;}}
/* Das Tagblatt gleitet nur 16 px herein, nicht 28: die Seite hat 20 px Rand. Was
   weiter hinausragt, macht die Seite fuer einen Augenblick breiter als den
   Bildschirm - der Browser verschiebt dabei die Scrollposition (so hat Evi es
   gemeldet: beim Wechsel zwischen den Tagen wurde die Seite nach oben gestossen).
   Das Blatt mit den Tagen liegt in einer Karte mit overflow:hidden und darf weiter
   gleiten. */
.tagblatt.swap-rechts{animation:tbRechts .3s var(--ease) both;}
.tagblatt.swap-links{animation:tbLinks .3s var(--ease) both;}
@keyframes tbRechts{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:none;}}
@keyframes tbLinks{from{opacity:0;transform:translateX(-16px);}to{opacity:1;transform:none;}}

/* Das Tagblatt: oben Tag und Pfeile, das Zeichen fuer "zu" unter dem
   Datum, die Knoepfe in einer Reihe darunter. */
.tb-halter{margin-top:14px;}
/* Im Wochenplan steht das Tagblatt gleich unter den Chips. */
.tb-halter.wo-tb{margin-top:0;}
/* Im Wochenplan ist eine freie Luecke nur eine Zeile zum Lesen. */
.zs-luecke.nur-ansicht{cursor:default;}
.zs-luecke.nur-ansicht:active{transform:none;}
.tb-halter .tagblatt{margin-top:0;overflow:hidden;}
.tb-wann .tb-marke-zu{display:inline-flex;align-items:center;margin-top:5px;padding:3px 9px;font-size:10.5px;}
.tb-nav{display:flex;gap:6px;flex:none;margin-left:auto;align-self:flex-start;}
.tb-nav .cal-pfeil{width:34px;height:34px;}
.tb-nav .cal-pfeil svg{width:16px;height:16px;}
.tagblatt .tv{margin:0 2px 16px;}

/* Der Zeitstrahl: eine feine Linie links, auf ihr ein Punkt je Eintrag in
   dessen Farbe - geplant im Akzent, offen gelb, stattgefunden gruen,
   abgesagt rot, ein Zeitfenster gruen, eine Luecke ein leerer Ring. */
.tb-zs{position:relative;display:flex;flex-direction:column;gap:8px;}
.tb-zs::before{
  content:'';position:absolute;left:6px;top:16px;bottom:16px;width:2px;border-radius:2px;
  background:var(--line);
  background:color-mix(in srgb, var(--ink) 11%, transparent);
}
.zs-reihe{display:grid;grid-template-columns:14px minmax(0,1fr);gap:9px;align-items:start;}
.zs-inhalt{min-width:0;}
.zs-inhalt .wk-appt, .zs-inhalt .slot-row{margin:0;}
.zs-punkt{
  position:relative;z-index:1;display:block;width:14px;height:14px;margin-top:20px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px var(--surface);
}
.ton-ok .zs-punkt{background:var(--ok);}
.ton-offen .zs-punkt{background:var(--wait);}
.ton-ab .zs-punkt{background:var(--off);opacity:.75;}
.ton-frei .zs-punkt{background:var(--ok);}
.ton-luecke .zs-punkt{
  margin-top:13px;background:var(--surface);
  box-shadow:inset 0 0 0 2px var(--ok), 0 0 0 3px var(--surface);
}
.ton-jetzt{align-items:center;}
.ton-jetzt .zs-punkt{width:10px;height:10px;margin:0 2px;background:var(--ink);}
.zs-jetzt{display:flex;align-items:center;gap:8px;min-height:14px;}
.zs-jetzt span{flex:none;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums;}
.zs-jetzt::after{content:'';flex:1;height:2px;border-radius:2px;background:var(--ink);opacity:.55;}

/* Eine freie Luecke: gruen getoent, ein Tipp traegt dort einen Termin ein. */
.zs-luecke{
  display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:6px 7px 6px 12px;
  border-radius:14px;cursor:pointer;text-align:left;font-family:var(--font-body);color:var(--ok);
  background:var(--ok-soft);
  background:color-mix(in srgb, var(--ok) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--ok) 26%, transparent);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder), background var(--dur) var(--ease);
}
.zs-luecke:active{transform:scale(.98);transition-duration:.06s;}
.zs-l-zeit{flex:none;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.zs-l-wort{flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.zs-l-plus{
  flex:none;display:inline-flex;align-items:center;gap:3px;padding:5px 10px 5px 8px;border-radius:999px;
  background:var(--ok);color:var(--surface);font-size:11.5px;font-weight:700;
}
.zs-l-plus svg{width:11px;height:11px;flex:none;stroke-width:2.6;}
@media (hover:hover) and (pointer:fine){ .zs-luecke:hover{background:color-mix(in srgb, var(--ok) 13%, transparent);} }
/* Einen einzelnen Tag zumachen braucht man selten - das steht unten. */
.tb-zu-reihe.tb-fuss{margin:4px 0 0;padding:12px 0 8px;border-bottom:none;border-top:1px solid var(--line);}
.tagblatt .af-liste{display:flex;flex-direction:column;gap:6px;}
@media (max-width:360px){ .km-gross b{font-size:26px;} }
/* Kopf: wird es eng, rutschen Pfeile und "Heute" unter den Monat, statt
   aus der Seite zu laufen. */
.cal-kopf{flex-wrap:wrap;}
.ck-titel{flex:1 1 auto;min-width:0;}
.ck-nav{margin-left:auto;}
.tb-wann{flex:1 1 0;}
/* Wird das Tagblatt schmal (320 px, grosse Schrift), ruecken Linie und
   Punkte zusammen und die Luecke zeigt nur Zeit und Plus - der Platz
   gehoert dem Namen im Termin. */
.tagblatt{container:tagblatt / inline-size;}
@container tagblatt (max-width:300px){
  .zs-l-wort{display:none;}
  .zs-luecke{justify-content:space-between;}
}
@container tagblatt (max-width:250px){
  .tb-tasten .btn{padding-left:6px;padding-right:6px;gap:4px;font-size:12px;}
  .tb-tasten .btn svg{width:13px;height:13px;}
}
/* Im allerengsten Blatt (320 px, grosse Schrift) waere von "Geschlossen"
   nur "G..." geblieben (auch bei 360 px, seit die Spalten gleich breit
   sind) - dort steht nur das Zeichen, die Legende sagt es. */
.cal-blatt{container:blatt / inline-size;}
@container blatt (max-width:310px){
  /* Die Spalten teilen sich die Breite zu gleichen Teilen - vorher schob
     das Wort "Geschlossen" bei 320 px und grosser Schrift den Sonntag aus
     dem Blatt. Breiter darf das Wort seine Spalte ein wenig weiten. */
  .cal-grid{grid-template-columns:var(--kw-b) repeat(7,minmax(0,1fr));}
  .cal-tag{min-width:0;}
  .ct-zu{font-size:0;text-align:center;}
  .ct-zu .zz{font-size:10px;margin:0;}
}
@container tagblatt (max-width:280px){
  .zs-reihe{grid-template-columns:8px minmax(0,1fr);gap:6px;}
  .tb-zs::before{left:3px;}
  .zs-punkt{width:8px;height:8px;margin-top:23px;box-shadow:0 0 0 2px var(--surface);}
  .ton-luecke .zs-punkt{margin-top:16px;box-shadow:inset 0 0 0 1.5px var(--ok), 0 0 0 2px var(--surface);}
  .ton-jetzt .zs-punkt{width:8px;height:8px;margin:0;}
  .zs-l-wort{display:none;}
  .zs-luecke{justify-content:space-between;padding-left:10px;}
  .zs-l-plus{gap:0;padding:6px;font-size:0;}
  .zs-l-plus svg{width:12px;height:12px;}
}

/* Nachgeschaerft (so hat Evi es gewollt): der Monat steht oben in der
   Kalenderkarte statt abgetrennt darueber, die Bilanz ist flacher, und
   zwischen den Pfeilen steht der gewaehlte Tag ("Heute", "Morgen",
   "Fr 26.9.") - ein Tipp darauf fuehrt zurueck zu heute. */
.cal-blatt .cal-kopf{margin:2px 4px 10px;}
.cal-blatt .ck-titel h1{font-size:21px;white-space:nowrap;}
.cal-blatt .ck-nav{gap:5px;}
.cal-blatt .cal-pfeil{width:32px;height:32px;}
.cal-blatt .cal-pfeil svg{width:15px;height:15px;}
.cal-blatt .cal-heute{height:32px;min-width:62px;padding:0 10px;font-size:12px;}
/* Der Monat steht in zwei Zeilen - das Jahr klein darueber -, damit Pfeile
   und Tag daneben Platz haben. Im engsten Blatt ruecken sie zusammen. */
.cal-blatt .ck-titel h1{display:flex;flex-direction:column-reverse;line-height:1.05;}
.cal-blatt .ck-titel h1 span{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--ink-soft);margin-bottom:2px;}
@container blatt (max-width:300px){
  .cal-blatt .cal-kopf{gap:6px;margin-left:2px;margin-right:0;}
  .cal-blatt .ck-titel h1{font-size:18px;}
  .cal-blatt .ck-nav{gap:3px;}
  .cal-blatt .cal-pfeil{width:28px;height:28px;}
  .cal-blatt .cal-pfeil svg{width:14px;height:14px;}
  .cal-blatt .cal-heute{height:28px;min-width:0;padding:0 8px;font-size:11px;}
}
.cal-heute{min-width:74px;padding:0 12px;font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-schnell) var(--ease-feder);}
.cal-heute.daheim{background:var(--ink);color:var(--ground);border-color:transparent;}
.km-held{padding:11px 13px 11px;}
.km-gross b{font-size:24px;}
.km-gross span{font-size:12.5px;}
.km-balken{height:6px;margin:9px 0 7px;}
.km-legende{font-size:11px;}
.km-naechst{margin-top:9px;padding:6px 9px 6px 6px;gap:9px;border-radius:14px;}
.km-n-zeichen{width:28px;height:28px;}
.km-n-zeichen svg{width:15px;height:15px;}
.km-n-txt{flex-direction:row;align-items:baseline;gap:7px;}
.km-n-txt small{flex:none;font-size:9px;}
.km-n-txt strong{font-size:12.5px;min-width:0;}

/* Das Monatsblatt kompakter (so hat Evi es gewollt: "+ Termin" im
   Tagblatt soll ohne Scrollen zu erreichen sein). Die Zeilen des Monats
   werden flacher, Monatsreiter, Legende und Abstaende ruecken zusammen -
   rund 100 px weniger. Ein Tag bleibt mit 48 px hoch genug fuer den
   Daumen. */
.cal-blatt{padding:10px 10px 10px;margin-bottom:10px;}
.cal-blatt .cal-kopf{margin-bottom:6px;}
.km-monate{margin-bottom:6px;padding-bottom:6px;}
.km-monat{padding:4px 2px 2px;}
.cal-grid{gap:2px 3px;}
.cal-dow{padding-bottom:3px;}
.cal-tag, .cal-tag.pad{gap:0;min-height:38px;padding:2px 0 3px;}
.ct-zahl{width:24px;height:24px;font-size:14px;}
.ct-punkte{height:9px;}
.ct-zu{height:9px;line-height:9px;}
.cal-blatt .cal-legende{margin-top:6px;padding-top:6px;}
.tagblatt{margin-top:10px;}
@media (max-width:400px){
  .ct-zahl{width:23px;height:23px;font-size:13.5px;}
  .cal-tag, .cal-tag.pad{min-height:36px;padding:2px 0 3px;}
}

/* ---------- "Fuer dich heute" ----------
   Die Karte oben in der Startansicht (so hat Evi es gewollt - statt echter
   Push-Nachrichten, bis die App eine eigene Adresse hat). Eine ruhige Karte
   im Ton des Akzents, je Zeile Zeichen, Satz und hoechstens ein Knopf. */
.th-karte{
  margin:0 0 14px;padding:12px 12px 6px 14px;border-radius:20px;
  background:var(--surface);
  background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 70%);
  border:1px solid var(--line);
  border-color:color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow:inset 0 1px 0 var(--glanz), var(--shadow);
}
.th-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
.th-titel{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-deep);}
.th-titel svg{width:15px;height:15px;}
.th-zu{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;
  background:none;border:none;color:var(--ink-soft);-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.th-zu svg{width:14px;height:14px;}
.th-zeile{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 0;border-top:1px solid var(--line);}
.th-kopf + .th-zeile{border-top:none;}
.th-z{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;
  color:var(--accent-deep);background:var(--accent-soft);
  background:color-mix(in srgb, var(--accent) 12%, transparent);}
.th-z svg{width:16px;height:16px;}
.th-text{flex:1;min-width:0;font-size:13px;line-height:1.4;color:var(--ink);}
.th-zeile .btn{flex:none;}
@media (max-width:360px){ .th-zeile .btn{padding-left:10px;padding-right:10px;} }

/* Der Dialog "Erinnerungen fuer morgen". */
.er-liste{display:flex;flex-direction:column;margin-top:10px;}
.er-zeile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line);}
.er-zeile:last-child{border-bottom:none;}
.er-zeit{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);}
.er-wer{min-width:0;display:flex;flex-direction:column;line-height:1.3;}
.er-wer b{font-size:14px;overflow-wrap:anywhere;}
.er-wer small{font-size:11.5px;color:var(--ink-soft);}
.er-knoepfe{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;}
.er-knoepfe .btn{flex:1 1 auto;text-decoration:none;}
.er-zeile.fertig .er-wer small{color:var(--ok);font-weight:700;}
.er-zeile.fertig .er-zeit{color:var(--ok);}

/* ---------- Kalenderwochen, Feiertage, Geburtstage, offene Termine ----------
   So hat Evi es gewollt (Vorschlaege fuer einen schoeneren Kalender). Alles
   dezent: links die Kalenderwoche als leise Zahl, ein Feiertag als kleiner
   Punkt in der Ecke, ein Geburtstag als kleine Torte, ein Termin, den Evi noch
   klaeren muss, als gelbes Pünktchen an der Person. Die Legende nennt nur, was
   im gezeigten Monat vorkommt. */
.cal-kw-kopf{font-size:9px;letter-spacing:0;opacity:.7;}
.cal-kw{
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;line-height:1;color:var(--ink-soft);opacity:.7;
  font-variant-numeric:tabular-nums;
}
.cal-tag .ct-ecke{position:absolute;display:flex;pointer-events:none;color:var(--accent-deep);}
/* Feiertag: ein Punkt oben rechts, die Zahl nimmt den tiefen Ton des Akzents. */
.cal-tag .ct-fest{top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--accent-deep);}
.cal-tag.feiertag:not(.heute) .ct-zahl{color:var(--accent-deep);font-weight:700;}
/* Geburtstag: eine kleine Torte oben links. */
.cal-tag .ct-gb{top:2px;left:1px;width:10px;height:10px;}
.cal-tag .ct-gb svg{width:10px;height:10px;stroke-width:2.2;}
.cal-tag.vorbei .ct-ecke{opacity:.6;}
/* Offen: ein gelbes Pünktchen an der Person. Ein vergangener Tag blendet seine
   Marken sonst aus - dieser nicht, denn genau dort wartet etwas auf Evi. */
.ct-punkte i.termin.offen, .cal-legende .lg-offen{position:relative;}
.ct-punkte i.termin.offen::after, .cal-legende .lg-offen::after{
  content:'';position:absolute;top:-2px;right:-3px;width:5.5px;height:5.5px;border-radius:50%;
  background:var(--wait);box-shadow:0 0 0 1.5px var(--surface);
}
.cal-tag.vorbei .ct-punkte i.termin.offen{opacity:1;}
.cal-legende .lg-gb{color:var(--accent-deep);}
.cal-legende .lg-fest{width:6px;height:6px;margin:0 3px;border-radius:50%;background:var(--accent-deep);align-self:center;}
@container blatt (max-width:310px){
  .cal-kw{font-size:8.5px;}
  .cal-kw-kopf{font-size:8px;}
  .cal-tag .ct-fest{top:3px;right:3px;}
  .cal-tag .ct-gb{top:1px;left:0;}
}

/* Im Tagblatt: der Feiertag als Pille unter dem Datum ... */
.tb-wann .tb-marke-fest{
  display:inline-flex;align-items:center;gap:5px;max-width:100%;margin-top:5px;padding:3px 9px 3px 7px;
  border-radius:999px;font-size:10.5px;font-weight:700;line-height:1.3;color:var(--accent-deep);
  background:var(--accent-soft);
  background:color-mix(in srgb, var(--accent) 13%, transparent);
}
.tb-marke-fest .tf-z{display:flex;flex:none;}
.tb-marke-fest .tf-z svg{width:11px;height:11px;}
/* ... und die Geburtstage des Tages als ruhige Zeilen unter dem Kopf. */
.tb-gb{display:flex;flex-direction:column;gap:6px;margin:-2px 0 12px;}
.gb-kachel{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:7px 8px;border-radius:16px;
  background:var(--accent-soft);
  background:color-mix(in srgb, var(--accent) 7%, transparent);
  border:1px solid var(--line);
  border-color:color-mix(in srgb, var(--accent) 20%, transparent);
}
.gb-kachel.heute{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border-color:color-mix(in srgb, var(--accent) 38%, transparent);
}
.gb-z{
  flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  color:var(--accent-deep);background:var(--surface);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.gb-z svg{width:17px;height:17px;}
.gb-wer{
  flex:1 1 120px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:0;border:none;background:none;cursor:pointer;text-align:left;color:var(--ink);
  font-family:var(--font-body);-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.gb-name{font-size:13.5px;font-weight:700;line-height:1.3;overflow-wrap:anywhere;}
.gb-satz{font-size:11.5px;line-height:1.3;color:var(--ink-soft);}
.gb-kachel .btn{flex:none;padding:7px 13px;}
.gb-fertig{flex:none;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:700;color:var(--ok);background:var(--ok-soft);}
.gb-wer:active{opacity:.7;}

/* ---------- Termin verschieben (gedrueckt halten) ---------- */
/* Die Zeile, die man haelt, sinkt leise ein - so merkt der Finger, dass etwas
   passiert. Ein kurzer Tipp sieht davon kaum etwas. Kein Textmenue, keine
   Bildvorschau beim langen Druck. */
[data-vb-halten]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
[data-vb-halten] img{-webkit-touch-callout:none;pointer-events:none;}
.wk-zeile.haelt{
  transform:scale(.985);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius:14px;
  transition:transform .48s var(--ease), background .48s var(--ease);
}
/* Der Termin, der gerade wandert, steht gedaempft da - und der Kalender zeigt, dass er wartet. */
.zs-reihe.vb-quelle .wk-appt{opacity:.55;box-shadow:inset 0 0 0 1.5px var(--accent);}
.zs-reihe.vb-quelle .wk-acts{visibility:hidden;}
.cal-blatt.vb-modus{box-shadow:inset 0 1px 0 var(--glanz), 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent), var(--shadow);}
.cal-blatt.vb-modus .cal-tag.zu{opacity:.5;}
.cal-blatt.vb-modus .cal-tag:not(.pad):not(.zu){cursor:copy;}
/* Die Leiste unten: dunkel wie die Meldung (das staerkste Paar in jedem Design, auch in Glas
   lesbar), ueber der Meldung, damit beide zugleich Platz haben. Zen tritt zurueck. */
.vb-bar{
  position:fixed;z-index:46;left:14px;right:14px;margin:0 auto;max-width:520px;
  bottom:calc(78px + var(--leiste-unten, env(safe-area-inset-bottom, 0px)) + 62px);
  display:flex;align-items:center;gap:11px;padding:9px 9px 9px 12px;border-radius:22px;
  background:var(--ink);color:var(--ground);
  box-shadow:0 14px 34px rgba(0,0,0,.32);
  animation:vbRein .34s var(--ease-feder) both;
}
@keyframes vbRein{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
body:has(.overlay) .vb-bar{z-index:5;}
.vb-z{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--ground);color:var(--ink);
}
.vb-z svg{width:17px;height:17px;}
.vb-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.vb-txt b{font-size:13.5px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vb-txt small{font-size:11.5px;font-weight:600;line-height:1.25;opacity:.8;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vb-satz{font-size:11.5px;line-height:1.3;opacity:.8;}
.vb-ab{
  flex:none;padding:9px 13px;border:none;border-radius:999px;cursor:pointer;
  background:color-mix(in srgb, var(--ground) 18%, transparent);color:var(--ground);
  font-family:var(--font-body);font-size:12px;font-weight:700;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder), background var(--dur) var(--ease);
}
.vb-ab:active{transform:scale(.94);transition-duration:.06s;}
#app:has(> .vb-bar) .zen-knopf{opacity:0;transform:scale(.85);pointer-events:none;}
#app:has(> .vb-bar){padding-bottom:230px;}
@media (min-width:760px){ .vb-bar{bottom:96px;} }
@media (hover:hover) and (pointer:fine){ .vb-ab:hover{background:color-mix(in srgb, var(--ground) 30%, transparent);} }
/* Der Tipp im Tagblatt - leise, und weg, sobald man es einmal getan hat. */
.tb-tipp{
  display:flex;align-items:center;gap:8px;margin:10px 2px 0;font-size:11.5px;line-height:1.4;color:var(--ink-soft);
}
.tt-z{display:flex;flex:none;color:var(--accent-deep);}
.tt-z svg{width:15px;height:15px;}

/* ---------- Suche im Kalender ---------- */
.cal-blatt .ck-such{width:32px;height:32px;}
.cal-blatt .ck-such svg{width:15px;height:15px;}
@container blatt (max-width:300px){
  .cal-blatt .ck-such{width:28px;height:28px;}
}
.kal-suche{margin:2px 2px 10px;}
.kal-ergebnis[hidden]{display:none;}
.ks-anzahl{margin:0 4px 8px;font-size:12px;font-weight:650;color:var(--ink-soft);}
.ks-liste{display:flex;flex-direction:column;gap:6px;}
.ks-zeile{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px 9px 8px;border-radius:16px;cursor:pointer;text-align:left;
  font-family:var(--font-body);color:var(--ink);background:var(--surface);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz);-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder), border-color var(--dur) var(--ease);
}
.ks-zeile:active{transform:scale(.985);transition-duration:.06s;}
.ks-zeile .bu-datum{width:40px;color:var(--ink);}
.ks-zeile .bu-datum{font-size:13px;}
.ks-zeile .bu-txt .n mark, .ks-zeile .bu-txt .s mark{
  color:inherit;border-radius:4px;padding:0 2px;background:var(--accent-soft);
  background:color-mix(in srgb, var(--accent) 24%, transparent);
}
.ks-notiz{font-style:italic;}
.ks-leer, .ks-mehr{margin:6px 4px 4px;font-size:12.5px;line-height:1.5;color:var(--ink-soft);}
@media (hover:hover) and (pointer:fine){ .ks-zeile:hover{border-color:var(--accent);} }
/* Solange Treffer dastehen, ersetzen sie Monatsblatt und Tagblatt. */
.cal-blatt.sucht > .km-monate, .cal-blatt.sucht > .cal-grid, .cal-blatt.sucht > .cal-legende{display:none;}
.cal-blatt.sucht + .tb-halter{display:none;}


/* ---------- Wochenplan: Band, Terminkachel und Tageszeile ----------
   So hat Evi es gewollt (Vorschläge für einen schöneren Wochenplan): das Band
   tönt sich nach der Auslastung, die Kachel trägt Bild mit Ring, Zeichen der
   Leistung und Länge, über dem Tag stehen drei Pillen. */

/* Die Kalenderwoche als kleine Marke vor dem Datum der Woche. */
.ck-kw{
  display:inline-block;margin-right:7px;padding:1px 8px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;
  color:var(--accent-deep);background:var(--accent-soft);
}
@supports (color: color-mix(in srgb, red, blue)){
  .ck-kw{background:color-mix(in srgb, var(--accent) 12%, transparent);}
}

/* Das Band tönt sich wie das Monatsblatt: ein, zwei, ab drei Termine
   (Absagen zählen nicht). Heute bleibt gefüllt, ein geschlossener Tag
   behält seine eigene Farbe (die Klasse kommt dort gar nicht erst). */
@supports (color: color-mix(in srgb, red, blue)){
  .wb-tag.dicht-1:not(.heute){background:color-mix(in srgb, var(--accent) 10%, color-mix(in srgb, var(--surface) 78%, transparent));}
  .wb-tag.dicht-2:not(.heute){background:color-mix(in srgb, var(--accent) 19%, color-mix(in srgb, var(--surface) 78%, transparent));}
  .wb-tag.dicht-3:not(.heute){background:color-mix(in srgb, var(--accent) 30%, color-mix(in srgb, var(--surface) 78%, transparent));}
}
.wb-tag.vorbei[class*="dicht-"]{opacity:.75;}

/* Die Terminkachel: das Bild trägt den Ring der Kundenliste, die Lücke darin
   hat den Ton der Kachel (auch bei „Offen“ und „Stattgefunden“). */
.wk-appt{--kachel:var(--surface);}
.wk-appt.is-open{--kachel:color-mix(in srgb, var(--wait-soft) 45%, var(--surface));}
.wk-appt.is-done{--kachel:color-mix(in srgb, var(--ok-soft) 40%, var(--surface));}
.wk-appt.is-cancelled{--kachel:color-mix(in srgb, var(--off-soft) 45%, var(--surface));}
.wk-appt .avatar.ring-bald{box-shadow:0 0 0 1.5px var(--kachel), 0 0 0 3px var(--kfarbe);}
.wk-appt .avatar.ring-nah{box-shadow:0 0 0 1.5px var(--kachel), 0 0 0 3px var(--line);}
.wk-appt .avatar.ring-nah{box-shadow:0 0 0 1.5px var(--kachel), 0 0 0 3px color-mix(in srgb, var(--kfarbe) 40%, transparent);}
/* Der Textteil misst sich selbst: reicht seine Breite nicht für die Länge,
   fällt die Pille weg - die Uhrzeit von–bis sagt es ohnehin, der Name der
   Leistung geht vor. */
.wk-who{flex:1 1 auto;container:wkwho / inline-size;}
.wk-dauer{
  display:inline-block;margin-left:5px;padding:0 6px;border-radius:999px;vertical-align:1px;
  font-size:10px;font-weight:700;line-height:1.6;color:var(--accent-deep);
  background:var(--accent-soft);
}
@supports (color: color-mix(in srgb, red, blue)){
  .wk-dauer{background:color-mix(in srgb, var(--accent) 12%, transparent);}
}
@container wkwho (max-width:150px){ .wk-dauer{display:none;} }
/* Die Leistung steht in einer eigenen Zeile, mit ihrem Zeichen davor. */
.wk-leistung{
  display:block;margin-top:1px;font-size:11.5px;font-weight:500;line-height:1.3;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wk-lz{display:inline-flex;vertical-align:-3px;margin-right:5px;color:var(--accent-deep);}
.wk-lz svg, .wk-lz .lz-bild{width:14px;height:14px;}
.wk-appt.is-cancelled .wk-lz{opacity:.55;}

/* Die Tageszeile: drei Pillen über dem Tag. `.info-pille` ist der Baustein
   für jede Kurzangabe mit Zeichen (`infoPille()`). */
.tages-zeile{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 12px;}
.info-pille{
  display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;
  padding:4px 8px 4px 6px;border-radius:999px;
  font-size:11.5px;font-weight:650;line-height:1.25;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);
}
@supports (color: color-mix(in srgb, red, blue)){
  .info-pille{background:color-mix(in srgb, var(--surface) 78%, transparent);}
}
.info-pille .ip-z{display:flex;flex:none;color:var(--accent-deep);}
.info-pille .ip-z svg{width:13px;height:13px;}
.info-pille .ip-t{min-width:0;overflow-wrap:anywhere;}
.info-pille.leise{color:var(--ink-soft);}
.info-pille.leise .ip-z{color:var(--ink-soft);}
.info-pille.frei{background:var(--ok-soft);border-color:var(--ok);color:var(--ink);}
.info-pille.frei .ip-z{color:var(--ok);}
.info-pille.knapp{background:var(--wait-soft);border-color:var(--wait);color:var(--ink);}
.info-pille.knapp .ip-z{color:var(--wait);}
@supports (color: color-mix(in srgb, red, blue)){
  .info-pille.frei{border-color:color-mix(in srgb, var(--ok) 45%, transparent);}
  .info-pille.knapp{border-color:color-mix(in srgb, var(--wait) 45%, transparent);}
}

/* Die Kopfzeile des Kalenders hat immer dieselbe Hoehe (so hat Evi es gemeldet:
   beim Wechsel zwischen den Tagen sprang die Seite). Der Knopf zwischen den
   Pfeilen wechselt sein Wort ("Heute", "Morgen", "Sa 26.9.") und war je nach
   Wort breiter oder schmaler - mit der Lupe passte die Zeile nur bei "Heute" auf
   eine Zeile, bei jedem anderen Wort brach sie um (+44 px, alles darunter
   rutschte). Jetzt hat der Knopf eine feste Breite, Pfeile und Lupe sind etwas
   kleiner: die Zeile passt immer oder bricht immer um, nie je nach Wort. */
.cal-blatt .cal-kopf{gap:6px 8px;}
.cal-blatt .ck-titel h1{font-size:20px;}
.cal-blatt .ck-nav{gap:4px;}
.cal-blatt .cal-pfeil, .cal-blatt .ck-such{width:28px;height:28px;}
.cal-blatt .cal-pfeil svg, .cal-blatt .ck-such svg{width:14px;height:14px;}
.cal-blatt .cal-heute{
  width:84px;min-width:0;height:28px;padding:0 6px;font-size:12px;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@container blatt (max-width:300px){
  .cal-blatt .cal-kopf{gap:6px;}
  .cal-blatt .ck-titel h1{font-size:18px;}
  .cal-blatt .ck-nav{gap:3px;}
  .cal-blatt .cal-heute{width:74px;padding:0 4px;font-size:11px;}
}

/* Die Chips unter dem Wochenband (Termine, Aufgaben, To-dos) sind nur drei
   und bleiben ganz im Bild: wird es eng, rutscht der letzte in eine zweite
   Zeile, statt aus der Leiste hinauszurollen (so sähe man den dritten Chip
   nicht). */
.filter-leiste.wo-wahl{flex-wrap:wrap;overflow-x:visible;row-gap:6px;}
@media (max-width:380px){
  .wo-wahl .cf-chip{padding:7px 9px;}
}