/* =========================================================
   Lauf-Check — ausdauerclub Design System
   Brand-Tokens 1:1 aus assets/brand.css (Single Source of Truth: dort).
   Tool-spezifische Komponenten danach.
   ========================================================= */

:root {
  /* BRAND PALETTE */
  --ac-weinrot:   #800032;
  --ac-creme:     #faf3ed;
  --ac-orange:    #f26919;
  --ac-anthrazit: #444444;
  --ac-magenta:   #bc3874;
  --ac-petrol:    #68a2b9;

  --ac-black:    #1a1a1a;
  --ac-graphite: #6b6b6b;
  --ac-stone:    #a9a9a9;
  --ac-mist:     #d8d2cc;
  --ac-paper:    #fdfaf6;
  --ac-white:    #ffffff;

  /* Semantic */
  --bg:           var(--ac-creme);
  --bg-alt:       var(--ac-paper);
  --surface:      var(--ac-white);
  --surface-sunk: #f3ece4;

  --fg:          var(--ac-anthrazit);
  --fg-strong:   var(--ac-black);
  --fg-muted:    var(--ac-graphite);
  --fg-on-brand: var(--ac-creme);

  --brand:       var(--ac-weinrot);
  --brand-hover: #66002a;
  --brand-press: #4d001f;
  --brand-soft:  #f3dde3;

  --accent-warm:    var(--ac-orange);
  --accent-magenta: var(--ac-magenta);
  --accent-cool:    var(--ac-petrol);

  --border:        #e6ded5;
  --border-strong: #c9bfb3;
  --focus-ring:    color-mix(in oklab, var(--ac-weinrot) 60%, transparent);

  --success: #2f8f5c;
  --danger:  #b23a3a;

  /* TYPOGRAPHY */
  --font-display: "Lilita One", "Impact", "Arial Black", sans-serif;
  --font-accent:  "Special Elite", "Courier New", monospace;
  --font-body:    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --fs-display: 72px;
  --fs-h1:      56px;
  --fs-h2:      40px;
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-lg:      21px;
  --fs-base:    18px;
  --fs-sm:      16px;
  --fs-xs:      13px;
  --fs-eyebrow: 14px;

  --lh-tight: 1.02;
  --lh-snug:  1.15;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  --tracking-tight:   -0.01em;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.14em;

  /* SPACING (8pt-ish) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* RADII */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* ELEVATION — wine-tinted */
  --shadow-xs: 0 1px 2px rgba(68, 0, 27, 0.06);
  --shadow-sm: 0 2px 6px rgba(68, 0, 27, 0.08);
  --shadow-md: 0 8px 20px rgba(68, 0, 27, 0.10);
  --shadow-lg: 0 18px 44px rgba(68, 0, 27, 0.14);

  /* MOTION */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* =========================================================
   BASE
   ========================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

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

a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-hover); }

h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 7vw, var(--fs-h1));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--brand);
  margin: 0 0 var(--sp-5);
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5.2vw, var(--fs-h2));
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  margin: 0 0 var(--sp-4);
}

h3 {
  font-family: var(--font-accent);
  font-size: clamp(20px, 3.8vw, var(--fs-h3));
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-3);
}

h4 {
  font-family: var(--font-accent);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-3);
}

p {
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.ac-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}

.lead {
  font-size: var(--fs-lg);
  color: var(--fg-muted);
  margin-bottom: var(--sp-6);
}

/* =========================================================
   LAYOUT
   ========================================================= */

.container {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-9);
}

@media (min-width: 720px) {
  .container { padding: var(--sp-8) var(--sp-6) var(--sp-9); }
}

/* Screens (HERO/INTRO/TEST/RESULT) */
[data-screen] {
  animation: fade-in var(--dur-base) var(--ease-out);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.btn--primary {
  background: var(--brand);
  color: var(--ac-creme);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--brand-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  color: var(--ac-creme);
}
.btn--primary:active {
  background: var(--brand-press);
  transform: scale(0.98);
}
.btn--primary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.btn--ghost {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.btn--ghost:hover {
  background: var(--surface-sunk);
  color: var(--brand);
  border-color: var(--border-strong);
}

.btn--block { display: flex; width: 100%; }

/* =========================================================
   HERO
   ========================================================= */

.hero { padding-top: var(--sp-3); }

.hero__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--sp-6);
}

.hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
}

.hero__eyebrow::before {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  background: var(--accent-warm);
  border-radius: 2px;
  margin-bottom: var(--sp-3);
}

/* LP-001: Auf kurzen Bildschirmen (kleine Handys, sichtbare Browserleisten)
   rutschte der Start-Button unter die Kante. Die Hero wird dort kompakter
   gesetzt, damit Zielgruppe, Nutzen und CTA ohne Scrollen sichtbar bleiben.
   Texte und Reihenfolge bleiben unverändert. */
@media (max-height: 740px) {
  .container { padding-top: var(--sp-4); }
  .hero { padding-top: 0; }
  .hero__image { margin-bottom: var(--sp-4); }
  .hero__eyebrow { margin-bottom: var(--sp-3); }
  .hero__eyebrow::before { margin-bottom: var(--sp-2); }
  .hero h1 {
    font-size: clamp(27px, 5.4vw, 38px);
    margin-bottom: var(--sp-2);
  }
  .hero__intro { margin-bottom: var(--sp-4); }
  .hero__cta { margin-top: 0; }
}

.hero h1 {
  font-size: clamp(32px, 6vw, 46px);
  text-wrap: balance;
  margin-bottom: var(--sp-3);
}

.hero__subhead {
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 26px);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  margin: 0 0 var(--sp-5);
}

.hero__intro {
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0 0 var(--sp-6);
  text-wrap: pretty;
}

/* "Das bekommst du am Ende" — Payoff-Box */
.payoff {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
}

.payoff__title {
  font-family: var(--font-accent);
  font-size: var(--fs-h4);
  color: var(--brand);
  margin: 0 0 var(--sp-4);
}

.payoff__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
}

.payoff__list li {
  position: relative;
  padding-left: var(--sp-7);
  margin-bottom: var(--sp-3);
}

.payoff__list li:last-child { margin-bottom: 0; }

.payoff__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--success);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
}

.payoff__note {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0;
}

.hero__cta { margin: var(--sp-6) 0 var(--sp-7); }

/* =========================================================
   AUDIENCE BOX
   ========================================================= */

.audience-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}

.audience-box h3 {
  margin-top: 0;
  color: var(--brand);
}

.audience-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.audience-box li {
  position: relative;
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-3);
}

.audience-box li:last-child { margin-bottom: 0; }

.audience-box li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-warm);
  font-weight: 700;
  font-family: var(--font-accent);
}

/* =========================================================
   INTRO
   ========================================================= */

.intro__box {
  background: var(--surface);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  box-shadow: var(--shadow-sm);
}

.intro__box p:last-child { margin-bottom: 0; }

.intro__highlight {
  font-family: var(--font-accent);
  font-size: var(--fs-lg);
  color: var(--brand);
  letter-spacing: var(--tracking-wide);
}

/* =========================================================
   TEST — Progress + Frage + Antworten
   ========================================================= */

.progress {
  margin-bottom: var(--sp-7);
}

.progress__text {
  font-family: var(--font-accent);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--sp-2);
}

.progress__bar {
  position: relative;
  height: 6px;
  width: 100%;
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress__bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: 0%;
  background: var(--brand);
  transition: width var(--dur-slow) var(--ease-out);
}

.question-text {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 36px);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  margin: 0 0 var(--sp-6);
  text-wrap: balance;
}

.answer-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.answer-btn {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  background: var(--surface);
  color: var(--fg-strong);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.45;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  /* iOS: keinen klebenden grauen Tap-Blitz */
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

/* Hover nur auf echten Zeigegeräten — verhindert den klebenden :hover-Zustand
   auf Touch (iOS), der den Button an der vorigen Tap-Position hervorhebt. */
@media (hover: hover) {
  .answer-btn:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: var(--shadow-sm);
  }
}

.answer-btn:active {
  transform: scale(0.99);
}

.answer-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

#question-container {
  transition: opacity var(--dur-base) var(--ease-out);
}

#question-container.is-fading {
  opacity: 0;
}

/* Test-Navigation: „← Letzte Frage" plus dezenter Ausstieg zur Startseite */
.test__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}

