/* ============================================================
   thaeven-web — SEITEN-CSS (Angebots-/Verkaufsseite)
   baut auf tokens.css (Design-System) auf. Nur Tokens, keine
   hardcodierten Farben außer dort wo Grade-Layer Pixelarbeit ist.
   ============================================================ */

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

/* Bildschirmleser-only */
.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 — durchgehend Versalien (Owner-Wunsch), hochwertig
   Versalien brauchen positives Tracking + etwas mehr Größe.
   Gilt nur für Sektions-Überschriften (.h2), NICHT Hero-H1.
   ============================================================ */
.h2{
  text-transform:uppercase;
  letter-spacing:.01em;
  font-weight:680;
  font-size:clamp(2.05rem, 1.3rem + 3.1vw, 3.7rem);
}

/* gemeinsamer Sektions-Kopf */
.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); }

/* ============================================================
   GLOBALER FILM-GRAIN (eine Behandlung, identisch überall)
   ============================================================ */
.grain::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode:overlay; opacity:.05;
}

/* ============================================================
   DEMO-MEDIA — EINE einzige Grade-Behandlung (Hero + Galerie)
   Ruhe: entsättigt/kühl + Platin-Vignette + Ink-Scrim + Grain.
   Hover/aktiv: Tint fährt zurück → echte Seite "erwacht".
   ============================================================ */
.demo-media{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--bg-2);
}
.demo-media__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  filter:var(--demo-filter);
  transition:filter var(--d-slow) var(--ease-out),
             transform var(--d-slow) var(--ease-out);
}
/* Cyan-Overlay (soft-light) + Vignette + Scrim — gemeinsame Behandlung;
   alle Layer aus Tokens → im Light dezenter (Screenshots wirken nicht zu hart). */
.demo-media::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--demo-tint), transparent 55%),
    linear-gradient(180deg, var(--demo-scrim-1), var(--demo-scrim-2)),
    radial-gradient(140% 120% at 50% 50%, transparent 52%, var(--demo-vignette));
  mix-blend-mode:normal;
  transition:opacity var(--d-slow) var(--ease-out);
}

/* ============================================================
   HEADER — schlanke fixe Bar: horizontales Logo-Lockup + Nav + Login + CTA
   ------------------------------------------------------------
   Der dunkle Menü-/Blur-Balken = --header-h (schlank, 76px). Das horizontale
   Lockup (Bildmarke ~36px + Wortmarke) sitzt im normalen Fluss vertikal
   zentriert IM Balken — kein Überstand. JS misst hdr.offsetHeight (== --header-h)
   → Anker/Sticky bleiben korrekt am Balken ausgerichtet.
   ============================================================ */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:var(--header-h);
  display:flex; align-items:center;
  /* overflow sichtbar, damit das größere Logo nach unten hinausragen darf */
  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 (kein position:absolute → kein width:0-Bug), niedrig (~36px)
   → sitzt vertikal zentriert im schlanken Balken, kein Überstand. */
.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; }

/* --- Navigation (dezent, mittig) --- */
.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);
}
/* Underline NUR auf die direkten Top-Level-Nav-Anker (nicht auf die
   Dropdown-Items im Produkte-Menü — die liegen ebenfalls in .hdr__nav). */
.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; }
/* Aktiv-State (ScrollSpy) — leert oberhalb erster Sektion + beim Logo/#top-Klick */
.hdr__nav > a.is-active{ color:var(--ink); }
.hdr__nav > a.is-active::after{ right:0; }

/* --- PRODUKTE-DROPDOWN (Desktop: Hover/Fokus · Mobile: Accordion) ---
   Dark/Platin-Panel, passend zum Header. Sanftes Auf/Zu via opacity+transform. */
.nav-drop{ position:relative; display:inline-flex; }
.nav-drop__btn{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--fs-small); font-weight:600; letter-spacing:.04em;
  color:var(--ink-2);
  padding:.3em 0;
  position:relative;
  transition:color var(--d-fast) var(--ease-out);
}
.nav-drop__btn::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--accent);
  transition:right var(--d-fast) var(--ease-out);
}
.nav-drop__btn:hover{ color:var(--ink); }
.nav-drop__btn:hover::after,
.nav-drop[data-open="true"] .nav-drop__btn::after{ right:0; }
.nav-drop[data-open="true"] .nav-drop__btn{ color:var(--ink); }
.nav-drop__chevron{
  flex:0 0 auto; opacity:.8;
  transition:transform var(--d-fast) var(--ease-out);
}
.nav-drop[data-open="true"] .nav-drop__chevron{ transform:rotate(180deg); }

/* --- PREMIUM-MEGA-MENÜ (Desktop) ----------------------------------------
   Token-basiert, in beiden Themes edel: im Dark dunkle Panel-Fläche
   (--bg-2 deckend, KEIN hartes Weiß), im Light helles Panel. Feine
   --line-Kontur, weicher Schatten, abgerundet wie die übrigen Panels.
   Jede Zeile: Icon-Kachel links · Titel (kräftig) + Beschreibung (--ink-2)
   · dezenter Link-Pfeil rechts. Hover: ruhige Akzent-Fläche über die ganze
   Zeile + Akzent-Indikator links, weiche 150ms, kein Aufblitzen.
   Deckende Fläche zuerst (background:var(--bg-2)) + optionaler Blur-Layer
   darüber → auch ohne GPU-Backdrop nie durchscheinend/weiß im Dark. */
