/* ──────────────────────────────────────────────────────────────────────────
   autofrei leben! — Gestaltungssystem, Fassung 2.

   Drei Quellen, aus denen dieses Aussehen kommt:

   1. Das Buch des Vereins. Es hat bereits ein Farbsystem — im
      Inhaltsverzeichnis trägt jedes Kapitel eine eigene Farbe. Das wird
      hier übernommen: dieselben sieben Farben, dieselbe Zuordnung. Damit
      sind die sechs Kapitel ohne ein einziges Bild unterscheidbar.
   2. Das Grün des Buchumschlags ist die Vereinsfarbe. Es trägt das Logo.
   3. Die gezeichnete Anmutung, die dem Verein an vergleichbaren Seiten
      gefällt: Londrina Solid als Displayschrift, dazu die Straßenzeichnung
      und der Verzerrungsfilter, der Linien wackeln lässt.

   Gelesen wird trotzdem in einer richtigen Textschrift. Eine Displayschrift
   im Fließtext ist hübsch und unlesbar; das ist der Fehler, den vergleichbare
   Seiten machen.

   Alle Schriften liegen selbst gehostet. Keine Anfrage an einen fremden
   Server — der Verein wirbt damit, keine Daten weiterzugeben.
   ────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:'Londrina'; src:url('/assets/fonts/londrina-400-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  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:'Londrina'; src:url('/assets/fonts/londrina-900-latin.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
  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:'Archivo'; src:url('/assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
  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:'Archivo'; src:url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --papier:#fbf8f1;
  --papier-2:#f3eddf;
  --tinte:#2b2b28;
  --tinte-2:#54544e;
  --tinte-3:#7c7c74;
  --linie:#2b2b2820;
  --linie-stark:#2b2b2842;

  /* Vereinsgrün vom Buchumschlag */
  --gruen:#2f8f3e;
  --gruen-dunkel:#256f31;

  /* Handlungsfarbe: das Terrakotta aus dem Kapitel „Transporte“.
     Dunkel genug, dass weiße Schrift darauf die Schwelle überschreitet. */
  --rot:#b2452a;
  --rot-hell:#c1553f;
  --rot-blass:#f8ebe6;
  --gelb:#f5cf5a;

  /* Die sieben Kapitelfarben des Buches, unverändert übernommen */
  --k-warum:#45aca6;
  --k-umsteigen:#e0913c;
  --k-fuss:#8cae4a;
  --k-rad:#d98ab8;
  --k-bahn:#4cb4dd;
  --k-transport:#c1553f;
  --k-reisen:#7b569e;

  --max:1180px;
  --mass:64ch;          /* Zeilenlänge für Lesetext, unabhängig von --max */
  --display:'Londrina','Archivo',sans-serif;
  --schrift:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --t-riesig:clamp(3.25rem,1.7rem + 6.6vw,6.75rem);
  --t-gross:clamp(2.1rem,1.4rem + 3vw,3.5rem);
  --t-mittel:clamp(1.45rem,1.2rem + 1.1vw,2rem);
  --t-text:clamp(1.0625rem,1.02rem + .2vw,1.1875rem);
  --t-klein:.9375rem;

  --rand:clamp(1.25rem,5vw,3rem);
  --luft:clamp(3.5rem,7vw,6rem);
}

/* ── Breite Schirme ───────────────────────────────────────────────────────
   Grundsatz, der für jede Seite dieses Projekts gilt: Eine Spalte, die auf
   dem Laptop richtig sitzt, wird auf einem 27-Zoll-Schirm zu einem schmalen
   Streifen mit riesigen Löchern links und rechts. Der Behälter wächst
   deshalb in Stufen mit — die Zeilenlänge des Lesetextes aber nicht, die
   bleibt bei rund 64 Zeichen. Breite darf Rastern und Bildern zugutekommen,
   niemals dem Fließtext.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width:1500px){
  :root{ --max:1360px; --t-riesig:clamp(3.25rem,1.7rem + 6.6vw,8rem); --luft:6.5rem }
}
@media (min-width:1900px){
  :root{ --max:1520px; --luft:7.5rem }
}

/* ── Seitenwechsel ────────────────────────────────────────────────────────
   Der Sprung beim Klick auf einen Link ist kein Grund für ein SPA-Framework.
   Browser können das seit einiger Zeit selbst: eine Zeile CSS, kein Skript,
   keine Abhängigkeit, kein einziges Byte zusätzlich. Wo der Browser es nicht
   kann, wird ganz normal navigiert — die Seite bleibt in jedem Fall benutzbar.

   Kopf und Fuß bekommen einen eigenen Namen und bleiben dadurch beim Wechsel
   stehen, statt mitzublenden. Das ist der Unterschied, der es wie eine
   Anwendung wirken lässt statt wie ein Neuladen.
   ────────────────────────────────────────────────────────────────────────── */
