/* ============================================================
   G&M Finance Funnel V2 — Brand Stylesheet
   Editorial + soft · Brand-Ink + Terracotta + Newsreader/Inter
   ============================================================ */

@import url('./v2-fonts.css');

:root {
  /* Color tokens — Brand-Guide §2 */
  --bg: #FAFAF7;
  --bg-alt: #F4EFE8;
  --bg-card: #FFFFFF;
  --ink: #1C1D33;
  --ink-soft: #2C2D43;
  --muted: #475569;
  --muted-soft: #94A3B8;
  --line: rgba(28, 29, 51, 0.08);
  --line-strong: rgba(28, 29, 51, 0.16);
  --line-stone: #E5E0D8;

  --accent: #C2562B;
  --accent-hover: #A2451F;
  --accent-soft: #F1E0D5;
  --accent-tint: #FBF4EF;

  --success: #1F4E3D;
  --warn: #B45309;
  --error: #B23A48;

  /* Spacing — 8px base */
  --s-2xs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-2xl: 48px;
  --s-3xl: 64px;
  --s-4xl: 96px;
  --s-5xl: 128px;

  /* Container */
  --container: 1120px;

  /* Radii — V2 hybrid: editorial backbone, sanft weicher */
  --radius-sm: 8px;     /* buttons, inputs, tags */
  --radius-md: 12px;    /* standard cards */
  --r-lg: 16px;         /* feature cards, video frame, photo frames */
  --r-pill: 999px;      /* eyebrow chips, status pills */

  /* Shadows — whisper-soft, warm-tinted, NUR auf interaktiven/elevated Cards */
  --shadow-xs: 0 1px 2px rgba(28,29,51,.04);
  --shadow-sm: 0 2px 8px rgba(28,29,51,.05), 0 1px 2px rgba(28,29,51,.04);
  --shadow-md: 0 8px 24px rgba(28,29,51,.07), 0 2px 6px rgba(28,29,51,.04);
  --shadow-lg: 0 16px 48px rgba(28,29,51,.10), 0 4px 12px rgba(28,29,51,.05);

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--accent); color: white; }

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
em { font-style: italic; }
h1 { font-size: clamp(36px, 5vw, 64px); }
h2 { font-size: clamp(28px, 4vw, 48px); }
h3 { font-size: clamp(20px, 2.5vw, 28px); }
h4 { font-size: clamp(18px, 2vw, 22px); }

p { color: var(--muted); }
strong { color: var(--ink); font-weight: 600; }
em { font-style: italic; }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: var(--s-md);
}

.lead { font-size: 20px; line-height: 1.55; max-width: 60ch; }

/* Containers */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-lg); }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--s-lg); }

/* Section base */
section { padding: var(--s-3xl) 0; }
@media (min-width: 768px) { section { padding: var(--s-4xl) 0; } }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  padding: 14px 28px;
  font-weight: 500;
  font-size: 15px;
  border-radius: var(--radius-sm);
  transition: all 200ms var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: white;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: white; }

.btn-large { padding: 18px 36px; font-size: 16px; }

/* Form inputs */
.form-field { margin-bottom: var(--s-lg); }
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--s-xs);
}
.form-input,
.form-select {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px; /* prevent iOS zoom */
  background: white;
  border: 1px solid var(--line-stone);
  border-radius: var(--radius-sm);
  transition: border-color 200ms var(--ease-out);
  min-height: 48px;
}
.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.form-help {
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--s-2xs);
}
.form-error { color: var(--error); font-size: 13px; margin-top: var(--s-2xs); }

/* Card */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line-stone);
  border-radius: var(--radius-sm);
  padding: var(--s-xl);
  transition: border-color 200ms var(--ease-out);
}
.card:hover { border-color: var(--muted-soft); }

/* Visibility */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
  padding: var(--s-md) var(--s-lg);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand img { height: 32px; width: auto; }
.brand-vertical {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border-left: 1px solid var(--line-stone);
  padding-left: 10px;
}
@media (max-width: 900px) {
  .brand .brand-vertical { display: none; }
}
.nav-links {
  display: none;
  gap: var(--s-lg);
  align-items: center;
  font-size: 15px;
}
.nav-links a { color: var(--ink); transition: color 200ms; }
.nav-links a:hover { color: var(--accent); }
.nav-cta { font-size: 14px; padding: 10px 20px; }
.nav-cta .short, .nav-cta .long { display: inline; }

@media (min-width: 768px) { .nav-links { display: flex; } }
@media (max-width: 767px) {
  .nav-cta { padding: 9px 14px; font-size: 13px; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { padding: var(--s-3xl) 0 var(--s-4xl); }
.hero-inner { max-width: 880px; }
.hero-headline {
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.02;
  font-weight: 600;
  margin-bottom: var(--s-lg);
}
.hero-headline em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.hero-lead { margin-bottom: var(--s-xl); max-width: 60ch; }
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
  margin-bottom: var(--s-xl);
}
.hero-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  color: var(--muted);
  font-size: 14px;
}
.hero-meta svg { color: var(--success); }
@media (min-width: 768px) { .hero { padding: var(--s-5xl) 0; } }

/* ============================================================
   Trust Strip
   ============================================================ */
.trust-strip { padding: var(--s-xl) 0 var(--s-2xl); }
@media (min-width: 768px) { .trust-strip { padding: var(--s-2xl) 0 var(--s-3xl); } }

.trust-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-xs);
  margin-bottom: var(--s-2xl);
  padding-bottom: var(--s-xl);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) {
  .trust-stats { gap: 0; margin-bottom: var(--s-3xl); padding-bottom: var(--s-2xl); }
}
.trust-stat { text-align: center; }
.trust-num {
  font-family: var(--font-display);
  font-size: clamp(34px, 9.4vw, 56px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.045em;
  white-space: nowrap;
}
@media (min-width: 768px) { .trust-num { font-size: clamp(40px, 5vw, 64px); } }
.trust-num span {
  font-size: 0.5em;
  vertical-align: top;
  color: var(--accent);
  margin-left: 4px;
}
.trust-stat p {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  margin-top: var(--s-xs);
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) { .trust-stat p { font-size: 14px; } }
.trust-eyebrow {
  text-align: center;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: var(--s-lg);
}
.logo-strip {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, white 8%, white 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, white 8%, white 92%, transparent);
}
.logo-track {
  display: flex;
  gap: var(--s-2xl);
  align-items: center;
  width: fit-content;
  animation: marquee 32s linear infinite;
  -webkit-animation: marquee 32s linear infinite;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.logo-track > img { flex: 0 0 auto; }
@keyframes marquee {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@-webkit-keyframes marquee {
  0%   { -webkit-transform: translate3d(0, 0, 0); }
  100% { -webkit-transform: translate3d(-50%, 0, 0); }
}
.logo-track img {
  height: 28px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1) brightness(0) invert(0.35);
  transition: opacity 240ms var(--ease-out), filter 240ms var(--ease-out);
}
.logo-track img:hover { opacity: 0.85; filter: grayscale(1) brightness(0) invert(0.18); }
.trust-disclosure {
  text-align: center;
  font-size: 12px;
  color: var(--muted-soft);
  margin-top: var(--s-lg);
  font-style: italic;
}
/* Logo ticker animates always — slow 45s drift is gentle enough to keep
   even with prefers-reduced-motion (avoids the "all logos crammed at once"
   fallback the user reported on iOS). */

/* ============================================================
   Section heads
   ============================================================ */
.section-head { max-width: 860px; margin-bottom: var(--s-3xl); }
.section-head h2 { margin-bottom: var(--s-md); }

/* ============================================================
   Pain grid
   ============================================================ */
.pain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
}
@media (min-width: 640px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pain-grid { grid-template-columns: repeat(3, 1fr); } }
.pain-grid .card h3 { margin-bottom: var(--s-sm); font-size: 20px; }
.pain-grid .card p { font-size: 15px; line-height: 1.6; }

/* ============================================================
   3-Wege grid
   ============================================================ */
.wege { background: var(--bg-alt); }
.wege-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-lg);
}
@media (min-width: 768px) { .wege-grid { grid-template-columns: repeat(3, 1fr); } }
.wege-card {
  background: var(--bg-card);
  border: 1px solid var(--line-stone);
  padding: var(--s-xl);
  display: flex;
  flex-direction: column;
  transition: border-color 200ms var(--ease-out);
}
.wege-card:hover { border-color: var(--accent); }
.wege-card-featured { border-color: var(--accent); border-width: 2px; }
.wege-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--s-sm);
}
.wege-card h3 { font-size: 22px; margin-bottom: var(--s-xs); }
.wege-sub { font-size: 14px; color: var(--muted); margin-bottom: var(--s-lg); font-style: italic; }
.wege-list { list-style: none; padding: 0; margin: 0; }
.wege-list li {
  display: flex;
  gap: var(--s-xs);
  padding: var(--s-xs) 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
}
.wege-list li:first-child { border-top: none; }
.wege-list li::before {
  content: '✓';
  color: var(--success);
  font-weight: 600;
  flex: 0 0 16px;
}

/* ============================================================
   Process
   ============================================================ */
.prozess-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-lg);
}
@media (min-width: 768px) { .prozess-grid { grid-template-columns: repeat(3, 1fr); } }
.prozess-step { padding: var(--s-md) 0; border-top: 1px solid var(--accent); }
.prozess-num {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-hover);
  margin-bottom: var(--s-sm);
}
.prozess-step h3 { font-size: 22px; margin-bottom: var(--s-sm); }

/* ============================================================
   Tracks
   ============================================================ */
.tracks { background: var(--bg-alt); }
.tracks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
}
@media (min-width: 768px) { .tracks-grid { grid-template-columns: repeat(2, 1fr); } }
.tracks-grid .card h3 { font-size: 20px; margin-bottom: var(--s-sm); }
.track-where {
  font-size: 13px;
  color: var(--accent);
  margin-top: var(--s-md);
  font-weight: 500;
}
.track-soon { font-size: 0.7em; color: var(--muted); font-weight: 400; }

/* ============================================================
   Eligibility
   ============================================================ */