.nav-drop__menu{
  position:absolute; top:calc(100% + 12px); right:0; left:auto;
  transform:translateY(-6px) scale(.985); transform-origin:top right;
  width:340px;
  padding:8px;
  display:flex; flex-direction:column; gap:4px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--bg-2);
  box-shadow:var(--sh-2), 0 0 0 1px rgba(var(--accent-rgb),.05);
  opacity:0; visibility:hidden; pointer-events:none;
  /* ruhige, weiche Transition (~160ms) — kein hartes Aufblitzen */
  transition:opacity .16s var(--ease-out),
             transform .2s var(--ease-out),
             visibility .16s;
  z-index:5;
}
/* feiner Akzent-Schimmer am oberen Panel-Rand (markengerecht, dezent) */
.nav-drop__menu::after{
  content:""; position:absolute; left:14px; right:14px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.45), transparent);
  opacity:.7;
}
/* dezenter Verbindungs-Puffer, damit der Hover zwischen Button & Panel nicht abreißt */
.nav-drop__menu::before{
  content:""; position:absolute; left:0; right:0; top:-14px; height:14px;
}
.nav-drop[data-open="true"] .nav-drop__menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0) scale(1);
}
.nav-drop__item{
  position:relative;
  display:flex; align-items:center; gap:.8rem;
  padding:.8em .85em;
  border-radius:var(--r-md);
  /* ruhiger Hover: sanfte Akzent-Fläche über die ganze Zeile, weiche 150ms */
  transition:background .15s var(--ease-out);
}
/* Hover-/Fokus-Fläche (ruhig, ohne linke Akzent-Leiste) */
.nav-drop__item:hover,
.nav-drop__item:focus-visible{ background:var(--accent-soft); outline:none; }
/* Icon-Kachel (KI-Assistent: Bot · Buchungssystem: Kalender) */
.nav-drop__item-ico{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--accent-soft);
  color:var(--accent);
  transition:border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.nav-drop__item-ico svg{ width:21px; height:21px; }
.nav-drop__item:hover .nav-drop__item-ico,
.nav-drop__item:focus-visible .nav-drop__item-ico{
  border-color:var(--accent-line); background:rgba(var(--accent-rgb),.16);
}
.nav-drop__item-body{ display:flex; flex-direction:column; gap:.14rem; min-width:0; }
.nav-drop__item-name{
  color:var(--ink); font-size:.92rem; font-weight:660; letter-spacing:.005em;
  transition:color .15s var(--ease-out);
}
.nav-drop__item-desc{
  color:var(--ink-2); font-size:.76rem; line-height:1.35;
}
/* dezenter Link-Pfeil rechts — fährt bei Hover leicht raus */
.nav-drop__item-arr{
  flex:0 0 auto; width:15px; height:15px; margin-left:auto;
  color:var(--muted); opacity:0;
  transform:translateX(-3px);
  transition:opacity .15s var(--ease-out), transform .15s var(--ease-out), color .15s var(--ease-out);
}
.nav-drop__item:hover .nav-drop__item-arr,
.nav-drop__item:focus-visible .nav-drop__item-arr{
  opacity:1; transform:translateX(0); color:var(--accent);
}

/* --- CTA-Cluster (Login + Button) --- */
.hdr__cta{ flex:0 0 auto; display:flex; align-items:center; gap:var(--sp-4); }
.hdr__login{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:var(--fs-small); font-weight:600; letter-spacing:.04em;
  color:var(--ink-2);
  padding:.5em .2em;
  transition:color var(--d-fast) var(--ease-out);
}
.hdr__login svg{ width:14px; height:14px; opacity:.85; flex:0 0 auto; }
.hdr__login:hover{ color:var(--accent); }

/* --- Theme-Toggle (Sonne/Mond) — dezent, neben dem Login --- */
.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 sichtbar) --- */
.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 +
   Login + Toggle + CTA konkurrieren um Platz → Abstände straffen + Login-Text
   auf Icon reduzieren, damit das CTA nicht über den rechten Rand geclippt wird.
   (Darunter, ≤1050px, übernimmt das Burger-Menü — die volle Desktop-Nav passt
   neben Login + Toggle + CTA erst ab ~1051px ohne Quetschen.) ---- */
@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); }
  .hdr__login span{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .hdr__login{ padding:.5em; }
}

/* ---- Tablet/Mobile: Desktop-Nav verschwindet, Burger erscheint (Header-Switch
   bei ≤1050px, früher als die Layout-Breakpoints bei 880 — 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 mehr. ---- */
@media (max-width:1050px){
  /* Lockup proportional kleiner; bleibt vertikal zentriert im Balken. */
  :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, damit auf
     schmalen Geräten (≤480) Logo + Toggle + CTA + Burger ohne Clipping passen. */
  .hdr__inner{ gap:var(--sp-3); }
  .hdr__cta{ gap:var(--sp-4); }
}

