/* Rathausplatz – Gestaltung für die Menschen im Ort. Markenhandbuch: docs/marke/MARKE.md
   Leitbild: so lesbar wie die Dorfzeitung, so einladend wie der Platz vor dem Rathaus.
   Farben: Pflaster (Grund), Schiefer (Schrift), Petrol (Marke), Laterne (Einladung zum Mitmachen).
   Jede Kommune darf eine eigene Akzentfarbe setzen (--k-farbe aus dem Profil); ohne sie gilt Petrol. */
:root {
  --papier: #f4f1eb; --blatt: #fffdf9; --blatt-2: #e7e2d8; --tinte: #1c2b30; --tinte-2: #46565b; --leise: #535f63;
  --linie: #d8d2c7; --linie-2: #bdb5a8; --rahmen: #6e787b;
  --marke: #0f4c5c; --akzent: var(--k-farbe, #0f4c5c); --akzent-tinte: #ffffff; --akzent-hauch: color-mix(in srgb, var(--akzent) 12%, var(--blatt));
  --sonne: #e8a33d; --sonne-hauch: #fbebd0; --sonne-tinte: #6a4300;
  --gut: #1f6b3f; --gut-hauch: #dcefe3; --achtung: #8a5a00; --achtung-hauch: #f6ead2; --rot: #a8392a;
  --anzeige: "Literata", Georgia, "Times New Roman", serif;
  --text: "Atkinson Hyperlegible", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 14px; --r-s: 8px; --schatten: 0 1px 0 rgba(28,43,48,.05), 0 10px 26px -16px rgba(28,43,48,.3);
  --schrift: 1.125rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --papier: #111a1d; --blatt: #182327; --blatt-2: #1f2b2f; --tinte: #f4f1eb; --tinte-2: #c3cdcf; --leise: #9aa9ad;
  --linie: #2a373b; --linie-2: #3d4b50; --rahmen: #7f8c90; --marke: #8fc9d6;
  --akzent: color-mix(in srgb, var(--k-farbe, #0f4c5c) 40%, #cfeaf1); --akzent-tinte: #06161c;
  --akzent-hauch: color-mix(in srgb, var(--akzent) 16%, var(--blatt));
  --sonne: #e8a33d; --sonne-hauch: rgba(232,163,61,.16); --sonne-tinte: #f3cf8f;
  --gut: #63c08a; --gut-hauch: rgba(99,192,138,.15); --achtung: #e0b05a; --achtung-hauch: rgba(224,176,90,.15); --rot: #ee8270;
  --schatten: 0 1px 0 rgba(0,0,0,.3), 0 12px 28px -16px rgba(0,0,0,.75); color-scheme: dark; } }
:root[data-theme="dark"] {
  --papier: #111a1d; --blatt: #182327; --blatt-2: #1f2b2f; --tinte: #f4f1eb; --tinte-2: #c3cdcf; --leise: #9aa9ad;
  --linie: #2a373b; --linie-2: #3d4b50; --rahmen: #7f8c90; --marke: #8fc9d6;
  --akzent: color-mix(in srgb, var(--k-farbe, #0f4c5c) 40%, #cfeaf1); --akzent-tinte: #06161c;
  --akzent-hauch: color-mix(in srgb, var(--akzent) 16%, var(--blatt));
  --sonne: #e8a33d; --sonne-hauch: rgba(232,163,61,.16); --sonne-tinte: #f3cf8f;
  --gut: #63c08a; --gut-hauch: rgba(99,192,138,.15); --achtung: #e0b05a; --achtung-hauch: rgba(224,176,90,.15); --rot: #ee8270;
  --schatten: 0 1px 0 rgba(0,0,0,.3), 0 12px 28px -16px rgba(0,0,0,.75); color-scheme: dark; }
html.gross { --schrift: 1.3rem; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: var(--schrift)/1.6 var(--text); -webkit-font-smoothing: antialiased; }
h2.wie-h3 { font-size: 1.17em; }
h1, h2, h3 { font-family: var(--anzeige); line-height: 1.15; margin: 0; text-wrap: balance; font-weight: 700; letter-spacing: -.01em; }
h4 { margin: 0; }
p { margin: 0; }
a { color: var(--akzent); text-underline-offset: 3px; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.klein { font-size: .875rem; color: var(--leise); }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rahmen { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Kopf */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--blatt); }
.sprung { position: absolute; left: 12px; top: -80px; background: var(--tinte); color: var(--blatt); padding: 10px 14px; border-radius: 8px; z-index: 50; }
.sprung:focus { top: 10px; }
.kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--blatt); border-bottom: 1px solid var(--linie); }
.kopf .rahmen { display: flex; align-items: center; gap: 12px 20px; min-height: 68px; flex-wrap: wrap; }
.marke { display: flex; flex-direction: column; text-decoration: none; color: var(--tinte); line-height: 1.1; padding: 8px 0; }
.marke b { font-family: var(--anzeige); font-size: 1.45rem; }
.marke-text > span { font-size: .8rem; color: var(--leise); letter-spacing: .02em; }
.haupt-nav { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
.haupt-nav a { padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--tinte-2); font-weight: 700; font-size: 1rem; }
.haupt-nav a:hover { background: var(--blatt-2); color: var(--tinte); }
.haupt-nav a[aria-current="page"] { color: var(--tinte); box-shadow: inset 0 -3px 0 var(--akzent); border-radius: 10px 10px 0 0; }
.werkzeuge { display: flex; gap: 6px; }
.knopf-klein { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linie); background: var(--blatt); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--tinte); cursor: pointer; }
.knopf-klein:hover { border-color: var(--linie-2); }
.knopf-klein[aria-pressed="true"] { background: var(--tinte); color: var(--blatt); border-color: var(--tinte); }
.menue-knopf { display: none; }
@media (max-width: 960px) {
  .menue-knopf { display: inline-flex; margin-left: auto; }
  .haupt-nav { display: none; width: 100%; flex-direction: column; padding-bottom: 12px; margin-left: 0; }
  .haupt-nav.offen { display: flex; }
  .haupt-nav a { font-size: 1.1rem; padding: 12px; }
  .haupt-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--akzent); border-radius: 6px; }
  .werkzeuge { order: 2; }
}


