/* ==============================================================
   valuable-data.io — Design-Layer
   Tokens exakt nach Style Guide (PLAN.md §2). Neutrale Abstufungen
   werden aus Schwarz-Transparenzen abgeleitet, keine neuen Farben.
   ============================================================== */

/* --------------------------------------------------------------
   Fonts (lokal gehostet, DSGVO)
   -------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Saira';
  src: url('/assets/fonts/saira-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Saira Condensed';
  src: url('/assets/fonts/saira-condensed-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------
   Tokens
   -------------------------------------------------------------- */
:root {
  --color-black:        #000000; /* Text (Black Digital) */
  --color-black-analog: #0d060a; /* dunkle Großflächen */
  --color-accent:       #0891b2; /* Cyan-Blue Accent */
  --color-accent-hover: #0e7490; /* Cyan-Blue Hover */
  --color-grey-soft:    #f1f5f9; /* Soft Cool Grey, sparsam */
  --color-hero-bg: #eff2f9; /* in den Hero-Animationen eingebackene Hintergrundfarbe, nicht mit --color-grey-soft verwechseln */
  --color-white:        #ffffff;

  /* abgeleitete Neutralwerte (keine neuen Brandfarben) */
  --ink-70: rgba(0, 0, 0, 0.70);
  --ink-45: rgba(0, 0, 0, 0.45);
  --line:   rgba(13, 6, 10, 0.12);
  --line-strong: rgba(13, 6, 10, 0.25);
  --paper-70: rgba(255, 255, 255, 0.72);

  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-btn: 2px;   /* ~0,5 mm laut Style Guide */
  --radius-card: 4px;

  --container: 72rem;
  --space-section: clamp(2.5rem, 6vw, 4.5rem);
  --space-gap: clamp(1.25rem, 3vw, 2rem);
}

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

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

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-black);
  background: var(--color-white);
  overflow-wrap: break-word; /* lange URLs/Mail-Adressen brechen statt Overflow (320 px) */
}

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

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  /* Fester Abstand (rem statt em) → letztes Heading zu Text/Untertitel ist
     über alle Größen und Seiten einheitlich; Headings stehen enger zusammen. */
  margin: 0 0 0.5rem;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

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

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-accent);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------
   Buttons — Radius ~2px, Inter Bold (Style Guide)
   -------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-white);
}