/* ============================================================
   MOBILE-MENÜ — vollflächiges, DECKENDES Premium-Overlay
   PORTIERBARES MUSTER: dieser Block + das #mobileMenu-Markup +
   der mobileMenu()-JS-Hook lassen sich 1:1 auf andere thaeven-Seiten
   übernehmen (nur die <a href>-Ziele tauschen). 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). Das Overlay-Panel beginnt ohnehin unter dem
     Header (top-Padding = Header-Höhe). */
  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); }

/* Produkte-Accordion im Overlay */
.mm-acc{ border-bottom:1px solid var(--line); }
.mm-acc__btn{
  width:100%; min-height:56px; padding:.65em 0;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-size:1.35rem; font-weight:620; letter-spacing:-0.01em;
  color:var(--ink); background:none; border:0; cursor:pointer;
  text-align:left;
}
.mm-acc__chevron{
  flex:0 0 auto; color:var(--ink-2);
  transition:transform var(--d-fast) var(--ease-out);
}
.mm-acc[data-open="true"] .mm-acc__chevron{ transform:rotate(180deg); }
.mm-acc__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--d-fast) var(--ease-out);
}
.mm-acc[data-open="true"] .mm-acc__panel{ grid-template-rows:1fr; }
/* EIN Wrapper-Kind mit overflow:hidden — sonst lecken Item-Margins aus dem
   0fr-Grid und das Accordion bleibt sichtbar (collapse greift nicht). */
.mm-acc__inner{ min-height:0; overflow:hidden; }
.mm-acc__item{
  display:flex; flex-direction:column; gap:.15rem;
  min-height:44px; padding:.85em 1em;
  margin:.35rem 0;
  border-radius:var(--r-md);
  background:var(--bg-2);
  border:1px solid var(--line);
}
.mm-acc__item:first-child{ margin-top:.2rem; }
.mm-acc__item:last-child{ margin-bottom:.7rem; }
.mm-acc__item-name{ color:var(--ink); font-size:1rem; font-weight:600; }
.mm-acc__item-desc{ color:var(--muted); font-size:.82rem; line-height:1.35; }

/* Fuß: Login + Theme-Toggle + CTA */
.mobile-menu__foot{
  margin-top:auto; padding-top:var(--sp-6);
  display:flex; flex-direction:column; gap:var(--sp-5);
}
.mm-foot__row{
  display:flex; align-items:center; gap:var(--sp-4);
}
.mm-login{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%;
  min-height:48px; padding:.6em 1.1em;
  border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--bg-2);
  color:var(--ink); font-size:.95rem; font-weight:600;
}
.mm-login svg{ opacity:.85; flex:0 0 auto; }
/* (Der frühere „Ansicht"-Theme-Toggle (.mm-theme) im Burgermenü wurde entfernt —
   der Hell/Dunkel-Umschalter lebt jetzt nur noch oben im Header. Keine Dopplung.) */
.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);
  }
}

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

@media (max-width:560px){
  .hdr__login span{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .hdr__login{ padding:.5em; }
  .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){
  /* Login-Icon weglassen, damit auf schmalen Handys nichts kollidiert */
  .hdr__login{ display:none; }
  /* 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 „Kontakt" und der
     Hero hat den großen „Jetzt kostenlos anfragen"-Button gleich darunter.
     So bleibt der Burger immer sicht- und antippbar (kein Off-Screen-Clipping). */
  .hdr__cta .btn--primary{ display:none; }
}
@media (max-width:380px){
  /* Lockup minimal kleiner, damit bei 360/375px Logo + Toggle + Burger luftig passen. */
  :root{ --logo-mark-h:28px; --logo-wm-name-h:13px; --logo-wm-web-h:7px; }
}

/* ============================================================
   1 — HERO (split-screen)
   ============================================================ */
.hero{
  position:relative;
  padding-top:calc(var(--header-h) + var(--sp-7));
  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:46fr 54fr;
  gap:clamp(2rem, 1rem + 3vw, 4.5rem);
  align-items:center;
}
.hero__col{ position:relative; z-index:3; max-width:38rem; }

/* Text rastet per Keyframe ein — NICHT opacity-gegatet (LCP-sicher: h1 ist sofort da) */
.hero__eyebrow{ display:block; margin-bottom:var(--sp-5); }
.hero h1{
  color:var(--ink);
  font-size:var(--fs-display);
  line-height:var(--lh-tight);
  letter-spacing:var(--track-tight);
  font-weight:680;
  text-wrap:balance;
  margin-bottom:var(--sp-5);
}
.hero__sub{
  font-size:var(--fs-lead);
  line-height:1.5; color:var(--ink-2);
  max-width:42ch; margin-bottom:var(--sp-6);
}
.hero__cta{
  display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
  margin-bottom:var(--sp-5);
}
.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); }

