/* Schulseite V3 (Epic 17). Palette „Dunst“, von Moritz am 02.10. freigegeben.
 * Verbindlich: docs/v3/DESIGN.md (Aussehen) und docs/v3/EXPERIENCE.md (Verhalten).
 * Kontraste sind nachgerechnet (docs/v3/.memlog.md) — wer eine Farbe ändert,
 * rechnet gegen den oberen UND den unteren Grund neu. */
:root {
  --grund: linear-gradient(#5d82a6, #3d5d7e 52%, #2e4c69);
  --kachel: rgba(10, 20, 31, .84);
  --erhoeht: rgba(44, 71, 99, .94);
  --rand: rgba(143, 208, 245, .30);
  --linie: rgba(143, 208, 245, .16);
  --text: #f4f9fd;
  --dim: #b4c9db;
  --akzent: #8fd0f5;
  --auf-akzent: #04121a;
  --warn: #f0b566;
  --fehler: #f2818f;
  --ok: #7ee2a0;
  --schleier: rgba(6, 14, 24, .62);
  --r: 18px; --r-klein: 12px;
  --text-font: "DM Sans", system-ui, sans-serif;
  --zahl-font: "Orbitron", "DM Sans", sans-serif;
}
* { box-sizing: border-box; margin: 0 }
/* Safari färbt Leiste und Überscroll-Fläche nach background-color von html — ein Verlauf
 * allein zählt nicht, dann ist es dort weiß (Moritz, 02.10.). Daher Grundfarbe = oberer Ton. */
html { background-color: #5d82a6; background-image: var(--grund); background-attachment: fixed; color: var(--text); font: 15px/1.45 var(--text-font); min-height: 100% }
body { padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 28px max(22px, env(safe-area-inset-left)) }
button { font: inherit; color: inherit }

/* Kopf */
.kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 18px }
.logo { width: 40px; height: 40px; border-radius: 12px; background: var(--akzent); color: var(--auf-akzent); display: grid; place-items: center; font: 800 18px var(--zahl-font) }
.phase { display: flex; align-items: center; gap: 10px; background: var(--kachel); border: 1px solid var(--rand); border-radius: 12px; padding: 5px 12px; min-height: 44px }
.phase b { font: 800 24px var(--zahl-font) } .phase small { display: block; color: var(--dim); font-size: 12px; line-height: 1.1 } .phase span { font-weight: 700 }
.nav { margin: 0 auto; display: flex; gap: 4px; background: var(--kachel); border: 1px solid var(--rand); border-radius: 999px; padding: 4px }
.nav a { padding: 9px 18px; border-radius: 999px; font-weight: 600; min-height: 40px }
.nav a.an { background: var(--erhoeht); color: var(--akzent); box-shadow: inset 0 0 0 1px var(--rand) }
.rund { width: 44px; height: 44px; border-radius: 50%; background: var(--kachel); border: 1px solid var(--rand); color: var(--akzent); display: grid; place-items: center; font-weight: 800 }

/* Kacheln */
.raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px }
.k { min-width: 0; background: var(--kachel); border: 1px solid var(--rand); border-radius: var(--r); padding: 14px 16px; min-height: 150px }
.k h2 { flex-wrap: wrap; display: flex; align-items: center; gap: 8px; font: 700 16px var(--text-font); margin-bottom: 10px }
.plus { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--erhoeht); color: var(--akzent); display: grid; place-items: center; font-size: 18px; border: 1px solid var(--rand) }
.s2 { grid-column: span 2 } .s3 { grid-column: span 3 } .s4 { grid-column: span 4 } .s6 { grid-column: span 6 } .s12 { grid-column: span 12 }
.dim { color: var(--dim) } .gross { font: 800 54px/1 var(--zahl-font) }
.zahl { font-family: var(--zahl-font); font-weight: 800 }
ul { list-style: none; padding: 0 } li { padding: 7px 0; border-top: 1px solid var(--linie); font-size: 13.5px } li:first-child { border-top: 0 }
.leer { color: var(--dim); text-align: center; padding: 24px 0; font-size: 14px }
.zs { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin-top: 4px }

