/* ═══════════════════════════════════════════════════════════════════
   Safe hands — öffentliche Seiten

   Die Grundlage aus dem Entwurf (../entwurf/index.html), hier als
   gemeinsame Datei für alle Seiten. Der Grund ist tiefes Petrolschwarz,
   aus der Markenfarbe abgedunkelt; der Akzent ist Safran, nicht
   Terrakotta — Sansibar ist die Gewürzinsel, und im Kanga-Stoff der
   Näherinnen steckt genau dieser Ton.

   Zwei Schriften mit klar getrennten Rollen: Newsreader trägt die
   Überschriften, Archivo den Fließtext. Keine dritte.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --tief:        #08191D;
  --tief-2:      #0C242A;
  --petrol:      #005F69;   /* Marke, unverändert */
  --petrol-hell: #4FA3AC;
  --gewuerz:     #E9A13B;
  --gewuerz-tief:#B87519;
  --papier:      #F4F0E8;
  --papier-2:    #E7E0D2;
  --licht:       #E9F0EF;
  --licht-leise: #A9BEBE;
  --tinte:       #12262B;
  --tinte-leise: #4E6367;

  --breit: 76rem;
  --schmal: 41rem;
  --rand: clamp(1.25rem, 5vw, 4.5rem);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--tief); color:var(--licht);
  font-family:var(--sans); font-size:19px; line-height:1.65;
  letter-spacing:-0.003em; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }

/* Das hidden-Attribut muss stärker sein als jede Klasse.
   Ohne diese Zeile gewinnt `.knopf{display:inline-flex}` gegen die
   Regel des Browsers — ein Knopf mit `hidden` stand dann trotzdem da.
   Genau so ist der Knopf „Anteile ergänzen" auf der Kurban-Seite
   sichtbar geblieben, obwohl es nichts zu ergänzen gab. */
[hidden]{ display:none !important }

/* Fokus sichtbar und deutlich — 3 px, nie entfernt. */
:focus-visible{
  outline:3px solid var(--gewuerz); outline-offset:3px; border-radius:2px;
}

/* Nur für Screenreader. Nicht display:none — das nähme den Text auch
   ihnen weg. Ein Punkt Größe an einer abgeschnittenen Stelle bleibt
   vorlesbar und ist unsichtbar. */
