/* ============================================================
   THAEVEN KI-Assistent — SEITEN-CSS (agents.thaevenweb.com)
   baut auf tokens.css. Stil-Sprache der Hauptverkaufsseite
   (dark/platin, Header-Lockup, Buttons, Sektions-Rhythmus),
   aber EIGENER Hero-Archetyp (kinetische-typo + Agent-Stream)
   und EIGENER Signature-Moment (horizontal gepinnte Kanäle).
   ============================================================ */

/* ------------------------------------------------------------
   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) */
.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, Logo im NORMALEN Fluss (kein absolute!)
   Logo ragt nach unten über den Balken hinaus (overflow:visible).
   ============================================================ */
.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) ---
   Normaler Fluss, niedrig (~36px) → vertikal zentriert im schlanken Balken. */
.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;
  /* weißes Mark-SVG: im Light-Mode dunkel einfärben (Token = invert/brightness) */
  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;                 /* Nav-Label nie umbrechen (z. B. „Was er kann") */
  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 der 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:rgba(244,244,242,.03);
  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); }

/* Mid-Desktop (881–1100): Inline-Nav + Toggle + CTA müssen einzeilig
   passen → engere Abstände, damit keine Nav-Labels umbrechen. */
@media (min-width:881px) and (max-width:1100px){
  .hdr__inner{ gap:var(--sp-4); }
  .hdr__nav{ gap:var(--sp-5); }
  .hdr__cta{ gap:var(--sp-3); }
}

@media (max-width:880px){
  :root{ --logo-mark-h:34px; --logo-wm-name-h:15px; --logo-wm-web-h:8px; }
  /* Touch-Targets ≥44px (Toggle/Burger) für sichere Bedienung am Handy. */
  .theme-toggle{ width:44px; height:44px; }
  /* Burger ein, Desktop-Nav komplett raus (das vollflächige Overlay übernimmt). */
  .hdr__burger{ display:flex; width:44px; height:44px; }
  .hdr__nav{ display:none; }
  /* Brand & CTA-Cluster enger, damit auf schmalen Geräten alles ohne Clipping passt. */
  .hdr__inner{ gap:var(--sp-3); }
  .hdr__cta{ gap:var(--sp-4); }
}

/* ============================================================
   MOBILE-MENÜ — vollflächiges, DECKENDES Premium-Overlay
   PORTIERBARES MUSTER (1:1 von thaevenweb.com): 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. */
  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;
  /* unter dem fixen Header beginnen, Safe-Areas berücksichtigen */
  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 CTA (kein Zurück-Link, kein Theme-Toggle — der 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) — nur über das Overlay sichtbar.
   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);
  }
}

/* Ab Desktop (>880px) nie anzeigen (Sicherheitsnetz). */
@media (min-width:881px){
  .mobile-menu{ display:none !important; }
}

@media (max-width:560px){
  /* Kompaktere Header-CTA → Brand + Toggle + CTA + Burger ohne Gedränge bei 375px. */
  .hdr__cta .btn{ padding:.7em 1.05em; font-size:.74rem; 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){
  /* Schmale Handys (≤480): Header-CTA in das Burger-Overlay verlagern (es hat
     dort den großen „Agent anfragen"-CTA) → Toggle + Burger passen ohne Clipping.
     Verhindert, dass das Burger-X über den rechten Rand geschoben wird. */
  .hdr__cta > .btn--primary{ display:none; }
  .hdr__cta{ gap:var(--sp-3); }
}
@media (max-width:400px){
  .hdr__cta{ gap:var(--sp-2); }
  :root{ --logo-mark-h:28px; --logo-wm-name-h:13px; --logo-wm-web-h:7px; }
}

/* ============================================================
   1 — HERO  (kinetische-typo + lebendiger Agent-Stream)
   ============================================================ */
.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:52fr 48fr;
  gap:clamp(2rem, 1rem + 4vw, 5rem);
  align-items:center;
  position:relative; z-index:3;
}

