/* Tenant-frontend layout + reset (P-W2-06a).
   ALLE Tenant-spezifischen Farben + Schrift kommen aus /api/tenant/theme.css
   als CSS-Custom-Properties (var(--color-primary), --color-accent, ...).
   Diese Datei liefert nur Layout-Geometrie + Defaults.

   Cross-Cutting-Visual-Polish (2026-06-10):
     • --color-soft-ink + --color-line jetzt via color-mix() aus --color-ink
       abgeleitet (statt hartkodiertem rgba mit Schwarz) — funktioniert auch
       auf dunklen Tenants (Ahoi Aubergine, EVOPE Schwarz).
     • --color-input-bg: Input-Boxen heben sich jetzt visuell von der Card-
       Surface ab (Mockup-Pattern: Card hell, Input minimal abgedunkelt).
     • --font-display: optional vom Tenant gesetzter Display-Font (Cormorant/
       Playfair etc.); Default = --font-family.
*/
:root {
  --color-primary: #1a1714;
  --color-accent: #a8543c;
  --color-ink: #1a1714;
  --color-surface: #f4eee2;
  --color-line: color-mix(in srgb, var(--color-ink) 10%, transparent);
  --color-line-soft: color-mix(in srgb, var(--color-ink) 6%, transparent);
  --color-soft-ink: color-mix(in srgb, var(--color-ink) 55%, transparent);
  --color-soft-ink-2: color-mix(in srgb, var(--color-ink) 35%, transparent);
  /* R16 Befund 2 (one10-Klicktest 2026-06-11): 10% Ink war als Input-Fläche
     zu grau/klobig — Mockup-Pattern (one10 start.html) ist Card hell, Input
     nur EINEN Hauch abgesetzt (Cream auf Weiß ≈ 3-4% Differenz). Die 1px-
     Hairline trägt die Affordance, nicht die Füllfarbe. */
  --color-input-bg: color-mix(in srgb, var(--color-surface) 96%, var(--color-ink) 4%);
  --color-card-bg: color-mix(in srgb, var(--color-surface) 88%, #ffffff 12%);
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: var(--font-family);
  --pad: clamp(20px, 5vw, 32px);
  --r-sm: 6px;
  --r: 12px;
  --r-lg: 18px;
  --ease-out-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
::selection {
  background: var(--color-accent);
  color: var(--color-surface);
}
a {
  color: inherit;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--pad);
  max-width: 920px;
  margin: 0 auto;
}
.wordmark {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: inherit;
}
.wordmark i {
  font-style: normal;
  color: var(--color-accent);
}
.wordmark .sub {
  display: block;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--color-soft-ink);
  margin-top: -2px;
}
.wordmark-logo {
  display: block;
  max-height: 36px;
  width: auto;
  /* Mockup-Pattern: echtes Logo wird per mix-blend-mode mit dem Cream-/
     Surface-Background verschmolzen, damit ein weißer Logo-PNG-Rand nicht
     als harte Box sichtbar bleibt. Auf hellen Surfaces ('cream', 'white')
     ist `multiply` korrekt. Bei dunklen Tenants schaltet site.js auf
     `screen` um (data-blend-mode-Attribut, gesetzt aus L*-Heuristik). */
  mix-blend-mode: var(--logo-blend-mode, multiply);
}
.wordmark-logo[data-blend-mode='screen'] {
  mix-blend-mode: screen;
}
.wordmark-logo[data-blend-mode='normal'] {
  mix-blend-mode: normal;
}
.pill {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 7px;
}
.pill::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--color-accent);
  border-radius: 99px;
}

.wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--pad) 60px;
}
.narrow {
  max-width: 620px;
  margin: 0 auto;
}

.hero {
  padding: clamp(34px, 8vw, 64px) 0 clamp(28px, 6vw, 44px);
  text-align: center;
}
.kicker {
  /* Filigran-Polish 2026-06-11: FW 700 → 600 (Mockup-Kicker sind
     500-600, NIE 700). 11px bleibt — Schriftgröße schon ok. */
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--color-soft-ink);
  font-weight: 600;
  margin-bottom: 18px;
}
h1 {
  /* font-display fällt per Theme-CSS auf font-family zurück, wenn kein
     Tenant-Display-Font gesetzt ist — der Inter-Stack greift dann. Bei
     gesetztem fontFamilyDisplay (Cormorant/Playfair) bekommt die Headline
     den Serif-Cut wie in den one10/ora/asa-Mockups.
     Filigran-Polish 2026-06-11: FW 900 → 700 (Mockup-Headlines benutzen
     FW 500-700, NIE 900 — siehe one10/asa landing), max-Cap 72px → 56px,
     unter-Cap 40px → 32px. */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 7.5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 16px;
}
h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-accent);
}
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 4.6vw, 30px);
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}
h3 {
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.lead {
  font-size: clamp(15px, 3.6vw, 17px);
  color: var(--color-soft-ink);
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto;
  font-weight: 400;
}
/* Box-/Studio-Bild auf der Empfehlungsseite (Eddie 2026-06-14): volle
   Inhaltsbreite — genauso breit wie die Sprachnachricht-Box darueber. Das Bild
   ist bereits zugeschnitten (landscape), also Naturverhaeltnis, kein
   zusaetzlicher Crop. */
.box-image {
  margin: 18px 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-card, #f0ece2);
}
.box-image__img {
  width: 100%;
  height: auto;
  display: block;
}
/* Landing-Hero-Bild (Eddie 2026-06-14): screen-breit, aber kompakt — nicht
   bildschirmfuellend. Inline-img, das die zentrierte Hero-Spalte mittig setzt;
   .hidden (Start-Zustand) steuert die Sichtbarkeit, daher hier KEIN display. */
.hero-image {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 16px;
  margin-top: 14px;
}
/* Fallback-Einladungszeile auf der Empfehlungsseite (Eddie 2026-06-14):
   warme, zentrierte Zeile statt nacktem Namen, wenn keine Sprachnachricht da
   ist. Sitzt zwischen Name und Box-Bild. */
.referral-invite-line {
  font-size: clamp(18px, 5vw, 24px);
  color: var(--color-ink);
  line-height: 1.35;
  max-width: 24ch;
  margin: 0 auto;
  font-weight: 600;
}

/* First-Contact-Block (Eddie 2026-06-14): Name + persoenliche Einladung +
   Sprachnachricht fuellen den ersten Screen, vertikal zentriert. Das
   Eintrag-Formular liegt darunter und wird erst beim Scrollen sichtbar — der
   erste Eindruck ist persoenlich, das Eintragen Nebensache. 100svh
   respektiert mobile Browser-Chrome; abzueglich Topbar + Hero-Padding. */
.referral-firstcontact {
  min-height: calc(100svh - 150px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 3.6vw, 26px);
  padding: 6px 0 0;
}
/* align-items:center → Kinder zentrieren + bemessen sich an ihrem Inhalt
   (Text respektiert seine max-width und bricht um). max-width:100% +
   min-width:0 verhindern, dass ein breites Kind (Wellenform) die Spalte
   ueber die Viewport-Breite zieht (Horizontal-Overflow-Fix Eddie 2026-06-14). */
.referral-firstcontact > * {
  max-width: 100%;
  min-width: 0;
}
/* Boxen (Sprach-/Why-Note) sollen die volle Spaltenbreite einnehmen. */
.referral-firstcontact > .voice-note-from-referrer,
.referral-firstcontact > .why-note-from-referrer {
  width: 100%;
  box-sizing: border-box;
}
/* hidden-Kinder (Voice-/Why-Note ohne Daten) duerfen keinen Flex-Gap-Slot
   belegen. */
.referral-firstcontact > [hidden] {
  display: none;
}
/* Scroll-Hinweis am Fuss des ersten Screens. */
.referral-scroll-cue {
  margin: clamp(14px, 4vw, 30px) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-soft-ink);
}
.referral-scroll-cue[hidden] {
  display: none;
}
.referral-scroll-cue__chevron {
  font-size: 20px;
  line-height: 1;
  animation: referralScrollCue 1.7s ease-in-out infinite;
}
@keyframes referralScrollCue {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .referral-scroll-cue__chevron {
    animation: none;
  }
}
/* Klarer Abstand zwischen erstem Screen und dem Eintrag-Teil. */
.referral-firstcontact ~ .lead {
  margin-top: clamp(28px, 7vw, 52px);
}
.cta-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.btn {
  /* Filigran-Polish 2026-06-11: vorher FW 800 / 14-22px Padding —
     Mockups (one10/asa landing) nutzen FW 500-600, 15-26px Padding,
     kleinere Border-Radii (10px statt 12px). 'Bootstrap-Default-Optik'
     soll weg. */
  background: var(--color-primary);
  color: var(--color-surface);
  border: 0;
  padding: 12px 22px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition:
    transform 0.15s,
    background 0.15s;
}
.btn:hover {
  background: #000;
  transform: translateY(-1px);
}
.btn.ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}
.btn.full {
  width: 100%;
  justify-content: center;
}

