@font-face { font-family:"Atkinson Hyperlegible"; src:url(/schriften/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Atkinson Hyperlegible"; src:url(/schriften/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Bricolage Grotesque"; src:url(/schriften/bricolage-grotesque-latin-wght-normal.woff2) format("woff2"); font-weight:200 800; font-style:normal; font-display:swap; }
:root {
  --bg:#F1F4F0; --surface:#FFFFFF; --ink:#18282B; --muted:#5A6B6E; --line:#D6DDD7; --rand:#6f7f7d;
  --accent:#0E6B5C; --accent-ink:#FFFFFF; --accent-soft:#DCEEE9; --mark:#F2B705; --mark-soft:#FBEFC2;
  --fehler:#a11a1a; --fehlerbg:#fdecea;
  --font-display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif; --font-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  /* alte Namen, die in den Seiten noch benutzt werden */
  --text:var(--ink); --akzent:var(--accent); --karte:var(--surface); --knopf:var(--accent); --knopftext:var(--accent-ink);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0F1A1C; --surface:#172528; --ink:#E7EFEC; --muted:#9BAFAF; --line:#2A3C3F; --rand:#7f9593;
    --accent:#4FC2AB; --accent-ink:#08201B; --accent-soft:#1C3A36; --mark:#F2B705; --mark-soft:#3A3213;
    --fehler:#ffb4ab; --fehlerbg:#3a1f1d; color-scheme:dark; }
}
* { box-sizing: border-box; }
body { margin:0; font:1.0625rem/1.55 var(--font-body); background:var(--bg); color:var(--ink); }
h1, h2, h3 { font-family:var(--font-display); line-height:1.15; text-wrap:balance; }
main { max-width:36rem; margin:0 auto; padding:1.5rem 1rem 3rem; }
main.breit { max-width:64rem; }
.karte { background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:1.5rem; }
h1 { margin-top:0; color:var(--ink); font-size:1.9rem; font-weight:800; }
h2 { font-weight:800; }
label { display:block; font-weight:700; margin-top:1rem; }
.hinweis { font-size:.95rem; color:var(--muted); margin:.15rem 0 0; }
input, select, textarea { display:block; width:100%; min-height:2.75rem; margin-top:.35rem; padding:.5rem .75rem; font:inherit; color:inherit; background:var(--surface); border:1.5px solid var(--rand); border-radius:8px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
button { margin-top:1.5rem; min-height:2.75rem; padding:.5rem 1.25rem; font:inherit; font-weight:700; color:var(--accent-ink); background:var(--accent); border:0; border-radius:8px; cursor:pointer; }
a { color:var(--accent); }
.fehler { background:var(--fehlerbg); color:var(--fehler); border:2px solid var(--fehler); border-radius:8px; padding:.75rem 1rem; margin-bottom:1rem; }
.fehler ul { margin:.25rem 0 0; padding-left:1.25rem; }
.testbox { background:var(--mark-soft); border-left:5px solid var(--mark); border-radius:4px; padding:.75rem 1rem; margin-bottom:1rem; }
.testbox p { margin:.5rem 0 0; }
.haken { display:flex; gap:.6rem; align-items:center; font-weight:400; margin-top:1rem; }
.haken input { display:inline-block; width:1.5rem; min-height:1.5rem; height:1.5rem; margin:0; accent-color:var(--accent); }
button.zweit { background:transparent; color:var(--ink); border:1.5px solid var(--rand); }
nav.verwaltung { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1rem; font-weight:700; }
.meldung { background:var(--accent-soft); border-left:5px solid var(--accent); border-radius:4px; padding:.75rem 1rem; margin-bottom:1rem; }
.person { border:1.5px solid var(--line); border-radius:10px; padding:1rem; margin-top:1rem; }
.person h2 { margin:0; font-size:1.15rem; }
.person .klein { font-size:.95rem; color:var(--muted); margin:.2rem 0; }
.marke { display:inline-block; font-size:.9rem; font-weight:700; padding:.1rem .6rem; border-radius:999px; border:1.5px solid var(--accent); }
.marke.wartet { background:var(--mark-soft); border-color:var(--mark); color:var(--ink); }
.rollenwahl { border:0; margin:.5rem 0 0; padding:0; }
.rollenwahl legend { font-weight:700; padding:0; }
.aktionen { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:.9rem 0 1.1rem; }
.aktionen[hidden], .aktionen > [hidden] { display:none; }
.aktionen .knopf { margin:0; }
.aktionen form, .aktionen details { margin:0; }
.aktionen button { margin:0; }
.aktionen > a:not(.knopf) { padding:.55rem .5rem; }
details summary { cursor:pointer; margin-top:.75rem; font-weight:700; color:var(--accent); }
table.protokoll { width:100%; border-collapse:collapse; font-size:.95rem; }
table.protokoll th, table.protokoll td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
.scroll { overflow-x:auto; }
.passkeybereich { text-align:center; }
.passkeybereich p { margin:.5rem 0; }
.passkeybereich .fehler { text-align:left; }
[hidden] { display:none !important; }

/* Kopfzeile mit Reitern (auf allen Seiten) */
header.top { position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1.5px solid var(--line); }
header.top .innen { max-width:64rem; margin:0 auto; padding:.3rem 1rem 0; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; padding-bottom:.35rem; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); }
.brand b { font-family:var(--font-display); font-size:1.35rem; font-weight:800; }
.logo { width:34px; height:34px; border-radius:50%; background:#fff; display:grid; place-items:center; flex:none; overflow:hidden; }
.logo img { width:100%; height:100%; object-fit:contain; display:block; }
.who { display:flex; align-items:center; gap:.6rem; font-size:.95rem; flex-wrap:wrap; }
.who form { margin:0; }
.who button { margin-top:0; min-height:2.25rem; padding:.2rem .9rem; font-size:.95rem; }
.rolle { background:var(--mark-soft); border:1.5px solid var(--mark); border-radius:999px; padding:.05rem .65rem; font-weight:700; font-size:.85rem; color:var(--ink); }
nav.tabs { display:flex; gap:.25rem; flex-wrap:wrap; }
nav.tabs a { padding:.6rem .8rem .5rem; font-weight:700; color:var(--muted); text-decoration:none; border-bottom:4px solid transparent; white-space:nowrap; }
nav.tabs a:hover { color:var(--ink); }
nav.tabs a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--mark); }

/* Startseite */
.eyebrow { font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 .25rem; }
.start h1 { font-size:2.1rem; margin-bottom:1rem; }
.hinweiskarte { background:var(--accent-soft); border-radius:12px; padding:.8rem 1rem; display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; font-weight:700; margin-bottom:.8rem; }
a.knopf { display:inline-block; padding:.4rem .95rem; border:1.5px solid var(--rand); background:var(--surface); color:var(--ink); border-radius:8px; text-decoration:none; font-weight:700; }
.raster { display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:1.25rem; }
@media (min-width: 48rem) { .raster { grid-template-columns:1fr 1fr; } }
.kachel { background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:1rem 1.1rem; }
.kachel h2 { margin:0 0 .5rem; font-size:1.25rem; }
.kachel ul { list-style:none; margin:0; padding:0; }
.kachel li { padding:.55rem 0; border-top:1px solid var(--line); }
.kachel li:first-child { border-top:0; }
.kachel .klein { color:var(--muted); font-size:.95rem; }