.btn--ghost {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn--ghost:hover {
  color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Ghost-Variante auf dunklem Grund */
.btn--ghost-light {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.btn--ghost-light:hover { color: var(--color-white); opacity: 0.85; }

.btn--small { padding: 0.6rem 1.1rem; font-size: 0.9rem; }
.btn--large { padding: 1.05rem 2rem; font-size: 1.05rem; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.link-button:hover { text-decoration: underline; }

/* --------------------------------------------------------------
   Header / Navigation
   -------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}
.site-header__logo img { width: clamp(150px, 22vw, 210px); height: auto; }

/* Logo-SVG hat ~7,36 % Leerraum links (Ink beginnt erst bei x=39,5/536,85).
   translateX gleicht das aus -> sichtbares Logo bündig zur Inhaltskante,
   skaliert automatisch mit der jeweiligen Logobreite. */
.site-header__logo img,
.site-footer__brand img { transform: translateX(-7.36%); }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}
.site-nav a:not(.btn) {
  color: var(--color-black);
  font-weight: 600;
  font-size: 0.95rem;
}
.site-nav a:not(.btn):hover { color: var(--color-accent); text-decoration: none; }
.site-nav a[aria-current="page"] {
  color: var(--color-accent);
}

/* Mobile-Navigation: CSS-only (Checkbox), kein JS nötig.
   Auf Desktop komplett aus (kein Tab-Stop, Nav ohnehin sichtbar). */
.nav-toggle { display: none; }
.nav-toggle__label { display: none; }

@media (max-width: 47rem) {
  /* Checkbox off-screen statt display:none, damit sie per Tastatur
     fokussierbar bleibt und die Nav auch ohne Maus geöffnet werden kann. */
  .nav-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
  }
  .nav-toggle__label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    /* Volle 44x44 px Tap-Fläche (Apple/Google-Empfehlung); Icon bleibt zentriert */
    width: 44px;
    height: 44px;
    margin-right: -0.6rem;
    cursor: pointer;
  }
  .nav-toggle:focus-visible ~ .nav-toggle__label {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  .nav-toggle__label span {
    width: 22px;
    height: 2px;
    background: var(--color-black);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    background: var(--color-white);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem clamp(1rem, 4vw, 2rem) 1rem;
    gap: 0.25rem;
  }
  /* Menü-Links als volle Zeilen mit ~46 px Höhe für bequemes Tippen */
  .site-nav a:not(.btn) {
    padding-block: 0.7rem;
  }
  /* CTA-Button im Menü ebenfalls auf ~44 px Tap-Höhe */
  .site-nav .btn {
    padding-block: 0.85rem;
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .nav-toggle:checked ~ .nav-toggle__label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle__label span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-toggle__label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* --------------------------------------------------------------
   Sektionen
   -------------------------------------------------------------- */
.section { padding-block: var(--space-section); }
.section--grey { background: var(--color-grey-soft); }
.section--dark {
  background: var(--color-black-analog);
  color: var(--color-white);
}
.section--dark h2 { color: var(--color-white); }
.section--dark p { color: var(--paper-70); }

.section__intro {
  max-width: 44rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.section__intro p { color: var(--ink-70); }
.section--dark .section__intro p { color: var(--paper-70); }

.eyebrow {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-accent);
  margin-bottom: 0.6rem;
}

/* --------------------------------------------------------------
   Hero
   -------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 7vw, 5rem); }
.hero__inner { max-width: 50rem; }
.hero p.hero__sub {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--ink-70);
  max-width: 40rem;
  margin-bottom: 2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* dezente Datenlinie unter der Hero-Headline (Signatur, sparsam) */
.hero h1::after {
  content: '';
  display: block;
  width: 4.5rem;
  height: 3px;
  background: var(--color-accent);
  margin-top: 1.4rem;
}

/* Hero-Variante mit animiertem Visual (Designmuster artre.gmbh/valuable-data) */
.hero--visual { background: var(--color-hero-bg); border-bottom: 1px solid var(--line); }
.hero--visual .split { align-items: center; }
.hero__media { display: flex; align-items: center; justify-content: center; }
.hero__media img { display: block; width: 100%; max-width: 35rem; height: auto; }
.hero__intro { display: flex; flex-direction: column; justify-content: center; }

/* Abschluss-CTA im Hero-Look (statisches Visual links, Text rechts) */
.cta--visual { background: var(--color-hero-bg); border-top: 1px solid var(--line); }
.cta--visual .split { align-items: center; }
.cta--visual h2::after {
  content: '';
  display: block;
  width: 4.5rem;
  height: 3px;
  background: var(--color-accent);
  margin-top: 1.4rem;
}
.cta--visual .hero__intro p {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--ink-70);
  max-width: 40rem;
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------
   Karten-Grids
   -------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-gap);
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 62rem) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  padding: clamp(1.4rem, 3vw, 2rem);
  /* Einheitlicher Box-Stil: kräftigere Linie + dezenter Schatten */
  box-shadow: 0 1px 2px rgba(13, 6, 10, 0.05), 0 10px 24px rgba(13, 6, 10, 0.06);
}
/* CTA am unteren Kartenrand, damit Buttons über alle Karten einer Reihe fluchten */
.card__cta { margin-top: auto; margin-bottom: 0; padding-top: 0.9rem; }

.card h3 { margin-bottom: 0.35rem; }
.card__icon { display: block; width: 3rem; height: 3rem; margin-bottom: 0.9rem; }
.card__kicker {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-accent);
  margin-bottom: 0.6rem;
}
.card p:not(.card__kicker) { color: var(--ink-70); font-size: 0.98rem; }

/* --------------------------------------------------------------
   Warum-Liste (4 Punkte)
   -------------------------------------------------------------- */
.why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-gap);
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 40rem) { .why-list { grid-template-columns: 1fr; } }

.why-list li {
  border-top: 2px solid var(--line-strong);
  padding-top: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-content: start;
}
.why-list__icon { display: block; width: 3rem; height: 3rem; grid-row: 1 / 3; }
.why-list strong { display: block; margin-bottom: 0.3rem; font-size: 1.05rem; }
.why-list span { color: var(--ink-70); font-size: 0.98rem; }

/* --------------------------------------------------------------
   Team (horizontale Karten: Foto-Platzhalter links, Text rechts)
   -------------------------------------------------------------- */