.nur-lesen{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.sprung{
  position:absolute; left:var(--rand); top:-4rem; z-index:99;
  background:var(--gewuerz); color:var(--tinte); padding:.7rem 1.1rem;
  font-weight:600; text-decoration:none; transition:top .15s;
}
.sprung:focus{ top:1rem }

.huelle{ max-width:var(--breit); margin-inline:auto; padding-inline:var(--rand) }
.huelle--schmal{ max-width:var(--schmal) }
/* Ein Rechtstext liest sich in einer schmalen Spalte — aber sie beginnt
   an derselben Kante wie die Überschrift darüber. Eine zentrierte Spalte
   unter einem linksbündigen Kopf ergibt zwei linke Ränder, und das sieht
   das Auge sofort, auch wenn es nicht benennen kann, was es stört. */
.huelle--dokument{ max-width:var(--breit) }
.huelle--dokument > *{ max-width:var(--schmal) }

/* ── Typografie ───────────────────────────────────────────────── */
h1,h2,h3{
  font-family:var(--serif); font-weight:300; line-height:1.06;
  letter-spacing:-0.02em; margin:0; text-wrap:balance;
}
h1{ font-size:clamp(2.4rem, 6.2vw, 4.2rem) }
h2{ font-size:clamp(1.8rem, 3.8vw, 2.8rem) }
h3{ font-size:clamp(1.25rem, 2.1vw, 1.65rem); line-height:1.2 }
p{ margin:0 0 1.1em; max-width:62ch }
a{ color:inherit }

.vorspann{
  font-size:clamp(1.05rem, 1.6vw, 1.28rem); line-height:1.55;
  color:var(--licht-leise); max-width:52ch;
}

/* Ein Fließtext-Bereich für Rechtstexte und Erklärseiten.
   Die Zeilenlänge begrenzt hier die schmale Hülle. Eine zweite Grenze
   im Text ließe ihn links kleben, während rechts sichtbar Platz bliebe —
   der Block sähe verrutscht aus. */
.text p, .text ul, .text ol{ max-width:none }
.text h2{ margin:2.6rem 0 .9rem }
.text h3{ margin:2rem 0 .6rem }
.text ul,.text ol{ padding-left:1.3rem; margin:0 0 1.1em }
.text li{ margin-bottom:.35em }
.text a{ color:var(--gewuerz); text-decoration:underline; text-underline-offset:.2em }
.text a:hover{ color:var(--licht) }
.text dl{ margin:0 0 1.4em }
.text dt{ font-weight:600; margin-top:1em }
.text dd{ margin:0 0 .2em; color:var(--licht-leise) }

/* ── Knöpfe ───────────────────────────────────────────────────── */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:52px; padding:.85rem 1.6rem;
  font:600 1rem/1 var(--sans); letter-spacing:-.005em;
  text-decoration:none; border:0; border-radius:2px; cursor:pointer;
  background:var(--gewuerz); color:var(--tinte);
  transition:transform .18s ease, background .18s ease;
}
.knopf:hover{ background:#F2B45B; transform:translateY(-1px) }
.knopf--linie{
  background:transparent; color:var(--licht);
  box-shadow:inset 0 0 0 1.5px rgba(233,240,239,.45);
}
.knopf--linie:hover{ background:rgba(233,240,239,.08); box-shadow:inset 0 0 0 1.5px var(--gewuerz) }
.knopf--still{
  background:transparent; color:var(--licht); padding-inline:0;
  font-weight:500; border-bottom:1.5px solid rgba(233,240,239,.42);
  border-radius:0;
}
.knopf--still:hover{ background:transparent; border-bottom-color:var(--gewuerz); transform:none }

/* ── Kopfzeile ────────────────────────────────────────────────── */
.kopf{
  /* z-index 50: die Kopfzeile liegt über der Menütafel, sonst verdeckt
     diese den Schließen-Knopf und die Wortmarke. */
  position:relative; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:1.4rem var(--rand);
}
.kopf--ueber{ position:absolute; inset:0 0 auto }

/* Ohne den festen Kopf gibt es auch keinen Knopf darin.
   Diese Zeile steht VOR der Medienabfrage. Stünde sie danach, wäre sie
   gleich spezifisch und käme später — und der Knopf bliebe überall
   verborgen. Genau so ist es im Entwurf schon einmal passiert. */
.kopf__spenden{ display:none }

/* Die mitlaufende Kopfzeile.
   Sie erscheint erst, wenn der Titelbereich verlassen ist — am Anfang
   steht die Aufforderung ohnehin groß im Bild, und eine Leiste, die von
   der ersten Sekunde an klebt, nimmt dem Bild die Wirkung.
   Nur am Rechner: auf dem Handy übernimmt der mitlaufende Spendenweg. */
@media(min-width:52.0625rem){
  .kopf--fest{
    position:fixed; inset:0 0 auto; background:rgba(8,25,29,.94);
    padding-block:.85rem;
    border-bottom:1px solid rgba(233,240,239,.14);
    backdrop-filter:blur(10px);
    translate:0 -100%;
    transition:translate .28s cubic-bezier(.3,.8,.4,1);
  }
  .kopf--fest.da{ translate:0 0 }
  .kopf--fest .marke svg{ width:108px }
  /* Nur in der mitlaufenden Leiste. Im Titelbereich steht der Weg zum
     Spenden schon als großer Knopf im Bild; ein zweiter oben rechts
     wäre eine Wiederholung. */
  .kopf--fest .kopf__spenden{
    display:inline-flex; align-items:center; min-height:40px;
    padding:.5rem 1.15rem; margin-left:.6rem;
    background:var(--gewuerz); color:var(--tinte);
    font:600 .95rem/1 var(--sans); text-decoration:none; border-radius:2px;
    transition:background .18s ease;
  }
  .kopf--fest .kopf__spenden:hover{ background:#F2B45B }
}
.marke{
  position:relative; z-index:45;
  display:flex; align-items:center; text-decoration:none; color:var(--licht);
}
.marke svg{ width:132px; height:auto; flex:none; display:block }
.kopf nav{ display:flex; align-items:center; gap:2rem }
.kopf nav a{
  font-size:.97rem; text-decoration:none; color:var(--licht);
  display:inline-flex; align-items:center; min-height:44px;
  border-bottom:1.5px solid transparent;
}
.kopf nav a:hover,
.kopf nav a[aria-current="page"]{ border-bottom-color:var(--gewuerz) }

/* Das enge Band gleich oberhalb des Burgers.
   Die Kopfzeile trägt am Rechner sieben Menüpunkte (mit „Kontakt" seit
   dem 08.09.2026), dazu Wortmarke, Sprachumschalter und — sobald sie
   mitläuft — den Spendenknopf. Zwischen 832 px (dort übernimmt der
   Burger) und rund 1024 px reicht der Platz dafür nicht: die Punkte
   werden gequetscht und brechen um. Schon mit sechs Punkten war es zu
   eng, mit sieben fällt es auf. Deshalb rücken die Punkte in diesem
   Band zusammen und werden eine Spur kleiner; die 44 px Tippziel
   bleiben.
   Achtung beim nächsten Menüpunkt: eine weitere Redaktionsseite mit
   Menüplatz sprengt auch diese Fassung. Dann muss der Burger früher
   übernehmen — die Schwelle steht in der Abfrage `max-width:52rem`. */
@media(min-width:52.0625rem) and (max-width:64rem){
  .kopf nav{ gap:1.15rem }
  .kopf nav a{ font-size:.92rem }
}
.kopf__rechts{ position:relative; z-index:45; display:flex; align-items:center; gap:.4rem }

.sprachen{ display:flex; gap:.15rem; font-size:.9rem }
.sprachen a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; text-decoration:none; opacity:.8;
}
.sprachen a[aria-current]{ opacity:1; font-weight:600; color:var(--licht) }

.burger{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; background:none; border:0; cursor:pointer;
  color:var(--licht); padding:0;
}
.burger svg{ width:24px; height:24px }
.menu__fuss{ display:none }

/* ── Abschnitte ───────────────────────────────────────────────── */
.abschnitt{ padding-block:clamp(3.5rem, 8vw, 7rem) }
.abschnitt--papier{ background:var(--papier); color:var(--tinte) }
.abschnitt--papier .vorspann{ color:var(--tinte-leise) }
.abschnitt--papier .text a{ color:var(--petrol) }
.abschnitt--papier .text a:hover{ color:var(--tinte) }
.abschnitt--papier .text dd{ color:var(--tinte-leise) }
.abschnitt--petrol{ background:var(--petrol); color:#fff }
.abschnitt--petrol .vorspann{ color:rgba(255,255,255,.86) }

/* Der Kopf einer Unterseite: kein Bild, nur Typografie. Ein Bild an
   dieser Stelle wäre Dekoration — die Seiten dahinter sind Text. */

/* ── Formulare ────────────────────────────────────────────────── */
.feld{ margin-bottom:1.5rem }
.feld label{
  display:block; margin-bottom:.4rem;
  font-size:.95rem; font-weight:600; letter-spacing:-.005em;
}
.feld input[type=text], .feld input[type=email], .feld input[type=tel],
.feld input[type=date], .feld input[type=number], .feld select, .feld textarea{
  width:100%; min-height:52px; padding:.75rem .95rem;
  font:400 1rem/1.5 var(--sans); color:var(--licht);
  background:rgba(233,240,239,.06);
  border:1.5px solid rgba(233,240,239,.28); border-radius:2px;
}
.feld textarea{ min-height:8rem; resize:vertical }
.feld input::placeholder, .feld textarea::placeholder{ color:rgba(169,190,190,.7) }
.feld input:focus, .feld select:focus, .feld textarea:focus{
  border-color:var(--gewuerz); background:rgba(233,240,239,.1);
}
/* Das aufklappende Options-Menü ist ein natives Browser-Element mit
   hellem Hintergrund, unabhängig vom dunklen Formular darum — der
   helle Text von .feld select würde sich sonst hineinvererben und auf
   Weiß kaum lesbar bleiben. Deshalb ein eigenes, festes Papier/Tinte-Paar
   nur für die Optionen. */
.feld select option{ color:var(--tinte); background:var(--papier) }
/* Eine optgroup-Überschrift (z. B. „Übriger SEPA-Raum") ist kein
   <option> — Browser behandeln sie getrennt und lassen sie sonst blass
   und wie deaktiviert wirken. */
.feld select optgroup{ color:var(--tinte-leise); background:var(--papier); font-style:normal }
.feld small{ display:block; margin-top:.4rem; font-size:.88rem; color:var(--licht-leise) }
.feld--fehler input, .feld--fehler select, .feld--fehler textarea{ border-color:#F09088 }
.feld__fehler{ display:block; margin-top:.4rem; font-size:.9rem; color:#F09088; font-weight:500 }
/* align-items:start statt der Grid-Vorgabe „stretch": sonst zieht ein
   Hinweistext unter dem einen Feld (z. B. der PLZ-Hinweis) die Zelle des
   Nachbarfelds auf dieselbe Höhe — unsichtbar, bis eine absolut
   positionierte Vorschlagsliste darin an der gestreckten Boxhöhe hängt
   statt am Eingabefeld selbst und zu tief ansetzt. */
.paar{ display:grid; gap:0 1.2rem; grid-template-columns:1fr; align-items:start }
@media(min-width:34rem){ .paar{ grid-template-columns:1fr 1fr } }

.abschnitt--papier .feld input, .abschnitt--papier .feld select,
.abschnitt--papier .feld textarea{
  color:var(--tinte); background:#fff; border-color:rgba(18,38,43,.28);
}
.abschnitt--papier .feld small{ color:var(--tinte-leise) }

/* ── Autocomplete: Straße und Ort ────────────────────────────────
   Ersetzt das native <datalist> (P23-Nachbesserung). Die Liste hängt
   optisch am Feld, das sie füllt — dieselbe Kante, derselbe Radius,
   keine schwebende Karte mit Schlagschatten. Der aktive Eintrag trägt
   den Akzentstrich der Seite (Safran), keine Systemfarbe.

   Der Pfeil rechts im Feld (von oeffentlich.js eingesetzt, sobald
   Vorschläge da sind) ist die eigentliche Nachbesserung: vorher blieb
   ein Feld mit Vorschlägen dahinter optisch nicht von einem gewöhnlichen
   Textfeld zu unterscheiden — man musste blind zu tippen anfangen, um
   überhaupt zu erfahren, dass da etwas ist. Jetzt sieht das Feld aus wie
   ein <select>, sobald es eines ist, mit einem einmaligen Aufblitzen in
   Safran in dem Moment, in dem die Vorschläge eintreffen. */
.combo{ position:relative }
.combo__huelle{ position:relative; display:block }
.combo__huelle input{ padding-right:2.7rem !important }
.combo__pfeil{
  position:absolute; top:50%; right:.9rem; width:18px; height:18px;
  transform:translateY(-50%); color:rgba(233,240,239,.32);
  pointer-events:none; transition:transform .18s ease, color .18s ease;
}
.combo__huelle--bereit .combo__pfeil{ color:rgba(233,240,239,.65) }
.combo__huelle input[aria-expanded="true"] ~ .combo__pfeil{
  transform:translateY(-50%) rotate(180deg); color:var(--gewuerz);
}
@keyframes combo-blitz{
  0%   { color:rgba(233,240,239,.65) }
  35%  { color:var(--gewuerz); transform:translateY(-50%) scale(1.25) }
  100% { color:rgba(233,240,239,.65); transform:translateY(-50%) scale(1) }
}
.combo__pfeil--blitz{ animation:combo-blitz .6s ease }
@media(prefers-reduced-motion:reduce){
  .combo__pfeil{ transition:none }
  .combo__pfeil--blitz{ animation:none }
}

.combo__liste{
  position:absolute; z-index:30; top:calc(100% + .4rem); left:0; right:0;
  margin:0; padding:.35rem; list-style:none;
  max-height:15.5rem; overflow-y:auto;
  background:var(--tief-2); border:1.5px solid rgba(233,240,239,.28);
  border-radius:2px; box-shadow:0 16px 32px -12px rgba(0,0,0,.6);
  opacity:0; transform:translateY(-4px);
  transition:opacity .14s ease, transform .14s ease;
}
.combo__liste--auf{ opacity:1; transform:translateY(0) }
@media(prefers-reduced-motion:reduce){ .combo__liste{ transition:none } }
.combo__option{
  padding:.6rem .8rem; border-radius:2px; cursor:pointer;
  font-size:.98rem; line-height:1.35; color:var(--licht);
}
.combo__option mark{ background:none; color:var(--gewuerz); font-weight:600 }
.combo__option:hover{ background:rgba(233,240,239,.08) }
.combo__option[aria-selected="true"]{
  background:rgba(233,240,239,.1); box-shadow:inset 2px 0 0 var(--gewuerz);
}
.combo__leer{ padding:.6rem .8rem; font-size:.92rem; color:var(--licht-leise) }

.abschnitt--papier .combo__pfeil{ color:rgba(18,38,43,.35) }
.abschnitt--papier .combo__huelle--bereit .combo__pfeil{ color:rgba(18,38,43,.6) }
.abschnitt--papier .combo__liste{
  background:#fff; border-color:rgba(18,38,43,.28);
  box-shadow:0 16px 32px -14px rgba(18,38,43,.3);
}
.abschnitt--papier .combo__option{ color:var(--tinte) }
.abschnitt--papier .combo__option:hover,
.abschnitt--papier .combo__option[aria-selected="true"]{ background:rgba(18,38,43,.06) }
.abschnitt--papier .combo__leer{ color:var(--tinte-leise) }

/* Das Tippziel ist das ganze Label, nicht das Kästchen darin — deshalb
   44 px Mindesthöhe auch dann, wenn der Text nur eine Zeile hat. */
.haken{
  display:flex; gap:.7rem; align-items:flex-start;
  min-height:44px; padding-block:.35rem; cursor:pointer;
  margin-bottom:1rem; font-size:.95rem; line-height:1.5;
}
.haken input{ margin-top:.35rem; width:20px; height:20px; flex:none; accent-color:var(--gewuerz) }
/* Zeilenlänge begrenzen: der Erklärsatz unter einem Haken wird sonst in
   der breiten Spalte des Antrags über neunzig Zeichen lang, und der
   Blick findet den Zeilenanfang nicht mehr. */
.haken > span{ max-width:62ch }

/* ═══ STARTSEITE ══════════════════════════════════════════════════ */

/* ── Titelbereich ─────────────────────────────────────────────── */
.titel{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--tief-2);
}
.titel__bild{ position:absolute; inset:0 }
.titel__bild img, .titel__bild video{
  width:100%; height:100%; object-fit:cover; object-position:50% 40%;
}
.titel__bild video{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease }
.titel__bild video.laeuft{ opacity:1 }

/* Der Schleier trägt die Lesbarkeit, nicht ein Kasten hinter dem Text:
   ein Kasten schneidet das Bild entzwei, der Schleier lässt es stehen.

   Drei Lagen, jede mit einer Aufgabe:
   1. oben, damit die Kopfzeile auf hellem Himmel steht
   2. unten, für Schlagzeile und Knöpfe
   3. von links, wo der Text tatsächlich sitzt — das rechte Drittel des
      Fotos bleibt dabei unangetastet

   Die Werte sind nicht geschätzt: gemessen wurde der ungünstigste
   Bildpunkt hinter jedem Textblock. Mit dem ersten Entwurf lag die
   Schlagzeile bei 1,42:1 statt der geforderten 3:1 — die gelben
   Kopftücher im Bild sind heller, als es beim Hinsehen wirkt. */
.titel__bild::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,25,29,.88) 0%, rgba(8,25,29,.55) 12%, rgba(8,25,29,.15) 26%, rgba(8,25,29,0) 38%),
    linear-gradient(0deg,   rgba(8,25,29,.97) 0%, rgba(8,25,29,.94) 32%, rgba(8,25,29,.78) 58%, rgba(8,25,29,.34) 80%, rgba(8,25,29,0) 96%);
}
@media(min-width:52.0625rem){
  .titel__bild::after{
    background:
      linear-gradient(180deg, rgba(8,25,29,.86) 0%, rgba(8,25,29,.40) 20%, rgba(8,25,29,0) 40%),
      linear-gradient(0deg,   rgba(8,25,29,.92) 0%, rgba(8,25,29,.70) 26%, rgba(8,25,29,.20) 62%, rgba(8,25,29,0) 84%),
      linear-gradient(90deg,  rgba(8,25,29,.92) 0%, rgba(8,25,29,.86) 30%, rgba(8,25,29,.55) 52%, rgba(8,25,29,.12) 74%, rgba(8,25,29,0) 88%);
  }
}

