/* ============================================================
   THAEVEN Buchungssystem — SEITEN-CSS (booking.thaevenweb.com)
   baut auf tokens.css. Stil-Sprache der Hauptverkaufsseite +
   agents-Seite (dark/platin, horizontales Header-Lockup, Buttons,
   Sektions-Rhythmus, Formular), aber EIGENER Hero-Archetyp
   (split-screen) und EIGENER Signature-Moment: ein „Live-Tagesplan",
   in den sich Buchungen aus verschiedenen Branchen selbst eintragen.
   Scroll-Mechanik: lenis-smooth + dezenter Parallax — KEINE
   sticky-split-Story (agents/Hauptseite), KEINE snap-sections.
   ============================================================ */

/* ------------------------------------------------------------
   GLOBAL / OVERFLOW-GUARD
   ------------------------------------------------------------ */
html, body { width: 100%; }
body { overflow-x: clip; }

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

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* Sektions-H2 — Versalien, hochwertig (wie Hauptseite/agents) */
.h2{
  text-transform:uppercase;
  letter-spacing:.01em;
  font-weight:680;
  font-size:clamp(2.05rem, 1.3rem + 3.1vw, 3.7rem);
  color:var(--ink);
}
.sec-head{ max-width: 64ch; margin-bottom: var(--sp-8); }
.sec-head .eyebrow{ display:block; margin-bottom: var(--sp-4); }
.sec-head .h2{ margin-bottom: var(--sp-4); }
.sec-head .lead{ margin-top: var(--sp-2); }

/* ============================================================
   HEADER — schmaler Balken, horizontales Lockup im NORMALEN Fluss
   (kein position:absolute — second-brain: Logo im Fluss)
   ============================================================ */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:var(--header-h);
  display:flex; align-items:center;
  overflow:visible;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--d-fast) var(--ease-out),
             border-color var(--d-fast) var(--ease-out),
             backdrop-filter var(--d-fast) var(--ease-out);
}
.hdr.is-stuck{
  background:var(--header-bg);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.hdr__inner{
  position:relative;
  width:100%; max-width:var(--wrap-wide); margin-inline:auto;
  padding-inline:var(--gutter);
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
}

/* --- Logo (horizontales Lockup: Bildmarke links + Wortmarke daneben) --- */
.brand{
  display:inline-flex; align-items:center; gap:.6em;
  flex:0 0 auto;
  text-decoration:none;
}
.brand__mark{
  height:var(--logo-mark-h); width:auto; display:block;
  flex:0 0 auto;
  /* Im Light-Mode wird das weiße Mark dunkel eingefärbt (Token). */
  filter:var(--logo-filter);
  transition:filter var(--d-mid) var(--ease-out);
}
/* Vertikaler Wortmarken-Stapel: THAEVEN oben, <web/> rechtsbündig darunter.
   Echte Logo-Serifenschrift als SVG. Weiß → Light-Mode via --logo-filter. */
.brand__lockup{
  display:inline-flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.18em; flex:0 0 auto;
  filter:var(--logo-filter);
  transition:filter var(--d-mid) var(--ease-out);
}
.brand__wm-name{ height:var(--logo-wm-name-h); width:auto; display:block; }
.brand__wm-web{ height:var(--logo-wm-web-h); width:auto; display:block; }

/* --- Nav (mittig, dezent) --- */
.hdr__nav{
  display:flex; align-items:center; gap:var(--sp-6);
  margin-inline:auto;
}
.hdr__nav a{
  font-size:var(--fs-small); font-weight:600; letter-spacing:.04em;
  color:var(--ink-2);
  position:relative; padding:.3em 0;
  white-space:nowrap;
  transition:color var(--d-fast) var(--ease-out);
}
.hdr__nav > a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--accent);
  transition:right var(--d-fast) var(--ease-out);
}
.hdr__nav > a:hover{ color:var(--ink); }
.hdr__nav > a:hover::after{ right:0; }
.hdr__nav > a.is-active{ color:var(--ink); }
.hdr__nav > a.is-active::after{ right:0; }

/* --- CTA-Cluster (Theme-Toggle + Button) --- */
.hdr__cta{ flex:0 0 auto; display:flex; align-items:center; gap:var(--sp-4); }

