:root {
  --grund: #f6f4ef; --flaeche: #ffffff; --text: #22272b; --leise: #5f676d; --linie: #e3dfd6;
  --dunkel: #2f4a3a; --haupt: #2f6b4f; --haupt-text: #ffffff;
  --gruen: #dff2e1; --gruen-k: #2e7d4f; --blau: #dcebf7; --blau-k: #2c6496; --gelb: #fbf3d0; --gelb-k: #8a6a00;
  --lila: #ebe3f5; --lila-k: #6a4b9a; --rosa: #f7e1ea; --rosa-k: #9a3f63; --grau: #ecebe8; --grau-k: #5f676d;
  --ampel-gruen: #2e9e5b; --ampel-gelb: #e0a800; --ampel-rot: #d64545; --ampel-grau: #a5a9ad;
  --rund: 14px; --schatten: 0 1px 2px rgba(0,0,0,.05), 0 2px 10px rgba(0,0,0,.04);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); line-height: 1.45; -webkit-text-size-adjust: 100%; }
h1 { font-size: 1.6rem; margin: 0 0 .2rem; }
h2 { font-size: 1.1rem; margin: 0; }
h3 { font-size: 1rem; margin: 0 0 .3rem; }
a { color: var(--haupt); }
.leise { color: var(--leise); font-size: .92rem; }
[hidden] { display: none !important; }