/* Fach: Fläche 20 %, Kürzel 40 % aufgehellt (Kontrast ≥ 6,25 : 1) */
.fach { --hell: color-mix(in srgb, var(--f) 60%, #fff); background: color-mix(in srgb, var(--f) 20%, var(--kachel)); border: 1px solid color-mix(in srgb, var(--f) 75%, transparent); border-radius: var(--r-klein) }
.fach.flagge { border-left: 5px solid var(--f) } /* nur Fachkarten (wie die App) */
.fach b { color: var(--hell) }
.marke { display: inline-block; font: 800 12px var(--text-font); padding: 2px 7px; border-radius: 6px; background: var(--f); color: #0b1520 }

/* Stundenkarten */
.reihe { display: flex; gap: 8px }
.std { flex: 1; min-width: 0; padding: 8px 10px }
.std b { display: block; font: 800 17px var(--text-font) } .std span { display: block; font-size: 13px } .std i { font-style: normal; font-size: 12px; color: var(--dim) }
.std.jetzt { outline: 2px solid var(--akzent); outline-offset: 2px } .std em { display: block; font-style: normal; font-size: 12px; color: var(--akzent); font-weight: 700 }
.std.vertretung { border-color: var(--warn) } .std .hinweis { color: var(--warn); font-weight: 700; font-size: 12px }
.pause { flex: 0 0 72px; border-radius: var(--r-klein); background: var(--erhoeht); display: grid; place-items: center; text-align: center; font-size: 12px; color: var(--dim) }

/* Chips und Umschalter */
.chips { display: flex; gap: 8px; overflow: hidden }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid; white-space: nowrap }
.chip.ok { color: var(--ok) } .chip.warn { color: var(--warn) } .chip.fehler { color: var(--fehler) }
.seg { display: inline-flex; gap: 4px; background: var(--erhoeht); border-radius: 999px; padding: 3px }
.seg span { padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 13px } .seg .an { background: var(--akzent); color: var(--auf-akzent) }

/* Abhaken */
.ha { display: flex; align-items: center; gap: 10px; min-height: 40px }
.kreis { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--akzent); flex: none }

/* Sheet (iPad: mittig, Telefon: von unten) */
.schleier { position: fixed; inset: 0; background: var(--schleier); backdrop-filter: blur(3px); display: grid; place-items: center }
.sheet { width: min(640px, 92vw); max-height: 90vh; overflow: auto; background: #0e1b2a; border: 1px solid var(--rand); border-radius: 22px; padding: 18px 22px 22px; box-shadow: none }
.sheet header { display: flex; align-items: center; margin-bottom: 14px }
.sheet header small { display: block; color: var(--dim); font-size: 12px } .sheet h1 { font: 800 24px var(--text-font) }
.sheet h1::after { content: "."; color: var(--akzent) }
.gruppe { background: var(--erhoeht); border: 1px solid var(--rand); border-radius: 14px; margin-bottom: 12px }
.zeile { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 48px; border-top: 1px solid var(--linie) }
.zeile:first-child { border-top: 0 } .zeile .wert { margin-left: auto; color: var(--akzent); font-weight: 700 }
.feld { background: var(--erhoeht); border: 1px solid var(--rand); border-radius: 14px; padding: 12px 14px; min-height: 48px; margin-bottom: 12px }
.feld small { display: block; color: var(--dim); font-size: 12px }
.datum { flex: none; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--rand); background: var(--kachel); font-size: 13px; min-width: 96px }
.datum small { display: block; color: var(--dim); font-size: 12px } .datum.an { border: 2px solid var(--akzent); background: color-mix(in srgb, var(--akzent) 18%, var(--kachel)) }
.schalter { margin-left: auto; width: 50px; height: 30px; border-radius: 999px; background: var(--akzent); position: relative } .schalter::after { content: ""; position: absolute; right: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff }
.knopf { display: block; width: 100%; text-align: center; padding: 14px; border-radius: 999px; background: var(--akzent); color: var(--auf-akzent); font-weight: 800; font-size: 16px; border: 0; min-height: 48px }
.punkte { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; padding: 10px 14px 14px }
.punkte span { display: grid; place-items: center; min-height: 40px; border-radius: 10px; background: var(--kachel); font: 700 15px var(--zahl-font); color: var(--akzent) }
.punkte .an { background: var(--akzent); color: var(--auf-akzent) }

/* Telefon */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; background: rgba(8, 17, 27, .92); border-top: 1px solid var(--rand); padding: 6px 0 max(14px, env(safe-area-inset-bottom)) }
.tabbar a { display: grid; justify-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--dim); min-width: 64px; min-height: 44px }
.tabbar a i { font-style: normal; font-size: 20px; line-height: 1 } .tabbar a.an { color: var(--akzent) }

