/* ================================================================
   Schulkreis · Gestaltungssystem (Loop 4, Spur D)
   Vorbild: .project/concept/klickdummy-final.html

   Farbregel: Farbe bedeutet Gremium. Status kennt nur drei Töne —
   Gelb (prüfen/offen), Rot (überfällig), Grün (erledigt). Marke und
   Hauptaktionen verwenden Waid. Farben stehen ausschließlich in den Tokens auf :root.
   ================================================================ */
:root{
  --bg:#faf7ef; --panel:#ffffff; --hover:#f3f2ef; --linie:#e4e3dc; --linie2:#d6d3cb;
  --text:#1c1b19; --text2:#5a5852; --text3:#706d66;
  --gelb:#8a5d0f; --gelb-w:#fbf2dc; --rot:#a83a26; --rot-w:#f8e5df; --gruen:#2f6a45; --gruen-w:#e7f2ea;
  --g-indigo:#3f5a8a; --g-indigo-w:#e6ebf4;
  --g-brombeere:#8e4a6e; --g-brombeere-w:#f3e6ed;
  --g-walnuss:#7a5a3f; --g-walnuss-w:#f0e8df;
  --g-schiefer:#55636e; --g-schiefer-w:#e7ebee;
  --g-waid:#2b6a70; --g-waid-w:#e2eff0;
  --g-holunder:#5d4b8c; --g-holunder-w:#ebe7f4;
  --g-rinde:#6b604a; --g-rinde-w:#eeebe2;
  --g-flechte:#5b6a32; --g-flechte-w:#ecefe0;
  --scan-text:#34343e; --scan-bg:#fffefb;
  --schleier:rgba(15,12,8,.32);
  --schatten:0 1px 2px rgba(0,0,0,.04),0 12px 32px -8px rgba(30,25,15,.16);
  --marke:#2b6a70; --marke-hover:#21565b; --marke-text:#ffffff; --marke-w:#e2eff0;
  --marke-ton:#bc7960; --marke-honig:#dbc58f; --marke-pflaume:#8e4a6e;
  --sb:244px; --r:10px; --tippziel:44px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]){
  --bg:#151d1d; --panel:#202a2a; --hover:#25302f; --linie:#384746; --linie2:#4d5c58;
  --text:#eeeee8; --text2:#b0b8b6; --text3:#a0aba6;
  --gelb:#e5b45a; --gelb-w:#2c2414; --rot:#f08a72; --rot-w:#341c17; --gruen:#72c493; --gruen-w:#15261b;
  --g-indigo:#8eaad8; --g-indigo-w:#1c2433;
  --g-brombeere:#d690b4; --g-brombeere-w:#2e1c26;
  --g-walnuss:#cfa77f; --g-walnuss-w:#2b2219;
  --g-schiefer:#a2b0bb; --g-schiefer-w:#20262b;
  --g-waid:#7cc0c4; --g-waid-w:#16292b;
  --g-holunder:#b3a2e0; --g-holunder-w:#251f35;
  --g-rinde:#c4b48f; --g-rinde-w:#29261c;
  --g-flechte:#b4c07e; --g-flechte-w:#23271a;
  --marke:#94c6c8; --marke-hover:#b1d7d8; --marke-text:#202a2a; --marke-w:#243b3c;
  --marke-ton:#d9a48d; --marke-honig:#e6d5b0; --marke-pflaume:#d690b4;
  --scan-text:#d9d6cc; --scan-bg:#1d1c19;
  --schleier:rgba(0,0,0,.55);
  --schatten:0 12px 32px -8px rgba(0,0,0,.6);
}}
:root[data-theme=dark]{
  --bg:#151d1d; --panel:#202a2a; --hover:#25302f; --linie:#384746; --linie2:#4d5c58;
  --text:#eeeee8; --text2:#b0b8b6; --text3:#a0aba6;
  --gelb:#e5b45a; --gelb-w:#2c2414; --rot:#f08a72; --rot-w:#341c17; --gruen:#72c493; --gruen-w:#15261b;
  --g-indigo:#8eaad8; --g-indigo-w:#1c2433;
  --g-brombeere:#d690b4; --g-brombeere-w:#2e1c26;
  --g-walnuss:#cfa77f; --g-walnuss-w:#2b2219;
  --g-schiefer:#a2b0bb; --g-schiefer-w:#20262b;
  --g-waid:#7cc0c4; --g-waid-w:#16292b;
  --g-holunder:#b3a2e0; --g-holunder-w:#251f35;
  --g-rinde:#c4b48f; --g-rinde-w:#29261c;
  --g-flechte:#b4c07e; --g-flechte-w:#23271a;
  --marke:#94c6c8; --marke-hover:#b1d7d8; --marke-text:#202a2a; --marke-w:#243b3c;
  --marke-ton:#d9a48d; --marke-honig:#e6d5b0; --marke-pflaume:#d690b4;
  --scan-text:#d9d6cc; --scan-bg:#1d1c19;
  --schleier:rgba(0,0,0,.55);
  --schatten:0 12px 32px -8px rgba(0,0,0,.6);
}
:root{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]){color-scheme:dark}}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);
  font:14.5px/1.55 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--marke);outline-offset:2px;border-radius:4px}
kbd{font:11px/1 ui-monospace,monospace;border:1px solid var(--linie2);border-bottom-width:2px;
  border-radius:4px;padding:2px 5px;color:var(--text3);background:var(--panel)}
code{font:12.5px ui-monospace,monospace}
.leise{color:var(--text2)} .leiser{color:var(--text3)} .klein{font-size:12.5px}
.unsichtbar{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:12px;top:-60px;z-index:80;background:var(--text);color:var(--bg);padding:8px 14px;border-radius:8px}
.sprung:focus{top:12px}
.ohne-js [data-nur-js]{display:none!important}
form.inline{display:inline}

/* ---------- Gerüst ---------- */
.app{display:grid;grid-template-columns:var(--sb) minmax(0,1fr);min-height:100vh}
.sb{border-right:1px solid var(--linie);padding:12px 10px;display:flex;flex-direction:column;gap:1px;
  position:sticky;top:0;height:100vh;overflow:auto;background:var(--bg)}
.schule{display:flex;align-items:center;gap:9px;padding:6px 8px 14px;font-weight:600}
.schule small{display:block;font-weight:400;color:var(--text3);font-size:11.5px}
.suchknopf{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;margin-bottom:10px;
  border:1px solid var(--linie2);border-radius:8px;background:var(--panel);color:var(--text3);text-align:left}
.suchknopf:hover{border-color:var(--text3)} .suchknopf kbd{margin-left:auto}
.grp{font-size:11px;color:var(--text3);padding:14px 9px 5px;font-weight:550}
.nv{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:7px;color:var(--text2)}
.nv:hover{background:var(--hover);color:var(--text)}
.nv.an{background:var(--hover);color:var(--text);font-weight:550}
.nv .i{width:16px;text-align:center;opacity:.75;font-size:13px}
.nv .n{margin-left:auto;font-size:11.5px;color:var(--gelb);font-weight:650}
.nv .n.rot{color:var(--rot)}
.wer-bin-ich{margin-top:auto;border-top:1px solid var(--linie);padding:12px 8px 4px;font-size:12.5px;color:var(--text2)}
.wer-bin-ich b{display:block;color:var(--text);font-weight:600}
.wer-bin-ich .zeile{display:flex;gap:6px;margin-top:8px}
.wer-bin-ich .zeile>*{flex:1;text-align:center;padding:5px;border-radius:7px;border:1px solid var(--linie2);background:var(--panel);font-size:12px}
/* 9.Z1 (V4): Hell/Dunkel und Abmelden unter 900 px als volle Tippziele */
@media (max-width:899px){.wer-bin-ich .zeile>*{min-height:var(--tippziel);display:inline-flex;align-items:center;justify-content:center;font-size:14px}}

.haupt{display:flex;flex-direction:column;min-width:0}
.leiste{min-height:52px;border-bottom:1px solid var(--linie);display:flex;align-items:center;gap:10px;padding:0 22px;
  position:sticky;top:0;z-index:10;background:var(--bg)}
.pfad{color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.pfad b{color:var(--text);font-weight:550} .pfad a:hover{color:var(--text)}
.pfad .trenner{margin:0 6px}
.leiste .r{margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0}
.ansicht{flex:1;min-width:0}
.seite{padding:28px 32px 80px;max-width:1120px}
.seite.voll{max-width:none;padding:0}
.einfach{max-width:760px;margin:0 auto;padding:22px 20px 80px}
.einfach-kopf{display:flex;align-items:center;gap:12px;margin-bottom:22px}

/* ---------- Bausteine ---------- */
h1{font-size:21px;font-weight:650;margin:0 0 4px;letter-spacing:-.01em}
h2{font-size:12.5px;font-weight:600;color:var(--text3);margin:32px 0 8px;letter-spacing:.01em}
h3{font-size:14.5px;font-weight:600;margin:0 0 4px}
.unter{color:var(--text2);margin:0 0 24px}
.k{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;border-radius:8px;
  border:1px solid var(--linie2);background:var(--panel);white-space:nowrap;text-align:center}
.k:hover{background:var(--hover)}
.k.p{background:var(--marke);color:var(--marke-text);border-color:var(--marke)} .k.p:hover{background:var(--marke-hover);border-color:var(--marke-hover)}
.k.gelb{color:var(--gelb);border-color:var(--gelb)}
.k:disabled{opacity:.45;cursor:not-allowed}
.k.gross{padding:10px 18px;border-radius:10px;font-size:15px;white-space:normal;line-height:1.3}
.k.breit{width:100%}
.feld{width:100%;padding:8px 11px;border:1px solid var(--linie2);border-radius:8px;background:var(--panel)}
.feld:focus{border-color:var(--text3)}
input.feld,select.feld{height:40px}
input[type=checkbox],input[type=radio]{accent-color:var(--text)}
.feld:focus-visible{outline:2px solid var(--text);outline-offset:1px}
label.beschriftung{display:block;font-size:12.5px;color:var(--text2);margin:0 0 4px;font-weight:550}
.formular{display:grid;gap:10px;margin-top:14px}
@media(min-width:900px){.formular.reihe{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end}}
.formular .knopfzeile{display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-block;font-size:11.5px;padding:1px 7px;border-radius:5px;background:var(--hover);color:var(--text2);white-space:nowrap}
.tag.gelb{background:var(--gelb-w);color:var(--gelb)} .tag.rot{background:var(--rot-w);color:var(--rot)}
.tag.gruen{background:var(--gruen-w);color:var(--gruen)}
.tag.verschl::before{content:"🔒 ";font-size:10px}
.meldung{padding:10px 14px;border-radius:var(--r);background:var(--hover);margin:0 0 16px}
.meldung.gelb{background:var(--gelb-w);color:var(--gelb)} .meldung.rot{background:var(--rot-w);color:var(--rot)}

/* Gremienfarbe: ein Punkt, ein Band, ein Chip */
.gp{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gf,var(--text3));flex-shrink:0}
.g-indigo{--gf:var(--g-indigo);--gw:var(--g-indigo-w)}
.g-brombeere{--gf:var(--g-brombeere);--gw:var(--g-brombeere-w)}
.g-walnuss{--gf:var(--g-walnuss);--gw:var(--g-walnuss-w)}
.g-schiefer{--gf:var(--g-schiefer);--gw:var(--g-schiefer-w)}
.g-waid{--gf:var(--g-waid);--gw:var(--g-waid-w)}
.g-holunder{--gf:var(--g-holunder);--gw:var(--g-holunder-w)}
.g-rinde{--gf:var(--g-rinde);--gw:var(--g-rinde-w)}
.g-flechte{--gf:var(--g-flechte);--gw:var(--g-flechte-w)}
.gname{color:var(--gf,var(--text));font-weight:600}