/* Entrance-Keyframe (transform only, opacity nur auf Sub/CTA, NIE auf h1 gaten) */
@media (prefers-reduced-motion: no-preference){
  .hero__eyebrow{ animation:heroIn .7s var(--ease-brand) both; }
  .hero h1{ animation:heroIn .8s .06s var(--ease-brand) both; }
  .hero__sub{ animation:heroIn .8s .14s var(--ease-brand) both; }
  .hero__cta{ animation:heroIn .8s .22s var(--ease-brand) both; }
}
@keyframes heroIn{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
/* h1 darf nie unsichtbar bleiben falls Animation nicht greift */
.hero h1{ opacity:1; }

/* Lese-Scrim links unter der Copy (gegen die Mauer) */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    var(--bg) 0%, var(--bg) 30%, var(--scrim) 52%, transparent 70%);
}

/* ---- DEMO-MAUER (rechts) ---- */
.hero__wall{
  position:relative; z-index:2;
  align-self:stretch;
  height:min(80vh, 760px);
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--sp-5);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  overflow:hidden;
}
.wall-col{ overflow:hidden; }
.wall-track{
  display:flex; flex-direction:column; gap:var(--sp-5);
  will-change:transform;
}
@media (prefers-reduced-motion: no-preference){
  .wall-col--down .wall-track{ animation:wallDown 64s linear infinite; }
  .wall-col--up .wall-track{ animation:wallUp 58s linear infinite; }
}
@keyframes wallDown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
@keyframes wallUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }

.wall-card{
  position:relative; flex:0 0 auto;
  aspect-ratio:1200/855;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
}
.wall-card .demo-media{ position:absolute; inset:0; border-radius:inherit; }
.wall-card .demo-media__img{ border-radius:inherit; }

/* Mobile-Standbild (versteckt am Desktop) */
.hero__still{ display:none; }

@media (max-width:880px){
  .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::before{
    background:linear-gradient(180deg, var(--bg) 0%, var(--scrim) 60%, transparent 100%);
  }
  .hero__wall{ display:none; }
  .hero__still{
    display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4);
    width:100%;
  }
  .still-card{
    position:relative; aspect-ratio:1200/855;
    border-radius:var(--r-md); border:1px solid var(--line);
    overflow:hidden; box-shadow:var(--sh-1);
  }
  /* demo-media muss die Kachel füllen (sonst kollabiert die absolute img-Höhe auf 0
     → schwarze Karte). Gleicher Fix wie bei .wall-card. */
  .still-card .demo-media{ position:absolute; inset:0; border-radius:inherit; }
  .still-card .demo-media__img{ border-radius:inherit; }
  .still-card:nth-child(3){ grid-column:1 / -1; aspect-ratio:1200/520; }
}

/* ============================================================
   2 — PROBLEM (Sticky-Split)
   ============================================================ */
.problem__grid{
  display:grid; grid-template-columns:42fr 58fr;
  gap:clamp(2rem, 1rem + 4vw, 6rem);
  align-items:start;
}
.problem__sticky{
  position:sticky; top:calc(var(--header-h) + var(--sp-7));
}
.problem__sticky .eyebrow{ display:block; margin-bottom:var(--sp-4); }
.problem__sticky .h2{ color:var(--ink); }
.problem__list{ display:flex; flex-direction:column; gap:var(--sp-6); }
.prob{
  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),
             background var(--d-mid) var(--ease-out),
             box-shadow var(--d-mid) var(--ease-out);
}
.prob::before{
  content:""; position:absolute; left:0; top:var(--sp-6); bottom:var(--sp-6);
  width:2px; border-radius:2px;
  background:var(--line-strong);
  transition:background var(--d-mid) var(--ease-out), box-shadow var(--d-mid) var(--ease-out);
}
.prob.is-active{
  border-color:var(--accent-line);
  background:var(--bg-3);
  box-shadow:var(--glow-1);
}
.prob.is-active::before{
  background:var(--accent);
  box-shadow:0 0 14px var(--glow);
}
.prob__num{
  font-family:var(--font-mono); font-size:.8rem; color:var(--muted);
  letter-spacing:.1em; margin-bottom:var(--sp-3); display:block;
}
.prob__kicker{
  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__text{ color:var(--ink-2); font-size:var(--fs-body); }

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

/* ============================================================
   3 — WAS WIR BAUEN (Typ-Karten, 3D-Tilt nur Desktop)
   ============================================================ */
.types__grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-6);
}
.type-card{
  position:relative;
  padding:var(--sp-7) var(--sp-6) var(--sp-6);
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:var(--bg-2);
  box-shadow:var(--sh-card);
  transform-style:preserve-3d;
  transition:transform var(--d-fast) var(--ease-out),
             border-color var(--d-fast) var(--ease-out),
             box-shadow var(--d-fast) var(--ease-out);
  display:flex; flex-direction:column;
}
.type-card__inner{ transform:translateZ(0); }
@media (hover:hover) and (min-width:641px){
  .type-card:hover{ border-color:var(--accent-line); box-shadow:var(--glow-2); }
}
.type-card--muted{
  background:transparent;
  border-style:dashed;
}
.type-card__name{
  color:var(--ink); font-weight:640; font-size:var(--fs-h3);
  letter-spacing:-0.01em; margin-bottom:var(--sp-2);
}
.type-card__tag{
  color:var(--accent); font-size:var(--fs-small);
  letter-spacing:.02em; margin-bottom:var(--sp-5);
  font-weight:600;
}
.type-card--muted .type-card__tag{ color:var(--muted); }
.type-card__desc{ color:var(--ink-2); font-size:var(--fs-body); margin-bottom:var(--sp-6); }
.type-card--muted .type-card__desc{ color:var(--muted); }
.type-card__foot{ margin-top:auto; }
.chip-row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.chip{
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.02em; color:var(--ink-2);
  padding:.4em .8em; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--chip-bg);
}
.type-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  color:var(--muted);
  padding:.4em .8em; border-radius:var(--r-pill);
  border:1px solid var(--line);
}

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