/* --- Hülle (17.1) ------------------------------------------------------ */
.kopf a, .tabbar a { text-decoration: none } .kopf .phase, .nav a { color: var(--text) } .tabbar a { color: var(--dim) } .nav a.an, .tabbar a.an { color: var(--akzent) }
.nav a { cursor: pointer }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px }
[hidden] { display: none !important }
.flaeche > h1 { font: 800 24px var(--text-font); margin: 4px 0 14px }
.flaeche > h1::after { content: "."; color: var(--akzent) }
.leer-gross { color: var(--dim); text-align: center; padding: 64px 16px; font-size: 15px }
#verbindung { position: fixed; top: 0; left: 0; right: 0; z-index: 5; padding: 8px 16px; text-align: center; font-weight: 700; color: var(--fehler); background: #0e1b2a; border-bottom: 1px solid var(--fehler) }

/* Token-Abfrage (gleiches Token wie v2, api.js) */
#token-gate { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: var(--schleier); padding: 16px }
.gate-box { width: min(420px, 100%); background: #0e1b2a; border: 1px solid var(--rand); border-radius: 22px; padding: 22px }
.gate-box h2 { font: 800 22px var(--text-font); margin-bottom: 8px }
.gate-box p { color: var(--dim); font-size: 14px; margin-bottom: 14px }
.gate-box input { width: 100%; min-height: 48px; border-radius: 14px; border: 1px solid var(--rand); background: var(--erhoeht); color: var(--text); padding: 0 14px; font: inherit; margin-bottom: 12px }
.gate-error { color: var(--fehler); font-size: 13px; min-height: 1.3em; margin-top: 8px }

/* Sheet als <dialog> */
dialog.sheet { margin: auto; color: var(--text); padding: 18px 22px 22px }
dialog.sheet::backdrop { background: var(--schleier); backdrop-filter: blur(3px) }
.sheet .knopf-reihe { display: flex; gap: 10px; margin-top: 12px }
.sheet .knopf-reihe .knopf { flex: 1 }
.knopf.zweit { background: var(--erhoeht); color: var(--text); border: 1px solid var(--rand) }
.knopf.gefahr { background: transparent; color: var(--fehler); border: 1px solid var(--fehler) }
.rund { cursor: pointer }
.sheet.frage { width: min(420px, 92vw) }

/* Telefon: eine Spalte, Tab-Leiste unten, Sheet von unten */
.tabbar { display: none }
@media (max-width: 599px) {
  body { padding: max(14px, env(safe-area-inset-top)) 14px calc(96px + env(safe-area-inset-bottom)) }
  .kopf { gap: 10px } .kopf .nav { display: none } .kopf .rund { margin-left: auto }
  .tabbar { display: flex; z-index: 4 }
  .raster { grid-template-columns: 1fr; gap: 12px }
  .raster > .k { grid-column: 1 / -1 }
  dialog.sheet, .sheet.frage { margin: auto 0 0; width: 100%; max-width: none; border-radius: 22px 22px 0 0; max-height: 92vh }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .raster { grid-template-columns: repeat(6, 1fr) }
  .raster > .s2, .raster > .s3 { grid-column: span 3 } .raster > .s4, .raster > .s6, .raster > .s12 { grid-column: span 6 }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }

/* --- Cockpit-Kacheln (17.2) --------------------------------------------- */
.rechts { margin-left: auto } .klein { font-size: 12px } .block { display: block } .fett { font-weight: 700 }
.warn-text { color: var(--warn) } .fehler-text { color: var(--fehler) }
.hinweis { border: 1px solid; border-radius: var(--r-klein); padding: 6px 10px; margin: 0 0 8px; font-size: 13px; font-weight: 600 }
.hinweis.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--kachel)) }
.hinweis.pruefung { color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, var(--kachel)) }
.k h2.unter { margin-top: 14px }
.leer { color: var(--dim); text-align: center; padding: 18px 0; font-size: 14px }
button.link { background: none; border: 0; color: var(--akzent); font-weight: 700; cursor: pointer; padding: 8px 0; min-height: 36px }
.knopf-klein { background: var(--akzent); color: var(--auf-akzent); border: 0; border-radius: 999px; padding: 6px 14px; font-weight: 800; min-height: 32px; cursor: pointer }
.fuss { display: flex; align-items: center; gap: 10px; margin-top: 6px } .fuss button { margin-left: auto }

