/* Notenprogramm – Schuldesign Erna-de-Vries-Schule
   Farben aus dem Logo (Orange · Blau · Grün), Schrift Lexend (Überschriften) + Source Sans 3 (Text),
   lokal aus static/fonts – sonst Segoe UI Variable. Texte erfüllen WCAG-Kontrast 4,5 : 1. */
:root{
  --ink:#1F2A33; --ink-2:#44515B; --muted:#5F6D78; --line:#E3E8EE; --line-2:#CFD8E1;
  --bg:#F3F6FA; --card:#FFFFFF; --soft:#F6F8FB;
  --blue:#2B8FD6; --blue-d:#1D6FAD; --blue-l:#E8F2FB;
  --orange:#F5A31A; --green:#6AB33A; --dark:#2E3A44;
  --g:#2F8A1F; --g-l:#E8F5E1; --y:#D89A00; --y-l:#FFF5D6; --r:#D23C32; --r-l:#FCE9E7;
  --font:"Source Sans 3", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --head:"Lexend", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --rad:10px; --rad-karte:16px;
  /* Schatten-Stufen und Bewegung */
  --sh-1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --sh-2:0 10px 24px -8px rgba(16,24,40,.16), 0 2px 6px rgba(16,24,40,.06);
  --sh-3:0 24px 60px -12px rgba(16,24,40,.28);
  --ring:0 0 0 3px rgba(43,143,214,.35);
  --dauer:.16s; --kurve:cubic-bezier(.2,.7,.2,1);
}

/* Schriften lokal (static/fonts, SIL Open Font License 1.1 – Lizenztexte liegen daneben).
   Keine Verbindung zu Google: nichts wird beim Aufruf nachgeladen. latin + latin-ext (ä ö ü ß, ł ş ğ …) */