/* Bereiche */
main { padding-block: 24px 72px; display: grid; gap: 56px; }
main > * { min-width: 0; }
.dachzeile { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.abschnitt > h2, .abschnitt > h1.seitentitel { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); margin-top: 6px; }
.abschnitt > .vorspann { color: var(--tinte-2); max-width: 62ch; margin-top: 10px; }
.blatt { background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten); }
.raster { display: grid; gap: 14px; margin-top: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.raster > * { min-width: 0; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 999px; background: var(--akzent); color: var(--akzent-tinte); font-weight: 700; text-decoration: none; border: 0; cursor: pointer; font-size: 1.05rem; }
.knopf:hover { filter: brightness(1.08); }
.knopf.hell { background: var(--blatt); color: var(--tinte); border: 1.5px solid var(--linie-2); }
.knopf.sonne { background: var(--sonne); color: #2a1e00; }
.weiter { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.weiter::after { content: "→"; transition: transform .15s; }
.weiter:hover::after { transform: translateX(3px); }

/* Begrüßung */
.gruss { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: end; padding-top: 12px; }
@media (max-width: 860px) { .gruss { grid-template-columns: 1fr; } }
.gruss h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4rem); letter-spacing: -.025em; }
.gruss h1 em { font-style: normal; color: var(--akzent); }
.gruss .vorspann { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--tinte-2); margin-top: 14px; max-width: 46ch; }
.einstieg { padding: 18px; display: grid; gap: 12px; }
.einstieg h2 { font-size: 1.2rem; font-family: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--linie-2); background: var(--blatt); color: var(--tinte); text-decoration: none; font-weight: 700; font-size: 1rem; cursor: pointer; }
.chip:hover { border-color: var(--akzent); }
.chip[aria-pressed="true"], .chip.aktiv { background: var(--akzent); color: var(--akzent-tinte); border-color: var(--akzent); }
.chip svg { width: 20px; height: 20px; flex: none; }

/* Schlagzeilen */
.schlagzeilen { display: grid; gap: 14px; margin-top: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.schlag { display: grid; gap: 10px; padding: 20px; text-decoration: none; color: var(--tinte); align-content: start; position: relative; }
.schlag:hover { border-color: var(--linie-2); transform: translateY(-1px); }
.schlag { transition: transform .15s, border-color .15s; }
.schlag .wann { font-family: var(--mono); font-size: .82rem; color: var(--akzent); font-weight: 600; }
.schlag h3, .schlag h2.wie-h3 { font-size: 1.35rem; }
.schlag p { color: var(--tinte-2); font-size: 1rem; }
.schlag .fuss { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 4px; }
.etikett { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--blatt-2); color: var(--tinte-2); white-space: nowrap; }
.etikett.entwurf { background: var(--achtung-hauch); color: var(--achtung); }
.etikett.frei { background: var(--gut-hauch); color: var(--gut); }
.etikett.akzent { background: var(--akzent-hauch); color: var(--akzent); }

/* Mitmach-Band */
.mitmach { background: var(--sonne-hauch); border-radius: var(--r); padding: 24px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: center; border: 1px solid color-mix(in srgb, var(--sonne) 50%, transparent); }
@media (max-width: 760px) { .mitmach { grid-template-columns: 1fr; } }
.mitmach h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.mitmach p { color: var(--tinte-2); margin-top: 8px; }
.mitmach .termine { display: grid; gap: 8px; }
.mitmach .termin { display: flex; gap: 12px; align-items: center; background: var(--blatt); padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--tinte); }
.mitmach .termin b { font-family: var(--mono); font-size: .85rem; color: var(--akzent); min-width: 6.5rem; }

