/* Kreide – Route B: Tafelgrün, Kreideweiß, Kreidegelb. Fraunces + Manrope. */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/fraunces-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/fraunces-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/fraunces-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/fraunces-latin-600-italic.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/manrope-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/manrope-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/manrope-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/manrope-latin-700-normal.woff2) format('woff2'); }

:root {
  --bg: #F3F5F2; --card: #FFFFFF; --card2: #F8FAF8; --ink: #13201C; --muted: #5B6B66; --faint: #8A938F;
  --line: #DCE2DE; --line2: #E7EBE8; --strong: #13201C; --we: #EBEFEC; --heute: #FBF6DF;
  --tafel: #1E3B34; --tafel2: #2C5148; --tafel3: #24453D; --tafel-ink: #F3F5F2; --tafel-muted: #9FB6AE; --tafel-line: #2F5249;
  --gelb: #F2CF4A; --gelb-ink: #13201C;
  --c-termin: #2F6E9E; --c-arbeit: #B83A2E; --c-ausflug: #4F7A35; --c-hausaufgabe: #6A4FA3; --c-notiz: #8A938F; --c-ferien: #E0B52A; --c-plan: #13201C;
  --bg-arbeit: #FBEDEB; --bg-ferien: #FBF1CC; --bg-ausflug: #EEF4E8; --bg-termin: #EAF1F7; --bg-hausaufgabe: #F1EDF8; --bg-notiz: #F0F2F1;
  --rot: #B83A2E; --ok: #2F7A4A;
  --serif: 'Fraunces', Georgia, serif; --sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --r: 16px; --r-s: 12px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --bg: #1E3B34; --card: #24453D; --card2: #284B42; --ink: #F3F5F2; --muted: #9FB6AE; --faint: #7F9A91;
    --line: #2F5249; --line2: #2A4B42; --strong: #F3F5F2; --we: #1A352E; --heute: #2C5148;
    --tafel: #13201C; --tafel2: #1E3B34; --tafel3: #18302A; --tafel-line: #22403A;
    --c-termin: #6FA6D0; --c-arbeit: #E8806F; --c-ausflug: #9CC27E; --c-hausaufgabe: #B39CE6; --c-notiz: #A9B3AF; --c-ferien: #F2CF4A; --c-plan: #F3F5F2;
    --bg-arbeit: #3B3A2F; --bg-ferien: #3A4A30; --bg-ausflug: #2B4A35; --bg-termin: #26475A; --bg-hausaufgabe: #32405A; --bg-notiz: #2A4740;
    --rot: #E8806F; --ok: #9CC27E;
    color-scheme: dark;
  }
}
:root[data-theme="dunkel"] {
  --bg: #1E3B34; --card: #24453D; --card2: #284B42; --ink: #F3F5F2; --muted: #9FB6AE; --faint: #7F9A91;
  --line: #2F5249; --line2: #2A4B42; --strong: #F3F5F2; --we: #1A352E; --heute: #2C5148;
  --tafel: #13201C; --tafel2: #1E3B34; --tafel3: #18302A; --tafel-line: #22403A;
  --c-termin: #6FA6D0; --c-arbeit: #E8806F; --c-ausflug: #9CC27E; --c-hausaufgabe: #B39CE6; --c-notiz: #A9B3AF; --c-ferien: #F2CF4A; --c-plan: #F3F5F2;
  --bg-arbeit: #3B3A2F; --bg-ferien: #3A4A30; --bg-ausflug: #2B4A35; --bg-termin: #26475A; --bg-hausaufgabe: #32405A; --bg-notiz: #2A4740;
  --rot: #E8806F; --ok: #9CC27E;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 15px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; flex-shrink: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
em { font-style: italic; }
.serif { font-family: var(--serif); }
.it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
[hidden] { display: none !important; }

/* ---------- Grundgerüst ---------- */
#app { min-height: 100vh; display: flex; }
#seite { width: 248px; flex-shrink: 0; background: var(--tafel); color: var(--tafel-ink); position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 26px 16px 20px; display: flex; flex-direction: column; gap: 26px; }
#view { flex: 1; min-width: 0; padding: 36px 44px 60px; }
#tabbar { display: none; }

.marke { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.marke svg { width: 32px; height: 32px; }
.marke span { font-family: var(--serif); font-style: italic; font-size: 28px; letter-spacing: -.02em; }
.s-gruppe { display: flex; flex-direction: column; gap: 2px; }
.s-titel { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tafel-muted); padding: 0 10px 6px; }
.s-link { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 7px 10px; border-radius: 12px; color: #DCE7E2; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; }
.s-link:hover { background: rgba(255,255,255,.05); }
.s-link.an { background: var(--tafel2); color: #fff; font-weight: 700; }
.s-link .punkt { margin-left: auto; color: var(--gelb); }
.s-link .zahl { margin-left: auto; font-size: 12px; color: var(--tafel-muted); }
.s-neu { margin-top: auto; }
.knopf-gelb { height: 46px; border: 0; border-radius: 12px; background: var(--gelb); color: var(--gelb-ink); font-weight: 700; cursor: pointer; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.av { width: 28px; height: 28px; border-radius: 50%; color: #fff; font-family: var(--serif); font-style: italic; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; line-height: 1; }
.av.s { width: 22px; height: 22px; font-size: 12px; }
.av.xs { width: 16px; height: 16px; font-size: 9px; }
.av.l { width: 40px; height: 40px; font-size: 19px; }
.av.fam { background: var(--tafel2); color: var(--gelb); font-family: var(--sans); font-style: normal; font-weight: 700; }

/* ---------- Seitenkopf ---------- */
.kopf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 26px; }
.kopf .titel { flex: 1; min-width: 220px; }
.ueber { color: var(--muted); font-weight: 600; }
.h1 { font-family: var(--serif); font-size: 52px; line-height: 1; letter-spacing: -.03em; }
.h2 { font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.h2 em, .h1 em { font-style: italic; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.seg button { height: 42px; padding: 0 14px; border: 0; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; }
.seg button.an { background: var(--strong); color: var(--bg); font-weight: 700; }
.knopf { height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.knopf.klein { height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.knopf.dunkel { background: var(--strong); color: var(--bg); border-color: var(--strong); }
.knopf.gelb { background: var(--gelb); color: var(--gelb-ink); border-color: var(--gelb); }
.knopf.rot { color: var(--rot); }
.knopf.voll { width: 100%; }
.knopf:disabled { opacity: .55; cursor: default; }
.rund { width: 44px; height: 44px; padding: 0; border-radius: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 38px; padding: 0 12px 0 6px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chip.ohne { padding: 0 14px; }
.chip.an { background: var(--strong); color: var(--bg); border-color: var(--strong); font-weight: 700; }
.mk { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: inline-block; }

/* ---------- Woche (Liste) ---------- */
.layout2 { display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; }
.layout2 > .haupt { flex: 999 1 520px; min-width: 0; }
.layout2 > .neben { flex: 1 1 290px; min-width: 260px; display: flex; flex-direction: column; gap: 16px; }
.tag { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 24px; border-top: 1px solid var(--line); padding: 16px 0; }
.tag:last-child { border-bottom: 1px solid var(--line); }
.tag .wt { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.1; }
.tag.heute .wt::after { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gelb); margin-left: 8px; vertical-align: middle; }
.tag .dt { color: var(--muted); font-size: 14px; }
.tag .eint { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.leer { color: var(--muted); padding: 10px 0; }
.zeile { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 12px; padding: 11px 14px; cursor: pointer; border: 0; width: 100%; text-align: left; min-height: 48px; }
.zeile:hover { background: var(--card2); }
.zeile .txt { flex: 1; min-width: 0; }
.zeile .txt b { font-weight: 700; }
.zeile .sub { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile.arbeit { background: var(--bg-arbeit); }
.zeile.ferien { background: var(--bg-ferien); cursor: default; }
.zeile.erledigt .txt b { text-decoration: line-through; opacity: .6; }
.zeile .rechts { color: var(--muted); font-size: 13px; white-space: nowrap; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill.rot { background: var(--c-arbeit); color: #fff; }
.pill.grau { background: var(--line2); color: var(--muted); }
.pill.gelb { background: var(--gelb); color: var(--gelb-ink); }
.pill.gruen { background: var(--bg-ausflug); color: var(--c-ausflug); }

.karte { background: var(--card); border-radius: 20px; padding: 22px; }
.karte.tafel { background: var(--tafel); color: var(--tafel-ink); }
.karte.tafel .muted { color: var(--tafel-muted); }
.karte.gelb { background: var(--gelb); color: var(--gelb-ink); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.gross { font-family: var(--serif); font-size: 60px; line-height: 1; letter-spacing: -.03em; }
.gross em { font-size: 26px; }
.mini-plan { display: grid; grid-template-columns: 22px repeat(var(--n, 2), minmax(0, 1fr)); gap: 7px 10px; font-size: 13px; }
.mini-plan .k { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.mini-plan .nr { color: var(--muted); }
.mini-plan .entfall { text-decoration: line-through; color: var(--rot); }
.mini-plan .vertr { color: var(--c-termin); font-weight: 700; }

/* ---------- Monat ---------- */
.monat-wrap { display: flex; gap: 0; align-items: stretch; min-height: calc(100vh - 140px); }
.monat { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.monat .wtage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--strong); padding-bottom: 6px; font-family: var(--serif); font-style: italic; color: var(--muted); }
.monat .raster { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(104px, 1fr); }
.zelle { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line2); padding: 6px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; cursor: pointer; background: transparent; border-top: 0; border-left: 0; text-align: left; min-width: 0; }
.zelle.we { background: var(--we); }
.zelle.fer { background: var(--bg-ferien); }
.zelle.aus .nr { color: var(--faint); }
.zelle.wahl { outline: 2px solid var(--strong); outline-offset: -2px; }
.zelle .nr { font-family: var(--serif); font-size: 18px; line-height: 1; padding: 3px 6px; border-radius: 8px; align-self: flex-start; }
.zelle.heute .nr { background: var(--strong); color: var(--gelb); }
.zelle .fn { font-size: 10px; font-weight: 700; color: var(--muted); }
.ev { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.ev span.t { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.tagpanel { width: 320px; flex-shrink: 0; background: var(--tafel); color: var(--tafel-ink); border-radius: 20px; margin-left: 20px; padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; align-self: flex-start; position: sticky; top: 20px; }
.tagpanel .eintrag { padding: 12px 0; border-top: 1px solid var(--tafel-line); cursor: pointer; }
.tagpanel .eintrag .eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.tagpanel .eintrag .t { font-family: var(--serif); font-size: 22px; margin-top: 2px; }
.tagpanel .muted { color: var(--tafel-muted); }

/* ---------- Stundenplan ---------- */
.plan-scroll { overflow-x: auto; }
.plan { min-width: 680px; display: grid; grid-template-columns: 70px repeat(var(--tage, 5), minmax(0, 1fr)); border-top: 1px solid var(--strong); }
.plan > div { border-bottom: 1px solid var(--line); }
.plan .ph { padding: 12px; font-family: var(--serif); font-style: italic; font-size: 20px; }
.plan .ph small { font-family: var(--sans); font-style: normal; font-size: 12px; color: var(--muted); margin-left: 4px; }
.plan .ph.heute, .plan .pc.heute { background: var(--heute); }
.plan .pn { padding: 10px 0; }
.plan .pn b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1; display: block; }
.plan .pn span { font-size: 12px; color: var(--muted); }
.plan .pc { padding: 9px 12px; min-height: 58px; cursor: default; }
.plan.bearbeiten .pc { cursor: pointer; }
.plan.bearbeiten .pc:hover { background: var(--card2); }
.plan .pc .f { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.plan .pc .i { font-size: 12px; color: var(--muted); padding-left: 16px; }
.plan .pc.entfall .f { text-decoration: line-through; color: var(--rot); }
.plan .pc.vertretung .f::after { content: 'Vertretung'; font-size: 11px; color: var(--c-termin); margin-left: 4px; }
.plan .pause { grid-column: 1 / -1; padding: 5px 0 5px 82px; font-family: var(--serif); font-style: italic; color: var(--muted); }
.tagwahl { display: none; }
.stundenliste { display: none; }

/* ---------- Listen (Arbeiten, Ausflüge …) ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 26px; }
.liste-tab { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: stretch; gap: 0; }
.liste-tab > *:nth-child(3n+2) { padding-left: 16px; padding-right: 16px; }
.liste-tab > *:nth-child(3n) { display: flex; align-items: center; justify-content: flex-end; }
.liste-tab > * { padding: 13px 0; border-top: 1px solid var(--line); }
.liste-tab > .erst { border-top-color: var(--strong); }
.liste-tab .dg { font-family: var(--serif); font-size: 28px; line-height: 1; }
.liste-tab .dk { font-size: 12px; color: var(--muted); }
.liste-tab .zl { cursor: pointer; min-width: 0; }
.liste-tab .zl b { display: flex; align-items: center; gap: 8px; }
.liste-tab .note { font-family: var(--serif); font-size: 26px; text-align: right; }
.abschnitt { margin: 28px 0 6px; }

/* ---------- Formulare & Sheet ---------- */
#sheet { position: fixed; inset: 0; z-index: 50; background: rgba(15, 30, 26, .55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.blatt { background: var(--bg); color: var(--ink); width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 24px; padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.blatt.breit { width: min(860px, 100%); }
.blatt-kopf { display: flex; align-items: center; gap: 10px; }
.blatt-kopf h2 { flex: 1; font-family: var(--serif); font-size: 26px; }
.feld { display: block; background: var(--card); border-radius: 14px; padding: 10px 14px; }
.feld > span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.feld input, .feld select, .feld textarea { width: 100%; border: 0; outline: 0; background: transparent; padding: 3px 0; font-weight: 600; font-size: 16px; }
.feld textarea { resize: vertical; min-height: 72px; font-weight: 500; }
.feld select { appearance: none; -webkit-appearance: none; }
.reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--line); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.check .box svg { width: 16px; height: 16px; color: var(--gelb-ink); opacity: 0; }
.check input:checked + .box { background: var(--gelb); border-color: var(--gelb); }
.check input:checked + .box svg { opacity: 1; }
.check input:checked ~ .t { text-decoration: line-through; color: var(--muted); }
.check input:focus-visible + .box { outline: 2px solid var(--c-termin); outline-offset: 2px; }
.check .t { flex: 1; }
.schalter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--card); border-radius: 14px; cursor: pointer; }
.schalter input { width: 46px; height: 28px; appearance: none; -webkit-appearance: none; background: var(--line); border-radius: 99px; position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s; }
.schalter input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.schalter input:checked { background: var(--ok); }
.schalter input:checked::after { left: 21px; }
.info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: 16px; overflow: hidden; }
.info > div { background: var(--card); padding: 11px 14px; }
.info small { display: block; font-size: 12px; color: var(--muted); }
.meldung { padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.meldung.fehler { background: var(--bg-arbeit); color: var(--rot); }
.meldung.gut { background: var(--bg-ausflug); color: var(--c-ausflug); }
.meldung.hinweis { background: var(--bg-ferien); }
.hint { font-size: 13px; color: var(--muted); margin: 0; }
code.k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--card); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
pre.log { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--card); padding: 12px; border-radius: 12px; white-space: pre-wrap; max-height: 260px; overflow: auto; margin: 0; }
.menu { display: flex; flex-direction: column; gap: 4px; }
.menu button { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--card); font-weight: 600; text-align: left; cursor: pointer; }
.menu button.rot { color: var(--rot); }

/* Einstellungen */
.panel { background: var(--card); border-radius: 20px; padding: 6px 18px; margin-bottom: 18px; }
.panel .row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line2); min-height: 56px; }
.panel .row:last-child { border-bottom: 0; }
.panel .row .grow { flex: 1; min-width: 0; }
.panel .row .grow small { display: block; color: var(--muted); font-size: 13px; }
.panel-titel { font-family: var(--serif); font-style: italic; font-size: 24px; margin: 28px 0 10px; }
.mehr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 28px; align-items: start; }

/* KI-Vorschlag */
.vorschlag { background: var(--card); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.vorschlag.aus { opacity: .45; }
.vorschlag .vk { display: flex; align-items: center; gap: 10px; }
.drop { border: 2px dashed var(--line); border-radius: 18px; padding: 26px; text-align: center; background: var(--card); cursor: pointer; display: block; }
.drop.ueber { border-color: var(--gelb); }
.vorschau { display: flex; gap: 8px; flex-wrap: wrap; }
.vorschau span { background: var(--card2); border-radius: 10px; padding: 6px 10px; font-size: 13px; }

/* ---------- Anmeldung ---------- */
body.tor { background: var(--tafel); }
body.tor #view { display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 100vh; }
.tor-box { width: min(400px, 100%); color: var(--tafel-ink); display: flex; flex-direction: column; gap: 14px; }
.tor-box .logo { width: 64px; height: 64px; }
.tor-box h1 { font-family: var(--serif); font-style: italic; font-size: 54px; line-height: 1; letter-spacing: -.03em; }
.tor-box p { margin: 0; color: #DCE7E2; }
.tor-box .feld { background: var(--tafel3); }
.tor-box .feld > span { color: var(--tafel-muted); }
.tor-box .feld input { color: var(--tafel-ink); }
.tor-box .knopf.gelb { height: 52px; }
.tor-box .fuss { font-size: 14px; color: var(--tafel-muted); display: flex; gap: 16px; flex-wrap: wrap; }
.tor-box .fuss a { text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tor-box .check { border-color: var(--tafel-line); color: #DCE7E2; }
.tor-box .check .box { border-color: var(--tafel-muted); }
.tor-box .meldung.fehler { background: #3A2E2A; color: #F2B3A7; }
.tor-box .meldung.gut { background: var(--tafel2); color: var(--tafel-ink); }

/* ---------- Kleinkram ---------- */
.boot { display: flex; align-items: center; justify-content: center; min-height: 50vh; }
.spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gelb); animation: dreh 0.8s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
#toast { position: fixed; left: 50%; bottom: calc(26px + var(--safe-b)); transform: translateX(-50%) translateY(20px); background: var(--strong); color: var(--bg); padding: 12px 18px; border-radius: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 80; max-width: calc(100vw - 32px); }
#toast.zeigen { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.fehler { background: var(--rot); color: #fff; }
.banner { background: var(--gelb); color: var(--gelb-ink); border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-weight: 600; }
.banner .grow { flex: 1; }
.leerseite { text-align: center; padding: 60px 20px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.leerseite .h2 { color: var(--ink); }

/* ---------- Tablet: schmale Leiste ---------- */
@media (max-width: 1279px) and (min-width: 760px) {
  #seite { width: 84px; padding: 22px 10px; align-items: center; }
  #seite .marke span, #seite .s-titel, #seite .s-link .lbl, #seite .s-link .zahl, #seite .s-link .punkt { display: none; }
  #seite .s-link { justify-content: center; padding: 8px 0; width: 60px; }
  #seite .s-link .kurz { display: block; font-family: var(--serif); font-style: italic; font-size: 14px; }
  #seite .s-neu { width: 52px; height: 52px; padding: 0; border-radius: 50%; }
  #seite .s-neu .lbl { display: none; }
  #view { padding: 28px 26px 50px; }
  .tagpanel { width: 290px; }
  .h1 { font-size: 44px; }
}
.s-link .kurz { display: none; }

/* ---------- iPhone ---------- */
@media (max-width: 759px) {
  body { background: var(--bg); }
  #seite { display: none; }
  #app { display: block; }
  #view { padding: calc(18px + var(--safe-t)) 18px calc(110px + var(--safe-b)); }
  #tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(72px + var(--safe-b)); padding: 0 8px var(--safe-b); background: var(--tafel); align-items: center; justify-content: space-around; }
  #tabbar a, #tabbar button { min-width: 58px; min-height: 48px; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--tafel-muted); background: none; border: 0; }
  #tabbar a.an { color: var(--gelb); }
  #tabbar .plus { width: 52px; height: 52px; min-width: 0; border-radius: 50%; background: var(--tafel-ink); color: var(--tafel); font-style: normal; }
  #tabbar .plus svg { width: 24px; height: 24px; }
  .h1 { font-size: 40px; }
  .kopf { margin-bottom: 18px; gap: 10px; }
  .mobil-kids { display: flex; gap: 6px; align-items: center; }
  .tag { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; }
  .tag .wt { font-size: 21px; display: inline; }
  .tag .dt { display: inline; margin-left: 8px; }
  .layout2 { gap: 22px; }
  .monat-wrap { display: block; min-height: 0; }
  .monat .raster { grid-auto-rows: minmax(58px, auto); }
  .zelle { padding: 4px; }
  .zelle .ev span.t, .zelle .fn { display: none; }
  .zelle .evs { display: flex; gap: 3px; flex-wrap: wrap; }
  .zelle .ev { gap: 0; }
  .tagpanel { width: auto; margin: 18px 0 0; position: static; }
  .plan-scroll { display: none; }
  .tagwahl { display: flex; gap: 6px; margin-bottom: 14px; }
  .tagwahl button { flex: 1; height: 54px; border-radius: 14px; border: 0; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; position: relative; }
  .tagwahl button small { font-weight: 500; font-size: 12px; color: var(--muted); }
  .tagwahl button.an { background: var(--gelb); color: var(--gelb-ink); }
  .tagwahl button.an small { color: var(--gelb-ink); }
  .tagwahl button .dot { position: absolute; top: 6px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-arbeit); }
  .stundenliste { display: flex; flex-direction: column; }
  .stunde { display: grid; grid-template-columns: 26px 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
  .stunde:last-child { border-bottom: 1px solid var(--line); }
  .stunde .n { font-family: var(--serif); font-size: 20px; color: var(--muted); }
  .stunde .z { font-size: 13px; color: var(--muted); }
  .stunde .s b { display: flex; align-items: center; gap: 7px; }
  .stunde .s small { display: block; color: var(--muted); font-size: 13px; }
  .stunde.jetzt { background: var(--heute); border-radius: 14px; margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
  .stunde.jetzt .n, .stunde.jetzt .z { color: var(--ink); }
  .stunde.entfall .s b { text-decoration: line-through; color: var(--rot); }
  .stunde-pause { padding: 6px 0 6px 88px; border-top: 1px dashed var(--line); font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 14px; }
  .liste-tab { grid-template-columns: 54px minmax(0, 1fr) auto; }
  .liste-tab > *:nth-child(3n+2) { padding-left: 10px; padding-right: 10px; }
  .liste-tab .dg { font-size: 24px; }
  #sheet { align-items: flex-end; padding: 0; }
  .blatt { border-radius: 26px 26px 0 0; max-height: calc(100vh - 40px - var(--safe-t)); padding-bottom: calc(26px + var(--safe-b)); width: 100%; }
  .info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) { .mobil-kids { display: none; } }

/* ======================================================================
   Startseite „Guten Morgen“
   ====================================================================== */
.pill.blau { background: var(--bg-termin); color: var(--c-termin); }
.pill.tafel2 { background: var(--tafel2); color: var(--tafel-ink); }
button.pill { border: 0; cursor: pointer; font-family: inherit; }
.nur-klein { display: none !important; }
.start-kopf .h1 { font-size: 54px; }
.gruss-satz { margin: 10px 0 0; font-size: 17px; color: var(--muted); max-width: 720px; }
.gruss-satz em { font-family: var(--serif); color: var(--ink); }
.m-morgen { display: none; }
.start-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; margin-bottom: 30px; }
.kk-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.kk { background: var(--card); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 14px; border-top: 6px solid var(--kf); min-width: 0; }
.kk-kopf { display: flex; align-items: center; gap: 12px; }
.kk-kopf .av.l { width: 46px; height: 46px; font-size: 22px; }
.kk-kopf .grow { flex: 1; min-width: 0; }
.kk-name { font-family: var(--serif); font-size: 28px; line-height: 1; }
.kk-band { display: flex; gap: 4px; height: 48px; }
.kk-band span { min-width: 0; border-radius: 10px; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kk-band span.entfall { text-decoration: line-through; opacity: .55; }
.kk-band span.vertretung { box-shadow: inset 0 0 0 2px var(--c-termin); }
.kk-frei { border: 1.5px dashed var(--line); border-radius: 12px; padding: 13px; text-align: center; font-family: var(--serif); font-style: italic; color: var(--muted); }
.kk-aend, .kk-packen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kk-packen .eyebrow { font-size: 11px; margin-right: 4px; }
.kk-packen .pill.grau { background: var(--bg); color: var(--ink); }
.kk-arbeit { display: flex; align-items: center; gap: 14px; border: 0; width: 100%; text-align: left; cursor: pointer; border-radius: 16px; padding: 12px 16px; background: color-mix(in srgb, var(--af) 11%, var(--card)); color: var(--ink); }
.kk-arbeit.leer { background: var(--card2); cursor: default; color: var(--muted); }
.kk-zahl { font-family: var(--serif); font-size: 34px; line-height: 1; min-width: 34px; text-align: center; color: color-mix(in srgb, var(--af, var(--muted)) 75%, var(--ink)); }
.kk-arbeit b { display: block; font-size: 14px; }
.kk-arbeit small { display: block; color: var(--muted); font-size: 13px; }
.start-neben { display: flex; flex-direction: column; gap: 16px; }
.fc .gross { margin: 8px 0 4px; font-size: 72px; }
.fc-striche { display: flex; gap: 3px; margin-top: 14px; }
.fc-striche i { flex: 1; height: 6px; border-radius: 3px; background: var(--tafel-line); }
.fc-striche i:first-child { background: var(--gelb); }
.m-kachel { display: none; }
.dem { display: flex; flex-direction: column; gap: 4px; padding: 20px 18px; }
.dem .eyebrow { margin-bottom: 6px; padding: 0 4px; }
.dem-z { display: flex; align-items: center; gap: 12px; border: 0; background: none; text-align: left; cursor: pointer; padding: 6px 4px; border-radius: 10px; }
.dem-z:hover { background: var(--card2); }
.dem-z .dg { font-family: var(--serif); font-size: 22px; width: 38px; flex-shrink: 0; }
.dem-z b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.dem-z small { display: block; color: var(--muted); font-size: 12.5px; }
.dem-z .grow { min-width: 0; }
.dem-mehr { font-size: 13px; font-weight: 700; color: var(--muted); padding: 8px 4px 0; }
.wb-kopfzeile { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.wb-kopfzeile .h2 { font-style: italic; }
.wb-kopfzeile .grow { flex: 1; }
.wb-kopfzeile .knopf { align-self: center; }
.wochenband { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: stretch; }
.wb { background: var(--card); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 130px; min-width: 0; }
.wb.an { background: var(--gelb); color: var(--gelb-ink); }
.wb.vorbei { opacity: .62; }
.wb-kopf { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px; }
.wb-kopf .it { font-size: 24px; }
.wb-kopf small { font-weight: 700; font-size: 12px; }
.wb-liste { display: flex; flex-direction: column; gap: 6px; }
.wb .zeile { padding: 8px 10px; min-height: 0; gap: 8px; border-radius: 10px; background: var(--bg); }
.wb.an .zeile { background: rgba(255,255,255,.55); color: var(--gelb-ink); }
.wb.an .zeile .sub { color: rgba(19,32,28,.7); }
.wb .zeile.arbeit { background: var(--bg-arbeit); }
.wb .zeile.ferien { background: var(--bg-ferien); }
.wb .zeile .txt b { font-size: 13.5px; display: block; overflow: hidden; text-overflow: ellipsis; }
.wb .zeile .sub { font-size: 12px; }
.wb-leer { margin-top: auto; font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 15px; padding: 0 2px; }
.wb.an .wb-leer { color: rgba(19,32,28,.7); }

/* ======================================================================
   Arbeiten & Noten „Countdown“
   ====================================================================== */
.ab-oben { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.ab-hero { background: var(--tafel); color: var(--tafel-ink); border-radius: 26px; padding: 26px 28px; display: flex; gap: 26px; align-items: center; position: relative; overflow: hidden; }
.ab-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 230px; height: 230px; border-radius: 50%; background: var(--tafel3); }
.ab-hero > * { position: relative; z-index: 1; }
.ab-hero .grow { flex: 1; min-width: 0; }
.ab-hero .muted { color: var(--tafel-muted); font-size: 14px; }
.ab-zahl { text-align: center; min-width: 90px; }
.ab-zahl .serif { font-size: 96px; line-height: .85; color: var(--gelb); letter-spacing: -.04em; }
.ab-zahl .it { font-size: 22px; }
.ab-titel { font-family: var(--serif); font-size: 32px; line-height: 1.1; margin: 6px 0 8px; }
.ab-knoepfe { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ab-knoepfe .pill { height: 30px; padding: 0 14px; }
.ab-noten { display: flex; flex-direction: column; gap: 10px; }
.zs-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.nz { display: grid; grid-template-columns: minmax(0, 1fr) auto 38px; gap: 10px; align-items: center; }
.nz-f { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz-slots { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.ns { min-width: 32px; height: 32px; padding: 0 5px; border-radius: 10px; border: 0; cursor: pointer; font-family: var(--serif); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.ns.voll { background: var(--nf); color: #fff; font-size: 18px; }
.ns.offen { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--nf) 60%, var(--card)); color: var(--nf); }
.ns.kommt { background: color-mix(in srgb, var(--nf) 10%, var(--card)); color: color-mix(in srgb, var(--nf) 75%, var(--ink)); font-family: var(--sans); font-size: 10.5px; font-weight: 700; border: 1.5px dashed color-mix(in srgb, var(--nf) 30%, var(--card)); }
.nz-s { font-family: var(--serif); font-size: 22px; text-align: right; color: var(--muted); }
.zs-karte { padding: 20px 26px 38px; margin-bottom: 22px; }
.zs { position: relative; height: 74px; margin-top: 30px; border-left: 2px solid var(--strong); }
.zs::before { content: ''; position: absolute; left: 0; right: 0; top: 37px; border-top: 1px solid var(--line); }
.zs-heute { position: absolute; left: -2px; top: -20px; font-size: 11px; font-weight: 800; background: var(--strong); color: var(--bg); border-radius: 6px; padding: 1px 6px; }
.zs-m { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--line); }
.zs-m b { position: absolute; bottom: -22px; left: 4px; font-size: 11px; color: var(--muted); }
.zs-f { position: absolute; top: 33px; height: 8px; border-radius: 4px; background: var(--gelb); }
.zs-leg { display: inline-block; width: 14px; height: 6px; border-radius: 3px; background: var(--gelb); vertical-align: middle; margin-right: 4px; }
.zs-p { position: absolute; top: 2px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; cursor: pointer; padding: 0; color: color-mix(in srgb, var(--af) 75%, var(--ink)); }
.zs-p.unten { top: 32px; flex-direction: column-reverse; }
.zs-p i { width: 14px; height: 14px; border-radius: 50%; background: var(--af); box-shadow: 0 0 0 3px var(--card); }
.zs-p b { font-size: 11px; }
.af-chips { display: none; }
.am-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px 22px; align-items: start; }
.am-grid.eins { display: flex; flex-direction: column; gap: 8px; }
.am { display: flex; flex-direction: column; gap: 8px; }
.am-kopf { display: flex; align-items: baseline; gap: 10px; }
.am-kopf h3 { font-size: 24px; }
.az { display: flex; align-items: center; gap: 14px; border: 0; width: 100%; text-align: left; background: var(--card); border-radius: 16px; padding: 12px 16px; cursor: pointer; min-width: 0; }
.az:hover { background: var(--card2); }
.az-d { width: 46px; flex-shrink: 0; display: flex; flex-direction: column; }
.az-d .serif { font-size: 26px; line-height: 1; }
.az-d small { font-size: 11px; font-weight: 700; color: var(--muted); }
.az-bar { width: 5px; align-self: stretch; border-radius: 3px; background: var(--af); flex-shrink: 0; }
.az .grow { flex: 1; min-width: 0; }
.az b { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; }
.az small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.az-pill { flex-shrink: 0; border-radius: 99px; padding: 4px 11px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--af) 14%, var(--card)); color: color-mix(in srgb, var(--af) 78%, var(--ink)); white-space: nowrap; }
.az-pill.bald { background: var(--c-arbeit); color: #fff; }
.az-pill.offen { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); }
.az-note { font-family: var(--serif); font-size: 28px; min-width: 40px; text-align: right; }

/* ======================================================================
   Stundenplan: Variante 1 (Raster) und 3 (Tageskarten)
   ====================================================================== */
.raster-box { background: var(--card); border-radius: 22px; padding: 14px; overflow-x: auto; }
.raster2 { display: grid; grid-template-columns: 74px repeat(var(--tage), minmax(110px, 1fr)); gap: 6px; min-width: 560px; }
.pk { display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 12px; line-height: 1.1; }
.pk .it { font-size: 20px; }
.pk small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.pk.an { background: var(--gelb); color: var(--gelb-ink); }
.pk.an small { color: var(--gelb-ink); }
.pn2 { grid-column: 1; display: flex; flex-direction: column; justify-content: center; padding-left: 4px; }
.pn2 b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1; }
.pn2 span { font-size: 11px; color: var(--muted); }
.pp { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.pp span { width: 70px; padding-left: 4px; }
.pp i { flex: 1; border-top: 1px dashed var(--line); }
.pp em { font-family: var(--serif); font-size: 13px; }
.pb { border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
.pb-f { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-f small { font-weight: 600; opacity: .75; }
.pb-z { font-size: 12px; opacity: .8; }
.pb-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 4px; }
.pchip { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 2px 8px; background: var(--card); color: inherit; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pchip.rot { background: var(--c-arbeit); color: #fff; }
.pb.mitarbeit { box-shadow: inset 0 0 0 2px var(--c-arbeit); }
.pb.entfall .pb-f { text-decoration: line-through; }
.pb.entfall { opacity: .6; }
.pb.vertretung { box-shadow: inset 0 0 0 2px var(--c-termin); }
.pb.leer { border: 1.5px dashed var(--line); background: transparent; color: var(--muted); align-items: center; justify-content: center; font-size: 20px; cursor: pointer; }
.raster2.bearbeiten .pb { cursor: pointer; }
.raster2.bearbeiten .pb:hover { filter: brightness(.97); }
.fchip { border: 0; border-radius: 10px; padding: 6px 10px; font-weight: 700; font-size: 13px; cursor: pointer; }
.tk-wrap { display: grid; grid-template-columns: repeat(var(--tage), minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.tk { background: var(--card); border-radius: 22px; padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tk.an { background: var(--tafel); color: var(--tafel-ink); }
.tk.an .tk-spanne, .tk.an .tk-pause, .tk.an .tk-fuss small, .tk.an .tk-kopf small { color: var(--tafel-muted); }
.tk.an .tk-kopf small { color: var(--gelb); }
.tk-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.tk-kopf .it { font-size: 24px; line-height: 1; }
.tk-kopf small { font-size: 12px; font-weight: 700; color: var(--muted); }
.tk-spanne { font-size: 13px; color: var(--muted); }
.tk-liste { display: flex; flex-direction: column; gap: 6px; }
.pb.kompakt { padding: 9px 11px; min-height: 46px; gap: 4px; }
.pb.kompakt.doppel { min-height: 96px; }
.pb-kopf { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.pb-kopf .pb-z { white-space: nowrap; }
.tk-pause { font-family: var(--serif); font-style: italic; font-size: 13px; text-align: center; color: var(--muted); }
.tk-fuss { margin-top: auto; border-top: 1px solid var(--line2); padding-top: 10px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.tk.an .tk-fuss { border-color: var(--tafel-line); }
.tk-fuss small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.m-liste { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px 10px; }
.m-zeit { font-size: 12px; color: var(--muted); padding-top: 10px; }
.m-pause { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--muted); padding: 2px 4px; }
.pb.m { border-radius: 14px; }
.pb.m.jetzt { outline: 3px solid var(--gelb); outline-offset: 1px; }
.m-karte { background: var(--tafel); color: var(--tafel-ink); border-radius: 20px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

@media (max-width: 1279px) and (min-width: 760px) {
  .start-grid { grid-template-columns: minmax(0, 1fr); }
  .start-neben { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .ab-oben { grid-template-columns: minmax(0, 1fr); }
  .tk-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .start-kopf .h1 { font-size: 44px; }
}

@media (max-width: 759px) {
  .nur-gross, .plan-gross { display: none !important; }
  .nur-klein { display: flex !important; }
  .start-kopf .h1 { font-size: 36px; }
  .gruss-satz { display: none; }
  .m-morgen { display: block; background: var(--tafel); color: var(--tafel-ink); border-radius: 22px; padding: 16px 18px; margin-bottom: 14px; }
  .m-morgen .serif { font-size: 21px; line-height: 1.25; margin-top: 4px; }
  .m-morgen em { color: var(--gelb); }
  .start-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 22px; }
  .kk-reihe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -18px; padding: 0 18px 4px; scrollbar-width: none; }
  .kk-reihe::-webkit-scrollbar { display: none; }
  .kk-reihe > .kk { flex: 0 0 calc(100% - 34px); scroll-snap-align: center; padding: 16px; gap: 12px; }
  .start-grid.eins .kk-reihe > .kk { flex-basis: 100%; }
  .kk-name { font-size: 22px; }
  .kk-kopf .av.l { width: 36px; height: 36px; font-size: 18px; }
  .kk-band { height: 40px; }
  .kk-band span { font-size: 10.5px; }
  .start-neben { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .start-neben .fc { padding: 14px; border-radius: 20px; }
  .start-neben .fc .gross { font-size: 40px; margin: 4px 0 2px; }
  .start-neben .fc .gross em { font-size: 18px; }
  .start-neben .fc .fc-striche { display: none; }
  .m-kachel { display: block; padding: 14px; border-radius: 20px; }
  .m-kachel .gross { font-size: 40px; margin: 4px 0 2px; }
  .m-kachel .gross em { font-size: 18px; color: var(--ink); }
  .start-neben .dem, .start-neben .knopf { grid-column: 1 / -1; }
  .start-neben > :only-child { grid-column: 1 / -1; }
  .wochenband { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .wb { min-height: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; padding: 10px 12px; }
  .wb-kopf { flex-direction: column; gap: 0; padding-top: 4px; }
  .wb-kopf .it { font-size: 21px; }
  .wb-leer { margin: 0; padding-top: 6px; }
  .ab-oben { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ab-hero { padding: 18px; gap: 16px; border-radius: 22px; }
  .ab-zahl { min-width: 64px; }
  .ab-zahl .serif { font-size: 64px; }
  .ab-titel { font-size: 23px; }
  .zs-karte { display: none; }
  .af-chips { display: flex; gap: 6px; overflow-x: auto; margin: 0 -18px 14px; padding: 0 18px; scrollbar-width: none; }
  .af-chips .chip { flex-shrink: 0; height: 34px; }
  .am-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .az { padding: 11px 12px; gap: 10px; }
  .az-d { width: 38px; }
  .az-d .serif { font-size: 22px; }
  .stundenliste .m-liste { margin-top: 2px; }
}

/* ======================================================================
   Listen: Termine, Ausflüge, Hausaufgaben, Notizen, Ferien
   ====================================================================== */
.az-pill.jetzt { background: var(--gelb); color: var(--gelb-ink); }
.li-hero, .af-hero, .fe-hero { background: var(--tafel); color: var(--tafel-ink); border-radius: 26px; padding: 26px 28px; position: relative; overflow: hidden; }
.li-hero { display: flex; gap: 26px; align-items: center; }
.li-hero::after, .af-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 230px; height: 230px; border-radius: 50%; background: var(--tafel3); }
.li-hero > *, .af-hero > * { position: relative; z-index: 1; }
.li-hero .grow { flex: 1; min-width: 0; }
.li-hero .muted, .af-hero .muted { color: var(--tafel-muted); }
.li-hero.leer { min-height: 170px; }
.li-datum { text-align: center; min-width: 110px; display: flex; flex-direction: column; }
.li-datum .serif { font-size: 84px; line-height: .85; color: var(--gelb); letter-spacing: -.04em; }
.li-datum .it { font-size: 22px; }
.li-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: center; }
.li-stat > div { display: flex; flex-direction: column; }
.li-stat .gross { font-size: 56px; }
.li-stat .knopf { grid-column: 1 / -1; }
details.vorbei { margin-top: 26px; }
details.vorbei > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
details.vorbei > summary::-webkit-details-marker { display: none; }
details.vorbei > summary::before { content: '›'; font-size: 22px; color: var(--muted); transition: transform .15s; display: inline-block; }
details.vorbei[open] > summary::before { transform: rotate(90deg); }
details.vorbei .az, details.vorbei .ticket, details.vorbei .fe-karte { opacity: .75; }

.af-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; margin-bottom: 8px; }
.af-titel { font-family: var(--serif); font-size: 42px; line-height: 1.05; margin: 8px 0 18px; }
.af-fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--tafel-line); border-radius: 16px; overflow: hidden; }
.af-fakten > div { background: var(--tafel2); padding: 10px 14px; min-width: 0; }
.af-fakten small { display: block; font-size: 11px; color: var(--tafel-muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.af-fakten b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-rechts { display: flex; flex-direction: column; gap: 14px; }
.af-countdown { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; }
.af-countdown .serif { font-size: 84px; line-height: .85; color: var(--gelb); }
.af-countdown .it { font-size: 22px; }
.af-checks { background: var(--tafel2); border-radius: 18px; padding: 12px 16px; }
.af-checks .eyebrow { font-size: 11px; color: var(--gelb); margin-bottom: 2px; }
.af-checks .check { border-color: var(--tafel-line); min-height: 42px; }
.af-checks .check .box { border-color: var(--tafel-muted); width: 22px; height: 22px; }
.af-checks .check input:checked ~ .t { color: var(--tafel-muted); }
.ticket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ticket { display: flex; align-items: stretch; border: 0; background: var(--card); border-radius: 18px; padding: 0; text-align: left; cursor: pointer; overflow: hidden; min-width: 0; }
.ticket:hover { background: var(--card2); }
.ticket-d { width: 78px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: color-mix(in srgb, var(--af) 14%, var(--card)); color: color-mix(in srgb, var(--af) 78%, var(--ink)); border-right: 2px dashed var(--bg); }
.ticket-d .serif { font-size: 30px; line-height: 1; }
.ticket-d small { font-size: 12px; font-weight: 700; }
.ticket-i { flex: 1; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.ticket-i b { font-size: 15px; }
.ticket-i small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-fuss { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }

.ha-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.ha-stats .karte { display: flex; align-items: baseline; gap: 10px; padding: 18px 22px; }
.ha-stats .gross { font-size: 52px; }
.ha-gruppe { margin-bottom: 22px; }
.ha-gruppe .h2 { margin-bottom: 10px; }
.ha-gruppe.rot .h2 { color: var(--rot); }
.ha-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.ha { display: flex; align-items: center; gap: 4px; background: var(--card); border-radius: 16px; padding: 6px 14px 6px 6px; border-left: 5px solid var(--af); min-width: 0; transition: opacity .2s; }
.ha-gruppe.rot .ha { background: var(--bg-arbeit); }
.ha.fertig { opacity: .55; }
.ha.fertig b { text-decoration: line-through; }
.ha-box { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; position: relative; }
.ha-box input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ha-box span { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--af); display: flex; align-items: center; justify-content: center; }
.ha-box svg { width: 16px; height: 16px; opacity: 0; color: #fff; }
.ha-box input:checked + span { background: var(--af); }
.ha-box input:checked + span svg { opacity: 1; }
.ha-box input:focus-visible + span { outline: 2px solid var(--c-termin); outline-offset: 2px; }
.ha-text { flex: 1; min-width: 0; border: 0; background: none; text-align: left; cursor: pointer; padding: 6px 0; display: flex; flex-direction: column; gap: 1px; }
.ha-fach { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--af) 75%, var(--ink)); display: flex; align-items: center; gap: 6px; }
.ha-text b { font-size: 15px; }
.ha-text small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-bis { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ha-gruppe.rot .ha-bis { color: var(--rot); }

.zettel-wand { columns: 4 240px; column-gap: 14px; }
.zettel { break-inside: avoid; display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0 0 14px; border: 0; background: var(--card); border-radius: 18px; padding: 18px; text-align: left; cursor: pointer; position: relative; transform: rotate(var(--dreh)); transition: transform .15s; }
.zettel:hover { transform: rotate(0deg) translateY(-2px); }
.zettel.pin { background: #FFF6CF; color: #13201C; box-shadow: 0 8px 20px rgba(19,32,28,.08); }
.zettel .nadel { position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--rot); box-shadow: 0 2px 4px rgba(0,0,0,.25); transform: translateX(-50%); }
.z-titel { font-family: var(--serif); font-size: 21px; line-height: 1.15; }
.zettel.pin .z-titel { font-style: italic; }
.z-text { font-size: 14px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.zettel.pin .z-text { color: #4A4636; }
.z-fuss { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.zettel.pin .z-fuss { color: #7A6400; }

.fe-hero { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.fe-hero .eyebrow { color: var(--gelb); }
.fe-zahl { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 2px; }
.fe-zahl .serif { font-size: 110px; line-height: .85; letter-spacing: -.04em; }
.fe-zahl .it { font-size: 30px; }
.fe-sub { color: var(--tafel-muted); }
.fe-hero.jetzt { background: var(--gelb); color: var(--gelb-ink); }
.fe-hero.jetzt .eyebrow, .fe-hero.jetzt .fe-sub { color: var(--gelb-ink); }
.fe-striche { display: flex; flex-wrap: wrap; gap: 4px; }
.fe-striche i { width: 14px; height: 8px; border-radius: 4px; background: var(--tafel-line); }
.fe-striche i.w { background: var(--gelb); }
.fe-jahr { margin-bottom: 22px; padding-bottom: 36px; }
.fe-band { position: relative; height: 36px; margin-top: 14px; background: var(--bg); border-radius: 10px; }
.fe-mon { position: absolute; bottom: -22px; font-size: 11px; font-weight: 700; color: var(--muted); padding-left: 4px; border-left: 1px solid var(--line); height: 58px; display: flex; align-items: flex-end; }
.fe-block { position: absolute; top: 4px; bottom: 4px; border-radius: 6px; background: var(--gelb); }
.fe-block.eigen { background: var(--c-termin); }
.fe-heute { position: absolute; top: -6px; bottom: -6px; width: 3px; border-radius: 2px; background: var(--strong); }
.fe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.fe-karte { background: var(--card); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fe-karte[role=button] { cursor: pointer; }
.fe-karte.an { background: var(--gelb); color: var(--gelb-ink); }
.fe-karte.an small { color: var(--gelb-ink); }
.fe-k-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fe-k-kopf .serif { font-size: 24px; }
.fe-karte b { font-size: 16px; display: flex; align-items: center; gap: 6px; }
.fe-karte small { color: var(--muted); font-size: 13px; }

@media (max-width: 1279px) and (min-width: 760px) {
  .af-hero { grid-template-columns: minmax(0, 1fr); }
  .af-countdown { justify-content: flex-start; }
}
@media (max-width: 759px) {
  .li-hero { padding: 18px; gap: 16px; border-radius: 22px; }
  .li-datum { min-width: 70px; }
  .li-datum .serif { font-size: 60px; }
  .li-datum .it { font-size: 16px; }
  .li-stat { padding: 16px; }
  .li-stat .gross { font-size: 40px; }
  .af-hero { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 16px; border-radius: 22px; }
  .af-titel { font-size: 30px; margin-bottom: 14px; }
  .af-fakten { grid-template-columns: 1fr 1fr; }

  .af-countdown { justify-content: flex-start; }
  .af-countdown .serif { font-size: 56px; }
  .ticket-grid, .ha-liste { grid-template-columns: minmax(0, 1fr); }
  .ha-stats { gap: 8px; margin-bottom: 18px; }
  .ha-stats .karte { flex-direction: column; gap: 0; padding: 12px 14px; border-radius: 16px; }
  .ha-stats .gross { font-size: 36px; }
  .zettel-wand { columns: 2 150px; column-gap: 10px; }
  .zettel { padding: 14px; margin-bottom: 10px; }
  .z-titel { font-size: 18px; }
  .fe-hero { padding: 20px; border-radius: 22px; }
  .fe-zahl .serif { font-size: 76px; }
  .fe-zahl .it { font-size: 22px; }
  .fe-mon { font-size: 9px; }
  .fe-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Monat: als Karte, Einträge als getönte Streifen */
.monat { background: var(--card); border-radius: 22px; padding: 14px 14px 6px; }
.monat .wtage { border-bottom-color: var(--line); padding: 0 6px 8px; }
.zelle { border-right-color: var(--line2); border-bottom-color: var(--line2); border-radius: 0; }
.zelle.we { background: var(--card2); }
.zelle:hover { background: var(--card2); }
.zelle.fer { background: color-mix(in srgb, var(--c-ferien) 16%, var(--card)); }
.zelle.wahl { outline-color: var(--gelb); outline-width: 3px; border-radius: 10px; }
.zelle .ev { border-radius: 6px; padding: 2px 5px; }
.zelle .ev .mk { width: 6px; height: 14px; border-radius: 3px; }
.ev-termin { background: var(--bg-termin); }
.ev-arbeit { background: var(--bg-arbeit); }
.ev-ausflug { background: var(--bg-ausflug); }
.ev-hausaufgabe { background: var(--bg-hausaufgabe); }
.ev-notiz { background: var(--bg-notiz); }
@media (max-width: 759px) {
  .monat { padding: 8px 6px 4px; border-radius: 18px; }
  .zelle .ev { background: none; padding: 0; }
  .zelle .ev .mk { width: 8px; height: 8px; }
}

/* ======================================================================
   Navigation: Für-Leiste (Person) + Seitenleiste nur mit Seiten
   Farbkonzept: --pf ist die Farbe der gewählten Person
   ====================================================================== */
:root { --pf: var(--tafel2); }
:root[data-person] {
  --pf-ink: color-mix(in srgb, var(--pf) 82%, var(--ink));
  --pf-weich: color-mix(in srgb, var(--pf) 7%, var(--bg));
  --pf-karte: color-mix(in srgb, var(--pf) 12%, var(--card));
}
:root[data-person] .knopf.gelb, :root[data-person] .knopf-gelb { background: var(--pf); border-color: var(--pf); color: #fff; }
:root[data-person] .wb.an { background: var(--pf); color: #fff; }
:root[data-person] .wb.an .zeile { background: rgba(255,255,255,.88); }
:root[data-person] .wb.an .wb-leer { color: rgba(255,255,255,.85); }
:root[data-person] .pk.an, :root[data-person] .tagwahl button.an { background: var(--pf); color: #fff; }
:root[data-person] .pk.an small, :root[data-person] .tagwahl button.an small { color: rgba(255,255,255,.85); }
:root[data-person] .h1 em, :root[data-person] .h2 em { color: var(--pf-ink); }
:root[data-person] .ueber { color: var(--pf-ink); }
:root[data-person] .chip.an { background: var(--pf); border-color: var(--pf); color: #fff; }
:root[data-person] #tabbar a.an { color: #fff; text-decoration: underline; text-decoration-color: var(--pf); text-decoration-thickness: 2px; text-underline-offset: 6px; }

.fuer { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; }
.fuer-t { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fuer-pillen { display: flex; gap: 6px; background: var(--card); border-radius: 99px; padding: 5px; flex-wrap: wrap; }
.fp { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 6px; border-radius: 99px; border: 0; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; white-space: nowrap; }
.fp .av { width: 30px; height: 30px; font-size: 15px; }
.fp small { font-size: 11px; font-weight: 700; opacity: .75; }
.fp:hover { background: var(--card2); color: var(--ink); }
.fp.an { background: var(--kf, var(--strong)); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--kf, #13201C) 35%, transparent); }
.fp.alle.an { background: var(--strong); color: var(--bg); }
.fp.an .av { box-shadow: 0 0 0 2px rgba(255,255,255,.7); }

#seite .s-link.seite { position: relative; }
#seite .s-link.seite.an { background: var(--tafel-ink); color: var(--tafel); font-weight: 800; }
#seite .s-link.seite.an::before { content: ''; position: absolute; left: -16px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gelb); }
:root[data-person] #seite .s-link.seite.an::before { background: var(--pf); }

/* Lehrer auf der Startseite */
.kk-band span.frei { background: repeating-linear-gradient(45deg, var(--bg) 0 6px, var(--line2) 6px 12px); color: var(--muted); font-weight: 600; }
.kk.lehrer .kk-name { font-style: italic; }
a.kk-arbeit { text-decoration: none; }
.rot-text { color: var(--rot); }
.abholen { background: #FFF6CF; color: #13201C; border-radius: 22px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.abholen .eyebrow { color: #7A6400; }
.ab-z { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; }
.ab-z .it { font-size: 20px; }
.ab-z .pill[role=button] { cursor: pointer; }
.abholen .hint { color: #6B6550; }
.pill.gruen { background: #E3EEDA; color: #3E6A28; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .abholen { background: #3D3A22; color: #F3F5F2; } :root:not([data-theme="hell"]) .abholen .eyebrow, :root:not([data-theme="hell"]) .abholen .hint { color: #E8D57A; } }
:root[data-theme="dunkel"] .abholen { background: #3D3A22; color: #F3F5F2; }

/* Klassen & Korrekturen */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stapel { background: var(--card); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.st-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.st-chip { display: inline-flex; align-items: center; border: 0; border-radius: 99px; padding: 4px 12px; font-weight: 800; font-size: 13.5px; background: color-mix(in srgb, var(--af) 15%, var(--card)); color: color-mix(in srgb, var(--af) 80%, var(--ink)); cursor: pointer; white-space: nowrap; min-width: 110px; justify-content: center; }
.st-titel { font-family: var(--serif); font-size: 22px; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; }
.st-zahl { display: flex; align-items: baseline; gap: 8px; }
.st-zahl .serif { font-size: 48px; line-height: 1; }
.st-balken { height: 10px; border-radius: 5px; background: var(--line2); overflow: hidden; }
.st-balken i { display: block; height: 100%; background: var(--af); border-radius: 5px; transition: width .3s; }
.st-knoepfe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.st-knoepfe .grow { flex: 1; }
.st-summe { display: flex; flex-direction: column; gap: 6px; }
.st-summe .gross { font-size: 72px; }
.st-naechst { margin-top: auto; border-top: 1px solid var(--tafel-line); padding-top: 10px; display: flex; flex-direction: column; }
button.link { border: 0; background: none; padding: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.kl-karte { margin-bottom: 8px; }
.kl-z { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line2); }
.kl-z .grow { flex: 1; min-width: 0; }
.kl-r { font-size: 14px; text-align: right; }

@media (max-width: 759px) {
  .fuer { margin: 0 -18px 16px; padding: 0 18px; overflow-x: auto; scrollbar-width: none; }
  .fuer::-webkit-scrollbar { display: none; }
  .fuer-t { display: none; }
  .fuer-pillen { flex-wrap: nowrap; background: transparent; padding: 0; }
  .fp { background: var(--card); height: 40px; }
  .fp small { display: none; }
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .kl-z { flex-wrap: wrap; gap: 8px; }
  .kl-r { width: 100%; text-align: left; }
}

/* Inhaltsfläche mit abgerundeter Ecke oben links; feine Linie in der Personenfarbe */
@media (min-width: 760px) {
  body:not(.tor) #app { background: var(--tafel); }
  body:not(.tor) #view { background: var(--bg); border-top-left-radius: 28px; min-height: 100vh; border: 0 solid transparent; }
  :root[data-person] body:not(.tor) #view { background: var(--pf-weich); border-top-width: 2px; border-left-width: 2px; border-color: var(--pf); }
}
@media (max-width: 759px) {
  :root[data-person] body { background: var(--pf-weich); }
  :root[data-person] #view { box-shadow: inset 0 calc(2px + var(--safe-t)) 0 var(--pf); }
}

.tor-box .check input:checked ~ .t { text-decoration: none; color: #DCE7E2; }