.card {
  /* Filigran-Polish 2026-06-11: var(--r-lg)=18px ist für Premium-
     Boutique zu groß (Mockups: 12-14px). Padding clamp(22,5vw,28)
     bleibt erträglich aber knapper, ähnlich one10/asa share-card.
     Border bleibt 1px hairline via color-mix. */
  background: var(--color-card-bg);
  border: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent);
  border-radius: 14px;
  padding: clamp(20px, 4vw, 24px);
}
/* Reset-Page-Polish (2026-06-10): Headline→Form-Card-Abstand auf
   Login/Reset/Register-Pages war zu groß — Form fühlte sich „losgelöst"
   an. Hero hat zusätzlich noch padding-bottom, das die Lücke verstärkt.
   Alle .card direkt in .hero bekommen negativen Offset (auch zweite
   Card-Form wie auf /reset, wo confirm- und request-Form Geschwister
   sind und je nach URL eine sichtbar ist). */
.hero > .card {
  margin-top: -8px;
}
/* Bugfix 2026-06-10 Round 2 (Eddie-Klicktest /portal/register):
   Wenn ein .lead-Absatz im Hero steht, klebte die Form-Card direkt
   an der Lead-Zeile. 24px schaffen sichtbare Atem-Pause. */
.hero p.lead + .card,
.hero .lead + .card {
  margin-top: 24px;
}
.label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-soft-ink);
  font-weight: 700;
  margin: 0 0 14px;
}
.input,
textarea,
select {
  width: 100%;
  /* Cross-Cutting-Visual-Polish (2026-06-10): Inputs heben sich jetzt
     leicht vom Card-Hintergrund ab (var(--color-input-bg) statt
     --color-surface). Verhindert das „Input verschmilzt mit Card"-
     Problem aus den ersten Mockup-Vergleichen.
     Filigran-Polish 2026-06-11: 15-16px Padding + 16px Font wirkten
     klobig — reduziert auf 12-14px Padding + 15px Font (Mockup-
     Pattern asa/one10). Border-Radius var(--r)=12 → 10. */
  background: var(--color-input-bg);
  border: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent);
  color: var(--color-ink);
  padding: 12px 14px;
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
}
.input + .input,
.input + label {
  /* Form-Gruppe-Trennung (Bugfix 2026-06-10 Round 2, Eddie-Klicktest):
     16px schaffen sichtbaren Abstand zwischen Feldgruppen, damit ein
     Label optisch zum DARUNTER liegenden Input gehört, nicht zum darüber. */
  margin-top: 16px;
}
/* Button nach Input darf nicht ankleben — sonst sieht's nach
   Bootstrap-Default aus. Eddies Mockup-Layouts haben deutliche
   Trennung zwischen Form-Feld und Submit-Action.
   register-polish 2026-06-10: Live-Validation schiebt eine
   inline-`<p class="err inline">` zwischen Input und Button — der
   reine Adjacent-Sibling-Selector greift dann nicht mehr. Wir
   adressieren beide Fälle: direkt anschließender Button UND Button
   nach Inline-Error. */
.input + .btn,
.input + button,
.input + .err.inline + .btn,
.input + .err.inline + button,
.err.inline + .btn,
.err.inline + button {
  margin-top: 18px;
}
/* R16 Befund 3: ensureInlineErr() schiebt eine (oft hidden) <p class="err
   inline"> zwischen Input und nächstes Label — der `.input + label`-
   Selector (16px, s.u.) greift dann nicht mehr und die Feldgruppen kleben
   aneinander. Gleiches Spacing auch über den Inline-Error hinweg. */
.err.inline + label {
  margin-top: 16px;
}
/* Reset-Page-Polish (2026-06-10, PR #31 → Round 2): Label → Input gehört visuell
   ZUSAMMEN — KLEINERER Abstand als Input → Label (16px, siehe oben).
   4px = Label klebt am Input darunter, ist klar dessen Beschriftung. */
label + .input {
  margin-top: 4px;
}
.input::placeholder {
  color: var(--color-soft-ink);
}
.input:focus {
  outline: none;
  /* R16 Befund 2: Fokus-Kontur in Brand-Primary statt Ink — Mockup-Pattern
     (one10 start.html: focus → var(--clay)). Bleibt tenant-generisch. */
  border-color: var(--color-primary);
}
label {
  display: block;
  margin: 0 0 4px 0;
  font-weight: 500;
}
/* R16 Befund 2 (one10-Klicktest 2026-06-11): Form-Cards (Register/Login/
   Reset/Event/Aufsteller) wirkten grob — Labels liefen zentriert mit
   (geerbt aus .hero { text-align:center }), Inputs als breite graue
   Boxen über die volle 620px-Card. Mockup-Referenz one10 start.html:
   schmale Card (520px-Wrap), ruhige Flächen, dezente Mikro-Labels,
   Pill-Submit. Alles Geometrie/abgeleitete Farben — tenant-generisch. */
form.card {
  text-align: left;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
form.card label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-soft-ink);
}
form.card .btn.full {
  /* Mockup-Submit: Pill, FW 500, ruhiges Letter-Spacing (one10 start.html
     .btn — border-radius 99px, font-weight 500, letter-spacing .04em). */
  border-radius: 99px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 13px 22px;
}
/* Labels ohne Klasse (Login/Reset/Register) brauchen Atem nach oben
   wenn sie nach einem Input kommen — bisher griff nur .label.
   .card label + .input bleibt 4px (Label-Input-Bindung). */
.input + label {
  margin-top: 16px;
}
/* Reset-Page: zwischen Input und Folge-Label sitzt der Passwort-Hint —
   ohne diese Regel klebt das CONFIRM-Label am Hint statt bei seinem Feld. */