/* --- Theme-Toggle (Sonne/Mond) — dezent, links neben dem CTA --- */
.theme-toggle{
  width:40px; height:40px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:var(--btn-ghost-bg);
  color:var(--ink-2);
  transition:color var(--d-fast) var(--ease-out),
             border-color var(--d-fast) var(--ease-out),
             background var(--d-fast) var(--ease-out),
             box-shadow var(--d-fast) var(--ease-out);
}
.theme-toggle:hover{
  color:var(--accent);
  border-color:var(--accent-line-2);
  box-shadow:var(--glow-1);
}
.theme-toggle svg{ width:18px; height:18px; }
/* Icon-Tausch je Theme: Mond im Dark (Klick → Light), Sonne im Light */
.theme-toggle .icon-sun{ display:none; }
.theme-toggle .icon-moon{ display:block; }
[data-theme="light"] .theme-toggle .icon-sun{ display:block; }
[data-theme="light"] .theme-toggle .icon-moon{ display:none; }

/* --- Burger (nur Mobile) --- */
.hdr__burger{
  display:none;
  width:42px; height:42px; flex:0 0 auto;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--btn-ghost-bg);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.hdr__burger span{
  display:block; width:18px; height:2px; border-radius:2px;
  background:var(--ink);
  transition:transform var(--d-fast) var(--ease-out), opacity var(--d-fast) var(--ease-out);
}
.hdr__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hdr__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- Touch-Geräte: Tap-Ziele auf ≥44px anheben (Toggle/Burger waren 40–42px) ---- */
@media (hover:none), (pointer:coarse){
  .theme-toggle{ width:44px; height:44px; }
  .hdr__burger{ width:44px; height:44px; }
}

/* ---- Schmaler Desktop (1051–1180px): Desktop-Nav noch aktiv, aber Nav +
   Toggle + CTA konkurrieren um Platz → Abstände straffen, damit das CTA nicht
   über den rechten Rand geclippt wird. (Darunter, ≤1050px, übernimmt das
   Burger-Menü.) ---- */
@media (min-width:1051px) and (max-width:1180px){
  .hdr__nav{ gap:var(--sp-5); }
  .hdr__inner{ gap:var(--sp-4); }
  .hdr__cta{ gap:var(--sp-3); }
}

/* ---- Tablet/Mobile: Desktop-Nav verschwindet, Burger erscheint (Header-Switch
   bei ≤1050px, früher als die Layout-Breakpoints — die Desktop-Nav braucht mehr
   Breite als das einspaltige Layout). Das mobile Menü ist ein eigenes,
   vollflächiges DECKENDES Overlay (#mobileMenu), kein ausklappendes Header-Panel. ---- */
@media (max-width:1050px){
  :root{ --logo-mark-h:34px; --logo-wm-name-h:15px; --logo-wm-web-h:8px; }
  .hdr__burger{ display:flex; }
  /* Desktop-Nav komplett aus dem Header nehmen (das Overlay übernimmt). */
  .hdr__nav{ display:none; }
  /* Bei aktivem Burger rücken Brand & CTA-Cluster enger zusammen. */
  .hdr__inner{ gap:var(--sp-3); }
  .hdr__cta{ gap:var(--sp-4); }
}

/* ============================================================
   MOBILE-MENÜ — vollflächiges, DECKENDES Premium-Overlay
   PORTIERBARES MUSTER (1:1 von der Hauptseite): dieser Block + das
   #mobileMenu-Markup + der mobileMenu()-JS-Hook. Nutzt ausschließlich
   bestehende Tokens (dark/platin · cyan · dark/light).
   ============================================================ */
.mobile-menu{
  position:fixed; inset:0;
  /* UNTER dem fixen Header (z-index:60), damit Logo/Burger/CTA klickbar bleiben
     (Burger schließt das Overlay). Panel beginnt unter dem Header (top-Padding). */
  z-index:55;
  display:none;
  /* VOLL DECKEND — keine Durchsicht auf den Hero. Token-basiert je Theme. */
  background:var(--bg);
}
.mobile-menu.is-open{ display:block; }
/* Body-Scroll-Lock-Helfer (JS setzt die Klasse auf <html>) */
.mm-lock{ overflow:hidden; }

.mobile-menu__panel{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:calc(var(--header-h, 64px) + var(--sp-5))
          max(var(--gutter), env(safe-area-inset-right))
          calc(var(--sp-6) + env(safe-area-inset-bottom))
          max(var(--gutter), env(safe-area-inset-left));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}