/* Sitzung */
.sitzungskopf { display: grid; gap: 10px; }
.sitzungskopf h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); }
.fakten { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--tinte-2); }
.fakten span { display: inline-flex; gap: 8px; align-items: center; }
.fakten svg { width: 20px; height: 20px; color: var(--akzent); }
.einladung { margin-top: 12px; padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; background: var(--sonne-hauch); border-radius: var(--r); }
.einladung svg { width: 28px; height: 28px; flex: none; color: var(--sonne-tinte); }
.punkte { display: grid; gap: 12px; margin-top: 18px; }
.punkt { padding: 0; overflow: hidden; }
.punkt > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: 12px; padding: 16px 18px; align-items: start; }
.punkt > summary::-webkit-details-marker { display: none; }
.punkt > summary .nr { font-family: var(--mono); font-weight: 600; color: var(--leise); padding-top: 3px; }
.punkt > summary .titel { font-weight: 700; font-size: 1.12rem; line-height: 1.35; }
.punkt > summary .titel small { display: block; font-weight: 400; font-size: .92rem; color: var(--leise); margin-top: 4px; }
.punkt > summary .auf { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--linie-2); display: grid; place-items: center; transition: transform .15s; }
.punkt[open] > summary .auf { transform: rotate(180deg); }
.punkt.ohne > summary { cursor: default; }
.punkt.ohne > summary .titel { font-weight: 400; color: var(--tinte-2); }
.unterpunkt { margin-left: 2.4rem; }
.punkt.ohne { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 12px; padding: 12px 18px; border-top: 1px solid var(--linie); }
.punkt.ohne .nr { font-family: var(--mono); font-weight: 600; color: var(--leise); padding-top: 2px; }
.punkt.ohne .titel { color: var(--tinte-2); line-height: 1.4; }
.punkt.ohne .titel small { display: block; font-size: .92rem; color: var(--leise); margin-top: 4px; }
.punkte > .punkt.ohne + .punkt.ohne { margin-top: -12px; }
.punkt.markiert { animation: markiert 1.6s ease-out; }
@keyframes markiert { from { background-color: var(--akzent-hauch); } }
.unterpunkt.ohne { border-left: 3px solid var(--linie); }
[id^="top-"], #h-to, #hingehen { scroll-margin-top: 96px; }
.sprungleiste { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; }
.sprungleiste a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 1.5px solid var(--rahmen); border-radius: 999px; background: var(--blatt); color: var(--tinte); font-weight: 700; text-decoration: none; }
.sprungleiste a:hover { border-color: var(--akzent); color: var(--akzent); }
.sprungleiste svg { width: 20px; height: 20px; }
.karte { padding: 4px 18px 20px calc(3.6rem + 30px); display: grid; gap: 16px; }
@media (max-width: 640px) { .karte { padding: 4px 18px 20px; } .punkt > summary, .punkt.ohne { grid-template-columns: 2.8rem minmax(0, 1fr) auto; } .unterpunkt { margin-left: 1rem; } }
.karte h4, .karte h3.kopf-klein { font-family: var(--text); line-height: 1.4; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin-bottom: 6px; }
.karte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.satz { display: grid; gap: 4px; }
.belege { display: flex; flex-wrap: wrap; gap: 6px; }
.beleg { font-size: .8rem; }
.beleg summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 6px; background: var(--blatt-2); color: var(--tinte-2); min-height: 30px; }
.beleg summary::-webkit-details-marker { display: none; }
.beleg summary::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--akzent); }
.beleg[open] summary { background: var(--akzent-hauch); color: var(--tinte); }
.beleg .zitat { margin-top: 6px; padding: 10px 12px; border-left: 3px solid var(--akzent); background: var(--blatt-2); border-radius: 0 8px 8px 0; font-size: .9rem; color: var(--tinte-2); max-width: 60ch; }
.offen li { position: relative; padding-left: 26px; color: var(--tinte-2); }
.offen li::before { content: "?"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--achtung-hauch); color: var(--achtung); font-weight: 700; font-size: .78rem; display: grid; place-items: center; }
.leicht-text { font-size: 1.2rem; line-height: 1.8; background: var(--akzent-hauch); padding: 16px; border-radius: 12px; }
html:not(.leicht) .nur-leicht { display: none; }
html.leicht .ohne-leicht { display: none; }
.karte-fuss { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-top: 1px solid var(--linie); padding-top: 14px; }
.betrifft-mich { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--linie-2); background: var(--blatt); font-weight: 700; cursor: pointer; }
.betrifft-mich[aria-pressed="true"] { background: var(--sonne); border-color: var(--sonne); color: #2a1e00; }
.betrifft-mich .zahl { font-family: var(--mono); font-size: .85rem; }

/* Faden */
.faden { padding: 18px; display: grid; gap: 12px; align-content: start; }
.faden h3 { font-size: 1.1rem; font-family: var(--text); line-height: 1.35; }
.faden ol { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--linie-2); display: grid; gap: 10px; }
.faden li { position: relative; font-size: .95rem; color: var(--tinte-2); }
.faden li::before { content: ""; position: absolute; left: -27px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--blatt); border: 2px solid var(--akzent); }
.faden li:last-child::before { background: var(--akzent); }
.faden li b { display: block; font-family: var(--mono); font-size: .8rem; color: var(--tinte); }

/* Vorhaben */
.vorhaben { padding: 18px; display: grid; gap: 10px; text-decoration: none; color: var(--tinte); align-content: start; }
.vorhaben:hover { border-color: var(--linie-2); }
.vorhaben h3 { font-size: 1.15rem; font-family: var(--text); line-height: 1.3; }
.schiene { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.schiene i { height: 8px; border-radius: 4px; background: var(--blatt-2); box-shadow: inset 0 0 0 1px var(--linie); }
.schiene i.an { background: var(--akzent); box-shadow: none; }
.zahlen { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .9rem; color: var(--tinte-2); }
.zahlen b { color: var(--tinte); font-variant-numeric: tabular-nums; }

/* Haushalt */
.diagramm { width: 100%; height: auto; display: block; overflow: visible; }
.diagramm .d-gitter { stroke: var(--linie); stroke-width: 1; }
.diagramm .d-null { stroke: var(--tinte-2); stroke-width: 1.2; }
.diagramm .d-achse { fill: var(--leise); font: 12px var(--mono); }
.diagramm .d-einheit { fill: var(--leise); font: 12px var(--text); }
.diagramm .d-wert { fill: var(--tinte); font: 600 13px var(--mono); }
.diagramm .d-ist { fill: var(--akzent); }
.diagramm .d-plan { fill: url(#schraffur); stroke: var(--akzent); stroke-width: 1.5; }
.diagramm .d-plan-grund { fill: var(--akzent-hauch); }
.diagramm .d-plan-linie { stroke: var(--akzent); stroke-width: 2; }
.diagramm .d-linie { fill: none; stroke: var(--akzent); stroke-width: 2.5; stroke-linejoin: round; }
.diagramm .d-linie-plan { stroke-dasharray: 6 5; }
.diagramm .d-flaeche { fill: var(--akzent-hauch); }
.diagramm .d-punkt { fill: var(--akzent); stroke: var(--blatt); stroke-width: 2; }
.diagramm .d-punkt-plan { fill: var(--blatt); stroke: var(--akzent); stroke-width: 2; }
.diagramm .d-treffer { fill: transparent; }
.diagramm .d-mark:hover .d-treffer, .diagramm .d-mark:focus .d-treffer { fill: var(--blatt-2); }
.legende { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .85rem; color: var(--leise); margin-top: 8px; }
.legende i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; background: var(--akzent); }
.legende i.plan { background: repeating-linear-gradient(45deg, var(--akzent) 0 2px, var(--akzent-hauch) 2px 5px); box-shadow: inset 0 0 0 1.5px var(--akzent); }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 20px; }
@media (max-width: 860px) { .zweispaltig { grid-template-columns: 1fr; } }
.zweispaltig > .blatt { padding: 18px; display: grid; gap: 8px; align-content: start; }
.zweispaltig h3, .zweispaltig h2.wie-h3 { font-size: 1.15rem; }
.tabelle-huelle { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--linie); vertical-align: top; }
th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
td.z, th.z { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fragen { display: grid; gap: 10px; margin-top: 20px; }
.frage { padding: 0; }
.frage summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 700; font-size: 1.1rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; font-size: 1.5rem; color: var(--leise); line-height: 1; }
.frage[open] summary::after { content: "–"; }
.frage .antwort { padding: 0 18px 18px; display: grid; gap: 8px; color: var(--tinte-2); max-width: 70ch; }
.frage .antwort p:first-child { color: var(--tinte); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; margin-top: 20px; }
.kachel { padding: 16px; display: grid; gap: 4px; align-content: start; }
.kachel b { font-family: var(--anzeige); font-size: 1.9rem; line-height: 1.05; }
.kachel span { font-size: .95rem; color: var(--tinte-2); }
.kachel small { font-size: .78rem; color: var(--leise); }