.hint + label {
  margin-top: 16px;
}
.card label + .input {
  margin-top: 4px;
}
.err {
  color: var(--color-accent);
  font-size: 13px;
  /* R16 Befund 2 / Filigran-Doktrin: FW 700 → 500 (Mockup .err = 500). */
  font-weight: 500;
  margin: 10px 0 0;
  min-height: 1em;
}
/* Inline-Variante für Live-Format-Validation (form-validation-2026-06-10):
   sitzt direkt unter dem Input, kleinerer top-margin damit es als „Feld-
   Annotation" wirkt statt als „Form-weiter Fehler". */
.err.inline {
  margin: 4px 0 0;
  font-weight: 500;
}
.err.inline[hidden] {
  display: none;
}
/* Live-Hint für Passwort-Min-Länge (Bug 2, form-validation-2026-06-10).
   Default: dezent grau. hint-err: rot. hint-ok: grün. */
.hint {
  color: var(--color-soft-ink);
  font-size: 12px;
  margin: 4px 0 0;
  min-height: 1em;
}
.hint.hint-err {
  color: var(--color-accent);
  font-weight: 600;
}
.hint.hint-ok {
  color: #2f7a3a;
  font-weight: 600;
}
.ok {
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 700;
  margin: 10px 0 0;
}
.links {
  text-align: center;
  font-size: 13px;
  color: var(--color-soft-ink);
  margin-top: 16px;
  line-height: 1.9;
}
.links a {
  color: var(--color-accent);
  /* R16 Befund 2 / Filigran-Doktrin: FW 700 → 500 (Mockup-Links = 500). */
  font-weight: 500;
  text-decoration: none;
}

.hidden {
  display: none !important;
}

/* honeypot — komplett aus dem normalen Tab-/Layout-Fluss. */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
}

.plans-list,
.rewards-list,
.events-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.plans-list li,
.rewards-list li,
.events-list li {
  border-top: 1px solid var(--color-line);
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.plans-list li:first-child,
.rewards-list li:first-child,
.events-list li:first-child {
  border-top: 0;
}
/* R16 Befund 1 (one10-Klicktest 2026-06-11): Die Landing-Preisliste lief
   als 620px-Block mit Label ganz links / Preis ganz rechts unter dem
   ZENTRIERTEN Sektions-Header — wirkte auseinandergerissen. Zusätzlich
   überschrieb das `margin: 0` der Sammelregel oben das `margin: 0 auto`
   von `.narrow` (gleiche Spezifität, spätere Quelle) — die Liste pinnte
   links statt mittig. Mockup-Pattern (one10/K&K landing): schmale,
   zentrierte Spalte, Label und Preis nah beieinander, hairline-Trenner.
   Tenant-generisch: nur Geometrie + abgeleitete Farben, keine Brand-Werte. */
.plans-list {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.plans-list li {
  font-size: 15px;
  padding: 12px 0;
  border-top: 1px solid var(--color-line-soft);
}
.plans-list .plan-name {
  color: var(--color-ink);
}
.plans-list .plan-price {
  color: var(--color-soft-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.qrcode {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  display: block;
}

.footer {
  border-top: 1px solid var(--color-line);
  margin-top: 80px;
  padding: 24px var(--pad);
  font-size: 13px;
  color: var(--color-soft-ink);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.footer a {
  color: var(--color-soft-ink);
  text-decoration: none;
}
.footer a:hover {
  color: var(--color-ink);
}

/* Cookie-Banner (P-W2-06a, TTDSG, default opt-out). */
.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-primary);
  color: var(--color-surface);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  z-index: 1000;
}
.cookie-banner h3 {
  color: var(--color-surface);
  margin: 0 0 6px;
  font-size: 15px;
}
.cookie-banner p {
  margin: 0 0 12px;
  font-size: 13px;
  opacity: 0.92;
}
.cookie-banner .cookie-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cookie-banner .btn {
  background: var(--color-accent);
  color: var(--color-surface);
  padding: 10px 14px;
  font-size: 13px;
}
.cookie-banner .btn.ghost {
  background: transparent;
  color: var(--color-surface);
  border-color: rgba(255, 255, 255, 0.4);
}

/* DSGVO-Modal + Toast (P-W2-10b). Print-Editorial-Konsistent mit dem
   Polish-Sprint (Sand/Clay-Akzente, sandige Karten, monochrome Kontur). */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 20, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 90;
}
.modal {
  /* Filigran-Polish 2026-06-11: 520 → 460 (boutique-Pattern), Radius
     var(--r-lg)=18 → 14, hairline-Border via color-mix. */
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent);
  border-radius: 14px;
  padding: clamp(22px, 5vw, 30px);
  width: 460px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  color: var(--color-ink);
}
.modal h3 {
  /* FW 800 / 22 → FW 600 / 18 (Mockup-Modal-Titles sind weniger massiv) */
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.modal .msub {
  font-size: 13px;
  color: var(--color-soft-ink);
  margin: 0 0 18px;
  line-height: 1.55;
}
.modal-section {
  border-top: 1px solid var(--color-line);
  padding: 18px 0;
}
.modal-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.modal-section h4 {
  /* Filigran-Polish 2026-06-11: FW 800 → 600, 14 → 12px (Mockup-
     Sub-Headlines sind dezenter). */
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--color-ink);
}
.modal-section p {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--color-soft-ink);
  line-height: 1.55;
}
.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.modal-actions .btn {
  flex: 1;
  min-width: 140px;
}
.btn.danger {
  background: var(--color-accent);
  color: var(--color-surface);
}
.btn.danger:hover {
  background: var(--color-ink);
}
.dsgvo-data-preview {
  margin-top: 10px;
  border: 1px solid var(--color-line);
  border-radius: var(--r);
  background: var(--color-card-bg);
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.5;
}
.dsgvo-data-preview h5 {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-soft-ink);
  font-weight: 700;
  margin: 12px 0 4px;
}
.dsgvo-data-preview h5:first-child {
  margin-top: 0;
}
.dsgvo-data-preview dl {
  display: grid;
  grid-template-columns: minmax(120px, 32%) 1fr;
  gap: 4px 12px;
  margin: 0;
}
.dsgvo-data-preview dt {
  color: var(--color-soft-ink);
  font-weight: 600;
}
.dsgvo-data-preview dd {
  margin: 0;
  word-break: break-word;
}
.dsgvo-data-preview .dsgvo-empty {
  color: var(--color-soft-ink);
  font-style: italic;
}
.footer .footer-dsgvo {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-soft-ink);
  cursor: pointer;
  text-decoration: none;
}
.footer .footer-dsgvo:hover {
  color: var(--color-ink);
}

.toast-stack {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 120;
  pointer-events: none;
}
.toast {
  background: var(--color-ink);
  color: var(--color-surface);
  padding: 12px 20px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  animation: toast-in 0.2s ease;
}
.toast.warn {
  background: var(--color-accent);
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* ──────────────────────────────────────────────────────────────────────
 * Empfehler-Portal · Lead-Liste mit 4-Stufen-Progress-Bar
 * Verfeinerung 2026-06-10: zeit-stetige Befüllung (--lead-fill als
 * CSS-Variable, 0..1 vom JS gesteuert) + Scroll-Tween (IntersectionObserver
 * tweenet --lead-fill von 0 zum Ziel-Wert beim Eintritt ins Viewport).
 * ────────────────────────────────────────────────────────────────────── */
.lead-list {
  margin-top: 28px;
}
.lead-list__title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--color-ink);
}
.lead-list__empty {
  color: var(--color-soft-ink);
  font-size: 14px;
  margin: 0;
}
.lead-list__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lead-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  padding: 18px 18px 16px;
}
.lead-card--converted {
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-card-bg));
  border-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-line));
}
.lead-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.lead-card__name {
  font-weight: 700;
  color: var(--color-ink);
  font-size: 15px;
}
.lead-card__stage-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-soft-ink);
  font-weight: 700;
}
.lead-card__banner {
  margin: 0 0 12px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-radius: var(--r);
  font-weight: 600;
}
.lead-card__micro {
  margin: 10px 0 0;
  color: var(--color-soft-ink);
  font-size: 13px;
  line-height: 1.4;
}

