@import url("fonts/fonts.css");

/* ═══════════════════════════════════════════════════════════════════════════
   DER STIMMZETTEL – Richtungsvertrag
   Überarbeitung von „Demokratie am Küchentisch" (Nexus)

   THESIS       Die Seite stellt eine Frage und wartet auf eine Entscheidung.
                Nie eine Liste. Abgelehnt: Kachelwand mit Sternchen-Icons,
                Themenraster, Kennzahlen-Dashboard, Fortschrittsbalken mit
                Verlauf, 18 FAQ-Einträge als Ersatz für Erklärung.
   OWN-WORLD    Amtlicher Stimmzettel. Bogenpapier in neutralem Grau,
                Druckschwarz, ein amtliches Rot ausschließlich für die eigene
                Entscheidung, Stempelblau für alles, was die Allgemeinheit
                betrifft, Signalgelb für die eigene Marke im Ergebnis. Echte
                Ankreuzfelder mit Doppelrahmen, Perforation zwischen den
                Vorschlägen, Falzmarken am Blattrand, Zählwerte in Mono.
                Chivo als Amtsgrotesk, Petrona für gesprochene Sätze.
   STORY        Ein Besucher liest einen Satz, versteht den Auftrag und
                entscheidet sofort – ohne Konto. Nach jeder Entscheidung sieht
                er, was sich bewegt hat. Nach fünfzehn will er sie behalten.
   1. VIEWPORT  Blattkopf mit dem Auftrag in einer Zeile, darunter die Frage,
                darunter zwei Stimmzettel-Zeilen mit Zitat, Quelle, Hörclip und
                Ankreuzfeld, getrennt durch eine Perforation. Unten der Stand.
   FORM         Amtlicher Stimmzettel, Blatt für Blatt.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bogen:   #e4e4de;
  --bogen-2: #d8d8d1;
  --bogen-3: #c9c9c1;
  --druck:   #16181a;
  --druck-2: #45484c;
  --druck-3: #5c6065;
  --rot:     #c8102e;   /* die eigene Entscheidung */
  --rot-d:   #9c0c23;
  --blau:    #17395e;   /* die Allgemeinheit */
  --blau-2:  #0f2740;
  --blau-3:  #2b5583;
  --gelb:    #f0c419;   /* die eigene Marke im Ergebnis */

  --f-amt:  "Chivo", "Helvetica Neue", Arial, sans-serif;
  --f-wort: "Petrona", Georgia, "Times New Roman", serif;
  --f-zahl: "Chivo Mono", ui-monospace, Menlo, monospace;

  --rand: clamp(16px, 3.4vw, 56px);
  --strich: 1.5px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bogen);
  color: var(--druck);
  font-family: var(--f-amt);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
::selection { background: var(--gelb); color: var(--druck); }
a { color: var(--druck); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; hyphens: auto; }
p { margin: 0 0 1em; max-width: 66ch; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }
li, dd, dt, th, td, summary { overflow-wrap: break-word; }

.springen {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--druck); color: var(--bogen);
  padding: .8rem 1.2rem; font: 600 .9rem/1 var(--f-amt);
}
.springen:focus { left: 0; }

.nurlesbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Blattkopf ────────────────────────────────────────────────────────────
   Kopfzeile eines amtlichen Bogens: Behördenzeile, Gegenstand, Blattzähler. */

.kopf {
  border-bottom: var(--strich) solid var(--druck);
  padding: 12px var(--rand);
  display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap;
}