.test__exit {
  margin-left: auto;
  background: none;
  border: 0;
  padding: var(--sp-2);
  font-family: var(--font-accent);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.test__exit:hover { color: var(--brand); }

.test__exit:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* =========================================================
   RESULT
   ========================================================= */

.result__eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

.result__eyebrow::before {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  background: var(--accent-warm);
  border-radius: 2px;
  margin-bottom: var(--sp-3);
}

#result-typ-headline {
  font-size: clamp(30px, 5.5vw, 44px);
  text-wrap: balance;
  margin-bottom: var(--sp-4);
}

/* Ein-Satz-Einordnung — prägnanter Spiegel direkt unter der Typ-Headline */
.result__einordnung {
  font-family: var(--font-accent);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  margin: 0 0 var(--sp-6);
  text-wrap: pretty;
}

/* Scores */
.scores {
  margin: var(--sp-7) 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}

.score-row { margin-bottom: var(--sp-5); }
.score-row:last-child { margin-bottom: 0; }

.score-row__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-2);
}

.score-row__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-accent);
  font-size: var(--fs-base);
  color: var(--fg-strong);
  letter-spacing: var(--tracking-wide);
}

.score-row__icon {
  display: inline-block;
  font-size: 1.2em;
}

.score-row__value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.score-bar {
  position: relative;
  height: 14px;
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(68, 0, 27, 0.08);
}

.score-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent-warm) 100%);
  border-radius: var(--radius-pill);
  transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Spiegel-Absatz — benennt den Schmerz, ohne Lösung */
.result__spiegel {
  margin: var(--sp-6) 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
}

.result__spiegel p:last-child { margin-bottom: 0; }

/* =========================================================
   SIGNUP-BOX — zentraler Eintrags-Bereich, stark hervorgehoben.
   Enthält Quick-Win-Teaser + CTA-Überschrift + Formular (sofort sichtbar).
   ========================================================= */
.signup {
  margin: var(--sp-7) 0;
  padding: var(--sp-7) var(--sp-6);
  background: var(--surface);
  border: 2px solid var(--brand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Eyecatcher oben — jetzt im großen Display-Format (führt die Box an) */
.signup__hook {
  font-family: var(--font-display);
  font-size: clamp(24px, 4.6vw, 33px);
  line-height: var(--lh-snug);
  color: var(--brand);
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
}

.signup__teaser p { margin: 0 0 var(--sp-3); }
.signup__teaser p:last-child { margin-bottom: 0; }

/* letzter Teaser-Absatz ("…schicke ich dir per Mail. Trag dich ein…") betont */
.teaser__call {
  font-weight: 700;
  color: var(--brand);
}

/* CTA über dem Formular — jetzt Schreibmaschinen-Format, mit Akzentstrich
   als deutlicher Handlungs-Marker direkt über dem Eingabefeld. */
.signup__cta {
  font-family: var(--font-accent);
  font-size: clamp(21px, 4.2vw, 28px);
  line-height: var(--lh-snug);
  color: var(--brand);
  margin: var(--sp-6) 0 var(--sp-4);
}

.signup__cta::before {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  background: var(--accent-warm);
  border-radius: 2px;
  margin-bottom: var(--sp-3);
}

.form-section { margin: 0; }

/* Demo-Formular (Platzhalter bis zum echten Klicktipp-Embed) */
.kt-demo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.kt-demo input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-strong);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
}

.kt-demo input:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--brand);
}

.kt-demo button {
  min-height: 52px;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  color: var(--ac-creme);
  background: var(--brand);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.kt-demo button:hover { background: var(--brand-hover); transform: translateY(-1px); }
.kt-demo button:active { background: var(--brand-press); transform: scale(0.99); }

.kt-demo__hint {
  font-family: var(--font-accent);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin: var(--sp-3) 0 0;
}

/* Eingefügtes Klicktipp-Embed ans Brand-Design angleichen (Scope: #form-mount) */
#form-mount .ktv2-form-element { margin-bottom: var(--sp-3); }

#form-mount .ktv2-form-element label {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--fg-strong);
  margin-bottom: var(--sp-1);
}

#form-mount input[type="text"],
#form-mount input[type="email"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-strong);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
}