.lead-progress {
  --lead-fill: 0;
  --lead-fill-target: 0;
  position: relative;
  height: 22px;
  display: block;
}
.lead-progress__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 4px;
  background: var(--color-line);
  border-radius: 999px;
}
.lead-progress__fill {
  position: absolute;
  left: 0;
  top: 9px;
  height: 4px;
  width: calc(var(--lead-fill) * 100%);
  background: var(--color-accent);
  border-radius: 999px;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lead-progress__dots {
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.lead-progress__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-line);
  box-sizing: border-box;
  transition:
    border-color 200ms ease,
    background 200ms ease;
}
.lead-progress__dot--done {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.lead-progress__dot--current {
  background: var(--color-surface);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.lead-progress__dot--paused {
  background: var(--color-surface);
  border-color: var(--color-soft-ink);
  border-style: dashed;
}
.lead-progress__dot--locked {
  background: var(--color-surface);
  border-color: var(--color-line);
}

@media (prefers-reduced-motion: reduce) {
  .lead-progress__fill {
    transition: none;
  }
}

/* Welle-2.5 Instant-Reward-Booking (Sub-C, 2026-06-10).
   Reward-Ladder-Section + Booking-Modal-Renderer (Eversports/Wix/External/Slot).
   Karten-Shell wiederverwendet die lead-card-Maße (selbe Hierarchie im Portal). */
/* Stufe 4 (Gamification): Botschafter-Badge + Community-Ziel.
   Theme-adaptiv über color-mix auf den Tenant-Vars (hell + dunkel). */
.portal-botschafter {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.portal-botschafter__badge {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-surface);
  white-space: nowrap;
}
.portal-botschafter__sub {
  font-size: 14px;
  color: var(--color-ink);
}
.portal-community-goal {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-ink) 5%, transparent);
}
.portal-community-goal__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.portal-community-goal__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
}
.portal-community-goal__count {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-soft-ink);
  white-space: nowrap;
}
.portal-community-goal__track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-ink) 12%, transparent);
  overflow: hidden;
}
.portal-community-goal__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--color-accent);
  transition: width 0.5s ease;
}

.reward-ladder {
  margin-top: 28px;
}
.reward-ladder__title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--color-ink);
}
.reward-ladder__empty {
  color: var(--color-soft-ink);
  font-size: 14px;
  margin: 0;
}
.reward-ladder__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reward-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  padding: 18px 18px 16px;
}
.reward-card--state-current {
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.reward-card--done,
.reward-card--booked,
.reward-card--redeemed {
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-card-bg));
  border-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-line));
}
.reward-card--redeemed {
  opacity: 0.78;
}
.reward-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.reward-card__name {
  font-weight: 700;
  color: var(--color-ink);
  font-size: 15px;
}
.reward-card__state {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
}
.reward-card--state-locked .reward-card__state {
  color: var(--color-soft-ink);
}
.reward-card__body {
  margin: 0;
  color: var(--color-soft-ink);
  font-size: 13.5px;
  line-height: 1.5;
}
/* White-Label-Lücke 4: Erlebnis-Prosa direkt unter dem Tier-Titel der
   Portal-Karte. Negativer Top-Margin zieht sie an den Header (12px-Bottom)
   heran — gleiche Ruhe wie die one10-Sub-Zeile, nicht lauter als __body. */
.reward-card__desc {
  margin: -6px 0 12px;
  color: var(--color-soft-ink);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}
.reward-card__cta-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.reward-card__cta {
  background: var(--color-primary);
  color: var(--color-surface);
  border: 0;
  padding: 10px 18px;
  border-radius: var(--r);
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition:
    transform 0.15s,
    background 0.15s;
}
.reward-card__cta:hover {
  background: #000;
  transform: translateY(-1px);
}
.reward-card__cta--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}
.reward-card__cta--ghost:hover {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.reward-card__booked-pill {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.reward-modal__iframe-wrap {
  position: relative;
  margin-top: 8px;
}
.reward-modal__iframe {
  width: 100%;
  height: 600px;
  min-height: 480px;
  border: 0;
  border-radius: var(--r);
  background: rgba(0, 0, 0, 0.04);
  display: block;
}
.reward-modal__skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--color-soft-ink);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--r);
  animation: reward-skeleton-pulse 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes reward-skeleton-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.85;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reward-modal__skeleton {
    animation: none;
  }
  .reward-card__cta {
    transition: none;
  }
}
@media (max-width: 720px) {
  .reward-ladder__items {
    flex-direction: column;
  }
  .reward-modal__iframe {
    height: 480px;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * Cross-Cutting-Visual-Polish (2026-06-10) — Mockup-Pattern-Library
 *
 * Reveal-Stagger: Hero/Card-Sektionen fade-in mit gestaffelter Verzögerung.
 *   Klasse `.reveal` triggert die Animation; `.r1..r4` setzen den Delay.
 *   Pattern aus K&K-portal.html L447-450 + one10-landing.html — identische
 *   Kurve (cubic-bezier(.2,.7,.2,1)), gleiche Delays (.05/.13/.22/.30s).
 *
 * Pulse-on-Update: Stat-Counter pulsen kurz beim Wert-Wechsel.
 *   `pulseElement(el)` in site.js setzt `data-pulse="1"` für 480 ms; das
 *   CSS-Selektor matched darauf. Pattern aus K&K-portal.html L776-781
 *   (function pulse(el) { el.style.transform = 'scale(1.18)' ... }).
 *
 * Footer-Logo: Erweiterter Footer mit Logo-Bild (oder Wordmark-Fallback),
 *   Studio-Adresse, Domain und Admin-Link. Pattern aus K&K-landing.html
 *   L283-291.
 * ────────────────────────────────────────────────────────────────────── */

/* ─── Portal-Polish (2026-06-10) ────────────────────────────────────────
   Mockup-Goldstandard: /Users/eddiestrehl/kopf-und-koerper-demo/public/portal.html
   Hero-Reveal-Stagger, Share-Card mit Channel-Buttons + QR-Mini-Card,
   3-Stat-Grid mit Pulse-on-Update, optionale WhatsApp-Community-CTA,
   Studio-Closing-Quote-Sektion. Alle Tenant-Farben kommen aus theme.css —
   diese Datei liefert nur Layout + Geometrie. */

.portal {
  padding-bottom: 40px;
}

.portal-hero {
  padding: clamp(28px, 6vw, 44px) 0 clamp(16px, 4vw, 22px);
}
.portal-hero__kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-soft-ink);
  font-weight: 700;
  margin: 0 0 14px;
}
.portal-hero__headline {
  font-weight: 900;
  font-size: clamp(32px, 8vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 14px;
  color: var(--color-ink);
}
.portal-hero__lead {
  font-size: clamp(15px, 4vw, 17px);
  color: var(--color-soft-ink);
  line-height: 1.55;
  /* Eddie 2026-06-14: Portal-Lead darf ueber die volle Inhaltsbreite gehen
     (vorher 44ch → schmale linksbuendige Spalte). */
  max-width: none;
  margin: 0;
}

.portal-share-section {
  padding: 0 0 clamp(20px, 5vw, 28px);
}

.share-card {
  background: var(--color-card-bg);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 5vw, 26px);
}
/* Sprachnachricht-Pflicht (Eddie 2026-06-14): gesperrte Share-Karte. Link,
   WhatsApp/SMS/Mail und QR werden gedimmt + klick-tot; NUR die Voice-Taste
   (.share-btn--voice) bleibt aktiv, damit man zur Aufnahme kommt. */