/* Atmosphäre: an die Agent-Seite gekoppelter Platin-Glow (an Element, nicht vw) */
.hero__aura{
  position:absolute; z-index:1; pointer-events:none;
  top:50%; right:-6%;
  width:min(46rem, 60%); aspect-ratio:1;
  transform:translateY(-50%);
  background:
    radial-gradient(closest-side, var(--hero-aura), rgba(var(--accent-rgb),.04) 55%, transparent 72%);
  filter:blur(8px);
}

/* --- Kinetische Headline --- */
.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.7rem, 1.3rem + 6.1vw, 6rem);
  line-height:.98;
  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__agent{ animation:agentIn 1s .3s 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 agentIn{ from{ opacity:0; transform:translateY(26px) scale(.985); } to{ opacity:1; transform:none; } }

/* --- SIGNATURE: Theo lehnt am Agent-Glass (Liquid-Glass-Fenster + Live-Stream) ---
   .hero__agent ist die Bühne: Theo-Video links überlappend, Glass rechts.
   Theo-Video auf schwarzem BG → mix-blend-mode:screen macht Schwarz
   transparent, nur Theo + sein cyaner Glow bleiben sichtbar. */
.hero__agent{
  position:relative; z-index:3;
  /* --- EINE Quelle für die Theo↔Glas-Kopplung (koppeln statt strecken) ---
     Theo und das Glas teilen sich DREI fluide Variablen. Daraus werden
     padding-left (Glas-Position) UND Theo-left GEMEINSAM abgeleitet → die
     Anlehnung „Theos rechte Kante an der Glas-Kante" gilt bei JEDER Breite,
     ohne diskrete @media-Sprünge.
       --theo-w   : Theos Bühnenbreite (fluid)
       --theo-pad : Platz links vom Glas = padding-left (fluid)
       --theo-ovl : wie weit Theos rechte Kante das Glas überlappt (klein, +) */
  /* Hero-Video ist jetzt ENG auf Theo gecroppt (352×596) → Theo füllt das
     Element, kein transparenter Rand mehr. Daher kleinere Breite + minimale
     Überlappung, damit der SICHTBARE Theo an der Glas-Kante lehnt. */
  --theo-w:   clamp(112px, 11vw, 158px);
  --theo-pad: clamp(96px, 11.5vw, 150px);
  /* Überlappung: Theos KÖRPER lehnt an der Glas-Kante, die Hand stützt sich auf.
     Auf großen Schirmen gedeckelt (sonst ragt er zu weit rechts/in die Box). */
  --theo-ovl: clamp(40px, 3.6vw, 48px);
  /* Platz links für Theo, der an der Glass-Kante lehnt (nicht den Text deckt) */
  padding-left:var(--theo-pad);
}

/* Theo (theo-hero.mp4) — lehnt an der linken unteren Kante des Chats.
   Sitzt am Glass-Rand, nur Schulter/Panel berührt die Karte → deckt den
   Stream-Text nicht.
   left ist NICHT mehr breakpoint-weise gesetzt, sondern aus den drei
   Variablen abgeleitet: Theos rechte Kante = Glas-Linke (--theo-pad) +
   Überlappung (--theo-ovl). Egal wie --theo-w skaliert, die Kante bleibt
   an der Glas-Kante → keine Lücke auf Tablet/iPad. */
.theo-hero{
  position:absolute; z-index:4; pointer-events:none;
  left:calc(var(--theo-pad) - var(--theo-w) + var(--theo-ovl));
  right:auto;
  bottom:-4%; top:auto;
  width:var(--theo-w);
  aspect-ratio:352 / 596;   /* eng gecropptes Hero-Video (Hochformat) */
  /* leichter Bodenschatten unter Theo (an Element gekoppelt, nicht vw) */
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.45));
}
.theo-hero__vid{
  width:100%; height:100%;          /* replaced element: explizit 100% */
  object-fit:contain;
  /* Schwarzer Video-BG → transparent; nur Theo + Glow bleiben.
     Light-Mode: KEIN dunkler Sockel mehr (sonst grauer Fleck) — Theo hat
     genug Eigenkontrast (dunkle Konturen, cyan Augen). Bodenhaftung via
     dezentem drop-shadow auf .theo-hero (oben). */
}

