/* ===========================================================================
   Driver39 — Workshop-Strecke (wsx)
   ---------------------------------------------------------------------------
   Umsetzung des Design-Handoffs vom 29.07.2026, Richtung "Editorial" (WSX-E).
   Handgeschrieben, kein Build-Schritt, keine externen Dienste.

   Drei Abweichungen vom Prototyp, alle im Handoff so gefordert:
   1. Schriften liegen lokal (WOFF2). Der Google-Fonts-Import fuer JetBrains
      Mono entfaellt — die Mono-Rolle traegt der System-Stack.
   2. Container-Queries (cqi) sind Viewport-Einheiten (vw). Im Prototyp standen
      mehrere Seiten nebeneinander in einem Dokument, hier ist der Viewport der
      Container.
   3. box-sizing wird gesetzt; das Design-System bringt es nicht mit.
   =========================================================================== */

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

/* ------------------------------- Schriften ------------------------------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* -------------------------------- Tokens --------------------------------- */

:root {
  --color-nadelwald:      #0D261C;
  --color-british-racing: #1B3A2A;
  --color-off-white:      #F4F1EA;
  --color-paper:          #FFFFFF;
  --color-kleeblatt:      #00DB7A;
  --color-kleeblatt-dark: #00B866;
  --color-siegerflamme:   #FA7317;
  --color-stone-500:      #707070;

  --bg:            var(--color-nadelwald);
  --bg-elevated:   var(--color-british-racing);
  --fg:            var(--color-off-white);
  --fg-muted:      #B8B5AC;
  --fg-quiet:      #7E7B73;
  --border:        rgba(244, 241, 234, 0.10);
  --border-strong: rgba(244, 241, 234, 0.22);

  --accent:       var(--color-kleeblatt);
  --accent-hover: var(--color-kleeblatt-dark);
  --accent-warn:  var(--color-siegerflamme);
  /* Der Buchen-Knopf ist ueber alle Formate hinweg derselbe. Er ist die eine
     Handlung, die die Seite will — die soll ueberall gleich aussehen und
     nicht mit der Kategorie die Farbe wechseln. */
  --knopf:        var(--color-kleeblatt);
  --knopf-hover:  var(--color-kleeblatt-dark);

  --radius-sm: 4px;
  --radius-md: 8px;

  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  150ms;

  --font-body: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  /* Seitenrand und Abschnittsabstand — im Prototyp cqi, hier vw. */
  --rand:     clamp(24px, 6vw, 120px);
  --abschnitt: clamp(40px, 7vw, 96px);
}

/* ---------------------------- Farbthemen ---------------------------------
   Das Ticketformat bleibt fuer jede Kategorie gleich — nur die Akzentfarbe
   wechselt. Ein Kinoabend soll sich vom Workshop unterscheiden, ohne dass
   jemand ein zweites Layout pflegen muss.

   Rot ist mit #FF4C3B so gewaehlt, dass es beides kann: als Text auf dem
   dunklen Gruen 4,8:1 (WCAG AA), und als Flaeche unter der dunklen
   Knopfschrift ebenfalls 4,8:1. Ein satteres Rot (#E4322B) sieht auf dem
   Bildschirm besser aus und faellt beim Kontrast durch — deshalb dieses. */
.thema-rot {
  --accent:       #FF4C3B;
  --accent-hover: #E63E2E;
  /* --knopf bleibt bewusst unveraendert: Robert, 01.08. — "buchungsbutton
     muss bei kino keine andere farbe bekommen". */
}

/* Helle Flaeche. Nur EIN Block je Seite kehrt um (Handoff 6.1, Punkt 4). */
.theme-light {
  --bg:            var(--color-off-white);
  --bg-elevated:   var(--color-paper);
  --fg:            var(--color-nadelwald);
  --fg-muted:      #4A5752;
  --fg-quiet:      #8A8F8C;
  --border:        rgba(13, 38, 28, 0.12);
  --border-strong: rgba(13, 38, 28, 0.28);
}

/* --------------------------------- Basis --------------------------------- */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  /* Deutsche Komposita sind laenger als ein Handy breit ist:
     "Datenschutzerklaerung" braucht als Ueberschrift 310px, ein iPhone SE hat
     272px Textbreite. Ohne diese Zeile schiebt ein einziges Wort die ganze
     Seite seitlich weg (gemessen 17.08.2026 auf /w/datenschutz). */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; }