/* Gerüst: links Leiste (PC), unten Leiste (Handy) */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.leiste { background: var(--dunkel); color: #fff; padding: 18px 10px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; }
.leiste .marke { font-weight: 700; font-size: 1.2rem; padding: 4px 12px 16px; letter-spacing: .02em; }
.leiste a { color: #e8efe9; text-decoration: none; padding: 10px 12px; border-radius: 10px; display: flex; gap: 10px;
  align-items: center; position: relative; }
.leiste a:hover { background: rgba(255,255,255,.08); }
.leiste a.aktiv { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.leiste .sym { width: 1.4em; text-align: center; font-size: 1.1rem; }
.zaehler { background: var(--ampel-rot); color: #fff; border-radius: 99px; font-size: .72rem; padding: 0 6px; margin-left: auto; }
.inhalt { padding: 28px 32px 60px; max-width: 1180px; width: 100%; min-width: 0; outline: none; }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .leiste { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; flex-direction: row; padding: 4px 4px
    calc(4px + env(safe-area-inset-bottom)); z-index: 20; justify-content: space-around; gap: 0; }
  .leiste .marke { display: none; }
  .leiste a { flex-direction: column; gap: 0; font-size: .7rem; padding: 6px 4px; flex: 1; text-align: center; min-height: 52px;
    justify-content: center; }
  .leiste .sym { font-size: 1.25rem; width: auto; }
  .zaehler { position: absolute; top: 2px; right: 18%; margin: 0; }
  .inhalt { padding: 18px 16px 96px; }
  h1 { font-size: 1.35rem; }
}

/* Bausteine */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 16px; box-shadow: var(--schatten); }
.abschnitt { margin-top: 26px; }
.abschnitt-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.abschnitt-kopf .leise { flex: 1; min-width: 200px; }
.raster { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.liste { display: flex; flex-direction: column; gap: 8px; }
.zeile { display: flex; align-items: center; gap: 12px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 12px; padding: 10px 12px; }
.zeile .haupt { flex: 1; min-width: 0; }
.zeile .titel { font-weight: 600; overflow-wrap: anywhere; }
.zeile .knoepfe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.zeile.vorbei { opacity: .62; }
.zeile.laeuft { border-color: var(--haupt); box-shadow: 0 0 0 2px rgba(47,107,79,.18); }
.uhr { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 92px; color: var(--leise); }
@media (max-width: 760px) {
  .zeile { flex-wrap: wrap; }
  .zeile .knoepfe { width: 100%; justify-content: flex-start; }
  .uhr { min-width: 0; }
}

.knopf { font: inherit; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); border-radius: 10px;
  padding: 8px 14px; cursor: pointer; min-height: 40px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.knopf:hover { border-color: #c9c3b6; }
.knopf.haupt { background: var(--haupt); border-color: var(--haupt); color: var(--haupt-text); font-weight: 600; }
.knopf.klein { padding: 4px 10px; min-height: 34px; font-size: .9rem; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.haken { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #b9b3a7; background: #fff; cursor: pointer; flex: none; }
.haken:hover { border-color: var(--haupt); background: var(--gruen); }

.chip { display: inline-block; font-size: .78rem; padding: 1px 8px; border-radius: 99px; background: var(--grau); color: var(--grau-k); }
.f-gruen { background: var(--gruen); color: var(--gruen-k); } .f-blau { background: var(--blau); color: var(--blau-k); }
.f-gelb { background: var(--gelb); color: var(--gelb-k); } .f-lila { background: var(--lila); color: var(--lila-k); }
.f-rosa { background: var(--rosa); color: var(--rosa-k); } .f-grau { background: var(--grau); color: var(--grau-k); }
.rand-gruen { border-left: 5px solid var(--gruen-k); } .rand-blau { border-left: 5px solid var(--blau-k); }
.rand-gelb { border-left: 5px solid var(--gelb-k); } .rand-lila { border-left: 5px solid var(--lila-k); }
.rand-rosa { border-left: 5px solid var(--rosa-k); } .rand-grau { border-left: 5px solid var(--grau-k); }

.ampel { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.a-gruen { background: var(--ampel-gruen); } .a-gelb { background: var(--ampel-gelb); } .a-rot { background: var(--ampel-rot); }
.a-grau { background: var(--ampel-grau); }

/* Lage */
.kopf-lage .satz { font-size: 1.08rem; margin: .5rem 0 0; }
.bereich-karte { border: none; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
.bereich-karte .oben { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bereich-karte .wert { font-size: 1.7rem; font-weight: 700; margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.bereich-karte .kennzahl { font-size: .9rem; opacity: .85; }
.bereich-karte .unten { font-size: .85rem; margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; opacity: .9; }
.warnung { display: flex; gap: 10px; align-items: center; }
.ziele { width: 100%; border-collapse: collapse; background: var(--flaeche); border-radius: var(--rund); overflow: hidden; border: 1px solid var(--linie); }
.ziele th, .ziele td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--linie); font-variant-numeric: tabular-nums; }
.ziele th:first-child, .ziele td:first-child { text-align: left; }
.ziele th { font-size: .82rem; color: var(--leise); font-weight: 600; background: #faf9f6; }
.ziele tr:last-child td { border-bottom: none; }
@media (max-width: 760px) {
  .ziele thead { display: none; }
  .ziele, .ziele tbody, .ziele tr, .ziele td { display: block; width: 100%; }
  .ziele tr { border-bottom: 1px solid var(--linie); padding: 8px 0; }
  .ziele td { border: none; padding: 2px 12px; text-align: left; }
  .ziele td[data-k]::before { content: attr(data-k) ": "; color: var(--leise); font-size: .85rem; }
}

/* Nachbereitung */
.nachbereitung textarea { width: 100%; min-height: 84px; font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linie); margin: 8px 0; }
.nachbereitung .knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.punkt { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px dashed var(--linie); }
.punkt span { flex: 1; }

/* Entscheidungen */
.optionen { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 10px 0; }
.option { border: 1px solid var(--linie); border-radius: 12px; padding: 12px; background: #fff; }
.option.empfohlen { border-color: var(--haupt); box-shadow: 0 0 0 2px rgba(47,107,79,.15); }
.option dl { margin: 6px 0 10px; font-size: .9rem; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.option dt { color: var(--leise); }
.option dd { margin: 0; }
.luecke { background: var(--gelb); color: var(--gelb-k); border-radius: 10px; padding: 8px 12px; font-size: .9rem; }

/* Formulare, Fenster, Meldung */
label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--leise); }
input, select, textarea { font: inherit; color: var(--text); padding: 9px 10px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; min-height: 42px; }
.formular { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.formular .breit { grid-column: 1 / -1; }
.formular .check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.formular .check input { min-height: 0; width: 20px; height: 20px; }
@media (max-width: 560px) { .formular { grid-template-columns: 1fr; } }
.fenster { border: none; border-radius: 16px; padding: 0; width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 40px); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.fenster::backdrop { background: rgba(20,24,22,.45); }
.fenster > div { padding: 20px; }
.fenster .fuss { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.hilfe { background: #faf9f6; border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; font-size: .92rem; }
.hilfe dt { font-weight: 600; } .hilfe dd { margin: 0 0 6px; }
.meldung { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--dunkel); color: #fff;
  padding: 10px 18px; border-radius: 99px; z-index: 50; box-shadow: var(--schatten); max-width: calc(100vw - 32px); }
.meldung.fehler { background: var(--ampel-rot); }
@media (max-width: 760px) { .meldung { bottom: 84px; } }
.fehler { color: var(--ampel-rot); }
.leer { color: var(--leise); padding: 12px; border: 1px dashed var(--linie); border-radius: 12px; text-align: center; }
.schalter { display: flex; flex-direction: row; align-items: center; gap: 10px; color: var(--text); }
.schalter input { width: 22px; height: 22px; min-height: 0; }

/* Anmeldung */
.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--dunkel); }
.anmelde-karte { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; }

/* Reiter, Vorhaben */
.reiter { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.reiter a { font-size: 1.35rem; font-weight: 700; text-decoration: none; color: var(--leise); padding: 2px 10px 6px; border-bottom: 3px solid transparent; }
.reiter a.aktiv { color: var(--text); border-color: var(--haupt); }
@media (max-width: 760px) { .reiter a { font-size: 1.05rem; } }
.balken { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: none; border-radius: 99px;
  background: var(--grau); overflow: hidden; margin: 8px 0 4px; color: var(--ampel-gruen); }
.balken::-webkit-progress-bar { background: var(--grau); border-radius: 99px; }
.balken::-webkit-progress-value { background: var(--ampel-gruen); border-radius: 99px; }
.balken::-moz-progress-bar { background: var(--ampel-gruen); border-radius: 99px; }
.filter { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mit-abstand { margin-top: 12px; }
.zeitknoepfe { display: inline-flex; gap: 6px; margin-left: 8px; flex-wrap: wrap; }
.vorhaben-kachel { text-decoration: none; color: inherit; display: block; }
.vorhaben-kachel .oben, .vorhaben summary .oben { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.vorhaben summary { cursor: pointer; list-style: none; }
.vorhaben summary::-webkit-details-marker { display: none; }
.vorhaben h4 { margin: 16px 0 6px; font-size: .9rem; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; }
.vorhaben .fuss { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
form.inline { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
form.inline input[name=titel] { flex: 1; min-width: 180px; }
.zeile-knopf { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.zeile-knopf:hover { border-color: #c9c3b6; }
.abo-zeile { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.abo-zeile input { flex: 1; min-width: 200px; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.schritte { margin: 8px 0; padding-left: 20px; } .schritte li { margin: 4px 0; }
.knoepfe-reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.zeile.erledigt { opacity: .6; } .zeile.erledigt .haupt { text-decoration: line-through; }
.haken.voll { display: grid; place-items: center; background: var(--gruen); border-color: var(--gruen-k); color: var(--gruen-k); font-size: .8rem; }
tr.klickbar { cursor: pointer; } tr.klickbar:hover td { background: #faf9f6; }

/* KI-Assistent und „Wer ist dabei?“ */
.knopf.ki { border-color: var(--lila-k); }
.ki-gesehen { white-space: pre-wrap; word-break: break-word; font-size: .8rem; max-height: 14rem; overflow: auto;
  background: var(--grau); padding: .5rem; border-radius: 6px; }
fieldset.dabei { border: 1px solid var(--linie); border-radius: 8px; padding: .4rem .7rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
fieldset.dabei legend { font-size: .85rem; padding: 0 .3rem; }

/* Familie: Einkaufsliste und Stundenplan */
.zeile-form { display: flex; gap: 8px; margin-bottom: 10px; }
.zeile-form input { flex: 1; min-width: 0; }
label.zeile.einkauf { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; cursor: pointer;
  text-align: left; padding: 10px 14px; margin: 0; }
.zeile.einkauf input { width: 22px; height: 22px; flex: none; }
.zeile.einkauf.erledigt .haupt { text-decoration: line-through; color: var(--leise); }
.tabelle-roll { overflow-x: auto; }
table.stundenplan { border-collapse: collapse; width: 100%; min-width: 320px; background: var(--flaeche); border-radius: var(--rund); }
table.stundenplan th, table.stundenplan td { border: 1px solid var(--linie); padding: 0; text-align: center; font-size: .85rem; }
table.stundenplan th { padding: 6px 4px; color: var(--leise); font-weight: 600; }
table.stundenplan .heute { background: var(--gelb); }
table.stundenplan .zelle { all: unset; display: block; box-sizing: border-box; width: 100%; min-height: 36px; padding: 8px 2px; cursor: pointer; }
table.stundenplan .zelle:focus-visible { outline: 2px solid var(--haupt); }

/* Rückmelde-Seite für Delegierte (/r/<schlüssel>) */
.r-seite { padding: 16px; }
.r-inhalt { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; }
.r-auftrag { white-space: pre-wrap; font-size: 1.05rem; background: var(--gelb); padding: 12px; border-radius: 10px; }
.r-fuss { text-align: center; }

/* Scannen */
.foto-knopf { text-align: center; font-size: 1.1rem; padding: 16px; cursor: pointer; }
.scan-vorschau { display: flex; gap: 8px; flex-wrap: wrap; }
.scan-vorschau .seite { all: unset; cursor: pointer; border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; width: 72px; height: 96px; }
.scan-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Wochenrückblick und Einstellungen */
.raster.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.raster.zahlen .wert { font-size: 1.8rem; font-weight: 700; }
.schalter-liste { display: grid; gap: 6px; }
.reiter button { all: unset; cursor: pointer; font-weight: 600; color: var(--leise); padding: 4px 12px 6px; border-bottom: 3px solid transparent; }
.reiter button.aktiv { color: var(--text); border-color: var(--haupt); }

/* Stundenplan: Zeiten und Pausen */
table.stundenplan .zelle.stunde { font-weight: 600; color: var(--text); padding: 6px 4px; }
table.stundenplan .zeit { display: block; font-weight: 400; font-size: .72rem; color: var(--leise); line-height: 1.2; }
table.stundenplan tr.pause td, table.stundenplan tr.pause th { background: var(--grau); color: var(--leise); font-size: .78rem; padding: 3px 6px; text-align: center; }
.schule-heute { margin: 0 0 14px; }
table.stundenplan tr.pause .leise { font-size: inherit; }

/* Termin-Kategorien */
.kat-zeile { flex-wrap: wrap; }
.kat-zeile input[name=name] { flex: 1 1 140px; min-width: 0; }
.kat-zeile select { flex: 0 0 auto; }
.chip.kat { font-weight: 600; }
label.kat-wahl { flex-direction: row; align-items: center; gap: 6px; }