/* Planungsportal Kinderstadt Haren 2027
   Gestaltung nach dem Klick-Prototyp (Artboards Main, Start, Dokument, Wuensche, Freigabe, Mobil).
   Keine Inline-Styles: Die Content-Security-Policy erlaubt nur Stile aus dieser Datei. */

/* ------------------------------------------------------------------ Schriften (selbst gehostet) */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/schriften/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/schriften/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/static/schriften/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("/static/schriften/atkinson-hyperlegible-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/schriften/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/schriften/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }

/* ------------------------------------------------------------------ Farben und Grundwerte */
:root {
  --hg: #F5F6F2;
  --weiss: #FFFFFF;
  --text: #17231C;
  --text2: #2F3D34;
  --text3: #4A5A50;
  --gruen: #2E6B3F;
  --gruen-dunkel: #1F4F2E;
  --link: #24563A;
  --hellgruen: #E6F0E8;
  --orange: #A8470B;
  --orange-dunkel: #8A3A08;
  --hellorange: #FBEBDD;
  --hellorange2: #FFF6EE;
  --orange-rahmen: #E3B48E;
  --orange-text: #3D2A1C;
  --gelb-hg: #FBF0D9;
  --gelb: #6E4700;
  --gelb-rahmen: #D9A94A;
  --gelb-rahmen-hell: #E6D3A8;
  --gelb-text: #3D2E10;
  --blau-hg: #E3ECF8;
  --blau: #1D4A85;
  --grau-hg: #ECEDEB;
  --grau: #3E4440;
  --hell-hg: #F0F1EF;
  --rahmen: #D9DED6;
  --rahmen-feld: #8A968E;
  --rahmen-knopf: #C9D0CA;
  --linie: #E8ECE7;
  --linie2: #E1E5E0;
  --rot-hg: #F3E3E0;
  --rot: #6B2A1F;
  --code-hg: #1D2620;
  --code-text: #E8EEE9;
  --schrift: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titel: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--hg); color: var(--text);
  font-family: var(--schrift); font-size: 18px; line-height: 1.55;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--link); }
a:hover { color: var(--text); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titel); font-weight: 700; margin: 0; }
h1 { font-size: 40px; line-height: 1.15; }
p { margin: 0; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.inline { display: inline; margin: 0; }
.icon { flex: 0 0 auto; }
.klein { font-size: 16px; color: var(--text3); }
.text2 { color: var(--text2); }
.text3 { color: var(--text3); }
.fett { font-weight: 700; }

.sprunglink { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--weiss); padding: 12px 16px;
  border-radius: 10px; font-weight: 700; border: 2px solid var(--gruen); }
.sprunglink:focus { top: 8px; }

