/* ============================================================================
   Family App 2.0 — app.css
   Der Token-Vertrag (Optik als System). Weg B; siehe FamilyApp-2.0_Architektur.md
   und FamilyApp-2.0_Optik.md.

   REGEL ÜBER ALLEM:  Kein Bauteil nennt je einen festen Wert – nur Token.
   Ein Theme ist NUR ein anderer Satz Farb-Token (Größen bleiben global).

   Testbare Regeln (Leitfaden 1 + MOD 8.x), geprüft in tests/kontrast.php:
     - Kontrast >= 4,5:1, gerechnet (Text, Muted, Akzent-Text, Statusfarben); Faint >= 3:1.
     - Tippbare Flaeche >= 40px (--tap); kompakte Nebensteuerung >= 32px (--tap-sm).
     - Ziffern tabellarisch (font-variant-numeric: tabular-nums).
     - EIN Umbruchpunkt: 720px.
     - Bewegung nur bei prefers-reduced-motion: no-preference.
     - Jedes Theme setzt den VOLLEN Farbsatz (keine stille Vererbung).
     - Gedaempft statt versteckt; Leitfrage pro Ansicht (je View dokumentiert).

   TIEFE (3D) – ab 25.08.2026, ebenfalls nur ueber Token:
     - Zwei Rollen, nie gemischt: BEDIENBAR ist erhaben (--sh-1/--sh-2 + --hi),
       EINGABE ist eingelassen (--sunk). Daran erkennt man, was man druecken kann.
     - Gedrueckt/aktiv = eingelassen (--sunk) + 1px nach unten: die Bewegung
       kommt aus derselben Staffel, nie aus einem Sonderwert.
     - Licht kommt IMMER von oben (--hi = helle Oberkante, --lo = dunkle Unterkante).
     - Tiefe ersetzt nie den Kontrast: Rahmen und Textfarbe bleiben, wie geprueft.
     - Tiefen-Token sind hell in :root und werden im dunklen Theme ueberschrieben
       (bewusste Ausnahme zur Farbregel: Tiefe kennt nur hell/dunkel, kein Theme).
   ========================================================================== */

/* ---- 1. Groessen-Token (global, themeunabhaengig) + Standardtheme "Lila" -- */
:root{
  --space-1:3px; --space-2:6px; --space-3:10px; --space-4:13px; --space-5:20px; --space-6:28px;
  --fs-0:11px; --fs-1:12px; --fs-2:14px; --fs-3:16px; --fs-4:21px;
  --radius:11px; --radius-sm:7px;
  --shadow:0 4px 14px rgba(20,10,50,.10);
  --tap:40px; --tap-sm:32px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);

  /* Tiefen-Token (3D): hell. Das dunkle Theme setzt sie neu. */
  --sh-1:0 1px 1px rgba(20,10,50,.07), 0 2px 5px rgba(20,10,50,.14);
  --sh-2:0 2px 4px rgba(20,10,50,.10), 0 6px 16px rgba(20,10,50,.15);
  --sh-3:0 12px 32px rgba(20,10,50,.28);
  --hi:inset 0 1px 0 rgba(255,255,255,.95);
  --lo:inset 0 -1px 0 rgba(20,10,50,.11);
  --sunk:inset 0 2px 5px rgba(20,10,50,.18), inset 0 -1px 0 rgba(255,255,255,.55);
  --glaze:linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,0) 60%);

  /* Kategorie-Token fuer den Zeitstrahl (TAG-12) und den spaeteren Terminplaner.
     Eine Kategorie = eine Farbe, ueberall dieselbe. Neue Kategorie = neues Token,
     kein neuer Sonderwert im Bauteil. Wie die Fachfarben nur hell/dunkel. */
  --cat-schule:#2f57c8;    /* Unterricht        */
  --cat-pause:#c98a00;     /* Pause/Freistunde  */
  --cat-frei:#2f8f5b;      /* unverplante Zeit  */
  --cat-weg:#6b7280;       /* Schulweg (hin/zurueck)       */
  --cat-mensa:#0e7490;     /* Mittagessen                  */
  --cat-sport:#c2410c;     /* reserviert: Sport            */
  --cat-musik:#7c3aed;     /* reserviert: Chor/Musik       */
  --cat-sozial:#b8156b;    /* Freunde/Verabredungen        */
  --cat-sonstiges:#6b7280; /* reserviert: alles Weitere    */

  /* Farb-Token: Standardtheme "Lila" (hell) */
  --bg:#f4f2fa; --surface:#ffffff; --surface-alt:#efeafd;
  --text:#1c1630; --text-muted:#5b5470; --text-faint:#8b849b;
  --border:#e7e1f3; --border-strong:#cfc6e6;
  --accent:#5a3ec0; --accent-text:#ffffff;
  --entfall:#b5352b; --vertretung:#8a5e00; --ok:#2e7d52;
  --ka:#ffe14d; --ka-text:#3a2c00;
  --hw-shift:#1d4ed8;
  /* Temperatur-Skala (TAG-15): kalt -> warm, wie auf einer Wetterkarte.
     Sechs Stufen genuegen fuer einen Schulweg; die Toene sind so dunkel gewaehlt,
     dass die Zahl auf JEDER Flaeche lesbar bleibt (auch im Briefing auf
     --surface-alt) – geprueft in tests/kontrast.php. */
  --temp-1:#6d28d9;  /* unter 0  – eisig  */
  --temp-2:#0e63c4;  /*  0 bis 7 – kalt   */
  --temp-3:#0d6a83;  /*  7 bis 14 – kuehl */
  --temp-4:#136b34;  /* 14 bis 20 – mild  */
  --temp-5:#a04a08;  /* 20 bis 27 – warm  */
  --temp-6:#b91c1c;  /* ab 27    – heiss  */
  /* Zwoelf Fachfarben. Sie muessen sich UNTERSCHEIDEN, nicht nur huebsch sein:
     tests/kontrast.php rechnet den Abstand jedes Paares (CIE76) und schlaegt an,
     wenn zwei zu aehnlich werden. subj-8 war frueher ein zweites Violett neben
     subj-1 (Abstand 8) – kaum auseinanderzuhalten; jetzt Magenta. */
  --subj-1:#5a3ec0; --subj-2:#176575; --subj-3:#b5352b; --subj-4:#2f6b39;
  --subj-5:#9e2a63; --subj-6:#8a5e00; --subj-7:#2f57c8; --subj-8:#c026a3;
  --subj-9:#0f766e; --subj-10:#a14e00; --subj-11:#4d7c0f; --subj-12:#4b5563;
}

