/* ============================================================
   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); container-type:inline-size; }
/* 23.10.2026: Rasterlogik — alle 6 Logos hängen an EINER Grundgröße --H (= Höhe des Myseguro-Bilds).
   --H ist das Kleinere aus der bisherigen Desktop-Größe und der verfügbaren Breite / 22.
   Die Reihe braucht in Summe ca. 21,6 × --H (Logobreiten 16,1 + 5 Abstände à 1,1), d. h. sie passt
   auf jedem Gerät in EINE Zeile — auf dem Handy wird alles gemeinsam kleiner, die Verhältnisse bleiben. */
.hero-logos__row{
  --H:min(clamp(38.832px,5.178vh,54.396px), calc(100cqw / 24));
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:calc(var(--H) * 0.95); /* 03.11.2026: IVP als 7. Logo (2,27 × --H breit) → Abstand 1,5 → 0,95 × --H, damit Logogrößen unverändert bleiben; Reihe = 18,1 + 6 × 0,95 = 23,8 × --H → Teiler 24 hält sie weiter in EINER Zeile */
}
.hero-logos__row > *{ flex-shrink:0; }
.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:calc(var(--H) * 1); } /* 23.10.2026: Schild samt Haken (99 % der Bildhöhe) exakt so hoch wie der gelbe Pushed-Kasten (= ISG-Höhe) */
.hero-logo--ivp{ height:calc(var(--H) * 0.7401); } /* 03.11.2026: IVP-Großbuchstaben (68,4 % der Bildhöhe) exakt auf Höhe der Großbuchstaben M/M/I (= 0,506 × --H); Haken ragt darüber hinaus */
.hero-logo--miracles{ height:calc(var(--H) * 0.5586); } /* 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) und 23.10.2026: alle Hero-Logos nach dem Abgleich gemeinsam je 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:calc(var(--H) * 0.9901); } /* 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:calc(var(--H) * 1.0218); } /* 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:calc(var(--H) * 0.9901); } /* 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:calc(var(--H) * 0.9901); /* 22.10.2026: an ISG-Höhe angeglichen */
  color:var(--ink);
  font-family:'Playfair Display', Georgia, serif;
  font-weight:500;
  font-size:calc(var(--H) * 0.7148); /* 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; }
.logo-reveal-delay-7{ transition-delay:0.47s; }
@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{
  /* Feste Fenstergröße (24.10.2026): Das Fenster wächst nicht mehr mit dem Chat mit,
     sondern hat von Anfang an eine fixe Höhe, die genau zwischen Nav-Blur oben und
     Page-Bottom-Blur unten (112px) passt. Breite folgt über ein festes
     Seitenverhältnis (~1,75:1, wie das bisherige Erscheinungsbild), damit es nicht
     "in die Breite geht". Längere Verläufe scrollen innerhalb des Fensters. */
  --faq-gap-top:14px; --faq-gap-bottom:126px; /* 112px Bottom-Blur + 14px Luft */
  --faq-h:clamp(420px, calc(100vh - var(--nav-height, 88px) - var(--faq-gap-top) - var(--faq-gap-bottom)), 660px);
  height:var(--faq-h);
  width:min(100%, calc(var(--faq-h) * 1.75)); margin:0 auto;
  display:flex; flex-direction:column;
  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{
  flex-shrink:0; height:54px; 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:16px; height:16px; 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:0 22px 14px; position:relative; overflow:hidden; flex:1; min-height:0; display:flex; flex-direction:column; } /* 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:14px; position:relative; z-index:1;
  /* Scrollbereich im Fenster (24.10.2026) — eigener schmaler Scrollbalken wie
     der der Seite, damit man den ganzen Verlauf durchsehen kann. */
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:16px 10px 22px 0; margin-right:-10px; /* Platz für den Balken, Inhalt bleibt bündig */
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.28) transparent;
}
.faq-ai__thread > *{ flex-shrink:0; }
.faq-ai__thread::-webkit-scrollbar{ width:8px; }
.faq-ai__thread::-webkit-scrollbar-track{ background:transparent; }
.faq-ai__thread::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.26); border-radius:8px; }
.faq-ai__thread::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.42); }
/* Sanftes Ausblenden oben, damit hochscrollender Text weich unter der Titelleiste verschwindet */
.faq-ai__body::before{
  content:''; position:absolute; left:0; right:0; top:0; height:16px; z-index:2; pointer-events:none;
  background:linear-gradient(#212121, rgba(33,33,33,0));
}

.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:9px 14px; font-size:13.5px; line-height:1.5; max-width:72%;
}
.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:13px; padding:15px 18px; 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:9px; margin-bottom:9px; }
.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:14px; font-weight:800; color:#171717; }
.faq-reply__bullets{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px; }
.faq-reply__bullets li{ font-size:13px; 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:13px; font-style:italic; color:#4C5062; margin-top:2px; min-height:1.3em; }
.faq-reply__more{ font-size:13px; color:#6B6E7D; margin-top:8px; min-height:1.3em; }
.faq-reply__social{ margin-top:11px; 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:6px; }
.faq-ai__chip{
  font-family:'Hanken Grotesk', sans-serif; font-size:13px; font-weight:500; color:#E7E8EF;
  background:transparent; border:1px solid rgba(255,255,255,0.28); border-radius:16px 16px 4px 16px;
  padding:8px 14px; cursor:pointer; text-align:left; line-height:1.4; max-width:72%;
  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:88px; height:44px;
  background:linear-gradient(rgba(33,33,33,0), #212121);
  pointer-events:none; z-index:2;
}

.faq-ai__inputbar{
  flex-shrink:0; margin-top:6px; 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:14.5px; 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{ flex-shrink:0; margin-top:8px; 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 */
/* CTA-Link im Disclaimer (24.10.2026): normal im selben halbtransparenten Grau,
   unterstrichen. Beim Hover blau mit Schimmer-Welle von links nach rechts —
   Technik von goguenther.at/empfehlungsprogramm (.empf-shimmer), aber blau statt
   silber, nicht fett und nur bei Hover/Fokus aktiv. */
.faq-ai__cta{
  color:inherit; font-weight:inherit;
  text-decoration:underline 1px rgba(236,236,236,0.35); text-underline-offset:3px;
  transition:text-decoration-color 0.2s ease;
}
.faq-ai__cta:hover, .faq-ai__cta:focus-visible{
  background-image:linear-gradient(100deg, #5B7CFF 28%, #7891FF 42%, #A3B4F0 50%, #7891FF 58%, #5B7CFF 72%); /* metallisch: gedämpfter Stahlblau-Glanz statt Weiß (24.10.2026) */
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  text-decoration-color:rgba(91,124,255,0.6);
  animation:faqCtaShimmer 4s ease-in-out infinite; /* langsamer auf Wunsch (24.10.2026), war 1.8s */
}
@keyframes faqCtaShimmer{ 0%{ background-position:160% 0; } 100%{ background-position:-60% 0; } }
@media (prefers-reduced-motion: reduce){ .faq-ai__cta:hover, .faq-ai__cta:focus-visible{ animation:none; background-position:50% 0; } }

/* ---------- 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, Neubau 23.10.2026: PROGRESSIVER Blur statt einer einzigen Stufe.
   Oben rechts bleibt der Kalender klar; Richtung Südwesten (links unten, wo Text, Buttons und Logos
   liegen) wird er in 4 weich überlappenden Lagen immer stärker unscharf und heller — keine Kante.
   Jede Lage trägt ihre Maske selbst (eine Maske am Elternelement würde den backdrop-filter abschalten).
   Die Lagen liegen auf z-index 2, Text + Logos auf z-index 3 → Logos/Text werden nie geblurrt. */
.hero__tint{
  position:absolute; left:0; right:0; top:calc(-1 * var(--nav-height, 88px)); bottom:-150px;
  z-index:2; pointer-events:none;
  --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%);
}
.hero__tint > span{
  position:absolute; inset:0;
  background:rgba(251,250,246,var(--w));
  -webkit-backdrop-filter:blur(var(--b)); backdrop-filter:blur(var(--b));
  /* Ellipse um die Ecke oben rechts: innen klar, nach außen (Südwesten) zunehmend */
  --zone:radial-gradient(ellipse 58% 64% at 100% 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) var(--from), #000 var(--to));
  -webkit-mask-image:var(--zone), var(--fade); -webkit-mask-composite:source-in;
          mask-image:var(--zone), var(--fade);          mask-composite:intersect;
}
.hero__tint > span:nth-child(1){ --b:2px;  --w:.05; --from:58%;  --to:95%; }
.hero__tint > span:nth-child(2){ --b:6px;  --w:.08; --from:80%;  --to:122%; }
.hero__tint > span:nth-child(3){ --b:12px; --w:.10; --from:100%; --to:148%; }
.hero__tint > span:nth-child(4){ --b:22px; --w:.13; --from:125%; --to:185%; }
@media (max-width:760px){ .hero__tint{ display:none; } }
@media (prefers-reduced-motion: reduce){ .hero__tint > span{ -webkit-backdrop-filter:none; backdrop-filter:none; } }
/* Linker Rand der Kalender-Animation (23.10.2026): Kalender läuft nach links weich ins Nichts aus,
   damit seine Außenkante ("Rand des Videos") nirgends als hellere Linie sichtbar ist. */
.hero .cal3d{
  -webkit-mask-image:var(--fade), linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 8%, rgba(0,0,0,.7) 20%, #000 34%);
  -webkit-mask-composite:source-in;
          mask-image:var(--fade), linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 8%, rgba(0,0,0,.7) 20%, #000 34%);
          mask-composite:intersect;
}

/* 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; } }



/* ============================================================
   Hero-Raster (23.10.2026): unsichtbares Proportions-Raster
   ============================================================
   Alles in der Hero-Section (Abstände, Headline, graue Unterzeile, Buttons, Logos, Abstand nach unten)
   hängt an EINER Einheit --u. Referenz = großer Bildschirm (Viewport ca. 1920 × 926): dort ist --u = 1px
   und alles sieht exakt aus wie bisher. Auf kleineren/niedrigeren Bildschirmen (MacBook, Tablet) wird die
   GANZE Komposition gemeinsam kleiner — die Verhältnisse bleiben, und die Logos halten denselben relativen
   Abstand zur Unterkante (und damit zum fixen Bottom-Blur), statt hineinzurutschen.
   --u = das Kleinere aus (verfügbare Höhe / 820) und (Breite / 1400), begrenzt auf 0,6–1,2 px.
   Handy (≤ 760 px) bleibt beim bisherigen, eigenen Layout. */
.hero{ --pb:clamp(36px,7vh,80px); padding-bottom:var(--pb); }
@media (min-width:761px){
  .hero{
    --u:clamp(0.6px, min(calc((100vh - var(--nav-height, 88px)) / 820), calc(100vw / 1400)), 1.2px);
    --u:clamp(0.6px, min(calc((100svh - var(--nav-height, 88px)) / 820), calc(100vw / 1400)), 1.2px);
    --pb:calc(65 * var(--u));
    padding:calc(56 * var(--u)) 0 var(--pb);
  }
  .hero .eyebrow{ margin-top:calc(60 * var(--u)); font-size:max(10.5px, calc(12.5 * var(--u))); }
  .hero h1{
    font-size:calc(46 * var(--u));
    line-height:calc(58 * var(--u));
    height:calc(116 * var(--u));
  }
  .hero__sub{ margin-top:calc(30 * var(--u)); font-size:max(14.5px, calc(19 * var(--u))); }
  .hero__actions{ margin-top:calc(36 * var(--u)); gap:calc(26 * var(--u)); }
  .hero__actions .btn{ font-size:max(13.5px, calc(16 * var(--u))); padding:calc(14 * var(--u)) calc(26 * var(--u)); }
  .hero__actions .btn--ghost{ padding:calc(14 * var(--u)) 0; }
  .hero-logos{ margin-top:calc(74 * var(--u)); }
  .hero-logos__row{ --H:min(calc(48 * var(--u)), calc(100cqw / 24)); }
}
@media (min-width:761px) and (max-width:1120px){
  .hero h1{ height:auto; } /* schmale Breiten: Zeile darf umbrechen (siehe oben) */
}
/* Bottom-Blur der Hero-Section beginnt erst UNTER der Logoreihe — auf jedem Format,
   weil er an derselben Raster-Größe (--pb) hängt wie der Abstand Logos → Unterkante. */
.hero .hero__fade{
  height:calc(150px + var(--pb) * 0.8);
  -webkit-mask-image:linear-gradient(rgba(0,0,0,0) 0, #000 calc(var(--pb) * 0.8 + 40px), #000 calc(var(--pb) * 0.8 + 70px), rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(rgba(0,0,0,0) 0, #000 calc(var(--pb) * 0.8 + 40px), #000 calc(var(--pb) * 0.8 + 70px), rgba(0,0,0,0) 100%);
}