/* ═══════════════════════════════════════════════════════════════════
   stil.css – das Stylesheet der gesamten Website

   Es gibt bewusst nur diese eine Datei. Vorher hatten Startseite und
   Impressum je einen eigenen <style>-Block mit eigenen Farbwerten;
   dieselbe Variable stand an drei Stellen mit zwei verschiedenen
   Werten (--muted war 0.45 bzw. 0.55). Wer hier etwas ändert, ändert
   es für jede Seite – und nur hier.

   Eingebunden wird sie überall absolut als /stil.css, damit der Pfad
   aus jeder Verzeichnistiefe stimmt.

   Aufbau:
     1. Grundlagen      Reset, Schriften, Farben, Grundgerüst
     2. Seitenrahmen    Menü oben, Fußbereich unten – auf jeder Seite
     3. Bausteine       Überschriften, Karten, Hinweise, Buttons,
                        Formularfelder, Tabellen, Kacheln, Dialoge,
                        dazu die Teile, die nur das Bestellformular
                        braucht (Produktvorschau, Positionen, Zahlwege)
     4. Startseite      Fortschrittsbalken, Zahlungskarten, Logowand
     5. Spendenlauf     Ablauf, Linkfelder, Reiter und Tabellen im Admin
     6. Breakpoints     Mobile-first, erweitert nach oben
     7. Rechtsseiten und Admin-Bereiche
   ═══════════════════════════════════════════════════════════════════ */

/* ══ 1. Grundlagen ═══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Das hidden-Attribut setzt nur display:none aus dem Browser-Standard –
   jede eigene display-Regel schlägt es. Buttons (display:inline-flex)
   blieben dadurch sichtbar, obwohl sie versteckt sein sollten. */
[hidden] { display: none !important; }

/* Lokal gehostete Schriften – keine Anfrage an Google-Server (DSGVO). */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/PlayfairDisplay.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/fonts/DMSans.woff2') format('woff2');
}

:root {
  /* Im September 2026 leicht angewärmt: Der Grund hat einen Hauch
     mehr Braun, Karten sind warm statt neutral grau getönt, das Gold
     ist eine Spur weicher und der Fließtext etwas besser lesbar. */
  --gold: #D1AE5B;
  --gold-light: #F2DA9E;
  --gold-dark: #94712A;
  --bg: #120F0A;
  --panel: #1B1711;
  --text: #F0EADE;
  --muted: rgba(240, 234, 222, 0.62);
  --faint: rgba(240, 234, 222, 0.38);
  --border: rgba(209, 174, 91, 0.2);
  --border-strong: rgba(209, 174, 91, 0.42);
  --card: rgba(240, 220, 175, 0.045);
  --field: rgba(240, 220, 175, 0.055);
  --gruen: #7BC99A;
  --rot: #F08A80;

  /* Kopfzeile und Fußbereich. Die Kopfzeile ist deckend, damit beim
     Scrollen kein Text durchscheint. */
  --kopf-bg: #16120C;
  --kopf-hoehe: 64px;
  --fuss-bg: #0A0806;

  /* Seitlicher Innenrand aller Seiten und die Breite der Kopfzeile.
     Die Startseite ist breiter als die übrigen Seiten (880 statt
     720 px) – die Kopfzeile ist trotzdem überall gleich breit, siehe
     .mainnav. */
  --rand: clamp(1rem, 4vw, 2.5rem);
  --breite-rahmen: 880px;

  /* Vier abgestufte Radien für die ganze Website. Vorher standen 10,
     12, 16, 20 und 24 px nebeneinander – gleich aussehende Karten
     hatten je nach Seite unterschiedlich runde Ecken.
       klein  Felder, Buttons, Hinweiszeilen
       mittel Kacheln, Auswahlflächen, Bilder
       radius Karten
       gross  Dialoge */
  --radius-klein: 10px;
  --radius-mittel: 12px;
  --radius: 16px;
  --radius-gross: 18px;

  /* Abstand zwischen zwei Abschnitten. Sorgt dafür, dass der Rhythmus
     auf allen Seiten derselbe ist. */
  --abstand-abschnitt: clamp(2rem, 5vw, 3.25rem);

  /* Fünf Abstände für alles innerhalb eines Blocks, auf einem
     4-Pixel-Raster. Vorher standen 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1,
     1.1 und 1.2 rem nebeneinander, dazu 6 und 8 px – dieselbe
     Beziehung (Überschrift zu Text) hatte je nach Seite einen anderen
     Abstand, und das sieht man auch ohne Lineal.
       xs  Beschriftung zum Feld, Hinweis unter einem Feld
       s   Überschrift zu ihrem Inhalt, Absatz zu Absatz
       m   Einleitung zum Inhalt, Nachsatz am Blockende, Block zu Block
       l   zwei Gruppen innerhalb einer Karte
       xl  Kopfbereich zum ersten Block */
  --luft-xs: 0.5rem;
  --luft-s: 0.75rem;
  --luft-m: 1rem;
  --luft-l: 1.5rem;
  --luft-xl: 2rem;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  /* Macht die Fensterbreite ohne Scrollbalken als 100cqw verfügbar –
     die Kopfzeile richtet sich danach. Wichtig: Mit container-type gibt
     der Browser overflow-x: hidden nicht mehr ans Fenster weiter, der
     body würde selbst zum Scrollbereich und die feste Kopfzeile bliebe
     nicht stehen. clip schneidet ab, ohne einen Scrollbereich zu
     erzeugen. hidden steht davor für Browser, die clip nicht kennen –
     die kennen auch container-type nicht. */
  overflow-x: hidden;
  overflow-x: clip;
  container-type: inline-size;
}

/* Grundfarbe für Links.
   ──────────────────────────────────────────────────────────────────
   Bis September 2026 gab es diese Regel nicht: Linkfarbe war eine
   Eigenschaft einzelner Kästen (.hint, .lead, .notice, .prose, .text,
   .alert). Überall sonst blieb das Browserblau #0000EE stehen – auf
   fast schwarzem Grund ein Kontrast von rund 2:1, gefordert sind 4,5:1.
   Betroffen war ausgerechnet der Link zur Datenschutzerklärung in den
   Einwilligungskästchen von Anmeldung, Zusage und Hoodie-Bestellung:
   Man sollte bestätigen, etwas gelesen zu haben, das man kaum sah.

   Die Regel steht hier als Grundlage, nicht als Ausnahme. Sie hat
   Spezifität (0,0,1) – jede vorhandene Regel mit Klasse, von .footer a
   über .mainnav-links a bis .btn, ist spezifischer und behält ihr
   eigenes Aussehen. Ein Link in einem neuen Kasten ist damit lesbar,
   ohne dass jemand daran denken muss.

   Bewusst der nackte Typselektor und nicht a[href]: Ein
   Attributselektor zählt wie eine Klasse und wäre damit spezifischer
   als .btn – jeder Knopf, der ein Link ist, sähe plötzlich aus wie
   Fließtext. */
a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(214, 150, 80, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Anker wie #spenden sollen nicht unter der festen Kopfzeile landen. */
[id] { scroll-margin-top: calc(var(--kopf-hoehe) + 1rem); }

/* Eine Breite für Fließtext und Formular, eine für die Startseite mit
   ihren zweispaltigen Karten, eine für die Admin-Tabelle.
   Oben und unten ohne Innenrand: Kopfzeile und Fußbereich reichen als
   Bänder bis an den Fensterrand. */
.wrapper {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--rand);
}

.wrapper--start { max-width: 880px; }
.wrapper--wide { max-width: 1400px; }

/* Im Admin-Bereich mit seiner breiten Tabelle geht die Kopfzeile über
   die volle Breite des Inhalts. */
.wrapper--wide > .mainnav { margin-inline: 0; }

/* Grundabstand zwischen zwei Blöcken einer Seite. Er gilt auch für die
   Hüllen, die je nach Zustand eine Karte einblenden (#formular,
   #erfolg, #fehler): Sonst hängt der Abstand davon ab, ob gerade eine
   Karte oder eine Hülle danebensteht, und die Seite springt beim
   Umschalten. Größere Abstände (Kopfbereich, Fußbereich, Abschnitte)
   setzen ihren eigenen Wert und gewinnen, weil benachbarte Abstände
   nicht addiert, sondern zusammengelegt werden. */
.wrapper > * + * { margin-top: var(--luft-m); }

/* Dieselbe Regel innerhalb einer solchen Hülle: Kacheln, Karten und
   Hinweise darin stehen im selben Abstand zueinander. */
.blockfolge > * + * { margin-top: var(--luft-m); }

/* ══ 2. Seitenrahmen ═════════════════════════════════════════════ */

/* Menü und Fußbereich stehen auf jeder Seite im selben Wortlaut und
   in derselben Reihenfolge. Maßgeblich ist die Fassung in index.html;
   `python3 tools/pruefe-seitenrahmen.py` vergleicht alle Seiten
   dagegen und meldet jede Abweichung. */

