/* ============================================================
   Bookflow Consulting — Homepage-only section styles
   Loaded by index.html in addition to style.css
   ============================================================ */

.hero{ padding:clamp(32px,6vh,64px) 0 clamp(36px,7vh,80px); }
.hero h1{
  /* Reduced (13.09.2026) — the rotating line was running too close to the
     right edge of the viewport at medium desktop widths (nowrap phrases like
     "das deinen Umsatz vorhersehbar macht." have no wrap-fallback there). A
     lower ceiling keeps even the longest phrase inside the safety margin at
     ordinary laptop widths; see .rotate-text below for the hard cap that
     guarantees it never touches the edge even outside that range. */
  font-size:clamp(32px,4.4vw,46px);
  font-weight:900;
  /* Fixed-length line-height (not a unitless ratio) so the line box height can't
     shift when the rotating text mixes two fonts (Archivo + Libre Caslon Text italic) with
     different internal metrics — keeps everything below the hero perfectly still.
     Generous ~1.25x ratio (not the old ~1.05x) so Libre Caslon Text italic's own tall
     ascenders/descenders ("j", "d", …) have enough room and never get clipped
     by the gradient background-clip:text box. */
  line-height:clamp(41px,5.6vw,58px);
  /* Jitter, Runde 2 (17.09.2026): trotz der obigen Fixierung war beim Umschalten
     zwischen Phrasen mit/ohne Schnörkel-Keyword immer noch eine minimale (~1mm)
     Verschiebung von allem unterhalb der Überschrift sichtbar — line-height allein
     garantiert nicht, dass zwei verschieden-hohe Inline-Boxen (Archivo ↔ Libre Caslon
     Text italic) exakt gleich hoch gerendert werden. Robusterer Fix: die Höhe des
     ganzen 2-zeiligen Elements fix vorgeben (2× line-height), damit die Box gar nicht
     mehr wachsen/schrumpfen KANN, egal was innen passiert — alles darunter bleibt
     dadurch strukturell garantiert an derselben Stelle stehen. */
  height:calc(2 * clamp(41px,5.6vw,58px));
  /* KEIN overflow:hidden hier (Regression 17.09.2026): rotate-text darf bei
     langen Phrasen bewusst breiter werden als die h1 selbst (siehe dessen
     eigenes max-width:calc(100vw - 80px) unten) — overflow:hidden auf dem
     Elternelement hat das rechts hart abgeschnitten. Die feste height oben
     reicht allein schon aus, damit alles darunter an Ort und Stelle bleibt;
     visuelles Überlaufen bei Bedarf bleibt dafür bewusst sichtbar statt
     abgeschnitten. */
  max-width:17ch;
}
.hero h1 .rotate-line{ display:block; }
/* ---------- Headline emphasis (Schriftwechsel: sans ↔ Libre Caslon Text italic) ---------- */
.hl-script{
  font-family:'Libre Caslon Text', Georgia, serif;
  font-style:italic;
  font-weight:400;
}
.hl-accent{
  font-family:'Libre Caslon Text', Georgia, serif;
  font-style:italic;
  font-weight:400;
  background:linear-gradient(100deg, var(--accent) 0%, var(--accent-deep) 100%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  /* Extra horizontal breathing room so the italic slant isn't clipped by the
     gradient's background-clip:text box at the start/end of the word — the
     negative margin cancels the added space so surrounding text doesn't shift. */
  padding:0 0.1em;
  margin:0 -0.1em;
}
/* Applied to a single keyword span inside the rotating hero text, not the whole line. */
.rotate-text--script{
  font-family:'Libre Caslon Text', Georgia, serif;
  font-style:italic;
  font-weight:400;
  background:linear-gradient(100deg, var(--accent) 0%, var(--accent-deep) 100%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  /* Same clipping fix as .hl-accent above — italic glyphs at the edges of the
     highlighted word were getting cut off by the gradient's text-clip box. */
  padding:0 0.1em;
  margin:0 -0.1em;
  /* Jitter fix (13.09.2026, reported repeatedly): Libre Caslon Text's own
     vertical metrics differ from Archivo, so on every other phrase (the ones
     with a highlighted keyword) the line's rendered height nudges slightly,
     shifting everything below up/down as it types/deletes. Forcing the exact
     same numeric line-height here (rather than inheriting it) keeps this
     span's box identical to the plain-text phrases in browsers that would
     otherwise recompute it from the swapped font's own ascent/descent. */
  line-height:1.3;
}
.hero h1 .rotate-text{
  color:var(--accent);
  white-space:nowrap;
  /* Own inline-block box with a fixed, generous line-height so the row never
     needs to resize as it mixes fonts (Archivo ↔ Libre Caslon Text italic) while typing —
     that resizing/re-centering was the cause of the visible up/down jitter.
     The small padding-top nudges the whole row ~2mm down, imperceptibly, so it
     sits pinned in one fixed spot regardless of which phrase is showing. */
  display:inline-block;
  line-height:1.3;
  padding-top:2mm;
  vertical-align:top;
  /* Safety margin (13.09.2026): nowrap lets the longest phrases outgrow the
     h1's own 17ch box on purpose (so the line never re-wraps/jitters while
     typing) — but nothing was stopping that overflow from reaching the exact
     edge of the screen. This caps the line at the viewport width minus a
     fixed indent as a hard backstop; combined with the smaller font-size
     above, real phrase content stays fully visible at ordinary widths, and
     only an extreme edge case (a browser window resized far narrower than
     any real device) would ever invisibly clip a trailing character. */
  max-width:calc(100vw - 80px);
  overflow:hidden;
}
.hero h1 .rotate-text::after{
  content:'';
  display:inline-block;
  width:3px;
  height:0.85em;
  margin-left:2px;
  background:var(--accent);
  vertical-align:-0.1em;
  animation:caret 1s steps(1) infinite;
}
@keyframes caret{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
@media (max-width:640px){
  .hero h1{ max-width:100%; }
}
@media (max-width:1120px){
  /* Below the width where the font-size clamp reaches its ceiling, the
     nowrap+hard-cap combo above would still clip the longest phrase's last
     word or two — safer to let it wrap onto a second line here instead of
     silently losing content. */
  .hero h1 .rotate-text{ white-space:normal; max-width:100%; overflow:visible; }
  /* The fixed 2-line height above assumes the rotate-text always stays on one
     line — true above this breakpoint (nowrap), no longer guaranteed here now
     that it's allowed to wrap. Back to natural height here so a wrapped 3rd
     line never gets clipped; the small residual jitter this re-allows only
     shows up at these narrower widths, not on the screen size it was reported on. */
  .hero h1{ height:auto; overflow:visible; }
}
.hero__eyebrow-wrap{ margin-top:20px; }
.hero .eyebrow{ margin-top:clamp(28px,6.5vh,72px); }
/* +~1mm extra top margin (13.09.2026, per repeated jitter report) as a small
   safety buffer on top of the line-height fix above — even if a browser still
   nudges the rotating line's height slightly between phrases, this keeps the
   subtitle's resting position visually stable instead of chasing it exactly. */
.hero__sub{ margin-top:calc(clamp(16px,3vh,26px) + 4px); font-size:19px; color:var(--ink-soft); max-width:46ch; }
.hero__actions{ margin-top:clamp(20px,4vh,36px); display:flex; align-items:center; gap:26px; flex-wrap:wrap; }

/* ---------- Bottom fade (inspired by akquise.de's progressive blur, ~25% lighter) ---------- */
/* Sits below the logo row, inside the hero's own bottom padding — logos stay fully sharp. */
.hero__fade{
  position:absolute;
  left:0; right:0; bottom:0;
  height:44px; /* stays inside the hero's own bottom padding, below the logo row */
  pointer-events:none;
  backdrop-filter:blur(5.6px);
  -webkit-backdrop-filter:blur(5.6px);
  background:linear-gradient(rgba(251,250,246,0), rgba(251,250,246,0.6));
  -webkit-mask-image:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
  mask-image:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
  /* Same show/hide behavior as the Dynamic Island nav (13.09.2026): invisible
     while at the very top of the page, fades in on the first downward scroll.
     Toggled by nav.js via the shared scroll listener. */
  opacity:0;
  transition:opacity 0.35s ease;
}
.hero__fade.is-visible{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .hero__fade{ transition:none; } }

/* ---------- Hero logo strip ("bereits zusammengearbeitet mit") ---------- */
.hero-logos{ margin-top:clamp(32px,8vh,88px); }
.hero-logos__row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(30px,4.6vw,72px); /* reduziert (05.10.2026), da Myseguro/Miracles jetzt breite Schriftzüge sind */
}
.hero-logo{ display:block; }
.hero-logo--img{
  -webkit-user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; -o-user-drag:none; user-drag:none;
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
.hero-logo--img{ height:clamp(39px,5.18vh,56px); width:auto; } /* +15% */
/* Myseguro + Miracles wie im LinkedIn-Banner (05.10.2026): Myseguro horizontal (Schild + Schriftzug, ohne Badge-Hintergrund),
   Miracles als voller Schriftzug statt nur "M". Höhe kleiner, weil beide Logos jetzt breit statt quadratisch sind. */
.hero-logo--myseguro{ height:clamp(36px,4.8vh,50.4px); }
.hero-logo--miracles{ height:clamp(18.12px,2.412vh,25.32px); } /* 22.10.2026: Großbuchstaben-M exakt auf Höhe des Myseguro-M (M = 45,5 % der Myseguro-Bildhöhe, 90,6 % der Miracles-Bildhöhe → Faktor 0,502) */
/* 22.10.2026 (17:31): alle Hero-Logos nach dem Abgleich gemeinsam um 20 % vergrößert (Verhältnisse unverändert) */
/* ISG (22.10.2026): kompaktes Emblem-Logo (SVG, Farbe #1D4F91), Höhe an die übrigen Logos angeglichen */
.hero-logo--isg{ height:clamp(32.04px,4.272vh,44.88px); } /* 22.10.2026: "I" (SVG y 39,4–121,6 = 51,1 % der Bildhöhe) exakt auf Höhe der beiden M → Faktor 0,891 zu Myseguro */
.hero-logo--pushed{ height:clamp(33px,4.404vh,46.32px); } /* 22.10.2026: gelber Kasten (97 % der Bildhöhe) exakt so hoch wie ISG von Bogenspitze oben bis unten (= volle ISG-Höhe) */
.hero-logo--goguenther{ height:clamp(32.04px,4.272vh,44.88px); } /* 22.10.2026: Logo füllt 100 % der Bildhöhe → exakt so hoch wie der gelbe Pushed-Kasten */
a.hero-logo{ text-decoration:none; cursor:pointer; }
.hero-logo--paravis{
  display:inline-flex;
  align-items:center;
  height:clamp(32.04px,4.272vh,44.88px); /* 22.10.2026: an ISG-Höhe angeglichen */
  color:var(--ink);
  font-family:'Playfair Display', Georgia, serif;
  font-weight:500;
  font-size:clamp(23.16px,3.084vh,32.4px); /* 22.10.2026: "P" (Playfair-Versalhöhe 0,708 em) exakt auf Höhe der M → Faktor 0,643 zu Myseguro; letter-spacing in em skaliert mit */
  letter-spacing:0.13em;
  white-space:nowrap;
  position:relative; top:-0.1em; /* 22.10.2026: Text sitzt in der Zeile tiefer als die Bild-Logos — 0,1 em nach oben, damit das "P" exakt auf Höhe der M steht (live gemessen, Abweichung 0 px) */
}

/* ---------- Scroll-reveal utility ---------- */
.reveal{
  opacity:1;
  transform:none;
  transition:opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.js-reveal-ready .reveal{
  opacity:0;
  transform:translateY(18px);
}
.js-reveal-ready .reveal.is-visible{
  opacity:1;
  transform:none;
}
.reveal-delay-1{ transition-delay:0.08s; }
.reveal-delay-2{ transition-delay:0.16s; }
.reveal-delay-3{ transition-delay:0.24s; }
.reveal-delay-4{ transition-delay:0.32s; }
.reveal-delay-5{ transition-delay:0.40s; }
@media (prefers-reduced-motion: reduce){
  .js-reveal-ready .reveal{ opacity:1; transform:none; }
}

/* ---------- Hero-Logos: wiederholender Reveal (13.09.2026) ---------- */
/* Eigene Variante von .reveal für die 5 Logos: bewusst etwas deutlicher (mehr
   Bewegung + leichtes Pop per Overshoot-Easing, "soll mir auffallen") und über
   einen eigenen, NICHT-unobserving Observer gesteuert (home.js) — die Animation
   spielt jedes Mal neu ab, wenn die Reihe erneut in den Viewport kommt, nicht
   nur beim ersten Mal. */
.logo-reveal{
  opacity:1;
  transform:none;
  transition:opacity 0.55s ease, transform 0.55s cubic-bezier(.34,1.4,.4,1);
}
.js-reveal-ready .logo-reveal{
  opacity:0;
  transform:translateY(26px) scale(0.92);
}
.js-reveal-ready .logo-reveal.is-visible{
  opacity:1;
  transform:none;
}
.logo-reveal-delay-1{ transition-delay:0.05s; }
.logo-reveal-delay-2{ transition-delay:0.12s; }
.logo-reveal-delay-3{ transition-delay:0.19s; }
.logo-reveal-delay-4{ transition-delay:0.26s; }
.logo-reveal-delay-5{ transition-delay:0.33s; }
.logo-reveal-delay-6{ transition-delay:0.40s; }
@media (prefers-reduced-motion: reduce){
  .js-reveal-ready .logo-reveal{ opacity:1; transform:none; }
}

/* ---------- Für-wen Fit-Check ---------- */
.fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:760px){ .fit-grid{ grid-template-columns:1fr; } }
.fit-col{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:32px 30px; }
.fit-col h3{ font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:18px; }
.fit-col.is-yes h3{ color:var(--accent-deep); }
.fit-col.is-no h3{ color:var(--ink-faint); }
.fit-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.fit-list li{ display:flex; gap:12px; font-size:15px; color:var(--ink-soft); line-height:1.5; }
.fit-list .mark{ flex-shrink:0; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-top:1px; }
.fit-col.is-yes .mark{ background:var(--accent-tint); color:var(--accent-deep); }
.fit-col.is-no .mark{ background:#FBEAEA; color:#B3261E; }

/* ---------- Magnetische Kipp-Flächen (heartbeat-consulting.com-Referenz) ---------- */
/* JS (home.js) haengt das an .pain-card/.case/.stat-tile/.fit-col/.flip-card/
   .benefit-grid und kippt sie per mousemove leicht Richtung Cursor. transform wird
   dabei komplett von JS gesteuert, diese Klasse liefert nur die Perspektive + das
   weiche Zurückfedern beim Verlassen. */
.tilt-surface{ transform-style:preserve-3d; will-change:transform; }

/* ---------- Herausforderung (Pain) ---------- */
.pain-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:760px){ .pain-grid{ grid-template-columns:1fr; } }
.pain-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:26px 28px; transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.pain-card:hover{ box-shadow:0 16px 32px -20px rgba(20,22,31,0.25); }
.pain-card h3{ font-size:17px; font-weight:800; }
.pain-card p{ margin-top:10px; color:var(--ink-soft); font-size:14.5px; }
.pain-summary{
  margin-top:44px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.pain-summary p{ font-family:'Archivo', sans-serif; font-weight:800; font-size:20px; max-width:34ch; }

/* ---------- Pain-summary closer: rotating text (fade, not typewriter) ---------- */
/* Same idea as the hero's #heroRotate, but explicitly NOT the typing/deleting
   technique (per request: "nicht so cornig") — the phrase fades out, swaps,
   fades back in. Runs continuously once the section has scrolled into view
   (same .is-visible class the section-wide reveal observer already sets). */
#painSummaryRotate{
  display:inline-block;
  transition:opacity 0.4s ease;
}
#painSummaryRotate.is-fading{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  #painSummaryRotate{ transition:none; }
}

/* ---------- CTA-Textblöcke: Links-nach-rechts-Wipe-Reveal (13.09.2026) ---------- */
/* Gilt für beide .pain-summary-Blöcke ("Kurz gesagt" + "Wenn eines davon zutrifft"):
   der Container selbst bekommt keine eigene Fade-Bewegung mehr (bleibt stabil),
   stattdessen deckt der Textabsatz per clip-path von links nach rechts auf — auch
   bei zwei Zeilen laufen beide gleichzeitig auf, nicht nacheinander Zeile für
   Zeile. Danach erscheint der Termin-buchen-Button rasch. Einmalig: läuft über
   denselben Observer/dieselbe .is-visible-Klasse wie der normale .reveal. */
.js-reveal-ready .pain-summary.reveal{ opacity:1; transform:none; }
.pain-summary p{ transition:clip-path 0.6s cubic-bezier(.65,0,.35,1); }
.js-reveal-ready .pain-summary p{ clip-path:inset(0 100% 0 0); }
.js-reveal-ready .pain-summary.is-visible p{ clip-path:inset(0 0 0 0); }
.pain-summary .btn{ transition:opacity 0.25s ease 0.5s, transform 0.25s ease 0.5s; }
.js-reveal-ready .pain-summary .btn{ opacity:0; transform:translateY(6px); }
.js-reveal-ready .pain-summary.is-visible .btn{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js-reveal-ready .pain-summary p{ clip-path:none; }
  .js-reveal-ready .pain-summary .btn{ opacity:1; transform:none; }
}

/* ---------- Kommt dir bekannt vor (rhetorical questions) ---------- */
.q-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 32px; }
@media (max-width:760px){ .q-list{ grid-template-columns:1fr; } }
.q-list li{
  display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink); font-weight:500;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.q-list li::before{ content:'?'; flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--accent-tint); color:var(--accent-deep); font-family:'IBM Plex Mono', monospace; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
/* Forced onto one line on request (14.09.2026) — the old shared max-width:34ch
   (meant for the longer "Kurz gesagt" closer) made this short line wrap for no
   reason. Falls back to a normal, smaller-type wrap only on very narrow phones
   where a single line would otherwise overflow the viewport. */
/* p.q-closer (not just .q-closer) so this beats the shared ".pain-summary p"
   rule's max-width:34ch on specificity — otherwise that wider rule silently
   overrides max-width:none here and the "single line" fix has no effect. */
p.q-closer{ font-family:'Archivo', sans-serif; font-weight:800; font-size:20px; max-width:none; color:var(--ink); white-space:nowrap; }
@media (max-width:480px){ p.q-closer{ white-space:normal; font-size:16px; } }

/* Stamp/strike-through "solltest→müsstest" correction removed on request
   (15.09.2026) — reverted back to plain, normally-written text, no red stamp,
   no strike-through. See the heading markup itself for the plain wording. */

/* ---------- Was bekommst du (benefit grid) ---------- */
/* 5 cards (13.09.2026, was 4) — tightened padding so all five sit comfortably
   in one row on desktop; hover changed from a blue fill to the same subtle
   lift+shadow used everywhere else (pain-card, stat-tile, case, flip-card). */
.benefit-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
@media (max-width:1000px){ .benefit-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .benefit-grid{ grid-template-columns:1fr; } }
.benefit{
  position:relative; background:var(--surface); padding:24px 20px;
  transition:transform 0.2s ease, box-shadow 0.2s ease; z-index:0;
}
.benefit:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -20px rgba(20,22,31,0.25); z-index:1; }
.benefit__star{ position:absolute; top:14px; right:16px; color:var(--accent); font-size:13px; line-height:1; }
.benefit h3{ font-size:16px; font-weight:800; padding-right:18px; }
.benefit p{ margin-top:10px; color:var(--ink-soft); font-size:14px; }

