: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 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}
/* Ein Scrollbereich je Dialog: der Dialog selbst (siehe unten). Ein zweiter im Formular liess sich auf dem iPhone
   nicht scrollen (Familientest 08.10.2026, Emilio: "Ich kann nichts bewegen, nichts scrollen"). */

/* 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}
}
@media(max-width:480px){
  .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 > *, .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) ----------------------------- */

.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}
/* Ein Termin IN einer Schulstunde liegt ueber ihr, volle Breite, mit Schatten
   (KIG-LRN-0113: vorher halbe Spalte neben der Stunde, 15 Minuten unlesbar). */
.r-block.ueber{z-index:3}
.r-block.ueber .b-termin{background:#fff;box-shadow:0 2px 10px rgba(16,24,40,.18);border-style:solid}
/* Termin, der nicht in seinen Platz passt: schmaler Balken, Zeit und Titel beim Drueberfahren
   oder Antippen (Fokus) als Hinweis darueber (Tassilo 07.10.). */
.r-block.balken{z-index:3}
.r-block.balken .b-termin{padding:0;gap:0;min-height:0;border:0;border-radius:4px;box-shadow:none;
  background:color-mix(in srgb,var(--farbe) 55%,#fff)}
.r-block.balken .b-termin > *{display:none}
.r-block.balken::after{content:attr(data-info);position:absolute;left:0;bottom:calc(100% + 4px);z-index:6;
  width:max-content;max-width:220px;background:#101828;color:#fff;font-size:.75rem;font-weight:600;line-height:1.3;
  padding:5px 8px;border-radius:6px;box-shadow:0 6px 18px rgba(16,24,40,.25);opacity:0;pointer-events:none;transition:opacity .12s}
.r-block.balken:hover::after,.r-block.balken:focus-within::after{opacity:1}
.r-block.balken:hover .b-termin,.r-block.balken:focus-within .b-termin{background:var(--farbe)}

/* 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}
/* Test oben im Block: Marke als erste Zeile ueber die volle Breite, Symbol und
   Stundennummer ruecken darunter. Der Stand x/y bleibt sichtbar, gekuerzt wird der Text. */
.b-schule.mit-test{padding-top:4px;border-color:#f6c9cb}
.b-schule.mit-test .b-test{order:-1;margin:0 0 3px -22px;align-self:stretch;max-width:none}
.b-schule.mit-test .b-symbol,.b-schule.mit-test .b-nr{top:27px}
.b-test-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.b-stand{flex:none;margin-left:6px;padding-left:6px;border-left:1px solid rgba(201,52,58,.25);
  font-variant-numeric:tabular-nums}
.b-stand.fertig{color:#067647}
.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.mit-test .b-test{margin-left:0}
  .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:auto 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}
}
.r-block.klein .b-schule.mit-test{padding-top:3px}
.r-block.klein .b-schule.mit-test .b-symbol,.r-block.klein .b-schule.mit-test .b-nr{top:4px}

/* Bereichswechsel Woche | Lernen - derselbe Schalter in beiden Bereichen. */
.bereich{display:inline-flex;background:#f2f4f7;border-radius:12px;padding:3px;gap:2px}
.bereich a{padding:8px 14px;border-radius:9px;font-weight:700;font-size:.88rem;color:#667085;text-decoration:none}
.bereich a[aria-current]{background:#fff;color:#101828;box-shadow:0 1px 3px rgba(16,24,40,.1)}
@media(max-width:480px){.bereich a{padding:7px 10px;font-size:.82rem}}

/* Wer hat die Lernzeit gelegt: Roboter (App) oder Person (du). */
.lernzeit-wer{display:inline-grid;place-items:center;width:18px;height:18px;color:#667085}
.lernzeit-wer .b-symbol{position:static;width:16px;height:16px;color:inherit}
.hinweis-ki{background:#f2f4f7;border-radius:10px;padding:9px 11px;margin:8px 0 0}

/* Engpass: die Zeit reicht nicht - Freizeit freiraeumen oder Gelerntes abhaken. */
.engpass-knopf{background:#fff6e5;color:#a15c00;border:1px solid #fdd38a;border-radius:12px;padding:10px;font-weight:700;cursor:pointer}
.engpass-lage{background:#fff6e5;color:#a15c00;border-radius:10px;padding:10px 12px;font-weight:600;margin:0 0 12px}
.engpass-lage.gut{background:#ecfdf3;color:#067647}
.engpass-liste{display:grid;gap:6px;margin:6px 0 4px}
.engpass-zeile{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;padding:8px 10px;background:#f8f9fc;border-radius:10px}
.engpass-zeile strong{display:block;font-size:.9rem}
.engpass-zeile small{color:#667085}
.engpass-liste .leer{margin:2px 0}

/* Vergangene Lernzeiten: gelernt / im Lernportal / nicht geschafft / noch offen. */
.b-gelernt{font-size:.62rem;font-weight:700;color:#067647;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-lernen.verpasst{opacity:.6}
.b-lernen.verpasst .b-gelernt{color:#b42318}
.b-lernen.verpasst strong{text-decoration:line-through}
.b-lernen.frage{border-style:solid;border-color:#fdd38a}
.b-lernen.frage .b-gelernt{color:#a15c00}
.r-block.klein .b-lernen .b-gelernt{margin-left:auto}
.lernzeit{grid-template-columns:20px 110px 92px 1fr}
@media (max-width:480px){.lernzeit{grid-template-columns:20px 1fr auto}}
.lernzeit-zeile .lernzeit{width:100%}
.lernzeit-zeile:has(.lernzeit-frage){display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;
  padding:8px 10px;border:1px solid #fdd38a;background:#fffaf0;border-radius:10px}
.lernzeit-frage{font-size:.85rem;font-weight:600;color:#a15c00}
.gelernt-zeile{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;padding:8px 10px;background:#f8f9fc;border-radius:10px}
.gelernt-zeile strong{display:block;font-size:.9rem}
.gelernt-zeile small{color:#667085}
.mini-knopf.gut{background:#ecfdf3;color:#067647;border-color:#abefc6}
.b-gelernt .g-kurz{display:none}
.r-block.klein .b-gelernt .g-lang{display:none}
.r-block.klein .b-gelernt .g-kurz{display:inline}
.r-block.klein .b-gelernt{flex:none;font-size:.75rem}

/* Lernumfang oben in der Kette: Ziel und Lernzeit insgesamt. */
.umfang{display:grid;gap:6px;background:#f8f9fc;border-radius:12px;padding:10px 12px;margin:0 0 12px}
.umfang .ziel-wahl-klein{margin:0}
.umfang-zeit{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.umfang-zeit strong{min-width:64px;text-align:center;font-variant-numeric:tabular-nums}
.umfang p{margin:0}
/* Engpass: selbst Lernzeit eintragen. */
.vorschlaege{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.engpass-selbst{display:grid;grid-template-columns:1fr auto auto auto;gap:6px;align-items:center}
.engpass-selbst select,.engpass-selbst input{padding:7px 8px;border-radius:9px}
@media (max-width:480px){.engpass-selbst{grid-template-columns:1fr 1fr}.engpass-selbst select{grid-column:1/-1}}
.meldung-rot{color:#b42318}
.umfang .klein-titel{margin:0}
.umfang{border:1px solid #e4e7ec}

/* Lernzeit-Regler: gruen ab Vorschlag, rot darunter; Strich = Vorschlag. */
.umfang-zeit{justify-content:space-between}
.umfang-zeit strong{font-size:1.05rem}
.umfang.reicht .umfang-zeit strong,.umfang.reicht .umfang-urteil{color:#067647}
.umfang.knapp .umfang-zeit strong,.umfang.knapp .umfang-urteil{color:#b42318}
.umfang-regler{--p:50%;--v:50%;--f:#12b76a;-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;
  padding:0;border:0;background:
    linear-gradient(90deg,transparent calc(var(--v) - 1px),#344054 calc(var(--v) - 1px),#344054 calc(var(--v) + 1px),transparent calc(var(--v) + 1px)),
    linear-gradient(90deg,var(--f) var(--p),#e4e7ec var(--p))}
.umfang.knapp .umfang-regler{--f:#f04438}
.umfang-regler::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;
  border:2px solid #344054;box-shadow:0 1px 4px rgba(16,24,40,.25);cursor:pointer}
.umfang-regler::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #344054;cursor:pointer}
.umfang-skala{display:flex;justify-content:space-between;align-items:center;gap:8px}
.umfang-urteil{font-weight:600}

/* Handy: Titel ueber volle Breite, darunter Schalter, Eintragen und Menue in einer Zeile -
   vorher brach der Titel in vier Zeilen und das Menue lief rechts aus dem Bild. */
@media (max-width:560px){
  .topbar{flex-wrap:wrap;align-items:flex-start;gap:12px}
  .topbar > div:first-child{flex:1 1 100%}
  .topbar h1{max-width:none;font-size:2rem}
  .topbar-rechts{width:100%;justify-content:space-between}
  .topbar-rechts .bereich{flex:1}
  .topbar-rechts .bereich a{flex:1;text-align:center}
}

/* Pruefung anlegen: Ziel und Unterlagen. */
.ziel-wahl-form{border:0;padding:0;margin:0 0 13px;display:flex;gap:8px;flex-wrap:wrap}
.ziel-wahl-form legend{font-weight:700;font-size:.88rem;margin-bottom:6px;padding:0}
.ziel-wahl-form label{display:inline-flex;flex-direction:row;align-items:center;gap:6px;margin:0;
  border:1px solid #d0d5dd;border-radius:99px;padding:6px 12px;font-weight:600;cursor:pointer}
.ziel-wahl-form input{width:auto;margin:0}
.ziel-wahl-form label:has(input:checked){border-color:#12b76a;background:#ecfdf3;color:#067647}
.hochladen small{font-weight:500;color:#667085}
/* Kette: Unterlagen. */
.unterlagen-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin:6px 0 8px}
.unterlage{position:relative;border:1px solid #e4e7ec;border-radius:10px;overflow:hidden;background:#f8f9fc;
  aspect-ratio:3/4;display:grid;place-items:center;text-align:center;font-size:.72rem;color:#475467}
.unterlage img{width:100%;height:100%;object-fit:cover}
.unterlage a{color:inherit;text-decoration:none;display:grid;place-items:center;width:100%;height:100%;padding:4px}
.unterlage .weg{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;
  background:rgba(16,24,40,.65);color:#fff;font-size:.9rem;line-height:1;cursor:pointer}
.hochladen-knopf{display:inline-flex;cursor:pointer}
.unterlage a{position:absolute;inset:0}
.unterlage img{display:block}

/* Lernpfad in der Kette: Tag mit Modul und Tagestest (ADR 0014). */
.schritt.lerntag{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;padding:8px 0}
.lerntag-text{display:grid;gap:2px;min-width:0}
.lerntag-text > span{font-weight:600}
.lerntag-text small{color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.lerntag-zeit{font-weight:500;color:#667085;margin-left:4px}
.lerntag-knoepfe{grid-column:2;display:flex;gap:6px;flex-wrap:wrap}
.mini-knopf.gut{background:#ecfdf3;color:#067647;border-color:#abefc6}
.mini-knopf.haupt{background:#101828;color:#fff;border-color:#101828}
/* Abschluss der Schrittkette als Knopf (KIG-LRN-0114). */
.kette-abschluss{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.kette-abschluss .kette-knopf{font-size:.95rem;padding:10px 16px}
.kette-abschluss .kette-fertig{margin:0;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kette-abschluss .kette-fertig .strich{width:22px;height:22px}
/* Gefuehl nach dem Test (KIG-LRN-0068): fuenf Strich-Gesichter, dann erwartete Note. */
.gefuehl-reihe{display:flex;gap:6px;flex-wrap:wrap}
.gefuehl-knopf{border:1px solid var(--k-linie,#e4e7ec);background:#fff;border-radius:99px;padding:4px 10px;cursor:pointer;line-height:0}
.gefuehl-knopf .strich{width:28px;height:28px}
.gefuehl-knopf.aktiv{border-color:#101828;background:#f2f4f7}
.kette-feld{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-weight:500}
.kette-feld select,.kette-feld input{width:auto;min-width:0;max-width:7.5em;font-size:16px}
.kette-note-reihe{display:flex;gap:14px;flex-wrap:wrap}
.entry.task.pruefung.geschrieben{border-left-color:#98a2b3;opacity:.75}
/* Alter Test (KIG-LRN-0069): zweiter Hochladen-Knopf, Abzeichen am Bild, Luecken darunter. */
.hochladen-reihe{display:flex;gap:8px;flex-wrap:wrap}
.unterlage .abzeichen{position:absolute;left:4px;bottom:4px;font-size:.62rem;font-weight:700;letter-spacing:.04em;
  background:#101828;color:#fff;border-radius:6px;padding:2px 6px;pointer-events:none}
.luecken{margin-top:8px;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:10px 12px;font-size:.88rem}
.luecken b{display:block;margin-bottom:4px}
.luecken ul{margin:0;padding-left:18px}
.luecken li+li{margin-top:2px}
.schritt.lerntag.fertig .lerntag-text > span{color:#067647}

/* Kette oben: Datum, Uhrzeit, Thema, Lernziel eckig (Tassilo 04.10.). */
.kette-grund{display:grid;gap:4px;margin:0 0 10px}
.kette-grund label{margin-bottom:8px}
.ziel-eckig{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-items:stretch}
.ziel-eckig > span{grid-column:1/-1;font-weight:700;font-size:.88rem}
.ziel-eckig button{border:1px solid #d0d5dd;background:#fff;border-radius:8px;padding:10px 6px;font-weight:600;cursor:pointer;
  display:grid;gap:2px;justify-items:center;color:#344054}
.ziel-eckig button b{font-size:1.15rem;color:#101828}
.ziel-eckig button.aktiv{border-color:#12b76a;background:#ecfdf3;color:#067647;box-shadow:inset 0 0 0 1px #12b76a}
.ziel-eckig button.aktiv b{color:#067647}
#schritte-was{border-top:1px solid var(--line);padding-top:10px;margin-bottom:6px}
.kg-beschreibung{margin-top:10px}
.pflicht{background:#fff6e5;color:#a15c00;border-radius:10px;padding:9px 11px;font-size:.85rem;font-weight:600;margin:6px 0}
.weitere{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.weitere summary{cursor:pointer;font-weight:700;color:#475467;padding:6px 0}
.weitere[open] summary{margin-bottom:10px}
.weitere-knoepfe{display:grid;gap:8px;margin-top:12px}
.full.gefahr{color:#b42318;background:#fff;border:1px solid #fecdca}
.umfang-regler{min-height:0;height:8px;box-sizing:border-box}
.ziel-wahl-form label{border-radius:8px}
.ziel-wahl-form label b{margin-left:2px}

/* ===== Kette im Stil des Beispiels (Tassilo 04.10.): Karten, Segment-Ziel, Zeitleiste ===== */
.kette-karte,.kette-grund,#schritte-was,.umfang{background:#fff;border:1px solid #eaecf0;border-radius:18px;
  padding:14px;margin:0 0 12px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
#schritte-was{border-top:1px solid #eaecf0}
.karten-titel{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:1.05rem}
.karten-symbol{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#ecfdf3;color:#067647}
.karten-symbol .pfad-ikon{width:18px;height:18px}
/* Ziel: Segment-Schalter, Note klein */
.ziel-eckig{grid-template-columns:repeat(3,1fr);background:#f2f4f7;border-radius:14px;padding:4px;gap:4px}
.ziel-eckig > span{padding:4px 6px 2px}
.ziel-eckig button{border:0;background:transparent;border-radius:10px;padding:9px 4px;grid-auto-flow:column;gap:6px;
  justify-content:center;align-items:baseline}
.ziel-eckig button b{font-size:.75rem;font-weight:700;color:#98a2b3}
.ziel-eckig button.aktiv{background:#12b76a;color:#fff;box-shadow:0 2px 6px rgba(18,183,106,.3)}
.ziel-eckig button.aktiv b{color:#d1fadf}
/* Schritte als Liste mit Trennlinien */
.kette-karte .schritt-liste .schritt{padding:10px 0;border-bottom:1px solid #f2f4f7}
.kette-karte .schritt-liste .schritt:last-child{border-bottom:0}
/* Lernpfad: Zeitleiste */
.pfad-liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lerntag{display:grid;grid-template-columns:40px 1fr;gap:10px;position:relative}
.lerntag:not(:last-child)::before{content:"";position:absolute;left:19px;top:42px;bottom:-12px;border-left:2px dashed #d0d5dd}
.pfad-kreis{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#475467;
  background:#fff;border:2px solid #e4e7ec;position:relative;z-index:1}
.lerntag.jetzt .pfad-kreis{background:#12b76a;border-color:#a6f4c5;color:#fff;box-shadow:0 0 0 4px #ecfdf3}
.lerntag.fertig .pfad-kreis{background:#ecfdf3;border-color:#12b76a;color:#067647}
.pfad-kreis .pfad-ikon{width:20px;height:20px}
.pfad-karte{background:#fff;border:1px solid #eaecf0;border-radius:14px;padding:10px 12px;display:grid;gap:8px;
  box-shadow:0 1px 3px rgba(16,24,40,.06)}
.lerntag.jetzt .pfad-karte{border-color:#a6f4c5}
.pfad-kopf{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;color:inherit;text-decoration:none}
.pfad-pfeil{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f2f4f7;color:#667085;flex:none}
.pfad-pfeil .pfad-ikon{width:16px;height:16px}
.lerntag-knoepfe{display:flex;gap:8px;flex-wrap:wrap;grid-column:auto}
.pfad-knopf{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:8px 14px;font-weight:600;font-size:.88rem;
  text-decoration:none;background:#f2f4f7;color:#344054}
.pfad-knopf.modul{background:#ecfdf3;color:#067647}
.pfad-knopf .pfad-ikon{width:18px;height:18px}
.pfad-knopf.gut{background:#12b76a;color:#fff}
/* Regler: Skala und Vorschlag im Kasten */
.umfang-marken{position:relative;height:18px;margin:2px 10px 0;font-size:.72rem;color:#667085}
.umfang-marken span{position:absolute;left:var(--x);transform:translateX(-50%)}
.umfang-skala{background:#ecfdf3;border-radius:12px;padding:10px 12px}
.umfang.knapp .umfang-skala{background:#fef3f2}
.umfang-regler{height:12px}

/* 🔴 Einzelstunde mit Pruefung: die Marke war ausgeblendet ("klein" = kein Platz) - Emilios
   Geografie-Test am Montag war so unsichtbar (Tassilo 04.10.). Eine Pruefung bleibt immer
   sichtbar: als kompakte Marke rechts oben, Thema gekuerzt, Stand bleibt. */
.r-block.klein .b-schule.mit-test .b-test{display:inline-flex;position:absolute;top:3px;right:6px;margin:0;
  max-width:58%;height:16px;font-size:.52rem;padding:0 5px;z-index:1;align-self:auto}
.r-block.klein .b-schule.mit-test{padding-top:3px;border-color:#f6c9cb}
.r-block.klein .b-schule.mit-test .b-nr{display:none}
.r-block.klein .b-schule.mit-test strong{padding-right:58%}

/* Eltern im Menue */
.eltern-zeile{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;background:#f8f9fc;border-radius:10px;margin:6px 0}
.eltern-zeile small{display:block;color:var(--muted)}
.code-anzeige{display:grid;gap:4px;text-align:center;background:#ecfdf3;border-radius:12px;padding:12px}
.code-anzeige strong{font-size:1.6rem;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.eltern-ich{margin:10px 0}
.eltern-ich summary{cursor:pointer;font-weight:700;color:#475467;padding:6px 0}
/* Hilfe */
.hilfe-knopf{font-size:1.2rem;font-weight:800}
.hilfe-karten{display:grid;gap:8px}
.hilfe-karte{border:1px solid var(--line);border-radius:14px;padding:10px 14px;background:#fff}
.hilfe-karte summary{cursor:pointer;font-weight:700}
.hilfe-karte ol{margin:8px 0 2px;padding-left:20px;display:grid;gap:6px;color:#344054}
/* Eltern-Ansicht */
.eltern{max-width:720px}
.eltern-kopf h1{font-size:clamp(1.6rem,6vw,2.6rem)}
.zurueck-link{font-weight:700;color:#475467;text-decoration:none;white-space:nowrap}
.eltern-hinweis{color:var(--muted);margin:4px 0 14px}
.eltern-wahl{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.eltern-wahl button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:8px 14px;font-weight:700;cursor:pointer}
.eltern-wahl button.aktiv{background:#101828;color:#fff;border-color:#101828}
.e-zwischen{font-size:1.1rem;margin:16px 0 8px}
.e-karte{background:#fff;border:1px solid #eaecf0;border-radius:18px;padding:14px;margin:0 0 12px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.e-karte h4{margin:12px 0 4px;font-size:.85rem;color:#667085}
.e-karte-kopf{display:grid;gap:2px}
.e-art{font-size:.78rem;font-weight:700;color:#c9343a;letter-spacing:.02em}
.e-karte-kopf small{color:var(--muted)}
.e-tage{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.e-tage li{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 10px;background:#f8f9fc;border-radius:10px;font-size:.9rem}
.e-tage li.fertig{background:#ecfdf3}
.e-marken{display:flex;gap:6px}
.e-marken i{font-style:normal;font-size:.78rem;font-weight:700;padding:2px 8px;border-radius:99px;background:#eaecf0;color:#475467}
.e-marken i.gut{background:#12b76a;color:#fff}
.e-liste{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.e-liste li{display:flex;justify-content:space-between;gap:8px;font-size:.9rem;padding:4px 0;border-bottom:1px solid #f2f4f7}
.e-liste b.gut{color:#067647} .e-liste b.schlecht{color:#b42318}
.e-zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px;text-align:center}
.e-zahlen b{display:block;font-size:1.3rem}
.e-zahlen small{color:var(--muted);font-size:.72rem}
@media (max-width:480px){.e-zahlen{grid-template-columns:repeat(2,1fr)}}

.tor-hinweis{background:#ecfdf3;color:#067647;border-radius:10px;padding:10px 12px;font-weight:600;font-size:.9rem}
#tor-vergessen{margin-top:-4px}

/* iPhone als Web-App (Matteo, iPhone 12 mini, 04.10.2026):
   - Felder unter 16 px laesst Safari beim Antippen hineinzoomen - und es bleibt gezoomt.
   - Kerbe und Home-Leiste: Abstand ueber env(safe-area-inset-*), viewport-fit=cover ist gesetzt.
   - Dialoge nie hoeher als der sichtbare Bereich (dvh beachtet die Safari-Leisten). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:800px){input,select,textarea{font-size:16px}}
dialog{max-height:calc(100dvh - 24px);overflow-y:auto;-webkit-overflow-scrolling:touch}
/* Seite dahinter festhalten, solange ein Dialog offen ist - statt overscroll-behavior am Dialog (stoerte iOS). */
html:has(dialog[open]){overflow:hidden}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
@media(max-width:800px){.topbar{padding-top:max(26px,calc(env(safe-area-inset-top) + 12px))}}
.tor{padding-top:max(24px,env(safe-area-inset-top))}

/* Datum/Uhrzeit nebeneinander passen auch auf iPad/iPhone: Safari gibt date/time-Feldern eine
   Mindestbreite - ohne minmax(0,1fr) und min-width:0 ragen sie aus der Karte (Tassilo 04.10.). */
.form-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
input,select,textarea{min-width:0;max-width:100%}
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;min-height:44px;text-align:left}
.kg-stunde{display:grid;align-content:start;gap:4px;font-weight:700;font-size:.88rem;margin-bottom:8px}
.kg-stunde b{font-weight:600;font-size:1rem;padding:11px 0 0}
.kg-stunde .text-button{justify-self:start;padding:4px 0;font-size:.85rem}

/* Anleitung auf der Anmeldeseite (Tassilo 05.10.) */
.tor{gap:28px;align-content:start}
.anleitung{width:min(760px,100%);margin:0 auto 32px}
.anleitung h2{font-size:1.25rem;margin:0 0 12px;text-align:center}
.anleitung-schritte{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.anleitung-schritte li{background:#fff;border:1px solid #e4e7ec;border-radius:18px;padding:14px 16px}
.anleitung-schritte h3{margin:0 0 4px;font-size:1rem;display:flex;align-items:center;gap:8px}
.anleitung-schritte h3 span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#101828;color:#fff;font-size:.85rem}
.anleitung-schritte p{margin:0 0 10px;color:#667085;font-size:.9rem}
.anleitung-bilder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.anleitung-bilder img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid #e4e7ec;box-shadow:0 6px 16px rgba(16,24,40,.08)}
.anleitung-quelle{font-size:.75rem;color:#667085;text-align:center;margin:10px 0 0}
.anleitung-quelle a{color:inherit}

/* Grosses Bild der Anleitung: mit X, Tippen daneben oder Zurueck schliesst (Tassilo 05.10.) */
dialog.bild-gross{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh;
  display:none;place-items:center;overflow:hidden}
dialog.bild-gross[open]{display:grid}
dialog.bild-gross::backdrop{background:rgba(16,24,40,.85)}
dialog.bild-gross img{max-width:min(92vw,520px);max-height:calc(100dvh - 96px);width:auto;height:auto;border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);background:#fff}
.bild-gross-zu{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;width:48px;height:48px;border-radius:50%;
  border:0;background:#fff;color:#101828;font-size:1.4rem;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.3);z-index:2}

/* Hinweis private Seite (Tassilo 05.10.) und Bot-Falle */
.privat-banner{margin:0 auto;text-align:center;font-weight:800;letter-spacing:.06em;font-size:.8rem;color:#b54708;
  background:#fffaeb;border:1px solid #fedf89;border-radius:999px;padding:6px 14px;width:fit-content;max-width:100%}
.falle{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Marke hab's gecheckt (KIG-LRN-0065): Wortmarke auf der Anmeldung, einzeilig in der Kopfzeile. */
.marke-logo{display:block;width:150px;height:auto;margin:0 0 10px}
.marke-zeile{display:block;height:20px;width:auto;margin:0 0 6px}

/* Kopf wie im Lernbereich (KIG-LRN-0066): schmale Leiste, Info "Heute", Eintragen beim Kalender. */
.leiste{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.leiste-marke{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.leiste-symbol{display:block;width:32px;height:32px;border-radius:9px;flex:none}
.leiste-wort{display:block;height:18px;width:auto}
.leiste-rechts{display:flex;align-items:center;gap:8px}
.leiste-knopf{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:1.05rem;font-weight:700;cursor:pointer;padding:0}
.seiten-titel{font-size:clamp(1.6rem,3vw,2.4rem);margin:18px 0 0}
.knopf-eintragen{background:var(--ink)!important;color:#fff;font-weight:650!important;padding:9px 14px!important}
@media(max-width:560px){
  .leiste-wort{display:none}              /* das Symbol reicht, der Platz gehoert den Schaltern */
  .seiten-titel{font-size:1.5rem;margin-top:14px}
  .knopf-eintragen{font-size:0!important;width:40px;padding:0!important}
  .knopf-eintragen::after{content:'+';font-size:1.3rem;font-weight:700}
}
.ziel-eckig button:disabled{opacity:.4;cursor:not-allowed}

/* Anmeldung (Tassilo 05.10.: "Anmeldung in die Mitte, dann etwas Abstand, So funktioniert es"):
   Marke, Titel und Links mittig; Felder buendig mit der Karte; deutlicher Abstand zur Anleitung. */
.tor{gap:72px}
.tor-karte .marke-logo{margin:4px auto 14px}
.tor-karte h1{text-align:center}
.tor-form{padding:0}
.tor-karte > .text-button{display:block;margin:2px auto}
.tor-karte > .klein{text-align:center;margin-bottom:0}
.tor-karte > .tor-fehler,.tor-karte > .tor-hinweis{text-align:center}
@media(max-width:560px){.tor{gap:48px}}

/* Homescreen-Anleitung (Tassilo 05.10.: "wie ich es auf den Homescreen bekomme - wir machen ja nur eine Web-App") */
.homescreen{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0}
.homescreen > div{background:#f8f9fc;border-radius:12px;padding:12px 14px}
.homescreen ol{margin:6px 0 0;padding-left:20px;display:grid;gap:4px}
@media(max-width:560px){.homescreen{grid-template-columns:1fr}}

/* Leiste auf dem Handy (Tassilo 05.10., echtes iPhone: Symbol verdeckt, Menue rechts abgeschnitten):
   kompakt, "?" steckt dann im Menue. */
.leiste-marke{flex:none}
.leiste-rechts{min-width:0}
@media(max-width:560px){
  .leiste{padding-left:10px;padding-right:10px;gap:6px}
  .leiste-rechts{gap:5px}
  .leiste-knopf{width:32px;height:32px;font-size:.95rem}
  .leiste-symbol{width:30px;height:30px}
  .leiste .hilfe-knopf{display:none}
  .leiste .bereich{padding:2px}
  .leiste .bereich a{padding:6px 8px;font-size:.8rem}
  .kh-knopf{height:32px;padding:0 6px;font-size:.82rem;gap:3px}
}

/* Konto & Einstellungen als eigene Seite (Tassilo 05.10.2026: "nicht als Pop-up, nicht so untereinander").
   Karten je Thema im Raster; Eingabe und Knopf nebeneinander statt untereinander. */
.konto-seite{max-width:1100px;margin:0 auto;padding:18px 42px 60px}
.konto-kopf{display:flex;align-items:center;gap:12px}
.konto-kopf .seiten-titel{margin:0}
.konto-kopf .klein{margin:2px 0 0}
.konto-schnell{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px}
.konto-schnell > *{border:1px solid var(--line);background:#fff;border-radius:99px;padding:8px 14px;font-weight:700;
  font-size:.9rem;color:var(--ink);text-decoration:none;cursor:pointer}
.konto-hinweis{min-height:1.2em;margin:4px 0 8px;color:#067647;font-weight:600}
.konto-hinweis:empty{min-height:0;margin:0}
.konto-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;align-items:start}
.konto-karte{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.konto-karte > summary{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;
  align-items:center;padding:14px 16px;cursor:pointer;list-style:none}
.konto-karte > summary::-webkit-details-marker{display:none}
.konto-karte > summary .konto-symbol{grid-row:1/3;font-size:1.4rem}
.konto-karte > summary small{color:var(--muted);font-size:.82rem}
.konto-karte[open] > summary{border-bottom:1px solid var(--line)}
.konto-karte > :not(summary){margin-left:16px;margin-right:16px}
.konto-karte > :last-child{margin-bottom:16px}
.konto-karte > label{display:block;margin-top:12px;margin-bottom:6px}
.konto-karte > .full,.konto-karte > .knopf-link{margin-top:12px}
.konto-zeile{display:flex;gap:8px;margin-bottom:8px}
.konto-zeile > input,.konto-zeile > select{flex:1 1 auto;min-width:0}
.konto-zeile > button{flex:none;border:0;border-radius:11px;background:var(--ink);color:#fff;font-weight:700;padding:0 14px;cursor:pointer}
.konto-karte > input{margin-bottom:8px}
.konto-karte .eltern-ich{margin-top:10px}
.gefahr{color:#b42318!important}
@media(max-width:800px){.konto-seite{padding:14px 14px 60px}.konto-raster{grid-template-columns:1fr;gap:10px}}
.konto-karte > input,.konto-karte > .full,.konto-karte > .knopf-link,.konto-karte > details{width:calc(100% - 32px);box-sizing:border-box}
/* Strich-Icons in der Konto-Seite */
.konto-symbol{color:#475467}
.konto-symbol .strich{width:24px;height:24px}
.konto-schnell > *{display:inline-flex;align-items:center;gap:6px}
.konto-schnell .strich{color:#475467}

/* Plan als Foto und Kalender-Abo (web/terminplan.js, 05.10.2026). */
dialog.dialog-breit{width:min(640px,calc(100% - 20px))}
.knopf-mit-symbol{display:flex;align-items:center;justify-content:center;gap:8px}
.knopf-mit-symbol .strich,.tp-drehen .strich{width:18px;height:18px}
.tp-bild{display:grid;gap:10px;margin-top:4px}
.tp-bild canvas{width:100%;height:auto;max-height:52vh;object-fit:contain;border:1px solid var(--line);border-radius:12px;background:#f8f9fc}
.tp-drehen{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tp-drehen button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#f2f4f7;
  border-radius:11px;padding:8px 12px;font-weight:700;cursor:pointer}
.tp-drehen .klein{text-align:center}
.tp-liste{display:grid;gap:12px;margin:4px 0 10px;max-height:46vh;overflow-y:auto;padding-right:2px}
.tp-tag{display:grid;gap:6px}
.tp-tag > b{font-size:.84rem;color:var(--muted)}
.tp-zeile{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) 22px;gap:6px;align-items:center;
  background:#f8f9fc;border:1px solid transparent;border-radius:12px;padding:8px}
.tp-zeile input{padding:7px 8px;border-radius:9px}
.tp-zeile input[type=checkbox]{width:19px;height:19px;padding:0;accent-color:var(--accent)}
.tp-zeile input[data-feld=name]{grid-column:1 / -1}
.tp-zeile.unsicher{background:#fffaeb;border-color:#fedf89}
.tp-warn{color:#b54708;display:flex;justify-content:center}
.tp-warn .strich{width:18px;height:18px}
.tp-zeile:has(input[data-feld=an]:not(:checked)){opacity:.5}
.tp-importe{display:grid;gap:6px;margin-top:8px}
.tp-import{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#f8f9fc;border-radius:10px;
  padding:8px 10px;font-size:.86rem}
.tp-import small{color:var(--muted);margin-left:4px}
.abo-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.abo-knoepfe .knopf-link{margin:0;width:100%;font-size:.84rem;color:var(--ink)}
#abo-inhalt > .full{width:100%}
@media(min-width:560px){.tp-zeile{grid-template-columns:auto 110px 110px minmax(0,1fr) 22px}
  .tp-zeile input[data-feld=name]{grid-column:4;grid-row:1}.tp-zeile .tp-warn{grid-column:5;grid-row:1}}

/* --- Jetzt-Band (web/jetzt.js, 08.10.2026) -----------------------------------
   Ersetzt Ueberschrift und drei Kacheln. Was gerade laeuft, steht betont und breiter (1,618 : 1), was danach
   kommt, ruhig daneben. Raster 8: Hoehe 48, Abstand 8, Innenabstand 16, Radius 12. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jetzt{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.jetzt-teil{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 16px;border-radius:12px;
  background:var(--paper);border:1px solid var(--line);min-width:0;flex:1 1 240px}
.jetzt-teil.laeuft{flex:1.618 1 280px;background:var(--ink);border-color:var(--ink);color:#fff}
.jetzt-zeichen{display:inline-flex;flex:none}
.jetzt-zeichen .strich{width:20px;height:20px}
.jetzt-marke{flex:none;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.laeuft .jetzt-marke{color:#c0c5d6}
.jetzt-was{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem}
.jetzt-zusatz{flex:none;margin-left:auto;padding-left:8px;font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums}
.laeuft .jetzt-zusatz{color:#e4e7ec}
.jetzt-teil.leer{color:var(--muted)}
@media(max-width:560px){.jetzt{margin:8px 0}.jetzt-teil{min-height:40px}.jetzt-zeichen{display:none}}   /* der Fachname braucht den Platz */

/* --- Ueberlagerte Eintraege (web/raster.js, 08.10.2026) ----------------------
   Was gerade laeuft, liegt oben (.unter = Termin hinter der laufenden Stunde, .deckt = Stunde mit Punkt
   "darunter liegt etwas"). Waagerecht wischen schiebt den oberen Block kurz beiseite; senkrecht scrollt. */
.r-block.ueber:not(.balken),.r-block.deckt{touch-action:pan-y;transition:translate .25s ease}
.r-block.ueber.unter{z-index:0}
.r-block.deckt::after{content:'';position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;
  background:var(--ink);box-shadow:0 0 0 2px #fff;pointer-events:none}
.r-block.wischt{transition:none;z-index:7}
@media (prefers-reduced-motion:reduce){.r-block.ueber,.r-block.deckt{transition:none}}

/* Ferien und Feiertage (server/ferien.js, 08.10.2026): Band oben in der Spalte; Termine bleiben sichtbar. */
.r-flaeche.ferien .r-ferien{position:absolute;top:0;left:0;right:0;z-index:2;padding:4px 8px;font-size:.75rem;
  background:#ebe9fe;border-radius:0 0 8px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}

/* Speichern bleibt im Dialog unten sichtbar (Familientest 08.10.2026, Emilio: "Wo kann man auf Anlegen druecken,
   man kann nur auf X druecken"). Auf dem iPhone lag "Speichern" im Test-Dialog 170 px unter dem sichtbaren Teil. */
dialog form > button.primary.full[type=submit]{position:sticky;bottom:0;z-index:2;margin-top:16px;
  box-shadow:0 -16px 16px -4px #fff, 0 8px 0 8px #fff}

/* Lernpfad erstellt: Karte leuchtet kurz auf, Meldung oben in der Karte (Familientest 08.10.2026). */
.kette-karte.frisch{box-shadow:0 0 0 3px #6d5dfc,0 12px 32px rgba(109,93,252,.25);transition:box-shadow .3s}
.lernpfad-meldung{margin:0 0 8px;padding:8px 16px;border-radius:12px;background:#f4f3ff;color:#3e1c96;font-weight:600}

/* --- Wegweiser in der Testvorbereitung (web/wegweiser.js, 08.10.2026) ---------------------------------
   Oben im Dialog: vier Stationen, "Als Naechstes", ein Satz, EINE Hauptaktion. Raster 8. */
.wegweiser{display:grid;gap:8px;margin:0 0 16px;padding:16px;border-radius:16px;
  background:linear-gradient(135deg,#f4f3ff 0%,#eef4ff 60%,#ecfdf3 100%);border:1px solid #e0dcff}
.ww-stationen{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0 0 8px;padding:0;list-style:none}
.ww-stationen li{display:grid;justify-items:center;gap:4px;font-size:.7rem;color:#667085;text-align:center;line-height:1.2}
.ww-stationen i{width:12px;height:12px;border-radius:50%;background:#d0d5dd}
.ww-stationen li.fertig i{background:#12b76a}
.ww-stationen li.jetzt i{background:#fff;border:3px solid #6d5dfc;box-sizing:border-box;width:16px;height:16px}
.ww-stationen li.jetzt{color:#3e1c96;font-weight:700}
.ww-marke{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#6d5dfc;font-weight:700}
.ww-titel{font-size:1.1rem}
.ww-text{margin:0;color:#475467;font-size:.9rem}
.ww-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.ww-haupt{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 24px;border-radius:12px;
  border:0;background:#6d5dfc;color:#fff;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.ww-zweite{min-height:40px;padding:8px 16px;border-radius:12px;border:1px solid #d9d6fe;background:#fff;color:#3e1c96;
  font:inherit;font-weight:600;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center}

/* Hellere, kompaktere Hauptknoepfe (Tassilo 08.10.2026: "Die Buttons sind zu gross, auch zu dunkel").
   Wie im Lernbereich: Markenviolett statt Fast-Schwarz, weicherer Schatten; auf dem Handy niedriger. */
.primary,button.primary.full{background:#6d5dfc;color:#fff;box-shadow:0 4px 12px rgba(109,93,252,.25)}
.primary:hover,button.primary.full:hover{background:#5b4bea}
.mini-knopf.haupt{background:#6d5dfc;border-color:#6d5dfc;color:#fff}
.ww-haupt{min-height:44px;padding:8px 20px;font-size:.95rem}
@media(max-width:560px){
  button.primary.full{padding:10px 16px;font-size:.95rem;border-radius:12px}
  .ww-haupt{min-height:40px;padding:8px 16px}
  .kette-abschluss .kette-knopf{font-size:.9rem;padding:8px 16px}
  .wegweiser{padding:16px 12px}
}
/* Schliessen-X im Dialogkopf: dezent statt dunkel umrandet (40 px, Raster 8). */
.dialog-head .icon-button{width:40px;height:40px;border:1px solid var(--line);background:#fff;color:#475467;box-shadow:none;font-size:1.25rem}

/* Lernziel in EINER Zeile, ohne Noten, mit Strich-Icon (Tassilo 08.10.2026: "maximal eine Zeile, kleiner, ohne
   Zensuren, vielleicht ein Pokal fuer Sieger"): Safe durch (Flagge) / Stark (Stern) / Champion (Pokal). */
.ziel-wahl-form{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex-wrap:nowrap}
.ziel-wahl-form legend{grid-column:1/-1}
.ziel-wahl-form label{justify-content:center;gap:4px;min-height:40px;padding:0 8px;font-size:.85rem;font-weight:600;white-space:nowrap;
  border:1px solid #d0d5dd;border-radius:12px;cursor:pointer}
.ziel-wahl-form label input{position:absolute;opacity:0;pointer-events:none}
.ziel-wahl-form label:has(input:checked){border-color:#6d5dfc;background:#f4f3ff;color:#3e1c96}
.ziel-wahl-form .strich,.ziel-eckig .strich{width:16px;height:16px}
.ziel-eckig{grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:8px}
.ziel-eckig > span{grid-column:1/-1;font-size:.8rem;color:var(--muted);font-weight:600}
.ziel-eckig button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:36px;padding:0 8px;
  font-size:.82rem;white-space:nowrap;border-radius:12px}
.ziel-eckig button.aktiv{border-color:#6d5dfc;background:#f4f3ff;color:#3e1c96;box-shadow:inset 0 0 0 1px #6d5dfc}
.ziel-eckig button,.ziel-wahl-form label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ziel-wahl-form{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Fokus beim Oeffnen eines Dialogs: dezent statt schwarzem Ring. */
.dialog-head .icon-button:focus{outline:2px solid #d9d6fe;outline-offset:1px}

/* --- Schrittzeile mit Knopf (Tassilo 08.10.2026, Bild iPhone): "Lernpfad mit Tagestests vorbereitet" wurde neben
   dem Knopf auf vier Zeilen gequetscht und vom Knopf ueberdeckt. Text und Knopf brechen jetzt um - der Knopf rueckt
   immer unter den Text, buendig mit ihm (20px Punkt + 8px Abstand). Waehrend der Lernpfad entsteht, ist der Knopf kein
   Knopf mehr, sondern eine ruhige Statuszeile mit Kreisel. */
.schritt{flex-wrap:wrap;row-gap:4px}
.schritt:has([data-pfad-bauen]) .ankreuz{flex-basis:100%}
.schritt [data-pfad-bauen]{margin:0 0 8px 32px;white-space:nowrap}
.schritt [data-pfad-bauen]:disabled{display:inline-flex;align-items:center;gap:8px;background:none;border-color:transparent;
  color:#5b4bdb;font-weight:600;cursor:default;padding-left:0}
.schritt [data-pfad-bauen]:disabled::before{content:"";width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid #d9d6fe;border-top-color:#6d5dfc;animation:dreht 1s linear infinite}
@media (prefers-reduced-motion:reduce){.schritt [data-pfad-bauen]:disabled::before{animation:none}}
/* Abhaken nur ueber den Kreis (Tassilo 08.10.2026, versehentliches Antippen): 44px Trefferflaeche, sieht aus wie 20px. */
.schritt .ankreuz{display:flex;align-items:center;gap:8px}
.schritt .haken{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-12px;
  flex:none;position:relative;cursor:pointer}
.schritt .ankreuz > span:last-child{cursor:default}
/* Kopfband: Marke ist ein Strich-Icon statt Grossbuchstaben, Zeit kleiner - das Fach bekommt den Platz. */
.jetzt-marke{display:inline-flex;letter-spacing:0;text-transform:none;color:#6d5dfc}
.jetzt-marke .strich{width:16px;height:16px}
.jetzt-zusatz{font-size:.8rem}
@media(max-width:560px){.jetzt-teil{gap:8px;padding:8px 16px}.jetzt-was{font-size:.95rem}}