/* ──────────────────────────────────────────────────────────────────────────
   autofrei leben! — Gestaltungssystem der echten Seite.

   Zwei Regeln, aus denen alles andere folgt:

   1. Die Seite muss ohne ein einziges Foto stehen. Träger sind Schrift,
      Zahl und Fläche — nicht Bildmaterial, das es nicht gibt.
   2. Nichts hier braucht JavaScript, um lesbar oder bedienbar zu sein.
      Skript verbessert nur den Kostenrechner.

   Schrift liegt selbst gehostet unter /assets/fonts/. Keine Verbindung zu
   Google, zu keinem CDN, zu keinem Dritten — der Verein wirbt damit, keine
   Daten weiterzugeben, und das muss auch technisch stimmen.
   ────────────────────────────────────────────────────────────────────────── */

@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{
  /* Farbe. Der warme Papierton kommt aus den Entwürfen und bleibt —
     er unterscheidet die Seite von der üblichen weißen Vereinsseite. */
  --papier:#fbf8f1;
  --papier-2:#f3eee1;
  --tinte:#1c1f24;
  --tinte-2:#565b63;
  --tinte-3:#7b8087;
  --linie:#1c1f2420;
  --linie-stark:#1c1f2440;

  /* Rot hat genau eine Aufgabe: Handlung. Zwei Werte, weil der helle
     auf Papier nur für große Schrift reicht, der dunkle auch für kleine. */
  --rot:#c43a1c;
  --rot-hell:#e0432a;
  --rot-blass:#fbeae5;
  --gelb:#ffd93d;
  --gruen:#2f6b4f;

  --max:1180px;
  --schrift:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Größen wachsen mit dem Fenster, damit auf dem Telefon nichts bricht
     und auf großen Schirmen nichts verloren aussieht. */
  --t-riesig:clamp(2.75rem,1.6rem + 5.2vw,5.5rem);
  --t-gross:clamp(1.9rem,1.35rem + 2.4vw,3rem);
  --t-mittel:clamp(1.35rem,1.15rem + .9vw,1.75rem);
  --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;
  font-weight:400; -webkit-font-smoothing:antialiased;
  font-feature-settings:'kern' 1;
}

h1,h2,h3,h4{margin:0; line-height:1.08; font-weight:800; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:var(--t-riesig); letter-spacing:-.035em}
h2{font-size:var(--t-gross); letter-spacing:-.028em}
h3{font-size:var(--t-mittel); letter-spacing:-.018em; line-height:1.18}
p{margin:0; text-wrap:pretty}
img{max-width:100%; height:auto; 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}

/* Sprungmarke — für Tastatur und Screenreader die erste Station der Seite */
.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}

/* ── Gerüst ───────────────────────────────────────────────────────────── */

.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) * .55)}

.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:34ch}
.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:#cfcbc2}
.klein{font-size:var(--t-klein); color:var(--tinte-2)}
.band--dunkel .klein{color:#b3b0a8}
.marke{font-size:.8125rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rot)}
.band--dunkel .marke{color:var(--gelb)}

/* Die gelbe Markierung — sitzt hinter der Schrift, nicht darüber,
   damit sie auch beim Vergrößern an der Grundlinie bleibt. */
.hl{background:linear-gradient(transparent 62%,var(--gelb) 62%);
  padding-inline:.06em; box-decoration-break:clone}

/* ── Knöpfe ───────────────────────────────────────────────────────────── */

.knopf{display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font:inherit; font-weight:700; letter-spacing:-.01em;
  padding:.85em 1.5em; border:2px solid var(--rot); border-radius:2px;
  background:var(--rot); color:#fff; text-decoration:none; cursor:pointer;
  transition:background .14s ease,border-color .14s ease,transform .14s ease}