/* ---------- Process ---------- */
/* Kein eigener Rahmen mehr — das Hintergrundraster übernimmt die Abgrenzung.
   padding-left je Step wird von alignStepsToGrid() in home.js gesetzt, damit
   alle drei denselben Abstand zur jeweils nächsten Rasterlinie haben wie 01. */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; } }
.step{ padding:34px 34px 34px 0; }
@media (max-width:820px){
  .step{ padding:28px 0; }
}
.step__num{ font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--accent); font-weight:500; }
.step h3{ font-size:21px; font-weight:800; margin-top:14px; }
.step p{ margin-top:12px; color:var(--ink-soft); font-size:15.5px; max-width:36ch; }
/* Qualifying-criteria bullets inside Station 01 (13.09.2026) — same mark-badge pattern
   as .qualify-list / .fit-list, sized down to sit comfortably inside a step card. */
.step__criteria{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; max-width:36ch; }
.step__criteria li{ display:flex; gap:10px; font-size:13.5px; color:var(--ink-soft); line-height:1.45; }
.step__criteria .mark{ flex-shrink:0; width:17px; height:17px; border-radius:50%; background:var(--accent-tint); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; margin-top:1px; }

/* ---------- Leistungen (flip cards) ---------- */
/* Jede Karte ist unabhängig von den anderen drei: eigener Klick-State,
   eigener Auto-Rückdreh-Timer (siehe home.js). Kein Akkordeon-Verhalten. */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:820px){ .cards{ grid-template-columns:1fr; } }
