/* ==========================================================================
   ImmoResult — Standalone-Landingpage „Die Immo-Files"
   Design-Tokens 1:1 aus Branding/design_handoff_website/tokens/*.css
   Regeln: dunkle Navy-Grundfläche · Sand = Handlung · Blau = Orientierung
           Hairlines statt Schatten · max. ein Primary-Button pro View
   ========================================================================== */

/* --------------------------------------------------------------- Tokens -- */
:root {
  /* Navy */
  --navy-950:#0A1622; --navy-900:#0F1F2E; --navy-800:#122332;
  --navy-700:#1C2E3D; --navy-600:#26394A;
  /* Warm Sand — Handlungsakzent */
  --sand-200:#D8C3AE; --sand-500:#B38F6F; --sand-700:#8A6C52; --sand-900:#4A3B2D;
  /* Horizon Blue — Orientierungsakzent */
  --blue-200:#A9C6DA; --blue-500:#4E7A99; --blue-700:#35566E;
  /* Pearl & Mist */
  --pearl-50:#F2F1ED; --pearl-100:#DEE4E9;
  --mist-300:#C6D0D9; --mist-400:#94A3AE; --mist-500:#64778A;

  /* Semantik */
  --surface-page:var(--navy-950);
  --surface-section:var(--navy-900);
  --surface-card:var(--navy-800);
  --surface-field:var(--navy-950);
  --surface-light:var(--pearl-50);
  --border-subtle:var(--navy-700);
  --border-strong:var(--navy-600);
  --accent:var(--sand-500);
  --accent-blue:var(--blue-500);
  --text-primary:var(--pearl-50);
  --text-body:var(--mist-400);
  --text-body-strong:var(--mist-300);
  --text-muted:var(--mist-500);
  --text-on-accent:var(--navy-950);

  /* Typografie */
  --font-display:'Sora','Helvetica Neue',Arial,sans-serif;
  --font-body:'Mulish','Helvetica Neue',Arial,sans-serif;
  --text-body-lg:17px; --text-body-md:15px; --text-body-sm:14px;
  --text-label:13px; --text-caption:12px;
  --leading-display:1.14; --leading-body:1.6;
  --tracking-display:-1px; --tracking-wordmark:-0.5px; --tracking-label:3px;

  /* Spacing & Radien */
  --radius-control:8px; --radius-card:14px; --radius-section:20px; --radius-pill:999px;
  --hairline:1px solid var(--border-subtle);

  /* Hintergrund-Raster: reine 1-px-Hairlines, keine Farbverläufe.
     Zum Abschalten: --grid-line auf transparent setzen. */
  --grid-line:rgba(242,241,237,.028);
  --grid-size:96px;
}

/* ---------------------------------------------------------------- Reset -- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-body-md);
  line-height:var(--leading-body);
  color:var(--text-body);
  background-color:var(--surface-page);
  background-image:
    repeating-linear-gradient(to right,  var(--grid-line) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px var(--grid-size));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { display:block; max-width:100%; height:auto; }
a { color:var(--accent-blue); text-decoration:none; transition:color 120ms ease; }
a:hover { color:var(--pearl-50); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
[hidden] { display:none !important; }

/* --------------------------------------------------------------- Layout -- */
.wrap { width:100%; max-width:1180px; margin:0 auto; padding-inline:24px; }

/* --------------------------------------------------------------- Header -- */
.site-header { padding:28px 0 4px; }
.site-header .wrap { display:flex; justify-content:center; }

/* ------------------------------------------------------------- Wortmarke -- */
.wordmark { display:inline-flex; align-items:center; gap:12px; }
.wordmark svg { display:block; flex:0 0 auto; }
.wordmark-text {
  font-family:var(--font-display); font-weight:600;
  letter-spacing:var(--tracking-wordmark); color:var(--text-primary); line-height:1;
}
.wordmark-text b { font-weight:600; color:var(--accent); }

/* ----------------------------------------------------------------- Hero -- */
.hero { padding:48px 0 88px; }

.hero-head { max-width:840px; margin:0 auto; text-align:center; }

.eyebrow {
  margin:0 0 20px;
  font-size:var(--text-label); font-weight:700;
  letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--accent);
}

.hero-title {
  margin:0;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(38px,5.4vw,56px);
  line-height:var(--leading-display); letter-spacing:var(--tracking-display);
  color:var(--text-primary); text-wrap:balance;
}
.hero-kicker {
  display:block; margin-bottom:6px;
  font-size:clamp(20px,2.4vw,27px); font-weight:400;
  letter-spacing:-0.4px; color:var(--text-body-strong);
}

.hero-sub {
  margin:22px auto 0; max-width:620px;
  font-size:var(--text-body-lg); line-height:var(--leading-body); color:var(--text-body);
  text-wrap:pretty;
}
.hero-sub strong { color:var(--text-primary); font-weight:600; }

/* Nutzen-Punkte */
.usps {
  list-style:none; margin:30px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px;
}
.usps li {
  display:flex; align-items:center; gap:10px;
  font-size:var(--text-body-md); color:var(--text-body-strong);
}
.usps .tick {
  flex:0 0 auto; width:22px; height:22px; border-radius:var(--radius-pill);
  background:var(--sand-900); color:var(--sand-200);
  display:grid; place-content:center; font-size:12px; font-weight:700; line-height:1;
}

/* --------------------------------------------------- Hero: zwei Spalten -- */
.hero-grid {
  margin-top:56px;
  display:grid; grid-template-columns:1.06fr 0.94fr; gap:56px; align-items:center;
}

/* Linke Spalte: Freebie ------------------------------------------------- */
.stage {
  background:var(--surface-light); border-radius:var(--radius-section);
  padding:28px 32px; display:flex; justify-content:center;
}
.stage img { width:100%; max-width:520px; }

.badges { margin-top:20px; display:flex; flex-wrap:wrap; gap:16px; }
.badge {
  flex:1 1 190px;
  background:var(--surface-card); border:var(--hairline); border-radius:var(--radius-card);
  padding:18px 22px;
}
.badge-value {
  display:block; font-family:var(--font-display); font-weight:500; font-size:32px;
  line-height:1; letter-spacing:var(--tracking-display); color:var(--accent);
}
.badge-label { display:block; margin-top:8px; font-size:var(--text-body-sm); color:var(--text-body); }