.team-member {
  display: flex;
  flex-direction: row;
  gap: 1.2rem;
  align-items: flex-start;
  text-align: left;
}
.team-member__body { min-width: 0; }
.team-member h3 { margin-bottom: 0.1rem; }
.team-member__role {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
}
.team-member__photo {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--color-grey-soft);
  border: 1px solid var(--line-strong);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  overflow: hidden;
}
.team-member__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 24rem) {
  .team-member__photo { width: 72px; height: 72px; font-size: 1.2rem; }
}

/* --------------------------------------------------------------
   Pain-Blöcke mit Studien-Zahl (Signatur: große Messwerte)
   -------------------------------------------------------------- */
.pain {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.pain__quote {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
.pain__text { color: var(--ink-70); font-size: 0.98rem; }
.pain__stat {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
}
.pain__stat-number {
  display: block;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  line-height: 1;
}
.pain__stat-label {
  display: block;
  color: var(--ink-45);
  font-size: 0.88rem;
  line-height: 1.5;
  margin-top: 0.45rem;
  /* Bis zu 3 Zeilen reservieren, damit Kennzahl und Trennlinie über alle Karten auf gleicher Höhe fluchten */
  min-height: 4.5em;
}

.pain-sources {
  margin-top: 1.4rem;
  font-size: 0.8rem;
  color: var(--ink-45);
  line-height: 1.6;
}
.pain-sources sup { margin-right: 0.15em; }

/* Fußnoten-Sup darf die Zeilenbox nicht aufweiten, sonst fluchten die Trennlinien nicht */
.pain__stat-label sup { line-height: 0; }

/* Schmale Dreier-Spalten (992-1199px): längere Labels brauchen 4 Zeilen Budget */
@media (min-width: 992px) and (max-width: 1199px) {
  .pain__stat-label { min-height: 6em; }
}

/* --------------------------------------------------------------
   Packages
   -------------------------------------------------------------- */
.package {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  scroll-margin-top: 6.5rem; /* Deep-Link landet unter Sticky-Header */
}
.package__num {
  font-size: 0.9rem; /* einheitliche Eyebrow-Größe */
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-accent);
}
.package__claim {
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 0.7rem;
}
.package ul {
  margin: 0 0 1.1rem;
  padding-left: 1.1rem;
  color: var(--ink-70);
  font-size: 0.95rem;
}
.package ul li { margin-bottom: 0.35rem; }
.card p.package__meta {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-45);
  /* Bis zu 2 Zeilen reservieren, damit die Trennlinie je Reihe auf gleicher Höhe fluchtet */
  min-height: calc(0.9rem + 3em);
}
.card p.package__result {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  /* Bis zu 2 Zeilen reservieren, damit die Trennlinie je Reihe auf gleicher Höhe fluchtet */
  min-height: calc(0.9rem + 3em);
}
.card p.package__price {
  margin-top: 0.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-black);
}
/* Netto-Zeile unter dem Karten-Grid der Säulen-Seiten */
.packages-note {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: var(--ink-45);
}
.package .btn { margin-top: 1.1rem; align-self: flex-start; }
.package__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.1rem;
}
.package__actions .btn { margin-top: 0; }

