/* Electo Report-Seite und Admin. CI: Inter Tight, Schwarz und Weiss, Raster, Magenta nur für den Befund.
   Keine runden Ecken, keine Schatten. Bewegung erklärt einen Schritt. Mobile zuerst, Breakpoints 760 und 1100. */

@font-face { font-family: "Inter Tight"; font-weight: 300 900; font-display: block; src: url(fonts/inter-tight-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-weight: 300 900; font-display: block; src: url(fonts/inter-tight-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-weight: 300 900; font-display: block; src: url(fonts/inter-tight-symbole.woff2) format("woff2"); unicode-range: U+2192, U+2713; }
@font-face { font-family: Caveat; font-weight: 600; font-display: swap; src: url(fonts/caveat-latin.woff2) format("woff2"); }

:root {
  --ink: #111111; --ink-2: #3d3d3a; --grau: #66665f; --linie: #dcdcd8; --flaeche: #f3f3f1; --papier: #ffffff;
  --akzent: #d6006f; --akzent-soft: #fce6f1; --raster: #1111110b;
  --mittel: #6b6b66; --hell: #b0b0aa; --leer: #e4e4df;
  --rand: 16px; --max: 1180px; --ease: cubic-bezier(.23, 1, .32, 1);
  color-scheme: light;
}
@media (min-width: 760px) { :root { --rand: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background-color: var(--papier);
  background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 24px 24px; background-position: center top;
  font: 400 17px/1.5 "Inter Tight", Arial, system-ui, sans-serif; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (min-width: 760px) { body { font-size: 18px; } }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--papier); }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-size: .85em; background: var(--flaeche); padding: 1px 5px; }

/* ---------- Grundraster ---------- */
.rahmen { width: 100%; max-width: calc(var(--max) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { position: relative; padding-block: clamp(72px, 11vh, 128px); min-height: 100svh; display: flex; align-items: center; }
.abschnitt > .rahmen > h2 { font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; max-width: 22ch; margin-bottom: 28px; }
.lead, .worum { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); line-height: 1.4; color: var(--ink-2); max-width: 46ch; }
.worum { margin-bottom: 40px; }
.dunkel { background: var(--ink); color: var(--papier); }
.dunkel .lead, .dunkel .worum { color: #c9c9c4; }
/* Die Abschnitte gehen weich in die dunklen Flächen über */
.dunkel::before, .dunkel::after { content: ""; position: absolute; left: 0; right: 0; height: 96px; pointer-events: none; }
.dunkel::before { top: -96px; background: linear-gradient(to bottom, transparent, var(--ink)); }
.dunkel::after { bottom: -96px; background: linear-gradient(to top, transparent, var(--ink)); }
.dunkel + .dunkel::before, .teil-b > .dunkel:first-of-type::before { display: none; }
.dunkel:has(+ .dunkel)::after { display: none; }

/* ---------- Start ---------- */
.held { min-height: 100svh; display: flex; padding-block: max(24px, env(safe-area-inset-top)) clamp(48px, 9vh, 96px); }
.held > .rahmen { display: flex; flex-direction: column; }
.held .logo { margin-bottom: auto; padding-bottom: 48px; }
.held .logo svg { height: 30px; width: auto; display: block; }
.held .meta { font-weight: 600; color: var(--grau); margin-bottom: 12px; }
.held h1 { font-size: clamp(3rem, 1.4rem + 8vw, 8rem); font-weight: 800; letter-spacing: -.05em; line-height: .9; margin-bottom: 28px; overflow-wrap: anywhere; }
.held .lead { margin-bottom: 48px; }
.inhalt { display: grid; gap: 24px 48px; border-top: 2px solid var(--ink); padding-top: 20px; max-width: 900px; }
@media (min-width: 760px) { .inhalt { grid-template-columns: 1fr 1fr; } }
.inhalt h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; }
.inhalt ol { margin: 0; padding-left: 1.3em; color: var(--ink-2); }
.preis { font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px 2px; border: 1.5px solid var(--ink); }
.preis.an { background: var(--ink); color: var(--papier); }
.bezug { margin-top: 32px; max-width: 70ch; color: var(--ink-2); font-size: 1rem; }
.bezug h3 { font-size: 1rem; color: var(--ink); margin-bottom: 4px; }

/* ---------- Bausteine ---------- */
.fuer-dich { margin-top: 40px; background: var(--flaeche); padding: 24px 28px; max-width: 760px; }
.fuer-dich h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.fuer-dich p { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.4; }
.dunkel .fuer-dich { background: #1e1e1d; }
.legende { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--ink-2); }
.legende li { display: flex; align-items: center; gap: 8px; }
.legende i { width: 14px; height: 14px; flex: none; display: inline-block; }
.legende.gross { flex-direction: column; font-size: 16px; }
.legende.gross b { margin-left: auto; padding-left: 12px; }
.f-a, .f-kr, .f-ink { background: var(--ink); fill: var(--ink); }
.f-b { background: var(--mittel); fill: var(--mittel); }
.f-nr { background: var(--hell); fill: var(--hell); }
.f-d { background: var(--hell); fill: var(--hell); }
.f-h { background: var(--akzent); fill: var(--akzent); }
.f-g { background: var(--leer); fill: var(--leer); }
.f-spanne { background: var(--hell); }
i.f-see { background: #eaeae6; }
i.f-wohn { border: 3px solid var(--ink); border-radius: 50%; background: var(--papier); }
figcaption { font-size: 14px; color: var(--grau); margin-top: 10px; }
.gross-zahl { font-size: clamp(3.4rem, 2rem + 6vw, 6.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.gross-zahl span { display: block; font-size: 1.1rem; font-weight: 500; letter-spacing: 0; color: var(--grau); margin-top: 10px; }
.bar { display: block; width: 100%; height: 14px; }
.bar .grund { fill: var(--flaeche); }

/* Fachwörter: antippen zeigt die Erklärung */
.begriff { background: none; border: 0; padding: 0; color: inherit; cursor: help; border-bottom: 1.5px dotted currentColor; line-height: inherit; }
.begriff:hover { border-bottom-style: solid; }
.erkl { max-width: min(420px, calc(100vw - 32px)); border: 2px solid var(--ink); padding: 22px 24px 18px; background: var(--papier); color: var(--ink); }
.erkl::backdrop { background: rgba(17, 17, 17, .28); }
.erkl b { display: block; font-size: 1.15rem; margin-bottom: 6px; }
.erkl .zu { margin-top: 14px; background: none; border: 0; padding: 0; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* Tabellen: aufklappbar, nichts gestrichen */
details.tabelle { margin-top: 28px; border-top: 1px solid var(--linie); max-width: 980px; }
details > summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; display: flex; align-items: center; gap: 10px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "+"; width: 22px; height: 22px; border: 1.5px solid currentColor; display: grid; place-items: center; font-weight: 600; line-height: 1; flex: none; }
details[open] > summary::before { content: "–"; }
.tab-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-weight: 600; border-bottom: 1.5px solid var(--ink); font-size: 13px; white-space: nowrap; }
td.r, th.r { text-align: right; white-space: nowrap; }
tr.m td { background: var(--akzent-soft); }
.dunkel th { border-color: var(--papier); } .dunkel td { border-color: #33332f; }

/* ---------- Scrollytelling: Bühne bleibt stehen, Schritte laufen durch ---------- */
.scrolly { display: grid; gap: 0; }
.buehne { margin: 0; position: sticky; top: 0; z-index: 3; background: var(--papier); padding: 12px 0; box-shadow: 0 12px 12px -12px var(--papier); }
.buehne svg { display: block; width: 100%; height: auto; max-height: 46svh; margin-inline: auto; }
.schritte { list-style: none; padding: 0; margin: 0; position: relative; z-index: 2; }
.schritte li { min-height: 70svh; display: flex; align-items: flex-end; padding: 24px 0 12svh; }
.schritte li p { background: var(--papier); border: 2px solid var(--ink); padding: 18px 20px; font-size: 1.1rem; line-height: 1.45; max-width: 34ch; }
.js .schritte li p { opacity: .35; transition: opacity .5s var(--ease); }
.js .schritte li.aktiv p { opacity: 1; }
.schritte li:last-child { min-height: 50svh; }
@media (min-width: 1100px) {
  .scrolly { grid-template-columns: 4fr 7fr; gap: 64px; }
  .buehne { order: 2; top: 10vh; align-self: start; padding: 0; background: none; }
  .buehne svg { max-height: 78vh; }
  .schritte li { min-height: 78vh; align-items: center; padding: 24px 0; }
  .schritte li p { border: 0; border-left: 2px solid var(--ink); padding: 4px 0 4px 20px; background: none; font-size: 1.3rem; }
}

/* Wahlzettel */
.zettel .papier { fill: var(--papier); stroke: var(--ink); stroke-width: 2; }
.zettel .z-kopf { font: 800 26px "Inter Tight"; } .zettel .z-unter { font: 500 15px "Inter Tight"; fill: var(--grau); }
.zettel .linie line { stroke: var(--linie); stroke-width: 1.5; }
.zettel .nr { font: 600 15px "Inter Tight"; fill: var(--grau); } .zettel .name { font: 500 17px "Inter Tight"; }
.zettel .streich { stroke: var(--ink); stroke-width: 2.5; }
.zettel .hand { font: 600 26px Caveat, cursive; fill: var(--ink); }
.zettel .notiz text { font: 600 17px "Inter Tight"; fill: var(--ink); } .zettel .notiz .ak { fill: var(--akzent); }
.zettel g { transition: opacity .6s var(--ease); }
.buehne[data-schritt="1"] .linie line { stroke: var(--ink); }

/* Karte */
.karte path { stroke: var(--papier); stroke-width: 2.5; transition: fill .7s var(--ease); }
.karte .g { fill: var(--leer); }
.karte .h { fill: var(--akzent); }
.buehne:not([data-fertig]) .karte .h { fill: var(--leer); }
.karte .see { fill: #eaeae6; stroke: none; } .karte .kontext { fill: none; stroke: var(--linie); }
.karte text { font: 500 24px "Inter Tight"; fill: var(--ink-2); text-anchor: middle; paint-order: stroke; stroke: var(--papier); stroke-width: 6px; stroke-linejoin: round; }
.karte text.gross { font-size: 30px; font-weight: 700; fill: var(--ink); }
@media (max-width: 759px) { .karte text { font-size: 32px; stroke-width: 7px; } .karte text.gross { font-size: 38px; } }
.karte .wohn { fill: var(--papier); stroke: var(--ink); stroke-width: 5; transition: opacity .6s var(--ease); }
.buehne[data-schritt="1"] .wohn { opacity: 0; }
.buehne .legende { justify-content: center; }

/* Stapel der Panaschierlupe */
.stapel { height: 72px !important; max-height: none !important; }
.stapel .seg { stroke: var(--papier); stroke-width: 3; transition: opacity .6s var(--ease); }
.buehne[data-schritt="1"] .s2, .buehne[data-schritt="1"] .s3, .buehne[data-schritt="1"] .s4,
.buehne[data-schritt="2"] .s3, .buehne[data-schritt="2"] .s4, .buehne[data-schritt="3"] .s4 { opacity: .1; }
#b-stapel .legende li { transition: opacity .6s var(--ease); }
#b-wahl .s2, #b-wahl .s3, #b-wahl .s4 { opacity: 1; }
#b-wahl[data-schritt="1"] .s2, #b-wahl[data-schritt="1"] .s3, #b-wahl[data-schritt="1"] .s4,
#b-wahl[data-schritt="2"] .s3, #b-wahl[data-schritt="2"] .s4, #b-wahl[data-schritt="3"] .s4 { opacity: 0; }

/* Partei-Lage */
.lage { margin: 0; max-width: 820px; }
.ebene { display: grid; gap: 6px 24px; padding: 16px 0; border-top: 1px solid var(--linie); }
@media (min-width: 760px) { .ebene { grid-template-columns: 200px 1fr 170px; align-items: center; } }
.ebene h4 { font-size: 1rem; font-weight: 700; }
.ebene .sitze { font-size: 14px; color: var(--grau); }
.bz { display: grid; grid-template-columns: 1fr 64px 76px; gap: 12px; align-items: center; margin: 4px 0; font-size: 15px; }
.bz .w { font-weight: 700; text-align: right; } .bz .d { color: var(--grau); text-align: right; }
.kennzahlen { display: grid; gap: 0 28px; margin-top: 48px; }
@media (min-width: 760px) { .kennzahlen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .kennzahlen { grid-template-columns: repeat(4, 1fr); } }
.kennzahl, .kurz { border-top: 2px solid var(--ink); padding: 16px 0 28px; display: flex; flex-direction: column; gap: 8px; }
.k-titel { font-size: 14px; font-weight: 600; color: var(--grau); }
.k-wert { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.kennzahl p:not(.k-titel):not(.k-wert) { font-size: 15px; color: var(--ink-2); }
.kennzahl .k-heisst { color: var(--ink) !important; border-top: 1px solid var(--linie); padding-top: 10px; margin-top: auto; }
.punkte { width: 100%; height: auto; max-width: 260px; } .punkte .an { fill: var(--ink); } .punkte .aus { fill: var(--leer); }

/* Rangliste der Gemeinden */
.rangliste { margin-top: 56px; max-width: 820px; }
.rangliste h3 { font-size: 1.15rem; margin-bottom: 14px; }
ol.balken { list-style: none; padding: 0; margin: 0; }
ol.balken li { display: grid; grid-template-columns: minmax(110px, 200px) 1fr 70px; gap: 12px; align-items: center; padding: 5px 0; font-size: 15px; }
ol.balken .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ol.balken .w { text-align: right; font-weight: 600; }
ol.balken rect { fill: var(--ink); } ol.balken li.h rect { fill: var(--akzent); } ol.balken li.h .n { font-weight: 700; }

/* Austausch */
.austausch { margin-top: 64px; max-width: 900px; }
.austausch h3 { font-size: 1.15rem; margin-bottom: 14px; }
.austausch ol { list-style: none; padding: 0; margin: 0; }
.a-kopf, .austausch ol li { display: grid; grid-template-columns: 56px 1fr 1fr 64px; gap: 10px; align-items: center; font-size: 15px; }
.a-kopf { font-size: 13px; color: var(--grau); font-weight: 600; padding-bottom: 6px; border-bottom: 1.5px solid var(--ink); }
.a-kopf span:nth-child(2) { text-align: right; }
.austausch ol li { padding: 6px 0; border-bottom: 1px solid var(--linie); }
.austausch .n { font-weight: 700; }
.austausch .links, .austausch .rechts { display: grid; gap: 6px; align-items: center; }
.austausch .links { grid-template-columns: 1fr auto; } .austausch .links em { order: -1; }
.austausch .rechts { grid-template-columns: 1fr auto; }
.austausch em { font-style: normal; font-size: 13px; color: var(--ink-2); min-width: 34px; text-align: right; }
.austausch .saldo { text-align: right; font-weight: 700; }
@media (max-width: 520px) { .a-kopf, .austausch ol li { grid-template-columns: 44px 1fr 1fr 52px; gap: 6px; } .a-kopf { font-size: 11px; } }
.notiz-box { margin-top: 40px; border: 2px solid var(--ink); padding: 20px 24px; max-width: 760px; }
.notiz-box h3 { font-size: 1rem; margin-bottom: 6px; }

/* Wachsen beim Hereinscrollen */
.wachs, .wachs-l, .wachs-h { transition: transform 1.1s var(--ease); transform-box: fill-box; }
.wachs { transform-origin: left center; } .wachs-l { transform-origin: right center; } .wachs-h { transform-origin: center bottom; }
.js .abschnitt:not(.sichtbar) .wachs, .js .abschnitt:not(.sichtbar) .wachs-l { transform: scaleX(0); }
.js .abschnitt:not(.sichtbar) .wachs-h { transform: scaleY(0); }

/* ---------- Teil B ---------- */
.teil-b { position: relative; }
.wasserzeichen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.wasserzeichen text { font: 600 20px "Inter Tight"; fill: var(--ink); opacity: .06; }
.trenner h2, .tor h2 { color: var(--papier); }
.trenner .fuer { margin-top: 28px; font-size: 14px; color: #a9a9a4; }
.kurzfassung { display: grid; gap: 0 28px; }
@media (min-width: 760px) { .kurzfassung { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .kurzfassung { grid-template-columns: repeat(3, 1fr); } }
.dunkel .kurz { border-color: var(--papier); }
.dunkel .k-titel { color: #a9a9a4; }
.kurz p:last-child { font-size: 15px; color: #c9c9c4; }
.kurz:nth-child(2) .k-wert { color: #ff4fa6; }   /* der eigene Rang ist der Befund; helleres Magenta für Kontrast auf Schwarz */

.platz { margin: 0; max-width: 980px; display: grid; gap: 8px; }
.leiter-svg { width: 100%; height: auto; display: none; }
.leiter-svg .rang { font: 600 22px "Inter Tight"; fill: var(--ink-2); }
.leiter-svg .wert { fill: var(--ink); } .leiter-svg .du .wert { fill: var(--akzent); }
.leiter-svg .spanne { fill: var(--hell); opacity: .9; } .leiter-svg .spanne-ende { stroke: var(--mittel); stroke-width: 2; }
.leiter-svg .du .rang { fill: var(--akzent); font-weight: 800; }
.leiter-svg .diff { font: 700 20px "Inter Tight"; fill: var(--akzent); text-anchor: end; }
.platz-werte { list-style: none; padding: 0; margin: 0; }
.platz-werte li { display: grid; grid-template-columns: 80px 1fr 1fr 80px; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 15px; align-items: center; }
.platz-werte li.kopf { font-size: 13px; color: var(--grau); font-weight: 600; border-bottom: 1.5px solid var(--ink); }
.platz-werte li > :nth-child(n+2) { text-align: right; }
.platz-werte li.du { background: var(--akzent-soft); font-weight: 700; }
.platz-werte li.du span:first-child { color: var(--akzent); }
@media (min-width: 760px) {
  .platz { grid-template-columns: 3fr 2fr; gap: 40px; align-items: start; }
  .leiter-svg { display: block; }
  .platz .legende { grid-column: 1 / -1; }
}
.gem-b { margin: 0; max-width: 820px; }
.leiter-b { margin: 0; max-width: 980px; display: grid; gap: 20px; }
.treppe { width: 100%; height: auto; }
.treppe .stufe { fill: var(--ink); } .treppe .du .stufe { fill: var(--akzent); }
.treppe .rang { font: 600 22px "Inter Tight"; text-anchor: middle; fill: var(--ink-2); } .treppe .du .rang { fill: var(--akzent); font-weight: 800; }
.treppe .achse { font: 500 18px "Inter Tight"; fill: var(--grau); }
.stufen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0 16px; }
.stufen li { border-top: 1px solid var(--ink); padding: 10px 8px 14px; display: grid; gap: 2px; font-size: 14px; }
.stufen b { font-size: 1.4rem; letter-spacing: -.02em; } .stufen li.du { background: var(--akzent-soft); } .stufen li.du span:first-child { color: var(--akzent); font-weight: 700; }

/* Platzhalter im Teaser: erfundene Werte, unscharf. Die echten Zahlen sind nicht auf der Seite. */
.v { filter: blur(7px); user-select: none; -webkit-user-select: none; }
.teaser { position: relative; opacity: .85; }
.teaser-rahmen { position: relative; }
.teaser-hinweis { position: sticky; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 6; width: max-content; max-width: calc(100% - 32px); margin: 0 auto 32px; background: var(--ink); color: var(--papier); padding: 10px 16px; font-size: 15px; font-weight: 600; }
.teaser-hinweis a { color: var(--papier); margin-left: 8px; }
.teaser details { pointer-events: none; }

/* Zahlschranke */
.tor .lead { max-width: 52ch; margin-bottom: 28px; }
.preis-gross { font-size: clamp(2.6rem, 2rem + 3vw, 4rem); font-weight: 800; letter-spacing: -.04em; margin-bottom: 24px; }
.preis-gross span { font-size: 1.1rem; font-weight: 500; color: #a9a9a4; letter-spacing: 0; }
.tor-form { display: grid; gap: 10px; max-width: 460px; margin-bottom: 18px; }
.tor-form label { font-weight: 600; font-size: 15px; }
.tor .klein { color: #a9a9a4; max-width: 52ch; margin-top: 10px; }
.tor .klein a { color: var(--papier); }
.tor input { background: var(--ink); color: var(--papier); border-color: var(--papier); }
.tor .link-knopf { color: var(--papier); }

/* ---------- Gespräch ---------- */
.gespraech .zwei { display: grid; gap: 40px; }
@media (min-width: 1100px) { .gespraech .zwei { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } }
.gespraech h2 { font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin-bottom: 24px; }
.gespraech .lead { margin-bottom: 18px; }
.gespraech .zwei > div > p:not(.lead) { color: var(--ink-2); margin-bottom: 18px; max-width: 46ch; }

/* ---------- Anhang ---------- */
.anhang { min-height: 0; border-top: 2px solid var(--ink); }
.klapp { border-bottom: 1px solid var(--linie); max-width: 900px; }
.klapp > summary { font-size: 1.25rem; padding: 20px 0; }
.klapp p, .klapp ul { color: var(--ink-2); max-width: 70ch; margin-bottom: 14px; }
.glossar { display: grid; gap: 0 40px; margin: 0 0 24px; }
@media (min-width: 760px) { .glossar { grid-template-columns: 1fr 1fr; } }
.glossar div { padding: 12px 0; border-top: 1px solid var(--linie); }
.glossar dt { font-weight: 700; } .glossar dd { margin: 2px 0 0; color: var(--ink-2); font-size: 16px; }

/* ---------- Formulare und Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border: 2px solid var(--ink); background: var(--ink); color: var(--papier);
  font-weight: 600; cursor: pointer; text-decoration: none; transition: background-color .25s var(--ease), color .25s var(--ease); }
.knopf:hover { background: var(--papier); color: var(--ink); }
.knopf.hell { background: var(--papier); color: var(--ink); border-color: var(--papier); }
.knopf.hell:hover { background: var(--ink); color: var(--papier); }
.knopf.voll { width: 100%; }
.knopf.klein { min-height: 38px; padding: 0 12px; font-size: 14px; background: var(--papier); color: var(--ink); }
.knopf.klein:hover { background: var(--ink); color: var(--papier); }
.knopf[disabled] { opacity: .4; cursor: not-allowed; }
.link-knopf { background: none; border: 0; padding: 8px 0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-knopf.rot { color: #b00020; }
.karte-form { display: grid; gap: 14px; background: var(--papier); border: 2px solid var(--ink); padding: 24px; max-width: 560px; }
.karte-form.breit { max-width: 900px; }
.felder { display: grid; gap: 8px; }
.karte-form label, .felder label { font-weight: 600; font-size: 15px; margin-top: 6px; }
label span { font-weight: 400; color: var(--grau); }
input:not([type=checkbox]), select, textarea { width: 100%; min-height: 50px; border: 2px solid var(--ink); border-radius: 0; background: var(--papier); padding: 10px 14px; font-size: 17px; -webkit-appearance: none; appearance: none; }
textarea { min-height: 96px; resize: vertical; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 40px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: 0; }
.check { display: flex !important; gap: 12px; align-items: flex-start; font-weight: 400 !important; font-size: 15px !important; }
.check input { width: 22px; height: 22px; accent-color: var(--ink); margin: 2px 0 0; flex: none; }
.meldung { background: var(--flaeche); color: var(--ink); border-left: 4px solid var(--ink); padding: 12px 16px; font-weight: 500; max-width: 560px; }
.meldung.fehler { border-color: var(--akzent); }
.dunkel .meldung { background: #262625; color: var(--papier); border-color: var(--papier); }

.schmal { max-width: 640px; margin: 0 auto; padding: max(40px, env(safe-area-inset-top)) var(--rand) 80px; }
.schmal h1 { font-size: clamp(2.4rem, 1.6rem + 4vw, 4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 24px 0 16px; }
.schmal > p { margin-bottom: 14px; color: var(--ink-2); }
.schmal .lead { margin-bottom: 28px; }
.marke { font-weight: 800; letter-spacing: -.02em; font-size: 1.2rem; text-decoration: none; }

/* ---------- Admin ---------- */
.admin { background-image: none; background: var(--flaeche); font-size: 16px; }
.admin-seite { max-width: 1320px; margin: 0 auto; padding: 0 var(--rand) 80px; }
.admin-kopf { display: flex; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 2px solid var(--ink); margin-bottom: 28px; }
.admin-kopf form { margin-left: auto; }
.admin-seite > h1 { font-size: 2.2rem; letter-spacing: -.03em; margin-bottom: 18px; }
.admin .block { background: var(--papier); border: 1px solid var(--linie); padding: 22px 24px; margin-bottom: 20px; }
.admin .block h2 { font-size: 1.15rem; margin: 0 0 14px; }
.admin .block h2:not(:first-child) { margin-top: 24px; }
.admin .zwei { display: grid; gap: 28px; }
@media (min-width: 1000px) { .admin .zwei { grid-template-columns: 1fr 1fr; } }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 20px; }
.kpis div { background: var(--papier); border: 1px solid var(--linie); padding: 16px 18px; display: grid; gap: 2px; }
.kpis b { font-size: 2rem; letter-spacing: -.03em; } .kpis span { font-size: 14px; color: var(--grau); }
.trichter { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.trichter li { display: grid; grid-template-columns: 200px 1fr 48px 52px; gap: 12px; align-items: center; font-size: 15px; }
.trichter b { text-align: right; } .trichter em { font-style: normal; color: var(--grau); font-size: 13px; }
@media (max-width: 640px) { .trichter li { grid-template-columns: 1fr 40px 44px; } .trichter li svg { display: none; } }
.todo { list-style: none; padding: 0; margin: 0; }
.todo li { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--linie); }
.todo small { display: block; color: var(--grau); font-size: 14px; }
.knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
form.inline { display: inline-block; margin: 0 6px 6px 0; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filter input, .filter select { width: auto; min-height: 40px; font-size: 15px; padding: 6px 10px; }
.filter select { padding-right: 34px; }
.filter input { min-width: 220px; }
.personen td small { display: block; color: var(--grau); font-size: 13px; }
.personen td { font-size: 15px; } .personen a { text-decoration: none; }
.chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 8px; border: 1.5px solid var(--ink); white-space: nowrap; }
.c-gut { background: var(--ink); color: var(--papier); } .c-ziel { background: var(--akzent); border-color: var(--akzent); color: var(--papier); }
.c-mittel { background: var(--flaeche); } .c-neu { border-style: dashed; } .c-gesperrt, .c-fehler { border-color: #b00020; color: #b00020; } .c-offen { color: var(--grau); }
.fakten { display: grid; gap: 0; margin: 0; }
.fakten div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linie); font-size: 15px; }
.fakten dt { color: var(--grau); } .fakten dd { margin: 0; }
.aktionen p { margin-bottom: 8px; }
.link-zeile { margin-bottom: 8px; }
tr.weg td { color: var(--grau); text-decoration: line-through; }
details.mail { border-top: 1px solid var(--linie); }
details.mail summary { font-weight: 500; font-size: 15px; }
details.mail pre { white-space: pre-wrap; font: 14px/1.5 ui-monospace, Menlo, monospace; background: var(--flaeche); padding: 14px; margin: 0 0 12px; }
.klein { font-size: 14px; color: var(--grau); }
.admin-band { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--akzent); color: var(--papier); text-align: center; padding: 8px; font-weight: 600; font-size: 14px; }

/* ---------- Ruhe ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js .abschnitt:not(.sichtbar) .wachs, .js .abschnitt:not(.sichtbar) .wachs-l, .js .abschnitt:not(.sichtbar) .wachs-h { transform: none; }
}
@media print {
  body { background: none; } .abschnitt { min-height: 0; break-inside: avoid; } .buehne { position: static; }
  .dunkel { background: none; color: var(--ink); } .dunkel::before, .dunkel::after { display: none; }
  form, .gespraech, .teaser-hinweis { display: none !important; } details > *:not(summary) { display: block; }
}