.mobile-menu__nav{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}
.mm-link{
  display:flex; align-items:center;
  min-height:56px; padding:.65em 0;
  font-size:1.35rem; font-weight:620; letter-spacing:-0.01em;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.mm-link:active{ color:var(--accent); }

/* Fuß: nur der Anfrage-CTA (Theme-Toggle lebt im Header) */
.mobile-menu__foot{
  margin-top:auto; padding-top:var(--sp-6);
  display:flex; flex-direction:column; gap:var(--sp-5);
}
.mm-cta{ width:100%; justify-content:center; }

/* Ein-/Ausblende-Animation (Stagger Fade+Slide). prefers-reduced-motion →
   sofort sichtbar, kein Versatz. */
@media (prefers-reduced-motion: no-preference){
  .mobile-menu [data-mm-item]{
    opacity:0; transform:translateY(14px);
  }
  .mobile-menu.is-open [data-mm-item]{
    opacity:1; transform:none;
    transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
    transition-delay:calc(.06s + var(--mm-i, 0) * .045s);
  }
}

/* Nur bis 1050px aktiv; ab Desktop nie anzeigen (Sicherheitsnetz). */
@media (min-width:1051px){
  .mobile-menu{ display:none !important; }
}

@media (max-width:560px){
  .hdr__cta .btn{ padding:.7em 1.1em; font-size:.76rem; letter-spacing:.03em; }
  .hdr__cta{ gap:var(--sp-3); }
  :root{ --logo-mark-h:31px; --logo-wm-name-h:14px; --logo-wm-web-h:7.5px; }
}
@media (max-width:480px){
  /* Auf schmalen Handys (≤480) passt das Header-CTA nicht zusätzlich neben
     Logo + Toggle + Burger, ohne dass der Burger aus dem Viewport geclippt wird.
     Conversion bleibt voll abgedeckt: Burger-Menü enthält „Jetzt anfragen" und
     der Hero hat den großen CTA gleich darunter. */
  .hdr__cta .btn--primary{ display:none; }
}
@media (max-width:380px){
  :root{ --logo-mark-h:28px; --logo-wm-name-h:13px; --logo-wm-web-h:7px; }
}

/* ============================================================
   1 — HERO  (split-screen: Copy links / Live-Tagesplan rechts)
   ============================================================ */
.hero{
  position:relative;
  padding-top:calc(var(--header-h) + var(--sp-8));
  padding-bottom:var(--sp-9);
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero__grid{
  width:100%; max-width:var(--wrap-wide); margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,50fr) minmax(0,50fr);
  gap:clamp(2rem, 1rem + 4vw, 5rem);
  align-items:center;
  position:relative; z-index:3;
}
/* Grid-Kinder dürfen unter ihre min-content-Breite schrumpfen → kein
   Track-Blowout durch das gesperrte Eyebrow / die Planner-Karte. */
.hero__col, .hero__stage{ min-width:0; }

/* Atmosphäre: an die Bühne gekoppelter Platin-Glow (an Element, nicht vw) */
.hero__aura{
  position:absolute; z-index:1; pointer-events:none;
  top:46%; right:-4%;
  width:min(44rem, 58%); aspect-ratio:1;
  transform:translateY(-50%);
  background:
    radial-gradient(closest-side, var(--hero-aura), var(--hero-aura-2) 55%, transparent 72%);
  filter:blur(8px);
}

/* --- Headline-Spalte --- */
.hero__col{ position:relative; z-index:3; max-width:40rem; }
.hero__eyebrow{ display:block; margin-bottom:var(--sp-5); }
.hero__title{
  color:var(--ink);
  font-size:clamp(2.6rem, 1.3rem + 5.9vw, 5.7rem);
  line-height:1;
  letter-spacing:-0.03em;
  font-weight:700;
  text-wrap:balance;
  margin-bottom:var(--sp-5);
  opacity:1;
}
.hero__accent{
  position:relative;
  background:var(--accent-text-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero__sub{
  font-size:var(--fs-lead);
  line-height:1.55; color:var(--ink-2);
  max-width:44ch; margin-bottom:var(--sp-6);
}
.hero__cta{
  display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
  margin-bottom:var(--sp-6);
}
.hero__sec-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--fs-small); font-weight:600; letter-spacing:.04em;
  color:var(--ink-2);
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.hero__sec-link:hover{ color:var(--ink); border-color:var(--accent); }
.hero__foot{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--muted); font-size:var(--fs-small);
}

/* Entrance (transform only auf der LCP-Headline → nie opacity-gegatet) */
@media (prefers-reduced-motion: no-preference){
  .hero__eyebrow{ animation:heroIn .7s var(--ease-brand) both; }
  .hero__title{ animation:heroTitle .9s .05s var(--ease-brand) both; }
  .hero__sub{ animation:heroIn .8s .18s var(--ease-brand) both; }
  .hero__cta{ animation:heroIn .8s .26s var(--ease-brand) both; }
  .hero__foot{ animation:heroIn .8s .34s var(--ease-brand) both; }
  .hero__stage{ animation:stageIn 1s .28s var(--ease-out) both; }
}
@keyframes heroIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes heroTitle{ from{ transform:translateY(22px); opacity:.4; } to{ transform:none; opacity:1; } }
@keyframes stageIn{ from{ opacity:0; transform:translateY(26px) scale(.985); } to{ opacity:1; transform:none; } }

/* ------------------------------------------------------------
   SIGNATURE-MOMENT — „Live-Tagesplan" (Glass-Karte mit Slots)
   ------------------------------------------------------------ */
.hero__stage{ position:relative; z-index:3; }
.planner-glass{
  position:relative;
  border-radius:var(--r-xl);
  border:1px solid var(--line-strong);
  background:
    linear-gradient(180deg, var(--glass-sheen), var(--glass-base)),
    var(--glass-fill);
  backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:var(--sh-2), var(--glass-inset);
  overflow:hidden;
  isolation:isolate;
}
.planner-glass::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(120% 80% at 50% -10%, var(--glass-halo), transparent 60%);
}