/* ---- 2. Weitere Themes = nur ein anderer Farbsatz ------------------------ */
html[data-theme="ozean"]{
  --bg:#eef6f8; --surface:#ffffff; --surface-alt:#e2eef1;
  --text:#0f2a33; --text-muted:#48606a; --text-faint:#6d848e;
  --border:#d6e6ea; --border-strong:#bcd3d9;
  --accent:#176575; --accent-text:#ffffff;
  --entfall:#b23a2e; --vertretung:#8a5e00; --ok:#2e7d52;
  --ka:#ffe14d; --ka-text:#3a2c00;
  --hw-shift:#1d4ed8;
}
html[data-theme="sonne"]{
  --bg:#fdf6e9; --surface:#ffffff; --surface-alt:#fbeecb;
  --text:#33280f; --text-muted:#6b5a34; --text-faint:#9a875a;
  --border:#f0e2c2; --border-strong:#e2cea0;
  --accent:#f2b01e; --accent-text:#2c2205;
  --entfall:#b5352b; --vertretung:#8a5e00; --ok:#2e7d52;
  --ka:#ffe14d; --ka-text:#3a2c00;
  --hw-shift:#1d4ed8;
}
html[data-theme="wald"]{
  --bg:#eef5ee; --surface:#ffffff; --surface-alt:#e3efe4;
  --text:#16261a; --text-muted:#48604c; --text-faint:#6c8470;
  --border:#dbe8dc; --border-strong:#c1d6c3;
  --accent:#2f6b39; --accent-text:#ffffff;
  --entfall:#b23a2e; --vertretung:#8a5e00; --ok:#2e7d52;
  --ka:#ffe14d; --ka-text:#3a2c00;
  --hw-shift:#1d4ed8;
}
html[data-theme="beere"]{
  --bg:#faf0f4; --surface:#ffffff; --surface-alt:#f6e2ea;
  --text:#2b1420; --text-muted:#6b4a58; --text-faint:#9a7986;
  --border:#f0dae4; --border-strong:#e2bfd0;
  --accent:#9e2a63; --accent-text:#ffffff;
  --entfall:#b5352b; --vertretung:#8a5e00; --ok:#2e7d52;
  --ka:#ffe14d; --ka-text:#3a2c00;
  --hw-shift:#1d4ed8;
}
html[data-theme="schiefer"]{   /* dunkel */
  --bg:#14161c; --surface:#1e222b; --surface-alt:#262b36;
  --text:#eef1f6; --text-muted:#a6adba; --text-faint:#79808d;
  --border:#313846; --border-strong:#444d5e;
  --accent:#8b7be8; --accent-text:#14161c;
  --entfall:#ff6b5e; --vertretung:#e0a63a; --ok:#57c98a;
  --ka:#e8c02f; --ka-text:#1a1400;
  --hw-shift:#7aa2ff;
  --temp-1:#a78bfa; --temp-2:#60a5fa; --temp-3:#22d3ee;
  --temp-4:#4ade80; --temp-5:#fbbf24; --temp-6:#f87171;
  --subj-1:#8b7be8; --subj-2:#3fb0c4; --subj-3:#ff6b5e; --subj-4:#57c98a;
  --subj-5:#e06aa0; --subj-6:#e0a63a; --subj-7:#60a5fa; --subj-8:#b79ae0;
  --subj-9:#2dd4bf; --subj-10:#f59e0b; --subj-11:#a3d94f; --subj-12:#a8b3c4;
  /* Tiefe im Dunkeln: Schatten tragen weniger, die Lichtkante wird zart */
  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 2px 6px rgba(0,0,0,.50), 0 1px 2px rgba(0,0,0,.35);
  --sh-3:0 12px 32px rgba(0,0,0,.60);
  --hi:inset 0 1px 0 rgba(255,255,255,.11);
  --lo:inset 0 -1px 0 rgba(0,0,0,.35);
  --sunk:inset 0 2px 5px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.05);
  --glaze:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 62%);
  /* Kategorien im Dunkeln aufhellen, damit sie auf dunklem Grund tragen */
  --cat-schule:#6f8cf0; --cat-pause:#e0a63a; --cat-frei:#57c98a;
  --cat-weg:#9ca3af; --cat-mensa:#22d3ee;
  --cat-sport:#f97316; --cat-musik:#a78bfa; --cat-sozial:#f472b6; --cat-sonstiges:#9ca3af;
}

/* ---- 3. Reset & Basis (nutzt nur Token) --------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
/* Der Scrollbalken darf die Breite nicht veraendern: sonst wandert der zentrierte
   Inhalt um ein paar Pixel, sobald ein Tag laenger oder kuerzer ist. */
html{ -webkit-text-size-adjust:100%; scrollbar-gutter:stable; overflow-y:scroll }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  font-size:var(--fs-2); line-height:1.5;
  padding-top:var(--safe-top); padding-bottom:var(--safe-bottom);
}
h1,h2,h3{ margin:0 }
button,input,select,textarea{ font:inherit; color:inherit }
:where(button,a,[role="button"]){ -webkit-tap-highlight-color:transparent }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
time,.tabnum{ font-variant-numeric:tabular-nums }   /* Ziffern springen nicht */

/* ---- 4. Primitiven (wachsen Feature fuer Feature) ----------------------- */
/* Karte = erhabene Flaeche (Licht von oben, Schatten darunter) */
.card{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--sh-2), var(--hi); overflow:hidden }
.card__head{ background:var(--accent); color:var(--accent-text);
  padding:var(--space-2) var(--space-3); font-weight:600; font-size:var(--fs-2);
  background-image:var(--glaze); box-shadow:var(--lo) }
.card__body{ padding:var(--space-3); display:flex; flex-direction:column; gap:var(--space-2) }
/* Klappbarer Kopf: der Kopf IST der Schalter (selten gebrauchte Bereiche) */
.card__head--fold{ display:flex; align-items:center; gap:var(--space-2); width:100%;
  border:none; cursor:pointer; font:inherit; font-weight:600; text-align:left }
.card__chev{ opacity:.85; font-size:var(--fs-1); width:1em }
.card__title{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.card__hint{ font-size:var(--fs-0); font-weight:400; opacity:.85; white-space:nowrap }
/* Kopfzeile des Einstellungsbereichs: Kinder links, Abmelden rechts */
.einst-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap }

.muted{ color:var(--text-muted); font-size:var(--fs-1) }
.faint{ color:var(--text-faint); font-size:var(--fs-1) }

/* Knopf = erhaben; gedrueckt = eingelassen + 1px tiefer (aus derselben Staffel) */
.btn{ display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:0 var(--space-4);
  border:none; border-radius:var(--radius-sm); cursor:pointer;
  background:var(--accent); background-image:var(--glaze);
  color:var(--accent-text); font-weight:600; font-size:var(--fs-2);
  box-shadow:var(--sh-1), var(--hi), var(--lo) }
.btn--quiet{ background:var(--surface-alt); background-image:var(--glaze);
  color:var(--text); border:1px solid var(--border) }
.btn:active:not([disabled]){ transform:translateY(1px); box-shadow:var(--sunk) }
.btn[disabled]{ opacity:.6; box-shadow:none }

/* Statuspille: Text in Statusfarbe, Flaeche als getoente Statusfarbe */
.pill{ display:inline-block; padding:2px var(--space-2); border-radius:999px;
  font-size:var(--fs-1); border:1px solid transparent }
.pill--entfall{ color:var(--entfall);
  background:color-mix(in srgb,var(--entfall) 14%,transparent);
  border-color:color-mix(in srgb,var(--entfall) 34%,transparent) }
.pill--vertretung{ color:var(--vertretung);
  background:color-mix(in srgb,var(--vertretung) 14%,transparent);
  border-color:color-mix(in srgb,var(--vertretung) 34%,transparent) }
.pill--ok{ color:var(--ok);
  background:color-mix(in srgb,var(--ok) 14%,transparent);
  border-color:color-mix(in srgb,var(--ok) 34%,transparent) }