/* Die Kopfzeile bleibt beim Scrollen oben stehen, damit Spendenlauf und
   Hoodie-Bestellung von jeder Stelle aus einen Klick entfernt sind.
   Sie steht im HTML innerhalb des .wrapper; das Band reicht trotzdem
   bis an den Fensterrand. Das macht border-image mit seitlichem
   Überstand – der erzeugt anders als ein breites Pseudo-Element keinen
   seitlichen Scrollbalken. Der unterste Pixel ist die goldene Linie. */
.mainnav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0 1.5rem;
  min-height: var(--kopf-hoehe);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  /* Auf jeder Seite gleich breit, egal wie breit der Inhalt darunter
     ist: Die negativen Außenabstände ziehen die Kopfzeile aus dem
     schmaleren .wrapper auf --breite-rahmen heraus. */
  margin-inline: calc(50% - min(var(--breite-rahmen), 100cqw - 2 * var(--rand)) / 2);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(to top, var(--border) 1px, var(--kopf-bg) 1px) fill 0 / 0 / 0 100vmax;
}

.mainnav-brand {
  align-self: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.mainnav-brand span { color: var(--gold); }

.mainnav-links {
  display: flex;
  align-items: stretch;
  gap: clamp(0.85rem, 3vw, 1.75rem);
  list-style: none;
}

.mainnav-links li { display: flex; }

/* Alle Punkte sehen gleich aus. Früher war „Hoodie bestellen“ als
   goldener Knopf abgesetzt und der Spendenlauf nicht, obwohl beide
   befristete Aktionen sind. Die aktuelle Seite trägt die goldene
   Linie an der Unterkante der Kopfzeile. */
.mainnav-links a {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding-top: 2px;
  transition: color 0.2s, border-color 0.2s;
}

/* Der Link ist ein Flex-Element: „Hoodie“ und <span> bestellen</span>
   werden dadurch zu getrennten Teilen, und das Leerzeichen am Anfang
   des Spans fiele weg („Hoodiebestellen“). pre hält es fest. */
.mainnav-links a .nur-breit { white-space: pre; }

.mainnav-links a:hover,
.mainnav-links a:focus-visible {
  color: var(--text);
  border-color: var(--border-strong);
}

.mainnav-links a[aria-current='page'] {
  color: var(--gold);
  border-color: var(--gold);
}

/* Auf schmalen Displays passen vier Punkte in Großbuchstaben nicht
   entspannt in eine Zeile. Deshalb dort:
   – „Start“ bleibt immer, „Startseite“ wird nur zu „Start“ gekürzt,
   – „Jetzt spenden“ entfällt (die Spendenwege stehen auf der Startseite),
   – „Hoodie bestellen“ wird zu „Hoodie“
     (die Zusätze und der wegfallende Punkt tragen class="nur-breit"),
   – der Schriftzug steht in einer eigenen Zeile und scrollt weg; stehen
     bleibt nur die Zeile mit den drei Punkten. Das macht der negative
     top-Wert: Die Kopfzeile rutscht um die Höhe des Schriftzugs nach
     oben aus dem Bild und hält dann an. */
@media (max-width: 719px) {
  :root { --kopf-hoehe: 48px; }

  /* .mainnav davor, sonst gewinnt .mainnav-links li { display: flex } */
  .mainnav .nur-breit { display: none; }

  .mainnav {
    top: -48px;
    flex-direction: column;
    gap: 0;
  }

  /* Kein Flex: Sonst würden „Abitur“ und die <span> mit der Jahreszahl
     zu getrennten Elementen und das Leerzeichen dazwischen verschwände. */
  .mainnav-brand {
    display: block;
    height: 48px;
    line-height: 48px;
    text-align: center;
  }

  .mainnav-links {
    justify-content: space-evenly;
    gap: 0.5rem;
    border-top: 1px solid rgba(209, 174, 91, 0.1);
  }

  .mainnav-links a { min-height: 48px; }
}

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

/* Auf jeder Seite derselbe: dieselben Verweise in derselben Reihenfolge,
   darunter Jahrgang und Urheber. Vorher hatte jede Seite einen eigenen –
   vom Impressum aus kam man überhaupt nicht mehr weiter.
   Ein etwas dunkleres Band über die volle Breite mit goldener Linie
   oben schließt die Seite ab. Es reicht per border-image auch nach
   unten über den Rand hinaus, damit auf kurzen Seiten kein Streifen
   darunter bleibt. */
.footer {
  margin-top: calc(var(--abstand-abschnitt) * 1.5);
  padding: 2.25rem 0 2rem;
  font-size: 12px;
  color: var(--faint);
  line-height: 1.8;
  text-align: center;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to bottom, var(--border) 1px, var(--fuss-bg) 1px) fill 0 / 0 / 0 100vmax 100vmax;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.1rem;
  margin-bottom: 0.9rem;
}

.footer-links li { list-style: none; }

/* Trennpunkte gibt es nur, solange alle Verweise in eine Zeile
   passen. Auf schmalen Displays bricht die Liste um, und ein Punkt
   am Zeilenanfang sähe nach Tippfehler aus – dort trennen die
   Abstände. */
@media (min-width: 560px) {
  .footer-links { gap: 0.35rem 0; }

  .footer-links li:not(:last-child)::after {
    content: '·';
    margin: 0 0.55rem;
    color: rgba(240, 234, 222, 0.22);
  }
}

/* Instagram und TikTok. Die Liste wird von /social.js gefüllt und
   bleibt versteckt, solange dort kein Benutzername gepflegt ist –
   deshalb sitzt der Abstand am Element selbst und nicht als Lücke
   über dem Vereinsnamen. */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--luft-xs) var(--luft-m);
  margin-bottom: var(--luft-m);
}

.footer-social li { list-style: none; }

/* Symbol und Name gehören zusammen und dürfen nie getrennt umbrechen.
   Keine Unterstreichung wie bei den übrigen Verweisen im Fußbereich:
   Unter einem Symbol sieht sie nach einem Strich aus, nicht nach
   einem Verweis – die Umrandung übernimmt hier die Rolle. */
.footer-social .social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.18s, border-color 0.18s;
}

.footer-social .social-link svg { width: 15px; height: 15px; flex: none; }

.footer-social .social-link:hover { color: var(--gold); border-color: var(--border-strong); }

.footer-org {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  color: rgba(240, 234, 222, 0.6);
  letter-spacing: 0.02em;
}

.footer-credit { margin-top: 0.4rem; color: rgba(240, 234, 222, 0.3); }

.footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid rgba(240, 234, 222, 0.15); }
.footer a:hover { color: var(--gold); border-color: var(--border-strong); }
.footer-credit a { color: rgba(240, 234, 222, 0.4); }

/* Der Admin-Zugang direkt unter dem Fußbereich liegt noch auf dem
   Band und bekommt unten dieselbe Luft. */
.footer + .admin-zeile { margin-top: -0.75rem; padding-bottom: 2rem; }

/* ── Zurück-Verweis (im Bestellformular unter dem Menü) ─────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--faint);
  text-decoration: none;
  transition: color 0.2s;
}

.back-link:hover { color: var(--gold); }
.back-link svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ══ 3. Bausteine ════════════════════════════════════════════════ */

/* ── Überschriften und Abschnitte ───────────────────────────────── */

.badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(209, 174, 91, 0.4);
  padding: 5px 14px;
  border-radius: 100px;
}

.header { margin-bottom: var(--luft-xl); }
.header > .badge { margin-bottom: 0.9rem; }

h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 6.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}

h1 span { color: var(--gold); }

.lead {
  font-size: clamp(0.94rem, 2.4vw, 1.02rem);
  color: var(--muted);
  max-width: 46ch;
}

h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.25rem, 4vw, 1.55rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

h3 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Ein Abschnitt mit eigener Überschrift. Der gleichmäßige Abstand
   dazwischen ist das, was eine Seite ruhig wirken lässt – vorher hatte
   jeder Block auf der Startseite seinen eigenen margin-bottom. */
.abschnitt + .abschnitt { margin-top: var(--abstand-abschnitt); }

.abschnitt-kopf {
  text-align: center;
  margin-bottom: 1.5rem;
}

.abschnitt-kopf h2 { margin-bottom: 0.4rem; }

.abschnitt-kopf p {
  font-size: 13.5px;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
}

/* ── Hinweisboxen ───────────────────────────────────────────────── */

.notice {
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius-klein);
  background: rgba(209, 174, 91, 0.05);
  padding: 0.9rem 1.1rem;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: var(--luft-m);
}

.notice strong { color: var(--text); font-weight: 500; }
.notice p + p { margin-top: var(--luft-s); }

.notice--warn {
  border-left-color: var(--rot);
  background: rgba(240, 128, 128, 0.06);
  border-color: rgba(240, 128, 128, 0.25);
}

.notice--ok {
  border-left-color: var(--gruen);
  background: rgba(92, 201, 138, 0.06);
  border-color: rgba(92, 201, 138, 0.25);
}

/* Spam-Hinweis nach Anmeldung und Zusage. Deutlicher als ein normaler
   Hinweis, weil eine übersehene Mail den ganzen Vorgang stoppt: ohne
   Sponsorenlink keine Zusagen, ohne Betragsmail keine Überweisung. */