.grid--packages { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 40rem) {
  .grid--packages { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------
   CTA-Band (dunkel)
   -------------------------------------------------------------- */
.cta-band { text-align: left; }
.cta-band .btn { margin-top: 1.6rem; }

/* --------------------------------------------------------------
   Assessment (AI-Readiness Check)
   -------------------------------------------------------------- */
.assessment {
  max-width: 44rem;
  scroll-margin-top: 6.5rem; /* Scroll je Frage landet unter dem Sticky-Header, Progress-Bar bleibt sichtbar */
}
/* Der Ergebnis-Screen (Score + Formular, Vorschau daneben) braucht die volle
   Containerbreite. Fragen und Detail-Auswertung bleiben bei 44rem, dort hält
   die schmale Spalte Zeilenlänge und Optionslisten lesbar. */
.assessment--wide { max-width: var(--container); }

/* Statischer Kopf über dem Check: trägt die H1 (SEO, Screenreader) und den
   No-JS-Hinweis. Nur auf Frage 1 sichtbar — ab Frage 2 und auf den
   Ergebnis-Screens blendet assessment.js ihn aus (hidden-Attribut). Der
   frühere Intro-Screen mit Start-Button ist entfallen — Frage 1 rendert
   direkt beim Seitenaufruf. */
.assessment__head { margin-bottom: 2rem; }

/* Auf Frage 1 ist der Zurück-Button versteckt (hidden-Attribut); der
   Weiter-Button soll trotzdem rechts stehen wie auf allen anderen Fragen. */
.assessment__nav .btn[hidden] + .btn { margin-left: auto; }

.assessment__progress {
  height: 4px;
  background: var(--color-grey-soft);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 1.4rem; /* darunter folgt direkt das Step-Label */
}
.assessment__progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: width 0.25s ease;
}
/* Steht zwischen Progress-Bar und Frage; 1.05rem, damit Fragen-Zähler und
   Countdown-Badge klar wahrgenommen werden (gleiche Größe wie der
   Vorschau-Titel .result-preview__title) */
.assessment__step-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-accent);
  margin-bottom: 1.1rem;
}
/* Countdown-Badge der letzten fünf Fragen („Nur noch x Fragen"), rechtsbündig */
.assessment__countdown {
  background: rgba(8, 145, 178, 0.08);
  color: var(--color-accent);
  border-radius: 999px;
  padding: 0.1rem 0.65rem;
  margin-left: auto;
}

.assessment fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
.assessment legend {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 1.4rem;
  padding: 0;
}

.option {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 0.95rem 1.1rem;
  margin-bottom: 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.option:hover { border-color: var(--color-accent); }
.option input {
  accent-color: var(--color-accent);
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.option--selected {
  border-color: var(--color-accent);
  background: rgba(8, 145, 178, 0.06);
}

.assessment__nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.8rem;
}

/* Score-Kreis (Ergebnis-Screen + Detail — gleiche Größe auf beiden Screens,
   ein Größensprung zwischen Gate und Detail sähe wie ein Fehler aus). 140px,
   damit Score, Formular und Absenden-Button auf dem Ergebnis-Screen ohne
   Scrollen sichtbar sind (Referenz: 900px Viewport-Höhe). */
.score-circle {
  --pct: 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--color-white) 82%, transparent 83% 100%),
    conic-gradient(var(--color-accent) calc(var(--pct) * 1%), var(--color-grey-soft) 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.score-circle__value {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.score-circle__unit { font-size: 0.9rem; color: var(--ink-45); }

.result__stage {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  margin: 1rem 0 0.3rem;
}
.result__note { color: var(--ink-70); max-width: 34rem; }

/* Ergebnis und Formular auf einem Screen: Luft zwischen der Kurzeinordnung
   und dem ersten Formularfeld (der globale Fehlerhinweis davor ist auch
   unsichtbar ein Geschwister-Element, daher der +-Selektor). */
.result__main .form-error-global + .form-field { margin-top: 1.2rem; }

/* Kompaktes Gate-Formular: zusammen mit dem kleineren Score-Kreis sollen
   Score, Formular und Absenden-Button ohne Scrollen sichtbar sein
   (Referenz: 900px Viewport-Höhe). Nur hier — das Buchungsformular behält
   die Standard-Abstände. */
.result__main .form-field { margin-bottom: 0.85rem; }
.result__main .form-field input {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.result__main .form-consent { margin-top: 0.2rem; }

/* Zwei-Spalten-Layout des Ergebnis-Screens: links Score und Formular, rechts
   die Vorschau auf die Detail-Auswertung. minmax(0, 1fr), damit lange Wörter
   die Spalte nicht aufziehen. stretch, damit beide Spalten gleich hoch enden —
   Boxen gleicher Höhe sind die Layoutlinie der ganzen Website. */
.result--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-gap);
  align-items: stretch;
}
@media (max-width: 62rem) {
  .result--split { grid-template-columns: 1fr; }
}

/* Im Split-Layout steht das Eyebrow („Ihr Ergebnis") auf gleicher Höhe neben
   dem Vorschau-Titel — gleiche Größe, sonst wirkt der Unterschied wie ein
   Versehen. Eyebrows über großen Überschriften bleiben bei 0.9rem. */
.result--split .eyebrow { font-size: 1.05rem; }

/* Kopf der Vorschau-Box: Nutzenversprechen für die E-Mail-Eingabe (H2 +
   Untertext) — steht in der Box statt über dem Formular, damit die linke
   Spalte kurz bleibt und der Absenden-Button ohne Scrollen erreichbar ist */
.result-preview__head {
  font-size: 1.45rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}
.result-preview__sub {
  color: var(--ink-70);
  font-size: 0.95rem;
  margin: 0 0 1.3rem;
}

/* Titel der Vorschau-Box — bewusst größer als ein Eyebrow (gleiche Größe wie
   .assessment__step-label), damit der Lead die Vorschau klar wahrnimmt */
.result-preview__title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-accent);
  margin-bottom: 0.9rem;
}