/* Rat */
.sitze { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 5px; margin-top: 12px; max-width: 520px; }
.sitze i { aspect-ratio: 1; border-radius: 50%; background: var(--tinte-2); }
.sitze i.b { background: var(--linie-2); }

/* Suche */
.suchfeld { width: 100%; min-height: 58px; border: 2px solid var(--rahmen); border-radius: 14px; padding: 0 18px; font-size: max(1.15rem, 16px); background: var(--blatt); }
.treffer { display: grid; gap: 8px; margin-top: 16px; }
.treffer a { display: grid; gap: 2px; padding: 12px 16px; text-decoration: none; color: var(--tinte); }
.treffer a span { font-size: .85rem; color: var(--leise); }
mark { background: var(--sonne-hauch); color: inherit; border-radius: 3px; padding: 0 2px; }

/* Formular */
.formular { padding: 22px; display: grid; gap: 16px; max-width: 760px; }
.formular label { display: grid; gap: 6px; font-weight: 700; }
.formular textarea, .formular select, .formular input[type="text"], .formular input[type="email"] { width: 100%; border: 1.5px solid var(--rahmen); border-radius: 10px; padding: 12px 14px; background: var(--blatt); font-size: max(1.05rem, 16px); font-weight: 400; }
.formular textarea { min-height: 150px; resize: vertical; }
.formular .hilfe { font-weight: 400; font-size: .9rem; color: var(--leise); }
.formular .wahl { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.formular .wahl input { width: 32px; height: 32px; margin-top: 0; flex: none; accent-color: var(--akzent); }
.meldung { padding: 14px 16px; border-radius: 10px; background: var(--gut-hauch); color: var(--tinte); }
.meldung.fehler { background: var(--achtung-hauch); }

/* Liste */
.liste { display: grid; margin-top: 16px; }
.liste a, .liste .zeile { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--linie); text-decoration: none; color: var(--tinte); align-items: baseline; }
.liste a:first-child { border-top: 0; }
.liste a:hover { background: var(--blatt-2); }
.liste .wann { font-family: var(--mono); font-size: .85rem; color: var(--leise); }
@media (max-width: 640px) { .liste a, .liste .zeile { grid-template-columns: 1fr; gap: 2px; } }

/* Fuß */
.fusszeile { border-top: 1px solid var(--linie); background: var(--blatt); padding-block: 32px 48px; font-size: .92rem; color: var(--tinte-2); }
.fusszeile .rahmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.fusszeile h2 { font-family: var(--text); font-size: .85rem; letter-spacing: .07em; text-transform: uppercase; color: var(--leise); margin-bottom: 8px; }
.fusszeile ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

/* Korrekturen nach Sichtprüfung */
svg[aria-hidden="true"] { width: 1.25em; height: 1.25em; flex: none; }
.knopf-klein svg { width: 20px; height: 20px; }
.liste .etikett { justify-self: start; }
@media (max-width: 960px) {
  .werkzeuge { order: 1; margin-left: auto; }
  .menue-knopf { order: 2; margin-left: 0; }
  .haupt-nav { order: 3; }
}
@media (max-width: 420px) { .marke b { font-size: 1.25rem; } .werkzeuge .knopf-klein { padding: 0 8px; } }
.karte > *, .ohne-leicht > *, .satz, .satz > span, .karte ul, .karte li { min-width: 0; }
.punkt { min-width: 0; }
.punkt > summary .titel, .satz > span { overflow-wrap: anywhere; }
.beleg summary { max-width: 100%; }
.schlagzeilen { align-items: start; }
.menue-knopf svg { width: 22px; height: 22px; }
@media (max-width: 420px) { .marke-text > span { display: none; } .kopf .rahmen { gap: 8px; flex-wrap: wrap; } .werkzeuge { gap: 4px; } }

.marke { flex-direction: row; align-items: center; gap: 10px; }
.marke .wappen { width: 34px; height: auto; flex: none; }
.marke-text { display: flex; flex-direction: column; line-height: 1.1; }
.gruss .wappen-gross { width: 72px; height: auto; margin-bottom: 14px; }
.zeitleiste { display: grid; gap: 28px; margin-top: 20px; }
.zeitleiste h3, .zeitleiste h2.wie-h3 { font-size: 1.2rem; position: sticky; top: 80px; background: var(--papier); padding: 4px 0; }

