/* ──────────────────────────────────────────────────────────────────────────
   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;
  --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);
}

*,*::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)}

.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: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}
.band--dunkel .vorspann{color:#cec9bd}
.klein{font-size:var(--t-klein); color:var(--tinte-2)}
.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)}

.hl{background:linear-gradient(transparent 58%,var(--gelb) 58%,var(--gelb) 96%,transparent 96%);
  padding-inline:.08em; box-decoration-break:clone}

/* ── 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 ─────────────────────────────────────────────────────────────── */

.kopf{border-bottom:2px solid var(--tinte); background:var(--papier)}
@media (min-width:54em){ .kopf{position:sticky; top:0; z-index:40} }
.kopf__oben{display:flex; align-items:center; gap:1.5rem; padding-block:.85rem; flex-wrap:wrap}
.logo{display:flex; align-items:baseline; gap:.6rem; text-decoration:none; flex:none}
.logo b{font-family:var(--display); font-weight:900; font-size:1.75rem;
  letter-spacing:.01em; line-height:1; color:var(--tinte-2)}
.logo b i{font-style:normal; color:var(--gruen)}
.logo span{font-family:var(--display); font-weight:400; font-size:1.0625rem; color:var(--tinte-2)}
@media (max-width:53.99em){ .logo span{display:none} }
.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)}
@media (max-width:53.99em){
  .nav__liste{display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; padding-block:.1rem .5rem}
  .nav__liste a{padding-block:.42rem; font-size:1.0625rem}
}

/* ── 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}
.strasse{width:100%; height:auto; display:block; margin-top:clamp(2rem,4vw,3.5rem)}
/* Die Zeichnung bringt ihren eigenen Straßenboden mit; darunter läuft
   dieselbe Farbe weiter, damit keine Kante entsteht. */
.strassenband{background:linear-gradient(var(--papier) 0 60%,#E7E2D6 60%)}

.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{flex:1; font-size:1rem; color:var(--tinte-2); line-height:1.55}
.karte__mehr{margin-top: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. */
.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}

.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}

/* ── 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:44rem}
.pyramide li{display:flex; align-items:center; gap:1rem; margin-inline:auto; padding:.7rem 1.2rem;
  margin-bottom:.45rem; border:2px solid var(--tinte); border-radius:3px;
  font-family:var(--display); font-size:1.25rem; 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)}
.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}
}