/* --- Agent-Glass --- */
.agent-glass{
  position:relative;
  border-radius:var(--r-xl);
  border:1px solid var(--line-strong);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),.05), var(--glass-base)),
    var(--glass-fill);
  backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  isolation:isolate;
}
/* feiner Platin-Rand-Schimmer */
.agent-glass::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(120% 80% at 50% -10%, rgba(var(--accent-rgb),.16), transparent 60%);
}
.agent-glass__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);
}
.agent-glass__name{
  color:var(--ink); font-weight:640; font-size:var(--fs-small); letter-spacing:.02em;
}
/* --- Kanal-Badge mit echtem Logo (Telegram/WhatsApp/Website-Chat) --- */
.agent-glass__channel{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:.42em;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em;
  color:var(--accent);
  padding:.34em .7em .34em .56em; border-radius:var(--r-pill);
  border:1px solid var(--accent-line); background:var(--accent-soft);
  white-space:nowrap;
  transition:color var(--d-fast) var(--ease-out),
             border-color var(--d-fast) var(--ease-out),
             background var(--d-fast) var(--ease-out);
}
.agent-glass__channel-logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; flex:0 0 auto; color:inherit;
}
.agent-glass__channel-logo svg{ width:15px; height:15px; display:block; }
.agent-glass__channel-name{ line-height:1; }
/* sanfter Logo-Wechsel beim Kanalwechsel */
.agent-glass__channel.is-switching .agent-glass__channel-logo,
.agent-glass__channel.is-switching .agent-glass__channel-name{
  opacity:0; transform:translateY(-2px);
}
.agent-glass__channel-logo, .agent-glass__channel-name{
  transition:opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}

/* lebendiger Agent-Puls (Orb) */
.agent-orb{
  position:relative; flex:0 0 auto;
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb),.30), rgba(var(--accent-rgb),.04));
  border:1px solid var(--accent-line);
}
.agent-orb__core{
  width:9px; height:9px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 12px var(--glow);
}
@media (prefers-reduced-motion: no-preference){
  .agent-orb::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    border:1px solid var(--accent-line-2);
    animation:orbPulse 2.4s var(--ease-out) infinite;
  }
  .agent-orb__core{ animation:orbCore 2.4s ease-in-out infinite; }
}
@keyframes orbPulse{ 0%{ transform:scale(.7); opacity:.8; } 70%,100%{ transform:scale(1.55); opacity:0; } }
@keyframes orbCore{ 0%,100%{ opacity:.7; transform:scale(.9); } 50%{ opacity:1; transform:scale(1); } }

.agent-glass__stream{
  display:flex; flex-direction:column; gap:var(--sp-4);
  padding:var(--sp-5);
  min-height:clamp(15rem, 14rem + 6vw, 19rem);
  justify-content:flex-end;
}
.bubble{
  position:relative;
  max-width:84%;
  padding:.85em 1.05em .9em;
  border-radius:var(--r-lg);
  font-size:var(--fs-small); line-height:1.5;
  border:1px solid var(--line);
}
.bubble__who{
  display:block;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  margin-bottom:.35rem;
}
.bubble--in{
  align-self:flex-start;
  background:var(--bg-3); color:var(--ink-2);
  border-top-left-radius:var(--r-xs);
}
.bubble--out{
  align-self:flex-end;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.06));
  border-color:var(--accent-line);
  color:var(--ink);
  border-top-right-radius:var(--r-xs);
}
.bubble--out .bubble__who{ color:var(--accent); }
/* sanftes Einschweben jeder neuen Bubble (JS vergibt .is-in) */
.bubble.bubble--anim{ opacity:0; transform:translateY(10px); }
.bubble.bubble--anim.is-in{
  opacity:1; transform:none;
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}