/* Layout + Formular */
.center{ min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:var(--space-4); padding:var(--space-5) }
/* Inhaltsreiche Ansichten (Tag/Einstellungen) oben ausrichten – kein Leerraum-Kopf */
.center--top{ justify-content:flex-start; padding-top:var(--space-4) }
.stack{ display:flex; flex-direction:column; gap:var(--space-3) }
.card.stack{ width:min(92%,360px) }
.field{ display:flex; flex-direction:column; gap:var(--space-1) }
/* Eingabe = eingelassen (--sunk): so unterscheidet sie sich vom Knopf */
.input{ width:100%; min-height:var(--tap); padding:0 var(--space-3);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); font-size:var(--fs-2);
  box-shadow:var(--sunk) }
.input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent) }
select.input{ appearance:auto; box-shadow:var(--sh-1), var(--hi) }   /* Auswahl ist bedienbar, nicht Eingabe */
/* Offline-Key / Codes: gut lesbar, ganz markierbar – nur Token */
.code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--fs-2); letter-spacing:.04em; word-break:break-all; text-align:center;
  background:var(--surface-alt); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:var(--space-3); user-select:all }
.themes{ display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:center; max-width:360px }
.chip{ cursor:pointer; min-height:var(--tap-sm); padding:0 var(--space-3); border-radius:999px;
  border:1px solid var(--border); background:var(--surface); background-image:var(--glaze);
  color:var(--text); font-size:var(--fs-1); box-shadow:var(--sh-1), var(--hi) }
/* gewaehlt = gedrueckt: eingelassen statt erhaben */
.chip--on{ background:var(--accent); background-image:none; color:var(--accent-text);
  border-color:transparent; box-shadow:var(--sunk) }
.chip:active{ transform:translateY(1px) }

/* ---- 5. Der EINE Umbruchpunkt ------------------------------------------- */
@media (min-width:720px){
  .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5) }
}
@media (prefers-reduced-motion: no-preference){
  .card,.btn,.chip,.input,.nav-btn,.ic-btn,.mopt,.lesson,.todo-item{
    transition:background .2s ease, color .2s ease, border-color .2s ease,
               box-shadow .15s ease, transform .08s ease }
}

/* ---- 6. Tagesansicht (Entwurf 1) --------------------------------------- */
/* Fachfarben --subj-1..12 sind in :root (hell) und im schiefer-Theme (dunkel)
   definiert; hier nur die Zuweisung an --sc. Kategorie-Farbe, kein Layout. */
.subj-1{--sc:var(--subj-1)} .subj-2{--sc:var(--subj-2)} .subj-3{--sc:var(--subj-3)} .subj-4{--sc:var(--subj-4)}
.subj-5{--sc:var(--subj-5)} .subj-6{--sc:var(--subj-6)} .subj-7{--sc:var(--subj-7)} .subj-8{--sc:var(--subj-8)}
.subj-9{--sc:var(--subj-9)} .subj-10{--sc:var(--subj-10)} .subj-11{--sc:var(--subj-11)} .subj-12{--sc:var(--subj-12)}

.day{ width:min(94%,540px); display:flex; flex-direction:column; gap:var(--space-3) }
.daybar{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); min-width:0 }
.daybar__date{ font-weight:600; white-space:nowrap }
.nav-btn{ min-width:var(--tap-sm); min-height:var(--tap-sm); display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--surface-alt); background-image:var(--glaze);
  color:var(--text); border-radius:var(--radius-sm); cursor:pointer;
  box-shadow:var(--sh-1), var(--hi) }
.nav-btn:active{ transform:translateY(1px); box-shadow:var(--sunk) }
.kidrow{ display:flex; flex-wrap:wrap; gap:var(--space-2) }
/* Terminmaske: zwei schmale Felder nebeneinander (von/bis, Art/Anfahrt) –
   auf schmalen Geraeten bricht das Raster von selbst auf eine Spalte um. */
.trm-2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(9em, 1fr)); gap:var(--space-2) }
.trm-form{ background:var(--surface-alt) }
.trm-form__head{ font-weight:700; font-size:var(--fs-1) }
.trm-form .field{ min-width:0 }
.summary{ font-weight:600 }
/* Schulzeiten kompakt in EINER Zeile; Abweichung vom Normaltag farbig */
/* Umbrechen statt abschneiden: mit Wetter und Temperatur passt die Zeile auf
   einem Telefon nicht mehr in eine Reihe. Die beiden Gruppen bleiben je fuer
   sich zusammen – gebrochen wird nur zwischen ihnen. */
/* Wieder EINE Zeile: dafuer ist „(x. Std)" entfallen – welche Stunde die letzte
   ist, steht ohnehin in der Stundenliste darunter. Umbrechen bleibt erlaubt,
   passiert aber erst unterhalb von ~340px Geraetebreite; abschneiden waere die
   schlechtere Wahl, und einen zweiten Umbruchpunkt braucht es dafuer nicht. */
.summary--times{ display:flex; align-items:baseline; flex-wrap:wrap;
  column-gap:var(--space-2); row-gap:2px; font-size:var(--fs-2) }
.summary__grp{ display:inline-flex; align-items:baseline; gap:var(--space-2); white-space:nowrap }
/* Eine Stufe kleiner als die Zeiten: bei 360px Geraetebreite fehlte sonst genau
   ein Pixel, und die Zeile brach um. Die Beschriftung ist der leiseste Teil der
   Zeile – sie darf als erste nachgeben. */
.summary__lbl{ color:var(--text-muted); font-weight:400; font-size:var(--fs-0) }
.summary__sep{ color:var(--text-faint) }
.summary__t{ font-weight:700 }
.summary__std{ color:var(--text-muted); font-weight:400; font-size:var(--fs-1); margin-left:auto; white-space:nowrap }
.t-earlier{ color:var(--ok) }
.t-later{ color:var(--entfall) }
.lessons{ display:flex; flex-direction:column; gap:var(--space-2) }
/* OPT-03: ganze Stunde blass in der Fachfarbe (nicht nur der Rand) */
.lesson{ display:flex; flex-direction:column; gap:var(--space-1);
  background:color-mix(in srgb, var(--sc,var(--border-strong)) 12%, var(--surface));
  background-image:var(--glaze);
  border:1px solid var(--border); border-left:4px solid var(--sc,var(--border-strong));
  border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3);
  box-shadow:var(--sh-1), var(--hi), var(--lo) }
/* Zwei Zeilen: [Nr] [Fach] [Raum] [Zeit] / darunter die Lehrkraft ueber die Breite.
   Raum in eigener, rechtsbuendiger Spalte -> tabellarisch lesbar. */
.lesson__row{ display:grid; grid-template-columns:1.9em 1fr auto auto;
  column-gap:var(--space-2); row-gap:1px; align-items:baseline }
.lesson__no{ grid-column:1; grid-row:1 }
/* Der NAME darf gekuerzt werden, die Statuszeichen daneben NIE: sie sind der
   Grund, warum man hinsieht. Deshalb kuerzt nur der innere Span, die Abzeichen
   und der Punkt stehen als eigene, unkuerzbare Elemente daneben. */
.lesson__fach{ grid-column:2; grid-row:1; min-width:0; overflow:hidden;
  display:flex; align-items:baseline; gap:var(--space-2) }
/* Der Name darf gekuerzt werden – aber nie auf null. Ein Rest von rund vier
   Zeichen bleibt immer stehen; lieber ein abgeschnittenes „Mathem…" als eine
   leere Stelle, an der einmal ein Fach stand (E-34). */