.ring-kachel { display: grid; place-items: center; text-align: center; position: relative }
.ring-kachel svg { grid-area: 1 / 1 }
.ring-mitte { grid-area: 1 / 1; display: grid; justify-items: center } .ring-mitte b { font-size: 30px } .ring-mitte small { color: var(--dim); font-size: 12px; font-weight: 600 }

.jetzt-kachel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; align-content: start }
.jd { background: var(--erhoeht); border-radius: var(--r-klein); padding: 8px 10px; min-width: 0 } .jd.breit { grid-column: span 2 }
.jd b { display: block; font-size: 17px; font-weight: 800 } .jd small { display: block; font-size: 12px } .jd.breit small, .jd.breit b { display: inline }
.jd.fach b { color: var(--hell) }
.marke.hell { --f: #f4f9fd; margin-bottom: 4px }

.vz { display: flex; align-items: center; gap: 10px } .vz .zeit { flex: 0 0 52px; font-size: 12px } .vz > div { min-width: 0 }
.chip.dim { color: var(--dim) }
.tagkopf { font-weight: 700; color: var(--akzent); border-top: 0 !important; padding-top: 10px }
.k ul + .fuss { border-top: 1px solid var(--linie); padding-top: 6px }

.seg button { background: none; border: 0; color: var(--text); padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; min-height: 32px }
.seg button.an { background: var(--akzent); color: var(--auf-akzent) }
.std.entfall b { text-decoration: line-through } .std.entfall { border-color: var(--fehler) }
.std.vertretung { border-color: var(--warn); border-width: 2px }
.std .hinweis-zeile { display: block; font-size: 12px; font-weight: 700 }
.std.abgeblendet { opacity: .45 }
.pause { gap: 2px }

button.kreis { background: none; padding: 0; cursor: pointer; position: relative }
button.kreis::after { content: ""; position: absolute; inset: -9px } /* Trefferfläche 44 px */
.erledigt { opacity: .45 } .erledigt > span:nth-child(2) { text-decoration: line-through }
.kursplan .links { display: flex; gap: 12px; align-items: center; margin-top: 4px } .kursplan .links a { color: var(--akzent); font-weight: 700 }
.kursplan.neu > span:first-child { color: var(--warn); font-weight: 700 }
.ganzer-plan .zeile-liste { padding: 0 14px 8px } .ganzer-plan .zeile .chip { margin-left: auto }

#leiste { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 6; display: flex; gap: 14px; align-items: center; background: #0e1b2a; border: 1px solid var(--rand); border-radius: 999px; padding: 6px 18px; font-weight: 600 }

@media (max-width: 599px) {
  .reihe { flex-direction: column } .std { flex: auto } .pause { flex: auto; min-height: 32px; display: flex; padding: 6px 10px }
  #leiste { bottom: calc(86px + env(safe-area-inset-bottom)) }
  [data-kachel="jetzt"] { order: 1 } [data-kachel="plan"] { order: 2 } [data-kachel="vertretung"] { order: 3 }
  [data-kachel="ha"] { order: 4 } [data-kachel="pruef"] { order: 5 } [data-kachel="ring"] { order: 6 }
  [data-kachel="frei"] { order: 7 } [data-kachel="noten"] { order: 8 }
}
.ha button.kreis { margin-left: 0 } .ha > span:nth-child(2) { min-width: 0 }
.vz .chip { margin-left: auto; flex: none }

/* --- Eingabe-Sheets (17.4) ------------------------------------------------ */
.k h2 button.plus { cursor: pointer; padding: 0 }
.k h2 button.plus::after { content: ""; position: absolute; inset: -6px } .k h2 button.plus { position: relative }
.oeffnet { cursor: pointer } .oeffnet:hover { color: var(--akzent) }
.sheet .feld { display: block } .sheet .feld input, .sheet .feld textarea { display: block; width: 100%; margin-top: 4px; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 16px; resize: vertical }
.sheet label.zeile { cursor: pointer }
.sheet .wert-eingabe { margin-left: auto; max-width: 62%; background: var(--kachel); color: var(--akzent); border: 1px solid var(--rand); border-radius: 10px; padding: 6px 10px; font: 700 16px var(--text-font); min-height: 40px }
.sheet input[type="date"].wert-eingabe, .sheet input[type="time"].wert-eingabe, .sheet input[type="datetime-local"].wert-eingabe { color-scheme: dark }
.datums-chips { overflow-x: auto; flex-wrap: nowrap; padding-top: 0 }
button.datum { color: var(--text); font: inherit; cursor: pointer; text-align: left; min-height: 48px }
.schalter-eingabe { appearance: none; -webkit-appearance: none; margin-left: auto; width: 50px; height: 30px; border-radius: 999px; background: var(--kachel); border: 1px solid var(--rand); position: relative; cursor: pointer; flex: none }
.schalter-eingabe::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--dim); transition: left .15s }
.schalter-eingabe:checked { background: var(--akzent) } .schalter-eingabe:checked::after { left: 23px; background: #fff }
.punkte-gruppe .zeile:first-child { font-weight: 700 }
.punkte button { border: 0; cursor: pointer; display: grid; place-items: center; min-height: 44px; border-radius: 10px; background: var(--kachel); font: 700 15px var(--zahl-font); color: var(--akzent) }
.punkte button.an { background: var(--akzent); color: var(--auf-akzent) }
.punkte-keine { display: block; width: calc(100% - 28px); margin: 0 14px; min-height: 40px; border-radius: 10px; border: 1px solid var(--rand); background: var(--kachel); color: var(--text); font-weight: 700; cursor: pointer }
.punkte-keine.an { background: color-mix(in srgb, var(--akzent) 22%, var(--kachel)); border-color: var(--akzent) }
.neue-art { gap: 8px } .neue-art input { flex: 1; min-width: 0; min-height: 40px; border-radius: 10px; border: 1px solid var(--rand); background: var(--kachel); color: var(--text); padding: 0 10px; font: inherit }
.neue-art select { min-height: 40px; border-radius: 10px; background: var(--kachel); color: var(--text); border: 1px solid var(--rand) }
.knopf.loeschen { margin: 4px 0 12px }
@media (max-width: 599px) { .punkte { grid-template-columns: repeat(4, 1fr) } }
/* WebKit zeichnet <select> sonst hell mit nativem Pfeil — eigener dunkler Stil. */
.sheet select { -webkit-appearance: none; appearance: none; background-color: var(--kachel); color: var(--akzent);
  background-image: linear-gradient(45deg, transparent 50%, var(--akzent) 50%), linear-gradient(135deg, var(--akzent) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px }
.neue-art select { color: var(--text) }
.datums-chips:empty { display: none }

/* --- Kalender (17.5) ---------------------------------------------------- */
.kal-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px }
.kal-leiste h1 { font: 800 22px var(--text-font); margin-right: auto }
.kal-leiste .seg { margin-left: 4px }
.kal-rahmen { padding: 12px }
.kal { display: grid; grid-template-columns: 48px repeat(var(--spalten), minmax(0, 1fr)); gap: 0 8px }
.kal-tag { text-align: center; padding: 4px 0 10px; min-width: 0 } .kal-tag b { display: block; font-size: 13px; color: var(--dim) }
.kal-tag .zahl { font-size: 19px } .kal-tag.heute .zahl { color: var(--akzent) }
.kal-tag .sonder { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, var(--kachel)); border: 1px solid var(--warn); border-radius: 8px; padding: 3px 6px; text-align: left }
.kal-achse { position: relative } .kal-achse span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 12px; color: var(--dim) }
.kal-spalte { position: relative; min-width: 0; background-image: linear-gradient(var(--linie) 1px, transparent 1px) }
.kal-spalte.frei { background-color: color-mix(in srgb, var(--erhoeht) 45%, transparent); border-radius: var(--r-klein) }
.frei-text { position: absolute; top: 40%; left: 0; right: 0; text-align: center; color: var(--dim); font-weight: 700 }
.kal-block { position: absolute; left: 0; right: 0; padding: 5px 8px; text-align: left; color: var(--text); font: inherit; cursor: pointer; overflow: hidden; display: block }
.kal-block b { display: block; font-weight: 800 } .kal-block small { display: block; font-size: 12px }
.kal-block.entfall b { text-decoration: line-through } .kal-block.entfall { border-color: var(--fehler) }
.kal-block.vertretung { border: 2px solid var(--warn) } .kal-block.abgeblendet { opacity: .45 }
.pin { position: absolute; right: 6px; bottom: 6px; font-size: 12px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: var(--text); color: #0b1520 }
.pin.pruef-pin { bottom: auto; top: 6px; background: var(--akzent) }
.ha-ohne { position: absolute; top: 2px; left: 0; right: 0; font-size: 12px; font-weight: 700; color: var(--akzent) }
.jetzt-linie { position: absolute; left: -4px; right: 0; height: 2px; background: var(--akzent); z-index: 2 }
.jetzt-linie::before { content: ""; position: absolute; left: -3px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--akzent) }
.monat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px }
.monat-kopf { text-align: center; color: var(--dim); font-weight: 700; font-size: 13px }
.monat-tag { min-height: 84px; background: var(--erhoeht); border: 1px solid var(--rand); border-radius: 10px; color: var(--text); font: inherit; text-align: left; padding: 6px; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; cursor: pointer; min-width: 0 }
.monat-tag.frei { background: color-mix(in srgb, var(--erhoeht) 45%, var(--kachel)) } .monat-tag.fremd { opacity: .45 }
.monat-tag.heute { border: 2px solid var(--akzent) } .monat-tag .zahl { font-size: 15px }
.monat-tag small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100% }
.ha-zahl { color: var(--akzent); font-weight: 700 }
.tage-seg { margin-bottom: 12px } .stunde-zeile { width: 100%; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer }
.knopf.zweit { margin-bottom: 8px }
@media (max-width: 599px) {
  .kal-leiste h1 { font-size: 18px; width: 100% }
  .kal { gap: 0 4px; grid-template-columns: 38px repeat(var(--spalten), minmax(0, 1fr)) }
  .monat-tag { min-height: 58px; padding: 4px } .monat-tag small.dim { display: none } .monat-tag .marke { font-size: 12px; padding: 0 3px }
}