.agent-glass__hint{
  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;
}
.agent-glass__freigabe{ color:var(--muted); font-size:.74rem; }
/* Tipp-Indikator (drei Punkte) */
.agent-typing{ display:inline-flex; align-items:center; gap:4px; }
.agent-typing i{
  width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.5;
  animation:typingDot 1.2s ease-in-out infinite;
}
.agent-typing i:nth-child(2){ animation-delay:.18s; }
.agent-typing i:nth-child(3){ animation-delay:.36s; }
@keyframes typingDot{ 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:1fr; gap:var(--sp-7); }
  .hero__col{ max-width:none; }
  .hero__aura{ top:auto; bottom:0; right:-20%; width:80%; }
  .hero__scroll{ display:none; }
}
@media (max-width:880px){
  /* Auf Mobile keine Entrance-Skalierung des Agent-Fensters (ruhiger) */
  .hero__agent{ animation:none; }
}

/* ============================================================
   2 — WARUM / PROBLEM
   ============================================================ */
.why__grid{
  display:grid; grid-template-columns:40fr 60fr;
  gap:clamp(2rem, 1rem + 4vw, 5.5rem);
  align-items:start;
}
.why__intro{
  position:sticky; top:calc(var(--header-h) + var(--sp-7));
}
.why__intro .eyebrow{ display:block; margin-bottom:var(--sp-4); }
.why__intro .h2{ margin-bottom:var(--sp-4); }
.why__list{ display:flex; flex-direction:column; gap:var(--sp-5); }
.why-item{
  position:relative;
  padding:var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-7);
  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);
}
.why-item::before{
  content:""; position:absolute; left:0; top:var(--sp-6); bottom:var(--sp-6);
  width:2px; border-radius:2px; background:var(--line-strong);
}
@media (hover:hover) and (min-width:641px){
  .why-item:hover{ border-color:var(--accent-line); box-shadow:var(--glow-1); }
  .why-item:hover::before{ background:var(--accent); box-shadow:0 0 14px var(--glow); }
}
.why-item__time{
  font-family:var(--font-mono); font-size:.74rem; color:var(--accent);
  letter-spacing:.06em; margin-bottom:var(--sp-3); display:block;
}
.why-item__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);
}
.why-item__text{ color:var(--ink-2); font-size:var(--fs-body); }

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

/* ============================================================
   3 — WAS DER AGENT KANN (Feature-Karten)
   ============================================================ */
.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);
}
/* erste Karte breit (3 Spalten), restliche je 2 → sauberes Bento ohne Loch */
.feat-card--lead{ grid-column:span 3; }
.feat-card:nth-child(2){ grid-column:span 3; }      /* Termine */
.feat-card:nth-child(3){ grid-column:span 3; }      /* persönl. Assistent */
.feat-card:nth-child(4){ grid-column:span 3; }      /* lernt Betrieb */
.feat-card--more{ grid-column:span 6; background:transparent; border-style:dashed; box-shadow:none; }
@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--more .feat-card__text{ color:var(--muted); }
.feat-card--more .feat-card__name{ color:var(--ink-2); }
.feat-card__pill{
  margin-top:var(--sp-5);
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--accent); font-size:var(--fs-small); font-weight:600;
  padding:.55em .9em; border-radius:var(--r-pill);
  border:1px solid var(--accent-line); background:var(--accent-soft);
  align-self:flex-start;
}

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

/* ============================================================
   KANÄLE — robustes statisches Grid (4 Karten)
   Desktop: 4 Spalten · Tablet: 2 Spalten · Mobile: 1 Spalte.
   Kein Pin, kein horizontaler Scrub, keine durchlaufende Linie.
   ============================================================ */
.channels{
  margin-top:var(--sp-9);
  border-top:1px solid var(--line);
  padding-top:var(--sp-8);
}
.channels__intro{ margin-bottom:var(--sp-6); }
.channels__intro .eyebrow{ display:block; margin-bottom:var(--sp-3); }
.channels__title{ color:var(--ink); }
.channels__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--sp-5);
  align-items:stretch;
}
.channel-card{
  padding:var(--sp-7) var(--sp-6);
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:var(--bg-2);
  box-shadow:var(--sh-card);
  display:flex; flex-direction:column;
  transition:border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
@media (hover:hover) and (min-width:641px){
  .channel-card:hover{ border-color:var(--accent-line); box-shadow:var(--glow-2); }
}
.channel-card__icon{
  width:52px; height:52px; 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);
}
.channel-card__icon svg{ width:28px; height:28px; }
/* Echte Marken-Logos (Telegram/WhatsApp/THAEVEN): currentColor erbt --accent
   → im Dark hell-cyan, im Light tief-teal; gefüllte Glyphen, kein Stroke. */