.titel__inhalt{
  position:relative; z-index:2; width:100%;
  max-width:var(--breit); margin-inline:auto;
  padding:9rem var(--rand) 6rem;
}
/* 20ch statt 15: bei 15 landete „bekommt" allein auf einer Zeile.
   Mit der breiteren Spalte bricht es zu „Jeder Anteil bekommt / eine
   Nummer." — zwei Zeilen, die jeweils für sich einen Sinn ergeben. */
.titel h1{ max-width:20ch; margin-bottom:1.4rem }
.titel__vorspann{ max-width:48ch; color:rgba(233,240,239,.9) }
.titel__aktionen{
  display:flex; gap:1.8rem; align-items:center; flex-wrap:wrap; margin-top:2.2rem;
}

/* Die Saisonmarke. Kein Kasten, keine Farbe — eine Linie darunter und
   ein Punkt davor. Sie soll den Zeitpunkt nennen, nicht um Aufmerksamkeit
   mit der Schlagzeile konkurrieren. */
.saison{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.88rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gewuerz); margin-bottom:1.6rem;
}
.saison::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--gewuerz); flex:none;
  animation:puls 2.6s ease-in-out infinite;
}
@keyframes puls{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* Der Weiterhinweis: die einzige Bewegung ohne Anlass auf der Seite,
   und die einzige, die etwas sagt — hier geht es weiter. */
.weiter{
  position:absolute; left:50%; bottom:2rem; transform:translateX(-50%);
  display:flex; align-items:flex-end; justify-content:center;
  width:44px; height:44px; color:var(--licht); text-decoration:none;
}
.weiter span{
  display:block; width:1px; height:26px; background:currentColor;
  transform-origin:bottom; animation:fallen 2.4s ease-in-out infinite;
}
@keyframes fallen{
  0%   { transform:scaleY(0); opacity:0 }
  35%  { transform:scaleY(1); opacity:.85 }
  70%  { transform:scaleY(1); opacity:.85 }
  100% { transform:scaleY(0); opacity:0; transform-origin:top }
}

.filmknopf{
  position:absolute; right:var(--rand); bottom:2rem; z-index:3;
  width:44px; height:44px; display:inline-flex; align-items:center;
  justify-content:center; cursor:pointer; color:var(--licht);
  background:rgba(8,25,29,.55); border:1px solid rgba(233,240,239,.34);
  border-radius:50%; padding:0;
  backdrop-filter:blur(6px);
}
.filmknopf:hover{ background:rgba(8,25,29,.8) }
.filmknopf svg{ width:17px; height:17px }
.filmknopf__play{ display:none }
.filmknopf[aria-pressed="false"] .filmknopf__pause{ display:none }
.filmknopf[aria-pressed="false"] .filmknopf__play{ display:block }

/* Der mitlaufende Spendenweg. Auf dem Handy die einzige ständig
   sichtbare Aufforderung — am Rechner steht sie in der Kopfzeile. */
.mit{
  position:fixed; left:50%; bottom:1.1rem; transform:translateX(-50%);
  z-index:60; display:inline-flex; align-items:center; gap:.5rem;
  min-height:48px; padding:.7rem 1.5rem;
  background:var(--gewuerz); color:var(--tinte);
  font:600 1rem/1 var(--sans); text-decoration:none; border-radius:100px;
  box-shadow:0 6px 24px rgba(8,25,29,.45);
  opacity:0; visibility:hidden; translate:0 12px;
  transition:opacity .25s ease, translate .25s ease, visibility .25s;
}
.mit svg{ width:19px; height:19px }
.mit.da{ opacity:1; visibility:visible; translate:0 0 }
@media(min-width:52.0625rem){ .mit{ display:none } }

/* ── Die offene Rechnung ──────────────────────────────────────── */
/* Kein Tortendiagramm und keine Kacheln: das hier ist ein Kontoauszug,
   und der sieht aus wie einer. Die Summe trägt den Abschnitt, die
   Aufteilung steht als Liste darunter. */
.rechnung__kopf{ max-width:44rem }
.rechnung__label{
  font-size:.86rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinte-leise); margin:0 0 .8rem;
}
.rechnung__summe{
  font-family:var(--serif); font-weight:200;
  font-size:clamp(3.2rem, 11vw, 7rem); line-height:.95;
  letter-spacing:-.035em; font-variant-numeric:tabular-nums lining-nums;
  color:var(--petrol); margin:0 0 1.2rem; max-width:none;
}
.rechnung__summe span{ font-size:.42em; letter-spacing:-.01em; margin-left:.12em }
.rechnung__satz{
  font-size:clamp(1.05rem, 1.7vw, 1.3rem); line-height:1.5;
  color:var(--tinte); max-width:52ch; margin:0; text-wrap:pretty;
}