/* CRM-Setup leads as a full-width card (13.09.2026); the remaining four fall
   into a clean 2x2 grid underneath it. Flip mechanics (absolute front/back,
   rotateX) are unaffected by width, so only the grid placement changes. */
.card--wide{ grid-column:1 / -1; }

.flip-card{ perspective:1600px; cursor:pointer; border-radius:18px; transition:transform 0.2s ease; }
.flip-card:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.flip-card__inner{
  position:relative; width:100%; height:100%; min-height:238px;
  transition:transform 0.6s cubic-bezier(0.4, 0.15, 0.2, 1);
  transform-style:preserve-3d;
}
.flip-card.is-flipped .flip-card__inner{ transform:rotateX(180deg); }
@media (max-width:600px){ .flip-card__inner{ min-height:296px; } }
@media (prefers-reduced-motion: reduce){ .flip-card__inner{ transition:none; } }

.flip-card__front, .flip-card__back{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:24px 28px; display:flex; flex-direction:column; gap:10px;
  transition:box-shadow 0.2s ease;
}
/* Lift-on-hover entfernt (17.09.2026) — transform gehört jetzt komplett dem JS-Kippeffekt, siehe .tilt-surface */
.flip-card:hover .flip-card__front,
.flip-card:hover .flip-card__back{ box-shadow:0 16px 32px -20px rgba(20,22,31,0.25); }
.flip-card__back{ transform:rotateX(180deg); justify-content:center; }
.card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.card h3{ font-size:19px; font-weight:800; }
.card__toggle{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--accent-tint); color:var(--accent-deep);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.card__lead{ color:var(--ink-soft); font-size:15px; }
.card__price{
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--accent-deep);
  background:var(--accent-tint); display:inline-block; width:fit-content;
  padding:5px 12px; border-radius:999px; font-weight:500;
}
.card__detail{ color:var(--ink-soft); font-size:14.5px; max-width:56ch; }