.channel-card__icon--logo svg{ width:26px; height:26px; color:var(--accent); }
.channel-card__name{
  color:var(--ink); font-weight:640; font-size:var(--fs-h3);
  letter-spacing:-0.01em; margin-bottom:var(--sp-3);
}
.channel-card__text{ color:var(--ink-2); font-size:var(--fs-body); }

/* Tablet: 2×2 · Mobile: 1 Spalte */
@media (max-width:980px){
  .channels__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .channels__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   4 — SO FUNKTIONIERT'S (Schritte)
   ============================================================ */
.steps{
  list-style:none;
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:var(--sp-5);
  counter-reset:step;
  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{
  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;
}
/* kleine, hochgestellte Cents („,99") — wie auf Premium-Preisschildern */
.price-card__dec{
  font-size:.42em; font-weight:600;
  align-self:flex-start; margin-top:.12em; margin-left:.04em;
}
/* „€" klein und dicht ans Preisende (kein Mono-Space-Loch) */
.price-card__cur{
  font-size:.42em; font-weight:600;
  align-self:flex-start; margin-top:.12em; margin-left:.16em;
}
.price-card__per{ color:var(--muted); font-size:var(--fs-small); }
.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)
   ============================================================ */
.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:320px; }
.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); }
.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 color-mix(in srgb, var(--accent-ink) 30%, transparent); 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%; filter:var(--logo-filter); transition:filter var(--d-mid) var(--ease-out); }
.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; }
}

/* ============================================================
   THEO — Maskottchen. Die WebMs sind mit ECHTEM Alpha-Kanal encodet (VP9
   yuva420p, schwarzer BG + Ledge per lumakey entfernt → Theo freigestellt,
   Kontur intakt). In BEIDEN Themes läuft das VIDEO (Theo bewegt sich) und
   bleibt durch die echte Transparenz sauber freigestellt — kein dunkler
   Sockel/Halo/Fleck, weder im Dark noch im Light (KEIN mix-blend-mode nötig,
   der würde auf hellem Grund auswaschen).
   Das transparente <img>-Standbild dient NUR noch als reduced-motion-Fallback.
   Replaced elements bekommen IMMER explizit width/height (second-brain).
   ============================================================ */

/* --- Theo-Standbild (reduced-motion-Fallback): deckungsgleich über dem Slot --- */
.theo-still{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  display:none;                       /* nur bei reduced-motion sichtbar (unten) */
}

/* reduced-motion: Videos laufen ohnehin nicht → in BEIDEN Themes das saubere
   transparente Standbild zeigen (statt eines pausierten Video-Frames). */
@media (prefers-reduced-motion: reduce){
  .theo-still{ display:block; }
  .theo-hero__vid, .theo-walk__vid, .theo-flex__vid, .theo-price__vid{ display:none; }
}
/* Damit das absolut positionierte Standbild einen Bezugsrahmen hat, sind die
   Video-Wrapper relativ positioniert (theo-hero/theo-price sind bereits
   absolute, theo-flex relative; theo-walk__figure ist absolute). */
.theo-flex{ position:relative; }

/* --- ÜBERGANG: Theo läuft scroll-getrieben („Warum" → „Was er kann") --- */
.theo-walk{
  position:relative;
  height:clamp(160px, 22vw, 280px);
  margin-block:calc(-1 * var(--sp-6)) calc(-1 * var(--sp-5));
  overflow:hidden;            /* Theo wandert horizontal, nichts leakt raus */
  pointer-events:none;
}
.theo-walk__track{
  position:absolute; inset:0;
  /* dezente Cyan-Bodenlinie, an der Theo „läuft" */
}
.theo-walk__track::after{
  content:""; position:absolute; left:8%; right:8%; bottom:14%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-line), transparent);
  opacity:.6;
}
.theo-walk__figure{
  position:absolute; bottom:2%; left:0;
  width:clamp(120px, 15vw, 190px); aspect-ratio:1;
  /* JS setzt --walk-x (0..1) → Theo wandert von links nach rechts.
     Fallback (ohne JS / reduced-motion): mittig stehend. */
  transform:translateX(calc(var(--walk-x, .5) * (100cqw - 100%)));
  will-change:transform;
}
/* container-query-Breite als Referenz für die Wanderstrecke */
.theo-walk{ container-type:inline-size; }
.theo-walk__vid{
  width:100%; height:100%;          /* replaced element: explizit 100% */
  object-fit:contain;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));
}
/* Light-Mode: kein dunkler radialer Sockel hinter Theo (sonst grauer Fleck). */