@view-transition{ navigation:auto }

.kopf{view-transition-name:kopf}
.fuss{view-transition-name:fuss}
main{view-transition-name:inhalt}

::view-transition-old(inhalt),
::view-transition-new(inhalt){animation-duration:.24s; animation-timing-function:ease}
::view-transition-old(kopf),::view-transition-new(kopf),
::view-transition-old(fuss),::view-transition-new(fuss){animation:none}

/* Wer bewegungsarme Darstellung eingestellt hat, bekommt keinen Übergang.
   Die Pseudoelemente werden von * nicht erfasst, deshalb ausdrücklich. */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{margin:0; background:var(--papier); color:var(--tinte);
  font-family:var(--schrift); font-size:var(--t-text); line-height:1.6;
  -webkit-font-smoothing:antialiased}

/* Displayschrift: gezeichnet, eng, groß. Nur für Überschriften, Zahlen und
   Knöpfe — nie für etwas, das jemand am Stück lesen muss. */
h1,h2,h3,.display{font-family:var(--display); font-weight:900; margin:0;
  line-height:.92; letter-spacing:.004em; text-wrap:balance;
  font-synthesis-weight:none}
h1{font-size:var(--t-riesig)}
h2{font-size:var(--t-gross)}
h3{font-size:var(--t-mittel); line-height:1}
h4{font-family:var(--schrift); font-weight:700; margin:0}
p{margin:0; text-wrap:pretty}
img,svg{max-width:100%; display:block}
ul,ol{margin:0; padding:0}
a{color:inherit; text-underline-offset:.22em; text-decoration-thickness:.08em}
a:hover{text-decoration-color:var(--rot)}
:focus-visible{outline:3px solid var(--rot); outline-offset:3px; border-radius:2px}

.sprung{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--tinte); color:var(--papier); padding:.9rem 1.4rem; font-weight:600}
.sprung:focus{left:0}
.nur-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.innen{max-width:var(--max); margin-inline:auto; padding-inline:var(--rand)}
.band{padding-block:var(--luft)}
.band--tont{background:var(--papier-2)}
.band--dunkel{background:var(--tinte); color:var(--papier)}
.band--dunkel h2,.band--dunkel h3{color:var(--papier)}
.band--eng{padding-block:calc(var(--luft) * .5)}

/* Zwei gleich getönte Bänder nebeneinander verschmelzen zu einem Block und
   der Leser verliert den Schnitt. Eine Haarlinie genügt, um sie zu trennen —
   die Tonfolge selbst bleibt, wie sie abgestimmt ist.
   Ein dunkles Band unmittelbar vor dem Fuß verschmilzt mit ihm; das darf gar
   nicht erst vorkommen und wird zusätzlich in pruefe-texte.py abgefangen. */