.notice--spam {
  border-left-width: 3px;
  background: rgba(209, 174, 91, 0.1);
  border-color: rgba(209, 174, 91, 0.35);
  color: var(--text);
  font-size: 15px;
}

/* Nummerierte Abfolge, wenn die Reihenfolge der Schritte die
   eigentliche Auskunft ist – etwa beim Warten auf die Einwilligung. */
.schrittliste {
  margin: 1rem 0;
  padding-left: 1.35rem;
  display: grid;
  gap: 0.5rem;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

.schrittliste li::marker {
  color: var(--gold);
  font-weight: 600;
}

.hint {
  font-size: 12.5px;
  color: var(--faint);
  line-height: 1.55;
}

.hint a, .notice a, .lead a, .card .text a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }

/* ── Karte ──────────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.15rem, 4vw, 1.75rem);
}

.card + .card { margin-top: var(--luft-m); }

/* Der Rhythmus innerhalb einer Karte. Dieselbe Beziehung bekommt auf
   jeder Seite denselben Abstand; einzelne Karten brauchen dafür keine
   eigenen Angaben mehr. */
.card > h2,
.card > h3,
.card > .step-title { margin-bottom: var(--luft-s); }

.card > .hint { margin-top: var(--luft-m); }

/* Der letzte Absatz einer Karte sitzt am Innenrand, nicht davor. */
.card > *:last-child { margin-bottom: 0; }

/* Ein Hinweis- oder Meldungskasten in einer Karte ist ein eigener
   Block und bekommt denselben Abstand wie zwei Karten zueinander. */
.card > .alert,
.card > .notice { margin-top: var(--luft-m); }

/* Karte mit Tabelle: schmalerer Innenrand, damit die Spalten Platz
   haben. Sonst dieselbe Karte. */
.card--eng { padding: 1rem; }

/* Zwei Gruppen innerhalb einer Karte, etwa ein zweiter Feldblock
   unter einer Auswahl. */
.abstand-gruppe { margin-top: var(--luft-l); }
.abstand-klein { margin-top: var(--luft-xs); }

/* Erklärung unter einem Kontrollkästchen: sitzt unter dem Text, nicht
   unter dem Kästchen, und rückt deshalb auf dessen Textkante ein.
   11px Abstand plus 20px Kästchen, siehe .check. */
.check-hint {
  margin: -0.35rem 0 0;
  padding-left: 31px;
}

/* Kästchen, das direkt unter einer Überschrift oder einem Feld sitzt:
   ohne den oberen Innenrand, der sonst zwei Kästchen trennt. */
.check--oben { padding-top: 0; }

/* Mehrere Knöpfe nebeneinander, überall mit demselben Abstand. */
.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-xs);
}

.knopfreihe--mitte { align-items: center; flex-wrap: nowrap; }

/* Zahleneingabe: ein Betrag oder ein Alter braucht keine volle Breite,
   und zwei verschieden breite Zahlenfelder nebeneinander sehen aus wie
   ein Fehler. */
.eingabe-schmal { max-width: 180px; }

.hint--mitte { text-align: center; margin-top: var(--luft-xl); }

/* Absatz, der nur den Zugang zum Admin-Bereich trägt. Steht auf allen
   Seiten außerhalb des Fußbereichs, damit der wortgleich bleibt. */
.admin-zeile { text-align: center; }

/* Anmeldemaske des Admin-Bereichs: eine schmale Karte in der Mitte. */
.card--login { max-width: 400px; margin: var(--luft-xl) auto 0; }

/* Kürzel wird großgeschrieben gespeichert, also auch so eingegeben. */
.grossbuchstaben { text-transform: uppercase; }

/* Überschrift des Admin-Bereichs: kleiner als eine Seitenüberschrift,
   weil darüber schon die Kopfzeile mit Reitern steht. */
.admin-titel {
  margin-top: var(--luft-s);
  font-size: clamp(1.7rem, 5vw, 2.4rem);
}

/* ── Fortschritt ────────────────────────────────────────────────── */

.progress { margin-bottom: 1.5rem; }

.progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.progress-meta strong { color: var(--gold); font-weight: 500; }

.progress-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 100px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 100px;
  width: 0;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Formularfelder ─────────────────────────────────────────────── */

.step-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.3rem, 4.5vw, 1.65rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}

.step-sub {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: var(--luft-m);
}

.field { margin-bottom: var(--luft-l); }
.field:last-child { margin-bottom: 0; }

/* Zwei Felder nebeneinander – auf dem Handy untereinander.
   Den Abstand INNERHALB der Zeile macht ausschließlich der gap, den
   Abstand zur nächsten Zeile ausschließlich die Zeile selbst. Vorher
   trugen die Felder ihren eigenen margin mit in die Zeile hinein, und
   damit stimmte auf dem Handy keiner der beiden Abstände: zwischen
   Vorname und Nachname addierten sich gap und margin zu 48 px, und
   zwischen Nachname und dem nächsten Feld blieb gar nichts, weil das
   zweite Feld :last-child ist und seinen margin deshalb verliert. */
.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--luft-l);
  margin-bottom: var(--luft-l);
}

.field-row:last-child { margin-bottom: 0; }
.field-row > .field { margin-bottom: 0; }

/* Die kleine Überschrift über einem Eingabefeld. Ausdrücklich NICHT
   für ein Kästchen-Label: .check ist weniger spezifisch als
   .field label und verlöre sonst sein display:flex. Das Kästchen
   fiele damit auf die Schriftlinie zurück statt neben den Text, und
   der gap zwischen beiden verschwände ganz. */
.field label:not(.check),
.field-label {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: var(--luft-xs);
  letter-spacing: 0.04em;
}

.field .optional { color: var(--faint); }

input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='date'],
select,
textarea {
  width: 100%;
  background: var(--field);
  border: 1px solid rgba(209, 174, 91, 0.22);
  border-radius: var(--radius-klein);
  padding: 11px 13px;
  font-size: 16px; /* 16px verhindert den Zoom-Sprung auf iOS */
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border-color 0.18s, background 0.18s;
  -webkit-appearance: none;
  appearance: none;
}

textarea { resize: vertical; min-height: 74px; line-height: 1.5; }

input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.07);
}

input::placeholder, textarea::placeholder { color: rgba(240, 234, 222, 0.22); }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
  padding-right: 34px;
}

select option { background: var(--panel); color: var(--text); }

.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: var(--rot); }

.field-error {
  display: none;
  font-size: 12.5px;
  color: var(--rot);
  margin-top: var(--luft-xs);
}

/* Hinweis unter einem Eingabefeld gehört zum Feld, nicht zum Abschnitt. */
.field > .hint { margin-top: var(--luft-xs); }

.field.invalid .field-error { display: block; }

/* ── Auswahlkacheln (ja/nein, Abholung/Versand) ─────────────────── */

.choices { display: grid; gap: 10px; }
.choices--2 { grid-template-columns: 1fr 1fr; }

.choice {
  position: relative;
  display: block;
  border: 1px solid rgba(209, 174, 91, 0.22);
  background: var(--field);
  border-radius: var(--radius-mittel);
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}

.choice:hover { border-color: var(--border-strong); }

.choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Beide sind <span>. Ohne display:block liefen Titel und Erläuterung
   in einer Zeile ineinander („Jaich bin im Abiturjahrgang") – und
   margin-top blieb wirkungslos, weil senkrechte Abstände bei
   Inline-Elementen nicht greifen. */
.choice-title { display: block; font-size: 15px; color: var(--text); font-weight: 500; }
.choice-sub { display: block; font-size: 12.5px; color: var(--faint); margin-top: 4px; }

.choice:has(input:checked) {
  border-color: var(--gold);
  background: rgba(209, 174, 91, 0.11);
}

.choice:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.choice:has(input:checked) .choice-title { color: var(--gold-light); }

/* ── Produktvorschau ────────────────────────────────────────────── */

/* Die Mockups des Textildruckers stehen auf weißem Grund. Statt sie
   freizustellen bekommen sie eine helle Fläche – ein dunkler Hoodie
   auf dunklem Hintergrund wäre schlicht nicht zu erkennen. */
.produkt-bilder {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 1rem;
}

.produkt-bild {
  background: #F4F1E9;
  border: 1px solid var(--border);
  border-radius: var(--radius-mittel);
  padding: 0.5rem;
  position: relative;
  overflow: hidden;
}

.produkt-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.produkt-bild figcaption {
  position: absolute;
  left: 0.9rem;
  bottom: 0.85rem;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6455;
}

/* Die Motive füllen ihre Fläche randlos aus – eine Beschriftung im Bild
   läge mitten in der Illustration. Sie rutscht deshalb darunter. */
.produkt-bild--dunkel {
  background: #131313;
  /* Backprint (hochkant) und Frontprint (quadratisch) stehen
     nebeneinander in einem Raster: Beide Kästen sind gleich hoch, der
     Frontprint ist aber deutlich flacher. Ohne diese Zentrierung klebt
     der Stern oben im Kasten und die Restfläche bleibt darunter leer. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.produkt-bild--dunkel figcaption {
  position: static;
  margin-top: 0.55rem;
  padding-left: 0.4rem;
  color: rgba(255, 255, 255, 0.45);
}

.produkt-fakten {
  display: grid;
  gap: 0;
  font-size: 14px;
}

.produkt-fakten div {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.produkt-fakten div:last-child { border-bottom: none; }
.produkt-fakten dt { color: var(--faint); flex-shrink: 0; }
.produkt-fakten dd { color: var(--text); text-align: right; }

/* ── Positionen ─────────────────────────────────────────────────── */

.positionen { display: grid; gap: 10px; margin-bottom: 0.9rem; }

.position {
  display: grid;
  grid-template-columns: 1fr 96px 40px;
  gap: 8px;
  align-items: end;
}

.position .field { margin-bottom: 0; }

.pos-remove {
  height: 43px;
  border: 1px solid rgba(240, 128, 128, 0.28);
  background: rgba(240, 128, 128, 0.07);
  color: var(--rot);
  border-radius: var(--radius-klein);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s;
}

.pos-remove:hover { background: rgba(240, 128, 128, 0.16); }
.pos-remove svg { width: 15px; height: 15px; }
.pos-remove:disabled { opacity: 0.3; cursor: not-allowed; }

.pos-summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
  margin-top: 0.9rem;
  font-size: 14px;
  color: var(--muted);
}

.pos-summe b { color: var(--gold); font-weight: 500; font-size: 16px; }

/* ── Aufklappbares Panel (Größentabelle) ────────────────────────── */

details.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-mittel);
  background: rgba(0, 0, 0, 0.2);
  margin-top: 0.9rem;
  overflow: hidden;
}