.knopf:hover{background:#a92f14; border-color:#a92f14}
.knopf:active{transform:translateY(1px)}
.knopf--still{background:transparent; color:var(--tinte); border-color:var(--linie-stark)}
.knopf--still:hover{background:transparent; border-color:var(--tinte); color:var(--tinte)}
.band--dunkel .knopf--still{color:var(--papier); border-color:#fbf8f155}
.band--dunkel .knopf--still:hover{border-color:var(--papier)}
.knopf--klein{padding:.6em 1.05em; font-size:.9375rem}

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

.kopf{border-bottom:1px solid var(--linie); background:var(--papier)}
/* Klebender Kopf erst ab Tablet: auf dem Telefon frisst er mit der
   Navigation ein Drittel des Bildschirms, ohne dass er dort etwas nützt. */
@media (min-width:54em){ .kopf{position:sticky; top:0; z-index:40} }
.kopf__oben{display:flex; align-items:center; gap:1.5rem;
  padding-block:.9rem; flex-wrap:wrap}
.logo{display:flex; align-items:baseline; gap:.6rem; text-decoration:none; flex:none}
.logo b{font-size:1.4rem; font-weight:800; letter-spacing:-.035em; line-height:1}
.logo b i{font-style:normal; color:var(--rot)}
.logo span{font-size:.875rem; color:var(--tinte-2); font-weight:500}
@media (max-width:53.99em){ .logo span{display:none} }

.kopf__tat{display:flex; align-items:center; gap:.7rem; margin-left:auto; flex:none}
@media (max-width:35.99em){
  .kopf__tat .knopf--still{display:none}
  .kopf__tat .knopf{padding:.6em 1em; font-size:.9375rem}
}

/* Navigation. Bewusst kein Aufklapper: acht kurze Punkte passen auf dem
   Telefon in zwei Spalten, und nichts ist hinter einem Knopf versteckt —
   weder für die Bedienung noch für Suchmaschinen. Kein Skript nötig. */
.nav{border-top:1px solid var(--linie)}
.nav__liste{display:flex; flex-wrap:wrap; gap:0 1.6rem; list-style:none;
  padding-block:.5rem; margin:0}
.nav__liste a{display:block; padding-block:.45rem; font-size:.9688rem; font-weight:500;
  text-decoration:none; border-bottom:2px solid transparent}
.nav__liste a:hover{border-bottom-color:var(--linie-stark)}
.nav__liste a[aria-current="page"]{border-bottom-color:var(--rot); font-weight:700}
@media (max-width:53.99em){
  .nav__liste{display:grid; grid-template-columns:1fr 1fr; gap:0 1rem;
    padding-block:.15rem .5rem}
  .nav__liste a{padding-block:.45rem; font-size:.9063rem; line-height:1.3}
}

/* ── Aufmacher: die Behauptung steht in der Schrift, nicht hinter ihr ──── */

.aufmacher{padding-block:clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4rem)}
.aufmacher h1{max-width:14ch}
.aufmacher .vorspann{margin-top:1.4rem; max-width:42ch}

/* Zwei Selbsteinordnungen — der Besucher sagt, wer er ist, und bekommt
   danach zwei verschiedene Seiten zu sehen. */
.wege{display:grid; gap:1rem; margin-top:2.5rem; max-width:44rem}
@media (min-width:40em){ .wege{grid-template-columns:1fr 1fr} }
.weg{display:block; padding:1.4rem 1.5rem; text-decoration:none;
  background:#fff; border:1px solid var(--linie); border-radius:4px;
  transition:border-color .14s ease,transform .14s ease}
.weg:hover{border-color:var(--rot); transform:translateY(-2px)}
.weg strong{display:block; font-size:1.1875rem; font-weight:700; letter-spacing:-.015em}
.weg span{display:block; margin-top:.3rem; font-size:var(--t-klein); color:var(--tinte-2)}
.weg::after{content:'→'; color:var(--rot); font-weight:700; margin-left:.3em}

/* ── Karten ───────────────────────────────────────────────────────────── */

.karte{display:flex; flex-direction:column; padding:1.6rem;
  background:#fff; border:1px solid var(--linie); border-radius:4px;
  text-decoration:none; transition:border-color .14s ease,transform .14s ease}
a.karte:hover{border-color:var(--rot); transform:translateY(-2px)}
.karte h3{margin-bottom:.55rem}
.karte p{flex:1; font-size:1rem; color:var(--tinte-2); line-height:1.55}
.karte__mehr{margin-top:1.1rem; font-size:.9375rem; font-weight:700; color:var(--rot)}
.karte__mehr::after{content:' →'}
.band--dunkel .karte{background:#25292f; border-color:#fbf8f11f}
.band--dunkel .karte p{color:#b3b0a8}

/* Statt eines Bildes: eine Zahl, groß gesetzt. Das ist der Ersatz,
   der in der Bildstrategie steht — und er trägt. */
.zahl{font-size:clamp(2.5rem,1.4rem + 4vw,4rem); font-weight:800;
  letter-spacing:-.045em; line-height:.95; color:var(--rot)}
.band--dunkel .zahl{color:var(--gelb)}
.zahl + .klein{margin-top:.45rem}

/* ── Manifest: nummerierte Sätze auf dunklem Grund ────────────────────── */

.manifest{list-style:none; counter-reset:satz; margin-top:2.5rem}
.manifest li{counter-increment:satz; display:flex; gap:1.25rem;
  padding-block:1.15rem; border-top:1px solid #fbf8f126;
  font-size:clamp(1.125rem,1rem + .6vw,1.5rem); font-weight:600;
  letter-spacing:-.015em; line-height:1.3}
.manifest li::before{content:counter(satz,decimal-leading-zero);
  flex:none; width:2.2rem; color:var(--gelb); font-weight:800;
  font-size:.9375rem; padding-top:.45em; letter-spacing:0}

/* ── 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.4rem}
.klasse{font:inherit; font-size:.9375rem; font-weight:600; cursor:pointer;
  padding:.6em 1.1em; border:2px solid var(--linie-stark); border-radius:2px;
  background:#fff; color:var(--tinte)}
.klasse[aria-pressed="true"]{border-color:var(--rot); background:var(--rot-blass); color:var(--rot)}
.ergebnis{background:#fff; border:1px solid var(--linie); border-radius:4px;
  padding:clamp(1.5rem,3vw,2.25rem)}
.ergebnis .zahl{font-size:clamp(3rem,2rem + 5vw,4.75rem)}

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

.schritte{display:flex; list-style:none; margin:0 0 2rem; max-width:44rem}
.schritte li{flex:1; padding:.5rem .4rem .7rem; font-size:.9375rem; font-weight:600;
  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.6rem}
@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,.feld select,.feld textarea{
  width:100%; font:inherit; padding:.7em .85em; background:#fff;
  border:2px 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:1.1rem .8rem;
  background:#fff; border:2px 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-size:1.75rem; font-weight:800; letter-spacing:-.03em}
.stufe span{display:block; font-size:.875rem; color:var(--tinte-2); margin-top:.15rem}

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

.fuss{background:var(--tinte); color:var(--papier); padding-block:var(--luft) 2.5rem; margin-top:0}
.fuss h2{font-size:1.0625rem; font-weight:700; letter-spacing:.02em; margin-bottom:.9rem}
.fuss ul{list-style:none}
.fuss li{padding-block:.28rem}
.fuss a{font-size:.9375rem; color:#cfcbc2; text-decoration:none}
.fuss a:hover{color:var(--papier); text-decoration:underline}
.fuss__unten{margin-top:2.75rem; padding-top:1.5rem; border-top:1px solid #fbf8f126;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; font-size:.875rem; color:#9d9a93}

/* ── Druck: der Beitrittsantrag muss sich ausdrucken lassen ───────────── */

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