/* Kopfleiste: Live-Status + „Heute" + Zähler */
.planner__bar{
  display:flex; align-items:center; gap:.7rem;
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);
  background:var(--panel-tint);
}
.planner__live{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent);
  padding:.3em .7em; border-radius:var(--r-pill);
  border:1px solid var(--accent-line); background:var(--accent-soft);
}
.planner__live-dot{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--accent); box-shadow:0 0 10px var(--glow);
}
@media (prefers-reduced-motion: no-preference){
  .planner__live-dot{ animation:livePulse 1.8s ease-in-out infinite; }
}
@keyframes livePulse{ 0%,100%{ opacity:.5; transform:scale(.85);} 50%{ opacity:1; transform:scale(1);} }
.planner__title{
  color:var(--ink); font-weight:640; font-size:var(--fs-small); letter-spacing:.02em;
}
.planner__count{
  margin-left:auto;
  display:inline-flex; align-items:baseline; gap:.4rem;
}
.planner__count-num{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:1.1rem; font-weight:600; color:var(--ink); letter-spacing:.02em;
}
.planner__count-label{ color:var(--muted); font-size:.72rem; }

/* Tages-Slots */
.planner__day{
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-5);
  min-height:clamp(16rem, 14rem + 7vw, 20rem);
}
.slot{
  display:flex; align-items:center; gap:var(--sp-4);
  min-width:0;
}
.slot__time{
  flex:0 0 auto; width:3.4rem;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:.8rem; color:var(--muted); letter-spacing:.02em;
}
.slot__chip{
  position:relative; min-width:0; flex:1 1 auto;
  display:flex; align-items:center; gap:.55rem;
  padding:.7em .95em;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:var(--bg-3);
  color:var(--ink-2);
  font-size:var(--fs-small); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.slot__who{
  flex:0 0 auto;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent);
  padding:.2em .5em; border-radius:var(--r-xs);
  border:1px solid var(--accent-line); background:var(--accent-soft);
}
.slot--filled .slot__chip{
  border-left:2px solid var(--accent-line-2);
}

/* Freier, „buchbarer" Slot — dezent pulsierender Umriss */
.slot__chip--open{
  justify-content:center;
  color:var(--accent);
  border-style:dashed;
  border-color:var(--accent-line);
  background:var(--accent-soft);
  letter-spacing:.02em;
}
.slot--open .slot__chip--open{ transition:background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); }
@media (hover:hover) and (min-width:921px){
  .slot--open.is-hot .slot__chip--open{
    background:rgba(var(--accent-rgb),.12);
    border-color:var(--accent-line-2);
    border-style:solid;
    color:var(--ink);
    box-shadow:var(--glow-1);
  }
}

