:root{--ink:#101828;--muted:#667085;--line:#e4e7ec;--paper:#fff;--bg:#f4f6fb;--accent:#6d5dfc;--shadow:0 12px 32px rgba(16,24,40,.08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 90% 0,#e7e3ff 0,transparent 26rem),var(--bg)}button,input,select,textarea{font:inherit}.topbar{max-width:1440px;margin:auto;padding:38px 42px 24px;display:flex;align-items:end;justify-content:space-between;gap:20px}.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.14em;color:var(--accent)}h1,h2{margin:.25rem 0 0;letter-spacing:-.04em}h1{font-size:clamp(2rem,4vw,3.6rem);line-height:1}h2{font-size:1.45rem}main{max-width:1440px;margin:auto;padding:0 42px 60px}.primary,.week-controls button,.text-button,.icon-button{border:0;cursor:pointer}.primary{background:var(--ink);color:white;border-radius:14px;padding:13px 18px;font-weight:750;box-shadow:0 7px 18px rgba(16,24,40,.2)}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}.summary article,.planner,.panel{background:rgba(255,255,255,.92);border:1px solid rgba(228,231,236,.9);border-radius:22px;box-shadow:var(--shadow)}.summary article{padding:20px 22px;display:grid;gap:5px}.summary span,.summary small{color:var(--muted)}.summary strong{font-size:1.45rem}.planner,.panel{padding:22px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px}.section-head.compact{align-items:start}.week-controls{display:flex;gap:6px}.week-controls button{background:#f2f4f7;border-radius:10px;padding:9px 12px;font-weight:700}.legend{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}.legend button{font-size:.75rem;padding:6px 10px;border:1px solid transparent;border-radius:99px;background:var(--chip);color:var(--chip-ink);font-weight:700;cursor:pointer}.legend button:not(.active){background:white;border-color:var(--line);color:var(--muted);opacity:.7}.week-grid{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:10px;overflow-x:auto;padding-bottom:4px}.day{min-height:310px;background:#f8f9fc;border:1px solid var(--line);border-radius:16px;padding:12px}.day.today{border:2px solid var(--accent);padding:11px}.day-head{display:flex;justify-content:space-between;align-items:start;padding-bottom:10px;border-bottom:1px solid var(--line)}.day-name{font-weight:800}.day-date{color:var(--muted);font-size:.8rem}.entry{margin-top:9px;border-left:4px solid var(--entry);background:white;border-radius:10px;padding:9px;box-shadow:0 3px 10px rgba(16,24,40,.05)}.entry strong{display:block;font-size:.88rem}.entry small{color:var(--muted)}.entry.school{background:#eef4ff}.entry.task{border-left-style:dashed}.lower-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px}.text-button{background:none;color:var(--accent);font-weight:800;padding:8px}.task-filters{display:flex;gap:7px;margin:-3px 0 14px}.task-filters button{border:1px solid var(--line);background:white;color:var(--muted);border-radius:99px;padding:6px 11px;font-weight:700;cursor:pointer}.task-filters button.active{background:var(--ink);border-color:var(--ink);color:white}.list{display:grid;gap:9px}.task-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px;background:#f8f9fc;border-radius:13px}.task-row input{width:19px;height:19px;accent-color:var(--accent)}.task-row strong{display:block}.task-row small{color:var(--muted)}.task-row.done{text-decoration:line-through;opacity:.55}.empty{color:var(--muted);padding:22px 0;text-align:center}.school-list{display:grid;gap:7px}.school-row{display:grid;grid-template-columns:1fr auto;color:var(--muted);padding:8px 0;border-bottom:1px solid var(--line)}.school-row strong{color:var(--ink)}.tutor-note{margin-top:14px;background:#f2edff;border-radius:13px;padding:12px;display:flex;justify-content:space-between;gap:12px}.tutor-note span{color:#5b3fb2}dialog{border:0;border-radius:22px;padding:0;width:min(480px,calc(100% - 28px));box-shadow:0 30px 90px rgba(16,24,40,.3)}dialog::backdrop{background:rgba(16,24,40,.55);backdrop-filter:blur(4px)}form{padding:24px}.dialog-head{display:flex;justify-content:space-between;margin-bottom:18px}.icon-button{font-size:1.8rem;background:#f2f4f7;border-radius:50%;width:38px;height:38px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}label{display:grid;gap:6px;font-weight:700;font-size:.88rem;margin-bottom:13px}input,select,textarea{width:100%;border:1px solid #d0d5dd;border-radius:11px;padding:11px;background:white;color:var(--ink)}textarea{resize:vertical}.full{width:100%;margin-top:4px}@media(max-width:800px){.topbar,main{padding-left:18px;padding-right:18px}.topbar{padding-top:26px;align-items:center}.topbar h1{max-width:240px}.summary{grid-template-columns:1fr 1fr}.summary article:last-child{display:none}.week-grid{grid-template-columns:repeat(7,82vw);scroll-snap-type:x mandatory}.day{scroll-snap-align:start;min-height:260px}.lower-grid{grid-template-columns:1fr}.section-head{align-items:start}.tutor-note{flex-direction:column}}@media(max-width:480px){.topbar .primary{font-size:0;width:48px;height:48px;padding:0}.topbar .primary::after{content:'+';font-size:1.5rem}.summary article{padding:15px}.summary strong{font-size:1.15rem}.planner,.panel{padding:16px}.week-controls button{padding:8px 10px}}

/* --- Anmeldung (Tor) und die neuen Bausteine des Portals ------------------ */
.tor{min-height:100vh;display:grid;place-items:center;padding:24px}
.tor-karte{background:var(--paper);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow);padding:28px;width:min(420px,100%)}
.tor-karte h1{font-size:1.6rem;margin-bottom:18px}
.tor-form{display:grid;gap:4px}
.tor-fehler{background:#ffeded;color:#b42318;border-radius:10px;padding:10px;
  font-size:.88rem;margin-top:12px}