.lesson__fachname{ min-width:3.4em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* Abzeichen in Zeile 2: gleiche Farben, nur ohne den linken Abstand, denn dort
   beginnt die Zeile. */
.lesson__meta .lesson__badge{ margin-left:0; margin-right:var(--space-2) }
.lesson__badge, .hw-dot{ flex:0 0 auto; margin-left:0 }
.lesson__raum{ grid-column:3; grid-row:1; text-align:right; white-space:nowrap;
  color:var(--text-muted); font-size:var(--fs-1); font-variant-numeric:tabular-nums }
.lesson__time{ grid-column:4; grid-row:1 }
.lesson__meta{ grid-column:2 / -1; grid-row:2 }
/* einzeilige Sonderfaelle (Frei) */
.lesson__row--one{ align-items:center }
.lesson__row--one .lesson__frei{ grid-column:2 / -1; grid-row:1 }
.lesson__no{ font-weight:700; color:var(--text-muted); text-align:center; font-variant-numeric:tabular-nums; align-self:start }
.lesson__fach{ font-weight:600 }
/* Garantiert einzeilig: die Kachel bleibt bei zwei Zeilen, egal wie lang der Name ist */
.lesson__meta{ color:var(--text-muted); font-size:var(--fs-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.lesson__time{ color:var(--text-faint); font-size:var(--fs-1); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
/* „Jetzt" (TAG-16): die Stunde, die gerade läuft.
   BEWUSST NEUTRAL (`--text`), nicht bunt: „jetzt" ist kein Zustand wie Entfall
   oder Arbeit, sondern eine Stelle in der Zeit. Die Statusfarben bleiben frei
   für das, was gut oder schlecht ist – und Neutral steht auf jeder Fachfarbe.
   Dieselbe Sprache wie die Jetzt-Marke im Zeitstrahl (`.tl-now`): ein Balken. */
.lesson{ position:relative }
.lesson--jetzt::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--text); border-radius:var(--radius-sm) 0 0 var(--radius-sm) }
.lesson--jetzt{ background:color-mix(in srgb, var(--sc,var(--border-strong)) 20%, var(--surface));
  box-shadow:var(--sh-2), var(--hi) }
/* Die Uhrzeit trägt die Auszeichnung – sie ist der Grund, warum die Zeile auffällt. */
.lesson__time--jetzt{ color:var(--text); font-weight:700 }
/* Ein Wort, nicht nur eine Farbe: wer Farben schlecht unterscheidet, liest „jetzt". */
.lesson__jetzt{ display:inline-block; margin-right:var(--space-2); padding:0 4px;
  font-size:9px; font-weight:700; letter-spacing:.02em;
  background:var(--text); color:var(--surface); border-radius:var(--radius-sm) }

/* TAG-03: Abweichung = blassere Variante DERSELBEN Fachfarbe + Hinweis-Badge (Farbe bleibt erkennbar) */
.lesson--vertretung{ background:color-mix(in srgb, var(--sc,var(--border-strong)) 6%, var(--surface)) }
.lesson--entfall{ background:color-mix(in srgb, var(--sc,var(--border-strong)) 5%, var(--surface)); opacity:.72 }
.lesson--entfall .lesson__fach{ text-decoration:line-through; text-decoration-color:var(--entfall); text-decoration-thickness:2px }
.lesson--alt{ border-left-style:dashed }
.lesson__badge{ display:inline-block; margin-left:var(--space-2); padding:0 var(--space-2); border-radius:999px;
  font-size:var(--fs-0); font-weight:700; vertical-align:middle; border:1px solid transparent }
.lesson__badge--vertretung{ color:var(--vertretung);
  background:color-mix(in srgb,var(--vertretung) 14%,transparent); border-color:color-mix(in srgb,var(--vertretung) 34%,transparent) }
.lesson__badge--entfall{ color:var(--entfall);
  background:color-mix(in srgb,var(--entfall) 14%,transparent); border-color:color-mix(in srgb,var(--entfall) 34%,transparent) }
/* Kurswahl-Zeile (Mehrfachbelegung) + kleiner, aber voll tippbarer Knopf */
.chooserow{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap }
.lesson__choose{ border-top:1px dashed var(--border-strong); padding-top:var(--space-2) }
.btn--mini{ min-height:var(--tap); padding:0 var(--space-3); border-radius:var(--radius-sm);
  background:var(--surface-alt); color:var(--text); border:1px solid var(--border-strong);
  font-size:var(--fs-1); font-weight:600 }
/* A/B-Wochen-Abzeichen in der Datumszeile (accent-text auf accent = geprueft) */
.wk{ margin-left:var(--space-2); padding:1px var(--space-2); border-radius:999px;
  font-size:var(--fs-0); font-weight:700; color:var(--accent-text); background:var(--accent) }
/* Mittagessen (MEN) – eigener Block im Tagesablauf */
.mensa{ display:flex; flex-direction:column; gap:var(--space-2);
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3) }
.mensa__status{ font-weight:600 }
/* Eltern-Mensa: Tage + Optionskacheln (MEN-06) */
.mday{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3); box-shadow:var(--sh-1), var(--hi);
  background:var(--surface); display:flex; flex-direction:column; gap:var(--space-2) }
.mday__date{ font-weight:700; font-size:var(--fs-1) }
.mopts{ display:flex; flex-direction:column; gap:var(--space-2) }
.mopt{ display:flex; flex-direction:column; gap:1px; text-align:left; cursor:pointer; min-height:var(--tap);
  background-image:var(--glaze); box-shadow:var(--sh-1), var(--hi), var(--lo);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--text);
  padding:var(--space-2) var(--space-3) }
.mopt b{ font-size:var(--fs-1) }
.mopt__desc{ color:var(--text-muted); font-size:var(--fs-1) }
.mopt--on{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--surface));
  background-image:none; box-shadow:var(--sunk) }
.mopt:active{ transform:translateY(1px) }
.mopt--on b{ color:var(--accent) }
/* Hausaufgaben-Punkt am Fach (TAG-04): rot = offen, grün = erledigt */
.hw-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-left:var(--space-2); vertical-align:middle }
.hw-dot--red{ background:var(--entfall) }
.hw-dot--green{ background:var(--ok) }
/* TAG-14: es gibt eine Hausaufgabe, sie ist aber angeblich nicht fuer diesen Tag.
   Eigene Farbe, damit man SIEHT, dass verschoben wurde – ein stiller Punkt waere
   genau die Gelegenheit, die hier niemand nutzen soll. Der Ring macht zusaetzlich
   klar: dasselbe Ding wie rot, nur weggeschoben. */
/* Marke „verschoben" in der To-do-Liste und Hinweis im Detail */
.hw-shift-mark{ color:var(--hw-shift); font-weight:700; margin-right:var(--space-1) }
.pill--shift{ color:var(--hw-shift);
  background:color-mix(in srgb,var(--hw-shift) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--hw-shift) 34%,transparent) }
.hwdet__due{ border-top:1px dashed var(--border-strong); padding-top:var(--space-2) }
.hw-dot--shift{ background:var(--hw-shift); box-shadow:0 0 0 2px color-mix(in srgb,var(--hw-shift) 30%,transparent) }
.lesson__row--tap{ cursor:pointer }
/* HA-Popup (Sheet über Overlay) */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:50;
  display:flex; align-items:flex-end; justify-content:center; padding:var(--space-3) }
@media (min-width:720px){ .overlay{ align-items:center } }
.sheet{ width:min(96vw,460px); max-height:82dvh; overflow:auto; box-shadow:var(--sh-3), var(--hi);
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow) }
.sheet__head{ position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  padding:var(--space-3) var(--space-4); background:var(--accent); color:var(--accent-text); font-weight:600 }
.sheet__x{ min-width:var(--tap); min-height:var(--tap); border:none; background:transparent; color:var(--accent-text);
  font-size:var(--fs-3); cursor:pointer }