details.panel > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.8rem 1rem;
  font-size: 13.5px;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

details.panel > summary::-webkit-details-marker { display: none; }

details.panel > summary .chevron {
  width: 14px; height: 14px;
  margin-left: auto;
  transition: transform 0.2s;
  flex-shrink: 0;
}

details.panel[open] > summary .chevron { transform: rotate(180deg); }

.panel-body { padding: 0 1rem 1rem; }

/* ── Tabellen ───────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

th {
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--muted);
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: none; }

/* Rechtsbündige Zahlenspalten behalten ihren Abstand zur nächsten
   Spalte – nur ganz rechts außen wird bündig abgeschlossen. */
td.num, th.num { text-align: right; white-space: nowrap; }
td.num:last-child, th.num:last-child { padding-right: 0; }

/* ── Zusammenfassung ────────────────────────────────────────────── */

.summary-list { font-size: 14px; }

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.summary-row:last-child { border-bottom: none; }
.summary-row dt { color: var(--faint); flex-shrink: 0; }
.summary-row dd { color: var(--text); text-align: right; }

/* Für lange Werte wie IBAN und Zahlungsreferenz: auf schmalen Displays
   steht der Wert unter dem Label und bekommt so die volle Breite. */
.summary-list--stack .summary-row { display: block; }
.summary-list--stack .summary-row dd {
  text-align: left;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-top: 1px solid var(--border-strong);
  margin-top: 0.5rem;
  padding-top: 1rem;
}

.summary-total span { font-size: 14px; color: var(--muted); min-width: 0; }

.summary-total b {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Checkboxen ─────────────────────────────────────────────────── */

.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 0.75rem 0;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}

.check input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--field);
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}

.check input[type='checkbox']:checked {
  background: var(--gold);
  border-color: var(--gold);
}

.check input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #0E0C08;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.check input[type='checkbox']:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.check.invalid { color: var(--rot); }
.check.invalid input[type='checkbox'] { border-color: var(--rot); }

/* ── Buttons ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-klein);
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.18s, background 0.18s, transform 0.1s, border-color 0.18s;
  line-height: 1.2;
}

.btn:active { transform: scale(0.99); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:active { transform: none; }

.btn--primary { background: var(--gold); color: #0E0C08; }
.btn--primary:hover:not(:disabled) { background: var(--gold-light); }

.btn--ghost {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
}

.btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); color: var(--text); }

.btn--danger {
  background: rgba(240, 128, 128, 0.1);
  border: 1px solid rgba(240, 128, 128, 0.3);
  color: var(--rot);
}

.btn--danger:hover:not(:disabled) { background: rgba(240, 128, 128, 0.2); }

.btn--block { width: 100%; }
.btn--small { padding: 8px 14px; font-size: 13px; border-radius: 8px; }

.btn--add {
  background: none;
  border: 1px dashed rgba(209, 174, 91, 0.35);
  color: var(--gold);
  width: 100%;
  padding: 11px;
  font-size: 13.5px;
}

.btn--add:hover:not(:disabled) { background: rgba(209, 174, 91, 0.07); border-style: solid; }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* PayPal-Blau als Hausfarbe des Anbieters – hier bewusst die einzige
   Stelle, an der die Seite ihre Farbwelt verlässt: Der Knopf muss
   sofort als PayPal erkennbar sein. */
.btn--paypal {
  background: #003087;
  color: #fff;
  width: 100%;
}

.btn--paypal:hover:not(:disabled) { background: #00246b; }

/* ── Zahlungswege ───────────────────────────────────────────────── */

.zahlweg {
  border: 1px solid var(--border);
  border-radius: var(--radius-mittel);
  padding: 1rem 1.1rem;
  background: rgba(0, 0, 0, 0.22);
}

.zahlweg + .zahlweg { margin-top: 10px; }

.zahlweg-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.zahlweg-kopf h3 { margin: 0; }

.zahlweg-tag {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

/* ── Dezenter Zugang zum Admin-Bereich ──────────────────────────── */

.admin-zugang {
  display: inline-flex;
  background: none;
  font-family: inherit;
  cursor: pointer;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  font-size: 12.5px;
  color: var(--faint);
  text-decoration: none;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}

.admin-zugang:hover {
  color: var(--gold);
  border-color: var(--border-strong);
  background: rgba(209, 174, 91, 0.06);
}

.admin-zugang svg { width: 13px; height: 13px; flex-shrink: 0; }

.actions {
  display: flex;
  gap: var(--luft-xs);
  margin-top: var(--luft-xl);
}

.actions .btn { flex: 1; }
.actions .btn--back { flex: 0 0 auto; min-width: 96px; }

/* ── Meldungen ──────────────────────────────────────────────────── */

.alert {
  border-radius: var(--radius-klein);
  padding: 0.85rem 1rem;
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 1.1rem;
}

.alert--error { background: rgba(240, 128, 128, 0.1); border: 1px solid rgba(240, 128, 128, 0.3); color: #F5A9A9; }
.alert--ok { background: rgba(92, 201, 138, 0.1); border: 1px solid rgba(92, 201, 138, 0.3); color: #96DDB4; }
.alert--info { background: rgba(209, 174, 91, 0.08); border: 1px solid var(--border); color: var(--muted); }
.alert a { color: inherit; text-decoration: underline; }

/* ── Kennzahlen-Kacheln ─────────────────────────────────────────── */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px;
}

.tiles--klein { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }

.tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-mittel);
  padding: 0.9rem 0.75rem;
  text-align: center;
}

.tile--gross {
  background: rgba(209, 174, 91, 0.09);
  border-color: var(--border-strong);
}

.tile-label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 5px;
}

.tile-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1.05;
}

.tile-value.weiss { color: #fff; }
.tile-value.gruen { color: var(--gruen); }
.tile-value.klein { font-size: clamp(1.1rem, 3.4vw, 1.4rem); }
.tile-sub { font-size: 11px; color: var(--faint); margin-top: 4px; }

/* ── Statusmarken ───────────────────────────────────────────────── */

.pill {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}

.pill--gruen { border-color: rgba(92, 201, 138, 0.4); color: var(--gruen); background: rgba(92, 201, 138, 0.08); }
.pill--gold { border-color: var(--border-strong); color: var(--gold); background: rgba(209, 174, 91, 0.08); }
.pill--rot { border-color: rgba(240, 128, 128, 0.4); color: var(--rot); background: rgba(240, 128, 128, 0.08); }
.pill--grau { opacity: 0.7; }

/* ── Modal ──────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(5px);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 5vh, 3rem) 1rem;
  overflow-y: auto;
  animation: modal-grund 0.2s ease-out;
}

.modal-overlay[hidden] { display: none; }

.modal {
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-gross);
  padding: clamp(1.25rem, 4vw, 2rem);
  width: 100%;
  max-width: 560px;
  position: relative;
  margin: auto 0;
  animation: modal-auf 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ein Dialog, der aus dem Nichts erscheint, wirkt wie ein Fehler. Die
   Bewegung läuft über eine Animation und nicht über eine Übergangs-
   klasse, damit sie auch beim Umschalten des hidden-Attributs greift –
   nur so verhalten sich Spenden-Dialog und Hoodie-Admin gleich. */
@keyframes modal-grund {
  from { opacity: 0; }
}

@keyframes modal-auf {
  from { opacity: 0; transform: translateY(14px); }
}

.modal--schmal { max-width: 400px; }

/* Ein Dialog ist innen aufgebaut wie eine Karte: Überschrift eng an
   ihrem Text, dann der übliche Blockabstand. */
.modal > h2,
.modal > h3 { margin-bottom: var(--luft-s); }
.modal > *:last-child { margin-bottom: 0; }

.modal-x {
  position: absolute;
  top: 0.85rem; right: 0.85rem;
  background: none;
  border: none;
  color: var(--faint);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
}

.modal-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

.modal-sub {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0.4rem 0 1.4rem;
}

.divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.07); margin: 1.25rem 0; }

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