.komme { margin-top: 12px; padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; }
.komme .komme-zahl { display: block; font-size: 1.15rem; }
.komme .komme-aktion { display: flex; gap: 8px; flex-wrap: wrap; }
.komme select { min-height: 52px; border: 1.5px solid var(--rahmen); border-radius: 999px; padding: 0 14px; background: var(--blatt); font-size: max(1rem, 16px); }
.komme .knopf[aria-pressed="true"] { background: var(--gut); color: #fff; }
.komme > p { grid-column: 1 / -1; }
@media (max-width: 640px) { .komme { grid-template-columns: 1fr; } }
.anfahrt { margin-top: 12px; padding: 16px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px 24px; }
.anfahrt p { margin-top: 4px; }
.ergebnis { background: var(--gut-hauch); padding: 10px 14px; border-radius: 10px; }
.ergebnis-kurz { color: var(--gut) !important; }
@media (max-width: 420px) { .marke .wappen { width: 26px; } .marke b { font-size: 1.12rem; } .werkzeuge .knopf-klein, .menue-knopf { min-width: 40px; padding: 0 7px; } .kopf .rahmen { gap: 6px; } }

.komme-anzeige:empty { display: none; }

/* Marke Rathausplatz (Kopf, Claim, Absender) */
.marke { flex-direction: row; align-items: center; gap: 10px; }
.marke .zeichen { width: 40px; height: 40px; flex: none; }
.marke-text { display: flex; flex-direction: column; }
.claim { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 18px; padding: 0; list-style: none; }
.claim a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  background: var(--blatt); border: 1px solid var(--linie-2); color: var(--tinte); text-decoration: none; font-weight: 700; }
.claim a:hover { border-color: var(--akzent); }
.claim a.mit { background: var(--sonne); border-color: var(--sonne-tinte); color: #1c2b30; }
.claim b { color: var(--akzent); font-family: var(--anzeige); }
.absender { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); }
.absender img { height: 28px; width: auto; }
.absender p { font-size: .875rem; color: var(--leise); }
.fusszeile .absender { grid-column: 1 / -1; }
.claim a.mit b { color: #1c2b30; }

/* Aus den Prüfregeln (Web Interface Guidelines, fixing-accessibility) */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
select { background-color: var(--blatt); color: var(--tinte); }

/* ===== Stufe 1.2: Startseite als Titelseite (Editorial) ===== */
.gruss { align-items: start; padding-top: 28px; }
.gruss-text { display: grid; gap: 0; }
.absender-zeile { display: flex; align-items: center; gap: 10px; }
.wappen-klein { width: 28px; height: auto; }
.gruss .claim { margin-top: 22px; }
.ortswahl { margin-top: 18px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.ortswahl > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 56px; font-weight: 700; font-size: 1.1rem; }
.ortswahl > summary::-webkit-details-marker { display: none; }
.ortswahl > summary::after { content: "+"; margin-left: auto; font: 400 1.6rem/1 var(--text); color: var(--akzent); }
.ortswahl[open] > summary::after { content: "–"; }
.ortswahl > summary svg { width: 22px; height: 22px; color: var(--akzent); flex: none; }
.ortswahl .leise { font-weight: 400; color: var(--leise); }
.ortswahl .chips { padding-bottom: 16px; }

.naechste { display: grid; gap: 14px; padding: 22px; border-radius: var(--r); background: #0f4c5c; color: #f4f1eb; text-decoration: none; align-self: start; box-shadow: var(--schatten); }
.naechste .dachzeile { color: #c9dde2; }
.naechste-zeile { display: flex; gap: 18px; align-items: flex-start; }
.naechste-titel { display: block; font-family: var(--anzeige); font-size: 1.5rem; line-height: 1.2; margin-bottom: 6px; }
.naechste .klein { color: #dbe7ea; font-size: 1rem; }
.naechste .datumsmarke { border-color: rgba(244,241,235,.45); }
.naechste .datumsmarke b { color: #f4f1eb; }
.naechste .datumsmarke span { color: #c9dde2; }
.naechste-fuss { display: flex; gap: 10px; align-items: center; padding-top: 14px; border-top: 1px solid rgba(244,241,235,.25); font-weight: 700; }
.naechste-fuss svg { width: 22px; height: 22px; color: var(--sonne); flex: none; }
.naechste:hover .naechste-titel { text-decoration: underline; text-underline-offset: 4px; }
.naechste .komme-anzeige:empty { display: none; }

.datumsmarke { display: grid; justify-items: center; align-content: start; min-width: 4.6rem; padding: 8px 6px 10px; border: 1.5px solid var(--linie-2); border-radius: 12px; text-align: center; flex: none; }
.datumsmarke b { font-family: var(--anzeige); font-size: 2.3rem; line-height: 1; font-variant-numeric: lining-nums; }
.datumsmarke span { font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); margin-top: 4px; }

.aufmacher { display: grid; gap: 10px; margin-top: 22px; padding: 26px 0 28px; border-top: 4px solid var(--akzent); border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; max-width: 860px; }
.aufmacher .wann { font-family: var(--mono); font-size: .85rem; font-weight: 600; color: var(--akzent); }
.aufmacher h3 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.8rem); letter-spacing: -.02em; line-height: 1.1; }
.aufmacher p { font-size: clamp(1.1rem, 1rem + .3vw, 1.25rem); color: var(--tinte-2); max-width: 62ch; }
.aufmacher .aufmacher-zweit { font-size: 1.05rem; }
.aufmacher .mehr { font-weight: 700; color: var(--akzent); }
.aufmacher .mehr::after { content: " →"; }
.aufmacher:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.sitzungsgruppe { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 8px 28px; padding: 22px 0; border-bottom: 1px solid var(--linie); }
.sitzungsgruppe .gruppenkopf { display: flex; gap: 14px; align-items: flex-start; color: var(--tinte); text-decoration: none; grid-row: span 2; }
.gruppenkopf b { display: block; font-size: 1.05rem; line-height: 1.3; margin-bottom: 4px; }
.gruppenkopf .klein { display: block; }
.gruppenkopf:hover b { text-decoration: underline; }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0 26px; }
.kurzmeldung { display: grid; gap: 6px; align-content: start; padding: 4px 0 14px; color: var(--tinte); text-decoration: none; }
.kurzmeldung h3 { font-size: 1.2rem; line-height: 1.25; }
.kurzmeldung p { font-size: 1rem; color: var(--tinte-2); }
.kurzmeldung .lagen { font-size: .85rem; font-weight: 700; color: var(--akzent); }
.kurzmeldung:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.gruppenfuss { grid-column: 2; margin: 0; }
@media (max-width: 760px) {
  .sitzungsgruppe { grid-template-columns: 1fr; }
  .sitzungsgruppe .gruppenkopf { grid-row: auto; }
  .gruppenfuss { grid-column: 1; }
  .kurzmeldung { border-top: 1px solid var(--linie); padding-top: 14px; }
}
.themenwahl .chips { margin-top: 16px; }

/* ===== Stufe 1.3: Servicezeile, Pflasterband, Übergänge ===== */
.kopf { border-bottom: 0; }
.servicezeile { background: var(--blatt); position: relative; padding-bottom: 6px; }
.servicezeile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--linie) 0 22px, transparent 22px 26px) 0 0 / 100% 3px no-repeat,
              repeating-linear-gradient(90deg, var(--linie) 0 22px, transparent 22px 26px) 13px 3px / 100% 3px no-repeat; }