/* Rechte Spalte: Formular ----------------------------------------------- */
.form-card {
  background:var(--surface-card); border:var(--hairline); border-radius:var(--radius-section);
  padding:36px;
}
.form-title {
  margin:0; font-family:var(--font-display); font-weight:500; font-size:21px;
  line-height:1.25; letter-spacing:var(--tracking-display); color:var(--text-primary);
}
.form-intro { margin:8px 0 24px; font-size:var(--text-body-sm); color:var(--text-body); }

.form-grid { display:flex; flex-direction:column; gap:16px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.field { display:flex; flex-direction:column; gap:6px; }
.field-label { font-size:var(--text-label); font-weight:600; color:var(--text-body-strong); }
.field-label .opt { font-weight:400; color:var(--text-muted); }

.input, .select select {
  width:100%;
  background:var(--surface-field); color:var(--text-primary);
  border:1px solid var(--border-strong); border-radius:var(--radius-control);
  padding:12px 14px;
  font-family:var(--font-body); font-size:var(--text-body-md); line-height:1.4;
  outline:none; transition:border-color 120ms ease;
}
.input::placeholder { color:var(--text-muted); }
.input:focus, .select select:focus { border-color:var(--accent); }

.select { position:relative; display:flex; }
.select select { appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer; }
.select select:invalid { color:var(--text-muted); }
.select-arrow {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--text-muted); font-size:12px; pointer-events:none;
}

/* Telefon mit fester Ländervorwahl */
.phone { display:flex; }
.phone-prefix {
  display:flex; align-items:center; padding:0 12px;
  background:var(--surface-field); color:var(--text-body);
  border:1px solid var(--border-strong); border-right:0;
  border-radius:var(--radius-control) 0 0 var(--radius-control);
  font-size:var(--text-body-md); font-variant-numeric:tabular-nums;
}
.phone .input { border-radius:0 var(--radius-control) var(--radius-control) 0; }

/* Fehlerzustand — Brand: Sand-Border + Meldung in Sand */
.field.is-error .input,
.field.is-error .select select,
.field.is-error .phone-prefix { border-color:var(--sand-700); }
.field-error { font-size:12.5px; color:var(--accent); }

/* Checkbox */
.checkbox { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.checkbox input {
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; width:18px; height:18px; margin:2px 0 0;
  border:1px solid var(--mist-500); border-radius:4px; background:transparent;
  display:grid; place-content:center; cursor:pointer;
  transition:background-color 120ms ease, border-color 120ms ease;
}
.checkbox input::before {
  content:"✓"; font-size:12px; font-weight:700; line-height:1;
  color:var(--text-on-accent); opacity:0;
}
.checkbox input:checked { background:var(--accent); border-color:var(--accent); }
.checkbox input:checked::before { opacity:1; }
.checkbox span { font-size:var(--text-body-sm); line-height:1.5; color:var(--text-body-strong); }
.field.is-error .checkbox input { border-color:var(--sand-700); }

/* Primary-Button — der einzige der Seite */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:16px 32px;
  background:var(--accent); color:var(--text-on-accent);
  border:1px solid transparent; border-radius:var(--radius-control);
  font-family:var(--font-body); font-weight:600; font-size:16px; line-height:1;
  cursor:pointer; transition:opacity 120ms ease;
}
.btn:hover { opacity:.85; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }

.form-note { margin:14px 0 0; font-size:var(--text-caption); line-height:1.55; color:var(--text-muted); }

/* Bestätigung nach dem Absenden */
.form-done { display:flex; flex-direction:column; gap:12px; }
.form-done h2 {
  margin:0; font-family:var(--font-display); font-weight:500; font-size:21px;
  letter-spacing:var(--tracking-display); color:var(--text-primary);
}
.form-done p { margin:0; font-size:var(--text-body-md); color:var(--text-body); }