/* Listen statt Kacheln */
.liste{border-top:1px solid var(--linie)}
.z{display:grid;grid-template-columns:14px minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:10px 6px;border-bottom:1px solid var(--linie)}
a.z:hover,button.z:hover,summary.z:hover{background:var(--hover)}
button.z{width:100%;border:0;border-bottom:1px solid var(--linie);background:none;text-align:left}
.z .t{font-weight:550;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.z .t>span{color:var(--text3);font-weight:400;margin-left:4px}
.z .t.umbruch{white-space:normal}
/* 9.V1: Zeilen ohne Farbpunkt vorn — der Titel nimmt die Punktspalte mit, statt in 14 px
   Buchstabe für Buchstabe umzubrechen (Mitteilungen und Termine auf /eltern). */
.z>.t:first-child{grid-column:1 / span 2}
.z .m{color:var(--text3);font-size:12.5px;white-space:nowrap}
.z.neu{background:var(--gw,var(--hover))}
.pkt{width:8px;height:8px;border-radius:50%;background:var(--text3);justify-self:center}
.pkt.gelb{background:var(--gelb)} .pkt.rot{background:var(--rot)} .pkt.gruen{background:var(--gruen)}
.leer{color:var(--text3);padding:22px 6px;border-bottom:1px solid var(--linie)}

/* Kennzahlen als Zeile */
.zahlen{display:flex;gap:44px;flex-wrap:wrap;padding:2px 0}
.zahl{display:block}
.zahl b{display:block;font-size:24px;font-weight:650;letter-spacing:-.02em}
.zahl span{color:var(--text3);font-size:12.5px}
.zahl.gelb b{color:var(--gelb)} .zahl.rot b{color:var(--rot)} .zahl.gruen b{color:var(--gruen)}
a.zahl:hover span{color:var(--text)}

/* ---------- Fäden ---------- */
.chips{display:flex;gap:7px;flex-wrap:wrap;margin:4px 0 14px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;border:1px solid var(--linie2);
  background:var(--panel);font-size:13px;color:var(--text2)}
.chip:hover{border-color:var(--text3);color:var(--text)}
.chip.an{border-color:var(--gf,var(--text));color:var(--text);background:var(--gw,var(--hover));font-weight:550}
.chip .zahl-klein{color:var(--text3)}
span.chip{cursor:default}
.faeden{display:grid;gap:12px;align-items:start}
@media(min-width:900px){.faeden{grid-template-columns:1fr 1fr}}
.faden{background:var(--panel);border:1px solid var(--linie);border-top:3px solid var(--gf,var(--linie2));border-radius:var(--r);padding:14px 16px 6px;min-width:0}
.faden .wer{font-size:11.5px;font-weight:650;color:var(--gf,var(--text2));letter-spacing:.03em;text-transform:uppercase}
.faden h3{margin:3px 0 10px;font-size:15px;line-height:1.4}
.folge{display:flex;gap:10px;align-items:center;padding:6px 0;position:relative;font-size:13.5px;min-width:0}
.folge::before{content:"";position:absolute;left:12px;top:-8px;height:12px;width:1.5px;background:var(--linie2)}
.folge:first-of-type::before{display:none}
.folge .text{min-width:0;flex:1 1 auto}
.fi{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;font-size:12px;background:var(--hover);flex-shrink:0;color:var(--text2)}
.folge.gelb .fi{background:var(--gelb-w);color:var(--gelb)}
.folge.rot .fi{background:var(--rot-w);color:var(--rot)}
.folge.gruen .fi{background:var(--gruen-w);color:var(--gruen)}
.folge small{margin-left:auto;color:var(--text3);font-size:12px;white-space:nowrap;padding-left:8px}
.folge.rot small{color:var(--rot)} .folge.gelb small{color:var(--gelb)} .folge.gruen small{color:var(--gruen)}
.woher{display:inline-block;border:0;background:none;color:var(--text3);font-size:12.5px;padding:6px 0 8px;
  text-decoration:underline;text-decoration-color:var(--linie2);text-underline-offset:3px}
.woher:hover{color:var(--text)}

/* ---------- Protokoll ---------- */
.zweisp{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:calc(100vh - 52px)}
.dok{padding:28px 40px 80px;min-width:0}
.dok-innen{max-width:720px}
.dok h3{font-size:14.5px;margin:24px 0 6px}
.dok p{margin:0 0 8px;color:var(--text2)}
.dok ul{margin:4px 0 8px;padding-left:20px;color:var(--text2)}
.titel-gremium{margin-top:10px;display:flex;align-items:center;gap:10px}
.besch{border-left:2px solid var(--gf,var(--linie2));padding:2px 0 2px 12px;color:var(--text)!important;margin:8px 0!important;font-weight:500}
.u{background:var(--gelb-w);color:var(--text);border-bottom:1.5px dashed var(--gelb);padding:0 3px;border-radius:3px}
a.u:hover{background:var(--gelb);color:var(--panel)}
.u.fest{background:var(--gruen-w);border-bottom-color:var(--gruen)}
.rand{border-left:1px solid var(--linie);padding:20px 18px 40px;background:var(--panel);min-width:0}
.rand h4{font-size:12.5px;font-weight:600;color:var(--text3);margin:22px 0 9px}
.rand h4:first-child{margin-top:0}
.pruefkarte{border:1px solid var(--gelb);background:var(--gelb-w);border-radius:var(--r);padding:14px 15px}
.pruefkarte b.gross{display:block;font-size:30px;line-height:1;color:var(--gelb);margin-bottom:4px}
.pruefkarte.fertig{border-color:var(--gruen);background:var(--gruen-w)}
.pruefkarte.fertig b.gross{color:var(--gruen)}
.pruefkarte p{color:var(--text2);margin:9px 0 0;font-size:12.5px}
.pruefkarte .knoepfe{display:grid;gap:7px;margin-top:10px}
.balken{height:4px;background:var(--linie);border-radius:2px;overflow:hidden;margin:10px 0 12px}
.balken i{display:block;height:100%;background:var(--gelb)}
.pruefkarte.fertig .balken i{background:var(--gruen)}
.scanmini{border:1px solid var(--linie);border-radius:8px;padding:14px 16px;font-family:"Bradley Hand","Segoe Script",cursive;
  font-size:13.5px;line-height:1.95;color:var(--scan-text);background:var(--scan-bg);overflow-wrap:anywhere}
.scanseiten{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chat{display:flex;flex-direction:column;gap:7px;margin:8px 0}
.bl{padding:8px 11px;border-radius:12px;font-size:13px;max-width:92%}
.bl.ich{background:var(--hover);align-self:flex-end}
.bl.ki{border:1px solid var(--linie)}
.bl .wer{display:block;font-size:11px;color:var(--text3)}
.hist{list-style:none;padding:0;margin:0;font-size:12.5px}
.hist li{padding:6px 0;border-bottom:1px solid var(--linie);color:var(--text2)}
.hist b{color:var(--text);font-weight:550}

/* ---------- Prüfmodus ---------- */
.pm{max-width:680px;margin:0 auto;padding:22px 20px 60px}
.pm-kopf{display:flex;align-items:center;gap:12px;margin-bottom:26px;min-width:0}
.pm-kopf .r{margin-left:auto;white-space:nowrap}
.pm-kopf .leise{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.schritte{display:flex;gap:5px;margin:0 0 22px;padding:0;list-style:none}
.schritte li{flex:1;height:4px;border-radius:2px;background:var(--linie)}
.schritte li.erledigt{background:var(--text)}
.schritte li.aktuell{background:var(--text3)}
.pk{background:var(--panel);border:1px solid var(--linie);border-radius:18px;padding:26px 26px 22px;box-shadow:var(--schatten)}
.pk .nr{font-size:12px;color:var(--text3);font-weight:650;letter-spacing:.05em;text-transform:uppercase}
.pk h1{font-size:22px;font-weight:650;letter-spacing:-.01em;margin:8px 0 6px;line-height:1.35}
.pk .warum{color:var(--text2);margin:0 0 16px}
.zitat{background:var(--bg);border-radius:12px;padding:12px 16px;font-family:"Bradley Hand","Segoe Script",cursive;
  font-size:16px;color:var(--text2);margin:0 0 18px;overflow-wrap:anywhere}
.zitat mark{background:var(--gelb-w);color:var(--gelb);padding:0 3px;border-radius:3px;font-weight:600}
.zitat .seite-nr a{text-decoration:underline;text-underline-offset:3px}
.zitat .seite-nr{display:block;font:12px/1.4 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif;color:var(--text3);margin-top:6px}
.wahl{display:grid;gap:9px}
@media(min-width:560px){.wahl{grid-template-columns:1fr 1fr}}
.wahl>button,.wahl .eingabe-karte{padding:14px 16px;border-radius:13px;border:1.5px solid var(--linie2);background:var(--panel);
  text-align:left;font-size:15px;font-weight:550;min-height:var(--tippziel)}
.wahl>button:hover{border-color:var(--text)}
.wahl small{display:block;color:var(--text3);font-size:12.5px;font-weight:400;margin-top:2px}
.wahl .taste{color:var(--text3);font-size:12.5px;margin-right:4px}
.eingabe-karte .zeile{display:flex;gap:8px;margin-top:10px}
.eingabe-karte .feld{min-width:0}
.freitext textarea{min-height:90px;resize:vertical}
.pm-fuss{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;color:var(--text3);font-size:13px}
.pm-fuss a,.pm-fuss button{border:0;background:none;color:var(--text3);text-decoration:underline;padding:6px 0}
.abschluss{text-align:center}
.abschluss .haken{font-size:44px;line-height:1.2;color:var(--gruen)}
.abschluss .liste{text-align:left;margin:10px 0 20px}
.abschluss .knoepfe{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ---------- Dialog, Schublade, Palette ---------- */
.dialogseite{max-width:600px;margin:4vh auto 0}
.dialog{background:var(--panel);border:1px solid var(--linie2);border-radius:14px;box-shadow:var(--schatten);padding:22px 24px}
.dialog h1{font-size:18px}
.vorschlag{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--linie);cursor:pointer}
.vorschlag input{margin-top:4px;width:18px;height:18px;flex-shrink:0}
.vorschlag .art{font-size:11.5px;color:var(--text3);display:block}
.vorschlag .details{color:var(--text2);font-size:12.5px;display:block}
.dialog .knoepfe{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}

.schleier{position:fixed;inset:0;background:var(--schleier);z-index:40;display:none;align-items:flex-start;justify-content:center;padding:11vh 12px 0}
.schleier.an{display:flex}
.palette{width:min(640px,100%);background:var(--panel);border:1px solid var(--linie2);border-radius:14px;box-shadow:var(--schatten);overflow:hidden}
.palette input{width:100%;border:0;border-bottom:1px solid var(--linie);padding:16px 18px;font-size:15.5px;background:transparent}
.palette input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.palette input:focus-visible{outline:2px solid var(--text);outline-offset:-2px;border-radius:14px 14px 0 0}
.erg{max-height:min(420px,60vh);overflow:auto;padding:6px}
.erg .eg{font-size:11.5px;color:var(--text3);padding:10px 12px 4px}
.erg a.treffer{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:8px;min-width:0}
.erg a.treffer .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.erg a.treffer.sel,.erg a.treffer:hover{background:var(--hover)}
.erg a .rt{margin-left:auto;color:var(--text3);font-size:12px;white-space:nowrap;padding-left:8px}
.antwort{margin:6px;padding:13px 15px;border-radius:10px;background:var(--hover);font-size:14px}
.antwort .von{font-size:11px;color:var(--text3);font-weight:650;letter-spacing:.04em;display:block;margin-bottom:4px;text-transform:uppercase}
.antwort .antwort-zahl{display:block;font-size:22px;line-height:1.2}
.antwort .antwort-zeitraum{display:block;font-size:12px;color:var(--text2);margin-bottom:4px}
.quellen{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.quelle{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 9px;border-radius:999px;
  background:var(--panel);border:1px solid var(--linie2);color:var(--text2)}
.quelle:hover{border-color:var(--text3);color:var(--text)}
.palette .fuss{border-top:1px solid var(--linie);padding:8px 14px;font-size:12px;color:var(--text3);display:flex;gap:14px;flex-wrap:wrap}

.schublade{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--panel);border-left:1px solid var(--linie2);
  box-shadow:var(--schatten);z-index:45;transform:translateX(105%);transition:transform .25s cubic-bezier(.2,.8,.2,1);padding:20px 22px;overflow:auto;visibility:hidden}
.schublade.an{transform:none;visibility:visible}
.schublade .zu{float:right;border:0;background:none;font-size:22px;color:var(--text3);width:var(--tippziel);height:var(--tippziel);margin:-10px -12px 0 0}
.kette{margin-top:16px;padding:0;list-style:none}
.glied{display:flex;gap:13px;padding:0 0 20px;position:relative}
.glied::before{content:"";position:absolute;left:15px;top:34px;bottom:0;width:1.5px;background:var(--linie2)}
.glied:last-child::before{display:none}
.glied .fi{width:31px;height:31px;border-radius:10px;font-size:14px;z-index:1}
.glied h3{margin:5px 0 1px;font-size:14px}
.glied p{margin:0;color:var(--text2);font-size:13px}
.glied.hier .fi{background:var(--text);color:var(--bg)}
.kette .glied:nth-child(2) .fi{background:var(--gw,var(--hover));color:var(--gf,var(--text2))}

/* ---------- Kalender ---------- */
.monat{border-top:1px solid var(--linie);border-left:1px solid var(--linie)}
.monat .woche{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.monat .wt{font-size:11.5px;color:var(--text3);padding:7px 8px;border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);font-weight:550}
.tg{min-height:92px;padding:5px 6px;border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);background:var(--panel);min-width:0}
.tg.aus,.tg.wochenende{background:var(--bg)}
.tg.ferien{background:repeating-linear-gradient(135deg,var(--bg),var(--bg) 6px,var(--hover) 6px,var(--hover) 7px)}
.tg .n{font-size:12px;color:var(--text3)}
.tg.heute .n{background:var(--text);color:var(--bg);border-radius:999px;padding:1px 7px;font-weight:650}
.tg .ferienname{font-size:11.5px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev{display:block;width:100%;text-align:left;border:0;font-size:11.5px;padding:2px 6px;margin-top:3px;border-radius:5px;
  background:var(--gw,var(--hover));color:var(--gf,var(--text2));font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.neu{outline:2px solid var(--gf,var(--text));outline-offset:-2px}
.monatsnav{display:flex;gap:6px}

/* ---------- Gedächtnis ---------- */
.gwrap{display:grid;gap:18px}
@media(min-width:980px){.gwrap{grid-template-columns:minmax(0,1fr) 300px}}
.gflaeche{border:1px solid var(--linie);border-radius:var(--r);background:var(--panel);min-width:0}
.gflaeche svg{display:block;width:100%;height:auto}
.gliste{display:none;list-style:none;margin:0;padding:4px 10px}
@media (max-width:899px){
  .gflaeche svg{display:none}
  .gliste{display:block}
  .gliste .z{grid-template-columns:minmax(0,1fr)}
  .gliste .z.an{font-weight:650}
}
.gk circle{fill:var(--panel);stroke:var(--gf,var(--linie2));stroke-width:1.5}
.gk.gremium circle{fill:var(--gw,var(--hover))}
.gk text{fill:var(--text2);font-size:11px;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:var(--panel);stroke-width:4px;stroke-linejoin:round}
.gk .sym{font-size:13px}
.gk.gremium .sym{font-size:16px}
.gk.a circle{stroke-width:3} .gk.a text{fill:var(--text);font-weight:650}
.gk.blass{opacity:.35}
.gk.vorlaeufig circle{stroke-dasharray:4 3}
.gk:focus-visible circle{stroke:var(--text);stroke-width:3}
.gl{stroke:var(--linie2);stroke-width:1.2} .gl.a{stroke:var(--text);stroke-width:1.8} .gl.vorlaeufig{stroke-dasharray:4 3}
.glt{fill:var(--text2);font-size:10px;text-anchor:middle;paint-order:stroke;stroke:var(--panel);stroke-width:3px}

/* ---------- Schule fragen ---------- */
.fragezeile{display:flex;gap:8px}
.fragezeile .feld{font-size:15.5px;padding:11px 14px;min-width:0}
.verlauf{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.verlauf .bl.ich{font-size:14.5px;max-width:80%}
.verlauf .antwort{margin:0;max-width:92%}

/* ---------- Mitteilungen ---------- */
details.mitteilung>summary{list-style:none;cursor:pointer}
details.mitteilung>summary::-webkit-details-marker{display:none}
.mitteilung .koerper{padding:14px 6px 18px 32px;border-bottom:1px solid var(--linie)}
.brief{font-family:Georgia,"Iowan Old Style",serif;font-size:15px;line-height:1.6}
textarea.brief{min-height:130px;resize:vertical}

/* ---------- Aufgaben ---------- */
.z.aufgabe{grid-template-columns:28px minmax(0,1fr) auto auto}
.haken-knopf{width:24px;height:24px;border-radius:6px;border:1.5px solid var(--linie2);background:var(--panel);display:grid;place-items:center;
  font-size:13px;padding:0;color:var(--gruen)}
.haken-knopf:hover{border-color:var(--text)}
.haken-knopf:disabled{opacity:.45;cursor:not-allowed}
.z.erledigt .t{text-decoration:line-through;color:var(--text3)}

/* ---------- Betrieb ---------- */
.kacheln{display:grid;gap:12px}
@media(min-width:760px){.kacheln{grid-template-columns:1fr 1fr}}
.kachel{border:1px solid var(--linie);border-radius:var(--r);padding:15px 17px;background:var(--panel);min-width:0}
.kachel h3{font-size:12.5px;color:var(--text3);font-weight:600;margin-bottom:6px}
.kachel .w{font-size:18px;font-weight:600;overflow-wrap:anywhere}
.kachel.gelb{border-color:var(--gelb);background:var(--gelb-w)}
.kachel.rot{border-color:var(--rot);background:var(--rot-w)}
/* 9.Z1: Auf getönten Kacheln reicht --text3 nicht für 4,5:1 (axe color-contrast). */
.kachel.gelb h3,.kachel.rot h3{color:var(--text2)}
.fortschritt{height:4px;background:var(--linie);border-radius:2px;margin-top:10px;overflow:hidden}
.fortschritt i{display:block;height:100%;background:var(--text)}

/* ---------- Unter 900 px: untere Leiste, Tippziele ---------- */
.unten,.mehr-schub{display:none}
@media (max-width:899px){
  body{font-size:15.5px}
  .app{grid-template-columns:minmax(0,1fr)} .sb{display:none}
  .leiste{padding:0 14px;gap:8px}
  .leiste .r .k{padding:7px 10px}
  .seite{padding:20px 16px 110px}
  .zweisp{grid-template-columns:minmax(0,1fr);min-height:0}
  .dok{padding:20px 16px} .rand{border-left:0;border-top:1px solid var(--linie);padding:20px 16px 120px}
  .z{padding:13px 4px;grid-template-columns:14px minmax(0,1fr) auto;min-height:var(--tippziel)}
  .z.aufgabe{grid-template-columns:var(--tippziel) minmax(0,1fr) auto;row-gap:0}
  .z.aufgabe .tag{align-self:start;margin-top:3px}
  .z.aufgabe .woher{grid-column:2 / -1;justify-self:start;padding:0}
  .z .m{display:none}
  .z .t{white-space:normal}
  .z .t>span{display:block;margin-left:0}
  .z.konto{grid-template-columns:minmax(0,1fr)!important}
  .z.konto .aktionen{justify-content:flex-start!important}
  .k{padding:9px 14px;min-height:var(--tippziel);min-width:var(--tippziel)}
  /* 9.Z1: Eingabefelder und Auswahllisten überall mindestens ein Tippziel hoch */
  input.feld,select.feld{height:var(--tippziel)}
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),select{min-height:var(--tippziel)}
  .nv{min-height:var(--tippziel)}
  a.chip,button.chip{min-height:var(--tippziel);padding:5px 14px}
  .woher{min-height:var(--tippziel);display:inline-flex;align-items:center}
  .haken-knopf{width:var(--tippziel);height:var(--tippziel)}
  .zahlen{gap:22px 28px}
  .faden{padding:14px 14px 6px}
  .folge{align-items:flex-start;flex-wrap:wrap}
  .folge .text{flex-basis:calc(100% - 35px)}
  .folge small{margin-left:35px;padding-left:0}
  .monat .wt{padding:6px 3px;text-align:center}
  .tg{min-height:64px;padding:4px 0}
  .tg .n{padding-left:3px}
  /* 9.Z1: Termine im Monat als Tippziel — die volle Zellbreite, mindestens 44 px hoch */
  .ev{font-size:10.5px;padding:2px 3px;min-height:var(--tippziel);border-radius:3px;overflow:hidden;
    overflow-wrap:anywhere;line-height:1.25}
  .tg .ferienname{font-size:10px}
  .unten{display:flex;position:fixed;bottom:10px;left:50%;transform:translateX(-50%);gap:2px;padding:6px;z-index:20;
    background:var(--panel);border:1px solid var(--linie2);border-radius:22px;box-shadow:var(--schatten);width:min(420px,calc(100vw - 16px))}
  .unten a{flex:1;min-width:0;padding:6px 2px;border-radius:16px;text-align:center;font-size:11px;font-weight:550;color:var(--text2);
    min-height:var(--tippziel);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .unten span{display:block;font-size:19px;line-height:1.25}
  .unten .an{background:var(--text);color:var(--bg)}
  .mehr-schub{display:block;position:fixed;left:0;right:0;bottom:0;background:var(--panel);border-radius:22px 22px 0 0;
    padding:10px 16px 28px;z-index:46;transform:translateY(105%);visibility:hidden;transition:transform .25s;box-shadow:var(--schatten);max-height:82vh;overflow:auto}
  .mehr-schub:target,.mehr-schub.an{transform:none;visibility:visible}
  .mehr-schub .nv{padding:10px 10px;font-size:16px}
  .mehr-schub .kopf{display:flex;align-items:center;justify-content:space-between}
  .griff{width:42px;height:5px;border-radius:3px;background:var(--linie2);margin:0 auto 6px}
  .pm{padding:16px 16px 60px}
  .pm-kopf .r{display:none}
  .pk{padding:22px 18px 18px} .pk h1{font-size:20px}
  .wahl>button,.wahl .eingabe-karte{min-height:56px}
  .schublade{top:auto;height:86vh;border-radius:22px 22px 0 0;transform:translateY(105%);width:100vw;border-left:0}
  .schublade.an{transform:none}
  .fragezeile{flex-direction:column}
  .mitteilung .koerper{padding:12px 4px 16px}
  .dialog{padding:18px 16px}
  .einfach{padding:16px 16px 80px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* Anmeldung und Einrichtung: eine Karte, die Schule obenauf. */
.eingang-karte{max-width:420px;margin:8vh auto 0}
.eingang-karte .schule{padding:0 0 18px}

/* Loop 5: Vorschau einer Mail auf der Seite Mailtexte. */
.mailvorschau{width:100%;height:560px;border:1px solid var(--linie);border-radius:var(--r);background:var(--panel)}

/* ---------- Loop 5, Spur M: Mailtexte ----------
   Formular links, die Mail rechts — so breit, wie ein Mailprogramm sie
   zeigt. Unter 1100 px untereinander: Die Mail braucht Platz, sonst
   sieht die Vorschau schmaler aus als jede echte Mail. */
.texte-wrap{display:grid;gap:22px;align-items:start}
@media(min-width:1100px){.texte-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
.texte-wrap .formular{margin-top:0}
.texte-wrap textarea.feld{min-height:220px;resize:vertical;line-height:1.55}
.texte-vorschau h3{margin-bottom:2px}
.texte-vorschau .mailvorschau{height:680px;background:var(--bg)}
.textefehler{margin:6px 0 0;padding-left:18px}
.platzhalter{border-top:1px solid var(--linie);padding-top:14px;margin-top:6px}
.platzhalter dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;margin:8px 0 0}
.platzhalter dt{color:var(--text)} .platzhalter dd{margin:0;color:var(--text2)}
@media (max-width:899px){.texte-vorschau .mailvorschau{height:700px}.texte-wrap textarea.feld{min-height:180px}}

/* Loop 5, Spur K: Aktionen je Konto auf der Benutzerseite (vorher Inline-Stile). */
.konto .t > .tag{width:fit-content}
.konto-aktionen{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.konto-formular{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.konto-formular .feld{width:190px;max-width:100%}
.einladen-gremien{border:0;padding:0;margin:0;grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 18px}
.einladen-gremien legend{width:100%;padding:0}
.einladen-gremien label{display:flex;gap:8px;align-items:center;min-height:var(--tippziel);cursor:pointer}
@media (max-width: 640px){
  .konto-aktionen{justify-content:flex-start}
}

/* ---------- Loop 8, Spur S: Klassen & Kinder, Stundenplan ----------
   Nur Farben aus den Tokens. Das Raster scrollt auf schmalen Bildschirmen
   in seinem eigenen Rahmen, damit die Seite bei 390 px nicht seitlich wandert. */
.schule-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.schule-zeile{grid-template-columns:minmax(0,1fr) auto}
.schule-aufklapp{margin:10px 0 0}
.schule-aufklapp>summary{list-style:none;cursor:pointer;width:fit-content}
.schule-aufklapp>summary::-webkit-details-marker{display:none}
.schule-bestaetigen{display:flex;gap:8px;align-items:center;min-height:var(--tippziel)}
.schule-klassenleitung{margin:16px 0;min-width:0} /* 9.Z2: 360 px ohne seitliches Scrollen */
.schule-klassenleitung .schule-bestaetigen{flex-wrap:wrap} .schule-klassenleitung .tag{white-space:normal}
.schule-klassenleitung h2{margin:0 0 6px;font-size:16px}
.stundenplan-wahl{flex-wrap:wrap;margin-bottom:14px}
.stundenplan-wahl .feld{width:auto;font-size:14px;padding:8px 11px}
.stundenplan-rahmen{overflow-x:auto;max-width:100%;border:1px solid var(--linie);border-radius:var(--r)}
.stundenplan-rahmen:focus-visible{outline:2px solid var(--marke);outline-offset:2px}
.stundenplan{border-collapse:collapse;width:100%;min-width:560px;font-size:13px}
.stundenplan th,.stundenplan td{border-bottom:1px solid var(--linie);padding:6px 8px;text-align:left;vertical-align:top}
.stundenplan thead th{color:var(--text3);font-weight:600;font-size:12px;background:var(--panel)}
.stundenplan tbody th{color:var(--text3);font-weight:550;width:36px}
.stundenplan td{border-left:1px solid var(--linie);min-width:90px}
.stunde{display:block;padding:2px 0}
.stunde+.stunde{border-top:1px dashed var(--linie2);margin-top:4px;padding-top:4px}
.stunde b{display:block;font-weight:600;color:var(--text)}
.stunde span{display:block;color:var(--text2);font-size:12px}
.stunde small{display:block;color:var(--text3);font-size:11.5px}
@media (max-width:640px){
  .stundenplan-wahl{flex-direction:row}
  .stundenplan-wahl .feld{flex:1 1 140px}
}

/* ---------- Loop 8, Spur E: Eltern und Versand ----------
   Nur Abstände und Anordnung — Farben kommen aus den vorhandenen Tokens. */
.eltern-brief{margin:0;white-space:pre-line}
.eltern-abo{margin:10px 0 0}
.eltern-abmeldung{display:grid;gap:10px;max-width:640px}
.eltern-abmeldung p{margin:0}
.versand-text{white-space:pre-line;max-width:680px;padding:14px 16px;border:1px solid var(--linie);border-radius:var(--r);background:var(--panel)}
.versand-pflicht{display:flex;gap:8px;align-items:center;min-height:var(--tippziel);cursor:pointer}
.versand-vorschau{margin:16px 0 6px}
.versand-vorschau p{margin:0 0 4px}
.versand-einladen{max-width:420px}
/* 9.V1: Vorschau vor dem Versand, Mitteilungsseite, neuer Elternbrief */
.versand-liste{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:0 0 12px;max-width:680px}
.versand-liste dt{color:var(--text2)} .versand-liste dd{margin:0;overflow-wrap:anywhere}
.mitteilung-neu{margin:0 0 16px}
.mitteilung-formular{max-width:680px}
.mitteilung-text{max-width:680px}
.mitteilung-verlauf{margin:0 0 8px;padding-left:20px;max-width:680px;overflow-wrap:anywhere}
.mitteilung-verlauf li{margin:0 0 4px}
.vt-info{margin:18px 0}
.vt-info-block{margin:0 0 14px;max-width:680px}
.vt-info-kopf{margin:0 0 6px}
.vt-info-text{font-size:14px;margin:0 0 8px}
.versand-schule{background:var(--gelb-w);color:var(--gelb);border-radius:8px;padding:6px 10px;margin:8px 0}

/* ---------- Loop 8, Spur Z: Zeugnisse ----------
   Abschnitte als Kacheln untereinander; der Text in Lesebreite, damit die
   Lehrkraft ihn so liest, wie er auf dem Blatt steht. Hinweise der
   Belegprüfung gelb wie Rückfragen beim Protokoll — Status, keine Gremienfarbe. */
.zg-abstand{margin-bottom:16px}
.zg-klasse{margin-bottom:26px}
.zg-ohne{margin:0 0 8px}
/* 9.V2: Zeile mit Name (Verweis), Stand und „Beobachtung notieren“ — schmal untereinander. */
.zg-kind{grid-template-columns:minmax(0,1fr) auto auto}
.zg-kind>.t:first-child{grid-column:auto}
.zg-kind .t a{color:inherit}
@media (max-width:899px){.zg-kind{grid-template-columns:minmax(0,1fr) auto}.zg-kind>.k{grid-column:1 / -1;justify-self:start}}
.zg-abschnitt{margin-bottom:14px;display:grid;gap:8px}
.zg-kopf{display:flex;gap:10px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.zg-kopf h3{margin:0}
.zg-hinweise{background:var(--gelb-w);border-radius:8px;padding:8px 12px}
.zg-hinweise p{margin:0 0 4px;color:var(--gelb)}
.zg-hinweise .hist li{color:var(--text)}
.zg-abhaken{margin:4px 0 6px}
.zg-unveraendert{background:var(--gelb-w);border-radius:8px;padding:8px 12px;margin:0 0 10px}
.zg-text{min-height:150px;resize:vertical;line-height:1.6;max-width:72ch}
.zg-lesetext{max-width:72ch;line-height:1.6;white-space:pre-wrap;margin:0}
.zg-verlauf summary{cursor:pointer;color:var(--text2)}
.zg-h2{margin-top:24px}
.zg-beobachtungen{margin-top:12px}
.zg-schnell{grid-template-columns:minmax(0,10em) minmax(0,1fr) auto;align-items:center}
@media (max-width:640px){.zg-schnell{grid-template-columns:minmax(0,1fr)}}

/* === Loop 9.0 — Hinweisband (Spur D) und Rollenwechsel ========================== */
.hinweisband{background:var(--gelb-w);color:var(--gelb);text-align:center;padding:6px 16px;font-weight:600;font-size:13.5px}
.hinweisband a{color:inherit;text-decoration:underline;display:inline-block;min-height:24px} /* 9.Z1 (D4) */
.rollenwechsel{display:flex;gap:6px;align-items:center;margin:6px 0}
.rollenwechsel .feld{width:auto;min-height:var(--tippziel)}
/* 9.V1 (Schulz): der eine Rollenwechsel, rechts in der Kopfzeile — die aktive Rolle steht
   immer sichtbar da, auch am Handy (dort in eigener Zeile unter dem Pfad). */
.kopf-rolle{margin:0 0 0 auto;flex-shrink:0}
.leiste .r+.kopf-rolle{margin-left:4px}
.kopf-rolle .als{font-size:12.5px;color:var(--text3)}
.kopf-rolle .feld{font-weight:600}
@media (max-width:899px){
  .leiste:has(.kopf-rolle){flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
  .kopf-rolle{width:100%;margin:0;order:3}
  .kopf-rolle .feld{flex:1}
}
/* 9.V1 (Kaya): zugeklappte Gruppe der Seitenleiste */
.grp-auf>summary{cursor:pointer;list-style:none;display:flex;align-items:center;min-height:24px}
.grp-auf>summary::-webkit-details-marker{display:none}
.grp-auf>summary::after{content:"▸";margin-left:6px;font-size:10px}
.grp-auf[open]>summary::after{content:"▾"}
@media (max-width:899px){.grp-auf>summary{min-height:var(--tippziel)}}

/* === Loop 9, Spur D — Demo-Schule (/demo) ===
   Zeitreise und Zurücksetzen; Knöpfe und Kästchen in Tippgröße. */
.demo-jetzt{font-size:17px;margin:0 0 6px}
.demo-reise{max-width:360px}
.demo-reise .feld,.demo-schnell .k,.demo-reise .k{min-height:var(--tippziel)}
.demo-schnell{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.demo-schnell form{margin:0}
.demo-schnell .k{white-space:normal}
.demo-konto{grid-template-columns:14px minmax(0,1fr) auto}
.demo-konto code{white-space:nowrap}
.demo-bestaetigen{display:flex;gap:10px;align-items:center;min-height:var(--tippziel)}
.demo-bestaetigen input{width:22px;height:22px}
/* === Loop 9, Spur V — Vertretung, Aushang, Mein Plan, Stundenplan, Räume, Epochen ====
   Nur Farben aus den Tokens. Zeilen sind Raster mit eigener Spaltenzahl; unter 640 px
   stehen Knöpfe unter dem Text, damit bei 360 px nichts seitlich wandert. */
.vt-tage{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 18px}
.vt-tag-wahl{display:flex;gap:6px;align-items:center}
.vt-tag-wahl .feld{width:auto}
.vt-zahlen{margin:0 0 6px}
.vt-zeile{grid-template-columns:minmax(0,1fr) auto auto}
.vt-zeile form{margin:0}
.vt-offen{grid-template-columns:minmax(0,1fr) auto;align-items:start}
.vt-vorschlag{display:block;color:var(--text2);font-weight:400;margin-top:2px}
.vt-knoepfe{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.vt-knoepfe form{margin:0}
.vt-aufklapp{margin:10px 0 0}
.vt-aufklapp>summary{list-style:none;cursor:pointer;width:fit-content}
.vt-aufklapp>summary::-webkit-details-marker{display:none}
.vt-alle{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.vt-freigabe{margin:22px 0 10px;display:grid;gap:6px;justify-items:start}
.vt-freigabe p{margin:0}
.vt-moeglichkeiten{display:grid;gap:4px 22px}
@media(min-width:900px){.vt-moeglichkeiten{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vt-moeglichkeiten .formular{align-content:start;margin-top:10px;padding:12px 0;border-top:1px solid var(--linie)}
.vt-haken{display:flex;gap:8px;align-items:center;min-height:var(--tippziel);cursor:pointer}
.vt-liste{min-height:110px;resize:vertical;font-family:inherit}
.vt-tabelle-rahmen{overflow-x:auto;max-width:100%;border:1px solid var(--linie);border-radius:var(--r)}
.vt-tabelle{border-collapse:collapse;width:100%;font-size:13.5px}
.vt-tabelle th,.vt-tabelle td{border-bottom:1px solid var(--linie);padding:7px 10px;text-align:left}
.vt-tabelle thead th{color:var(--text3);font-weight:600;font-size:12px}
.vt-tabelle td{font-variant-numeric:tabular-nums}
.vt-plan-tag{margin:18px 0 6px}
.aushang-kopf{display:flex;gap:6px 14px;align-items:baseline;flex-wrap:wrap}
.aushang-kopf .unter{margin:0}
.aushang-links{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.aushang-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.aushang-zeile{display:grid;grid-template-columns:3ch 4.5em minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;
  padding:10px 6px;border-bottom:1px solid var(--linie)}
.vt-plan-liste .aushang-zeile{grid-template-columns:3ch minmax(0,1fr) auto}
.aushang-zeile.geaendert{background:var(--gelb-w)}
.aushang-mich-liste li{padding:10px 4px;border-bottom:1px solid var(--linie);background:var(--gelb-w)}
.aushang-zeile.entfall .aushang-was b{text-decoration:line-through}
.aushang-std{font-weight:650;color:var(--text2);font-variant-numeric:tabular-nums}
.aushang-klasse{font-weight:650}
.aushang-was small{display:block;color:var(--text2);font-size:12.5px}
.aushang-raum{color:var(--text2);white-space:nowrap}
.aushang-gross{font-size:22px;max-width:none;padding:24px 32px}
.aushang-gross h1{font-size:34px}
.aushang-gross h2{font-size:22px;color:var(--text);margin-top:28px}
.aushang-gross .aushang-zeile{padding:14px 10px}
.aushang-gross .aushang-was small{font-size:17px}
@media(min-width:1400px){.aushang-gross{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
  .aushang-gross .aushang-kopf{grid-column:1/-1}}
.pb-stunde>summary{list-style:none;cursor:pointer}
.pb-stunde>summary::-webkit-details-marker{display:none}
.pb-zeile{grid-template-columns:minmax(0,1fr) auto}
.pb-stunde[open]>summary{background:var(--hover)}
.pb-stunde .formular{padding:4px 6px 16px;border-bottom:1px solid var(--linie);margin-top:6px}
.pb-konflikt .hist{margin:6px 0 10px}
.pb-konflikt form{margin:0}
.ep-jetzt{background:var(--gruen-w)}
.ep-jetzt .t>span{color:var(--text2)}
@media (max-width:899px){
  .vt-seite input.feld,.vt-seite select.feld{height:var(--tippziel)}
}
@media (max-width:640px){
  .vt-offen{grid-template-columns:minmax(0,1fr)!important}
  .vt-zeile{grid-template-columns:minmax(0,1fr) auto!important;row-gap:4px}
  .vt-zeile>:last-child{grid-column:2;grid-row:1 / span 2;align-self:center}
  .vt-zeile>:nth-child(2):not(:last-child){grid-column:1}
  .vt-knoepfe{justify-content:flex-start}
  .vt-tag-wahl{flex:1 1 100%}
  .vt-tag-wahl .feld{flex:1}
  .aushang-zeile{grid-template-columns:3ch 3.5em minmax(0,1fr)}
  .aushang-raum{grid-column:3}
  .vt-plan-liste .aushang-zeile{grid-template-columns:3ch minmax(0,1fr)}
  .vt-plan-liste .aushang-raum{grid-column:2}
}
/* === Loop 9, Spur N: Noten & Leistung ==========================================
   Eintragen im Takt der Tastatur: Name und Feld je Kind in einer Zeile, auf dem
   Telefon zwei Spalten. Tabellen verschieben sich in ihrem Rahmen, nie die Seite.
   Farben nur aus den vorhandenen Tokens. */
.noten-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 18px}
.noten-zeile{display:grid;grid-template-columns:minmax(0,1fr) 5.5em;gap:10px;align-items:center;min-height:var(--tippziel);border-bottom:1px solid var(--linie);padding:2px 0}
.noten-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.noten-feld{min-height:var(--tippziel);text-align:center;font-size:16px;font-weight:600}
.noten-zeile.fehler .noten-feld{border-color:var(--rot);background:var(--rot-w)}
.noten-zeile.fehler .noten-name{color:var(--rot)}
/* 9.V2 (Herr Yilmaz): Schnelleingabe — je Kind eine Knopfleiste unter Name und Feld,
   am Handy auf die volle Breite; der gedrückte Wert ist dunkel. Zwischenstand darüber. */
.noten-raster.mit-schnell{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.noten-schnell{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px;padding:0 0 6px}
.noten-schnell .nk{flex:1 0 34px;min-width:34px;min-height:var(--tippziel);padding:0 4px;border:1px solid var(--linie2);
  border-radius:8px;background:var(--panel);font-weight:600;font-size:15px;touch-action:manipulation}
.noten-schnell .nk:hover{background:var(--hover)}
.noten-schnell .nk[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text)}
.noten-stand{margin:6px 0 10px;font-weight:600;color:var(--text2)}
@media (max-width:640px){.noten-raster.mit-schnell{grid-template-columns:minmax(0,1fr)}}
.noten-mehr summary{cursor:pointer;min-height:var(--tippziel)}
.noten-bemerkungen{display:grid;gap:10px;margin-top:10px;max-width:640px}
.noten-bemerkungen .feld,.noten-sichtbar .feld,.noten-neu .feld,.noten-wahl .feld{min-height:var(--tippziel)}
.noten-sichtbar{max-width:420px}
.noten-sichtbar p{margin:4px 0 0}
.noten-rahmen{overflow-x:auto;max-width:100%;border:1px solid var(--linie);border-radius:var(--r);margin:12px 0}
.noten-buch{border-collapse:collapse;width:100%;font-size:14px}
.noten-buch th,.noten-buch td{border-bottom:1px solid var(--linie);padding:8px 10px;text-align:left;vertical-align:top;white-space:nowrap}
.noten-buch thead th{color:var(--text3);font-weight:600;font-size:12.5px;background:var(--panel)}
.noten-buch th small,.noten-zeugnis th small{display:block;color:var(--text3);font-weight:400;font-size:11.5px}
.noten-buch tbody th{font-weight:550}
.noten-buch a{display:inline-block;min-height:var(--tippziel);line-height:var(--tippziel)}
.noten-buch tfoot th,.noten-buch tfoot td{color:var(--text2)}
.noten-zeugnis .feld{width:auto;min-width:5em}
.noten-spiegel{border-collapse:collapse;margin:6px 0 14px}
.noten-spiegel th,.noten-spiegel td{border:1px solid var(--linie);padding:6px 12px;text-align:center}
.noten-wahl{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin:0 0 12px}
.noten-wahl .feld{width:auto}
.noten-neu{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));align-items:end;max-width:900px}
.noten-neu .knopfzeile{grid-column:1/-1}
.noten-eigen{border-bottom:1px solid var(--linie)}
.noten-eigen .z{border-bottom:0}
.noten-wert{font-weight:650;font-size:17px;white-space:nowrap}
.noten-bemerkung{margin:0 0 10px;color:var(--text2);overflow-wrap:anywhere}
.noten-woche h2{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media (max-width:640px){
  .noten-raster{grid-template-columns:minmax(0,1fr)}
  .noten-neu{grid-template-columns:minmax(0,1fr)}
}
/* === Loop 9, Spur R — Cockpit, Schülerstart, Rollen ================================
   Nur Anordnung — Farben aus den vorhandenen Tokens, Status über .gelb/.rot/.gruen. */
.cockpit-gruppe{margin-bottom:22px}
.cockpit-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cockpit-kachel{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--linie);border-radius:var(--r);background:var(--panel);min-height:var(--tippziel);color:inherit;text-decoration:none}
a.cockpit-kachel:hover{background:var(--hover)}
.cockpit-kachel .cockpit-titel{color:var(--text);font-weight:550;font-size:13.5px}
.cockpit-kachel .cockpit-hinweis{color:var(--text3);font-size:12.5px;overflow-wrap:anywhere}
.cockpit-tabelle{overflow-x:auto;max-width:100%;border:1px solid var(--linie);border-radius:var(--r);margin-bottom:12px}
.cockpit-klassen{border-collapse:collapse;width:100%;font-size:14px}
.cockpit-klassen th,.cockpit-klassen td{padding:8px 10px;border-bottom:1px solid var(--linie);text-align:left;white-space:nowrap}
.cockpit-klassen thead th{color:var(--text3);font-weight:600;font-size:12.5px;background:var(--panel)}
.cockpit-klassen .pkt{display:inline-block;vertical-align:middle}
.schueler-stunde{grid-template-columns:minmax(64px,auto) minmax(0,1fr) auto}
.schueler-nr{color:var(--text3);font-size:13px;white-space:nowrap}
.schueler-faellig{margin:0 0 14px;padding-left:20px}
.schueler-faellig li{padding:4px 0}
.schueler-links{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.schueler-links .k{min-height:var(--tippziel)}
.schueler-einladen{max-width:480px}
.schueler-kind{grid-template-columns:minmax(0,1fr) auto}
.rollen-formular fieldset{border:0;margin:0 0 8px;padding:0;display:grid;gap:4px}
.rollen-formular label{display:flex;gap:8px;align-items:center;min-height:var(--tippziel)}
@media (max-width:640px){
  .cockpit-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .schueler-stunde{grid-template-columns:minmax(56px,auto) minmax(0,1fr)}
  .schueler-stunde .tag{grid-column:2;justify-self:start;white-space:normal}
}
/* ---------- Loop 9, Spur L: Messungen (Persona-Labor) ----------
   Nur Abstände und Anordnung — Farben kommen aus den vorhandenen Tokens. Listen statt
   breiter Tabellen, damit der Bericht bei 360 px nicht seitlich wandert. */
.mess-h2{margin:22px 0 8px;font-size:16px}
.mess-gesamt .mess-ergebnis{font-size:15px;font-weight:550}
.mess-gesamt .mess-ziel{margin:6px 0 0}
.mess-person{grid-template-columns:minmax(0,1fr) auto}
.mess-person .m{grid-column:1/-1;white-space:normal}
.mess-aufgaben{margin:0 0 8px}
.mess-aufgaben>summary{list-style:none;cursor:pointer;width:fit-content;min-height:var(--tippziel)}
.mess-aufgaben>summary::-webkit-details-marker{display:none}
.mess-liste{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--linie)}
.mess-liste li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:9px 4px;border-bottom:1px solid var(--linie)}
.mess-liste li b{font-weight:550;flex:1 1 220px;min-width:0}
.mess-grund,.mess-befunde .umbruch{flex-basis:100%;overflow-wrap:anywhere}
.mess-befunde .umbruch{flex-basis:auto;flex:1 1 220px;min-width:0}
/* === Loop 9, Spur K: Klassenbuch & Anwesenheit ===================================
   Nur Abstände und Anordnung — Farben aus den Tokens, Status gelb/rot/grün.
   Die Anwesenheit ist für das Tablet im Klassenraum gebaut: je Kind eine Zeile,
   „fehlt“ und die Minuten mit einem Tipp erreichbar (≥ 44 px). */
.kb-tagnav{display:flex;align-items:center;gap:10px;margin:0 0 18px}
.kb-tagnav .unter{margin:0}
.kb-tagnav .k{min-width:var(--tippziel);min-height:var(--tippziel)}
.kb-jetzt{border:1px solid var(--linie2);border-radius:var(--r);background:var(--panel);padding:16px 18px;max-width:640px;display:grid;gap:8px;margin:0 0 8px}
.kb-jetzt p{margin:0}
.kb-jetzt-fach{font-size:18px;color:var(--text);margin:0;font-weight:650}
.kb-hinweis{margin:0}
.kb-grund{display:block;color:var(--text2);font-weight:400;margin-top:2px}
.z.kb-meldung,.z.kb-fz{grid-template-columns:14px minmax(0,1fr) auto}
.kb-anwesenheit{display:grid;gap:12px;max-width:760px}
.kb-kinder{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.kb-kind{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--linie)}
.kb-name{font-weight:550;min-width:0;overflow-wrap:anywhere}
.kb-name small{display:block;font-weight:400;color:var(--text2);font-size:12.5px}
.kb-wahl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.kb-schalter{display:inline-flex;align-items:center;gap:8px;min-height:var(--tippziel);padding:0 12px;border:1px solid var(--linie2);border-radius:8px;background:var(--panel);cursor:pointer}
.kb-schalter input{width:20px;height:20px}
.kb-schalter:has(input:checked){border-color:var(--rot);background:var(--rot-w);color:var(--rot);font-weight:600}
select.feld.kb-minuten{width:auto;min-height:var(--tippziel);height:var(--tippziel)}
.kb-verlauf{grid-column:1 / -1;font-size:12.5px}
.kb-klaeren{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;margin:0;border:1px solid var(--linie2)}
.kb-klaeren legend{font-weight:600;padding:0 4px}
.kb-klaeren .kb-schalter:has(input:checked){border-color:var(--gelb);background:var(--gelb-w);color:inherit}
.kb-verlauf summary{cursor:pointer;color:var(--text2);padding:4px 0}
.kb-eintrag{max-width:760px}
.kb-text{min-height:90px;resize:vertical}
.kb-lesen{margin:0;display:grid;gap:4px;max-width:72ch}
.kb-lesen dt{font-size:12.5px;color:var(--text3);font-weight:600}
.kb-lesen dd{margin:0 0 8px}
.kb-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.kb-eintragzeile{padding:10px 6px;border-bottom:1px solid var(--linie)}
.kb-eintragzeile h3 a{text-decoration:underline;text-decoration-color:var(--linie2);text-underline-offset:3px;display:inline-block;padding:4px 0}
.kb-eintragzeile p{margin:2px 0;overflow-wrap:anywhere}
.kb-filter{max-width:640px;margin:0 0 12px}
.kb-summe{margin:6px 0 10px}
.kb-offen-zeile,.kb-einzel{padding:12px 6px;border-bottom:1px solid var(--linie);display:grid;gap:8px}
.kb-offen-zeile h3,.kb-einzel h3{margin:0}
.kb-offen-zeile p,.kb-einzel p{margin:0}
.kb-krank{display:grid;gap:18px;max-width:560px}
.kb-feldgruppe{border:0;margin:0;padding:0;min-width:0}
.kb-feldgruppe legend{font-weight:600;font-size:16px;margin:0 0 8px;padding:0}
.kb-gross-wahl{display:grid;gap:8px}
.kb-treffer{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* 9.V2 (Kaya, Neumann): Vorschläge und Hinweis „neue Krankmeldung“ — versteckt, bis ki.js sie füllt */
.kb-treffer[hidden],#kb-neu-krank[hidden]{display:none}
.kb-ausgewaehlt{margin:8px 0 0}
select.feld.kb-minuten:disabled{opacity:.45}
.kb-gross{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px;border:1.5px solid var(--linie2);border-radius:12px;background:var(--panel);font-size:17px;font-weight:550;cursor:pointer}
.kb-gross input{width:22px;height:22px;flex-shrink:0}
.kb-gross:has(input:checked){border-color:var(--text)}
.kb-andere{margin-top:10px}
.kb-andere summary{cursor:pointer;color:var(--text2);padding:12px 0}
input.feld.kb-suche{height:48px;font-size:17px}
.kb-gesendet{background:var(--gruen-w);color:var(--text)}
@media (max-width:899px){
  .kb-verlauf summary{padding:12px 0}
  .kb-eintragzeile h3 a{display:inline-flex;align-items:center;min-height:var(--tippziel);padding:0}
  .kb-krank .feld,.kb-filter .feld,.kb-eintrag input.feld,.kb-einzel .feld{height:var(--tippziel)}
}
@media (max-width:640px){
  .kb-kind{grid-template-columns:minmax(0,1fr)}
  .kb-wahl{justify-content:flex-start}
}

/* === 9.V1 — Fehlerseiten (403, 404, 501 …) im Rahmen ============================== */
.fehlerseite{max-width:600px}
.fehlerseite h1{margin-bottom:8px}
.fehler-rolle{margin:18px 0;padding:12px 14px;border:1px solid var(--linie2);border-radius:10px;background:var(--panel)}
.fehler-rolle p{margin:0;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.fehlerseite .aktionen{margin-top:22px}

/* 9.V1 (Roth): Verzeichnis und Folgenabschätzung gesetzt; Prüfansicht der Datenschutzbeauftragten */
.ds-dokument{max-width:880px;line-height:1.55}
.ds-dokument h2{margin-top:28px;scroll-margin-top:16px}
.ds-dokument h3{margin-top:18px;scroll-margin-top:16px}
.ds-dokument blockquote.hinweis{margin:10px 0;padding:8px 12px;border-left:3px solid var(--linie2);color:var(--text2);background:var(--panel)}
.ds-dokument pre.code{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--panel);padding:8px 10px;border-radius:var(--r);font-size:12.5px}
.ds-dokument code{overflow-wrap:anywhere}
.tabelle-rahmen{overflow-x:auto;max-width:100%;border:1px solid var(--linie);border-radius:var(--r);margin:8px 0 12px}
.dokumenttabelle{border-collapse:collapse;width:100%;font-size:13.5px}
.dokumenttabelle th,.dokumenttabelle td{border-bottom:1px solid var(--linie);padding:7px 10px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.dokumenttabelle thead th{color:var(--text3);font-weight:600;font-size:12px}
.dokumenttabelle tbody th{font-weight:550;min-width:9em}
.ds-gliederung{margin:8px 0 16px;padding:10px 14px;border:1px solid var(--linie);border-radius:var(--r);max-width:880px}
.ds-gliederung ol{margin:4px 0 0;padding-left:20px;font-size:13.5px}
.ds-gliederung li{padding:2px 0}
.ds-gliederung ul{margin:4px 0 0;padding-left:0;list-style:none;font-size:13.5px;columns:2 280px}
.ds-gliederung li.ebene-2{font-weight:600;margin-top:4px}
.ds-gliederung li.ebene-3{padding-left:14px}
.ds-dokument h2{font-size:19px;color:var(--text);border-bottom:1px solid var(--linie);padding-bottom:4px}
.ds-beispiel{background:var(--gelb-w,var(--panel));padding:10px 12px;border-radius:var(--r);margin:8px 0 12px;max-width:880px}
/* 9.V1 (Wagner): Benutzerliste — Suche und Rückfrage beim Sperren */
.konto-filter{max-width:720px;margin:0 0 10px}
.rueckfrage{max-width:min(440px,calc(100vw - 32px));padding:16px 18px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--panel);color:var(--text)}
.rueckfrage::backdrop{background:color-mix(in srgb,var(--text) 25%,transparent)}
.rueckfrage p{margin:0 0 12px}

/* === Loop 9, Spur H — Hausaufgaben & Material =====================================
   Für das Handy gebaut (Lena im Bus, Frau Schulz, Herr Yilmaz zwischen zwei Stunden):
   Karten statt Tabellen, große Tippziele, keine Querverschiebung bei 360 px. Farben nur
   aus den Tokens, Status gelb/rot/grün. */
.ha-karten{display:grid;gap:10px;max-width:640px}
.ha-karte{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--linie2);border-radius:12px;background:var(--panel);min-height:var(--tippziel);min-width:0}
.ha-karte:hover{background:var(--hover)}
.ha-karte-kopf{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.ha-titel{font-size:16.5px;font-weight:650;overflow-wrap:anywhere;min-width:0}
.ha-zeile{color:var(--text2);overflow-wrap:anywhere}
.ha-frist{color:var(--text);font-weight:550}
.ha-karten .leer{border:0;padding:8px 2px}
.z.ha-lz{grid-template-columns:14px minmax(0,1fr) auto auto}
.ha-neu{max-width:640px;border:1px solid var(--linie2);border-radius:12px;background:var(--panel);padding:4px 16px 16px;margin:0 0 8px}
.ha-neu h2{margin-top:14px}
.ha-formular{display:grid;gap:14px;max-width:640px}
.ha-feld{display:grid;gap:4px;min-width:0}
.ha-feld p{margin:0}
.ha-text{min-height:72px;resize:vertical}
.ha-datei{padding:6px;max-width:100%}
.ha-schalter{display:flex;gap:10px;align-items:center;min-height:var(--tippziel);cursor:pointer}
.ha-schalter input{width:20px;height:20px;flex-shrink:0}
.ha-gruppe summary{cursor:pointer;color:var(--text2);padding:10px 0;min-height:var(--tippziel)}
.ha-kinder{border:1px solid var(--linie);border-radius:var(--r);margin:8px 0;padding:6px 12px;display:grid;gap:2px;min-width:0}
.ha-kinder legend{font-weight:600;padding:0 4px}
.ha-kind{display:flex;gap:10px;align-items:center;min-height:var(--tippziel);cursor:pointer;overflow-wrap:anywhere}
.ha-kind input{width:20px;height:20px;flex-shrink:0}
.ha-vorschlaege{display:grid;gap:8px;margin:0 0 14px}
.ha-vorschlaege p{margin:0}
.k.ha-vorschlag{justify-content:flex-start;white-space:normal;text-align:left;line-height:1.35}
.ha-vorschlag span{color:var(--text3);font-size:12.5px}
.ha-frist-gross{font-size:16px;margin:0 0 10px}
.ha-aufgabentext{white-space:pre-wrap;overflow-wrap:anywhere;max-width:72ch}
.ha-anhaenge{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:640px}
.ha-anhaenge li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;min-width:0}
.k.ha-anhang{white-space:normal;overflow-wrap:anywhere;text-align:left}
.ha-bild{display:block;flex-basis:100%}
.ha-bild img{display:block;max-width:min(100%,320px);height:auto;border:1px solid var(--linie);border-radius:8px}
.ha-gross .ha-bild img{max-width:100%}
.ha-eigene{max-width:640px;margin:18px 0;padding:4px 16px 14px;border:1px solid var(--linie2);border-radius:12px}
.ha-eigene h2{margin-top:12px}
.ha-rueckmeldung{margin:10px 0;padding:10px 14px;border-radius:var(--r);background:var(--hover);overflow-wrap:anywhere;white-space:pre-wrap}
.ha-abgeben{display:grid;gap:14px;max-width:640px;margin:18px 0}
.ha-abgeben h2{margin:0}
.ha-gross-datei{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1.5px dashed var(--linie2);border-radius:12px;background:var(--panel);font-size:17px;font-weight:600;cursor:pointer;min-height:var(--tippziel)}
.ha-gross-datei input{max-width:100%;font-size:14px;font-weight:400}
/* 9.V2 (Lena): ausgewählte Dateien vor dem Abgeben */
.ha-auswahl:empty{display:none}
.ha-auswahl{margin:4px 0 12px;padding:10px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--linie)}
.ha-auswahl-zahl{margin:0 0 6px;font-weight:600}
.ha-auswahl-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ha-auswahl-liste li{display:flex;gap:10px;align-items:center;min-width:0;overflow-wrap:anywhere}
.ha-auswahl-bild{width:56px;height:56px;object-fit:cover;border-radius:6px;flex:none;background:var(--linie)}
.ha-namen{margin:0;padding-left:20px;columns:2 180px}
.ha-namen li{padding:2px 0}
.ha-rueckfrage p{margin:0 0 10px}
.ha-verschieben{max-width:640px}
.ha-bearbeiten{max-width:640px;margin:12px 0}
.ha-bearbeiten summary{cursor:pointer;padding:10px 0;min-height:var(--tippziel);font-weight:550}
.ha-zurueckziehen{margin:12px 0}
.ha-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.ha-weiter{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
@media (max-width:899px){
  .ha-karte{padding:14px 14px}
  .ha-knoepfe .k{flex:1 1 140px}
  .ha-gruppe summary,.ha-bearbeiten summary{display:flex;align-items:center}
}

/* === Loop 9, Spur P — Sprache, App, Hinweise, rechts nach links, Zugänglichkeit ======= */
.app-feldgruppe{border:0;margin:0 0 14px;padding:0;min-width:0}
.app-wahl{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));max-width:720px}
.app-gross{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;border:1.5px solid var(--linie2);
  border-radius:12px;background:var(--panel);cursor:pointer}
.app-gross input{width:22px;height:22px;flex-shrink:0;margin:0}
.app-gross b{display:inline-block;font-size:18px;font-weight:600}
.app-gross small{display:block;color:var(--text2);font-size:13px}
.app-gross:has(input:checked){border-color:var(--text);background:var(--hover)}
.app-sprachwahl .knopfzeile{margin:0 0 10px}
.app-abschnitt{margin-top:30px;max-width:720px}
.app-abschnitt h2{margin-bottom:6px}
.app-push .knopfzeile{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.app-klein-titel{font-size:15px;margin:16px 0 6px}
.app-geraete .z{grid-template-columns:minmax(0,1fr) auto}
.app-geraete form{margin:0}
.app-schritte{padding-inline-start:20px;margin:10px 0;line-height:1.55}
.app-schritte li{margin-bottom:6px}
.app-zurueck{margin-top:28px}
.app-anmeldesprache{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;max-width:420px;margin:14px auto 0}
.app-anmeldesprache a{display:inline-flex;align-items:center;min-height:var(--tippziel);padding:0 10px;border-radius:8px;color:var(--text2)}
.app-anmeldesprache a:hover{background:var(--hover);color:var(--text)}
.app-offline .knopfzeile{margin-top:16px}
.app-offline-liste a.z{grid-template-columns:minmax(0,1fr);min-height:var(--tippziel)}
.ki-hinweis{margin:4px 0 0}
.ki-original{margin:6px 0 0}
.ki-original>summary{cursor:pointer;color:var(--text2);min-height:var(--tippziel);display:flex;align-items:center;width:fit-content}
.app-ohne-netz{position:sticky;top:0;z-index:30}
.app-abschnitt [hidden],.app-offline [hidden]{display:none!important}

/* Schreibrichtung rechts nach links (Arabisch): was ki.css links/rechts festlegt, spiegeln */
[dir=rtl] .sprung{left:auto;right:12px}
[dir=rtl] .sb{border-right:0;border-left:1px solid var(--linie)}
[dir=rtl] .suchknopf{text-align:right} [dir=rtl] .suchknopf kbd{margin-left:0;margin-right:auto}
[dir=rtl] .nv .n,[dir=rtl] .leiste .r,[dir=rtl] .pm-kopf .r,[dir=rtl] .folge small,[dir=rtl] .erg a .rt{margin-left:0;margin-right:auto}
[dir=rtl] .z .t>span{margin-left:0;margin-right:4px}
[dir=rtl] button.z,[dir=rtl] .ev,[dir=rtl] .abschluss .liste{text-align:right}
[dir=rtl] .stundenplan th,[dir=rtl] .stundenplan td,[dir=rtl] .vt-tabelle th,[dir=rtl] .vt-tabelle td,
[dir=rtl] .noten-buch th,[dir=rtl] .noten-buch td,[dir=rtl] .dokumenttabelle th,[dir=rtl] .dokumenttabelle td{text-align:right}
[dir=rtl] .stundenplan td{border-left:0;border-right:1px solid var(--linie)}
[dir=rtl] .schueler-faellig,[dir=rtl] .dok ul,[dir=rtl] .textefehler{padding-left:0;padding-right:20px}
[dir=rtl] .mitteilung .koerper{padding:14px 32px 18px 6px}
[dir=rtl] .grp-auf>summary::after{content:"◂";margin-left:0;margin-right:6px}
[dir=rtl] .schublade{right:auto;left:0;border-left:0;border-right:1px solid var(--linie2)}
[dir=rtl] .schublade .zu{float:left;margin:-10px 0 0 -12px}
[dir=rtl] .wahl .taste{margin-right:0;margin-left:4px}
@media (max-width:899px){
  [dir=rtl] .z .t>span{margin-right:0}
}

/* Zugänglichkeit (9.V1-Messung, loop-9.md): Grautext auf getönten Zeilen („neu“, gewählter
   Filter) und Marken in Zeilen erreichten 4,5 : 1 nicht — dort die dunklere Textfarbe. */
.z.neu .t>span,.z.neu .m,.z.neu .leiser,.chip.an .zahl-klein{color:var(--text2)}
.z .t>span.tag{color:var(--text2)} .z .t>span.tag.gelb{color:var(--gelb)}
.z .t>span.tag.rot{color:var(--rot)} .z .t>span.tag.gruen{color:var(--gruen)}
/* Pfad-Verweise sind am Handy Tippziele (≥ 44 px), lange Knöpfe brechen um statt quer zu schieben */
@media (max-width:899px){
  .pfad a{display:inline-flex;align-items:center;min-height:var(--tippziel);min-width:var(--tippziel)}
  .noten-weitere>summary.k{white-space:normal;max-width:100%;text-align:start}
}

/* === Loop 9, Spur M — Nachrichten, Rückmeldezettel, Umfragen, Elternsprechtag =========
   Nur Abstände und Anordnung — Farben aus den Tokens, Status gelb/rot/grün. Eltern sind
   fast nur am Handy (Herr Petrov, altes Gerät): große Knöpfe, ein Formular, nichts quer. */
.na-neu{max-width:640px;margin:0 0 18px;padding:12px 14px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--panel)}
.na-neu h2{margin-top:0}
.na-summary{cursor:pointer;font-weight:600;padding:8px 0;min-height:var(--tippziel);display:flex;align-items:center}
.na-formular{display:grid;gap:12px;max-width:640px;margin-top:8px}
.na-formular>div,.na-reihe>div{min-width:0}
.na-reihe{display:grid;gap:12px}
@media(min-width:640px){.na-reihe{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}
.na-text{min-height:96px;resize:vertical;line-height:1.45}
select.feld.na-gross,input.feld.na-gross{height:48px;font-size:16px}
.na-feldgruppe{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px}
.na-feldgruppe legend{font-weight:600;font-size:16px;margin:0 0 8px;padding:0}
.na-wahl{display:flex;align-items:center;gap:10px;min-height:var(--tippziel);cursor:pointer}
.na-wahl input{width:20px;height:20px;flex-shrink:0}
.na-gross-wahl{display:grid;gap:8px}
.na-gross-knopf{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px;border:1.5px solid var(--linie2);border-radius:12px;background:var(--panel);font-size:17px;font-weight:550;cursor:pointer;overflow-wrap:anywhere}
.na-gross-knopf input{width:22px;height:22px;flex-shrink:0}
.na-gross-knopf:has(input:checked){border-color:var(--text)}
.na-knopfzeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0}
.na-knopfzeile form{display:inline}
.na-klein{font-size:13px}
.na-vorschau{display:block;color:var(--text2);font-weight:400;margin-top:2px;overflow-wrap:anywhere}
.na-zeile .t{overflow-wrap:anywhere}
.na-verlauf{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px;max-width:720px}
.na-nachricht{padding:12px 14px;border:1px solid var(--linie);border-radius:var(--r);background:var(--panel);margin-right:12%}
.na-nachricht.na-eigene{margin:0 0 0 12%;background:var(--hover)}
.na-nachricht.na-ungelesen{border-color:var(--gelb)}
.na-kopf{margin:0 0 6px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.na-zeit{color:var(--text2);font-size:13px}
.na-inhalt{margin:0;white-space:pre-line;overflow-wrap:anywhere;line-height:1.5;font-size:16px}
.na-gelesen{margin:8px 0 0;color:var(--text2);font-size:13px}
.na-zurueck{margin-top:8px}
.na-bestaetigen{max-width:720px;margin:0 0 18px;padding:12px 14px;border:1.5px solid var(--gelb);border-radius:var(--r);background:var(--gelb-w)}
.na-bestaetigen p{margin:0 0 10px;color:var(--text)}
.na-brief{max-width:640px;padding:12px 14px;border-left:3px solid var(--linie2);background:var(--panel);margin:0 0 16px}
.na-brief p{margin:0 0 6px;white-space:pre-line;overflow-wrap:anywhere}
.na-kind{max-width:640px;margin:0 0 18px}
.na-kind h2{font-size:17px;color:var(--text);margin:18px 0 8px}
.na-antwort{margin:0 0 10px}
.na-stand{margin:0 0 6px}
.na-namen{columns:2 180px;margin:0 0 12px;padding-left:20px}
.na-namen li{padding:2px 0}
.na-erinnern,.na-vorschau-kasten{max-width:640px;padding:12px 14px;border:1px solid var(--linie2);border-radius:var(--r);margin:10px 0 16px}
.na-erinnern p,.na-vorschau-kasten p{margin:0 0 10px}
.na-ergebnis{border-collapse:collapse;width:100%;max-width:640px;font-size:14px}
.na-ergebnis th,.na-ergebnis td{border-bottom:1px solid var(--linie);padding:8px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.na-ergebnis th{color:var(--text3);font-weight:600;font-size:12.5px}
.na-ergebnis .na-zahl{text-align:right;font-weight:650;font-size:16px}
.na-frage{font-size:16px;font-weight:600;color:var(--text)}
.na-mehr{margin:4px 0}
.na-mehr summary{cursor:pointer;color:var(--text2);padding:10px 0;min-height:var(--tippziel)}
.na-termin{padding:10px 6px;border-bottom:1px solid var(--linie)}
.na-termin p{margin:0 0 6px}
.na-termin.na-umbuchen{background:var(--gelb-w)}
.na-lehrkraft{margin:0 0 14px}
.na-lehrkraft h2{font-size:16px;color:var(--text);margin:22px 0 2px}
.na-lehrkraft h3{margin:14px 0 6px}
.na-lehrkraft .unter{margin:0 0 8px}
.na-zeiten{display:flex;flex-wrap:wrap;gap:8px}
.na-fenster{display:inline}
.na-zeitknopf{min-height:48px;min-width:88px;flex-direction:column;gap:0;font-weight:650;font-size:16px;line-height:1.15}
.na-zeitknopf span,.na-zeit-belegt span{font-size:11.5px;font-weight:450;color:var(--text2)}
.na-zeit-belegt{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;min-width:88px;padding:4px 10px;border:1px dashed var(--linie2);border-radius:8px;color:var(--text3);line-height:1.15}
.na-zeit-belegt.na-zeit-eigen{border:1.5px solid var(--gruen);color:var(--gruen);background:var(--gruen-w)}
.na-lehrkraefte{display:grid;gap:2px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.na-lehrkraft-plan{border-bottom:1px solid var(--linie)}
@media (max-width:899px){
  .na-nachricht,.na-nachricht.na-eigene{margin-left:0;margin-right:0}
  .na-neu{padding:10px 12px}
  .na-knopfzeile .k{min-height:var(--tippziel)}
}

/* === Loop 9, Spur O — Mensa, Küchenliste, Beiträge, Buchung, Neuigkeiten, Hort ==========
   Nur Abstände und Anordnung — Farben aus den Tokens. Eltern sind am Handy: große Knöpfe,
   kein Querverschieben bei 360 px. Küchen- und Hortliste drucken ohne Rahmen. */
.org-knoepfe{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}
.org-karte{border:1px solid var(--linie);border-radius:var(--r);background:var(--panel);padding:14px 16px;margin:0 0 18px;max-width:760px}
.org-karte>h2{margin-top:0}
.org-karte summary{cursor:pointer;font-weight:550;padding:6px 0}
.org-allergene{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;min-width:0}
.org-allergene legend{font-size:12.5px;color:var(--text2);font-weight:550;margin:0 0 6px;padding:0}
.org-haken{display:inline-flex;align-items:center;gap:8px;min-height:32px}
.org-haken input{width:18px;height:18px;flex-shrink:0}
.org-haken.gross{font-size:16px}
.org-woche{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 8px}
.org-tag{padding:10px 4px 12px;border-bottom:1px solid var(--linie)}
.org-tag h3{margin:0 0 6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.org-bald{background:var(--hover);border-radius:8px;padding-left:8px;padding-right:8px}
.org-gericht{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 12px;align-items:center;padding:6px 0}
.org-gname{min-width:0;overflow-wrap:anywhere;font-weight:550}
.org-gname small{display:block;font-weight:400;color:var(--text2);font-size:12.5px}
.org-zahl{font-weight:650;font-size:16px}
.org-aktion{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.org-tagfuss{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.org-naechster{border:1.5px solid var(--text);border-radius:12px;padding:14px 16px;margin:0 0 18px;max-width:560px;display:grid;gap:10px}
.org-naechster h2{margin:0;font-size:17px;color:var(--text)}
.org-naechster p{margin:0}
.org-gross{font-size:16px}
.org-zahlen{margin:0 0 8px}
.org-rechts{text-align:right!important}
.org-kueche td.org-gross{font-size:20px;font-weight:650}
.z.org-posten{grid-template-columns:14px minmax(0,1fr) auto}
.org-betrag{white-space:nowrap;text-align:right}
.org-schritte{padding-left:20px;display:grid;gap:10px}
.org-zweispaltig{display:grid;gap:0 18px;max-width:1120px}
@media(min-width:1100px){.org-zweispaltig{grid-template-columns:1fr 1fr}.org-zweispaltig .org-karte{max-width:none}}
.org-filter{max-width:560px}
.org-belegt{margin:2px 0}
.org-vorschau{border:1px dashed var(--linie2);border-radius:var(--r);padding:12px 16px;margin:0 0 18px;max-width:760px}
.org-artikel{max-width:68ch;margin:0 0 26px}
.org-artikel h1,.org-artikel h3{margin-bottom:2px}
.org-artikel-titel{font-size:18px;color:var(--text);margin:20px 0 2px}
.org-artikel-titel a{text-decoration:underline;text-decoration-color:var(--linie2);text-underline-offset:3px}
.org-absatz{white-space:pre-line;overflow-wrap:anywhere}
.org-bild{display:block;max-width:100%;height:auto;border-radius:8px;margin:8px 0}
textarea.feld.org-text{min-height:140px;resize:vertical}
.org-kopf{display:flex;align-items:center;gap:12px;margin:0 0 22px;flex-wrap:wrap}
.org-kopf small{display:block;color:var(--text3);font-size:12.5px}
.org-kopf .k{margin-left:auto}
.org-termine{list-style:none;padding:0;margin:0;border-top:1px solid var(--linie)}
.org-termine li{padding:10px 4px;border-bottom:1px solid var(--linie);display:grid;gap:2px}
.org-termine li span{color:var(--text2)}
.org-hort-tag{padding:10px 0;border-bottom:1px solid var(--linie)}
.org-hort-tag h3{margin:0}
.org-hort-tag p{margin:4px 0 8px}
.org-abholen{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.org-abholen .beschriftung{width:100%;margin:0}
.org-abholen input.feld{width:auto}
@media (max-width:899px){
  .org-karte{padding:12px}
  .org-gericht{grid-template-columns:minmax(0,1fr) auto}
  .org-gericht .org-aktion{grid-column:1 / -1;justify-content:flex-start}
  .org-haken{min-height:var(--tippziel)}
  .org-karte summary{min-height:var(--tippziel);display:flex;align-items:center}
  .org-artikel-titel a,.org-termine a,a.org-link{display:inline-flex;min-height:var(--tippziel);align-items:center}
}
@media print{
  body.org-druck .sb,body.org-druck .leiste,body.org-druck .unten,body.org-druck .mehr-schub,
  body.org-druck .hinweisband,body.org-druck .nicht-drucken{display:none!important}
  body.org-druck .app{display:block}
  body.org-druck .seite{padding:0;max-width:none}
}
/* 9.V2: „Was zählt als Ausfall?“ — derselbe Hinweis in Cockpit, Statistik, Schule fragen */
details.was-zaehlt{margin:6px 0 12px}
details.was-zaehlt>summary{cursor:pointer;color:var(--text2);font-size:13px}
details.was-zaehlt>p{max-width:60ch;margin:6px 0 0}

/* ---------- Schulkreis · Identität und Bildwelt ---------- */
.schulkreis-marke{display:grid;grid-template-columns:1fr;gap:4px;padding:10px 8px 20px;min-width:0}
.schulkreis-wortmarke{display:block;width:180px;max-width:100%;height:42px;background:var(--marke);
  mask:url("/statisch/schulkreis/logos/schulkreis-horizontal-waid.svg") left center / contain no-repeat}
.schulkreis-marke small{color:var(--text3);font-size:11.5px;font-weight:400;overflow-wrap:anywhere}
.schulkreis-symbol{display:inline-block;width:32px;height:32px;flex-shrink:0;background:var(--marke);
  mask:url("/statisch/schulkreis/logos/schulkreis-symbol-waid.svg") center / contain no-repeat}
.schulkreis-profil{display:flex;align-items:center;gap:10px;min-width:0}
.schulkreis-profil>span:last-child{min-width:0;overflow-wrap:anywhere}
.schulkreis-avatar{display:inline-grid;place-items:center;width:36px;height:36px;flex-shrink:0;
  border-radius:13px;background:var(--marke-w);color:var(--marke);font-size:12px;font-weight:650}
.schulkreis-icon{display:inline-block!important;width:20px!important;height:20px;flex-shrink:0;background:currentColor;
  mask-position:center;mask-size:contain;mask-repeat:no-repeat;opacity:1!important}
.nv.an{background:var(--marke-w)}
.sb .nv{min-height:38px}
.schulkreis-eingang{max-width:1120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;
  align-items:center;padding-top:40px;min-height:85vh}
.schulkreis-anmeldung{min-width:0}
.schulkreis-eingang .eingang-karte{margin:0 auto;max-width:440px;width:100%}
.schulkreis-willkommen{position:relative;overflow:hidden;border-radius:50% 50% 18px 18px;align-self:stretch;min-height:520px}
.schulkreis-willkommen>img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:65% center}
.schulkreis-willkommen>div{position:absolute;inset:auto 24px 24px;padding:22px;border-radius:12px;background:var(--panel);color:var(--text)}
.schulkreis-willkommen p:first-child{font:30px/1.2 Georgia,serif;margin:0 0 10px}
.schulkreis-willkommen p:last-child{color:var(--text2);margin:0}
.schulkreis-leer{display:flex;align-items:center;gap:14px}
.schulkreis-leer img{width:48px;height:48px;flex-shrink:0;opacity:.85}
.schulkreis-fragenstart{display:flex;align-items:center;gap:14px;margin:24px 0}
.schulkreis-fragenstart img{width:54px;height:54px;flex-shrink:0}
.schulkreis-fragenstart p{margin:0}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .schulkreis-leer img{filter:brightness(1.9) saturate(.6)}}
:root[data-theme=dark] .schulkreis-leer img{filter:brightness(1.9) saturate(.6)}
@media(max-width:899px){
  .schulkreis-eingang{grid-template-columns:1fr;max-width:560px;gap:20px;padding-top:20px;min-height:0}
  .schulkreis-willkommen{min-height:220px;border-radius:16px}
  .schulkreis-willkommen>div{inset:auto 14px 14px;padding:16px}
  .schulkreis-willkommen p:first-child{font-size:24px}
  .sb .nv{min-height:var(--tippziel)}
  .schulkreis-leer{align-items:flex-start}
}
@media(max-width:420px){.schulkreis-eingang{padding:16px 12px 50px}.schulkreis-willkommen{min-height:190px}.schulkreis-willkommen p:first-child{font-size:22px}}
@media(max-height:650px) and (min-width:900px){.schulkreis-willkommen{min-height:420px}.schulkreis-eingang{padding-top:20px}}
@media print{.schulkreis-willkommen{display:none}.schulkreis-wortmarke{background:var(--text)}}
.schulkreis-icon-aufgaben{mask-image:url("/statisch/schulkreis/icons/aufgaben.svg")}
.schulkreis-icon-bearbeiten{mask-image:url("/statisch/schulkreis/icons/bearbeiten.svg")}
.schulkreis-icon-beitraege{mask-image:url("/statisch/schulkreis/icons/beitraege.svg")}
.schulkreis-icon-betreuung{mask-image:url("/statisch/schulkreis/icons/betreuung.svg")}
.schulkreis-icon-buchung{mask-image:url("/statisch/schulkreis/icons/buchung.svg")}
.schulkreis-icon-dokumente{mask-image:url("/statisch/schulkreis/icons/dokumente.svg")}
.schulkreis-icon-einstellungen{mask-image:url("/statisch/schulkreis/icons/einstellungen.svg")}
.schulkreis-icon-eltern{mask-image:url("/statisch/schulkreis/icons/eltern.svg")}
.schulkreis-icon-fehlzeiten{mask-image:url("/statisch/schulkreis/icons/fehlzeiten.svg")}
.schulkreis-icon-fragen{mask-image:url("/statisch/schulkreis/icons/fragen.svg")}
.schulkreis-icon-gremien{mask-image:url("/statisch/schulkreis/icons/gremien.svg")}
.schulkreis-icon-hausaufgaben{mask-image:url("/statisch/schulkreis/icons/hausaufgaben.svg")}
.schulkreis-icon-heute{mask-image:url("/statisch/schulkreis/icons/heute.svg")}
.schulkreis-icon-kalender{mask-image:url("/statisch/schulkreis/icons/kalender.svg")}
.schulkreis-icon-kinder{mask-image:url("/statisch/schulkreis/icons/kinder.svg")}
.schulkreis-icon-klassen{mask-image:url("/statisch/schulkreis/icons/klassen.svg")}
.schulkreis-icon-klassenbuch{mask-image:url("/statisch/schulkreis/icons/klassenbuch.svg")}
.schulkreis-icon-krankmeldung{mask-image:url("/statisch/schulkreis/icons/krankmeldung.svg")}
.schulkreis-icon-mehr{mask-image:url("/statisch/schulkreis/icons/mehr.svg")}
.schulkreis-icon-mensa{mask-image:url("/statisch/schulkreis/icons/mensa.svg")}
.schulkreis-icon-zeit{mask-image:url("/statisch/schulkreis/icons/zeit.svg")}
.schulkreis-icon-messungen{mask-image:url("/statisch/schulkreis/icons/messungen.svg")}
.schulkreis-icon-mitteilungen{mask-image:url("/statisch/schulkreis/icons/mitteilungen.svg")}
.schulkreis-icon-neuigkeiten{mask-image:url("/statisch/schulkreis/icons/neuigkeiten.svg")}
.schulkreis-icon-protokolle{mask-image:url("/statisch/schulkreis/icons/protokolle.svg")}
.schulkreis-icon-quelle{mask-image:url("/statisch/schulkreis/icons/quelle.svg")}
.schulkreis-icon-schnittstelle{mask-image:url("/statisch/schulkreis/icons/schnittstelle.svg")}
.schulkreis-icon-schutz{mask-image:url("/statisch/schulkreis/icons/schutz.svg")}
.schulkreis-icon-sprache{mask-image:url("/statisch/schulkreis/icons/sprache.svg")}
.schulkreis-icon-stundenplan{mask-image:url("/statisch/schulkreis/icons/stundenplan.svg")}
.schulkreis-icon-suche{mask-image:url("/statisch/schulkreis/icons/suche.svg")}
.schulkreis-icon-umfragen{mask-image:url("/statisch/schulkreis/icons/umfragen.svg")}
.schulkreis-icon-vertretung{mask-image:url("/statisch/schulkreis/icons/vertretung.svg")}
.schulkreis-icon-zeugnisse{mask-image:url("/statisch/schulkreis/icons/zeugnisse.svg")}

/* Schulkreis: Arbeitsprioritäten und kompakte mobile Ansichten. */
.tag{font-size:12.5px;padding:3px 8px}
.woher{color:var(--text2);font-size:13.5px;text-decoration-color:currentColor}
.folge small{font-size:13px}
.zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.zahl{padding:12px 14px;background:var(--panel);border:1px solid var(--linie);border-radius:var(--r)}
.zahl span{color:var(--text2)}
.heute-aktion{grid-template-columns:14px minmax(0,1fr) auto auto auto;gap:12px}
.aktionswort{color:var(--marke);font-size:13px;font-weight:600}
.beschluss-verlauf{border-top:1px solid var(--linie);margin-top:10px;padding-top:6px}
.beschluss-verlauf summary,.dokumente-filter summary,.termin-formular summary{cursor:pointer;color:var(--text2);padding:10px 0;font-size:14px;min-height:44px}
.termin-formular{border:1px solid var(--linie);border-radius:var(--r);background:var(--panel);padding:0 16px;margin:16px 0}
.termin-formular[open]{padding-bottom:16px}
.termin-formular summary{font-weight:600}
.kalender-agenda{display:none}
.kalender-agenda .z{grid-template-columns:14px minmax(0,1fr) auto}
.kalender-agenda h2{margin-top:22px}
.kalender-agenda .t{white-space:normal}
[data-kalender-modus="agenda"] .kalender-agenda{display:block}
[data-kalender-modus="agenda"] .kalender-monat{display:none}
[data-kalender-modus="monat"] .kalender-agenda{display:none}
[data-kalender-modus="monat"] .kalender-monat{display:block}
.ev{white-space:normal;text-overflow:clip;font-size:12px;line-height:1.35}
.schulkreis-leerstart{padding:36px 20px;text-align:center;border:1px solid var(--linie);border-radius:var(--r);background:var(--panel);margin:20px 0}
.schulkreis-leerstart img{display:block;margin:auto}
.schulkreis-leerstart h2{font-size:20px;color:var(--text);margin:14px 0 8px}
.schulkreis-leerstart p{max-width:460px;margin:0 auto 20px;color:var(--text2)}
.aufgabe .schulkreis-avatar{width:26px;height:26px;display:inline-flex;vertical-align:middle;font-size:10px;margin-right:4px}
@media(max-width:899px){
 .zahlen{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .heute-aktion{grid-template-columns:14px minmax(0,1fr) auto;gap:8px}
 .heute-aktion .aktionswort{grid-column:2 / -1;padding:4px 0}
 .kalender-monat{display:none}
 .kalender-agenda{display:block}
 .unten{bottom:0;left:0;transform:none;width:100%;border-radius:0;border-width:1px 0 0;padding:6px 4px calc(6px + env(safe-area-inset-bottom));gap:0}
 .unten a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;white-space:normal;overflow:visible;min-height:58px;padding:4px 0;border-radius:12px}
 .unten .schulkreis-icon{display:block!important}
 .seite{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
 .kalender-agenda .z .woher{grid-column:2;justify-self:start}
 .chips.kalender-wahl{flex-wrap:nowrap}
}

.kalender-ausblick{display:block}
[data-kalender-modus="agenda"] .kalender-ausblick{display:none}
[data-kalender-modus="monat"] .kalender-ausblick{display:block}
@media(max-width:899px){.kalender-ausblick{display:none}}
.gruppen-kinder{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px;padding:8px 0 16px}
.gruppen-kinder label{display:flex;align-items:center;gap:8px;min-height:44px;overflow-wrap:anywhere}

/* Prüfungslisten: Namen und Ergebniseingabe bleiben auch am Handy bedienbar. */
.pruefung-kandidat { flex-wrap: wrap; gap: .75rem; }
.pruefung-kandidat .formular.inline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pruefung-kandidat input.feld { width: 5rem; min-width: 0; }
.pruefung-punktlabel { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }

.lerntext { white-space: pre-wrap; line-height: 1.6; }