/* Eintrudel-Animation: JS vergibt .slot--anim (start) → .is-in */
.slot.slot--anim{ opacity:0; transform:translateY(10px); }
.slot.slot--anim.is-in{
  opacity:1; transform:none;
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}

.planner__foot{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5);
  border-top:1px solid var(--line);
  background:var(--panel-tint-2);
  min-height:3.2em;
}
.planner__note{ color:var(--muted); font-size:.74rem; }
/* „eine Buchung läuft ein"-Puls (drei Punkte) */
.planner__pulse{ display:inline-flex; align-items:center; gap:4px; }
.planner__pulse i{
  width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.5;
  animation:pulseDot 1.2s ease-in-out infinite;
}
.planner__pulse i:nth-child(2){ animation-delay:.18s; }
.planner__pulse i:nth-child(3){ animation-delay:.36s; }
@keyframes pulseDot{ 0%,100%{ opacity:.3; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } }

/* Scroll-Cue */
.hero__scroll{
  position:absolute; left:50%; bottom:var(--sp-5); transform:translateX(-50%);
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--muted);
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
}
@media (prefers-reduced-motion: no-preference){
  .hero__scroll-dot{ animation:scrollDot 1.8s var(--ease-out) infinite; }
}
@keyframes scrollDot{ 0%{ transform:translateY(0); opacity:1; } 70%{ transform:translateY(6px); opacity:0; } 100%{ opacity:0; } }

@media (max-width:920px){
  .hero{ min-height:auto; padding-bottom:var(--sp-8); }
  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:var(--sp-7); }
  .hero__col{ max-width:none; min-width:0; }
  .hero__aura{ top:auto; bottom:-6%; right:-22%; width:84%; }
  .hero__scroll{ display:none; }
  /* Mobile: keine Entrance-Skalierung der Bühne (ruhiger) */
  .hero__stage{ animation:none; }
}
/* Schmale Handys: Eyebrow-Sperrung reduzieren, damit „BUCHUNGSSYSTEM"
   die Spalte nicht über die Viewport-Breite zieht; lange Wörter brechen sauber. */
@media (max-width:430px){
  .hero__eyebrow{ letter-spacing:.18em; word-break:break-word; }
}

/* ============================================================
   2 — DAS PROBLEM (Intro links + 2×2 Karten-Grid)
   ============================================================ */
.prob__grid{
  display:grid; grid-template-columns:42fr 58fr;
  gap:clamp(2rem, 1rem + 4vw, 5.5rem);
  align-items:start;
}
.prob__intro{ position:relative; }
.prob__intro .eyebrow{ display:block; margin-bottom:var(--sp-4); }
.prob__intro .h2{ margin-bottom:var(--sp-4); }
.prob__cards{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:var(--sp-5);
}
.prob-card{
  position:relative;
  padding:var(--sp-6);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--bg-2);
  transition:border-color var(--d-mid) var(--ease-out), box-shadow var(--d-mid) var(--ease-out);
}
@media (hover:hover) and (min-width:641px){
  .prob-card:hover{ border-color:var(--accent-line); box-shadow:var(--glow-1); }
}
.prob-card__icon{
  width:42px; height:42px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-md);
  border:1px solid var(--accent-line);
  background:var(--accent-soft);
  color:var(--accent);
  margin-bottom:var(--sp-5);
}
.prob-card__icon svg{ width:22px; height:22px; }
.prob-card__head{
  color:var(--ink); font-weight:640; font-size:var(--fs-h3);
  line-height:var(--lh-snug); letter-spacing:-0.01em; margin-bottom:var(--sp-3);
}
.prob-card__text{ color:var(--ink-2); font-size:var(--fs-body); }

@media (max-width:880px){
  .prob__grid{ grid-template-columns:1fr; gap:var(--sp-7); }
}
@media (max-width:520px){
  .prob__cards{ grid-template-columns:1fr; }
}

/* ============================================================
   3 — WAS ES KANN (Bento-Grid, robust — kein Pin/Scrub)
   6 Spalten Desktop · 2 Tablet · 1 Mobile. Span-Summe geht je
   Reihe auf (Loch-Vermeidung, second-brain gallery-grid-gap).
   ============================================================ */