/* ---------- Beispielrechnung / Zahlen ---------- */
.stat-note{ font-size:14px; color:var(--ink-faint); margin-top:14px; max-width:56ch; }
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
@media (max-width:820px){ .stat-grid{ grid-template-columns:1fr; } }
.stat-tile{
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px 26px;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-tile:hover{ box-shadow:0 16px 32px -20px rgba(20,22,31,0.25); }
.stat-tile .stat-value{ font-family:'Archivo', sans-serif; font-weight:900; font-size:clamp(26px,3vw,34px); color:var(--accent-deep); font-variant-numeric:tabular-nums; }
.stat-tile .stat-label{ margin-top:10px; color:var(--ink-soft); font-size:14.5px; }

/* ---------- Referenzen ---------- */
.cases{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:820px){ .cases{ grid-template-columns:1fr; } }
.case{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:32px; transition:transform 0.2s ease, box-shadow 0.2s ease; }
.case:hover{ box-shadow:0 16px 32px -20px rgba(20,22,31,0.25); }
.case__tag{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); }
.case h3{ font-size:19px; font-weight:800; margin-top:12px; }
.case p{ color:var(--ink-soft); font-size:15px; margin-top:12px; }
.case__meta{ margin-top:18px; font-size:13.5px; color:var(--ink-faint); border-top:1px solid var(--line); padding-top:14px; }

/* ---------- Einwandbehandlung / simulierter Chat — akquise.de-Fenster-Chrome ----------
   Chrome (Titelbar mit Ampel-Punkten, Fenstergröße, Farben, Disclaimer, Blur) ist
   1:1 von akquise.de live nachgemessen. Die eigentliche Chat-Technik (Nachrichten,
   Auswahlmöglichkeiten) folgt in einer späteren Runde — bis dahin laufen hier
   weiter die bereits bestehenden drei Klick-Chips als Übergangsinhalt. */
.faq-ai{
  margin-top:52px;
  /* Window bleed on request (15.09.2026): akquise.de's chat window runs noticeably
     wider than ours did — about 1cm (~40px) past the section's own .wrap edge on
     each side, not just into its padding. -72px clears the .wrap's 32px padding
     first, then bleeds ~40px further. Reset below 1300px (.wrap is 1160px wide, so
     that's the point the bleed would start clipping) to avoid horizontal overflow. */
  margin-left:-72px; margin-right:-72px;
}
@media (max-width:1300px){ .faq-ai{ margin-left:0; margin-right:0; } }
.faq-ai__label{ font-size:13px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px; }