/* --------------------------------------------------------------- Footer -- */
.site-footer { border-top:var(--hairline); padding:28px 0 40px; }
.site-footer .wrap {
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.footer-links { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.footer-links a, .footer-links span { font-size:var(--text-label); }
.footer-links a { color:var(--text-muted); }
.footer-links span { color:var(--text-muted); }

/* ----------------------------------------------------------- Responsive -- */

/* Textbestandteile, die nur auf grossen Viewports mitlaufen */
.nur-desktop { display:inline; }

/* Label bleibt für Screenreader erhalten, verschwindet aber optisch */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* --- Ab hier stapelt der Hero. Formular zuerst, Freebie darunter, Nutzen
       zum Schluss — damit der Button auf dem Handy ohne Scrollen erreichbar
       bleibt. Reihenfolge im DOM bleibt unverändert. ---------------------- */
@media (max-width:980px) {
  .hero { padding-bottom:64px; }
  .hero .wrap { display:flex; flex-direction:column; }
  .hero-head  { order:1; }
  .hero-grid  { order:2; grid-template-columns:1fr; gap:32px;
                max-width:620px; width:100%; margin:28px auto 0; }
  .usps       { order:3; margin:36px 0 0; }
  .hero-grid > .form-card   { order:1; }
  .hero-grid > .hero-visual { order:2; }
}

/* --- Handy: alles vom Logo bis zum Button in den sichtbaren Bereich.
       Budget: iPhone 16 (393 x 852) hat in Safari rund 690 px Hoehe. ------ */
@media (max-width:560px) {
  .wrap { padding-inline:18px; }

  .nur-desktop { display:none; }

  .site-header { padding:12px 0 0; }
  .hero { padding:16px 0 56px; }

  .eyebrow { margin-bottom:12px; font-size:10px; letter-spacing:2px; line-height:1.5; }

  .hero-title  { font-size:clamp(28px,8.4vw,34px); line-height:1.08; }
  .hero-kicker { margin-bottom:2px; font-size:15px; letter-spacing:-0.2px; }

  .hero-sub { margin-top:14px; font-size:14px; line-height:1.5; }

  .hero-grid { margin-top:22px; gap:28px; }

  /* Formular kompakt: Labels nur noch für Screenreader, Platzhalter uebernimmt */
  .form-card  { padding:20px 18px; border-radius:var(--radius-card); }
  .form-title { display:none; }
  .form-intro { margin:0 0 14px; font-size:13px; line-height:1.45; }
  .form-grid  { gap:12px; }
  .form-row   { gap:12px; }

  .field-label {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }

  /* 16 px verhindert, dass iOS beim Fokus in das Feld hineinzoomt */
  .input, .select select, .phone-prefix { font-size:16px; padding-block:11px; }
  .input, .select select { padding-inline:13px; }

  .checkbox span { font-size:12.5px; line-height:1.45; }
  .btn { padding:15px 24px; font-size:15px; }
  .form-note { margin-top:12px; }

  /* Freebie und Kennzahlen unter dem Formular */
  .stage  { padding:16px; border-radius:var(--radius-card); }
  .badges { margin-top:14px; gap:12px; }
  .badge  { flex:1 1 0; padding:14px 16px; }
  .badge-value { font-size:26px; }
  .badge-label { margin-top:6px; font-size:13px; }

  .usps { gap:10px; flex-direction:column; align-items:flex-start; }
  .usps li { font-size:14px; }

  .site-footer { padding:24px 0 32px; }
  .site-footer .wrap { flex-direction:column; align-items:flex-start; gap:14px; }
}

/* Sehr schmale und niedrige Geraete (iPhone SE): jede Zeile zaehlt */
@media (max-width:380px) {
  .site-header { padding:8px 0 0; }
  .hero { padding-top:10px; }
  .eyebrow { margin-bottom:8px; font-size:9.5px; letter-spacing:1.6px; }
  .hero-title  { font-size:26px; }
  .hero-kicker { font-size:14px; }
  .hero-sub    { margin-top:8px; font-size:13.5px; }
  .hero-grid   { margin-top:12px; }
  .form-note   { margin-top:8px; }
  .form-card   { padding:16px 14px; }
  .form-intro  { display:none; }   /* Inhalt steht im Platzhalter und im Einwilligungstext */
  .checkbox span { font-size:12px; }
  .btn { padding:14px 20px; }
}

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

/* -------------------------------------------- Rechtstexte (Unterseiten) -- */
.legal { padding:40px 0 88px; }
.legal .wrap { max-width:760px; }
.legal h1 {
  margin:0 0 8px; font-family:var(--font-display); font-weight:500;
  font-size:clamp(30px,4vw,40px); line-height:1.15; letter-spacing:var(--tracking-display);
  color:var(--text-primary);
}
.legal h2 {
  margin:40px 0 10px; font-family:var(--font-display); font-weight:500; font-size:21px;
  letter-spacing:var(--tracking-display); color:var(--text-primary);
}
.legal p, .legal li { font-size:var(--text-body-md); line-height:var(--leading-body); color:var(--text-body); }
.legal p { margin:0 0 14px; }
.legal ul { margin:0 0 14px; padding-left:20px; }
.legal li { margin-bottom:6px; }
.legal .lead { font-size:var(--text-body-lg); color:var(--text-body-strong); }
.legal .todo {
  display:block; margin:0 0 20px; padding:16px 18px;
  background:var(--surface-card); border:1px solid var(--sand-700); border-radius:var(--radius-card);
  font-size:var(--text-body-sm); color:var(--sand-200);
}
.legal .back { display:inline-block; margin-top:32px; font-size:var(--text-body-sm); }

/* -------------------------------------- Formular: Bot-Schutz und Meldungen -- */
.turnstile:not([hidden]) { display:block; min-height:65px; }

.form-alert {
  margin:0; padding:12px 14px;
  background:var(--surface-field); border:1px solid var(--sand-700);
  border-radius:var(--radius-control);
  font-size:var(--text-body-sm); line-height:1.5; color:var(--sand-200);
}

/* ==========================================================================
   LANGER FUNNEL — Abschnitte unterhalb des Hero
   Gleiche Regeln wie oben: Navy-Flächen, Sand = Handlung, Blau = Orientierung,
   Hairlines statt Schatten. Der einzige Primary-Button bleibt der Formular-
   Button; die mitlaufende Leiste führt nur zum Formular, sie sendet nicht.
   ========================================================================== */

/* ------------------------------------------------------------ Grundraster -- */
.sektion { padding:84px 0; border-top:var(--hairline); }
.sektion-alt { background:var(--surface-section); }

.sektion-kopf { max-width:760px; margin:0 auto 44px; text-align:center; }
.sektion-titel {
  margin:0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(27px,3.6vw,38px); line-height:1.16; letter-spacing:var(--tracking-display);
  color:var(--text-primary); text-wrap:balance;
}
.sektion-titel .ton-hell { color:var(--accent); }
.sektion-text {
  margin:18px auto 0; max-width:640px;
  font-size:var(--text-body-lg); line-height:var(--leading-body); color:var(--text-body);
  text-wrap:pretty;
}
.sektion-text strong { color:var(--text-primary); font-weight:600; }

/* Hinweis unter dem Hero */
.scroll-hint {
  margin:48px 0 0; text-align:center;
  font-size:var(--text-caption); letter-spacing:2px; text-transform:uppercase;
  color:var(--text-muted);
}
.scroll-hint span { display:block; margin-bottom:6px; font-size:15px; letter-spacing:0; }

/* ------------------------------------------------------------ Zahlenband -- */
.zahlenband { border-top:var(--hairline); background:var(--surface-section); padding:40px 0 34px; }
.zahlen {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr); gap:24px;
}
.zahlen li { text-align:center; }
.zahlen b {
  display:block; font-family:var(--font-display); font-weight:500; font-size:clamp(20px,2.2vw,27px);
  line-height:1.1; letter-spacing:var(--tracking-display); color:var(--accent);
}
.zahlen span { display:block; margin-top:8px; font-size:var(--text-caption); line-height:1.45; color:var(--text-body); }
.zahlen-fuss { margin:28px 0 0; text-align:center; font-size:var(--text-caption); color:var(--text-muted); }

/* ------------------------------------------------------------- Preis-Gap -- */
.gap-grid {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0;
  max-width:840px; margin:0 auto;
}
.gap-karte {
  background:var(--surface-card); border:var(--hairline); border-radius:var(--radius-section);
  padding:30px 28px; text-align:center;
}
.gap-gut      { border-color:var(--blue-700); }
.gap-schlecht { border-color:var(--sand-700); }
.gap-label { margin:0; font-size:var(--text-caption); letter-spacing:1.6px; text-transform:uppercase; color:var(--text-muted); }
.gap-wert {
  margin:14px 0 0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(34px,5vw,48px); line-height:1; letter-spacing:var(--tracking-display);
}
.gap-gut .gap-wert      { color:var(--blue-200); }
.gap-schlecht .gap-wert { color:var(--sand-200); }
.gap-note { margin:12px 0 0; font-size:var(--text-body-sm); color:var(--text-body); }

.gap-mitte { display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 22px; }
.gap-faktor {
  font-family:var(--font-display); font-weight:500; font-size:21px;
  letter-spacing:var(--tracking-display); color:var(--accent);
}
.gap-strich { display:block; width:1px; height:54px; background:var(--border-strong); }

/* ------------------------------------------------ Einsicht (Textkasten) -- */
.einsicht {
  max-width:840px; margin:44px auto 0;
  background:var(--surface-card); border:var(--hairline); border-left:3px solid var(--accent);
  border-radius:var(--radius-card); padding:28px 30px;
}
.einsicht-schmal { max-width:760px; }
.einsicht-eyebrow {
  margin:0 0 12px; font-size:var(--text-caption); font-weight:700;
  letter-spacing:2.2px; text-transform:uppercase; color:var(--accent);
}
.einsicht-text { margin:0 0 14px; font-size:var(--text-body-md); line-height:1.65; color:var(--text-body); }
.einsicht-text:last-child { margin-bottom:0; }
.einsicht-text strong { color:var(--text-primary); font-weight:600; }
.einsicht-frage {
  margin:18px 0 0; padding-top:16px; border-top:var(--hairline);
  font-size:var(--text-body-md); line-height:1.6; color:var(--text-body-strong);
}

/* ------------------------------------------------------- Seiten-Galerie -- */
.galerie {
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.seite { margin:0; }
.seite picture {
  display:block; border:var(--hairline); border-radius:var(--radius-card); overflow:hidden;
  background:var(--surface-card); transition:border-color 140ms ease, transform 140ms ease;
}
.seite:hover picture { border-color:var(--sand-700); transform:translateY(-2px); }
.seite img { width:100%; }
.seite figcaption { margin-top:12px; font-size:var(--text-body-sm); line-height:1.5; color:var(--text-body); }
.seite figcaption b { display:block; color:var(--accent); font-weight:600; font-size:var(--text-label); }
.galerie-hinweis { margin:18px 0 0; text-align:center; font-size:var(--text-caption); color:var(--text-muted); }
.nur-mobil { display:none; }

/* ------------------------------------------------- Drin / nicht drin ----- */
.zwei-spalten { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.spalte {
  background:var(--surface-card); border:var(--hairline); border-radius:var(--radius-section);
  padding:30px 32px;
}
.spalte-ja   { border-color:var(--blue-700); }
.spalte h3 {
  display:flex; align-items:center; gap:12px; margin:0 0 20px;
  font-family:var(--font-display); font-weight:500; font-size:19px;
  letter-spacing:var(--tracking-display); color:var(--text-primary);
}
.spalte-icon {
  flex:0 0 auto; width:24px; height:24px; border-radius:var(--radius-pill);
  display:grid; place-content:center; font-size:13px; font-weight:700; line-height:1;
}
.spalte-ja   .spalte-icon { background:var(--blue-700); color:var(--blue-200); }
.spalte-nein .spalte-icon { background:var(--navy-700); color:var(--mist-400); }
.spalte ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.spalte li {
  padding-left:18px; position:relative;
  font-size:var(--text-body-md); line-height:1.55; color:var(--text-body-strong);
}
.spalte li::before {
  content:""; position:absolute; left:0; top:9px; width:6px; height:1px; background:var(--border-strong);
}
.spalte-note { margin:22px 0 0; padding-top:18px; border-top:var(--hairline);
  font-size:var(--text-body-sm); line-height:1.6; color:var(--text-muted); }

/* --------------------------------------------------------------- Zitat -- */
.zitat {
  max-width:760px; margin:44px auto 0; padding:0 0 0 22px;
  border-left:2px solid var(--accent);
  font-family:var(--font-display); font-weight:400; font-size:clamp(18px,2.2vw,22px);
  line-height:1.45; letter-spacing:-0.4px; color:var(--text-body-strong);
}
.zitat strong { display:block; margin-top:8px; color:var(--text-primary); font-weight:500; }

/* ------------------------------------------------------ Eigenkapital ---- */
.ek-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.ek-zahlen, .ek-rechnung {
  background:var(--surface-card); border:var(--hairline); border-radius:var(--radius-section);
  padding:30px 32px;
}
.ek-stat { padding:16px 0; border-bottom:var(--hairline); }
.ek-stat:first-child { padding-top:0; }
.ek-stat b {
  display:block; font-family:var(--font-display); font-weight:500; font-size:36px;
  line-height:1; letter-spacing:var(--tracking-display); color:var(--accent);
}
.ek-stat span { display:block; margin-top:8px; font-size:var(--text-body-md); color:var(--text-body-strong); }
.ek-stat em { font-style:normal; color:var(--text-primary); }
.ek-fuss { margin:20px 0 0; font-size:var(--text-body-sm); line-height:1.6; color:var(--text-muted); }

.ek-rechnung-titel {
  margin:0 0 20px; font-family:var(--font-display); font-weight:500; font-size:19px;
  letter-spacing:var(--tracking-display); color:var(--text-primary);
}
.rechnung { list-style:none; counter-reset:r; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.rechnung li {
  counter-increment:r; position:relative; padding-left:38px;
  font-size:var(--text-body-md); line-height:1.55; color:var(--text-body);
}
.rechnung li::before {
  content:counter(r); position:absolute; left:0; top:0;
  width:24px; height:24px; border-radius:var(--radius-pill);
  background:var(--navy-700); color:var(--mist-300);
  display:grid; place-content:center; font-size:12px; font-weight:700;
}
.rechnung b { color:var(--text-primary); font-weight:600; }
.ek-rechnung-fuss {
  margin:22px 0 0; padding-top:18px; border-top:var(--hairline);
  font-size:var(--text-body-md); color:var(--sand-200);
}

/* ------------------------------------------------------------- Kapitel -- */
.kapitel { list-style:none; margin:0; padding:0; max-width:880px; margin-inline:auto; }
.kapitel li {
  display:flex; gap:22px; padding:20px 22px; border:var(--hairline); border-radius:var(--radius-card);
  margin-bottom:10px; background:var(--surface-card);
}
.kapitel li.kap-highlight { border-color:var(--sand-700); }
.kap-nr {
  flex:0 0 auto; font-family:var(--font-display); font-weight:500; font-size:15px;
  letter-spacing:1px; color:var(--accent); padding-top:2px;
}
.kapitel div { font-size:var(--text-body-md); line-height:1.6; color:var(--text-body); }
.kapitel b {
  display:block; margin-bottom:4px; font-family:var(--font-display); font-weight:500;
  font-size:17px; letter-spacing:-0.4px; color:var(--text-primary);
}
.kap-flag {
  display:inline-block; margin-left:8px; padding:3px 9px; border-radius:var(--radius-pill);
  background:var(--sand-900); color:var(--sand-200);
  font-family:var(--font-body); font-size:11px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; vertical-align:2px;
}

/* ----------------------------------------------------------- Fragensatz -- */
.fragen { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.frage {
  background:var(--surface-card); border:var(--hairline); border-radius:var(--radius-section);
  padding:26px 26px 24px;
}
.frage-offen { border-color:var(--sand-700); }
.frage-nr {
  display:block; margin-bottom:14px; font-size:var(--text-caption); font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--accent);
}
.frage-text {
  margin:0 0 14px; font-family:var(--font-display); font-weight:400; font-size:19px;
  line-height:1.35; letter-spacing:-0.4px; color:var(--text-primary);
}
.frage-verdeckt { filter:blur(6px); user-select:none; color:var(--mist-400); }
.frage-note { margin:0; font-size:var(--text-body-sm); line-height:1.6; color:var(--text-body); }

/* ------------------------------------------------------------ Tabellen -- */
.tabelle-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tabelle {
  width:100%; border-collapse:collapse; min-width:520px;
  background:var(--surface-card); border:var(--hairline); border-radius:var(--radius-card);
  overflow:hidden;
}
.tabelle th, .tabelle td {
  padding:15px 20px; text-align:left; border-bottom:var(--hairline);
  font-size:var(--text-body-md); color:var(--text-body);
}
.tabelle thead th {
  font-size:var(--text-caption); font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--text-muted); background:var(--navy-900);
}
.tabelle tbody tr:last-child th, .tabelle tbody tr:last-child td { border-bottom:0; }
.tabelle tbody th { font-weight:600; color:var(--text-body-strong); }
.tabelle b { color:var(--text-primary); font-weight:600; }
.bench-tabelle .gut      { color:var(--blue-200); font-weight:600; }
.bench-tabelle .schlecht { color:var(--sand-200); font-weight:600; }

.selbstcheck {
  max-width:760px; margin:32px auto 0; padding:26px 30px;
  background:var(--surface-card); border:var(--hairline); border-left:3px solid var(--accent-blue);
  border-radius:var(--radius-card);
}
.selbstcheck-titel {
  margin:0 0 16px; font-family:var(--font-display); font-weight:500; font-size:18px;
  letter-spacing:-0.4px; color:var(--text-primary);
}
.selbstcheck ol { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; }
.selbstcheck li { font-size:var(--text-body-md); line-height:1.55; color:var(--text-body); }
.selbstcheck b { color:var(--text-primary); font-weight:600; }

/* ------------------------------------------------- Strecke nach Absenden -- */
.strecke {
  list-style:none; margin:40px auto 0; padding:0; max-width:880px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
}
.strecke li {
  background:var(--surface-card); border:var(--hairline); border-radius:var(--radius-card);
  padding:20px 18px; font-size:var(--text-body-sm); line-height:1.5; color:var(--text-body);
}
.strecke-zeit {
  display:block; margin-bottom:10px; font-size:11px; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--accent);
}
.strecke b {
  display:block; margin-bottom:6px; font-family:var(--font-display); font-weight:500;
  font-size:16px; letter-spacing:-0.3px; color:var(--text-primary);
}

/* -------------------------------------------------------------- Fehler -- */
.fehler-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.fehler {
  position:relative; background:var(--surface-card); border:var(--hairline);
  border-radius:var(--radius-section); padding:28px 30px;
}
.fehler-nr {
  display:block; margin-bottom:14px; font-family:var(--font-display); font-weight:500;
  font-size:15px; letter-spacing:1.4px; color:var(--accent);
}
.fehler h3 {
  margin:0 0 12px; font-family:var(--font-display); font-weight:500; font-size:19px;
  line-height:1.3; letter-spacing:-0.4px; color:var(--text-primary);
}
.fehler p { margin:0; font-size:var(--text-body-md); line-height:1.6; color:var(--text-body); }
.fehler-impact {
  margin-top:16px !important; padding-top:14px; border-top:var(--hairline);
  font-size:var(--text-body-sm) !important; color:var(--sand-200) !important;
}

/* ---------------------------------------------------------- Selbsttest -- */
.test-fragen {
  list-style:none; margin:0 auto; padding:0; max-width:760px;
  display:flex; flex-direction:column; gap:12px;
}
.test-fragen li {
  padding:18px 22px; background:var(--surface-card); border:var(--hairline);
  border-radius:var(--radius-card);
  font-size:var(--text-body-md); line-height:1.55; color:var(--text-body-strong);
}
.test-fragen .test-mehr {
  background:transparent; border-style:dashed; color:var(--text-muted); text-align:center;
}
.test-baender { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; margin:28px auto 0; }
.band {
  padding:22px 24px; border:var(--hairline); border-radius:var(--radius-card);
  background:var(--surface-card);
}
.band-warn { border-color:var(--sand-700); }
.band b {
  display:block; margin-bottom:8px; font-family:var(--font-display); font-weight:500;
  font-size:19px; letter-spacing:-0.4px; color:var(--accent);
}
.band span { font-size:var(--text-body-sm); line-height:1.55; color:var(--text-body); }

/* ------------------------------------------------------------- Für wen -- */
.wen-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.wen { border:var(--hairline); border-radius:var(--radius-card); padding:24px 24px; background:var(--surface-card); }
.wen h3 {
  margin:0 0 10px; font-family:var(--font-display); font-weight:500; font-size:17px;
  line-height:1.3; letter-spacing:-0.4px; color:var(--text-primary);
}
.wen p { margin:0; font-size:var(--text-body-sm); line-height:1.6; color:var(--text-body); }
.wen-nicht {
  max-width:760px; margin:28px auto 0; text-align:center;
  font-size:var(--text-body-md); line-height:1.6; color:var(--text-muted);
}
.wen-nicht b { color:var(--text-body-strong); font-weight:600; }

/* --------------------------------------------------------------- Autor -- */
.autor { display:grid; grid-template-columns:280px 1fr; gap:44px; align-items:center; max-width:940px; margin-inline:auto; }
.autor-bild picture {
  display:block; border:var(--hairline); border-radius:var(--radius-section); overflow:hidden;
}
.autor-bild img { width:100%; }
.autor-text .sektion-titel { margin-bottom:18px; }
.autor-text .eyebrow { margin-bottom:12px; }
.autor-text p { margin:0 0 16px; font-size:var(--text-body-md); line-height:1.7; color:var(--text-body); }
.autor-sig {
  margin-top:22px !important; padding-top:18px; border-top:var(--hairline);
  color:var(--text-body-strong) !important;
}

/* ----------------------------------------------------------------- FAQ -- */
.faq { max-width:820px; margin-inline:auto; }
.faq details {
  border:var(--hairline); border-radius:var(--radius-card); margin-bottom:10px;
  background:var(--surface-card);
}
.faq summary {
  list-style:none; cursor:pointer; padding:20px 24px;
  font-family:var(--font-display); font-weight:500; font-size:17px; letter-spacing:-0.3px;
  color:var(--text-primary); display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:"+"; flex:0 0 auto; font-family:var(--font-body); font-size:20px; font-weight:400;
  color:var(--accent); line-height:1;
}
.faq details[open] summary::after { content:"−"; }
.faq details[open] summary { border-bottom:var(--hairline); }
.faq p { margin:0; padding:18px 24px 22px; font-size:var(--text-body-md); line-height:1.65; color:var(--text-body); }

/* ------------------------------------------------------------ Abschluss -- */
.abschluss { border-top:var(--hairline); }
.abschluss-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.abschluss-text .sektion-titel { text-align:left; }
.abschluss-text .eyebrow { margin-bottom:16px; }
.usps-links { justify-content:flex-start; flex-direction:column; align-items:flex-start; gap:12px; margin-top:26px; }
.usps-links li { font-size:var(--text-body-md); }
.abschluss-note { margin:24px 0 0; font-size:var(--text-body-sm); color:var(--text-muted); }

/* ----------------------------------------------------- Mitlaufender CTA -- */
.sticky-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:rgba(10,22,34,.94); backdrop-filter:blur(8px);
  border-top:1px solid var(--border-strong); padding:12px 0;
}
.sticky-cta .wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.sticky-cta p { margin:0; font-size:var(--text-body-sm); color:var(--text-body); }
.sticky-cta p b { color:var(--text-primary); font-weight:600; }
.btn-klein { width:auto; padding:12px 22px; font-size:var(--text-body-sm); text-decoration:none; }
.btn-klein:hover { color:var(--text-on-accent); }

/* --------------------------------------------------------- Responsive --- */
@media (max-width:1080px) {
  .zahlen { grid-template-columns:repeat(3,1fr); gap:26px 20px; }
  .galerie { grid-template-columns:repeat(3,1fr); }
  .wen-grid { grid-template-columns:repeat(2,1fr); }
  .strecke { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px) {
  .sektion { padding:64px 0; }
  .sektion-kopf { margin-bottom:34px; }
  .abschluss-grid { grid-template-columns:1fr; gap:34px; }
  .abschluss-text .sektion-titel { text-align:center; }
  .abschluss-text .eyebrow { text-align:center; }
  .usps-links { align-items:flex-start; }
  .autor { grid-template-columns:1fr; gap:26px; text-align:center; max-width:620px; }
  .autor-bild { max-width:220px; margin-inline:auto; }
  .autor-text .sektion-titel { text-align:center; }
  .fragen { grid-template-columns:1fr; }
  .ek-grid { grid-template-columns:1fr; }
  .zwei-spalten { grid-template-columns:1fr; }
  .fehler-grid { grid-template-columns:1fr; }
  .test-baender { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  /* Galerie wird zum Wischband — sieben Seiten passen sonst nicht sinnvoll */
  .galerie {
    display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding-bottom:8px;
    margin-inline:-18px; padding-inline:18px;
    scrollbar-width:none;
  }
  .galerie::-webkit-scrollbar { display:none; }
  .seite { flex:0 0 62%; max-width:260px; scroll-snap-align:center; }
  .nur-mobil { display:block; }

  .gap-grid { grid-template-columns:1fr; gap:0; }
  .gap-mitte { flex-direction:row; padding:14px 0; gap:14px; }
  .gap-strich { width:40px; height:1px; }

  .zahlen { grid-template-columns:repeat(2,1fr); }
  .strecke { grid-template-columns:1fr; }
  .wen-grid { grid-template-columns:1fr; }

  .sticky-cta p { display:none; }
  .sticky-cta .wrap { justify-content:stretch; }
  .btn-klein { width:100%; }
  body { padding-bottom:0; }
}

@media (max-width:560px) {
  .sektion { padding:52px 0; }
  .sektion-text { font-size:var(--text-body-md); }
  .scroll-hint { margin-top:34px; }
  .spalte, .ek-zahlen, .ek-rechnung, .frage, .fehler, .gap-karte { padding:22px 20px; }
  .einsicht { padding:22px 20px; }
  .kapitel li { padding:16px 18px; gap:14px; }
  .faq summary { padding:16px 18px; font-size:16px; }
  .faq p { padding:14px 18px 18px; }
  .zahlenband { padding:32px 0 26px; }
}

/* Der Hero stapelt ab 980 px als Flex-Spalte (Formular zuerst). Ohne eigene
   Reihenfolge rutscht der Scroll-Hinweis dort an den Anfang. */
@media (max-width:980px) {
  .hero .scroll-hint { order:4; margin-top:36px; }
}

/* ==========================================================================
   TERMINSEITE /termin/ — eigener Kalender auf cal.com-Daten
   Kein Embed: dieselben Tokens, dieselben Hairlines wie der Rest der Seite.
   ========================================================================== */

.termin-seite { padding:32px 0 88px; }

/* Quittung fuer die gerade abgeschickte Eintragung */
.quittung {
  display:flex; align-items:flex-start; gap:12px;
  max-width:760px; margin:0 auto 36px; padding:16px 20px;
  background:var(--surface-card); border:var(--hairline); border-left:3px solid var(--blue-500);
  border-radius:var(--radius-card);
  font-size:var(--text-body-sm); line-height:1.55; color:var(--text-body);
}
.quittung b { display:block; color:var(--text-primary); font-weight:600; }
.quittung-haken {
  flex:0 0 auto; width:22px; height:22px; border-radius:var(--radius-pill);
  background:var(--blue-700); color:var(--blue-200);
  display:grid; place-content:center; font-size:12px; font-weight:700; line-height:1;
}

.termin-kopf { max-width:780px; margin:0 auto 44px; text-align:center; }
.termin-kopf .hero-title { font-size:clamp(30px,4.4vw,46px); }

/* -------------------------------------------------------------- Raster -- */
.termin-grid {
  display:grid; grid-template-columns:1fr 396px; gap:40px; align-items:start;
}

/* ------------------------------------------------------------- Angebot -- */
.angebot-block {
  background:var(--surface-card); border:var(--hairline); border-radius:var(--radius-section);
  padding:28px 30px; margin-bottom:20px;
}
.angebot-titel {
  margin:0 0 20px; font-family:var(--font-display); font-weight:500; font-size:19px;
  letter-spacing:var(--tracking-display); color:var(--text-primary);
}
.angebot-schritte { list-style:none; counter-reset:a; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.angebot-schritte li {
  counter-increment:a; position:relative; padding-left:38px;
  font-size:var(--text-body-sm); line-height:1.6; color:var(--text-body);
}
.angebot-schritte li::before {
  content:counter(a); position:absolute; left:0; top:0;
  width:24px; height:24px; border-radius:var(--radius-pill);
  background:var(--navy-700); color:var(--mist-300);
  display:grid; place-content:center; font-size:12px; font-weight:700;
}
.angebot-schritte b {
  display:block; margin-bottom:3px; font-size:var(--text-body-md);
  color:var(--text-primary); font-weight:600;
}

/* Benefit-Reihe direkt unter der Ueberschrift: was der Lead bekommt, bevor
   er ueberhaupt zum Kalender scrollt. Bonus-Karten mit Sand-Rahmen. */
.benefits {
  list-style:none; margin:0 0 14px; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.benefits li {
  background:var(--surface-card); border:var(--hairline); border-radius:var(--radius-card);
  padding:22px 24px;
}
.benefits .benefit-bonus { border-color:var(--sand-700); }
.benefit-marke {
  display:block; margin-bottom:12px;
  font-size:var(--text-caption); font-weight:700; letter-spacing:2.2px;
  text-transform:uppercase; color:var(--accent);
}
.benefits b {
  display:block; margin-bottom:7px;
  font-family:var(--font-display); font-weight:500; font-size:18px;
  line-height:1.3; letter-spacing:-0.4px; color:var(--text-primary);
}
.benefit-text { display:block; font-size:var(--text-body-sm); line-height:1.6; color:var(--text-body); }
.benefits-fuss { margin:14px 0 40px; font-size:var(--text-body-sm); color:var(--text-muted); }

.angebot-note { margin:0; font-size:var(--text-body-sm); line-height:1.6; color:var(--text-muted); }

/* ------------------------------------------------------------ Kalender -- */
.kalender-karte {
  background:var(--surface-card); border:var(--hairline); border-radius:var(--radius-section);
  padding:24px 22px;
}
/* Der Kalender ist Werkzeug, nicht Hauptdarsteller — die Ueberschrift bleibt
   entsprechend zurueckhaltend. */
.kalender-karte .form-title { font-size:18px; }
.kalender-karte .form-intro { margin-bottom:0; }
.schritt { display:block; }

.kal-kopf { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 0 10px; }
.kal-monat {
  margin:0; flex:1 1 auto; text-align:center;
  font-family:var(--font-display); font-weight:500; font-size:15px;
  letter-spacing:-0.3px; color:var(--text-primary);
}
.kal-nav {
  flex:0 0 auto; width:30px; height:30px; border-radius:var(--radius-control);
  background:transparent; border:var(--hairline); color:var(--text-body-strong);
  font-size:16px; line-height:1; cursor:pointer; transition:border-color 120ms ease, color 120ms ease;
}
.kal-nav:hover:not([disabled]) { border-color:var(--accent); color:var(--text-primary); }
.kal-nav[disabled] { opacity:.35; cursor:not-allowed; }

.kal-wochentage, .kal-raster { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.kal-wochentage {
  margin-bottom:6px;
  font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--text-muted); text-align:center;
}
.kal-raster { transition:opacity 140ms ease; }
.kal-raster.kal-laedt { opacity:.4; pointer-events:none; }

.kal-tag {
  position:relative; aspect-ratio:1; min-height:34px;
  display:grid; place-content:center;
  background:transparent; border:1px solid transparent; border-radius:var(--radius-control);
  font-family:var(--font-body); font-size:14px; color:var(--text-muted);
  cursor:default; transition:border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.kal-leer { border:0; }
.kal-vorbei { opacity:.3; }
.kal-tag[disabled] { cursor:not-allowed; }

/* Nur freie Tage sind anfassbar — das spart den Klick ins Leere */
.kal-frei { color:var(--text-primary); border-color:var(--border-strong); cursor:pointer; }
.kal-frei:hover { border-color:var(--accent); background:var(--navy-700); }
.kal-heute { font-weight:700; }
.kal-gewaehlt, .kal-gewaehlt:hover {
  background:var(--accent); border-color:var(--accent); color:var(--text-on-accent); font-weight:700;
}
.kal-punkt {
  position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:3px; height:3px; border-radius:var(--radius-pill); background:var(--accent);
}
.kal-gewaehlt .kal-punkt { background:var(--navy-950); }

.kal-status { margin:14px 0 0; font-size:var(--text-body-sm); line-height:1.55; color:var(--text-muted); }
.kal-status-fehler { color:var(--sand-200); }

/* -------------------------------------------------------------- Slots -- */
.slots { margin-top:20px; padding-top:18px; border-top:var(--hairline); }
.slots-titel {
  margin:0 0 12px; font-family:var(--font-display); font-weight:500; font-size:15px;
  letter-spacing:-0.3px; color:var(--text-primary);
}
.slots-liste { display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px; }
.slot {
  padding:10px 8px; background:transparent;
  border:1px solid var(--border-strong); border-radius:var(--radius-control);
  font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--text-primary);
  cursor:pointer; transition:border-color 120ms ease, background 120ms ease;
}
.slot:hover { border-color:var(--accent); background:var(--navy-700); }

/* --------------------------------------------------------- Bestaetigen -- */
.zurueck {
  margin:0 0 18px; padding:0; background:none; border:0;
  font-family:var(--font-body); font-size:var(--text-body-sm); color:var(--accent-blue);
  cursor:pointer;
}
.zurueck:hover { color:var(--text-primary); }

.termin-zusammenfassung {
  margin:14px 0 22px; padding:16px 18px;
  background:var(--surface-field); border:var(--hairline); border-left:3px solid var(--accent);
  border-radius:var(--radius-control);
  font-family:var(--font-display); font-weight:500; font-size:16px;
  line-height:1.4; letter-spacing:-0.3px; color:var(--text-primary);
}

textarea.input { resize:vertical; min-height:84px; line-height:1.5; font-family:var(--font-body); }

/* ------------------------------------------------------------- Fertig -- */
.fertig-haken {
  width:46px; height:46px; margin:0 0 18px; border-radius:var(--radius-pill);
  background:var(--sand-900); color:var(--accent);
  display:grid; place-content:center; font-size:22px; line-height:1;
}
.fertig-bonus {
  margin:22px 0 0; padding:18px 20px;
  background:var(--surface-field); border:var(--hairline); border-radius:var(--radius-card);
  font-size:var(--text-body-sm); line-height:1.6; color:var(--text-body);
}
.fertig-bonus b { color:var(--text-primary); font-weight:600; }
.zurueck-link { display:inline-block; margin-top:22px; font-size:var(--text-body-sm); }

/* --------------------------------------------------------- Responsive -- */
@media (max-width:1080px) {
  .benefits { grid-template-columns:1fr; gap:12px; }
  .benefits li { padding:18px 20px; }
  .benefits b { margin-bottom:4px; font-size:17px; }
}

@media (max-width:980px) {
  .termin-grid { grid-template-columns:1fr; gap:28px; max-width:620px; margin-inline:auto; }
  /* Auf dem Handy zuerst buchen, das Angebot steht darunter zum Nachlesen */
  .termin-grid > .kalender-karte { order:1; }
  .termin-grid > .angebot        { order:2; }
}

@media (max-width:560px) {
  .termin-seite { padding:16px 0 56px; }
  .termin-kopf { margin-bottom:28px; }
  .quittung { margin-bottom:24px; padding:14px 16px; font-size:13px; }
  .kalender-karte { padding:20px 16px; }
  .angebot-block { padding:22px 20px; }
  .kal-tag { min-height:38px; font-size:14px; }
  .kal-wochentage, .kal-raster { gap:4px; }
  .slots-liste { grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; }
  .termin-zusammenfassung { font-size:16px; }
  /* Die Labels bleiben hier sichtbar: das Formular ist kurz und der Platz da */
  .kalender-karte .field-label {
    position:static; width:auto; height:auto; margin:0; clip-path:none;
  }
  .kalender-karte .form-title { display:block; }
}

/* ==========================================================================
   BEWEGUNG — Gegenstueck zu assets/effekte.js
   Portiert aus 21st.dev: Grid Beam, Spotlight Card, Text Reveal, Shiny Button.
   Ohne das Skript bleibt alles davon wirkungslos, die Seite steht wie zuvor.
   ========================================================================== */

/* Lichtstrahlen hinter dem Hero — der Canvas liegt unter dem Inhalt */
[data-beams] { position:relative; isolation:isolate; overflow:hidden; }
[data-beams] > .beams {
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  mask-image:linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}
/* Feiner Lichthof hinter der Ueberschrift, damit die Buehne nicht leer wirkt */
.effekte .hero::before, .effekte .termin-seite::before {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:-120px; width:900px; height:520px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(179,143,111,.16), rgba(78,122,153,.06) 55%, transparent 100%);
  filter:blur(20px);
}

/* Ueberschrift: Wort fuer Wort aus der Unschaerfe */
.hero-title .wort { display:inline-block; }
.worte-bereit .wort {
  opacity:0; transform:translateY(16px); filter:blur(10px);
  animation:wortRein .85s cubic-bezier(.2,.75,.2,1) forwards;
  animation-delay:calc(var(--i,0) * 70ms + 80ms);
}
@keyframes wortRein { to { opacity:1; transform:none; filter:none; } }

/* Sand-Verlauf auf den Akzentzeilen der Abschnittstitel */
.effekte .sektion-titel .ton-hell {
  background:linear-gradient(92deg, var(--sand-200) 0%, var(--sand-500) 60%, var(--sand-200) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sandGlanz 6s ease-in-out infinite;
}
@keyframes sandGlanz { 0%,100% { background-position:0% 0; } 50% { background-position:100% 0; } }

/* Spotlight-Karten: Lichtkegel folgt dem Zeiger, der Rand leuchtet mit */
.spot { position:relative; }
.spot::before, .spot::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity 280ms ease;
}
.spot::before {
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),
             rgba(179,143,111,.13), transparent 62%);
}
.spot::after {
  inset:-1px; padding:1px;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
             rgba(216,195,174,.7), rgba(179,143,111,.25) 45%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
@media (hover:hover) {
  .spot:hover::before, .spot:hover::after { opacity:1; }
}
/* Der Inhalt bleibt ueber dem Lichtkegel */
.spot > * { position:relative; z-index:1; }
.faq details.spot > summary, .faq details.spot > p { z-index:1; }

/* Erscheinen beim Scrollen — Hero ausgenommen */
.effekte .reveal {
  opacity:0; transform:translateY(18px); filter:blur(6px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.75,.2,1), filter .7s ease;
  transition-delay:var(--d,0ms);
}
.effekte .reveal.ist-sichtbar { opacity:1; transform:none; filter:none; }

/* Glanz laeuft alle paar Sekunden ueber den Sand-Button */
.effekte .btn { position:relative; overflow:hidden; }
.effekte .btn::after {
  content:""; position:absolute; top:-20%; bottom:-20%; left:-70%; width:45%;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.38) 50%, transparent 100%);
  transform:skewX(-18deg);
  animation:btnGlanz 5.5s ease-in-out infinite;
  pointer-events:none;
}
.effekte .btn[disabled]::after { animation:none; }
@keyframes btnGlanz { 0%,70% { left:-70%; } 100% { left:140%; } }

/* Galerieseiten heben sich leicht, wenn der Zeiger drueber ist */
.effekte .seite picture { transition:border-color 200ms ease, transform 300ms cubic-bezier(.2,.75,.2,1); }
.effekte .seite:hover picture { transform:translateY(-6px) rotate(-0.4deg); }

@media (prefers-reduced-motion:reduce) {
  .worte-bereit .wort, .effekte .reveal { opacity:1; transform:none; filter:none; animation:none; transition:none; }
  .effekte .btn::after, .effekte .sektion-titel .ton-hell { animation:none; }
}
@media (max-width:560px) {
  .effekte .hero::before, .effekte .termin-seite::before { width:140vw; height:380px; top:-80px; }
}