.share-card__lock {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-soft-ink);
  background: var(--color-ink-04, rgba(0, 0, 0, 0.05));
  border-radius: var(--r-md, 10px);
  padding: 10px 13px;
  margin: 0 0 14px;
}
.share-card.is-voice-locked .link-box,
.share-card.is-voice-locked .share-btn:not(.share-btn--voice),
.share-card.is-voice-locked .qr-mini {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.4);
}
.share-card__label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-soft-ink);
  font-weight: 700;
  margin: 0 0 14px;
}
.link-box {
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r);
  padding: 5px 5px 5px 14px;
  gap: 8px;
  margin-bottom: 14px;
}
.link-box__url {
  font-size: 13px;
  color: var(--color-ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.link-box__hidden-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.copy-btn {
  background: var(--color-primary);
  color: var(--color-surface);
  border: 0;
  padding: 9px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.15s,
    opacity 0.15s;
  flex-shrink: 0;
}
.copy-btn:hover {
  opacity: 0.88;
}
.copy-btn.is-copied {
  background: var(--color-accent);
  color: var(--color-primary);
}

.share-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: var(--r);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}
.share-btn:hover {
  transform: translateY(-1px);
}
.share-btn--wa {
  background: #25d366;
  color: #111111;
  border: 0;
  grid-column: 1 / -1;
  letter-spacing: 0.01em;
}
.share-btn--wa:hover {
  background: #1eb858;
}
.share-btn--alt {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}
.share-btn--alt:hover {
  background: var(--color-surface);
  border-color: var(--color-ink);
}

.qr-mini {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 0 0;
  border-top: 1px solid var(--color-line);
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: opacity 0.15s;
}
.qr-mini:hover {
  opacity: 0.85;
}
.qr-mini__img {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: #ffffff;
}
.qr-mini__text {
  flex: 1;
  min-width: 0;
}
.qr-mini__text b {
  display: block;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--color-ink);
  margin-bottom: 2px;
}
.qr-mini__text > span {
  display: block;
  font-size: 12.5px;
  color: var(--color-soft-ink);
  line-height: 1.45;
}

.portal-qr-large {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 16px auto;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}

.wa-cta {
  margin-top: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-ink);
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.wa-cta[hidden] {
  display: none;
}
.wa-cta:hover {
  border-color: var(--color-ink);
  transform: translateY(-1px);
}
.wa-cta__icon {
  width: 34px;
  height: 34px;
  border-radius: 99px;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.wa-cta__text {
  flex: 1;
  min-width: 0;
}
.wa-cta__text b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--color-ink);
  margin-bottom: 2px;
}
.wa-cta__text > span {
  display: block;
  font-size: 12.5px;
  color: var(--color-soft-ink);
  line-height: 1.45;
}

/* ──────────────────────────────────────────────────────────────────────
 * Voice-Note (restauriert + Share-Option 2026-06-11).
 * Filigran-Doktrin: gleiche Karten-Anatomie wie .share-card (1px-Border,
 * 10px-Eyebrow mit Tracking, soft-ink-Fließtext), kein Bold-Overkill.
 * ────────────────────────────────────────────────────────────────────── */
.portal-voice-note {
  padding: 0 0 clamp(20px, 5vw, 28px);
}
.portal-voice-note[hidden] {
  display: none;
}
.voice-note-card {
  background: var(--color-card-bg);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 5vw, 26px);
  transition: box-shadow 0.3s ease;
}
.voice-note--spotlight .voice-note-card {
  box-shadow: 0 0 0 1.5px var(--color-accent);
}
.voice-note-card__eyebrow {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-soft-ink);
  font-weight: 700;
  margin: 0 0 10px;
}
.voice-note-card__title {
  font-family: var(--font-display);
  font-size: clamp(19px, 4.6vw, 23px);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 0 0 6px;
}
.voice-note-card__lead {
  font-size: 13.5px;
  color: var(--color-soft-ink);
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 46ch;
}
.voice-note-record-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.voice-note-mic-icon {
  font-size: 15px;
  line-height: 1;
}
.voice-note-consent-preview {
  font-size: 11.5px;
  color: var(--color-soft-ink);
  line-height: 1.5;
  margin: 12px 0 0;
  max-width: 52ch;
}
.voice-note-recording {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
/* display:flex schlägt sonst die UA-Regel [hidden]{display:none}. */
.voice-note-recording[hidden],
.voice-note-idle[hidden],
.voice-note-existing[hidden],
.voice-note-unsupported[hidden] {
  display: none;
}
.voice-note-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d64545;
  animation: voiceNotePulse 1.1s ease-in-out infinite;
}
@keyframes voiceNotePulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
.voice-note-duration {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  margin: 0;
}
.voice-note-recording-hint {
  font-size: 12px;
  color: var(--color-soft-ink);
  margin: 0;
}
.voice-note-existing audio {
  display: block;
  width: 100%;
  margin: 2px 0 10px;
}
.voice-note-meta {
  font-size: 11.5px;
  color: var(--color-soft-ink);
  margin: 0 0 10px;
}
.voice-note-existing-actions {
  display: flex;
  gap: 8px;
}
.voice-note-existing-actions .btn.sm {
  padding: 8px 14px;
  font-size: 12px;
}
.voice-note-unsupported {
  font-size: 12.5px;
  color: var(--color-soft-ink);
  margin: 0;
}
.voice-note-share {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
}
.voice-note-share__hint {
  font-size: 12px;
  color: var(--color-soft-ink);
  line-height: 1.5;
  margin: 0 0 10px;
}
/* Vierte Share-Option im Strip: volle Breite unter SMS/E-Mail. */
.share-btn--voice {
  grid-column: 1 / -1;
}
.share-btn--voice[hidden] {
  display: none;
}
.share-btn__mic {
  font-size: 15px;
  line-height: 1;
}

/* Lead-Landing /r/:code — „Eine Nachricht von {firstName}". */
/* Sprachnachricht auf der Empfehlungs-Landing (Eddie 2026-06-14): KEINE graue
   Box mehr — nur die Messenger-Pill, zentriert. Label/Hint-Zeilen entfernt. */
.voice-note-from-referrer {
  background: none;
  border: 0;
  padding: 0;
  margin: 4px 0;
  display: flex;
  justify-content: center;
}
.voice-note-from-referrer[hidden] {
  display: none;
}
.voice-note-from-referrer__label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-soft-ink);
  font-weight: 700;
  margin: 0 0 8px;
}
.voice-note-from-referrer audio {
  display: block;
  width: 100%;
}
.voice-note-from-referrer__hint {
  font-size: 12px;
  color: var(--color-soft-ink);
  line-height: 1.5;
  margin: 8px 0 0;
}