/* ------------------------------------------------------------------ Kopf und Navigation */
.kopf { background: var(--weiss); border-bottom: 1px solid var(--rahmen); position: relative; }
.kopf-innen { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-height: 48px; }
.marke-icon { color: var(--gruen); }
.marke-name { font-family: var(--titel); font-weight: 700; font-size: 21px; }
.hauptnav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.hauptnav a, .menue-nav a {
  min-height: 48px; padding: 0 16px; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-weight: 700; color: var(--text2);
}
.hauptnav a:hover, .menue-nav a:hover { background: var(--hg); color: var(--text); }
.hauptnav a[aria-current="page"], .menue-nav a[aria-current="page"] { color: var(--text); background: var(--hellgruen); }
.zaehler { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--orange); color: var(--weiss);
  font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.konto { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.konto-name { font-size: 16px; color: var(--text3); }
.konto-name strong { color: var(--text); }
.knopf-abmelden {
  min-height: 44px; padding: 0 14px; border-radius: 10px; border: 2px solid var(--rahmen-knopf); background: var(--weiss);
  display: inline-flex; align-items: center; color: var(--text2); font-size: 16px; font-weight: 700; cursor: pointer;
}
.knopf-abmelden:hover { border-color: var(--rahmen-feld); color: var(--text); }
.menue-mobil { display: none; }
.menue-mobil > summary {
  list-style: none; min-height: 48px; padding: 0 14px; border: 2px solid var(--rahmen-knopf); border-radius: 10px;
  background: var(--weiss); color: var(--text); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.menue-mobil > summary::-webkit-details-marker { display: none; }
.menue-mobil[open] > summary { background: var(--hellgruen); border-color: var(--gruen); }
.menue-inhalt {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--weiss);
  border-bottom: 1px solid var(--rahmen); box-shadow: 0 8px 16px rgba(23, 35, 28, .08);
  padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 12px;
}
.menue-nav { display: flex; flex-direction: column; gap: 4px; }
.menue-nav a { display: flex; }

/* ------------------------------------------------------------------ Seitenrahmen */
.inhalt { width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 24px 64px; display: flex; flex-direction: column; gap: 40px; flex: 1 0 auto; }
.inhalt:focus { outline: none; }
.inhalt--dok { padding-top: 28px; gap: 24px; }
.inhalt--schmal { max-width: 960px; gap: 28px; }
.inhalt--freigabe { padding-top: 36px; gap: 24px; }
.inhalt--mittig { max-width: 560px; justify-content: center; align-items: stretch; gap: 24px; padding-top: 48px; padding-bottom: 48px; }
.fuss { text-align: center; font-size: 15px; color: var(--text3); padding: 24px 16px 32px; }

.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.seitenkopf-text { display: flex; flex-direction: column; gap: 8px; }
.seitenkopf-text p { color: var(--text2); max-width: 760px; }
.unterzeile { color: var(--text3); font-size: 17px; }
.kopfzeile-dok { color: var(--text3); font-size: 15px; }

.abschnitt-titel { font-size: 26px; }
.spalten { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.spalte-haupt { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.spalte-seite { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.spalte-seite--schmal { flex-basis: 240px; }

/* ------------------------------------------------------------------ Karten */
.karte { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 24px 28px; display: flex; flex-direction: column; gap: 14px; }
.karte--kompakt { padding: 24px; }
.karte--orange { border: 2px solid var(--orange-rahmen); }
.karte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.karte h2 { font-size: 23px; }
.box-titel { font-size: 22px; }
.etikett { font-size: 15px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .02em; }

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.raster--bereiche { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }

.kachel {
  text-decoration: none; color: var(--text); background: var(--weiss); border: 2px solid var(--rahmen); border-radius: 16px;
  padding: 24px; display: flex; flex-direction: column; gap: 10px; min-height: 170px;
}
.kachel:hover { border-color: var(--gruen); color: var(--text); }
.kachel .icon { color: var(--gruen); }
.kachel-titel { font-weight: 700; font-size: 21px; }
.kachel-text { color: var(--text3); font-size: 17px; }
.kachel--orange { background: var(--hellorange); border-color: var(--orange-rahmen); }
.kachel--orange:hover { border-color: var(--orange); }
.kachel--orange .icon { color: var(--orange); }
.kachel--orange .kachel-text { color: #4A3A2E; }

.bereich-kachel {
  text-decoration: none; color: var(--text); background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 14px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; min-height: 104px;
}
.bereich-kachel:hover { border-color: var(--gruen); color: var(--text); }
.bereich-kachel-titel { font-weight: 700; font-size: 19px; }
.bereich-kachel-text { color: var(--text3); font-size: 16px; }

.liste-aenderungen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.liste-aenderungen li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.liste-aenderungen .wann { font-size: 15px; color: var(--text3); }
.liste-aenderungen .was { font-size: 17px; }
.box-link { font-weight: 700; font-size: 17px; }

.meine-kurz { display: flex; flex-direction: column; gap: 6px; }
.meine-kurz .was { font-size: 17px; }
.meine-kurz .pille { align-self: flex-start; }

.so-gehts { background: var(--hellgruen); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.so-gehts h2 { font-size: 24px; }
.so-gehts ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.so-gehts li { display: flex; gap: 14px; align-items: flex-start; }
.nummer { flex: 0 0 40px; height: 40px; border-radius: 20px; background: var(--gruen); color: var(--weiss); font-weight: 700;
  display: flex; align-items: center; justify-content: center; }

/* ------------------------------------------------------------------ Knöpfe und Felder */
.knopf {
  min-height: 52px; padding: 0 20px; border-radius: 12px; border: 0; font-weight: 700; text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; line-height: 1.2; text-align: center;
}
.knopf--gruen { background: var(--gruen); color: var(--weiss); }
.knopf--gruen:hover { background: var(--gruen-dunkel); color: var(--weiss); }
.knopf--orange { background: var(--orange); color: var(--weiss); }
.knopf--orange:hover { background: var(--orange-dunkel); color: var(--weiss); }
.knopf--rahmen { background: var(--weiss); color: var(--text); border: 2px solid var(--rahmen-feld); }
.knopf--rahmen:hover { border-color: var(--text2); color: var(--text); }
.knopf--gruen-rahmen { background: var(--weiss); color: var(--link); border: 2px solid var(--gruen); }
.knopf--gruen-rahmen:hover { background: var(--hellgruen); color: var(--text); }
.knopf--gross { min-height: 56px; padding: 0 28px; font-size: 19px; }
.knopf--mittel { min-height: 48px; padding: 0 18px; border-radius: 10px; }
.knopf--klein { min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 16px; border: 2px solid var(--rahmen-knopf); background: var(--weiss); color: var(--text2); }
.knopf--klein:hover { border-color: var(--rahmen-feld); color: var(--text); }
.knopf--voll { width: 100%; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }

.feld-gruppe { display: flex; flex-direction: column; gap: 6px; }
.feld-gruppe label, .feld-label { font-weight: 700; }
.freiwillig { font-weight: 400; color: var(--text3); }
.feld {
  min-height: 52px; padding: 0 16px; border: 2px solid var(--rahmen-feld); border-radius: 10px; background: var(--weiss); color: var(--text); width: 100%;
}
textarea.feld { padding: 12px 14px; resize: vertical; min-height: 0; }
.feld:focus-visible { border-color: var(--orange); }
.hilfe { font-size: 16px; color: var(--text3); }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
.auswahl { display: flex; flex-wrap: wrap; gap: 10px; }
.auswahl label {
  min-height: 48px; padding: 0 16px; border: 2px solid var(--rahmen-knopf); border-radius: 10px; background: var(--weiss);
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 400;
}
.auswahl label:has(input:checked) { border-color: var(--gruen); background: var(--hellgruen); }
.auswahl input[type="radio"], .auswahl input[type="checkbox"], .option input, .kz input { width: 20px; height: 20px; margin: 0; flex: 0 0 20px; accent-color: var(--gruen); }

.meldung { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 12px; }
.meldung .icon { margin-top: 2px; }
.meldung--ok { background: var(--hellgruen); color: var(--text); }
.meldung--ok .icon { color: var(--gruen); }
.meldung--fehler { background: var(--hellorange); color: var(--orange-text); border: 2px solid var(--orange); }
.meldung--fehler .icon { color: var(--orange); }

/* ------------------------------------------------------------------ Status-Pillen */
.pille { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.pille--klein { padding: 4px 12px; font-size: 15px; }
.pille--mini { padding: 3px 10px; font-size: 14px; gap: 5px; }
.pille--gelb { background: var(--gelb-hg); color: var(--gelb); }
.pille--orange { background: var(--hellorange); color: var(--orange-dunkel); }
.pille--gruen { background: var(--hellgruen); color: var(--gruen-dunkel); }
.pille--grau { background: var(--grau-hg); color: var(--grau); }
.pille--blau { background: var(--blau-hg); color: var(--blau); }
.pille--hell { background: var(--hell-hg); color: var(--grau); }

/* ------------------------------------------------------------------ Anmeldung */
.anmelden-seite { min-height: 100vh; }
.anmelden { flex: 1 0 auto; padding: 48px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.anmelden-marke { display: flex; align-items: center; gap: 12px; }
.anmelden-marke .icon { color: var(--gruen); }
.anmelden-marke-text { display: flex; flex-direction: column; }
.anmelden-titel { font-family: var(--titel); font-weight: 700; font-size: 26px; line-height: 1.1; }
.anmelden-unter { font-size: 16px; color: var(--text3); }
.anmelden-karte { width: 100%; max-width: 480px; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.anmelden-karte h1 { font-size: 30px; }
.anmelden-karte .einleitung { color: var(--text2); }
.anmelden-karte .knopf { width: 100%; }
.anmelden-fuss { font-size: 15px; color: var(--text3); text-align: center; max-width: 480px; }

/* ------------------------------------------------------------------ Suche */
.suchform { display: flex; flex-wrap: wrap; gap: 12px; max-width: 760px; }
.suchform .feld { flex: 1 1 320px; width: auto; min-height: 56px; padding: 0 18px; border-radius: 12px; }
.suchform .knopf { min-height: 56px; padding: 0 24px; }
.treffer { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.treffer li { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 14px; padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.treffer a { font-weight: 700; font-size: 19px; }
.treffer mark { background: var(--gelb-hg); color: var(--text); padding: 0 2px; border-radius: 3px; }

/* ------------------------------------------------------------------ Dokument */
.brotkrumen { font-size: 16px; color: var(--text3); }
.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.brotkrumen li { display: inline-flex; gap: 8px; }
.brotkrumen [aria-current] { color: var(--text3); }
.hinweis-orange { display: flex; gap: 14px; align-items: flex-start; background: var(--hellorange); border-radius: 14px; padding: 16px 20px; }
.hinweis-orange .icon { color: var(--orange); margin-top: 2px; }
.hinweis-orange p { color: var(--orange-text); }

.seitenleiste > summary { display: none; }
.seitenleiste-inhalt { display: flex; flex-direction: column; gap: 24px; }
.seitennav { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.seitennav .etikett { padding: 0 12px 6px; }
.seitennav a { min-height: 44px; padding: 0 12px; border-radius: 8px; display: flex; align-items: center; text-decoration: none; color: var(--text2); }
.seitennav a:hover { background: var(--hg); color: var(--text); }
.seitennav a[aria-current="page"] { font-weight: 700; color: var(--text); background: var(--hellgruen); }
.abschnittnav { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.abschnittnav .etikett { padding: 0 12px 6px; }
.abschnittnav a { min-height: 40px; padding: 4px 12px; display: flex; align-items: center; text-decoration: none; color: var(--text2); font-size: 17px; border-radius: 8px; }
.abschnittnav a:hover { background: var(--weiss); color: var(--text); }

.abschnitt { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 16px; }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.abschnitt-kopf--vorspann { justify-content: flex-end; }

/* Markdown-Inhalt */
.md { color: var(--text2); display: flex; flex-direction: column; gap: 12px; overflow-wrap: anywhere; }
.md > * { margin: 0; }
.md h3 { font-size: 21px; color: var(--text); margin-top: 8px; }
.md h4, .md h5, .md h6 { font-family: var(--schrift); font-size: 18px; color: var(--text); margin-top: 4px; }
.md ul, .md ol { padding-left: 24px; display: flex; flex-direction: column; gap: 6px; }
.md li > ul, .md li > ol { margin-top: 6px; }
.md strong { color: var(--text); }
.md blockquote { margin: 0; padding: 12px 18px; border-left: 4px solid var(--rahmen); background: var(--hg); border-radius: 0 12px 12px 0; }
.md code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; background: var(--hg); padding: 1px 5px; border-radius: 5px; }
.md pre { background: var(--hg); padding: 14px 16px; border-radius: 12px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md hr { border: 0; border-top: 1px solid var(--linie); width: 100%; }
.md .tabelle { overflow-x: auto; border-top: 1px solid var(--linie); }
.md table { border-collapse: collapse; width: 100%; font-size: 17px; }
.md th, .md td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--linie);
  min-width: 7.5em; overflow-wrap: break-word; hyphens: auto; }
.md th:first-child, .md td:first-child { min-width: 10em; }
.md th { color: var(--text); font-weight: 700; }
.md td:first-child { font-weight: 700; color: var(--text); }
.md .task-list-item { list-style: none; margin-left: -24px; }
.md .task-list-item input { margin-right: 8px; }
.markierung { font-size: .88em; font-weight: 700; padding: 1px 8px; border-radius: 6px; white-space: normal; }
.markierung-offen { background: var(--gelb-hg); color: var(--gelb); }
.markierung-annahme { background: var(--blau-hg); color: var(--blau); }
.link-ohne-ziel { color: var(--text2); }
.bild-ersatz { color: var(--text3); font-style: italic; }

/* Wunsch-Formular */
.wunsch-form { margin-top: 8px; padding: 24px; border-radius: 14px; background: var(--hellorange2); border: 2px solid var(--orange); display: flex; flex-direction: column; gap: 18px; }
.wunsch-form h3 { font-size: 22px; }
.wunsch-form .einleitung { color: var(--orange-text); font-size: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 12px; border-radius: 8px; background: var(--weiss); border: 1px solid var(--orange-rahmen); font-size: 15px; }

.danke { margin-top: 8px; padding: 20px 24px; border-radius: 14px; background: var(--hellgruen); border: 2px solid var(--gruen); display: flex; gap: 16px; align-items: flex-start; }
.danke > .icon { color: var(--gruen); }
.danke-text { display: flex; flex-direction: column; gap: 6px; }
.danke-text strong { font-size: 20px; }
.danke-text span { color: var(--text2); }

/* Bereichsliste */
.gruppe { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; }
.gruppe h2 { font-size: 24px; }
.dokliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dokliste a { text-decoration: none; color: var(--text); background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 14px; padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; min-height: 88px; height: 100%; }
.dokliste a:hover { border-color: var(--gruen); }
.dokliste .name { font-weight: 700; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.dokliste .name .icon { color: var(--gruen); }
.dokliste .info { color: var(--text3); font-size: 16px; }

/* ------------------------------------------------------------------ Meine Wünsche */
.fortschritt { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.fortschritt li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; font-size: 16px; }
.schritt--fertig { background: var(--hellgruen); }
.schritt--fertig .icon { color: var(--gruen); }
.schritt--aktuell { background: var(--gelb-hg); font-weight: 700; }
.schritt--aktuell .icon { color: var(--gelb); }
.schritt--offen { background: var(--hell-hg); color: var(--text3); }
.frage-box { background: var(--hellorange2); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.begruendung { display: flex; flex-direction: column; gap: 6px; }
.begruendung span, .begruendung p { color: var(--text2); }
.geaendert ul { margin: 0; padding-left: 24px; color: var(--text2); }
.legende dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; }
.legende dt { font-weight: 700; }
.legende dd { margin: 0; color: var(--text2); font-size: 17px; }
.legende h2 { font-size: 21px; }

/* <details> als Knopf (ohne JavaScript) */
.aufklapp > summary { list-style: none; cursor: pointer; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp[open] > summary { margin-bottom: 12px; }
.aufklapp-inhalt { display: flex; flex-direction: column; gap: 10px; }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; border-top: 1px solid var(--linie); align-items: flex-start; }
.aktionen > details[open] { flex: 1 1 100%; }
.aktionen > form { margin: 0; }
.verlauf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.verlauf-liste li { border-left: 3px solid var(--rahmen); padding: 4px 0 4px 14px; display: flex; flex-direction: column; gap: 2px; }
.verlauf-liste .wer { font-size: 15px; color: var(--text3); }
.verlauf-liste .text { white-space: pre-line; }

/* ------------------------------------------------------------------ Freigabe */
.wunschliste { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.wunschliste-gruppe { display: flex; flex-direction: column; gap: 10px; }
.wunsch-link { text-decoration: none; color: var(--text); background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.wunsch-link:hover { border-color: var(--gruen); color: var(--text); }
.wunsch-link[aria-current="true"] { border: 2px solid var(--gruen); }
.wunsch-link strong { font-size: 18px; }
.wunsch-link .wann { font-size: 15px; color: var(--text3); }
.wunsch-link .pille { align-self: flex-start; }
.freigabe-detail { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.zitat { margin: 0; padding: 14px 18px; border-radius: 12px; background: var(--hg); display: flex; flex-direction: column; gap: 6px; }
.zitat .warum { color: var(--text3); font-size: 17px; }
.zitat span { white-space: pre-line; }
.titel-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.entscheide { background: var(--gelb-hg); border: 2px solid var(--gelb-rahmen); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.entscheide-kopf { display: flex; gap: 12px; align-items: flex-start; }
.entscheide-kopf .icon { color: var(--gelb); margin-top: 2px; }
.entscheide-kopf span { color: var(--gelb-text); }
.optionen { display: flex; flex-direction: column; gap: 8px; }
.option { min-height: 48px; padding: 10px 14px; border-radius: 10px; background: var(--weiss); border: 2px solid var(--gelb-rahmen-hell); display: flex; align-items: center; gap: 12px; cursor: pointer; }
.option:has(input:checked) { border-color: var(--gelb-rahmen); }
.stellen { display: flex; flex-direction: column; gap: 10px; }
.stellen h3, .diff-bereich h3 { font-size: 20px; font-family: var(--schrift); }
.stelle { border: 1px solid var(--linie2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.stelle-ort { font-weight: 700; }
.vorher-nachher { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 17px; }
.vorher { padding: 4px 10px; border-radius: 8px; background: var(--rot-hg); color: var(--rot); }
.nachher { padding: 4px 10px; border-radius: 8px; background: var(--hellgruen); color: #17402A; }
.vorher-nachher .pfeil { color: var(--text3); }
.verborgen-hinweis { color: var(--text3); font-size: 16px; font-style: italic; }
.diff-bereich > summary {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--rahmen-knopf);
  border-radius: 10px; background: var(--weiss); color: var(--text2); font-weight: 700; font-size: 16px; cursor: pointer; list-style: none;
}
.diff-bereich > summary::-webkit-details-marker { display: none; }
.diff-bereich[open] > summary { margin-bottom: 10px; }
.diff-bereich .zu { display: none; }
.diff-bereich[open] .zu { display: inline; }
.diff-bereich[open] .auf { display: none; }
.diff { margin: 0; padding: 16px; border-radius: 12px; background: var(--code-hg); color: var(--code-text); font-size: 14px; line-height: 1.6;
  white-space: pre-wrap; overflow-x: auto; font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.diff .d-plus { color: #9BE3AE; }
.diff .d-minus { color: #F5A99B; }
.diff .d-bereich { color: #9DC2F0; }
.diff .d-kopf { color: #C9D0CA; font-weight: 700; }
.diff-bereich > p { margin-top: 10px; }
.entscheide .option { font-weight: 400; }
.karte > .aktionen { border-top: 0; padding-top: 0; }
summary.box-link { color: var(--link); text-decoration: underline; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
summary.box-link:hover { color: var(--text); }
.klein-link { font-size: 16px; }
.anmelden-hinweise { display: flex; flex-direction: column; gap: 6px; }
.zustaendigkeit { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.zustaendigkeit dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.zustaendigkeit dt { font-weight: 700; }
.zustaendigkeit dd { margin: 0; color: var(--text2); }
.rollen-stand { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kz-liste { display: flex; flex-direction: column; gap: 10px; }
.kz { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 2px solid var(--rahmen-knopf); border-radius: 10px; background: var(--weiss); cursor: pointer; }
.kz:has(input:checked) { border-color: var(--gruen); background: #F6FAF6; }
.kz input { margin-top: 3px; }
.kz-text { display: flex; flex-direction: column; gap: 2px; }
.kz-text .beschreibung { font-size: 16px; color: var(--text2); }
.kz-text .claude { font-size: 16px; color: var(--blau); }
.vertretung-hinweis { font-size: 16px; color: var(--text3); }

/* ------------------------------------------------------------------ Tabellen (Verwaltung, Listen) */
.tabelle-einfach { overflow-x: auto; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 14px; }
.tabelle-einfach table { border-collapse: collapse; width: 100%; font-size: 16px; }
.tabelle-einfach th, .tabelle-einfach td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--linie); }
.tabelle-einfach th { background: var(--hg); font-weight: 700; }
.konto-zeile { display: flex; flex-direction: column; gap: 10px; }
.konto-kopf { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.konto-kopf h3 { font-family: var(--schrift); font-size: 19px; }
.raster-auswahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.raster-auswahl label { min-height: 44px; padding: 6px 12px; border: 2px solid var(--rahmen-knopf); border-radius: 10px; display: flex; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; background: var(--weiss); }
.raster-auswahl input { width: 20px; height: 20px; margin: 0; flex: 0 0 20px; accent-color: var(--gruen); }
.passwort-anzeige { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 26px; letter-spacing: .04em; background: var(--hg); border: 2px dashed var(--gruen); border-radius: 12px; padding: 16px 20px; user-select: all; overflow-wrap: anywhere; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filter a { min-height: 44px; padding: 0 16px; border-radius: 10px; display: inline-flex; align-items: center; text-decoration: none; font-weight: 700; color: var(--text2); border: 2px solid var(--rahmen-knopf); background: var(--weiss); }
.filter a[aria-current="page"] { background: var(--hellgruen); border-color: var(--gruen); color: var(--text); }

/* ------------------------------------------------------------------ Handy (Layout wie Artboard „Mobil“) */
@media (max-width: 760px) {
  .kopf-innen { padding: 8px 16px; justify-content: space-between; flex-wrap: nowrap; gap: 12px; }
  .marke { gap: 8px; }
  .marke-icon { width: 28px; height: 28px; }
  .marke-name { font-size: 19px; }
  .hauptnav, .konto { display: none; }
  .menue-mobil { display: block; }
  .inhalt { padding: 20px 16px 32px; gap: 20px; }
  .inhalt--dok { padding-top: 16px; gap: 16px; }
  h1 { font-size: 28px; }
  .abschnitt-titel { font-size: 24px; }
  .karte { padding: 20px; }
  .abschnitt { padding: 20px 16px; }
  .abschnitt-kopf { flex-direction: column; align-items: stretch; }
  .abschnitt-kopf .knopf { width: 100%; min-height: 56px; font-size: 19px; border-radius: 12px; }
  .seitenkopf .knopf { width: 100%; }
  .seitenleiste > summary { display: flex; min-height: 48px; align-items: center; gap: 8px; padding: 0 14px; border: 2px solid var(--rahmen-knopf);
    border-radius: 10px; background: var(--weiss); font-weight: 700; cursor: pointer; list-style: none; }
  .seitenleiste > summary::-webkit-details-marker { display: none; }
  .seitenleiste[open] > summary { margin-bottom: 12px; }
  .spalten { gap: 20px; }
  .wunsch-form { padding: 16px; }
  .wunsch-form .knoepfe .knopf { width: 100%; }
  .auswahl { flex-direction: column; }
  .auswahl label { width: 100%; }
  .danke { flex-direction: column; align-items: center; text-align: center; }
  .danke .knoepfe .knopf { width: 100%; }
  .so-gehts { padding: 20px; }
  .kachel { min-height: 0; }
  .anmelden { padding: 32px 16px; }
  .anmelden-karte { padding: 24px 20px; }
  .aktionen > form, .aktionen > details, .aktionen .knopf { width: 100%; }
  .aktionen > details > summary { width: 100%; }
}

/* ------------------------------------------------------------------ Ergänzungen */
.block { display: flex; flex-direction: column; gap: 16px; }
.anmelden-karte-form { display: flex; flex-direction: column; gap: 20px; }
.seitenkopf-text--eng { gap: 6px; }
.text-umbruch { white-space: pre-line; }
.geaendert-liste { margin: 0; padding-left: 24px; color: var(--text2); }
.text-seite h1 { font-size: 34px; }
.text-seite h2 { font-size: 24px; margin-top: 12px; color: var(--text); }
.text-seite h3 { font-size: 20px; }
.lead { color: var(--text2); max-width: 760px; }
.spalte-haupt.block { gap: 16px; }
.wunsch-form, .danke { scroll-margin-top: 16px; }
.wunschliste { gap: 24px; }
@media (max-width: 760px) {
  .suchform .knopf { width: 100%; }
  .abschnitt .wunsch-form { margin-left: -6px; margin-right: -6px; }
}