.feat__grid{
  display:grid; grid-template-columns:repeat(6, 1fr);
  gap:var(--sp-5);
}
.feat-card{
  grid-column:span 2;
  position:relative; display:flex; flex-direction:column;
  padding:var(--sp-6);
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:var(--bg-2);
  box-shadow:var(--sh-card);
  transition:border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
/* Reihe 1: lead (3) + Pingpong (3) · Reihe 2: 3×(2) · Reihe 3: ai (3) + branch (3) */
.feat-card--lead{ grid-column:span 3; }
.feat-card:nth-child(2){ grid-column:span 3; }      /* Telefon-Pingpong */
.feat-card:nth-child(3){ grid-column:span 2; }      /* Kalender */
.feat-card:nth-child(4){ grid-column:span 2; }      /* Erinnerungen — wird via :nth gepaart */
.feat-card--ai{ grid-column:span 4; }               /* KI-Assistent (breiter, Highlight) */
.feat-card--branch{ grid-column:span 2; }           /* Branchen */
@media (hover:hover) and (min-width:641px){
  .feat-card:hover{ border-color:var(--accent-line); box-shadow:var(--glow-2); }
}
.feat-card__icon{
  width:46px; height:46px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-md);
  border:1px solid var(--accent-line);
  background:var(--accent-soft);
  color:var(--accent);
  margin-bottom:var(--sp-5);
}
.feat-card__icon svg{ width:24px; height:24px; }
.feat-card__name{
  color:var(--ink); font-weight:640; font-size:var(--fs-h3);
  letter-spacing:-0.01em; line-height:var(--lh-snug); margin-bottom:var(--sp-3);
}
.feat-card__text{ color:var(--ink-2); font-size:var(--fs-body); }
.feat-card__pill{
  margin-top:auto; padding-top:var(--sp-5);
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--accent); font-size:var(--fs-small); font-weight:600;
  align-self:flex-start;
}
.feat-card__link{
  margin-top:var(--sp-5);
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--fs-small); font-weight:600; letter-spacing:.03em;
  color:var(--accent);
  align-self:flex-start;
  border-bottom:1px solid var(--accent-line);
  padding-bottom:2px;
  transition:color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.feat-card__link:hover{ color:var(--ink); border-color:var(--accent); }

/* Highlight-Karte: KI-Assistent (warm „verbunden") */
.feat-card--ai{
  border-color:var(--accent-line);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),.06), transparent 40%),
    var(--bg-3);
  box-shadow:var(--sh-card), var(--glow-1);
}

/* Branchen-Tags */
.branch-tags{
  list-style:none; display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top:var(--sp-5);
}
.branch-tags li{
  font-size:.74rem; color:var(--ink-2);
  padding:.4em .8em; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--chip-bg);
}

@media (max-width:980px){
  .feat__grid{ grid-template-columns:repeat(2, 1fr); }
  .feat-card, .feat-card--lead, .feat-card--ai, .feat-card--branch,
  .feat-card:nth-child(2), .feat-card:nth-child(3), .feat-card:nth-child(4){ grid-column:span 1; }
  .feat-card--lead, .feat-card--ai{ grid-column:span 2; }
}
@media (max-width:600px){
  .feat__grid{ grid-template-columns:1fr; }
  .feat-card, .feat-card--lead, .feat-card--ai, .feat-card--branch,
  .feat-card:nth-child(2), .feat-card:nth-child(3), .feat-card:nth-child(4){ grid-column:span 1; }
}

/* ============================================================
   4 — SO FUNKTIONIERT'S (Schritte)
   ============================================================ */
.steps{
  list-style:none;
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:var(--sp-5);
  position:relative;
}
.steps::before{
  content:""; position:absolute; left:0; right:0; top:2.4rem; height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
  z-index:0;
}
.step{
  position:relative; z-index:1;
  padding:var(--sp-6);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--bg-2);
}
.step__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem;
  border-radius:50%;
  font-family:var(--font-mono); font-size:.9rem; font-weight:600;
  color:var(--accent-ink);
  background:var(--accent-grad);
  box-shadow:var(--glow-1);
  margin-bottom:var(--sp-5);
}
.step__head{
  color:var(--ink); font-weight:640; font-size:var(--fs-h3);
  letter-spacing:-0.01em; margin-bottom:var(--sp-3); line-height:var(--lh-snug);
}
.step__text{ color:var(--ink-2); font-size:var(--fs-body); }