.eligibility-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-lg);
}
@media (min-width: 768px) { .eligibility-grid { grid-template-columns: repeat(2, 1fr); } }
.eligibility-tag {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin-bottom: var(--s-sm);
  color: var(--muted);
}
.eligibility-tag.accent { color: var(--accent); }
.eligibility-list { list-style: none; padding: 0; margin: var(--s-md) 0 0; }
.eligibility-list li {
  display: flex;
  gap: var(--s-sm);
  padding: var(--s-sm) 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.eligibility-list li:first-child { border-top: none; }
.eligibility-list li::before {
  content: '✓';
  color: var(--success);
  font-weight: 700;
  flex: 0 0 16px;
}
.eligibility-list-no li::before { content: '×'; color: var(--muted); }

/* ============================================================
   About
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2xl);
  align-items: center;
}
@media (min-width: 768px) {
  .about-grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--s-3xl);
  }
}
.about-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-sm);
}
.about-content h2 { margin-bottom: var(--s-md); }
.about-content p { margin-bottom: var(--s-md); }
.about-content .lead { font-size: 18px; }
.about-meta {
  margin-top: var(--s-xl);
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.about-meta .dot { margin: 0 var(--s-xs); color: var(--muted-soft); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-top: 1px solid var(--line);
  padding: var(--s-lg) 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-md);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 24px;
  font-weight: 300;
  color: var(--accent);
  transition: transform 200ms;
  flex: 0 0 auto;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin-top: var(--s-md);
  font-size: 15px;
  line-height: 1.7;
  max-width: 60ch;
}

/* ============================================================
   Final CTA
   ============================================================ */
.final-cta {
  background: var(--ink);
  color: white;
}
.final-cta h2, .final-cta p { color: white; }
.final-cta .lead { color: rgba(255,255,255,0.85); }
.final-cta .eyebrow { color: var(--accent-soft); }
.final-secondary {
  margin-top: var(--s-xl);
  font-size: 14px;
  color: rgba(255,255,255,0.65);
}
.final-secondary a { color: white; text-decoration: underline; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  padding: var(--s-2xl) 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-lg);
}
.footer-brand img { height: 28px; width: auto; }
.footer-tagline { font-size: 13px; color: var(--muted); margin-top: var(--s-xs); }
.footer-links { display: flex; gap: var(--s-lg); font-size: 14px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--ink); }

/* ============================================================
   Quiz — Editorial Form (sticky masthead + integrated progress-rail)
   Mobile-first tight spacing; question above the fold on iPhone-class
   ============================================================ */
.quiz-body {
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;       /* iOS: avoids viewport jump when address-bar collapses */
  display: flex;
  flex-direction: column;
}

.quiz-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 247, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.quiz-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding: 10px var(--s-lg);
  min-height: 50px;
}
.brand-small { display: inline-flex; align-items: center; gap: var(--s-sm); flex: 0 0 auto; min-width: 0; }
.brand-small img { height: 22px; width: auto; }
.brand-small .brand-vertical { display: none; }
@media (min-width: 540px) { .brand-small .brand-vertical { display: inline-block; } }
@media (min-width: 768px) {
  .quiz-header-inner { padding: var(--s-sm) var(--s-lg); min-height: 60px; }
  .brand-small img { height: 24px; }
}

/* Masthead-line (Nº 01 — Region / 06) — mirrors LP visual language */
.quiz-mast {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  font-feature-settings: 'tnum' 1;
  min-width: 0;
}
.quiz-mast .mast-num {
  color: var(--accent);
  font-weight: 600;
  flex: 0 0 auto;
}
.quiz-mast .mast-rule {
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--line-strong);
  flex: 0 0 auto;
}
.quiz-mast .mast-meta {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@media (max-width: 380px) {
  .quiz-mast { font-size: 10px; gap: 6px; }
  .quiz-mast .mast-rule { width: 10px; }
}

/* Progress-rail: 2px line at bottom of header, fills with terracotta */
.quiz-progress-rail {
  position: relative;
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.quiz-progress-bar {
  height: 100%;
  background: var(--accent);
  transition: width 480ms var(--ease-out);
  box-shadow: 0 0 8px rgba(194, 86, 43, 0.35);
}
.quiz-header.is-soft-exit { border-bottom-color: var(--line); }

/* Main: comfortable breathing room between progress-rail and question */
.quiz-main {
  flex: 1;
  padding: var(--s-xl) 0 var(--s-3xl);
}
@media (min-width: 768px) {
  .quiz-main { padding: var(--s-2xl) 0 var(--s-4xl); }
}

.quiz-stage {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--s-lg);
}

/* Step section: subtle X-slide from direction (fwd = from right, back = from left)
   AT THE SAME TIME children stagger-fade up from below.  Composes nicely. */
.quiz-step-section {
  padding: 0;
  animation: stepSectionFwd 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform;
}
.quiz-stage.dir-back .quiz-step-section { animation-name: stepSectionBack; }

@keyframes stepSectionFwd {
  from { transform: translate3d(14px, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes stepSectionBack {
  from { transform: translate3d(-14px, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Children stagger: headline first, help next, then form fields top-to-bottom */
.quiz-step-section > * {
  animation: stepChildIn 460ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  will-change: opacity, transform;
}
.quiz-step-section > *:nth-child(1)  { animation-delay:   0ms; }
.quiz-step-section > *:nth-child(2)  { animation-delay:  70ms; }
.quiz-step-section > *:nth-child(3)  { animation-delay: 140ms; }
.quiz-step-section > *:nth-child(4)  { animation-delay: 220ms; }
.quiz-step-section > *:nth-child(5)  { animation-delay: 300ms; }
.quiz-step-section > *:nth-child(6)  { animation-delay: 380ms; }
.quiz-step-section > *:nth-child(7)  { animation-delay: 460ms; }
.quiz-step-section > *:nth-child(8)  { animation-delay: 540ms; }
.quiz-step-section > *:nth-child(9)  { animation-delay: 620ms; }
.quiz-step-section > *:nth-child(10) { animation-delay: 700ms; }

@keyframes stepChildIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Step 3 (Profil) — Match-Card loads FIRST (it's the result of Step 1/2),
   then the question cascade waits for it to finish before fading in. */
.quiz-step-section .match-card {
  animation: matchCardIn 560ms var(--ease-out) 0ms both;
}
@keyframes matchCardIn {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  60%  { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* On Step 3, shift the headline + question stagger to start AFTER match-card */
.quiz-stage.step-profil .quiz-step-section > *:nth-child(1) { animation-delay:   0ms; } /* match-card */
.quiz-stage.step-profil .quiz-step-section > *:nth-child(2) { animation-delay: 360ms; } /* h1 */
.quiz-stage.step-profil .quiz-step-section > *:nth-child(3) { animation-delay: 430ms; } /* help */
.quiz-stage.step-profil .quiz-step-section > *:nth-child(4) { animation-delay: 510ms; } /* field 1 */
.quiz-stage.step-profil .quiz-step-section > *:nth-child(5) { animation-delay: 590ms; } /* field 2 */
.quiz-stage.step-profil .quiz-step-section > *:nth-child(6) { animation-delay: 670ms; } /* field 3 */

/* Incomplete state on proceed button: visually softer but still tappable
   so user can click and get validation feedback */
.quiz-bar-cta.is-incomplete { opacity: 0.7; }
.quiz-bar-cta.is-incomplete:hover { opacity: 0.85; }

/* PLZ Radius slider */
.radius-field { padding-top: var(--s-sm); }
.radius-field .form-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 500;
}
.radius-field .radius-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--accent);
  font-feature-settings: 'tnum' 1;
}
.radius-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 47%), var(--line-stone) var(--fill, 47%));
  border-radius: 999px;
  outline: none;
  margin: var(--s-sm) 0 var(--s-xs);
  cursor: pointer;
}
.radius-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: white;
  border: 2px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(28, 29, 51, 0.12);
  transition: transform 200ms var(--ease-out), border-color 200ms;
}
.radius-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.radius-slider::-webkit-slider-thumb:active { transform: scale(1.15); border-color: var(--accent-hover); }
.radius-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: white;
  border: 2px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(28, 29, 51, 0.12);
}
.radius-slider:focus { outline: none; }
.radius-slider:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(194, 86, 43, 0.18); }
.radius-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: var(--s-md);
}

.radius-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-sm);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.radius-note svg {
  flex: 0 0 13px;
  color: var(--accent);
}

/* ============================================================
   LIVE STELLEN — Interactive Sample Jobs Section
   ============================================================ */
.live-jobs {
  padding: var(--s-3xl) 0 var(--s-4xl);
  background: var(--bg-alt);
}
@media (min-width: 768px) { .live-jobs { padding: var(--s-4xl) 0 var(--s-5xl); } }

.live-jobs-head {
  margin-bottom: var(--s-2xl);
  padding-bottom: var(--s-xl);
  border-bottom: 1px solid var(--ink);
}
.live-jobs-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: var(--s-md) 0 0;
}
.live-jobs-h em { font-style: italic; font-weight: 500; color: var(--accent); }
.live-jobs-intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin: var(--s-md) 0 0;
  max-width: 56ch;
}

/* Tabs nav — editorial pill row */
.job-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-bottom: var(--s-xl);
  padding-bottom: var(--s-md);
  border-bottom: 1px solid var(--line-stone);
}
.job-tab {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-stone);
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 200ms var(--ease-out);
  white-space: nowrap;
}
.job-tab:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.job-tab.is-active {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
@media (min-width: 768px) {
  .job-tab { font-size: 15px; padding: 11px 22px; }
}

/* Job list grid */
.job-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
  margin-bottom: var(--s-2xl);
}
@media (min-width: 768px) {
  .job-list { grid-template-columns: 1fr 1fr; gap: var(--s-lg); }
}

/* Job card */
.job-card {
  background: var(--bg-card);
  border: 1px solid var(--line-stone);
  padding: var(--s-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  transition: border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.job-card:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(28, 29, 51, 0.04), 0 14px 32px -18px rgba(28, 29, 51, 0.18);
  transform: translateY(-2px);
}
.job-card-head {
  padding-bottom: var(--s-md);
  border-bottom: 1px solid var(--line);
}
.job-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 var(--s-xs);
}
.job-card-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 22px);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 var(--s-xs);
}
.job-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0;
}
.job-meta strong {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0;
}
.job-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
}
.job-benefits li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.job-benefits li:first-child { border-top: none; padding-top: 0; }
.job-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--success);
  font-weight: 700;
  font-size: 13px;
}

/* Live-jobs CTA bar */
.live-jobs-cta {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  align-items: flex-start;
  padding: var(--s-lg);
  background: var(--bg-card);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
}
@media (min-width: 768px) {
  .live-jobs-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-xl);
    padding: var(--s-xl);
  }
}
.live-jobs-cta-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 var(--s-2xs);
  letter-spacing: -0.015em;
}
.live-jobs-cta-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  max-width: 48ch;
  line-height: 1.55;
}

