/* ---------- 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, .tagblatt.swap-rechts{animation:kmRechts .3s var(--ease) both;}
.cal-grid.kommt-links, .tagblatt.swap-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: 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: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);}