/* ══ 4. Startseite ═══════════════════════════════════════════════ */

/* Diese Regeln standen bis August 2026 als eigener <style>-Block in
   index.html – mit eigenen Farbwerten, eigenen Radien und einem
   zweiten Satz Buttons. Sie benutzen jetzt dieselben Bausteine wie
   der Rest der Website; geblieben ist nur, was es sonst nirgends
   gibt: der Fortschrittsbalken und die Zahlungskarten. */

/* ── Kopfbereich mit mittiger Ausrichtung ───────────────────────── */

.header--mitte {
  text-align: center;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.header--mitte .badge { margin-bottom: 1.4rem; }

.header--mitte h1 {
  font-size: clamp(2.3rem, 7vw, 3.9rem);
  font-weight: 900;
  line-height: 1.08;
  margin-bottom: 0.7rem;
}

.header--mitte .lead {
  max-width: 52ch;
  margin: 0 auto;
  font-weight: 300;
}

/* ── Spendenstand ───────────────────────────────────────────────── */

/* Ein Kasten, mittig gesetzt wie der Kopfbereich darüber. Die Zahl,
   um die es geht, groß; darunter der Balken mit dem Prozentwert und ein
   Satz, der das Ziel nennt. Das Ziel wird bewusst nur dort erwähnt und
   nicht groß herausgestellt – siehe Kommentar in index.html.
   Schmaler als die Seite, damit er neben dem kurzen Einleitungstext
   nicht den ganzen Raum einnimmt. */
.stand {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-gross);
  padding: clamp(1.25rem, 4vw, 1.9rem) clamp(1.25rem, 5vw, 2.5rem);
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(209, 174, 91, 0.11) 0%, transparent 70%),
    var(--card);
}

.stand-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.stand-betrag {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.3rem, 8vw, 3.3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--gold-light);
  margin-top: 0.4rem;
  font-variant-numeric: lining-nums;
}

.stand-balken {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(1rem, 3vw, 1.35rem);
}

/* Der Balken behält seinen goldenen Verlauf. Weggefallen sind der
   durchlaufende Glanz und das Leuchten um den Punkt am Ende – beides
   wirkte eher nach Spielautomat als nach Spendenstand. */
.track-outer {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(240, 234, 222, 0.07);
  border-radius: 100px;
  height: 12px;
  overflow: hidden;
}

.track-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--gold-dark) 0%, var(--gold) 70%, var(--gold-light) 100%);
  transition: width 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.stand-prozent {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  white-space: nowrap;
}

.stand-text {
  font-size: 14px;
  color: var(--muted);
  margin-top: clamp(0.9rem, 3vw, 1.15rem);
}

.stand-text strong { color: var(--text); font-weight: 500; }

/* Die Statuszeile sitzt klein im Kasten statt als eigener Block
   darunter. Eine Fehlermeldung bleibt rot, bekommt aber keine Fläche. */
.stand .status-msg,
.stand .status-msg.error {
  margin: 0.35rem 0 0;
  padding: 0;
  min-height: 0;
  font-size: 12px;
  background: none;
}

/* ── Aktionskarten (Mitmachen) ──────────────────────────────────── */

/* Spendenlauf und Hoodie-Bestellung sind beide befristet und stehen
   deshalb gleichrangig nebeneinander – die ganze Karte ist der Link.
   Aufbau wie die Zahlungskarten darunter. */
.aktionskarte {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.25rem;
  color: var(--muted);
  text-decoration: none;
  transition: border-color 0.3s, background 0.3s;
}

.aktionskarte:hover,
.aktionskarte:focus-visible {
  border-color: var(--border-strong);
  background: rgba(209, 174, 91, 0.05);
}

.aktionskarte-titel {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.aktionskarte-text { font-size: 14px; line-height: 1.6; }

.aktionskarte-link {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.aktionskarte:hover .aktionskarte-link { color: var(--gold-light); }

/* ── Statuszeile unter dem Balken ───────────────────────────────── */

.status-msg {
  font-size: 13px;
  text-align: center;
  padding: 8px;
  border-radius: var(--radius-klein);
  margin-top: 1rem;
  min-height: 2rem;
  color: var(--faint);
}

.status-msg.error { color: var(--rot); background: rgba(240, 128, 128, 0.1); }
.status-msg.success { color: var(--gruen); background: rgba(92, 201, 138, 0.1); }
.status-msg.loading { color: var(--muted); }

/* ── Zahlungswege ───────────────────────────────────────────────── */

.karten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.zahlkarte {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.3s;
}

.zahlkarte:hover { border-color: var(--border-strong); }

.zahlkarte-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
}

.zahlkarte-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-mittel);
  background: rgba(209, 174, 91, 0.12);
  border: 1px solid rgba(209, 174, 91, 0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}

.zahlkarte-icon svg { width: 20px; height: 20px; }

.zahlkarte-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zahlkarte-titel { font-size: 15px; font-weight: 500; color: var(--text); }

/* Kopierbarer Wert: IBAN und PayPal-Adresse liegen in einem
   abgesetzten Feld, damit klar ist, was der Knopf danebenmitnimmt. */
.kopierzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-mittel);
  padding: 10px 14px;
}

.kopierwert {
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
  flex: 1;
  line-height: 1.4;
}

.copy-btn {
  background: rgba(209, 174, 91, 0.15);
  border: 1px solid rgba(209, 174, 91, 0.3);
  color: var(--gold);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.copy-btn:hover { background: rgba(209, 174, 91, 0.28); }

.copy-btn.copied {
  color: var(--gruen);
  border-color: rgba(92, 201, 138, 0.4);
  background: rgba(92, 201, 138, 0.1);
}

.zahlkarte-fuss { font-size: 12px; color: var(--faint); padding: 0 2px; line-height: 1.5; }
.zahlkarte-fuss strong { color: var(--muted); font-weight: 500; }
.zahlkarte-fuss + .zahlkarte-fuss { margin-top: -0.6rem; }

/* ── Kontaktkarten (Spendenquittung, Sponsoring) ────────────────── */

/* Vorher waren das zwei mittig gesetzte Absätze ohne Rahmen, die
   unter dem Spendenbereich schwebten. Als Karten stehen sie auf einer
   Höhe mit den Zahlungswegen und sind als Kontaktwege erkennbar. */
.kontaktkarte {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.kontaktkarte h3 { margin-bottom: 0.6rem; }

.kontaktkarte p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
}

.kontaktkarte a {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(209, 174, 91, 0.3);
  word-break: break-all;
}

.kontaktkarte a:hover { border-color: var(--gold); }

/* ── Logowand (Dank an spendende Firmen) ────────────────────────── */

/* Firmenlogos sind für weißen Grund gestaltet und haben ihre eigenen
   Hausfarben – auf dem dunklen Hintergrund wären viele davon kaum zu
   lesen. Jedes Logo bekommt deshalb ein helles Feld, wie die
   Produktbilder im Bestellformular. Alle Felder sind gleich groß, damit
   ein breites und ein hohes Logo nebeneinander gleich viel Gewicht
   haben. Mit einem Logo steht das Feld mittig, mit mehreren bricht die
   Wand von selbst um. */
.logowand {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.logowand-feld {
  flex: 0 1 240px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--luft-l);
  background: #F4F1E9;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.logowand-feld img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.logowand-fuss {
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 52ch;
  margin: var(--luft-m) auto 0;
}

/* ══ 5. Spendenlauf ══════════════════════════════════════════════ */

/* Nur das, was es sonst nirgends gibt. Formulare, Karten, Kacheln,
   Tabellen und Dialoge kommen aus Abschnitt 3. */

/* Nummerierter Ablauf auf der Infoseite */
.ablauf {
  margin: 0 0 0 1.25rem;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}

.ablauf li { margin-bottom: 0.55rem; padding-left: 0.2rem; }
.ablauf li::marker { color: var(--gold); font-weight: 500; }
.ablauf strong { color: var(--text); font-weight: 500; }

/* Fließtext in Karten */
.card .text { font-size: 14.5px; color: var(--muted); margin-bottom: var(--luft-s); line-height: 1.6; }
.card .text:last-child { margin-bottom: 0; }
.card .text strong { color: var(--text); font-weight: 500; }

/* Honeypot: für Menschen unsichtbar, nicht per display:none – manche
   Bots überspringen versteckte Felder sonst. */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Die beiden Links nach der Anmeldung */
.linkbox { margin-top: var(--luft-m); }
.linkbox-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--luft-xs);
}

.linkbox > .hint,
.linkbox > .btn { margin-top: var(--luft-xs); }

/* Die E-Mail-Adresse in der Zusammenfassung, bewusst groß: Dorthin
   geht nach dem Lauf die Betragsmail – ein Tippfehler kostet die Zusage. */
.email-gross {
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  color: var(--text);
  word-break: break-all;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-mittel);
  background: rgba(209, 174, 91, 0.07);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  line-height: 1.35;
}