::selection { background: var(--color-kleeblatt); color: var(--color-nadelwald); }

:focus-visible {
  outline: 2px solid var(--color-kleeblatt);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--color-nadelwald);
  padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { left: var(--rand); top: 12px; z-index: 10; }

/* ------------------------------ Typografie -------------------------------- */

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.t-h1-workshop {
  font-size: clamp(36px, 9.5vw, 92px);
  font-weight: 700; line-height: 1.0; letter-spacing: -0.03em; max-width: 18ch;
}
.t-h1 {
  font-size: clamp(30px, 6vw, 56px);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; max-width: 20ch;
}
.t-h2 { font-size: clamp(24px, 3.6vw, 40px); font-weight: 600; line-height: 1.15; }
.t-h2-gross { font-size: clamp(28px, 6vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; max-width: 20ch; }
.t-h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.005em; }

.t-lead {
  font-size: clamp(17px, 2.4vw, 24px);
  font-weight: 400; line-height: 1.45; color: var(--fg-muted);
  margin: 0; max-width: 40ch;
}
.t-body   { font-size: 16px; line-height: 1.6; margin: 0; max-width: 68ch; }
.t-body-s { font-size: 14px; line-height: 1.5; margin: 0; }
.t-caption {
  font-size: 13px; font-weight: 500; line-height: 1.4;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.t-mono { font-family: var(--font-mono); font-size: 14px; }

.t-muted { color: var(--fg-muted); }
/* --fg-quiet ist dekorativ (3,8:1). Alles, was gelesen werden MUSS, bleibt
   mindestens auf --fg-muted (7,8:1). Siehe Kontrastregel im Handoff. */
.t-quiet { color: var(--fg-quiet); }
.t-accent { color: var(--accent); }
.t-warn { color: var(--accent-warn); }

/* --------------------------------- Layout -------------------------------- */

.kopfzeile {
  padding: 24px var(--rand) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.kopfzeile img { height: 20px; width: auto; display: block; }

main { flex: 1 1 auto; }

.abschnitt {
  padding: var(--abschnitt) var(--rand);
  display: flex; flex-direction: column; gap: 32px;
}
.abschnitt--eng { padding-top: 0; }
.abschnitt--hell {
  background: var(--color-off-white);
  color: var(--color-nadelwald);
}

.spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(24px, 4vw, 56px);
}
.spalten--breit { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* -------------------------------- Bausteine ------------------------------- */

/* 2 · Primaerknopf */
.btn-primary {
  display: block; width: 100%; max-width: 420px;
  text-align: center;
  background: var(--knopf); color: var(--color-nadelwald);
  font-family: inherit; font-weight: 600; font-size: 17px;
  padding: 18px 24px; border: 0; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn-primary:hover { background: var(--knopf-hover); color: var(--color-nadelwald); }
.btn-primary--voll { max-width: none; }

/* 3 · Sekundaerknopf */
.btn-outline {
  display: inline-block;
  border: 1.5px solid var(--border-strong); color: var(--fg);
  font-weight: 500; font-size: 16px;
  padding: 14px 24px; border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* Pille fuer ausgebucht / geschlossen */
.pille {
  display: inline-block;
  background: var(--accent-warn); color: var(--color-nadelwald);
  font-weight: 600; font-size: 15px;
  padding: 12px 20px; border-radius: 9999px;
}

/* 4 · Datenband. Gleiches horizontales Padding in ALLEN Zellen, sonst
   springt die linke Kante, wenn das Band auf dem Telefon umbricht. */
.datenband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.datenband > div {
  background: var(--color-nadelwald);
  padding: 20px 16px 20px 0;
  display: flex; flex-direction: column; gap: 6px;
}

/* 5 · Hairline-Tabelle */
.hairline { display: grid; }
.hairline-row {
  display: grid;
  grid-template-columns: minmax(96px, 26%) 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.hairline-row:last-child { border-bottom: 1px solid var(--border); }
.hairline--breit .hairline-row { grid-template-columns: minmax(120px, 34%) 1fr; }

/* 6 · Terminliste */
.termine { display: flex; flex-direction: column; max-width: 560px; width: 100%; }
.termin {
  display: flex; align-items: center; gap: 16px;
  min-height: 50px; padding: 16px 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.termine .termin:last-of-type { border-bottom: 1px solid var(--border); }
.termin input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.termin--aus { cursor: not-allowed; color: var(--fg-quiet); }

/* 7 · Eingabefeld. 16px verhindert den iOS-Zoom beim Fokus. */
.feld { display: flex; flex-direction: column; gap: 8px; }
.feld > span { font-size: 14px; line-height: 1.5; color: var(--fg-muted); }
.feld input, .feld select {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
}
.feld input::placeholder { color: var(--fg-quiet); }
.feld--fehler input, .feld--fehler select { border-color: var(--accent-warn); }
.feld-fehler { font-size: 14px; color: var(--accent-warn); }

.feldgruppe { display: flex; flex-direction: column; gap: 16px; }
.feld-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; }
.feld-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }

/* 8 · Bestaetigungszeile */
.haken {
  display: flex; gap: 14px; align-items: flex-start;
  cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--fg-muted);
}
.haken input { accent-color: var(--accent); width: 18px; height: 18px; margin: 3px 0 0; flex: 0 0 auto; }

/* 9 · Zitat */
/* Linien in --border-strong statt Orange: die Marke soll wirken wie jemand,
   der es nicht noetig hat, laut zu sein. Orange traegt nur noch die
   Ausgebucht-Pille. */
.zitat {
  border-left: 1.5px solid var(--border-strong);
  padding-left: 20px;
  font-size: clamp(17px, 2.2vw, 22px); font-weight: 500; line-height: 1.4;
  margin: 0;
}
.aussage {
  border-left: 1.5px solid var(--border-strong);
  padding-left: clamp(20px, 3vw, 40px);
  font-size: clamp(22px, 4vw, 40px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.2;
  margin: 0; max-width: 34ch;
}

/* Preisblock */
.preis { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.preis-gross { font-size: clamp(34px, 5vw, 52px); font-weight: 700; letter-spacing: -0.025em; }
.preis-alt { color: var(--fg-quiet); text-decoration: line-through; }

/* Summenblock im Checkout */
.summe { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--border); padding-top: 24px; }
.summe-zeile { display: flex; justify-content: space-between; gap: 16px; }
/* `hidden` schlaegt jede Anzeigeart.
   Ohne diese Regel gewinnt `display: flex` gegen das Attribut, und die
   Rabattzeile stand in JEDER Rechnung — mit der Ueberschrift
   "Wiederholer-Rabatt" und einem leeren Betrag daneben. Robert: "der
   wiederholer rabatt nervt, der steht immer dabei und wird nur zu rueckfragen
   fuehren". Genau so ist es: eine Zeile ohne Zahl wirft eine Frage auf, die
   niemand beantworten will. */
[hidden] { display: none !important; }
.summe-gesamt { border-top: 1px solid var(--border); padding-top: 16px; }

/* Girocode */
.girocode { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.girocode img { width: 100%; max-width: 220px; aspect-ratio: 1/1; border-radius: var(--radius-md); background: #fff; padding: 10px; }

/* Portraet */
/* Hochkant: ein Referent gehoert ins Portraitformat, nicht in ein Querbild.
   Die Variante wird serverseitig gesichtszentriert geschnitten, hier wird
   nur noch der Rahmen gesetzt. max-height, damit das Bild neben einer kurzen
   Textspalte nicht die halbe Seite einnimmt. */
.portraet {
  width: 100%; max-width: 420px; aspect-ratio: 3/4; object-fit: cover;
  border-radius: var(--radius-md); display: block;
}

/* Fussbereich */
footer.fuss {
  padding: 24px var(--rand) 48px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
}
.fuss-links { display: flex; flex-wrap: wrap; gap: 24px; }
/* Die Groesse haengt am Container, nicht an einer Klasse im Markup: die
   Rechtslinks kommen seit dem 11.08.2026 aus `_rechtslinks.html` und werden
   von vier Layouts eingebunden, die verschiedene Klassen benutzen. */
.fuss-links a { font-size: 14px; line-height: 1.5; }

/* Rechtstexte: eine Lesespalte */
/* Lesespalte fuer Rechtstexte.
   40 px Abstand zwischen JEDEM Block liessen die Seite auseinanderfallen —
   auch zwischen zwei Saetzen desselben Gedankens. Der grosse Abstand gehoert
   vor die Ueberschrift, nicht zwischen die Absaetze. */
.lesespalte { max-width: 68ch; display: flex; flex-direction: column; gap: 8px; }
.lesespalte h2:not(:first-child) { margin-top: 22px; }
.lesespalte h2 { margin-bottom: 2px; }
.lesespalte h3 { margin-top: 8px; }
.lesespalte ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.lesespalte p, .lesespalte li { line-height: 1.5; }
.lesespalte strong { color: var(--fg); font-weight: 600; }
.lesespalte h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 600; letter-spacing: -0.01em; }
.lesespalte h3 { font-size: 18px; margin-top: 8px; }
.lesespalte p, .lesespalte li { font-size: 16px; line-height: 1.6; color: var(--fg-muted); }
.lesespalte hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

/* Meldung (Fehler aus der Validierung) */
.meldung {
  border-left: 1.5px solid var(--accent-warn);
  padding: 12px 0 12px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.meldung li { font-size: 14px; color: var(--fg); }

/* Wiederholer-Rabatt. Steht bewusst oben, direkt ueber dem Formular: der
   Abzug haengt an der E-Mail-Adresse, also muss der Hinweis dort stehen, wo
   sie eingetippt wird — nicht als Fussnote unter der Summe. */
.wiederholer {
  border: 1px solid var(--accent-warn);
  border-radius: 4px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 640px;
}
.wiederholer-preis {
  font-family: var(--font-mono, monospace);
  font-size: 28px; font-weight: 700; line-height: 1;
  color: var(--accent-warn);
}
.wiederholer-statt { text-decoration: line-through; opacity: .6; }

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

/* Druck: die Bestaetigungsseite wird ausgedruckt oder als PDF gesichert. */
@media print {
  body { background: #fff; color: #000; }
  .kopfzeile, footer.fuss, .btn-primary, .btn-outline { display: none; }
  .datenband > div { background: #fff; }
  a { color: #000; }
}


/* --- Playbook-Bausteine (29.07.2026) ------------------------------------- */

/* Leistungsumfang: was im Preis enthalten ist. Hairlines statt Karten. */
.leistungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.leistung {
  border-top: 1px solid var(--border);
  padding: 20px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.leistung-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }

/* Fuer wen / fuer wen nicht — zwei Hairline-Listen nebeneinander. */
.abgrenzung { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(24px, 4vw, 56px); }
.abgrenzung ul { list-style: none; margin: 0; padding: 0; }
.abgrenzung li {
  border-top: 1px solid var(--border);
  padding: 12px 0; font-size: 15px; line-height: 1.5;
}
.abgrenzung li:last-child { border-bottom: 1px solid var(--border); }

/* FAQ: <details>, kein JavaScript. */
.faq details { border-top: 1px solid var(--border); }
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 16px 0; font-size: 17px; font-weight: 500;
  display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 16px; color: var(--fg-muted); max-width: 68ch; }

/* Bildband: echte Aufnahmen, volle Breite, kein Filter, keine Tonung. */
.bildband { display: block; width: 100%; border-radius: var(--radius-md); }
.bildband--kopf { aspect-ratio: 16/9; object-fit: cover; }
/* Die 21:9-Variante kommt schon passend aus der Mediathek — kein
   zweiter Beschnitt im Browser, der wieder den Kopf treffen wuerde. */
.bildband--breit { aspect-ratio: 21/9; object-fit: cover; }

/* Ortsmarke: das Schild in der oberen rechten Bildecke.
   Design-Handoff "Nachtrag: Ortsmarke im Bild", 02.08.2026, Entwurf 8b.

   Beantwortet "wo findet das statt" im Bild, vor dem Lesen — bei
   Praesenzformaten die Stadt, bei Online-Formaten "Online". Die Flaeche
   traegt immer die Formatfarbe; sie kommt als Inline-Variable vom Server,
   weil sie an der Kategorie haengt und nicht an der Seite.

   Kein Schild ohne Bild: der Rahmen wird nur gesetzt, wo ein Bild steht. */
.bildrahmen { position: relative; display: block; }
.ortsmarke {
  position: absolute; top: 0; right: 0;
  padding: 9px 14px;
  background: var(--schild-flaeche, var(--color-siegerflamme));
  color: var(--schild-schrift, var(--color-nadelwald));
  /* Oben rechts folgt dem Radius des Bildes, sonst stuende die Ecke ueber.
     Gerundet ist sonst nur die Innenecke unten links. */
  border-radius: 0 var(--radius-md) 0 var(--radius-md);
  /* Eine Zeile, ein Wort. Saal, Strasse und Hausnummer bleiben unten im
     Datenblock — hier wuerde ein Umbruch die Bildecke zerlegen. */
  white-space: nowrap;
  pointer-events: none;
}

/* Bildreihe: vier kleine Motive statt eines grossen. Traegt auch, wenn die
   Vorlagen nur Webgroesse haben — 480 px reichen fuer eine Spalte, fuer ein
   Band ueber die ganze Breite nicht. */
.bildreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
}
.bildreihe img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-md); display: block;
}

/* ========================================================================== */
/* Dankeseite — Design-Handoff 06.08.2026, Variante C ("Persoenlich")          */
/* -------------------------------------------------------------------------- */
/* Der Entwurf ist mobil gedacht (390 px), weil Bestaetigungen ueberwiegend am */
/* Telefon geoeffnet werden. Nach oben skaliert er ueber eine zentrierte       */
/* Lesespalte, nicht ueber mehrere Spalten: die Seite wird gelesen, nicht      */
/* ueberflogen. Die Schriftgroessen sind bewusst groesser als auf der          */
/* Verkaufsseite — beim Nachbau nicht kleiner setzen.                          */

.danke-kopf,
.danke-rat,
.danke-mobil,
.danke-vorbereitung,
.danke-formales {
  /* Zentrierte Lesespalte statt voller Breite. 720 px ist die Grenze, ab der
     eine Zeile schneller zu suchen als zu lesen ist. */
  max-width: calc(720px + 2 * var(--rand));
  margin-inline: auto;
  width: 100%;
}

.danke-kopf { gap: 32px; padding-bottom: 40px; }
.danke-textgruppe { display: flex; flex-direction: column; gap: 14px; }
.danke-lead { max-width: 46ch; font-size: clamp(17px, 2.2vw, 20px); }
.danke-cta { display: flex; flex-direction: column; gap: 16px; }
.danke-hinweis { color: var(--fg-muted); font-size: clamp(15px, 1.8vw, 17px); }
/* Nur dort, wo der Text aus einem gepflegten Feld kommt: beim Retreat traegt
   der Zugangshinweis die komplette Hotelinformation ueber mehrere Absaetze.
   "pre-line" haelt die Umbrueche und laesst die Einrueckung des Templates
   trotzdem zusammenfallen — deshalb ein eigener Modifikator und nicht die
   Basisklasse, die auch fest im Markup gesetzte Saetze traegt. */
.danke-hinweis--absaetze { white-space: pre-line; }

/* Mittelblock: Rat, Gruppe, QR. Eigene Flaeche, damit der persoenliche Teil
   sich vom Formalen absetzt — er ist der Kern dieser Variante. */
.danke-rat {
  background: var(--bg-elevated);
  gap: 24px;
  /* Die Flaeche geht ueber die volle Breite, der Inhalt bleibt in der
     Lesespalte. Deshalb der Rahmen aussen und die Begrenzung innen. */
  max-width: none;
}
.danke-rat > * { max-width: 720px; margin-inline: auto; width: 100%; }
/* 4:3 mit Blick auf den Kopf. Die Bildposition ist gewaehlt, nicht geraten:
   die Aufnahme ist hochkant, ein zentrierter Beschnitt trifft die Brust. */
.danke-portraet {
  /* Robert am 07.08.2026: auf dem Telefon "absurd gross, viel zu lang".
     Der Handoff sah 4:3 vor — bei 342 px Spaltenbreite sind das 256 px Hoehe,
     und darunter steht 200 px spaeter das zweite Portraet der Signatur. Zwei
     grosse Fotos derselben Person auf einem Telefonbildschirm.

     Jetzt ein Band statt eines Bildes: 16:9 und nach oben gedeckelt. Der
     Ausschnitt sitzt bei 10 % statt 22 % — bei der flacheren Box wuerde 22 %
     den Kopf oben anschneiden. */
  width: 100%; aspect-ratio: 16/9; max-height: 260px;
  object-fit: cover; object-position: center 10%;
  border-radius: var(--radius-md); display: block;
  /* Kein Schatten. Bilder tragen in diesem Entwurf nie einen. */
}
.danke-rat-text {
  font-size: clamp(17px, 2vw, 19px); line-height: 1.5;
  color: var(--fg); margin: 0; max-width: 54ch;
}
.btn-outline--voll {
  display: block; width: 100%; text-align: center;
  border-color: var(--accent); color: var(--accent);
  font-size: 17px; font-weight: 600; padding: 18px 24px;
}
.btn-outline--voll:hover { background: var(--accent); color: var(--color-nadelwald); }
.danke-qr { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.danke-qr img {
  width: 96px; height: 96px; display: block;
  border-radius: var(--radius-sm); background: var(--color-off-white);
}
.danke-qr span { flex: 1 1 220px; }

/* Vorbereitung, Unterlagen, Zitat */
.danke-vorbereitung { gap: 28px; }
/* Ueberschriften brauchen eine EXPLIZITE Farbe. Auf der hellen Flaeche
   kommt sie ueber `theme-light`, das --fg umkehrt — ohne die Klasse stuende
   dort Off-White auf Off-White. */
.danke-h2 { color: var(--fg); max-width: 22ch; }
.danke-fliesstext {
  font-size: clamp(16px, 1.9vw, 18px); line-height: 1.6;
  color: var(--fg-muted); margin: 0; max-width: 62ch;
}
.danke-fliesstext strong { color: var(--fg); font-weight: 600; }

.danke-liste { display: flex; flex-direction: column; gap: 14px; }
.danke-zeile {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 18px 20px; min-height: 56px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
a.danke-zeile:hover { border-color: var(--accent); }
/* Noch nicht verfuegbar: sichtbar, aber nicht klickbar. Gestrichelt, damit
   der Unterschied ohne Lesen erkennbar ist. */
.danke-zeile--wartet { border-style: dashed; border-color: var(--border); }
.danke-zeile--wartet .danke-zeile-titel { color: var(--fg-quiet); }
.danke-zeile-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.danke-zeile-titel { font-size: 17px; font-weight: 600; color: var(--fg); }

.danke-zitat {
  border-left: 3px solid var(--accent-warn);
  padding-left: 20px; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.danke-zitat-text {
  font-size: clamp(18px, 2.2vw, 21px); font-weight: 500; line-height: 1.45;
  color: var(--fg); margin: 0; max-width: 46ch;
}
.danke-signatur { display: flex; gap: 16px; align-items: center; }
.danke-signatur img {
  width: 68px; height: 68px; object-fit: cover; object-position: center 18%;
  border-radius: var(--radius-md); display: block; flex: 0 0 auto;
}

/* Das Formale. Helle Flaeche, damit der Bruch zum Persoenlichen sichtbar ist. */
.danke-formales { gap: 32px; max-width: none; }
.danke-formales > * { max-width: 720px; margin-inline: auto; width: 100%; }
.danke-karte {
  background: var(--color-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.danke-feld { display: flex; flex-direction: column; gap: 4px; }
.danke-wert { font-size: 17px; font-weight: 500; color: var(--color-nadelwald); }
.danke-girocode {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 18px;
}
.danke-girocode img {
  width: 88px; height: 88px; display: block; background: #fff;
  border-radius: var(--radius-sm);
}
.danke-girocode span { flex: 1 1 200px; }
/* Outline auf heller Flaeche. `theme-light` liefert die dunkle Schrift, der
   Rahmen wird hier gesetzt, weil --border-strong dort zu leise waere. */
.btn-outline--dunkel {
  border-color: var(--color-nadelwald); color: var(--color-nadelwald);
  font-weight: 600; align-self: flex-start;
}
.btn-outline--dunkel:hover {
  border-color: var(--color-kleeblatt-dark); color: var(--color-kleeblatt-dark);
}
/* Bewusst kein Akkordeon: die Antworten sind kurz genug, um gelesen statt
   gesucht zu werden. Wer sie wegklappt, macht aus einer Antwort eine
   Suchaufgabe. */
.danke-fragen {
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--border); padding-top: 28px;
}
.danke-mail {
  font-size: 18px; font-weight: 600; color: var(--color-kleeblatt-dark);
}

/* Freiwillige Mobilnummer. Bewusst schmal und ohne eigene Flaeche: der Block
   ist ein Angebot, keine Aufforderung. Ein Kasten mit Rahmen laese sich wie
   ein offener Schritt, den man noch erledigen muss. */
.danke-mobil { gap: 20px; }
.danke-mobil-form { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.danke-mobil-knoepfe { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* Loeschen ist textueller Nebenweg, kein zweiter Knopf: gleich gross gesetzt
   waere es eine Alternative zum Hinterlegen, und das ist es nicht. */
.danke-mobil-weg {
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size: 15px; color: var(--fg-muted);
  text-decoration: underline; cursor: pointer;
}
.danke-mobil-weg:hover { color: var(--fg); }