/* Vorschau-Box: deckt das schwächste Themenfeld komplett auf und lässt den Rest
   sichtbar gesperrt. Einheitlicher Box-Stil (Soft Grey, kräftigere Linie, dezenter
   Schatten). */
.result-preview {
  background: var(--color-grey-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(13, 6, 10, 0.05), 0 10px 24px rgba(13, 6, 10, 0.06);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  /* Flex-Spalte, damit die Fußnote bei gestreckter Box (align-items: stretch
     im Split-Layout) an den unteren Rand rückt statt Leerraum zu hinterlassen */
  display: flex;
  flex-direction: column;
}
/* Der aufgedeckte Block nutzt die .theme-block-Optik der Detail-Auswertung,
   steht hier aber allein — kein Abstand nach unten nötig. */
.result-preview .theme-block { margin-bottom: 0; }

.result-preview__locked {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}
.result-preview__locked li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink-45);
}
.result-preview__lock {
  flex-shrink: 0;
  width: 0.9rem;
  height: 0.9rem;
}
.result-preview__note {
  /* margin-top: auto schiebt die Fußnote in der Flex-Spalte nach unten;
     padding-top sichert den Mindestabstand, wenn die Box nicht gestreckt ist */
  margin: auto 0 0;
  padding-top: 1rem;
  font-size: 0.85rem;
  color: var(--ink-70);
}

.result-detail { margin-top: 2.5rem; }
.result-recommendation { border: 2px solid var(--color-accent); }
.result-recommendation__steps-title { margin-top: 1.2rem; font-weight: 600; }
.result-steps { margin: 0.6rem 0 0; padding-left: 1.3rem; }
.result-steps li { margin-bottom: 0.35rem; }

/* Themenblock-Auswertung (Detail-Ergebnis nach dem Gate) */
.result-themes { margin-top: 2.5rem; }
.result-themes h2 { margin-bottom: 1.2rem; }
.theme-block {
  background: var(--color-white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(13, 6, 10, 0.05), 0 10px 24px rgba(13, 6, 10, 0.06);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1rem;
}
.theme-block:last-child { margin-bottom: 0; }
.theme-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
}
.theme-block__head h3 { margin: 0; font-size: 1.05rem; }
.theme-block__score {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}
.theme-block__bar {
  height: 0.45rem;
  margin: 0.7rem 0 0.9rem;
  background: var(--color-grey-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.theme-block__bar-fill {
  display: block;
  height: 100%;
  background: var(--color-accent);
  border-radius: 999px;
}
.theme-block__text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-70);
}

/* --------------------------------------------------------------
   Formulare (E-Mail-Gate)
   -------------------------------------------------------------- */
.form-field { margin-bottom: 1.2rem; text-align: left; }
.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
.form-field input[type="text"],
.form-field input[type="email"] {
  width: 100%;
  font: inherit;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: var(--color-white);
}
.form-field input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
  border-color: var(--color-accent);
}
.form-field--error input { border-color: #b91c1c; }
.form-field__error {
  color: #b91c1c;
  font-size: 0.85rem;
  margin-top: 0.3rem;
  display: none;
}
.form-field--error .form-field__error { display: block; }

.form-consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--ink-70);
  text-align: left;
  margin-bottom: 1.4rem;
}
.form-consent input { accent-color: var(--color-accent); margin-top: 0.2rem; }

/* Honeypot: für Menschen unsichtbar */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error-global {
  color: #b91c1c;
  font-size: 0.92rem;
  margin-bottom: 1rem;
  display: none;
}
.form-error-global--visible { display: block; }

/* --------------------------------------------------------------
   Consent-Banner (cookieconsent v3, assets/vendor/cookieconsent/)
   Nur Brand-Overrides über die Plugin-Variablen; Layout kommt vom Plugin.
   DSGVO: Akzeptieren & Ablehnen gleiche Optik (equalWeightButtons in
   consent-init.js).
   -------------------------------------------------------------- */