@media (max-width:980px){
  .steps{ grid-template-columns:repeat(2, 1fr); }
  .steps::before{ display:none; }
}
@media (max-width:560px){
  .steps{ grid-template-columns:1fr; }
}

/* ============================================================
   5 — PREIS
   ============================================================ */
.price__grid{
  display:grid; grid-template-columns:58fr 42fr;
  gap:clamp(2rem, 1rem + 4vw, 5rem);
  align-items:center;
}
.price__intro .eyebrow{ display:block; margin-bottom:var(--sp-4); }
.price__intro .h2{ margin-bottom:var(--sp-4); }
.price__intro .lead{ margin-bottom:var(--sp-6); }
.price__points{ list-style:none; display:flex; flex-direction:column; gap:var(--sp-4); }
.price__points li{
  display:flex; align-items:flex-start; gap:var(--sp-4);
  color:var(--ink-2); font-size:var(--fs-body);
}
.price__check{
  flex:0 0 auto; width:24px; height:24px; margin-top:.05rem;
  border-radius:50%;
  border:1px solid var(--accent-line);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.price__check svg{ width:13px; height:13px; }

.price-card{
  position:relative;
  padding:var(--sp-8) var(--sp-7) var(--sp-7);
  border-radius:var(--r-xl);
  border:1px solid var(--accent-line);
  background:var(--bg-3);
  box-shadow:var(--sh-card), var(--glow-1);
  text-align:center;
}
.price-card__badge{
  position:absolute; top:0; left:50%; transform:translate(-50%, -50%);
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent-ink);
  background:var(--accent-grad);
  padding:.4em 1em; border-radius:var(--r-pill);
  box-shadow:var(--glow-1); white-space:nowrap;
}
.price-card__name{ color:var(--ink); font-weight:640; font-size:var(--fs-h3); letter-spacing:-0.01em; margin-top:var(--sp-3); }
.price-card__amount{
  display:flex; align-items:baseline; justify-content:center; gap:.4rem; flex-wrap:wrap;
  margin:var(--sp-5) 0 var(--sp-3);
}
.price-card__from{ color:var(--muted); font-size:var(--fs-small); }
.price-card__num{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-price); font-weight:600; color:var(--ink);
  letter-spacing:-0.01em; white-space:nowrap;
}
/* Währungszeichen ENG an die Zahl (kein word-spacing-Bug) */
.price-card__cur{ margin-left:.1em; font-size:.62em; }
.price-card__per{ color:var(--muted); font-size:var(--fs-small); }

/* --- Premium-Preisschild: große Ganzzahl + kleine hochgestellte Cents + „€" ---
   Gleiches Markup-Prinzip wie auf der Hauptseite: .price > .price__int (groß)
   + .price__dec („,99" klein, hochgestellt) + .price__cur („€" klein, dicht).
   Deutsches Format (Dezimalkomma), kein Umbruch, kein Mono-Space-Loch. */
.price{
  display:inline-flex; align-items:flex-start; white-space:nowrap;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-price); font-weight:600; color:var(--ink);
  letter-spacing:-0.01em; line-height:1;
}
.price__int{ font-size:1em; }
/* kleine, hochgestellte Cents — wie auf Premium-Preisschildern */
.price__dec{
  font-size:.42em; font-weight:600;
  align-self:flex-start; margin-top:.12em; margin-left:.06em;
}
/* „€" klein und dicht ans Preisende */
.price__cur{
  font-size:.42em; font-weight:600;
  align-self:flex-start; margin-top:.12em; margin-left:.18em;
}
.price-card__note{ color:var(--ink-2); font-size:var(--fs-small); margin-bottom:var(--sp-6); max-width:30ch; margin-inline:auto; }
.price-card__cta{ width:100%; }
.price-card__sub{ color:var(--muted); font-size:.78rem; margin-top:var(--sp-4); }

@media (max-width:880px){
  .price__grid{ grid-template-columns:1fr; gap:var(--sp-7); }
}

/* ============================================================
   6 — KONTAKT / ANFRAGE-FORMULAR (Stil wie Hauptseite/agents)
   ============================================================ */