.email-gross-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}

/* Reiter im Admin-Bereich – eine Seite, mehrere Listen */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.tab:hover { color: var(--text); }
.tab[aria-selected='true'] { color: var(--gold); border-bottom-color: var(--gold); }
.tab .zahl {
  display: inline-block;
  min-width: 18px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  text-align: center;
  color: var(--muted);
}
.tab .zahl.warn { background: rgba(240, 128, 128, 0.18); color: var(--rot); }

/* Zeile im Rundeneintrag: Eingabe und Knopf nebeneinander */
.runden-eingabe { display: flex; gap: 6px; align-items: center; }
.runden-eingabe input { width: 76px; padding: 7px 9px; font-size: 14px; text-align: right; }

/* ══ 6. Breakpoints ══════════════════════════════════════════════ */

/* ── Ab Tablet ──────────────────────────────────────────────────── */

@media (min-width: 560px) {

  .produkt-bilder { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .field-row--adresse { grid-template-columns: 3fr 1fr; }
  .field-row--ort { grid-template-columns: 1fr 2fr; }

  .summary-list--stack .summary-row { display: flex; }
  .summary-list--stack .summary-row dd { text-align: right; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ══ 7. Rechtsseiten und Admin-Bereiche ══════════════════════════ */

/* Impressum, Datenschutz und Bestellbedingungen sind Fließtext und
   sollen gleich aussehen. Vorher trug jede der drei Seiten ihre eigene
   Fassung dieser Regeln im Kopf – mit leicht anderen Werten, sodass
   dieselbe Überschrift je nach Seite anders saß. */

.prose { font-size: 15px; color: var(--muted); }

.prose h2 {
  font-size: clamp(1.15rem, 3.6vw, 1.35rem);
  margin: var(--luft-xl) 0 var(--luft-s);
}

.prose h3 {
  font-size: 12.5px;
  color: var(--gold);
  margin: var(--luft-l) 0 var(--luft-xs);
}

.prose p,
.prose dl { margin-bottom: var(--luft-s); }
.prose ul { margin: 0 0 var(--luft-s) 1.15rem; }
.prose li { margin-bottom: var(--luft-xs); }
.prose strong { color: var(--text); font-weight: 500; }
.prose a { color: var(--gold); }
.prose address { font-style: normal; }

/* Noch nicht ausgefüllte Angabe in einem Rechtstext. Fällt absichtlich
   auf, damit sie vor dem Livegang nicht übersehen wird. */
.platzhalter {
  display: inline-block;
  background: rgba(240, 128, 128, 0.12);
  border: 1px dashed rgba(240, 128, 128, 0.4);
  color: #F5A9A9;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 13.5px;
}

/* ── Admin-Bereiche ─────────────────────────────────────────────── */

/* Hoodie und Spendenlauf haben denselben Aufbau: Kopfzeile, Werkzeug-
   leiste, sortierbare Tabelle, Aktionen am Zeilenende. Deshalb stehen
   die Regeln hier einmal und nicht zweimal nebeneinander. */

/* Innerhalb eines Reiters gilt derselbe Blockabstand wie auf einer
   Seite: Kacheln, Töpfe und Karten stehen gleichmäßig untereinander. */
.tabpanel > * + * { margin-top: var(--luft-m); }

.admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--luft-m);
  flex-wrap: wrap;
  margin-bottom: var(--luft-l);
}

/* ── Bereichsleiste ─────────────────────────────────────────────────
   Steht ganz oben in jedem Admin-Bereich und führt zu den anderen.
   Gefüllt wird sie von /admin/rahmen.js aus den Rechten des Kontos –
   was hier fehlt, ist auf dem Server ohnehin gesperrt. */

.bereichsleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-s);
  flex-wrap: wrap;
  margin-bottom: var(--luft-l);
  padding-bottom: var(--luft-s);
  border-bottom: 1px solid var(--border);
}

.bereichsleiste-links,
.bereichsleiste-rechts {
  display: flex;
  align-items: center;
  gap: var(--luft-xs);
  flex-wrap: wrap;
}

.bereichsleiste a,
.bereichsleiste-hier {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.bereichsleiste a {
  color: var(--muted);
  border: 1px solid transparent;
}

.bereichsleiste a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

/* Der Bereich, in dem man gerade steht. */
.bereichsleiste-hier {
  color: var(--gold);
  border: 1px solid var(--border);
  background: rgba(209, 174, 91, 0.07);
}

.bereichsleiste-wer {
  font-size: 12.5px;
  color: var(--faint);
  white-space: nowrap;
}

/* Auf dem Handy liefen die Bereiche frei um: drei nebeneinander, der
   vierte allein darunter, Name und Abmelden noch einmal zwei Zeilen
   tiefer. Jetzt ein festes Raster aus zwei gleich breiten Spalten –
   bei vier Bereichen zwei saubere Reihen, bei zwei eine – und darunter
   eine Zeile mit Name links und Abmelden rechts. */
@media (max-width: 560px) {
  .bereichsleiste {
    flex-direction: column;
    align-items: stretch;
    gap: var(--luft-xs);
  }

  .bereichsleiste-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .bereichsleiste a,
  .bereichsleiste-hier {
    text-align: center;
    padding: 9px 8px;
  }

  /* Ohne Rahmen wären die nicht gewählten Bereiche auf dem Handy
     bloßer Text – hier sollen sie als Knöpfe erkennbar sein. */
  .bereichsleiste a { border-color: rgba(255, 255, 255, 0.08); }

  .bereichsleiste-rechts {
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .bereichsleiste-wer {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Eingabefeld mit Knopf daneben, etwa „Erzeugen“ beim Passwort. */
.eingabe-mit-knopf {
  display: flex;
  gap: var(--luft-xs);
  align-items: stretch;
}

.eingabe-mit-knopf input { flex: 1 1 auto; min-width: 0; }
.eingabe-mit-knopf .btn { flex: 0 0 auto; }

.toolbar {
  display: grid;
  gap: var(--luft-xs);
  grid-template-columns: 1fr;
}

.toolbar-filter {
  display: flex;
  gap: var(--luft-xs);
  flex-wrap: wrap;
}

.toolbar-filter select {
  width: auto;
  min-width: 140px;
  flex: 1 1 140px;
  padding: 8px 30px 8px 11px;
  font-size: 14px;
}

.exports { display: flex; gap: var(--luft-xs); flex-wrap: wrap; }

th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--gold); }
th .pfeil { opacity: 0.5; font-size: 9px; margin-left: 3px; }

td.name { color: var(--text); white-space: nowrap; }
td.mail { word-break: break-all; min-width: 155px; }
td.klein { font-size: 12.5px; line-height: 1.45; }

/* Rechts in jeder Tabellenzeile: der Schritt, der jetzt ansteht, und
   daneben das Dreipunktmenü. Beide bleiben auf einer Zeile – umbrechen
   würde die Zeilenhöhe sprengen und den Blick von der Spalte davor
   wegziehen. Deshalb nowrap und ein kurzer Text auf dem ersten Knopf. */
.row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

/* Die Knöpfe geben nicht nach: Ohne das drücken breite Spalten davor
   sie so weit zusammen, bis die Beschriftung umbricht. Die Spalte darf
   dann lieber über den Rand hinauswachsen – die Tabelle steht in einem
   Kasten, der sich seitwärts schieben lässt. */
.row-actions .btn { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; flex: 0 0 auto; }
td:last-child:has(.row-actions) { width: 1%; white-space: nowrap; }

/* Kontenliste auf dem Handy: eine Karte je Konto statt einer Tabelle,
   die man seitwärts schieben muss. Vorher lagen „Rechte“, „Passwort“
   und „Abschalten“ rechts außerhalb des Bildschirms, und nichts wies
   darauf hin, dass es sie gibt. Die Spaltenüberschrift steht jetzt als
   kleine Beschriftung vor jedem Wert (data-label aus konten.js). */
@media (max-width: 560px) {
  #konten-tabelle thead { display: none; }

  #konten-tabelle,
  #konten-tabelle tbody,
  #konten-tabelle tr,
  #konten-tabelle td { display: block; width: auto; }

  #konten-tabelle tr {
    padding: var(--luft-s) 0;
    border-bottom: 1px solid var(--border);
  }

  #konten-tabelle td {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: var(--luft-xs);
    padding: 4px 0;
    border: 0;
    white-space: normal;
  }

  #konten-tabelle td::before {
    content: attr(data-label);
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--faint);
    padding-top: 2px;
  }

  /* Werte behalten ihre eigene Breite – sonst zieht das Raster die
     Status-Pille über die ganze Zeile. */
  #konten-tabelle td > * { justify-self: start; }

  /* Kürzel als Kopf der Karte, ohne Beschriftung davor. */
  #konten-tabelle td.name {
    display: block;
    font-size: 16px;
    padding-bottom: 6px;
  }
  #konten-tabelle td.name::before { content: none; }

  /* Die Knöpfe unten in voller Breite, gleich groß nebeneinander. */
  #konten-tabelle td:last-child { display: block; padding-top: var(--luft-xs); }
  #konten-tabelle td:last-child::before { content: none; }
  #konten-tabelle .row-actions { justify-self: stretch; justify-content: stretch; flex-wrap: wrap; }
  #konten-tabelle .row-actions .btn { flex: 1 1 0; padding: 9px 8px; }

  #konten-tabelle td.leer { display: block; }
  #konten-tabelle td.leer::before { content: none; }
}

