/* ===========================================================================
   VETO Charitygala — Buchungsseite

   Nach Figma 8p0x82WllP6JUZjgJ7KrGs, Nodes 39:2965 (mobil, 390 px) und
   42:4920 (Desktop, 1816 px). Mobile first: die Grundregeln gelten für das
   Telefon, die Medienabfragen bauen darauf auf.

   Figma-Knoten ohne Dateiangabe stammen aus der alten Datei
   8p0x82WllP6JUZjgJ7KrGs; der aktuelle V3-Dateischlüssel ist EPe5QI5ceoaQdhqVjCCg9L.

   Hier stehen ALLE Styles der Seite. Im Markup gibt es kein style-Attribut und
   keinen <style>-Block (CLAUDE.md).
   =========================================================================== */

:root {
  /* Farben direkt aus dem Entwurf. Sie weichen minimal vom Designguide ab
     (dort #13372D und #F230AA) — maßgeblich ist für diese Seite das Figma. */
  --gruen-tief: #14372d;   /* Karte, Kopf, Fußzeile */
  --gruen-dunkel: #082e1e; /* Schrittnummern, Summen */
  --gruen-text: #0d2b1c;
  --gruen-akzent: #19aa81; /* Rahmen, ausgewählter Zustand */
  --gruen-hell: #e0e8e0;   /* Bänder und Summenblock */
  --pink: #f100a0;         /* Handlungsaufforderungen — Fläche und Ränder */
  --pink-flaeche: #fce4f0; /* Hervorgehobene Fläche des Resttickets-Widgets */
  /* Der zweite Akzent der Marke. Bisher kam er auf der Buchungsseite nicht
     vor — der Newsletter-Knopf unter der Dankeseite ist die erste Fläche
     in dieser Farbe (Figma 39:3422). */
  --limette: #d9ff6d;
  /*
   * Dieselbe Farbe, so weit abgedunkelt, dass weiße Schrift darauf 4,5:1
   * erreicht (Konzept §10 Nr. 22). #f100a0 kommt auf 4,00 — für fetten
   * 14-Pixel-Text zu wenig, und der „Verbindlich buchen"-Knopf ist genau das.
   * Als Fläche ohne Schrift bleibt das Pink unverändert.
   */
  --pink-schrift: #d6008c;
  --papier: #fffef9;
  --weiss: #ffffff;
  /*
   * Der Entwurf setzt NICHT alles in das Grün: Beschriftungen, Schritttitel
   * und die Eckdaten stehen dort in reinem Schwarz (Figma 39:4359, 23:1285,
   * 23:1290 — jeweils `text-black`), Nebentexte in `--grau-text`, der
   * AGB-Kasten in `--gruen-text`. Alles in einer Farbe zu setzen sah lange
   * richtig aus und war es nie: gegen den Entwurf gemessen ist Schwarz die
   * Farbe, in der die Seite geschrieben ist, und das Grün die des Rahmens.
   */
  --schwarz: #000000;
  --grau-text: #242424;
  --grau-rahmen: #757575;
  /* 4,54:1 auf Weiß. #aaaaaa kam auf 2,32 — im Sonnenlicht auf einem Telefon
     ist das nicht lesbar, und der Platzhalter trägt hier das Beispiel für den
     Einladungscode. */
  --grau-platzhalter: #767676;
  /* Der gesperrte Buchen-Knopf. Weiße Schrift darauf erreicht 4,66:1 — auch
     gesperrt bleibt eine Beschriftung eine Beschriftung, und §10 Nr. 22 macht
     dafür keine Ausnahme. Ein hellgraues Feld mit blasser Schrift wäre der
     bequemere Weg und würde genau die Leute aussperren, die schon am
     Sonnenlicht scheitern. */
  --grau-gesperrt: #6f7671;

  --radius-feld: 10px;
  --radius-block: 20px;
  --radius-karte: 30px;
  --radius-pille: 100px;

  --spur: 0 1px 6px rgb(0 0 0 / 25%);
  --spur-karte: 0 5px 12.5px rgb(0 0 0 / 15%);

  /* Poppins wird noch nicht ausgeliefert — bis dahin die Systemschrift.
     Einbinden ausschließlich selbst gehostet, NIE über das Google-CDN
     (DSGVO); siehe project-docs/OFFEN.md. */
  --schrift: Poppins, "Segoe UI", system-ui, -apple-system, sans-serif;

  --breite-inhalt: 1170px;
  --breite-karte: 580px;
  /* Die zentrierte Spalte der Checkout-Leiste (Figma 0:2089) — dieselbe
     Breite, die der Karteninhalt hat: 580 minus zweimal 20 Polsterung. */
  --breite-leiste: 540px;

  /*
   * Der untere Rand der Fußzeile. Steht als Token da, weil ihn zwei Regeln
   * brauchen: die Fußzeile selbst und `.page--checkout ~ .site-footer` in
   * public/checkout-bar.css, das die Höhe der angedockten Leiste
   * daraufrechnet. Zweimal ausgeschrieben liefen die beiden auseinander.
   */
  --footer-pad-unten: 7.375rem;
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--gruen-text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
}