/* ============================================================
   4 — DEMO-GALERIE (Bento)
   ============================================================ */
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-flow:dense;
  gap:var(--sp-5);
}
.demo-card{
  position:relative; display:block;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:var(--sh-1);
  min-height:240px;
  grid-column:span 1; grid-row:span 1;
  transition:border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.demo-card--lg{ grid-column:span 2; grid-row:span 2; }
.demo-card .demo-media{ position:absolute; inset:0; }
.demo-card video.demo-media__img{ opacity:0; transition:opacity var(--d-mid) var(--ease-out), filter var(--d-slow) var(--ease-out); }
/* Poster (webp) liegt UNTER dem Video und blendet erst aus, wenn das Video
   wirklich spielt (.is-playing) — so nie ein schwarzes Aufblitzen beim Laden. */
.demo-card .demo-poster{ z-index:0; transition:opacity var(--d-mid) var(--ease-out); }
.demo-card .demo-vid{ z-index:1; }

@media (hover:hover) and (min-width:641px){
  .demo-card:hover{ border-color:var(--accent-line); box-shadow:var(--glow-2); }
  /* Video erst sichtbar + Poster erst weg, wenn das webm tatsächlich spielt. */
  .demo-card.is-playing .demo-vid{ opacity:1; }
  .demo-card.is-playing .demo-poster{ opacity:0; }
  .demo-card:hover .demo-media__img{ filter:saturate(1) brightness(1) contrast(1); }
  .demo-card:hover .demo-media::before{ opacity:.4; }
}
/* ----------------------------------------------------------
   PARALLAX-HOVER (Signature) — große Santorini-Karte, NUR Desktop.
   Mehrlagiger Tiefe-Eindruck: Bild folgt der Maus leicht (translate)
   + zoomt beim Hover (scale), JS setzt --px/--py/--pz lerp-geglättet.
   Mobile/Touch + prefers-reduced-motion: komplett AUS (second-brain:
   disable-mouse-canvas-effects-on-mobile). Breiter Screenshot bleibt
   oben verankert (object-position:top) → kein Crop der Headline.
   ---------------------------------------------------------- */
.demo-card--parallax .demo-parallax__img{
  /* Grund-Übergröße, damit Translate/Zoom nie einen Rand freilegt */
  transform:scale(1.06);
  transform-origin:center top;
  will-change:transform;
}
@media (hover:hover) and (min-width:641px) and (prefers-reduced-motion: no-preference){
  .demo-card--parallax .demo-parallax__img{
    /* JS-gesteuert: Maus-Offset (--px/--py in %) + Hover-Zoom (--pz) */
    transform:
      scale(calc(1.06 + var(--pz, 0) * 0.06))
      translate3d(calc(var(--px, 0) * 1%), calc(var(--py, 0) * 1%), 0);
    transition:transform .12s linear,
               filter var(--d-slow) var(--ease-out);
  }
  /* Beim Hover bleibt der Tint/Brightness-„erwacht"-Effekt wie bei den
     anderen Karten erhalten (greift über die generische :hover-Regel). */
}

/* Label-Overlay — IMMER über Scrim lesbar */
.demo-label{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:var(--sp-5);
  display:flex; flex-direction:column; gap:.25rem;
  background:var(--demo-label-grad);
  pointer-events:none;
}
/* Label liegt IMMER auf einem abdunkelnden Gradient über dem Foto →
   feste helle Werte (theme-unabhängig), damit es in beiden Modi lesbar bleibt. */
.demo-label__name{ color:#F4F4F2; font-weight:640; font-size:var(--fs-h3); letter-spacing:-0.01em; }
.demo-label__branch{ color:#9CEAF4; font-size:var(--fs-small); font-weight:600; }
.demo-label__url{
  font-family:var(--font-mono); font-size:.74rem; color:rgba(244,244,242,.78);
  margin-top:.2rem; display:inline-flex; align-items:center; gap:.4rem;
}
.demo-label__url svg{ width:13px; height:13px; opacity:.7; flex:0 0 auto; }
.gallery__foot{
  margin-top:var(--sp-7); color:var(--muted); font-size:var(--fs-small);
  max-width:60ch;
}

@media (max-width:880px){
  .gallery__grid{ grid-template-columns:1fr; }
  .demo-card, .demo-card--lg{ grid-column:span 1; grid-row:span 1; min-height:0; }
  .demo-card{ aspect-ratio:1200/855; }
}

/* ============================================================
   5 — PREIS-BLOCK (Herzstück)
   ============================================================ */
.pricing__head{ text-align:center; max-width:60ch; margin-inline:auto; margin-bottom:var(--sp-7); }
.pricing__head .eyebrow{ display:block; margin-bottom:var(--sp-4); }
.pricing__head .lead{ margin-inline:auto; }

/* Toggle-Pill */
.toggle-wrap{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-7); }
.toggle{
  position:relative; display:inline-flex;
  padding:5px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--bg-2);
  box-shadow:var(--sh-1);
}
.toggle__indicator{
  position:absolute; top:5px; bottom:5px; left:5px;
  width:calc(50% - 5px);
  border-radius:var(--r-pill);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.16), var(--accent-soft));
  border:1px solid var(--accent-line);
  box-shadow:var(--glow-1);
  transition:transform var(--d-fast) var(--ease-spring);
  z-index:0;
}
/* 3-Segment-Variante (Monatlich / Jährlich / Komplett kaufen) */
.toggle--3 .toggle__indicator{ width:calc(33.333% - 3.33px); }
.toggle__seg{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-width:160px; min-height:44px; padding:0 1.4rem;
  border-radius:var(--r-pill);
  font-size:var(--fs-small); font-weight:600; letter-spacing:.02em;
  color:var(--ink-2);
  cursor:pointer;
  transition:color var(--d-fast) var(--ease-out);
}
.toggle input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.toggle__tag{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.04em;
  color:var(--accent); opacity:.8;
}
/* 2-Segment-Default (Rückfall, falls keine --3-Variante) */
.toggle input[value="yearly"]:checked ~ .toggle__indicator{ transform:translateX(100%); }
.toggle input[value="monthly"]:checked ~ .toggle__indicator{ transform:translateX(0); }
/* 3-Segment-Positionen (overriden die 2er-Regeln) */
.toggle--3 input[value="monthly"]:checked ~ .toggle__indicator{ transform:translateX(0); }
.toggle--3 input[value="yearly"]:checked ~ .toggle__indicator{ transform:translateX(100%); }
.toggle--3 input[value="buy"]:checked ~ .toggle__indicator{ transform:translateX(200%); }
/* aktives Segment hervorheben — :has() + JS-Fallback (data-active) */
.toggle:has(input[value="monthly"]:checked) label[for="freq-monthly"],
.toggle:has(input[value="yearly"]:checked) label[for="freq-yearly"],
.toggle:has(input[value="buy"]:checked) label[for="freq-buy"]{ color:var(--ink); }
.toggle[data-active="monthly"] label[for="freq-monthly"],
.toggle[data-active="yearly"] label[for="freq-yearly"],
.toggle[data-active="buy"] label[for="freq-buy"]{ color:var(--ink); }