#form-mount input[type="text"]:focus,
#form-mount input[type="email"]:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--brand);
}

/* DSGVO-Einwilligung (Checkbox + Hinweistext) */
#form-mount .ktv2-form-dsgvocheckbox {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  margin: var(--sp-4) 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
#form-mount .ktv2-form-dsgvocheckbox input { margin-top: 4px; flex-shrink: 0; }

#form-mount input[type="submit"],
#form-mount button[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 52px;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  color: var(--ac-creme);
  background: var(--brand);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
#form-mount input[type="submit"]:hover,
#form-mount button[type="submit"]:hover { background: var(--brand-hover); transform: translateY(-1px); }

#form-mount input[type="submit"]:focus-visible,
#form-mount button[type="submit"]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

#form-mount input[type="submit"]:active,
#form-mount button[type="submit"]:active {
  background: var(--brand-press);
  transform: scale(0.99);
}

/* CONV-001: Der Button ist nie grau/deaktiviert. Fehlt die Einwilligung,
   wird die Checkbox hervorgehoben und ein sichtbarer Hinweis eingeblendet. */
#form-mount .ktv2-form-dsgvocheckbox {
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--sp-2);
  margin-left: calc(var(--sp-2) * -1);
  margin-right: calc(var(--sp-2) * -1);
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}

#form-mount .ktv2-form-dsgvocheckbox.is-missing {
  border-color: var(--danger);
  background: #fdf1f1;
  animation: consent-pulse 900ms var(--ease-out) 2;
}

@keyframes consent-pulse {
  0%, 100% { border-color: var(--danger); }
  50%      { border-color: transparent; }
}

#form-mount .ktv2-form-dsgvocheckbox.is-missing input[type="checkbox"] {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

.consent-hint {
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--danger);
}

.consent-hint::before {
  content: '↑';
  font-weight: 700;
}

.privacy-note {
  font-family: var(--font-accent);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  text-align: center;
  margin: var(--sp-4) 0 0;
}

/* Impressum-Footer — klein, dezent, deutlich vom Inhalt abgesetzt */
.site-footer {
  margin-top: 72px;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  text-align: center;
  font-family: var(--font-accent);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}

@media (min-width: 640px) {
  .site-footer { margin-top: 96px; }
}

.site-footer a {
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer a:hover { color: var(--brand); }

/* Neustart-Link am Ende der Ergebnis-Seite — dezent, aber sichtbar */
/* CONV-003: Der Neustart bleibt erreichbar, tritt aber klar hinter die
   Eintragung zurück — kleiner, kontrastärmer, weiter unten, ohne Unterstreichung. */
.restart {
  text-align: center;
  margin-top: var(--sp-8);
}

.restart__link {
  background: none;
  border: 0;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-accent);
  font-size: var(--fs-xs);
  /* Bewusst gedämpft, aber weiterhin WCAG-AA-konform (≥ 4,5:1).
     Die Unterordnung entsteht über Größe, Position und fehlende Unterstreichung. */
  color: var(--fg-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.restart__link:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.restart__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Trust block */
.trust {
  margin-top: var(--sp-8);
  padding: var(--sp-7);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.trust__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

@media (min-width: 560px) {
  .trust__head {
    flex-direction: row;
    align-items: center;
  }
}

.trust__foto {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-sm);
}

.trust h3 {
  color: var(--brand);
  margin: 0;
}

.trust p:last-of-type { margin-bottom: 0; }

.trust__small {
  display: block;
  font-family: var(--font-accent);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin-top: var(--sp-4);
  text-align: center;
}

/* =========================================================
   DANKE-SEITE
   ========================================================= */

.danke h1 { color: var(--brand); }

.danke hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-6) 0;
}

.danke ul {
  list-style: none;
  padding: 0;
}

.danke li {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.danke li:last-child { border-bottom: none; }

.danke li strong {
  font-family: var(--font-accent);
  color: var(--brand);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  display: inline-block;
  margin-right: var(--sp-2);
}

.danke__signature {
  margin-top: var(--sp-6);
  font-family: var(--font-accent);
  color: var(--fg-muted);
}

/* =========================================================
   FALLBACKS
   ========================================================= */

.no-js-notice {
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-6);
  color: var(--brand-press);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}