/* ============================================================
   Projektstunden NRW – Gestaltung

   Bis August 2026 stand diese Datei als <style>-Block in der
   index.html – 200 Zeilen, die bei jedem Seitenaufruf mitgeladen
   wurden und sich nicht zwischenspeichern ließen. Die index.html war
   dadurch 44 KB groß; euer eigener Router-Kommentar nennt ein
   63-KB-Limit des Uberspace-Proxys.

   Farben, Radien und Schriften kommen aus dem Modul `hornse/ci-css`
   (vendored unter frontend/vendor/ci-css/).

   ENTFERNT: Der @import von fonts.googleapis.com. Bei jedem Aufruf
   ging damit die IP-Adresse der Nutzerin an einen Google-Server –
   bei einer Anwendung, in der sich Schüler:innen anmelden, ein
   Datenschutzproblem (vgl. LG München I, Az. 3 O 17493/20).
   DM Sans ist der Systemschrift gewichen, wie in der übrigen Reihe.

   REGEL: Kein Farbwert ohne Token. Fehlt hier eine Farbe, gehört sie
   ins Modul – nicht hierher. Ausgenommen sind die Kategorienpaletten
   für Bewertungsstufen und Importzustände im :root-Block.

   Die Klassennamen sind unverändert geblieben.

   SPDX-License-Identifier: GPL-3.0-or-later
   ============================================================ */

:root{
  /* ---- Abbildung auf die gemeinsamen Tokens ----------------
     Farben, Radien und Schriften kommen aus hornse/ci-css
     (vendored unter frontend/vendor/ci-css/). Die gewachsenen
     Variablennamen bleiben, damit keine der rund 200 Regeln
     angefasst werden muss. */
  --bg:var(--ci-grund);
  --surface:var(--ci-flaeche);
  --surface2:var(--ci-flaeche-2);
  --border:var(--ci-linie);
  --border2:var(--ci-linie-stark);

  --text:var(--ci-text);
  --text2:var(--ci-text-blass);
  /* --text3 stand auf #9d9c94 und erreichte gegen Weiß nur 2.76,
     gegen den Hintergrund 2.51 – weit unter den geforderten 4.5.
     Betroffen war fast jede erklärende Zeile der Anwendung:
     Untertitel, Abschnittsbeschriftungen, Kennzahlen-Erklärungen,
     Metazeilen, Leerzustände. --ci-text-schwach erreicht 4.62. */
  --text3:var(--ci-text-schwach);

  --accent:var(--ci-akzent);
  --accent-bg:var(--ci-akzent-flaeche);
  --accent-text:var(--ci-akzent-text);
  /* --nav-bg ist entfallen (E62). Es wurde definiert, aus den Einstellungen
     beschrieben und nirgends gelesen -- die Leiste faerbt sich aus der
     vendorten Huelle. Wer sie kuenftig faerben will, faengt hier an. */

  --warn-bg:var(--ci-warnung-flaeche);
  --warn:var(--ci-warnung);
  --danger-bg:var(--ci-fehler-flaeche);
  --danger:var(--ci-fehler);
  /* --ok ist das Gegenstueck zu --danger und fehlte: Neun Stellen im
     Frontend verwendeten var(--ok) und var(--err), ohne dass es eine
     Definition gab -- der Text erbte dann seine Farbe, statt gruen oder
     rot zu sein. --err ist ersatzlos entfallen (--danger sagt dasselbe);
     --ok bekommt hier seine Definition, weil es kein Gegenstueck gab.
     Nicht die Importpalette: --imp-neu erreicht als Text auf der weissen
     Karte nur 4.19, --ci-erfolg 5.17. Die Palette ist fuer Balken. */
  --ok:var(--ci-erfolg);
  --info-bg:#e8f0fb;
  --info:#1a3d6e;

  --r:var(--ci-radius);
  --rl:var(--ci-radius-gross);

  /* ---- Projekteigene Werte --------------------------------
     Bewertungsstufen und Importzustände sind Kategorienpaletten,
     die nur diese Anwendung braucht. Alle erreichen auf ihrer
     jeweiligen Fläche den WCAG-Kontrast AA. */
  --bew-1:#b91c1c; --bew-1-bg:#fee2e2;
  --bew-2:#b45309; --bew-2-bg:#fef3c7;
  --bew-3:#065f46; --bew-3-bg:#d1fae5;
  --bew-4:#1e40af; --bew-4-bg:#dbeafe;
  /* --imp-neu faerbt heute den erreichten Sollstand im Stundenkontingent
     (.pok, .dok) und das Wort "gruen" in der Hilfe. --imp-upd und
     --imp-err sind mit dem toten .imp-*-Block entfallen; ihre letzte
     Verwendung stand dort. */
  --imp-neu:#3d8b50;

  /* Phasen des Kompetenzkatalogs. Eine Kategorienpalette, die nur dieses
     Projekt braucht -- die Schulphasen des G9-Kernlehrplans gibt es in
     keinem anderen. Deshalb hier und nicht in ci-tokens.css: Das ist
     vendored und wird nach REIHENREGELN 6 nur in der Quelle geaendert.
     REIHENREGELN 7 sieht diesen Fall ausdruecklich vor.

     Bis zum 10.09.2026 standen diese sieben Werte in app.js, wo die
     Rohfarbenpruefung sie nie gesehen hat.

     Je Phase ZWEI Werte: der Ton fuer Punkt und Kante, die Flaeche fuer
     das Etikett. Die Flaeche ist derselbe Ton mit 20 % Deckung (33 = 51
     von 255). Frueher entstand sie durch Anhaengen von "33" an den
     Hexwert -- mit einer Variablen ginge das still schief, denn
     var(--x)33 ist keine gueltige Angabe.

     Die Reihenfolge folgt der Schullaufbahn und ist die Reihenfolge der
     Tabs; sie steht aber in KAT_PHASEN (app.js), nicht hier. */
  --phase-erprobungsstufe:#93c5fd;          --phase-erprobungsstufe-bg:#93c5fd33;
  --phase-sek1-uebergreifend:#5eead4;       --phase-sek1-uebergreifend-bg:#5eead433;
  --phase-erste-stufe:#86efac;              --phase-erste-stufe-bg:#86efac33;
  --phase-zweite-stufe:#fde047;             --phase-zweite-stufe-bg:#fde04733;
  --phase-einfuehrungsphase:#fdba74;        --phase-einfuehrungsphase-bg:#fdba7433;
  --phase-qualifikationsphase-gk:#fca5a5;   --phase-qualifikationsphase-gk-bg:#fca5a533;
  --phase-qualifikationsphase-lk:#c4b5fd;   --phase-qualifikationsphase-lk-bg:#c4b5fd33;

  --schleier:rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}