.sheet__body{ padding:var(--space-4) }
.hwrow{ box-shadow:var(--sh-1), var(--hi); display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3);
  border:1px solid var(--border); border-left:4px solid var(--ok); border-radius:var(--radius-sm); background:var(--surface) }
.hwrow input{ width:22px; height:22px; margin-top:1px; flex:none; accent-color:var(--accent); cursor:pointer }
.hwrow--done{ border-left-color:var(--text-faint); opacity:.75 }
.hwrow--done .hwrow__thema{ text-decoration:line-through; color:var(--text-muted) }
.hwrow__thema{ font-weight:600 }
.hwrow__text{ font-size:var(--fs-2) }
/* Eltern-Ansicht: Fachfarben-Auswahl (CFG-09) */
.subjrow{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap;
  padding:var(--space-2) var(--space-3); border:1px solid var(--border); border-left:4px solid var(--sc,var(--border-strong));
  border-radius:var(--radius-sm); background:color-mix(in srgb, var(--sc,var(--border-strong)) 12%, var(--surface)) }
.subjrow__name{ font-weight:600 }
.swatches{ display:flex; gap:var(--space-2); flex-wrap:wrap }
.swatch{ width:var(--tap-sm); height:var(--tap-sm); border-radius:50%; border:2px solid var(--border);
  background:var(--sc); background-image:var(--glaze); padding:0; cursor:pointer; box-shadow:var(--sh-1), var(--hi) }
.swatch--on{ outline:2px solid var(--text); outline-offset:2px; border-color:var(--surface) }
.hw{ display:flex; flex-direction:column; gap:var(--space-2) }
.hw__item{ border:1px solid var(--border); border-left:4px solid var(--sc,var(--border-strong));
  border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3);
  background:color-mix(in srgb, var(--sc,var(--border-strong)) 10%, var(--surface)) }
.hw__fach{ font-weight:600; font-size:var(--fs-1) }
.hw__text{ font-size:var(--fs-2) }

/* To-do (Hausaufgaben nach Fälligkeit) */
.todo{ gap:var(--space-3) }
.todo-group{ display:flex; flex-direction:column; gap:var(--space-2) }
.todo-group__head{ font-weight:700; font-size:var(--fs-1) }
.todo--overdue .todo-group__head{ color:var(--entfall) }
.todo--today .todo-group__head{ color:var(--accent) }
.todo--soon .todo-group__head{ color:var(--text) }
.todo--later .todo-group__head{ color:var(--text-muted) }
.todo--today .todo-item{ border-color:color-mix(in srgb, var(--accent) 45%, var(--border)) }
.todo--today .todo-item__due{ color:var(--accent); font-weight:700 }
.todo-item{ display:grid; grid-template-columns:auto 1fr; gap:var(--space-2); align-items:start;
  border:1px solid var(--border); border-left:4px solid var(--sc,var(--border-strong)); border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-3); background:color-mix(in srgb, var(--sc,var(--border-strong)) 10%, var(--surface));
  background-image:var(--glaze); cursor:pointer; box-shadow:var(--sh-1), var(--hi), var(--lo) }
.todo--overdue .todo-item{ border-color:color-mix(in srgb, var(--entfall) 45%, var(--border)) }
.todo-item input{ width:20px; height:20px; margin-top:2px; flex:0 0 auto; accent-color:var(--accent) }
.todo-item__head{ display:flex; justify-content:space-between; gap:var(--space-2); align-items:baseline; flex-wrap:wrap }
.todo-item__fach{ font-weight:600 }
.todo-item__due{ font-size:var(--fs-0); color:var(--text-muted); white-space:nowrap }
.todo--overdue .todo-item__due{ color:var(--entfall); font-weight:700 }
.todo-item__thema{ font-size:var(--fs-1) }
.todo-item__body{ cursor:pointer; min-width:0 }
.hwdet__thema{ font-weight:600 }
.hwdet__text{ font-size:var(--fs-2) }
.hwdet__meta{ display:flex; flex-direction:column; gap:2px; font-size:var(--fs-1);
  border-top:1px solid var(--border); padding-top:var(--space-2) }
.hwdet__now{ color:var(--accent); font-weight:700 }
.hwdet__done{ display:inline-flex; align-items:center; gap:var(--space-2); cursor:pointer }
.hwdet__done input{ width:20px; height:20px; accent-color:var(--accent) }
.todo-item--done{ opacity:.6 }
.todo-item--done .todo-item__fach{ text-decoration:line-through }
.todo-toggle{ align-self:flex-start; background:transparent; border:none; color:var(--text-muted); cursor:pointer; font:inherit; padding:var(--space-1) 0 }
/* Lehrer-Uebersicht (CFG-06): ruhige Zwei-Spalten-Liste, scrollt bei Bedarf */
.lehrerlist{ display:flex; flex-direction:column; max-height:15em; overflow-y:auto;
  border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--sunk) }
.lehrerrow{ display:grid; grid-template-columns:3.4em 1fr; gap:var(--space-2); align-items:baseline;
  padding:var(--space-1) var(--space-2); font-size:var(--fs-1) }
.lehrerrow:nth-child(odd){ background:color-mix(in srgb, var(--text) 4%, transparent) }
.lehrerrow__k{ font-weight:700; font-variant-numeric:tabular-nums }
.lehrerrow__n{ color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ---- Zeitstrahl (TAG-12): der Tag als Band ------------------------------- */
.tl{ display:flex; flex-direction:column; gap:var(--space-1) }
.tl-row{ display:flex; align-items:center; gap:var(--space-2) }
.tl-row__name{ width:4.6em; flex:0 0 auto; font-size:var(--fs-0); color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* Das Band selbst: Hintergrund = unverplante Zeit (gruen), Bloecke liegen darauf */
.tl-band{ position:relative; flex:1 1 auto; height:22px; border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--cat-frei) 26%, var(--surface));
  border:1px solid var(--border); box-shadow:var(--sunk); overflow:hidden }
.tl-blk{ position:absolute; top:0; bottom:0; background:var(--c);
  background-image:var(--glaze); box-shadow:var(--hi), var(--lo) }
.tl-blk--unterricht{ --c:color-mix(in srgb, var(--cat-schule) 78%, var(--surface)) }
.tl-blk--pause{ --c:color-mix(in srgb, var(--cat-pause) 62%, var(--surface)) }
.tl-blk--weg{ --c:color-mix(in srgb, var(--cat-weg) 48%, var(--surface)) }
.tl-blk--mensa{ --c:color-mix(in srgb, var(--cat-mensa) 70%, var(--surface)) }
/* angetippter Block hervorheben */
.tl-blk--sel{ outline:2px solid var(--text); outline-offset:-2px }
.tl-band{ cursor:pointer }
/* „Hier geht es weiter" (E-30): der Ausschnitt bleibt stehen, ein Pfeil zeigt,
   dass davor oder danach etwas liegt. Der Pfeil sitzt IM Band, damit die Bänder
   der Kinder untereinander gleich breit bleiben, und bringt seine eigene Fläche
   mit – sonst wäre er auf einem Block nicht zu lesen. */
.tl-mehr{ position:absolute; top:0; bottom:0; width:12px; padding:0; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; font-weight:700;
  color:var(--text); background:color-mix(in srgb, var(--surface) 82%, transparent) }