/* ── Voice-Player: Messenger-Pill (2026-06-11) ─────────────────────────
   WhatsApp-Sprachnachricht-Anmutung: runder Play-Button links, Wellenform
   aus feinen Balken, rechts die Dauer. Brandbar — Farben/Radien NUR aus
   den Tenant-Variablen (--color-primary/-surface/-ink), kein Studio-Hex.
   Filigran-Doktrin: 1px-Hairline, color-mix-Tints, 11.5px-Zeit, keine
   fetten Flächen. Das native <audio> bleibt als unsichtbare Engine. */
audio.voice-player-engine {
  display: none;
}
.voice-player {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Review-Befund 1 (PR #72): Fläche aus --color-card-bg statt hartem
     Weiß — 95% #ffffff machte die Pill auf dunklen Tenants (Ahoi
     Aubergine #1F1418, EVOPE Schwarz) fast weiß; die ink-basierten
     ungespielten Balken + die soft-ink-Zeit waren darauf unsichtbar.
     Header-Pattern (Z.6-9): Flächen aus Surface/Ink ableiten. */
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-card-bg));
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
  border-radius: 999px;
  padding: 7px 16px 7px 7px;
  /* min(420px, 100%): nie breiter als der Container — sonst Horizontal-
     Overflow auf schmalen Phones (Eddie 2026-06-14). */
  max-width: min(420px, 100%);
  margin: 2px 0 10px;
}
.voice-note-from-referrer .voice-player {
  margin: 0;
}
.why-note-from-referrer {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border, var(--color-line));
  border-radius: var(--r);
  padding: 14px 16px;
  margin: 10px 0 6px;
  text-align: left;
}
.why-note-from-referrer[hidden] {
  display: none;
}
.why-note-from-referrer__label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-soft-ink);
  font-weight: 700;
  margin: 0 0 8px;
}
.why-note-from-referrer__text {
  margin: 0;
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.5;
}
.first-touch-capture {
  border: 1px solid var(--color-line);
  border-radius: var(--r);
  padding: 12px;
  margin: 2px 0 10px;
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-accent));
}
.first-touch-capture[hidden] {
  display: none;
}
.first-touch-capture__title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
}
.first-touch-capture__label {
  display: block;
  margin: 10px 0 6px;
  font-size: 11px;
  color: var(--color-soft-ink);
}
.lead-form--first-touch [data-account-field][hidden] {
  display: none;
}
.why-note-editor {
  border-top: 1px solid var(--color-line);
  margin-top: 12px;
  padding-top: 12px;
}
.why-note-editor__label {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--color-soft-ink);
}
.why-note-editor__input {
  min-height: 78px;
  resize: vertical;
}
.why-note-editor__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.why-note-editor__status {
  margin: 8px 0 0;
}
.voice-player__toggle {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--color-primary);
  color: var(--color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.15s var(--ease-out-soft),
    opacity 0.15s ease;
}
.voice-player__toggle:hover {
  opacity: 0.92;
}
.voice-player__toggle:active {
  transform: scale(0.94);
}
.voice-player__toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.voice-player__toggle svg {
  width: 13px;
  height: 13px;
  display: block;
}
.voice-player__wave {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 34px;
  cursor: pointer;
  touch-action: none;
  border-radius: 4px;
}
.voice-player__wave:focus-visible {
  outline: 1.5px solid var(--color-accent);
  outline-offset: 4px;
}
.voice-player__bar {
  flex: 1 1 0;
  min-width: 1.5px;
  max-width: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-ink) 22%, transparent);
  pointer-events: none;
  transition:
    background-color 0.18s ease,
    height 0.25s var(--ease-out-soft);
}
.voice-player__bar.is-played {
  background: var(--color-primary);
}
.voice-player__time {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--color-soft-ink);
  /* mm:ss stabil — Pill zappelt beim Sekunden-Tick nicht */
  min-width: 4ch;
  text-align: right;
}
@media (prefers-reduced-motion: reduce) {
  .voice-player__toggle,
  .voice-player__bar {
    transition: none;
  }
}

.portal-section {
  padding: clamp(28px, 6vw, 44px) 0;
  border-top: 1px solid var(--color-line);
}
.portal-section__title {
  font-weight: 800;
  font-size: clamp(24px, 6vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 24px;
  color: var(--color-ink);
}
.portal-section__eyebrow--stacked {
  margin-top: 28px;
}

/* ──────────────────────────────────────────────────────────────────────
 * Landing-Page-Sektionen (P-W2-06d).
 * Goldstandard: ~/kopf-und-koerper-demo/public/landing.html
 * Strukturell identisch zum Mockup; Farben kommen aus tenant theme.css.
 * ────────────────────────────────────────────────────────────────────── */

/* Section-Rahmen + Eyebrow (Wiederverwendet auf allen Landing-Sektionen). */
body[data-page='landing'] section,
body[data-page='landing-preview'] section {
  padding: clamp(36px, 8vw, 56px) 0;
  border-top: 1px solid var(--color-line);
}
body[data-page='landing'] section.hero,
body[data-page='landing-preview'] section.hero {
  border-top: 0;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
  margin: 0 0 14px;
}

/* Landing-Page-Eyebrow + H2 — zentriert, mit etwas weniger margin. */
body[data-page='landing'] .eyebrow,
body[data-page='landing-preview'] .eyebrow {
  margin: 0 0 12px;
  text-align: center;
}
body[data-page='landing'] h2,
body[data-page='landing-preview'] h2 {
  font-weight: 800;
  font-size: clamp(26px, 6vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
  text-align: center;
}
body[data-page='landing'] h2 i,
body[data-page='landing-preview'] h2 i {
  font-style: italic;
  font-weight: 500;
  color: var(--color-accent);
}
.sec-sub {
  color: var(--color-soft-ink);
  font-size: 15px;
  text-align: center;
  max-width: 48ch;
  margin: 0 auto 28px;
  line-height: 1.55;
}

/* Hero-Note + Pillar-Band */
.hero-note {
  font-size: 12.5px;
  color: var(--color-soft-ink);
  margin-top: 16px;
  text-align: center;
}
.hero-note-link {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
}
.hero-note-link:hover {
  text-decoration: underline;
}
.pillars {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 38px;
}
.pillar {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink);
  font-weight: 700;
}
.pillar + .pillar::before {
  content: '·';
  color: var(--color-accent);
  margin-right: 8px;
}

/* ──────────────────────────────────────────────────────────────────────
 * Studio-Story-Sektion (White-Label-Lücke 2, 2026-06-11).
 * Vorlage: one10 referral.html „the studio / who we are" — Eyebrow in
 * Letterspaced-Caps, ruhige Display-Serif-Headline, Editorial-Absätze.
 * Filigran-Doktrin: Headline FW 600 (NICHT 800 wie die übrigen Landing-
 * H2s), Cap 36px, Body 15.5px/1.7 FW 400, Bild dezent (12px-Radius,
 * 1px-Hairline, kein Schatten). Gerendert auf Landing + /r/:code.
 * ────────────────────────────────────────────────────────────────────── */
[data-landing-story] .eyebrow {
  text-align: center;
  margin: 0 0 12px;
}
.story-headline,
body[data-page='landing'] .story-headline,
body[data-page='landing-preview'] .story-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 18px;
  text-align: center;
}
.story-image {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto 24px;
  border-radius: 12px;
  border: 1px solid var(--color-line);
}
.story-body {
  max-width: 52ch;
  margin: 0 auto;
  text-align: left;
}
.story-body .story-p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-soft-ink);
  font-weight: 400;
  margin: 0 0 16px;
}
.story-body .story-p:last-child {
  margin-bottom: 0;
}
/* Referral-Landing: Sektion sitzt außerhalb des Hero — ruhiger Abstand
   zwischen Buchungs-Schritt und Story (1px-Hairline wie one10-Sections). */