.marke { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.marke svg { width: 26px; height: 26px; flex: none; }
.marke b {
  display: block; font-size: 14.5px; font-weight: 700; line-height: 1.15; letter-spacing: -.015em;
}
.marke small {
  display: block; margin-top: 2px;
  font: 400 9.5px/1 var(--f-zahl); letter-spacing: .16em; text-transform: uppercase; color: var(--druck-3);
}

.wege { display: flex; gap: clamp(10px, 1.6vw, 24px); margin-left: auto; }
.wege a {
  font: 500 12.5px/1 var(--f-amt); letter-spacing: .06em; text-transform: uppercase;
  color: var(--druck-2); text-decoration: none;
  padding: 7px 0; border-bottom: 2px solid transparent;
  transition: color .18s cubic-bezier(.16,1,.3,1), border-color .18s cubic-bezier(.16,1,.3,1);
}
.wege a:hover { color: var(--druck); border-bottom-color: var(--druck-3); }
.wege a[aria-current="page"] { color: var(--druck); border-bottom-color: var(--rot); }

/* Zählwerk: wie viele Entscheidungen, wie viele Sterne noch */
.stand {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 13px;
  border: var(--strich) solid var(--druck);
  background: var(--bogen-2);
  font: 500 12px/1 var(--f-zahl); letter-spacing: -.01em;
  white-space: nowrap;
}
.stand b { font-weight: 600; }
.stand .teiler { color: var(--druck-3); }

@media (max-width: 720px) {
  .wege { order: 3; flex-basis: 100%; margin-left: 0; justify-content: space-between; }
  .stand { margin-left: auto; }
}

/* ── Das Blatt ───────────────────────────────────────────────────────────── */

.blatt {
  position: relative;
  padding: clamp(20px, 3.2vw, 46px) var(--rand) clamp(28px, 3.4vw, 52px);
  max-width: 1320px; margin: 0 auto;
}

/* Falzmarken am linken und rechten Blattrand */
.blatt::before, .blatt::after {
  content: ""; position: absolute; top: 50%; width: 14px; height: 1px;
  background: var(--druck-3); opacity: .7;
}
.blatt::before { left: 0; }
.blatt::after { right: 0; }
@media (max-width: 900px) { .blatt::before, .blatt::after { display: none; } }

.auftrag {
  max-width: 62ch;
  margin: 0 0 clamp(20px, 2.6vw, 34px);
}
.auftrag h1 {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.08;
  margin-bottom: 12px;
}
.auftrag p {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: var(--druck-2);
  max-width: 58ch;
}
.auftrag .warum {
  display: inline-block; margin-top: 4px;
  font: 500 13px/1 var(--f-amt);
  text-decoration-thickness: 1.5px; text-underline-offset: .22em;
}

/* ── Die Frage ───────────────────────────────────────────────────────────── */

.frage {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 11px; margin-bottom: 0; max-width: none;
  border-bottom: 3px solid var(--druck);
  font: 700 clamp(1.05rem, 1.7vw, 1.32rem)/1.2 var(--f-amt);
  letter-spacing: -.02em;
}
.frage .nr {
  font: 500 12px/1 var(--f-zahl); letter-spacing: .08em; text-transform: uppercase;
  color: var(--druck-3); margin-left: auto; white-space: nowrap;
}

/* ── Die zwei Vorschläge ─────────────────────────────────────────────────── */

.paar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
}
/* Perforation zwischen den Vorschlägen */
.perfo {
  width: 1px; align-self: stretch; margin: 0 clamp(14px, 2.4vw, 40px);
  background: repeating-linear-gradient(180deg, var(--druck-3) 0 5px, transparent 5px 11px);
  opacity: .85;
}
@media (max-width: 900px) {
  .paar { grid-template-columns: 1fr; }
  .perfo {
    width: auto; height: 1px; margin: clamp(14px, 3vw, 24px) 0;
    background: repeating-linear-gradient(90deg, var(--druck-3) 0 5px, transparent 5px 11px);
  }
}

.wahl { display: flex; flex-direction: column; min-width: 0; }