.toggle-hint{
  font-size:var(--fs-small);
  text-align:center; min-height:1.4em;
  transition:color var(--d-fast) var(--ease-out);
}
.toggle-hint .gold{ color:var(--gift-gold); font-weight:600; }

/* Karten-Grid */
.plans{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-5); align-items:stretch;
  max-width:var(--wrap-wide); margin-inline:auto;
}
.plan{
  position:relative; display:flex; flex-direction:column;
  padding:var(--sp-7) var(--sp-6) var(--sp-6);
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:var(--bg-2);
  box-shadow:var(--sh-card);
}
.plan--featured{
  border-color:var(--accent-line);
  background:var(--bg-3);
  box-shadow:var(--sh-card), var(--glow-1);
}
.plan__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;
}
.plan__name{ color:var(--ink); font-weight:640; font-size:var(--fs-h3); letter-spacing:-0.01em; }
.plan__price{
  display:flex; align-items:baseline; gap:.35rem;
  flex-wrap:wrap;
  margin-top:var(--sp-4); margin-bottom:var(--sp-2);
}
.plan__amount{
  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;
  /* Betrag + „€" zusammenhalten (kein Umbruch des €) */
  white-space:nowrap;
}
/* €-Zeichen dicht an den Betrag — kleiner, fester Abstand statt Mono-Space */
.plan__cur{ margin-left:.12em; }
.plan__per{ color:var(--muted); font-size:var(--fs-small); }

/* Abo- vs. Einmalkauf-Preis (über .plans[data-mode] gesteuert) */
.plan__amount--buy, .plan__per--buy{ display:none; }
.plans[data-mode="buy"] .plan__amount--abo,
.plans[data-mode="buy"] .plan__per--abo{ display:none; }
.plans[data-mode="buy"] .plan__amount--buy,
.plans[data-mode="buy"] .plan__per--buy{ display:inline; }
.plans[data-mode="buy"] .plan__amount--buy{ 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; }

/* --- Premium-Preisschild: große Ganzzahl + kleine hochgestellte Cents + „€" ---
   Deutsches Format (Tausenderpunkt + Dezimalkomma), kein Umbruch. Konsistentes
   Markup: .price > .price__int (groß) + .price__dec („,99" klein, hochgestellt)
   + .price__cur („€"). Optionales .price__pre („ab") klein, vorangestellt. */