/* Per-field validation error states */
.form-field.has-error .form-label { color: var(--error); }
.form-field.has-error .form-input { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.form-field.has-error .option:not(.selected) { border-color: rgba(178, 58, 72, 0.35); }
.form-error {
  margin: var(--s-xs) 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--error);
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  animation: errorAppear 220ms ease-out both;
}
.form-error::before {
  content: '!';
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: var(--error);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 11px;
  margin-top: 1px;
}
@keyframes errorAppear {
  from { opacity: 0; transform: translate3d(0, -4px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Searching overlay — persistent in DOM, fades via .is-visible class
   for smooth enter + exit. No display:none, no Alpine x-show. */
.quiz-searching {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(250, 250, 247, 0.96);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 380ms ease-out, visibility 0s linear 380ms;
}
.quiz-searching.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 280ms ease-out, visibility 0s linear 0s;
}
.quiz-searching-card {
  text-align: center;
  max-width: 340px;
  padding: 0 var(--s-lg);
  transform: translateY(8px);
  opacity: 0;
  transition: opacity 380ms ease-out 80ms, transform 380ms cubic-bezier(0.22, 1, 0.36, 1) 80ms;
}
.quiz-searching.is-visible .quiz-searching-card {
  opacity: 1;
  transform: translateY(0);
}
.quiz-searching-spinner {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(194, 86, 43, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto var(--s-lg);
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.quiz-searching-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-xs);
  font-weight: 600;
}
.quiz-searching-h {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
}
.quiz-searching-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--s-md);
}
.quiz-searching-dots span {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.3;
  animation: dotPulse 1200ms ease-in-out infinite;
}
.quiz-searching-dots span:nth-child(2) { animation-delay: 200ms; }
.quiz-searching-dots span:nth-child(3) { animation-delay: 400ms; }
@keyframes dotPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-searching-spinner { animation-duration: 1800ms; }
  .quiz-searching-dots span { animation: none; opacity: 0.6; }
}

/* Step 6 — Social Proof + Vorteile (re-anchor before submit) */
.kontakt-trust {
  margin-top: var(--s-2xl);
  padding-top: var(--s-xl);
  border-top: 1px solid var(--line);
}
.kontakt-trust-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-sm);
  margin-bottom: var(--s-xl);
  padding-bottom: var(--s-lg);
  border-bottom: 1px solid var(--line);
}
.kontakt-trust-stats .ks {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kontakt-trust-stats .ks strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 6.4vw, 32px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.kontakt-trust-stats .ks strong span {
  font-size: 0.5em;
  vertical-align: top;
  color: var(--accent);
  margin-left: 2px;
  font-weight: 600;
}
.kontakt-trust-stats .ks .ks-label {
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
}
@media (min-width: 540px) {
  .kontakt-trust-stats .ks strong { font-size: clamp(26px, 4vw, 36px); }
  .kontakt-trust-stats .ks .ks-label { font-size: 12px; }
}

.kontakt-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-xs);
}
@media (min-width: 540px) {
  .kontakt-benefits { grid-template-columns: 1fr 1fr; column-gap: var(--s-lg); }
}
.kontakt-benefits li {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}
.kontakt-benefits li svg {
  flex: 0 0 14px;
  color: var(--success);
}

/* Step 6 contains a <form> wrapping the inputs — stagger its children too */
.quiz-step-section > form > * {
  animation: stepChildIn 460ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.quiz-step-section > form > *:nth-child(1) { animation-delay: 220ms; }
.quiz-step-section > form > *:nth-child(2) { animation-delay: 290ms; }
.quiz-step-section > form > *:nth-child(3) { animation-delay: 360ms; }
.quiz-step-section > form > *:nth-child(4) { animation-delay: 430ms; }
.quiz-step-section > form > *:nth-child(5) { animation-delay: 500ms; }
.quiz-step-section > form > *:nth-child(6) { animation-delay: 570ms; }
.quiz-step-section > form > *:nth-child(7) { animation-delay: 640ms; }

@media (prefers-reduced-motion: reduce) {
  .quiz-step-section,
  .quiz-step-section > *,
  .match-card { animation: stepFadeReduced 180ms ease both !important; animation-delay: 0ms !important; }
  @keyframes stepFadeReduced { from { opacity: 0; } to { opacity: 1; } }
}

/* Soft-exit action row: resume-quiz (primary action) + home link */
.soft-exit-actions {
  margin-top: var(--s-2xl);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-md);
}
.soft-exit-resume { gap: var(--s-xs); }
.soft-exit-home {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.soft-exit-home:hover { color: var(--ink); }
@media (min-width: 540px) {
  .soft-exit-actions { flex-direction: row; align-items: center; gap: var(--s-lg); }
}

/* Step typography — display headline, tight help */
.step-q {
  font-family: var(--font-display);
  font-size: clamp(26px, 5.6vw, 44px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 var(--s-sm);
}
.step-q em { font-style: italic; font-weight: 500; color: var(--accent); }
/* Zustimmungsschirme zeigen einen ganzen Satz in Anfuehrungszeichen. Der
   braucht etwas weniger Groesse als eine dreiwortige Frage. */
.step-q-aussage { font-size: clamp(23px, 4.8vw, 34px); line-height: 1.16; }
/* Zweiter Satz der Kontakt-Ueberschrift: eigener Absatz, nicht nur Umbruch. */
.step-q-zeile2 { display: block; margin-top: 0.42em; }
.step-help {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 var(--s-xl);
  max-width: 48ch;
}
@media (min-width: 768px) {
  .step-help { font-size: 16px; margin-bottom: var(--s-2xl); }
}

/* Step-eyebrow legacy class — keep visually compatible if any HTML still uses it */
.step-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 var(--s-xs);
  display: inline-block;
}

.step-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-md);
  margin-top: var(--s-xl);
  padding-top: var(--s-md);
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) { .step-controls { margin-top: var(--s-2xl); } }

/* Persistent quiz bar — fixed bottom on every viewport (mobile + desktop) */
.quiz-stage { padding-bottom: 96px; }

.quiz-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  margin: 0;
  padding: var(--s-sm) 0 calc(var(--s-sm) + env(safe-area-inset-bottom));
  background: rgba(250, 250, 247, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 14px -4px rgba(28, 29, 51, 0.08);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 420ms var(--ease-out), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.quiz-bar.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.quiz-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-md);
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--s-lg);
}

.quiz-bar .step-back.is-hidden { visibility: hidden; pointer-events: none; }

@media (max-width: 767px) {
  .quiz-bar .btn { padding: 14px 22px; }
  .quiz-bar .step-back { padding: 12px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-bar { transition: opacity 80ms ease, transform 80ms ease; }
}
.step-back {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--s-xs) 0;
  font-weight: 500;
  transition: color 200ms;
}
.step-back:hover { color: var(--ink); }
.step-back:disabled { opacity: 0.5; cursor: not-allowed; }

/* Option buttons (used by single/multi selects) */
.option-list { display: flex; flex-direction: column; gap: var(--s-xs); }
/* Freitext unter einer Option, taucht erst auf, wenn die Option gewaehlt ist. */
.freitext-feld { margin-top: var(--s-md); }
.freitext-feld .form-label { display: block; margin-bottom: 6px; }
.option {
  display: flex;
  align-items: flex-start;
  gap: var(--s-sm);
  padding: var(--s-md);
  background: var(--bg-card);
  border: 1px solid var(--line-stone);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 200ms var(--ease-out);
  font-size: 15px;
  text-align: left;
  width: 100%;
}
.option:hover { border-color: var(--ink); }
.option.selected {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.option-radio {
  flex: 0 0 18px;
  height: 18px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  margin-top: 2px;
  position: relative;
  transition: border-color 200ms;
}
.option.selected .option-radio { border-color: var(--accent); }
.option.selected .option-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: 50%;
}
.option-checkbox {
  flex: 0 0 18px;
  height: 18px;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  margin-top: 2px;
  display: grid;
  place-items: center;
  transition: all 200ms;
}
.option.selected .option-checkbox {
  border-color: var(--accent);
  background: var(--accent);
}
/* Haken gezeichnet statt als Schriftzeichen. Als '✓' erbt das Pseudo-Element die
   line-height der Option (24,75px) in eine 14px hohe Box, dadurch sitzt der Haken
   sichtbar zu tief, und je nach Systemschrift auch unterschiedlich weit rechts.
   Zwei Rahmenkanten um 45 Grad gedreht sind von Schrift und Zeilenhoehe unabhaengig. */
.option.selected .option-checkbox::after {
  content: '';
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(0, -1px) rotate(45deg);
}