/* Die ganze Fläche ist die Stimmabgabe – nicht ein Sternchen in der Ecke. */
.flaeche {
  flex: 1;
  display: grid; grid-template-rows: 1fr auto;
  gap: 18px;
  width: 100%; text-align: left;
  padding: clamp(18px, 2.2vw, 28px) clamp(16px, 2vw, 26px) clamp(16px, 2vw, 22px);
  background: transparent; color: inherit;
  border: var(--strich) solid var(--druck);
  cursor: pointer; font: inherit;
  transition: background .16s cubic-bezier(.16,1,.3,1), box-shadow .16s cubic-bezier(.16,1,.3,1);
}
.flaeche:hover { background: var(--bogen-2); }
.flaeche:hover .feld { border-color: var(--rot); }
.flaeche[data-gewaehlt="ja"] { background: var(--bogen-2); box-shadow: inset 0 0 0 2px var(--druck); }

/* Verglichen wird die vollständige Aussage – ein Satz, zu dem man Ja oder
   Nein sagen kann. Das Originalzitat steht darunter als Beleg, nicht als
   Gegenstand: viele Zitate sind Fragmente aus dem Gesprächsfluss. */
.satz {
  margin: 0; max-width: 40ch;
  font-family: var(--f-wort);
  font-size: clamp(1.1rem, 1.85vw, 1.44rem);
  line-height: 1.36; font-weight: 400;
  letter-spacing: -.003em;
  text-wrap: pretty;
}

.beleg {
  margin: 14px 0 0; max-width: 44ch;
  padding-left: 13px;
  border-left: 1px solid var(--druck-3);
  font: italic 400 .92rem/1.5 var(--f-wort);
  color: var(--druck-2);
}
.beleg::before { content: "„"; }
.beleg::after  { content: "“"; }
.beleg[hidden] { display: none; }

.unterzeile { display: flex; align-items: flex-end; gap: 16px; }

.quelle {
  margin: 0; flex: 1; min-width: 0;
  font: 400 12.5px/1.45 var(--f-amt); color: var(--druck-3);
}
.quelle b { display: block; font-weight: 600; color: var(--druck-2); font-size: 13px; }

/* Das Ankreuzfeld: Doppelrahmen wie auf dem Bogen, das Kreuz wird gezeichnet */
.feld {
  flex: none; position: relative;
  width: 46px; height: 46px;
  border: 2.5px solid var(--druck);
  background: var(--bogen);
  transition: border-color .16s;
}
.feld::before {
  content: ""; position: absolute; inset: 3px; border: 1px solid var(--druck); opacity: .45;
}
.feld svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.feld svg path {
  stroke: var(--rot); stroke-width: 5; stroke-linecap: round; fill: none;
  stroke-dasharray: 46; stroke-dashoffset: 46;
}
.flaeche[data-gewaehlt="ja"] .feld svg path { animation: kreuz .28s cubic-bezier(.16, 1, .3, 1) forwards; }
.flaeche[data-gewaehlt="ja"] .feld svg path:nth-child(2) { animation-delay: .1s; }
@keyframes kreuz { to { stroke-dashoffset: 0; } }

/* ── Hörclip und Quelle unter dem Vorschlag ──────────────────────────────── */

.wahl-fuss {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 2px 0;
}
.hoeren, .quelle-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px;
  background: transparent; color: var(--druck-2);
  border: 1px solid var(--druck-3);
  font: 500 12px/1 var(--f-amt); letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  transition: background .16s cubic-bezier(.16,1,.3,1), color .16s, border-color .16s;
}
.hoeren:hover, .quelle-link:hover { background: var(--druck); color: var(--bogen); border-color: var(--druck); }
.hoeren[aria-pressed="true"] { background: var(--druck); color: var(--bogen); border-color: var(--druck); }
.hoeren svg { flex: none; }
.hoeren[hidden] { display: none; }

/* Laufbalken des Hörclips */
.hoeren .lauf {
  display: block; width: 34px; height: 3px; background: currentColor; opacity: .3; position: relative;
}
.hoeren .lauf i {
  position: absolute; inset: 0 auto 0 0; width: var(--fort, 0%); background: currentColor; opacity: 1;
}

/* ── Ausweichmöglichkeiten ───────────────────────────────────────────────── */