/* Das Menü trägt keine Beschriftung, sondern drei Punkte. Es steht in
   jeder Zeile an derselben Stelle und soll neben dem eigentlichen
   Schritt nicht um Aufmerksamkeit kämpfen. */
.btn--icon {
  padding: 6px 8px;
  border-color: transparent;
  color: var(--faint);
}

.btn--icon:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.12); color: var(--text); }
.row-actions .btn--icon { padding: 6px 8px; }
.btn--icon svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }

.leer { text-align: center; padding: 2.5rem 1rem; color: var(--faint); }

/* Zurückgenommene Zeilen bleiben lesbar, treten aber zurück: Sie zählen
   in keiner Kennzahl und in keinem Export mehr mit. Der Name bleibt
   voll sichtbar, sonst findet man die Zeile nicht wieder. */
tr.gedimmt td,
tr.ist-storniert td { opacity: 0.5; }
tr.gedimmt td.name,
tr.ist-storniert td.name { opacity: 1; }

/* ── Nur der Hoodie-Admin ───────────────────────────────────────── */

.groessen-liste { color: var(--text); white-space: nowrap; }
.adr { font-size: 12.5px; line-height: 1.45; min-width: 150px; }
.bezahlt-box { display: flex; justify-content: center; }
.bezahlt-box input { margin: 0; }

/* Der Bestätigungsdialog liegt über dem Bearbeiten-Dialog. */
#bestaetigen-overlay { z-index: 300; }

/* ── Nur der Spendenlauf-Admin ──────────────────────────────────── */

/* Die beiden Töpfe stehen nebeneinander, sobald Platz ist. */
.topf {
  display: grid;
  gap: var(--luft-xs);
  grid-template-columns: 1fr;
}

/* Zwei Dinge, die nebeneinander nur zusammen funktionieren:
   1. Der Geschwisterabstand von .card + .card gilt im Fließtext,
      nicht in einem Raster. Bliebe er stehen, säße die rechte Karte
      um eine Zeile tiefer als die linke.
   2. Das Raster streckt beide Karten auf dieselbe Höhe. Topf V hat
      aber eine Schlusszeile weniger als Topf J – ohne Zutun bliebe
      unten in V ein leeres Feld. Deshalb sind die Karten Spalten und
      die hervorgehobene Schlusszeile wird nach unten geschoben: Die
      Summen stehen dann in beiden Karten auf gleicher Höhe. */
.topf > .card {
  margin-top: 0;
  display: flex;
  flex-direction: column;
}

.topf > .card > .topf-zeile.hervor {
  margin-top: auto;
  padding-top: 12px;
}

.topf-zeile {
  display: flex;
  justify-content: space-between;
  gap: var(--luft-m);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 14px;
  color: var(--muted);
}

.topf-zeile:last-child { border-bottom: none; }
.topf-zeile b { color: var(--text); font-weight: 500; }

/* Die Zahl, um die es geht: was beim Verein bleibt, was gespendet
   wird. Sie ist in beiden Karten die unterste Zeile. */
.topf-zeile.hervor b { color: var(--gold); font-size: 16px; }

/* Protokoll eines Versandlaufs: eine Zeile je Empfänger. */
.liste-log { max-height: 240px; overflow-y: auto; font-size: 12.5px; line-height: 1.7; }
.liste-log div { color: var(--muted); }
.liste-log .fehlgeschlagen { color: var(--rot); }
.liste-log .uebersprungen { color: var(--faint); }

/* Empfängerliste im Versanddialog, einzeln abwählbar. */
.empfaenger {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-klein);
  padding: 0.4rem 0.7rem;
}

.empfaenger .check {
  display: flex;
  align-items: flex-start;
  padding: 7px 0;
  margin-bottom: 0;
  font-size: 13.5px;
  letter-spacing: normal;
}