.plz-field { position: relative; }
.plz-suggestions {
  list-style: none;
  margin: 0 0 var(--s-sm);
  padding: 0;
  background: white;
  border: 1px solid var(--line-stone);
  border-top: none;
  max-height: 280px;
  overflow-y: auto;
}
.plz-suggestions li {
  padding: var(--s-sm) var(--s-md);
  display: flex;
  gap: var(--s-sm);
  align-items: baseline;
  cursor: pointer;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.plz-suggestions li:first-child { border-top: none; }
.plz-suggestions li:hover { background: var(--accent-tint); }
.plz-suggestions li strong { font-weight: 600; color: var(--ink); flex: 0 0 60px; }
.plz-suggestions li span { color: var(--muted); }

.match-card {
  display: flex;
  gap: var(--s-md);
  background: rgba(31, 78, 61, 0.06);
  border: 1px solid rgba(31, 78, 61, 0.18);
  padding: var(--s-md) var(--s-lg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--s-2xl);
  animation: matchCardIn 600ms var(--ease-out) 200ms both;
}
@keyframes matchCardIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.match-card-icon {
  flex: 0 0 36px;
  height: 36px;
  background: var(--success);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.match-card-h {
  font-size: 15px;
  color: var(--ink);
  margin-bottom: var(--s-2xs);
  line-height: 1.4;
}
.match-card-h strong { color: var(--success); font-weight: 600; }
.match-card-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.match-card-sub strong { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .match-card { animation: none; } }

.form-optional { font-size: 13px; font-weight: 400; color: var(--muted-soft); margin-left: var(--s-xs); }
.quiz-skip {
  margin-top: var(--s-sm);
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.quiz-skip:hover { color: var(--ink); }
.option.disabled { opacity: 0.5; cursor: not-allowed; }

/* Zaehler unter einer Mehrfachauswahl mit Limit. Wechselt beim Tipp auf eine
   gesperrte Option kurz in den Hinweis, deshalb feste Hoehe: sonst springt die
   Liste darunter. */
.option-limit {
  font-size: 13px;
  color: var(--muted);
  margin: var(--s-xs) 0 0;
  min-height: 1.4em;
}
.option-limit-warnung { color: var(--error); }

.option-large {
  padding: var(--s-lg) var(--s-md);
  align-items: flex-start;
}
.option-large strong { font-size: 16px; font-weight: 600; color: var(--ink); display: block; }
.option-sub {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--s-2xs);
  font-weight: 400;
}

.honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form-checkbox label {
  display: flex;
  gap: var(--s-sm);
  align-items: flex-start;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
}
.form-checkbox input { margin-top: 4px; flex: 0 0 18px; cursor: pointer; }
.form-checkbox a { color: var(--accent); text-decoration: underline; }

/* ============================================================
   Thank-You Pages
   ============================================================ */
.thanks-body { background: var(--bg); }
.thanks-main { padding: var(--s-2xl) 0 var(--s-3xl); }

.thanks-hero { text-align: center; margin-bottom: var(--s-3xl); }
.thanks-check {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--success);
  color: white;
  border-radius: 50%;
  margin-bottom: var(--s-lg);
}
.thanks-hero h1 { font-size: clamp(28px, 4vw, 44px); margin-bottom: var(--s-md); }
.thanks-hero .lead { margin: 0 auto; max-width: 50ch; }

.thanks-section { margin-bottom: var(--s-2xl); padding-bottom: var(--s-xl); border-bottom: 1px solid var(--line); }
.thanks-section:last-child { border-bottom: none; }
.thanks-section h2 { font-size: clamp(20px, 2.5vw, 26px); margin-bottom: var(--s-md); }
.thanks-section p { margin-bottom: var(--s-sm); font-size: 16px; line-height: 1.7; }

.thanks-stat {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
}

.thanks-assignment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-lg);
  align-items: start;
}
@media (min-width: 600px) {
  .thanks-assignment-grid { grid-template-columns: 120px 1fr; gap: var(--s-xl); }
}
.thanks-avatar {
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.thanks-checklist { list-style: none; padding: 0; margin: var(--s-md) 0 0; }
.thanks-checklist li {
  position: relative;
  padding: var(--s-xs) 0 var(--s-xs) 28px;
  font-size: 15px;
  color: var(--ink);
}
/* Der Haken war ein Textzeichen. Satoshi hat es nicht, also sprang das System auf
   eine Ersatzschrift und der Haken sass mal zu hoch, mal zu fett, mal als Kaesten.
   Als SVG sieht er auf jedem Geraet gleich aus. */
.thanks-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E3D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.thanks-checklist-large li { font-size: 16px; padding: var(--s-sm) 0 var(--s-sm) 28px; }

.thanks-steps { margin: var(--s-md) 0 0 var(--s-lg); padding: 0; }
.thanks-steps li { padding: var(--s-xs) 0; font-size: 15px; }

.thanks-calendly { background: var(--bg-alt); border-radius: var(--radius-sm); padding: var(--s-xl); }
.thanks-calendly h2 { margin-bottom: var(--s-xs); }
.thanks-calendly .lead { margin-bottom: var(--s-lg); }
.calendly-inline-widget { background: white; border: 1px solid var(--line); border-radius: var(--radius-sm); }

.thanks-cases { background: var(--bg-card); border: 1px solid var(--line); padding: var(--s-xl); border-radius: var(--radius-sm); }
.thanks-cases h2 { margin-bottom: var(--s-lg); }
.thanks-case {
  padding: var(--s-md) 0;
  border-top: 1px solid var(--line);
}
.thanks-case:first-of-type { border-top: none; padding-top: 0; }
.thanks-case-quote {
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: var(--s-xs);
}
.thanks-case-meta {
  font-size: 13px;
  color: var(--muted);
}
.thanks-case-note {
  font-size: 12px;
  color: var(--muted-soft);
  font-style: italic;
  margin-top: var(--s-md);
}

.thanks-reassurance p { color: var(--muted); }

.thanks-scarcity {
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  padding: var(--s-lg);
}
.thanks-scarcity p { margin: 0; }

.thanks-cv { text-align: center; }

.thanks-final { text-align: center; }
.thanks-final p { margin-bottom: var(--s-sm); }
.thanks-final a { color: var(--accent); text-decoration: underline; }
.thanks-signature { margin-top: var(--s-lg); font-style: italic; color: var(--muted); }

/* CV upload form */
.cv-form { max-width: 520px; margin: var(--s-2xl) auto 0; }

/* ============================================================
   Editorial Polish — atmosphere · numbering · reveal · count-up
   ============================================================ */

/* Subtle paper-grain via inline SVG noise — adds editorial depth without
   competing with content. ~3% opacity, 200px tile. */
body {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.11 0 0 0 0 0.20 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  background-attachment: fixed;
}

/* Magazine-issue caption above hero eyebrow — tabular, decorative.
   Sets editorial register before the headline lands. */
.hero-issue {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-soft);
  padding-bottom: var(--s-md);
  margin-bottom: var(--s-md);
  border-bottom: 1px solid var(--line);
  font-feature-settings: 'tnum' 1;
}
.hero-issue::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: var(--s-sm);
}
@media (max-width: 540px) {
  .hero-issue { font-size: 10px; }
}

/* Trust-count: stable digit width during animation */
.trust-count, .trust-suffix {
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
.trust-suffix {
  font-size: 0.5em;
  vertical-align: top;
  color: var(--accent);
  margin-left: 4px;
}

/* Pain-card numbering — small marginalia label above heading */
.pain-card { position: relative; padding-top: var(--s-2xl); }
.pain-num {
  position: absolute;
  top: var(--s-md);
  left: var(--s-xl);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  font-feature-settings: 'tnum' 1;
}
.pain-card h3 { padding-right: var(--s-md); }

/* Track-card with Roman numeral as editorial drop-cap accent */
.track-card { position: relative; }
.track-roman {
  position: absolute;
  top: var(--s-md);
  right: var(--s-xl);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--accent);
  opacity: 0.55;
  line-height: 1;
}
.track-card h3 { padding-right: 56px; }

/* Card hover lift — swaps from border-only to subtle paper-shadow.
   Elevates feel without breaking flat editorial register. */
.card {
  transition:
    border-color 240ms var(--ease-out),
    box-shadow 240ms var(--ease-out),
    transform 240ms var(--ease-out);
}
.card:hover {
  border-color: var(--ink);
  box-shadow: 0 1px 0 rgba(28, 29, 51, 0.04), 0 14px 32px -18px rgba(28, 29, 51, 0.18);
  transform: translateY(-2px);
}
.pain-card:hover .pain-num { color: var(--ink); }
.track-card:hover .track-roman { opacity: 0.85; color: var(--ink); }

/* wege-card: same treatment, but featured card keeps its accent border */
.wege-card { transition: border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out), transform 240ms var(--ease-out); }
.wege-card:hover {
  box-shadow: 0 1px 0 rgba(28, 29, 51, 0.04), 0 14px 32px -18px rgba(28, 29, 51, 0.18);
  transform: translateY(-2px);
}

/* Reveal-on-scroll — staggered cascade for grids */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Stagger inside grids — 80ms ramp for the first ~6 children */
.pain-grid .reveal:nth-child(1)  { transition-delay: 0ms; }
.pain-grid .reveal:nth-child(2)  { transition-delay: 80ms; }
.pain-grid .reveal:nth-child(3)  { transition-delay: 160ms; }
.pain-grid .reveal:nth-child(4)  { transition-delay: 240ms; }
.pain-grid .reveal:nth-child(5)  { transition-delay: 320ms; }
.pain-grid .reveal:nth-child(6)  { transition-delay: 400ms; }
.tracks-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.tracks-grid .reveal:nth-child(2) { transition-delay: 90ms; }
.tracks-grid .reveal:nth-child(3) { transition-delay: 180ms; }
.tracks-grid .reveal:nth-child(4) { transition-delay: 270ms; }
.wege-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.wege-grid .reveal:nth-child(2) { transition-delay: 100ms; }
.wege-grid .reveal:nth-child(3) { transition-delay: 200ms; }
.trust-stats .reveal:nth-child(1) { transition-delay: 0ms; }
.trust-stats .reveal:nth-child(2) { transition-delay: 120ms; }
.trust-stats .reveal:nth-child(3) { transition-delay: 240ms; }
.prozess-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.prozess-grid .reveal:nth-child(2) { transition-delay: 120ms; }
.prozess-grid .reveal:nth-child(3) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  body { background-attachment: scroll; }
}

/* ============================================================
   EDITORIAL REDESIGN — Magazine-Direction
   Asymmetric grids · Display typography · Hairline rules
   Atmosphere through composition, not gradients
   ============================================================ */

/* ───── HERO · Masthead-Line ───── */
.hero-editorial { padding: var(--s-2xl) 0 var(--s-4xl); }

/* Initial page-load stagger — top-down fade-up (masthead → headline → subhead → CTA → sidebar) */
.hero-editorial .masthead-line { animation: heroFadeUp 540ms cubic-bezier(0.22, 1, 0.36, 1)   0ms backwards; }
.hero-editorial .hero-display  { animation: heroFadeUp 640ms cubic-bezier(0.22, 1, 0.36, 1)  90ms backwards; }
.hero-editorial .hero-subhead  { animation: heroFadeUp 540ms cubic-bezier(0.22, 1, 0.36, 1) 240ms backwards; }
.hero-editorial .hero-cta-row  { animation: heroFadeUp 540ms cubic-bezier(0.22, 1, 0.36, 1) 360ms backwards; }
.hero-editorial .hero-side     { animation: heroFadeUp 580ms cubic-bezier(0.22, 1, 0.36, 1) 460ms backwards; }
@keyframes heroFadeUp {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-editorial .masthead-line,
  .hero-editorial .hero-subhead,
  .hero-editorial .hero-display,
  .hero-editorial .hero-cta-row,
  .hero-editorial .hero-side { animation: none; }
}
@media (min-width: 768px) { .hero-editorial { padding: var(--s-3xl) 0 var(--s-5xl); } }

.masthead-line {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-feature-settings: 'tnum' 1;
  padding-bottom: var(--s-md);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s-3xl);
}
.mast-num { color: var(--accent); font-weight: 600; flex: 0 0 auto; }
.mast-rule { display: none; }
.mast-meta { color: var(--ink); font-weight: 500; flex: 0 1 auto; }
.mast-spacer { flex: 1 1 auto; }
.mast-meta-r { color: var(--muted); flex: 0 0 auto; }
@media (max-width: 640px) {
  .masthead-line { font-size: 10px; gap: var(--s-sm); }
  .mast-meta-r { display: none; }
}

/* Hero asymmetric 2-col grid */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3xl);
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--s-4xl);
    align-items: start;
  }
}

/* Sub-headline below hero-display — names the audience naturally
   so target group self-identifies without crowding the masthead. */
.hero-subhead {
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.5;
  color: var(--muted);
  margin: var(--s-md) 0 var(--s-2xl);
  max-width: 60ch;
  font-weight: 400;
}
.hero-subhead strong {
  color: var(--ink);
  font-weight: 600;
}