.ausweich {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: clamp(20px, 2.6vw, 30px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px dashed var(--druck-3);
}
.ausweich p { margin: 0; font: 400 12.5px/1.5 var(--f-amt); color: var(--druck-3); max-width: 40ch; }
.ausweich .rechts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

.knopf {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; cursor: pointer;
  background: transparent; color: var(--druck);
  border: var(--strich) solid var(--druck);
  font: 500 12.5px/1 var(--f-amt); letter-spacing: .02em;
  text-decoration: none;
  transition: background .16s cubic-bezier(.16,1,.3,1), color .16s;
}
.knopf:hover { background: var(--druck); color: var(--bogen); }
.knopf--voll { background: var(--druck); color: var(--bogen); }
.knopf--voll:hover { background: var(--rot); border-color: var(--rot); }
.knopf--rot { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf--rot:hover { background: var(--rot-d); border-color: var(--rot-d); }
.knopf--hell { border-color: var(--bogen); color: var(--bogen); }
.knopf--hell:hover { background: var(--bogen); color: var(--druck); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Rückmeldung nach der Entscheidung ───────────────────────────────────── */

.echo {
  margin-top: clamp(18px, 2.2vw, 26px);
  padding: 13px 16px;
  border-left: 0; border: var(--strich) solid var(--druck);
  background: var(--bogen-2);
  font: 500 13.5px/1.5 var(--f-amt);
  display: none;
}
.echo.an { display: block; }
.echo b { font-weight: 700; }
.echo .platz { font-family: var(--f-zahl); font-weight: 600; }

/* ── Fortschrittsleiste als Zählstriche, nicht als Balken ────────────────── */

.zaehlung {
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  margin-top: clamp(20px, 2.6vw, 32px);
}
.zaehlung i {
  display: block; width: 3px; height: 15px; background: var(--druck-3); opacity: .38;
}
.zaehlung i.voll { background: var(--rot); opacity: 1; }
.zaehlung .text {
  margin-left: 12px; font: 500 12px/1 var(--f-zahl); color: var(--druck-3); letter-spacing: -.01em;
}

/* ── Ergebnis: die Welt der Allgemeinheit, in Stempelblau getränkt ───────── */

.amtlich { background: var(--blau); color: #eef2f6; }
.amtlich .kopf { border-bottom-color: rgba(238,242,246,.32); }
.amtlich .marke small { color: #a9bdd2; }
.amtlich .wege a { color: #c3d3e2; }
.amtlich .wege a:hover { color: #fff; border-bottom-color: #7f9bb8; }
.amtlich .wege a[aria-current="page"] { color: #fff; border-bottom-color: var(--gelb); }
.amtlich .stand { background: var(--blau-2); border-color: rgba(238,242,246,.4); color: #eef2f6; }
.amtlich .blatt::before, .amtlich .blatt::after { background: #7f9bb8; }
.amtlich a { color: #eef2f6; }
.amtlich .knopf { color: #eef2f6; border-color: #eef2f6; }
.amtlich .knopf:hover { background: #eef2f6; color: var(--blau); }

.tafelkopf {
  display: flex; align-items: flex-end; gap: 18px 30px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 0;
  border-bottom: 3px solid #eef2f6;
}
.tafelkopf h1 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.02; }
.tafelkopf p { margin: 8px 0 0; color: #b9cbdc; font-size: .96rem; max-width: 52ch; }
.tafelkopf .zahlen { margin-left: auto; display: flex; gap: 22px; }
.tafelkopf .zahlen div { text-align: right; }
.tafelkopf .zahlen dt { font: 400 10px/1 var(--f-zahl); letter-spacing: .16em; text-transform: uppercase; color: #a9bdd2; }
.tafelkopf .zahlen dd {
  margin: 7px 0 0; font: 600 clamp(1.3rem, 2.2vw, 1.9rem)/1 var(--f-zahl);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}

/* Auszählung: eine Zeile je Platz, wie ein Wahlprotokoll */
.auszaehlung { list-style: none; margin: 0; padding: 0; }
.auszaehlung li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 132px;
  gap: 6px clamp(12px, 2vw, 26px); align-items: baseline;
  padding: 15px 0 17px;
  border-bottom: 1px solid rgba(238,242,246,.22);
}
.auszaehlung li:first-child { border-top: 1px solid rgba(238,242,246,.22); }
.auszaehlung .platz {
  font: 600 clamp(1rem, 1.5vw, 1.2rem)/1 var(--f-zahl);
  font-variant-numeric: tabular-nums; color: #b9cbdc;
}
.auszaehlung .satz {
  margin: 0; font-family: var(--f-wort); font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.35; max-width: 62ch;
}
.auszaehlung .herkunft {
  margin: 8px 0 0; font: 400 12px/1.4 var(--f-amt); color: #a9bdd2;
  display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.auszaehlung .herkunft .feldmarke {
  padding: 2px 8px; border: 1px solid rgba(238,242,246,.4); font-size: 11px;
}
.auszaehlung .wert { text-align: right; }
.auszaehlung .wert b {
  display: block; font: 600 1.05rem/1 var(--f-zahl); font-variant-numeric: tabular-nums;
}
.auszaehlung .wert .balken {
  display: block; height: 5px; margin-top: 8px; background: rgba(238,242,246,.2);
}
.auszaehlung .wert .balken i { display: block; height: 100%; background: #7f9bb8; }
/* Eigene Stimme wird gelb markiert */
.auszaehlung li[data-meins="ja"] .platz { color: var(--gelb); }
.auszaehlung li[data-meins="ja"] .wert .balken i { background: var(--gelb); }
.auszaehlung li[data-meins="ja"] .wert b::after {
  content: "★"; margin-left: 7px; color: var(--gelb); font-size: .85em;
}

@media (max-width: 760px) {
  .auszaehlung li { grid-template-columns: 42px minmax(0, 1fr); }
  .auszaehlung .wert { grid-column: 2; text-align: left; }
  .auszaehlung .wert .balken { max-width: 200px; }
}

/* ── Was noch keine Stimme hat ───────────────────────────────────────────
   Kein Fehlerzustand, sondern der eigentliche Aufruf: bei den meisten Sätzen
   wäre die nächste Stimme die erste überhaupt. */

.rest {
  margin-top: clamp(26px, 3.2vw, 44px);
  border: var(--strich) solid currentColor;
}
.rest .kopfzeile {
  display: block; padding: 8px 16px;
  background: #eef2f6; color: var(--blau);
  font: 600 10.5px/1.5 var(--f-zahl); letter-spacing: .2em; text-transform: uppercase;
}
.rest .restinhalt { padding: clamp(18px, 2.4vw, 26px); }
.rest p { max-width: 62ch; }
.rest .erste { list-style: none; margin: 12px 0 0; padding: 0; }
.rest .erste li {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 18px;
  padding: 10px 0; border-top: 1px solid rgba(238,242,246,.22);
}
.rest .rangzahl { font: 500 11.5px/1.5 var(--f-zahl); color: var(--gelb); white-space: nowrap; }
.rest .satzchen { font-family: var(--f-wort); font-size: .99rem; line-height: 1.4; }
@media (max-width: 620px) { .rest .erste li { grid-template-columns: 1fr; gap: 3px; } }

/* ── Filterleiste ────────────────────────────────────────────────────────── */

.filter { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(20px, 2.6vw, 30px) 0; }
.filter button {
  padding: 8px 14px; cursor: pointer;
  background: transparent; color: inherit;
  border: 1px solid currentColor;
  font: 500 12.5px/1 var(--f-amt);
  transition: background .16s cubic-bezier(.16,1,.3,1), color .16s;
}
.filter button[aria-pressed="true"] { background: currentColor; }
.filter button[aria-pressed="true"] span { color: var(--blau); }
.amtlich .filter button:hover { background: rgba(238,242,246,.16); }

/* ── Mein Bogen ──────────────────────────────────────────────────────────── */

.programm { list-style: none; margin: clamp(20px, 2.6vw, 30px) 0 0; padding: 0; max-width: 920px; }
.programm li {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 8px clamp(12px, 2vw, 24px); align-items: baseline;
  padding: 16px 0 18px; border-bottom: 1px solid var(--bogen-3);
}
.programm li:first-child { border-top: var(--strich) solid var(--druck); }
.programm .rang { font: 600 1rem/1 var(--f-zahl); font-variant-numeric: tabular-nums; color: var(--druck-3); }
.programm .satz {
  margin: 0; font-family: var(--f-wort); font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.36;
}
.programm .herkunft { margin: 7px 0 0; font: 400 12px/1.4 var(--f-amt); color: var(--druck-3); }
.programm .weg {
  padding: 7px 12px; cursor: pointer; align-self: center;
  background: transparent; border: 1px solid var(--druck-3); color: var(--druck-2);
  font: 500 11.5px/1 var(--f-amt);
  transition: background .16s, color .16s, border-color .16s;
}
.programm .weg:hover { background: var(--rot); border-color: var(--rot); color: #fff; }

.leerbogen {
  padding: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 36px);
  border: var(--strich) dashed var(--druck-3);
  text-align: center;
}
.leerbogen h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 10px; }
.leerbogen p { margin: 0 auto 20px; color: var(--druck-2); max-width: 44ch; }

/* ── Abschnitte auf Textseiten ───────────────────────────────────────────── */

.teil { padding: clamp(28px, 3.6vw, 60px) var(--rand); max-width: 1320px; margin: 0 auto; }
.teil + .teil { border-top: 1px solid var(--bogen-3); }

.marke-zeile {
  display: flex; align-items: center; gap: 13px; max-width: none;
  margin: 0 0 14px;
  font: 500 11px/1 var(--f-zahl); letter-spacing: .18em; text-transform: uppercase; color: var(--druck-3);
}
.marke-zeile::after { content: ""; flex: 1; height: 1px; background: var(--bogen-3); }

.text h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 14px; }
.text h3 { font-size: 1.08rem; margin: 1.8em 0 8px; }
.text h3:first-child { margin-top: 0; }
.text ul, .text ol { max-width: 66ch; padding-left: 1.2em; margin: 0 0 1em; }
.text li { margin-bottom: .42em; }
.text dt { font-weight: 700; margin-top: 1.1em; }
.text dd { margin: .25em 0 0; color: var(--druck-2); }
.text a { text-decoration-thickness: 1.5px; text-underline-offset: .2em; }

.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(22px, 3vw, 46px); }
.spalten p { font-size: .97rem; color: var(--druck-2); }

/* Schritte des Verfahrens, als nummerierte Positionen eines Bogens */
.schritte { list-style: none; margin: clamp(18px, 2.4vw, 28px) 0 0; padding: 0; counter-reset: s; }
.schritte li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 26px); align-items: start;
  padding: 18px 0; border-top: 1px solid var(--bogen-3);
}
.schritte li::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font: 500 13px/1.5 var(--f-zahl); color: var(--druck-3);
}
.schritte h3 { margin: 0 0 6px; font-size: 1.06rem; }
.schritte p { margin: 0; font-size: .97rem; color: var(--druck-2); }

/* Hinweis als amtlicher Vermerk mit Kopfleiste */
.vermerk { border: var(--strich) solid var(--druck); background: var(--bogen-2); max-width: 72ch; margin-bottom: 32px; }
.vermerk .kopfzeile {
  display: block; padding: 7px 15px; background: var(--druck); color: var(--bogen);
  font: 600 10px/1.5 var(--f-zahl); letter-spacing: .2em; text-transform: uppercase;
}
.vermerk p { margin: 0; padding: 15px 17px; font-size: .94rem; max-width: none; }

/* ── Konto sichern ───────────────────────────────────────────────────────── */

.sicherung {
  margin-top: clamp(24px, 3vw, 40px);
  border: 2.5px solid var(--druck);
  background: var(--bogen-2);
}
.sicherung .kopfzeile {
  display: block; padding: 8px 16px; background: var(--druck); color: var(--bogen);
  font: 600 10.5px/1.5 var(--f-zahl); letter-spacing: .2em; text-transform: uppercase;
}
.sicherung .inhalt { padding: clamp(18px, 2.4vw, 28px); }
.sicherung h2 { font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: 10px; }
.sicherung p { color: var(--druck-2); font-size: .97rem; }
.sicherung form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: flex-start; }
.sicherung input {
  flex: 1 1 240px; min-width: 0; padding: 12px 14px;
  background: var(--bogen); color: var(--druck);
  border: var(--strich) solid var(--druck-3); border-radius: 0;
  font: 400 1rem/1.3 var(--f-amt);
}
.sicherung input:focus { outline: 0; border-color: var(--druck); box-shadow: inset 0 0 0 1px var(--druck); }
.sicherung .fehler { flex-basis: 100%; margin: 0; font: 500 12.5px/1.4 var(--f-amt); color: var(--rot); }
.sicherung .quittung {
  display: none; margin-top: 16px; padding: 12px 15px;
  border: var(--strich) solid var(--druck); background: var(--bogen);
  font-size: .94rem;
}
.sicherung .quittung.an { display: block; }

/* ── Fuß ─────────────────────────────────────────────────────────────────── */

.fuss {
  border-top: var(--strich) solid var(--druck);
  padding: clamp(26px, 3.4vw, 46px) var(--rand) 20px;
  max-width: 1320px; margin: 0 auto;
}
.fuss-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.fuss h4 { margin: 0 0 12px; font: 600 10px/1 var(--f-zahl); letter-spacing: .18em; text-transform: uppercase; color: var(--druck-3); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 8px; }
.fuss a { font-size: .95rem; text-decoration: none; border-bottom: 1px solid transparent; }
.fuss a:hover { border-bottom-color: var(--druck); }
.fuss p { font-size: .94rem; color: var(--druck-2); }
.fuss .schluss {
  margin-top: clamp(24px, 3vw, 40px); padding-top: 16px; border-top: 1px solid var(--bogen-3);
  display: flex; flex-wrap: wrap; gap: 8px 24px; max-width: none;
  font: 500 10.5px/1.6 var(--f-zahl); letter-spacing: .1em; text-transform: uppercase; color: var(--druck-3);
}
.fuss .schluss .kz { background: var(--druck); color: var(--bogen); padding: 3px 8px; }

.amtlich .fuss { border-top-color: rgba(238,242,246,.32); }
.amtlich .fuss h4, .amtlich .fuss p, .amtlich .fuss .schluss { color: #a9bdd2; }
.amtlich .fuss a { color: #eef2f6; }
.amtlich .fuss a:hover { border-bottom-color: #eef2f6; }
.amtlich .fuss .schluss { border-top-color: rgba(238,242,246,.22); }
.amtlich .fuss .schluss .kz { background: #eef2f6; color: var(--blau); }

/* ── Der eine inszenierte Moment: das Blatt wird umgelegt ────────────────── */

.paar { transition: opacity .2s ease-out, transform .2s ease-out; }
.blatt[data-wechsel="raus"] .paar { opacity: 0; transform: translateY(-10px); }
.blatt[data-wechsel="rein"] .paar { animation: legen .34s cubic-bezier(.16, 1, .3, 1); }
@keyframes legen {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .paar, .blatt[data-wechsel="rein"] .paar { transition: none; animation: none; }
  .flaeche[data-gewaehlt="ja"] .feld svg path { animation: none; stroke-dashoffset: 0; }
  * { transition-duration: .01ms !important; }
}