body[data-page='referral'] [data-landing-story],
body[data-page='referral-preview'] [data-landing-story] {
  padding: clamp(36px, 8vw, 56px) 0;
  border-top: 1px solid var(--color-line);
}

/* STEPS — 3 nummerierte Karten */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.step {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border, var(--color-line));
  border-radius: var(--r-lg);
  padding: 22px 20px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-ink) 6%, transparent);
}
.step .n {
  width: 34px;
  height: 34px;
  border-radius: 99px;
  background: var(--color-accent);
  color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 14px;
}
.step b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 4px;
}
.step span {
  font-size: 13.5px;
  color: var(--color-soft-ink);
  line-height: 1.5;
}

/* REWARD-LADDER (Tier-Karten) — ersetzt das alte rewards-list-Layout
   für die Landing-Page. site.js initLanding rendert weiterhin in
   [data-rewards-list], aber als .ladder mit .tier-Children. */
.ladder {
  display: grid;
  gap: 8px;
}
.tier {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border, var(--color-line));
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-ink) 6%, transparent);
  transition:
    transform 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}
.tier:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-line));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.tier .mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 99px;
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-line));
  /* Text-Token MUSS auf dem 86%-surface-Badge-Hintergrund kontrastieren — auf
     hellen (Default/one10) UND dunklen (Ahoi: --color-surface #1F1418) Paletten.
     --color-surface (PR #82) ergab dunkel-auf-dunkel bzw. hell-auf-hell
     (≈1.2:1, unleserlich); --color-accent verfehlte auf der Default-Palette die
     4.5:1-Schwelle (3.80:1). --color-ink ist der gegen Surface kontrastierende
     Text-Token und erreicht auf allen drei Paletten ≥12.9:1. Brand-generisch. */
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 15px;
}
.tier-body {
  display: block;
  min-width: 0;
}
.tier b {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
}
.tier span {
  font-size: 13px;
  color: var(--color-soft-ink);
}
/* White-Label-Lücke 4: Erlebnis-Prosa unter dem Tier-Titel (one10-Mockup:
   .tier span — 13.5px, ink-2, line-height 1.55). Block, damit die
   Threshold-Zeile darunter eigenständig bleibt. */
.tier .tier-desc {
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--color-soft-ink);
  line-height: 1.55;
  margin: 2px 0 3px;
}

/* STUDIO-SERVICES — Karten-Grid mit Dauer-Badge */
.courses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.stat-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border, var(--color-line));
  border-radius: var(--r);
  padding: 18px 14px;
  text-align: left;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-ink) 8%, transparent);
}
.stat-card__num {
  font-weight: 900;
  font-size: clamp(26px, 6.5vw, 32px);
  line-height: 1;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  transition:
    transform 0.25s ease,
    color 0.25s ease;
  transform-origin: left center;
}
.stat-card__num.is-pulse {
  transform: scale(1.18);
  color: var(--color-accent);
}
.stat-card__lbl {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-soft-ink);
  font-weight: 700;
  line-height: 1.3;
}

.portal-closing {
  text-align: center;
  padding: clamp(32px, 7vw, 48px) 0;
  border-top: 1px solid var(--color-line);
}
.portal-closing__quote {
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-ink);
  max-width: 36ch;
  margin: 0 auto 14px;
}
.portal-closing__signoff {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0;
}

/* Hero/Share Reveal-Stagger — respektiert prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(8px);
    animation: rise 0.55s var(--ease-out-soft) forwards;
  }
  .reveal.r1 {
    animation-delay: 0.05s;
  }
  .reveal.r2 {
    animation-delay: 0.13s;
  }
  .reveal.r3 {
    animation-delay: 0.22s;
  }
  .reveal.r4 {
    animation-delay: 0.3s;
  }
  /* R10 Landing-Fix (Befund 1, 2026-06-11): Safety-Net — site.js setzt
     `.is-visible` 900 ms nach DOMContentLoaded auf alle .reveal. Falls die
     CSS-Animation aus irgendeinem Grund nicht endet, zwingen wir den
     Final-State. !important schlägt animation-fill-mode: forwards nur,
     wenn die Animation gar nicht lief. Idempotent — kein Re-Trigger. */
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  @keyframes rise {
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* Pulse-on-Update — triggered von site.js pulseElement() via data-pulse-Attr. */
[data-pulse='1'] {
  animation: stat-pulse 0.48s var(--ease-out-soft);
}
@keyframes stat-pulse {
  0% {
    transform: scale(1);
    color: var(--color-ink);
  }
  40% {
    transform: scale(1.18);
    color: var(--color-accent);
  }
  100% {
    transform: scale(1);
    color: var(--color-ink);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-pulse='1'] {
    animation: none;
  }
}

/* Footer-Erweiterung — site.js fillFooter() füllt diese Slots. */
.footer {
  /* Mockup-Footer ist zentriert, mehrzeilig, mit Logo. Wir überschreiben das
     06a-Footer-Layout (flex-row) NICHT — sondern fügen ein Sub-Layout für die
     neue Logo-+-Meta-Spalte hinzu. Bestehende `<span data-footer-links>`-
     Slots rendern wie zuvor; site.js stockt mit `.footer-brand` + `.footer-meta`
     auf, wenn die Tenant-Config das hergibt. */
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.footer-logo {
  height: 56px;
  width: auto;
  display: block;
  mix-blend-mode: var(--logo-blend-mode, multiply);
}
.footer-logo[data-blend-mode='screen'] {
  mix-blend-mode: screen;
}
.footer-logo[data-blend-mode='normal'] {
  mix-blend-mode: normal;
}
.footer-wordmark {
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}
.footer-wordmark i {
  font-style: normal;
  color: var(--color-accent);
}
.footer-wordmark .sub {
  display: block;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--color-soft-ink);
  margin-top: -1px;
}
.footer-meta {
  font-size: 12.5px;
  color: var(--color-soft-ink);
  line-height: 1.7;
  margin: 4px 0 0;
}
.footer-meta a {
  color: var(--color-soft-ink);
  text-decoration: none;
}
.footer-meta a:hover {
  color: var(--color-ink);
}
.footer-links-row {
  margin-top: 8px;
}
.footer-admin {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.footer-admin a {
  color: var(--color-soft-ink-2);
  text-decoration: none;
}
.footer-admin a:hover {
  color: var(--color-ink);
}

/* Portal-Polish — Stat-Grid Mobile-Override (additiv). */
@media (max-width: 480px) {
  .stat-grid {
    gap: 6px;
  }
  .stat-card {
    padding: 14px 10px;
  }
}

/* Landing-Page-Course-Cards */
.course {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border, var(--color-line));
  border-radius: var(--r);
  padding: 16px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-ink) 6%, transparent);
}
.course b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
}
.course span {
  font-size: 12.5px;
  color: var(--color-soft-ink);
}
.course .dur {
  font-size: 11px;
  color: var(--color-surface);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 8px;
  display: block;
}