/* Display headline — refined editorial scale, balanced not overwhelming */
.hero-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 var(--s-2xl);
  font-size: clamp(36px, 5.4vw, 72px);
  text-wrap: balance;
}
.hero-display em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
@media (min-width: 1280px) {
  .hero-display { font-size: clamp(56px, 5vw, 80px); }
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
  align-items: center;
}

/* Hero side: editorial sidebar — vertical hairline + facts list */
.hero-side {
  position: relative;
  padding-top: var(--s-md);
  padding-left: var(--s-lg);
  border-left: 1px solid var(--line);
}
@media (max-width: 899px) {
  .hero-side { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--s-xl); }
}
.side-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-sm);
}
.side-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--s-xl);
  max-width: 38ch;
}
.side-lead em { font-style: italic; color: var(--muted); }
.side-facts { margin: 0; padding: 0; }
.side-fact {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--s-md);
  padding: var(--s-sm) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.side-fact:first-child { border-top: none; padding-top: 0; }
.side-fact dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
}
.side-fact dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

/* Hero side editorial figure (photo + caption) */
.hero-side-figure {
  margin: 0 0 var(--s-lg);
}
.hero-side-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
  filter: contrast(1.04) saturate(0.95);
}
.hero-side-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--s-sm);
  padding-top: var(--s-sm);
  border-top: 1px solid var(--line);
}
.hero-side-figure figcaption .dot { color: var(--muted-soft); }

/* Pain & Tracks section banners — full-width editorial photographs */
.pain-banner,
.tracks-banner {
  margin: 0 0 var(--s-2xl);
  position: relative;
}
.pain-banner img,
.tracks-banner img {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(0.92);
}
@media (min-width: 768px) {
  .pain-banner img, .tracks-banner img { max-height: 460px; }
}

/* ───── PAIN · Editorial 2-col with hanging numbers ───── */
.pain-editorial { padding: var(--s-4xl) 0 var(--s-5xl); }
.pain-editorial .pain-banner { margin-top: calc(-1 * var(--s-4xl)); }
.tracks-editorial .tracks-banner { margin-top: calc(-1 * var(--s-4xl)); }

.pain-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-xl);
  margin-bottom: var(--s-4xl);
  padding-bottom: var(--s-2xl);
  border-bottom: 1px solid var(--ink);
}
@media (min-width: 900px) {
  .pain-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-3xl);
    align-items: end;
  }
}
.pain-display-h {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 80px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--ink);
  margin: 0;
}
.pain-display-h em { font-style: italic; font-weight: 500; color: var(--accent); }
.pain-intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 40ch;
  margin: 0;
}
.pain-intro strong { color: var(--ink); font-weight: 600; }

/* List itself — 2-column on desktop, items spaced by hairlines */
.pain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--s-3xl);
  row-gap: var(--s-md);
}
@media (min-width: 900px) {
  .pain-list { grid-template-columns: 1fr 1fr; }
}

.pain-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s-lg);
  align-items: start;
  padding: var(--s-xl) 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 540px) {
  .pain-item { grid-template-columns: 56px 1fr; gap: var(--s-md); padding: var(--s-lg) 0; }
}
.pain-big {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(48px, 7vw, 84px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-feature-settings: 'tnum' 1;
}
.pain-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--s-sm);
}
.pain-body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 42ch;
}
.pain-item:hover .pain-big { color: var(--accent-hover); }

/* ───── TRACKS · Editorial Tabular List ───── */
.tracks-editorial { padding: var(--s-4xl) 0 var(--s-5xl); }
.tracks-head {
  margin-bottom: var(--s-3xl);
  padding-bottom: var(--s-xl);
  border-bottom: 1px solid var(--ink);
}
.tracks-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5.5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: var(--s-md) 0 0;
}
.tracks-h em { font-style: italic; font-weight: 500; color: var(--accent); }

.track-toc {
  list-style: none;
  margin: 0;
  padding: 0;
}
.track-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 5fr) minmax(0, 4fr);
  gap: var(--s-xl);
  align-items: baseline;
  padding: var(--s-2xl) 0;
  border-top: 1px solid var(--line-stone);
  transition: background 220ms var(--ease-out);
}
.track-row:hover { background: rgba(28, 29, 51, 0.02); }
.track-row:last-child { border-bottom: 1px solid var(--line-stone); }
@media (max-width: 768px) {
  .track-row {
    grid-template-columns: 56px 1fr;
    gap: var(--s-md);
    padding: var(--s-xl) 0;
  }
}
.track-roman-big {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--accent);
  opacity: 0.55;
  transition: opacity 220ms var(--ease-out);
}
.track-row:hover .track-roman-big { opacity: 1; }
.track-content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--s-xs);
}
.track-content p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 48ch;
}
.track-row .track-soon {
  font-style: italic;
  font-size: 0.55em;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 6px;
}
.track-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  justify-self: end;
}
@media (max-width: 768px) {
  .track-tags { grid-column: 2 / -1; justify-self: start; margin-top: var(--s-md); }
}
.track-tags li {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}
.track-row-soon .track-content h3,
.track-row-soon .track-roman-big { color: var(--muted); opacity: 0.7; }

/* ───── ABOUT · Editorial Portrait ───── */
.about-editorial { padding: var(--s-4xl) 0 var(--s-5xl); background: var(--bg); }

.about-marker {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3xl);
  padding-bottom: var(--s-md);
  border-bottom: 1px solid var(--ink);
  font-feature-settings: 'tnum' 1;
}
.mark-num { color: var(--accent); font-weight: 600; }
.mark-rule { flex: 1 1 auto; height: 1px; }
.mark-meta { color: var(--ink); }

.about-grid-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2xl);
  align-items: start;
}
@media (min-width: 900px) {
  .about-grid-editorial {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-4xl);
  }
}

.about-figure { margin: 0; }
.about-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
  filter: contrast(1.04) saturate(0.92);
}
.about-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--s-md);
  padding-top: var(--s-sm);
  border-top: 1px solid var(--line);
}
.cap-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.cap-role {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

.about-content-editorial { padding-top: var(--s-md); }
.about-display {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.2vw, 64px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--ink);
  margin: 0 0 var(--s-2xl);
}
.about-display em { font-style: italic; font-weight: 500; color: var(--accent); }

.about-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-xl);
  margin-bottom: var(--s-2xl);
}
@media (min-width: 700px) {
  .about-cols {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s-2xl);
    align-items: start;
  }
}
.about-col-l {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}
.dropcap {
  float: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 4em;
  line-height: 0.85;
  margin: 0.05em 0.08em 0 -0.03em;
  color: var(--accent);
  font-feature-settings: 'kern' 1;
}
.about-pullquote {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  padding: var(--s-md) 0 var(--s-md) var(--s-lg);
  border-left: 2px solid var(--accent);
}
.about-pullquote em { font-style: italic; color: var(--accent); }

.about-meta-list {
  list-style: none;
  margin: 0;
  padding-top: var(--s-lg);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2xl);
}
.about-meta-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.meta-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.meta-v {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* ───── FINAL CTA · Big Typographic Statement ───── */
.final-cta-editorial {
  background: var(--ink);
  color: white;
  padding: var(--s-4xl) 0;
}
@media (min-width: 768px) { .final-cta-editorial { padding: var(--s-5xl) 0 var(--s-4xl); } }

.final-mast {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  padding-bottom: var(--s-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: var(--s-3xl);
  font-feature-settings: 'tnum' 1;
}
.final-mast .mast-num { color: var(--accent-soft); }
.final-mast .mast-rule { flex: 1 1 auto; }
.final-mast .mast-meta { color: white; }

.final-display {
  font-family: var(--font-display);
  font-size: clamp(44px, 9vw, 120px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.94;
  color: white;
  margin: 0 0 var(--s-3xl);
}
.final-display em { font-style: italic; font-weight: 500; color: var(--accent-soft); }

.final-cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2xl);
  padding-top: var(--s-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
@media (min-width: 900px) {
  .final-cta-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-4xl);
    align-items: start;
  }
}
.final-cta-l { display: flex; flex-direction: column; gap: var(--s-md); align-items: flex-start; }
.final-btn { background: var(--accent); border-color: var(--accent); }
.final-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.final-secondary {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.final-secondary a {
  color: white;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  font-weight: 500;
}
.final-hours {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.final-promise {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 50ch;
}
.final-promise strong { color: white; font-weight: 600; }

/* Final-promise repositioned as subheadline directly under the headline */
.final-promise-sub { max-width: 62ch; margin: 0 0 var(--s-2xl); }
@media (min-width: 900px) { .final-promise-sub { font-size: 19px; } }
.final-cta-editorial .final-display { margin-bottom: var(--s-lg); }
/* Only the CTA column remains in the grid — keep it single-column */
.final-cta-editorial .final-cta-grid { grid-template-columns: 1fr; }

/* Old hero-issue / old hero-headline / old hero-meta no longer used — safe to leave;
   but if any orphan elements appear, hide them: */
.hero-editorial .hero-issue { display: none; }

/* ============================================================
   Thank-You Pages — Editorial Polish (CSS-only override)
   Applied to all 4 variants since they share class names.
   Tight mobile spacing · masthead-style hero · pull-quote stat
   ============================================================ */

/* Main: tighter on mobile, breathing room desktop */
.thanks-main { padding: var(--s-md) 0 var(--s-2xl); }
@media (min-width: 768px) { .thanks-main { padding: var(--s-2xl) 0 var(--s-3xl); } }

/* Hero: replace giant centered checkmark with asymmetric editorial masthead.
   Smaller check inline, headline large + italic accent, lead beside on desktop. */
.thanks-hero {
  text-align: left;
  margin-bottom: var(--s-2xl);
  padding-bottom: var(--s-xl);
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
}
@media (min-width: 768px) {
  .thanks-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-3xl);
    align-items: end;
    margin-bottom: var(--s-3xl);
  }
}

.thanks-check {
  width: 32px;
  height: 32px;
  margin-bottom: 0;
  background: var(--success);
  position: relative;
  border-radius: 0;
  align-self: start;
}
.thanks-check svg { width: 18px; height: 18px; }
.thanks-check::after {
  content: 'GESCHAFFT';
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.thanks-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 7vw, 72px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--ink);
  margin: var(--s-md) 0 0;
  grid-column: 1 / -1;
}
@media (min-width: 768px) {
  .thanks-hero h1 { grid-column: 1 / 2; margin-top: var(--s-md); }
}
.thanks-hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.thanks-hero .lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: none;
  grid-column: 1 / -1;
}
@media (min-width: 768px) {
  .thanks-hero .lead {
    grid-column: 2 / 3;
    padding-bottom: 6px;
    border-left: 1px solid var(--line);
    padding-left: var(--s-lg);
    font-size: 17px;
  }
}