#cc-main {
  --cc-font-family: inherit;
  --cc-btn-primary-bg: var(--color-accent);
  --cc-btn-primary-border-color: var(--color-accent);
  --cc-btn-primary-hover-bg: var(--color-accent-hover);
  --cc-btn-primary-hover-border-color: var(--color-accent-hover);
  --cc-toggle-on-bg: var(--color-accent);
  --cc-link-color: var(--color-accent);
}

/* --------------------------------------------------------------
   Footer
   -------------------------------------------------------------- */
.site-footer {
  background: var(--color-black-analog);
  color: var(--paper-70);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  font-size: 0.92rem;
}
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.site-footer__brand img { width: 180px; margin-bottom: 1rem; }
.site-footer__brand p { color: var(--paper-70); }
.site-footer__links {
  display: flex;
  gap: clamp(2rem, 6vw, 4rem);
  flex-wrap: wrap;
}
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: flex-start;
}
.site-footer__nav a,
.site-footer__nav .link-button {
  color: var(--color-white);
  font-size: 0.92rem;
}
.site-footer__nav a:hover { color: var(--color-white); }

/* Newsletter-Anmeldung (Footer dunkel, Ergebnisseite hell) */
.site-footer__newsletter {
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.newsletter__title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}
.newsletter--footer .newsletter__title { color: var(--color-white); }
.newsletter__lead { margin-bottom: 1rem; }
.newsletter__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.newsletter__row input[type="email"] {
  flex: 1 1 14rem;
  max-width: 24rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  font: inherit;
  color: var(--color-black);
  background: var(--color-white);
}
.newsletter__row input[type="email"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.newsletter__hint {
  margin-top: 0.7rem;
  font-size: 0.8rem;
}
.newsletter--footer .newsletter__hint { color: var(--paper-70); }
.newsletter--footer .newsletter__hint a { color: var(--color-white); text-decoration: underline; }
.newsletter--result .newsletter__hint { color: var(--ink-45); }
.newsletter__message { margin-top: 0.7rem; font-weight: 600; }
.newsletter--footer .newsletter__message { color: var(--color-white); }
.newsletter__message--error { color: #fca5a5; }
.newsletter--footer .newsletter__message--error { color: #fca5a5; }
.newsletter--result .newsletter__message--error { color: #b91c1c; }
.newsletter--result {
  margin-top: 2.5rem;
  border-top: 2px solid var(--line-strong);
  padding-top: 1.4rem;
}

/* --------------------------------------------------------------
   Erstgespräch / Terminbuchung
   -------------------------------------------------------------- */
/* Buchungstool (eigenes, Optik wie das Google-Widget in Brand-Farben) */
.booking__heading { margin-bottom: 0.25rem; }
.booking__hint { font-size: 0.9rem; color: var(--ink-45); margin-bottom: 1.25rem; }
.booking__status { color: var(--ink-45); }

.booking__monthnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.booking__monthtitle { font-weight: 600; margin: 0; }
.booking__navbtn {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--color-white);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.booking__navbtn:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.booking__navbtn:disabled { opacity: 0.35; cursor: default; }

.booking__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  justify-items: center;
}
.booking__wd {
  font-size: 0.75rem;
  color: var(--ink-45);
  padding-bottom: 0.25rem;
}
.booking__day {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.95rem;
  border: 0;
  background: none;
}
.booking__day--aus { color: var(--ink-45); opacity: 0.45; }
.booking__day--frei {
  background: rgba(8, 145, 178, 0.12);
  color: var(--color-accent);
  font-weight: 600;
  cursor: pointer;
}
.booking__day--frei:hover { background: var(--color-accent); color: var(--color-white); }

.booking__back {
  border: none;
  background: none;
  padding: 0;
  color: var(--color-accent);
  cursor: pointer;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.booking__back:hover { color: var(--color-accent-hover); text-decoration: underline; }

.booking__daytitle,
.booking__summary { font-weight: 600; margin-bottom: 0.75rem; }

.booking__times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.5rem;
}
.booking__time {
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-btn);
  background: var(--color-white);
  color: var(--color-accent);
  font-weight: 600;
  cursor: pointer;
}
.booking__time:hover { background: var(--color-accent); color: var(--color-white); }

.booking__form { display: flex; flex-direction: column; gap: 0.9rem; }
.booking__field { display: flex; flex-direction: column; gap: 0.3rem; }
.booking__field label { font-weight: 600; font-size: 0.95rem; }
.booking__field input {
  width: 100%;
  font: inherit;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: var(--color-white);
}
.booking__field input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
  border-color: var(--color-accent);
}

.booking__consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--ink-70);
}
.booking__consent input { accent-color: var(--color-accent); margin-top: 0.2rem; }