/* Sprungmarke: Ohne sie muss sich jede Tastaturbedienung bei jedem
   Ansichtswechsel erst durch die Navigation arbeiten. */
.skip-link{position:absolute;left:-9999px;background:var(--surface);
  color:var(--accent);padding:10px 16px;border-radius:var(--r);z-index:200}
.skip-link:focus{left:12px;top:12px;outline:3px solid var(--accent);outline-offset:2px}

/* Der Inhaltsbereich ist Sprung- und Fokusziel. Bewusst OHNE
   sichtbaren Rahmen: Der Fokus wird programmatisch gesetzt, niemand
   ist per Tastatur dorthin navigiert - ein Rahmen um den halben
   Bildschirm wäre nur verwirrend. */
main:focus,main:focus-visible{outline:none}
body{font-family:var(--ci-schrift);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
/* .shell und die eigene main-Breite sind entfallen: Das uebernimmt
   ci-shell.css (.ci-huelle, .ci-inhalt, .ci-inhalt-innen). Zwei
   ineinandergeschachtelte Flex-Huellen wuerden sich in die Quere
   kommen. */
nav{padding:12px 10px;flex:1}

h1{font-size:22px;font-weight:500;margin-bottom:4px}
h2{font-size:15px;font-weight:500;margin-bottom:12px}
.sub{font-size:13px;color:var(--text3);margin-bottom:24px}
.sec{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text3);margin:20px 0 10px}
.sec:first-child{margin-top:0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:18px 20px;margin-bottom:12px}
label{font-size:12px;color:var(--text2);display:block;margin-bottom:4px;margin-top:12px;font-weight:500}
label:first-child{margin-top:0}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--border2);border-radius:8px;background:var(--bg);color:var(--text);font-size:13px;font-family:var(--ci-schrift);outline:none;transition:border .15s}
/* Kästchen sind keine Eingabefelder.

   Die Regel darüber gilt für `input` ohne Ansehen des Typs -- also auch für
   Kästchen und Radioknöpfe. `width:100%` macht aus einem Kästchen einen
   Balken: In der Rückmeldungsansicht wurde das Kästchen "Sofort für Schüler
   sichtbar" 348 statt 13 Pixel breit (in Chrome gemessen, nicht geschätzt)
   und schob seine Beschriftung an den Kartenrand.

   16px ist keine neue Festlegung, sondern die, die das Projekt an zwei
   Stellen von Hand getroffen hatte -- im Details-Modal und in der
   Empfängerliste stand dort `width:16px;height:16px` im style-Attribut. Die
   beiden Angaben sind mit dieser Regel entfallen; sie sagten dasselbe, nur
   dreimal. Ohne Angabe wäre ein Kästchen 13px breit; 16 ist die Größe, die
   im Bestand schon sichtbar war.

   `padding:0` ist heute wirkungslos: Solange `appearance:auto` gilt, ignoriert
   die Darstellung jede Polsterung -- auch mit `!important`, gemessen. Die
   Angabe steht als Schutz für den Tag, an dem jemand `appearance:none` setzt,
   um Kästchen selbst zu zeichnen; dann gälte `padding:8px 10px` von oben
   plötzlich doch. */