@font-face{font-family:"Lexend"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("fonts/lexend-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lexend"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("fonts/lexend-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Source Sans 3"; font-style:normal; font-weight:300 800; font-display:swap;
  src:url("fonts/sourcesans3-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Source Sans 3"; font-style:normal; font-weight:300 800; font-display:swap;
  src:url("fonts/sourcesans3-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Source Sans 3"; font-style:italic; font-weight:400; font-display:swap;
  src:url("fonts/sourcesans3-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Source Sans 3"; font-style:italic; font-weight:400; font-display:swap;
  src:url("fonts/sourcesans3-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
*{box-sizing:border-box}
html,body{margin:0}
body{font:16px/1.45 var(--font); color:var(--ink); background:var(--bg)}
h1,h2,h3{font-family:var(--head); font-weight:400; color:var(--dark); margin:0 0 .5rem}
h1{font-size:1.9rem} h2{font-size:1.4rem} h3{font-size:1.15rem}
a{color:var(--blue-d)}
.leise{color:var(--muted)}
.hidden{display:none !important}

/* Kopf */
.kopf{background:#fff; position:sticky; top:0; z-index:10; box-shadow:0 1px 0 var(--line)}
.kopf-in{max-width:1400px; margin:0 auto; padding:.6rem 1.5rem; display:flex; align-items:center; gap:1.5rem}
.kopf .logo img{height:46px; display:block}
.kopf-titel{display:flex; flex-direction:column; line-height:1.15; border-left:1px solid var(--line); padding-left:1.25rem}
.kopf-titel small{color:var(--muted); font-size:.85rem}
.kopf-titel span{font-family:var(--head); font-size:1.35rem; color:var(--dark)}
.kopf-nav{display:flex; gap:.25rem; margin-left:1rem}
.kopf-nav a{padding:.35rem .8rem; border-radius:8px; text-decoration:none; color:var(--ink-2); white-space:nowrap; display:flex; flex-direction:column; line-height:1.2}
.nav-titel{font-size:1rem}
.nav-info{font-size:.74rem; color:var(--muted); font-weight:normal; white-space:normal; max-width:11.5rem}
.kopf-in{max-width:none}
.kopf-titel span{font-size:1.15rem}
@media (max-width:1350px){ .zahnrad .nav-info{display:none} }
@media (max-width:1300px){ .kopf-titel small,.kopf-titel > span{display:none} .kopf-titel{padding-left:.8rem} }
/* Halbjahr wählen (Rückblick) */
.halbjahr-wahl{font-family:var(--head); font-size:1.1rem; color:var(--dark); border:1px solid transparent; border-radius:8px;
  background:transparent; padding:.1rem .3rem; margin-left:-.35rem; cursor:pointer; max-width:15rem}
.halbjahr-wahl:hover,.halbjahr-wahl:focus{border-color:var(--line-2); background:#fff}
.halbjahr-wahl.rueckblick{background:#FFF4D6; border-color:#E8C46A; color:#7A5300}
@media (max-width:1300px){ .halbjahr-wahl{font-size:.95rem; max-width:11rem} }
.rueckblick-balken{background:#FFF4D6; border-bottom:1px solid #E8C46A}
.rueckblick-balken .seiten-hilfe-in{color:#6B4A00}
.rueckblick-balken .hilfe-zeichen{background:#C98A00; font-style:normal; font-family:inherit}
.rueckblick-balken .knopf{margin-left:auto; white-space:nowrap}
@media (max-width:1100px){ .kopf-nav .nav-info{display:none} }
.kopf-nav a.aktiv .nav-info,.zahnrad.aktiv .nav-info{color:var(--blue-d)}
/* Hinweiszeile unter dem Kopf: was kann ich auf dieser Seite machen? */
.seiten-hilfe{background:var(--blue-l); border-bottom:1px solid #D3E6F4}
.seiten-hilfe-in{max-width:1400px; margin:0 auto; padding:.55rem 1.5rem; display:flex; align-items:center; gap:.6rem; color:#1C5E8A; font-size:.95rem}
.hilfe-zeichen{flex:0 0 1.3rem; height:1.3rem; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:bold; font-style:italic; font-family:Georgia, serif; font-size:.85rem}
.seiten-hilfe b{color:#174E73}
main{padding-top:1.3rem}
.kopf-titel span,.kopf-nutzer span{white-space:nowrap}
.kopf-in{gap:1.1rem}
.kopf-nav a:hover{background:var(--soft)}
.kopf-nav a.aktiv{background:var(--blue-l); color:var(--blue-d)}
.kopf-nutzer{margin-left:auto; display:flex; align-items:center; gap:.75rem; color:var(--ink-2)}
.kopf-nutzer form{margin:0}
.streifen{display:flex; height:4px} .streifen i{flex:1}
.streifen i:nth-child(1){background:var(--orange)} .streifen i:nth-child(2){background:var(--blue)} .streifen i:nth-child(3){background:var(--green)}

main{max-width:1400px; margin:0 auto; padding:1.75rem 1.5rem 4rem}
.karte{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.25rem 1.5rem; margin-bottom:1.25rem}

/* Knöpfe & Felder */
.knopf{font:inherit; border:1px solid var(--line-2); background:#fff; color:var(--ink); padding:.5rem 1rem; border-radius:var(--rad); cursor:pointer}
.knopf:hover{border-color:var(--blue)}
.knopf.haupt{background:var(--blue); border-color:var(--blue); color:#fff}
.knopf.haupt:hover{background:var(--blue-d)}
.knopf.klein{padding:.3rem .7rem; font-size:.92rem}
.knopf.gefahr{color:var(--r)} .knopf.gefahr:hover{border-color:var(--r)}
input[type=text],input[type=password],input[type=search],select{font:inherit; border:1px solid var(--line-2); border-radius:var(--rad); padding:.5rem .7rem; background:#fff; color:var(--ink)}
input:focus,select:focus,.knopf:focus-visible{outline:2px solid var(--blue); outline-offset:1px}

/* Meldungen */
.meldung{padding:.75rem 1rem; border-radius:var(--rad); margin-bottom:1rem; background:var(--blue-l); color:#1C5E8A}
.meldung.warn{background:var(--y-l); color:#7A5600}
.meldung.fehler{background:var(--r-l); color:#9B2A22}
.testhinweis{position:fixed; right:1rem; bottom:1rem; background:var(--y-l); color:#7A5600; border:1px solid #F1D98A; padding:.4rem .8rem; border-radius:8px; font-size:.9rem}
.toast{position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%); background:var(--dark); color:#fff; padding:.6rem 1.1rem; border-radius:10px; opacity:0; transition:opacity .2s; pointer-events:none}
.toast.an{opacity:1}

/* Anmeldung */
.anmelde-box{max-width:420px; margin:3rem auto}
.anmelde-box label{display:block; margin:.9rem 0 .3rem; color:var(--ink-2)}
.anmelde-box input{width:100%}
.anmelde-box .knopf{width:100%; margin-top:1.25rem; padding:.65rem}
.anmelde-box a.knopf{display:block; text-align:center; text-decoration:none}   /* „Mit IServ anmelden“ ist ein Link */

/* Startseite: Kacheln */
.kacheln{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.1rem}
.kachel{display:block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.3rem; text-decoration:none; color:inherit; border-top:4px solid var(--blue)}
.kachel.art-kurs{border-top-color:var(--orange)}
.kachel:hover{border-color:var(--blue); box-shadow:0 4px 14px rgba(36,49,58,.07)}
.kachel b{display:block; font-family:var(--head); font-weight:400; font-size:1.3rem; color:var(--dark)}
.kachel .leise{font-size:.92rem}
.balken{height:7px; background:var(--line); border-radius:4px; margin:.75rem 0 .3rem; overflow:hidden}
.balken i{display:block; height:100%; background:var(--green)}
.abschnitt-kopf{display:flex; align-items:baseline; gap:1rem; margin:1.5rem 0 .75rem}
.abschnitt-kopf .knopf{margin-left:auto}

/* Einrichtung */
.schritt{display:flex; gap:1rem; align-items:flex-start}
.schritt-nr{flex:0 0 2rem; height:2rem; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:bold}
.fachzeile{display:grid; grid-template-columns:220px 1fr; gap:1rem; padding:.6rem 0; border-top:1px solid var(--line); align-items:center}
.fachzeile:first-of-type{border-top:0}
.fachzeile .fname{font-weight:bold; color:var(--ink-2)}
.fachzeile.hat .fname{color:var(--blue-d)}
.chips{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center}
.chips .jg{color:var(--muted); font-size:.85rem; margin:0 .2rem 0 .6rem}
.chips .jg:first-child{margin-left:0}
.chip{font:inherit; border:1px solid var(--line-2); background:#fff; border-radius:999px; padding:.25rem .8rem; cursor:pointer; min-width:3.2rem}
.chip:hover{border-color:var(--blue)}
.chip.an{background:var(--blue); border-color:var(--blue); color:#fff}
.chip small{margin-left:.35rem; font-size:.75rem; color:var(--muted)}
.chip.an small{color:#DCEEFA}
.chip.belegt:not(.an){border-style:dashed}
.kurs-team{display:flex; flex-wrap:wrap; gap:.4rem .8rem; align-items:center; margin:.6rem 0}
.filterleiste{display:flex; gap:.75rem; align-items:center; margin-bottom:.75rem}
.kursliste{display:grid; gap:.6rem}
.kurs{display:flex; align-items:center; gap:1rem; padding:.7rem 1rem; border:1px solid var(--line); border-radius:10px; border-left:4px solid var(--orange)}
.kurs .leise{font-size:.92rem}
.kurs .knopf:first-of-type{margin-left:auto}

/* Kurs-Dialog */
dialog{border:0; border-radius:16px; padding:0; width:min(900px,94vw); box-shadow:0 20px 60px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(36,49,58,.45)}
.dlg-kopf{padding:1.1rem 1.5rem; border-bottom:1px solid var(--line)}
.dlg-inhalt{padding:1.1rem 1.5rem; max-height:62vh; overflow:auto}
.dlg-fuss{padding:1rem 1.5rem; border-top:1px solid var(--line); display:flex; gap:.75rem; align-items:center}
.dlg-fuss .knopf:last-child{margin-left:auto}
.formreihe{display:grid; grid-template-columns:1fr 2fr 120px; gap:.75rem; margin-bottom:1rem}
.formreihe label{display:flex; flex-direction:column; gap:.25rem; color:var(--ink-2); font-size:.92rem}
.kinderwahl{columns:3 220px; column-gap:1.5rem}
.kinderwahl h4{margin:.6rem 0 .25rem; color:var(--muted); font-weight:normal; break-after:avoid}
.kinderwahl label{display:flex; gap:.45rem; align-items:center; padding:.15rem 0; break-inside:avoid; cursor:pointer}
.fehlertext{color:var(--r); font-size:.92rem}

/* Notentabelle */
.tabkopf{display:flex; align-items:flex-end; gap:1rem; margin-bottom:1rem}
.tabkopf .rechts{margin-left:auto; display:flex; gap:.6rem; align-items:center}
.status{font-size:.92rem; color:var(--muted)}
.status.ok{color:var(--g)} .status.fehler{color:var(--r)}
.tw{overflow:auto; background:#fff; border:1px solid var(--line); border-radius:14px}
table.noten{border-collapse:collapse; width:100%; font-size:1rem}
table.noten th{position:sticky; top:0; background:var(--soft); color:var(--ink-2); font-weight:bold; text-align:center; padding:.55rem .4rem; border-bottom:1px solid var(--line-2); white-space:nowrap}
table.noten th.links,table.noten td.links{text-align:left; padding-left:1rem}
table.noten td{border-bottom:1px solid var(--line); padding:.25rem .35rem; text-align:center}
table.noten tr:hover td{background:#FAFCFE}
table.noten .gruppe{border-left:2px solid var(--line-2)}
table.noten input{width:3.4rem; text-align:center; padding:.35rem .2rem; border-radius:7px}
table.noten input.lang{width:100%; min-width:12rem; text-align:left; padding:.35rem .5rem}
table.noten input.zeugnis{font-weight:bold; width:3.2rem}
table.noten input.speichert{border-color:var(--y)}
table.noten input.gespeichert{border-color:var(--green); background:var(--g-l)}
table.noten input.falsch{border-color:var(--r); background:var(--r-l)}
table.noten input:disabled{background:var(--soft); color:var(--ink-2); border-color:var(--line)}
table.noten .rechnung{color:var(--ink-2); min-width:3rem}
.vorschlag{display:inline-block; min-width:2.6rem; padding:.15rem .4rem; border-radius:6px; background:var(--blue-l); color:var(--blue-d)}
.abweichung{background:var(--y-l); color:#7A5600}
.klassenmarke{display:inline-block; font-size:.8rem; color:var(--muted); border:1px solid var(--line-2); border-radius:6px; padding:0 .35rem; margin-left:.4rem}
.legende{display:flex; gap:1.5rem; margin-top:.75rem; color:var(--muted); font-size:.92rem; flex-wrap:wrap}
.klein{font-size:.85rem}

/* AV/SV-Stufen A–E (Farben wie im Prototyp) */
:root{--A:#6CB543; --B:#A5CF7E; --C:#2C92D5; --D:#F8AB0F; --E:#D9534F}
.st{display:inline-block; min-width:1.7rem; text-align:center; font-weight:bold; border-radius:6px; padding:0 .3rem}
.st.A{background:var(--A); color:#fff} .st.B{background:var(--B); color:#1f3510} .st.C{background:var(--C); color:#fff}
.st.D{background:var(--D); color:#3d2a00} .st.E{background:var(--E); color:#fff}

/* Ansicht-Umschalter */
.ansichten{display:flex; border:1px solid var(--line-2); border-radius:var(--rad); overflow:hidden; background:#fff}
.ansichten :is(button,a){font:inherit; border:0; background:transparent; padding:.45rem .9rem; cursor:pointer; color:var(--ink-2); text-decoration:none}
.ansichten :is(button,a)+:is(button,a){border-left:1px solid var(--line-2)}
.ansichten :is(button,a)[aria-selected=true]{background:var(--blue); color:#fff}
.tabkopf .rechts{flex-direction:column; align-items:flex-end}

/* Kind für Kind */
.eingabe{display:grid; grid-template-columns:280px 1fr; gap:1.1rem; align-items:start}
.eingabe[hidden]{display:none}
.liste{padding:.4rem; max-height:calc(100vh - 230px); overflow:auto; position:sticky; top:90px; margin:0}
.kind{display:flex; align-items:center; gap:.55rem; width:100%; font:inherit; text-align:left; padding:.45rem .6rem; border-radius:8px; cursor:pointer; border:1px solid transparent; background:transparent; color:inherit}
.kind:hover{background:var(--blue-l)}
.kind.aktiv{background:var(--blue-l); border-color:var(--blue)}
.kind .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kind .nm small{color:var(--muted)}
.kind .wert{font-size:.9rem; color:var(--muted); min-width:2.2rem; text-align:right}
.kind .wert b{color:var(--ink); font-size:1rem}
.punkt{width:10px; height:10px; border-radius:50%; background:var(--line-2); flex:0 0 10px}
.punkt.teil{background:var(--orange)} .punkt.voll{background:var(--green)}
.schuelerkopf{display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; flex-wrap:wrap}
.schuelerkopf .name{font:400 1.7rem var(--head); color:var(--dark); flex:1}
.bereiche{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:1rem}
.bereich{border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem}
.bereich h3{font-size:1rem; font-family:var(--font); font-weight:bold; color:var(--ink-2)}
.feldreihe{display:flex; gap:.4rem; flex-wrap:wrap; align-items:flex-end; margin-top:.3rem}
.nf{display:flex; flex-direction:column; align-items:center; gap:2px}
.nf label{font-size:.8rem; color:var(--muted)}
.nf input{width:3.3rem; text-align:center; font-size:1.1rem; font-weight:bold; padding:.35rem .1rem}
input.ungueltig{border-color:var(--r); background:var(--r-l); color:#8B1E1B}
.schnitt{margin-left:auto; text-align:right; font-size:.8rem; color:var(--muted)}
.schnitt b{display:block; font-size:1.3rem; color:var(--ink)}
.sonst{display:flex; gap:.4rem; align-items:center; margin-bottom:.4rem}
.sonst select{flex:1}
.sonst input{width:3.6rem; text-align:center; font-weight:bold}
.gesamt{display:flex; gap:1.3rem; align-items:center; flex-wrap:wrap; background:var(--blue-l); border-radius:12px; padding:.8rem 1.1rem; margin-top:1rem}
.gesamt .gross{font-size:2.3rem; font-weight:bold; line-height:1; min-width:5rem}
.gesamt .gross small{display:block; font-size:.8rem; font-weight:normal; color:var(--muted); margin-top:.2rem}
.zn{display:flex; gap:.3rem; margin-top:.25rem}
.zn button{font:inherit; width:2.5rem; height:2.5rem; font-size:1.15rem; font-weight:bold; border:1px solid var(--line-2); border-radius:8px; background:#fff; cursor:pointer}
.zn button:hover{border-color:var(--dark)}
.zn button.aktiv{background:var(--dark); color:#fff; border-color:var(--dark)}
.zn button.vorschlag{outline:2px dashed var(--orange); outline-offset:1px}

/* Abschlussprüfung (Jg 10, Hauptschulzweig Jg 9): Teil-Reiter im Schülerbogen und in der Notenübersicht */
.bogen-teile{display:inline-flex; margin-bottom:1rem}
.tab-teile{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.8rem}
.pruef-zeile{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:.5rem 0}
.pruef-titel{min-width:9.5rem; font-weight:bold}
.pruef-zeile .zn{margin-top:0}
.pruef-haken{display:flex; align-items:center; gap:.5rem; margin:.4rem 0 .8rem; font-weight:bold}
.pruef-haken input{width:1.2rem; height:1.2rem}
.zn-wert{font-size:1.6rem; font-weight:bold; line-height:1.2}
.pruef-muendlich{white-space:nowrap}
.pruef-muendlich input[type=checkbox]{width:1.1rem; height:1.1rem; vertical-align:middle}

/* AV/SV in der Kind-Karte */
.avsv-titel{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap}
.avsv-titel h3{margin:0}
.avsv-titel .knopf{margin-left:auto}
.avsv-titel .ansichten,.klassenkopf .ansichten{margin-left:auto; align-self:center}
.klassenkopf .ansichten+.knopfreihe{margin-left:0}

/* Klassenleitung: Zeugnisnoten & AV/SV der ganzen Klasse */
.zn-hinweis{background:var(--blue-l); border-left:4px solid var(--blue); border-radius:0 var(--rad) var(--rad) 0; padding:.7rem 1rem; margin:.4rem 0 .9rem}
.zn-hinweis p{margin:0 0 .6rem; color:var(--ink-2); font-size:.95rem}
.zn-knoepfe{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center}
table.zn-raster td{padding:.2rem .15rem}
table.zn-raster td.zn-name{white-space:nowrap; padding-right:.8rem}
table.zn-raster th{font-size:.82rem}
table.zn-raster tr.zn-uebernehmen th{top:2.3rem; padding:.15rem .1rem; background:var(--soft)}
table.zn-raster tr.zn-uebernehmen .knopf.mini{font-size:.7rem; padding:.1rem .35rem; text-transform:none; letter-spacing:0}
table.zn-raster input.zn{width:2.3rem; min-height:2rem; padding:.2rem 0; font-size:1.05rem; font-weight:400}
table.zn-raster input.zn::placeholder{color:#9AA6B2; font-style:italic}
table.zn-raster input.zn.fest{font-weight:700; color:var(--ink)}
table.zn-raster input.zn.zn-schlecht{background:var(--r-l); border-color:#EDB4AE}
table.zn-raster input.zn.zn-schlecht.fest{color:#9B241B}
table.zn-raster input.zn.zn-gut.fest{color:var(--g)}
table.zn-raster input.zn:focus{outline:none; box-shadow:var(--ring); border-color:var(--blue)}
table.zn-raster select.zn-avsv{min-width:4.2rem; padding:.25rem .2rem; border-radius:7px; border:1px solid var(--line-2); color:var(--muted); font-style:italic}
table.zn-raster select.zn-avsv.fest{font-style:normal; font-weight:700; color:var(--ink)}
table.zn-raster select.zn-avsv.st-A{background:var(--A); color:#fff} table.zn-raster select.zn-avsv.st-B{background:var(--B); color:#1f3510}
table.zn-raster select.zn-avsv.st-C{background:var(--C); color:#fff} table.zn-raster select.zn-avsv.st-D{background:var(--D); color:#3d2a00}
table.zn-raster select.zn-avsv.st-E{background:var(--E); color:#fff}
table.zn-raster select.zn-avsv option{background:#fff; color:var(--ink); font-style:normal}
.avsv{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:.8rem}
.avsv-kopf{display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem}
.tb{display:flex; align-items:center; gap:.5rem; padding:.22rem .4rem; border-radius:8px}
.tb:focus{outline:2px solid var(--blue); background:var(--blue-l)}
.tb>span{flex:1; font-size:.95rem}
.stufen{display:flex; gap:3px}
.stufen button{font:inherit; width:2.1rem; height:2rem; padding:0; font-weight:bold; border-radius:6px; background:#fff; border:2px solid; cursor:pointer}
.stufen button[data-s=A]{border-color:var(--A)} .stufen button[data-s=B]{border-color:var(--B)} .stufen button[data-s=C]{border-color:var(--C)}
.stufen button[data-s=D]{border-color:var(--D)} .stufen button[data-s=E]{border-color:var(--E)}
.stufen button.an[data-s=A]{background:var(--A); color:#fff} .stufen button.an[data-s=B]{background:var(--B); color:#1f3510}
.stufen button.an[data-s=C]{background:var(--C); color:#fff} .stufen button.an[data-s=D]{background:var(--D); color:#3d2a00}
.stufen button.an[data-s=E]{background:var(--E); color:#fff}
.stufen button:disabled{cursor:default; opacity:.8}
.schnell{display:flex; gap:.3rem; align-items:center; margin-top:.5rem; font-size:.88rem}
.knopf.mini{padding:.1rem .5rem; font-size:.85rem; font-weight:bold}

/* AV/SV-Tabelle */
.avsv-tabelle th.tb-kopf{font-size:.78rem; font-weight:normal; white-space:normal; width:4.6rem; line-height:1.15}
.avsv-tabelle input.stufe-feld{width:2.3rem; font-weight:bold; text-transform:uppercase; caret-color:transparent; cursor:pointer}
.avsv-tabelle input.stufe-feld:focus{outline:3px solid var(--dark)}
.avsv-tabelle select{font-size:.88rem; padding:.25rem .3rem}
table.noten a{color:inherit; text-decoration:none}
table.noten a:hover{text-decoration:underline; color:var(--blue-d)}
table.noten select{padding:.3rem}

/* Klassenübersicht */
.klassenwahl{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; padding:.9rem 1.2rem}
.klassenwahl .jg{color:var(--muted); font-size:.85rem; margin:0 .2rem 0 .8rem}
.klassenwahl .jg:first-child{margin-left:0}
a.chip{text-decoration:none; color:inherit; display:inline-block; text-align:center}
.klassenkopf{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin:.5rem 0 .75rem}
.klassenkopf h2{margin:0}
.klassenkopf label{margin-left:auto}
table.uebersicht td{padding:.4rem .35rem}
table.uebersicht th.fachkopf{min-width:2.8rem; line-height:1.1}
table.uebersicht th.fachkopf small{display:block; font-weight:normal; color:var(--muted); font-size:.72rem}
table.uebersicht th.wpk{background:#FFF7E6}
table.uebersicht tfoot td{border-bottom:0; padding-top:.5rem}
table.uebersicht th.senkrecht{vertical-align:bottom; padding:.5rem .2rem; min-width:2.4rem}
table.uebersicht th.senkrecht span{writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; display:inline-block; text-align:left; font-weight:bold; line-height:1.2}
table.uebersicht th.senkrecht small{font-weight:normal; color:var(--muted)}
table.uebersicht th.wahl{background:#FFF7E6}
table.uebersicht td.offen{background:repeating-linear-gradient(135deg, transparent 0 5px, #F2F4F6 5px 7px)}
tr.klickbar{cursor:pointer}
tr.klickbar.aktiv td{background:var(--blue-l)}
i.vs{color:#B07800}
.ampel5{background:var(--r-l) !important; color:#9B2A22}
span.ampel5{padding:0 .4rem; border-radius:5px}
.detailbogen{margin-top:1.25rem}
.tb-zeile{display:flex; justify-content:space-between; align-items:center; padding:.25rem .4rem; border-bottom:1px solid var(--line)}

/* Meine Klassen: Kopf mit Klassenwahl und Reiter in Gruppen */
.klassen-kopf{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-bottom:.8rem}
.klassen-kopf h1{margin:0}
.klassenwahl-zeile{display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; flex:1}
.klassenwahl-zeile .jg{color:var(--muted); font-size:.82rem; margin:0 .15rem 0 .6rem}
.klassenwahl-zeile .jg:first-child{margin-left:0}
.masken{display:flex; align-items:flex-end; gap:0; margin:0 0 1.1rem; border-bottom:2px solid var(--line)}
.masken-klasse{align-self:center; font-family:var(--head); font-size:1.5rem; color:var(--dark); padding:0 1rem .2rem 0}
.reitergruppe{display:flex; flex-direction:column; border-left:1px solid var(--line); padding-left:.4rem; margin-left:.4rem}
.reitergruppe-titel{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding-left:.7rem}
.reitergruppe-reiter{display:flex}
.masken a{padding:.45rem .85rem .55rem; text-decoration:none; color:var(--ink-2); border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap}
.masken a:hover{color:var(--blue-d)}
.masken a.aktiv{color:var(--dark); border-bottom-color:var(--orange); font-weight:bold}
.masken a:focus-visible,.kopf-nav a:focus-visible,.zahnrad:focus-visible,.todo a:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:6px}

/* Kopfzeile: Zahnrad für die eigenen Fächer und Kurse */
.zahnrad{text-decoration:none; color:var(--ink-2); padding:.3rem .6rem; border-radius:8px; white-space:nowrap; font-size:.92rem; display:flex; flex-direction:column; line-height:1.2}
.zahnrad .nav-titel{font-size:.92rem}
.zahnrad:hover,.zahnrad.aktiv{background:var(--blue-l); color:var(--blue-d)}

/* Startseite: Zu erledigen und Kacheln je Klasse */
.zu-erledigen{border-left:5px solid var(--orange); border-radius:0 14px 14px 0}
.abschnitt-kopf.ohne-rand{margin:0 0 .4rem}
.todo{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:.15rem 1.5rem}
.todo a{display:flex; align-items:center; gap:.6rem; padding:.45rem .5rem; text-decoration:none; color:var(--ink); border-radius:8px}
.todo a:hover{background:var(--soft)}
.todo-marke{flex:0 0 10px; height:10px; border-radius:50%; background:var(--line-2)}
.todo-termin .todo-marke{background:var(--blue)}
.todo-aufgabe .todo-marke{background:var(--orange)}
.todo-noten .todo-marke{background:var(--y)}
.todo-brief .todo-marke{background:#C9443A}
/* Hausaufgabenbriefe in der Hausaufgaben-Ansicht */
.ha-brief-knopf{font-size:.82rem; padding:.15rem .5rem; border-radius:999px; border:1px solid #E0A39E; background:var(--r-l); color:#9B2A22; cursor:pointer; white-space:nowrap}
.ha-brief-knopf.stufe2{background:#9B2A22; color:#fff; border-color:#9B2A22}
.ha-brief-erl{font-size:.8rem; white-space:nowrap; color:var(--ink-2)}
.ha-brief-erl a{color:inherit}
.ha-brief-erl .zurueck{color:#1E7A3C}
.ha-brief-dlg{width:min(560px,94vw)}
.ha-brief-dlg .felder{display:grid; grid-template-columns:auto 1fr; gap:.5rem .8rem; align-items:center; margin:.8rem 0}
.ha-brief-dlg .vorschau{background:#F4F7FA; border-radius:8px; padding:.6rem .8rem; font-size:.9rem}
.ha-brief-dlg .warn{color:#9B2A22}
.todo-pfeil{margin-left:auto; color:var(--muted)}
.klassenzeile{display:grid; grid-template-columns:170px 1fr; gap:1.2rem; align-items:start; padding:.9rem 0; border-top:1px solid var(--line)}
.klassenzeile-kopf{display:flex; flex-direction:column; gap:.2rem; padding-top:.3rem}
.klassenzeile-kopf h3{margin:0; font-size:1.25rem}
.klassenzeile-kopf a{font-size:.9rem}
.klassenzeile .kacheln{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.klassenzeile .kachel{padding:.8rem 1.1rem}
.verwaltung-kacheln{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1rem}
.eingabe.voll{grid-template-columns:1fr}
.eingabe.voll>.liste{display:none}
.kennzahlen{display:flex; gap:.75rem; flex-wrap:wrap; margin:.25rem 0 1rem}
.kz{flex:1 1 150px; background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:.6rem .9rem}
.kz b{display:block; font-size:1.6rem; line-height:1.2}
.kz span{color:var(--muted); font-size:.88rem}
.rot-text{color:var(--r)}
.kz-ampel{text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:.15rem}
.kz-ampel:hover{border-color:var(--blue)}
.kz-ampel-zeile{display:flex; align-items:center; gap:.45rem; font-size:.9rem; color:var(--ink-2)}
.kz-ampel-zeile .ampel{min-width:2.6rem; text-align:center}
.kz-unter{font-size:.78rem; color:var(--muted); margin-top:.1rem}
.avsv.einspaltig{grid-template-columns:1fr; gap:.8rem}
.tendenz{font-size:.85rem; white-space:nowrap}
.tendenz.gut,.gut{color:var(--g)} .tendenz.schlecht{color:var(--r)}
.ampel{display:inline-block; font-size:.82rem; font-weight:bold; padding:.1rem .55rem; border-radius:999px; white-space:nowrap}
.ampel.rot{background:var(--r-l); color:#9B2A22; border:1px solid #F0B7B2}
.ampel.gelb{background:var(--y-l); color:#7A5600; border:1px solid #F1D98A}
.ampel.gruen{background:var(--g-l); color:#2C6E1E; border:1px solid #BFE0B3}
/* Ampel-Symbole als Linien-Symbole (Lucide: Kreis mit !, Auge, Haken) – Farbe kommt vom Text */
.ampel::before{content:""; display:inline-block; width:.95em; height:.95em; margin-right:.3em; vertical-align:-.13em; background:currentColor;
  -webkit-mask:var(--ampel-ik) center/contain no-repeat; mask:var(--ampel-ik) center/contain no-repeat}
.ampel.rot{--ampel-ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E")} .ampel.gelb{--ampel-ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")} .ampel.gruen{--ampel-ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.punkt.ampel-rot{background:var(--r)} .punkt.ampel-gelb{background:var(--y)} .punkt.ampel-gruen{background:var(--green)}
.sprechtag{display:grid; grid-template-columns:minmax(260px,1fr) 1.6fr; gap:1.5rem; align-items:start}
.vergleich tr.zwischen td{background:var(--soft); font-weight:bold; color:var(--ink-2); text-align:left; padding-left:1rem}
.abw{display:inline-block; font-size:.95rem; font-weight:bold; padding:.12rem .6rem; border-radius:999px; white-space:nowrap; border:1px solid transparent}
.abw.deutlich{background:var(--r-l); color:#9B2A22; border-color:#F0B7B2}
.abw.leicht{background:var(--y-l); color:#7A5600; border-color:#F1D98A}
.abw.gleich{background:var(--g-l); color:#2C6E1E; border-color:#BFE0B3}
/* Spalte „Kind sieht sich …“ hervorheben */
.vergleich th.sieht{background:#FFF7E6; color:var(--ink); border-left:2px solid #F1D98A}
.vergleich td.sieht{background:#FFFBF2; border-left:2px solid #F1D98A}
.marke{font-size:.85rem; font-weight:bold; border-radius:999px; padding:.05rem .5rem; margin-left:.4rem; white-space:nowrap}
.marke.stolz{background:var(--g); color:#fff}
.marke.ziel{background:var(--blue); color:#fff}
/* Zeilen, auf die das Kind stolz ist bzw. die es verbessern möchte */
table.noten.vergleich tr.stolz-zeile td{background:var(--g-l)}
.vergleich tr.stolz-zeile td:first-child{box-shadow:inset 5px 0 0 var(--g); font-weight:bold}
table.noten.vergleich tr.ziel-zeile td{background:var(--blue-l)}
.vergleich tr.ziel-zeile td:first-child{box-shadow:inset 5px 0 0 var(--blue); font-weight:bold}
/* Kasten über der Tabelle: stolz / Ziel in den Worten des Kindes */
.kind-stimme{display:flex; gap:.75rem; flex-wrap:wrap; margin:0 0 .8rem}
.ks{flex:1 1 220px; display:flex; align-items:center; gap:.75rem; border-radius:12px; padding:.6rem .9rem; border:1px solid}
.ks.stolz{background:var(--g-l); border-color:#BFE0B3}
.ks.ziel{background:var(--blue-l); border-color:#BCDCF2}
.ks-symbol{font-size:1.8rem; line-height:1}
.ks.stolz .ks-symbol{color:var(--g)} .ks.ziel .ks-symbol{color:var(--blue)}
.ks-frage{display:block; font-size:.85rem; color:var(--ink-2)}
.ks b{font-size:1.15rem}
.formreihe.zwei{grid-template-columns:1fr 2fr}
label.block{display:flex; flex-direction:column; gap:.25rem; color:var(--ink-2); font-size:.92rem; margin-bottom:.8rem}
textarea{font:inherit; border:1px solid var(--line-2); border-radius:var(--rad); padding:.5rem .7rem; resize:vertical; color:var(--ink)}
textarea:focus{outline:2px solid var(--blue); outline-offset:1px}
.fremdnotiz{background:var(--soft); border-left:3px solid var(--line-2); padding:.5rem .8rem; margin:.4rem 0}
.massnahmen{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin-bottom:.8rem}
.massnahmen label{display:flex; gap:.35rem; align-items:center; cursor:pointer}
.massnahme{display:inline-block; background:var(--blue-l); color:var(--blue-d); border-radius:6px; padding:0 .4rem; margin:1px 0}
.notenchips{display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0}
.notenchip{border:1px solid var(--line-2); border-radius:8px; padding:.15rem .55rem; font-size:.92rem}
.gruende{margin:.3rem 0 .6rem; color:var(--ink-2)}
.besprochen{display:flex; gap:.4rem; align-items:center; font-weight:bold}
details summary{cursor:pointer; color:var(--blue-d); margin:.4rem 0}

.knopfreihe{display:flex; gap:.5rem; margin-left:auto}
.vorschlag-schalter{display:block; margin:-.25rem 0 .6rem}

/* Klassenstand */
.minibalken{display:inline-block; width:90px; height:8px; background:var(--line); border-radius:4px; overflow:hidden; vertical-align:middle; margin-right:.3rem}
.minibalken i{display:block; height:100%; background:var(--green)}
/* Leistungs-/Entwicklungsstand */
.warn{display:inline-block; font-weight:bold; font-size:.88rem; padding:.05rem .5rem; border-radius:999px; background:var(--y-l); color:#7A5600; border:1px solid #F1D98A; white-space:nowrap}
.warn.stark{background:var(--r-l); color:#9B2A22; border-color:#F0B7B2}
.ha-zahl{display:inline-block; min-width:2rem; font-weight:bold}
.entw-werkzeuge{display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; margin:0 0 .6rem; color:var(--ink-2)}
.entw-werkzeuge select{margin-left:.4rem; padding:.25rem .4rem}
table.entw tr.entw-detail>td{background:var(--soft); text-align:left; padding:.7rem 1rem 1rem}
.entw-detail-kopf{display:flex; gap:1rem; align-items:flex-start; justify-content:space-between; margin-bottom:.6rem}
/* Gesamtkurve eines Kindes (alle Fächer) im aufgeklappten Leistungsstand */
.gesamt-kurven{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:.4rem 0 1rem}
.gesamt-kurven .gk{border:1px solid var(--line); border-radius:10px; padding:.5rem .6rem .3rem; background:#fff}
.gesamt-kurven .kurven-legende{margin-top:0}
@media (max-width:900px){ .gesamt-kurven{grid-template-columns:1fr} }
.warnliste{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.35rem .5rem}
.warnliste li{background:var(--y-l); color:#7A5600; border-radius:8px; padding:.15rem .6rem; font-weight:bold}
.warnliste li.stark{background:var(--r-l); color:#9B2A22}
table.entw-faecher{background:#fff; border:1px solid var(--line); border-radius:10px}
.ka-chip{display:inline-block; min-width:1.8rem; text-align:center; border-radius:5px; padding:0 .25rem}
span.ka-gut{font-weight:bold} span.ka-schlecht{font-weight:bold}
table.stand tr.aufgeklappt td{background:var(--soft); text-align:left; padding:.6rem 1rem; line-height:1.6}

/* Einschätzbogen */
.schritte{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:.8rem}
.schritt-karte{display:flex; gap:.8rem; border:1px solid var(--line); border-radius:12px; padding:1rem}
.schritt-karte textarea{width:100%; font-size:.88rem}
.material{margin:.3rem 0; padding-left:1.1rem; line-height:1.7}

/* Pädagogische Konferenz im Vollbild */
body.vollbild-offen{overflow:hidden}
.vollbild{position:fixed; inset:0; z-index:100; background:var(--bg); display:flex; flex-direction:column; font-size:1.1rem}
.vollbild[hidden]{display:none}
.vb-kopf{display:flex; align-items:center; gap:1rem; padding:.7rem 1.4rem; background:#fff; border-bottom:4px solid var(--orange)}
.vb-kopf .leise{margin-right:auto}
.vb-rumpf{flex:1; display:grid; grid-template-columns:260px 1fr; min-height:0}
.vb-liste{overflow:auto; background:#fff; border-right:1px solid var(--line); padding:.4rem}
.vb-kind{display:flex; align-items:center; gap:.5rem; width:100%; font:inherit; font-size:.95rem; text-align:left; border:1px solid transparent; background:transparent; border-radius:8px; padding:.4rem .6rem; cursor:pointer; color:inherit}
.vb-kind span:nth-child(2){flex:1}
.vb-kind.aktiv{background:var(--blue-l); border-color:var(--blue)}
.vb-haupt{overflow:auto; padding:1.2rem 2rem 2rem}
.vb-name{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap}
.vb-name h1{font-size:2.6rem; margin:0}
.vb-name .ampel{font-size:1rem; padding:.25rem .8rem}
.vb-kz{font-size:1.2rem}
.gruende.gross{font-size:1.15rem; margin:.6rem 0 1rem}
.vb-spalten{display:grid; grid-template-columns:1fr 1.2fr; gap:2rem}
.vb-spalten h2{font-size:1.3rem}
.vb-noten{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.5rem}
.vb-note{display:flex; align-items:center; gap:.6rem; background:#fff; border:1px solid var(--line); border-radius:10px; padding:.45rem .8rem}
.vb-note span:first-child{flex:1}
.vb-note b,.vb-note i{font-size:1.4rem}
button.vb-note{font:inherit; color:inherit; text-align:left; cursor:pointer; width:100%}
button.vb-note:hover,button.vb-note:focus-visible{border-color:var(--blue); background:var(--blue-l)}
.vb-note i.vb-ha-punkt{font-size:.8rem; font-style:normal; font-weight:bold; background:var(--r-l); color:#9B2A22; border-radius:999px; padding:0 .45rem; vertical-align:middle}
.vb-ha-box{margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap}
.vb-ha{font-size:1rem; border:1px solid var(--line-2); border-radius:999px; padding:.2rem .8rem; background:#fff}
.vb-ha.ha-warn{border-color:#E0A39E; padding:.2rem .8rem; font-weight:normal}
.vb-fach-dlg{width:min(980px,96vw)}
.vb-fach-inhalt h3{font-size:1rem; color:var(--ink-2); margin:1rem 0 .3rem}
.vb-fach-zahlen{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem; font-size:1.05rem}
.vb-fach-zahlen b.gross,.vb-fach-zahlen b.gross b,.vb-fach-zahlen b.gross i{font-size:1.6rem}
.vb-einzel{border-collapse:collapse; font-size:1.2rem}
.vb-einzel th{font-size:.85rem; color:var(--ink-2); font-weight:normal; padding:.2rem .6rem; text-align:center}
.vb-einzel td{border:1px solid var(--line); min-width:3.6rem; text-align:center; padding:.35rem .6rem}
.vb-einzel td.gut{background:#E6F4EA}
.vb-einzel td.schlecht{background:var(--r-l); color:#9B2A22; font-weight:bold}
.vb-einzel .gruppe{border-left:2px solid var(--line-2)}
th.ha-kopf small{display:block; font-size:.7rem; color:var(--ink-2); font-weight:normal}
th.ha-kopf.mat,td.mat{background:#F6F1FA}
.vb-avsv{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.vb-avsv h3{font-size:1rem; color:var(--ink-2); margin:0 0 .3rem}
.vb-tb{display:flex; align-items:center; gap:.4rem; padding:.2rem 0; border-bottom:1px solid var(--line); font-size:.95rem}
.vb-tb span:first-child{flex:1}
.kind-st{outline:2px dashed var(--dark); outline-offset:-2px}
.kind-st-legende{outline:2px dashed var(--dark); padding:0 .3rem; border-radius:4px}
.vb-eltern{margin-top:1rem}
.vb-beschluss{margin-top:1.2rem; background:#fff; border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem}
.vb-beschluss textarea{width:100%; margin:.4rem 0}
.massnahmen.gross label{font-size:1.05rem; padding:.3rem .6rem; border:1px solid var(--line-2); border-radius:8px; background:var(--soft)}

/* Aufgaben der Klassenleitung, Klassenliste, Fehlzeiten */
.aufgaben{border:1px solid var(--line); border-radius:12px; padding:.7rem 1rem; margin:0 0 1rem; background:#fff}
.aufgaben h3{font-size:1.05rem; margin-bottom:.4rem}
.aufgabe{display:flex; gap:.5rem; align-items:center; padding:.2rem 0; cursor:pointer}
.aufgabe.erledigt{color:var(--g)}
.aufgabe.erledigt::after{content:"erledigt"; font-size:.82rem; margin-left:.3rem; padding-left:1.1em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C6E1E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") left center/.95em no-repeat}
.aufgabe.gross{margin-top:1rem; padding:.6rem .8rem; border:1px solid var(--line-2); border-radius:10px; background:var(--soft); font-weight:bold}
.neues-kind{display:flex; gap:.8rem; align-items:flex-end; flex-wrap:wrap; margin:.6rem 0 1rem; padding:.7rem .9rem; background:var(--soft); border-radius:10px}
.neues-kind label{display:flex; flex-direction:column; gap:.2rem; font-size:.9rem; color:var(--ink-2)}
input.fz{width:4.2rem; text-align:center}
.wu-vorschau{border:2px solid var(--blue); border-radius:12px; padding:.8rem 1rem; margin-bottom:1rem; background:var(--blue-l)}
.wu-spalten{display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin:.4rem 0 .6rem}
.wu-spalten label{display:flex; flex-direction:column; gap:.2rem; font-size:.85rem; color:var(--ink-2)}

/* Hausaufgabenkontrolle */
.ha-leiste{display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; margin-bottom:.8rem}
.ha-leiste label{display:flex; gap:.4rem; align-items:center}
.ha-zelle{font:inherit; width:2.1rem; height:2rem; border-radius:6px; border:1px solid var(--line-2); background:#fff; cursor:pointer; font-weight:bold; display:inline-grid; place-items:center}
.ha-zelle.ha-ok{color:var(--g)}
.ha-zelle.ha-v{background:var(--r-l); border-color:#F0B7B2; color:#9B2A22}
.ha-zelle.ha-u{background:var(--y-l); border-color:#F1D98A; color:#7A5600}
.ha-zelle:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
.ha-kopf{white-space:nowrap; position:relative}
.ha-weg{border:0; background:none; color:var(--muted); cursor:pointer; padding:0 .2rem; font-size:.9rem}
.ha-weg:hover{color:var(--r)}
.ha-warn{background:var(--r-l); color:#9B2A22; border-radius:6px; padding:0 .4rem; font-weight:bold}
.ha-kurz{font-size:.88rem; color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px; padding:.1rem .6rem}

/* Schulsozialarbeit */
.sz-kopf{display:flex; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:.8rem}
.sz-kopf h1{margin:0}
.sz-filter{margin-left:auto; display:flex; gap:.5rem}
.sz-filter input{min-width:14rem}
.sz-pins{margin-bottom:1.25rem}
.sz-pins h2{font-size:1.2rem; margin:.4rem 0 .7rem}
.sz-karten{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:.8rem}
.sz-karte{background:#fff; border:1px solid var(--line); border-left:6px solid var(--line-2); border-radius:14px; padding:.8rem 1rem;
  display:flex; flex-direction:column; gap:.45rem; cursor:pointer; box-shadow:0 2px 8px rgba(36,49,58,.05)}
.sz-karte:hover,.sz-karte:focus{border-color:var(--blue); outline:none}
.sz-karte.rand-rot{border-left-color:var(--r)} .sz-karte.rand-gelb{border-left-color:var(--y)} .sz-karte.rand-gruen{border-left-color:var(--green)}
.sz-karte-kopf{display:flex; align-items:baseline; gap:.5rem}
.sz-karte-kopf b{font-size:1.08rem}
.sz-karte-kopf .sz-pin{margin-left:auto}
.sz-karte-zahlen{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; font-size:.92rem}
.sz-pin-grund{font-size:.88rem; background:var(--blue-l); color:var(--blue-d); border-radius:8px; padding:.2rem .5rem}
.sz-karte-fuss{font-size:.82rem; color:var(--ink-2); border-top:1px solid var(--line); padding-top:.4rem; margin-top:auto}
.sz-gruende{display:flex; flex-wrap:wrap; gap:.25rem}
td.sz-gruende{white-space:normal; max-width:30rem}
.sz-grund{font-size:.78rem; font-weight:bold; border-radius:999px; padding:.05rem .55rem; border:1px solid}
.sz-grund.rot{background:var(--r-l); color:#9B2A22; border-color:#F0B7B2}
.sz-grund.gelb{background:var(--y-l); color:#7A5600; border-color:#F1D98A}
.sz-grund.mehr{background:var(--soft); color:var(--muted); border-color:var(--line)}
.sz-gruende.gross .sz-grund{font-size:.88rem; padding:.15rem .7rem}
.sz-pin{border:1px solid var(--line-2); background:#fff; border-radius:8px; cursor:pointer; padding:.1rem .4rem; filter:grayscale(1); opacity:.55}
.sz-pin:hover{opacity:1; filter:none}
.sz-pin.an{filter:none; opacity:1; background:var(--blue-l); border-color:var(--blue)}
.sz-liste-kopf{display:flex; align-items:center; gap:1rem; margin-bottom:.6rem}
.sz-liste-kopf h2{margin:0; font-size:1.2rem; flex:1}
.sz-ma{display:inline-flex; font-size:.8rem}
.sz-konferenz{margin-top:.8rem; background:var(--soft); border-radius:10px; padding:.6rem .9rem}
.sz-ka{display:inline-block; min-width:1.8rem; text-align:center; border-radius:5px; padding:0 .25rem}
.sz-ka.gut{background:var(--g-l); color:#2C6E1E; font-weight:bold} .sz-ka.schlecht{background:var(--r-l); color:#9B2A22; font-weight:bold}
.sz-notiz-neu{display:flex; gap:.6rem; align-items:flex-end}
.sz-notiz-neu textarea{flex:1}
.sz-notizen{display:flex; flex-direction:column; gap:.5rem; margin-top:.8rem}
.sz-notiz{border-left:4px solid var(--blue); background:var(--soft); border-radius:0 10px 10px 0; padding:.5rem .8rem}
.sz-notiz-kopf{display:flex; gap:.6rem; align-items:baseline; margin-bottom:.2rem}
.sz-notiz-kopf .u-weg{margin-left:auto}

.sz-filter select{max-width:11rem}
tr.sz-jg td{background:var(--dark); color:#fff; font-weight:bold; text-align:left; padding:.35rem 1rem; letter-spacing:.03em}
table.noten tr.sz-jg:hover td{background:var(--dark)}
.sz-jg-titel{font-size:.95rem; color:var(--ink-2); margin:.8rem 0 .4rem; border-bottom:2px solid var(--line-2); padding-bottom:.2rem}
.sz-wv{font-size:.85rem; color:var(--ink-2)}
.sz-wv.faellig{color:#9B2A22; font-weight:bold}
.sz-kz-faellig{background:var(--r-l); border-color:#F0B7B2}
.vb-gruppe{font-size:.75rem; font-weight:bold; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:.6rem .6rem .2rem}
.sz-vb .sz-gruende{margin-bottom:.7rem}
.sz-vb-pin{display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; background:var(--blue-l); border-radius:12px; padding:.6rem .8rem; margin-bottom:.8rem}
.sz-vb-pin label{display:flex; align-items:center; gap:.4rem}
.sz-vb-pin input[type=text]{min-width:18rem}
.sz-vb-pin input[type=date]{font:inherit; border:1px solid var(--line-2); border-radius:var(--rad); padding:.35rem .5rem}
.sz-notiz-neu select{max-width:16rem; align-self:flex-start}
.sz-art{font-size:.78rem; font-weight:bold; background:var(--blue-l); color:var(--blue-d); border-radius:999px; padding:0 .55rem}
.sz-notiz.kinderschutz{border-left-color:var(--r); background:var(--r-l)}
.sz-notiz.kinderschutz .sz-art{background:var(--r); color:#fff}
.sz-statistik>summary{cursor:pointer}
.sz-stat-raster{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:.8rem}
.sz-stat-raster table td{text-align:left}

/* Fehlzeiten-Frühwarnung, Meldungen, Ziele, abgeschlossene Fälle */
.fehl-gelb{background:var(--y-l); color:#7A5600; border-radius:6px; padding:0 .4rem; font-weight:bold}
.sz-grund.fehl{border-style:dashed}
.sz-meldungen{border-left:6px solid var(--orange)}
.sz-meldungen h2{font-size:1.15rem; margin:0 0 .6rem}
.sz-meldung{display:flex; gap:1rem; align-items:flex-start; justify-content:space-between; padding:.55rem 0; border-top:1px solid var(--line)}
.sz-meldung-text{margin-top:.2rem; white-space:pre-wrap}
.sz-meldung-knoepfe{display:flex; gap:.4rem; flex-shrink:0}
.sz-karte-infos{display:flex; gap:.6rem; flex-wrap:wrap; font-size:.84rem; color:var(--ink-2)}
.sz-karte-infos:empty{display:none}
.sz-meldungen-kind{display:flex; flex-direction:column; gap:.3rem; margin-bottom:.6rem}
.sz-meldung-kurz{background:var(--soft); border-radius:8px; padding:.35rem .7rem; font-size:.92rem}
.sz-meldung-kurz.neu{background:#FFF1DA; border-left:4px solid var(--orange)}
.sz-vb h3{margin:1rem 0 .4rem; font-size:1.05rem}
.sz-fehlen{display:flex; gap:1.5rem; flex-wrap:wrap; align-items:flex-start; margin-bottom:.8rem}
.sz-fehlen-zahlen{flex:1 1 18rem; display:flex; flex-direction:column; gap:.35rem}
.fr-faecher{display:flex; flex-wrap:wrap; gap:.3rem}
.fr-fach{font-size:.82rem; background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:0 .5rem}
table.fehl-raster{border-collapse:separate; border-spacing:3px; font-size:.82rem}
table.fehl-raster th{font-weight:normal; color:var(--muted); padding:0 .3rem; text-align:center}
.fr-zelle{width:2rem; height:1.6rem; text-align:center; border-radius:5px; background:var(--g-l); font-weight:bold}
.fr-zelle.eins{background:#F7C9C5; color:#7A1E17} .fr-zelle.viel{background:var(--r); color:#fff}
.fr-zelle.zukunft{background:var(--soft)}
.sz-ziele{background:#fff; border:1px solid var(--line); border-radius:12px; padding:.6rem .9rem; margin-bottom:.8rem}
.sz-ziele h3{margin:0 0 .4rem}
.sz-ziel{display:flex; align-items:center; gap:.5rem; padding:.25rem 0; border-bottom:1px solid var(--line); cursor:pointer}
.sz-ziel span{flex:1} .sz-ziel small{color:var(--muted)}
.sz-ziel.erledigt span{text-decoration:line-through; color:var(--muted)}
.sz-ziel.ueberfaellig small{color:#9B2A22; font-weight:bold}
.sz-ziel-neu{display:flex; gap:.5rem; margin-top:.5rem}
.sz-ziel-neu input[type=text]{flex:1}
.sz-ziel-neu input[type=date]{font:inherit; border:1px solid var(--line-2); border-radius:var(--rad); padding:.35rem .5rem}
.sz-abgeschlossen>summary{cursor:pointer}
.sz-abgeschlossen table td{text-align:left}
.sozial-melden{white-space:nowrap}
.melden-mini{display:inline-flex; align-items:center; justify-content:center; width:1.7rem; height:1.7rem; margin-left:.35rem; vertical-align:middle;
  border:1px solid var(--line-2); border-radius:7px; background:#fff; color:var(--muted); cursor:pointer; padding:0; opacity:.75}
.melden-mini .ik{width:1rem; height:1rem}
tr:hover .melden-mini,.melden-mini:focus-visible{opacity:1}
.melden-mini:hover{border-color:var(--blue); color:var(--blue-d); background:var(--blue-l)}
.melden-mini.gemeldet{opacity:1; border-color:var(--blue); color:var(--blue-d); background:var(--blue-l)}
.sozial-melden.gemeldet{background:var(--blue-l); border-color:var(--blue); color:var(--blue-d)}
.melden-dlg{width:min(560px,94vw); border:0; border-radius:16px; padding:0; box-shadow:0 20px 60px rgba(0,0,0,.25)}
.melden-dlg::backdrop{background:rgba(36,49,58,.45)}
.melden-dlg .dlg-inhalt{padding:1rem 1.5rem}
.melden-dlg textarea{width:100%; box-sizing:border-box}
.entw-knoepfe{display:flex; gap:.5rem; align-items:center; flex-shrink:0}
.entw-knoepfe .knopf{white-space:nowrap}

/* Info der Schulsozialarbeit für Lehrkräfte – muss auffallen und abgehakt werden */
.info-box{background:#FFF1DA; border:1px solid #F3C77A; border-left:6px solid var(--orange); border-radius:12px; padding:.7rem 1rem; margin:0 0 .9rem;
  box-shadow:0 6px 18px -10px rgba(245,163,26,.6)}
.info-kopf{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; color:#6B4300}
.info-kopf .ik{width:1.2rem; height:1.2rem; color:#C27C00}
.info-kopf b{font-size:1.02rem}
.info-kopf .leise{margin-left:auto; color:#7A5A20}
.info-text{margin:.4rem 0 .5rem; font-size:1.05rem; font-weight:600; color:var(--ink); white-space:pre-wrap}
.info-fuss{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; font-size:.88rem}
.info-box.gelesen{background:var(--soft); border-color:var(--line); border-left-color:var(--line-2); box-shadow:none}
.info-box.gelesen .info-kopf{color:var(--ink-2)} .info-box.gelesen .info-kopf .ik{color:var(--muted)}
.info-box.gelesen .info-text{font-weight:400}
.info-ok{color:var(--g); font-weight:700}
.info-marke{display:inline-flex; vertical-align:-.15em; margin-left:.35rem; color:var(--muted)}
.info-marke .ik{width:1rem; height:1rem}
.info-marke.neu{color:#fff; background:var(--orange); border-radius:50%; padding:2px}
.info-marke.neu .ik{width:.85rem; height:.85rem}
.info-art{font-size:.85rem; font-weight:600; background:#FFE3B0; color:#6B4300; border-radius:99px; padding:.05rem .6rem}
.info-box.meldung{border-left-color:#E07B00}
.info-start{margin:0 0 1.2rem}
.info-start h2{display:flex; align-items:center; gap:.5rem; font-size:1.15rem; color:#6B4300}
.info-start h2 .ik{color:var(--orange)}
/* Schulsozialarbeit: Info für Lehrkräfte mit Lesestand */
.sz-info{background:#FFF7EA; border:1px solid #F3D8A8; border-radius:12px; padding:.7rem .9rem; margin-bottom:.8rem}
.sz-info h3{margin:0 0 .3rem}
.sz-info-hinweis{font-size:.88rem; color:#7A5600; margin:0 0 .5rem}
.sz-info-eintrag{background:#fff; border:1px solid var(--line); border-left:4px solid var(--orange); border-radius:0 10px 10px 0; padding:.45rem .7rem; margin-top:.5rem}
.sz-info-eintrag.aufgehoben{opacity:.6; border-left-color:var(--line-2)}
.sz-lesestand{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.35rem}
.sz-lesestand span{font-size:.78rem; border-radius:999px; padding:0 .5rem; border:1px solid var(--line)}
.sz-lesestand .ja{background:var(--g-l); color:#2C6E1E; border-color:#BFE0B3}
.sz-lesestand .nein{background:var(--soft); color:var(--muted)}
.sz-vertraulich{background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem}
.sz-vertraulich h3{margin:0 0 .4rem}

/* Schülerbogen: Kennleiste in Ampelfarben */
.kennleiste{display:flex; gap:.6rem; flex-wrap:wrap; align-items:stretch; margin:-.3rem 0 1.1rem}
.kl-kachel{display:flex; flex-direction:column; gap:.1rem; min-width:9.5rem; padding:.5rem .8rem; border-radius:12px;
  background:var(--soft); border:1px solid var(--line); border-left-width:5px}
.kl-titel{font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:bold}
.kl-kachel b{font-size:1.02rem}
.kl-kachel small{font-size:.78rem; color:var(--ink-2)}
.kl-gruen{background:var(--g-l); border-color:#BFE0B3; border-left-color:var(--green)}
.kl-gelb{background:var(--y-l); border-color:#F1D98A; border-left-color:var(--y)}
.kl-rot{background:var(--r-l); border-color:#F0B7B2; border-left-color:var(--r)}
.kl-leer{border-left-color:var(--line-2)}
.kl-mitarbeit{min-width:15rem; flex:1 1 15rem; max-width:22rem}
.ma-balken{display:flex; height:9px; border-radius:6px; overflow:hidden; background:var(--line); margin:.25rem 0 .2rem}
/* Mündliche Mitarbeit ++ + o − −−: dezente Töne von Grün über Orange bis Rot (Hintergrund, Rand, Schrift) */
:root{--ma-pp:#CFE8CB; --ma-pp-r:#7DB675; --ma-pp-t:#25622B;
  --ma-p:#E6F2D8; --ma-p-r:#A8CF88; --ma-p-t:#457A25;
  --ma-o:#FCE7CC; --ma-o-r:#EDB36B; --ma-o-t:#8A5200;
  --ma-m:#FBE1D8; --ma-m-r:#E7A28C; --ma-m-t:#9A4024;
  --ma-mm:#F5D0CD; --ma-mm-r:#D5857E; --ma-mm-t:#8C2A23}
.ma-balken i.ma-pp{background:var(--ma-pp-r)} .ma-balken i.ma-p{background:var(--ma-p-r)} .ma-balken i.ma-o{background:var(--ma-o-r)}
.ma-balken i.ma-m{background:var(--ma-m-r)} .ma-balken i.ma-mm{background:var(--ma-mm-r)}
.ma-balken i.leer{flex:1}
.ma-zahlen{display:flex; flex-wrap:wrap; gap:.3rem; font-weight:bold; font-size:.85rem}
.ma-zahlen span{border-radius:999px; padding:0 .45rem; white-space:nowrap}
:is(.ma-zahlen span, .u-ma).ma-pp{--c:var(--ma-pp); --cr:var(--ma-pp-r); --ct:var(--ma-pp-t)}
:is(.ma-zahlen span, .u-ma).ma-p{--c:var(--ma-p); --cr:var(--ma-p-r); --ct:var(--ma-p-t)}
:is(.ma-zahlen span, .u-ma).ma-o{--c:var(--ma-o); --cr:var(--ma-o-r); --ct:var(--ma-o-t)}
:is(.ma-zahlen span, .u-ma).ma-m{--c:var(--ma-m); --cr:var(--ma-m-r); --ct:var(--ma-m-t)}
:is(.ma-zahlen span, .u-ma).ma-mm{--c:var(--ma-mm); --cr:var(--ma-mm-r); --ct:var(--ma-mm-t)}
.ma-zahlen span{background:var(--c); color:var(--ct)}
.kennleiste .ha-brief-knopf{align-self:center}
.mk-hinweis{display:block; font-size:.75rem; color:var(--ink-2); white-space:nowrap}
.mk-hinweis b{display:inline; font-size:.85rem}
.mk-pfeil{font-size:.7rem} .mk-pfeil.gut{color:var(--g)} .mk-pfeil.schlecht{color:var(--r)}

/* Unterricht: eine Stunde kompakt – Tag, Thema, Hausaufgabe, Liste der Kinder */
.u-tage{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.8rem}
.u-tage h2{margin:0 .4rem; font-size:1.3rem; min-width:13rem; text-align:center}
.u-stunden{display:flex; gap:.35rem; margin-left:.6rem}
.u-karte{border-left:5px solid var(--green); padding:1rem 1.4rem; display:flex; flex-direction:column; gap:.5rem}
.u-titel{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap}
.u-titel h2{margin:0; font-size:1.35rem}
.u-titel label{display:flex; align-items:center; gap:.35rem; font-size:.9rem}
.u-titel input{width:4rem; padding:.2rem .4rem; font:inherit; border:1px solid var(--line-2); border-radius:6px}
.u-weg{margin-left:auto; border:0; background:none; color:var(--muted); cursor:pointer; font-size:.85rem}
.u-weg:hover{color:var(--r); text-decoration:underline}
.u-feld{font:inherit; max-width:44rem; border:1px solid var(--line-2); border-radius:var(--rad); padding:.45rem .7rem}
.u-feld:focus,.u-bem input:focus{outline:2px solid var(--blue); outline-offset:0}
.u-thema{font-weight:bold}
.u-zuletzt{font-size:.85rem; color:var(--ink-2); display:flex; flex-wrap:wrap; align-items:center; gap:.2rem}
.u-abstand{display:inline-block; width:1.4rem}
.u-kopieren{margin-left:auto; border:1px solid var(--line-2); background:#fff; border-radius:6px; padding:.15rem .6rem; cursor:pointer; font:inherit; font-size:.82rem; color:var(--ink-2)}
.u-kopieren:hover{border-color:var(--blue)}
table.u-tabelle th{background:var(--blue-l); color:var(--ink); text-align:left; padding-left:.5rem}
table.u-tabelle td{padding:.3rem .5rem; text-align:left; white-space:nowrap}
table.u-tabelle td.u-bem{width:100%}
.u-name{font-weight:normal}
.u-knopf{font:inherit; font-size:.88rem; border:1px solid var(--line-2); background:#fff; border-radius:6px; padding:.2rem .6rem; cursor:pointer; color:var(--ink)}
.u-knopf:hover:not(:disabled){border-color:var(--blue)}
.u-knopf:disabled{cursor:default; color:var(--muted)}
.u-mitarbeit{display:flex; gap:.25rem}
.u-ma{min-width:2.1rem; padding:.2rem .35rem; text-align:center; font-weight:bold; color:var(--ct); border-color:var(--line-2); background:#fff}
.u-ma:hover:not(:disabled){border-color:var(--cr); background:var(--c)}
.u-ma.an{background:var(--c); border-color:var(--cr); color:var(--ct); box-shadow:inset 0 0 0 1px var(--cr)}
.u-fehlt-knopf.an{background:var(--r); border-color:var(--r); color:#fff}
.u-verg.an{background:var(--r-l); border-color:#E0A39E; color:#9B2A22; font-weight:bold}
.u-zahl{margin-left:.35rem; font-size:.8rem; color:var(--muted)}
.u-zahl.ha-warn{padding:0 .3rem}
tr.u-fehlt td{background:#FBFBFC} tr.u-fehlt .u-name{color:var(--muted); text-decoration:line-through}
table.u-tabelle .u-bem input{width:100%; min-width:12rem; text-align:left; font:inherit; font-size:.9rem; border:1px solid var(--line-2); border-radius:6px; padding:.3rem .55rem}
.ha-uebersicht{margin-top:1.2rem}
.ha-uebersicht>summary{cursor:pointer}
.ha-uebersicht[open]>summary{margin-bottom:.8rem}

/* Listen: drucken und Checklisten */
.listen-raster{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.listen-block{border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem}
.listen-form{display:flex; flex-direction:column; gap:.6rem}
.listen-form label{display:flex; flex-direction:column; gap:.2rem; font-size:.92rem; color:var(--ink-2)}
.listen-form fieldset{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:.25rem}
.listen-form fieldset label{flex-direction:row; align-items:center; gap:.4rem; color:var(--ink)}
.listen-form legend{font-size:.92rem; color:var(--ink-2); margin-bottom:.2rem}
.listen-form .knopf{align-self:flex-start}
.listen-form label[hidden]{display:none}
.checkliste{border:1px solid var(--line); border-radius:12px; padding:.6rem 1rem; margin-bottom:.6rem; background:#fff}
.checkliste>summary{cursor:pointer; display:flex; gap:.8rem; align-items:center; flex-wrap:wrap}
.checkliste input.l-betrag{width:5.5rem; text-align:right}
.checkliste input.l-notiz{width:100%; min-width:14rem}
.druck-bereich{display:none}

/* Noten für alle Kinder eintragen (Spalten-Eingabe) */
.spalten-leiste{display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; margin:-.3rem 0 .9rem}
.spalten-leiste .trenner{width:1px; height:1.4rem; background:var(--line-2); margin:0 .4rem}
.spalten-leiste[hidden]{display:none}
.spalten-start{cursor:pointer; user-select:none}
.spalten-start:hover{color:var(--blue-d); text-decoration:underline dotted}
.spalten-hinweis{font-size:.75rem; font-weight:normal; color:var(--muted); margin-left:.4rem}
.spalten-dialog{width:min(520px,94vw)}
.spalten-tabelle input{width:4.2rem; text-align:center; font-weight:bold}
.spalten-tabelle td{padding:.2rem .4rem}
.notiz-fach textarea{width:100%; font:inherit; padding:.5rem .6rem; border:1px solid var(--line-2); border-radius:8px}
/* Klasse 1/2: Zeugnisformulierungen im Schülerbogen */
.zt{margin-top:.8rem}
.zt-faecher{display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0 .6rem}
.zt-fach{display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .7rem; border:1px solid var(--line-2); border-radius:var(--rad); cursor:pointer; background:#fff}
.zt-fach.an{background:var(--blue-l); border-color:var(--blue)}
.zt-fach small{color:var(--muted)}
.zt-block{border-top:1px solid var(--line); padding-top:.6rem; margin-top:.6rem}
.zt-block h4{margin:0 0 .3rem; font-size:1rem}
.zt-block details{margin:.2rem 0}
.zt-block summary{cursor:pointer; font-weight:bold; color:var(--ink-2); padding:.25rem 0}
.zt-block summary small{font-weight:normal; color:var(--g)}
.zt-satz{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .8rem; padding:.35rem .5rem; border-radius:8px}
.zt-satz p{margin:0; flex:1 1 22rem}
.zt-satz.gewaehlt{background:var(--g-l)}
.zt-haken{cursor:pointer} .zt-haken input{margin:0} .zt-haken span{flex:1}
.zt-stufen{display:flex; flex-wrap:wrap; border:1px solid var(--line-2); border-radius:var(--rad); overflow:hidden; background:#fff}
.zt-stufen button{font:inherit; font-size:.82rem; border:0; background:transparent; padding:.25rem .55rem; cursor:pointer; color:var(--ink-2)}
.zt-stufen button+button{border-left:1px solid var(--line-2)}
.zt-stufen button.aktiv{background:var(--blue); color:#fff}
.zt-stufen button:disabled{cursor:default; opacity:.6}
.zt-eigener{display:block; margin-top:.5rem; color:var(--ink-2)}
.zt-eigener textarea{display:block; width:100%; font:inherit; padding:.4rem .6rem; border:1px solid var(--line-2); border-radius:8px; margin-top:.2rem}
.zt-vorschau{margin-top:.5rem; padding:.5rem .7rem; background:var(--soft); border-radius:8px; font-size:.92rem}
.sonst-titel{flex-basis:100%; font-size:.85rem; margin:-.2rem 0 .2rem .2rem}
.sonst.mit-titel{flex-wrap:wrap}
.spalten-dialog .formreihe{margin-bottom:.6rem}
.spiegel{display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center; margin-top:.8rem; padding:.6rem .8rem; background:var(--soft); border-radius:10px}
.spiegel span b{display:inline-block; min-width:1.3rem; text-align:center; background:#fff; border:1px solid var(--line-2); border-radius:5px; margin-right:.25rem}
.spiegel-schnitt{margin-left:auto}
.spiegel-schnitt b{border:0 !important; background:none !important}

/* Sprechtag: Sichtschutz vor dem Bogen, Notizen nur für Lehrkräfte */
.sichtschutz{text-align:center; padding:3rem 1.5rem}
.sichtschutz h2{font-size:2.2rem; margin:.4rem 0}
.knopf.gross{font-size:1.15rem; padding:.75rem 1.6rem; margin-top:.8rem}
.nur-drucken{display:none}
.sichtschutz-nav{display:flex; justify-content:center; gap:.6rem; margin-top:1.6rem; flex-wrap:wrap}
/* Sprechtag im Vollbild: nur der Bogen – kein Menü, keine Kinderliste */
body.sprechtag-vollbild .kopf,body.sprechtag-vollbild .seiten-hilfe,body.sprechtag-vollbild .klassen-kopf,
body.sprechtag-vollbild .masken,body.sprechtag-vollbild #kinderListe,body.sprechtag-vollbild .testhinweis{display:none !important}
body.sprechtag-vollbild main{max-width:none; padding:1rem 2rem 2rem}
body.sprechtag-vollbild .eingabe{grid-template-columns:1fr}
body.sprechtag-vollbild .schuelerkopf .name{font-size:2.2rem}
/* Größere Schrift im Vollbild – gut lesbar fürs Gegenüber am Tisch */
body.sprechtag-vollbild .sprechtag h3{font-size:1.5rem}
body.sprechtag-vollbild .sprechtag table.noten{font-size:1.3rem}
body.sprechtag-vollbild .sprechtag table.noten td{padding:.45rem .5rem}
body.sprechtag-vollbild .sprechtag table.noten th{padding:.7rem .5rem}
body.sprechtag-vollbild .sprechtag .st{min-width:2.2rem; font-size:1.25rem; padding:.05rem .4rem}
body.sprechtag-vollbild .sprechtag .abw{font-size:1.15rem}
body.sprechtag-vollbild .sprechtag .marke{font-size:1rem}
body.sprechtag-vollbild .sprechtag .klein{font-size:.95rem}
body.sprechtag-vollbild .kind-stimme .ks-frage{font-size:1.05rem}
body.sprechtag-vollbild .kind-stimme b{font-size:1.45rem}
body.sprechtag-vollbild .kind-stimme .ks-symbol{font-size:2.3rem}
body.sprechtag-vollbild .entwicklung .kurven-legende{font-size:1.1rem}
body.sprechtag-vollbild .entwicklung .fd-titel{font-size:1.1rem}
details.notizen>summary{cursor:pointer; padding:.2rem 0; color:var(--ink)}
details.notizen[open]>summary{margin-bottom:.8rem}

/* Entwicklung schriftlich/mündlich: ein kleines Diagramm je Fach */
.kurven-legende{display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; font-size:.9rem; margin:.3rem 0 .6rem}
.kurven-legende span{display:inline-flex; align-items:center; gap:.4rem}
.fach-diagramme{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.8rem}
.fach-diagramm{border:1px solid var(--line); border-radius:10px; padding:.4rem .5rem .2rem; background:#fff; break-inside:avoid}
.fd-titel{font-weight:bold; font-size:.92rem; color:var(--ink-2); padding-left:.2rem}
.fach-diagramm{cursor:zoom-in}
.fach-diagramm:hover,.fach-diagramm:focus-visible{border-color:var(--blue); outline:none}
.diagramm-dialog{width:min(900px,94vw)}
.diagramm-dlg-kopf{display:flex; align-items:center; gap:.6rem}
.diagramm-dlg-kopf h2{margin:0; margin-right:auto}
#diagrammGross .fd-titel{display:none}
#diagrammGross{cursor:default}
/* Klassenarbeiten einzeln im Sprechtag-Bogen */
.ka-titel{margin-top:1rem}
td.ka-gut{background:var(--g-l); color:#2C6E1E; font-weight:bold}
td.ka-schlecht{background:var(--r-l); color:#9B2A22; font-weight:bold}
.legende-kasten{display:inline-block; min-width:1.4rem; text-align:center; border-radius:4px; padding:0 .3rem}
span.ka-gut{background:var(--g-l); color:#2C6E1E} span.ka-schlecht{background:var(--r-l); color:#9B2A22}
.vergleich tr.gesamt-zeile td{font-weight:bold; background:var(--soft); border-top:1px solid var(--line-2)}
.diagramm{position:relative}
.diagramm svg{display:block}
.diagramm .tooltip{position:absolute; background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:.35rem .55rem; font-size:.82rem; box-shadow:0 4px 14px rgba(36,49,58,.12); pointer-events:none; white-space:nowrap; z-index:2}
.diagramm .tooltip div{display:flex; align-items:center; gap:.35rem}
.diagramm .tooltip i{display:inline-block; width:9px; height:9px; border-radius:2px}

/* Förderplan im Konferenz-Vollbild */
.fp{margin:.8rem 0; border:2px solid var(--blue); border-radius:12px; padding:.8rem 1rem; background:#FBFDFF}
.fp-kopf{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.5rem}
.fp-kopf h3{margin:0; font-size:1.2rem}
.fp-kopf .knopf{margin-left:auto}
.fp-kopffelder{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin:0 0 .6rem; font-size:.9rem; color:var(--ink-2)}
.fp-kopffelder input{margin-left:.3rem; padding:.25rem .4rem}
.fp-spalte select optgroup{font-style:normal; font-weight:bold; color:var(--ink-2)}
.fp-spalte select option{font-weight:normal; color:var(--ink)}
.fp-spalte.schmal select{margin-top:0}
.fp-bereich{border-top:1px solid var(--line); padding:.5rem 0}
.fp-titel{display:flex; gap:.5rem; align-items:center; cursor:pointer; font-size:1.05rem}
.fp-raster{display:grid; grid-template-columns:1.1fr 1.3fr 1.5fr 150px; gap:.9rem; margin-top:.5rem}
.fp-spalte h4{margin:0 0 .3rem; font-size:.92rem; color:var(--ink-2); display:flex; gap:.5rem; align-items:center}
.fp-spalte textarea{width:100%; font-size:.92rem}
.fp-spalte select,.fp-spalte input[type=text]{width:100%; font-size:.9rem; margin-top:.3rem; padding:.35rem .5rem}
.fp-liste{margin:0; padding-left:1.1rem; font-size:.92rem}
.fp-liste li{margin:.15rem 0}
.fp-liste .weg{border:0; background:none; color:var(--r); cursor:pointer; font-size:.85rem; padding:0 .2rem}

/* Ausführliche ILE: Kompetenzraster mit Farbfeldern (+ grün · o orange · − rot · leer grau) */
.fp.ile{border-color:var(--orange); background:#FFFCF6}
.ile-legende{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.1rem; font-size:.9rem; color:var(--ink-2); margin-bottom:.5rem}
.ile-legende span{display:inline-flex; align-items:center; gap:.35rem}
.ile-werkzeug{margin-left:auto; gap:.4rem}
.ile-blaetter{display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.5rem}
.ile-blaetter button{border:1px solid var(--line-2); background:var(--card); border-radius:999px; padding:.3rem .8rem;
  font:inherit; font-size:.92rem; cursor:pointer; color:var(--ink-2)}
.ile-blaetter button:hover{border-color:var(--orange)}
.ile-blaetter button.an{background:var(--orange); border-color:var(--orange); color:#1F2A33; font-weight:600}
.ile-rahmen{max-height:65vh; overflow:auto; border:1px solid var(--line); border-radius:var(--rad); background:var(--card)}
.ile-tab{border-collapse:separate; border-spacing:0; width:100%; font-size:.92rem}
.ile-tab thead th{position:sticky; background:var(--soft); z-index:2; font-weight:600; color:var(--ink-2); padding:.25rem .3rem; border-bottom:1px solid var(--line)}
.ile-tab thead tr:first-child th{top:0; height:1.9rem}
.ile-tab thead tr:nth-child(2) th{top:1.9rem; font-size:.8rem}
.ile-tab th.ile-jg{border-left:2px solid var(--line-2)}
.ile-tab th.jetzt,.ile-tab td.jetzt{background:#FFF1D6}
.ile-tab thead th.jetzt{color:#7A4B00; box-shadow:inset 0 -3px 0 var(--orange)}
.ile-tab td{padding:.12rem .2rem; border-bottom:1px solid var(--line); text-align:center}
.ile-tab td.ile-komp{text-align:left; padding:.3rem .6rem; min-width:22rem; line-height:1.3}
.ile-tab th.ile-komp{text-align:left; left:0}
.ile-tab tr.ile-titel th,.ile-tab tr.ile-haupt th,.ile-tab tr.ile-bereich th{text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--line-2)}
.ile-tab tr.ile-titel th{font-family:var(--head); font-size:1.05rem; background:var(--blue-l)}
.ile-tab tr.ile-haupt th{font-size:1rem; background:#EEF3F8}
.ile-tab tr.ile-bereich th{font-size:.95rem; background:var(--soft); color:var(--ink-2)}
.ile-tab tbody tr:hover td{background:#FAFBFD}
.ile-tab tbody tr:hover td.jetzt{background:#FFE9BF}
.ile-z{display:inline-flex; align-items:center; justify-content:center; width:1.9rem; height:1.6rem; border-radius:6px;
  border:1px solid transparent; font:600 1rem/1 var(--font); font-style:normal; cursor:pointer; padding:0;
  transition:transform var(--dauer) var(--kurve)}
button.ile-z:hover:not(:disabled){transform:scale(1.12)}
button.ile-z:focus-visible{outline:none; box-shadow:var(--ring)}
button.ile-z:disabled{cursor:default}
.ile-z.wplus{background:var(--g); color:#fff}
.ile-z.wo{background:var(--orange); color:#1F2A33}
.ile-z.wminus{background:var(--r); color:#fff}
.ile-z.wleer{background:#EEF1F4; border-color:var(--line-2); color:transparent}
/* Lernentwicklung Grundschule: Noten und AV/SV aus dem Reiter Noten (nur Anzeige) über dem ILE-Bogen */
.le-daten{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:1rem; margin-bottom:1rem}
.le-daten table{width:100%}
.le-avsv tr.le-avsv-kopf th{background:var(--soft); padding-top:.4rem}
@media (max-width:900px){.le-daten{grid-template-columns:1fr}}
.le-uebergang{margin-top:1rem; border-color:var(--blue); background:#F7FBFE}
.le-grundlagen{list-style:none; padding:0; margin:.6rem 0; display:grid; gap:.35rem}
.le-grundlagen li{display:grid; grid-template-columns:15rem 1fr; gap:.2rem .8rem; align-items:center}
@media (max-width:700px){.le-grundlagen li{grid-template-columns:1fr}}
.le-grundlagen .ile-z{width:1.6rem; height:1.35rem; font-size:.85rem; cursor:default}
.le-ue-felder{display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; margin:.7rem 0}
.le-ue-felder label{display:flex; flex-direction:column; gap:.25rem}
.le-ue-felder select,.le-uebergang input[type=date]{font:inherit; padding:.35rem .5rem; border:1px solid var(--line-2); border-radius:8px; background:#fff}
.le-gespraeche{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:.6rem 0}
.le-gespraech{border:1px dashed var(--line-2); border-radius:10px; padding:.6rem .8rem; background:#fff}
.le-gespraech.gefuehrt{border-style:solid; border-color:var(--g)}
.le-haken{font-size:1rem}
.le-gespraech label{display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem}
.le-gespraech textarea{width:100%; font:inherit; padding:.45rem .6rem; border:1px solid var(--line-2); border-radius:8px}
.le-wunsch,.le-gespraech label.le-haken{display:flex; align-items:baseline; gap:.5rem; margin-top:.4rem}
@media (max-width:900px){.le-gespraeche{grid-template-columns:1fr}}
.le-bemerkung{margin-top:1rem}
.le-bemerkung textarea{width:100%; font:inherit; padding:.5rem .6rem; border:1px solid var(--line-2); border-radius:8px}

@media print{
  @page{size:A4 portrait; margin:12mm}
  html,body{font-size:10pt}
  .liste,.kinderListe,.vollbild{display:none !important}
  .eingabe:not(.voll){display:block}
  .st{print-color-adjust:exact; -webkit-print-color-adjust:exact}
  .ampel,.ampel5,.warn,.ha-warn,.warnliste li{print-color-adjust:exact; -webkit-print-color-adjust:exact}
  .masken,.chips{display:none !important}
  .fach-diagramme{grid-template-columns:repeat(4,1fr); gap:3mm}
  .fach-diagramm line,.fach-diagramm circle,.fach-diagramm rect,.kurven-legende svg{print-color-adjust:exact; -webkit-print-color-adjust:exact}
  .kopf,.nicht-drucken,.testhinweis,.toast,.legende{display:none !important}
  body{background:#fff}
  main{padding:0; max-width:none}
  .karte,.tw{border:0}
  tr.klickbar.aktiv td{background:none}
  .reiter-info,.klassen-kopf{display:none !important}
  .nur-drucken{display:block}

  /* Sprechtag-Bogen: muss auf eine A4-Seite passen */
  .karte{padding:0; margin:0 0 3mm; box-shadow:none}
  .tw{overflow:visible}
  .schuelerkopf{margin-bottom:2mm}
  .schuelerkopf .name{font-size:16pt}
  h3{font-size:11pt; margin:0 0 1mm}
  .sprechtag{grid-template-columns:2fr 3fr; gap:4mm}
  .sprechtag>div{min-width:0}
  table.noten{font-size:8.5pt}
  table.noten th,table.noten td{padding:1px 3px}
  table.noten th{position:static}
  .vergleich .marke{font-size:7pt; padding:0 2px}
  .abw{font-size:7.5pt; padding:0 2px; white-space:nowrap}
  .kind-stimme{gap:2mm; margin:0 0 1.5mm}
  .ks{padding:1mm 2mm; gap:2mm; border-radius:4px}
  .ks-symbol{font-size:12pt} .ks-frage{font-size:7.5pt} .ks b{font-size:9pt}
  .ks,.abw,.marke,.vergleich td.sieht,.vergleich th.sieht,.stolz-zeile td,.ziel-zeile td{print-color-adjust:exact; -webkit-print-color-adjust:exact}
  .vergleich td.links:first-child{line-height:1.15}
  .st{min-width:1.3rem; font-size:8pt}
  .kurven-legende{font-size:8pt; margin:0 0 1.5mm; gap:4mm}
  .fach-diagramme{grid-template-columns:repeat(5,1fr); gap:2mm}
  .fach-diagramm{padding:1mm; border:1px solid #ccc; border-radius:4px}
  .fd-titel{font-size:8pt}
  .entwicklung,.sprechtag,.fach-diagramm{break-inside:avoid}
  td.ka-gut,td.ka-schlecht,span.ka-gut,span.ka-schlecht,.gesamt-zeile td{print-color-adjust:exact; -webkit-print-color-adjust:exact}
  .ka-titel{margin-top:2mm}

  /* Nur das Druckblatt einer Liste drucken */
  body.nur-liste-drucken #bogen > *:not(.druck-bereich){display:none !important}
  body.nur-liste-drucken .druck-bereich{display:block}
  .druckblatt-kopf{display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid #333; margin-bottom:3mm}
  .druckblatt-kopf h2{font-size:15pt; margin:0}
  .druck-tabelle{width:100%; border-collapse:collapse; table-layout:fixed}
  body.nur-liste-drucken main{padding:0}
  .druck-tabelle th:nth-child(2){width:24%}
  .druck-tabelle th:nth-child(3){width:17%}
  .druck-tabelle th,.druck-tabelle td{overflow:hidden; white-space:nowrap}
  .druck-tabelle th,.druck-tabelle td{border:1px solid #555; padding:0 2mm; text-align:left}
  .druck-tabelle td{height:var(--zeile, 7mm)}
  .druck-tabelle th{height:8mm}
  .druck-tabelle th{background:#eee; font-size:9pt; print-color-adjust:exact; -webkit-print-color-adjust:exact}
  .druck-tabelle th.breit{width:35%}
  .druck-tabelle td:first-child{width:8mm; text-align:center}
  .druck-kasten{display:inline-block; width:4mm; height:4mm; border:1px solid #333}
}

/* ───────── Verwaltung: Wechsel, Jahresnote, Datensicherung ───────── */
.vw-block{margin:1rem 0}
.vw-block h2{margin-top:0}
.vw-erklaerung{margin:.4rem 0 .8rem; padding-left:1.2rem; color:var(--ink-2)}
.vw-tabelle td,.vw-tabelle th{vertical-align:middle}
.vw-tabelle input[type=number]{width:4.5rem}
.vw-option{display:block; margin:.8rem 0; max-width:60rem}
.vw-offen{margin:.8rem 0}
.vw-offen summary{cursor:pointer}
.vw-aktion{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line)}
.vw-wahl{display:flex; flex-direction:column; gap:.4rem; margin:.4rem 0 .8rem}
.vw-wahl input[type=number]{width:4.5rem}
.vw-art{border-radius:999px; padding:0 .55rem; font-size:.85rem; border:1px solid var(--line-2)}
.vw-art.vor-wechsel,.vw-art.vor-wiederherstellen{background:#FFF4D6}
.vw-art.hand{background:var(--blue-l)}
#sicherung .tw{margin-top:.8rem; max-height:22rem; overflow:auto}

/* Noteneingabe im 2. Halbjahr: Noten des 1. Halbjahres und Jahresnote */
.hj1-zeile{display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; align-items:baseline; margin:.8rem 0 0; padding:.5rem .8rem;
  background:#F4F7FA; border:1px dashed var(--line-2); border-radius:8px; font-size:.92rem}
.hj1-zeile span span{display:inline-block; min-width:1.6rem; text-align:center; background:#fff; border:1px solid var(--line); border-radius:4px; margin-right:.15rem}
.hj1-zeile i{font-style:normal; color:var(--ink-2); margin-left:.3rem}
.gesamt .klein-gross span{font-size:1.4rem; color:var(--ink-2)}


/* ═════════════════════════════════════════════════════════════════════════════
   Modernes Design (nur Bildschirm – der Druck bleibt unverändert)
   Stil: ruhiges, datenstarkes Dashboard in den Logofarben; klare Hierarchie, weiche Schatten,
   sichtbarer Tastaturfokus, Bewegung nur dezent und abschaltbar (prefers-reduced-motion).
   ═════════════════════════════════════════════════════════════════════════════ */
.ik{width:1.15em; height:1.15em; flex:0 0 auto; vertical-align:-.2em; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}

@media screen{
  body{background:
      radial-gradient(1100px 420px at 105% -12%, rgba(43,143,214,.08), transparent 60%),
      radial-gradient(900px 380px at -12% -8%, rgba(245,163,26,.08), transparent 60%),
      var(--bg);
    font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
  h1,h2,h3{font-family:var(--head); font-weight:600; letter-spacing:-.01em; color:var(--dark)}
  h1{font-size:1.75rem} h2{font-size:1.3rem} h3{font-size:1.08rem}
  a{color:var(--blue-d); text-underline-offset:2px}
  ::selection{background:rgba(43,143,214,.22)}

  /* Sprungmarke für Tastatur */
  .sprung{position:absolute; left:1rem; top:-3rem; z-index:200; background:var(--dark); color:#fff; padding:.5rem .9rem; border-radius:10px}
  .sprung:focus{top:.6rem}
  main:focus{outline:none}

  /* Kopf: hell, leicht durchscheinend, Logo im Mittelpunkt */
  .kopf{background:rgba(255,255,255,.88); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
    box-shadow:0 1px 0 var(--line), var(--sh-1); z-index:40}
  .kopf-in{padding:.55rem 1.5rem; gap:1rem}
  .kopf .logo{border-radius:10px; padding:.15rem}
  .kopf .logo img{height:42px; width:auto}
  .kopf-titel{border-left-color:var(--line-2)}
  .kopf-titel small{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--muted)}
  .halbjahr-wahl{font-weight:600; font-size:1rem}
  .kopf-nav{gap:.35rem}
  .kopf-nav a,.zahnrad{display:flex; flex-direction:row; align-items:center; gap:.55rem; padding:.45rem .8rem; border-radius:12px;
    color:var(--ink-2); transition:background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve)}
  .kopf-nav a .ik,.zahnrad .ik{width:1.25rem; height:1.25rem; color:var(--muted); transition:color var(--dauer)}
  .nav-text{display:flex; flex-direction:column; line-height:1.15}
  .nav-titel{font-weight:600; font-size:.98rem}
  .kopf-nav a:hover,.zahnrad:hover{background:var(--soft); color:var(--ink)}
  .kopf-nav a.aktiv,.zahnrad.aktiv{background:var(--blue-l); color:var(--blue-d); box-shadow:inset 0 0 0 1px rgba(43,143,214,.18)}
  .kopf-nav a.aktiv .ik,.zahnrad.aktiv .ik{color:var(--blue)}
  .kopf-nutzer{gap:.6rem}
  .nutzer{display:flex; align-items:center; gap:.5rem; color:var(--ink)}
  .nutzer-kreis{width:2.1rem; height:2.1rem; border-radius:50%; display:grid; place-items:center; font:600 .8rem var(--head); color:#fff;
    background:conic-gradient(from 200deg, var(--orange), var(--blue), var(--green), var(--orange)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
  .nutzer-name{font-weight:600}
  .knopf-leise{border-color:transparent; background:transparent; color:var(--ink-2)}
  .knopf-leise:hover{background:var(--soft); border-color:var(--line-2)}
  .streifen{height:3px}
  @media (max-width:1250px){ .nutzer-name{display:none} .knopf-leise span{display:none} }
  @media (max-width:1100px){ .kopf-nav a .nav-text .nav-info,.zahnrad .nav-info{display:none} }

  /* Hinweiszeile */
  .seiten-hilfe{background:linear-gradient(90deg, var(--blue-l), rgba(232,242,251,.4)); border-bottom:1px solid #D6E7F5}
  .seiten-hilfe-in{color:#1A5683; font-size:.93rem; padding:.5rem 1.5rem}
  .hilfe-zeichen{background:transparent; color:var(--blue); flex:0 0 1.25rem; height:1.25rem; font-style:normal}
  .hilfe-zeichen .ik{width:1.25rem; height:1.25rem}
  .rueckblick-balken .hilfe-zeichen{background:transparent; color:#B57A00}

  main{padding-top:1.6rem}

  /* Karten und Flächen */
  .karte{border-radius:var(--rad-karte); border-color:rgba(207,216,225,.7); box-shadow:var(--sh-1)}
  .tw{border-radius:14px; border-color:rgba(207,216,225,.8); box-shadow:var(--sh-1)}
  .bereich,.kl-kachel,.sz-karte,.u-karte{box-shadow:var(--sh-1)}

  /* Knöpfe */
  .knopf{display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:2.5rem; padding:.45rem 1rem;
    border-radius:var(--rad); font-weight:600; color:var(--ink); background:#fff; border-color:var(--line-2);
    transition:background-color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve), transform .08s}
  .knopf:hover{background:var(--soft); border-color:#B9C6D2}
  .knopf:active{transform:scale(.98)}
  .knopf.haupt{background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 1px 2px rgba(29,111,173,.35), inset 0 1px 0 rgba(255,255,255,.18)}
  .knopf.haupt:hover{background:var(--blue-d); border-color:var(--blue-d)}
  .knopf.klein{min-height:2rem; padding:.25rem .7rem; font-size:.9rem}
  .knopf.mini{min-height:1.6rem; padding:.05rem .5rem; font-size:.82rem}
  .knopf:disabled,.knopf[disabled]{opacity:.45; cursor:not-allowed; transform:none}
  .knopf.gefahr{color:var(--r)}
  .knopf.gefahr:hover{background:var(--r-l); border-color:#EBA9A3}

  /* Felder */
  input[type=text],input[type=password],input[type=search],input[type=date],input[type=number],select,textarea{
    border-radius:var(--rad); border-color:var(--line-2); transition:border-color var(--dauer), box-shadow var(--dauer)}
  input[type=text],input[type=password],input[type=search],select{min-height:2.5rem}
  input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:#B3C0CC}
  :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:none; box-shadow:var(--ring); border-color:var(--blue)}
  input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue); box-shadow:var(--ring)}

  /* Tabellen: ruhige Köpfe, Zahlen gleich breit, Zeile hervorheben */
  table.noten{font-variant-numeric:tabular-nums}
  table.noten th{background:#F7F9FC; color:var(--muted); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.045em;
    padding:.6rem .45rem; border-bottom:1px solid var(--line)}
  table.noten td{border-bottom-color:#EEF2F6}
  table.noten tbody tr{transition:background-color var(--dauer)}
  table.noten tr:hover td{background:#F4F9FE}
  table.noten tr:last-child td{border-bottom:0}
  table.noten input{border-color:var(--line-2); min-height:2.1rem}
  .kz b,.gesamt .gross,.schnitt b,.st,.u-zahl,.ma-zahlen{font-variant-numeric:tabular-nums}

  /* Umschalter (Reiter) als Segment-Leiste */
  .ansichten{background:#EAEFF5; border:0; border-radius:12px; padding:4px; gap:2px; box-shadow:inset 0 1px 2px rgba(16,24,40,.06)}
  .ansichten :is(button,a){border-radius:9px; font-weight:600; padding:.42rem .95rem; color:var(--ink-2); transition:background-color var(--dauer), color var(--dauer), box-shadow var(--dauer)}
  .ansichten :is(button,a)+:is(button,a){border-left:0}
  .ansichten :is(button,a):hover{color:var(--ink); background:rgba(255,255,255,.6)}
  .ansichten :is(button,a)[aria-selected=true]{background:#fff; color:var(--blue-d); box-shadow:var(--sh-1)}

  /* Reiter „Meine Klassen“ */
  .masken a{border-radius:8px 8px 0 0; transition:color var(--dauer), border-color var(--dauer)}

  /* Kennzahlen-Kacheln */
  .kz{background:#fff; border-color:rgba(207,216,225,.8); border-radius:14px; box-shadow:var(--sh-1); padding:.75rem 1rem}
  .kz b{font-family:var(--head); font-weight:600; font-size:1.55rem; display:flex; align-items:center; gap:.4rem}
  .kz b .ik{width:1.2rem; height:1.2rem; color:var(--muted)}

  /* Startseite: Kacheln */
  .kachel{border-radius:var(--rad-karte); border:1px solid rgba(207,216,225,.8); border-top:0; box-shadow:var(--sh-1); position:relative; overflow:hidden;
    transition:transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve), border-color var(--dauer)}
  .kachel::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--blue)}
  .kachel.art-kurs::before{background:var(--orange)}
  .kachel:hover{transform:translateY(-2px); box-shadow:var(--sh-2); border-color:rgba(43,143,214,.45)}
  .kachel b{font-weight:600}
  .balken{height:6px; border-radius:999px; background:#E8EDF2}
  .balken i{border-radius:999px; background:linear-gradient(90deg, var(--green), #8CC85F)}

  /* Chips */
  .chip{min-height:2rem; font-weight:600; transition:background-color var(--dauer), border-color var(--dauer)}
  .chip:hover{background:var(--soft)}
  .chip.an{box-shadow:0 1px 2px rgba(29,111,173,.3)}

  /* Kinderliste links */
  .liste{border-radius:var(--rad-karte)}
  .kind{border-radius:10px; transition:background-color var(--dauer)}
  .kind.aktiv{background:var(--blue-l); border-color:transparent; box-shadow:inset 3px 0 0 var(--blue)}

  /* Dialoge, Meldungen, Toast */
  dialog{border-radius:20px; box-shadow:var(--sh-3)}
  dialog::backdrop{background:rgba(22,32,42,.45); backdrop-filter:blur(2px)}
  dialog[open]{animation:auftauchen .18s var(--kurve)}
  .meldung{border-radius:12px; border:1px solid rgba(43,143,214,.18)}
  .toast{border-radius:12px; box-shadow:var(--sh-2); transform:translate(-50%, 8px); transition:opacity .2s, transform .2s var(--kurve)}
  .toast.an{transform:translate(-50%, 0)}
  .testhinweis{border-radius:999px; box-shadow:var(--sh-1); font-size:.82rem}

  /* Anmeldung: Bühne mit Logo und Farbkreisen */
  .seite-anmelden .seiten-hilfe{display:none}
  .anmelde-buehne{display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center; max-width:1050px; margin:3vh auto 0; min-height:70vh}
  .anmelde-bild{position:relative; padding:2rem}
  .anmelde-bild img{position:relative; z-index:1; width:min(100%, 420px); height:auto}
  .anmelde-claim{position:relative; z-index:1; font:500 1.45rem/1.35 var(--head); color:var(--dark); margin:1.6rem 0 0}
  .kreis{position:absolute; border-radius:50%; filter:blur(48px); opacity:.35; z-index:0; pointer-events:none}
  .k1{width:280px; height:280px; background:var(--orange); left:-40px; top:-90px}
  .k2{width:260px; height:260px; background:var(--blue); right:0; bottom:-110px}
  .k3{width:200px; height:200px; background:var(--green); right:-40px; top:-20px}
  .anmelde-box{margin:0; padding:2rem 2rem 2.2rem; border-radius:22px; box-shadow:var(--sh-3); border:0}
  .anmelde-box h1{font-size:1.6rem}
  .anmelde-box .knopf{min-height:2.9rem; font-size:1.05rem}
  @media (max-width:860px){ .anmelde-buehne{grid-template-columns:1fr; gap:1rem; min-height:0} .anmelde-bild{padding:1rem 0} .kreis{display:none} }

  /* Schulsozialarbeit & Schülerbogen: Symbole in Texten */
  .sz-grund{display:inline-flex; align-items:center; gap:.3rem}
  .sz-grund .ik{width:.95em; height:.95em}
  .sz-pin{display:inline-grid; place-items:center; width:2rem; height:2rem; padding:0; filter:none; opacity:1; color:var(--muted)}
  .sz-pin:hover{color:var(--blue-d); border-color:var(--blue)}
  .sz-pin.an{color:#fff; background:var(--blue); border-color:var(--blue)}
  .sz-notiz-da{color:var(--blue-d)}
  .sz-karte{border-radius:var(--rad-karte); transition:transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve)}
  .sz-karte:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
  .sozial-melden .ik,.ha-brief-knopf .ik{width:1.05em; height:1.05em}
  .vb-kopf{box-shadow:var(--sh-1)}

  /* Rollbalken dezent */
  *{scrollbar-width:thin; scrollbar-color:#C6D1DB transparent}
}

@keyframes auftauchen{from{opacity:0; transform:translateY(6px) scale(.985)} to{opacity:1; transform:none}}

/* Weniger Bewegung, wenn im System so eingestellt */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .kachel:hover,.sz-karte:hover{transform:none}
}

/* Linien-Symbole (ikonen.svg) in Markern, Knöpfen und Tabellen – statt Textzeichen */
.tendenz{display:inline-flex; align-items:center; gap:.25rem}
.tendenz .ik{width:1.05rem; height:1.05rem; stroke-width:2.25}
.tendenz.leise .ik{color:var(--muted)}
.mk-pfeil .ik{width:.85rem; height:.85rem; stroke-width:2.5; vertical-align:-.1em}
.warn,.abw,.marke{display:inline-flex; align-items:center; gap:.3rem}
.warn .ik,.abw .ik,.marke .ik{width:.95em; height:.95em; stroke-width:2.25}
.kz b.rot-text .ik{color:inherit}
.warnliste li .ik{width:1em; height:1em; margin-right:.2rem; color:var(--r)}
.gut .ik{width:1em; height:1em; stroke-width:2.5}
.kz b .ik{width:.8em; height:.8em; vertical-align:-.05em; stroke-width:2.25}
.ks-symbol .ik{width:1.8rem; height:1.8rem}
.knopf .ik{width:1.1em; height:1.1em; vertical-align:-.2em}
.ha-zelle .ik{width:1.1rem; height:1.1rem; stroke-width:2.75}
.sz-grund .ik{width:.95em; height:.95em; margin-right:.25rem; vertical-align:-.12em}
td.aufklapp .ik{width:1.1rem; height:1.1rem; transition:transform 200ms cubic-bezier(.23,1,.32,1)}
td.aufklapp.offen .ik{transform:rotate(180deg)}
.zurueck-link{display:inline-flex; align-items:center; gap:.3rem; text-decoration:none}
.zurueck-link .ik{width:1rem; height:1rem}
@media (prefers-reduced-motion: reduce){ td.aufklapp .ik{transition:none} }
.info-ok .ik{width:1em; height:1em; stroke-width:2.5; vertical-align:-.15em}

/* Schulsozialarbeit: Notizen bearbeiten, Dateien anhängen */
.sz-notiz-neu{flex-wrap:wrap}
.sz-notiz-knoepfe{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-left:auto}
.sz-datei-waehlen{cursor:pointer}
.sz-notiz-aktionen{margin-left:auto; display:inline-flex; gap:.9rem; align-items:center}
.sz-notiz-aktionen .u-weg{margin-left:0; display:inline-flex; align-items:center; gap:.25rem}
.sz-notiz-aktionen .u-weg:not([data-notiz-weg]):hover{color:var(--blue)}
.sz-notiz-aktionen .ik{width:.95rem; height:.95rem}
.sz-notiz.bearbeiten{display:flex; flex-direction:column; gap:.5rem; border-left-color:var(--orange)}
.sz-notiz.bearbeiten select{max-width:20rem}
.sz-anhaenge{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem}
.sz-anhang{display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:.25rem .3rem .25rem .55rem; font-size:.88rem}
.sz-anhang a{display:inline-flex; align-items:center; gap:.3rem; color:var(--blue-d); text-decoration:none; font-weight:600; max-width:22rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sz-anhang a:hover{text-decoration:underline}
.sz-anhang .ik{width:.95rem; height:.95rem}
.sz-anhang-weg{border:0; background:none; color:var(--muted); cursor:pointer; padding:.1rem; border-radius:4px; display:inline-grid; place-items:center}
.sz-anhang-weg:hover{color:var(--r); background:var(--r-l)}
.sz-notiz-kopf{flex-wrap:wrap; row-gap:.25rem}
.sz-notiz-kopf .sz-art,.sz-notiz-kopf>.leise,.sz-notiz-aktionen .u-weg{white-space:nowrap}

/* Kennzahlen als Knopf (Schulsozialarbeit): anklicken zeigt die Kinder dahinter */
.kz-knopf{font:inherit; color:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:.15rem;
  transition:border-color 150ms ease, box-shadow 150ms ease, transform 120ms ease-out}
.kz-knopf:not(:disabled):hover{border-color:var(--blue)}
.kz-knopf:not(:disabled):active{transform:scale(.98)}
.kz-knopf:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.kz-knopf.an{border-color:var(--blue); box-shadow:0 0 0 2px var(--blue) inset; background:#F2F8FE}
.kz-knopf:disabled{cursor:default}

/* Akte der Schulsozialarbeit: Verlauf mit Datum/Uhrzeit, Art, Thema; Ereignisse aus dem Programm dezenter */
.sz-akte-kopf{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:.6rem}
.sz-akte-kopf h3{margin:0; margin-right:auto}
.sz-akte-neu{display:flex; flex-direction:column; gap:.5rem; align-items:stretch; background:#fff; border:1px solid var(--line); border-radius:12px; padding:.75rem .9rem; margin-bottom:1rem}
.sz-akte-felder{display:grid; grid-template-columns:minmax(11rem,16rem) 1fr minmax(11rem,13rem); gap:.6rem}
.sz-akte-felder label{display:flex; flex-direction:column; gap:.2rem; font-size:.8rem; color:var(--muted); font-weight:600}
.sz-akte-felder select,.sz-akte-felder input{font:inherit; font-size:.95rem; color:var(--ink)}
.sz-akte-neu textarea{width:100%}
.sz-akte-verlauf{list-style:none; margin:0; padding:0; position:relative}
.sz-akte-verlauf::before{content:""; position:absolute; left:7.45rem; top:.4rem; bottom:.4rem; width:2px; background:var(--line)}
.sz-akte-monat{font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:.9rem 0 .35rem 9rem; position:relative}
.sz-akte-eintrag{display:grid; grid-template-columns:6.4rem 2.1rem 1fr; gap:.45rem; align-items:start; padding:.35rem 0; position:relative}
.sz-akte-zeit{text-align:right; display:flex; flex-direction:column; line-height:1.25; padding-top:.35rem}
.sz-akte-zeit b{font-size:.9rem; color:var(--ink)} .sz-akte-zeit span{font-size:.8rem; color:var(--muted)}
.sz-akte-punkt{width:2rem; height:2rem; border-radius:50%; background:#fff; border:2px solid var(--blue); color:var(--blue); display:grid; place-items:center; z-index:1}
.sz-akte-punkt .ik{width:1rem; height:1rem}
.sz-akte-inhalt{background:#fff; border:1px solid var(--line); border-radius:10px; padding:.55rem .8rem; min-width:0}
.sz-akte-titel{display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline; margin-bottom:.25rem}
.sz-akte-titel b{color:var(--ink)}
.sz-akte-text{white-space:normal; line-height:1.5}
.sz-akte-eintrag.kinderschutz .sz-akte-punkt{border-color:var(--r); color:var(--r)}
.sz-akte-eintrag.kinderschutz .sz-akte-inhalt{border-color:#F0B7B2; background:#FFF8F7}
.sz-akte-eintrag.ereignis .sz-akte-punkt{border-color:var(--line-2); color:var(--muted); background:var(--soft)}
.sz-akte-eintrag.ereignis .sz-akte-inhalt{background:var(--soft); border-style:dashed}
.sz-akte-eintrag.ereignis .sz-akte-titel{font-weight:600; color:var(--ink-2); font-size:.92rem}
.sz-akte-eintrag.bearbeiten .sz-akte-punkt{border-color:var(--orange); color:var(--orange)}
.sz-akte-eintrag.bearbeiten .sz-akte-inhalt{margin:0}
.sz-akte .sz-notiz-aktionen{margin-left:auto}
@media (max-width:760px){
  .sz-akte-felder{grid-template-columns:1fr}
  .sz-akte-verlauf::before{left:.95rem}
  .sz-akte-monat{padding-left:2.6rem}
  .sz-akte-eintrag{grid-template-columns:2.1rem 1fr}
  .sz-akte-zeit{grid-column:2; grid-row:1; flex-direction:row; gap:.4rem; text-align:left; padding:0}
  .sz-akte-punkt{grid-column:1; grid-row:1 / span 2}
  .sz-akte-inhalt{grid-column:2}
}
@media print{ .sz-akte-neu,.sz-notiz-aktionen{display:none} }

/* Versetzung & Schullaufbahn (Reiter „Noten“) */
.sl{display:inline-block;font-size:.82rem;font-weight:700;border-radius:99px;padding:.1rem .6rem;white-space:nowrap;line-height:1.5}
.sl-gut{background:var(--g-l);color:var(--g)}
.sl-gefaehrdet{background:var(--y-l);color:#7A5500}
.sl-stark{background:#FFE3CC;color:#9A4A00}
.sl-aus{background:var(--r-l);color:var(--r)}
.sl-gym{background:var(--blue-l);color:var(--blue-d)}
.sl-real{background:#EEF1F5;color:var(--ink-2)}
.sl-hinweis{opacity:.75;font-weight:600}
.sl-kasten{margin-top:1.2rem;border:1px solid var(--line);border-radius:var(--rad-karte);padding:1rem 1.2rem;background:var(--soft)}
.sl-kasten h3{margin:0 0 .6rem}
.sl-kasten h4{margin:.2rem 0 .4rem;font-size:1rem}
.sl-kasten p{margin:.3rem 0}
.sl-teile{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem}
.sl-teile>div{min-width:0}
.sl-liste{margin:.2rem 0 .4rem;padding-left:1.1rem;display:flex;flex-direction:column;gap:.3rem}
.sl-liste .ik{width:1em;height:1em;color:var(--g);vertical-align:-.12em}
.sl-baustein{background:var(--card);border:1px dashed var(--line-2);border-radius:var(--rad);padding:.5rem .7rem}
.sl-baustein .knopf{margin-left:.5rem}
.sl-erklaerung{margin:.8rem 0}
.sl-erklaerung summary{cursor:pointer}
.sl-erklaerung-text{margin-top:.6rem;max-width:62rem}
.sl-erklaerung-text li{margin:.35rem 0}
.sl-erklaerung-text .sl{margin-right:.4rem}
.sl-tabelle{max-width:52rem}
.sl-foerder{background:#F1ECFB;color:#5B3FB0}
.klassenprofil{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;background:var(--soft);border:1px solid var(--line);border-radius:var(--rad);padding:.7rem 1rem;margin:.6rem 0 1rem}
.klassenprofil label{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.klassenprofil select{padding:.35rem .5rem}

/* Schülerakte (Reiter „Stammdaten“) */
.schuelerakte .ak-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin:.4rem 0 1rem}
.ak-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1.2rem;align-items:start}
@media (max-width:1100px){.ak-raster{grid-template-columns:1fr}}
.ak-spalte{display:flex;flex-direction:column;gap:1.2rem;min-width:0}
.ak-karte{border:1px solid var(--line);border-radius:var(--rad-karte);padding:1rem 1.1rem;background:var(--card)}
.ak-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;margin-bottom:.7rem}
.ak-kopf h3{margin:0;display:flex;align-items:center;gap:.4rem;margin-right:auto}
.ak-kopf h3 .ik{width:1.1em;height:1.1em;color:var(--blue)}
.ak-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.4rem 1.2rem;margin:0}
.ak-liste dt{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ak-liste dd{margin:0 0 .3rem;word-break:break-word}
.ak-liste .breit,.ak-formular .breit{grid-column:1/-1}
.ak-formular{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.6rem .9rem}
.ak-formular label{display:flex;flex-direction:column;gap:.2rem;font-size:.85rem;color:var(--ink-2)}
.ak-formular label.haken{flex-direction:row;align-items:center;gap:.4rem;color:var(--ink)}
.ak-formular input,.ak-formular select,.ak-formular textarea{font:inherit;padding:.4rem .5rem}
.ak-unterformular{background:var(--soft);border:1px solid var(--line);border-radius:var(--rad);padding:.8rem;margin:.5rem 0}
.ak-knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:flex-end}
.ak-quelle{font-size:.72rem;font-weight:700;border-radius:99px;padding:.05rem .5rem;background:#EEF1F5;color:var(--ink-2)}
.ak-quelle.danis{background:var(--blue-l);color:var(--blue-d)}
.ak-kontakte{display:flex;flex-direction:column;gap:.6rem}
.ak-kontakt{border:1px solid var(--line);border-radius:var(--rad);padding:.6rem .8rem}
.ak-kontakt.notfall{border-left:4px solid var(--r)}
.ak-kontakt-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.ak-rolle{color:var(--muted);font-size:.85rem}
.ak-kontakt-daten{margin-top:.2rem}
.ak-tel{font-weight:600;white-space:nowrap}
.ak-mail{user-select:all}
.ak-marke{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:700;border-radius:99px;padding:.1rem .6rem;background:var(--g-l);color:var(--g)}
.ak-marke.rot{background:var(--r-l);color:var(--r)}
.ak-marke .ik{width:1em;height:1em}
.ak-aktionen{display:flex;gap:.4rem;margin-top:.4rem}
.ak-gesundheit{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:start;padding:.55rem 0;border-top:1px solid var(--line)}
.ak-gesundheit:first-of-type{border-top:0}
.ak-gesundheit.achtung b{color:var(--r)}
.ak-art{display:inline-block;font-size:.75rem;font-weight:700;border-radius:6px;padding:.08rem .45rem;background:var(--soft);border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.ak-notfall{color:var(--r);font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:.3rem}
.ak-notfall .ik{width:1em;height:1em}
.ak-neu{background:var(--soft);border:1px solid var(--line);border-radius:var(--rad);padding:.8rem;margin-bottom:.8rem}
.ak-verlauf{list-style:none;margin:0;padding:0}
.ak-monat{font:600 .8rem var(--head,inherit);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:.9rem 0 .3rem}
.ak-eintrag{display:grid;grid-template-columns:4.6rem 1.8rem minmax(0,1fr);gap:.5rem;padding:.5rem 0;border-top:1px solid var(--line)}
.ak-eintrag:has(.ak-formular){display:block}
.ak-zeit{display:flex;flex-direction:column;font-size:.85rem;font-variant-numeric:tabular-nums}
.ak-zeit span{color:var(--muted)}
.ak-punkt{width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;background:var(--blue-l);color:var(--blue-d)}
.ak-eintrag.ereignis .ak-punkt{background:var(--soft);color:var(--muted)}
.ak-eintrag.ereignis.dokument .ak-punkt{background:var(--g-l);color:var(--g)}
.ak-eintrag.ereignis.sozial .ak-punkt{background:#FFF1DA;color:#C27C00}
.ak-punkt .ik{width:1rem;height:1rem}
.ak-titel{font-weight:600}
.ak-text{margin-top:.2rem;color:var(--ink-2)}
.ak-dateien{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.35rem}
.ak-datei{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--line-2);border-radius:8px;padding:.15rem .5rem;font-size:.85rem;text-decoration:none;background:var(--card)}
.ak-datei .ik{width:1em;height:1em}
.ak-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:0 .1rem}
.ak-x:hover{color:var(--r)}
.sp-balken{height:14px;border-radius:99px;background:var(--soft);border:1px solid var(--line);overflow:hidden;margin:.4rem 0 .6rem;max-width:40rem}
.sp-balken i{display:block;height:100%;background:var(--blue);border-radius:99px}
.sp-balken i.voll{background:var(--r)}
.sp-tabelle{max-width:40rem}
/* Meine Fächer & Kurse: Interview Klassenleitung */
.interview-antwort{display:flex; gap:.5rem; margin:.4rem 0 .8rem}
.interview-antwort .knopf{min-width:5rem}
.co-leitung{margin-top:1rem; padding-top:.6rem; border-top:1px solid var(--line)}
.co-leitung h3{font-size:1rem; margin:0 0 .4rem}
/* Absprache der Fachkonferenz (bewertungsregeln.py): Aufteilung, offene Leistungen, Punkte → Note */
.bewertung-zeile{display:flex; flex-wrap:wrap; gap:.3rem .8rem; align-items:center; margin:0 0 .6rem; padding:.45rem .8rem;
  background:var(--blue-l); border-radius:var(--rad); font-size:.9rem; color:var(--ink-2); grid-column:1 / -1}
.absprachen{margin:0 0 .9rem; padding:.6rem 1rem}
.absprachen summary{cursor:pointer}
.absprachen-raster{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:.4rem 1.4rem; margin-top:.4rem}
.absprachen-raster h3{font-size:.95rem; margin:.6rem 0 .2rem}
.absprachen-raster p{margin:0 0 .35rem; font-size:.9rem}
.punkte-leiste{display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center; margin:0 0 .6rem}
.punkte-leiste input[type=number]{width:4.5rem}
.spalten-tabelle .sp-punkte input{width:4rem}
/* Abschlussprüfung: Vornote als Kommazahl (zwei Stellen, nicht gerundet) */
.vornote-feld{width:4.6rem; text-align:center; font-weight:600; font-size:1.05rem; padding:.35rem .4rem; border:1px solid var(--line-2); border-radius:8px}
.notentabelle .vornote-feld, table.noten .vornote-feld{width:3.8rem; font-size:.95rem; padding:.2rem}
.vornote-feld.falsch{border-color:var(--r); background:var(--r-l)}
/* Sonstiges: „Eigene Leistung“ mit selbst eingetragener Bezeichnung */
.bereich .sonst input.sonst-eigene, .sonst-eigene{flex-basis:100%; width:100%; text-align:left; font-weight:normal; padding:.3rem .5rem; border:1px solid var(--line-2); border-radius:8px; font-size:.9rem}
.sonst-eigene.fehlt{border-color:var(--y); background:var(--y-l)}
/* Kurs-Dialog: Kursliste aus WebUntis (CSV) einlesen */
.kurs-import{display:flex; flex-wrap:wrap; gap:.4rem .8rem; align-items:center; margin:.2rem 0 .8rem; padding:.5rem .7rem; background:var(--soft); border-radius:var(--rad)}
.kurs-import label.knopf{cursor:pointer}
.kurs-import #kImport{flex-basis:100%}
.kurs-import #kImport p{margin:.2rem 0 0}
/* Verwaltung: Zeugnisformulierungen */
.zt-text{display:block; width:100%; font:inherit; padding:.4rem .6rem; border:1px solid var(--line-2); border-radius:8px}
.zt-vw{margin:.4rem 0} .zt-vw summary{cursor:pointer; font-weight:bold; padding:.3rem 0}
.zt-vw-satz{padding:.4rem 0; border-bottom:1px solid var(--line)}
.zt-vw-satz.aus textarea{color:var(--muted); background:var(--soft)}
.zt-vw-knoepfe{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.3rem}
#ztDazu{margin-top:.4rem}
/* Gewichtung der Lerngruppe (Doppelklick) */
.gew-start{cursor:pointer; user-select:none}
.gew-start:hover{color:var(--blue-d); text-decoration:underline dotted}
.gew-tabelle input{width:4.6rem}

/* ═════════ Zeugnis (zeugnis.js) ═════════ */
.zg-noten-link{margin-left:auto; align-self:center; display:inline-flex; gap:.35rem; align-items:center; font-size:.92rem; padding:.3rem .2rem; text-decoration:none}
.zg-rechts{margin-left:auto}
.zg-st{display:inline-block; font-size:.82rem; font-weight:bold; padding:.1rem .6rem; border-radius:999px; white-space:nowrap; border:1px solid}
.zg-st.rot{background:var(--r-l); color:#9B2A22; border-color:#F0B7B2}
.zg-st.gelb{background:var(--y-l); color:#7A5600; border-color:#F1D98A}
.zg-st.gruen{background:var(--g-l); color:#2C6E1E; border-color:#BFE0B3}
.zg-st.blau{background:var(--blue-l); color:var(--blue-d); border-color:#B9D9F2}
.zg-zahl{font-size:.8rem; font-weight:bold; border-radius:999px; padding:.05rem .5rem; white-space:nowrap}
.zg-zahl.rot{background:var(--r-l); color:#9B2A22} .zg-zahl.gelb{background:var(--y-l); color:#7A5600}
.zg-profil{font-size:.8rem; background:var(--soft); border:1px solid var(--line-2); border-radius:6px; padding:0 .4rem; white-space:nowrap}
.zg-profil.abgang{background:#F3ECFB; border-color:#D9C7F0}
.zg-kacheln{display:grid; grid-template-columns:repeat(4, minmax(110px,1fr)) minmax(280px,1.6fr); gap:1rem; margin-bottom:1.25rem}
.zg-kacheln .karte{margin:0}
.zg-kachel{display:flex; flex-direction:column; justify-content:center; border-top:4px solid var(--line-2)}
.zg-kachel b{font:400 2.2rem/1 var(--head); color:var(--dark)}
.zg-kachel span{color:var(--muted)}
.zg-kachel.gruen{border-top-color:var(--green)} .zg-kachel.gelb{border-top-color:var(--orange)}
.zg-kachel.blau{border-top-color:var(--blue)} .zg-kachel.rot{border-top-color:var(--r)}
.zg-termine{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; align-items:center}
.zg-termine h3{flex-basis:100%; margin:0}
.zg-termine label{display:flex; flex-direction:column; font-size:.9rem; color:var(--ink-2)}
.zg-termine input{font:inherit; padding:.3rem .5rem; border:1px solid var(--line-2); border-radius:8px}
.zg-termine small{flex-basis:100%}
.zg-tabelle-karte{padding:.4rem .6rem; overflow:auto}
.zg-tabelle td,.zg-tabelle th{padding:.45rem .6rem; text-align:center}
.zg-tabelle .links{text-align:left}
.zg-tabelle a{text-decoration:none}
.zg-aktionen{white-space:nowrap; text-align:right !important}
.zg-aktionen .knopf{text-decoration:none; display:inline-flex; gap:.3rem; align-items:center}
.zg-offen summary{cursor:pointer}
.zg-offen-kind{border-top:1px solid var(--line); padding:.5rem 0}
.zg-offen-kind > a{font-weight:bold}
.zg-pruef{list-style:none; margin:.3rem 0 0; padding:0; display:flex; flex-direction:column; gap:.25rem}
.zg-pruef li{display:flex; gap:.45rem; align-items:flex-start; font-size:.93rem}
.zg-pruef li .ik{flex:0 0 1rem; margin-top:.15rem}
.zg-pruef li.fehlt .ik{color:var(--r)} .zg-pruef li.hinweis .ik{color:var(--y)}

/* Texte & Bemerkungen – wie die KLV-Zensureneingabe: ganze Breite, Kinder · Kopf und Noten · große Textfelder */
main:has(.zg-raster){max-width:none; padding-left:1.25rem; padding-right:1.25rem}
.zg-raster{display:grid; grid-template-columns:205px minmax(330px,400px) minmax(0,1fr); gap:1rem; align-items:start}
.zg-raster .karte{margin:0}
.zg-raster .zg-liste{position:sticky; top:.75rem; max-height:calc(100vh - 1.5rem); overflow:auto; padding:.5rem}
.zg-mitte,.zg-texte{display:flex; flex-direction:column; gap:1rem; min-width:0}
.zg-liste{display:flex; flex-direction:column; gap:.1rem}
.zg-kind{display:flex; align-items:center; gap:.5rem; padding:.35rem .55rem; border-radius:8px; text-decoration:none; color:inherit; border:1px solid transparent; font-size:.95rem}
.zg-kind span:nth-child(2){flex:1}
.zg-kind:hover{background:var(--soft)}
.zg-kind.aktiv{background:var(--blue-l); border-color:var(--blue)}
.zg-punkt{width:.7rem; height:.7rem; border-radius:50%; background:var(--line-2); flex:0 0 auto}
.zg-punkt.rot{background:var(--r)} .zg-punkt.gelb{background:var(--orange)} .zg-punkt.gruen{background:var(--green)} .zg-punkt.blau{background:var(--blue)}
.zg-kopf{display:flex; flex-direction:column; gap:.6rem; border-top:4px solid var(--orange)}
.zg-kopf-name{display:flex; align-items:center; gap:.5rem; text-align:center}
.zg-kopf-name > div{flex:1; display:flex; flex-direction:column; gap:.1rem}
.zg-kopf-name h2{margin:0; font-size:1.55rem; line-height:1.15}
.zg-kopf-name a[aria-disabled]{opacity:.35; pointer-events:none}
.zg-kopf-zeile{display:flex; gap:.4rem; align-items:center; flex-wrap:wrap}
.zg-kopf-zeile .knopf{text-decoration:none; display:inline-flex; gap:.3rem; align-items:center}
.zg-kopf-zeile select{font:inherit; padding:.25rem .4rem; border:1px solid var(--line-2); border-radius:8px}
.zg-kopf p{margin:0}
.zg-pruef-karte summary{cursor:pointer; font-weight:bold; display:flex; gap:.4rem; align-items:center}
.zg-pruef-karte{border-top:1px solid var(--line); padding-top:.5rem}
/* große Textfelder; Stufe A–E direkt im Kopf von AV und SV */
.zg-block textarea{min-height:6.5rem; font-size:1.02rem}
.zg-feld-knoepfe{margin-left:auto; display:inline-flex; gap:.3rem; flex-wrap:wrap}
.zg-stufen{display:inline-flex; gap:.2rem}
.zg-stufe{font:inherit; font-weight:bold; width:2rem; height:1.85rem; border:1px solid var(--line-2); background:#fff; border-radius:6px; cursor:pointer; color:var(--ink-2); padding:0}
.zg-stufe:hover:not(:disabled){border-color:var(--blue)}
.zg-stufe.vorschlag{border:2px dashed var(--blue)}
.zg-stufe.an.A{background:var(--A); border-color:var(--A); color:#fff} .zg-stufe.an.B{background:var(--B); border-color:var(--B); color:#1f3510}
.zg-stufe.an.C{background:var(--C); border-color:var(--C); color:#fff} .zg-stufe.an.D{background:var(--D); border-color:var(--D); color:#3d2a00}
.zg-stufe.an.E{background:var(--E); border-color:var(--E); color:#fff}
.zg-avsv-info{font-size:.9rem; display:inline-flex; gap:.3rem; align-items:center; flex-wrap:wrap}
/* Noten ändern direkt in der Maske */
.zg-noten.aendern{border-color:var(--blue); box-shadow:var(--ring)}
.zg-note-ein{width:2.3rem; text-align:center; font:inherit; font-weight:bold; padding:.05rem; border:1px solid var(--line-2); border-radius:6px}
.zg-note-ein:focus,.zg-kurs-ein:focus{outline:none; border-color:var(--blue); box-shadow:var(--ring)}
.zg-kurs-ein{font:inherit; padding:0 .15rem; border:1px solid var(--line-2); border-radius:6px}
.zg-karte-kopf{display:flex; align-items:baseline; gap:.8rem; margin-bottom:.4rem}
.zg-karte-kopf h3{margin:0}
.zg-karte-kopf a{text-decoration:none; display:inline-flex; gap:.25rem; align-items:center}
.zg-noten-tabelle{width:100%}
.zg-noten-tabelle td,.zg-noten-tabelle th{padding:.28rem .5rem; text-align:center}
.zg-noten-tabelle .links{text-align:left}
.zg-noten-tabelle b{font-size:1.05rem}
.zg-noten-tabelle tr.sprung td{background:var(--y-l)}
.zg-schlecht{color:#9B2A22}
.zg-sprung{color:var(--y); margin-left:.2rem; vertical-align:-.1rem}
.zg-fehltage{margin:.7rem 0 0; color:var(--ink-2)}
.zg-feld{margin-bottom:.8rem}
.zg-feld:last-child{margin-bottom:0}
.zg-feld-kopf{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.25rem}
.zg-feld-kopf label{margin-right:.3rem}
.zg-feld textarea{width:100%; font:inherit; padding:.55rem .7rem; border:1px solid var(--line-2); border-radius:10px; resize:vertical; line-height:1.45}
.zg-feld textarea:focus{outline:none; border-color:var(--blue); box-shadow:var(--ring)}
.zg-gespeichert{font-size:.8rem; color:var(--g)}
.zg-avsv-kopf{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.5rem}
.zg-avsv-kopf h3{margin:0 .4rem 0 0}
.zg-avsv-kopf a{text-decoration:none}
.zg-verteilung{display:flex; align-items:flex-end; gap:.4rem; margin:.2rem 0 .8rem; flex-wrap:wrap}
.zg-balken{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; width:2.2rem; height:4.2rem}
.zg-balken i{display:block; width:1.4rem; border-radius:4px 4px 0 0; min-height:2px; max-height:2.6rem}
.zg-balken span{font-size:.78rem; color:var(--muted)}
.zg-balken b{font-size:.75rem; line-height:1.1}
.st-bg.A{background:var(--A)} .st-bg.B{background:var(--B)} .st-bg.C{background:var(--C)} .st-bg.D{background:var(--D)} .st-bg.E{background:var(--E)}
.zg-je-fach{margin-left:.6rem; font-size:.88rem; align-self:center}
.zg-je-fach summary{cursor:pointer}
.zg-je-fach span{display:inline-flex; gap:.25rem; align-items:center; margin:.2rem .7rem 0 0}

.zg-floskel-dlg{width:min(980px,96vw)}
.zg-floskel-rumpf{display:flex; flex-direction:column; gap:.6rem}
.zg-themen{display:flex; flex-wrap:wrap; gap:.3rem}
.zg-floskel-rumpf input[type=search]{font:inherit; padding:.45rem .7rem; border:1px solid var(--line-2); border-radius:10px}
.zg-floskel-liste{display:flex; flex-direction:column; gap:.2rem}
.zg-floskel{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; border-radius:8px; padding:.1rem .2rem}
.zg-floskel > button:first-child{flex:1 1 30rem; font:inherit; text-align:left; background:none; border:1px solid transparent; border-radius:8px; padding:.35rem .5rem; cursor:pointer; color:inherit}
.zg-floskel > button:first-child:hover,.zg-floskel > button:first-child:focus-visible{background:var(--blue-l); border-color:var(--blue)}
.zg-floskel.nachteilig > button:first-child{color:#7A3B00}
.zg-satz-dlg{width:min(760px,96vw)}
.zg-satz{display:flex; flex-direction:column; gap:.9rem}
.zg-satz-zeile{display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap}
.zg-satz-zeile > b{flex:0 0 6.5rem; padding-top:.35rem}
.zg-satz-zeile select{font:inherit; padding:.35rem .5rem; border:1px solid var(--line-2); border-radius:8px; max-width:100%}
.zg-haken{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.2rem .8rem; flex:1}
.zg-satz-vorschau{background:var(--soft); border-left:4px solid var(--blue); border-radius:8px; padding:.8rem 1rem; font-size:1.05rem}

/* Zeugniskonferenz – Vorbild KLV-Präsentation, im Schuldesign */
.zg-kk-rahmen{display:flex; flex-direction:column; gap:1rem}
.zg-kk-rahmen:fullscreen,.zg-kk-rahmen.voll{background:var(--bg); padding:1.2rem 2rem; overflow:auto; font-size:1.15rem}
.zg-kk-rahmen.voll{position:fixed; inset:0; z-index:100}
.zg-kk-leiste{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.zg-kk-leiste select{font:inherit; padding:.45rem .6rem; border:1px solid var(--line-2); border-radius:10px; min-width:16rem}
.zg-kk-leiste .knopf{text-decoration:none; display:inline-flex; gap:.35rem; align-items:center}
.zg-kk{background:#fff; border:1px solid var(--line); border-top:6px solid var(--orange); border-radius:var(--rad-karte); padding:1.4rem 2rem 1.8rem; box-shadow:var(--sh-1)}
.zg-kk-kopf{display:flex; gap:2rem; align-items:flex-end; border-bottom:2px solid var(--line); padding-bottom:.8rem}
.zg-kk-kopf h1{font-size:2.6rem; margin:0}
.zg-kk-kopf > div:first-child span{color:var(--muted)}
.zg-kk-klasse{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:.2rem}
.zg-kk-klasse b{font:400 2rem var(--head); color:var(--dark)}
.zg-kk-info{display:flex; flex-direction:column; border-bottom:2px solid var(--line)}
.zg-kk-zeile{display:grid; grid-template-columns:11rem 1fr; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--line)}
.zg-kk-zeile:last-child{border-bottom:0}
.zg-kk-zeile > b{color:var(--ink-2)}
.zg-kk-zahlen{display:flex; gap:2rem; flex-wrap:wrap; padding:.6rem 0; color:var(--blue-d); border-bottom:2px solid var(--line)}
.zg-kk-zahlen b{font-size:1.2rem; margin-left:.3rem}
.zg-kk-zahlen span:nth-last-child(-n+2){color:var(--g)}
.zg-kk-rumpf{display:grid; grid-template-columns:1fr 210px; gap:2rem; margin-top:1rem}
.zg-kk-faecher{display:grid; grid-template-columns:1fr 1fr; gap:0 2.5rem}
.zg-kk-fach{display:flex; align-items:baseline; gap:.5rem; padding:.3rem .3rem; border-radius:6px; font-size:1.15rem}
.zg-kk-fach small{color:var(--muted); font-size:.8rem; font-weight:bold}
.zg-kk-punkte{flex:1; border-bottom:2px dotted var(--line-2); transform:translateY(-.25rem)}
.zg-kk-fach > b{font:500 1.5rem var(--head); min-width:1.6rem; text-align:center}
.zg-kk-fach > b.vs{font-style:italic; color:var(--muted)}
.zg-kk-vorher{color:var(--blue-d); min-width:2.2rem}
.zg-kk-fach.schlecht{background:var(--r-l)} .zg-kk-fach.schlecht > b{color:#9B2A22}
.zg-kk-fach.sprung .zg-kk-vorher{font-weight:bold}
.zg-kk-bericht{display:flex; flex-direction:column}
.zg-kk-bild{background:var(--g-l); border:1px solid #BFE0B3; border-radius:14px; padding:1rem; display:flex; flex-direction:column; align-self:start}
.zg-kk-bild h3{text-align:center; margin:0 0 .5rem}
.zg-kk-saeulen{display:flex; gap:.35rem; height:150px; align-items:stretch}
.zg-kk-saeulen > div{flex:1; display:grid; grid-template-rows:1fr auto auto; justify-items:center}
.zg-kk-saeulen i{align-self:end; width:70%; background:var(--green); border-radius:4px 4px 0 0; min-height:2px}
.zg-kk-saeulen i.schlecht{background:var(--r)}
.zg-kk-saeulen b{font-size:.85rem; min-height:1.1rem}
.zg-kk-saeulen span{font-size:.8rem; color:var(--muted)}
.zg-kk-bild p{text-align:center; margin:.7rem 0 0; color:var(--g); font-size:1.1rem}
.zg-druck p{max-width:60rem}
.zg-druck-fuss{display:flex; align-items:center; gap:1rem; margin-top:1rem}
.zg-druck-fuss .knopf{margin-left:auto; display:inline-flex; gap:.4rem; align-items:center}
@media (max-width:1250px){ .zg-raster{grid-template-columns:190px minmax(0,1fr)} .zg-texte{grid-column:2} }
@media (max-width:1100px){
  .zg-kacheln{grid-template-columns:repeat(2,1fr)} .zg-termine{grid-column:1 / -1}
  .zg-raster,.zg-kk-rumpf{grid-template-columns:1fr} .zg-texte{grid-column:auto} .zg-raster .zg-liste{position:static; max-height:14rem}
  .zg-kk-faecher{grid-template-columns:1fr}
}

/* Noten ins Zeugnis übertragen – danach ist die Liste der Fachlehrkräfte gesperrt (Reiter Zeugnis → Stand) */
.zg-sperre{display:flex; align-items:center; gap:.9rem; margin-bottom:1.25rem; border-left:4px solid var(--blue)}
.zg-sperre > .ik{flex:0 0 1.3rem; width:1.3rem; height:1.3rem; color:var(--blue)}
.zg-sperre > div{flex:1; display:flex; flex-direction:column; gap:.15rem}
.zg-sperre.an{border-left-color:var(--green)} .zg-sperre.an > .ik{color:var(--green)}
.sperr-hinweis{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:.6rem 0}
.sperr-hinweis a{margin-left:auto; display:inline-flex; gap:.25rem; align-items:center}
.sperr-marke{margin-left:.35rem; color:var(--muted); vertical-align:-.15rem}