.band--tont + .band--tont{border-top:1px solid var(--linie)}
.band--dunkel + .band--dunkel{border-top:1px solid #fbf8f126}

.raster{display:grid; gap:clamp(1.25rem,2.5vw,2rem)}
@media (min-width:46em){
  .raster--2{grid-template-columns:repeat(2,1fr)}
  .raster--3{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:62em){ .raster--4{grid-template-columns:repeat(4,1fr)} }
@media (min-width:1500px){ .karte{padding:1.75rem} .karte p{font-size:1.0625rem} }
@media (min-width:46em) and (max-width:61.99em){ .raster--4{grid-template-columns:repeat(2,1fr)} }

.fuehrung{max-width:20ch}
.fuehrung--breit{max-width:56ch}
.vorspann{font-size:clamp(1.125rem,1.02rem + .5vw,1.375rem); color:var(--tinte-2);
  line-height:1.5; max-width:var(--mass)}
.band--dunkel .vorspann{color:#cec9bd}
.klein{font-size:var(--t-klein); color:var(--tinte-2); max-width:var(--mass)}
.band--dunkel .klein{color:#b0aca2}
.marke{font-family:var(--display); font-weight:400; font-size:1.125rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--rot)}
.band--dunkel .marke{color:var(--gelb)}

/* Die Markierung hängt an der Schriftgröße, nicht an der Zeilenhöhe. Mit
   einem Verlauf über die Zeilenbox rutscht sie bei großzügigem Zeilenabstand
   in die Mitte der Buchstaben und sieht aus wie ein Durchstreichen. */
.hl{box-shadow:inset 0 -.42em 0 var(--gelb); padding-inline:.1em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone}
/* Auf dunklem Grund reicht der Unterstrich nicht: Er deckt nur das untere
   Drittel der Zeile, die dunkle Schrift darüber stünde auf dunklem Grund und
   wäre unlesbar. Dort liegt die Markierung deshalb als volle Fläche hinter
   dem Text. */
.band--dunkel .hl{color:var(--tinte); box-shadow:none; background:var(--gelb);
  padding:.05em .2em; border-radius:2px}

/* ── Knöpfe: gezeichnete Schrift, klare Fläche ────────────────────────── */

.knopf{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--display); font-weight:400; font-size:1.25rem; letter-spacing:.02em;
  padding:.5em 1.1em .42em; border:2.5px solid var(--rot); border-radius:3px;
  background:var(--rot); color:#fff; text-decoration:none; cursor:pointer; line-height:1.15;
  transition:background .14s ease,border-color .14s ease,transform .14s ease}
.knopf:hover{background:var(--gruen-dunkel); border-color:var(--gruen-dunkel)}
.knopf:active{transform:translateY(1px)}
.knopf--still{background:transparent; color:var(--tinte); border-color:var(--linie-stark)}
.knopf--still:hover{background:transparent; color:var(--tinte); border-color:var(--tinte)}
.band--dunkel .knopf--still{color:var(--papier); border-color:#fbf8f155}
.band--dunkel .knopf--still:hover{border-color:var(--papier)}
.knopf--klein{font-size:1.0625rem; padding:.42em .85em .34em}

/* ── Kopf ─────────────────────────────────────────────────────────────── */

/* Der Kopf klebt auf jeder Breite. Damit das auf dem Telefon nicht ein
   Fünftel des Schirms dauerhaft belegt, wird er dort zusammengedrückt:
   kleinere Wortmarke, kleinerer Knopf, engere Abstände — damit Logo und
   Beitritts-Knopf in eine Zeile passen statt in zwei. */
.kopf{border-bottom:2px solid var(--tinte); background:var(--papier);
  position:sticky; top:0; z-index:40}
.kopf__oben{display:flex; align-items:center; gap:1.5rem; padding-block:.85rem; flex-wrap:wrap}
@media (max-width:53.99em){
  .kopf__oben{gap:.7rem; padding-block:.5rem; flex-wrap:nowrap}
  .kopf__tat{gap:.4rem; min-width:0}
  .kopf__tat .knopf{font-size:.8125rem; padding:.45em .6em .38em; text-align:center}
}
.logo{display:flex; align-items:center; gap:1rem; text-decoration:none; flex:none}

/* Wortmarke: zwei Zeilen übereinander, rechtsbündig — dadurch stehen das „i“
   und das „!“ senkrecht untereinander, wie im Originallogo des Vereins. */
.logo__wort{display:flex; flex-direction:column; align-items:flex-end;
  font-family:var(--display); font-weight:900; font-size:2.05rem; line-height:.84;
  letter-spacing:.01em; color:var(--tinte-2)}
@media (max-width:53.99em){ .logo__wort{font-size:1.5rem} }
@media (max-width:23.5em){ .logo__wort{font-size:1.3rem} }
.logo__wort i{font-style:normal; color:var(--gruen)}

.logo__slogan{font-family:var(--display); font-weight:400; font-size:1.0625rem;
  line-height:1.15; color:var(--tinte-2)}
@media (max-width:61.99em){ .logo__slogan{display:none} }

/* Kopf mit dem Originallogo, Aufbau wie im Wireframe-Entwurf: das Logo sitzt
   in einem eigenen Rahmen, der Slogan steht zweizeilig daneben. */
.logo--bild{align-items:center; gap:1rem}
.logo__rahmen{display:block; flex:none; padding:.4rem; background:#fff;
  border:2px solid var(--tinte); border-radius:3px; line-height:0}
.logo__rahmen img{width:9.5rem; height:auto; display:block}
.logo__slogan{font-family:var(--display); font-weight:400; font-size:1.125rem;
  line-height:1.15; color:var(--tinte-2)}
@media (max-width:61.99em){ .logo__slogan{display:none} }
@media (max-width:35.99em){ .logo__rahmen img{width:7.5rem} }
.kopf__tat{display:flex; align-items:center; gap:.6rem; margin-left:auto; flex:none}
@media (max-width:35.99em){ .kopf__tat .knopf--still{display:none} }

.nav{border-top:1px solid var(--linie)}
.nav__liste{display:flex; flex-wrap:wrap; gap:0 1.5rem; list-style:none; padding-block:.4rem; margin:0}
.nav__liste a{display:block; padding-block:.42rem; font-family:var(--display); font-weight:400;
  font-size:1.1875rem; text-decoration:none; border-bottom:2.5px solid transparent}
.nav__liste a:hover{border-bottom-color:var(--linie-stark)}
.nav__liste a[aria-current="page"]{border-bottom-color:var(--rot)}
/* Klappmenü. Der Knopf existiert nur, wenn das Skript ihn angelegt hat —
   ohne Skript greift keine dieser Regeln und die Liste steht offen da. */
.nav__knopf{display:none}
@media (max-width:53.99em){
  .nav__knopf{display:flex; align-items:center; gap:.65rem; width:100%;
    padding:.75rem 0; margin:0; border:0; background:none; cursor:pointer;
    font-family:var(--display); font-weight:400; font-size:1.25rem;
    color:var(--tinte); text-align:left; line-height:1}
  .nav__knopf svg{flex:none; fill:none; stroke:var(--tinte); stroke-width:2.1;
    stroke-linecap:round}
  .nav__knopf[aria-expanded="true"] svg{stroke:var(--rot)}
  .nav__knopf::after{content:'▾'; margin-left:auto; color:var(--rot); font-size:1rem}
  .nav__knopf[aria-expanded="true"]::after{content:'▴'}

  .nav__liste{display:grid; grid-template-columns:1fr 1fr; gap:0 1rem;
    padding-block:.1rem .8rem}
  .nav__liste a{padding-block:.5rem; font-size:1rem}
  .nav[data-klapp="zu"] .nav__liste{display:none}
}

/* ── Aufmacher mit der gezeichneten Straße ────────────────────────────── */

.aufmacher{padding-block:clamp(2.5rem,6vw,4.5rem) 0; position:relative}
.aufmacher h1{max-width:12ch}
.aufmacher .vorspann{margin-top:1.3rem; max-width:40ch}
@media (min-width:1500px){
  .aufmacher .innen{display:grid; grid-template-columns:1.15fr 1fr;
    gap:clamp(3rem,5vw,6rem); align-items:end}
  .aufmacher .wege{margin-top:0; grid-column:2; align-self:end; padding-bottom:.5rem}
  .aufmacher h1,.aufmacher .vorspann{grid-column:1}
}
.strasse{width:100%; height:auto; display:block; margin-top:clamp(2rem,4vw,3.5rem)}
/* Kein Verlauf hinter der Zeichnung: Der erzeugte eine gerade Linie quer
   durchs Bild, die mit dem Gezeichneten nichts zu tun hatte. Himmel und
   Straße stecken jetzt vollständig im SVG — die einzige waagerechte Kante
   ist die gezeichnete Bordsteinkante, und die wackelt mit. */
.strassenband{background:var(--papier)}

.wege{display:grid; gap:1rem; margin-top:2.25rem; max-width:44rem}
@media (min-width:40em){ .wege{grid-template-columns:1fr 1fr} }
.weg{display:block; padding:1.3rem 1.4rem; text-decoration:none; background:#fff;
  border:2.5px solid var(--tinte); border-radius:4px;
  box-shadow:5px 5px 0 var(--linie-stark);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.weg:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--rot); border-color:var(--rot)}
.weg strong{display:block; font-family:var(--display); font-weight:900; font-size:1.5rem; line-height:1}
.weg span{display:block; margin-top:.45rem; font-size:var(--t-klein); color:var(--tinte-2)}
.weg::after{content:'→'; color:var(--rot); font-weight:700; margin-left:.3em}

/* ── Karten, mit optionaler Kapitelfarbe ──────────────────────────────── */

.karte{display:flex; flex-direction:column; padding:1.5rem; background:#fff;
  border:2px solid var(--tinte); border-radius:4px; text-decoration:none;
  box-shadow:4px 4px 0 var(--linie); transition:transform .14s ease,box-shadow .14s ease}
a.karte:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--farbe,var(--rot))}
.karte h3{margin-bottom:.5rem}
.karte p{font-size:1rem; color:var(--tinte-2); line-height:1.55}
/* Der Link wird nach unten geschoben, damit er in allen Karten einer Reihe
   auf derselben Höhe sitzt — unabhängig davon, wie lang der Text darüber ist.
   Vorher hatten Beschreibung und Link beide flex:1 und teilten sich den Rest. */