.servicezeile .rahmen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding-block: 6px 8px; }
.hinweisband { font-size: .92rem; color: var(--tinte-2); }
.hinweisband b { color: var(--sonne-tinte); }
.lesehilfen { display: flex; gap: 8px; margin-left: auto; }
.lesehilfe { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--linie-2); border-radius: 999px; background: var(--blatt); color: var(--tinte); font: 700 .95rem/1 var(--text); cursor: pointer; }
.lesehilfe:hover { border-color: var(--akzent); }
.lesehilfe[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-tinte); }
.lh-zeichen { font-family: var(--anzeige); font-size: 1.05rem; }
@media (max-width: 560px) { .lesehilfen { margin-left: 0; width: 100%; } .lesehilfe { flex: 1; justify-content: center; padding: 0 10px; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
  .kopf { view-transition-name: kopf; }
}

/* ===== Stufe 1.4: Ort und Haushalt ===== */
.listenkopf { font-family: var(--text); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin: 18px 0 8px; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 28px; margin-top: 24px; border-top: 4px solid var(--akzent); }
.kennzahlen > div { display: grid; gap: 4px; align-content: start; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.kennzahlen b { font-family: var(--anzeige); font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.kennzahlen span { color: var(--tinte-2); }
.kennzahlen small { font-family: var(--mono); font-size: .78rem; color: var(--leise); }
.teaser { display: grid; gap: 6px; margin-top: 22px; padding: 20px 22px; border-radius: var(--r); background: var(--akzent-hauch); border-left: 5px solid var(--akzent); color: var(--tinte); text-decoration: none; max-width: 720px; }
.teaser b { font-family: var(--anzeige); font-size: 1.45rem; line-height: 1.2; }
.teaser b::after { content: " →"; color: var(--akzent); }
.teaser span:last-child { color: var(--tinte-2); }
.teaser:hover b { text-decoration: underline; text-underline-offset: 4px; }

/* ===== Stufe 1.5: Formular nach GOV.UK/KERN-Muster ===== */
.formularkopf { padding-top: 28px; max-width: 760px; }
.formularkopf h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin-top: 6px; }
.formularkopf .vorspann { margin-top: 12px; color: var(--tinte-2); }
.formular-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; margin-top: 22px; align-items: start; }
@media (max-width: 860px) { .formular-raster { grid-template-columns: 1fr; } }
.formular .feld { display: grid; gap: 6px; }
.formular .feld > label { font-weight: 700; font-size: 1.1rem; }
.feldfehler { color: var(--rot); font-weight: 700; }
.formular [aria-invalid="true"] { border-color: var(--rot); border-width: 2.5px; }
.feld:has([aria-invalid="true"]) { border-left: 5px solid var(--rot); padding-left: 14px; }
.fehlerliste { border: 3px solid var(--rot); border-radius: 10px; padding: 14px 18px; }
.fehlerliste h2 { font-family: var(--text); font-size: 1.15rem; }
.fehlerliste ul { margin: 8px 0 0; padding-left: 1.2rem; }
.fehlerliste a { color: var(--rot); font-weight: 700; }
.mehr-angaben { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.mehr-angaben > summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; }
.mehr-inhalt { display: grid; gap: 14px; padding-bottom: 16px; }
.knopf.gross { min-height: 56px; padding-inline: 28px; font-size: 1.1rem; }
.meldung.bestaetigt { border-left: 5px solid var(--gut); background: var(--gut-hauch); padding: 14px 16px; border-radius: 8px; font-weight: 700; }
.randspalte { display: grid; gap: 10px; align-content: start; }
.randspalte h2 { font-size: 1.3rem; margin-top: 8px; }
.schrittfolge { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.schrittfolge li { counter-increment: s; display: grid; grid-template-columns: 2.2rem 1fr; gap: 10px; color: var(--tinte-2); }
.schrittfolge li::before { content: counter(s); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--akzent); color: var(--akzent-tinte); font-weight: 700; font-family: var(--mono); }
.schrittfolge b { color: var(--tinte); }

/* ===== Stufe 2: Runde-2-Hebel ===== */
.mehr-angaben > summary svg { width: 22px; height: 22px; color: var(--akzent); transition: transform .15s; flex: none; }
.mehr-angaben[open] > summary svg { transform: rotate(180deg); }
.formular-raster .randspalte { position: sticky; top: 96px; }
@media (max-width: 860px) { .formular-raster .randspalte { position: static; } }
.schrittfolge li > div { min-width: 0; }
/* Ortswahl als erkennbarer Knopf (Runde 2: „+“ wurde übersehen) */
.ortswahl { border: 0; }
.ortswahl > summary { border: 1.5px solid var(--rahmen); border-radius: 14px; padding: 6px 16px; background: var(--blatt); }
.ortswahl > summary::after { content: none; }
.ortswahl > summary > svg:last-child { margin-left: auto; color: var(--akzent); transition: transform .15s; }
.ortswahl[open] > summary > svg:last-child { transform: rotate(180deg); }
.ortswahl > summary:hover { border-color: var(--akzent); }
.ortswahl .chips { padding: 14px 0 4px; }
/* Sitzungsübersicht im Stil der Titelseite */
.zwischenkopf { font-size: 1.5rem; }
.terminliste { margin-top: 14px; border-top: 4px solid var(--akzent); }
.terminzeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; }
.termintext { display: grid; gap: 4px; }
.termintext b { font-family: var(--anzeige); font-size: 1.35rem; line-height: 1.2; }
.metazeile { font-size: .9rem; font-weight: 700; color: var(--akzent); }
.pfeil-rechts { font-size: 1.5rem; color: var(--akzent); align-self: center; transition: transform .15s; }
.terminzeile:hover b { text-decoration: underline; text-underline-offset: 4px; }
.terminzeile:hover .pfeil-rechts { transform: translateX(3px); }
.archivliste { margin-top: 6px; }
.monatskopf { font-size: 1.25rem; margin: 22px 0 4px; padding-bottom: 6px; border-bottom: 2px solid var(--tinte); }
.archivzeile { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; align-items: start; }
.archivzeile .tag { font-family: var(--mono); font-size: .9rem; color: var(--leise); padding-top: 2px; }
.archivzeile b { display: block; }
.archivzeile:hover b { text-decoration: underline; }
@media (max-width: 560px) { .archivzeile { grid-template-columns: 1fr; gap: 2px; } .archivzeile > .klein:last-child { display: none; } }
/* Lange Datumsangaben in Textschrift, nicht in Mono (Umbruch auf der Ortsseite) */
.liste .wann.lang { font-family: var(--text); font-size: .95rem; }
/* Handy: Sprungleiste in einer Zeile, Startseite kürzer */
@media (max-width: 560px) {
  .sprungleiste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .sprungleiste a { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 4px; border-radius: 12px; font-size: .85rem; text-align: center; line-height: 1.2; min-height: 64px; }
  .raster.kurz-handy > :nth-child(n+4) { display: none; }
  .sitzungsgruppe:nth-of-type(n+4) { display: none; }
}