.posten{
  list-style:none; margin:clamp(2.5rem, 5vw, 4rem) 0 0; padding:0;
  border-top:1px solid rgba(18,38,43,.2);
}
.posten__zeile{
  display:grid; align-items:baseline;
  grid-template-columns:1fr auto;
  grid-template-areas:'was summe' 'balken balken';
  gap:.5rem 1.2rem; padding:1rem 0;
  border-bottom:1px solid rgba(18,38,43,.14);
}
@media(min-width:44rem){
  .posten__zeile{
    grid-template-columns:minmax(11rem,1.1fr) minmax(6rem,2fr) 4.2rem 7rem;
    grid-template-areas:'was balken anteil summe';
    gap:1.6rem; align-items:center;
  }
}
.posten__was{ grid-area:was; font-size:1.02rem }
.posten__was a{ text-decoration:none; border-bottom:1px solid rgba(18,38,43,.3) }
.posten__was a:hover{ border-bottom-color:var(--petrol); color:var(--petrol) }
.posten__balken{
  grid-area:balken; display:block; height:6px; border-radius:3px;
  background:rgba(18,38,43,.09); overflow:hidden;
}
.posten__balken span{
  display:block; height:100%; border-radius:3px; background:var(--petrol);
  transform-origin:left; animation:wachsen .9s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes wachsen{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.posten__anteil{
  grid-area:anteil; font-variant-numeric:tabular-nums;
  color:var(--tinte-leise); font-size:.92rem; text-align:right;
}
.posten__summe{
  grid-area:summe; font-variant-numeric:tabular-nums;
  font-weight:600; text-align:right; white-space:nowrap;
}
/* Auf dem Handy tragen Anteil und Summe zusammen eine Zeile; der
   Prozentwert wandert in die Summenspalte, sonst wird es zu eng. */
@media(max-width:43.99rem){
  .posten__anteil{ display:none }
}
.rechnung__fuss{
  margin-top:2rem; font-size:.92rem; color:var(--tinte-leise); max-width:56ch;
}

/* ── Betragsstufen auf der Startseite ─────────────────────────── */
.stufenliste{ list-style:none; margin:2.5rem 0 0; padding:0;
              border-top:1px solid rgba(233,240,239,.16) }
.stufenliste a{
  display:grid; align-items:center; gap:.3rem 1.5rem;
  grid-template-columns:6rem 1fr;
  grid-template-areas:'zahl was';
  padding:1.15rem 0; text-decoration:none;
  border-bottom:1px solid rgba(233,240,239,.16);
  transition:padding-left .18s ease;
}
@media(min-width:44rem){
  .stufenliste a{ grid-template-columns:7.5rem 1fr auto;
                  grid-template-areas:'zahl was zu' }
}
.stufenliste a:hover{ padding-left:.6rem }
.stufenliste a:hover .stufenliste__zahl{ color:var(--gewuerz) }
.stufenliste__zahl{
  grid-area:zahl; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.7rem, 3vw, 2.2rem); line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  transition:color .18s ease;
}
.stufenliste__was{ grid-area:was; font-size:1.02rem; line-height:1.45 }
.stufenliste__was small{
  display:block; margin-top:.2rem; font-size:.86rem; color:var(--licht-leise);
}
.stufenliste__zu{
  grid-area:zu; display:none; font-size:.9rem; color:var(--licht-leise);
}
@media(min-width:44rem){ .stufenliste__zu{ display:block } }
.stufenliste a:hover .stufenliste__zu{ color:var(--gewuerz) }

/* ── Nachweisbeleg ────────────────────────────────────────────── */
.nachweis__raster{ display:grid; gap:2.5rem; grid-template-columns:1fr }
@media(min-width:60rem){
  .nachweis__raster{ grid-template-columns:1.05fr .95fr; align-items:center; gap:4rem }
}
.beleg{
  margin:0; background:var(--tief-2); border:1px solid rgba(233,240,239,.16);
  border-radius:3px; padding:1.6rem 1.7rem;
}
.beleg__kopf{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:1rem; padding-bottom:1.1rem; margin-bottom:1.1rem;
  border-bottom:1px solid rgba(233,240,239,.16);
  font-size:.86rem; color:var(--licht-leise);
}
.beleg__label{
  display:block; font-size:.76rem; letter-spacing:.11em;
  text-transform:uppercase; margin-bottom:.35rem;
}
.beleg__nr{
  display:block; font-family:var(--serif); font-weight:300; font-size:1.9rem;
  line-height:1; letter-spacing:-.02em; color:var(--licht);
  font-variant-numeric:tabular-nums;
}
.beleg dl{
  display:grid; grid-template-columns:auto 1fr; gap:.55rem 1.5rem; margin:0;
  font-size:.96rem;
}
.beleg dt{ color:var(--licht-leise) }
.beleg dd{ margin:0 }
.beleg__film{
  display:flex; align-items:center; gap:.6rem; margin:1.3rem 0 0;
  padding-top:1.1rem; border-top:1px solid rgba(233,240,239,.16);
  font-size:.92rem; color:var(--licht-leise);
}
.beleg__film svg{ width:21px; height:21px; flex:none }

/* ── Projektkacheln ───────────────────────────────────────────── */
.kacheln{ display:grid; gap:2rem; grid-template-columns:1fr; margin-top:2.5rem }
@media(min-width:48rem){ .kacheln{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:68rem){ .kacheln{ grid-template-columns:repeat(3,1fr) } }
.kachel{ text-decoration:none; display:block }
.kachel figure{
  margin:0 0 1.1rem; overflow:hidden; border-radius:2px; aspect-ratio:4/3;
  background:var(--papier-2);
}
.kachel img{ width:100%; height:100%; object-fit:cover; transition:transform .55s ease }
.kachel:hover img{ transform:scale(1.04) }
.kachel h3{ margin-bottom:.5rem; transition:color .18s ease }
.kachel:hover h3{ color:var(--petrol) }
.kachel p{ font-size:.98rem; color:var(--tinte-leise); margin:0 }
.kachel__preis{
  display:block; margin-top:.7rem; font-size:.9rem; color:var(--petrol);
  font-variant-numeric:tabular-nums;
}
.knopf--dunkelrand{
  color:var(--tinte); box-shadow:inset 0 0 0 1.5px rgba(18,38,43,.4);
}
.knopf--dunkelrand:hover{
  background:rgba(18,38,43,.06); box-shadow:inset 0 0 0 1.5px var(--petrol);
}

/* ── Projektliste ─────────────────────────────────────────────── */
/* Keine gleich großen Kacheln: die Projekte sind unterschiedlich groß,
   und gleiche Flächen behaupten das Gegenteil. Eine Liste, in der jede
   Zeile gleich viel Raum zum Lesen hat und das Bild nur begleitet. */
.reihe{ list-style:none; margin:0; padding:0 }
.reihe__zeile{
  display:grid; gap:1.2rem 2.5rem; grid-template-columns:1fr;
  padding-block:clamp(2rem, 4vw, 3rem);
  border-top:1px solid rgba(233,240,239,.16);
}
.reihe__zeile:first-child{ border-top:0; padding-top:0 }
@media(min-width:44rem){ .reihe__zeile{ grid-template-columns:16rem 1fr; align-items:start } }
.reihe__bild{
  display:block; aspect-ratio:4/3; background:var(--tief-2);
  overflow:hidden; border-radius:2px;
}
.reihe__bild img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.reihe__zeile:hover .reihe__bild img{ transform:scale(1.03) }
.reihe__text h2{ font-size:clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom:.6rem }
/* inline-block mit etwas Luft: der Verweis ist der einzige, den Tastatur
   und Screenreader in dieser Zeile finden (das Bild daneben ist bewusst
   aria-hidden), und muss deshalb selbst 44 px hoch sein. */
.reihe__text h2 a{
  display:inline-block; padding-block:.25rem; text-decoration:none;
}
.reihe__text h2 a:hover{ color:var(--gewuerz) }
.reihe__text p{ color:var(--licht-leise); margin-bottom:.8rem }
.reihe__fuss{
  display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center;
  font-size:.9rem; color:var(--licht-leise); margin:0;
}

/* Die Projektnummer. Sie steht auf jeder Spende und jeder Bestätigung —
   deshalb gleiche Zifferbreiten und ein eigener Ton. */
.nummer{
  font-variant-numeric:tabular-nums; letter-spacing:.08em;
  font-size:.85rem; color:var(--gewuerz);
}

.titelbild{
  width:100%; aspect-ratio:16/7; object-fit:cover; border-radius:2px;
}

/* ── Bausteine ────────────────────────────────────────────────── */
.trenner{
  border:0; border-top:1px solid rgba(233,240,239,.16);
  max-width:var(--breit); margin:0 auto; width:calc(100% - 2 * var(--rand));
}
.abschnitt--papier .trenner{ border-color:rgba(18,38,43,.16) }

.paarung{ display:grid; gap:1.6rem 3rem; grid-template-columns:1fr; align-items:center }
@media(min-width:48rem){
  .paarung{ grid-template-columns:1fr 1fr }
  .paarung--gedreht .paarung__bild{ order:2 }
}
.paarung__bild img{ width:100%; aspect-ratio:4/3; border-radius:2px }
.paarung__text h2{ margin-bottom:.8rem }

.galerie{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin-top:1.6rem }
.galerie figure{ margin:0 }
.galerie img{ width:100%; aspect-ratio:4/3; border-radius:2px }
.galerie figcaption{ margin-top:.5rem; font-size:.88rem; color:var(--licht-leise) }
.abschnitt--papier .galerie figcaption{ color:var(--tinte-leise) }

.kennzahlen{
  display:grid; gap:1.6rem 2.5rem; margin-top:1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
.kennzahl b{
  display:block; font-family:var(--serif); font-weight:200;
  font-size:clamp(2.6rem, 6vw, 4rem); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--gewuerz);
}
.abschnitt--papier .kennzahl b{ color:var(--petrol) }
.abschnitt--petrol .kennzahl b{ color:#fff }
.kennzahl span{ display:block; margin-top:.6rem; font-size:.95rem; color:var(--licht-leise) }
.abschnitt--papier .kennzahl span{ color:var(--tinte-leise) }
.abschnitt--petrol .kennzahl span{ color:rgba(255,255,255,.86) }

/* Team (LUECKEN.md B16): ohne Kurzprofile eine ruhige, zentrierte Reihe;
   sobald mindestens eines steht, eine linksbündige Spalte — das Raster
   richtet sich nach dem Bestand, nicht umgekehrt. */
.team{
  display:grid; gap:2.2rem 1.6rem; margin-top:1.8rem; text-align:center;
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
}
.team--profil{
  text-align:left;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.team-bild, .team-initialen{
  display:block; width:6.5rem; height:6.5rem; margin:0 auto .9rem;
  border-radius:50%; overflow:hidden;
}
.team--profil .team-bild, .team--profil .team-initialen{ margin-inline:0 }
.team-bild img{ width:100%; height:100%; object-fit:cover }
.team-initialen{
  display:flex; align-items:center; justify-content:center;
  background:rgba(233,240,239,.12); color:var(--licht);
  font-family:var(--serif); font-weight:200; font-size:2rem;
}
.abschnitt--papier .team-initialen{ background:var(--papier-2); color:var(--petrol) }
.abschnitt--petrol .team-initialen{ background:rgba(255,255,255,.18); color:#fff }
.team-karte h3{ margin:0 0 .15rem; font-size:1.05rem; font-weight:600 }
.team-karte .amt{ margin:0 0 .5rem; font-size:.88rem; color:var(--licht-leise) }
.abschnitt--papier .team-karte .amt{ color:var(--tinte-leise) }
.abschnitt--petrol .team-karte .amt{ color:rgba(255,255,255,.86) }
.team-karte .bio{ margin:0; font-size:.92rem; line-height:1.55 }

.zitat{ margin:0; max-width:34rem }
.zitat blockquote{ margin:0 }
.zitat p{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.5rem, 3.2vw, 2.2rem); line-height:1.25;
  letter-spacing:-.02em; margin:0 0 1.2rem; max-width:none;
  text-wrap:balance;
}
.zitat figcaption{ font-size:.95rem; color:var(--licht-leise) }
.zitat figcaption span{ opacity:.7 }
.abschnitt--papier .zitat figcaption{ color:var(--tinte-leise) }

.punkte{ margin-top:1.2rem }
.punkte li{ margin-bottom:.7em; padding-left:.3rem }
ol.punkte{ counter-reset:punkt; list-style:none; padding-left:0 }
ol.punkte li{
  counter-increment:punkt; position:relative; padding-left:2.6rem;
}
ol.punkte li::before{
  content:counter(punkt); position:absolute; left:0; top:.1em;
  font-variant-numeric:tabular-nums; font-size:.9rem; font-weight:600;
  color:var(--gewuerz);
}
.abschnitt--papier ol.punkte li::before{ color:var(--petrol) }

.aufruf{
  display:grid; gap:1.6rem; align-items:end;
  grid-template-columns:1fr;
}
@media(min-width:48rem){ .aufruf{ grid-template-columns:1fr auto } }

.film{ width:100%; border-radius:2px; margin-top:1.4rem; background:#000 }

/* ── Betragsstufen ────────────────────────────────────────────── */
.stufen{ margin:0; display:grid; gap:0 }
.stufe{
  display:grid; gap:.2rem 1.5rem; grid-template-columns:1fr;
  padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.22);
}
.stufe:first-child{ border-top:1px solid rgba(255,255,255,.22) }
@media(min-width:34rem){ .stufe{ grid-template-columns:7rem 1fr; align-items:baseline } }
.stufe dt{
  font-family:var(--serif); font-weight:300; font-size:1.6rem;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.stufe dd{ margin:0; font-size:1.02rem }
.abschnitt--petrol .stufe dd{ color:rgba(255,255,255,.9) }

.knopf--dunkel{ background:var(--tinte); color:var(--papier) }
.knopf--dunkel:hover{ background:#1D3B42 }

/* ── Spendenformular ──────────────────────────────────────────── */
/* Ein Formular, keine Strecke über drei Seiten: wer spenden will, hat
   sich entschieden, und jeder weitere Schritt ist eine Gelegenheit, es
   sich anders zu überlegen. Die Gruppen trennen, ohne zu unterbrechen. */
.gruppe{
  border:0; margin:0 0 clamp(2rem, 4vw, 3rem); padding:0 0 clamp(2rem, 4vw, 3rem);
  border-bottom:1px solid rgba(233,240,239,.16);
}
.gruppe:last-of-type{ border-bottom:0; padding-bottom:1rem }
.gruppe legend{
  padding:0; margin:0 0 1.4rem;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.5rem, 3vw, 2rem); line-height:1.1; letter-spacing:-.02em;
}
/* Für ein Feld, dessen einzige Frage schon in der Legende der Gruppe
   steht ("Wofür?") — ein zweites, sichtbares Label mit demselben Wort
   wäre eine Wiederholung, aber Screenreader sollen das Feld trotzdem
   benennen. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Zwei nebeneinander auf dem Handy, vier in einer Reihe ab Tablet: eine
   Reihe von vier Beträgen liest sich als Skala, drei plus einer als
   Bruch. */
.betragswahl{
  display:grid; gap:.7rem; margin-bottom:1.8rem;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:34rem){ .betragswahl{ grid-template-columns:repeat(4,1fr) } }
.betragsknopf{
  display:flex; flex-direction:column; gap:.3rem; align-items:flex-start;
  min-height:64px; padding:.9rem 1.1rem; cursor:pointer;
  font:inherit; text-align:left; color:var(--licht);
  background:transparent; border:1.5px solid rgba(233,240,239,.28);
  border-radius:2px; transition:border-color .15s ease, background .15s ease;
}
.betragsknopf:hover{ border-color:var(--licht-leise) }
.betragsknopf[aria-pressed="true"]{
  border-color:var(--gewuerz); background:rgba(233,161,59,.1);
}
.betragsknopf__zahl{
  font-family:var(--serif); font-weight:300; font-size:1.6rem;
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.betragsknopf__text{ font-size:.86rem; color:var(--licht-leise); line-height:1.35 }
.betragsknopf[aria-pressed="true"] .betragsknopf__text{ color:var(--licht) }

/* Das Eurozeichen gehört ins Feld, nicht daneben: sonst steht es je nach
   Zahl unterschiedlich weit weg. */
.betragsfeld{ position:relative }
.betragsfeld input{ padding-right:2.6rem !important; font-size:1.15rem !important }
.betragsfeld span{
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  color:var(--licht-leise); pointer-events:none; font-size:1.05rem;
}

/* Dieselbe Karte für jede Auswahl mit Erklärung: Zahlweg im
   Spendenformular, Art der Mitgliedschaft und Zahlweise im Antrag. Ein
   zweites Aussehen für dieselbe Sache wäre kein Entwurf, sondern eine
   zweite Baustelle. */
.zahlwege, .wahlreihe{ display:grid; gap:.7rem }
@media(min-width:44rem){
  .wahlreihe--drei{ grid-template-columns:repeat(3,1fr) }
}
.zahlweg, .wahl{
  display:flex; gap:.9rem; align-items:flex-start; cursor:pointer;
  padding:1rem 1.1rem; min-height:64px;
  border:1.5px solid rgba(233,240,239,.28); border-radius:2px;
  transition:border-color .15s ease, background .15s ease;
}
.zahlweg:hover, .wahl:hover{ border-color:var(--licht-leise) }
.zahlweg:has(input:checked),
.wahl:has(input:checked){ border-color:var(--gewuerz); background:rgba(233,161,59,.1) }
.zahlweg input, .wahl input{
  margin-top:.25rem; width:20px; height:20px; flex:none; accent-color:var(--gewuerz);
}
.zahlweg strong, .wahl strong{ display:block; font-weight:600 }
.zahlweg span span,
.wahl span span{ display:block; font-size:.9rem; color:var(--licht-leise); margin-top:.15rem }
.wahl:has(input:checked) span span{ color:var(--licht) }

.haken--fehler{ color:#F09088 }
.haken--fehler input{ outline:2px solid #F09088; outline-offset:2px }

.knopf--gross{ min-height:60px; font-size:1.08rem; padding-inline:2rem }

/* ── Meldungen ────────────────────────────────────────────────── */
.meldung{
  padding:1rem 1.2rem; margin:0 0 1.5rem; border-left:3px solid;
  font-size:.98rem; line-height:1.55; background:rgba(233,240,239,.06);
}
.meldung--gut{ border-color:var(--petrol-hell) }
.meldung--hinweis{ border-color:var(--gewuerz) }
.meldung--fehler{ border-color:#F09088 }
.meldung p:last-child{ margin-bottom:0 }

/* ── Fußzeile ─────────────────────────────────────────────────── */
footer{ background:var(--tief); font-size:.94rem; padding-block:3.5rem;
        border-top:1px solid rgba(233,240,239,.13) }
footer .huelle{ display:grid; gap:2.5rem; grid-template-columns:1fr }
@media(min-width:48rem){ footer .huelle{ grid-template-columns:1.4fr 1fr 1fr } }
@media(min-width:62rem){ footer .huelle{ grid-template-columns:1.5fr 1fr 1fr 1fr } }

/* Anmeldung zum Newsletter (P17): ein eigener Streifen über den vier
   Spalten, nicht Teil ihres Rasters — deshalb die höhere Spezifität
   gegen die Regel oben. */
footer .huelle.footer-newsletter{
  grid-template-columns:1fr; gap:1.25rem; align-items:start;
  padding-bottom:2.5rem; margin-bottom:2.5rem;
  border-bottom:1px solid rgba(233,240,239,.13);
}
@media(min-width:48rem){
  footer .huelle.footer-newsletter{ grid-template-columns:1fr auto; align-items:center }
}
.footer-newsletter p{ margin:.3rem 0 0 }
.footer-newsletter__form{
  display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-start;
}
.footer-newsletter__form input[type=email]{
  min-height:52px; min-width:15rem; padding:.75rem .95rem;
  font:400 1rem/1.5 var(--sans); color:var(--licht);
  background:rgba(233,240,239,.06); border:1.5px solid rgba(233,240,239,.28);
  border-radius:2px;
}
.footer-newsletter__form input[type=email]::placeholder{ color:rgba(169,190,190,.7) }
footer h2{
  font-family:var(--sans); font-size:.88rem; font-weight:600;
  letter-spacing:.1em; margin:0 0 1rem; color:var(--licht);
}
footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem }
/* Nur die Verweise in den Listen bekommen ein Tippziel von 44 px.
   Galt die Regel für jeden Verweis in der Fußzeile, riss sie auch den
   Verweis mitten im Kleingedruckten aus der Zeile — er stand dann
   allein darunter, mit einer Lücke davor. */
footer a{ color:var(--licht-leise); text-decoration:none }
footer li a, footer p:not(.fein) > a:only-child{
  display:inline-flex; align-items:center; min-height:44px;
}
.fein a{
  display:inline; min-height:0; color:var(--licht);
  text-decoration:underline; text-underline-offset:.2em;
}
.fein a:hover{ color:var(--gewuerz) }
footer a:hover{ color:var(--gewuerz) }
footer p{ color:var(--licht-leise); font-size:.9rem }
.fein{
  margin-top:2.5rem; padding-top:1.5rem;
  border-top:1px solid rgba(233,240,239,.13);
  color:var(--licht-leise); font-size:.86rem;
}

/* ── Mobil ────────────────────────────────────────────────────── */
@media(max-width:52rem){
  body{ font-size:18px }
  h1{ text-wrap:normal }
  .burger{ display:inline-flex }

  /* Die Navigation wird zur Tafel über der ganzen Seite. Geschlossen
     steht sie auf display:none und liegt damit auch nicht im
     Tabulatorlauf — kein Fokus auf Unsichtbarem. */
  .kopf nav{
    display:none; position:fixed; inset:0; z-index:40;
    background:var(--tief);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:.2rem; padding:5.5rem var(--rand) 2.5rem; overflow-y:auto;
  }
  .kopf nav.offen{ display:flex }
  body.menue-offen .kopf{ position:fixed; inset:0 0 auto; background:var(--tief) }
  body.menue-offen{ overflow:hidden }
  .kopf nav a{
    font-family:var(--serif); font-size:2.1rem; font-weight:300;
    line-height:1.1; min-height:64px; letter-spacing:-.02em; border-bottom:0;
  }
  .kopf nav a:hover, .kopf nav a[aria-current="page"]{ color:var(--gewuerz) }
  .marke svg{ width:108px }

  /* Der Fuß der Tafel: Kanäle und Pflichtangaben. Beide Selektoren
     müssen so spezifisch sein wie ".kopf nav a", sonst gewinnt dort die
     Serifenschrift in 2,1 rem und der Fuß sähe aus wie ein Menüpunkt. */
  .kopf nav .menu__fuss{
    display:block; width:100%; margin-top:2.2rem; padding-top:1.6rem;
    border-top:1px solid rgba(233,240,239,.16);
  }
  .kopf nav .menu__sozial{ display:flex; gap:1.6rem; margin-bottom:.6rem }
  .kopf nav .menu__fuss a{
    font-family:var(--sans); font-size:.98rem; font-weight:400;
    min-height:44px; display:inline-flex; align-items:center; gap:.5rem;
    color:var(--licht-leise); letter-spacing:0;
  }
  .kopf nav .menu__fuss a:hover{ color:var(--gewuerz) }
  .kopf nav .menu__fuss svg{ width:20px; height:20px }
  .kopf nav .menu__recht{ display:flex; gap:1.6rem; font-size:.9rem }
  .kopf nav .menu__recht a{ font-size:.9rem }
}

/* ── Mobil: Startseite ────────────────────────────────────────── */
@media(max-width:52rem){
  /* text-wrap:balance setzt bei kurzen Schlagzeilen ein Wort allein auf
     eine Zeile. Auf dem Handy ist der natürliche Umbruch der bessere. */
  .titel h1{ max-width:none; text-wrap:normal }
  .titel__inhalt{ padding-top:7rem; padding-bottom:5.5rem }
  .titel__aktionen{ gap:1.4rem }
  .weiter{ bottom:1rem }
  .weiter span{ height:20px }
  .filmknopf{ bottom:1rem }
  /* Platz für den mitlaufenden Spendenweg, sonst verdeckt er die
     letzten Zeilen der Fußzeile dauerhaft. */
  footer{ padding-bottom:6.5rem }
  .beleg{ padding:1.2rem 1.3rem }
  .beleg dl{ grid-template-columns:1fr; gap:.15rem }
  .beleg dt{ margin-top:.6rem }
}

/* ── Bewegung reduziert ───────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* Der Balken muss trotzdem seine Breite zeigen — nur eben sofort. */
  .posten__balken span{ animation:none; transform:none }
  .weiter span{ animation:none; opacity:.7; transform:none }
  .saison::before{ animation:none }
}

/* ── Fehlerseite ─────────────────────────────────────────────────── */
/* Der Wegweiser ist ein Inhaltsverzeichnis, keine Kachelwand: eine
   Spalte, Haarlinien dazwischen, der Name in der Titelschrift und ein
   Satz darunter. Beim Überfahren rückt die Zeile ein und bekommt eine
   Safranmarke — die einzige Bewegung auf dieser Seite. */
.angefragt{
  margin:1.6rem 0 0; font-size:.92rem; color:var(--licht-leise);
}
.angefragt code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.95em; color:var(--licht);
  background:rgba(233,240,239,.07); border-radius:3px;
  padding:.15em .45em; word-break:break-all;
}

.wegweiser{
  list-style:none; margin:clamp(2.4rem, 5vw, 3.4rem) 0 0; padding:0;
  border-top:1px solid rgba(233,240,239,.16);
}
.wegweiser li{ border-bottom:1px solid rgba(233,240,239,.16) }
.wegweiser a{
  display:block; padding:1.15rem 0; color:inherit; text-decoration:none;
  box-shadow:inset 0 0 0 0 var(--gewuerz);
  transition:padding-left .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.wegweiser strong{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.35rem, 3vw, 1.7rem); line-height:1.2;
  letter-spacing:-.015em;
}
.wegweiser span{
  display:block; margin-top:.2rem; font-size:.95rem; line-height:1.5;
  color:var(--licht-leise); max-width:52ch;
}
.wegweiser a:hover{
  padding-left:.9rem; background:rgba(233,240,239,.045);
  box-shadow:inset 3px 0 0 0 var(--gewuerz);
}
.wegweiser a:hover strong{ color:var(--gewuerz) }
.wegweiser a:focus-visible{ outline-offset:-3px }

/* ── Fehlerliste über einem Formular ──────────────────────────── */
/* Anspringbar und mit einem Verweis je Feld. „Drei Felder brauchen eine
   Korrektur" ist bei fünf Abschnitten keine Auskunft, sondern eine
   Suchaufgabe. */
.fehlerliste{
  margin:0 0 2.2rem; padding:1.2rem 1.4rem;
  border:1.5px solid #F09088; border-left-width:4px;
  background:rgba(240,144,136,.08);
}
.fehlerliste:focus-visible{ outline:3px solid var(--gewuerz); outline-offset:3px }
.fehlerliste h2{
  margin:0 0 .6rem; font-family:var(--sans); font-size:1.02rem;
  font-weight:600; letter-spacing:0; color:#F5A79F;
}
.fehlerliste p{ margin:0 0 .4rem; font-size:.96rem }
.fehlerliste ul{ margin:0; padding-left:1.1rem; display:grid; gap:.15rem }
.fehlerliste li{ font-size:.96rem }
.fehlerliste a{
  color:var(--licht); text-decoration:underline; text-underline-offset:.2em;
  display:inline-block; padding:.3rem 0;
}
.fehlerliste a:hover{ color:var(--gewuerz) }

/* ── Aufnahmeantrag ───────────────────────────────────────────── */
/* Ein Dokument, keine Strecke: alles auf einer Seite, in der Reihenfolge,
   in der es auf Papier stünde. Daneben die Tafel mit dem fertigen
   Beitragsplan — auf dem Schirm klebend, auf dem Handy nach dem Beitrag,
   weil sie dort erst dann etwas zu sagen hat. */
.antrag{ display:grid; gap:0 clamp(2rem, 4vw, 4rem) }
.antrag > .gruppe{ min-width:0 }

@media(min-width:64rem){
  .antrag{ grid-template-columns:minmax(0,1fr) 21rem; align-items:start }
  .antrag > .gruppe,
  .antrag__absenden{ grid-column:1 }
  .antrag > .tafel{
    grid-column:2; grid-row:1 / span 20;
    position:sticky; top:5.5rem; align-self:start;
  }
}

.gruppe__nr{
  display:inline-block; margin-right:.6rem; color:var(--gewuerz);
  font-variant-numeric:tabular-nums;
}
.gruppe__vor{
  margin:-.6rem 0 1.6rem; max-width:52ch;
  color:var(--licht-leise); font-size:.98rem;
}
.feld__frei{
  font-weight:400; color:var(--licht-leise); font-size:.85em;
  letter-spacing:0; text-transform:none;
}
.feld__ueber{
  display:block; margin-bottom:.7rem; font-size:.92rem;
  font-weight:600; letter-spacing:.02em;
}
.haken__leise{ display:block; margin-top:.15rem; color:var(--licht-leise); font-size:.92rem }

/* Erscheint nur, wenn das Geburtsdatum es verlangt. */
.vertretung{
  margin:1.6rem 0; padding:1.2rem 1.3rem;
  border-left:3px solid var(--gewuerz); background:rgba(233,161,59,.07);
}
.vertretung__hinweis{ margin:0 0 1.2rem; font-size:.96rem; max-width:52ch }
.vertretung .feld:last-child{ margin-bottom:0 }

/* Die Anschrift vor dem Absenden, zum Gegenlesen — kein Papier wie das
   Mandat, sondern derselbe warme Rahmen wie bei der Vertretung: eine
   Karte, die auf der dunklen Fläche bleibt, nicht aus ihr herausfällt. */
.bestaetigung__karte{
  margin:2rem 0; padding:1.2rem 1.3rem;
  border-left:3px solid var(--gewuerz); background:rgba(233,161,59,.07);
}
.bestaetigung__karte-titel{
  display:block; margin:0 0 .7rem; font-weight:600; font-size:.85rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--licht-leise);
}
.bestaetigung__karte address{ font-style:normal; line-height:1.6 }

/* Der Mandatstext. Er sieht aus wie das, was er ist: der Wortlaut, den
   die Bank verlangt. Deshalb Papier statt Bildschirm. */
.mandat{
  margin-top:2rem; padding:1.4rem 1.5rem;
  background:var(--papier); color:var(--tinte);
}
.mandat__titel{
  margin:0 0 .8rem; font-weight:600; font-size:.92rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tinte-leise);
}
.mandat p{ margin:0 0 .9rem; font-size:.95rem; line-height:1.6; max-width:58ch }
.mandat__daten{
  display:grid; grid-template-columns:1fr; gap:.1rem 1.2rem;
  margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid rgba(18,38,43,.18);
  font-size:.92rem;
}
@media(min-width:34rem){ .mandat__daten{ grid-template-columns:auto 1fr } }
.mandat__daten dt{ color:var(--tinte-leise) }
.mandat__daten dd{ margin:0 0 .5rem; font-weight:600; font-variant-numeric:tabular-nums }

/* ── Unterschrift ─────────────────────────────────────────────── */
.unterschrift{ margin-bottom:2rem }
.unterschrift--fehler{ border-left:3px solid #F09088; padding-left:1rem; margin-left:-1rem }
.unterschrift__titel{ margin:0; font-weight:600 }
.unterschrift__satz{ margin:.1rem 0 .9rem; color:var(--licht-leise); font-size:.94rem }
/* Der Umschalter zwischen Tippen und Zeichnen — nur einer der beiden
   Wege ist je sichtbar, deshalb keine Betonung wie bei den Beträgen,
   nur ein schmaler Rahmen und die gedämpfte Füllung für den aktiven. */
.unterschrift__wahl{ display:flex; gap:.6rem; margin-bottom:1rem }
.unterschrift__wahlknopf{
  min-height:40px; padding:.5rem 1rem; cursor:pointer;
  font:600 .88rem/1 var(--sans); color:var(--licht-leise);
  background:transparent; border:1.5px solid rgba(233,240,239,.28);
  border-radius:2px; transition:border-color .15s ease, color .15s ease;
}
.unterschrift__wahlknopf:hover{ border-color:var(--licht-leise); color:var(--licht) }
.unterschrift__wahlknopf[aria-pressed="true"]{
  border-color:var(--gewuerz); background:rgba(233,161,59,.1); color:var(--licht);
}
.unterschrift__feld{ position:relative; max-width:26rem }
.unterschrift__flaeche{
  display:block; width:100%; height:150px; touch-action:none; cursor:crosshair;
  background:var(--papier); border:1.5px solid rgba(233,240,239,.28); border-radius:2px;
}
.unterschrift__flaeche.hat{ border-color:var(--gewuerz) }
/* Die Linie, auf der man schreibt — wie auf dem Papierformular. */
.unterschrift__linie{
  position:absolute; left:1.2rem; right:1.2rem; bottom:2.6rem; height:0;
  border-bottom:1px dashed rgba(18,38,43,.35); pointer-events:none;
}
.unterschrift__neu{
  position:absolute; right:.5rem; bottom:.5rem;
  min-height:36px; padding:.3rem .8rem; cursor:pointer;
  font:inherit; font-size:.85rem; color:var(--tinte);
  background:rgba(255,255,255,.9); border:1px solid rgba(18,38,43,.28); border-radius:2px;
}
.unterschrift__neu:hover{ background:#fff; border-color:var(--tinte) }
.unterschrift__tippen{ margin-top:1rem; max-width:26rem }
.unterschrift__tippen-titel{ font-weight:600 }
.unterschrift__tippen input{
  width:100%; margin-top:.4rem; padding:.85rem 1rem;
  font:inherit; font-family:var(--serif); font-size:1.25rem; font-style:italic;
  color:var(--licht); background:rgba(233,240,239,.06);
  border:1.5px solid rgba(233,240,239,.28); border-radius:2px;
}
.unterschrift__tippen input:focus{ border-color:var(--gewuerz); outline:0 }
.unterschrift__tippen small{
  display:block; margin-top:.4rem; font-size:.88rem; color:var(--licht-leise);
}
.unterschrift__beweis{
  margin:0; padding-top:1.2rem; border-top:1px solid rgba(233,240,239,.16);
  font-size:.88rem; color:var(--licht-leise); max-width:56ch;
}
.iban__hinweis:empty{ display:none }
.iban__hinweis.gut{ color:var(--petrol-hell) }
.iban__hinweis.schlecht{ color:#F09088 }

.antrag__absenden{ margin-top:.5rem }
.antrag__nachsatz{
  margin:1.2rem 0 0; max-width:48ch; font-size:.94rem; color:var(--licht-leise);
}
.antrag__nachsatz strong{ color:var(--licht) }

/* ── Die Tafel ────────────────────────────────────────────────── */
/* Papier auf dunklem Grund: sie gehört nicht zur Seite, sondern zum
   Vorgang. Und sie ist kein Kasten mit Text darin, sondern ein Beleg —
   dieselbe Haltung wie die offene Rechnung auf der Startseite.

   Was einen Beleg ausmacht und hier alles trägt: ein gedruckter Kopf,
   Zahlen rechtsbündig in Tabellenziffern untereinander, eine doppelte
   Linie über der Summe, eine Fußnote im Kleingedruckten. Nichts davon
   ist Schmuck; jedes Teil sagt, welcher Art die Zahl daneben ist. */
.tafel{
  margin:0 0 2.5rem;
  background:var(--papier); color:var(--tinte);
  border:1px solid rgba(18,38,43,.16);
}

/* Der gedruckte Kopf: eine eigene Bahn, damit die Tafel oben eine Kante
   hat und nicht als Blatt in der Luft hängt. */
.tafel__titel{
  margin:0; padding:.7rem 1.5rem;
  background:var(--papier-2); border-bottom:1px solid rgba(18,38,43,.16);
  font-family:var(--sans); font-size:.8rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--tinte-leise);
}

.tafel__summe{
  margin:1.4rem 1.5rem 0;
  font-family:var(--serif); font-weight:200;
  font-size:clamp(2.4rem, 6.5vw, 3.1rem); line-height:1;
  letter-spacing:-.03em; color:var(--petrol);
  font-variant-numeric:tabular-nums lining-nums;
}
/* Solange nichts gewählt ist, ist die Null eine Auskunft und kein
   Ergebnis — sie tritt zurück, statt den Beleg zu beherrschen. */
.tafel__summe--leer{ color:rgba(18,38,43,.32) }
.tafel__unter{
  margin:.4rem 1.5rem 1.4rem; font-size:.94rem; color:var(--tinte-leise);
  max-width:26ch;
}

.tafel__block{
  margin:0; padding:1.2rem 1.5rem;
  border-top:1px solid rgba(18,38,43,.16);
}
.tafel__label{
  margin:0 0 .7rem; font-size:.78rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinte-leise);
}

/* Die Fälligkeiten: Datum links, Betrag rechts, Ziffern untereinander —
   und über der letzten Zeile die doppelte Linie, mit der ein Beleg seit
   je seine Summe ankündigt. */
.tafel__raten{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem }
.tafel__raten li{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.95rem; font-variant-numeric:tabular-nums;
}
.tafel__raten b{ font-weight:600 }

.tafel__daten{
  margin:0; display:grid; grid-template-columns:auto 1fr;
  gap:.5rem 1rem; font-size:.92rem;
}
.tafel__daten dt{ color:var(--tinte-leise) }
.tafel__daten dd{
  margin:0; font-weight:600; text-align:right;
  font-variant-numeric:tabular-nums;
}
/* Eine Kennung ist eine Einheit. Bricht sie um, liest man zwei Zahlen,
   und die Gläubiger-ID auf einem Mandat muss man abgleichen können —
   deshalb nimmt sie lieber die ganze Zeile als einen Umbruch. */
.tafel__id{
  grid-column:1 / -1; text-align:left;
  font-size:.88rem; letter-spacing:.01em; white-space:nowrap;
}

.tafel__vorbehalt{
  margin:0; padding:1.1rem 1.5rem 1.3rem;
  border-top:1px solid rgba(18,38,43,.16);
  font-size:.83rem; line-height:1.5; color:var(--tinte-leise);
}
.tafel__vorbehalt strong{ color:var(--tinte) }
.tafel__gebuehr{ color:var(--tinte-leise) }

/* ── Kurban: die Namensliste ──────────────────────────────────── */
/* Der Kern der Bestellung. Auf breiten Schirmen eine Tabelle mit einer
   Kopfzeile — dort sind die Beschriftungen an den Feldern nur noch für
   Screenreader da, sonst stünde jede Spaltenüberschrift siebenmal. Auf
   dem Handy wird daraus ein Stapel, und dann sind sie wieder sichtbar. */
.namen__kopf{ display:none }
.namen{ display:grid; gap:1.2rem }
.namenzeile{ display:grid; gap:0 .9rem; grid-template-columns:1fr; align-items:start }
.namenzeile--reserve{ display:none }
.namenzeile .feld{ margin-bottom:.9rem }
.anteilzahl{ max-width:6rem }

.namenzeile__weg{
  justify-self:start; min-height:44px; padding:.3rem .9rem; cursor:pointer;
  font:inherit; font-size:.9rem; color:var(--licht-leise);
  background:transparent; border:1px solid rgba(233,240,239,.24); border-radius:2px;
}
.namenzeile__weg:hover{ color:#F09088; border-color:#F09088 }

@media(min-width:48rem){
  .namen__kopf,
  .namenzeile{ grid-template-columns:1fr 6.5rem minmax(0,1.2fr) 3rem }
  .namen__kopf{
    display:grid; gap:.9rem; margin-bottom:.6rem;
    font-size:.85rem; font-weight:600; letter-spacing:.02em; color:var(--licht-leise);
  }
  .namen{ gap:.5rem }
  .namenzeile .feld{ margin-bottom:0 }
  /* Die Beschriftung bleibt im Baum, verschwindet aber aus dem Bild —
     die Kopfzeile darüber sagt dasselbe. */
  .namenzeile .feld > label{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .namenzeile__weg{
    justify-self:center; align-self:start; margin-top:.1rem;
    width:44px; padding:0; font-size:1.2rem; line-height:1;
  }
  .anteilzahl{ max-width:none }
}
.namen__mehr{ margin-top:1rem }

/* Die sieben Plätze eines Tieres. Sie erklären ohne einen Satz, was ein
   Anteil ist — ein Siebtel —, und zeigen beim Tippen, wie viele davon
   schon vergeben sind. */
.tier{
  list-style:none; margin:0 0 .8rem; padding:0;
  display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem;
}
.tier__platz{
  height:2.4rem; background:transparent;
  border:1px solid rgba(18,38,43,.3); border-radius:2px;
  transition:background .18s ease, border-color .18s ease;
}
.tier__platz.belegt{ background:var(--petrol); border-color:var(--petrol) }
.tier__platz.zuviel{ background:#C8564C; border-color:#C8564C }
.tier__stand{ margin:0; font-size:.88rem; color:var(--tinte-leise) }

/* ── Warteliste ───────────────────────────────────────────────── */
.warteliste{
  margin:2.5rem 0 0; padding:1.6rem 1.7rem;
  border:1px solid rgba(233,240,239,.16); background:var(--tief-2);
}
.warteliste h2{ margin:0 0 .7rem; font-size:clamp(1.3rem,3vw,1.6rem) }
.warteliste p{ margin:0 0 1.4rem; color:var(--licht-leise); font-size:.96rem; max-width:56ch }
.warteliste__fein{ margin:1rem 0 0; font-size:.86rem }

/* ── Nach dem Absenden ────────────────────────────────────────── */
/* Was als Nächstes passiert, in der Reihenfolge, in der es passiert.
   Nummeriert, weil es wirklich eine Folge ist. */
.schritte{
  list-style:none; counter-reset:schritt; margin:2.5rem 0 0; padding:0;
  border-top:1px solid rgba(233,240,239,.16);
}
.schritte li{
  counter-increment:schritt; position:relative;
  padding:1.2rem 0 1.2rem 3rem;
  border-bottom:1px solid rgba(233,240,239,.16);
  font-size:.98rem; line-height:1.6; color:var(--licht-leise);
}
.schritte li::before{
  content:counter(schritt); position:absolute; left:0; top:1.1rem;
  font-family:var(--serif); font-size:1.5rem; font-weight:300; line-height:1;
  color:var(--gewuerz); font-variant-numeric:tabular-nums;
}
.schritte strong{ display:block; color:var(--licht); font-weight:600; margin-bottom:.15rem }

.beleg__titel{
  margin:0 0 1rem; font-size:.78rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--licht-leise);
}
.anteilliste{ list-style:none; margin:0; padding:0 }
.anteilliste li{
  display:grid; grid-template-columns:1fr auto auto; gap:.3rem 1.2rem;
  padding:.7rem 0; border-top:1px solid rgba(233,240,239,.14);
  font-variant-numeric:tabular-nums;
}
.anteilliste li:first-child{ border-top:0 }
.anteilliste__name{ min-width:0; overflow-wrap:anywhere }
.anteilliste__zahl{ color:var(--licht-leise); font-size:.92rem; white-space:nowrap }
.anteilliste b{ font-weight:600; white-space:nowrap }
.anteilliste__summe{ border-top:2px solid var(--licht) !important; font-weight:600 }
.anteilliste__summe .anteilliste__zahl{ color:var(--licht) }

/* Die Tafel auf einer Bestätigungsseite steht allein, nicht in einer
   Spalte — dort darf sie die volle Breite nehmen. */
.tafel--breit{ max-width:none }
.tafel--breit .tafel__daten{ gap:.55rem 2rem }

/* Eine vergangene Saison pulsiert nicht. */
.saison--aus{ color:var(--licht-leise) }
.saison--aus::before{ background:var(--licht-leise); animation:none }
.tier__stand--warnung{ color:#9A3A32; font-weight:500 }

/* ── Anschrift ────────────────────────────────────────────────── */
/* Straße und Hausnummer nebeneinander, aber nicht gleich breit: die
   Nummer braucht vier Zeichen, die Straße dreißig. */
.anschrift{ margin-bottom:1.5rem }
.paar--strasse{ grid-template-columns:1fr }
.paar--plz{ grid-template-columns:1fr }
@media(min-width:34rem){
  .paar--strasse{ grid-template-columns:1fr 8rem }
  .paar--plz{ grid-template-columns:9rem 1fr }
}
.anschrift__hinweis{
  margin:-.6rem 0 1.4rem; font-size:.88rem; color:var(--licht-leise); max-width:56ch;
}
.abschnitt--papier .anschrift__hinweis{ color:var(--tinte-leise) }
.plz__hinweis:empty{ display:none }
.plz__hinweis.gut{ color:var(--petrol-hell) }
.plz__hinweis.hinweis{ color:var(--gewuerz) }
.plz__hinweis.schlecht{ color:#F09088 }

/* ── Hinweise an E-Mail-Feldern ───────────────────────────────── */
.mail__notiz{
  margin:.4rem 0 0; font-size:.9rem; line-height:1.45; color:var(--licht-leise);
}
.mail__notiz.schlecht{ color:#F09088 }
.mail__notiz.hinweis{ color:var(--gewuerz) }
.mail__uebernehmen{
  font:inherit; font-size:.9rem; cursor:pointer; min-height:32px;
  padding:.1rem .55rem; color:var(--tief); background:var(--gewuerz);
  border:0; border-radius:2px; font-weight:600;
}
.mail__uebernehmen:hover{ background:#F2B45B }
.namen__auffuellen{ margin-top:1rem; margin-left:.6rem }
.wahl--aus{ opacity:.55 }
.wahl--aus:hover{ border-color:rgba(233,240,239,.28) }
.tafel__gebuehr{ color:var(--tinte-leise) }

/* ── Spendenformular auf einer Projektseite ───────────────────── */
/* Es steht dort, wo der Text aufhört zu überzeugen — deshalb eine
   sichtbare Fuge davor, aber kein neuer Farbton: die Seite soll nicht
   aussehen, als finge etwas Neues an. */
#spenden{ border-top:1px solid rgba(233,240,239,.16) }
.spenden__titel{ margin-bottom:.4rem }
.zweck{
  margin:1.4rem 0 0; font-size:.95rem; color:var(--licht-leise); max-width:52ch;
}
.zweck strong{ color:var(--licht); font-weight:600 }
.zweck a{ color:var(--gewuerz); text-decoration:underline; text-underline-offset:.2em }
.spenden__nachsatz{
  margin-top:1.4rem; font-size:.9rem; color:var(--licht-leise); max-width:46ch;
}

/* ── Projektkopf ──────────────────────────────────────────────── */
/* Zwei Fassungen, beide Absicht. Mit Bild steht der Titel darauf, mit
   demselben dreilagigen Schleier wie die Startseite — gemessen, nicht
   geschätzt. Ohne Bild trägt die Projektnummer den Kopf: sie ist echt,
   für dieses Projekt einmalig, und liest sich wie das, was sie ist —
   eine Aktennummer. Damit sieht auch ein Projekt ohne Foto nach etwas
   aus und nicht nach einem leeren Feld. */
.pkopf{ position:relative }

.pkopf--bild{
  min-height:clamp(21rem, 52vh, 34rem);
  display:flex; align-items:flex-end;
  padding-block:clamp(2.5rem, 6vw, 4rem);
  overflow:hidden;
}
.pkopf__bild{ position:absolute; inset:0 }
.pkopf__bild img{ width:100%; height:100%; object-fit:cover }
.pkopf__bild::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,25,29,.88) 0%, rgba(8,25,29,.5) 14%, rgba(8,25,29,0) 34%),
    linear-gradient(0deg,   rgba(8,25,29,.96) 0%, rgba(8,25,29,.9) 30%,
                            rgba(8,25,29,.6) 60%, rgba(8,25,29,.15) 85%, rgba(8,25,29,0) 100%);
}
@media(min-width:52.0625rem){
  .pkopf__bild::after{
    background:
      linear-gradient(180deg, rgba(8,25,29,.86) 0%, rgba(8,25,29,.38) 22%, rgba(8,25,29,0) 42%),
      linear-gradient(0deg,   rgba(8,25,29,.94) 0%, rgba(8,25,29,.74) 32%,
                              rgba(8,25,29,.24) 66%, rgba(8,25,29,0) 92%),
      linear-gradient(90deg,  rgba(8,25,29,.9) 0%, rgba(8,25,29,.72) 34%,
                              rgba(8,25,29,.3) 60%, rgba(8,25,29,0) 84%);
  }
}
.pkopf__inhalt{ position:relative; z-index:2; width:100% }

/* Ohne Bild ist der Kopf flacher — ein Dokument ist kein Aufmacher —
   aber nicht flach: er behält dieselbe Grundlinie wie die Bildfassung,
   damit die Überschrift beim Seitenwechsel nicht springt. */
.pkopf--nummer{
  background:var(--tief-2);
  min-height:clamp(15rem, 32vh, 21rem);
  display:flex; align-items:flex-end;
  padding-block:clamp(3rem, 7vw, 4.5rem);
  border-bottom:1px solid rgba(233,240,239,.13);
  overflow:hidden;
}
/* Das Aktenzeichen als Fläche, nicht als Verzierung: es steht hinter
   dem Titel, angeschnitten, und trägt die Seite optisch. Was dort
   steht, ist immer echt — die Projektnummer, die Registernummer, die
   Vorschrift, die die Seite verlangt.

   Die Größe hängt an der Länge: „7" darf riesig sein, „ALT-1305" nicht,
   sonst schiebt sich das Zeichen über die ganze Breite und der Titel
   liegt in einer Buchstabensuppe. `--zeichen` ist die Zeichenzahl, die
   die Vorlage mitgibt. */
.pkopf__marke{
  position:absolute; right:-.06em; top:50%; transform:translateY(-50%);
  font-family:var(--serif); font-weight:200; line-height:.8;
  font-size:clamp(4rem, calc(115vw / var(--zeichen, 4)), 17rem);
  letter-spacing:-.05em;
  color:rgba(233,240,239,.038); white-space:nowrap; pointer-events:none;
  user-select:none;
}
.pkopf--nummer .huelle{ position:relative; z-index:2; width:100% }
.pkopf h1{ margin:.2rem 0 0; max-width:20ch }
.pkopf .nummer{ margin:0 }
.pkopf__vorspann{ margin-top:1.2rem; max-width:52ch }

/* ── Betragsstufen mit Wirkungssatz ───────────────────────────── */
/* „5 € — ein Fastenbrechen" gehört in eine Zeile, nicht in einen
   Kasten von vier Zentimetern: dort wird aus dem Satz, der überzeugt,
   ein Stapel abgehackter Wörter. Beträge ohne Erklärung bleiben eine
   Reihe. */
.betragswahl--wirkung{ grid-template-columns:1fr; gap:.5rem }
@media(min-width:34rem){ .betragswahl--wirkung{ grid-template-columns:1fr } }
.betragswahl--wirkung .betragsknopf{
  flex-direction:row; align-items:baseline; gap:1.1rem;
  min-height:60px; padding:.85rem 1.2rem;
}
.betragswahl--wirkung .betragsknopf__zahl{
  flex:none; min-width:4.5rem; font-size:1.45rem;
}
.betragswahl--wirkung .betragsknopf__text{ font-size:.95rem; line-height:1.4 }

/* ── Spendenteil einer Projektseite ───────────────────────────── */
.spendenteil{ border-top:1px solid rgba(233,240,239,.16) }
.spendenteil__kopf{ max-width:46rem; margin-bottom:clamp(2rem, 4vw, 3rem) }
.spendenteil__kopf h2{ margin:0 }
.spendenteil__kopf .vorspann{ margin-top:1rem; max-width:48ch }
.tafel__summe--leer{ color:var(--tinte-leise) }

/* ── Kurzweg zum Formular ─────────────────────────────────────── */
/* Gemessen: auf einer Projektseite mit Bild und vier Abschnitten
   beginnt das Formular 2,6 Bildschirme unter dem Seitenanfang. Wer
   entschieden ist, soll nicht dorthin scrollen müssen; wer noch liest,
   soll kein Zahlungsformular vor der Nase haben. Der Streifen löst
   beides: er klebt oben, solange die Geschichte läuft, und endet von
   selbst, wo das Formular beginnt — seine Hülle endet dort.

   Er ist keine nackte Aufforderung, sondern die Rechnung der Seite in
   einer Zeile: Betrag und Wirkung. Eine Zeile ist dabei die Auflage —
   in zwei Zeilen wird aus einem Weg ein Möbelstück. Deshalb trägt nur
   der erste Betrag seinen Wirkungssatz; die übrigen stehen als Zahl,
   und auf schmalen Schirmen schiebt man sie seitwärts. */
.geschichte{ position:relative }
.kurzweg{
  position:sticky; top:0; z-index:40;
  background:var(--tief-2);
  border-block:1px solid rgba(233,240,239,.16);
}
.kurzweg__innen{
  display:flex; align-items:center; gap:1rem;
  flex-wrap:nowrap; padding-block:.5rem;
}
.kurzweg__stufen{
  list-style:none; margin:0; padding:.2rem 0; min-width:0;
  display:flex; gap:.5rem; flex-wrap:nowrap;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.kurzweg__stufen::-webkit-scrollbar{ display:none }
.kurzweg__stufen a{
  display:flex; align-items:baseline; gap:.55rem; white-space:nowrap;
  min-height:44px; padding:.3rem .85rem;
  color:var(--licht); text-decoration:none;
  border:1.5px solid rgba(233,240,239,.28); border-radius:2px;
  transition:border-color .15s ease, background .15s ease;
}
.kurzweg__stufen a:hover{ border-color:var(--gewuerz); background:rgba(233,161,59,.1) }
.kurzweg__stufen a[aria-current="true"]{
  border-color:var(--gewuerz); background:rgba(233,161,59,.14);
}
.kurzweg__stufen b{
  font-family:var(--serif); font-weight:300; font-size:1.2rem;
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
/* Nur der erste Betrag trägt seinen Satz — er ist der Vorschlag. */
.kurzweg__stufen span{ display:none; font-size:.9rem; color:var(--licht-leise) }
.kurzweg__satz{ margin:0; font-size:.95rem; color:var(--licht-leise) }
.kurzweg__zum{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--gewuerz); font-size:.95rem; white-space:nowrap;
  text-decoration:underline; text-underline-offset:.25em;
}
.kurzweg__zum:hover{ color:var(--licht) }

@media(min-width:48rem){
  .kurzweg__stufen li:first-child span{ display:inline }
}
/* Nicht mehr als ein Satz in der Zeile: drei Erklärungen nebeneinander
   passen selbst auf breiten Schirmen nicht und schieben den Verweis
   heraus. Der erste Betrag ist der Vorschlag, er trägt die Erklärung. */