.tl-mehr--links { left:0;  border-radius:var(--radius-sm) 0 0 var(--radius-sm) }
.tl-mehr--rechts{ right:0; border-radius:0 var(--radius-sm) var(--radius-sm) 0 }
/* Detailzeile unter dem Band (statt Text IM Band – dafuer ist es zu schmal) */
/* Die Zeile haelt ihre Hoehe frei, damit beim Antippen nichts springt – aber
   knapp: leer ist sie der Preis fuer eine ruhige Seite, nicht ein Gestaltungsmittel. */
.tl-detail{ display:flex; align-items:baseline; gap:var(--space-1);
  font-size:var(--fs-1); color:var(--text); min-height:1.2em; line-height:1.2 }
.tl-detail__x{ margin-left:auto; flex:0 0 auto; border:0; background:transparent; cursor:pointer;
  color:var(--text-muted); font-size:var(--fs-1); line-height:1; padding:0 var(--space-2) }
.tl-detail__x:hover{ color:var(--text) }
.tl-detail__t{ font-weight:700; font-variant-numeric:tabular-nums }
/* „Jetzt"-Marke nur am heutigen Tag */
.tl-now{ position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--text);
  box-shadow:0 0 0 1px var(--surface) }
/* Stundenraster darunter */
.tl-scale{ position:relative; height:1.1em; margin-left:calc(4.6em + var(--space-2)) }
.tl-tick{ position:absolute; top:0; font-size:var(--fs-0); color:var(--text-faint); white-space:nowrap }
/* Rechtsbuendig unter dem Raster: die Legende erklaert das Band, sie ist keine
   eigene Ueberschrift – und links davon steht ohnehin die Namensspalte. */
.tl-legend{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--space-2);
  font-size:var(--fs-0); color:var(--text-muted); margin-top:calc(-1 * var(--space-1)) }
.tl-key{ display:inline-flex; align-items:center; gap:4px }
.tl-key::before{ content:''; width:9px; height:9px; border-radius:2px; background:var(--c);
  box-shadow:var(--hi) }
.tl-key--unterricht{ --c:var(--cat-schule) }
.tl-key--pause{ --c:var(--cat-pause) }
.tl-key--frei{ --c:color-mix(in srgb, var(--cat-frei) 26%, var(--surface)) }
.tl-key--weg{ --c:var(--cat-weg) }
.tl-key--mensa{ --c:var(--cat-mensa) }
/* Termine (TER-01): Farbe kommt aus der Kategorie, nicht aus dem Einzelfall */
.tl-blk--termin{ --c:color-mix(in srgb, var(--cat-sonstiges) 72%, var(--surface)) }
.tl-blk--termin.tl-cat--sport{ --c:color-mix(in srgb, var(--cat-sport) 72%, var(--surface)) }
.tl-blk--termin.tl-cat--musik{ --c:color-mix(in srgb, var(--cat-musik) 72%, var(--surface)) }
.tl-blk--termin.tl-cat--sozial{ --c:color-mix(in srgb, var(--cat-sozial) 72%, var(--surface)) }
.tl-blk--termin.tl-cat--sonstiges{ --c:color-mix(in srgb, var(--cat-sonstiges) 72%, var(--surface)) }
.tl-key.tl-cat--sport{ --c:var(--cat-sport) }
.tl-key.tl-cat--musik{ --c:var(--cat-musik) }
.tl-key.tl-cat--sozial{ --c:var(--cat-sozial) }
.tl-key.tl-cat--sonstiges{ --c:var(--cat-sonstiges) }
/* Schultages-Briefing: Schulzeiten + Zeitstrahl als EIN abgesetzter Block.
   Alles darunter (Stunden, Essen, Termine, Aufgaben) ist Einzelheit. Eingelassen
   statt erhaben – es ist eine Anzeige, kein Knopf. */
.briefing{ display:flex; flex-direction:column; gap:var(--space-2);
  background:var(--surface-alt); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--space-3) }
/* Nach einer Warnung erst Luft, dann das Briefing – sonst kleben sie aneinander. */
.ka-warn + .briefing{ margin-top:var(--space-2) }

/* Wetterzeichen in der Zusammenfassung (TAG-15): klein und direkt an der Zeit,
   zu der man losgeht bzw. losfaehrt. */
.summary__w{ display:inline-flex; align-items:baseline; gap:2px; white-space:nowrap }
.summary__wetter{ font-size:var(--fs-1); line-height:1 }
/* Die Temperatur traegt die Farbe, nicht das Symbol: „Wolken bei 5 Grad" ist
   etwas anderes als „Wolken bei 25 Grad", und genau das soll man sehen. */
.summary__temp{ font-weight:700; font-size:var(--fs-0); font-variant-numeric:tabular-nums; white-space:nowrap }
.temp-1{ color:var(--temp-1) } .temp-2{ color:var(--temp-2) } .temp-3{ color:var(--temp-3) }
.temp-4{ color:var(--temp-4) } .temp-5{ color:var(--temp-5) } .temp-6{ color:var(--temp-6) }

/* Ferien-Hinweis im Tag */
.ferien{ font-weight:600; color:var(--ok) }

/* freie Stunde (Spätbeginn/Freistunde) – dezent, gestrichelt */
/* „Frei" ist etwas – nur eben nichts zu tun. Vorher durchsichtig und damit fast
   unsichtbar; jetzt leicht unterlegt, gestrichelt bleibt es. */
.lesson--frei{ background:var(--surface-alt); background-image:none;
  border-style:dashed; box-shadow:none; opacity:1 }
.lesson--frei .lesson__no{ color:var(--text-faint) }
.lesson__frei{ color:var(--text-faint); font-style:italic }
/* ungewählte Wahl-Stunde – Platzhalter, führt in die Einstellungen */
.lesson--wahl{ border-style:dashed; border-left-color:var(--accent); cursor:pointer;
  background:color-mix(in srgb, var(--accent) 8%, var(--surface)) }
.lesson--wahl .lesson__fach{ color:var(--accent) }
/* ---- Klassenarbeiten (SCH-13) ------------------------------------------- */
/* Rot heisst in dieser App „faellt aus". Eine Arbeit ist das Gegenteil: sie
   findet ganz sicher statt. Deshalb kein Rahmen in Warnfarbe, sondern ein
   TEXTMARKER – ein Griff, den die App sonst nirgends benutzt, und der genau das
   bedeutet, was er bedeutet: hier nochmal hinsehen. */
.lesson--ka .lesson__fachname{
  background:var(--ka); color:var(--ka-text);
  padding:0 var(--space-2); border-radius:var(--radius-sm) }
/* Akut: der Marker allein reicht nicht mehr, die ganze Stunde bekommt einen Ring. */
.lesson--ka-akut{ outline:2px solid var(--ka); outline-offset:-1px }
/* Klausur-Angabe in Zeile 2, vor der Lehrkraft: klein, aber zuerst – bei
   Platzmangel soll die Lehrkraft weichen, nicht die Arbeit.
   Zwei Stufen wie ueberall: im Vorlauf leise (nur Umriss), akut laut (gefuellt).
   Das Fach ist ohnehin angestrichen – zweimal laut waere einmal zu viel. */
.lesson__kanote{ display:inline-block; margin-right:var(--space-2); padding:0 4px;
  font-size:9px; font-weight:600; letter-spacing:.02em; color:var(--text-muted);
  background:transparent; border:1px solid color-mix(in srgb, var(--ka) 70%, var(--border-strong));
  border-radius:var(--radius-sm) }