/* --- Theo flext neben „In vier Schritten startklar" --- */
.sec-head--theo{
  display:flex; align-items:center; gap:clamp(1rem, 2vw, 2rem);
  flex-wrap:wrap;                                /* nie überlaufen — notfalls umbrechen */
  max-width:none; justify-content:flex-start;   /* Theo direkt neben dem Text, nicht am Rand */
}
.sec-head--theo .sec-head__copy{ max-width:64ch; order:1; min-width:0; }
/* Theo flext RECHTS vom Text + größer (Owner-Wunsch) */
.theo-flex{
  position:relative; flex:0 0 auto; order:2;
  width:clamp(150px, 18vw, 280px); aspect-ratio:1;
  align-self:center;
}
.theo-flex__vid{
  width:100%; height:100%;          /* replaced element: explizit 100% */
  object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));
}
/* Light-Mode: kein dunkler radialer Sockel hinter Theo (sonst grauer Fleck). */

/* --- Theo sitzt auf der Kante der Preis-Karte (Bild, screen-blend) --- */
.price-card{ overflow:visible; }   /* Theo darf über die Kartenkante ragen */
.theo-price{
  position:absolute; z-index:3; pointer-events:none;
  /* Theo sitzt LINKS auf der oberen Kante der Preis-Box, größer, tiefer →
     seine Sitzfläche liegt genau auf der Kartenkante, Beine baumeln davor. */
  top:clamp(-112px, -7vw, -84px);
  left:clamp(-34px, -2.6vw, -16px);
  width:clamp(168px, 19vw, 260px); aspect-ratio:1;
}
.theo-price__vid{
  width:100%; height:100%;          /* replaced element: explizit 100% */
  object-fit:contain;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.4));
}
/* Light-Mode: kein dunkler radialer Sockel hinter Theo (sonst grauer Fleck). */

/* --- MOBILE: Theo lehnt LINKS am schmaleren Chat — wie Desktop, nur kleiner ---
   Gleiche Choreografie wie auf dem Desktop: das Glas ist NICHT full-width,
   sondern rechtsbündig auf ~82–85% gesetzt, und Theo lehnt unten an seiner
   LINKEN Kante (links bleibt Luft). So deckt Theo nie den Stream-Text. */
/* --- MOBILE/TABLET ---
   Die Theo↔Glas-Kopplung läuft bewusst OHNE eigenen Breakpoint für left/width:
   die Basis-Clamps (--theo-w/--theo-pad/--theo-ovl) decken den gesamten
   Bereich von ~1680px bis ~420px fließend ab (kein Drift, kein Sprung an
   Breakpoint-Grenzen). Erst ≤420px werden die Variablen sanft verkleinert.
   Hier wird daher NUR die vertikale Anlehnung (bottom) je nach Layout gesetzt. */