/* ===== Skill apple-design (Emil Kowalski, MIT): Abschnitte 1, 12, 14, 15 =====
   1  Rückmeldung beim Drücken, nicht erst beim Loslassen
   12 Kopfzeile als durchscheinende Schicht, Inhalt läuft sichtbar darunter
   14 Bei „Transparenz reduzieren“ wieder deckend
   15 Laufweite je Schriftgröße: groß enger, klein und Versalien weiter, Fließtext 0 */
@media (prefers-reduced-motion: no-preference) {
  .knopf, .chip, .lesehilfe, .sprungleiste a, .claim a, .ortswahl > summary, .mehr-angaben > summary, .naechste, .teaser {
    transition: transform .16s cubic-bezier(.2, .8, .2, 1), background-color .15s, border-color .15s, color .15s; }
  .knopf:active, .chip:active, .lesehilfe:active, .sprungleiste a:active, .claim a:active, .ortswahl > summary:active, .mehr-angaben > summary:active {
    transform: scale(.97); transition-duration: 0s; }
  .naechste:active, .teaser:active { transform: scale(.99); transition-duration: 0s; }
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf { background: color-mix(in srgb, var(--blatt) 88%, transparent); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
}
@media (prefers-reduced-transparency: reduce) { .kopf { background: var(--blatt); -webkit-backdrop-filter: none; backdrop-filter: none; } }
body { letter-spacing: 0; }
h1, h2, h3 { font-optical-sizing: auto; }
.abschnitt > h2, .abschnitt > h1.seitentitel, .zwischenkopf, .formularkopf h1 { letter-spacing: -.018em; }
.naechste-titel, .termintext b, .teaser b { letter-spacing: -.01em; }
.kurzmeldung h3, .meldung h3, .punkt > summary .titel { letter-spacing: -.003em; }
.klein, .hilfe, .metazeile { letter-spacing: .005em; }

/* ===== Stufe 2.1: Runde-3-Hebel ===== */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .kopf { background: color-mix(in srgb, var(--blatt) 92%, transparent); } }
@media (prefers-reduced-transparency: reduce) { .kopf { background: var(--blatt); } }
.naechste-link { font-weight: 700; color: #f4f1eb; text-decoration: underline; text-underline-offset: 4px; }
.datumsmarke span { font-size: .8rem; }
/* Tagesordnung als ein System: alle Punkte als Zeilen auf einer Nummernachse, nur der geöffnete Punkt wird zum Blatt */
.punkte { gap: 0; border-top: 4px solid var(--akzent); }
.punkte > .punkt { border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; box-shadow: none; background: transparent; }
.punkte > .punkt.ohne { border-top: 0; margin-top: 0 !important; }
.punkte > .punkt:not(.ohne) > summary .titel { font-family: var(--anzeige); font-size: 1.2rem; }
.punkte > .punkt[open] { background: var(--blatt); box-shadow: var(--schatten); border-radius: var(--r); border-bottom-color: transparent; margin: 8px 0; }
.punkte > .unterpunkt { border-left: 3px solid var(--linie); }
/* Vorgeschichte zugeklappt */
.vorgeschichte > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: end; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.vorgeschichte > summary::-webkit-details-marker { display: none; }
.vorgeschichte > summary .dachzeile { grid-column: 1 / -1; }
.vorgeschichte > summary h2 { font-size: 1.35rem; }
.vorgeschichte > summary svg { width: 26px; height: 26px; color: var(--akzent); transition: transform .15s; }
.vorgeschichte[open] > summary svg { transform: rotate(180deg); }
.sprungleiste .kurz { display: none; }
@media (max-width: 560px) {
  .sprungleiste a { font-size: 1rem; }
  .sprungleiste svg { width: 22px; height: 22px; }
  .sprungleiste .lang { display: none; }
  .sprungleiste .kurz { display: inline; }
  .gruss .claim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .gruss .claim li { display: contents; }
  .gruss .claim a { flex-direction: column; justify-content: center; text-align: center; gap: 0; padding: 8px 4px; border-radius: 12px; font-size: .9rem; line-height: 1.25; min-height: 64px; }
  .gruss .claim b { font-size: 1.05rem; }
  .kacheln > :nth-child(n+3) { display: none; }
  .naechste { padding: 18px; }
}
.hinweisband .kurz { display: none; }
@media (max-width: 560px) {
  .hinweisband .lang, .gruss .stand { display: none; }
  .hinweisband .kurz { display: inline; }
  .lesehilfe { min-height: 44px; font-size: .9rem; gap: 6px; }
  .servicezeile .rahmen { padding-block: 4px 6px; gap: 4px; }
  .gruss { padding-top: 16px; gap: 18px; }
  .naechste { gap: 10px; }
  .naechste .lang-datum { display: none; }   /* die Datumsmarke zeigt Tag und Uhrzeit schon */
  .naechste-titel { font-size: 1.3rem; }
  .naechste-fuss { padding-top: 10px; }
}
.punkte > .punkt:not(.ohne) > summary .titel small { font-family: var(--text); }

/* ===== Stufe 2.2: letzte Kästen abräumen ===== */
.zeilenliste { margin-top: 14px; border-top: 4px solid var(--akzent); }
.vorhabenzeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 140px) auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; }
.vz-text { display: grid; gap: 4px; }
.vz-text b { font-family: var(--anzeige); font-size: 1.2rem; line-height: 1.25; }
.vorhabenzeile:hover b { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 560px) { .vorhabenzeile { grid-template-columns: minmax(0, 1fr) auto; } .vorhabenzeile .schiene { grid-column: 1; grid-row: 2; } .vorhabenzeile .pfeil-rechts { grid-row: 1 / span 2; grid-column: 2; } }
.kennzahl-link { display: grid; gap: 4px; align-content: start; padding: 18px 0; border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; }
.kennzahl-link b { font-family: var(--anzeige); font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.kennzahl-link b.ohne-zahl { font-size: 1.3rem; }
.kennzahl-link span { color: var(--tinte-2); }
.kennzahl-link small { font-family: var(--mono); font-size: .8rem; color: var(--akzent); }
.kennzahl-link:hover span { text-decoration: underline; }
/* Haushalt: Fragen als Linien statt Kästen */
.fragen { gap: 0; border-top: 4px solid var(--akzent); }
.fragen > .frage { border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; box-shadow: none; background: transparent; }
.fragen > .frage summary { padding-inline: 0; }
.fragen > .frage[open] { background: var(--blatt); border-radius: var(--r); box-shadow: var(--schatten); margin: 8px 0; }
.fragen > .frage[open] summary { padding-inline: 18px; }
/* Sitzung: Anfahrt als Spalten ohne Kasten, Haarlinie nach geöffnetem Punkt */
.anfahrt { padding: 16px 0 0; border-top: 1px solid var(--linie); margin-top: 16px; }
.punkte > .punkt[open] + .punkt { border-top: 1px solid var(--linie); }
@media (max-width: 560px) {
  .gruss .stand { display: inline; }
  .punkte > .unterpunkt { margin-left: .4rem; }
}
/* Runde 4: Feinschliff */
.mitmach { grid-template-columns: 1fr; max-width: 860px; }
.gruss .claim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gruss .claim li { display: contents; }
.gruss .claim a { justify-content: center; text-align: center; flex-direction: column; gap: 0; border-radius: 14px; min-height: 64px; line-height: 1.25; }
.etikett, .datumsmarke span, .meldung .lagen, .kurzmeldung .lagen { font-size: max(.82rem, 13px); }
@media (max-width: 560px) {
  .gruss .claim a { font-size: 1rem; }
  .sitzungsgruppe:nth-of-type(n+3) { display: none; }
  .kurzmeldung p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ===== Platzhalter (nur Vorschau): gestrichelt, klar beschriftet, nie mit echten Angaben zu verwechseln ===== */
.platzhalter, .bild-platzhalter { display: grid; gap: 6px; align-content: center; margin-top: 14px; padding: 16px 18px; border: 2px dashed var(--rahmen); border-radius: var(--r);
  background: repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--linie) 45%, transparent) 12px 13px), var(--papier); color: var(--tinte-2); }