input[type=checkbox],input[type=radio]{width:16px;height:16px;padding:0;flex-shrink:0;cursor:pointer}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:var(--surface)}
textarea{resize:vertical;min-height:66px}
select[multiple]{height:100px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:8px;font-size:13px;font-weight:500;font-family:var(--ci-schrift);cursor:pointer;transition:all .15s;border:1px solid var(--border2);background:var(--surface);color:var(--text)}
.btn:hover{background:var(--surface2)}
.btn-p{background:var(--accent);color:var(--surface);border-color:var(--accent)}
.btn-p:hover{background:var(--ci-akzent-text)}
.btn-sm{padding:4px 11px;font-size:12px}
.btn-d{color:var(--danger);border-color:var(--danger);background:var(--danger-bg)}
.btn-full{width:100%;justify-content:center;margin-top:14px}
.screen{display:none}.screen.on{display:block}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px}
.stat-v{font-size:24px;font-weight:500}
.stat-l{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-top:2px}
.filter-bar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.filter-bar select{width:auto;min-width:140px}
.s-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);margin-bottom:10px}
.s-hdr{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .15s;border-radius:var(--rl)}
.s-hdr:hover{background:var(--surface2)}
.s-hdr.op{border-radius:var(--rl) var(--rl) 0 0;border-bottom:1px solid var(--border)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-bg);color:var(--accent-text);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.s-name{font-weight:500;font-size:14px}
.s-meta{font-size:12px;color:var(--text3)}
.chevron{margin-left:auto;color:var(--text3);transition:transform .2s;font-size:16px}
.chevron.op{transform:rotate(180deg)}
.s-body{display:none;padding:14px 16px}
.s-body.op{display:block}
.f-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.f-lbl{font-size:12px;color:var(--text2);width:110px;flex-shrink:0}
.f-nums{font-size:12px;font-family:var(--ci-schrift-mono);min-width:68px;flex-shrink:0;color:var(--text2)}
.pbar{height:5px;border-radius:3px;background:var(--border);overflow:hidden;flex:1}
.pfill{height:100%;border-radius:3px;transition:width .4s}
/* Zwei Zustaende, nicht vier (E60): Soll erreicht oder nicht. `.pwarn` und
   `.pover` sind mit der 40-Prozent-Grenze und der Rotfaerbung ueber Soll
   entfallen -- sie wurden danach nirgends mehr gesetzt, und eine Regel, die
   niemand trifft, ist eine falsche Auskunft ueber den Bestand (E55). */