.contact__head{ text-align:center; max-width:62ch; margin-inline:auto; margin-bottom:var(--sp-8); }
.contact__head .eyebrow{ display:block; margin-bottom:var(--sp-4); }
.contact__head .h2{ margin-bottom:var(--sp-4); }
.form{
  max-width:var(--wrap-narrow); margin-inline:auto;
  padding:var(--sp-8) var(--sp-7);
  border-radius:var(--r-xl);
  border:1px solid var(--line); background:var(--bg-2);
  box-shadow:var(--sh-card);
}
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.field{ display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:var(--fs-small); font-weight:600; color:var(--ink-2); display:flex; align-items:center; gap:.5rem; }
.field .req{ color:var(--accent); font-size:.7rem; }
.field__wrap{ position:relative; display:flex; align-items:center; }
.field input, .field textarea{
  width:100%; min-width:0;
  font:inherit; font-size:var(--fs-body); color:var(--ink);
  background:var(--bg-3); border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:.85em 1em;
  transition:border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--line-strong); box-shadow:var(--glow-1);
}
.field__check{
  position:absolute; right:.9em;
  color:var(--accent); opacity:0; transform:scale(.7);
  transition:opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-spring);
  pointer-events:none;
}
.field.is-valid .field__check{ opacity:1; transform:scale(1); }
.field.is-valid input{ border-color:var(--accent-line); }
.field__error{ color:var(--danger); font-size:.78rem; min-height:1em; display:none; }
.field.is-error input, .field.is-error textarea{ border-color:var(--danger-line); }
.field.is-error .field__error{ display:block; }

.form__foot{ margin-top:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4); align-items:center; }
.form__submit{ width:100%; max-width:340px; }
.form__micro{ color:var(--muted); font-size:var(--fs-small); text-align:center; }
.form__legal{ color:var(--muted); font-size:.78rem; text-align:center; max-width:52ch; }

.form__status{
  display:none; margin-top:var(--sp-5);
  padding:var(--sp-5); border-radius:var(--r-md);
  font-size:var(--fs-small); text-align:center;
}
.form__status.is-on{ display:block; }
.form__status--ok{ border:1px solid var(--accent-line); background:var(--accent-soft); color:var(--ink); }
.form__status--err{ border:1px solid var(--danger-line); background:var(--danger-soft); color:var(--danger-2); }
.form__status a{ color:var(--accent); border-bottom:1px solid currentColor; }

.btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }
.btn .spinner{ display:none; width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(10,11,13,.3); border-top-color:var(--accent-ink);
  animation:spin .7s linear infinite; }
.btn[aria-busy="true"] .spinner{ display:inline-block; }
.btn[aria-busy="true"] .btn__label{ opacity:.6; }
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (max-width:640px){
  .form{ padding:var(--sp-7) var(--sp-5); }
  .form__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--line); padding-block:var(--sp-8); }
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-6); flex-wrap:wrap;
}
.footer__brand{ display:inline-flex; align-items:center; gap:.6rem; }
.footer__mark{ width:30px; height:30px; opacity:.9; }
.footer__mark img{ width:100%; height:100%; }
.footer__tag{ color:var(--muted); font-size:var(--fs-small); max-width:36ch; }
.footer__links{ display:flex; gap:var(--sp-5); font-size:var(--fs-small); }
.footer__links a{ color:var(--ink-2); transition:color var(--d-fast) var(--ease-out); }
.footer__links a:hover{ color:var(--ink); }
.footer__copy{ color:var(--muted); font-size:var(--fs-small); width:100%; padding-top:var(--sp-5); border-top:1px solid var(--line); margin-top:var(--sp-2); }

@media (max-width:640px){
  .footer__inner{ flex-direction:column; align-items:center; text-align:center; }
  .footer__tag{ text-align:center; }
}

/* ============================================================
   ULTRAWIDE (≥1681) — eigene Container-Stufe, koppeln statt strecken
   ============================================================ */
@media (min-width:1681px){
  .hero__grid, .hdr__inner{ max-width:var(--wrap-ultra); }
}

/* reCAPTCHA v3 Badge ausblenden — Hinweis (Privacy/Terms) steht sichtbar am Formular (Google-Vorgabe erfüllt). */
.grecaptcha-badge { visibility: hidden !important; }