/* Section: tighter rhythm on mobile, removed full-bottom border (use top hairlines instead) */
.thanks-section {
  margin-bottom: var(--s-xl);
  padding-bottom: var(--s-lg);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--line);
  border-bottom: none;
}
.thanks-section:first-of-type { padding-top: 0; border-top: none; }
.thanks-section:last-child { border-bottom: none; }
@media (min-width: 768px) {
  .thanks-section { margin-bottom: var(--s-2xl); padding-top: var(--s-xl); padding-bottom: var(--s-xl); }
}
.thanks-section h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--s-md);
  color: var(--ink);
  font-weight: 600;
}
.thanks-section p { margin-bottom: var(--s-sm); font-size: 15px; line-height: 1.65; }
@media (min-width: 768px) {
  .thanks-section p { font-size: 16px; line-height: 1.7; }
}

/* Pull-quote stat — first section under hero gets editorial treatment */
.thanks-stat {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 26px) !important;
  font-weight: 500;
  line-height: 1.35 !important;
  color: var(--ink);
  margin: 0;
  padding: 0 0 0 var(--s-lg);
  border-left: 2px solid var(--accent);
}
.thanks-stat strong { color: var(--accent); font-weight: 600; }

/* Assignment grid: portrait-style not avatar-circle */
.thanks-assignment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
  align-items: start;
}
@media (min-width: 600px) {
  .thanks-assignment-grid { grid-template-columns: 140px 1fr; gap: var(--s-xl); }
}
.thanks-avatar {
  width: 100%;
  max-width: 140px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
  filter: contrast(1.04) saturate(0.92);
}
.thanks-assignment .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--s-2xs);
  display: block;
}
.thanks-assignment h2 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: var(--s-xs); }

/* Calendly: lift as featured editorial block on Bone-alt */
.thanks-calendly {
  background: var(--bg-alt);
  border-radius: 0;
  padding: var(--s-lg) var(--s-md);
  border-left: 3px solid var(--accent);
  border-top: none !important;
}
@media (min-width: 768px) { .thanks-calendly { padding: var(--s-xl); } }
.thanks-calendly h2 { font-size: clamp(22px, 3vw, 30px); }
.thanks-calendly .lead { font-size: 15px; line-height: 1.55; color: var(--muted); }

/* Cases: editorial pull-quote rhythm */
.thanks-cases {
  background: transparent;
  border: none;
  padding: 0;
  border-top: 1px solid var(--line) !important;
  padding-top: var(--s-lg) !important;
}
.thanks-case-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.5;
  color: var(--ink);
  position: relative;
  padding-left: var(--s-md);
  border-left: 2px solid var(--line-stone);
}
.thanks-case-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--s-xs) !important;
  padding-left: var(--s-md);
}
.thanks-case-note {
  font-size: 11px;
  font-style: italic;
  color: var(--muted-soft);
  margin-top: var(--s-md);
}

/* Final block: more typographic */
.thanks-final p { font-size: 16px; }
.thanks-final a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.thanks-signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  margin-top: var(--s-lg);
}

/* Tighter checklist mobile */
.thanks-checklist li { padding: 6px 0 6px 28px; font-size: 14px; line-height: 1.5; }
@media (min-width: 768px) { .thanks-checklist li { font-size: 15px; padding: 8px 0 8px 28px; } }
.thanks-checklist-large li { font-size: 15px; padding: 8px 0 8px 30px; }
@media (min-width: 768px) { .thanks-checklist-large li { font-size: 16px; padding: 10px 0 10px 30px; } }

/* Reassurance: subdued */
.thanks-reassurance { background: var(--bg-alt); padding: var(--s-md) var(--s-lg) !important; border-left: 3px solid var(--line-strong); border-top: none !important; }
.thanks-reassurance p { font-style: italic; font-size: 15px; color: var(--ink); margin: 0; }
.thanks-reassurance p strong { color: var(--accent); font-style: normal; }

/* CV section: tighter */
.thanks-cv { text-align: left; padding-top: var(--s-lg) !important; }
.thanks-cv h2 { font-size: clamp(20px, 2.6vw, 26px); }

/* Quiz-header on thank-you pages: same sticky look */
.thanks-body .quiz-header { border-bottom: 1px solid var(--line); }

/* Ablauf-Intro */
.thanks-ablauf-intro {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
  color: var(--brand-ink);
  margin: 0 0 var(--s-lg);
  max-width: 60ch;
}

/* Spam-Hinweis */
.thanks-spam-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: var(--s-lg);
  padding: 12px 14px;
  background: rgba(194, 86, 43, 0.06);
  border-left: 3px solid var(--terracotta);
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-ink);
  border-radius: 0 4px 4px 0;
}
.thanks-spam-note svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--terracotta);
}

/* ============================================================
   Iter-1 — Hero-Grid single-column (aside entfernt 10.05.)
   ============================================================ */
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-main { max-width: 880px; }
}

/* ============================================================
   Iter-1 — Hero + Trust-Strip Mobile breathing room (rev 2)
   Balance: nicht alles über fold, aber luftig genug
   ============================================================ */
@media (max-width: 540px) {
  .hero-editorial { padding: var(--s-2xl) 0 var(--s-2xl); }
  .hero-display { margin: 0 0 var(--s-lg); font-size: clamp(32px, 8.5vw, 44px); }
  .hero-subhead { margin-bottom: var(--s-lg); }
}
.trust-strip { padding: var(--s-lg) 0; }
@media (min-width: 768px) { .trust-strip { padding: var(--s-xl) 0 var(--s-2xl); } }
/* Logo-Streifen entfernt → Trenner + Bottom-Spacing der Stats raus */
.trust-stats { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
@media (min-width: 768px) {
  .trust-stats { margin-bottom: 0; padding-bottom: 0; }
}

/* ============================================================
   Iter-1 — Kontakt-Trust als dunkler Brand-Ink-Kasten (Quiz Step Kontakt)
   ============================================================ */
.kontakt-trust {
  background: var(--ink);
  color: var(--bg);
  padding: var(--s-xl) var(--s-lg);
  border-radius: var(--radius-md);
  border-top: none;
  margin-top: var(--s-2xl);
}
@media (min-width: 540px) {
  .kontakt-trust { padding: var(--s-2xl) var(--s-xl); }
}
.kontakt-trust .kontakt-trust-stats {
  border-bottom-color: rgba(250, 250, 247, 0.16);
}
.kontakt-trust .kontakt-trust-stats .ks strong { color: var(--bg); }
.kontakt-trust .kontakt-trust-stats .ks strong span { color: #E9B59E; }
.kontakt-trust .kontakt-trust-stats .ks .ks-label { color: rgba(250, 250, 247, 0.72); }
.kontakt-trust .kontakt-benefits li { color: rgba(250, 250, 247, 0.92); }
.kontakt-trust .kontakt-benefits li svg { color: #E9B59E; }

/* Tighter spacing inside the quiz contact form */
.quiz-step-section form .form-field { margin-bottom: var(--s-md); }

/* ============================================================
   Iter-1 — 2-column form rows (Vorname + Nachname etc.)
   ============================================================ */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
}
.form-row .form-field { margin-bottom: 0; }
.form-row + .form-field,
.form-field + .form-row { margin-top: var(--s-lg); }
@media (min-width: 540px) {
  .form-row-2col { grid-template-columns: 1fr 1fr; }
}
/* Untereinander gestapelt darf der Reihenabstand nicht groesser sein als der
   zwischen zwei einzelnen Feldern, sonst reisst es Vorname und Nachname
   auseinander. */
@media (max-width: 539px) {
  .form-row { gap: var(--s-2xs); }
}

/* ============================================================
   Iter-1 — Mobile-Whitespace polish (LP V2, post Dima-Sync 10.05.)
   ============================================================ */
@media (max-width: 540px) {
  .pain-list { row-gap: var(--s-xl); }
  .pain-item { padding: var(--s-2xl) 0; gap: var(--s-md); }
  .wege-grid { gap: var(--s-2xl); }
  .wege-card { padding: var(--s-xl); }
  .prozess-grid { gap: var(--s-2xl); }
  .eligibility-grid { gap: var(--s-xl); }
  .faq-list { gap: var(--s-xs); }
  .final-cta-grid { gap: var(--s-xl); }
}

/* ============================================================
   Iter-1 — CV-Form sticky submit-bar (Mobile)
   ============================================================ */
@media (max-width: 768px) {
  .cv-form .step-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: var(--s-md) var(--s-lg);
    border-top: 1px solid var(--line);
    display: flex;
    gap: var(--s-md);
    z-index: 50;
  }
  .cv-form { padding-bottom: 96px; }
}

/* ============================================================
   V2 ADDITIONS — Hybrid "editorial + sanft weich"
   Soft-shadow card treatment + Dima "Entwicklung vs. Stillstand" sections
   ============================================================ */

/* --- Soft elevation on interactive/elevated cards (hybrid) --- */
.wege-card,
.job-card,
.match-card,
.eligibility-grid .card,
.persp-card,
.story-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.wege-card:hover,
.job-card:hover,
.persp-card:hover,
.story-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.about-figure img { border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.form-input,
.radius-slider { border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
  .wege-card, .job-card, .persp-card, .story-card { transition: box-shadow 220ms var(--ease-out); }
  .wege-card:hover, .job-card:hover, .persp-card:hover, .story-card:hover { transform: none; }
}

/* --- Eyebrow as soft pill (warm chip) --- */
.eyebrow {
  background: var(--accent-tint);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  letter-spacing: 0.1em;
}

/* --- PROBLEM section ("Irgendwann geht es nicht mehr um Gehalt.") --- */
.problem-v2 { background: var(--bg); }
/* Banner bündig an Section-Oberkante (Top-Padding canceln) — sonst weißer Streifen über dem Bild */
.problem-v2 .pain-banner { margin-top: calc(-1 * var(--s-3xl)); }
@media (min-width: 768px) { .problem-v2 .pain-banner { margin-top: calc(-1 * var(--s-4xl)); } }
.problem-v2 .section-head { max-width: 740px; }
.problem-bullets {
  list-style: none;
  margin: var(--s-2xl) auto 0;
  max-width: 740px;
  border-top: 1px solid var(--line-stone);
}
.problem-bullets li {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  padding: var(--s-lg) 0 var(--s-lg) var(--s-2xl);
  border-bottom: 1px solid var(--line-stone);
}
.problem-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--s-lg) + 0.7em);
  width: 18px;
  height: 2px;
  background: var(--accent);
}