.pok{background:var(--imp-neu)}.pnone{background:var(--border2)}
.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;display:inline-block}
.dok{background:var(--imp-neu)}.dnone{background:var(--border2)}
.k-sum{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.k-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.pill{font-size:11px;padding:3px 10px;border-radius:99px;background:var(--accent-bg);color:var(--accent-text);font-weight:500}
.pill.mkr{background:var(--info-bg);color:var(--info)}
.pill.ma{background:var(--warn-bg);color:var(--warn)}
/* Kompetenz-Auswahl im Formular */
.komp-section{margin-top:6px}
.rahmen-tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.rtab{padding:5px 13px;border-radius:99px;font-size:12px;border:1px solid var(--border2);background:var(--surface);color:var(--text2);cursor:pointer;font-family:var(--ci-schrift)}
.rtab.on{background:var(--accent);color:var(--surface);border-color:var(--accent);font-weight:500}
.rtabs{display:flex;gap:6px;flex-wrap:wrap}
.ptab{padding:5px 13px;border-radius:99px;font-size:12px;border:1px solid var(--border2);background:var(--surface);color:var(--text2);cursor:pointer;font-family:var(--ci-schrift);display:inline-flex;align-items:center;gap:6px}
.ptab .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.ptab.on{border-color:var(--text2);color:var(--text);font-weight:600;box-shadow:inset 0 0 0 1px var(--text2)}
.kat-card-phase{border-left:4px solid var(--border2)}
.bereich-block{margin-bottom:12px}
.bereich-title{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px}
.komp-grid{display:flex;flex-wrap:wrap;gap:5px}
.komp-lbl{padding:4px 11px;border-radius:99px;font-size:12px;border:1px solid var(--border2);background:var(--surface);color:var(--text2);cursor:pointer;user-select:none;transition:all .12s}
/* Hierarchische Kompetenzerwartungen */
.komp-eltern-row{display:flex;align-items:center;gap:6px;margin-bottom:3px;width:100%}
.komp-eltern-toggle{background:none;border:none;cursor:pointer;font-size:11px;color:var(--text3);padding:0 2px;line-height:1;flex-shrink:0;transition:color .12s}
.komp-eltern-toggle:hover{color:var(--accent)}
.komp-erwartungen{display:none;padding-left:22px;margin-bottom:6px;flex-wrap:wrap;gap:4px}
.komp-erwartungen.open{display:flex}
.komp-pill{display:inline-flex;align-items:center;cursor:pointer;user-select:none}
.komp-pill input[type=checkbox]{display:none}
.komp-pill .pill-label{padding:4px 11px;border-radius:99px;font-size:12px;border:1px solid var(--border2);background:var(--surface);color:var(--text2);cursor:pointer;transition:all .12s}
.komp-pill input:checked + .pill-label{background:var(--accent);color:var(--surface);border-color:var(--accent);font-weight:500}
.komp-pill.erw .pill-label{font-size:11px;padding:3px 9px;border-style:dashed;color:var(--text3)}
.komp-pill.erw input:checked + .pill-label{background:var(--info-bg);color:var(--info);border-color:var(--info);border-style:solid}
/* Teilnehmerauswahl in Anlegen- und Bearbeiten-Ansicht (E34, E35).
   Kacheln statt `select[multiple]`: Ein Mehrfachauswahlfeld hält seine
   Auswahl im DOM, und die Kandidatenliste wird bei jedem Klassenwechsel neu
   gezeichnet -- genau der Verlust, den E33 beschreibt. */
.teiln-kopf{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.teiln-zahl{font-size:12px;color:var(--text2);font-weight:500;margin-right:auto}
.teiln-zahl.ueber{color:var(--danger);font-weight:600}
.teiln-gruppe{margin-bottom:10px}
.teiln-gruppe-titel{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px}
.teiln-grid{display:flex;flex-wrap:wrap;gap:5px}
.teiln-pill{display:inline-flex;align-items:center;cursor:pointer;user-select:none}
.teiln-pill input[type=checkbox]{display:none}
.teiln-pill .pill-label{padding:4px 11px;border-radius:99px;font-size:12px;border:1px solid var(--border2);background:var(--surface);color:var(--text2);cursor:pointer;transition:all .12s}
.teiln-pill input:checked + .pill-label{background:var(--accent);color:var(--surface);border-color:var(--accent);font-weight:500}
.teiln-pill .warn-punkt{color:var(--warn);margin-left:4px}
.teiln-pill input:checked + .pill-label .warn-punkt{color:var(--surface)}
/* Fach-Stunden-Grid */
.fach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:6px}
.fach-item{display:flex;flex-direction:column;gap:3px}
.fach-item span{font-size:11px;color:var(--text2);font-weight:500}
.fach-item input{padding:5px 8px;font-size:13px}
/* Projekte-Liste */
.proj-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:14px 18px;margin-bottom:10px}
.proj-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.proj-name{font-weight:500;font-size:14px}
.proj-meta{font-size:12px;color:var(--text3);margin-top:2px}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tag-f{font-size:11px;padding:2px 9px;border-radius:99px;background:var(--info-bg);color:var(--info);font-weight:500}
.tag-k{font-size:11px;padding:2px 9px;border-radius:99px;background:var(--accent-bg);color:var(--accent-text);font-weight:500}
.msg{font-size:12px;margin-top:8px;padding:7px 12px;border-radius:8px}
.msg-ok{background:var(--accent-bg);color:var(--accent-text)}
.msg-err{background:var(--danger-bg);color:var(--danger)}
.empty{text-align:center;color:var(--text3);padding:36px 20px;font-size:13px}
/* Die Anmeldemaske liegt seit dem Geruest-Umbau INNERHALB der Huelle.
   min-height statt 100vh: Die Leiste daneben bestimmt jetzt die
   Hoehe, sonst entstuende ein Bildlauf. */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:70vh;background:var(--bg)}