.price{
  display:inline-flex; align-items:flex-start; white-space:nowrap;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-weight:600; color:var(--ink); letter-spacing:-0.01em;
  line-height:1;
}
.price__pre{
  font-size:.42em; font-weight:600; color:var(--muted);
  align-self:center; margin-right:.3em; letter-spacing:.02em;
}
.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 (kein Mono-Space-Loch) */
.price__cur{
  font-size:.42em; font-weight:600;
  align-self:flex-start; margin-top:.12em; margin-left:.18em;
}
/* Im Kauf-Modus: keine Setup-Zeile (Einmalbetrag steht für sich) */
.plans[data-mode="buy"] .plan__setup{ display:none; }

/* Setup-Zeile (Signature-Mechanik) */
.plan__setup{
  position:relative;
  min-height:2.4em;
  margin-top:var(--sp-3); margin-bottom:var(--sp-5);
  padding-top:var(--sp-3);
  border-top:1px solid var(--line);
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.setup-label{ color:var(--muted); font-size:var(--fs-small); }
.setup-amount{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-body); letter-spacing:.02em;
}
/* Jahr: durchgestrichen + gedimmt */
.plan[data-freq="yearly"] .setup-amount{ color:var(--muted); text-decoration:line-through; }
.plan[data-freq="monthly"] .setup-amount{ color:var(--ink); text-decoration:none; }
/* Stempel */
.gift-stamp{
  font-family:var(--font-mono); font-size:.74rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--gift-gold);
  padding:.34em .7em; border-radius:var(--r-sm);
  border:1px solid rgba(231,201,148,.40);
  box-shadow:var(--glow-gift);
  transform:rotate(-4deg);
  transition:transform var(--d-fast) var(--ease-spring), opacity var(--d-fast) var(--ease-out);
}
.plan[data-freq="monthly"] .gift-stamp{ opacity:0; transform:rotate(2deg) scale(1.12) translateX(10px); pointer-events:none; }
.gift-stamp.is-ping{ animation:giftPing .55s var(--ease-spring); }
@keyframes giftPing{
  0%{ box-shadow:0 0 0 1px rgba(231,201,148,.30), 0 0 0 rgba(231,201,148,0); }
  40%{ box-shadow:0 0 0 1px rgba(231,201,148,.55), 0 0 34px rgba(231,201,148,.45); }
  100%{ box-shadow:var(--glow-gift); }
}
.plan__setup--static .setup-amount{ color:var(--ink-2); text-decoration:none; }
.plan__desc{ color:var(--ink-2); font-size:var(--fs-body); margin-bottom:var(--sp-6); }
.plan__cta{ margin-top:auto; }
.plan__cta .btn{ width:100%; }