.empfaenger .check + .check { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.empfaenger-name { color: var(--text); }
.empfaenger-sub { font-size: 12px; color: var(--faint); word-break: break-all; }

.dialog-info {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: var(--luft-m);
}

.dialog-info strong { color: var(--text); font-weight: 500; }

.schalter { display: flex; align-items: center; gap: var(--luft-s); flex-wrap: wrap; }

@media (min-width: 720px) {
  .toolbar { grid-template-columns: minmax(200px, 1fr) auto; align-items: center; }
  .toolbar-filter { justify-content: flex-end; }
  .toolbar-filter select { flex: 0 0 auto; }
  .topf { grid-template-columns: 1fr 1fr; }

  /* Nebeneinander vergleicht man Zeile für Zeile. Deshalb bekommt die
     Kurzbeschreibung unter der Überschrift zwei Zeilen Platz, auch
     wenn sie nur eine braucht – sonst verschieben sich alle Zahlen
     der einen Karte gegen die der anderen, sobald ein Text länger
     wird. Untereinander (schmal) ist das nicht nötig. */
  .topf > .card > .hint { min-height: 3.1em; }
}

/* Die eigene Startnummer ist die Zahl, die man sich merken soll. */
.startnummer { color: var(--gold); font-size: 1.2em; }

/* Zwischenüberschrift, die einen neuen Abschnitt in einem längeren
   Reiter aufmacht – mit deutlich mehr Luft nach oben als nach unten,
   damit klar ist, wozu sie gehört. */
.abschnitt-titel { margin: var(--luft-xl) 0 var(--luft-s); }

.mitte { text-align: center; }
.stark { color: var(--text); margin-bottom: var(--luft-xs); }
.gold { color: var(--gold); }

/* Einzelne Wörter oder Zahlen, die sich aus dem gedämpften Fließtext
   hervorheben sollen – der Wert selbst, nicht seine Beschriftung. */
.stark-inline { color: var(--text); }
.rot { color: var(--rot); }

/* Lange Links und Adressen dürfen mitten im Wort umbrechen, sonst
   schieben sie die Tabelle auf. */
.umbruch { word-break: break-all; }

/* Interne Bemerkung in einer Tabellenzeile: darf Platz kosten, aber
   nicht beliebig viel. */
td.bemerkung { max-width: 220px; }

/* „Niemand“ in einer kurzen Liste, ohne die Wucht einer leeren
   Tabellenmeldung. */
.leer-klein { padding: var(--luft-xs) 0; }

/* Knopfreihe im Dialog: sitzt zwischen den Feldern und braucht deshalb
   oben und unten Luft. */
.knopfreihe--dialog { margin: var(--luft-xs) 0; }

.trennlinie {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin: var(--luft-l) 0 var(--luft-m);
}

/* ── Umschalter ─────────────────────────────────────────────────────
   Ein Schalter statt eines Kästchens: Er wechselt zwischen zwei
   Arbeitsweisen und bestätigt nichts. Technisch ein
   <button role="switch">, damit Bildschirmleser „Schalter, an“ oder
   „aus“ ansagen und Leertaste wie Eingabetaste ihn bedienen.

   Der Zustand steht in aria-checked und nur dort – die Gestaltung
   hängt an genau diesem Attribut. Anzeige und Ansage können so nicht
   auseinanderlaufen. Der Name .schalter ist schon vergeben (Versand-
   freigabe im Spendenlauf), deshalb .umschalter. */

.umschalter {
  display: inline-flex;
  align-items: center;
  gap: var(--luft-s);
  min-height: 44px;           /* Fingerbreite auf dem Handy */
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

/* 44 × 24 px Außenmaß, der Knopf 16 px mit 3 px Rand ringsum. Der Weg
   nach rechts: 42 px Innenbreite − 16 px Knopf − 2 × 3 px = 20 px. */
.umschalter-spur {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: 100px;
  border: 1px solid var(--border-strong);
  background: var(--field);
  transition: background 0.18s, border-color 0.18s;
}

.umschalter-knopf {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.18s, background 0.18s;
}

.umschalter[aria-checked='true'] .umschalter-spur { background: var(--gold); border-color: var(--gold); }
.umschalter[aria-checked='true'] .umschalter-knopf { transform: translateX(20px); background: #0E0C08; }
.umschalter:hover:not(:disabled) .umschalter-spur { border-color: var(--gold); }

/* Der Fokusrahmen gehört an die Spur, nicht um Spur und Text herum. */
.umschalter:focus-visible { outline: none; }
.umschalter:focus-visible .umschalter-spur { outline: 2px solid var(--gold); outline-offset: 2px; }

.umschalter:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Nur der Spendenstand-Admin ─────────────────────────────────── */

/* Der Schalter trennt die Erklärung oben von den beiden Formularen
   darunter – mit derselben feinen Linie wie .trennlinie. */
.umschalter-block {
  margin: var(--luft-l) 0;
  padding-top: var(--luft-s);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Kein eigener Abstand: Der Schalter ist 44 px hoch, die Spur darin
   nur 24 px – der Rest ist schon Luft zum Hinweis darunter. */
.umschalter-block .hint { margin-top: 0; }

.rechner-zuletzt { margin-bottom: var(--luft-m); }

/* Aufschlüsselung der Rechnung. Anders als in der Bestellübersicht
   darf die linke Spalte hier umbrechen: Auf 375 px passen
   „Herstelleranteil“ samt Erklärung und ein fünfstelliger Betrag
   sonst nicht nebeneinander. Die Beträge brechen nie um und stehen
   mit gleich breiten Ziffern untereinander. */
.rechnung { margin-top: var(--luft-l); }
.rechnung .summary-row dt { flex-shrink: 1; min-width: 0; }
.rechnung .summary-row dd { white-space: nowrap; font-variant-numeric: tabular-nums; }

.rechnung-detail {
  display: block;
  font-size: 12px;
  color: var(--faint);
}

/* Steht auch leer da: Ihr unterer Rand ist der Abstand zwischen
   Ergebnis und Knopf, und der soll nicht springen, sobald ein Vermerk
   erscheint oder verschwindet. */
.rechner-vermerk { margin: var(--luft-xs) 0 var(--luft-m); }

/* ── Nur der Sponsoren-Admin ────────────────────────────────────── */

/* Der Kalender der Datumsfelder soll dunkel aufgehen, nicht als
   weißer Kasten mitten in der dunklen Seite. Die Zeilenhöhe hält das
   Feld so hoch wie die Textfelder daneben – Chrome setzt das
   Kalendersymbol sonst ein paar Pixel höher an, Safari niedriger. */
input[type='date'] { color-scheme: dark; height: calc(1.3em + 24px); line-height: 1.3; }

/* Mit dem fünften Bereich steht auf dem Handy der letzte Eintrag der
   Bereichsleiste allein in einer Reihe. Er nimmt dann die volle
   Breite, statt als halber Knopf links zu hängen. */
@media (max-width: 560px) {
  .bereichsleiste-links > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.sponsoren-toolbar { margin-top: var(--luft-l); }

/* Das Kästchen „Archivierte zeigen“ steht in der Filterzeile und hat
   deshalb die Höhe der Auswahlfelder daneben, nicht den Innenrand
   eines Formular-Kästchens. */
.check--filter {
  padding: 0;
  align-items: center;
  white-space: nowrap;
  flex: 0 0 auto;
  min-height: 38px;
}

/* Eine Karte je Sponsor. Auf dem Handy untereinander, am Desktop so
   viele nebeneinander, wie mit 360 px hineinpassen. min() verhindert,
   dass eine Karte auf einem 320-px-Display breiter wird als der
   Bildschirm. */
.sponsoren-liste {
  display: grid;
  gap: var(--luft-m);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
}

/* Wie bei den Töpfen im Spendenlauf: Der Geschwisterabstand von
   .card + .card gilt im Fließtext, nicht im Raster. */
.sponsoren-liste > .card { margin-top: 0; }
.sponsoren-liste > .leer { grid-column: 1 / -1; }

.sponsor {
  display: flex;
  flex-direction: column;
  gap: var(--luft-s);
  min-width: 0;
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* Innerhalb der Karte macht ausschließlich der gap den Abstand. */
.sponsor > * { margin: 0; }

.sponsor--archiviert,
.sponsor--abgesagt { opacity: 0.62; }

/* Kurz aufleuchten, wenn man aus der Fristenliste hierher springt. */
.sponsor--markiert {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(209, 174, 91, 0.35);
}

.sponsor-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--luft-xs);
}

.sponsor-name {
  font-size: clamp(1.15rem, 3.6vw, 1.35rem);
  min-width: 0;
  overflow-wrap: anywhere;
}

.sponsor-marken { display: flex; flex-wrap: wrap; gap: 6px; }

/* Ohne Farbe: Der Zweck ordnet ein, der Status daneben ist das, was
   auffallen soll. */
.pill--zweck { color: var(--text); border-color: rgba(255, 255, 255, 0.14); }

/* Der Betrag ist die Zahl, nach der man eine Karte zuerst absucht. */
.sponsor-betrag {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.4rem, 4.5vw, 1.7rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.sponsor-betrag--sache {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
}

.sponsor-wert {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--faint);
}

/* ── Nächster Schritt ── */

.naechster-schritt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-klein);
  border: 1px solid var(--border);
  background: rgba(209, 174, 91, 0.06);
}

.naechster-schritt-label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.naechster-schritt-text { font-size: 14.5px; color: var(--text); line-height: 1.45; }

.naechster-schritt--bald { border-color: var(--border-strong); background: rgba(209, 174, 91, 0.11); }

/* Überfällig ist das Einzige auf der Seite, das rot sein darf. */
.naechster-schritt--ueberfaellig {
  border-color: rgba(240, 128, 128, 0.45);
  background: rgba(240, 128, 128, 0.08);
}

.frist { font-size: 12.5px; white-space: nowrap; color: var(--muted); }
.frist--bald { color: var(--gold); }
.frist--ueberfaellig { color: var(--rot); font-weight: 500; }

/* ── Fortschritt ──
   Je Schritt ein Knopf, zusammen eine Leiste. Ein Tipp setzt das
   Häkchen mit dem heutigen Datum. Die Knöpfe sind mindestens 44 px
   hoch – Fingerbreite. */

.fortschritt-kopf {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}

.fortschritt {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
}

.fortschritt-schritt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  min-height: 44px;
  padding: 5px 2px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--field);
  color: var(--faint);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.fortschritt-schritt:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.fortschritt-schritt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fortschritt-schritt:disabled { cursor: not-allowed; }

.fortschritt-schritt.erledigt {
  background: rgba(209, 174, 91, 0.16);
  border-color: var(--border-strong);
  color: var(--gold-light);
}

/* Die Beschriftung darf abgeschnitten werden, nie umbrechen: Fünf
   Schritte nebeneinander auf 375 px sind knapp, und ein Knopf mit
   zwei Zeilen Text machte die Leiste ungleich hoch. Der volle Name
   steht in title und aria-label. */
.fortschritt-kurz {
  max-width: 100%;
  font-size: 11.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fortschritt-datum { font-size: 10.5px; opacity: 0.8; font-variant-numeric: tabular-nums; }

.sponsor-hinweis {
  font-size: 12.5px;
  line-height: 1.5;
  color: #F5C6A0;
  padding-left: 0.7rem;
  border-left: 2px solid rgba(240, 160, 110, 0.45);
}

/* Beschriftung links, Wert rechts – und auf dem Handy untereinander,
   damit eine lange Gegenleistung nicht in eine schmale Spalte gepresst
   wird (summary-list--stack). */
.sponsor-daten { font-size: 13.5px; }
.sponsor-daten .summary-row { padding: 6px 0; }
.sponsor-daten dd { overflow-wrap: anywhere; }

/* .card > .hint gäbe dem Vermerk sonst einen eigenen Abstand nach oben. */
.sponsor > .sponsor-vermerk { margin: 0; font-size: 11.5px; }

/* Karten einer Reihe sind gleich hoch; die Knöpfe stehen in allen
   unten auf derselben Linie. */
.sponsor > .sponsor-knoepfe { margin-top: auto; padding-top: var(--luft-xs); }

/* ── Fristenliste in der Übersicht ── */

.sponsoren-karte-titel { font-size: 1.1rem; margin-bottom: var(--luft-xs); }

.fristen-liste { list-style: none; }

.frist-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--luft-s);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13.5px;
}

.frist-zeile:last-child { border-bottom: none; }
.frist-was { color: var(--muted); }

/* Der Name führt zur Karte. Als Knopf, weil er auf der Seite bleibt
   und nichts lädt; aussehen soll er wie ein Link. */
.frist-sprung {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  cursor: pointer;
  text-align: left;
}

.frist-sprung:hover { color: var(--gold); }

.sponsoren-hinweis { margin-top: var(--luft-xl); }

/* ── Formular im Dialog ── */

.modal--breit { max-width: 680px; }

.formular-abschnitt { margin: var(--luft-xl) 0 var(--luft-m); }
.modal form > .formular-abschnitt:first-child { margin-top: var(--luft-s); }
.formular-abschnitt-hint { margin: calc(-1 * var(--luft-xs)) 0 var(--luft-m); }

/* Häkchen links, Datum rechts. Auf dem Handy untereinander, damit der
   Name des Schritts nicht abgeschnitten wird. */
.schritt-felder { margin-bottom: var(--luft-l); }

.schritt-feld {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px var(--luft-s);
  align-items: center;
  padding: 4px 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.schritt-feld:last-child { border-bottom: none; }
.schritt-feld .check { padding: 6px 0 0; }

@media (min-width: 560px) {
  .schritt-feld { grid-template-columns: 1fr 190px; padding: 4px 0; }
  .schritt-feld .check { padding: 0.5rem 0; }
}

/* Auf dem Handy: Knöpfe der Karte gleich breit nebeneinander, die
   Filter untereinander in voller Breite. */
@media (max-width: 560px) {
  .sponsor-knoepfe .btn { flex: 1 1 0; padding: 10px 8px; }
  .sponsoren-toolbar .toolbar-filter select { flex: 1 1 100%; }
}