.faq-ai__window{
  max-width:1280px; width:100%; margin:0 auto;
  border-radius:20px; overflow:hidden; position:relative;
  box-shadow:0 30px 60px -30px rgba(20,22,31,0.35), 0 10px 24px -12px rgba(20,22,31,0.2);
}
.faq-ai__titlebar{
  height:60px; padding:0 35px 0 22px; background:#171717; border-radius:20px 20px 0 0;
  display:flex; align-items:center; justify-content:space-between;
}
.faq-ai__lights{ display:flex; align-items:center; gap:10px; }
.faq-ai__light{ width:18px; height:18px; border-radius:50%; display:block; }
.faq-ai__light--red{ background:#F60C2D; }
.faq-ai__light--yellow{ background:#F3BF00; }
.faq-ai__light--green{ background:#51C960; }
.faq-ai__brand{ display:flex; align-items:center; gap:9px; }
.faq-ai__brand-logo{ font-family:'Libre Caslon Text', Georgia, serif; font-style:italic; font-weight:500; font-size:16px; color:#fff; line-height:1; }
.faq-ai__brand-domain{ font-family:'Hanken Grotesk', sans-serif; font-size:13px; color:rgba(255,255,255,0.55); }

.faq-ai__body{ background:#212121; border-radius:0 0 20px 20px; padding:24px 24px 16px; position:relative; overflow:hidden; } /* tightened on request (15.09.2026) — was 28px 28px 22px */

/* ---------- Chat thread ----------
   Sidebar layout removed on request (15.09.2026): the "weitere Fragen" chips used
   to live in a persistent top-right box (.faq-ai__layout grid + .faq-ai__suggest),
   which is exactly why the left/right indents didn't match — the thread column was
   narrower than the full width, but user bubbles are right-aligned to justify-content:
   flex-end within it. Chips now render inline at the bottom of #faqThread itself
   (see .faq-suggest-row below and home.js renderSuggestions()), so every element in
   the thread shares one right boundary, same as akquise.de. */
.faq-ai__thread{ display:flex; flex-direction:column; gap:16px; min-height:180px; position:relative; z-index:1; }

.faq-msg{ display:flex; }
.faq-msg--user{ justify-content:flex-end; }
.faq-bubble{
  background:rgba(255,255,255,0.09); color:#F2F2F5; border-radius:16px 16px 4px 16px;
  padding:11px 16px; font-size:14px; line-height:1.5; max-width:82%;
}
.faq-msg--agent{ align-items:flex-start; gap:11px; max-width:100%; }
/* Circular profile-picture-style badge removed on request (15.09.2026) — just
   the plain "BC" wordmark-style label now, no circle/background. */
.faq-avatar{
  flex-shrink:0; margin-top:3px;
  color:#F2F2F5;
  font-family:'Libre Caslon Text', Georgia, serif; font-style:italic; font-weight:500; font-size:15px;
  line-height:1.4;
}
.faq-reply{ flex:1; min-width:0; }

/* Loading dots — pulse left to right, twice, while the "answer" is being generated */
.faq-loading{ display:flex; gap:6px; align-items:center; padding:11px 2px; }
.faq-loading span{ width:7px; height:7px; border-radius:50%; background:#fff; opacity:0.35; animation:faqDotPulse 0.5s ease-in-out infinite; }
.faq-loading span:nth-child(1){ animation-delay:0s; }
.faq-loading span:nth-child(2){ animation-delay:0.09s; }
.faq-loading span:nth-child(3){ animation-delay:0.18s; }
@keyframes faqDotPulse{ 0%,60%,100%{ transform:scale(1); opacity:0.35; } 30%{ transform:scale(1.4); opacity:1; } }

.faq-reply__card{ background:#fff; border-radius:14px; padding:18px 20px; color:#212121; max-width:540px; } /* capped on request (15.09.2026) so the card reads slimmer instead of stretching the full thread width */
.faq-reply__head{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.faq-check{
  flex-shrink:0; width:21px; height:21px; border-radius:50%; background:var(--accent-tint); color:var(--accent-deep);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
}
.faq-reply__head h4{ font-size:14.5px; font-weight:800; color:#171717; }
.faq-reply__bullets{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:8px; }
.faq-reply__bullets li{ font-size:13.5px; color:#3A3D4A; line-height:1.5; padding-left:16px; position:relative; min-height:1.3em; }
.faq-reply__bullets li::before{ content:'—'; position:absolute; left:0; color:var(--accent); }
.faq-reply__note{ font-size:13.5px; font-style:italic; color:#4C5062; margin-top:2px; min-height:1.3em; }
.faq-reply__more{ font-size:13.5px; color:#6B6E7D; margin-top:8px; min-height:1.3em; }
.faq-reply__social{ margin-top:14px; opacity:0; transition:opacity 0.3s ease; }
.faq-reply__social.is-visible{ opacity:1; }
.faq-reply__social a{ font-size:13px; font-weight:600; color:var(--accent-deep); text-decoration:none; }
.faq-reply__social a:hover{ text-decoration:underline; }

/* ---------- Suggestion chips ("weitere Fragen") — inline, bottom-right of thread ----------
   Rebuilt on request (15.09.2026) to match akquise.de (Bild 3): two outlined,
   bubble-shaped suggestion chips sitting bottom-right, directly above the input
   bar — appended as the last element of #faqThread after each answer finishes,
   not a persistent sidebar box. */
.faq-suggest-row{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.faq-ai__chip{
  font-family:'Hanken Grotesk', sans-serif; font-size:13.5px; font-weight:500; color:#E7E8EF;
  background:transparent; border:1px solid rgba(255,255,255,0.28); border-radius:16px 16px 4px 16px;
  padding:10px 16px; cursor:pointer; text-align:left; line-height:1.4; max-width:82%;
  transition:background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.faq-ai__chip:hover{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.5); transform:translateY(-1px); }
.faq-ai__chip:disabled{ opacity:0.4; cursor:not-allowed; transform:none; }

/* Untere Ausblendung, wie bei akquise.de — Übergang vom Nachrichtenbereich zur festen
   Eingabezeile, proportional auf unser kompakteres Fenster skaliert. */
.faq-ai__fade{
  position:absolute; left:0; right:0; bottom:96px; height:56px;
  background:linear-gradient(rgba(33,33,33,0), #212121);
  pointer-events:none; z-index:2;
}

.faq-ai__inputbar{
  margin-top:12px; display:flex; align-items:center; gap:10px; position:relative; z-index:3;
  background:#303030; border-radius:20px; padding:10px 10px 10px 15px;
} /* margin-top tightened on request (15.09.2026) — was 18px, contributing to the "too much white space" feel */
.faq-ai__input{
  flex:1; min-width:0; border:none; background:none; outline:none;
  font-family:'Hanken Grotesk', sans-serif; font-size:15px; color:#F2F2F5;
  cursor:default; /* simulierter Chat — Eingabe passiert automatisch, siehe home.js */
}
.faq-ai__input::placeholder{ color:rgba(255,255,255,0.4); }
.faq-ai__send{
  flex-shrink:0; width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:var(--btn-gradient); color:#fff; font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background 0.15s ease;
}
.faq-ai__send:hover{ background:var(--btn-gradient-hover); }
.faq-ai__disclaimer{ margin-top:9px; font-size:11px; text-align:center; color:rgba(236,236,236,0.35); position:relative; z-index:3; } /* tightened on request (15.09.2026) — was 14px */

/* ---------- Next Steps (Qualify + Ablauf) ---------- */
.next-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
@media (max-width:900px){ .next-grid{ grid-template-columns:1fr; gap:40px; } }
/* "Bevor wir starten" now holds only the qualify block (13.09.2026) — single centered
   column instead of the old two-column layout, so it doesn't read as a half-empty grid. */
.next-grid--single{ grid-template-columns:1fr; max-width:640px; margin:0 auto; }
.qualify h3{ font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--accent-deep); margin-bottom:18px; }
.qualify-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.qualify-list li{ display:flex; gap:12px; font-size:15px; color:var(--ink-soft); line-height:1.5; }
.qualify-list .mark{ flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--accent-tint); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-top:1px; }
.qualify-cta{ margin-top:26px; }
.next-steps-list{ list-style:none; margin:0; padding:0; counter-reset:next; display:flex; flex-direction:column; gap:20px; }
.next-steps-list li{ display:flex; gap:16px; }
.next-steps-list .num{
  counter-increment:next; content:counter(next); flex-shrink:0;
  width:32px; height:32px; border-radius:50%; background:var(--ink); color:var(--bg);
  display:flex; align-items:center; justify-content:center; font-family:'Archivo', sans-serif; font-weight:800; font-size:14px;
}
.next-steps-list .num::before{ content:counter(next); }
.next-steps-list h4{ font-size:15.5px; font-weight:800; }
.next-steps-list p{ margin-top:4px; color:var(--ink-soft); font-size:14.5px; }

/* ---------- Affiliate teaser ---------- */
.teaser{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--ink); color:var(--bg); border-radius:20px; padding:36px 40px;
}
.teaser h3{ color:var(--bg); font-size:20px; font-weight:800; }
.teaser p{ color:#B9BCCB; font-size:15px; margin-top:8px; max-width:48ch; }
.teaser a{
  font-family:'Archivo', sans-serif; /* switched from Hanken Grotesk on request (15.09.2026), matching the CTA family */
  font-size:14.5px; font-weight:700; text-decoration:none; color:var(--accent-ink);
  background:var(--btn-gradient); padding:12px 22px; border-radius:999px; white-space:nowrap;
  border:3px solid rgba(255,255,255,0.92);
  /* Outer grey ring, tone matched to the rest of the CTA family (15.09.2026) —
     same idea as the white ring's edge but a step further out, more clearly
     visible now; colour kept as our existing blue gradient, not Heartbeat's orange. */
  box-shadow:0 0 0 1.5px rgba(138,141,156,0.5);
  transition:background 0.15s ease;
} /* recoloured to match the CTA button family on request (15.09.2026) — was a plain cream fill */
/* Verdunkeln beim Hover entfernt (17.09.2026) — ersetzt durch den pulsierenden Ring (.cta-pulsing in style.css + nav.js), gleiche Behandlung wie die anderen CTA-Pillen. */
/* Grey/shine "shimmer" sweep, same technique+timing as goguenther.at's referral-program
   percentage figures (background-clip:text gradient mask, 6.5s ease-in-out sweep),
   re-colored for our dark teaser card: sweeps from muted grey-blue to a bright cream highlight. */
.shimmer-text{
  background-image:linear-gradient(100deg, #B9BCCB 35%, var(--bg) 50%, #B9BCCB 65%);
  background-size:220% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:shimmerSweep 6.5s ease-in-out infinite;
  animation-play-state:paused;
}
.is-visible .shimmer-text{ animation-play-state:running; }
@keyframes shimmerSweep{
  0%{ background-position:160% 0; }
  100%{ background-position:-60% 0; }
}
@media (prefers-reduced-motion: reduce){
  .shimmer-text{ animation:none; background-image:none; color:#B9BCCB; -webkit-text-fill-color:#B9BCCB; }
}

/* ---------- Kontakt ---------- */
.contact{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; }
@media (max-width:820px){ .contact{ grid-template-columns:1fr; gap:36px; } }
.contact h2{ font-size:clamp(28px,4vw,42px); font-weight:900; max-width:12ch; }
.contact p{ margin-top:16px; color:var(--ink-soft); font-size:17px; max-width:44ch; }
.contact__actions{ margin-top:30px; display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.contact__card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px; }
.contact__row{ display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; }
.contact__row:last-child{ border-bottom:none; }
.contact__row span:first-child{ color:var(--ink-faint); }
.contact__row a{ text-decoration:none; font-weight:600; color:var(--ink); }
.contact__row a:hover{ color:var(--accent); }

/* ---------- Kontakt-Lead-Formular ----------
   Ablauf nach Vorbild goguenther.at (kontaktForm/#kontaktBranche, live inspiziert):
   Felder werden erst validiert sobald man reinschreibt; das letzte Pflichtfeld (hier:
   E-Mail) schaltet einen zusätzlichen Frageblock per CSS-Grid-Trick frei
   (grid-template-rows 0fr -> 1fr, exakt goguenther.at's eigene Animation/Timing). */
.lead-form{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px; display:flex; flex-direction:column; gap:14px; }
.lead-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .lead-form-row{ grid-template-columns:1fr; } }
.lead-phone-row{ display:flex; gap:10px; }
.lead-phone-row input[type="tel"]{ flex:1 1 auto; min-width:0; }
.lead-phone-row .lead-phone-code{ flex:0 0 auto; width:auto; min-width:108px; }
@media (max-width:480px){ .lead-phone-row .lead-phone-code{ min-width:92px; } }
/* Vorwahl-Feld (05.10.2026): eigener, schmaler Pfeil direkt neben Flagge + Vorwahl statt des
   Browser-Pfeils ganz am rechten Rand. Breite passt auch für 4-stellige Vorwahlen (+423). */
.lead-form select.lead-phone-code{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  width:112px; min-width:112px; padding:13px 32px 13px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%234C5062' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:11px 7px;
  text-overflow:clip; white-space:nowrap;
}
@media (max-width:480px){ .lead-form select.lead-phone-code{ width:104px; min-width:104px; padding-left:12px; padding-right:28px; background-position:right 11px center; } }
.lead-form input[type="text"],
.lead-form input[type="tel"],
.lead-form input[type="email"]{
  width:100%; font-family:'Hanken Grotesk', sans-serif; font-size:15px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:13px 15px;
  transition:border-color 0.15s ease;
}
.lead-form input::placeholder{ color:var(--ink-faint); }
.lead-form input:focus{ outline:none; border-color:var(--accent); }
.lead-form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.lead-reveal{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 0.38s cubic-bezier(.65,0,.35,1), margin-top 0.38s cubic-bezier(.65,0,.35,1);
}
.lead-reveal.is-open{ grid-template-rows:1fr; margin-top:2px; }
.lead-reveal > div{ overflow:hidden; }
.lead-reveal__inner{ display:flex; flex-direction:column; gap:16px; padding-top:4px; }

.lead-field-label{ font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:8px; }

/* Jahresumsatz-Auswahl: bewusst als vertikale Bullet-Liste statt einer
   Chip-Reihe (Vorbild: Alex Hormozi-Formulare) — jede Stufe eine eigene
   Zeile mit sichtbarem Options-Punkt statt einem Pill-Grid. */
.lead-tier-list{ display:flex; flex-direction:column; gap:8px; }
.lead-tier{ position:relative; cursor:pointer; display:flex; align-items:center; gap:12px; }
.lead-tier input{ flex-shrink:0; width:18px; height:18px; accent-color:var(--accent); }
.lead-tier span{
  display:flex; align-items:center; flex:1 1 auto; font-size:14.5px; font-weight:500; color:var(--ink-soft);
  background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:12px 20px;
  transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lead-tier input:checked + span{ background:var(--accent-tint); border-color:var(--accent); color:var(--accent-deep); font-weight:600; }
.lead-tier input:disabled + span{ opacity:0.5; cursor:not-allowed; }
.lead-tier input:not(:disabled):hover + span{ border-color:var(--accent); }

.lead-qualify p{ font-size:14px; color:var(--ink-soft); margin-bottom:8px; }
.lead-form select{
  width:100%; font-family:'Hanken Grotesk', sans-serif; font-size:15px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:13px 15px;
  cursor:pointer;
}
.lead-form select:disabled{ cursor:not-allowed; opacity:0.6; }
.lead-form select:focus{ outline:none; border-color:var(--accent); }

.lead-form button[type="submit"]{ margin-top:2px; align-self:flex-start; }
.lead-form__status{ font-size:13.5px; min-height:1em; }
.lead-form__status[data-state="ok"]{ color:#1B7A3D; }
.lead-form__status[data-state="error"]{ color:#B3261E; }

/* ---------- Kontaktformular: Einwilligungs-Checkboxen (13.09.2026) ---------- */
/* Nach goguenther.at-Vorbild: verpflichtende Datenverarbeitungs-Einwilligung
   (vorangehakt, aber weiterhin required) + optionale Marketing-Einwilligung. */
.lead-consent{ display:flex; flex-direction:column; gap:12px; margin-top:2px; }
.lead-checkbox{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.lead-checkbox input[type="checkbox"]{
  flex-shrink:0; width:18px; height:18px; margin-top:2px; cursor:pointer;
  accent-color:var(--accent);
}
.lead-checkbox span{ font-size:13px; line-height:1.5; color:var(--ink-soft); }
.lead-checkbox a{ color:var(--accent-deep); text-decoration:underline; }

/* ---------- Kontaktformular: Multi-Step-Flow (Typeform-Stil) ---------- */
.lead-form{ position:relative; }
.lead-step{ display:none; }
.lead-step.is-active{ display:flex; flex-direction:column; gap:14px; animation:leadStepIn .28s ease both; }
@keyframes leadStepIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.lead-step .lead-next{ align-self:flex-start; margin-top:2px; }

/* Zurück-Button oben rechts (grau, halbtransparent, unterstrichen) */
.lead-back{
  position:absolute; top:16px; right:18px; z-index:2;
  background:none; border:0; cursor:pointer; font:inherit; font-size:13px;
  color:var(--ink-faint); opacity:.55; text-decoration:underline; text-underline-offset:2px; padding:4px 2px;
  transition:opacity .15s ease;
}
.lead-back:hover{ opacity:.9; }
.lead-back[hidden]{ display:none; }

.lead-choices{ display:flex; flex-direction:column; gap:10px; }
.lead-choices--grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lead-choices--grid .lead-choice{ min-height:104px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-radius:16px; }
.lead-choice{
  width:100%; text-align:left; cursor:pointer; font:inherit; font-size:14.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  transition:border-color .15s ease, background .15s ease, color .15s ease, transform .05s ease;
}
.lead-choice:hover{ border-color:var(--accent); background:var(--accent-tint); }
.lead-choice:active{ transform:translateY(1px); }
.lead-choice.is-selected{ border-color:var(--accent); background:var(--accent-tint); color:var(--accent-deep); font-weight:600; }
.lead-choice__sub{ display:block; margin-top:4px; font-size:12.5px; font-weight:400; color:var(--ink-soft); }
.lead-choice.is-selected .lead-choice__sub{ color:var(--accent-deep); }

.lead-final{ display:none; flex-direction:column; gap:16px; }
.lead-final.is-active{ display:flex; animation:leadStepIn .28s ease both; }
.lead-form .lead-final .lead-submit-btn{ align-self:center; margin-top:2px; }

@media (prefers-reduced-motion: reduce){
  .lead-step.is-active, .lead-final.is-active{ animation:none; }
}


/* ============================================================
   Hero-Hintergrund: animierter 3D-Kalender (calendar-hero.js)
   ============================================================ */
/* Seitlich abschneiden (kein horizontales Scrollen), oben/unten darf der Kalender weiterlaufen:
   oben unter die Nav-Leiste mit ihrem Blur, unten sanft ausblendend in den Bottom-Blur. */
.hero{ position:relative; overflow-x:clip; overflow-y:visible; isolation:isolate; }
.hero .cal3d, .hero .hero__veil{ top:calc(-1 * var(--nav-height, 88px)); bottom:-150px; }
.hero .cal3d, .hero .hero__veil{
  /* Kalender UND Dimmung blenden gemeinsam aus → das Seitengitter kommt weich zurück, ohne Kante */
  --fade:linear-gradient(to bottom, #000 0%, #000 60%, rgba(0,0,0,.9) 66%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.5) 78%,
          rgba(0,0,0,.3) 84%, rgba(0,0,0,.14) 90%, rgba(0,0,0,.04) 96%, rgba(0,0,0,0) 100%);
  -webkit-mask-image:var(--fade); mask-image:var(--fade); }
/* Bottom-Blur reicht jetzt bis zum Ende des Kalender-Auslaufs und läuft oben UND unten weich aus
   (vorher endete er hart an der Hero-Unterkante → sichtbare Linie). */
.hero .hero__fade{
  bottom:-150px; height:230px;
  background:none;
  -webkit-mask-image:linear-gradient(rgba(0,0,0,0) 0%, #000 40%, #000 55%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(rgba(0,0,0,0) 0%, #000 40%, #000 55%, rgba(0,0,0,0) 100%); }
.hero > .wrap{ position:relative; z-index:3; }
.hero__fade{ z-index:4; }
/* Dimmung, damit Headline/Text vorne lesbar bleiben */
.hero__veil{ position:absolute; left:0; right:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(251,250,246,.94) 0%, rgba(251,250,246,.80) 42%, rgba(251,250,246,.35) 100%); }
@media (max-width:760px){
  .hero__veil{ background:rgba(251,250,246,.86); }
}
  .cal3d{position:absolute;inset:0;z-index:1;perspective:1700px;perspective-origin:50% 45%;pointer-events:none;
    font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Hanken Grotesk',sans-serif;-webkit-font-smoothing:antialiased;}
  .cal3d__cam{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform;}
  .cal3d__plane{position:absolute;width:1500px;height:960px;left:-750px;top:-480px;transform-style:preserve-3d;
    background:#fff;border-radius:22px;box-shadow:0 40px 90px -30px rgba(20,22,31,.35),0 0 0 1px rgba(20,22,31,.06);}

  /* Topbar */
  .cal3d .c-top{position:absolute;left:0;right:0;top:0;height:74px;display:flex;align-items:center;gap:18px;padding:0 28px;
    border-bottom:1px solid #eef0f4;color:#1f1f1f;}
  .cal3d .c-logo{display:flex;align-items:center;gap:10px;font-size:22px;color:#444746;width:220px;}
  .cal3d .c-logo i{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:7px;background:#4285f4;color:#fff;
    font-style:normal;font-weight:600;font-size:17px;}
  .cal3d .c-btn{border:1px solid #747775;border-radius:999px;padding:8px 20px;font-size:14px;color:#1f1f1f;}
  .cal3d .c-arrow{font-size:20px;color:#444746;padding:0 6px;}
  .cal3d .c-month{font-size:22px;color:#1f1f1f;}
  .cal3d .c-week{background:#e9eef6;border-radius:6px;padding:3px 8px;font-size:13px;color:#444746;}
  .cal3d .c-view{margin-left:auto;border:1px solid #747775;border-radius:999px;padding:8px 18px;font-size:14px;}

  /* Sidebar */
  .cal3d .c-side{position:absolute;left:0;top:74px;width:250px;bottom:0;padding:18px 18px 0 22px;color:#1f1f1f;}
  .cal3d .c-create{display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:14px 22px;font-size:15px;
    box-shadow:0 1px 3px rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15);margin-bottom:26px;}
  .cal3d .c-create b{font-size:24px;font-weight:300;line-height:0;}
  .cal3d .c-mini-h{display:flex;justify-content:space-between;font-size:14px;margin:0 4px 10px;}
  .cal3d .c-mini{display:grid;grid-template-columns:repeat(8,1fr);row-gap:6px;font-size:11px;text-align:center;color:#3c4043;}
  .cal3d .c-mini span{line-height:22px;}
  .cal3d .c-mini .wk{background:#f1f3f4;color:#70757a;border-radius:3px;}
  .cal3d .c-mini .dim{color:#9aa0a6;}
  .cal3d .c-mini .today{background:#0b57d0;color:#fff;border-radius:50%;}
  .cal3d .c-mini .hd{color:#70757a;}
  .cal3d .c-cals{margin-top:26px;font-size:14px;}
  .cal3d .c-cals div{display:flex;align-items:center;gap:12px;margin:12px 0;}
  .cal3d .c-cals s{width:15px;height:15px;border-radius:3px;display:inline-block;}

  /* Wochenraster */
  .cal3d .c-main{position:absolute;left:250px;right:24px;top:74px;bottom:18px;}
  .cal3d .c-heads{position:absolute;left:64px;right:0;top:0;height:92px;display:grid;grid-template-columns:repeat(7,1fr);}
  .cal3d .c-heads div{text-align:center;padding-top:14px;color:#444746;}
  .cal3d .c-heads small{display:block;font-size:11px;letter-spacing:.06em;font-weight:500;}
  .cal3d .c-heads span{display:inline-grid;place-items:center;width:46px;height:46px;margin-top:4px;font-size:25px;color:#1f1f1f;border-radius:50%;}
  .cal3d .c-heads .today small{color:#0b57d0;}
  .cal3d .c-heads .today span{background:#0b57d0;color:#fff;}
  .cal3d .c-grid{position:absolute;left:64px;right:0;top:92px;bottom:0;transform-style:preserve-3d;
    border-top:1px solid #dde1e7;}
  .cal3d .c-hours{position:absolute;left:0;width:64px;top:92px;bottom:0;}
  .cal3d .c-hours span{position:absolute;right:12px;font-size:11px;color:#70757a;transform:translateY(-50%);}
  .cal3d .c-line{position:absolute;left:0;right:0;height:1px;background:#e3e6eb;}
  .cal3d .c-vline{position:absolute;top:0;bottom:0;width:1px;background:#e3e6eb;}
  .cal3d .c-bg{position:absolute;inset:0;transform:translateZ(1px);}
  .cal3d .c-now{position:absolute;height:2px;background:#ea4335;z-index:5;transform:translateZ(26px);}
  .cal3d .c-now::before{content:"";position:absolute;left:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:#ea4335;}

  /* Termine */
  .cal3d .ev{position:absolute;box-sizing:border-box;border-radius:7px;color:#fff;font-size:12px;line-height:1.28;
    padding:2px 7px 0 9px;overflow:hidden;box-shadow:0 0 0 1px #fff;backface-visibility:hidden;opacity:0;}
  .cal3d .ev.strip{border-left:4px solid #7b5a48;padding-left:6px;}
  .cal3d .ev .t{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cal3d .ev .s{opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cal3d .ev.one .t{display:block;}
  .cal3d .ev.call{border-radius:6px;}

/* Lesbarkeits-Zone (05.10.2026): zusätzlicher weißer „Tönungs"-Blur hinter Text, Buttons und Logos.
   Ausgenommen ist nur die Zone oben rechts (dort bleibt der Kalender wie er ist). Der Übergang
   ist ein weicher Ellipsen-Verlauf, damit nirgends eine Kante oder ein Rahmen erkennbar ist.
   Unten läuft die Ebene mit derselben Ausblendung aus wie Kalender und Dimmung. */
.hero__tint{
  position:absolute; left:0; right:0; top:calc(-1 * var(--nav-height, 88px)); bottom:-150px;
  z-index:2; pointer-events:none;
  background:rgba(251,250,246,.16);
  -webkit-backdrop-filter:blur(2.5px); backdrop-filter:blur(2.5px);
  -webkit-mask-image:
    radial-gradient(ellipse 72% 68% at 100% 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,.5) 85%, #000 100%),
    var(--fade);
  -webkit-mask-composite:source-in;
  mask-image:
    radial-gradient(ellipse 72% 68% at 100% 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,.5) 85%, #000 100%),
    var(--fade);
  mask-composite:intersect;
  --fade:linear-gradient(to bottom, #000 0%, #000 60%, rgba(0,0,0,.9) 66%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.5) 78%,
          rgba(0,0,0,.3) 84%, rgba(0,0,0,.14) 90%, rgba(0,0,0,.04) 96%, rgba(0,0,0,0) 100%);
}
@media (max-width:760px){ .hero__tint{ display:none; } }
@media (prefers-reduced-motion: reduce){ .hero__tint{ -webkit-backdrop-filter:none; backdrop-filter:none; } }

/* Pulsierender Live-Punkt vor dem Hero-Eyebrow (05.10.2026) – Vorbild: Live-Ticker auf goguenther.at,
   hier in Bookflow-Königsblau. Fester Punkt + nach außen laufender, verblassender Ring. */
.eyebrow--live{ display:inline-flex; align-items:center; gap:10px; }
.live-dot{
  position:relative; flex:none;
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 4px rgba(29,59,216,.4);
}
.live-dot::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--accent);
  animation:live-pulse 1.8s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes live-pulse{
  0%  { transform:scale(1);   opacity:.55; }
  70% { transform:scale(2.8); opacity:0; }
  100%{ transform:scale(2.8); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .live-dot::after{ animation:none; opacity:0; } }