.full{width:100%;margin-top:6px;border:1px solid var(--line);background:#f2f4f7;
  border-radius:12px;padding:11px;font-weight:700;cursor:pointer}
button.primary.full{background:var(--ink);color:#fff;border:0}
.topbar-rechts{display:flex;gap:8px;align-items:center}
.klein{color:var(--muted);font-size:.82rem;margin-top:10px}
.mini{font-size:.7rem;font-weight:700;color:var(--accent)}
.mini-knopf{border:1px solid var(--line);background:#fff;color:var(--muted);
  border-radius:99px;padding:3px 9px;font-size:.72rem;font-weight:700;cursor:pointer;
  margin-left:6px}
.task-rechts{display:flex;align-items:center;gap:4px;white-space:nowrap}
.day.ferien{background:#f2edff}
.entry.faellt-aus strong{text-decoration:line-through;opacity:.6}
.entry .warn{color:#b42318;font-weight:700}
.school-row.abgewaehlt{opacity:.45;text-decoration:line-through}
hr{border:0;border-top:1px solid var(--line);margin:16px 0}
dialog h2{font-size:1.2rem}

/* Schrittkette einer Pruefung (Tassilo 04.10.2026): kleine Kreise, verbunden.
   Erledigt gefuellt in der Fachfarbe, der naechste offene mit Ring. */
.task-row.mit-kette{--farbe:#059669;cursor:pointer}
.task-row.mit-kette:hover{background:#f2f4f7}
.kette-stand{min-width:34px;height:24px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:650;color:var(--farbe);background:color-mix(in srgb,var(--farbe) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--farbe) 35%,#fff);font-variant-numeric:tabular-nums}
.kette{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:7px;row-gap:4px}
.k-punkt{--farbe-k:var(--farbe,#059669);width:20px;height:20px;border-radius:50%;flex:none;display:inline-flex;
  align-items:center;justify-content:center;font-style:normal;font-size:.6rem;font-weight:600;color:#667085;
  background:#fff;border:1.5px solid #d0d5dd;position:relative;font-variant-numeric:tabular-nums}
.kette .k-punkt + .k-punkt{margin-left:10px}
.kette .k-punkt + .k-punkt::before{content:"";position:absolute;right:100%;top:50%;width:11px;height:1.5px;
  background:#d0d5dd;margin-right:.5px}
.kette .k-punkt.fertig + .k-punkt::before{background:var(--farbe-k)}
.k-punkt.unter{width:16px;height:16px;font-size:.52rem}
.kette .k-punkt.unter{margin-left:6px}
.kette .k-punkt.unter::before{width:7px}
.k-punkt.fertig{background:var(--farbe-k);border-color:var(--farbe-k)}
.k-punkt.fertig::after{content:"";width:6px;height:3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;
  transform:translateY(-1px) rotate(-45deg)}
.k-punkt.jetzt{border-color:var(--farbe-k);color:var(--farbe-k);box-shadow:0 0 0 3px color-mix(in srgb,var(--farbe-k) 18%,transparent)}
.kette-weiter{display:block;margin-top:5px;font-size:.76rem}

/* Dialog der Kette */
.schritt-liste{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.schritt{display:flex;align-items:center;gap:8px;justify-content:space-between}
.schritt .ankreuz{margin:0;padding:7px 4px;font-weight:500;flex:1;min-width:0;border:0;background:none}
.schritt .ankreuz input{position:absolute;opacity:0;width:1px;height:1px}
.schritt .ankreuz input:focus-visible + .k-punkt{outline:2px solid #365cf5;outline-offset:2px}
.schritt .ankreuz span:last-child{min-width:0}
.schritt .ankreuz small{display:block;color:var(--muted);font-weight:500}
.schritt.unter{padding-left:26px}
.schritt.fertig .ankreuz > span:last-child{color:var(--muted)}
.schritt .ankreuz input:disabled + .k-punkt{cursor:default}
.schritt .k-punkt{cursor:pointer}
.klein-titel{font-size:.86rem;font-weight:650;margin:0 0 8px}
.ziel-wahl-klein{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:12px 0 0}
.ziel-wahl-klein button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 12px;
  font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer}
.ziel-wahl-klein button.aktiv{border-color:#059669;color:#047857;background:#ecfdf5}
.themen-wahl{display:grid;gap:4px;max-height:220px;overflow:auto;margin-bottom:8px}
.themen-wahl .ankreuz{margin:0;font-weight:500}
.lernzeiten{display:grid;gap:4px;margin-bottom:6px}
.lernzeit{display:grid;grid-template-columns:110px 92px 1fr;align-items:center;gap:6px;text-align:left;
  border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;cursor:pointer;
  font-size:.82rem;font-variant-numeric:tabular-nums}
.lernzeit small{color:var(--muted)}
.lernzeit:hover{border-color:#98a2b3}
#dialog-schritte form{max-height:calc(100dvh - 40px);overflow:auto}

/* Lernzeiten im Raster: Farbe der Pruefung, gestrichelt wie Termine, mit Stift. */
.b-termin.b-lernen{background:color-mix(in srgb,var(--farbe) 8%,#fff);
  border:1px dashed color-mix(in srgb,var(--farbe) 55%,#fff)}
.b-termin.b-lernen strong{font-weight:600}
.b-termin.b-lernen.wdh{background:#fff}
/* 30-min-Bloecke sind im Raster nur ~26 px hoch: eine Zeile, ohne Uhrzeit (steht im Titel). */
.r-block.klein .b-lernen{flex-direction:row;align-items:center;gap:6px;padding:0 6px 0 26px}
.r-block.klein .b-lernen .b-zeit{display:none}
.r-block.klein .b-lernen strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.7rem}
.r-block.klein .b-lernen .b-symbol{top:50%;transform:translateY(-50%);width:13px;height:13px}

/* Der Lernpfad: feine gestrichelte Linie von Lernzeit zu Lernzeit bis zur Pruefung. */
.raster-rahmen{position:relative}
svg.lernpfad{position:absolute;left:0;top:0;pointer-events:none;z-index:3;overflow:visible}
svg.lernpfad path{fill:none;stroke-width:1.5;stroke-dasharray:4 4;stroke-linecap:round;opacity:.75}
@media (max-width:480px){.lernzeit{grid-template-columns:1fr auto}.lernzeit small{grid-column:1/-1}}

/* 🔴 MUSS GANZ UNTEN STEHEN UND MUSS !important TRAGEN.
   Das hidden-Attribut wirkt ueber display:none aus dem Browser-Stylesheet —
   jede eigene display-Regel schlaegt es. .tor traegt display:grid, und damit
   stand die Anmeldekarte am 20.09.2026 dauerhaft ueber der angemeldeten
   Anwendung. Die Pruefung "element.hidden === true" war dabei korrekt: das
   Attribut sass, die Regel wirkte nur nicht. Gefunden hat es erst ein Bild. */
[hidden]{display:none !important}
.entry.aenderbar{cursor:pointer}
.entry.aenderbar:hover{outline:2px solid var(--accent);outline-offset:1px}
.entry.aenderbar:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* --- Wochenstreifen: die Uebersicht ------------------------------------- */
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:14px}
.streifen-tag{border:1px solid var(--line);background:#fff;border-radius:14px;
  padding:9px 2px 7px;display:grid;gap:3px;justify-items:center;cursor:pointer;
  font:inherit;color:var(--muted);min-width:0}
.streifen-tag .s-name{font-weight:800;font-size:.76rem;letter-spacing:.02em}
.streifen-tag .s-datum{font-size:.72rem}
.streifen-tag .s-punkte{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;
  min-height:8px;max-width:100%}
.punkt{width:5px;height:5px;border-radius:50%;display:block;background:var(--muted)}
.punkt.schule{background:#2f6fed}
.punkt.sonst{background:var(--accent)}
.punkt.frei{background:#14a673}
.streifen-tag.heute{border-color:var(--accent)}
.streifen-tag.gewaehlt{background:var(--ink);color:#fff;border-color:var(--ink)}
.streifen-tag.gewaehlt .punkt{background:#fff}
.streifen-tag.ferien{background:#f2edff}
.streifen-tag.ferien.gewaehlt{background:var(--ink)}

/* Die Tagesansicht steht auf dem Handy, das Raster auf dem Schreibtisch. */
.day-detail{display:none}
.tag-titel{margin:.2rem 0 .7rem;font-size:1rem}

@media(max-width:800px){
  .day-detail{display:block}
  .week-grid{display:none}          /* ein Tag je Bildschirm war der Fehler */
  /* Die Kopfzeile darf nicht mehr vier Zeilen brauchen. */
  .section-head h2{font-size:1.05rem;line-height:1.25}
  .section-head{gap:10px}
  .topbar h1{font-size:1.5rem;max-width:none}
  .summary article:last-child{display:revert}   /* Schulzeit darf bleiben */
  .summary{grid-template-columns:repeat(3,1fr)}
  .summary article{padding:11px 12px}
  .summary strong{font-size:1rem}
  .summary small{display:none}      /* die Unterzeilen kosten nur Hoehe */
}
@media(max-width:480px){
  .summary{grid-template-columns:1fr 1fr}
  .summary article:last-child{display:none}
  .streifen-tag{padding:8px 0 6px;border-radius:11px}
}

/* --- Hinweisseite ---------------------------------------------------------
   🔴 Stand vorher als <style> IN der Seite - und wurde von der eigenen
   Sicherheitsregel blockiert: style-src 'self' verbietet Stil im Dokument,
   nicht nur Inline-Attribute. Die Seite war dadurch unformatiert, ohne dass
   irgendetwas fehlschlug. Gefunden hat es der Browser-Durchlauf, weil er die
   Konsole mitliest. */
  .hinweise{max-width:760px;margin:auto;padding:40px 20px 80px}
  .hinweise h2{margin-top:2.2rem}
  .hinweise h3{margin-top:1.6rem;font-size:1rem}
  .hinweise p,.hinweise li{color:#344054;line-height:1.65}
  .hinweise ul{padding-left:1.1rem}
  .merk{border-left:3px solid var(--accent);background:#f6f4ff;padding:12px 16px;
        border-radius:0 12px 12px 0;margin:1.2rem 0}
.knopf-link{display:block;text-align:center;text-decoration:none}

/* --- Zwei Befunde aus der Formatpruefung vom 21.09.2026 ------------------- */

/* 🔴 1. Waagerechter Ueberlauf auf dem iPhone (393 px Schirm, 410 px Inhalt).
   Ein Gitterkind hat von Haus aus min-width:auto - es schrumpft also NICHT
   unter seine Inhaltsbreite. Ein langer Aufgabentext oder eine Reihe kleiner
   Knoepfe macht die Spalte damit breiter als den Schirm, und die Seite laesst
   sich seitlich schieben. Auf dem Schreibtisch faellt das nie auf. */
.lower-grid > *, .week-grid > *, .summary > *, .planner, .panel { min-width: 0 }
.task-row > span { min-width: 0 }
/* 🔴 "anywhere" war zu scharf: zusammen mit den groesseren Knoepfen wurde die
   Textspalte auf null gequetscht und "Mathe" brach Buchstabe fuer Buchstabe um -
   eine Aufgabenzeile war dann zehn Zeilen hoch. "break-word" bricht nur, wenn
   ein Wort wirklich nicht passt. Die eigentliche Loesung steht darunter: auf
   schmalen Schirmen gehoeren die Knoepfe in eine EIGENE Zeile, nicht neben den
   Text. */
.task-row small, .task-row strong { overflow-wrap: break-word }

@media(max-width:600px){
  /* Haken + Text nebeneinander, Knoepfe darunter ueber die ganze Breite. */
  .task-row{grid-template-columns:auto 1fr;row-gap:8px}
  .task-rechts{grid-column:1 / -1;justify-content:flex-start;flex-wrap:wrap}
}

/* 🔴 2. Tippflaechen. Die Mini-Knoepfe (teilen/aendern/loeschen) waren 23 px
   hoch. Apple nennt 44 pt als Mindestmass, Google 48 dp - mit 23 px trifft man
   auf einem Handy regelmaessig den Nachbarn. Vergroessert wird nur dort, wo mit
   dem Finger gezeigt wird: (pointer: coarse). Mit der Maus bleibt es zierlich. */
@media (pointer: coarse) {
  .mini-knopf { min-height: 40px; min-width: 40px; padding: 8px 12px; font-size: .78rem }
  .text-button { min-height: 40px }
  .task-rechts { flex-wrap: wrap; justify-content: flex-end; gap: 6px }
  .streifen-tag { min-height: 56px }
  .week-controls button { min-height: 40px; min-width: 44px }
  .task-filters button { min-height: 40px }
  .task-row input[type=checkbox] { width: 24px; height: 24px }
}

/* 🔴 Sieben Tage muessen auch auf dem schmalsten Geraet je 40 px breit sein.
   Rechnung fuer das iPhone SE (375 px): 375 − 36 (Seitenrand) − 24 (Kasten)
   = 315, davon sechs Zwischenraeume à 4 px = 291, geteilt durch sieben = 41.
   Mit den vorherigen Werten (18 px Kasten, 6 px Zwischenraum) waren es 35 -
   und 35 px trifft ein Daumen nicht zuverlaessig. Der Platz kommt aus dem
   Rand, nicht aus der Kachel. */
@media(max-width:480px){
  .planner{padding:12px}
  .week-strip{gap:4px}
  .streifen-tag{padding:8px 0 6px}
}
@media (pointer: coarse){
  /* Der Menue-Knopf und die Schliesskreuze waren 38 px. */
  .icon-button{width:44px;height:44px}
}

/* 🔴 Dieselben Vergroesserungen noch einmal an der BREITE, nicht nur am Zeiger.
   Grund: `pointer: coarse` ist nicht ueberall verlaesslich - manche Browser
   melden bei Geraeten mit Maus UND Touch `fine`, und im Pruefwerkzeug wird die
   Abfrage nur gesetzt, wenn jemand daran denkt. Ein Handy ist aber in jedem
   Fall schmal. Zwei Wege zum selben Ziel, damit keiner allein traegt. */
@media(max-width:900px){
  /* 🔴 min-WIDTH nicht vergessen. Mit nur min-height war der Loeschknopf "×"
     genau 35 x 40 - hoch genug und zu schmal. Eine Tippflaeche ist so gross
     wie ihre KLEINSTE Kante, nicht wie ihre Hoehe. */
  .mini-knopf{min-height:40px;min-width:40px;padding:8px 12px;font-size:.78rem}
  .text-button{min-height:40px}
  .task-rechts{flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .streifen-tag{min-height:56px}
  .week-controls button{min-height:40px;min-width:44px}
  .task-filters button{min-height:40px}
  .task-row input[type=checkbox]{width:24px;height:24px}
  .icon-button{width:44px;height:44px}
  .full{min-height:44px}
  select,input,textarea{min-height:44px}
}

/* --- Faecher, Noten, Pruefungen (21.09.2026) ----------------------------- */
.warnkachel{border-color:#fde3cf !important;background:#fff8f3 !important}
.warnkachel.dringend{border-color:#f9b9a0 !important;background:#fff0e8 !important}
.warnkachel strong{color:#b54708}

.entry.task.pruefung{border-left-style:solid;border-left-width:5px;border-left-color:#e5484d;
  background:#fff7f7}
.marke{display:inline-block;background:#e5484d;color:#fff;border-radius:6px;
  padding:1px 6px;font-size:.66rem;vertical-align:1px;letter-spacing:.02em}

.lern-wahl{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ankreuz{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.86rem;
  border:1px solid var(--line);border-radius:99px;padding:6px 12px;margin:0}
.ankreuz input{width:18px;height:18px;margin:0}

.schnitt-leiste{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.schnitt{display:flex;align-items:baseline;gap:6px;border:1px solid var(--line);
  border-radius:12px;padding:7px 12px;background:#fff}
.schnitt span{color:var(--muted);font-size:.78rem;font-weight:700}
.schnitt strong{font-size:1.05rem}
.schnitt small{color:var(--muted);font-size:.7rem}
.schnitt.gesamt{background:var(--ink);border-color:var(--ink)}
.schnitt.gesamt span{color:#c8ccd4}
.schnitt.gesamt strong{color:#fff}

.note-zeile{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:10px 12px;background:#f8f9fc;border-radius:13px;min-width:0}
.note-zeile > span{min-width:0}
.note-zeile strong{display:block}
.note-zeile small{color:var(--muted);display:block;overflow-wrap:break-word}
.notenwert{font-size:1.25rem;font-weight:800;min-width:44px;text-align:center;
  border-radius:10px;padding:5px 8px}
/* 🔴 Gruen und rot haengen am Notensystem, nicht am Zahlenwert: bei Zensuren
   ist 1 gut, bei Punkten 15. Die Zuordnung faellt in app.js, nicht hier. */
.notenwert.gut{background:#e8f8f2;color:#0a7a55}
.notenwert.mittel{background:#fff5dc;color:#8a5a00}
.notenwert.schlecht{background:#ffeded;color:#b42318}
.schnitt strong.gut{color:#0a7a55}
.schnitt strong.mittel{color:#8a5a00}
.schnitt strong.schlecht{color:#b42318}
.schnitt.gesamt strong.gut,.schnitt.gesamt strong.mittel,.schnitt.gesamt strong.schlecht{color:#fff}

@media(max-width:600px){
  .note-zeile{grid-template-columns:auto 1fr;row-gap:8px}
  .note-zeile .task-rechts{grid-column:1 / -1;justify-content:flex-start}
}
/* Schule und Faechervorschlag (ADR 0006)
   🔴 minmax(0,1fr) und overflow-wrap:anywhere: "Gemeinschaftskunde/Rechtserziehung/
   Wirtschaft" hat kein Leerzeichen. Ohne beides bestimmt dieser eine Name die
   Mindestbreite des Rasters, und auf dem Handy laeuft der Dialog seitlich ueber. */
.abschnitt{font-weight:800;font-size:.9rem;margin:4px 0 8px}
.vorschlag-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:8px 0}
.vorschlag-liste .ankreuz{border-radius:14px;min-width:0}
.vorschlag-liste .ankreuz span{flex:1;min-width:0;overflow-wrap:anywhere}
.vorschlag-liste small{color:var(--muted);font-weight:500;display:block}
.vorschlag-liste select{margin:0;width:auto;max-width:45%;flex:0 1 auto;padding:6px 8px}
#faecher-liste{grid-template-columns:minmax(0,1fr)}
.fach-zeile{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center}
.fach-zeile > span{min-width:0;overflow-wrap:anywhere}
.fach-zeile input{grid-column:1 / -1;margin:0}
.abstand-oben{margin-top:14px}
.klein.ohne-abstand{margin-top:0}
/* Diktieren (diktat.js) */
.diktat-knopf{margin:0;justify-self:start;border:1px solid var(--line);background:#fff;border-radius:99px;
  padding:7px 14px;font-weight:700;font-size:.85rem;cursor:pointer;color:var(--ink)}
.diktat-knopf.hoert{background:#e5484d;border-color:#e5484d;color:#fff}
.diktat-knopf:disabled{color:var(--muted);cursor:default;font-weight:500}

/* --- Wochenkalender (raster.js) ----------------------------------------------
   Ruhig, technisch, hochwertig (Vorlage Tassilo 04.10.2026: Linear / Notion
   Calendar): fast weiss, sehr duenne Linien, Termine nur ueber einen 3-px-Streifen
   und eine helle Flaeche unterschieden, keine Schatten im Ruhezustand,
   8-px-Raster, Radien 6-12 px. Leere Stunden gefaltet (eigene Idee).
   Lage und Hoehe setzt raster.js per element.style (CSP). */
/* 🔴 Nur ab 801 px. Ohne die Media-Abfrage schlaegt diese Regel (weiter unten in
   der Datei) das "week-grid ausblenden" fuer Handys - dann stand dort unter der
   Tagesansicht zusaetzlich die ganze Woche in sieben Fingerbreiten (04.10.2026). */
@media (min-width:801px){.week-grid{display:block;overflow:visible}}
.raster-rahmen{--k-linie:#edf0f3;--k-rand:#e4e7ec;--k-text2:#667085;--k-text3:#98a2b3;
  border:1px solid var(--k-rand);border-radius:12px;background:#fff;overflow:hidden}
.raster{display:grid;min-width:0}
.r-spalte,.r-achse{min-width:0;border-left:1px solid var(--k-linie)}
.r-achse{border-left:0;background:#fafbfc;border-right:1px solid var(--k-rand)}
.r-spalte.wochenende{background:#fafbfc}
.r-spalte.heute{background:linear-gradient(180deg,rgba(54,92,245,.04),transparent 320px)}
.r-kopf{height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-bottom:1px solid var(--k-rand);background:rgba(255,255,255,.92)}
.r-name{font-size:.75rem;font-weight:650;color:var(--k-text2)}
.r-datum{font-size:.82rem;font-weight:700;color:#101828;font-variant-numeric:tabular-nums}
.r-kopf.heute .r-datum{background:#101828;color:#fff;border-radius:8px;padding:2px 7px}
.r-kopf.heute .r-name{color:#365cf5}
.r-los{padding:4px;border-bottom:1px solid var(--k-linie);overflow:hidden}
.r-los.leer{padding:0;border-bottom:0}
.r-los .entry{margin:2px 0;padding:4px 6px;font-size:.72rem;box-shadow:none;border-radius:6px}
.r-los .entry strong{font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-flaeche{position:relative}
.r-flaeche.frei{cursor:copy}
.r-flaeche.ferien{background:#f5f3ff}
.r-ferien{padding:10px;color:#5b3fb2;font-weight:700;font-size:.8rem}
.r-zeit{position:absolute;right:8px;font-size:.66rem;color:var(--k-text3);font-variant-numeric:tabular-nums;
  transform:translateY(4px)}
.r-falte{position:absolute;left:0;right:0;background:repeating-linear-gradient(135deg,#f8f9fb 0,#f8f9fb 4px,#f1f3f6 4px,#f1f3f6 8px)}
.r-falte-text{position:absolute;right:6px;left:0;display:flex;align-items:center;justify-content:flex-end;
  font-size:.58rem;color:#b0b7c3;white-space:nowrap;font-variant-numeric:tabular-nums}
.r-block{position:absolute;z-index:1;container-type:inline-size}

/* Jetzt-Linie */
.r-jetzt{position:absolute;left:0;right:0;height:0;border-top:1px solid rgba(240,68,56,.35);z-index:4;pointer-events:none}
.r-jetzt.heute{border-top:1.5px solid #f04438}
.r-jetzt.heute::before{content:"";position:absolute;left:-4px;top:-4.5px;width:7px;height:7px;border-radius:50%;background:#f04438}
.r-jetzt-zeit{position:absolute;right:4px;font-size:.62rem;font-weight:700;color:#d92d20;transform:translateY(-50%);
  background:#fafbfc;padding:0 2px;font-variant-numeric:tabular-nums;z-index:5}

/* Vorschau beim Darueberfahren: hier landet ein neuer Termin. */
.r-auswahl{position:absolute;left:4px;right:4px;border:1px dashed rgba(54,92,245,.4);border-radius:7px;
  background:rgba(54,92,245,.05);color:#365cf5;font-size:.68rem;font-weight:700;padding:4px 7px;
  pointer-events:none;z-index:2}

/* Unterricht: 3-px-Streifen links, helle Flaeche, keine Schatten. */
.b-schule,.b-termin{--farbe:#475569;position:relative;height:100%;overflow:hidden;cursor:pointer;border-radius:8px;
  padding:6px 8px 6px 30px;background:color-mix(in srgb,var(--farbe) 7%,#fff);
  border:1px solid rgba(16,24,40,.06);display:flex;flex-direction:column;gap:1px;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.b-schule::before,.b-termin::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--farbe)}
.b-schule:hover,.b-termin:hover{transform:translateY(-1px);border-color:rgba(16,24,40,.12);
  box-shadow:0 6px 16px rgba(16,24,40,.07);z-index:10}
.b-symbol{position:absolute;left:9px;top:7px;width:15px;height:15px;color:var(--farbe)}
.b-zeit{font-size:.64rem;font-weight:500;color:#667085;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-schule strong,.b-termin strong{font-size:.78rem;font-weight:700;line-height:1.25;
  color:color-mix(in srgb,var(--farbe) 80%,#101828);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:18px}
.b-raum{font-size:.66rem;color:#667085;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-nr{position:absolute;top:6px;right:7px;font-size:.6rem;font-weight:700;color:#98a2b3;font-variant-numeric:tabular-nums}
.b-marke,.b-test{align-self:flex-start;margin-top:auto;height:18px;display:inline-flex;align-items:center;
  padding:0 6px;border-radius:4px;font-size:.56rem;font-weight:750;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.b-test{background:#fff0f0;color:#c9343a}
.b-test.aenderbar{cursor:pointer}
.b-marke.aus{background:#f2f4f7;color:#667085}
.b-marke.neu{background:#fff6e5;color:#a15c00}
.b-schule.faellt-aus{background:repeating-linear-gradient(135deg,#fff 0,#fff 6px,#f6f7f9 6px,#f6f7f9 12px)}
.b-schule.faellt-aus::before{background:#d0d5dd}
.b-schule.faellt-aus strong{text-decoration:line-through;color:#98a2b3}
.b-schule.faellt-aus .b-symbol{color:#c4c7cf}
.b-schule.geaendert{border-color:#fdd38a}
.b-schule.offen{background:#fff;border:1px dashed #d0d5dd}
.b-schule.offen::before{background:#d0d5dd}
.b-schule.offen strong{color:#667085}
/* Freizeit: dieselbe Form, aber gestrichelt - sofort von Unterricht zu unterscheiden. */
.b-termin{--farbe:#6457e6;background:rgba(100,87,230,.055);border:1px dashed rgba(100,87,230,.45)}
/* Einzelstunde: kein Raum, keine Marke - Fach und Zeit muessen passen. */
.r-block.klein .b-raum,.r-block.klein .b-marke,.r-block.klein .b-test{display:none}
.r-block.klein .b-schule,.r-block.klein .b-termin{padding-top:3px;padding-bottom:3px;gap:0}
.r-block.klein .b-symbol{top:4px}
#tag-raster .raster-rahmen{border-radius:12px}
.lower-grid:has(#panel-klasse[hidden]){grid-template-columns:1fr}

/* Auf Desktop und iPad zeigt der Kalenderkopf die Tage - der Streifen waere
   dasselbe zweimal. Er bleibt nur auf dem Handy, wo er die Navigation ist. */
@media (min-width:801px){.week-strip{display:none}}

/* Abgleich-Knopf: dunkel; nur das Symbol dreht sich, waehrend abgeglichen wird. */
.week-controls #knopf-sync{background:var(--ink);color:#fff;width:42px;display:grid;place-items:center}
.sync-symbol{display:inline-block;font-size:1.05rem;line-height:1}
#knopf-sync.dreht .sync-symbol{animation:dreht .9s linear infinite}
#knopf-sync.dreht{cursor:progress}
#knopf-sync.fertig{background:#079455}
@keyframes dreht{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#knopf-sync.dreht .sync-symbol{animation:none;opacity:.5}
  .b-schule,.b-termin{transition:none}}

/* Fach-Dialog (fach.js) */
.fach-kopf{--farbe:#475569;border-left:6px solid var(--farbe);padding-left:10px}
.fach-kopf h2{color:var(--farbe)}
.fach-heute p{margin:.2rem 0 .6rem}
.fach-ausfall{padding:8px 10px;border-radius:10px;background:#fff6ed}
.fach-ausfall.entfaellt{background:#ffeded}
.fach-test .marke{margin-right:4px}

/* Schmale Bloecke: Kuerzel statt Name, Symbol weg. Entscheidet die Breite des
   Blocks selbst (Container-Abfrage), nicht die des Bildschirms. */
.b-kurz{display:none}
@container (max-width:104px){
  .b-lang,.b-symbol,.b-nr{display:none}
  .b-kurz{display:inline}
  .b-schule,.b-termin{padding-left:8px;padding-right:4px}
  .b-schule strong{padding-right:14px}
}

/* A/B-Woche als Marke neben dem Datum. */
.woche-typ{display:inline-block;white-space:nowrap;vertical-align:middle;font-size:.72rem;font-weight:750;
  letter-spacing:.02em;color:#365cf5;background:#eef2ff;border-radius:6px;padding:2px 7px;margin-left:4px}

/* Handy: Knoepfe in eine eigene, volle Zeile unter den Titel; in der
   Tagesansicht kein Rasterkopf - Streifen und Ueberschrift nennen den Tag schon. */
@media (max-width:800px){
  .planner .section-head{flex-wrap:wrap;gap:10px}
  .planner .section-head > div:first-child{flex:1 1 100%}
  .week-controls{flex:1 1 100%;display:grid;grid-template-columns:44px 1fr 44px 44px;gap:6px}
  .week-controls button{height:40px;padding:0}
  .week-controls #knopf-sync{width:auto}
  #tag-raster .r-kopf{display:none}
  #week-grid{display:none}
  .tag-titel{margin-top:.6rem}
}