@media (max-width:920px){
  .theo-hero{ bottom:-3%; }
}
@media (max-width:640px){
  /* Walk: Theo jetzt scroll-gescrubbt AUCH auf Mobil → der horizontale Wander
     (--walk-x) bleibt aktiv; nur Höhe/Größe dezenter. KEIN translateX-Override
     (sonst stünde Theo fest und der Wander wäre tot). */
  .theo-walk{ height:clamp(150px, 38vw, 200px); margin-block:0; }
  .theo-walk__figure{
    width:clamp(116px, 33vw, 164px);
    bottom:4%;
  }
  .sec-head--theo{ flex-direction:column; align-items:center; gap:var(--sp-4); }
  .sec-head--theo .sec-head__copy{ order:2; }
  /* Flex: größer + mittig über dem Text, nicht verloren in der Ecke. */
  .theo-flex{
    order:1; align-self:center;
    width:clamp(132px, 38vw, 184px);
  }
  .theo-price{
    /* Theo sitzt rechts auf der oberen Kartenkante — sauber, nicht abgeschnitten
       (left explizit aus, sonst gewinnt left aus der Basis-Regel → Listentext). */
    top:clamp(-92px, -23vw, -68px);
    left:auto;
    right:clamp(-4px, -1.4vw, 4px);
    width:clamp(112px, 29vw, 150px);
  }
}
/* Hero-Theo auf sehr schmalen Handys (≤420): kompakter, lehnt weiter links
   unten am Chat — kein Overflow, kein Text dahinter. */
/* Schmale Handys (≤480): Theo + Glas-Platz sanft kompakter. Werte sind so
   gewählt, dass sie an der 480er-Grenze nahezu an die Basis-Clamps anschließen
   (pad≈84/w≈120 bei 480) → kein harter Sprung, Kopplung bleibt erhalten. */
@media (max-width:480px){
  .hero__agent{
    --theo-w:   clamp(96px, 25vw, 120px);
    --theo-pad: clamp(58px, 17.5vw, 84px);
    --theo-ovl: clamp(6px, 2vw, 10px);
  }
  .theo-hero{ bottom:-2%; }
}
@media (prefers-reduced-motion: reduce){
  /* Theo-Walk bleibt stehen (Standbild); Scroll-Sync greift im JS nicht.
     Mittig zentrieren, da --walk-x ungesetzt bleibt. */
  .theo-walk__figure{ transform:translateX(-50%); left:50%; }
}

/* ============================================================
   THEME-WECHSEL — sanfter Übergang der Flächen (kein harter Sprung).
   Nur Farb-/Schatten-Properties, keine Layout-Properties → kein Reflow.
   Bei prefers-reduced-motion unten neutralisiert.
   ============================================================ */
.hdr, .agent-glass, .agent-glass__bar, .agent-glass__hint,
.why-item, .feat-card, .channel-card, .step, .price-card,
.form, .field input, .field textarea, .bubble,
.feat-card__icon, .channel-card__icon, .agent-glass__channel,
.footer{
  transition: background-color var(--d-mid) var(--ease-out),
              border-color var(--d-mid) var(--ease-out),
              box-shadow var(--d-mid) var(--ease-out),
              color var(--d-mid) var(--ease-out);
}

/* ============================================================
   LIGHT-MODE — komponentenspezifische Feinschliffe
   (Lesbarkeit/Tiefe auf hellem Grund; Glows bereits via Token dezenter)
   ============================================================ */
[data-theme="light"] .hero__accent{
  /* Auf Hell soll der Akzent-Text klar Teal sein (Weiß→Teal-Verlauf greift via Token). */
  -webkit-text-fill-color:transparent;
}
/* Glass-Fenster auf Hell: feine Kontur statt leuchtender Rand */
[data-theme="light"] .agent-glass{
  border-color:var(--line-strong);
  box-shadow:var(--sh-2);
}
/* „Mehr"-Karte (dashed) bleibt in beiden Modi dezent */
[data-theme="light"] .feat-card--more{ background:transparent; }

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

/* Light-Mode: dezenter, weicher Bodenschatten unter dem Theo-STANDBILD
   (transparentes PNG → kein dunkler Fleck, nur sanfte Bodenhaftung). */
[data-theme="light"] .theo-hero__img,
[data-theme="light"] .theo-walk__img,
[data-theme="light"] .theo-flex__img,
[data-theme="light"] .theo-price__img{
  filter:drop-shadow(0 6px 12px rgba(20,30,40,.12));
}
/* Dark-Mode: das Standbild ist ausgeblendet, aber falls je sichtbar (z. B.
   Print) bekommt es denselben dezenten Schatten wie die Videos. */
[data-theme="dark"] .theo-still{
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.4));
}

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