/* FAQ-Accordion */
.faq details {
  border-bottom: 1px solid var(--color-line);
  padding: 16px 0;
}
.faq details:first-child {
  border-top: 1px solid var(--color-line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-weight: 700;
  font-size: 15px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  color: var(--color-accent);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  color: var(--color-soft-ink);
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0 2px;
}

/* CLOSING */
.closing {
  text-align: center;
}
.closing h2 {
  margin-bottom: 18px;
}

/* LANDING-FOOTER (zentral, mit Logo/Tagline/Adresse) */
.footer.landing-footer {
  display: block;
  text-align: center;
  border-top: 1px solid var(--color-line);
  padding: 30px var(--pad) 40px;
  max-width: 920px;
  margin: 80px auto 0;
}
.foot-stack {
  display: block;
  text-align: center;
}
.foot-logo-link {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 6px;
}
.foot-logo {
  height: 64px;
  width: auto;
  display: inline-block;
  mix-blend-mode: multiply;
}
.foot-logo-text {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}
.foot-tag {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-soft-ink);
  font-weight: 600;
  margin: 5px 0 12px;
}
.foot-meta {
  font-size: 12.5px;
  color: var(--color-soft-ink);
  line-height: 1.7;
  margin: 0 0 12px;
}
.foot-meta a {
  color: var(--color-soft-ink);
  text-decoration: none;
}
.foot-meta a:hover {
  color: var(--color-ink);
}
.foot-admin {
  margin: 14px 0 8px;
  font-size: 11px;
}
.foot-admin a {
  color: var(--color-soft-ink);
  text-decoration: none;
}
.foot-admin a:hover {
  color: var(--color-ink);
}
.foot-legal {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-soft-ink);
}

/* Landing-Page reduced-motion fallback für .reveal (HEAD-Variante deckt
   prefers-reduced-motion bereits über das @media-Block oben ab; hier
   stellen wir sicher, dass non-keyframe-Fallback Werte gesetzt sind). */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Landing-Page Mobile-Stack: Steps + Courses untereinander, Pillars dichter. */
@media (max-width: 720px) {
  .steps,
  .courses {
    grid-template-columns: 1fr;
  }
  .pillars {
    gap: 14px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
 * Studio-Inhaber-Login (data-page="admin-login")
 *
 * Bewusst dezenter als die Member-/login-Page:
 *   • Kicker „Studio-Bereich" als sachlicher Anker statt warmem Hero
 *   • H1 kleiner als das Member-Hero (clamp 28-44 statt 40-72)
 *   • Submit-Button auf --color-ink (schwarz/dunkel-warm) statt
 *     --color-accent — signalisiert „professioneller Bereich"
 *   • Member-Link in der Sub-Lead deutlich unterstrichen, akzentfarbig
 * Mockup-Bezug: K&K-Mockup hat keine eigene Admin-Login-Variante; wir
 * orientieren uns am Reduktions-Pattern der Reset-Page.
 * ───────────────────────────────────────────────────────────────────── */
body[data-page='admin-login'] .hero {
  padding: clamp(28px, 6vw, 48px) 0 clamp(20px, 4vw, 32px);
}
body[data-page='admin-login'] .kicker {
  color: var(--color-ink);
  margin-bottom: 14px;
}
body[data-page='admin-login'] h1 {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
body[data-page='admin-login'] h1 em {
  color: var(--color-ink);
}
body[data-page='admin-login'] .lead {
  margin-bottom: 22px;
  font-size: 15px;
}
body[data-page='admin-login'] [data-admin-login-member-link] {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
body[data-page='admin-login'] .card {
  /* Karte etwas zurückhaltender — passt zum sachlichen Studio-Bereich. */
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
body[data-page='admin-login'] .btn {
  background: var(--color-ink);
  color: var(--color-surface);
}
body[data-page='admin-login'] .btn:hover {
  background: #000;
}

/* ──────────────────────────────────────────────────────────────────────
   Welle-2.5/3 (2026-06-10) — Lead-Conversion-Step Landing-Section.
   Wird per JS in site.js renderConversionStep() befüllt nach Form-Submit.
   5 Varianten teilen sich die Outer-Section + Card-Pattern.
   ──────────────────────────────────────────────────────────────────── */
.referral-conversion {
  margin-top: 24px;
}
.referral-conversion[hidden] {
  display: none;
}
.referral-conversion__success {
  font-size: 14px;
  opacity: 0.7;
  margin-bottom: 12px;
  text-align: center;
}
.referral-conversion__card {
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
  border-radius: 12px;
  padding: 20px;
  margin-top: 8px;
}
.referral-conversion__heading {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0 0 8px 0;
  color: var(--color-ink);
}
.referral-conversion__body {
  font-size: 14px;
  color: var(--color-ink);
  margin: 0 0 16px 0;
  opacity: 0.8;
}
.referral-conversion__price {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--color-accent);
  margin: 8px 0 16px 0;
}
.referral-conversion__cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 20px;
  border-radius: 8px;
  background: var(--color-primary);
  color: var(--color-surface);
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.referral-conversion__cta:hover {
  filter: brightness(1.06);
}
.referral-conversion__cta--secondary {
  margin-top: 10px;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent);
}
.referral-conversion__cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.referral-conversion__hint {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 10px;
  text-align: center;
}

/* Slot-Picker (Variante 3) — Wochen-Header + Slot-Grid */
.referral-conversion__weeks {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.referral-conversion__week {
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent);
  padding-top: 12px;
}
.referral-conversion__week-heading {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin: 0 0 8px 0;
}
.referral-conversion__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.referral-conversion__slot {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--color-ink) 15%, transparent);
  border-radius: 6px;
  background: transparent;
  color: var(--color-ink);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.referral-conversion__slot:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.referral-conversion__slot--selected {
  background: var(--color-primary);
  color: var(--color-surface);
}
.referral-conversion__slot-empty {
  font-size: 12px;
  opacity: 0.5;
  font-style: italic;
}

/* External-Embed (Variante 4) — Iframe-Container */
.referral-conversion__embed-wrap {
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
}
.referral-conversion__embed {
  width: 100%;
  border: 0;
  display: block;
}

/* R13 (2026-06-11) — Monatsreport-Download-Link in Reports-Tabelle.
   Filigran-Doktrin: link-Style mit hairline-Border, NICHT fett. Sitzt in
   site.css (cross-cutting) damit R10 (admin.css-Cockpit-Layout) keinen
   Merge-Konflikt produziert. */
.report-download-link {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
  color: var(--color-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}
.report-download-link:hover {
  background: color-mix(in srgb, var(--color-ink) 4%, transparent);
}
.report-download-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-ink) 32%, transparent);
  outline-offset: 2px;
}

/* ───────────────────── R14 PREVIEW-MODE (2026-06-11) ─────────────────────
   Wenn die Seite im Live-Vorschau-Drawer geöffnet wird (?previewMode=true
   ODER data-preview-mode="true" am body), unterdrücken wir:
   - Reveal-Stagger-Animation (Inhalte sofort sichtbar — kein „blinkt rein")
   - Cookie-Banner (Studio-Inhaber sieht sein Studio, nicht den Consent-Wall)
   - Toast-Stack (keine API-Error-Pops im Vorschau-iframe)
   site.js setzt zusätzlich `.is-visible` auf alle `.reveal`-Elemente — der
   `!important` hier ist Defense-in-Depth, falls JS aussetzt. */
.preview-mode-active .reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.preview-mode-active .cookie-banner,
.preview-mode-active .toast-stack {
  display: none !important;
}

/* Admin-Portal-Vorschau (read-only): Banner + ausgeblendete Aktionen. */
.portal-preview-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-ink, #1a1714);
  color: var(--color-surface, #fbf7ee);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 7px 12px;
}
.admin-portal-preview [data-portal-logout-pill],
.admin-portal-preview [data-portal-dsgvo-link] {
  display: none !important;
}