.platzhalter b { color: var(--tinte); }
.ph-marke { justify-self: start; font: 700 .78rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: var(--tinte); color: var(--papier); }
.ph-marke.beispiel { background: var(--sonne-hauch); color: var(--sonne-tinte); margin-right: 8px; }
.ph-beispiel { font-style: italic; color: var(--tinte); }
.ph-text { font-size: .92rem; }
.titelbild, .ortsbild, .raumbild { margin: 22px 0 0; border-radius: var(--r); overflow: hidden; }
.titelbild { aspect-ratio: 21 / 8; } .ortsbild { aspect-ratio: 21 / 7; } .raumbild { aspect-ratio: 16 / 7; margin-top: 14px; }
.titelbild img, .ortsbild img, .raumbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
figure.titelbild, figure.ortsbild, figure.raumbild { position: relative; }
figure figcaption { position: absolute; right: 8px; bottom: 8px; font-size: .78rem; background: rgba(28,43,48,.75); color: #f4f1eb; padding: 3px 8px; border-radius: 6px; }
.bild-platzhalter { justify-items: center; text-align: center; font-weight: 700; }
.bild-platzhalter .ph-marke { justify-self: center; }
.bild-platzhalter .ph-text { font-weight: 400; max-width: 44ch; }
@media (max-width: 560px) { .titelbild, .ortsbild { aspect-ratio: 4 / 3; } .raumbild { aspect-ratio: 16 / 9; } }
.formular .feld > label { display: block; } .formular .feld > label .hilfe { font-weight: 400; }