/* --- Fächer und Aufgaben (17.6) ------------------------------------------ */
.schnitt-chip { display: inline-flex; align-items: baseline; gap: 4px; background: var(--kachel); border: 1px solid var(--rand); border-radius: 12px; padding: 6px 12px }
.schnitt-chip b { font-size: 20px }
.faecher-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
button.fachkarte { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 64px; color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0 }
.fk-text { min-width: 0 } .fk-text b { display: block; color: var(--hell); font-size: 17px; font-weight: 800 } .fk-text small { color: var(--dim); font-size: 13px }
.fk-schnitt { margin-left: auto; font-size: 20px }
.filter-leiste { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px }
.zeitleiste { border-left: 3px solid var(--akzent); margin-left: 8px; padding-left: 16px }
.zl-tag { position: relative; font-weight: 800; margin: 14px 0 8px } .zl-tag::before { content: ""; position: absolute; left: -24px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--akzent) }
.zl-gruppe { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px }
.zl-karte { padding: 8px 12px } .zl-fach { color: var(--hell); font-weight: 700; font-size: 12px }
.zl-zeile { display: flex; align-items: center; gap: 10px; margin-top: 4px }
.zl-zeile .kreis { margin-left: 0 } .kreis.an { background: var(--akzent) }
button.zl-titel { background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; padding: 6px 0; min-height: 36px; flex: 1 }
.zl-karte.erledigt .zl-titel { text-decoration: line-through; color: var(--dim) }
.sheet .knopf-reihe .knopf { margin: 0 }
@media (max-width: 1023px) { .faecher-raster { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 599px) { .faecher-raster { grid-template-columns: 1fr } .zl-gruppe { grid-template-columns: 1fr } }

/* --- Schullaufbahn (17.7) ------------------------------------------------- */
.abitur { border: 2px solid var(--warn); padding: 14px 16px; min-height: auto; margin-bottom: 18px }
.abi-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px } .abi-kopf b { font-size: 18px }
.abi-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie) }
.abi-zeile.aktiv .stufe-box { background: var(--text); color: #0b1520 }
.stufe-box { flex: none; width: 44px; height: 44px; border-radius: 10px; border: 2px dashed var(--rand); display: grid; place-items: center; font-size: 18px }
.abi-mitte { flex: 1; min-width: 0 } .abi-mitte .chip { margin-left: 6px }
.abi-zeile .schnitt-chip { margin-left: auto }
.abi-zeile button.plus { margin-left: auto; position: relative }
.zwischen { font: 700 16px var(--text-font); margin: 0 0 10px }
.jahre-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
button.jahr-karte { color: var(--text); font: inherit; text-align: left; cursor: pointer; min-height: auto }
.jahr-oben { display: flex; align-items: center; gap: 10px; margin-bottom: 8px }
.verhaeltnis { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700 }
.verhaeltnis input { width: 64px; min-height: 40px; border-radius: 10px; border: 1px solid var(--rand); background: var(--kachel); color: var(--akzent); font: 700 16px var(--text-font); text-align: center }
.bewertung details { display: block } .bewertung summary { cursor: pointer; color: var(--akzent); font-weight: 700 } .bewertung details p { margin-top: 8px; color: var(--dim) }
@media (max-width: 1023px) { .jahre-raster { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 599px) { .jahre-raster { grid-template-columns: 1fr } }
.sheet input[type="number"].wert-eingabe { width: 120px }
.jahre-raster .leer { grid-column: 1 / -1; text-align: left }
.menue .stunde-zeile { min-height: 52px; font-weight: 600 }

/* --- Prüfungsdetail (17.11) ------------------------------------------------ */
.detail-kopf { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px }
.detail-titel { display: block; font-size: 20px; font-weight: 800 } .akzent-text { color: var(--akzent); font-weight: 700 }
.punkte-gross { margin-left: auto; min-width: 56px; text-align: center; font-size: 26px; background: var(--erhoeht); border: 1px solid var(--rand); border-radius: 12px; padding: 6px 10px }
.detail-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 } .angabe { padding: 10px 14px } .angabe small { display: block; font-size: 12px }
.knopf-reihe.drei .knopf { font-size: 14px; padding: 10px 6px }

/* --- Fachseite (17.9/17.10) ----------------------------------------------- */
.fach-leiste .lehrkraft { font-size: 13px } .fach-leiste .rechts { display: flex; gap: 8px }
.plus-gross { background: var(--akzent); color: var(--auf-akzent); font-size: 22px }
.fach-kopf { display: flex; align-items: center; gap: 14px; min-height: auto; margin-bottom: 14px; padding: 14px 18px }
.fach-kopf h1 { font: 800 26px var(--text-font); color: var(--hell); margin: 2px 0 }
.schnitt-gross { margin-left: auto; text-align: center; background: var(--text); color: #0b1520; border-radius: 14px; padding: 6px 14px }
.schnitt-gross b { display: block; font-size: 24px } .schnitt-gross small { font-size: 12px; font-weight: 700 }
.fach-reiter { margin-bottom: 14px; flex-wrap: wrap }
.abschnitt { margin: 6px 0 8px }
.pruef-zeile .punkte-klein { font-size: 20px }
.art-zeile { flex-wrap: wrap } .art-name { min-width: 130px; font-weight: 600 }
.noten-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; align-items: center }
button.noten-chip { display: grid; justify-items: center; min-width: 48px; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--rand); background: var(--kachel); color: var(--text); cursor: pointer }
.noten-chip b { font-size: 18px } .noten-chip small { font-size: 12px; color: var(--dim) }
.diagramm svg { display: block; padding: 0 14px 10px }
.balken { height: 12px; border-radius: 6px; background: var(--akzent); margin: 0 10px }
.berechnung .formel { font-family: var(--text-font); font-variant-numeric: tabular-nums }
.farb-wahl { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 14px 14px }
button.farbe { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; cursor: pointer }
button.farbe.an { border-color: var(--text); box-shadow: 0 0 0 2px var(--kachel) inset }

