/* HallenBuddy – gemeinsame Gestaltung für Zentrale, Verwaltung und App. Keine Inline-Styles (strikte CSP). */
:root{--bg:#f4f6f8;--karte:#fff;--ink:#1d2a36;--leise:#3b4753;--linie:#dfe4e9;--linie2:#c9d1d8;--akzent:#16795c;--akzent-d:#105c46;--akzent-h:#e7f3ee;
--side:#172a35;--side-ink:#c4d3d8;--side-hover:#223a46;--side-aktiv:#24503f;--side-aktiv-ink:#f1fff8;--side-mark:#8dd8b7;
--rot:#b42318;--rot-h:#fdecea;--gelb:#8a5a00;--gelb-h:#fff4d6;--blau:#1b5aa6;--blau-h:#e8f0fb;--radius:10px;--schatten:0 1px 2px rgba(20,30,40,.06)}
.ebene-zentrale{--akzent:#1f5fae;--akzent-d:#174a88;--akzent-h:#e8f0fb;--side:#1c3557;--side-hover:#25446c;--side-aktiv:#2c5a90;--side-mark:#a8cdfb;--side-ink:#cfdcec}
.ebene-app{--akzent:#14634c;--akzent-d:#0e4b39;--akzent-h:#e3f2ec;--side:#14634c;--side-hover:#1b7559;--side-aktiv:#0e4b39;--side-mark:#c7f0dc;--side-ink:#e3f4ec}
html{font-size:15px}html.fs-1{font-size:13px}html.fs-2{font-size:14px}html.fs-4{font-size:16.5px}html.fs-5{font-size:18px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Calibri,Carlito,"Segoe UI",Arial,sans-serif;font-size:1rem;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--akzent)}
h1{font-size:1.7rem;margin:0 0 .3rem;font-weight:700;letter-spacing:-.3px}
h2{font-size:1.2rem;margin:0 0 .7rem;font-weight:700}
h3{font-size:1.05rem;margin:1rem 0 .5rem;font-weight:700}
p{margin:0 0 .7rem}
.laden{padding:3rem;text-align:center;color:var(--leise)}
.leise{color:var(--leise)}.klein{font-size:.88rem}.fett{font-weight:700}.rot{color:var(--rot)}.nowrap{white-space:nowrap}.rechts{text-align:right}.mitte{text-align:center}
.versteckt{display:none!important}

/* Schaltflächen und Felder */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.4rem;padding:.45rem .9rem;border:1px solid var(--linie2);border-radius:8px;background:#fff;cursor:pointer;font-weight:600;white-space:nowrap;text-decoration:none;color:var(--ink)}
.knopf:hover{border-color:var(--akzent);background:var(--akzent-h)}
.knopf:disabled{opacity:.5;cursor:not-allowed}
.knopf.haupt{background:var(--akzent);border-color:var(--akzent);color:#fff}.knopf.haupt:hover{background:var(--akzent-d)}
.knopf.gefahr{color:var(--rot);border-color:#e8b4ae}.knopf.gefahr:hover{background:var(--rot-h);border-color:var(--rot)}
.knopf.klein{min-height:2rem;padding:.25rem .6rem;font-size:.9rem}
.knopf.text{border-color:transparent;background:transparent;padding-left:.4rem;padding-right:.4rem}.knopf.text:hover{background:var(--akzent-h)}
.knopf:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.nav-punkt:focus-visible{outline:3px solid #7fb9a3;outline-offset:2px}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],input[type=search],select,textarea{width:100%;min-height:2.4rem;padding:.4rem .6rem;border:1px solid var(--linie2);border-radius:8px;background:#fff}
textarea{min-height:5rem;resize:vertical;line-height:1.45}
input[type=checkbox],input[type=radio]{width:1.15rem;height:1.15rem;accent-color:var(--akzent);margin:0}
label.feld{display:flex;flex-direction:column;gap:.25rem;font-weight:600;font-size:.92rem}
label.feld input,label.feld select,label.feld textarea{font-weight:400}
label.feld>span.hinweis{font-weight:400;color:var(--leise);font-size:.85rem}
label.haken{display:flex;align-items:center;gap:.5rem;font-weight:400;cursor:pointer}
.raster2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.raster3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.raster4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.voll{grid-column:1/-1}
.formular{display:flex;flex-direction:column;gap:.8rem}
.fehlertext{color:var(--rot);font-size:.9rem;min-height:1.2em}

/* Grundaufbau mit senkrechter Leiste links */
.leiste{position:fixed;inset:0 auto 0 0;width:240px;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;padding:1.3rem .8rem 1rem;z-index:20;overflow-y:auto}
.marke{padding:0 .7rem 1.1rem;color:#fff}
.marke .innen{width:max-content;max-width:100%}
.marke .wort{font-size:1.6rem;font-weight:800;letter-spacing:.5px;line-height:1}
.marke .wort b{color:var(--side-mark)}
.marke .unter{display:block;font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;margin-top:.35rem;color:var(--side-mark)}
/* Untertitel läuft bündig von der ersten bis zur letzten Buchstabenkante des Schriftzugs */
.marke .unter.buendig{display:flex;justify-content:space-between;letter-spacing:0;font-size:.72rem;font-weight:700;width:0;min-width:100%;white-space:nowrap}
.marke .unter.buendig .sp{flex:0 0 .45em}
.schulmarke{margin:0 .4rem 1.1rem;padding:.6rem .7rem;border:1px solid rgba(255,255,255,.14);border-radius:9px;font-size:.88rem;line-height:1.35}
.schulmarke b{display:block;color:#fff;font-size:.95rem}
.nav-gruppe{margin-top:.55rem}
.nav-titel{display:flex;align-items:center;gap:.55rem;width:100%;border:0;background:transparent;font:inherit;font-size:.8rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--side-mark);padding:.4rem .8rem;border-radius:8px;cursor:pointer;text-align:left}
.nav-titel:hover{background:var(--side-hover);color:#fff}
.nav-titel .pfeil{flex:0 0 auto;width:0;height:0;border-left:.3rem solid transparent;border-right:.3rem solid transparent;border-top:.4rem solid currentColor;transition:transform .15s}
.nav-gruppe.zu .nav-titel .pfeil{transform:rotate(-90deg)}
.nav-gruppe.zu .nav-liste{display:none}
.nav-titel .zahl{display:none;margin-left:auto;font-size:.75rem;background:rgba(255,255,255,.2);color:#fff;border-radius:10px;padding:0 .45rem;letter-spacing:0}
.nav-titel .zahl.rot{background:#c0392b}
.nav-gruppe.zu .nav-titel .zahl{display:inline-block}
.nav-punkt{display:flex;align-items:center;gap:.6rem;width:100%;border:0;background:transparent;color:var(--side-ink);padding:.36rem .8rem .36rem 1.3rem;border-radius:8px;cursor:pointer;text-align:left;font-size:.95rem}
.nav-punkt:hover{background:var(--side-hover);color:#fff}
.nav-punkt.aktiv{background:#fff;color:var(--side);font-weight:700}
.nav-punkt.aktiv .zahl{background:rgba(0,0,0,.14)}
.nav-punkt.aktiv .zahl.rot{background:#c0392b;color:#fff}
.nav-punkt .zahl{margin-left:auto;font-size:.75rem;background:rgba(255,255,255,.16);border-radius:10px;padding:0 .45rem;font-weight:700}
.nav-punkt .zahl.rot{background:#c0392b;color:#fff}
.leiste-fuss{margin-top:auto;padding:1rem .4rem 0;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:.3rem;font-size:.88rem}
.leiste-fuss .nav-punkt{padding-left:.8rem}
.leiste-fuss .ich{padding:0 .4rem .3rem;color:#fff}
.arbeitsflaeche{margin-left:240px;min-height:100vh;display:flex;flex-direction:column}
.kopf{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--linie);display:flex;align-items:center;gap:.8rem;padding:.6rem 1.6rem;min-height:3.4rem}
.kopf .pfad{font-weight:700}.kopf .pfad span{color:var(--leise);font-weight:400}
.kopf .raum{flex:1}
.menue-knopf{display:inline-flex}
.inhalt{padding:1.5rem 1.6rem 2rem;flex:1;max-width:1900px;width:100%}
/* Seitenkopf: Titel, Erklärung, darunter links die Aktionsleiste (Neu, Speichern, PDF, Drucken) */
.seitenkopf{margin-bottom:1.2rem}
.seitenkopf p{margin:0;color:var(--leise);max-width:62rem}
.aktionsleiste{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.9rem}
.aktionsleiste .trenner{width:1px;height:1.7rem;background:var(--linie2);margin:0 .35rem}
.kartenkopf{margin-bottom:.9rem}
.kartenkopf h2{margin-bottom:.3rem}
.kartenkopf p{color:var(--leise);margin:0 0 .7rem;max-width:62rem}
.kartenkopf .knopfreihe{margin-top:.6rem}
.fuss{padding:.9rem 1.6rem 1.3rem;color:var(--leise);font-size:.88rem;display:flex;flex-wrap:wrap;gap:.3rem .5rem;align-items:center;border-top:1px solid var(--linie);background:#fff}
.fuss .links{display:flex;flex-wrap:wrap;gap:.2rem}
.fuss button,.fuss a{border:0;background:none;color:var(--leise);cursor:pointer;padding:.3rem .8rem;border-radius:999px;font-size:inherit;text-decoration:none;font-weight:600}
.fuss button:hover,.fuss a:hover{background:var(--akzent-h);color:var(--akzent-d)}
.fuss .fusslink{color:var(--akzent-d)}
.fuss .version{padding:.3rem .8rem;border-left:1px solid var(--linie2)}
.fuss .raum{flex:1}

/* Karten, Kacheln, Hinweise */
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:var(--schatten);margin-bottom:1rem}
.karte.eng{padding:.7rem .9rem}
.karte>h2:first-child{margin-top:0}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem;margin-bottom:1rem}
.kachel{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:.9rem 1rem;min-height:6.2rem;display:flex;flex-direction:column;gap:.15rem}
.kachel .wert{font-size:1.8rem;font-weight:700;line-height:1.15}
.kachel .wert small{font-size:.95rem;font-weight:400;color:var(--leise)}
.kachel .titel{font-size:.85rem;color:var(--leise)}
.kachel.warn{border-color:#efc9a0;background:#fffaf2}.kachel.fehler{border-color:#ebb3ac;background:#fff6f5}
.kachel button.knopf{margin-top:auto;align-self:flex-start}
.hinweis{padding:.7rem .9rem;border-radius:8px;border:1px solid #e6dcc4;background:#fffaf0;margin-bottom:1rem}
.hinweis.rot{border-color:#ebb3ac;background:var(--rot-h);color:#7a1a12}
.hinweis.blau{border-color:#c5d8f2;background:var(--blau-h);color:#123e75}
.hinweis.gruen{border-color:#bfe0d1;background:var(--akzent-h);color:#0d4a37}
.marke-klein{display:inline-block;font-size:.75rem;font-weight:700;border-radius:5px;padding:.08rem .4rem;background:var(--akzent-h);color:var(--akzent-d);border:1px solid transparent;vertical-align:middle}
.marke-klein.grau{background:#eef1f4;color:#3d4a56}.marke-klein.rot{background:var(--rot-h);color:var(--rot)}.marke-klein.gelb{background:var(--gelb-h);color:var(--gelb)}.marke-klein.blau{background:var(--blau-h);color:var(--blau)}
.leer{padding:1.4rem;text-align:center;color:var(--leise);border:1px dashed var(--linie2);border-radius:var(--radius);background:#fff}

/* Tabellen */
.tabelle-huelle{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--radius);background:#fff;margin-bottom:1rem}
table.liste{width:100%;border-collapse:collapse;font-size:.95rem}
table.liste th,table.liste td{padding:.5rem .7rem;border-bottom:1px solid var(--linie);text-align:left;vertical-align:middle;height:2.6rem}
table.liste th{background:#f7f9fa;font-size:.85rem;color:#33414d;font-weight:700;white-space:nowrap;position:sticky;top:0}
table.liste tr:last-child td{border-bottom:0}
table.liste tr.klickbar{cursor:pointer}table.liste tr.klickbar:hover td{background:#f5faf8}
table.liste td.aktionen{white-space:nowrap;text-align:right;width:1%}
table.liste td.zahl,table.liste th.zahl{text-align:right;font-variant-numeric:tabular-nums}
table.liste tfoot td{font-weight:700;background:#f7f9fa}
.werkzeuge{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.8rem}
.werkzeuge .raum{flex:1}
.werkzeuge input[type=search]{max-width:260px}
.reiter{display:inline-flex;gap:2px;background:#e9edf0;padding:3px;border-radius:9px;flex-wrap:wrap}
.reiter button{border:0;background:transparent;padding:.35rem .75rem;border-radius:7px;cursor:pointer;font-weight:600;color:#33414d}
.reiter button.aktiv{background:#fff;color:var(--akzent-d);box-shadow:var(--schatten)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{border:1px solid var(--linie2);background:#fff;border-radius:16px;padding:.2rem .7rem;cursor:pointer;font-size:.9rem}
.chip.an{background:var(--akzent);border-color:var(--akzent);color:#fff}

/* Sportplan */
.plan-huelle{overflow:auto;border:1px solid var(--linie);border-radius:var(--radius);background:#fff;margin-bottom:1.2rem;max-height:calc(100vh - 13rem)}
.plan-huelle.frei{max-height:none}
table.plan{border-collapse:separate;border-spacing:0;font-size:.85rem;min-width:100%}
table.plan th,table.plan td{border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:0}
table.plan thead th{position:sticky;top:0;background:#f3f6f8;z-index:3;padding:.35rem .4rem;font-weight:700;text-align:center;white-space:nowrap}
table.plan thead tr:nth-child(2) th{top:1.95rem;font-weight:600;font-size:.8rem}
table.plan th.std{position:sticky;left:0;z-index:2;background:#f7f9fa;width:3.4rem;min-width:3.4rem;text-align:center;font-weight:700;padding:.2rem}
table.plan thead th.std{z-index:4}
table.plan th.std small{display:block;font-weight:400;font-size:.72rem;color:var(--leise);line-height:1.1}
table.plan td.zelle{min-width:6.8rem;height:2.7rem;vertical-align:top;background:#fff;position:relative}
table.plan td.zelle.leerbar{cursor:pointer}
table.plan td.zelle.leerbar:hover{background:#f1f8f5}
table.plan td.zelle.ziel{background:#dff1e9;outline:2px dashed var(--akzent);outline-offset:-3px}
table.plan td.summe{text-align:center;font-weight:700;background:#fafbfc;min-width:3rem;vertical-align:middle}
table.plan tr.tagkopf th{background:var(--side);color:#fff;text-align:left;padding:.35rem .6rem;position:static;font-size:.95rem}
table.plan td.ausser{background:repeating-linear-gradient(45deg,#f6f7f8,#f6f7f8 6px,#eef0f2 6px,#eef0f2 12px)}
.belegung{position:relative;margin:2px;border-radius:7px;padding:.2rem .35rem;background:#e3f2ec;border:1.5px solid #6fae94;min-height:calc(100% - 4px);font-size:.82rem;line-height:1.2;cursor:pointer;overflow:hidden;box-shadow:0 1px 1px rgba(20,40,30,.18)}
.belegung b{display:block;font-size:.86rem}
.belegung .lk{color:#24453a}
.belegung.fremd{background:#eef1f5;border-color:#8795a5;color:#2f3c48}
.belegung.frei{background:repeating-linear-gradient(135deg,#f3f4f6,#f3f4f6 5px,#e6e9ec 5px,#e6e9ec 10px);border-color:#8f9aa6;color:#3b4652}
.belegung.konflikt{border-color:var(--rot);box-shadow:inset 0 0 0 1px var(--rot);background:#fdeeee}
.belegung.woche{border-style:dashed}
.belegung.markiert{box-shadow:0 0 0 3px #f2b84b}
.belegung[draggable=true]{cursor:grab}
.belegung.schiebt{opacity:.4;outline:2px dashed var(--akzent);outline-offset:-2px}
.plan-legende{display:flex;flex-wrap:wrap;gap:.8rem;font-size:.92rem;color:var(--ink);margin:-.4rem 0 1rem}
.plan-legende span{display:inline-flex;align-items:center;gap:.35rem}
.plan-legende i{display:inline-block;width:1.1rem;height:.8rem;border-radius:3px;border:1px solid #b9dccb;background:#e3f2ec}
.plan-legende i.fremd{background:#eef1f5;border-color:#cdd5de}.plan-legende i.frei{background:#e6e9ec;border-color:#cfd5db}.plan-legende i.konflikt{background:#fdeeee;border-color:var(--rot)}.plan-legende i.gekoppelt{border-left:4px solid #3b7d66}

/* Prüfung */
.pruef{display:flex;gap:.8rem;align-items:flex-start;padding:.6rem .8rem;border-bottom:1px solid var(--linie)}
.pruef:last-child{border-bottom:0}
.pruef .art{flex:0 0 auto}
.pruef .text{flex:1}
.pruef .text small{display:block;color:var(--leise)}

/* Jahreskalender */
.kalender{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem}
.monat{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:.6rem .7rem}
.monat h3{margin:0 0 .4rem;font-size:.95rem}
.monat table{width:100%;border-collapse:collapse;font-size:.8rem;table-layout:fixed}
.monat th{color:#2b3640;font-weight:700;padding:.1rem 0;text-align:center}
.monat td{text-align:center;padding:0;height:1.75rem}
.monat td button{width:100%;height:1.6rem;border:0;background:transparent;border-radius:5px;cursor:pointer;font-size:.8rem}
.monat td button:hover{background:#eef4f1}
.monat td.we button{color:#33404b}
.monat td.sperr button{background:#f7d4cf;color:#6b1610;font-weight:700}
.monat td.sperr.teil button{background:#fbe8c8;color:#6a4300}
.monat td.ferien button{background:#dbe7f7;color:#173d70;font-weight:700}
.monat td.heute button{outline:2px solid var(--akzent)}
.monat td.ausser button{visibility:hidden}

/* Dialog */
dialog.fenster{border:0;border-radius:12px;padding:0;width:min(680px,calc(100vw - 2rem));max-height:calc(100vh - 2rem);box-shadow:0 20px 60px rgba(0,0,0,.25)}
dialog.fenster.breit{width:min(980px,calc(100vw - 2rem))}
dialog.fenster::backdrop{background:rgba(15,25,35,.45)}
.fenster-kopf{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--linie);position:sticky;top:0;background:#fff;z-index:2}
.fenster-kopf h2{margin:0;flex:1}
.fenster-inhalt{padding:1.1rem 1.2rem;overflow:auto}
.fenster-fuss{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap;padding:.8rem 1.2rem;border-top:1px solid var(--linie);position:sticky;bottom:0;background:#fff}
.fenster-fuss .raum{flex:1}
.flaechenwahl{display:flex;flex-direction:column;gap:.5rem;max-height:14rem;overflow:auto;border:1px solid var(--linie);border-radius:8px;padding:.6rem}
.flaechenwahl .gruppe{display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:center}
.flaechenwahl .gruppe b{width:100%;font-size:.85rem}
.kopierfeld{display:flex;gap:.4rem;align-items:center}
.kopierfeld code,.kopierfeld a{flex:1;min-width:0;overflow-wrap:anywhere;background:#f3f6f8;border:1px solid var(--linie);border-radius:7px;padding:.45rem .6rem;font-size:1.05rem;letter-spacing:.5px;user-select:all}
.kopierfeld a{color:var(--akzent-d);font-weight:600;letter-spacing:0;text-decoration:none}.kopierfeld a:hover{text-decoration:underline}
.text-ansicht h3{margin-top:1.1rem}
.text-ansicht p{white-space:pre-line}

/* Anmeldung */
.anmeldung{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:var(--side)}
.anmeldung .karte{width:min(420px,100%);padding:1.6rem 1.6rem 1.2rem}
.anmeldung .marke{color:var(--ink);padding:0 0 1rem}
.anmeldung .marke .wort b{color:var(--akzent)}
.anmeldung .marke .unter{color:var(--akzent)}
.anmeldung .fusszeile{margin-top:1.1rem;padding-top:.7rem;border-top:1px solid var(--linie);font-size:.85rem;color:var(--leise);display:flex;gap:.2rem;flex-wrap:wrap;align-items:center}
.anmeldung .fusszeile button,.anmeldung .fusszeile a{border:0;background:none;color:var(--leise);cursor:pointer;text-decoration:none;padding:.25rem .65rem;border-radius:999px;font-size:inherit;font-weight:600}
.anmeldung .fusszeile button:hover,.anmeldung .fusszeile a:hover{background:var(--akzent-h);color:var(--akzent-d)}
.anmeldung .fusszeile .raum{flex:1}

/* Meldung unten */
.toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);background:#1d2a36;color:#fff;padding:.65rem 1rem;border-radius:9px;z-index:100;max-width:min(560px,calc(100vw - 2rem));box-shadow:0 8px 30px rgba(0,0,0,.25)}
.toast.fehler{background:#8c1d13}

/* Schriftgröße als Auswahl-Blasen */
.pillen{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.pille{border:1px solid var(--linie2);background:#fff;border-radius:999px;padding:.4rem 1.1rem;cursor:pointer;font-weight:600;line-height:1.2;color:var(--ink)}
.pille:hover{border-color:var(--akzent);background:var(--akzent-h)}
.pille.an{background:var(--akzent);border-color:var(--akzent);color:#fff}
.pille.s1{font-size:.78rem}.pille.s2{font-size:.88rem}.pille.s3{font-size:1rem}.pille.s4{font-size:1.15rem}.pille.s5{font-size:1.3rem}

/* Symbolknöpfe in Tabellenzeilen: Bearbeiten, Kopieren, Löschen */
.icon-knopf{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border:1px solid transparent;border-radius:8px;background:transparent;cursor:pointer;color:var(--leise);padding:0}
.icon-knopf svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-knopf:hover{background:var(--akzent-h);color:var(--akzent-d);border-color:var(--akzent)}
.icon-knopf.gefahr:hover{background:var(--rot-h);color:var(--rot);border-color:var(--rot)}
.icon-knopf:focus-visible{outline:3px solid #7fb9a3;outline-offset:1px}
table.liste td.zeilenaktionen{white-space:nowrap;text-align:right;width:1%;padding-top:0;padding-bottom:0}
table.liste td.zeilenaktionen .icon-knopf{opacity:.45}
table.liste tr:hover td.zeilenaktionen .icon-knopf,table.liste tr:focus-within td.zeilenaktionen .icon-knopf{opacity:1}
@media (hover:none){table.liste td.zeilenaktionen .icon-knopf{opacity:1}}
table.liste tbody tr:hover td{background:#f6faf8}
table.liste td small.zeile2{display:block;color:var(--leise);font-weight:400;font-size:.82rem}
table.schluessel th{width:11rem;text-align:left;background:#f7f9fa;font-size:.85rem;color:#33414d;padding:.5rem .7rem;border-bottom:1px solid var(--linie);vertical-align:middle}
table.schluessel td{padding:.5rem .7rem;border-bottom:1px solid var(--linie)}
table.schluessel tr:last-child th,table.schluessel tr:last-child td{border-bottom:0}

/* Aufklappbereiche und Vorschau der Datenschutzerklärung */
details.klapp{border:1px solid var(--linie);border-radius:var(--radius);background:#fff;margin-bottom:1rem;box-shadow:var(--schatten)}
details.klapp>summary{padding:.8rem 1.2rem;cursor:pointer;font-weight:700;font-size:1.05rem}
details.klapp>.klapp-inhalt{padding:0 1.2rem 1.1rem}
.vorschau-text h3{margin-top:1.1rem}
.vorschau-text p{white-space:pre-line}
.vorschau-text mark{background:#fff0b3;color:inherit;border-radius:3px;padding:0 .2em;box-decoration-break:clone}
.vorschau-kopf{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin-bottom:.4rem;color:var(--leise);font-size:.88rem}
.vorschau-kopf mark{background:#fff0b3;border-radius:3px;padding:0 .3em;color:var(--ink)}
.erklaerung{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.9rem;margin-bottom:1rem}
.erklaerung .karte{margin:0}
.erklaerung h3{margin:0 0 .3rem}
.erklaerung p{margin:0;color:#33414d}

/* Druck: eigene Kopf- und Fußzeile */
.druckkopf,.druckfuss{display:none}
@media print{
  @page{size:A4 landscape;margin:10mm}
  body{background:#fff;font-size:10pt}
  .leiste,.kopf,.fuss,.werkzeuge,.knopfreihe,.aktionsleiste,.nicht-drucken,.seitenkopf,.kartenkopf .knopfreihe,.plan-legende .knopf,.toast,dialog,.knopf,.icon-knopf,.zeilenaktionen,table.liste td.aktionen,.pruef .knopf{display:none!important}
  details.klapp:not([open])>.klapp-inhalt{display:none}
  textarea{border:0;resize:none;padding:0}
  .arbeitsflaeche{margin:0}
  .inhalt{padding:0;max-width:none}
  .druckkopf{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #1d2a36;padding-bottom:4mm;margin-bottom:4mm}
  .druckkopf b{font-size:14pt}
  .druckfuss{display:block;margin-top:5mm;padding-top:2mm;border-top:1px solid #999;font-size:8pt;color:#333}
  .karte,.tabelle-huelle,.plan-huelle{box-shadow:none;border-color:#999;max-height:none;overflow:visible}
  .plan-huelle{page-break-inside:auto}
  table.plan{font-size:7.5pt}
  table.plan td.zelle{min-width:0;height:auto}
  table.plan thead th{position:static}
  table.plan th.std{position:static}
  .belegung{border-color:#888!important;box-shadow:none!important}
  .tag-block{page-break-after:always}
  .tag-block:last-child{page-break-after:auto}
  .monat{page-break-inside:avoid}
  a{color:#000;text-decoration:none}
}

/* Kleine Bildschirme */
@media (max-width:900px){
  .leiste{transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.3)}
  body.menue-offen .leiste{transform:none}
  .arbeitsflaeche{margin-left:0}
  .menue-knopf{display:inline-flex}
  .kopf{padding:.5rem 1rem}
  .inhalt{padding:1rem}
  .raster3,.raster4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan-huelle{max-height:none}
}
@media (max-width:560px){
  .raster2,.raster3,.raster4{grid-template-columns:1fr}
  h1{font-size:1.4rem}
  .kacheln{grid-template-columns:1fr 1fr}
  .kopf .pfad .krume:not(.hier),.kopf .pfad .trenn{display:none}
}
.bild-vorschau{display:block;max-width:min(320px,100%);max-height:200px;border-radius:8px;border:1px solid var(--linie);margin:.3rem 0 .6rem;object-fit:cover}
.staette-karte{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:start}
@media (max-width:560px){.staette-karte{grid-template-columns:1fr}}
table.schluessel{width:100%;border-collapse:collapse;font-size:.95rem}

/* Sportplan: Kacheln, Überlappungen, Zielvorschau, Werkzeuge */
.belegung.segment{margin-top:0;margin-bottom:0;border-radius:0;min-height:100%}
.belegung.segment.erste{margin-top:2px;border-radius:7px 7px 0 0}
.belegung.segment.letzte{margin-bottom:2px;border-radius:0 0 7px 7px}
.belegung.segment.erste.letzte{border-radius:7px}
.belegung.segment:not(.erste){border-top-color:transparent}
.belegung.segment:not(.letzte){border-bottom-color:transparent}
.stapel{display:flex;align-items:stretch;min-height:100%;height:100%}
.stapel>.belegung,.stapel>.leerplatz{flex:1 1 0;min-width:0}
.stapel.mehrere>.belegung{font-size:.74rem}
.kachelwerkzeuge{position:absolute;top:1px;right:1px;display:inline-flex;opacity:.8;gap:1px;background:rgba(255,255,255,.92);border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.belegung:hover>.kachelwerkzeuge,.belegung:focus-within>.kachelwerkzeuge{opacity:1}
.plan-huelle.kompakt .kachelwerkzeuge{display:none}
.plan-huelle.kompakt .belegung:hover>.kachelwerkzeuge{display:inline-flex}
.kachelwerkzeuge .icon-knopf{width:1.45rem;height:1.45rem;border-radius:5px;color:#33414d}
.kachelwerkzeuge .icon-knopf svg{width:.95rem;height:.95rem}
@media (hover:none){.kachelwerkzeuge{display:inline-flex}}
table.plan td.zelle.ziel{background:#cfeee0;outline:3px solid var(--akzent);outline-offset:-3px}
table.plan td.zelle.ziel-konflikt{background:#fbe0dc;outline:3px solid #d9534f;outline-offset:-3px}
table.plan td.zelle.ziel-aus{background:#eceff1;outline:3px dashed #8b97a3;outline-offset:-3px}
table.plan td.zelle.ziel .belegung,table.plan td.zelle.ziel-konflikt .belegung{opacity:.55}
.belegung.markiert{animation:hb-blink 1.1s ease-in-out 3}
@keyframes hb-blink{50%{box-shadow:0 0 0 5px #f2b84b}}
.plan-huelle.kompakt table.plan{font-size:.7rem;table-layout:fixed;width:100%}
.plan-huelle.kompakt table.plan td.zelle{overflow:hidden}
.plan-huelle.kompakt .belegung{overflow:hidden;word-break:break-word;hyphens:auto}
.plan-huelle.kompakt table.plan td.zelle{min-width:2.1rem;height:2.2rem}
.plan-huelle.kompakt table.plan thead th{padding:.2rem .15rem;font-size:.68rem}
.plan-huelle.kompakt table.plan th.std{width:1.9rem;min-width:1.9rem}
.plan-huelle.kompakt table.plan th.std small{display:none}
.plan-huelle.kompakt .belegung{padding:.1rem .2rem;font-size:.68rem}
.plan-huelle.kompakt .belegung .lk{display:none}
.tage-reihe{display:flex;flex-wrap:wrap;gap:.8rem .6rem;align-items:flex-start}
.tage-reihe>.tag-block{flex:1 1 0;min-width:0}
.tage-reihe .plan-huelle{margin-bottom:0}
.tag-block h2{margin:.2rem 0 .4rem}

/* Ablage */
.ablage{border:1px dashed #8aa89b;border-radius:var(--radius);background:#f7fbf9;margin-bottom:1rem}
.ablage>summary{cursor:pointer;padding:.55rem .9rem;font-weight:700;display:flex;gap:.6rem;align-items:center}
.ablage>summary .zahl{font-weight:600;color:var(--leise)}
.ablage .ablage-inhalt{padding:.2rem .9rem .8rem}
.ablage.ziel{background:#dff1e9;border-color:var(--akzent);border-style:solid}
.ablage .ablage-werkzeug{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.6rem}
.ablage-chips{display:flex;flex-wrap:wrap;gap:.5rem;min-height:2.6rem}
.ablage-chip{position:relative;display:flex;align-items:center;gap:.3rem;border:1.5px solid #6fae94;background:#e3f2ec;border-radius:8px;padding:.25rem .3rem .25rem .55rem;font-size:.82rem;cursor:grab;max-width:19rem}
.ablage-chip.fremd{background:#eef1f5;border-color:#8795a5}
.ablage-chip small{display:block;color:var(--leise);font-size:.74rem}
.ablage-chip .icon-knopf{width:1.5rem;height:1.5rem}
.ablage-leer{color:var(--leise);font-size:.9rem;align-self:center}

/* Hilfe im Sportplan */
.infobox{border:1px solid #c5d8f2;background:var(--blau-h);color:#123e75;border-radius:var(--radius);padding:.7rem 1rem;margin-bottom:1rem;display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.infobox ul{margin:0;padding-left:1.1rem;flex:1 1 30rem;columns:2 22rem;column-gap:2rem}
.infobox li{margin:.1rem 0;break-inside:avoid}
.faq details{border-bottom:1px solid var(--linie);padding:.5rem 0}
.faq summary{cursor:pointer;font-weight:700}
.faq p{margin:.4rem 0 .2rem}

/* Planprüfung */
.pruef{align-items:center;border-radius:6px}
.pruef.sprung{cursor:pointer}
.pruef.sprung:hover,.pruef.sprung:focus-visible{background:#f1f8f5;box-shadow:inset 3px 0 0 var(--akzent)}
.pruef .art{flex:0 0 10.5rem}
.pruef .text{flex:1;min-width:0}

/* Jahreskalender */
.kalender{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1300px){.kalender{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.kalender{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kalender{grid-template-columns:1fr}}
.monat h3{margin:0 0 .4rem;font-size:.95rem}
.monat .monatsname{border:0;background:transparent;font:inherit;font-weight:700;cursor:pointer;padding:.1rem .3rem;border-radius:6px}
.monat .monatsname:hover{background:var(--akzent-h);color:var(--akzent-d)}
.monat.aktiv{border-color:var(--akzent);box-shadow:0 0 0 2px #bfe0d1}
.monat td.we{background:#dfe5ea}
.monat td.feiertag button{background:#e9dcf5;color:#43206b;font-weight:700}
.monat td.ferien button{background:#dbe7f7;color:#173d70;font-weight:700}
.monat td.we.ferien button,.monat td.we.feiertag button{font-weight:700}
.kal-legende{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;font-size:.92rem;color:var(--ink);margin:-.3rem 0 .9rem}
.kal-legende i{display:inline-block;width:1rem;height:.8rem;border-radius:3px;margin-right:.3rem;vertical-align:-1px;border:1px solid #c9d0d6}
.kal-legende i.we{background:#dfe5ea}.kal-legende i.ft{background:#e9dcf5}.kal-legende i.fe{background:#dbe7f7}.kal-legende i.sp{background:#f7d4cf}.kal-legende i.tl{background:#fbe8c8}
.monatsdetail td.we-zeile,.monatsdetail tr.we-zeile td{background:#e9edf1}

/* Protokoll als Text */
.protokolltext p{display:grid;grid-template-columns:10.5rem 9rem minmax(0,1fr);gap:.8rem;margin:0;padding:.3rem .2rem;border-bottom:1px solid #eef1f3;font-size:.92rem}
.protokolltext .zeit{color:var(--leise);font-variant-numeric:tabular-nums;white-space:nowrap}
.protokolltext .wer{font-weight:600}

/* Knopfgitter: gleich breite Knöpfe, nach Themen gruppiert */
.knopfgruppe{margin:.9rem 0 .3rem;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--leise)}
.knopfgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.5rem}
.knopfgitter .knopf{width:100%;justify-content:center;text-align:center}
.adresszeile{display:flex;align-items:center;gap:.4rem;padding:.35rem .2rem;border-bottom:1px solid var(--linie)}
.adresszeile:last-child{border-bottom:0}
.adresszeile b{flex:0 0 7rem}
.adresszeile a{flex:1;min-width:0;overflow-wrap:anywhere}
.feldreihe{display:flex;gap:.6rem;align-items:flex-end}
.feldreihe label.feld{flex:1}
.feldreihe .knopf{height:2.4rem}
@media print{.kachelwerkzeuge,.ablage,.infobox,.tage-reihe .plan-huelle{box-shadow:none}.ablage,.infobox{display:none!important}.tage-reihe{display:block}.tage-reihe .tag-block{page-break-after:always}.protokolltext p{page-break-inside:avoid}}

@media print{
  body.druck-dialog #app{display:none!important}
  body.druck-dialog dialog.druck-dran{display:block!important;position:static!important;width:auto!important;max-height:none!important;box-shadow:none!important;border:0!important;overflow:visible!important}
  body.druck-dialog dialog.druck-dran .fenster-inhalt{max-height:none!important;overflow:visible!important}
  body.druck-dialog dialog.druck-dran .fenster-fuss,body.druck-dialog dialog.druck-dran .fenster-kopf .knopf{display:none!important}
}
.ablage>summary svg,.infobox svg{width:1.25rem;height:1.25rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ablage>summary{list-style:none}
.ablage>summary::-webkit-details-marker{display:none}
.ablage-werkzeug select{width:auto;min-width:11rem;max-width:26rem}
.ablage-werkzeug .fett{font-weight:700}
.ablage-chip svg{width:1rem;height:1rem}

/* Sportstätten-Schalter ohne Sperrtermine ausgegraut, Hinweise besser lesbar */
.chip.leer{background:#e6eaee;border-style:dashed;border-color:#8d99a5;color:#3f4b57}
.chip.leer.an{background:var(--akzent);border-style:solid;border-color:var(--akzent);color:#fff}
.chip-hinweis{margin:.1rem 0 .8rem;font-size:.92rem;color:var(--ink)}
.konfliktband ul{margin:.3rem 0 .6rem;padding-left:1.2rem}
.konfliktband b{font-size:1.02rem}
.hinweis{color:#2c3a46}

/* ===== Runde 2026.1.6 ===== */
/* Menü: Sportplan als zentraler Punkt, Symbole */
.nav-punkt svg{width:1.15rem;height:1.15rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.nav-punkt .txt{flex:1 1 auto;min-width:0}
.nav-punkt{padding-left:.9rem}
.nav-gruppe.ohne-titel{margin-top:.2rem;margin-bottom:.35rem}
.nav-punkt.gross{font-size:1.1rem;font-weight:700;padding:.65rem .9rem;background:rgba(255,255,255,.1);border-left:4px solid var(--side-mark);color:#fff;letter-spacing:.2px}
.nav-punkt.gross svg{width:1.45rem;height:1.45rem;stroke-width:2}
.nav-punkt.gross:hover{background:var(--side-hover)}
.nav-punkt.gross.aktiv{background:#fff;color:var(--side);border-left-color:var(--akzent)}
.nav-punkt.aktiv svg{opacity:1}
.leiste-fuss .nav-punkt{padding-left:.9rem}

/* Planvarianten als Reiter im Sportplan */
.reiter.planwahl button{display:inline-flex;align-items:center;gap:.4rem}
.reiter.planwahl .punkt{width:.6rem;height:.6rem;border-radius:50%;background:#aab4bd;display:inline-block}
.reiter.planwahl .punkt.an{background:var(--akzent)}
.reiter.planwahl small{font-size:.72rem;font-weight:700;background:var(--gelb-h);color:var(--gelb);border-radius:4px;padding:0 .3rem}
.reiter.klein button{padding:.2rem .6rem;font-size:.9rem}
.knopfpaar{display:inline-flex;gap:0}
.knopfpaar .knopf:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.knopfpaar .knopf:last-child{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}

/* Sportplan: Summe SuS, Tagessumme, leere Zellen */
table.plan td.summe{background:#e8f0fb;color:#0f3a73;font-size:1.05rem;border-left:2px solid #9bb8e0}
table.plan thead th.summe-kopf{background:#d6e4f8;color:#0f3a73;border-left:2px solid #9bb8e0}
table.plan tfoot td,table.plan tfoot th{position:sticky;bottom:0;z-index:2;background:#d6e4f8;color:#0f3a73;font-weight:700;border-top:2px solid #6f95c9;padding:.45rem .6rem;text-align:left}
table.plan tfoot th.std{left:0;text-align:center;z-index:3}
table.plan tfoot td small{display:block;font-weight:400;color:#274a7a;font-size:.78rem}
table.plan tfoot td.summe{text-align:center;font-size:1.25rem;border-left:2px solid #6f95c9}
table.plan td.zelle.leerbar:hover{background:#dbe8fb;outline:2px solid #3a74c4;outline-offset:-3px}
table.plan td.zelle.leerbar:hover::after{content:"+ Neuer Eintrag";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:.82rem;color:#123e75;pointer-events:none}
.belegung .sus{font-weight:800;color:#0f3a73}
.tagblock-summe{display:inline-block;margin-left:.8rem;font-size:.9rem;font-weight:700;color:#0f3a73;background:#d6e4f8;border-radius:6px;padding:.05rem .5rem}
.tag-block h2{display:flex;align-items:center;flex-wrap:wrap}

/* Stundenkorb */
.ablage.korb{border-style:solid;border-color:#8aa89b;background:#f4faf7}
.ablage.korb.angeheftet{position:sticky;top:0;z-index:30;box-shadow:0 6px 16px rgba(20,40,30,.18)}
.ablage.korb>summary .zahl{font-weight:600}
.korb-werkzeug{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.6rem}
.korb-werkzeug .raum{flex:1}
.korb-werkzeug input[type=search]{width:12rem}
.korb-scroll{overflow:auto;max-height:min(42vh,24rem);padding-bottom:.3rem}
.korb-reihe{display:flex;gap:1.1rem;align-items:flex-start;min-width:min-content}
.korb-abschnitt{flex:0 0 auto;background:#fff;border:1px solid var(--linie);border-radius:10px;padding:.5rem .6rem .7rem}
.korb-abschnitt h3{margin:0 0 .45rem;font-size:1rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.korb-abschnitt h3 small{font-weight:600;color:var(--leise);font-size:.8rem}
.korb-teil+.korb-teil{margin-top:.6rem;padding-top:.5rem;border-top:1px dashed var(--linie2)}
.korb-teiltitel{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--leise);margin-bottom:.3rem}
.korb-kacheln{display:grid;grid-template-columns:6.4rem;gap:.45rem}
.korb-kacheln.zwei{grid-template-columns:repeat(2,6.4rem)}
.korb-kacheln.drei{grid-template-columns:repeat(3,6.4rem)}
.korb-kachel{display:flex;flex-direction:column;gap:.15rem;min-height:7.6rem;padding:.4rem .45rem;border:1.5px solid #6fae94;border-radius:8px;background:#e3f2ec;cursor:grab;font-size:.82rem;line-height:1.2;box-shadow:0 1px 2px rgba(20,40,30,.2);user-select:none}
.korb-kachel:hover{border-color:var(--akzent);box-shadow:0 2px 6px rgba(20,40,30,.3)}
.korb-kachel.zieht{opacity:.4}
.korb-kachel .t{font-size:.95rem;word-break:break-word}
.korb-kachel .u{color:#24453a;font-size:.78rem;word-break:break-word}
.korb-kachel .sus{margin-top:auto;color:#0f3a73}
.korb-kachel .w{font-size:.72rem;color:var(--leise);border-top:1px solid rgba(0,0,0,.12);padding-top:.15rem}
.korb-kachel .w.offen{color:#7a4a00;font-weight:700}
.korb-kachel.offen{border-style:dashed;background:#fff;border-color:#3a74c4}
.korb-kachel.schiene{border-left:5px solid #3b7d66}
.korb-kachel.fremd{background:#eef1f5;border-color:#8795a5}
.korb-leer{padding:1rem;color:var(--leise);max-width:42rem}
.korb-vorschau p{margin:0}
.korb-seite{display:flex;flex-direction:column;height:100vh;padding:.8rem 1rem;gap:.5rem;background:var(--bg)}
.korb-seite.ziel{background:#dff1e9;outline:3px solid var(--akzent);outline-offset:-3px}
.korb-seite .korb-scroll{flex:1 1 auto;max-height:none}
.korb-kopf{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center}
.korb-kopf .marke-klein-wort{font-weight:800;color:var(--akzent-d)}
.korb-kopf .korb-name{width:16rem;font-weight:700;font-size:1.1rem}
.korb-fuss{padding-top:.3rem;border-top:1px solid var(--linie)}
body.korbfenster .fuss,body.korbfenster .toast.leer{display:none}

/* Dialoge mit fester Höhe (Hilfe): kein Springen beim Suchen */
dialog.fenster.hoch[open]{display:flex;flex-direction:column;height:min(84vh,46rem)}
dialog.fenster.hoch .fenster-inhalt{flex:1 1 auto;min-height:0;overflow:auto}
.hilfe-kopf{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.8rem;position:sticky;top:-1.1rem;background:#fff;padding:.3rem 0;z-index:1}
.hilfe-kopf input[type=search]{flex:1 1 16rem;max-width:26rem}
.hilfe .faq h3{margin:1rem 0 .3rem;color:var(--akzent-d)}
.faq summary:hover{color:var(--akzent-d)}

/* Planvarianten */
.plan-abschnitt{margin-bottom:1.6rem}
.plan-abschnitt>h2{display:flex;align-items:baseline;gap:.7rem}
.plan-abschnitt>h2 small{font-weight:400;color:var(--leise);font-size:.9rem}
.schalter{display:inline-flex;align-items:center;gap:.5rem;border:0;background:transparent;cursor:pointer;font-weight:700;padding:.15rem}
.schalter .bahn{position:relative;width:2.6rem;height:1.4rem;border-radius:1rem;background:#aab4bd;transition:background .15s}
.schalter .bahn::after{content:"";position:absolute;top:.15rem;left:.15rem;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;transition:left .15s}
.schalter.an .bahn{background:var(--akzent)}
.schalter.an .bahn::after{left:1.35rem}
.schalter .st{min-width:3.9rem;text-align:left;color:var(--leise)}
.schalter.an .st{color:var(--akzent-d)}
.zeitraum-fehlt{color:var(--rot);font-weight:700}
.plan-anlass{display:block;color:var(--leise);font-size:.85rem;font-weight:400}
tr.inaktiv td{color:#3b4753}

/* Ferien: Mehrfachauswahl */
.massenleiste{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;padding:.5rem .8rem;margin-bottom:.6rem;background:#eef3f8;border:1px solid #c5d8f2;border-radius:8px}
.massenleiste .raum{flex:1}
th.auswahl,td.auswahl{width:2.4rem;text-align:center}

/* Übersicht */
.balken{height:.65rem;background:#dde3e8;border-radius:6px;overflow:hidden}
.balken>i{display:block;height:100%;background:var(--akzent);border-radius:6px}
.balken.warn>i{background:#d38b2c}.balken.voll>i{background:#2c9a6e}
.stand{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem 1.4rem}
.stand-zeile{display:flex;flex-direction:column;gap:.25rem}
.stand-zeile .zk{display:flex;justify-content:space-between;gap:.5rem;font-size:.92rem}
.stand-zeile .zk b{font-weight:700}
.stand-gross{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;margin-bottom:1rem}
.stand-gross .zahl-gross{font-size:2.4rem;font-weight:800;line-height:1;color:var(--akzent-d)}
.stand-gross .balken{flex:1 1 16rem;height:.9rem}

/* Statusampel und Vorschau (Zentrale) */
.ampel{display:inline-flex;align-items:center;gap:.5rem;font-weight:600}
.ampel i{width:1rem;height:1rem;border-radius:50%;background:#aab4bd;display:inline-block;box-shadow:inset 0 0 0 2px rgba(0,0,0,.12)}
.ampel.gruen i{background:#2c9a6e}.ampel.gelb i{background:#e2a400}.ampel.rot i{background:#c0392b}
.ampel.gruen{color:#0d4a37}.ampel.gelb{color:#6d4a00}.ampel.rot{color:#7a1a12}
.vorschau-box{margin-top:.5rem;padding:.6rem .8rem;border:1px dashed var(--linie2);border-radius:8px;background:#fafbfc}
.vorschau-box .titel{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--leise);margin-bottom:.3rem}
.uebernommen,mark.uebernommen{background:#fff3b0;border-radius:3px;padding:0 .1rem}
p.uebernommen{padding:.1rem .3rem}
.fenster-inhalt p,.rechtvorschau p{line-height:1.5;margin:0 0 .7rem}
.rechtvorschau h3{margin:1rem 0 .3rem}
.rechtvorschau{white-space:normal}
.rechtvorschau p,.fenster-inhalt .rechtvorschau p{white-space:pre-line}

.fusszeile-vorschau{font-weight:600;word-spacing:.1rem}
.fusszeile-vorschau u{color:var(--akzent)}


/* ===== Runde 2026.1.7 ===== */
/* Menü: Oberpunkte, Unterpunkte und Bereiche deutlich getrennt, einklappbar */
.nav-gruppe{margin-top:.9rem;padding-top:.65rem;border-top:1px solid rgba(255,255,255,.18)}
.nav-gruppe.ohne-titel{margin-top:.2rem;padding-top:0;border-top:0}
.nav-titel{color:#fff;font-size:.8rem;font-weight:800;letter-spacing:1.5px;padding:.4rem .7rem;background:rgba(255,255,255,.07)}
.nav-titel .pfeil{border-top-color:var(--side-mark)}
.nav-liste{margin:.25rem 0 0 .7rem;padding-left:.3rem;border-left:2px solid rgba(255,255,255,.18)}
.nav-gruppe.ohne-titel .nav-liste{margin-left:0;padding-left:0;border-left:0}
.nav-unter{padding:.6rem .7rem .15rem;font-size:.72rem;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.55)}
.nav-unter:first-child{padding-top:.2rem}
.marke-mini{display:none;text-align:center;font-size:1.5rem;font-weight:800;color:#fff;margin:.1rem 0 .8rem}
.marke-mini b{color:var(--side-mark)}
.menue-knopf svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:901px){
  .leiste,.arbeitsflaeche{transition:width .18s,margin-left .18s}
  body.leiste-zu .leiste{width:68px;padding:1rem .45rem}
  body.leiste-zu .arbeitsflaeche{margin-left:68px}
  body.leiste-zu .marke,body.leiste-zu .schulmarke,body.leiste-zu .leiste-fuss .ich,body.leiste-zu .nav-unter,body.leiste-zu .nav-titel,body.leiste-zu .nav-punkt .txt{display:none}
  body.leiste-zu .marke-mini{display:block}
  body.leiste-zu .nav-gruppe{margin-top:.5rem;padding-top:.5rem}
  body.leiste-zu .nav-gruppe.zu .nav-liste{display:block}
  body.leiste-zu .nav-liste{margin-left:0;padding-left:0;border-left:0}
  body.leiste-zu .nav-punkt,body.leiste-zu .nav-punkt.gross{justify-content:center;padding:.65rem 0;position:relative;border-left-width:0}
  body.leiste-zu .nav-punkt .zahl{position:absolute;top:1px;right:3px;font-size:.62rem;padding:0 .3rem;margin:0}
  body.leiste-zu .leiste-fuss{padding:.8rem 0 0}
}

/* Kopfzeile: Standort und Schuljahr */
.kopf .pfad{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .5rem;font-size:1.02rem}
.kopf .pfad .krume{font-weight:600;color:var(--leise)}
.kopf .pfad .krume.hier{font-weight:800;color:var(--ink)}
.kopf .pfad .trenn{color:#8a97a3;font-weight:400}
.schuljahr-chip{display:inline-flex;align-items:center;gap:.5rem;background:var(--akzent-h);color:var(--akzent-d);border:1.5px solid var(--akzent);border-radius:999px;padding:.25rem .9rem .25rem .7rem;font-size:.92rem;font-weight:600;white-space:nowrap}
.schuljahr-chip svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.schuljahr-chip b{font-size:1.08rem;font-weight:800;letter-spacing:.2px}

/* Quickinfo */
.hb-tip{position:fixed;left:0;top:0;z-index:10000;max-width:min(24rem,calc(100vw - 12px));background:#1c2a35;color:#fff;font-size:.82rem;line-height:1.35;padding:.32rem .6rem;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.35);pointer-events:none;white-space:pre-line;opacity:0;visibility:hidden;transition:opacity .1s}
.hb-tip.an{opacity:1;visibility:visible}

/* Sortierbare Tabellen */
th.sortierbar{cursor:pointer;user-select:none}
th.sortierbar::after{content:"\2195";margin-left:.4rem;opacity:.3;font-size:.85em}
th.sortierbar:hover{background:#eef3f1}
th.sortierbar:hover::after{opacity:.75}
th.sortierbar[aria-sort]{background:#e4f1ec}
th.sortierbar[aria-sort=ascending]::after{content:"\25B2";opacity:1;color:var(--akzent-d)}
th.sortierbar[aria-sort=descending]::after{content:"\25BC";opacity:1;color:var(--akzent-d)}
th.sortierbar:focus-visible{outline:3px solid #7fb9a3;outline-offset:-3px}
td.wdh{color:#6b7783;font-weight:400}

/* PDF speichern und Drucken: dezent in der Fußzeile */
.fuss .druck-slot{display:inline-flex;align-items:center;flex-wrap:wrap;margin-left:.4rem;padding-left:.8rem;border-left:1px solid var(--linie2)}
.fuss .druck-slot:empty{display:none}
.fuss .druck-label{font-size:.8rem;margin-right:.2rem}
.fuss .druck-slot .knopf{min-height:0;border:0;background:none;box-shadow:none;padding:.3rem .7rem;font-size:inherit;font-weight:600;color:var(--leise);border-radius:999px}
.fuss .druck-slot .knopf:hover{background:var(--akzent-h);color:var(--akzent-d)}

/* Kachelanzeige im Sportplan und Verbindungslinien */
.kachelleiste{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;margin:0 0 .9rem;padding:.5rem .8rem;background:#fff;border:1px solid var(--linie);border-radius:10px}
.kachelleiste .kl-titel{font-weight:700}
.kachelleiste .kl-hinweis{color:var(--leise);font-size:.84rem;flex:1 1 14rem}
.beispielkachel{display:inline-flex;flex-direction:column;gap:.05rem;min-width:12rem;padding:.25rem .45rem .3rem;border-radius:7px;background:#e3f2ec;border:1.5px solid #6fae94;box-shadow:0 1px 1px rgba(20,40,30,.18)}
.kt{display:inline-flex;align-items:center;gap:.3rem;border:1px dashed transparent;background:transparent;font:inherit;cursor:pointer;padding:.08rem .3rem;border-radius:5px;color:#1b3b30;transition:opacity .12s}
.kt svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.kt:hover{background:rgba(255,255,255,.75);border-color:#6fae94}
.kt:not(.an){opacity:.3}
.kt.titel{font-weight:800;font-size:.92rem}
.kt-zeile{display:flex;flex-wrap:wrap;gap:.1rem}
.kt.aussen{border:1px solid var(--linie2);background:#fff;padding:.3rem .65rem;border-radius:8px;color:#235544;font-weight:600}
.kt.aussen:hover{border-color:var(--akzent)}
.plan-huelle{position:relative}
.ketten{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:1}
.kette-linie{position:absolute;height:2px;background:#2b6e57;border-radius:1px}
.kette-glied{position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;border:1.5px solid #2b6e57;color:#2b6e57;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.kette-glied svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kette-glied.klein{width:12px;height:12px;border-width:1px}
.kette-glied.klein svg{width:7px;height:7px}
.plan-legende .kette-symbol{display:inline-flex;vertical-align:middle;width:1.1rem;height:1.1rem;border-radius:50%;border:1.5px solid #2b6e57;color:#2b6e57;align-items:center;justify-content:center;margin-right:.35rem;background:#fff}
.plan-legende .kette-symbol svg{width:.65rem;height:.65rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.belegung{padding:.25rem .4rem}
.belegung b{font-size:.9rem;line-height:1.15}
.belegung .lk{display:block;margin-top:.1rem;font-size:.78rem;color:#1f3f34}
@media (max-width:720px){.kachelleiste{display:none}}
@media print{.ketten{display:none}}

/* Demo-Zugang: nur ansehen */
.demo-band{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem .6rem;padding:.4rem 1.6rem;background:#e8f1fb;border-bottom:1px solid #b9d0ee;color:#123e75;font-size:.92rem}
.demo-band svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.demo-aus{opacity:.45;cursor:not-allowed!important}
input.demo-aus,select.demo-aus,textarea.demo-aus{background:#eef1f4}
body.demo td.zelle.leerbar{pointer-events:none}
body.demo .belegung{cursor:default}

/* Dialoge: alles auf einen Blick, wenig Scrollen */
dialog.fenster{max-height:calc(100vh - 1rem)}
dialog.fenster.breit{width:min(1040px,calc(100vw - 1rem))}
.fenster-kopf{padding:.7rem 1.1rem}
.fenster-inhalt{padding:.8rem 1.1rem}
.fenster-fuss{padding:.6rem 1.1rem}
.fenster-inhalt .formular{gap:.6rem}
.fenster-inhalt label.feld{gap:.15rem}
.fenster-inhalt h3{margin:.4rem 0 .3rem}
.fenster-inhalt textarea{min-height:0}
.flaechenwahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.45rem .8rem;max-height:none;overflow:visible;padding:.5rem .6rem}
.flaechenwahl .gruppe{align-content:flex-start;gap:.15rem .8rem}
.vorschlaege{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.1rem}
.vorschlaege .v-titel{font-size:.8rem;color:var(--leise);margin-right:.15rem}
.vorschlaege button{border:1px solid var(--linie2);background:#f7faf9;border-radius:14px;padding:.12rem .65rem;font-size:.86rem;cursor:pointer;color:var(--ink)}
.vorschlaege button:hover{border-color:var(--akzent);background:var(--akzent-h);color:var(--akzent-d)}
.feld-klein{font-size:.8rem;color:var(--leise);font-weight:400}

/* Planprüfung: erledigt, ignorieren, Archiv */
.pruef-aktionen{display:flex;gap:.2rem;flex:0 0 auto}
.pruef.archiviert .text{color:#4a5864}
.marke-klein.erledigt{background:#e4f3ec;color:#14634c;border-color:#9bd0b9}
.marke-klein.ignoriert{background:#eceff2;color:#44515d;border-color:#c1cad2}
.archiv-kopf{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.archiv-kopf h2{margin:0}

/* Auswertung */
.auswertung-karte{margin-bottom:1.3rem}
.auswertung-karte>h2{margin-bottom:.2rem}
.auswertung-karte>p.leise{margin-bottom:.6rem}
table.liste.auswertung thead th{background:#e9f1ee;border-bottom:2px solid #9fc4b5;color:#1d3f33;text-transform:none}
table.liste.auswertung tbody tr:nth-child(even) td{background:#fafcfb}
table.liste.auswertung tbody tr:hover td{background:#eef7f3}
table.liste.auswertung tfoot td{background:#e9f1ee;border-top:2px solid #9fc4b5;font-size:1rem}
.abw{display:inline-block;min-width:3.3rem;text-align:center;border-radius:6px;padding:.1rem .5rem;font-weight:800;font-variant-numeric:tabular-nums}
.abw.null{background:#e4f3ec;color:#14634c}
.abw.plus{background:#fde3df;color:#9b1c10}
.abw.minus{background:#fff0c9;color:#7a4a00}
tr.abweichung td:first-child{box-shadow:inset 4px 0 0 #d9534f}
tr.abweichung.minus td:first-child{box-shadow:inset 4px 0 0 #e0a100}
.mini-balken{display:inline-block;vertical-align:middle;width:6rem;height:.55rem;background:#dde3e8;border-radius:5px;overflow:hidden;margin-right:.5rem}
.mini-balken>i{display:block;height:100%;background:var(--akzent)}
.mini-balken.voll>i{background:#d38b2c}
.zahl-stark{font-weight:800}

/* Kachelwerkzeuge verdecken den Titel nicht: Der Titel rückt bei Platzmangel in die nächste Zeile */
.belegung.mit-werkzeug::before{content:"";float:right;width:3.3rem;height:1.45rem}
.plan-huelle.kompakt .belegung.mit-werkzeug::before{display:none}