/* --- PULL QUOTE (Brand-Guide pattern, Newsreader italic) --- */
.pullquote-section { background: var(--bg-alt); }
.pullquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--s-xl);
}
.pullquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: var(--s-lg);
}
.pullquote footer { font-size: 15px; color: var(--muted); font-style: normal; }
.pullquote footer strong { color: var(--ink); }

/* --- PERSPEKTIV section ("Was gute Fachkräfte eigentlich suchen.") --- */
.persp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-lg);
  margin-top: var(--s-2xl);
}
.persp-card {
  background: var(--bg-card);
  border: 1px solid var(--line-stone);
  padding: var(--s-xl) var(--s-lg);
}
.persp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  color: var(--accent);
  margin-bottom: var(--s-md);
}
.persp-icon svg { width: 22px; height: 22px; }
.persp-card h3 { font-size: 21px; margin-bottom: var(--s-xs); }
.persp-card p { font-size: 15px; line-height: 1.55; }
@media (max-width: 920px) { .persp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .persp-grid { grid-template-columns: 1fr; } }

/* --- GEHALT section (seriös, großer Serif-Numeral) --- */
.gehalt { background: var(--ink); color: #fff; }
.gehalt .eyebrow { background: rgba(255,255,255,.08); color: #E9B59E; }
.gehalt h2, .gehalt .gehalt-num { color: #fff; }
.gehalt p { color: rgba(255,255,255,.72); }
.gehalt-inner { text-align: center; }
.gehalt-range { margin: var(--s-2xl) 0; }
.gehalt-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 8vw, 88px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.gehalt-cap {
  display: block;
  margin-top: var(--s-md);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,.55);
}

/* --- ABOUT extra ("Wir kennen beide Seiten") --- */
.about-extra {
  margin-top: var(--s-lg);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--line);
}
.about-extra h3 { font-size: 20px; margin-bottom: var(--s-xs); }
.about-extra p { font-size: 15px; }

/* --- STORIES (Paul + Nasime) --- */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-xl);
  margin-top: var(--s-2xl);
}
.story-card {
  background: var(--bg-card);
  border: 1px solid var(--line-stone);
  padding: var(--s-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}
.story-top { display: flex; align-items: center; gap: var(--s-md); }
.story-photo {
  width: 64px; height: 64px;
  border-radius: var(--r-pill);
  background: var(--bg-alt) center/cover no-repeat;
  flex-shrink: 0;
  border: 1px solid var(--line-stone);
}
.story-card blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
}
.story-meta strong { display: block; font-size: 16px; color: var(--ink); }
.story-meta span { display: block; font-size: 13px; color: var(--muted); }
.story-salary {
  display: inline-block !important;
  margin-top: var(--s-xs);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  color: var(--accent) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
@media (max-width: 720px) { .stories-grid { grid-template-columns: 1fr; } }

/* --- KONTAKT-STEP: Trust-Video über dem Formular --- */
.kontakt-video { margin: 0 0 var(--s-xl); }
.kontakt-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink) center/cover no-repeat;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.kontakt-video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kontakt-video-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(28,29,51,.15), rgba(28,29,51,.45));
}
.kontakt-video-play span {
  width: 68px; height: 68px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.94);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform 200ms var(--ease-out);
}
.kontakt-video-frame:hover .kontakt-video-play span { transform: scale(1.06); }
.kontakt-video-play svg { width: 26px; height: 26px; color: var(--accent); margin-left: 3px; }
.kontakt-video-cap {
  margin-top: var(--s-sm);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

/* --- KONTAKT-STEP: Reassurance row direkt am Submit --- */
.kontakt-reassure {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-lg);
  justify-content: center;
  margin: var(--s-lg) 0 0;
  padding-top: var(--s-md);
}
.kontakt-reassure span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--muted);
}
.kontakt-reassure svg { width: 15px; height: 15px; color: var(--success); flex-shrink: 0; }
.kontakt-reassure-top {
  justify-content: flex-start;
  margin: 0 0 var(--s-lg);
  padding-top: 0;
}
.quiz-step-kontakt form .form-field { margin-top: 0; margin-bottom: var(--s-sm); }
.quiz-step-kontakt .form-label { margin-bottom: 4px; }
.quiz-step-kontakt .form-checkbox input { flex: 0 0 22px; width: 22px; height: 22px; accent-color: var(--accent); }

/* "So geht's weiter" — echte Sequenz, darum nummeriert */
.kontakt-next {
  margin: var(--s-lg) 0 0;
  padding: var(--s-md) var(--s-lg);
  background: var(--accent-tint);
  border-radius: 12px;
}
.kontakt-next-title { margin: 0 0 var(--s-xs); font-size: 14px; font-weight: 600; color: var(--ink); }
.kontakt-next-steps { margin: 0; padding-left: 1.2em; }
.kontakt-next-steps li { font-size: 14px; line-height: 1.5; color: var(--muted); margin-bottom: 4px; }
.kontakt-next-steps li strong { color: var(--ink); font-weight: 600; }
.kontakt-next-goal { margin: var(--s-sm) 0 0; font-size: 14px; font-weight: 500; color: var(--success); }
.kontakt-next-note { margin: var(--s-sm) 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Authority-Block: Dimitri */
.kontakt-dimitri {
  display: flex;
  gap: var(--s-md);
  align-items: flex-start;
  margin: var(--s-md) 0 0;
  padding: var(--s-md) 0 0;
  border-top: 1px solid var(--line);
}
.kontakt-dimitri img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.kd-name { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--ink); }
.kd-text { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.kd-proof { margin: 0; font-size: 13px; font-weight: 500; color: var(--success); }

/* --- KONTAKT-STEP: Match carry-over banner (value reframe) --- */
.kontakt-matchline {
  background: var(--accent-tint);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-md);
  padding: var(--s-md) var(--s-lg);
  margin-bottom: var(--s-lg);
  font-size: 15px;
  color: var(--ink-soft);
}
.kontakt-matchline strong { color: var(--accent); }