.booking__message { color: #b91c1c; font-size: 0.9rem; margin: 0; }
.booking__done h3 { margin-bottom: 0.5rem; }

/* Buchungs-Admin: Tabelle der kommenden Buchungen (einzige Tabelle der Site) */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th,
.admin-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
}

/* --------------------------------------------------------------
   Untertitel unter h2 (ex-h3, jetzt normales Element für saubere Hierarchie)
   -------------------------------------------------------------- */
.section__lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-black);
  margin: 0 0 0.5rem;
}

/* --------------------------------------------------------------
   2-Box-Layout (Medien/Text nebeneinander, immer linksbündig)
   Reihenfolge folgt dem HTML: Foto zuerst -> links, Text zuerst -> links.
   -------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: stretch;
}
@media (max-width: 52rem) {
  .split { grid-template-columns: 1fr; }
}

/* Einheitliche Box: graue Füllung, kräftige Linie, dezenter Schatten */
.panel {
  background: var(--color-grey-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(13, 6, 10, 0.05), 0 10px 24px rgba(13, 6, 10, 0.06);
  padding: clamp(1.6rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.panel > :last-child { margin-bottom: 0; }
.panel .btn { align-self: flex-start; }

/* Häkchenliste (z. B. „Das erwartet Sie") */
.check-list {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
}
.check-list li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.55rem;
  color: var(--ink-70);
}
.check-list li:last-child { margin-bottom: 0; }
.check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: 700;
}

/* --------------------------------------------------------------
   Nach-oben-Button (global, unten rechts)
   -------------------------------------------------------------- */
.scroll-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-white);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(13, 6, 10, 0.28);
  cursor: pointer;
  z-index: 60;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.scroll-top:hover { background: var(--color-accent-hover); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .scroll-top { transition: none; }
  .scroll-top:hover { transform: none; }
}

/* --------------------------------------------------------------
   Glossar
   -------------------------------------------------------------- */
.glossary { margin: 0; }
.glossary__item {
  padding: 1.1rem 0;
  border-top: 1px solid var(--line-strong);
  scroll-margin-top: 6.5rem; /* Deep-Link landet unter Sticky-Header */
}
.glossary__item:first-child { border-top: 0; padding-top: 0; }
.glossary dt { font-weight: 700; font-size: 1.15rem; margin-bottom: 0.3rem; }
.glossary dd { margin: 0; color: var(--ink-70); }
.glossary__item:target dt { color: var(--color-accent); }

/* --------------------------------------------------------------
   Utility
   -------------------------------------------------------------- */
/* Schmale, linksbündige Textspalte (Glossar, Impressum, Datenschutz) */
.text-narrow { max-width: 48rem; }

/* Formular inline neben Text/Listen-Einträgen (z. B. „Entsperren"-Buttons) */
.inline-form { display: inline; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
[hidden] { display: none !important; }

/* --------------------------------------------------------------
   Sprachumschalter (DE/EN) im Header — Pendant-Link kommt aus
   includes/header.php (VD_SLUG_MAP), Cookie setzt main.js
   -------------------------------------------------------------- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.site-nav .lang-switch a {
  color: var(--color-black);
  opacity: 0.55;
}
.site-nav .lang-switch a:hover {
  color: var(--color-accent);
  opacity: 1;
  text-decoration: none;
}
.lang-switch__current { color: var(--color-accent); }
.lang-switch__sep { opacity: 0.35; }

@media (max-width: 47rem) {
  .site-nav .lang-switch {
    justify-content: center;
    padding-block: 0.7rem;
  }
}

/* Hero-Buttons untereinander erzwingen — die EN-Startseite nutzt das,
   damit sie wie die deutsche aussieht (deren längere Button-Texte
   ohnehin immer umbrechen). */
.hero__actions--stack {
  flex-direction: column;
  align-items: flex-start;
}