/* --- Abiturrechner (17.12) ------------------------------------------------- */
.abi-ueber { display: flex; align-items: center; gap: 18px; min-height: auto; margin-bottom: 16px }
.abi-bloecke { display: grid; gap: 10px } .abi-block small { display: block } .abi-block b { font-size: 18px }
.abi-schnitt { margin-left: auto; text-align: center; background: var(--text); color: #0b1520; border-radius: 16px; padding: 10px 22px }
.abi-schnitt b { display: block; font-size: 34px } .abi-schnitt small { font-size: 12px; font-weight: 700 }
.abi-karte { min-height: auto; margin-bottom: 16px; border: 2px solid color-mix(in srgb, var(--warn) 60%, transparent) }
.abi-kopf2 { display: flex; align-items: center; margin-bottom: 10px } .abi-kopf2 b { font-size: 18px }
.hjl-raster { display: grid; grid-template-columns: minmax(150px, 2fr) repeat(4, minmax(44px, 1fr)) 56px; gap: 6px; align-items: center }
.hjl-kopf { text-align: center; font-weight: 800; color: var(--akzent) }
.hjl-fach { display: flex; align-items: center; gap: 6px; min-width: 0 } .hjl-fach .marke { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.p-marke { font-weight: 800; color: var(--akzent); width: 22px }
button.hjl-zelle { min-height: 40px; border-radius: 10px; border: 1px solid var(--rand); background: var(--kachel); color: var(--text); font: 800 16px var(--zahl-font); cursor: pointer }
button.hjl-zelle.endnote { border-color: var(--akzent); color: var(--akzent) }
button.hjl-zelle.nicht { text-decoration: line-through; opacity: .55; border-style: dashed }
.hjl-faktor { text-align: center; color: var(--dim); font-weight: 700 } .hjl-faktor.anders { color: var(--akzent) }
.abi-fuss { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie) } .abi-fuss b { font-size: 20px }
.p-zeile { gap: 10px } .p-nr { width: 28px; color: var(--akzent) } .p-zeile button.hjl-zelle { min-width: 52px }
.abi-erklaerung { min-height: auto } .abi-erklaerung summary { cursor: pointer; color: var(--akzent); font-weight: 700 } .abi-erklaerung p { margin-top: 10px }
.abitur .abi-kopf { align-items: center }
@media (max-width: 599px) {
  .abi-ueber { flex-direction: column; align-items: stretch } .abi-schnitt { margin-left: 0 }
  .hjl-raster { grid-template-columns: minmax(96px, 1.6fr) repeat(4, minmax(36px, 1fr)) 34px; gap: 4px }
  .hjl-fach .marke { max-width: 72px } button.hjl-zelle { min-height: 40px; font-size: 14px }
  .fach-kopf { flex-wrap: wrap } .schnitt-gross { margin-left: 0 }
}
.fach-kopf .schnitt-gross b, .fach-kopf .schnitt-gross small { color: #0b1520 } /* sonst erbt das Ø die helle Fachfarbe (.fach b) — Orange auf Weiß */

/* --- Nachbesserungen 05.10. (Moritz) --------------------------------------- */
/* 1. Heller Streifen unter der Seite: Hinter dem Seitenende und beim Überscrollen
 *    zeigt Safari die background-color von html — bisher der helle obere Ton.
 *    Jetzt der dunkle untere; der Verlauf liegt fest hinter dem Inhalt (body::before),
 *    damit er auch auf langen Seiten und in iPadOS (kein background-attachment: fixed) passt. */
html { background-color: #2e4c69; background-image: none }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--grund); pointer-events: none }

/* 2. Lange Wörter in Vertretungs- und Sondertag-Kästen mit Bindestrich trennen (lang="de"). */
.sonder, .hinweis, .std .hinweis-zeile, .kal-block small, .vz small, #kacheln li, .ganzer-plan li, .zl-titel {
  -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word }

/* 3. Schalter mittig: im Sheet bekam er zusätzlich .wert-eingabe (40 px hoch, Innenabstand). */
.sheet .schalter-eingabe { width: 50px; height: 30px; min-height: 0; max-width: none; padding: 0; margin: 0 0 0 auto }
.schalter-eingabe::after { top: 50%; transform: translateY(-50%) }
.folgt { margin-top: 8px }