/* Einstellungen: Aussehen */
.schema { display:flex; align-items:center; gap:.6rem; }
.farbe { display:inline-block; width:1.4rem; height:1.4rem; border-radius:50%; border:1.5px solid var(--rand); flex:none; }
.farbe.gruen { background:#0e6b5c; } .farbe.blau { background:#1f5fa8; } .farbe.orange { background:#9a3d00; } .farbe.violett { background:#6b3fa0; }
input[type=color] { width:4rem; padding:.15rem; }
input.pos { width:5rem; display:inline-block; }
.reiterzeile { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.6rem; }
.reiterzeile .name { min-width:9rem; font-weight:700; }
.reiterzeile label { margin:0; font-weight:400; }
/* Supplierplan */
:root { --fzp:#2f5fff; --rot:#d4001c; --markiert:#ffe14d; }
@media (prefers-color-scheme: dark) { :root { --fzp:#8ab4ff; --rot:#ff8a8a; } }
.nur-vorlesen { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.reiter { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0; }
.reiter a { padding:.4rem .8rem; border:2px solid var(--akzent); border-radius:8px; text-decoration:none; font-weight:600; min-height:2.5rem; }
.reiter a[aria-current="page"] { background:var(--akzent); color:var(--knopftext); }
.reiter.klein a { padding:.2rem .6rem; font-size:.9rem; min-height:2rem; }
.klein { font-size:.95rem; }
.meine { list-style:none; margin:.25rem 0 1rem; padding:0; }
.meine li { border:1px solid var(--rand); border-radius:8px; padding:.5rem .75rem; margin:.4rem 0; }
.tagblock h2 { font-size:1.1rem; margin:1rem 0 0; }
mark.ich { background:var(--markiert); color:#111; padding:0 .2rem; border-radius:3px; font-weight:700; }
table.plan { border-collapse:separate; border-spacing:0; font-size:.85rem; line-height:1.3; min-width:62rem; }
table.plan th, table.plan td { border:1px solid var(--rand); padding:.25rem .4rem; text-align:left; vertical-align:top; }
table.plan thead th { position:sticky; top:0; background:var(--karte); z-index:2; }
table.plan th.biber, table.plan th.klasse { position:sticky; background:var(--karte); z-index:1; white-space:nowrap; }
table.plan th.biber { left:0; min-width:4.5rem; }
table.plan th.klasse { left:4.5rem; }
table.plan td.gef { color:#1f2933; }
table.plan td.s-fzp, .legende .s-fzp { color:var(--fzp); font-weight:600; }
table.plan td.s-rot, .legende .s-rot { color:var(--rot); font-weight:700; }
table.plan td.gef.s-fzp { color:#0b2fc2; }
table.plan td.gef.s-rot { color:#b00020; }
table.plan td.fehlt { min-width:5rem; }
table.plan tr.leer td, table.plan tr.leer th { height:.6rem; padding-top:0; padding-bottom:0; }
table.plan td.klasse { background:var(--karte); position:sticky; left:4.5rem; z-index:1; }
.gross { font-size:1.4rem; }
ul.liste { list-style:none; padding:0; margin:0 0 1rem; }
ul.liste li { border:1px solid var(--rand); border-radius:10px; padding:.6rem .9rem; margin-top:.5rem; }
blockquote.zitat { margin:.25rem 0; padding:.1rem .7rem; border-left:4px solid var(--rand); }
form.inline { display:inline; }
form.inline button { margin:0; min-height:2rem; padding:.1rem .7rem; font-size:.95rem; }
textarea { display:block; width:100%; margin-top:.35rem; padding:.5rem .75rem; font:inherit; color:inherit; background:var(--bg); border:2px solid var(--rand); border-radius:8px; }
textarea:focus-visible, select:focus-visible { outline:3px solid var(--akzent); outline-offset:2px; }
select { display:block; width:100%; min-height:2.75rem; margin-top:.35rem; padding:.5rem .75rem; font:inherit; color:inherit; background:var(--bg); border:2px solid var(--rand); border-radius:8px; }
/* Verlauf als Chat: älteste Nachricht oben, eigene rechts, andere links */
.personenwahl { max-height:18rem; overflow:auto; }
/* Umfragen */
.umfrage { border:1px solid var(--rand); border-radius:8px; padding:.25rem .6rem; margin:.3rem 0; background:var(--bg); font-size:.9rem; }
.umfrage p { margin:.15rem 0; }
.umfrage progress { display:block; width:100%; height:.9rem; accent-color:var(--akzent); }
ul.ergebnis, ul.antworten { list-style:none; margin:.4rem 0; padding:0; }
ul.ergebnis li { margin:.5rem 0; }
ul.antworten li { margin:.4rem 0; padding-left:.6rem; border-left:3px solid var(--rand); }
.umfrageformular { margin:1rem 0; }
.umfrageformular summary { cursor:pointer; font-weight:600; }
/* Dateien an Nachrichten */
ul.dateien { list-style:none; margin:.4rem 0; padding:0; }
ul.dateien li { margin:.25rem 0; padding-left:.6rem; border-left:3px solid var(--rand); }

/* Pinnwand */
.pinnwand { margin-top:1.25rem; }
.pinnwand .kopfzeile { display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap; }
.pinnwand .kopfzeile h2 { margin:0; }
.beitrag { background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:1rem 1.1rem; margin-top:.8rem; }
.beitrag.angeheftet { border-color:var(--mark); border-left-width:6px; }
.beitrag h3 { margin:0 0 .4rem; font-size:1.15rem; }
.beitrag p { margin:.4rem 0; }
.beitragstext { white-space:pre-line; overflow-wrap:anywhere; }
.beitrag .klein { color:var(--muted); font-size:.95rem; }
.beitrag form button { margin-top:.4rem; }
.beitrag .aktionen { display:flex; gap:.5rem; flex-wrap:wrap; }
button.gefahr { background:var(--fehlerbg); color:var(--fehler); border:2px solid var(--fehler); }

/* Zähler im Reiter (wie bei E-Mail-Programmen) */
.zaehler { display:inline-block; min-width:1.5rem; margin-left:.35rem; padding:0 .45rem; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:.85rem; line-height:1.5rem; text-align:center; }

/* Konten: eine Zeile je Person, Rest zum Aufklappen */
details.person > summary { cursor:pointer; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; min-height:2.75rem; }
details.person > summary .name { font-weight:800; font-size:1.1rem; }
details.person[open] > summary { margin-bottom:.5rem; }

.beitrag .reaktionen { align-items:center; }
.beitrag .reaktionen form { margin:0; }
button.reaktion { margin-top:0; }
button.reaktion[aria-pressed="true"] { background:var(--accent-soft); border:2px solid var(--accent); color:var(--ink); }
ul.kommentare { list-style:none; margin:0 0 1rem; padding:0; }
ul.kommentare li { padding:.7rem 0; border-top:1px solid var(--line); }
ul.kommentare li form button { margin-top:.4rem; }

/* Konten: Suche */
form.suche { margin:1rem 0 .5rem; }
form.suche .suchzeile { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
form.suche input { flex:1 1 14rem; width:auto; }
form.suche button { margin-top:.35rem; }
form.suche a.knopf { margin-top:.35rem; }

/* Neu in Nachrichten: Zeilen und Sprechblasen mit Neuem fallen auf */
.neu-marke { display:inline-block; font-size:.85rem; font-weight:800; padding:.05rem .55rem; border-radius:999px; background:var(--accent); color:var(--accent-ink); }
ul.kanalliste li.ungelesen, li.ungelesen { border-left:6px solid var(--mark); padding-left:.75rem; background:var(--mark-soft); border-radius:6px; }
li.ungelesen > a { font-weight:800; font-size:1.1rem; }
.neu-text { font-weight:700; }

/* Kalender */
.titelzeile { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; }
.titelzeile h1 { margin:.1rem 0 0; }
form.filter { display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap; margin:1rem 0; }
form.filter > div { flex:1 1 11rem; }
form.filter button { margin-top:0; }
h2.monat { text-transform:capitalize; margin:1.4rem 0 .4rem; }
.ev { --t:#7a6c99; background:var(--surface); border:1.5px solid var(--line); border-left:6px solid var(--t); border-radius:10px; padding:.75rem .9rem; margin-top:.6rem; display:grid; grid-template-columns:4rem 1fr auto; gap:.75rem; align-items:start; min-width:0; }
.ev.vergangen { opacity:.65; }
.ev h3 { margin:0; font-size:1.15rem; overflow-wrap:anywhere; }
.ev .meta { display:flex; gap:.4rem .8rem; flex-wrap:wrap; margin:.3rem 0 0; font-size:.95rem; color:var(--muted); }
.ev p.beitragstext { margin:.4rem 0 0; font-size:.95rem; }
.ev .art { font-weight:700; color:var(--ink); background:color-mix(in srgb, var(--t) 18%, var(--surface)); border:1.5px solid var(--t); border-radius:6px; padding:0 .45rem; }
.dbox { text-align:center; line-height:1.05; }
.dbox b { display:block; font-family:var(--font-display, inherit); font-size:1.8rem; font-weight:800; font-variant-numeric:tabular-nums; }
.dbox span { font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.art-ferien { --t:#2e8b57; } .art-ausflug { --t:#2f6fd0; } .art-konferenz { --t:#7a6c99; }
.art-veranstaltung { --t:#b7791f; } .art-elternabend { --t:#c8503c; } .art-freizeit { --t:#1f8a8a; }
@media (max-width: 40rem) { .ev { grid-template-columns:3.2rem 1fr; } .ev > a.knopf { grid-column:2; justify-self:start; } }
p.leer { padding:1rem 0; color:var(--muted); }

/* Nachrichtenliste: Zeit der letzten Aktivität rechts neben dem Namen */
li.ungelesen .zeit { font-weight:700; }

/* Chat-Ansicht wie WhatsApp: Blasen (eigene rechts, andere links), Tagestrenner, Uhrzeit unten rechts */
ul.nachrichten, ol.chat { list-style:none; margin:1rem 0; padding:.8rem .6rem; display:flex; flex-direction:column; gap:.35rem; background:color-mix(in srgb, var(--accent) 7%, var(--bg)); border-radius:12px; }
li.nachricht, li.blase { max-width:88%; min-width:min(100%, 12rem); padding:.35rem .75rem .3rem; border:1px solid var(--line); border-radius:12px; border-top-left-radius:3px; background:var(--surface); align-self:flex-start; box-shadow:0 1px 1px rgba(0,0,0,.08); }
li.nachricht.eigene, li.blase.eigene { align-self:flex-end; border-top-left-radius:12px; border-top-right-radius:3px; background:color-mix(in srgb, var(--accent) 20%, var(--surface)); border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
li.nachricht p, li.blase p { margin:.2rem 0; }
li.nachricht .text, li.blase .text { white-space:pre-wrap; overflow-wrap:anywhere; }
li.nachricht .kopf, li.blase .kopf { margin-bottom:0; }
li.nachricht:not(.eigene) .kopf strong, li.blase:not(.eigene) .kopf strong { color:var(--accent); }
li.blase .schritt { font-weight:700; }
.fuss { text-align:right; margin:.05rem 0 0; color:var(--muted); font-size:.85rem; }
.fuss .stern { color:var(--ink); }
li.nachricht.neu, li.blase.neu { border:2px solid var(--mark); background:var(--mark-soft); }
li.trenner { align-self:center; margin:.55rem 0 .15rem; }
li.trenner span { display:inline-block; padding:.1rem .85rem; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); font-size:.9rem; font-weight:700; }
li.neu-trenner span { background:var(--mark-soft); border-color:var(--mark); color:var(--ink); }
details.mehr > summary { cursor:pointer; color:var(--muted); font-size:.9rem; width:max-content; }
details.mehr > p { margin:.2rem 0; }

/* Gesprächsliste wie WhatsApp: Kreis mit Buchstaben, Name und Zeit, darunter letzte Nachricht und Zahl */
ul.gespraeche { list-style:none; margin:1rem -1.5rem; padding:0; border-top:1px solid var(--line); }
li.gespraech { position:relative; display:flex; align-items:center; gap:.85rem; padding:.7rem 1.5rem; border-bottom:1px solid var(--line); }
li.gespraech.ungelesen { background:var(--mark-soft); border-left:6px solid var(--mark); padding-left:calc(1.5rem - 6px); border-radius:0; }
.avatar { flex:none; display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; color:#fff; font-weight:800; font-size:1.05rem; }
.av0 { background:#0e6b5c; } .av1 { background:#245aab; } .av2 { background:#7a4f9a; } .av3 { background:#a8461f; } .av4 { background:#1f7a4d; } .av5 { background:#a03a5a; }
li.gespraech .gtext { flex:1; min-width:0; }
.gzeile { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; margin:0; }
.gzeile a { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.1rem; font-weight:700; color:var(--ink); text-decoration:none; }
.gzeile a::after { content:""; position:absolute; inset:0; }
.gzeile .zeit { float:none; margin:0; flex:none; }
.vorschau { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
li.gespraech.ungelesen .gzeile a { font-weight:800; }
li.gespraech.ungelesen .vorschau { color:var(--ink); font-weight:700; }
li.gespraech .zaehler { flex:none; margin:0; }
li.gespraech p.klein { margin:.1rem 0 0; }

/* Ein Gespräch: ganze Breite, grüne Kopfleiste oben, Schreibleiste unten am Bildschirmrand */
main:has(.chat-seite) { padding:0 0 0; max-width:42rem; }
main:has(.chat-seite) > .karte { padding:0; border:0; border-radius:0; background:transparent; }
.chat-seite { display:flex; flex-direction:column; min-height:calc(100dvh - 7rem); }
.chatkopf { position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:.6rem; padding:.45rem .7rem; background:var(--accent); color:var(--accent-ink); }
.chatkopf a, .chatkopf summary { color:inherit; }
.chatkopf .avatar { width:2.6rem; height:2.6rem; background:var(--accent-ink); color:var(--accent); }
.chatkopf .ktitel { min-width:0; }
.chatkopf h1 { margin:0; font-size:1.15rem; color:inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chatkopf p.klein { margin:0; color:inherit; opacity:.92; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chatkopf .zurueck { flex:none; display:grid; place-items:center; width:2.75rem; height:2.75rem; margin-left:-.3rem; }
.menue { margin-left:auto; position:relative; }
.menue > summary, details.zusatz > summary { list-style:none; cursor:pointer; }
.menue > summary::-webkit-details-marker, details.zusatz > summary::-webkit-details-marker { display:none; }
.menue > summary { display:grid; place-items:center; width:2.75rem; height:2.75rem; font-size:1.7rem; font-weight:800; }
.menuefeld { position:absolute; right:0; top:100%; min-width:14rem; padding:.3rem; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.25); }
.menuefeld a { display:block; padding:.65rem .8rem; color:var(--ink); text-decoration:none; font-weight:700; border-radius:6px; }
.menuefeld a:hover { background:var(--accent-soft); }
.chat-seite > ul.chat, .chat-seite > ol.chat { flex:1 1 auto; margin:0; border-radius:0; padding:.8rem .6rem 1rem; }
.chat-seite .mitte { text-align:center; margin:.7rem 1rem; }
form.schreibleiste { position:sticky; bottom:0; z-index:6; margin:0; padding:.5rem .6rem calc(.45rem + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--accent) 9%, var(--bg)); border-top:1px solid var(--line); }
form.schreibleiste .fehler { margin:.2rem 0 .5rem; }
.leiste { position:relative; display:flex; align-items:flex-end; gap:.5rem; }
.leiste textarea { flex:1; min-width:0; margin:0; min-height:3rem; max-height:9rem; padding:.7rem 1rem; border:1px solid var(--line); border-radius:1.5rem; background:var(--surface); resize:none; line-height:1.35; }
button.senden { flex:none; display:grid; place-items:center; width:3rem; height:3rem; min-height:3rem; margin:0; padding:0; border-radius:50%; }
details.zusatz > summary { display:grid; place-items:center; width:3rem; height:3rem; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--accent); }
details.zusatz[open] > summary { background:var(--accent); color:var(--accent-ink); }
.plusfeld { position:absolute; left:0; right:0; bottom:calc(100% + .5rem); max-height:60vh; overflow:auto; padding:.2rem 1rem 1rem; background:var(--surface); border:1.5px solid var(--line); border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.25); }
p.kinderhinweis { margin:.3rem .4rem 0; font-size:.8rem; }
@media (max-width: 40rem) {
  ul.gespraeche { margin-left:-1rem; margin-right:-1rem; }
  li.gespraech { padding-left:1rem; padding-right:1rem; }
  li.gespraech.ungelesen { padding-left:calc(1rem - 6px); }
  li.nachricht, li.blase { max-width:92%; }
}

/* Antworten wie bei WhatsApp: Zitat in der Blase, Antwortleiste über dem Schreibfeld */
a.zitat { display:block; margin:.25rem 0 .1rem; padding:.2rem .6rem; border-left:4px solid var(--accent); border-radius:6px; background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink); text-decoration:none; }
a.zitat:hover, a.zitat:focus-visible { background:color-mix(in srgb, var(--ink) 13%, transparent); }
a.zitat .klein { display:block; color:var(--accent); }
a.zitat .zitattext { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
li.blase:target { animation:markiert 2.4s ease-out; }
@keyframes markiert { 0%, 40% { box-shadow:0 0 0 4px var(--mark); } 100% { box-shadow:0 1px 1px rgba(0,0,0,.08); } }
@media (prefers-reduced-motion: reduce) { li.blase:target { animation:none; outline:3px solid var(--mark); } }
li.blase .aktionen { margin:.1rem 0; }
li.blase .antwort-link { font-weight:700; }
.antwortleiste { display:flex; align-items:center; gap:.5rem; margin:0 0 .45rem; padding:.35rem .4rem .35rem .7rem; border-left:5px solid var(--accent); border-radius:10px; background:var(--surface); }
.antwortleiste[hidden] { display:none; }
.antwortinfo { flex:1; min-width:0; display:flex; flex-direction:column; }
.antwortinfo strong { color:var(--accent); font-size:.9rem; }
.antwortinfo span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.antwortleiste .abbrechen { flex:none; display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:50%; color:var(--ink); text-decoration:none; font-size:1.2rem; font-weight:800; }
.antwortleiste .abbrechen:hover { background:var(--accent-soft); }

/* Computer: Gesprächsliste links, Gespräch rechts (wie WhatsApp Web) */
.zweispaltig > .seitenliste { display:none; }
@media (min-width: 56rem) {
  main:has(.zweispaltig) { max-width:76rem; padding:0 1rem; }
  .zweispaltig { display:grid; grid-template-columns:minmax(18rem, 24rem) minmax(0, 1fr); grid-template-areas:"liste chat"; border:1px solid var(--line); border-radius:12px; overflow:clip; background:var(--surface); }
  .zweispaltig > .seitenliste { display:block; grid-area:liste; border-right:1px solid var(--line); max-height:calc(100dvh - 5rem); overflow-y:auto; position:sticky; top:0; align-self:start; }
  .zweispaltig > .chat-seite { grid-area:chat; min-height:calc(100dvh - 5rem); }
  .seitenliste ul.gespraeche { margin:0; border-top:0; }
  .seitenliste li.gespraech, .seitenliste li.gespraech.ungelesen { padding-left:1rem; padding-right:1rem; }
  .seitenliste li.gespraech.ungelesen { padding-left:calc(1rem - 6px); }
  .seitenliste li.gespraech.aktiv { background:var(--accent-soft); }
  .seitenliste li.gespraech.aktiv.ungelesen { background:var(--mark-soft); }
  .seitenliste .gzeile a { font-size:1rem; }
  .seitenliste p.typ { display:none; }
  .zweispaltig .chatkopf .zurueck { display:none; }
  li.nachricht, li.blase { max-width:75%; }
  form.schreibleiste { padding-left:1rem; padding-right:1rem; }
}

/* Klassenseite */
.vorformatiert { white-space:pre-wrap; overflow-wrap:anywhere; }
ul.merkliste { list-style:none; padding:0; margin:.3rem 0 .8rem; }
ul.merkliste li { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; padding:.35rem 0; border-bottom:1px solid var(--line); }
ul.merkliste .durch { text-decoration:line-through; color:var(--muted); }
details.klassenfilter { margin:.9rem 0 1.25rem; }
details.klassenfilter > summary { display:inline-flex; align-items:center; gap:.4rem; min-height:2.75rem; padding:.25rem 1rem; border:1.5px solid var(--rand); border-radius:999px; background:var(--surface); cursor:pointer; }
details.klassenfilter[open] > summary { border-color:var(--accent); }
.klassenwahl { display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 0; }
.klassenwahl a { display:inline-flex; align-items:center; justify-content:center; min-width:3rem; min-height:2.75rem; padding:.25rem .9rem; border:1.5px solid var(--rand); border-radius:999px; background:var(--surface); color:inherit; font-weight:700; text-decoration:none; }
.klassenwahl a:hover { border-color:var(--accent); }
.klassenwahl a.gewaehlt { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.klasse .raster { margin-top:1.25rem; }
.klasse .kachel.team { margin-top:0; }
ul.merkliste li form { margin:0; }
.klasse .kachel .knopf, .klasse .kachel button { margin-top:.25rem; }
.kachel ul.stunden { margin:.25rem 0 0 .25rem; }
.kachel ul.stunden li { border-top:0; padding:.1rem 0; }
.kachel span.s-fzp { color:var(--fzp); font-weight:600; }
.kachel span.s-rot { color:var(--rot); font-weight:700; }

/* Materialbörse */
.material-seite form.filter { display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap; margin:1rem 0; }
.material-seite form.filter > div { flex:1 1 11rem; }
.material-seite form.filter button { margin-top:0; }
.material .komp { display:flex; flex-wrap:wrap; gap:.4rem; margin:.25rem 0 .6rem; padding:0; list-style:none; }
.material .komp li { padding:.1rem .6rem; border:1.5px solid var(--line); border-radius:999px; font-size:.9rem; border-top:1.5px solid var(--line); }
.material .zitat { margin:.25rem 0; padding-left:.75rem; border-left:3px solid var(--mark); }
.material h2 { margin:.25rem 0 .5rem; overflow-wrap:anywhere; }
label.haken input[type=checkbox] { width:1.5rem; height:1.5rem; min-height:1.5rem; flex:none; margin:.1rem 0 0; }

/* Pinnwand einklappbar */
details.pinnwand-box > summary { cursor:pointer; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; min-height:2.75rem; padding:.2rem 0; }
details.pinnwand-box > summary h2 { margin:0; display:inline; }
.beitrag > details > summary.beitragskopf { cursor:pointer; display:flex; align-items:baseline; gap:.2rem .7rem; flex-wrap:wrap; min-height:2.75rem; }
.beitrag > details > summary.beitragskopf h3 { margin:0; display:inline; }
.beitrag > details[open] > summary.beitragskopf { margin-bottom:.4rem; }

/* Materialbörse: Suche und Filter wie bei einer Materialbörse (Suchleiste, einklappbares Filterfeld, Chips) */
.suchzeile { display:flex; gap:.5rem; flex-wrap:wrap; }
.suchzeile input[type=search] { flex:1 1 14rem; margin-top:0; }
.suchzeile button { margin-top:0; }
details.filterfeld { margin:.8rem 0; border:1.5px solid var(--line); border-radius:12px; padding:.2rem 1rem; background:var(--surface); }
details.filterfeld > summary { cursor:pointer; min-height:2.75rem; display:flex; align-items:center; font-weight:700; }
fieldset.filtergruppe, fieldset.komp-gruppe { border:0; border-top:1px solid var(--line); margin:.6rem 0 0; padding:.6rem 0 0; min-width:0; }
fieldset.komp-gruppe { border-top:0; padding-top:.2rem; }
fieldset.filtergruppe > legend, fieldset.komp-gruppe > legend { font-weight:700; padding:0 .3rem 0 0; }
.filtertitel { margin:.4rem 0 .2rem; font-weight:700; }
.komp-wahl { display:flex; flex-wrap:wrap; gap:.4rem; }
label.komp-chip { display:inline-flex; align-items:center; gap:.4rem; margin:0; padding:.25rem .7rem; min-height:2.5rem; border:1.5px solid var(--line); border-radius:999px; background:var(--surface); font-weight:400; cursor:pointer; }
label.komp-chip input { width:1.2rem; height:1.2rem; min-height:0; margin:0; flex:none; accent-color:var(--accent); }
label.komp-chip:has(input:checked) { background:var(--accent-soft); border-color:var(--accent); font-weight:700; }
label.komp-chip:has(input:focus-visible) { outline:3px solid var(--accent); outline-offset:2px; }
.sortierzeile { display:flex; justify-content:space-between; align-items:center; gap:.5rem 1rem; flex-wrap:wrap; }
.sortierzeile select { display:inline-block; width:auto; margin:0 0 0 .3rem; }
.aktive-filter { display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0 1rem; }
a.aktiv-chip { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .7rem; min-height:2.25rem; border-radius:999px; background:var(--accent-soft); border:1.5px solid var(--accent); color:var(--ink); text-decoration:none; font-weight:700; }
.kompetenz-feld { margin:.5rem 0; }
.kompetenz-feld .komp-gruppe[hidden], .suchleiste .komp-gruppe[hidden] { display:none; }

/* Wunschbrett */
.unterreiter { display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0 1rem; }
.unterreiter a { padding:.45rem .9rem; border-radius:999px; border:1px solid var(--rand); text-decoration:none; }
.unterreiter a[aria-current="page"] { background:var(--knopf); color:var(--knopftext); border-color:transparent; }
.antworten { list-style:none; padding:0; margin:.5rem 0; display:flex; flex-direction:column; gap:.4rem; }
.antworten li { padding:.5rem .75rem; border-radius:.5rem; background:rgba(0,0,0,.05); }
form.inline { display:inline; }

/* Lehrmittelkammer */
.status { display:inline-block; padding:.15rem .6rem; border-radius:999px; border:1.5px solid var(--rand); font-weight:700; font-size:.9rem; }
.status.frei { border-color:#1d7a46; color:#1d7a46; }
.status.aus { border-color:#a23b00; color:#a23b00; }
.status.meldung { border-color:#7a5a00; color:#7a5a00; }
@media (prefers-color-scheme: dark) { .status.frei { color:#6fd49b; border-color:#6fd49b; } .status.aus { color:#ffa56b; border-color:#ffa56b; } .status.meldung { color:#f2c94c; border-color:#f2c94c; } }
.kammer-kopf { margin-top:1.5rem; }
.kartenliste { display:grid; grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr)); gap:1rem; }
.belegung { list-style:none; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.belegung li { padding:.6rem .8rem; border:1.5px solid var(--line); border-radius:8px; background:var(--surface); }
dl.fakten { display:grid; grid-template-columns:max-content 1fr; gap:.3rem 1rem; }
dl.fakten dt { font-weight:700; } dl.fakten dd { margin:0; }

/* QR-Etiketten */
.qr-box { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; border:1.5px solid var(--line); border-radius:10px; padding:.75rem; margin:1rem 0; background:#fff; color:#18282B; }
.qr svg { width:8rem; height:8rem; display:block; }
.etiketten { display:flex; flex-wrap:wrap; gap:3mm; align-items:flex-start; }
.etikett { margin:0; padding:2.5mm; border:.4mm solid #000; border-radius:2mm; background:#fff; color:#000; break-inside:avoid; text-align:center; box-sizing:border-box; width:50mm; }
.etiketten.g-klein .etikett { width:35mm; padding:2mm; } .etiketten.g-gross .etikett { width:70mm; padding:3mm; }
.etikett .qr svg { width:100%; height:auto; display:block; margin:0 auto; }
.etikett figcaption { font-size:2.8mm; line-height:1.25; overflow-wrap:anywhere; margin-top:1mm; }
.etiketten.g-klein .etikett figcaption { font-size:2.4mm; } .etiketten.g-gross .etikett figcaption { font-size:3.4mm; }
.druckwahl { display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap; margin:1rem 0; }
.druckwahl > * { flex:0 1 auto; }
.codesuche { display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap; margin:1rem 0; }
.codesuche > * { flex:1 1 12rem; } .codesuche button { flex:0 0 auto; margin-top:0; }
@page { margin:10mm; }
@media print { .top, .nicht-drucken, footer { display:none !important; } body { background:#fff; } main, .karte { box-shadow:none; border:0; padding:0; margin:0; max-width:none; } .etiketten { gap:3mm; } }

.scan-box { margin:1rem 0; } .scan-box video { width:100%; max-width:28rem; border-radius:.75rem; background:#000; display:block; }
.einstellungen { display:grid; grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr)); gap:1rem; margin:.8rem 0; align-items:start; }
.einstellung { border:1.5px solid var(--line); border-radius:10px; padding:.8rem 1rem; background:var(--surface); }
.einstellung fieldset { border:0; padding:0; margin:0 0 .5rem; }
h3.abschnitt { font-size:1rem; margin:1rem 0 0; color:var(--muted); }
.zweispaltig { display:grid; grid-template-columns:1fr; gap:1.2rem; align-items:start; }
@media (min-width: 56rem) { .zweispaltig { grid-template-columns:1fr 1fr; } }
.belegung .aktionen { margin:.4rem 0 0; }
.einstellung > label:first-child, .einstellung > fieldset:first-child { margin-top:0; }
.einstellung legend { font-weight:800; padding:0; margin-bottom:.3rem; }
/* Einklappbare Kacheln: Minus-Zeichen wie beim Verkleinern eines Fensters */
.raster { align-items:start; }
details.einklapp > summary, details.pinnwand-box > summary { list-style:none; margin-top:0; color:inherit; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:.8rem; min-height:2.75rem; }
details.einklapp > summary::-webkit-details-marker, details.pinnwand-box > summary::-webkit-details-marker { display:none; }
details.einklapp > summary h2 { margin:0; }
details.pinnwand-box > summary { justify-content:flex-start; }
details.pinnwand-box > summary .minus { margin-left:auto; }
.minus { flex:none; display:inline-grid; place-items:center; width:2.5rem; height:2.5rem; border:1.5px solid var(--line); border-radius:8px; background:var(--surface); color:var(--accent); font-weight:800; font-size:1.5rem; line-height:1; }
.minus::before { content:"\2212"; }
details:not([open]) > summary .minus::before { content:"+"; }
summary:hover .minus { border-color:var(--accent); }
.einklapp-inhalt { margin-top:.6rem; }
details.kammer-gruppe { margin-top:1.2rem; }
details.kammer-gruppe > summary { list-style:none; margin-top:0; color:inherit; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:.8rem; min-height:2.75rem; border-bottom:2px solid var(--line); padding-bottom:.3rem; }
details.kammer-gruppe > summary::-webkit-details-marker { display:none; }
details.kammer-gruppe > summary h2 { margin:0; }
.kartenkopf { flex:1; min-width:0; }
.kartenkopf p { margin:0; }
.material.einklapp > summary h2 { margin:.15rem 0 0; font-size:1.15rem; }
.kachel.kompakt { padding:.7rem .9rem; }
.kachel.kompakt h3 { margin:0 0 .3rem; font-size:1.05rem; overflow-wrap:anywhere; }
.kachel.kompakt p { margin:.2rem 0; }
/* Startseite einrichten */
.kachelliste { list-style:none; padding:0; margin:1rem 0; display:flex; flex-direction:column; gap:.6rem; }
.kachelzeile { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; padding:.7rem .9rem; border:1.5px solid var(--line); border-radius:10px; background:var(--surface); }
.kachelzeile .name { font-weight:700; }
.kachelzeile .aktionen { margin:0; }
.kachelzeile button:disabled { opacity:.45; cursor:default; }
.kachelzeile { flex-wrap:nowrap; }
.kachelzeile .haken { flex:1 1 auto; min-width:0; margin:0; }
.kachelzeile .aktionen { flex:none; flex-wrap:nowrap; }
@media (max-width: 32rem) { .kachelzeile, .kachelzeile .aktionen { flex-wrap:wrap; } }
/* Aufklappmenüs bei den Reitern */
details.tabgruppe { position:relative; }
details.tabgruppe > summary { list-style:none; margin:0; cursor:pointer; padding:.6rem .8rem .5rem; font-weight:700; color:var(--muted); border-bottom:4px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:.35rem; }
details.tabgruppe > summary::-webkit-details-marker { display:none; }
details.tabgruppe > summary::after { content:""; border:.32rem solid transparent; border-top-color:currentColor; border-bottom-width:0; }
details.tabgruppe[open] > summary::after { border-top-width:0; border-bottom-width:.32rem; border-bottom-color:currentColor; border-top-color:transparent; }
details.tabgruppe > summary:hover, details.tabgruppe[open] > summary { color:var(--ink); }
details.tabgruppe > summary.aktiv { color:var(--ink); border-bottom-color:var(--mark); }
.tabmenue { position:absolute; left:0; top:100%; z-index:30; min-width:15rem; display:flex; flex-direction:column; background:var(--surface); border:1.5px solid var(--line); border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.2); padding:.3rem; }
nav.tabs .tabmenue a { border-bottom:0; border-radius:8px; padding:.7rem .9rem; color:var(--ink); }
nav.tabs .tabmenue a:hover { background:var(--accent-soft, rgba(0,0,0,.06)); }
nav.tabs .tabmenue a[aria-current="page"] { background:var(--accent-soft, rgba(0,0,0,.06)); box-shadow:inset 4px 0 0 var(--mark); }
/* Schriftgröße (A− / A+) */
html.schrift-1 { font-size:112.5%; } html.schrift-2 { font-size:125%; } html.schrift-3 { font-size:150%; }
.schrift { display:inline-flex; gap:.3rem; } .schrift[hidden] { display:none; }
.schrift button { min-width:2.5rem; padding:.2rem .5rem; } .schrift button:disabled { opacity:.45; cursor:default; }
/* Hilfe: kleines Fragezeichen unten rechts */
details.hilfe { position:fixed; right:1rem; bottom:1rem; z-index:20; }
details.hilfe.hoch { bottom:calc(var(--leistenh, 5rem) + .7rem); }
@media (max-width: 40rem) { details.hilfe.hoch > summary { width:2.4rem; height:2.4rem; font-size:1.2rem; } details.hilfe.hoch { right:.6rem; } }
details.hilfe > summary { list-style:none; margin:0; cursor:pointer; display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:1.5rem; font-weight:800; box-shadow:0 2px 8px rgba(0,0,0,.3); }
details.hilfe > summary::-webkit-details-marker { display:none; }
.hilfe-text { position:absolute; right:0; bottom:3.6rem; width:min(22rem, calc(100vw - 2rem)); max-height:70vh; overflow:auto; background:var(--surface); color:var(--ink); border:1.5px solid var(--line); border-radius:12px; padding:.9rem 1.1rem; box-shadow:0 4px 18px rgba(0,0,0,.25); }
.hilfe-text h2 { margin:0 0 .4rem; font-size:1.1rem; }
.hilfe-text p { margin:.4rem 0; }
@media print { details.hilfe, .schrift { display:none !important; } }

/* Kompakte Blasen: Name links, Zeit und drei Punkte rechts in der ersten Zeile */
li.blase { padding:.2rem .35rem .25rem .65rem; min-width:min(100%, 9rem); }
li.blase p { margin:.05rem 0; line-height:1.3; }
li.blase .kopf { display:flex; align-items:center; gap:.5rem; margin:0; }
li.blase .absender { margin-right:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
li.blase .kopf time { color:var(--muted); font-size:.85rem; flex:none; }
li.blase .kopf time, li.blase .kopf details.infofeld > summary, li.blase details.infofeld.zahlfeld > summary { color:var(--ink); }
li.blase .text a { color:var(--ink); text-decoration:underline; }
h2.abschnitt { font-size:1.05rem; margin:1rem 0 .3rem; }
li.blase .kopf .stern { font-size:.85rem; color:var(--ink); flex:none; }
li.blase .neu-marke { font-size:.75rem; padding:0 .45rem; }
details.msgmenue { position:relative; flex:none; }
details.msgmenue > summary { list-style:none; cursor:pointer; display:grid; place-items:center; width:2.2rem; height:2rem; border-radius:50%; font-size:1.3rem; font-weight:800; color:var(--muted); }
details.msgmenue > summary::-webkit-details-marker { display:none; }
details.msgmenue > summary:hover, details.msgmenue[open] > summary { background:var(--accent-soft); color:var(--ink); }
details.msgmenue .menuefeld { z-index:5; min-width:12rem; }
details.msgmenue .menuefeld form { margin:0; }
.menuefeld .menuepunkt { display:block; width:100%; margin:0; padding:.65rem .8rem; border:0; border-radius:6px; background:transparent; color:var(--ink); font:inherit; font-weight:700; text-align:left; text-decoration:none; cursor:pointer; min-height:0; }
.menuefeld .menuepunkt:hover { background:var(--accent-soft); }
li.blase .antwort-link { font-weight:700; }

/* Bearbeitete Nachrichten: frühere Fassungen aufklappbar */
li.blase details.verlauf { margin:.1rem 0 0; font-size:.85rem; color:var(--muted); }
li.blase details.verlauf > summary { cursor:pointer; width:max-content; }
li.blase details.verlauf ol { margin:.2rem 0 .1rem; padding-left:1.2rem; }
li.blase details.verlauf li { margin:.2rem 0; padding:0; list-style:decimal; }

/* Klassenseite: Kinder mit Besonderheiten */
ul.kinderliste { list-style:none; margin:.3rem 0; padding:0; columns:2 14rem; column-gap:1.5rem; }
ul.kinderliste li { break-inside:avoid; margin:0; padding:.35rem 0; border-bottom:1px solid var(--line); }
ul.kinderliste li.mit-bes { border-left:5px solid var(--mark); padding-left:.6rem; background:var(--mark-soft); }
ul.kinderliste a { font-weight:700; }
.kinderliste .bes { color:var(--ink); }

/* Kompakte Kopfbereiche: Materialbörse, Lehrmittelkammer, Formulare & Links (Titel mit Hauptknopf, Suche und Filter in einer Zeile) */
.seitenkopf { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.4rem 1rem; margin:0 0 .5rem; }
.seitenkopf h1 { margin:0; font-size:1.7rem; }
.seitenkopf .aktionen { margin:0; }
.unterreiter { margin:.2rem 0 .8rem; }
.unterreiter a { padding:.3rem .8rem; }
.werkzeug input, .werkzeug select, .werkzeug button, .werkzeug .knopf, .werkzeug summary { min-height:2.5rem; margin-top:0; margin-bottom:0; padding-top:.3rem; padding-bottom:.3rem; font-size:.95rem; }
.werkzeug label { margin:0 0 .15rem; font-size:.85rem; }
.suchleiste.werkzeug .suchzeile { align-items:center; margin:0 0 .5rem; gap:.5rem; }
.suchleiste.werkzeug .suchzeile + .suchzeile label { margin:0; }
.suchleiste.werkzeug .suchzeile select { width:auto; min-width:10rem; }
.filterzeile { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; margin:.4rem 0 .6rem; }
.filterzeile details.filterfeld { margin:0; padding:0 .8rem; border-radius:999px; }
.filterzeile details.filterfeld > summary { min-height:2.5rem; }
.filterzeile details.filterfeld[open] { flex-basis:100%; border-radius:12px; padding:.1rem 1rem .6rem; }
.filterzeile .zahl { margin:0; }
.filterzeile .sort { margin-left:auto; display:flex; align-items:center; gap:.4rem; }
.filterzeile .sort select { width:auto; }
.filterzeile .sort label { margin:0; }
.material-seite form.filter.werkzeug { gap:.5rem; margin:.4rem 0 .6rem; }
.material-seite form.filter.werkzeug > div { flex:1 1 9rem; }
.material-seite form.filter.werkzeug > div:first-child { flex:2 1 12rem; }
.werkzeug.zeile { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.4rem 0 .8rem; }
.werkzeug.zeile .codesuche { display:flex; flex:1 1 14rem; gap:.4rem; margin:0; align-items:center; }
.werkzeug.zeile .codesuche > * { flex:0 0 auto; margin:0; }
.werkzeug.zeile .codesuche input { flex:1 1 8rem; min-width:0; }
details.werkzeugmenue { position:relative; margin-left:auto; }
details.werkzeugmenue > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; }
details.werkzeugmenue > summary::-webkit-details-marker { display:none; }
details.werkzeugmenue > summary::after { content:"▾"; margin-left:.4rem; }
details.werkzeugmenue .menuefeld { z-index:5; }
details.werkzeugmenue > summary { padding:.3rem .9rem; border:1.5px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font-weight:700; text-decoration:none; }

/* Kompakte Kopfzeile: Logo links, Name und Abmelden rechts oben, Reiter darunter (am breiten Bildschirm alles in einer Zeile) */
header.top .innen { display:flex; flex-wrap:wrap; align-items:center; gap:0 .7rem; }
header.top .bar { display:contents; }
header.top .brand { order:1; } header.top .brand b { font-size:1.2rem; }
header.top .logo { width:44px; height:44px; border-radius:50%; }
header.top .who { order:2; margin-left:auto; gap:.4rem; font-size:.9rem; flex-wrap:nowrap; }
header.top .who > span:not(.schrift):not(.rolle) { max-width:11rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
header.top .who button { min-height:2rem; padding:.1rem .7rem; font-size:.9rem; }
header.top .schrift button { min-width:2.2rem; padding:.1rem .4rem; }
header.top .rolle { font-size:.75rem; padding:0 .5rem; }
header.top nav.tabs { order:4; flex:1 1 100%; gap:.1rem; }
header.top nav.tabs a, header.top nav.tabs summary { padding:.35rem .65rem .25rem; border-bottom-width:3px; }
main { padding-top:1rem; }
@media (max-width: 40rem) {
  header.top .rolle, header.top .who > span:not(.schrift):not(.rolle) { display:none; }
  header.top nav.tabs a, header.top nav.tabs summary { padding:.35rem .5rem .25rem; font-size:.95rem; }
}
@media (min-width: 76rem) {
  header.top .innen { max-width:76rem; }
  /* Wunsch von Daniel, 5.11.: auch am Computer zwei Zeilen: oben Lernkiste, Rolle, Name, Schrift, Suche, Abmelden; darunter die Reiter */
}

/* Kompakte Startseite */
.start .begruessung { display:flex; align-items:baseline; justify-content:space-between; gap:.2rem 1rem; flex-wrap:wrap; margin-bottom:.6rem; }
.start h1 { font-size:1.5rem; margin:0; }
.start .eyebrow { margin:0; }
.start .hinweiskarte { padding:.5rem .8rem; margin-bottom:.5rem; }
.pinnwand { margin-top:.6rem; }
.beitrag { padding:.35rem .8rem; margin-top:.4rem; }
.beitrag > details > summary.beitragskopf { min-height:2.5rem; flex-wrap:nowrap; align-items:center; gap:.2rem .6rem; }
.beitrag h3 { font-size:1rem; flex:none; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.beitragskopf .vorschau { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.beitragskopf .marke { flex:none; }
.beitragstext { max-height:16rem; overflow:auto; }
.raster { gap:.6rem; margin-top:.6rem; }
.kachel { padding:.5rem .8rem; }
.kachel h2 { margin:0; font-size:1.05rem; }
.kachel li { padding:.35rem 0; }
@media (max-width: 40rem) { .beitrag h3 { max-width:none; white-space:normal; } .beitragskopf .vorschau { display:none; } .beitrag > details > summary.beitragskopf { flex-wrap:wrap; } }
details.pinnwand-box > summary h2 { font-size:1.15rem; }
details.pinnwand-box > summary { min-height:2.4rem; }
details.pinnwand-box > .aktionen { margin:.3rem 0; }
.beitragskopf .minus { width:2rem; height:2rem; margin-left:auto; }

/* Pinnwand ausgeklappt: Text, dann eine einzige Leiste */
.beitrag > details[open] > summary.beitragskopf { margin-bottom:.2rem; }
.beitragstext { margin:.2rem 0 .5rem; line-height:1.5; padding-left:.2rem; }
.beitrag .beitragsinfo { margin:0 0 .4rem; }
.beitragsleiste { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem; padding-top:.5rem; border-top:1px solid var(--line); margin-bottom:.3rem; }
.beitragsleiste form { margin:0; }
.beitragsleiste .knopf, .beitragsleiste button, .beitragsleiste details.werkzeugmenue > summary { min-height:2.25rem; padding:.2rem .75rem; margin:0; font-size:.95rem; }
.beitragsleiste > .klein { margin-left:.2rem; }
.beitragsleiste details.beitragsmenue { margin-left:auto; }
.beitrag > details > p.klein { margin:.2rem 0; }
.beitrag > details[open] > summary .vorschau { display:none; }
details.pinnwand-box > summary { flex-wrap:nowrap; }
details.pinnwand-box > summary > .klein { flex:1 1 auto; min-width:0; }

/* Kleines "i" für Hinweise (Nachrichten) */
details.infofeld { position:relative; flex:none; }
details.infofeld > summary { list-style:none; cursor:pointer; display:grid; place-items:center; width:2.1rem; height:2.1rem; border:2px solid currentColor; border-radius:50%; font-family:var(--font-display); font-weight:800; font-style:italic; font-size:1.05rem; line-height:1; }
details.infofeld > summary::-webkit-details-marker { display:none; }
.infotext { position:absolute; right:0; top:calc(100% + .4rem); z-index:7; width:min(22rem, 88vw); padding:.7rem .9rem; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.25); font-size:.95rem; font-weight:400; font-style:normal; text-align:left; }
.infotext p { margin:.2rem 0 .5rem; overflow:visible; white-space:normal; }
.infotext p:last-child { margin-bottom:.2rem; }
.chatkopf details.infofeld { margin-left:auto; }
.chatkopf details.infofeld + .menue { margin-left:0; }
.titelzeile { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.titelzeile h1 { margin:0 0 .3rem; }
.titelzeile details.infofeld { color:var(--accent); }
.chatkopf { z-index:19; top:var(--kopfh, 0); }

/* Entlassungszeiten und Frühdienst */
.tabellenrahmen { overflow-x:auto; margin:.6rem 0; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.zeitentabelle { width:100%; border-collapse:separate; border-spacing:0; font-size:.95rem; }
.zeitentabelle th, .zeitentabelle td { padding:.3rem .35rem; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap; }
.zeitentabelle tbody tr:last-child > * { border-bottom:0; }
.zeitentabelle thead th { position:sticky; top:0; background:var(--surface); font-size:.9rem; }
.zeitentabelle .name { position:sticky; left:0; z-index:1; background:var(--surface); text-align:left; padding-left:.7rem; font-weight:700; max-width:9rem; overflow:hidden; text-overflow:ellipsis; border-right:1px solid var(--line); }
.zeitentabelle .datum { display:block; font-weight:400; font-size:.8rem; color:var(--muted); }
.zeitentabelle select.zeit { width:auto; min-width:4.6rem; margin:0; padding:.35rem .3rem; font-size:.95rem; min-height:2.5rem; }
.zeitentabelle td.geaendert { outline:3px solid var(--ink); outline-offset:-3px; font-weight:700; }
.zeitentabelle td.heute, .zeitentabelle th.heute { box-shadow:inset 0 -3px 0 var(--accent); }
.zeitentabelle .mitte { text-align:center; }
.zeitentabelle input[type=checkbox] { width:1.5rem; height:1.5rem; margin:0; }
.tagesnavigation { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:.6rem 0; }
.tagesnavigation h2 { margin:0; font-size:1.15rem; text-align:center; }
.tagesnavigation .knopf { min-width:2.75rem; justify-content:center; margin:0; }
.zeitgruppe { margin:.5rem 0; padding:.5rem .8rem; }
.zeitgruppe h2 { margin:0 0 .2rem; font-size:1.05rem; }
.zeitgruppe ul.kinderliste { display:flex; flex-wrap:wrap; gap:.2rem 1.2rem; }
.ausschalter { margin-top:1.2rem; }
.zeitgruppe li { border:0; padding:.1rem 0; }
@media (max-width: 40rem) {
  .tabellenrahmen { margin-left:-.9rem; margin-right:-.9rem; border-radius:0; border-left:0; border-right:0; }
  .zeitentabelle { font-size:.85rem; }
  .zeitentabelle th, .zeitentabelle td { padding:.2rem .12rem; }
  .zeitentabelle .name { max-width:5.2rem; padding-left:.5rem; font-size:.85rem; white-space:normal; }
  .zeitentabelle select.zeit { min-width:3.3rem; padding:.3rem .1rem; font-size:.9rem; appearance:none; -webkit-appearance:none; text-align:center; text-align-last:center; }
}
@media (max-width: 40rem) {
  .tabellenrahmen { margin-left:-1.3rem; margin-right:-1.3rem; }
  .zeitentabelle .name { max-width:4.3rem; padding-left:.4rem; }
  .zeitentabelle select.zeit { min-width:3rem; font-size:.85rem; padding:.3rem 0; }
  .zeitentabelle th, .zeitentabelle td { padding:.2rem .08rem; }
}

/* Entlassung: Farben der späten Zeiten (16:30 grün, 17:00 orange, 17:30 gelb, Freitag 15:30 rosa); die Uhrzeit steht immer dabei */
.z-gruen { --zf:#bfe8c4; --zr:#2e8b3d; --zt:#10361a; }
.z-orange { --zf:#ffc27a; --zr:#d9730d; --zt:#4d2400; }
.z-gelb { --zf:#fff07a; --zr:#c9ad00; --zt:#443a00; }
.z-rosa { --zf:#ffc9e1; --zr:#d6417f; --zt:#55102f; }
.z-frueh, .z-abw { --zf:#fdd5d0; --zr:#c0392b; --zt:#5a1710; }
.z-neutral, .kurs { --zf:var(--surface); --zr:var(--accent); --zt:var(--ink); }
.chip { display:inline-block; padding:.05rem .6rem; border-radius:999px; background:var(--zf, var(--surface)); color:var(--zt, var(--ink)); border:1.5px solid var(--zr, var(--line)); font-weight:700; font-size:.85rem; }
.legende { margin:.2rem 0 .5rem; }
.zeitentabelle td:is(.z-gruen, .z-orange, .z-gelb, .z-rosa, .z-frueh, .z-abw) { background:var(--zf); color:var(--zt); }
.zeitentabelle td select.zeit { background:rgba(255,255,255,.7); color:#1a1a1a; }
.zeitgruppe:is(.z-gruen, .z-orange, .z-gelb, .z-rosa, .z-frueh, .z-abw, .z-neutral, .kurs) { background:var(--zf); color:var(--zt); border-left:6px solid var(--zr); }
.zeitgruppe a { color:inherit; }
ul.chips { list-style:none; margin:.1rem 0; padding:0; display:flex; flex-wrap:wrap; gap:.15rem 1.1rem; }
ul.chips li { margin:0; padding:.1rem 0; border:0; }
ul.chips a { font-weight:700; }
form.inline { display:inline; margin:0; }
form.inline button { margin:0 0 0 .3rem; padding:.1rem .6rem; min-height:2rem; }
.kursmarke { display:block; font-size:.74rem; line-height:1.15; margin-top:.15rem; white-space:normal; border-left:3px solid var(--zr, var(--accent)); padding-left:.3rem; text-align:left; }
.kursmarke.extern { font-weight:700; }
.kursmarke.weg { text-decoration:line-through; opacity:.8; }
.chips .kursmarke { display:inline-block; margin:0 0 0 .3rem; }
.kurs-weg { display:flex; align-items:center; gap:.25rem; font-size:.74rem; text-align:left; white-space:normal; margin-top:.15rem; }
.zeitentabelle .kurs-weg input[type=checkbox] { width:1.1rem; height:1.1rem; vertical-align:middle; }
.fruehinfo { margin-top:.9rem; }
.eigenezeit { margin:.6rem 0; }
.eigenezeit form { align-items:flex-end; }
.eigenezeit > summary { display:inline-block; cursor:pointer; list-style:none; border:1.5px solid var(--accent); border-radius:999px; padding:.4rem 1rem; font-weight:700; color:var(--accent); }
.eigenezeit > summary::-webkit-details-marker { display:none; }
.eigenezeit > summary::before { content:"+ "; }
.eigenezeit[open] > summary::before { content:"− "; }
.eigenezeit form { margin-top:.5rem; }

/* Entlassung: Klasse wählen und merken, Monatsübersicht */
.klassenzeile { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; margin:.4rem 0; }
.klassenzeile .klassenfilter { margin:0; }
.merken { display:inline-flex; align-items:center; gap:.4rem; margin:0; }
.merken .zweit.klein { margin:0; }
.zeitgruppe.z-abw.z-unent { --zf:#f7a8a2; --zr:#b3261e; --zt:#4a0e0a; }
.an-frueher { --zf:#cfe3ff; --zr:#2b6cb0; --zt:#10294a; }
.an-entschuldigt { --zf:#e4e4e4; --zr:#777; --zt:#222; }
.an-unentschuldigt { --zf:#f7a8a2; --zr:#b3261e; --zt:#4a0e0a; }
.monatstabelle th.tag, .monatstabelle td { min-width:1.9rem; padding:.2rem .1rem; font-size:.8rem; }
.monatstabelle td:is(.an-frueher, .an-entschuldigt, .an-unentschuldigt) { background:var(--zf); color:var(--zt); font-weight:700; }
.monatstabelle td.geplant { opacity:.55; }
.monatstabelle td small { display:block; font-size:.6rem; font-weight:400; line-height:1; }
.monatstabelle .summe { font-weight:700; border-left:1px solid var(--line); min-width:1.6rem; }
.monatstabelle td { position:relative; }
.legende summary { cursor:pointer; color:var(--accent); font-weight:700; }
.legende[open] > summary { margin-bottom:.3rem; }

/* Entlassung: kompakte Kopfzeile und Heute in Zeilen */
.entl-kopf { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem 1rem; margin-bottom:.3rem; }
.entl-kopf h1 { margin:0; font-size:1.5rem; }
.entl-kopf .unterreiter { margin:0; }
.klassenzeile .legende { margin:0; }
.klassenzeile .legende[open] { flex-basis:100%; }
.legende > summary { display:inline-block; cursor:pointer; padding:.2rem .7rem; border:1.5px solid var(--line); border-radius:999px; font-weight:700; color:var(--accent); }
.legende p { margin:.3rem 0 0; }
.tagesnavigation { margin:.3rem 0; }
.tagesnavigation h2 { font-size:1.05rem; }
.tagesnavigation .knopf { min-height:2.3rem; }
.zeitgruppe { display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .9rem; margin:.3rem 0; padding:.35rem .7rem; border-radius:10px; border:1px solid var(--line); background:var(--surface); }
.zeitgruppe h2 { margin:0; font-size:1rem; flex:0 1 auto; min-width:9.5rem; max-width:100%; overflow-wrap:anywhere; }
.zeitgruppe .uhr { font-size:1.15rem; font-weight:800; }
.zeitgruppe .gname { font-weight:600; }
.zeitgruppe .anzahl { font-weight:400; opacity:.75; font-size:.85rem; }
.zeitgruppe ul.chips { flex:1 1 11rem; }
.z-regulaer { --zf:var(--surface); --zr:var(--accent); --zt:var(--ink); }
.zeitgruppe.z-regulaer { border-left:6px solid var(--zr); }
.fruehinfo { margin:.6rem 0 .3rem; }
.entl-kopf .unterreiter a { padding:.25rem .8rem; font-size:.95rem; }
.entl-kopf .unterreiter { gap:.3rem; }

/* Entlassung: Gruppen zum Ein- und Ausklappen */
details.zeitgruppe { display:block; padding:.2rem .7rem .35rem; }
details.zeitgruppe > summary { min-height:2.2rem; gap:.5rem; }
details.zeitgruppe > summary h2 { display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .45rem; min-width:0; overflow-wrap:anywhere; }
details.zeitgruppe .minus { width:1.9rem; height:1.9rem; font-size:1.2rem; border-radius:7px; }
details.zeitgruppe ul.chips { margin:.05rem 0 .15rem; }

/* Entlassung: Plan (Woche und Basiswoche) mit festen Spalten und gleich hohen Zeilen, egal ob ein Kurs dabei ist */
.zeitentabelle.planung { table-layout:fixed; min-width:23rem; }
.planung col.c-name { width:7.5rem; }
.planung col.c-frueh { width:2.6rem; }
.planung col.c-tag { width:auto; }
.planung th.name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:none; }
.planung td { height:4.6rem; padding:.25rem .2rem; vertical-align:middle; overflow:hidden; }
.planung select.zeit { display:block; width:100%; min-width:0; margin:0 auto; box-sizing:border-box; }
.planung .zeitwert { display:block; line-height:2.5rem; font-weight:600; }
.planung .kz { display:block; height:1.55rem; line-height:.72rem; margin-top:.1rem; font-size:.64rem; overflow:hidden; text-align:center; word-break:break-word; hyphens:auto; }
.planung .kz.extern { font-weight:700; }
.planung .kz.weg { text-decoration:line-through; opacity:.8; }
.kursliste { margin:.7rem 0 .2rem; }
.kursliste > summary { cursor:pointer; font-weight:700; color:var(--accent); }
.kursliste ul { list-style:none; margin:.4rem 0 0; padding:0; }
.kursliste li { margin:0; padding:.25rem 0; border-bottom:1px solid var(--line); }
.kursliste label { display:flex; align-items:center; gap:.5rem; font-weight:400; }
.kursliste input[type=checkbox] { width:1.4rem; height:1.4rem; flex:none; margin:0; }
@media (max-width:30rem) {
  .planung col.c-name { width:4.9rem; }
  .planung col.c-frueh { width:2.2rem; }
  .zeitentabelle.planung { min-width:0; }
  .planung td { padding:.25rem .08rem; }
  .planung select.zeit { padding:.3rem 0; font-size:.85rem; text-align-last:center; }
}

/* Entlassung: Heute kompakter (25–30 Kinder), Kursfarbe, X-Knopf */
details.zeitgruppe { margin:.25rem 0; padding:.1rem .6rem .25rem; }
details.zeitgruppe > summary { min-height:1.8rem; }
details.zeitgruppe > summary h2 { font-size:.92rem; }
details.zeitgruppe .uhr { font-size:1rem; }
details.zeitgruppe .minus { width:1.5rem; height:1.5rem; font-size:1rem; }
details.zeitgruppe ul.chips { gap:0 .8rem; margin:0; }
details.zeitgruppe ul.chips li { padding:.05rem 0; font-size:.92rem; line-height:1.35; white-space:nowrap; }
details.zeitgruppe .marke { font-size:.7rem; padding:0 .3rem; }
.xknopf { margin:0 0 0 .2rem; padding:0; min-height:1.4rem; min-width:1.4rem; width:1.4rem; height:1.4rem; line-height:1; font-size:.8rem; border-radius:50%; background:transparent; color:inherit; border:1px solid currentColor; cursor:pointer; vertical-align:middle; }
form.inline .xknopf { margin:0 0 0 .2rem; padding:0; min-height:1.4rem; }
.xknopf:hover, .xknopf:focus-visible { background:var(--zr, var(--accent)); color:#fff; }
.kk { font-size:.72rem; opacity:.85; font-style:italic; }
/* Kurse: eigener violetter Ton (zusätzlich zum Wort „Kurs“, nie nur Farbe) */
.zeitgruppe.kurs { --zf:#efe7fa; --zr:#6b3fa0; --zt:#2a1747; }
.planung .kz.extern { background:#e4d6f6; color:#2a1747; border-radius:4px; }
.planung .kz.intern { background:#efe7fa; color:#2a1747; border-radius:4px; }

/* Entlassung: Info-„i“ rechts oben, Kurs in der Woche antippbar */
.infozeile { display:flex; justify-content:flex-end; margin:.1rem 0 .3rem; }
.infozeile details.infofeld { color:var(--accent); }
.kz.kzt { position:relative; display:flex; gap:.15rem; justify-content:center; }
.kz.kzt label { flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; cursor:pointer; border-radius:4px; padding:0 .15rem; }
.kz.kzt label.extern { background:#e4d6f6; color:#2a1747; font-weight:700; }
.kz.kzt label.intern { background:#efe7fa; color:#2a1747; }
.kz.kzt input { position:absolute; opacity:0; width:1px; height:1px; }
.kz.kzt input:checked + span { text-decoration:line-through; opacity:.7; }
.kz.kzt input:focus-visible + span { outline:2px solid var(--accent); }

/* Woche: Kurs antippbar, ganzer Name (bis zu zwei Zeilen), verstecktes Kästchen ohne Rahmen */
.planung .kz.kzt { display:flex; flex-direction:column; justify-content:center; gap:.05rem; }
.planung .kz.kzt label { position:relative; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; flex:1 1 auto; min-width:0; width:100%; margin:0; cursor:pointer; border-radius:4px; padding:0 .1rem; }
.planung .kz.kzt label:not(:only-child) { -webkit-line-clamp:1; }
.planung .kz.kzt input { position:absolute; opacity:0; width:1px; height:1px; min-height:0; margin:0; padding:0; border:0; }
.planung .kz.kzt label:hover { outline:1px solid #6b3fa0; }
.planung .kz-hinweis { font-size:.8rem; }
@media (max-width: 40rem) {
  .planung td { height:5.3rem; }
  .planung .kz { height:2.3rem; font-size:.6rem; line-height:.7rem; }
  .planung .kz.kzt label { -webkit-line-clamp:3; }
  .planung .kz.kzt label:not(:only-child) { -webkit-line-clamp:1; }
}
.planung .kz.kzt label, .planung .kz.kzt label span { white-space:normal; text-overflow:clip; overflow-wrap:anywhere; }

/* Entlassung Heute: Kinder immer untereinander; Woche: Kursname mittig im Feld */
details.zeitgruppe ul.chips { flex-direction:column; flex-wrap:nowrap; align-items:flex-start; }
.planung .kz.kzt label { display:flex; align-items:center; justify-content:center; text-align:center; }
.planung .kz.kzt label > span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; max-width:100%; }
.planung .kz.kzt label:not(:only-child) > span { -webkit-line-clamp:1; }
@media (max-width: 40rem) {
  .planung .kz.kzt label > span { -webkit-line-clamp:3; }
  .planung .kz.kzt label:not(:only-child) > span { -webkit-line-clamp:1; }
}

/* Entlassung Woche/Basiswoche: Farbe füllt das ganze Feld, ohne Rahmen; „fehlt“ deutlich rot; gestrichener Kurs klar erkennbar */
.zeitentabelle td:is(.z-gruen, .z-orange, .z-gelb, .z-rosa, .z-frueh, .z-abw) select.zeit { background-color:var(--zf); border:2px solid var(--zr); color:var(--zt); box-shadow:none; }
.zeitentabelle td.geaendert { outline:0; position:relative; }
.zeitentabelle td.geaendert::after { content:"●"; position:absolute; top:.12rem; right:.2rem; font-size:.55rem; line-height:1; color:var(--ink); pointer-events:none; }
.z-frueh { --zf:#f9b8ad; --zr:#c0392b; --zt:#4a1008; }
.z-abw { --zf:#ee7b72; --zr:#b3261e; --zt:#2f0503; }
.zeitgruppe.z-abw.z-unent, .z-abw.z-unent { --zf:#e5574b; --zr:#8f1a12; --zt:#ffffff; }
.planung .kz.kzt input:checked + span, .planung .kz.weg { text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:#b3261e; opacity:1; }
.planung .kz.kzt label:has(input:checked), .planung .kz.weg { background:#f6c9c4; color:#5a1710; }
.planung .kz.kzt input:checked + span::before { content:"✕ "; font-weight:700; color:#b3261e; text-decoration:none; display:inline-block; }

/* Einsammeln */
details.samm { margin:.5rem 0; }
details.samm .skopf { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .9rem; }
details.samm, details.ueberblick { padding:.5rem .9rem; }
details.samm .sname { font-weight:700; }
details.samm .sstand { padding:.1rem .6rem; border-radius:999px; background:#fdf0c4; color:#4a3a00; font-size:.9rem; }
details.samm .sstand.fertig, p.fertig { background:#d9f0e3; color:#0b4a2b; }
details.samm.abgeschlossen { opacity:.85; }
.sinhalt { padding:.25rem 0 .5rem; }
p.fehlt { margin:.4rem 0; }
p.fertig { display:inline-block; padding:.15rem .7rem; border-radius:999px; font-weight:700; }
table.sammtab { width:100%; border-collapse:collapse; margin:.5rem 0; }
table.sammtab th, table.sammtab td { padding:.2rem .5rem; border-bottom:1px solid var(--rand); text-align:left; vertical-align:middle; }
table.sammtab td.sname { font-weight:400; }
table.sammtab th:nth-child(2), table.sammtab td.shak { width:5rem; text-align:center; }
table.sammtab input[type=text] { min-height:2.25rem; padding:.15rem .5rem; width:100%; }
table.sammtab input[type=checkbox] { width:1.7rem; height:1.7rem; min-height:0; margin:0; }
.shaken { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:2.5rem; }
ul.sliste { margin:.4rem 0; padding-left:1.1rem; }
details.neu > summary.knopf { display:inline-block; cursor:pointer; list-style:none; }
details.neu[open] { flex-basis:100%; }
details.verwalten { margin-top:.6rem; }
@media (max-width:40rem) { table.sammtab th:nth-child(3), table.sammtab td:nth-child(3) { width:45%; } }

/* Einsammeln: kompakter, Stand als Auswahl mit Farbe */
.sinhalt p { margin:.3rem 0; }
table.sammtab { margin:.3rem 0; font-size:.92rem; }
table.sammtab th, table.sammtab td { padding:.1rem .35rem; }
table.sammtab th:nth-child(2), table.sammtab td.shak { width:11.5rem; text-align:left; }
table.sammtab select.sstatus { min-height:2rem; width:100%; padding:.1rem .3rem; font-size:.9rem; border-radius:6px; }
table.sammtab input[type=text] { min-height:2rem; padding:.1rem .4rem; font-size:.9rem; }
.sstatus.st-abgegeben { background:#d9f0e3; color:#0b4a2b; }
.sstatus.st-nein { background:#f6c9c4; color:#6b1409; }
.sstatus.st-geklaert { background:#dbe7fb; color:#12306b; }
.sstatus.st-notiz { background:#fdf0c4; color:#4a3a00; }
span.sstatus { display:inline-block; padding:.05rem .5rem; border-radius:999px; font-size:.85rem; }
details.samm { margin:.35rem 0; padding:.25rem .8rem; }
details.samm > summary { min-height:2.4rem; }
@media (max-width:40rem) { table.sammtab th:nth-child(2), table.sammtab td.shak { width:8.5rem; } table.sammtab select.sstatus { font-size:.82rem; } }

/* Einsammeln: Farben je Stand (abgegeben grün, nicht abgegeben rot, geklärt orange, siehe Notiz lila, offen weiß) */
.sstatus.st-abgegeben { background:#c9ecd6; color:#0b4a2b; }
.sstatus.st-nein { background:#f5b9b2; color:#6b1409; }
.sstatus.st-geklaert { background:#ffd9a3; color:#5a3000; }
.sstatus.st-notiz { background:#e2d2f5; color:#3d1f66; }
.sstatus.st-offen { background:#fff; color:inherit; border:1px solid var(--rand); }
select.sstatus.st-offen { border:1.5px solid var(--rand); }
table.sammtab tr.st-abgegeben td { background:#eef9f2; }
table.sammtab tr.st-nein td { background:#fdeceb; }
table.sammtab tr.st-geklaert td { background:#fff3e1; }
table.sammtab tr.st-notiz td { background:#f4ecfb; }
span.sstatus { display:inline-block; padding:.05rem .5rem; border-radius:999px; font-size:.85rem; }

/* Einsammeln: lesbar in hellem und dunklem Modus (Text immer dunkel auf hellen Farben, offen folgt dem Modus) */
.sstatus.st-offen { background:var(--surface); color:inherit; border:1px solid var(--rand); }
select.sstatus.st-offen { border:1.5px solid var(--rand); }
select.sstatus option { background:#fff; color:#1b1b1b; }
select.sstatus.st-abgegeben, select.sstatus.st-nein, select.sstatus.st-geklaert, select.sstatus.st-notiz { font-weight:600; }
table.sammtab tr.st-abgegeben td, table.sammtab tr.st-nein td, table.sammtab tr.st-geklaert td, table.sammtab tr.st-notiz td { color:#1b1b1b; }
table.sammtab tr.st-abgegeben td a, table.sammtab tr.st-nein td a, table.sammtab tr.st-geklaert td a, table.sammtab tr.st-notiz td a { color:#0b4a45; }
table.sammtab tr.st-abgegeben td { background:#e3f5ea; }
table.sammtab tr.st-nein td { background:#fbdcd9; }
table.sammtab tr.st-geklaert td { background:#ffe8c7; }
table.sammtab tr.st-notiz td { background:#eadcf8; }
table.sammtab tr[class*="st-"] td input[type=text] { background:#fff; color:#1b1b1b; }
select.sstatus.st-offen, span.sstatus.st-offen { background:#fff; color:#1b1b1b; }
select.sstatus.st-abgegeben, select.sstatus.st-nein, select.sstatus.st-geklaert, select.sstatus.st-notiz { font-weight:500; }
table.sammtab th:nth-child(2), table.sammtab td.shak { width:13rem; }
@media (max-width:40rem) { table.sammtab th:nth-child(2), table.sammtab td.shak { width:10.5rem; } }

/* Einsammeln mit Skript: geschlossen nur das Symbol, dafür mehr Platz für die Notiz */
table.sammtab.kurz th:nth-child(2), table.sammtab.kurz td.shak { width:5.2rem; }
table.sammtab.kurz select.sstatus { text-align:center; text-align-last:center; padding-left:.2rem; padding-right:1.4rem; font-size:1.05rem; }
table.sammtab.kurz select.sstatus.st-offen { font-size:.85rem; }
table.sammtab.kurz th:nth-child(2), table.sammtab.kurz td.shak { width:6rem; }
table.sammtab.kurz select.sstatus.st-offen { font-size:.8rem; padding-left:.3rem; padding-right:.9rem; text-align:left; text-align-last:left; }

/* Kinderseite: kompakt, alle Kacheln zu Beginn zugeklappt */
.kindkopf { display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 1rem; margin-bottom:.5rem; }
.kindkopf h1 { margin:0; }
.kindkopf p { margin:0; }
.kindkachel { padding:.4rem .9rem; margin:.4rem 0; }
.kindkachel > summary { min-height:2.4rem; }
.kindkachel > summary h2 { margin:0; font-size:1.1rem; }
.kindkachel .zahl { font-weight:500; color:var(--muted, inherit); font-size:.95rem; }
.kindkachel ul.sliste { list-style:none; padding:0; margin:.2rem 0; }
.kindkachel ul.sliste li { padding:.3rem 0; border-bottom:1px solid var(--rand); }
.kindkachel ul.sliste li:last-child { border-bottom:0; }
.kindkachel details.verwalten { margin-top:.4rem; }
.kindkachel .einklapp-inhalt { margin-top:.2rem; }

/* Einsammeln: Stand klein und in einer Zeile */
details.samm .skopf { gap:.1rem .7rem; }
details.samm .sname { flex:1 1 12rem; min-width:0; }
details.samm .sstand { font-size:.76rem; padding:.05rem .45rem; white-space:nowrap; flex:none; }
details.samm .sfrist { font-size:.76rem; white-space:nowrap; flex:none; }

/* Einsammeln: Dreipunkt-Menü und Info oben in der Kachel, kleiner Speichern-Knopf */
.sammhuelle { position:relative; }
.sammhuelle > details.msgmenue, .sammhuelle > details.infofeld { position:absolute; right:3.7rem; top:.45rem; z-index:3; }
.sammhuelle > details.infofeld { right:3.8rem; top:.55rem; }
.sammhuelle > details.infofeld > summary { width:1.7rem; height:1.7rem; font-size:.9rem; color:var(--accent); }
details.mitmenue .skopf { padding-right:2.6rem; }
.sammhuelle .menuefeld form { margin:0; }
.sinhalt form .aktionen { margin:.3rem 0 0; }
.sinhalt form .aktionen button { min-height:0; padding:.2rem .8rem; font-size:.85rem; }
.sinhalt form.bearbeiten { margin:.3rem 0 .6rem; padding:.5rem; border:1px solid var(--line); border-radius:8px; }

/* Kommentare: Name, Zeit und Menü in einer Zeile */
.kommentare .kkopf { display:flex; align-items:center; gap:.5rem; }
.kommentare .kkopf strong { margin-right:auto; min-width:0; }
.kommentare .kkopf .klein { flex:none; }
.kommentare details.msgmenue .menuefeld { right:0; }
.kommentare li form.formular { margin:.3rem 0; }

/* Gesprächsliste kompakter: kleiner Kreis, weniger Abstand, Art des Gesprächs klein neben dem Namen */
li.gespraech { gap:.6rem; padding:.35rem 1.5rem; }
li.gespraech.ungelesen { padding-left:calc(1.5rem - 6px); }
li.gespraech .avatar { width:2.2rem; height:2.2rem; font-size:.85rem; }
li.gespraech .gzeile a { font-size:.98rem; flex:none; max-width:60%; }
li.gespraech .gzeile { justify-content:flex-start; gap:.4rem; line-height:1.25; }
li.gespraech .gzeile .typ { flex:1 1 auto; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; color:var(--muted); }
li.gespraech .gzeile .zeit { margin-left:auto; font-size:.78rem; }
li.gespraech .vorschau { font-size:.88rem; flex:1 1 auto; }
li.gespraech .gzeile:nth-of-type(2) { justify-content:space-between; }
li.gespraech p.neu-text { margin:0; font-size:.75rem; line-height:1.2; }
li.gespraech .zaehler { min-width:1.35rem; height:1.35rem; font-size:.78rem; }
@media (max-width: 40rem) { li.gespraech { padding-left:.8rem; padding-right:.8rem; } li.gespraech.ungelesen { padding-left:calc(.8rem - 6px); } }
.seitenliste li.gespraech, .seitenliste li.gespraech.ungelesen { padding-top:.3rem; padding-bottom:.3rem; }

/* Einsammeln: Überschrift und "+ Neue Sammlung" auf einer Linie */
.entl-kopf { align-items:center; }
.entl-kopf h1 { line-height:1.2; }
.entl-kopf details.neu > summary.knopf { margin:0; padding:.25rem .1rem; line-height:1.2; }
/* Info-i beim Überblick: direkt links vor der Überschrift, nichts überlappt das Plus */
.sammhuelle > details.infofeld.ueberinfo { right:auto; left:.9rem; top:.55rem; }
details.ueberblick > summary { padding-left:2.2rem; }
.sammhuelle .infotext { right:auto; left:0; }

/* Entlassung Woche/Basiswoche: Info-i rechts oben in der Klassenzeile, Zeiten mittig, deutlichere Trennlinien */
.klassenzeile .infoecke { margin-left:auto; }
.klassenzeile .infoecke details.infofeld { color:var(--accent); }
.zeitentabelle select.zeit, .planung select.zeit { text-align:center; text-align-last:center; }
.planung .zeitwert { text-align:center; }
.zeitentabelle.planung { --trenn: color-mix(in srgb, var(--ink) 38%, var(--surface)); }
.zeitentabelle.planung th, .zeitentabelle.planung td { border-bottom:1.5px solid var(--trenn); }
.zeitentabelle.planung tbody tr:last-child > * { border-bottom:0; }
.zeitentabelle.planung th + th, .zeitentabelle.planung td + td, .zeitentabelle.planung th + td { border-left:1px solid var(--trenn); }
.zeitentabelle.planung thead th { border-bottom:2px solid var(--trenn); }

/* Kachel "Termine (heute und demnächst)": der Zusatz ist kleiner und dünner (Wunsch von Daniel) */
.zusatz { font-size:.78em; font-weight:400; color:var(--muted, inherit); }

/* Materialbörse: Sterne und kompaktere aufgeklappte Karte (Wunsch von Daniel) */
.sterne-anzeige { color:var(--mark); letter-spacing:.05em; white-space:nowrap; }
.sterne-anzeige .leer { color:var(--line); }
.material .einklapp-inhalt { margin-top:.3rem; font-size:.92rem; }
.material .einklapp-inhalt p { margin:.2rem 0; }
.material .einklapp-inhalt .klein { font-size:.8rem; }
.material .komp { gap:.25rem; margin:.2rem 0 .3rem; }
.material .komp li { padding:0 .5rem; font-size:.8rem; }
.material .wertzeile { margin:.2rem 0; }
.material .mkomm { list-style:none; margin:.2rem 0; padding:0; }
.material .mkomm li { margin:.15rem 0; padding-left:.6rem; border-left:3px solid var(--mark); }
.material .aktionen { margin:.4rem 0 .2rem; gap:.5rem; }
.material .aktionen .knopf { min-height:2.25rem; padding:.25rem .8rem; font-size:.9rem; }
.material details.bewerten > form { margin-top:.3rem; }
.material details.bewerten label { margin:.3rem 0 .1rem; }
fieldset.sterne { border:0; margin:0; padding:0; min-width:0; }
fieldset.sterne > legend { padding:0; font-size:.85rem; font-weight:700; }
.sternreihe { display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; position:relative; }
.sternreihe input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.sternreihe label { margin:0; padding:0 .1rem; font-size:2rem; line-height:1.2; min-width:2.5rem; text-align:center; color:var(--line); cursor:pointer; font-weight:400; }
.sternreihe input:checked ~ label, .sternreihe label:hover, .sternreihe label:hover ~ label { color:var(--mark); }
.sternreihe input:focus-visible + label { outline:3px solid var(--accent); outline-offset:1px; border-radius:6px; }
.material details.bewerten button { min-height:2.25rem; padding:.25rem .9rem; font-size:.9rem; }

/* Kalender kompakt (Wunsch von Daniel): Kopfzeile mit Handy-Symbol, Filter in einer Zeile, Termine eng mit Drei-Punkte-Menü */
.kalenderkopf { margin:0 0 .3rem; }
.kalenderkopf .aktionen { margin:0; gap:.4rem; align-items:center; }
.kalenderkopf .knopf { min-height:2.25rem; padding:.2rem .75rem; font-size:.95rem; }
.kalenderkopf .handyknopf { padding:.2rem .55rem; display:inline-grid; place-items:center; }
form.kalenderfilter { display:flex; flex-wrap:wrap; gap:.4rem; margin:.3rem 0 .4rem; align-items:center; }
form.kalenderfilter select { flex:1 1 9rem; width:auto; }
.meinezeile { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; margin:.1rem 0 .3rem; }
.meinezeile .knopf { min-height:2rem; padding:.1rem .6rem; font-size:.9rem; margin:0; }
h2.monat { margin:.8rem 0 .2rem; font-size:1.1rem; }
.ev { position:relative; grid-template-columns:2.6rem 1fr; gap:.5rem; padding:.4rem 2.6rem .4rem .6rem; margin-top:.35rem; }
.ev .dbox b { font-size:1.35rem; }
.ev .dbox span { font-size:.7rem; }
.ev h3 { font-size:1rem; }
.ev .meta { margin:.1rem 0 0; font-size:.85rem; gap:.2rem .6rem; }
.ev p.beitragstext { margin:.2rem 0 0; font-size:.88rem; }
.ev .art { font-size:.8rem; }
.ev > details.evmenue { position:absolute; top:.25rem; right:.3rem; z-index:2; }
@media (max-width: 40rem) { .ev { grid-template-columns:2.6rem 1fr; } }

/* Supplierplan kompakt (Wunsch von Daniel): kleine Überschrift, eine scrollbare Reihe für Tage und Biber, schmale linke Spalten */
h2.plantag { font-size:.9rem; margin:.4rem 0 .2rem; }
.reiter.tagleiste { flex-wrap:nowrap; overflow-x:auto; gap:.3rem; margin:.3rem 0; padding-bottom:.15rem; }
.reiter.tagleiste a { white-space:nowrap; flex:0 0 auto; padding:.15rem .5rem; min-height:1.8rem; font-size:.85rem; border-width:1.5px; }
table.plan { font-size:.75rem; line-height:1.2; min-width:0; }
table.plan th, table.plan td { padding:.15rem .3rem; }
table.plan th.biber { min-width:1.8rem; width:1.8rem; text-align:center; }
table.plan th.klasse, table.plan td.klasse { left:1.8rem; min-width:2.4rem; }
table.plan td.fehlt { min-width:3.5rem; }
table.plan tr.leer td, table.plan tr.leer th { height:.3rem; }

/* Supplierplan: Trennzeilen bleiben beim Verschieben nicht stehen; große Ansicht */
table.plan td.rest { position:static; }
.plangross-link { margin:.2rem 0; text-align:left; }
.plangross-link .knopf { padding:.1rem .5rem; font-size:.85rem; min-height:1.8rem; }
body:has(.plangross-seite) header.top { display:none; }
main:has(.plangross-seite) { max-width:none; padding:.4rem; }
main:has(.plangross-seite) > .karte { padding:.4rem; border:0; background:transparent; }
.plangross { overflow:auto; max-height:calc(100vh - 3.5rem); border:1px solid var(--rand); }
.plangross .scroll { overflow:visible; }
.plangross table.plan { font-size:.8rem; width:max-content; min-width:100%; }
.plangross thead th { top:0; }
.grosstag h2.plantag { position:sticky; left:0; margin:.5rem 0 .2rem; padding-left:.3rem; }
.grosstag { width:max-content; min-width:100%; }
.grosstag h2.plantag { width:max-content; max-width:calc(100vw - 1rem); }

/* Supplierstunden-Übersicht kompakt (Wunsch von Daniel, 1.11.) */
h1.uebtitel { font-size:1.15rem; margin:.3rem 0; }
form.uebfilter { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.2rem 0 .4rem; }
form.uebfilter input[type=search] { flex:1 1 5rem; min-width:0; padding:.2rem .5rem; font-size:.9rem; min-height:2rem; }
form.uebfilter select, form.uebfilter button { padding:.2rem .5rem; font-size:.9rem; min-height:2rem; width:auto; }
.uebzeile { display:flex; gap:.4rem; align-items:center; }
.uebzeile form.uebfilter { flex:1; margin:.2rem 0 .4rem; }
.uebzeile .zugriffmenue { position:relative; margin-left:auto; }
.uebzeile .zugriffmenue summary { padding:.1rem .5rem; min-height:2rem; font-size:.9rem; }
.uebzeile .zugriffmenue .menuefeld { right:0; left:auto; min-width:16rem; padding:.5rem; }
.uebtitel ~ table.protokoll { font-size:.85rem; }
.uebtitel ~ table.protokoll th, .uebtitel ~ table.protokoll td { padding:.2rem .4rem; }

/* Supplierstunden: Tabellen passen in die Seite (Wunsch von Daniel, 1.11.) */
table.uebtabelle { width:100%; border-collapse:collapse; font-size:.8rem; line-height:1.25; }
table.uebtabelle th, table.uebtabelle td { padding:.2rem .3rem; vertical-align:top; }
table.uebtabelle th { font-size:.72rem; }
table.uebtabelle .zahl { text-align:right; white-space:nowrap; width:1%; }
table.uebtabelle .mitte { text-align:center; width:1%; }
.detailzeile { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.2rem 0; }
.detailzeile label { margin:0; font-size:.85rem; }
.detailzeile input { width:5.5rem; padding:.15rem .4rem; font-size:.85rem; min-height:1.8rem; }
.detailzeile button, button.kaestchen { padding:.05rem .45rem; font-size:.85rem; min-height:1.6rem; width:auto; line-height:1; }
button.kaestchen { background:transparent; border:1px solid var(--rand); font-size:1rem; }
h2.uebtitel2 { font-size:.95rem; margin:.5rem 0 .2rem; }
.uebtitel ~ details summary { font-size:.85rem; }

/* Supplierstunden: Kästchen "Zählt nicht" – im Hell- und Dunkelmodus sichtbar, rot mit ✕ wenn ausgenommen (Wunsch von Daniel, 1.11.) */
.detailtab td { vertical-align:middle; }
.detailtab form { margin:0; display:inline; }
button.kaestchen, span.kaestchen { display:inline-block; vertical-align:middle; box-sizing:border-box; width:1.3rem; min-width:1.3rem; height:1.3rem; min-height:1.3rem; padding:0; margin:0; line-height:1.1rem; text-align:center; font-size:.85rem; font-weight:700; border:2px solid var(--ink); border-radius:4px; background:var(--surface); color:var(--ink); }
button.kaestchen.nichtzaehlt, span.kaestchen.nichtzaehlt { background:#c62828; border-color:#c62828; color:#fff; }

/* Kalender-Abo: Klassenwahl kompakt – Klasse, daneben das Kästchen, viele in einer Reihe (Wunsch von Daniel, 1.11.) */
.klassenwahl { display:flex; flex-wrap:wrap; gap:.3rem .4rem; margin:.4rem 0; }
.klassenwahl label { display:inline-flex; align-items:center; gap:.3rem; margin:0; padding:.15rem .45rem; font-size:.85rem; font-weight:600; border:1px solid var(--rand); border-radius:6px; background:var(--surface); }
.klassenwahl input[type=checkbox] { display:inline-block; width:1rem; min-width:1rem; height:1rem; min-height:1rem; margin:0; padding:0; }
.klassenwahl.schulewahl label { font-weight:500; }

/* Meine Seite kompakt (Wunsch von Daniel, 1.11.) */
.meinekurz { margin:.2rem 0 .6rem; color:var(--muted); font-size:.95rem; }
main > p:has(> a) { margin:.35rem 0; }
.person.kompakt { padding:.6rem .8rem; margin:.7rem 0; }
.person.kompakt h2 { font-size:1rem; margin:0 0 .3rem; }
.person.kompakt p { margin:.25rem 0; }
.person.kompakt button { min-height:2.2rem; padding:.3rem .8rem; font-size:.9rem; }

/* Meine Supplierstunden zuerst (Wunsch von Daniel, 1.11.) */
.eigzahlen { display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0; }
.eigzahl { display:flex; flex-direction:column; min-width:4.6rem; padding:.3rem .6rem; border:1px solid var(--rand); border-radius:8px; background:var(--surface); }
.eigzahl strong { font-size:1.3rem; line-height:1.2; }

/* Kontaktdaten */
table.kontakt th { text-align: left; font-weight: 600; white-space: nowrap; width: 1%; padding-right: 1rem; }
.kontaktform { max-width: 24rem; }

/* Umfragen kompakter (Wunsch von Daniel, 1.11.) */
.umfrage progress { height:.5rem; }
.umfrage ul.ergebnis li { margin:.25rem 0; }
.umfrage fieldset.rollenwahl { margin:.2rem 0; padding:0; border:0; }
.umfrage .haken { margin:.1rem 0; min-height:0; }
.umfrage textarea { min-height:0; }
.umfrage button { min-height:2rem; padding:.2rem .7rem; font-size:.9rem; }
.umfrage details.nochoffen { margin:.2rem 0; }
.umfrage details.nochoffen summary { cursor:pointer; font-weight:600; }
.umfrage details.nochoffen p { max-height:9rem; overflow:auto; margin:.2rem 0; padding:.3rem .5rem; border:1px solid var(--rand); border-radius:6px; }

/* Supplierplan: gleich breite Zeitspalten (Wunsch von Daniel, 1.11.) */
table.plan { width:auto; min-width:0; }
table.plan col.c-biber { width:1.8rem; }
table.plan col.c-klasse { width:2.6rem; }
table.plan col.c-fehlt { width:4.6rem; }
table.plan col.c-zeit { width:4.2rem; }
table.plan td, table.plan th { overflow-wrap:anywhere; }
table.plan td.fehlt { min-width:0; }
.plangross table.plan { width:auto; min-width:0; font-size:.85rem; }
.plangross table.plan col.c-zeit { width:5rem; }
.plangross table.plan col.c-fehlt { width:5.4rem; }
/* Umfrage: Namen hinter einem kleinen "i" (Wunsch von Daniel, 1.11.) */
.umfrage details.namenfeld { display:inline-block; vertical-align:middle; margin-left:.2rem; }
.umfrage details.namenfeld > summary { width:1.3rem; height:1.3rem; border-width:1.5px; font-size:.75rem; }
.umfrage details.namenfeld > .infotext { right:auto; left:0; width:min(18rem, 80vw); max-height:12rem; overflow:auto; font-size:.85rem; font-style:normal; font-weight:400; }

/* Chat: Kopfleiste klebt unter der Hauptleiste, nicht darüber (Wunsch von Daniel, 1.11.) */
.zweispaltig > .seitenliste { top:var(--kopfh, 0); max-height:calc(100dvh - var(--kopfh, 0px) - 1rem); }

/* Umfrage: Zahl und "Noch offen" öffnen ein kleines Feld mit Namen (Wunsch von Daniel, 1.11., ersetzt das "i") */
.umfrage details.zahlfeld { display:inline-block; vertical-align:baseline; margin:0 .2rem; }
.umfrage details.zahlfeld > summary { display:inline; width:auto; height:auto; border:0; border-radius:0; font-family:inherit; font-style:normal; font-size:inherit; font-weight:700; cursor:pointer; text-decoration:underline dotted; text-underline-offset:.2em; color:inherit; }
.umfrage details.zahlfeld[open] > summary { text-decoration-style:solid; }
.umfrage details.zahlfeld > .infotext { right:auto; left:0; width:min(18rem, 80vw); max-height:12rem; overflow:auto; font-size:.85rem; font-style:normal; font-weight:400; text-align:left; }
.umfrage details.nochoffen > summary { font-weight:600; }

/* Neue Nachricht, Chat-Werkzeuge, ganzer Bildschirm (Wunsch von Daniel, 1.11.) */
.neuzeile { margin:0; padding:.5rem 1rem; border-bottom:1px solid var(--line); }
.neuzeile .knopf { display:block; text-align:center; padding:.25rem .6rem; min-height:2rem; }
.kleinreiter { margin:.3rem 0 .6rem; }
.neuform { max-width:34rem; }
.neuform .personenwahl { max-height:16rem; overflow:auto; border:1px solid var(--line); border-radius:8px; padding:.3rem .6rem; margin:.3rem 0; }
.neuform .personenwahl label { margin:.15rem 0; min-height:0; }
.neuform .personenwahl label[hidden] { display:none; }
.chatwerkzeug { display:inline-flex; gap:.25rem; flex:none; margin-left:auto; }
.chatwerkzeug[hidden] { display:none; }
.chatwerkzeug button { min-width:2rem; min-height:2rem; padding:0 .35rem; border:1.5px solid currentColor; border-radius:8px; background:transparent; color:inherit; font:inherit; font-weight:700; font-size:.85rem; cursor:pointer; }
.chatwerkzeug button:disabled { opacity:.4; cursor:default; }
.chatkopf .chatwerkzeug + details.infofeld, .chatkopf .chatwerkzeug ~ details.menue { margin-left:0; }
.chatkopf details.infofeld { margin-left:0; }
.chatkopf .ktitel { margin-right:auto; }
html.chatschrift-m2 .chat-seite ul.chat, html.chatschrift-m2 .chat-seite textarea { zoom:.85; }
html.chatschrift-m1 .chat-seite ul.chat, html.chatschrift-m1 .chat-seite textarea { zoom:.92; }
html.chatschrift-1 .chat-seite ul.chat, html.chatschrift-1 .chat-seite textarea { zoom:1.12; }
html.chatschrift-2 .chat-seite ul.chat, html.chatschrift-2 .chat-seite textarea { zoom:1.25; }
html.chatschrift-3 .chat-seite ul.chat, html.chatschrift-3 .chat-seite textarea { zoom:1.4; }
/* Ganzer Bildschirm: keine Hauptleiste, keine Gesprächsliste, der Chat füllt die Seite */
html.chat-voll body:has(.chat-seite) header.top { display:none; }
html.chat-voll main:has(.zweispaltig) { max-width:none; padding:0; }
html.chat-voll .zweispaltig { display:block; border:0; border-radius:0; }
html.chat-voll .zweispaltig > .seitenliste { display:none; }
html.chat-voll .zweispaltig > .chat-seite { min-height:100dvh; }

/* Konten: jede Einstellung eigenes, zugeklapptes Feld (Wunsch von Daniel, 1.11.) */
.klappliste { display:grid; gap:.4rem; margin:.5rem 0; }
details.klapp { border:1.5px solid var(--line); border-radius:8px; background:var(--surface); }
details.klapp > summary { cursor:pointer; padding:.35rem .7rem; display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; font-weight:700; font-size:.92rem; }
details.klapp > summary .klein { font-weight:400; }
details.klapp[open] > summary { border-bottom:1px solid var(--line); }
details.klapp > .einstellung, details.klapp > p { margin:.5rem .7rem; border:0; padding:0; background:none; }
details.klapp .personenwahl { max-height:12rem; overflow:auto; }

/* Kursseite kompakt (Wunsch von Daniel, 1.11.) */
.kurskompakt { font-size:.9rem; padding:.7rem .9rem; margin-top:.7rem; }
.kurskompakt h2 { font-size:1.05rem; margin:0 0 .4rem; }
.klassenzeile { margin:.3rem 0; }
.klassenzeile ul { display:flex; flex-wrap:wrap; gap:.2rem .9rem; list-style:none; margin:.1rem 0 0; padding:0; }
.klassenzeile li { display:inline-flex; align-items:center; gap:.3rem; }
details.klassenwahl-klapp { border-top:1px solid var(--line); padding:.2rem 0; }
details.klassenwahl-klapp > summary { cursor:pointer; padding:.3rem .2rem; font-weight:700; }
details.klassenwahl-klapp .komp-wahl { max-height:14rem; overflow:auto; padding:.3rem 0 .4rem; }

/* Entlassung: Woche und Basiswoche kleiner, große Ansicht und Druck auf eine A4-Seite (Wunsch von Daniel, 1.11.) */
table.planung td { height: 3.4rem; }
table.planung select, table.planung input { min-height: 2rem; font-size: .8rem; padding-top: .1rem; padding-bottom: .1rem; }
table.planung th, table.planung td { font-size: .8rem; }
table.planung.dicht-3 td { height: 2.9rem; } table.planung.dicht-4 td { height: 2.6rem; }
.eplan-links { margin: .4rem 0 0; }
.eplan-seite { padding: .4rem; }
.eplan-titel { font-size: 1.1rem; margin: .3rem 0; }
body:has(.eplan-seite) header.top, body:has(.eplan-seite) footer { display: none; }
.eplan-gross .tabellenrahmen { overflow: auto; max-height: calc(100vh - 6rem); }
.eplan-gross table.planung thead th { position: sticky; top: 0; z-index: 3; background: var(--flaeche, #fff); }
.eplan-gross table.planung td.name, .eplan-gross table.planung th.name { position: sticky; left: 0; z-index: 2; background: var(--flaeche, #fff); }
.eplan-druck table.planung td, .eplan-druck table.planung select { pointer-events: none; }
@media print {
  @page { size: A4 portrait; margin: 8mm; }
  header.top, footer, .eplan-leiste, .eplan-links, #hilfe, .hilfe-knopf, .schrift-knoepfe { display: none !important; }
  body { background: #fff; }
  .eplan-seite { padding: 0; }
  .eplan-seite .tabellenrahmen { overflow: visible; max-height: none; }
  .eplan-seite table.planung { width: 100%; table-layout: fixed; font-size: 8pt; }
  .eplan-seite table.planung td, .eplan-seite table.planung th { font-size: 8pt; padding: 1px 2px; }
  .eplan-seite table.planung select { appearance: none; border: 0; background: transparent; font-size: 8pt; padding: 0; min-height: 0; }
  .eplan-seite table.planung.dicht-1 td { height: 11mm; }
  .eplan-seite table.planung.dicht-2 td { height: 8.5mm; }
  .eplan-seite table.planung.dicht-3 td { height: 6.5mm; }
  .eplan-seite table.planung.dicht-4 td { height: 5.5mm; font-size: 7pt; }
  .eplan-seite table.planung tr { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Lesebestätigung in der Blase (Wunsch von Daniel): klein, in der Kopfzeile */
li.blase .kopf .lesenform { margin:0; flex:none; }
.lesen-knopf { font:inherit; font-size:.75rem; line-height:1.3; padding:.05rem .45rem; min-height:0; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink); cursor:pointer; }
.lesen-knopf:hover, .lesen-knopf:focus-visible { background:var(--mark, #ffe58f); }
li.blase .kopf .lesen-stand { font-size:.78rem; color:var(--ink); flex:none; white-space:nowrap; }
li.blase .kopf .lesen-stand.alle { color:var(--ink); font-weight:700; }
li.blase details.zahlfeld.lesen-stand { position:relative; display:inline-block; }
li.blase details.zahlfeld.lesen-stand > summary { display:inline; width:auto; height:auto; border:0; border-radius:0; font-family:inherit; font-style:normal; font-size:inherit; font-weight:inherit; cursor:pointer; text-decoration:underline dotted; text-underline-offset:.2em; color:inherit; padding:0; }
li.blase details.zahlfeld.lesen-stand > .infotext { right:auto; left:0; width:min(18rem, 80vw); max-height:12rem; overflow:auto; font-size:.85rem; font-style:normal; font-weight:400; text-align:left; white-space:normal; z-index:5; }

/* Entlassung: Plan deutlich schlanker (Wunsch von Daniel, 1.11., zweiter Durchgang):
   Zeilen ohne Kurs sind nur so hoch wie das Auswahlfeld, nur Zeilen mit Kurs sind etwas höher. */
.zeitentabelle.planung td .kz.leer, table.planung .kz.leer { display: none; }
.zeitentabelle.planung td, table.planung td, table.planung.dicht-1 td, table.planung.dicht-2 td, table.planung.dicht-3 td, table.planung.dicht-4 td { height: auto; padding: .12rem .15rem; }
.zeitentabelle.planung th.name, table.planung th.name { padding: .1rem .25rem; font-size: .74rem; line-height: 1.1; text-align: left; }
.zeitentabelle.planung thead th { padding: .15rem .15rem; font-size: .75rem; line-height: 1.1; }
.zeitentabelle.planung thead th .datum { font-size: .66rem; }
.zeitentabelle.planung td select.zeit, table.planung select.zeit { min-height: 1.55rem; height: 1.55rem; padding: 0 .1rem; font-size: .78rem; line-height: 1.1; border-width: 1.5px; border-radius: 5px; }
.zeitentabelle.planung .zeitwert { line-height: 1.55rem; font-size: .78rem; }
.zeitentabelle.planung td .kz { height: auto; min-height: 0; margin-top: .08rem; padding: .05rem .1rem; font-size: .62rem; line-height: .8rem; }
.zeitentabelle.planung td .kz.kzt label { min-height: 0; -webkit-line-clamp: 1; }
.zeitentabelle.planung td .kz.kzt label > span { -webkit-line-clamp: 1; }
.planung col.c-name { width: 6.2rem; }
.planung col.c-frueh { width: 2rem; }
@media (max-width: 40rem) {
  .planung col.c-name { width: 3.9rem; }
  .planung col.c-frueh { width: 1.8rem; }
  .zeitentabelle.planung th.name { font-size: .66rem; }
  .zeitentabelle.planung td, table.planung td { padding: .1rem .05rem; }
  .zeitentabelle.planung td select.zeit, table.planung select.zeit { font-size: .7rem; min-height: 1.5rem; height: 1.5rem; }
  .zeitentabelle.planung td .kz { font-size: .55rem; line-height: .7rem; }
}
@media print {
  .eplan-seite table.planung.dicht-1 td { height: 8.5mm; }
  .eplan-seite table.planung.dicht-2 td { height: 7.5mm; }
  .eplan-seite table.planung.dicht-3 td { height: 6mm; }
  .eplan-seite table.planung.dicht-4 td { height: 5mm; }
  .eplan-seite table.planung .kz.leer { display: none; }
}
table.planung input[type="checkbox"] { width: 1.05rem; height: 1.05rem; min-height: 0; margin: 0; padding: 0; vertical-align: middle; }
table.planung label.nur-checkbox { display: inline-block; margin: 0; padding: 0; min-height: 0; line-height: 1; }
table.planung input[type="checkbox"] { display: inline-block; }
/* Kind einem Kurs zuordnen: klein und schmal (Wunsch von Daniel, 1.11.) */
.eigenezeit.kindkurs { margin: .3rem 0; font-size: .8rem; }
.eigenezeit.kindkurs > summary { padding: .15rem .7rem; font-size: .8rem; }
.eigenezeit.kindkurs form { gap: .3rem .5rem; margin-top: .3rem; }
.eigenezeit.kindkurs label { font-size: .75rem; max-width: 13rem; }
.eigenezeit.kindkurs select, .eigenezeit.kindkurs button { min-height: 1.7rem; font-size: .78rem; padding: .1rem .4rem; margin-top: .1rem; }
.eigenezeit.kindkurs p { margin: .2rem 0 0; }
/* Schulfreier Tag in der Woche */
.zeitentabelle.planung td.z-frei { background: #e8e8ee; color: #333; font-weight: 700; font-size: .75rem; }
.zeitentabelle.planung td.z-frei .zeitwert { line-height: 1.55rem; }
.zeitentabelle.planung thead th .datum + .datum { font-weight: 700; color: var(--ink); }
/* Einsammeln: "Noch offen (n)" ist anklickbar, die Namen stehen in einem kleinen Feld (Wunsch von Daniel, 1.11.) */
div.fehlt { margin:.3rem 0; font-size:.85rem; }
div.fehlt details.zahlfeld { display:inline-block; }
div.fehlt details.zahlfeld > summary { display:inline; width:auto; height:auto; border:0; border-radius:0; font-family:inherit; font-style:normal; font-size:inherit; font-weight:700; cursor:pointer; text-decoration:underline dotted; text-underline-offset:.2em; color:inherit; padding:0; }
div.fehlt details.zahlfeld[open] > summary { text-decoration-style:solid; }
div.fehlt details.zahlfeld > .infotext { right:auto; left:0; width:min(18rem, 85vw); max-height:12rem; overflow:auto; font-size:.85rem; }

/* Materialbörse: Bewertungen stehen unten in der Karte; die Sterne führen dorthin (Wunsch von Daniel, 1.11.) */
.material a.zur-bewertung { color:inherit; text-decoration:underline dotted; text-underline-offset:.2em; }
.material .bewertungen { margin-top:.6rem; padding-top:.4rem; border-top:1px solid var(--line); }
.material .bewertungen h3 { font-size:.9rem; margin:0 0 .2rem; }
.material .bewertungen .mkomm { max-height:14rem; overflow:auto; }
.material .bewertungen:target { outline:2px solid var(--mark); outline-offset:2px; }

/* Stundenplan (Wunsch von Daniel, 1.11.): Wochenraster, kompakt; Abweichungen nie nur als Farbe (Text steht dabei). */
table.splan { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: .8rem; }
table.splan th, table.splan td { border: 1px solid var(--line); padding: .2rem .3rem; vertical-align: top; text-align: left; }
table.splan thead th { text-align: center; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); font-weight: 600; }
table.splan tbody th { width: 2rem; text-align: center; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); font-weight: 600; }
table.splan td { min-height: 1.8rem; height: 2rem; }
.sp-eintrag { display: block; line-height: 1.25; }
.sp-weg { text-decoration: line-through; opacity: .65; }
.sp-sup.marke { display: block; margin-top: .1rem; background: #dbeafe; color: #1e3a8a; border: 1px solid #1e3a8a; }
.sp-fehlt.marke { background: #fee2e2; color: #7f1d1d; border: 1px solid #7f1d1d; }
table.splan-edit input { width: 100%; box-sizing: border-box; font-size: .8rem; padding: .2rem .25rem; }
h2.klein-titel { font-size: 1rem; margin: .6rem 0 .3rem; }
@media (max-width: 40rem) { table.splan { font-size: .7rem; } table.splan th, table.splan td { padding: .15rem .2rem; } }

/* Schulbibliothek (Wunsch von Daniel, 1.11.): Katalog, Station, Bibliotheksausweise im Scheckkartenformat (Status nie nur als Farbe). */
.bib-liste { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; }
.bib-buch { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--karte, #fff); font-size: .9rem; }
.marke.bib-frei { background: #dcfce7; color: #14532d; border: 1px solid #14532d; }
.marke.bib-aus { background: #fef3c7; color: #78350f; border: 1px solid #78350f; }
.bib-schritt { color: var(--ink); font-size: 1.1rem; padding: .6rem .8rem; border-left: .35rem solid var(--akzent, #0e6b5c); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.hinweis.bib-ok { color: var(--ink); padding: .5rem .8rem; border-left: .35rem solid #2e9e5b; background: color-mix(in srgb, #2e9e5b 14%, var(--surface)); font-size: 1.05rem; }
form.bib-scan input#code { width: min(24rem, 100%); font-size: 1.1rem; }
.bib-qr { max-width: 9rem; margin-top: .5rem; } .bib-qr svg { width: 100%; height: auto; display: block; }
.ausweise { display: flex; flex-wrap: wrap; gap: 2mm; align-items: flex-start; }
.ausweis { margin: 0; box-sizing: border-box; width: 85.6mm; height: 54mm; padding: 3mm 4mm; border: .4mm solid #0e6b5c; border-radius: 3mm; background: #fff; color: #000; break-inside: avoid; display: flex; flex-direction: column; overflow: hidden; }
.aw-kopf { display: flex; align-items: center; gap: 2mm; border-bottom: .5mm solid #F2B705; padding-bottom: 1mm; }
.aw-logo { width: 9mm; height: 9mm; flex: none; object-fit: contain; }
.aw-schule { font-size: 3mm; font-weight: 600; line-height: 1.15; }
.aw-titel { font-size: 3.2mm; letter-spacing: .3mm; text-transform: uppercase; color: #0e6b5c; margin-top: 1mm; font-weight: 700; }
.aw-mitte { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 3mm; min-height: 0; }
.aw-text { display: flex; flex-direction: column; gap: 1mm; min-width: 0; }
.aw-name { font-size: 5.2mm; line-height: 1.15; overflow-wrap: anywhere; }
.aw-klasse { font-size: 3.8mm; }
.ausweis .qr { width: 27mm; height: 27mm; flex: none; } .ausweis .qr svg { width: 100%; height: 100%; display: block; }
@media print { @page { size: A4; margin: 8mm; } .ausweise { gap: 2mm; } .ausweis { -webkit-print-color-adjust: exact; print-color-adjust: exact; } details.hilfe { display: none !important; } }

form.kindwahl { margin:0; } form.kindwahl button { all:unset; cursor:pointer; font-weight:700; color:var(--accent); text-decoration:underline; padding:.3rem 0; display:block; min-height:1.6rem; } form.kindwahl button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

ul.klassenbuecher { list-style:none; margin:.2rem 0; padding:0; } ul.klassenbuecher li { padding:.3rem 0; border-bottom:1px solid var(--line); } ul.klassenbuecher li.spaet { border-left:5px solid var(--rot); padding-left:.6rem; } ul.klassenbuecher li.spaet .klein { color:var(--rot); font-weight:700; }
details.kachel.einklapp + details.kachel.einklapp, section.kachel + details.kachel.einklapp { margin-top:.7rem; }

/* Klassenseite: Kinder-Kachel bündig mit den anderen Kacheln (Wunsch von Daniel, 1.11.) */
.klasse details.kachel.einklapp { margin-top:.7rem; margin-bottom:0; }
.klasse details.kachel.einklapp.team { margin-top:0; }
.klasse details.kinder ul.kinderliste { margin:.3rem 0 0; columns:1; }
.klasse details.kinder ul.kinderliste li { padding:.35rem .5rem; border-left:0; }
.klasse details.kinder ul.kinderliste li.mit-bes { padding-left:.5rem; border-left:0; box-shadow:inset 5px 0 0 var(--mark); padding-left:.8rem; }
.klasse details.kinder .einklapp-inhalt > p { margin:.3rem 0; }
.klasse details.kinder .einklapp-inhalt > p.aktionen { margin-top:.6rem; }

.splan-edit select.pwahl { display:block; width:100%; margin-top:.15rem; font-size:.8rem; padding:.15rem; }
/* In Rastern (Startseite, Klassenseite) sorgt nur der Rasterabstand für Abstand; zusätzlicher Außenabstand verschob die Kacheln der rechten Spalte (Wunsch von Daniel, 1.11.) */
.raster > details.kachel.einklapp, .raster > section.kachel, .klasse .raster > details.kachel.einklapp { margin-top:0; margin-bottom:0; }

/* Stundenplan: Fach ausgeschrieben, darunter die Lehrkräfte mit ganzem Namen; schmale Einheiten-Spalte (Wunsch von Daniel, 1.11.) */
table.splan thead th:first-child, table.splan tbody th { width: 1.4rem; padding-left: .1rem; padding-right: .1rem; }
.sp-eintrag + .sp-eintrag { margin-top: .25rem; }
.sp-fach { display: block; font-weight: 700; overflow-wrap: anywhere; }
.sp-lehr { display: block; font-size: .92em; overflow-wrap: anywhere; }
.sp-kuerzel { font-weight: 600; }
table.splan-edit input { margin-bottom: .15rem; }

/* Stundenplan: alles mittig, neu hinzugefügte Person kurz hervorgehoben (Wunsch von Daniel, 1.11.) */
table.splan th, table.splan td { text-align: center; vertical-align: middle; }
table.splan-edit input, .splan-edit select.pwahl { text-align: center; text-align-last: center; }
.splan-edit input.neu-dazu { background: var(--mark-soft); }

/* Stundenplan: Kürzel klein in Klammern neben dem Namen (Wunsch von Daniel, 1.11.) */
.sp-kl { font-size: .8em; color: var(--muted); font-weight: 400; }
/* Stundenplan nach Person: Klasse fett, darunter klein in Klammern das Fach (Wunsch von Daniel, 1.11.) */
.sp-pfach { display: block; font-size: .8em; color: var(--muted); font-weight: 400; line-height: 1.15; overflow-wrap: anywhere; }

/* Kacheln im Raster wirklich bündig (Wunsch von Daniel, 1.11.): die Regel für aufeinanderfolgende Kacheln (Abstand oben) war stärker als die Ausnahme im Raster und schob jede Kachel nach einer anderen um .7rem nach unten. */
.raster > details.kachel.einklapp + details.kachel.einklapp,
.raster > section.kachel + details.kachel.einklapp,
.raster > details.kachel.einklapp + section.kachel,
.raster > section.kachel + section.kachel,
.klasse .raster > details.kachel.einklapp + details.kachel.einklapp,
.klasse .raster > section.kachel + details.kachel.einklapp { margin-top: 0; }

/* Kurse kompakt (Wunsch von Daniel, 1.11.): jeder Kurs eine Zeile, zu Beginn zu; Klassen darin ebenfalls zu */
.kursliste { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.kursliste details.kachel.kurszeile { padding: .35rem .7rem; margin: 0; }
details.kurszeile > summary { gap: .6rem; flex-wrap: wrap; }
details.kurszeile > summary h2 { font-size: 1rem; flex: 1 1 10rem; overflow-wrap: anywhere; }
details.kurszeile .kurs-kurz { flex: 0 1 auto; text-align: right; }
details.kurszeile .einklapp-inhalt { margin-top: .3rem; font-size: .9rem; }
details.kurszeile .einklapp-inhalt p { margin: .2rem 0; }
details.klassenkinder { border-top: 1px solid var(--line); padding: .1rem 0; }
details.klassenkinder > summary { cursor: pointer; padding: .25rem .1rem; font-weight: 700; }
details.klassenkinder ul { display: flex; flex-wrap: wrap; gap: .15rem .9rem; list-style: none; margin: .1rem 0 .3rem .6rem; padding: 0; }
details.klassenkinder li { display: inline-flex; align-items: center; gap: .3rem; }
.zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 30rem) { .zeile2 { grid-template-columns: 1fr; } }

/* Klassenseite: je Kind Kurse, Offenes, Bücher und Kontakte in einer kleinen Zeile */
.klasse .kinfo { display:flex; flex-wrap:wrap; gap:.2rem .35rem; margin-top:.2rem; }
.klasse a.kchip, .klasse .kchip { display:inline-block; font-size:.72rem; font-weight:400; line-height:1.3; padding:.05rem .45rem; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); text-decoration:none; }
.klasse a.kchip:hover, .klasse a.kchip:focus-visible { border-color:var(--accent); text-decoration:underline; }
.klasse .kchip.offen { border-color:var(--rand); }
.klasse .kchip.spaet { border-color:var(--rot); color:var(--rot); font-weight:700; }
.klasse .kchip.kontakt { border-style:dashed; }

/* Tabelle der Kinder (Planung → Kinder) und Besonderheiten als Chips */
.klasse .kchip.bes, .kindertabelle .kchip.bes { border-color:var(--mark); background:var(--mark-soft); color:var(--ink); }
.kindertabelle { width:100%; border-collapse:collapse; font-size:.85rem; }
.kindertabelle th, .kindertabelle td { padding:.3rem .45rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.kindertabelle thead th { font-size:.75rem; color:var(--muted); font-weight:700; }
.kindertabelle tbody th { font-weight:700; white-space:nowrap; }
.kindertabelle tr.mit-bes th { box-shadow:inset 5px 0 0 var(--mark); padding-left:.8rem; }
.kindertabelle a.kchip, .kindertabelle .kchip { display:inline-block; font-size:.72rem; font-weight:400; line-height:1.3; padding:.05rem .45rem; margin:.1rem .15rem .1rem 0; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); text-decoration:none; }
.kindertabelle .kchip.spaet { border-color:var(--rot); color:var(--rot); font-weight:700; }
.kindertabelle .kchip.offen { border-color:var(--rand); }
.tabelle-rahmen { overflow-x:auto; }

/* Startseite: Termine als dieselben Karten wie im Kalender */
.startTermine .ev:first-child { margin-top:.2rem; }

/* Startseite: kompakte Terminkarte mit Monat; Betreff + Art in einer Zeile, darunter Klassen, dann Zeit und Ort */
.startTermine .ev.ev-start { grid-template-columns:2.4rem 1fr; gap:.45rem; padding:.3rem .5rem; margin-top:.3rem; align-items:center; }
.startTermine .ev.ev-start .dbox { line-height:1.05; }
.startTermine .ev.ev-start .dbox b { font-size:1.05rem; }
.startTermine .ev.ev-start .dbox span { font-size:.62rem; display:block; }
.startTermine .ev.ev-start .dbox .dmonat { font-weight:700; text-transform:uppercase; }
.startTermine .ev.ev-start .evkopf, .startTermine .ev.ev-start .evzeile { margin:0; line-height:1.3; }
.startTermine .ev.ev-start .evtitel { font-size:.92rem; }
.startTermine .ev.ev-start .evzeile { font-size:.78rem; color:var(--muted); }
.startTermine .ev.ev-start .art { font-size:.68rem; }

/* Startseite: Schnellzugriff (kleine Knöpfe zu Bereichen) */
.raster > .schnell { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.35rem; margin:0; }
.schnelllink { display:inline-flex; align-items:center; min-height:2.25rem; padding:.2rem .8rem; border:1.5px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font-weight:600; font-size:.9rem; text-decoration:none; }
.schnelllink:hover, .schnelllink:focus-visible { border-color:var(--accent); }

/* Startseite einrichten: kompakt */
.skseite h1 { font-size:1.35rem; margin:.2rem 0 .3rem; }
.skseite .skueber { font-size:1rem; margin:.9rem 0 .3rem; }
.skseite p { margin:.2rem 0; }
.skliste { list-style:none; padding:0; margin:.2rem 0; display:flex; flex-direction:column; gap:.25rem; }
.skzeile { display:flex; align-items:center; gap:.3rem; padding:.2rem .3rem .2rem .6rem; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.skzeile .name { flex:1; min-width:0; font-weight:600; font-size:.92rem; overflow-wrap:anywhere; }
.skzeile .skbtn { min-height:2rem; min-width:2rem; padding:.05rem .4rem; margin:0; font-size:.85rem; }
.skzeile .skbtn:disabled { opacity:.4; cursor:default; }
.skzeile .skweg { color:var(--rot); }
.skplusreihe { display:flex; flex-wrap:wrap; gap:.3rem; margin:.3rem 0; }
.skplus { min-height:2rem; margin:0; padding:.1rem .7rem; border-radius:999px; font-size:.85rem; }

/* Sprachnachrichten */
button.mikro { flex:none; display:grid; place-items:center; width:3rem; height:3rem; min-height:3rem; margin:0; padding:0; border-radius:50%; background:var(--surface); color:var(--ink); border:1px solid var(--line); }
button.mikro[disabled] { opacity:.5; }
.schreibleiste .aufnahme { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:.1rem 0 .45rem; padding:.35rem .6rem; border:1px solid var(--line); border-radius:.7rem; background:var(--surface); }
.schreibleiste .aufnahme[hidden] { display:none; }
.schreibleiste .aufnahme .punkt { width:.7rem; height:.7rem; border-radius:50%; background:#c62828; animation:aufblinken 1s infinite; }
.schreibleiste .aufnahme .punkt[hidden] { display:none; }
.schreibleiste .aufnahme .zeit { font-variant-numeric:tabular-nums; font-weight:600; }
.schreibleiste .aufnahme audio { height:2rem; max-width:100%; }
.schreibleiste .aufnahme audio[hidden] { display:none; }
.schreibleiste .aufnahme #auf-status { flex:1 1 8rem; }
.schreibleiste .aufnahme .klein-knopf { margin:0; padding:.25rem .7rem; min-height:2rem; font-size:.85rem; }
@keyframes aufblinken { 50% { opacity:.25; } }
@media (prefers-reduced-motion: reduce) { .schreibleiste .aufnahme .punkt { animation:none; } }
li.sprache { border-left:0; padding-left:0; }
li.sprache audio { display:block; width:100%; max-width:20rem; height:2.4rem; }
.sp { display:flex; align-items:center; gap:.5rem; width:100%; max-width:20rem; min-height:2.4rem; }
.sp-play { flex:0 0 auto; width:2.4rem; height:2.4rem; margin:0; padding:0; border-radius:50%; border:0; background:var(--accent); color:#fff; font-size:.9rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.sp-bar { flex:1 1 auto; min-width:0; margin:0; padding:0; border:0; box-shadow:none; width:auto; height:1.6rem; appearance:none; -webkit-appearance:none; background:transparent; accent-color:var(--accent); cursor:pointer; }
.sp-bar::-webkit-slider-runnable-track { height:.28rem; border-radius:.2rem; background:linear-gradient(to right, var(--accent) var(--p,0%), var(--line) var(--p,0%)); }
.sp-bar::-moz-range-track { height:.28rem; border-radius:.2rem; background:var(--line); }
.sp-bar::-moz-range-progress { height:.28rem; border-radius:.2rem; background:var(--accent); }
.sp-bar::-webkit-slider-thumb { -webkit-appearance:none; width:.9rem; height:.9rem; margin-top:-.31rem; border-radius:50%; background:var(--accent); border:0; }
.sp-bar::-moz-range-thumb { width:.9rem; height:.9rem; border-radius:50%; background:var(--accent); border:0; }
.sp-bar:disabled { opacity:.5; cursor:default; }
.sp-zeit { flex:0 0 auto; min-width:2.6rem; text-align:right; font-size:.8rem; font-variant-numeric:tabular-nums; color:var(--ink); }
button.mikro[hidden] { display:none; }

/* Schreibleiste am Handy etwas höher, damit sie nicht am unteren Rand klebt (Handy-Leisten, Gestenleiste) */
@media (max-width: 40rem) { form.schreibleiste { padding-bottom:calc(1.1rem + env(safe-area-inset-bottom)); } }

/* Gesprächs-Kopfleiste am Handy: darf die Seite nicht breiter machen (sonst rutscht der Senden-Knopf aus dem Bild) */
.chat-seite { min-width:0; max-width:100%; }
.chatkopf .ktitel { flex:1 1 0; min-width:1.5rem; }
@media (max-width: 40rem) {
  .chatkopf { gap:.3rem; padding-left:.4rem; padding-right:.4rem; }
  .chatkopf .avatar { display:none; }
}
.sortlink { color:inherit; text-decoration:none; white-space:nowrap; } .sortlink:hover, .sortlink:focus-visible { text-decoration:underline; }

/* Klassenseite: Wochentabelle für Vertretungen (Tage als Spalten, Stunden als Zeilen) */
table.vplan { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .8rem; table-layout: fixed; }
table.vplan th, table.vplan td { border: 1px solid var(--line); padding: .25rem .35rem; vertical-align: top; text-align: left; overflow-wrap: anywhere; white-space: pre-wrap; }
table.vplan thead th { background: var(--surface); }
table.vplan th:first-child { width: 2.4rem; }
table.vplan textarea { width: 100%; box-sizing: border-box; font-size: .8rem; min-height: 2.6rem; }

/* Kompetenzen: Liste mit Knöpfen, ausgeblendete Einträge blass */
ul.kompetenzen { list-style: none; margin: .3rem 0 .8rem; padding: 0; }
ul.kompetenzen li { padding: .3rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
ul.kompetenzen li.aus { opacity: .65; }
ul.kompetenzen form.inline button { font-size: .75rem; padding: .15rem .5rem; margin-left: .4rem; }
.tabellen-rahmen { overflow-x: auto; max-width: 100%; }
.stand-0 { font-weight: 400; color: var(--muted, inherit); }
/* Kompetenzraster: Kompetenzen links, Kinder oben (Namen senkrecht), runde Felder mit Zahl und Farbe */
.rz { appearance: none; -webkit-appearance: none; width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 2px solid var(--line); text-align: center; text-align-last: center; font: inherit; font-weight: 700; font-size: .72rem; line-height: 1; padding: 0; cursor: pointer; color: #1b2433; }
.rz.st-0 { background: #e9edf5; border-color: #c4ccdb; }
.rz.st-1 { background: #c62f35; border-color: #9a1f24; color: #fff; }
.rz.st-2 { background: #f5c242; border-color: #c79a1d; }
.rz.st-3 { background: #9be15d; border-color: #6bb12e; }
.rz.st-4 { background: #2f8f5b; border-color: #1f6b41; color: #fff; }
.rz.rz-geaendert { outline: 3px solid var(--accent, #2a6bd6); outline-offset: 1px; }
.rz-punkt { display: inline-block; min-width: 1.4rem; height: 1.4rem; line-height: 1.4rem; border-radius: 50%; text-align: center; font-weight: 700; font-size: .75rem; margin-right: .15rem; color: #1b2433; }
.rz-punkt.st-0 { background: #e9edf5; } .rz-punkt.st-1 { background: #c62f35; color: #fff; } .rz-punkt.st-2 { background: #f5c242; } .rz-punkt.st-3 { background: #9be15d; } .rz-punkt.st-4 { background: #2f8f5b; color: #fff; }
.rz-rahmen { overflow: auto; max-width: 100%; max-height: 75vh; border: 1px solid var(--line); border-radius: .6rem; }
table.rz-tabelle { border-collapse: separate; border-spacing: 0; font-size: .8rem; }
table.rz-tabelle th, table.rz-tabelle td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .12rem .15rem; background: var(--surface); text-align: center; }
table.rz-tabelle thead th { position: sticky; top: 0; z-index: 3; background: #1f3a5f; color: #ffffff; vertical-align: bottom; height: 8.5rem; padding: .3rem .1rem; }
table.rz-tabelle thead th a { color: #ffffff; text-decoration: none; }
table.rz-tabelle .rz-kind span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-weight: 700; font-size: .85rem; color: #ffffff; max-height: 8rem; overflow: hidden; text-overflow: ellipsis; }
table.rz-tabelle th.rz-komp { position: sticky; left: 0; z-index: 2; min-width: 9rem; max-width: 13rem; text-align: left; font-weight: 600; }
table.rz-tabelle thead th.rz-komp { z-index: 4; }
table.rz-tabelle th.rz-komp a { color: inherit; text-decoration: none; }
.rz-filter .kindwahl-liste { display: flex; flex-wrap: wrap; gap: .3rem; padding: .3rem 0; }
.rz-liste { list-style: none; padding: 0; margin: .5rem 0; }
.rz-liste li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .3rem .1rem; border-bottom: 1px solid var(--line); }
.rz-legende { margin: .4rem 0; }
.eplan-gross .rz-rahmen { max-height: calc(100vh - 8rem); }
.rz-filterfeld { margin: .5rem 0; }
.rz-filterfeld > summary { cursor: pointer; font-weight: 600; }

.rz-kopf { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .3rem; }
.rz-kopf h1 { font-size: 1.25rem; margin: 0; margin-right: auto; }
.rz-kopf details.infofeld > summary { width: 1.7rem; height: 1.7rem; font-size: .9rem; }
.rz-zeile { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .5rem; }
.rz-zeile nav.reiter { margin: 0; }
form.fachwahl { display: flex; align-items: center; gap: .4rem; margin: 0; }
form.fachwahl select { max-width: 11rem; }
.rz-zeile nav.reiter { display: flex; flex-wrap: wrap; gap: .25rem; }
.rz-zeile nav.reiter a { padding: .2rem .55rem; font-size: .8rem; min-height: 0; border-radius: 1rem; }
form.fachwahl label { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .85rem; }
form.fachwahl select, form.fachwahl button { font-size: .85rem; padding: .2rem .4rem; min-height: 0; }
.rz-kopf details.klassenfilter > summary { font-size: .85rem; padding: .2rem .6rem; min-height: 0; }
.rz-filterfeld + p.aktionen { margin: .3rem 0; }
.rz-filterfeld + p.aktionen .knopf { font-size: .8rem; padding: .2rem .6rem; min-height: 0; }
select.rz { min-height: 0; min-width: 0; box-sizing: border-box; width: 1.5rem; height: 1.5rem; flex: none; }
table.rz-tabelle thead th { height: 7.5rem; }
/* Kompetenzraster: Text klein, zum Lesen kann man zoomen */
table.rz-tabelle { font-size: .68rem; }
table.rz-tabelle th.rz-komp { min-width: 6.5rem; max-width: 9rem; font-weight: 500; line-height: 1.15; padding: .1rem .25rem; }
table.rz-tabelle thead th.rz-komp { font-size: .7rem; }
table.rz-tabelle .rz-kind span { font-size: .72rem; }
table.rz-tabelle thead th { height: 6rem; }
.rz-legende { font-size: .72rem; }
/* Auswertung: Kompetenzen links schmal und in einer Reihe, Stufen oben klein */
table.vplan.auswertung-tab { min-width: 0; table-layout: auto; font-size: .72rem; }
table.vplan.auswertung-tab th, table.vplan.auswertung-tab td { padding: .15rem .3rem; white-space: normal; vertical-align: middle; line-height: 1.2; }
table.vplan.auswertung-tab th:first-child { width: auto; text-align: left; font-weight: 500; }
table.vplan.auswertung-tab .zahl { text-align: center; width: 2.3rem; min-width: 2.3rem; padding-left: .1rem; padding-right: .1rem; }
table.vplan.auswertung-tab th:first-child, table.vplan.auswertung-tab td:first-child { min-width: 6rem; overflow-wrap: normal; word-break: normal; }
.rz-kopf + h2, .rz-kopf ~ h2 { font-size: 1rem; margin: .6rem 0 .3rem; }
.rz-kopf { }
table.vplan.auswertung-tab thead th.zahl { font-size: .56rem; font-weight: 600; line-height: 1.1; }
table.vplan.auswertung-tab .ak { display: block; margin-top: .1rem; hyphens: auto; }
table.vplan.auswertung-tab .rz-punkt { min-width: 1.1rem; height: 1.1rem; line-height: 1.1rem; font-size: .62rem; margin: 0; }
.auswertung-legende, .auswertung-legende li { font-size: .72rem; line-height: 1.25; margin: .15rem 0; }
.auswertung-legende ol { padding-left: 1.2rem; }

/* Gespräch: schmalere Kopfleiste (Wunsch von Daniel, 3.11.) */
.chatkopf { padding-top:.2rem; padding-bottom:.2rem; gap:.4rem; min-height:0; }
.chatkopf .avatar { width:2rem; height:2rem; font-size:.8rem; }
.chatkopf .zurueck { width:2rem; height:2rem; }
.chatkopf h1 { font-size:1rem; line-height:1.15; }
.chatkopf p.klein { font-size:.72rem; line-height:1.1; }
.chatkopf .menue > summary { width:2rem; height:2rem; font-size:1.4rem; }
.chatkopf details.infofeld > summary { width:1.7rem; height:1.7rem; font-size:.9rem; }
.chatwerkzeug button { min-width:1.7rem; min-height:1.7rem; font-size:.8rem; }

/* Menü der letzten Nachrichten öffnet nach oben, damit es nicht hinter der Schreibleiste verschwindet */
li.blase:nth-last-child(-n+3) details.msgmenue .menuefeld { top:auto; bottom:100%; }
/* Kompetenzseiten: Kopf kompakt, "i" immer im Bild */
.rz-kopf { position: relative; flex-wrap: nowrap; gap: .5rem; margin: .1rem 0 .2rem; }
.rz-kopf h1 { flex: 1 1 auto; min-width: 0; font-size: 1.15rem; margin: 0; }
.rz-kopf .rz-zurueck { flex: none; font-size: 1.2rem; text-decoration: none; padding: 0 .3rem; }
.rz-kopf details.infofeld { position: static; margin-left: auto; }
.rz-kopf details.infofeld > .infotext { position: absolute; left: 0; right: 0; top: 100%; width: auto; max-width: none; z-index: 20; font-size: .8rem; font-style: normal; font-weight: 400; text-align: left; margin-top: .2rem; }
.rz-zeile { margin: .15rem 0 .25rem; gap: .35rem; justify-content: flex-start; }
.rz-zeile details.klassenfilter { margin: 0; }
.rz-werk { display: flex; align-items: flex-start; gap: .4rem; margin: .2rem 0; }
.rz-werk .rz-filterfeld { flex: 1 1 auto; margin: 0; min-width: 0; }
.rz-werk .knopf { flex: none; font-size: .8rem; padding: .2rem .6rem; min-height: 0; }
.rz-legende { margin: .2rem 0; }
details.aendern { display: inline-block; vertical-align: middle; }
details.aendern > summary { display: inline-block; cursor: pointer; padding: .1rem .5rem; font-size: .8rem; border: 1px solid var(--line); border-radius: .5rem; list-style: none; }
details.aendern > summary::-webkit-details-marker { display: none; }
form.aendern-form { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0; }
form.aendern-form input[type=text] { flex: 1 1 14rem; min-width: 0; }
.rz-zeile details.klassenfilter > summary { font-size: .8rem; padding: .15rem .55rem; min-height: 0; }
.rz-zeile form.fachwahl select { max-width: 8.5rem; }
.rz-zeile form.fachwahl label { font-size: .8rem; }
.rz-werk .rz-filterfeld > summary { font-size: .85rem; padding: .1rem 0; }
.rz-form .aktionen { margin: .3rem 0; }
.rz-form .aktionen .primaer { font-size: .85rem; padding: .3rem .8rem; min-height: 0; }
.rz-form .aktionen .klein { font-size: .72rem; }

/* Menü an der Nachricht: bleibt im Bild, auch bei kurzen Nachrichten (Wunsch von Daniel, 3.11.) */
li.blase { position:relative; }
li.blase details.msgmenue { position:static; }
li.blase details.msgmenue .menuefeld { top:2.1rem; right:auto; left:0; min-width:11rem; max-width:calc(100vw - 1.5rem); }
li.blase.eigene details.msgmenue .menuefeld { left:auto; right:0; }
li.blase:nth-last-child(-n+3) details.msgmenue .menuefeld { top:auto; bottom:100%; }

/* Kopfleiste im Gespräch: Name und Zusatz in einer Zeile, noch dünner */
.chatkopf { padding-top:.1rem; padding-bottom:.1rem; }
.chatkopf .ktitel { display:flex; align-items:baseline; gap:.4rem; overflow:hidden; }
.chatkopf .ktitel h1 { flex:0 1 auto; min-width:0; }
.chatkopf .ktitel p.klein { flex:0 1 auto; min-width:0; }
.chatkopf .zurueck, .chatkopf .menue > summary { width:1.9rem; height:1.9rem; }

/* Kompetenzraster: Filter kompakt (Wunsch von Daniel, 3.11.) */
form.rz-filter { display:block; margin:.3rem 0; font-size:.8rem; }
.rz-filterzeile { display:flex; flex-wrap:wrap; gap:.4rem .8rem; align-items:center; margin:.2rem 0; }
.rz-filter label { display:flex; align-items:center; gap:.3rem; margin:0; font-size:.8rem; }
.rz-filter select { min-height:0; padding:.15rem .35rem; font-size:.8rem; width:auto; max-width:9rem; }
fieldset.rz-kinderfilter { border:0; margin:.3rem 0; padding:0; min-width:0; }
fieldset.rz-kinderfilter legend { font-size:.78rem; font-weight:700; padding:0; margin-bottom:.2rem; }
.rz-kinderfilter .kindwahl-liste { display:flex; flex-wrap:wrap; gap:.25rem; padding:0; }
.rz-kinderfilter label.chip { display:inline-flex; align-items:center; gap:.25rem; padding:.1rem .45rem; border:1px solid var(--line); border-radius:1rem; font-size:.75rem; min-height:0; cursor:pointer; }
.rz-kinderfilter label.chip:has(input:checked) { background:var(--accent-soft); border-color:var(--accent); font-weight:700; }
.rz-kinderfilter label.chip input { width:.9rem; height:.9rem; margin:0; min-height:0; }
.rz-filterknoepfe { display:flex; gap:.4rem; align-items:center; margin:.3rem 0 .1rem; }
.rz-filterknoepfe button, .rz-filterknoepfe .knopf { font-size:.78rem; padding:.2rem .7rem; min-height:0; margin:0; }
form.fachwahl button, .rz-zeile .reiter a { font-size:.78rem; }
html .rz-zeile nav.reiter { display:flex; flex-wrap:wrap; gap:.25rem; margin:0; }
html .rz-zeile nav.reiter a { font-size:.75rem; padding:.15rem .55rem; min-height:0; line-height:1.3; border-width:1px; }
html form.fachwahl select { font-size:.8rem; padding:.15rem .4rem; min-height:0; border-width:1px; }
html form.fachwahl button { font-size:.75rem; padding:.15rem .5rem; min-height:0; }
html .rz-werk .rz-filterfeld > summary { font-size:.8rem; }
html .rz-werk .knopf { font-size:.75rem; padding:.15rem .55rem; border-width:1px; }
html .rz-filter select { border-width:1px; }
html .rz-filterknoepfe button, html .rz-filterknoepfe .knopf { font-size:.75rem; padding:.15rem .6rem; border-width:1px; }

/* Vertretungstabelle schmaler: bleibt in der Seite, seitlich wischbar (Wunsch von Daniel, 3.11.) */
html .klasse, html .klasse .raster, html .klasse .einklapp-inhalt, html .klasse details.kachel { min-width: 0; max-width: 100%; }
html .klasse .tabellenrahmen, html .vplan-form .tabellenrahmen { max-width: 100%; margin-left: 0; margin-right: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
html table.vplan:not(.auswertung-tab) { min-width: 24rem; font-size: .68rem; line-height: 1.25; }
html table.vplan:not(.auswertung-tab) th, html table.vplan:not(.auswertung-tab) td { padding: .15rem .25rem; }
html table.vplan:not(.auswertung-tab) th:first-child { width: 1.5rem; min-width: 1.5rem; padding-left: .15rem; padding-right: .1rem; }
html table.vplan:not(.auswertung-tab) textarea { font-size: .7rem; min-height: 2.2rem; padding: .2rem .25rem; }
@media (min-width: 40rem) { html table.vplan:not(.auswertung-tab) { min-width: 0; font-size: .78rem; } }
html table.vplan:not(.auswertung-tab) { min-width: 19rem; }
html table.vplan:not(.auswertung-tab) thead th { font-size: .6rem; padding-left: .15rem; padding-right: .1rem; white-space: nowrap; overflow: hidden; text-overflow: clip; }
html table.vplan:not(.auswertung-tab) th:first-child { width: 1.7rem; min-width: 1.7rem; }
html table.vplan:not(.auswertung-tab) td { font-size: .62rem; padding: .12rem .15rem; hyphens: auto; }
@media (min-width: 40rem) { html table.vplan:not(.auswertung-tab) thead th { font-size: .78rem; } html table.vplan:not(.auswertung-tab) td { font-size: .78rem; } }
/* Legende im Kompetenzraster: klein, Kreise überlappen nicht (Wunsch von Daniel, 3.11.) */
html .rz-legende { display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .6rem; margin:.2rem 0; font-size:.68rem; line-height:1.2; }
html .rz-legende .rz-punkt { min-width:1rem; height:1rem; line-height:1rem; font-size:.6rem; margin:0 .2rem 0 0; vertical-align:middle; }
html .rz-legende .rz-leg { display:inline-flex; align-items:center; white-space:nowrap; }

/* Kompetenzraster: Kopf so hoch wie der längste Name, Kompetenz mittig im Feld (Wunsch von Daniel, 3.11.) */
html table.rz-tabelle thead th.rz-kind { height: auto; vertical-align: bottom; }
html table.rz-tabelle .rz-kind span { max-height: none; overflow: visible; text-overflow: clip; }
html table.rz-tabelle tbody th.rz-komp { vertical-align: middle; text-align: center; }
html table.rz-tabelle thead th.rz-komp { vertical-align: middle; text-align: center; }

/* Gespräch: Knöpfe A−/A+/⤢ auf gleicher Höhe wie der Name, schlanker (Wunsch von Daniel, 3.11.) */
html .chatkopf { align-items: center; }
html .chatkopf .ktitel { align-self: center; margin: 0; }
html .chatkopf .ktitel h1, html .chatkopf .ktitel p.klein { margin: 0; }
html .chatkopf .chatwerkzeug { align-self: center; align-items: center; margin-top: 0; margin-bottom: 0; gap: .2rem; }
html .chatkopf .chatwerkzeug button { margin: 0; min-width: 1.6rem; min-height: 1.6rem; height: 1.6rem; padding: 0 .3rem; font-size: .75rem; line-height: 1; }
html .chatkopf .menue, html .chatkopf .menue > summary { margin-top: 0; margin-bottom: 0; align-self: center; }

/* Klassenseite: gleicher Abstand zwischen Klassenteam und Kacheln; Reiter beim Kind (Wunsch von Daniel, 3.11.) */
html .klasse .raster { margin-top: .6rem; }
html .klasse details.kachel.einklapp.team { margin-bottom: 0; }
nav.kindreiter { margin: .3rem 0 .6rem; }

/* Freiwillige Supplierungen (Wunsch von Daniel, 3.11.) */
.fw-liste { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .4rem; }
.fw-stunde { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.fw-stunde.zu { opacity: .65; }
.fw-info { flex: 1 1 12rem; min-width: 0; }
.fw-aktion form { margin: 0; }
.fw-aktion button, .fw-stunde button.klein { margin: 0; min-height: 2rem; padding: .2rem .7rem; font-size: .85rem; }
.fw-stunde details.verwalten { flex-basis: 100%; }
.fw-stunde details.verwalten form { display: inline-block; margin-right: .4rem; }
.fw-einheiten { display: flex; flex-wrap: wrap; gap: .3rem .8rem; }
.marke.gemeldet { color: var(--accent); font-weight: 700; }
/* Supplierplan "Ganzer Plan": am Handy dasselbe Format wie "Plan groß" (gleiche Spaltenbreiten und Schrift), seitlich wischbar (Wunsch von Daniel, 3.11.) */
html .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
html .scroll table.plan { width: auto; min-width: 0; font-size: .85rem; line-height: 1.25; }
html .scroll table.plan col.c-zeit { width: 5rem; }
html .scroll table.plan col.c-fehlt { width: 5.4rem; }
html .scroll table.plan td, html .scroll table.plan th { padding: .15rem .3rem; }
html .scroll table.plan { table-layout: fixed; width: 1px; }
html .scroll table.plan col.c-biber { width: 2rem; }
html .scroll table.plan col.c-klasse { width: 2.8rem; }
html .scroll table.plan td, html .scroll table.plan th { overflow-wrap: break-word; word-break: normal; hyphens: auto; }

/* Kalender: Arten mit Farbe verwalten */
html .artzeile { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:.3rem 0; }
html .artzeile input[name="name"] { flex:1 1 10rem; min-width:0; margin:0; }
html .artzeile input[type="color"] { width:2.6rem; height:2.2rem; padding:0; margin:0; border:1.5px solid var(--line); border-radius:6px; background:none; }
html .artzeile button { margin:0; }

/* Startseite: Wichtige Links platzsparend, nur der Linkname, mehrere in einer Zeile */
html .wichtlinks { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.25rem .9rem; font-size:.85rem; }
html .wichtlinks li { margin:0; padding:0; }

/* Mitteilungen (Postfach): Liste links, Lesefeld rechts; am Handy erst die Liste, dann die gewählte Mitteilung */
html .kopfzeile { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; margin:.2rem 0 .4rem; }
html .kopfzeile h1 { margin:0; }
html .postfach { display:block; }
html .postfach .pf-rechts { display:none; }
html .postfach.hat-auswahl .pf-links { display:none; }
html .postfach.hat-auswahl .pf-rechts { display:block; }
html .pf-liste { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
html .pf-liste li { margin:0; padding:0; border-top:1px solid var(--line); }
html .pf-liste li:first-child { border-top:0; }
html .pf-eintrag { display:block; padding:.5rem .7rem; text-decoration:none; color:var(--ink); font-size:.92rem; }
html .pf-eintrag:hover, html .pf-eintrag:focus-visible { background:var(--mark-soft); }
html .pf-eintrag.aktiv { background:var(--mark-soft); box-shadow:inset 4px 0 0 var(--accent); }
html .pf-eintrag.ungelesen { box-shadow:inset 4px 0 0 var(--mark); }
html .pf-eintrag.ungelesen .pf-von, html .pf-eintrag.ungelesen .pf-betreff { font-weight:800; }
html .pf-kopf { display:flex; justify-content:space-between; gap:.5rem; }
html .pf-von { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html .pf-zeit { white-space:nowrap; }
html .pf-betreff, html .pf-vorschau { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html .pf-leer { padding:.6rem 0; }
html .pf-suche { margin:.2rem 0 .5rem; }
html .pf-lesen-inhalt h2 { margin:.2rem 0 .3rem; font-size:1.2rem; }
html .pf-meta { margin:0 0 .6rem; }
html .pf-text { padding:.6rem .1rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-height:none; }
html .pf-dateien { list-style:none; margin:.6rem 0; padding:0; }
html .pf-dateien li { margin:.2rem 0; }
html .pf-zurueck { margin:0 0 .4rem; }
html .lesestand .menuefeld ul { margin:.2rem 0 .6rem 1rem; padding:0; }
@media (min-width: 56rem) {
  html .postfach { display:grid; grid-template-columns:minmax(16rem, 22rem) 1fr; gap:1rem; align-items:start; }
  html .postfach .pf-links, html .postfach.hat-auswahl .pf-links { display:block; }
  html .postfach .pf-rechts, html .postfach.hat-auswahl .pf-rechts { display:block; min-width:0; }
  html .pf-zurueck { display:none; }
}
html .lesestand { display:inline-block; position:relative; margin:0; }
html .lesestand summary { margin:0; cursor:pointer; list-style:none; }
html .lesestand .menuefeld { position:absolute; z-index:5; top:100%; left:0; min-width:14rem; max-height:16rem; overflow:auto; margin-top:.2rem; padding:.5rem .8rem; background:var(--surface); border:1px solid var(--line); border-radius:8px; }

/* Mitteilungen: Auswahl einzelner Personen, Klassenteams und Dienste */
html .zielwahl { margin: .35rem 0; }
html .zielwahl > summary { cursor: pointer; font-size: .9rem; }
html .zielliste { max-height: 12rem; overflow: auto; padding: .3rem .1rem; display: grid; gap: .1rem; border: 1px solid var(--line); border-radius: .4rem; margin-top: .3rem; }
html .zielliste label[hidden] { display: none; }
html .zielsuche { width: 100%; max-width: 20rem; margin: .3rem 0 0; font-size: .9rem; }

/* Mitteilungen im Stil eines Mail-Programms: Kreis, Vorschau, Punkt für Ungelesenes, Suchleiste unten, Aktionsleiste (Wunsch von Daniel, 4.11.) */
html .pf-titel { margin-bottom:.3rem; }
html .pf-titel h1 { margin:0; }
html .pf-auswaehlen { padding:.25rem .8rem; font-size:.9rem; }
html .pf-liste { border:0; border-radius:0; }
html .pf-eintrag { display:grid; grid-template-columns:.8rem 2.6rem minmax(0, 1fr); gap:.45rem; align-items:start; padding:.6rem .2rem; box-shadow:none; }
html .pf-eintrag.ungelesen { box-shadow:none; }
html .pf-eintrag.aktiv { box-shadow:inset 4px 0 0 var(--accent); }
html .pf-eintrag .avatar { width:2.6rem; height:2.6rem; font-size:.95rem; }
html .pf-punkt { color:#2f7cf6; font-size:.7rem; line-height:2.6rem; text-align:center; }
html .pf-mitte { display:block; min-width:0; }
html .pf-vorschau { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html .pf-flagge { color:#e8890c; margin-right:.2rem; }
html .pf-wahl { cursor:pointer; grid-template-columns:1.4rem .8rem 2.6rem minmax(0, 1fr); }
html .pf-wahl input { margin:.8rem 0 0; width:1.2rem; height:1.2rem; }
html .pf-leiste { position:sticky; bottom:0; z-index:5; display:flex; align-items:center; gap:.5rem; padding:.5rem 3.4rem .6rem .1rem; background:var(--surface); border-top:1px solid var(--line); }
html .pf-pille { flex:1; display:flex; align-items:center; gap:.4rem; min-width:0; padding:.1rem .7rem; border:1px solid var(--line); border-radius:999px; background:var(--surface); }
html .pf-pille input { flex:1; min-width:0; border:0; background:transparent; color:var(--ink); padding:.4rem 0; margin:0; font-size:1rem; box-shadow:none; }
html .pf-rund { display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid var(--line); color:var(--ink); text-decoration:none; background:var(--surface); flex:none; }
html .pf-rund.an { background:#2f7cf6; color:#fff; border-color:#2f7cf6; }
html .pf-aktionsleiste { justify-content:space-around; padding-right:3.4rem; }
html .pf-ikone-form { margin:0; }
html .pf-ikone { display:inline-flex; flex-direction:column; align-items:center; gap:.1rem; min-width:3.2rem; padding:.2rem .3rem; border:0; background:transparent; color:var(--ink); font-size:1.25rem; line-height:1.2; text-decoration:none; cursor:pointer; }
html .pf-ikone-text { font-size:.68rem; }
html .pf-lesekopf { display:flex; align-items:center; gap:.6rem; margin:.2rem 0 .4rem; }
html .pf-lesekopf .avatar { width:2.8rem; height:2.8rem; flex:none; }
html .pf-lesewer { flex:1; min-width:0; display:flex; flex-direction:column; }
html .pf-an { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html .pf-lesen-inhalt h2 { font-size:1.45rem; }
html .pf-text { border-top:0; border-bottom:0; }

/* Mitteilungen: Suche und „Neue Mitteilung“ oben statt unten; Hinweise im Menü (Wunsch von Daniel, 4.11.) */
html .pf-suchleiste { display:flex; align-items:center; gap:.5rem; margin:.3rem 0 .5rem; }

/* Aktualisieren-Knopf und Stand (Mitteilungen, Nachrichten) */
html .pf-titelknoepfe { display: inline-flex; gap: .4rem; align-items: center; }
html .pf-stand { margin: .1rem 0 .3rem; min-height: 1em; }
html [data-aktualisieren].dreht span[aria-hidden] { display: inline-block; animation: aktu-dreh .8s linear infinite; }
@keyframes aktu-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html [data-aktualisieren].dreht span[aria-hidden] { animation: none; } }
@media (max-width: 40rem) { html .pf-aktu-text { display: none; } }

/* Handy-Feinschliff (Fund aus der 80-Personen-Simulation, 4.11.) */
/* Leere Statuszeile darf keine Lücke lassen (Nachrichten, Aktualisierung füllt sie nur bei Bedarf). */
html .pf-stand:empty { display:none; margin:0; min-height:0; }
html .pf-stand { min-height:0; }
/* "(für alle)" neben dem Gesprächsnamen: voller Kontrast (mindestens 4,5), auch auf der gelben Hervorhebung. */
html li.gespraech .typ, html li.gespraech .gzeile .typ { color:var(--ink); opacity:1; }
/* "nur ungelesene" in den Mitteilungen: der Punkt allein war nicht zu verstehen, jetzt mit Beschriftung. */
html .pf-rund { width:auto; min-width:2.75rem; height:2.75rem; padding:0 .8rem; gap:.35rem; }
html .pf-rund-text { font-size:.9rem; font-weight:700; white-space:nowrap; }
@media (max-width: 40rem) {
  /* Kalender-Filter: die drei Auswahlfelder je eine volle Zeile, Knopf darunter; nichts läuft aus dem Bild. */
  form.kalenderfilter { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
  form.kalenderfilter select, form.kalenderfilter button { width:100%; min-width:0; }
  form.kalenderfilter #alle, form.kalenderfilter button { grid-column:1 / -1; }
  /* Suchzeilen (Personen, Materialbörse, Formulare): Feld über die ganze Breite, Knöpfe darunter. */
  .suchleiste.werkzeug .suchzeile { flex-wrap:wrap; }
  .suchleiste.werkzeug .suchzeile input[type="search"], .suchleiste.werkzeug .suchzeile input[type="text"] { flex:1 1 100%; min-width:0; width:100%; }
  .suchleiste.werkzeug .suchzeile select { flex:1 1 8rem; min-width:0; }
  .material-seite form.filter.werkzeug > div, .material-seite form.filter.werkzeug > div:first-child { flex:1 1 100%; }
  /* Personenliste: Tabelle bleibt in der Seite, lange Wörter brechen, Rolle/Klassen enger. */
  table.personentabelle, table.personentabelle th, table.personentabelle td { font-size:.85rem; }
  table.personentabelle td, table.personentabelle th { padding:.35rem .4rem; }
  table.personentabelle td { overflow-wrap:break-word; }
  table.personentabelle th { overflow-wrap:normal; word-break:keep-all; white-space:nowrap; }
  /* Kopfmenü: höchstens zwei Zeilen. */
  header.top nav.tabs { gap:0; }
  header.top nav.tabs a, header.top nav.tabs summary { padding:.3rem .35rem .2rem; font-size:.86rem; }
}
/* Tippflächen: auf Touch-Geräten mindestens 2,75 rem hoch und breit. */
@media (pointer: coarse) {
  .reiter.klein a, .werkzeug button, .werkzeug .knopf, .aktionen .knopf.klein, button.klein, .menuefeld a, .menuefeld .menuepunkt { min-height:2.75rem; }
  header.top .who button, header.top .schrift button { min-height:2.75rem; }
}

/* Warnung vor dem automatischen Abmelden (public/sitzung.js) */
.sitzungswarnung { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 60; max-width: min(34rem, calc(100vw - 1.5rem)); background: var(--surface); color: var(--ink); border: 2px solid var(--accent); border-radius: .6rem; padding: .6rem .9rem; box-shadow: 0 4px 18px rgba(0,0,0,.25); font-size: .9rem; }
.sitzungswarnung p { margin: 0; }
.sitzungswarnung button { margin-left: .4rem; }

/* Sprunglink für die Tastatur: erst sichtbar, wenn er den Fokus hat (Barrierefreiheit, 4.11.) */
.sprunglink { position:absolute; left:.5rem; top:-4rem; z-index:1000; background:var(--surface); color:var(--ink); border:2px solid var(--accent); border-radius:6px; padding:.5rem .8rem; font-weight:700; }
.sprunglink:focus { top:.5rem; }
main:focus { outline:none; }
/* Meine Lehrmittel (Lehrmittelkammer) */
html ul.meinelehr { list-style: none; margin: .2rem 0 .8rem; padding: 0; }
html ul.meinelehr li { padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
html ul.meinelehr form.inline { margin-left: .4rem; }

/* Editor und formatierter Text in Mitteilungen */
html .editor { border:1px solid var(--rand); border-radius:.5rem; background:var(--surface); margin:.25rem 0; }
html .editor:focus-within { outline:2px solid var(--accent); outline-offset:1px; }
html .editor-leiste { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem; padding:.3rem; border-bottom:1px solid var(--line); background:var(--bg); border-radius:.5rem .5rem 0 0; position:sticky; top:0; z-index:1; }
html .editor-knopf { min-width:2rem; min-height:2rem; padding:.1rem .45rem; font-size:.85rem; line-height:1; border:1px solid var(--rand); border-radius:.35rem; background:var(--surface); color:var(--ink); cursor:pointer; }
html .editor-knopf:hover, html .editor-knopf:focus-visible { background:var(--accent-soft); }
html .editor-trenner { width:1px; align-self:stretch; background:var(--line); margin:0 .2rem; }
html .editor-g1 { font-size:.7rem; } html .editor-g2 { font-size:.85rem; } html .editor-g3 { font-size:1.05rem; } html .editor-g4 { font-size:1.3rem; }
html .editor-punkt { display:inline-block; width:1rem; height:1rem; border-radius:50%; border:1px solid var(--rand); vertical-align:middle; }
html .editor-punkt[data-farbe="schwarz"] { background:#000; } html .editor-punkt[data-farbe="rot"] { background:#c62828; } html .editor-punkt[data-farbe="orange"] { background:#d96a00; }
html .editor-punkt[data-farbe="grün"] { background:#2e7d32; } html .editor-punkt[data-farbe="blau"] { background:#1565c0; } html .editor-punkt[data-farbe="violett"] { background:#6a1b9a; } html .editor-punkt[data-farbe="grau"] { background:#757575; }
html .editor-feld { min-height:22rem; max-height:70vh; overflow:auto; resize:vertical; padding:.7rem .8rem; line-height:1.5; font-size:1rem; outline:none; overflow-wrap:anywhere; }
html .editor-feld p, html .pf-html p { margin:0 0 .6rem; }
html .editor-feld ul, html .editor-feld ol, html .pf-html ul, html .pf-html ol { margin:.2rem 0 .6rem; padding-left:1.6rem; }
html .pf-html { white-space:normal; max-height:none; }
html .pf-html li { margin:.1rem 0; }
/* Farben und Größen (nur diese festen Klassen, der Server erlaubt nichts anderes) */
html .fk-rot, html .editor-feld font[color="#c62828"] { color:#c62828; } html .fk-orange { color:#b85a00; } html .fk-gruen { color:#2e7d32; }
html .fk-blau { color:#1565c0; } html .fk-violett { color:#6a1b9a; } html .fk-grau { color:#757575; }
html .fg-klein { font-size:.8em; } html .fg-gross { font-size:1.25em; } html .fg-sehr { font-size:1.6em; line-height:1.25; }
@media (prefers-color-scheme: dark) {
  html .fk-rot { color:#ff8a8a; } html .fk-orange { color:#ffb066; } html .fk-gruen { color:#7fd68a; }
  html .fk-blau { color:#8ab4ff; } html .fk-violett { color:#d1a3ff; } html .fk-grau { color:#b0b0b0; }
}

/* Mail-Editor kompakter, eingeschaltete Formate deutlich (5.11.) */
html .editor-leiste { gap:.12rem; padding:.2rem; }
html .editor-knopf { min-width:1.7rem; min-height:1.7rem; padding:0 .3rem; font-size:.8rem; }
html .editor-trenner { margin:0 .1rem; }
html .editor-g1 { font-size:.65rem; } html .editor-g2 { font-size:.8rem; } html .editor-g3 { font-size:.95rem; } html .editor-g4 { font-size:1.1rem; }
html .editor-punkt { width:.8rem; height:.8rem; }
html .editor-knopf.an { background:#0b5cad; color:#fff; border-color:#fff; box-shadow:0 0 0 2px #0b5cad, inset 0 -3px 0 #fff; }
html .editor-knopf.an:hover, html .editor-knopf.an:focus-visible { background:#0b5cad; }
html .editor-knopf.an .editor-punkt { border:2px solid #fff; box-shadow:0 0 0 1px #0b5cad; }
@media (pointer: coarse) { html .editor-knopf { min-height:2.2rem; min-width:2rem; } }

/* Personensuche bei "Neue Nachricht → Person": Namen als Knöpfe in einer Liste (Wunsch von Daniel, 5.11.) */
.neuform .personenliste button.personzeile { display:block; width:100%; text-align:left; background:transparent; color:var(--ink); border:0; border-bottom:1px solid var(--line); border-radius:0; padding:.45rem .3rem; margin:0; min-height:2.4rem; font:inherit; cursor:pointer; }
.neuform .personenliste button.personzeile:hover, .neuform .personenliste button.personzeile:focus-visible { background:var(--surface); outline:2px solid var(--accent); outline-offset:-2px; }
.neuform .personenliste button.personzeile[hidden] { display:none; }

/* Allgemeine Suche (Wunsch von Daniel, 5.11.) */
html .kopfsuche { display:flex; align-items:center; gap:.2rem; margin:0; }
html .kopfsuche input { width:9rem; min-height:2rem; padding:.1rem .5rem; font-size:.85rem; }
@media (max-width: 47.99rem) { html .kopfsuche input { display:none; } }
html .suchzeile { display:flex; gap:.4rem; margin:.5rem 0 1rem; }
html .suchzeile input { flex:1; min-width:0; }
html .suchbereich { margin:0 0 1rem; }
html .suchbereich h2 { font-size:1rem; margin:.2rem 0; }
html .suchliste { list-style:none; margin:0; padding:0; }
html .suchliste li { padding:.35rem 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
/* Entlassung, Woche: Tagesfilter (Wunsch von Daniel, 5.11.) */
html .tagwahl { display:flex; gap:.3rem; margin:.4rem 0; flex-wrap:wrap; }
html .tagwahl button { min-width:2.6rem; min-height:2.2rem; padding:0 .7rem; border:1px solid var(--rand); border-radius:1.2rem; background:var(--surface); color:var(--ink); cursor:pointer; font-size:.9rem; }
html .tagwahl button[aria-pressed="true"] { background:#0b5cad; color:#fff; border-color:#fff; box-shadow:0 0 0 2px #0b5cad; }
html table.zeitentabelle.nur-tag-1 :is(tr > *, colgroup > col):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) { display:none; }
html table.zeitentabelle.nur-tag-2 :is(tr > *, colgroup > col):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(4)) { display:none; }
html table.zeitentabelle.nur-tag-3 :is(tr > *, colgroup > col):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(5)) { display:none; }
html table.zeitentabelle.nur-tag-4 :is(tr > *, colgroup > col):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(6)) { display:none; }
html table.zeitentabelle.nur-tag-5 :is(tr > *, colgroup > col):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(7)) { display:none; }
/* Mail-Editor: kompakte Leiste wie bei der iPhone-Mail (Wunsch von Daniel, 5.11.). Breit mit Maus: alle Knöpfe wie bisher; Handy/Tablet: wenige Symbole, Formate und Farben als Reihe darunter. */
html .editor-kompakt { display:none; }
html .editor-panel { display:flex; flex-wrap:wrap; align-items:center; gap:.12rem; }
html .editor-dateien { margin:0; padding:.3rem .6rem; font-size:.85rem; border-top:1px solid var(--line); overflow-wrap:anywhere; }
html .editor-dateien-weg { margin-left:.3rem; min-width:1.6rem; min-height:1.6rem; border:1px solid var(--rand); border-radius:50%; background:var(--surface); color:var(--ink); cursor:pointer; }
@media all {
  html .editor-leiste { flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:.25rem; }
  html .editor-kompakt { display:flex; justify-content:flex-start; align-items:center; gap:.35rem; padding:.15rem 0 .15rem .5rem; }
  html .editor-panel { display:none; padding:.2rem .1rem; }
  html .editor-panel.offen { display:flex; }
  html .editor-symbol { min-width:2.75rem; min-height:2.75rem; padding:0 .6rem; border:1px solid var(--rand); border-radius:1.4rem; background:var(--surface); color:var(--ink); font-size:1.05rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
  html .editor-symbol:hover, html .editor-symbol:focus-visible { background:var(--accent-soft); }
  html .editor-symbol.an { background:#0b5cad; color:#fff; border-color:#fff; box-shadow:0 0 0 2px #0b5cad; }
  html .editor-farbkreis { display:block; width:1.35rem; height:1.35rem; border-radius:50%; border:2px solid var(--ink); background:conic-gradient(#c62828, #d96a00, #2e7d32, #1565c0, #6a1b9a, #c62828); }
  html .editor-symbol.an .editor-farbkreis { border-color:#fff; }
  html .dateien-kompakt { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

/* Mail-Editor: dieselbe Symbolleiste auch am Computer, links oben mit Abstand zum Rand, Rückgängig und Wiederherstellen (Wunsch von Daniel, 5.11.) */
@media (hover: hover) and (pointer: fine) { html .editor-symbol { min-width:2.3rem; min-height:2.3rem; } }
html .editor-leiste { position:sticky; }
html .editor-symbol { margin:0; }
/* Mail: Empfänger in Überbegriffen zum Aufklappen (Wunsch von Daniel, 5.11.) */
html .zielober > .zielinnen { display:flex; flex-wrap:wrap; gap:.2rem .9rem; padding:.3rem .2rem .2rem .6rem; }
html .zielober > .zielinnen > details { flex:1 1 100%; }
html .zielober > summary { font-weight:600; }

html header.top .bar { padding-bottom:.2rem; }
html header.top nav.tabs { border-top:1px solid var(--line); padding-top:.15rem; }

/* To-Do-Listen (Startseite) */
.todoliste { border-top:1px solid var(--line); padding:.35rem 0; }
.todoliste > summary { cursor:pointer; padding:.3rem 0; }
.todo-titel { font-weight:600; }
.todo-marke { font-size:.75rem; border:1px solid var(--line); border-radius:.6rem; padding:0 .4rem; }
.todo-liste { list-style:none; margin:.2rem 0; padding:0; }
.kachel .todo-eintrag { display:flex; align-items:flex-start; gap:.4rem; padding:.15rem 0; border-top:0; }
.todo-eintrag form { margin:0; display:inline; }
.todo-text { flex:1; overflow-wrap:anywhere; align-self:center; line-height:1.3; }
.todo-eintrag.erledigt .todo-text { text-decoration:line-through; opacity:.8; }
.todo-haken, .todo-weg { margin:0; background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:.1rem .35rem; min-width:1.8rem; min-height:1.8rem; }
.todo-haken { font-size:1.15rem; }
.todo-neu { display:flex; gap:.4rem; margin:.4rem 0; }
.todo-neu input { flex:1; min-width:0; }
.todo-aktionen form.inline { display:inline; margin:0; }
.textknopf { background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; cursor:pointer; font:inherit; }

/* Entlassung heute: Anwesenheit auf einen Blick */
.anwesenheit { display:flex; flex-wrap:wrap; gap:.3rem .8rem; align-items:baseline; margin:.3rem 0 .5rem; padding:.3rem .6rem; border:1px solid var(--line); border-radius:.5rem; font-size:.9rem; }
.anwesenheit .klein { font-size:.78rem; }

/* Nachträge bei den Supplierstunden: ändern (✎) und entfernen (✕) in einer Zelle; das Formular klappt in der Zelle auf (kein Popup, damit nichts abgeschnitten wird). */
.nachtragaktion { white-space:nowrap; }
.nachtragaktion > form, .nachtragaktion > details { display:inline-block; vertical-align:top; margin:0 .25rem 0 0; }
details.nachtragaendern > summary { list-style:none; cursor:pointer; display:inline-block; box-sizing:border-box; width:1.3rem; height:1.3rem; line-height:1.1rem; text-align:center; font-size:.85rem; font-weight:700; border:2px solid var(--ink); border-radius:4px; background:var(--surface); color:var(--ink); }
details.nachtragaendern > summary::-webkit-details-marker { display:none; }
details.nachtragaendern[open] > summary { background:var(--accent-soft); }
details.nachtragaendern > form { display:block; white-space:normal; min-width:12rem; margin:.3rem 0 0; }
details.nachtragaendern > form label { display:block; font-size:.8rem; margin-top:.3rem; }
details.nachtragaendern > form input { width:100%; box-sizing:border-box; }
details.nachtragaendern > form button { margin:.4rem 0 0; }

/* Datenschutzseite: offene Stellen gelb (feste Farben, in Hell- und Dunkelmodus lesbar), kleine Fußzeile */
mark.offen { background:#fff3b0; color:#1a1a1a; padding:0 .25em; border-radius:3px; }
footer.fuss { max-width:60rem; margin:1rem auto 2rem; padding:0 1rem; text-align:center; font-size:.85rem; }
footer.fuss a { color:var(--ink); text-decoration:underline; }

/* Zweiter Faktor: QR-Code und Wiederherstellungscodes */
.qr { max-width: 14rem; margin: .6rem 0; background: #fff; padding: .4rem; border: 1px solid var(--line); border-radius: .5rem; }
.qr svg { display: block; width: 100%; height: auto; }
ul.codes { columns: 2; list-style: none; padding: 0; font-size: 1.05rem; }
ul.codes li { margin: .25rem 0; }

/* Supplierplan bearbeiten (Direktion, Administration): Tabelle wie im Plan, seitlich wischen */
.pe-seite h1 { font-size:1.15rem; margin:.2rem 0; }
.pe-seite .kopfzeile { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.4rem; }
.pe-seite .anleitung { margin:.3rem 0; }
.pe-seite .legende { margin-top:.6rem; }
.pe-filter { display:flex; flex-wrap:wrap; gap:.4rem .7rem; align-items:end; margin:.4rem 0; font-size:.8rem; }
.pe-filter[hidden] { display:none; }
.pe-filter label { display:flex; flex-direction:column; gap:.1rem; margin:0; }
.pe-filter select, .pe-filter input { font-size:.8rem; padding:.2rem .35rem; margin:0; min-width:5rem; }
.pe-filter .klein-knopf { margin:0; }
.pe-rahmen { overflow-x:auto; overflow-y:visible; border:1px solid var(--line); border-radius:.4rem; }
table.pe { table-layout:fixed; border-collapse:separate; border-spacing:0; width:1px; font-size:.72rem; }
table.pe col.pe-b { width:1.8rem; } table.pe col.pe-k { width:3.2rem; }
table.pe col.pe-f { width:6.6rem; } table.pe col.pe-z { width:5.8rem; } table.pe col.pe-a { width:3.6rem; }
table.pe th, table.pe td { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:0; vertical-align:middle; }
table.pe thead th { background:var(--surface); }
:where(table.pe td) { background:var(--surface); }
table.pe tr.bb-o td:not(.gef) { background:#fbe3c8; color:#1a1a1a; }
table.pe tr.bb-g td:not(.gef) { background:#dcefd5; color:#1a1a1a; }
table.pe tr.bb-o td.pe-a, table.pe tr.bb-g td.pe-a { color:inherit; }
.pe-bnr { display:block; text-align:center; font-weight:700; }
table.pe thead th { position:sticky; top:0; z-index:3; font-size:.7rem; padding:.2rem .1rem; text-align:center; }
table.pe th.pe-b, table.pe td.pe-b { position:sticky; left:0; z-index:2; }
table.pe th.pe-k, table.pe td.pe-k { position:sticky; left:1.8rem; z-index:2; }
table.pe th.pe-f, table.pe td.pe-f { position:static; }
table.pe thead th.pe-f { position:sticky; top:0; }
table.pe thead th.pe-b, table.pe thead th.pe-k, table.pe thead th.pe-f { z-index:4; }
table.pe tr[hidden] { display:none; }
table.pe td.s-fzp input.zt { color:#1a4fd0; } table.pe td.s-rot input.zt { color:#b00020; }
table.pe td.pe-geaendert { box-shadow:inset 0 0 0 2px var(--accent); }
.pz { display:flex; align-items:center; }
.pz input.zt, table.pe input.zt { width:100%; box-sizing:border-box; border:0; background:transparent; color:inherit; font:inherit; padding:.25rem .2rem; margin:0; min-height:1.7rem; text-overflow:ellipsis; }
.pz-mehr { margin:0; padding:0 .2rem; min-height:1.7rem; background:transparent; color:var(--ink); border:0; font-size:.7rem; }
.pz-mehr[hidden] { display:none; }
table.pe select.zm { width:100%; font-size:.65rem; margin:0; padding:0; }
html.pe-js table.pe select.zm { display:none; }
table.pe td.pe-a { white-space:nowrap; text-align:center; }
table.pe td.pe-a .klein-knopf { margin:0 .05rem; }
.speicherleiste { position:sticky; bottom:0; z-index:5; display:flex; gap:.6rem; align-items:center; padding:.5rem .3rem; background:var(--surface); border-top:1px solid var(--line); }
.speicherleiste button { margin:0; }
.klein-knopf { font-size:.75rem; padding:.15rem .4rem; min-height:1.7rem; }
dialog.pe-dialog { position:fixed; top:.5rem; margin:0 auto; width:min(24rem,calc(100% - 1rem)); max-height:calc(100dvh - 1rem); overflow:auto; border:1px solid var(--line); border-radius:.6rem; background:var(--surface); color:var(--ink); padding:.7rem; }
dialog.pe-dialog::backdrop { background:rgba(0,0,0,.4); }
dialog.pe-dialog h2 { font-size:.95rem; margin:0 0 .3rem; }
.pe-d-text { display:block; font-size:.8rem; }
.pe-d-text input { width:100%; box-sizing:border-box; font-size:16px; margin:.15rem 0 .4rem; }
.pe-d-kopf { font-size:.8rem; margin:.3rem 0 .15rem; }
.pe-chips { display:flex; flex-wrap:wrap; gap:.25rem; }
.pe-chips button { margin:0; font-size:.78rem; padding:.15rem .45rem; min-height:1.8rem; }
.pe-chips button[aria-pressed="true"] { background:#1a4fd0; color:#fff; border-color:#fff; }
.pe-pbox { margin:.2rem 0 .4rem; font-size:.78rem; }
.pe-pbox summary { cursor:pointer; padding:.1rem 0; }
.pe-liste { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:.3rem; }
.pe-liste li { margin:0; }
.pe-liste button { display:block; width:100%; text-align:left; border:0; border-radius:0; background:transparent; color:var(--ink); font-size:.68rem; line-height:1.1; padding:.1rem .35rem; min-height:0; margin:0; white-space:pre; }
.pe-liste button[aria-pressed="true"] { background:#1a4fd0; color:#fff; }
.pe-farben { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; margin:.3rem 0; }
button.pe-sw { margin:0; padding:0; width:1.7rem; height:1.7rem; min-height:0; border:2px solid var(--line); border-radius:50%; font-size:.8rem; font-weight:700; color:#1a1a1a; }
button.pe-sw.sw-keine, button.pe-sw.sw-blau, button.pe-sw.sw-rot { background:#fff; }
button.pe-sw.sw-blau { color:#1a4fd0; } button.pe-sw.sw-rot { color:#b00020; }
button.pe-sw[aria-pressed="true"] { border-color:#1a4fd0; box-shadow:0 0 0 2px #fff, 0 0 0 4px #1a4fd0; }
.pe-format { border:0; padding:0; margin:.3rem 0; font-size:.8rem; }
.pe-format label { display:inline-flex; gap:.25rem; align-items:center; margin:0 .6rem .2rem 0; }
@media (pointer: coarse) { .pe-liste button { padding:.2rem .35rem; } table.pe input.zt { min-height:2.75rem; font-size:.75rem; } .pz-mehr { min-height:2.75rem; } .klein-knopf { min-height:2.75rem; min-width:2.75rem; } }

/* Plan-Größe (Wunsch von Daniel, 11.11.): verkleinern/vergrößern mit Schaltern; nur Darstellung. */
.pzoom { display:flex; align-items:center; gap:.3rem; margin:.3rem 0; font-size:.8rem; flex-wrap:wrap; }
/* Anzeige-Prozent: 100 % ist die Standardgröße (= 70 % der Rohgröße, siehe public/planzoom.js) */
html.pzoom-30 table.plan, html.pzoom-30 table.pe { zoom:0.21; }
html.pzoom-40 table.plan, html.pzoom-40 table.pe { zoom:0.28; }
html.pzoom-50 table.plan, html.pzoom-50 table.pe { zoom:0.35; }
html.pzoom-60 table.plan, html.pzoom-60 table.pe { zoom:0.42; }
html.pzoom-70 table.plan, html.pzoom-70 table.pe { zoom:0.49; }
html.pzoom-80 table.plan, html.pzoom-80 table.pe { zoom:0.56; }
html.pzoom-90 table.plan, html.pzoom-90 table.pe { zoom:0.63; }
html.pzoom-100 table.plan, html.pzoom-100 table.pe { zoom:0.7; }
html.pzoom-110 table.plan, html.pzoom-110 table.pe { zoom:0.77; }
html.pzoom-125 table.plan, html.pzoom-125 table.pe { zoom:0.875; }
html.pzoom-150 table.plan, html.pzoom-150 table.pe { zoom:1.05; }
html.pzoom-175 table.plan, html.pzoom-175 table.pe { zoom:1.225; }
html.pzoom-200 table.plan, html.pzoom-200 table.pe { zoom:1.4; }
.pzoom-text { color:var(--ink); }
.pzoom-wert { min-width:2.8rem; text-align:center; font-variant-numeric:tabular-nums; }
.pzoom .pzoom-knopf { margin:0; padding:.1rem .55rem; min-height:1.8rem; min-width:2rem; font-size:.85rem; }
.pzoom .pzoom-knopf:disabled { opacity:.45; }
@media (pointer: coarse) { .pzoom .pzoom-knopf { min-height:2.75rem; min-width:2.75rem; } }

/* Einträge bleiben in einer Zeile, die Spalte wird breiter (Wunsch von Daniel, 11.11.) */
html .scroll table.plan, html .plangross table.plan { table-layout:auto; width:max-content; min-width:0; }
html .scroll table.plan td:not(.rest), html .scroll table.plan th, html .plangross table.plan td:not(.rest), html .plangross table.plan th { white-space:nowrap; overflow-wrap:normal; word-break:normal; hyphens:none; }
table.pe input.zt { text-overflow:clip; }

/* Auf-/Zuklappfelder deutlich erkennbar, auch im Dunkelmodus */
details.klapp > summary, details.pe-pbox > summary { list-style:none; display:flex; align-items:center; gap:.5rem; min-height:2.2rem; color:var(--ink); }
details.klapp > summary::-webkit-details-marker, details.pe-pbox > summary::-webkit-details-marker { display:none; }
details.klapp > summary::before, details.pe-pbox > summary::before { content:"▸"; flex:none; display:inline-grid; place-items:center; width:1.5rem; height:1.5rem; border:2px solid var(--ink); border-radius:.35rem; background:var(--surface); color:var(--ink); font-size:1rem; line-height:1; font-weight:800; }
details.klapp[open] > summary::before, details.pe-pbox[open] > summary::before { content:"▾"; }

/* Supplierplan bearbeiten: wie eine Excel-Tabelle (Wunsch von Daniel, 11.11.) */
.pe-rahmen { border:1px solid #8a929b; border-radius:.2rem; background:#fff; }
table.pe { font-size:.8rem; border-left:0; }
table.pe col.pe-b { width:2.2rem; } table.pe col.pe-k { width:3.4rem; } table.pe col.pe-f { width:7rem; }
table.pe col.pe-z { width:4.6rem; } table.pe col.pe-a { width:3.8rem; }
table.pe th, table.pe td { border-right:1px solid #aab1b8; border-bottom:1px solid #aab1b8; height:1.9rem; }
table.pe thead th { background:#e4e7ea; color:#1a1a1a; font-size:.78rem; font-weight:700; white-space:nowrap; padding:.3rem .35rem; border-bottom:2px solid #8a929b; height:auto; }
table.pe thead th.pe-b, table.pe thead th.pe-k, table.pe thead th.pe-f { background:#d5d9dd; }
table.pe td.pe-b, table.pe td.pe-k { background:#f1f3f5; color:#1a1a1a; }
table.pe tr.bb-o td.pe-b, table.pe tr.bb-o td.pe-k { background:#f7d3ae; }
table.pe tr.bb-g td.pe-b, table.pe tr.bb-g td.pe-k { background:#c4e3b9; }
table.pe td.pe-b { border-right:2px solid #8a929b; }
table.pe td.pe-f { border-right:2px solid #8a929b; }
table.pe tr.leer td { height:.9rem; }
table.pe input.zt, .pz input.zt { white-space:nowrap; font-size:.8rem; padding:.2rem .35rem; min-height:1.8rem; }
table.pe input.zt:focus, table.pe input.zt:focus-visible { outline:2px solid #1a4fd0; outline-offset:-2px; background:#fff; color:#1a1a1a; border-radius:0; }
table.pe td.pe-geaendert { box-shadow:inset 0 0 0 2px #1a4fd0; }
.pz-mehr { color:#555; font-size:.65rem; }
table.pe td.gef .pz-mehr, table.pe tr.bb-o .pz-mehr, table.pe tr.bb-g .pz-mehr { color:#333; }

/* Plan-Editor: Zeilen-Knöpfe (＋ ✕) bleiben rechts immer erreichbar, auch bei breiter Tabelle */
table.pe th.pe-a, table.pe td.pe-a { background:var(--surface); } /* bleibt in der letzten Spalte, schiebt sich nicht über den Plan */
/* Wochenliste des Supplierplans: schlank, Symbole statt Knöpfe */
table.wochenliste { font-size:.82rem; } table.wochenliste th, table.wochenliste td { padding:.25rem .45rem; }
table.wochenliste tr.woche-aktuell { background:color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.wk-akt { display:flex; gap:.3rem; align-items:flex-start; flex-wrap:wrap; margin:0; }
.wk-akt form.inline { margin:0; }
.ikon-knopf, .wk-pop > summary { display:inline-flex; align-items:center; justify-content:center; min-width:1.9rem; height:1.9rem; padding:0 .3rem; margin:0; border:1px solid var(--line); border-radius:.4rem; background:var(--surface); color:var(--ink); font-size:.95rem; line-height:1; text-decoration:none; cursor:pointer; list-style:none; }
.wk-pop > summary::-webkit-details-marker { display:none; }
.wk-pop > summary::before { content:none !important; }
.wk-pop { margin:0; } .wk-pop[open] { flex-basis:100%; } .wk-pop form { margin:.3rem 0; }

/* Supplierplan-Editor: leere Platzhalterzelle (Zelle, die weder sichtbar noch verbunden ist), damit die Spalten nicht verrutschen */
table.pe td.pe-leer { border:1px solid var(--line); background:var(--surface); padding:0; }

/* Supplierplan: Druckansicht der Woche (A4 quer), gemeinsame Legende */
.plandruck .druck-tag { margin: 0 0 1rem; }
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  .plandruck .nicht-drucken, header.top, footer, #hilfe, .hilfe-knopf, .schrift-knoepfe { display: none !important; }
  .plandruck .druck-tag { break-after: page; page-break-after: always; }
  .plandruck .druck-tag:last-of-type { break-after: auto; page-break-after: auto; }
  .plandruck table.plan { font-size: 7pt; width: 100%; }
  .plandruck .scroll { overflow: visible; }
  .plandruck table.plan th, .plandruck table.plan td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Markieren-Leiste neben der Größe (Wunsch von Daniel, 11.11.): Fläche und Schrift des gewählten Feldes. */
.pzoom { position:relative; }
.pf-gruppe { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; margin-left:.8rem; padding-left:.8rem; border-left:1px solid var(--line); }
.pf-knopf:disabled { opacity:.5; cursor:not-allowed; }
.pf-pop { position:absolute; left:0; right:0; top:100%; z-index:40; display:flex; flex-wrap:wrap; gap:.3rem; padding:.4rem; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:.4rem; box-shadow:0 4px 12px rgba(0,0,0,.25); max-width:22rem; }
.pf-pop[hidden] { display:none; }
.pf-pop button.pe-sw { width:2rem; height:2rem; }
.pf-gruppe button.pe-sw[aria-pressed="true"] { border-color:#1a4fd0; box-shadow:0 0 0 2px var(--surface), 0 0 0 4px #1a4fd0; }
table.pe td.pe-gewaehlt { outline:2px solid #1a4fd0; outline-offset:-2px; }
@media (pointer: coarse) { .pf-knopf, .pf-pop button.pe-sw { min-height:2.5rem; } .pf-pop button.pe-sw { min-width:2.5rem; } }

/* Interessierte an einer "?"/"!"-Stunde (Wunsch von Daniel, 11.11.) */
table.pe .pe-int { position:absolute; right:1px; bottom:0; font-size:.55rem; line-height:1; padding:0 .15rem; background:#1a4fd0; color:#fff; border-radius:.5rem; }
table.pe .pe-int.leer { display:none; }
table.pe td[data-int] { position:relative; }

/* Supplierplan-Editor: abwesende Personen sind in der Auswahl durchgestrichen und nicht einteilbar */
.pe-abw { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .65; }
.pe-abw:disabled { cursor: not-allowed; }

/* Supplierplan: automatische Farben aus dem Text (Hintergrund nur, wenn von Hand keine Fläche gesetzt ist) */
table.plan td.auto-frage, table.pe tr td.auto-frage:not(.gef) { background:#c9daf8; color:#1a1a1a; }
table.plan td.auto-ruf, table.pe tr td.auto-ruf:not(.gef) { background:#2ee6d0; color:#1a1a1a; }
table.plan td.auto-supp, table.pe tr td.auto-supp:not(.gef) { background:#fff; color:#1a1a1a; }
table.plan td.auto-fzp, table.pe tr td.auto-fzp:not(.gef) { color:#0b2fc2; font-weight:600; }
table.pe tr td.auto-fzp:not(.gef) input.zt { color:#0b2fc2; font-weight:600; }
table.pe tr td.auto-frage:not(.gef) input.zt, table.pe tr td.auto-ruf:not(.gef) input.zt, table.pe tr td.auto-supp:not(.gef) input.zt { color:#1a1a1a; }
table.plan .abw { color:#b00020; font-weight:400; }
table.plan .abw-fzp { color:#0b2fc2; font-weight:600; }
table.plan .abw-schwarz { color:#1f2933; }

/* Supplierplan-Editor: farbige Klammer im Stundenfeld (nur Anzeige, über dem nicht bearbeiteten Feld).
   Rot = fehlt, schwarz = Ausflug, blau = Freizeitpädagog:in. Beim Bearbeiten (Fokus) verschwindet der Spiegel. */
table.pe td.pe-mit-spiegel { position:relative; }
table.pe td.pe-mit-spiegel .pe-spiegel { position:absolute; inset:0; display:flex; align-items:center; padding:.2rem .35rem; box-sizing:border-box; font-size:.8rem; line-height:1.2; white-space:pre; overflow:hidden; pointer-events:none; color:#1a1a1a; }
table.pe tr td.pe-mit-spiegel:not(:focus-within) input.zt { color:transparent !important; }
table.pe td.pe-mit-spiegel:focus-within .pe-spiegel { display:none; }
table.pe .pe-spiegel .pe-k-rt { color:#b00020; font-weight:400; }
table.pe .pe-spiegel .pe-k-bl { color:#0b2fc2; font-weight:600; }
table.pe .pe-spiegel .pe-k-sw { color:#1f2933; }
@media (pointer: coarse) { table.pe td.pe-mit-spiegel .pe-spiegel { font-size:.75rem; } }
.sp-entb { color: var(--muted); font-weight: 700; }

/* Supplierplan-Editor: Leiste "Abwesend" (Übernahme aus dem Bereich Abwesenheiten) */
.pe-abwleiste { margin: .3rem 0; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--surface); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* Plan-Editor: mehrere Personen in "fehlt" stehen untereinander, die Zeile wird höher (bleibt dieselbe Klasse) */
table.pe td[data-i="0"] .pe-spiegel { flex-direction:column; align-items:flex-start; justify-content:center; gap:0; white-space:pre; }
table.pe td.pe-n2 { height:2.6rem; } table.pe td.pe-n3 { height:3.7rem; } table.pe td.pe-n4 { height:4.8rem; }

/* Supplierplan-Editor: Vorschläge nach Rolle (Farbe immer zusätzlich als Text L2/L1/I/frei) */
.pe-chips button.pv, span.pv { border-left-width: .3rem; border-style: solid; }
.pe-chips button.pv-frei, span.pv-frei { background:#d9f2dd; color:#10361a; border-color:#2e8b3d; }
.pe-chips button.pv-l2, span.pv-l2 { background:#d6eef2; color:#0b3540; border-color:#1d8aa0; }
.pe-chips button.pv-l1, span.pv-l1 { background:#ffe8c7; color:#4a2c00; border-color:#d9822b; }
.pe-chips button.pv-i, span.pv-i { background:#f1dcf5; color:#3d0f47; border-color:#8e3aa1; }
.pe-chips button.pv-gebunden, span.pv-gebunden { background:#e8e8e8; color:#3a3a3a; border-color:#8a8a8a; text-decoration:line-through; }
.pe-chips button.pv[aria-pressed="true"] { background:#1a4fd0; color:#fff; border-color:#fff; text-decoration:none; }
span.pv { display:inline-block; padding:.05rem .4rem; border-radius:.3rem; font-size:.72rem; margin-right:.2rem; }
.pv-filter { margin-bottom:.3rem; }
.pv-legende { margin:.3rem 0 0; }

/* Stundenplan der Person am Handy: kleine Marken, Fach in der Zeile, keine zerrissenen Klammern (3.11.→13.11.) */
table.splan.sp-person .sp-pfach { display: inline; overflow-wrap: normal; word-break: normal; font-size: .85em; line-height: 1.15; }
table.splan.sp-person .sp-pfach { white-space: normal; }
table.splan.sp-person .marke { font-size: .85em; font-weight: 600; padding: 0 .25rem; border-width: 1px; border-radius: .5rem; line-height: 1.3; max-width: 100%; box-sizing: border-box; }
table.splan.sp-person .sp-sup.marke { display: block; width: fit-content; max-width: 100%; margin: .1rem auto 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.splan.sp-person .sp-kurz { display: none; }
@media (max-width: 40rem) {
  table.splan.sp-person .sp-lang { display: none; }
  table.splan.sp-person .sp-kurz { display: inline; }
  table.splan.sp-person .sp-pfach { font-size: .8em; }
}
table.splan.sp-person .sp-weg { opacity: .8; }

/* Menü nach Aufgaben (Heute, Kommunikation, Meine Klasse, Material): kurze Erklärung unter dem Namen, Zahl am Menü */
nav.tabs .tabmenue .reiterhinweis { display:block; font-size:.78rem; font-weight:400; color:var(--muted); line-height:1.2; margin-top:.1rem; }
details.tabgruppe > summary .zaehler { margin-left:.1rem; }
/* Einstellungen (Direktion und Administration): Übersicht aller Einstellungsseiten */
.einst-gruppe { margin:.9rem 0 0; }
.einst-gruppe h2 { font-size:1rem; margin:0 0 .3rem; }
.einst-liste { list-style:none; margin:0; padding:0; display:grid; gap:.35rem; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); }
.einst-liste a { display:block; padding:.55rem .75rem; border:1.5px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); text-decoration:none; font-weight:600; }
.einst-liste a:hover, .einst-liste a:focus-visible { border-color:var(--accent); background:var(--accent-soft, rgba(0,0,0,.05)); }
.einst-liste small { display:block; font-weight:400; color:var(--muted); font-size:.8rem; }
/* Sammelkachel "Neu für dich" */
.neu-teil { margin:.45rem 0 0; }
.neu-teil h3 { font-size:.9rem; margin:0 0 .15rem; }
.neu-leer { margin:0; }

/* Wunsch von Daniel, 13.11.: Aufklappmenüs am Handy bleiben im Bild (vorher ragte das Menü rechts aus dem Fenster und verbreiterte die Seite) */
@media (max-width: 48rem) {
  header.top nav.tabs { position:relative; }
  header.top nav.tabs details.tabgruppe { position:static; }
  header.top nav.tabs .tabmenue { left:0; right:0; min-width:0; max-width:100%; box-sizing:border-box; }
  header.top nav.tabs .tabmenue a { white-space:normal; }
}

/* Wunsch von Daniel, 13.11.: Supplierplan "Meine Stunden" am Handy platzsparend (leere Tage in einer Zeile, kleinere Knöpfe) */
.tagblock.tag-leer h2 { margin:.55rem 0 0; font-size:1rem; }
.tag-leer-text { font-size:.85rem; font-weight:400; color:var(--muted); }
@media (pointer: coarse) { .reiter.klein a { min-height:2.3rem; } }

/* Wunsch von Daniel, 13.11.: Supplierplan "Ganzer Plan" am Handy kompakter (Tag- und Biber-Knöpfe, Größenschalter in einer Zeile, kleinere Legende) */
@media (pointer: coarse) {
  .reiter.klein.tagleiste a { min-height:2rem; padding:.1rem .5rem; }
  .reiter.klein { gap:.3rem; }
  .pzoom { flex-wrap:nowrap; gap:.25rem; }
  .pzoom .pzoom-knopf { min-height:2.2rem; min-width:2.2rem; padding:.1rem .4rem; }
  .pzoom .pzoom-wert { min-width:2.4rem; }
}
.legende { font-size:.78rem; line-height:1.35; margin:.4rem 0; }
.plangross-link.aktionen { margin:.3rem 0; }

/* Supplierplan kompakt: Kopfzeile, Knöpfe, eigene Stunden, Größenleiste (Wunsch von Daniel, 13.11.) */
.planstand { margin:.1rem 0 .3rem; font-size:.72rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html .aktionen.aktionen-eng { display:flex; flex-wrap:nowrap; gap:.3rem; margin:.2rem 0; }
html .aktionen.aktionen-eng .knopf.klein, html .plangross-link.aktionen .knopf.klein { min-height:1.7rem; padding:.1rem .5rem; font-size:.75rem; margin:0; white-space:nowrap; }
html .plangross-link.aktionen { display:flex; flex-wrap:nowrap; gap:.3rem; margin:.3rem 0; }
html ul.meine { margin:.15rem 0 .3rem; }
html ul.meine li.eingeteilt { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.78rem; padding:.2rem .5rem; margin:.2rem 0; border-radius:6px; background:color-mix(in srgb, var(--accent) 16%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); color:var(--ink); }
html ul.meine li.eingeteilt strong { margin-right:.3rem; }
html .tagblock h2 { font-size:.9rem; margin:.5rem 0 0; }
html .pzoom { flex-wrap:nowrap; gap:.2rem; margin:.2rem 0; font-size:.68rem; }
html .pzoom .pzoom-knopf { min-height:1.5rem; min-width:1.6rem; padding:0 .35rem; font-size:.72rem; margin:0; }
html .pzoom .pzoom-text { display:none; }

/* Meine Seite und Einstellungen: kompakte Kacheln (Wunsch von Daniel, 13.11.) */
.einst-gruppe { margin:.6rem 0 0; }
.einst-gruppe h2 { font-size:.85rem; margin:0 0 .25rem; color:var(--muted); text-transform:none; }
.einst-liste { gap:.25rem; grid-template-columns:repeat(auto-fill, minmax(13rem, 1fr)); }
.einst-liste a { padding:.35rem .6rem; border-radius:8px; font-size:.86rem; line-height:1.25; }
.einst-liste small { font-size:.72rem; line-height:1.2; }
@media (pointer: coarse) { .einst-liste a { min-height:2.75rem; } }

/* Klassenseite: Gruppen und kompakte Kacheln (Wunsch von Daniel, 13.11.) */
html .klasse h1 { font-size:1.25rem; margin:.1rem 0 .3rem; }
html .klasse .kl-gruppe { margin:.55rem 0 0; }
html .klasse .kl-gruppe > h2 { font-size:.85rem; margin:0 0 .25rem; color:var(--muted); }
html .klasse .kl-gruppe > .raster { margin-top:0; gap:.35rem; }
html .klasse details.kachel.einklapp > summary { min-height:2.2rem; }
html .klasse details.kachel.einklapp > summary h2 { font-size:.95rem; }
html .klasse details.kachel.einklapp { padding-top:.2rem; padding-bottom:.2rem; }
html .klasse { padding-bottom:4.5rem; }
@media (pointer: coarse) { html .klasse details.kachel.einklapp > summary { min-height:2.75rem; } }

/* Supplierplan Mo–Fr: jeder Tag bleibt in der Seite und wird einzeln gewischt (Wunsch von Daniel, 13.11.) */
html main:not(:has(.plangross-seite)) .grosstag { width:auto; min-width:0; max-width:100%; }
html main:not(:has(.plangross-seite)) .grosstag h2.plantag { position:static; width:auto; max-width:100%; }
html main:not(:has(.plangross-seite)) .grosstag .scroll { overflow-x:auto; max-width:100%; }

/* Startseite kompakt (Wunsch von Daniel, 13.11.): schmale Kachelköpfe, kleine Begrüßung, Platz für das "?" */
html .start { padding-bottom:4.5rem; }
html .start .begruessung { margin-bottom:.35rem; }
html .start .begruessung h1 { font-size:1.2rem; }
html .start .begruessung .eyebrow { font-size:.8rem; }
html .start .raster { gap:.45rem; margin-top:.45rem; }
html .start .raster > details.kachel.einklapp, html .start .raster > details.kachel.einklapp + details.kachel.einklapp { margin-top:0; margin-bottom:0; padding:.15rem .7rem; }
html .start details.kachel.einklapp > summary { min-height:2.2rem; }
html .start details.kachel.einklapp > summary h2 { font-size:.95rem; }
html .start details.kachel.einklapp > summary .minus { width:1.6rem; height:1.6rem; font-size:1.1rem; border-radius:6px; }
html .start details.kachel.einklapp > summary .zusatz { font-size:.75rem; font-weight:400; color:var(--muted); }
html .start details.pinnwand-box > summary { min-height:2.2rem; }
html .start details.pinnwand-box > summary h2 { font-size:1rem; }
html .start details.pinnwand-box > summary .minus { width:1.6rem; height:1.6rem; font-size:1.1rem; border-radius:6px; }
html .start details.pinnwand-box > .aktionen { margin:.2rem 0; }
html .start details.pinnwand-box > .aktionen .knopf { min-height:2rem; padding:.2rem .7rem; font-size:.9rem; margin:0; }
html .start .pinnwand { margin-top:.4rem; }
html .start p.klein { margin:.4rem 0 0; }
@media (pointer: coarse) {
  html .start details.kachel.einklapp > summary, html .start details.pinnwand-box > summary { min-height:2.75rem; }
  html .start details.pinnwand-box > .aktionen .knopf { min-height:2.5rem; }
}

/* Kinder-Seite kompakt (Wunsch von Daniel, 14.11.) */
html table.kindertabelle { font-size: .78rem; }
html table.kindertabelle th, html table.kindertabelle td { padding: .2rem .35rem; vertical-align: top; line-height: 1.25; }
html table.kindertabelle td { white-space: normal; }
html table.kindertabelle .kchip { font-size: .7rem; padding: .05rem .35rem; margin: 0 .15rem .15rem 0; display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
html table.kindertabelle td.geburt { white-space: nowrap; }
html .kinder-unten { margin: 1rem 0 4rem; gap: .4rem; }
html .kinder-unten .knopf { font-size: .78rem; padding: .3rem .6rem; margin: 0; }
@media (pointer: coarse) { html .kinder-unten .knopf { min-height: 2.5rem; } }
/* Kopfzeile in einer Zeile (Wunsch von Daniel, 14.11.): ab 64 rem stehen Logo, Reiter und Werkzeuge nebeneinander */
@media (min-width: 64rem) {
  html header.top .innen { max-width:96rem; flex-wrap:nowrap; padding-top:.2rem; gap:0 .5rem; }
  html header.top .brand { order:1; flex:none; gap:.4rem; }
  html header.top .brand b { font-size:1rem; white-space:nowrap; }
  html header.top .logo { width:32px; height:32px; }
  html header.top nav.tabs { order:2; flex:1 1 auto; min-width:0; border-top:0; padding-top:0; flex-wrap:nowrap; }
  html header.top nav.tabs a, html header.top nav.tabs summary { padding:.3rem .5rem .2rem; font-size:.88rem; }
  html header.top .who { order:3; margin-left:0; flex:none; gap:.3rem; font-size:.82rem; }
  html header.top .who button { min-height:1.7rem; font-size:.82rem; padding:.05rem .5rem; }
  html header.top .schrift button { min-width:1.8rem; padding:.05rem .3rem; }
  html .kopfsuche input { width:6.5rem; min-height:1.7rem; font-size:.82rem; }
  html header.top .bar { padding-bottom:0; }
  html header.top .rolle { font-size:.7rem; }
}
/* Name und Rolle erst auf sehr breiten Bildschirmen, damit alles in eine Zeile passt */
@media (min-width: 64rem) and (max-width: 89.99rem) {
  html header.top .rolle, html header.top .who > span:not(.schrift):not(.rolle) { display:none; }
}

/* Wunsch von Daniel, 14.11.: geöffnete Pinnwand und Kommentarseite kompakter */
html .beitrag { padding:.3rem .65rem; margin-top:.35rem; }
html .beitrag h3 { font-size:.92rem; }
html .beitrag > details > summary.beitragskopf { min-height:2.2rem; gap:.1rem .5rem; }
html .beitrag .klein, html .beitragskopf .marke { font-size:.78rem; }
html .beitragstext { font-size:.9rem; line-height:1.4; margin:.1rem 0 .35rem; }
html .beitragsleiste { gap:.25rem .35rem; padding-top:.35rem; margin-bottom:.1rem; flex-wrap:wrap; }
html .beitragsleiste .knopf, html .beitragsleiste button, html .beitragsleiste details.werkzeugmenue > summary { min-height:2rem; padding:.1rem .55rem; font-size:.8rem; }
html .beitragsleiste button.reaktion { padding:.1rem .45rem; }
@media (pointer: coarse) {
  html .beitragsleiste .knopf, html .beitragsleiste button, html .beitragsleiste details.werkzeugmenue > summary { min-height:2.5rem; }
}
.kommentarseite { padding-bottom:4.5rem; } /* Platz, damit das runde "?" nichts verdeckt */
.kommentarseite h1 { font-size:1.15rem; margin:.2rem 0 .1rem; }
.kommentarseite > p.klein { margin:0 0 .3rem; font-size:.78rem; }
.kommentarseite ul.kommentare { margin:0 0 .5rem; }
.kommentarseite ul.kommentare li { padding:.35rem 0; }
.kommentarseite .beitragstext { font-size:.88rem; margin:.05rem 0 0; max-height:none; }
.kommentarseite .kkopf { font-size:.82rem; }
.kommentarseite form.formular { margin:.3rem 0; }
.kommentarseite label { font-size:.82rem; margin-bottom:.15rem; }
.kommentarseite textarea { min-height:3.2rem; font-size:.9rem; padding:.35rem .55rem; }
.kommentarseite form.formular > .klein { display:block; font-size:.72rem; margin:.15rem 0; }
.kommentarseite .aktionen { display:flex; flex-wrap:nowrap; align-items:center; gap:.6rem; margin:.3rem 0 0; }
.kommentarseite .aktionen button { min-height:2.2rem; padding:.1rem .8rem; font-size:.85rem; margin:0; }
.kommentarseite .aktionen a { font-size:.85rem; white-space:nowrap; }
/* Wunsch von Daniel, 14.11. (ersetzt die einzeilige Kopfzeile am Handy): Reiter wie vorher in eigenen Zeilen darunter; oben kleineres Logo und Name, Suche und Abmelden nur als Symbol */
.abm-symbol { display:none; }
@media (max-width: 63.99rem) {
  html header.top .innen { flex-wrap:wrap; padding:.2rem .6rem 0; gap:0 .4rem; align-items:center; }
  html header.top .brand { order:1; flex:none; gap:.4rem; }
  html header.top .logo { width:30px; height:30px; }
  html header.top .brand b { font-size:.95rem; white-space:nowrap; }
  html header.top .who { order:2; margin-left:auto; flex:none; gap:.25rem; }
  html header.top .who button { min-height:2.4rem; min-width:2.4rem; font-size:.85rem; padding:.05rem .4rem; }
  html header.top .schrift button { min-width:2.4rem; padding:.05rem .25rem; }
  html .kopfsuche input { display:none; }
  html .kopfsuche button { min-width:2.4rem; }
  html .abm-text { display:none; }
  html .abm-symbol { display:inline; }
  html header.top .bar { padding-bottom:0; }
  html header.top nav.tabs { order:4; flex:1 1 100%; border-top:1px solid var(--line); padding-top:.1rem; }
}

/* Wunsch von Daniel, 14.11.: Kinder-Tabelle: eine Zeile je Kind, seitlich wischen, der Name bleibt stehen */
html table.kindertabelle { width:max-content; min-width:100%; }
html table.kindertabelle td, html table.kindertabelle th { white-space:nowrap; vertical-align:middle; }
html table.kindertabelle .kchip { white-space:nowrap; max-width:none; overflow-wrap:normal; word-break:normal; }
html table.kindertabelle th[scope="row"], html table.kindertabelle thead th:first-child { position:sticky; left:0; z-index:2; background:var(--surface); box-shadow:1px 0 0 var(--line); }
html table.kindertabelle tr.mit-bes th[scope="row"] { box-shadow:inset 5px 0 0 var(--mark), 1px 0 0 var(--line); }

/* Mail: Ordner in einer Auswahl statt langer Reiterleiste (Wunsch von Daniel, 14.11.) */
details.ordnerwahl { margin:.3rem 0 .6rem; }
details.ordnerwahl > summary { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; list-style:none; padding:.35rem .8rem; border:2px solid var(--akzent); border-radius:999px; font-weight:600; min-height:2.4rem; }
details.ordnerwahl > summary::-webkit-details-marker { display:none; }
details.ordnerwahl > summary::after { content:"▾"; }
details.ordnerwahl[open] > summary::after { content:"▴"; }
details.ordnerwahl > nav { margin-top:.4rem; padding:.4rem; border:1px solid var(--rand); border-radius:12px; background:var(--surface); max-width:24rem; }
ul.ordnerliste { list-style:none; margin:0; padding:0; }
ul.ordnerliste a { display:flex; align-items:center; gap:.5rem; padding:.5rem .6rem; border-radius:8px; text-decoration:none; min-height:2.4rem; }
ul.ordnerliste a[aria-current="page"] { background:var(--akzent); color:var(--knopftext); font-weight:700; }
.ordnerkopf { margin:.5rem .6rem .2rem; font-size:.8rem; opacity:.85; }

/* Mail: Kopfzeile mit Ordnername, Aktualisieren und „Neue Mail“ in einer Zeile (Wunsch von Daniel, 14.11.) */
.pf-kopf { position:relative; display:flex; align-items:center; gap:.4rem; margin:.2rem 0 .4rem; }
.pf-kopf > details.ordnerwahl { flex:1 1 auto; min-width:0; margin:0; position:static; }
.pf-kopf > details.ordnerwahl > summary { max-width:100%; }
.pf-kopf .ow-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-kopf > details.ordnerwahl > nav { position:absolute; left:0; right:0; top:100%; z-index:20; max-width:none; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.pf-neu { flex:none; display:inline-flex; align-items:center; gap:.3rem; margin:0; padding:.4rem .9rem; border-radius:999px; font-weight:700; min-height:2.4rem; text-decoration:none; }
.pf-kopf .pf-rund { margin:0; }

/* Mail: Kopfzeile schmal, nichts bricht um oder ragt hinaus (Wunsch von Daniel, 15.11.) */
html .pf-kopf { flex-wrap:nowrap; gap:.3rem; min-width:0; }
html .pf-kopf > details.ordnerwahl > summary { display:flex; flex-wrap:nowrap; white-space:nowrap; min-width:0; padding:.2rem .65rem; min-height:2.4rem; font-size:.95rem; gap:.3rem; box-sizing:border-box; }
html .pf-kopf .ow-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html .pf-kopf > details.ordnerwahl > summary::after { flex:none; font-size:.8rem; }
html .pf-kopf .pf-rund { width:2.4rem; min-width:2.4rem; height:2.4rem; padding:0; flex:none; }
html .pf-kopf .pf-neu { padding:.2rem .7rem; font-size:.95rem; white-space:nowrap; flex:none; min-height:2.4rem; box-sizing:border-box; }

/* Mail-Liste: Betreff klar erkennbar, Vorschau klein und kurz (Wunsch von Daniel, 15.11.) */
html .pf-eintrag .pf-von { font-size:.82rem; font-weight:500; color:var(--muted); }
html .pf-eintrag.ungelesen .pf-von { font-weight:700; color:var(--ink); }
html .pf-eintrag .pf-betreff { font-size:1rem; font-weight:700; color:var(--ink); line-height:1.3; margin:.1rem 0 .15rem; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html .pf-eintrag .pf-vorschau { font-size:.76rem; font-weight:400; line-height:1.3; color:var(--muted); -webkit-line-clamp:2; line-clamp:2; }

/* Pinnwand: Kopf in einer Zeile mit Minus, ohne „Angeheftet“; Verwalten als ⋮ neben Kommentare (Wunsch von Daniel, 15.11.) */
@media (max-width: 40rem) {
  html .beitrag > details > summary.beitragskopf { flex-wrap:nowrap; }
  html .beitrag .beitragskopf h3 { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:none; }
  html .beitrag .beitragskopf .minus { flex:none; margin-left:0; }
}
html .beitragsleiste details.beitragsmenue { margin-left:0; }
html .beitragsleiste details.beitragsmenue > summary { min-width:2.25rem; padding-left:.6rem; padding-right:.6rem; font-size:1.1rem; line-height:1; }
html .beitragsleiste > .klein { flex-basis:100%; margin:.1rem 0 0; }