.lesson--ka-akut .lesson__kanote{ background:var(--ka); color:var(--ka-text);
  border-color:transparent; font-weight:700 }

/* Warnzeile ganz oben im Tag. Bei Eltern ueber ALLE Kinder – die Tagesansicht
   zeigt immer nur eines, und die vergessene Arbeit ist die des anderen Kindes. */
.ka-warn{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2);
  background:var(--ka); color:var(--ka-text); background-image:var(--glaze);
  border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3);
  box-shadow:var(--sh-2), var(--hi); font-size:var(--fs-1) }
.ka-warn__t{ font-weight:700 }
/* Mehrere Arbeiten: eine Zeile je Arbeit (E-37). Aneinandergereiht und
   umbrochen liest man sie als EINEN Satz – und übersieht die zweite. */
.ka-warn--liste{ display:block }
.ka-warn__zeile{ display:block; margin-top:2px }
.ka-warn--soon{ background:color-mix(in srgb, var(--ka) 30%, var(--surface)); color:var(--text);
  box-shadow:var(--sh-1), var(--hi) }
/* Liste der anstehenden Arbeiten unter den Hausaufgaben – klappbar, damit sie
   an ruhigen Tagen nur eine Zeile kostet. */
/* Wie eine Stunde: oben Titel + „wann", darunter die Einzelheiten. Drei Spalten,
   nicht vier – sonst wird die Titelspalte so schmal, dass sie umbricht. */
.ka-row{ display:grid; grid-template-columns:1.9em 1fr auto; column-gap:var(--space-2);
  row-gap:1px; align-items:baseline }
.ka-row__n{ grid-column:3; grid-row:1; text-align:right; white-space:nowrap; font-weight:700 }
.ka-row__meta{ grid-column:2 / -1; grid-row:2; color:var(--text-muted); font-size:var(--fs-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Demo-Band (DEM-01). Es MUSS auffallen: wer eine Demo für die echte App hält,
   tippt sein echtes Portal-Passwort hinein. Deshalb die Warnfarbe der App
   (`--ka`, sonst den Klassenarbeiten vorbehalten) – hier ist sie richtig, denn
   die Aussage ist dieselbe Sorte: „pass auf". Steht auf jeder Ansicht. */
.demo-band{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2);
  width:min(94%,540px); margin:0 auto;
  background:var(--ka); color:var(--ka-text); background-image:var(--glaze);
  border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3);
  box-shadow:var(--sh-2), var(--hi); font-size:var(--fs-1); line-height:1.35 }
.demo-band__t{ font-weight:700; letter-spacing:.06em }
.demo-zugang{ width:min(94%,540px) }
.demo-zeile{ display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--space-2); padding:2px 0 }

/* „Angemeldet bleiben" (AUT-01): Kästchen links, Erklärung darunter. Die Folge
   steht DABEI, nicht in einem Tooltip – wer sich entscheiden soll, muss lesen
   können, worüber. */
.bleiben{ display:grid; grid-template-columns:auto 1fr; gap:var(--space-2); align-items:start;
  cursor:pointer }
.bleiben input[type=checkbox]{ width:20px; height:20px; margin:2px 0 0; accent-color:var(--accent) }
.bleiben__hint{ display:block; margin-top:2px; line-height:1.35 }

/* Erinnerung (ERI-01): ein Zettel am Tag. Sie sieht aus wie eine Aufgabe, weil
   sie eine ist – Kästchen zum Abhaken, dieselbe Zeilenform wie die Hausaufgaben.
   NEUTRAL: keine Statusfarbe. Rot, Gelb und Grün heissen in dieser App Entfall,
   Arbeit und frisch; „denk dran" ist nichts davon. Nur wenn ein Fach dranhängt,
   trägt die Kante dessen Farbe – dann ist die Farbe Zuordnung, nicht Alarm. */
/* EINE Zeile, flacher als eine Stunde: Kästchen, Text, und rechts die seltene
   Handlung als leiser Text – kein Knopf, keine zweite Zeile. Ein Zettel darf
   nicht mehr Platz brauchen als der Unterricht, an den er erinnert.
   Kästchen 20 px wie in der Aufgabenliste (nicht --tap-sm): die Tippfläche ist
   die Zeile, nicht das Kästchen. */
.erin{ display:grid; grid-template-columns:auto 1fr; column-gap:var(--space-2);
  align-items:start;
  background:var(--surface); border:1px solid var(--border);
  border-left:4px solid var(--sc,var(--border-strong));
  border-radius:var(--radius-sm); padding:var(--space-1) var(--space-3);
  box-shadow:var(--sh-1), var(--hi) }
.erin input[type=checkbox]{ width:20px; height:20px; margin:2px 0 0; accent-color:var(--accent) }
.erin__body{ min-width:0; overflow-wrap:anywhere; line-height:1.4 }
.erin__titel{ font-weight:600 }
.erin__nur{ margin-left:var(--space-2) }
/* Leiser Text statt Knopf: die Handlung ist selten, und ein Knopf in dieser
   Zeile kostet entweder die halbe Titelbreite oder eine ganze Zeile. */
.erin__fertig{ border:0; background:transparent; cursor:pointer; white-space:nowrap;
  color:var(--text-muted); font-size:var(--fs-0); line-height:1.6;
  padding:2px 4px; margin:0 -4px 0 var(--space-2); border-radius:var(--radius-sm) }
.erin__fertig:hover{ color:var(--text); background:var(--surface-alt) }
/* Abgehakt bleibt LESBAR, nur zurückgenommen – man soll noch sehen, was man
   abgehakt hat. Durchstreichen wie beim Entfall wäre die falsche Sprache: hier
   ist nichts ausgefallen, hier ist etwas erledigt. */
.erin--done .erin__titel{ color:var(--text-muted); font-weight:400 }
.erin--done{ box-shadow:none; background:var(--surface-alt) }
/* Eigene Gruppe in der Aufgabenliste – über den Hausaufgaben, aber erkennbar
   nicht eine von ihnen. */
.todo-group--erin .todo-group__head{ color:var(--text-muted) }
/* In der Einstellungsliste ist der Titel der ganze Inhalt: er wird umbrochen,
   nicht gekürzt. Bei einer Stunde ist das anders – dort trägt das Fach. */