.karte__mehr{margin-top:auto; padding-top:1.1rem; font-family:var(--display);
  font-size:1.125rem; color:var(--rot)}
.karte__mehr::after{content:' →'}
.band--dunkel .karte{background:#35352f; border-color:#fbf8f133; box-shadow:4px 4px 0 #fbf8f11a}
.band--dunkel .karte p{color:#b0aca2}

/* Kapitelkarte: die Farbe aus dem Buch trägt den Kopf der Karte. */
/* Akzentkarte: die Farbe liegt allein im Schlagschatten. Keine Oberkante —
   die machte aus der Karte eine Registerkarte und trug die Farbe in den
   Innenraum, wo sie mit der Überschrift konkurrierte. Als Schatten bleibt
   sie außerhalb und gibt der Karte nur Tiefe. */
.karte--akzent{box-shadow:5px 5px 0 var(--farbe)}
a.karte--akzent:hover{box-shadow:9px 9px 0 var(--farbe)}
.band--dunkel .karte--akzent{box-shadow:5px 5px 0 var(--farbe)}

/* Farbige Karte: die ganze Fläche in einer Buchfarbe. Nur mit den hellen
   Farben verwenden — die Schrift bleibt dunkel und muss lesbar sein. */
.karte--farbig{background:var(--farbe)}
.karte--farbig p{color:var(--tinte)}
.karte--farbig .karte__mehr{color:var(--tinte)}
a.karte--farbig:hover{box-shadow:7px 7px 0 var(--tinte)}

.karte--kapitel{padding:0; overflow:hidden; border-color:var(--tinte)}
.karte--kapitel .kopfzeile{background:var(--farbe); padding:1.1rem 1.3rem .9rem}
/* Die Buchfarben sind pastellig: auf fünf von sieben ist weiße Schrift zu
   schwach. Jede Kapitelfarbe bringt deshalb ihre eigene Schriftfarbe mit. */
.karte--kapitel .kopfzeile h3{color:var(--farbe-text,var(--tinte))}
.karte--kapitel .rumpf{padding:1.1rem 1.3rem 1.3rem; display:flex; flex-direction:column; flex:1}

/* Buchabschnitt: Text und Umschlag nebeneinander, sobald Platz da ist. */
.buch{display:grid; gap:clamp(2rem,4vw,4rem); align-items:center}
@media (min-width:46em){ .buch{grid-template-columns:1.3fr .7fr} }
.buch__cover{width:100%; max-width:24rem; height:auto; justify-self:center;
  border:2.5px solid var(--tinte); border-radius:2px;
  box-shadow:12px 12px 0 var(--linie-stark); transform:rotate(-1.5deg)}
@media (prefers-reduced-motion:reduce){ .buch__cover{transform:none} }

.zahl{font-family:var(--display); font-weight:900;
  font-size:clamp(3rem,1.8rem + 4.4vw,4.75rem); line-height:.84; color:var(--rot)}
.band--dunkel .zahl{color:var(--gelb)}
.zahl + .klein{margin-top:.5rem}

/* ── Manifest ─────────────────────────────────────────────────────────── */

.manifest{list-style:none; counter-reset:satz; margin-top:2.25rem}
.manifest li{counter-increment:satz; display:flex; gap:1.25rem; padding-block:1.1rem;
  border-top:1px solid #fbf8f126; font-size:clamp(1.25rem,1rem + .9vw,1.75rem);
  font-family:var(--display); font-weight:400; line-height:1.12}
.manifest li::before{content:counter(satz,decimal-leading-zero); flex:none; width:2.4rem;
  color:var(--gelb); font-weight:900; font-size:1.25rem; padding-top:.2em}
.manifest li > span{flex:1}

/* ── Kostenrechner ────────────────────────────────────────────────────── */

.rechner{display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:start}
@media (min-width:52em){ .rechner{grid-template-columns:1fr 1fr} }
.regler{width:100%; margin:1rem 0 .35rem; accent-color:var(--rot)}
.klassen{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.3rem}
.klasse{font-family:var(--display); font-size:1.125rem; cursor:pointer; padding:.45em 1em .36em;
  border:2.5px solid var(--linie-stark); border-radius:3px; background:#fff; color:var(--tinte)}
.klasse[aria-pressed="true"]{border-color:var(--rot); background:var(--rot-blass); color:var(--rot)}
.ergebnis{background:#fff; border:2.5px solid var(--tinte); border-radius:4px;
  box-shadow:6px 6px 0 var(--linie-stark); padding:clamp(1.5rem,3vw,2.25rem)}
.ergebnis .zahl{font-size:clamp(3.5rem,2.2rem + 5.5vw,5.5rem)}

/* ── Verkehrspyramide ─────────────────────────────────────────────────── */

.pyramide{list-style:none; margin-top:2rem; max-width:min(58rem,100%)}
@media (min-width:1500px){ .pyramide{max-width:min(70rem,100%); margin-top:2.75rem} }
.pyramide li{display:flex; align-items:center; gap:1rem; margin-inline:auto;
  padding:clamp(.7rem,1.1vw,1.05rem) clamp(1.2rem,1.8vw,1.8rem); margin-bottom:.5rem; border:2px solid var(--tinte); border-radius:3px;
  font-family:var(--display); font-size:clamp(1.25rem,1.05rem + .55vw,1.75rem);
  background:var(--farbe); color:var(--farbe-text,var(--tinte))}
.pyramide .rang{font-size:.9375rem; opacity:.85}

/* ── Formular ─────────────────────────────────────────────────────────── */

.schritte{display:flex; list-style:none; margin:0 0 1.8rem; max-width:44rem}
.schritte li{flex:1; padding:.45rem .4rem .6rem; font-family:var(--display); font-size:1.125rem;
  color:var(--tinte-3); border-bottom:5px solid var(--linie)}
.schritte li[aria-current="step"]{color:var(--tinte); border-bottom-color:var(--rot)}
.schritte li.erledigt{border-bottom-color:var(--rot); color:var(--tinte-2)}

.feldgruppe{display:grid; gap:1.1rem; margin-top:1.5rem}
@media (min-width:40em){ .feldgruppe--2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:46em){ .feldgruppe--3{grid-template-columns:repeat(3,1fr)} }
.feld label{display:block; font-size:.9375rem; font-weight:600; margin-bottom:.35rem}
.feld label .opt{font-weight:400; color:var(--tinte-3)}
.feld input{width:100%; font:inherit; padding:.7em .85em; background:#fff;
  border:2.5px solid var(--linie-stark); border-radius:3px; color:var(--tinte)}
.feld input:focus-visible{border-color:var(--rot)}
/* Der Platzhalter muss als Beispiel erkennbar sein, aber lesbar bleiben —
   zu blass ist er für viele Augen gar nicht da. */
.feld input::placeholder{color:#6e6e66; opacity:1}
.haken{display:flex; gap:.75rem; align-items:flex-start; margin-top:1.1rem; max-width:52rem}
.haken input{flex:none; width:1.25rem; height:1.25rem; margin-top:.2rem; accent-color:var(--rot)}
.haken label{font-size:.9375rem; line-height:1.5; color:var(--tinte-2)}
.pflicht{color:var(--rot); font-weight:700}

.stufen{display:grid; gap:.75rem; margin-top:1rem}
@media (min-width:40em){ .stufen{grid-template-columns:repeat(3,1fr)} }
.stufe{display:block; cursor:pointer; text-align:center; padding:1rem .8rem;
  background:#fff; border:2.5px solid var(--linie-stark); border-radius:3px}
.stufe:has(input:checked){border-color:var(--rot); background:var(--rot-blass)}
.stufe input{position:absolute; opacity:0; pointer-events:none}
.stufe b{display:block; font-family:var(--display); font-weight:900; font-size:2.25rem; line-height:.9}
.stufe span{display:block; font-size:.875rem; color:var(--tinte-2); margin-top:.3rem}

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

.fuss{background:var(--tinte); color:var(--papier); padding-block:var(--luft) 2.5rem}
.fuss h2{font-family:var(--display); font-weight:400; font-size:1.3125rem; margin-bottom:.7rem;
  color:var(--gelb)}
.fuss ul{list-style:none}
.fuss li{padding-block:.26rem}
.fuss a{font-size:.9375rem; color:#cec9bd; text-decoration:none}
.fuss a:hover{color:var(--papier); text-decoration:underline}
.fuss__unten{margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid #fbf8f126;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; font-size:.875rem; color:#98948b}

@media print{
  .kopf,.fuss,.sprung,.knopf,.strasse{display:none}
  body{background:#fff; font-size:11pt}
  .band{padding-block:1rem}
}