.login-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:36px 40px;width:360px;max-width:95vw}
/* Marke über der Anmeldemaske. */
.login-marke{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.login-marke img{max-height:44px;max-width:64px;object-fit:contain;flex:0 0 auto}
.login-marke h2{margin:0}
.login-marke .sub{margin:2px 0 0}
.login-box h2{font-size:18px;font-weight:500;margin-bottom:4px}
.login-box .sub{margin-bottom:20px}
/* Benutzerverwaltung */
.bu-table{width:100%;border-collapse:collapse;font-size:13px}
.bu-table th{text-align:left;padding:8px 12px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);border-bottom:1px solid var(--border);background:var(--surface2)}
.bu-table td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.bu-table tr:last-child td{border-bottom:none}
.bu-table tr:hover td{background:var(--surface2)}
.rolle-badge{display:inline-block;font-size:11px;padding:2px 9px;border-radius:99px;font-weight:500}
.rolle-admin{background:var(--danger-bg);color:var(--danger)}
.rolle-lehrer{background:var(--accent-bg);color:var(--accent-text)}
.rolle-inaktiv{background:var(--surface2);color:var(--text3)}
.modal-wrap{position:absolute;inset:0;background:var(--schleier);display:flex;align-items:center;justify-content:center;z-index:100;min-height:600px}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:24px 26px;width:460px;max-width:96vw;position:relative}
.modal h2{font-size:16px;font-weight:500;margin-bottom:4px}
.modal-sub{font-size:12px;color:var(--text3);margin-bottom:18px}
.modal-close{position:absolute;top:14px;right:16px;font-size:20px;color:var(--text3);cursor:pointer;border:none;background:none;line-height:1}
.modal-close:hover{color:var(--text)}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.bew-chip{font-size:11px;padding:2px 7px;border-radius:99px;cursor:pointer;border:1px solid transparent;font-weight:500;white-space:nowrap}
.bew-1{background:var(--bew-1-bg);color:var(--bew-1)}.bew-1.on{border-color:var(--bew-1)}
.bew-2{background:var(--bew-2-bg);color:var(--bew-2)}.bew-2.on{border-color:var(--bew-2)}
.bew-3{background:var(--bew-3-bg);color:var(--bew-3)}.bew-3.on{border-color:var(--bew-3)}
.bew-4{background:var(--bew-4-bg);color:var(--bew-4)}.bew-4.on{border-color:var(--bew-4)}
.bew-cell{display:flex;gap:3px;flex-wrap:nowrap}
.bew-table{border-collapse:collapse;font-size:12px;min-width:100%}
.bew-table th{background:var(--surface2);padding:6px 8px;text-align:left;white-space:nowrap;position:sticky;top:0}
.bew-table td{padding:5px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
.bew-table .name-col{position:sticky;left:0;background:var(--surface);z-index:1;white-space:nowrap;min-width:140px}
.rueck-row{padding:10px 0;border-bottom:1px solid var(--border)}
.rueck-row:last-child{border-bottom:none}
.hilfe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:24px}
.hilfe-karte{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:20px;display:flex;gap:14px;align-items:flex-start}
.hilfe-karte-icon{font-size:28px;flex-shrink:0;line-height:1}
.hilfe-karte h4{font-size:14px;font-weight:600;margin-bottom:6px;color:var(--text)}
.hilfe-karte p{font-size:13px;color:var(--text2);line-height:1.6;margin:0}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-frage{width:100%;text-align:left;padding:14px 0;font-size:14px;font-weight:500;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:none;border:none;color:var(--text)}
.faq-antwort{font-size:13px;color:var(--text2);line-height:1.7;padding:0 0 14px;display:none}
.faq-antwort.open{display:block}
.hb-section{margin-bottom:28px}
.hb-section h3{font-size:15px;font-weight:600;margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid var(--accent-bg);color:var(--text)}
.hb-section h4{font-size:13px;font-weight:600;margin:12px 0 4px;color:var(--text)}
.hb-section p,.hb-section li{font-size:13px;color:var(--text2);line-height:1.7}
.hb-section ul,.hb-section ol{padding-left:18px;margin:6px 0}
.hb-table{width:100%;border-collapse:collapse;font-size:12px;margin:10px 0}
.hb-table th{background:var(--surface2);padding:6px 10px;text-align:left;font-weight:600}
.hb-table td{padding:6px 10px;border-bottom:1px solid var(--border)}
.hb-table tr:last-child td{border-bottom:none}
.admin-only{display:none}
.is-admin .admin-only{display:flex}
/* Eine Karte ist ein Block, kein Flex-Container.

   `.is-admin .admin-only` darüber setzt `display:flex`; die
   Navigationsschaltflächen in #admin-gruppe brauchen das und bleiben deshalb
   unangetastet. An #sch-anlegen-card -- dem einzigen `admin-only`-Element,
   das zugleich eine `.card` ist -- stellte dieselbe Regel Überschrift,
   Formularraster und Schaltflächenzeile NEBENeinander statt untereinander.
   Das war der Befund „die Überschrift klebt am Vornamenfeld": Sie klebte
   nicht darüber, sie stand daneben.

   Der Selektor trifft nur, was `card` UND `admin-only` trägt (Spezifität
   0,3,0 gegen 0,2,0) -- die Navigation trägt keine der beiden zusammen.
   `:not([hidden])` steht dabei nach REIHENREGELN 7: Das Attribut hat das
   letzte Wort, und eine `display`-Regel im Projekt-CSS überschriebe es
   sonst. */