/* Jede Regel mit `display` schlägt das `hidden`-Attribut aus dem
   Browser-Stylesheet — und `hidden` tut dann stillschweigend nichts mehr.
   Genau das trägt hier die Progressive Enhancement: die Stepper-Knöpfe und der
   Zahlungsschritt werden über `hidden` gesteuert. Deshalb diese eine Ausnahme
   mit !important. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 10;
  padding: 0.75em 1em;
  background: var(--gruen-tief);
  color: var(--weiss);
}

.skip-link:focus {
  left: 0;
}

/* Sichtbarer Fokus überall — die Voreinstellung mancher Browser ist auf
   dunklem Grün nicht zu erkennen. */
:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
}

/*
 * Auf dem tiefen Grün kommt das Pink nur auf 2,8:1 — ein Fokusrahmen braucht
 * 3:1 gegen seinen Hintergrund (WCAG 1.4.11). Dort übernimmt das Limettengrün
 * (11,8:1). Betrifft beide grünen Bänder: Newsletter und Fußzeile.
 */
.newsletter :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--limette);
}

/*
 * Ein Fokus, den ein SKRIPT gesetzt hat, zeichnet keinen Ring — die
 * Gegenregel zu der oben, und die einzige Stelle, an der der Ring wegfällt.
 * Gemeint sind nicht bedienbare Ziele (der Fließtext eines frisch geöffneten
 * Layers, der grüne Streifen nach dem Einlösen): dort sähe der 3-px-Rahmen
 * aus wie ein Eingabefeld oder eine Fehlermarkierung um einen Text, den
 * niemand ausgewählt hat.
 *
 * Gesetzt und wieder abgeräumt wird `data-script-focus` in public/focus.js
 * (`window.GalaFocus.focusQuietly`) — es überlebt genau diesen einen Fokus.
 * Steuert ein Mensch dasselbe Element später per Tab an, ist die Markierung
 * weg und der Ring wieder da.
 */
[data-script-focus]:focus-visible {
  outline: none;
}

/* --- Kopfzeile ---------------------------------------------------------- */

/* Hell wie im Entwurf (Figma 42:4922) — mit der dunklen Fassung des Logos.
   Bis zum E-Mail-Flow lag nur die weiße vor, die auf Papier unsichtbar wäre;
   deshalb war die Kopfzeile bisher grün. */
.topbar {
  display: flex;
  align-items: center;
  padding: 1.75rem 1.875rem;
  background: var(--papier);
}

.topbar__home {
  display: inline-flex;
}

/* styles.css trägt das Grundgerüst. Welche Bereichs-Stylesheets geladen werden
   und in welcher Reihenfolge, steht vollständig am gemeinsamen Dokumentkopf in
   src/views/head.ts. Die Aufteilung hält jede Datei unter 300 Zeilen
   (CLAUDE.md). */

/* --- Fußzeile ------------------------------------------------------------ */

.site-footer {
  /* Kein eigener Abstand nach oben: die Fußzeile schließt im Entwurf bündig an
     das Band mit der Karte an (Figma 23:1220 endet bei 1822, 43:5219 beginnt
     dort). Der Luftraum darüber kommt aus dem unteren Rand von `.page`. */
  /* 94 statt 95 oben: der Strich zählt mit. Im Entwurf liegt er INNEN
     (Figma zeichnet Rahmen standardmäßig nach innen), im Browser kommt er
     oben drauf — ohne die Korrektur wäre die Fußzeile einen Pixel höher als
     gezeichnet und ihr Inhalt einen Pixel zu tief. */
  padding: 5.875rem 1.25rem var(--footer-pad-unten);
  border-top: 1px solid var(--weiss);
  background: var(--gruen-tief);
  color: var(--weiss);
  text-align: center;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 3.75rem 1rem;
  align-items: center;
  justify-content: center;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
}

.site-footer__item {
  flex: 1 1 180px;
  margin: 0;
}

.site-footer__logo {
  flex: 1 1 100%;
  margin: 0;
}

/* Inline stünde unter dem Logo noch die Unterlänge der Zeile — die Fußzeile
   wäre damit sieben Pixel höher als im Entwurf. */
.site-footer__logo img {
  display: block;
  margin-inline: auto;
}