/* Im Abo enthalten */
.included{
  max-width:var(--wrap); margin-inline:auto; margin-top:var(--sp-9);
  padding:var(--sp-8) var(--sp-7);
  border-radius:var(--r-xl);
  border:1px solid var(--line); background:var(--bg-2);
}
.included__head{ text-align:center; margin-bottom:var(--sp-7); }
.included__head .h3{ color:var(--ink); margin-bottom:var(--sp-2); }
.included__head p{ color:var(--muted); font-size:var(--fs-small); }
.included__list{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:var(--sp-6) var(--sp-7);
}
.incl-item{ display:flex; gap:var(--sp-4); }
.incl-item__check{
  flex:0 0 auto; width:26px; height:26px; margin-top:.1rem;
  border-radius:50%;
  border:1px solid var(--accent-line);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.incl-item__check svg{ width:14px; height:14px; }
.incl-item__title{ color:var(--ink); font-weight:600; font-size:var(--fs-body); margin-bottom:.2rem; }
.incl-item__text{ color:var(--ink-2); font-size:var(--fs-small); }

@media (max-width:880px){
  .plans{ grid-template-columns:1fr; }
  .plan--featured{ order:-1; }
  .included{ padding:var(--sp-7) var(--sp-5); }
  .included__list{ grid-template-columns:1fr; gap:var(--sp-6); }

  /* ---- 2-Segment-Toggle (Rückfall) bleibt horizontal, voll breit ---- */
  .toggle:not(.toggle--3){ width:100%; max-width:380px; }
  .toggle:not(.toggle--3) .toggle__seg{ min-width:0; flex:1; padding:0 .7rem; text-align:center; }

  /* ---- 3-SEGMENT-TOGGLE auf Mobil — komplett NEU (Owner-Fix) ----------------
     Frühere Bugs: der gleitende Indikator behielt seinen translateX(100%)
     (aus den Desktop-Regeln) → ragte rechts aus der Box (abgeschnittener
     Cyan-Streifen); aktiver Zustand wirkte wie leerer heller Rahmen.
     Neu: 3 volle-Breite-Pills, gleich hoch (≥44px Tap-Ziel), vertikal
     gestapelt. KEIN gleitender Indikator mehr (der wird ausgeblendet) — die
     aktive Pill wird DIREKT gefüllt (Akzent-Panel, lesbarer Kontrast), die
     inaktiven bleiben dezent. Rein token-basiert (dark im Dark, hell im
     Light), nichts ragt heraus (overflow:hidden + width an die Box). */
  .toggle--3{
    flex-direction:column; align-items:stretch;
    width:100%; max-width:360px;
    padding:6px; gap:6px;
    overflow:hidden;                 /* Sicherheitsnetz: nichts ragt heraus */
    border-radius:var(--r-lg);
  }
  /* gleitenden Indikator auf Mobil deaktivieren — wir füllen die Pill direkt */
  .toggle--3 .toggle__indicator{ display:none; }
  .toggle--3 .toggle__seg{
    flex:0 0 auto; width:100%; box-sizing:border-box;
    min-width:0; min-height:48px;
    padding:0 1rem; font-size:.95rem; letter-spacing:.01em; line-height:1.2;
    border-radius:var(--r-md);
    border:1px solid transparent;
    color:var(--ink-2);
    transition:background .18s var(--ease-out),
               border-color .18s var(--ease-out),
               color .18s var(--ease-out);
  }
  .toggle--3 .toggle__tag{
    display:inline; font-size:.62rem; opacity:.9;
  }
  /* aktive Pill direkt füllen (deutlich, lesbarer Kontrast).
     :has() für moderne Browser, [data-active] als JS-Fallback (Safari alt). */
  .toggle--3:has(input[value="monthly"]:checked) label[for="freq-monthly"],
  .toggle--3:has(input[value="yearly"]:checked)  label[for="freq-yearly"],
  .toggle--3:has(input[value="buy"]:checked)     label[for="freq-buy"],
  .toggle--3[data-active="monthly"] label[for="freq-monthly"],
  .toggle--3[data-active="yearly"]  label[for="freq-yearly"],
  .toggle--3[data-active="buy"]     label[for="freq-buy"]{
    color:var(--accent-ink);
    background:var(--accent-grad);
    border-color:transparent;
    box-shadow:var(--glow-1);
    font-weight:700;
  }
  /* der „Empfohlen"-Tag auf der aktiven Pill: lesbar auf Akzentfläche */
  .toggle--3:has(input[value="yearly"]:checked) label[for="freq-yearly"] .toggle__tag,
  .toggle--3[data-active="yearly"] label[for="freq-yearly"] .toggle__tag{
    color:var(--accent-ink); opacity:.85;
  }
}

/* ============================================================
   6 — ROADMAP
   ============================================================ */
.roadmap__grid{
  position:relative;
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:var(--sp-6);
  padding-left:var(--sp-6);
}
.roadmap__grid::before{
  content:""; position:absolute; left:0; top:.5rem; bottom:.5rem;
  width:1px; background:linear-gradient(180deg, var(--line), transparent);
}
.road-card{
  position:relative; display:block;
  padding:var(--sp-6);
  padding-right:var(--sp-7);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--card-translucent);
  cursor:pointer;
  transition:border-color var(--d-fast) var(--ease-out),
             background var(--d-fast) var(--ease-out),
             box-shadow var(--d-fast) var(--ease-out),
             transform var(--d-fast) var(--ease-out);
}
/* Pfeil-Affordance (oben rechts) — signalisiert „anklickbar" */
.road-card::after{
  content:""; position:absolute; top:var(--sp-6); right:var(--sp-6);
  width:16px; height:16px;
  background:currentColor;
  color:var(--muted);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M5 11l6-6M6 5h5v5'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M5 11l6-6M6 5h5v5'/></svg>") center/contain no-repeat;
  opacity:.5;
  transition:transform var(--d-fast) var(--ease-out),
             color var(--d-fast) var(--ease-out),
             opacity var(--d-fast) var(--ease-out);
}
@media (hover:hover) and (min-width:641px){
  .road-card:hover{
    border-color:var(--accent-line);
    background:var(--card-translucent-2);
    box-shadow:var(--glow-2);
    transform:translateY(-3px);
  }
  .road-card:hover::after{
    color:var(--accent); opacity:1;
    transform:translate(2px, -2px);
  }
  .road-card:hover .road-card__name{ color:var(--ink); }
}
.road-card:focus-visible{
  border-color:var(--accent-line);
  box-shadow:var(--glow-1);
}
.road-card__badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
  padding:.3em .7em; border-radius:var(--r-pill);
  border:1px solid var(--line);
  margin-bottom:var(--sp-4);
}
.road-card__name{ color:var(--ink-2); font-weight:640; font-size:var(--fs-h3); letter-spacing:-0.01em; margin-bottom:var(--sp-3); transition:color var(--d-fast) var(--ease-out); }
.road-card__text{ color:var(--muted); font-size:var(--fs-body); }
.roadmap__foot{ margin-top:var(--sp-7); color:var(--muted); font-size:var(--fs-small); max-width:62ch; }

@media (max-width:880px){
  .roadmap__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   7 — CTA + KONTAKT
   ============================================================ */
.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{ color:var(--ink); 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__legal a{ color:var(--ink-2); border-bottom:1px solid var(--line); }

.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); } }

.contact__alt{ text-align:center; margin-top:var(--sp-6); color:var(--muted); font-size:var(--fs-small); }
.contact__alt a{ color:var(--accent); border-bottom:1px solid var(--line); padding-bottom:1px; }

@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:34ch; }
.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, .plans, .gallery__grid--wide{ 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; }