/* Kontakt-Trust-Card → dark anchor card (ink bg, light text in block above) */
.kontakt-trust {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* --- Mobile: forced line-breaks in großen Headlines aufheben (kein Clipping) --- */
@media (max-width: 640px) {
  .hero-display .brk,
  .final-display .brk,
  .problem-v2 h2 br,
  .persp h2 br,
  .stories h2 br { display: none; }
  .hero-display {
    font-size: clamp(23px, 6.2vw, 38px);
    line-height: 1.14;
    text-wrap: pretty;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .final-display { text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; }
  .problem-bullets li { font-size: 19px; padding-left: var(--s-xl); }
  /* Less dead space under the About text block on mobile */
  .about-editorial { padding-bottom: var(--s-2xl); }
}

/* Kontakt-Video: YouTube-iframe füllt den 16:9-Frame */
.kontakt-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================================
   V2 REWORK — impeccable craft + Emil micro-motion + GSAP showcase gating
   Brand bewahrt (Satoshi / Terracotta / Cream). Copy unberührt.
   ============================================================================ */
:root { --ease-emil: cubic-bezier(0.23, 1, 0.32, 1); }

/* ── Phase 2: Eyebrow-Pill → ein deliberates Mono-Kicker-System (Voice statt Tell) ── */
.eyebrow {
  background: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
}
.eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
/* Dark-Section-Kicker (gehalt = ink-bg) im selben System, nur Farbe angepasst */
.gehalt .eyebrow { background: none; padding: 0; color: #E9B59E; }

/* ── Phase 3: Typografie-Craft ── */
.hero-display, .section-head h2, .about-display, .final-display,
.live-jobs-h, #problem-h, #persp-h, #stories-h, #gehalt-h { text-wrap: balance; }
.hero-subhead, .lead, .pain-intro, .final-promise, .faq-item p,
.persp-card p, .problem-bullets li, .about-extra p, .story-card blockquote { text-wrap: pretty; }

/* ── Phase 5: Final-CTA Terracotta-Drench (eigene Art-Direction ggü. dunkler gehalt-Section) ── */
.final-cta-editorial { background: var(--accent); color: #FFF7F2; }
.final-cta-editorial .final-display { color: #FFF7F2; }
.final-cta-editorial .final-display em { color: var(--ink); }
.final-cta-editorial .final-mast { color: rgba(255,255,255,0.72); border-bottom-color: rgba(255,255,255,0.28); }
.final-cta-editorial .final-mast .mast-num { color: #FFF7F2; }
.final-cta-editorial .final-mast .mast-meta { color: #fff; }
.final-cta-editorial .final-cta-grid { border-top-color: rgba(255,255,255,0.28); }
.final-cta-editorial .final-btn { background: #FFF7F2; color: var(--accent-hover); border-color: #FFF7F2; }
.final-cta-editorial .final-btn:hover { background: #fff; color: var(--accent-hover); }
.final-cta-editorial .final-secondary { color: rgba(255,255,255,0.82); }
.final-cta-editorial .final-secondary a { color: #fff; text-decoration-color: rgba(255,255,255,0.65); }
.final-cta-editorial .final-hours { color: rgba(255,255,255,0.7); }
.final-cta-editorial .final-promise { color: #fff; }
.final-cta-editorial .final-promise strong { color: #fff; }

/* ── Phase 4: Emil micro-interactions (custom curves, press feedback) ── */
.btn {
  transition: background-color 0.2s var(--ease-emil), border-color 0.2s var(--ease-emil),
              color 0.2s var(--ease-emil), transform 0.13s var(--ease-emil);
}
.btn:active { transform: scale(0.97); }
.job-tab, .faq-item summary { transition: transform 0.13s var(--ease-emil), color 0.2s var(--ease-emil); }
.job-tab:active, .faq-item summary:active { transform: scale(0.985); }

/* ── Phase 4: GSAP showcase gating (only when JS+GSAP active) ── */
html.gsap-active .hero-editorial .masthead-line,
html.gsap-active .hero-editorial .hero-display,
html.gsap-active .hero-editorial .hero-subhead,
html.gsap-active .hero-editorial .hero-cta-row { animation: none; opacity: 0; }
html.gsap-active .reveal { transition: none !important; will-change: transform, opacity, filter; }
html.gsap-active .pain-banner { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html.gsap-active .hero-editorial .masthead-line,
  html.gsap-active .hero-editorial .hero-display,
  html.gsap-active .hero-editorial .hero-subhead,
  html.gsap-active .hero-editorial .hero-cta-row { opacity: 1; }
  .btn:active, .job-tab:active, .faq-item summary:active { transform: none; }
}

/* ── Google rating proof island (.gproof) — editorial, on-brand, clickable ── */
#google-proof-mount { display: flex; justify-content: center; margin-top: var(--s-2xl); }
.gproof {
  display: inline-flex;
  align-items: center;
  gap: var(--s-lg);
  padding: var(--s-md) var(--s-lg);
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.18s var(--ease-emil), box-shadow 0.18s var(--ease-emil), border-color 0.18s var(--ease-emil);
}
.gproof:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 6px 20px rgba(28,29,51,0.07); }
.gproof:active { transform: translateY(0) scale(0.99); }
.gproof-logo { display: inline-flex; flex: 0 0 auto; }
.gproof-main { display: flex; flex-direction: column; gap: 3px; }
.gproof-top { display: flex; align-items: center; gap: var(--s-sm); }
.gproof-rating {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.gproof-stars { position: relative; display: inline-block; font-size: 18px; line-height: 1; letter-spacing: 1px; }
.gproof-stars-bg { color: var(--accent-soft); }
.gproof-stars-fg { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: var(--accent); }
.gproof-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.gproof-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--s-sm);
  padding-left: var(--s-lg);
  border-left: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
}
.gproof-cta svg { transition: transform 0.18s var(--ease-emil); }
.gproof:hover .gproof-cta svg { transform: translateX(3px); }
@media (max-width: 560px) {
  .gproof { flex-direction: column; gap: var(--s-sm); text-align: center; padding: var(--s-lg); }
  .gproof-top { justify-content: center; }
  .gproof-cta { margin-left: 0; padding-left: 0; border-left: none; padding-top: var(--s-sm); border-top: 1px solid var(--line); }
}

/* ── impeccable polish: keyboard a11y focus-visible states (were missing) ── */
.btn:focus-visible,
.nav-links a:focus-visible,
.job-tab:focus-visible,
.faq-item summary:focus-visible,
.gproof:focus-visible,
.footer-links a:focus-visible,
.final-secondary a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.final-cta-editorial .final-btn:focus-visible,
.final-cta-editorial .final-secondary a:focus-visible { outline-color: #FFF7F2; }

/* ── impeccable polish: honour reduced-motion on the new hover/press micro-motion ── */
@media (prefers-reduced-motion: reduce) {
  .gproof, .gproof:hover, .gproof:active { transform: none; transition: none; }
  .gproof:hover .gproof-cta svg { transform: none; }
}

/* Terminseite (termin.html): eigener Schritt zwischen Kontakt und Lebenslauf */
.termin-widget { margin-top: var(--s-lg); }
.termin-widget .calendly-inline-widget { width: 100%; }
.termin-skip { justify-content: center; margin-top: var(--s-md); }
.termin-skip .step-back { font-size: 14px; color: var(--muted); }
.termin-wunschzeit { margin-top: var(--s-lg); }

/* Zustimmungsreihe: vier Punkte zwischen zwei Klartext-Enden. Die aeusseren
   Punkte sind groesser, dadurch hat die Reihe eine Richtung ohne Zahlen und
   ohne Beschriftung an jedem Punkt. */
.likert { padding-top: var(--s-2xs); }
.likert-reihe {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-xs);
  padding: var(--s-sm) var(--s-2xs) var(--s-md);
}
/* Verbindungslinie hinter den Punkten, damit die vier als eine Skala lesen. */
.likert-reihe::before {
  content: '';
  position: absolute; left: 10%; right: 10%; top: calc(50% - 6px);
  height: 1px; background: var(--line-strong);
}
.likert-punkt {
  position: relative;
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 56px;
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.likert-kreis {
  width: var(--gr); height: var(--gr);
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: #fff;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.likert-punkt:hover .likert-kreis { border-color: var(--accent); transform: scale(1.1); }
.likert-punkt.selected .likert-kreis {
  border-color: var(--accent); background: var(--accent);
  box-shadow: 0 0 0 4px rgba(194, 86, 43, 0.16);
}
.likert-punkt:focus-visible { outline: none; }
.likert-punkt:focus-visible .likert-kreis { outline: 2px solid var(--accent); outline-offset: 4px; }
.likert-anker {
  display: flex; justify-content: space-between; gap: var(--s-md);
  font-size: 13px; color: var(--muted);
}
.likert-anker span:last-child { text-align: right; }
.likert-wahl {
  margin: var(--s-md) 0 0;
  min-height: 24px;
  text-align: center;
  font-size: 15px; font-weight: 600; color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .likert-punkt:hover .likert-kreis { transform: none; }
}

/* Ort-Block der PLZ-Frage: kommt erst, wenn die Remote-Frage beantwortet ist. */
.ort-block { margin-top: var(--s-lg); }
.ort-enter { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.ort-enter-start { opacity: 0; transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  .ort-enter { transition: none; }
  .ort-enter-start { opacity: 1; transform: none; }
}

.form-textarea { resize: vertical; min-height: 88px; font-family: inherit; }

/* ============================================================
   Quiz-Bewegung und Optik, uebernommen aus dem Bewerbungsbutler-Funnel
   (16.08.2026). Uebernommen wurde die Mechanik, nicht die Farbwelt:
   Buchstaben-Marker, Anheben beim Hover, Ring bei Auswahl, Einblenden
   pro Frage. Farben, Radien und Schatten bleiben die von G&M Finance.
   ============================================================ */
.frage-fade { animation: frage-fade 260ms var(--ease-out) both; }
@keyframes frage-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Optionen laufen leicht versetzt ein, das fuehrt das Auge nach unten. */
.frage-fade .option-list > * { animation: option-in 260ms var(--ease-out) both; }
.frage-fade .option-list > *:nth-child(1) { animation-delay: 40ms; }
.frage-fade .option-list > *:nth-child(2) { animation-delay: 80ms; }
.frage-fade .option-list > *:nth-child(3) { animation-delay: 120ms; }
.frage-fade .option-list > *:nth-child(4) { animation-delay: 160ms; }
.frage-fade .option-list > *:nth-child(5) { animation-delay: 200ms; }
.frage-fade .option-list > *:nth-child(6) { animation-delay: 240ms; }
/* Ohne Auffangregel laeuft jede weitere Option mit Verzoegerung 0 los und
   erscheint damit VOR den ersten fuenf. Faellt bei "Etwas anderes" auf. */
.frage-fade .option-list > *:nth-child(n+7) { animation-delay: 280ms; }
/* Kein opacity im to-Schritt. Die Animation laeuft mit fill-mode "both" und haelt
   ihren Endwert fest: stand da "opacity: 1", war .option.disabled dauerhaft
   ueberstimmt und gesperrte Optionen wurden nie ausgegraut. Ohne den Wert
   blendet sie gegen die eigene Deckkraft der Option ein und gibt sie danach frei. */
@keyframes option-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .frage-fade, .frage-fade .option-list > * { animation: none; }
}

/* Groessere Trefferflaeche fuers Handy, plus das Anheben beim Hover. */
.option { min-height: 56px; align-items: center; box-shadow: var(--shadow-xs); }
@media (min-width: 768px) { .option { min-height: 64px; padding: 18px 22px; } }
.option:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.option.selected { box-shadow: 0 0 0 3px rgba(194, 86, 43, 0.16); }
.option.disabled:hover { transform: none; box-shadow: var(--shadow-xs); }

/* Buchstaben-Marker auf den Ein-Tipp-Schirmen. Auf Mehrfachauswahl bleibt
   die Checkbox, dort muss der Unterschied sichtbar bleiben. */
.option-buchstabe {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--bg-alt); color: var(--muted);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 600;
  /* Kein letter-spacing: der Sperrabstand haengt auch hinter dem letzten Zeichen und
     schiebt bei einem einzelnen Buchstaben oder Haken alles aus der Mitte.
     line-height: 1, damit die Zeilenbox nicht hoeher ist als das Zeichen selbst. */
  line-height: 1;
  transition: all 160ms var(--ease-out);
}
.option:hover .option-buchstabe { background: var(--ink); color: #fff; }
.option.selected .option-buchstabe { background: var(--accent); color: #fff; }

/* Fortschritt springt am Ende auf die Bestaetigungsfarbe. */
.quiz-progress-bar.is-complete { background: var(--success); box-shadow: none; }

.quiz-dauer {
  margin-top: var(--s-lg);
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-soft);
}

/* Rueckmeldung beim Antippen: die Option quittiert kurz, bevor der Schirm
   wechselt. Ohne das wirkt der Auto-Weiter wie ein Fehlklick. */
.option.selected { animation: option-quittung 260ms var(--ease-out); }
@keyframes option-quittung {
  0%   { transform: none; }
  30%  { transform: scale(0.985); }
  100% { transform: none; }
}
.option.selected .option-buchstabe { animation: buchstabe-quittung 260ms var(--ease-out); }
@keyframes buchstabe-quittung {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .option.selected, .option.selected .option-buchstabe { animation: none; }
}

/* ── Pruefschritt vor dem Kontaktformular ──────────────────────────────────
   Liegt ueber dem Quiz, damit der Sprung zum Kontaktformular nicht wie ein
   Ruckler wirkt. Jede Zeile benennt einen echten Schritt, kein Fake-Balken. */
.quiz-pruefung {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-lg);
  background: var(--bg);
  opacity: 0; visibility: hidden;
  transition: opacity 240ms var(--ease-out), visibility 240ms;
}
.quiz-pruefung.is-visible { opacity: 1; visibility: visible; }
.quiz-pruefung-card {
  width: 100%; max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--s-xl) var(--s-lg);
}
.quiz-pruefung-eyebrow {
  margin: 0 0 var(--s-2xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.quiz-pruefung-h {
  margin: 0 0 var(--s-lg);
  font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--ink);
}
.pruef-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-sm);
}
.pruef-zeile {
  display: flex; align-items: center; gap: var(--s-sm);
  font-size: 15px; line-height: 1.4; color: var(--muted-soft);
  opacity: .5;
  transition: opacity 240ms var(--ease-out), color 240ms var(--ease-out);
}
.pruef-zeile.is-active { opacity: 1; color: var(--muted); }
.pruef-zeile.is-done { opacity: 1; color: var(--ink); }
.pruef-haken {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: #fff;
  color: transparent;
  transition: background 240ms var(--ease-out), border-color 240ms var(--ease-out), color 240ms var(--ease-out);
}
.pruef-haken svg { display: block; }
.pruef-zeile.is-active .pruef-haken {
  border-color: var(--accent);
  animation: pruef-puls 1000ms ease-in-out infinite;
}
.pruef-zeile.is-done .pruef-haken {
  background: var(--success); border-color: var(--success); color: #fff;
  animation: none;
}
@keyframes pruef-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 86, 43, .24); }
  50%      { box-shadow: 0 0 0 6px rgba(194, 86, 43, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-pruefung { transition: none; }
  .pruef-zeile.is-active .pruef-haken { animation: none; }
}