.is-admin .card.admin-only:not([hidden]){display:block}
.is-admin .nv-group{display:block}
/* ---- Aufklappbare Administrationsgruppe --------------------
   Untermenues kennt ci-shell.css nicht: Nur projektstunden und
   sprechtag haben welche. Sie bleiben deshalb hier. Die Klasse .nv
   traegt keine eigenen Regeln mehr - sie ist nur noch der Haken, an
   dem app.js die Punkte findet; die Gestaltung kommt aus ci-nav.
   ------------------------------------------------------------ */
.nv-group{display:none}
.nv-group-toggle{width:100%;text-align:left}
.nv-group-toggle.open{background:var(--surface2);color:var(--text);font-weight:500}
.nv-child[aria-current="page"],
.nv[aria-current="page"]{background:var(--accent-bg);color:var(--accent-text);font-weight:500}
.nv-group-toggle.open .nv-chev{transform:rotate(180deg)}
.nv-chev{transition:transform .2s}
.nv-sub{padding-left:8px;border-left:2px solid var(--border);margin-left:12px;margin-top:2px}
.nv-child{font-size:12px;padding:7px 10px;color:var(--text2)}
.nv-child:hover{background:var(--surface2);color:var(--text)}



/* Schuljahr-Karte */
.sj-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:16px 18px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.sj-badge{padding:3px 10px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.04em}
.sj-aktiv{background:var(--accent-bg);color:var(--accent-text)}
.sj-zukuenftig{background:var(--info-bg);color:var(--info)}
.sj-abgeschlossen{background:var(--surface2);color:var(--text3)}
/* Hier standen sieben Regeln fuer eine Zeilenliste der Import-Vorschau
   (.imp-row, .imp-icon und vier Zustandsfarben). Die Vorschau zeichnet
   seit laengerem mit .stat und .sec; keine der Klassen wurde noch
   gesetzt -- nachgesehen in app.js, index.html und im Backend, auch auf
   zusammengesetzte Namen. Eine tote Regel ist eine falsche Auskunft
   ueber den Bestand (E55). Mit ihnen sind --imp-upd und --imp-err
   entfallen, deren letzte Verwendung sie waren. */