.erin-list{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.erin-list .erin__titel{ overflow-wrap:anywhere }
.erin-list__meta{ color:var(--text-muted); font-size:var(--fs-1); overflow-wrap:anywhere }

/* Vermutung aus dem Hausaufgabentext (SCH-16). Sie muss auf den ersten Blick
   ANDERS aussehen als ein Termin: gestrichelter Rand statt voller Flaeche, kein
   Anstrich am Fach, keine Warnfarbe. Ein Verdacht darf erinnern, nicht alarmieren
   – die laute Farbe bleibt dem reserviert, was wirklich feststeht (E-28). */
.lesson--vermutet{ border:1px dashed var(--border-strong); background:transparent;
  background-image:none; box-shadow:none;
  /* Die Fachkante bleibt – auch ein Verdacht gehoert zu einem Fach –,
     aber gestrichelt und schmaler als bei einem Termin. */
  border-left:4px dashed var(--sc,var(--border-strong)) }
.lesson--vermutet .lesson__no{ color:var(--text-muted); font-weight:700 }
.lesson--vermutet .ka-row__n{ font-weight:400; color:var(--text-muted) }
/* Der Satz, aus dem geraten wurde. Wer bestaetigt, soll vorher lesen koennen,
   worauf er sich verlaesst – deshalb steht er hier und nicht in einem Tooltip. */
.ka-vor__satz{ margin-top:2px; font-size:var(--fs-1); color:var(--text-muted);
  font-style:italic; overflow-wrap:anywhere }

/* Termin-Kachel im Tag (TER-01) – gleiches Raster wie eine Stunde, damit der
   Nachmittag optisch am Vormittag hängt und nicht wie ein Fremdkörper wirkt. */
.lesson--termin{ --sc:var(--cat-sonstiges) }
.lesson--termin.cat--sport{ --sc:var(--cat-sport) }
.lesson--termin.cat--musik{ --sc:var(--cat-musik) }
.lesson--termin.cat--sozial{ --sc:var(--cat-sozial) }
.lesson--termin.cat--sonstiges{ --sc:var(--cat-sonstiges) }
/* gekoppelter Ersatz – ihr Kurs entfällt, sie geht in den Partnerkurs (findet statt) */
.lesson--ersatz{ border-left-color:var(--ok); background:color-mix(in srgb, var(--ok) 10%, var(--surface)) }
.lesson__badge--ersatz{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%,transparent);
  background:color-mix(in srgb,var(--ok) 12%,transparent) }
.note{ font-size:var(--fs-1); color:var(--text-muted) }
.section-title{ font-weight:700; font-size:var(--fs-1); color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-top:var(--space-2) }
.topbar{ width:min(94%,540px); display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-2); min-height:var(--tap-sm) }
/* Wer bin ich + Klasse statt App-Name; flach und ruhig */
.who{ display:flex; align-items:baseline; gap:var(--space-2); min-width:0 }
.who__name{ font-weight:600; font-size:var(--fs-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.who__klasse{ font-size:var(--fs-1); color:var(--text-muted); white-space:nowrap }
.ic-btn--sm{ min-width:var(--tap-sm); min-height:var(--tap-sm); font-size:var(--fs-1) }

.topbar__right{ display:flex; align-items:center; gap:var(--space-2) }
/* Icon-Knopf (Zahnrad, Abrufen) – tippbar, ohne Textbreite */
.ic-btn{ min-width:var(--tap-sm); min-height:var(--tap-sm); display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--surface-alt); background-image:var(--glaze);
  color:var(--text); border-radius:var(--radius-sm);
  cursor:pointer; font-size:var(--fs-2); line-height:1; box-shadow:var(--sh-1), var(--hi) }
.ic-btn:active:not(:disabled){ transform:translateY(1px); box-shadow:var(--sunk) }
.ic-btn:disabled{ opacity:.5; cursor:default; box-shadow:none }

/* schlanke Tagesleiste: Datum+Woche links, Abrufen rechts */
.daybar__nav{ display:flex; align-items:center; gap:var(--space-1) }
/* Feste Breiten: Datum, A/B und Heute belegen IMMER denselben Platz, damit beim
   Blättern kein Knopf unter den Finger wandert. */
.daybar__cur{ display:inline-flex; align-items:center; gap:var(--space-1); font-weight:600;
  color:var(--text); padding:0 }
.daybar__date{ min-width:6.0em; text-align:center; display:inline-block }
/* Feste Breite statt min-width: sonst ist das Abzeichen mit Buchstabe minimal
   breiter als ohne – und die Knoepfe rechts wandern doch wieder. */
.wk{ width:1.8em; padding-left:0; padding-right:0; text-align:center; display:inline-block; box-sizing:border-box }
.wk--empty{ visibility:hidden }   /* Platz bleibt, nichts blinkt auf */
.chip--today{ min-width:3.6em; padding:0 var(--space-2); justify-content:center; display:inline-flex; align-items:center }
.chip[disabled]{ opacity:.45; cursor:default; box-shadow:none }
.daybar__abruf{ flex:0 0 auto; white-space:nowrap; display:flex; align-items:center; gap:var(--space-1) }
.daybar__stamp{ width:3.4em; text-align:right; color:var(--text-faint) }   /* feste Breite: kein Wandern */
/* Frische-Ampel. Der Vermerk steht LINKS vom Knopf – waechst er, wandern Knopf
   und Uhrzeit nicht unter dem Finger weg. */
.daybar__note{ font-size:var(--fs-0); color:var(--ok); font-weight:700; white-space:nowrap }
.abruf--frisch{ color:var(--ok) }
.abruf--lau{ color:var(--vertretung) }
.abruf--kalt{ color:var(--entfall) }
.ic-btn--abruf.abruf--frisch{ border-color:color-mix(in srgb,var(--ok) 45%,var(--border)) }
.ic-btn--abruf.abruf--lau{ border-color:color-mix(in srgb,var(--vertretung) 55%,var(--border));
  background:color-mix(in srgb,var(--vertretung) 12%,var(--surface-alt)) }
.ic-btn--abruf.abruf--kalt{ border-color:color-mix(in srgb,var(--entfall) 55%,var(--border));
  background:color-mix(in srgb,var(--entfall) 12%,var(--surface-alt)) }
.daybar__abruf{ display:flex; align-items:center; gap:var(--space-2) }

/* dezenter Hinweis auf offene Kurswahl (führt in die Einstellungen) */
.choose-hint{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap;
  background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-3) }

/* Kurswahl-Gruppe im Einstellungsbereich */
.cgroup{ display:flex; flex-direction:column; gap:var(--space-2) }

/* Fach-Zeile: Anzeige-Name (Eingabe) + Farbe, blass in der Fachfarbe */
.subjedit{ display:flex; flex-direction:column; gap:var(--space-2);
  background:color-mix(in srgb, var(--sc,var(--border-strong)) 8%, var(--surface));
  background-image:var(--glaze);
  border:1px solid var(--border); border-left:4px solid var(--sc,var(--border-strong));
  border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3);
  box-shadow:var(--sh-1), var(--hi), var(--lo) }
.subjedit__head{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap }
.subjedit__portal{ font-size:var(--fs-1); color:var(--text-muted); min-width:5.5em }
/* Achtung: NICHT global „flex:1 1 8em" – in einer Spalte wirkt die Basis auf die
   HÖHE und das Feld wird riesig. Wachsen darf es nur dort, wo es in einer Zeile steht. */
.input--sm{ min-height:var(--tap-sm); height:var(--tap-sm); padding:0 var(--space-2); width:100% }
.subjedit__head .input--sm{ flex:1 1 8em; width:auto }
/* kompaktes Farb-Dropdown: getönt in der Fachfarbe, farbiger Rand zeigt die Wahl */
.colorsel{ min-height:var(--tap-sm); padding:0 var(--space-2); border-radius:var(--radius-sm); font-family:inherit; font-size:var(--fs-1);
  background-image:var(--glaze); box-shadow:var(--sh-1), var(--hi);
  color:var(--text); cursor:pointer; flex:0 0 auto; width:auto;
  border:1px solid var(--sc,var(--border-strong)); border-left:6px solid var(--sc,var(--border-strong));
  background:color-mix(in srgb, var(--sc,var(--border-strong)) 22%, var(--surface)) }
.colorsel:disabled{ opacity:.6; cursor:default }
/* Name-Eingabe innerhalb einer Kurswahl-Gruppe */
.cgroup__name{ margin-top:var(--space-1) }