/* ============================================================================
   Deckerized — Theme 2.0  ·  Override-Stylesheet
   Wird NACH dem Bestands-CSS jeder Seite geladen und dreht die Seite auf
   dunkel (Palette B) mit klarem Glas (Rezeptur v4).

   Verbindliche Grundlagen:
   · Palette B  — Nachtblau #070E1A -> Ozean #0E6FA8/#1189C9 -> Türkis #2FD4C4
                  (Türkis NUR Akzent, nie Fläche) · Sand #E6D2AE sparsam für
                  Preise und Zahlen.
   · Glas v4    — CEO-Abnahme 03.08.2026 im Glas-Labor:
                  Füllung 0 · Blur 4px · Brightness 1.15 · Sättigung 155 %
                  · Lichtkante oben .12 · KEINE Außenlinie · Schein .06
                  · Primär-Button-Tint .50
   · Kein Glas unter Fließtext (Zielgruppe 45+). Lesbarkeit schlägt Effekt.
   · Alle Farben als Variablen — Hell-Umschalter später über
     [data-theme="light"] nachrüstbar, ohne die Regeln anzufassen.
   ========================================================================= */

/* ---------------------------------------------------------------- FONTS --
   Lokal, kein Google-CDN (DSGVO). Dateien in assets/fonts/.
   Inter = Fließtext/UI · Space Grotesk = Zahlen, Preise, technische Labels. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-700.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/space-grotesk-500.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-grotesk-700.woff2") format("woff2")}

/* ---------------------------------------------------------------- TOKENS */
:root{
  /* --- Palette B --- */
  --night:#070E1A;
  --night-2:#0B1424;
  --night-3:#0E1B2E;
  --ocean:#0E6FA8;
  --ocean-br:#1189C9;
  --turq:#2FD4C4;        /* Akzent, nie Fläche */
  --sand:#E6D2AE;        /* sparsam: Preise und Zahlen */

  /* --- Glas-Rezeptur v4 (verbindlich) --- */
  --glass-blur:4px;
  --gbr:1.15;
  --gsat:155%;
  --glass-rim:.12;
  --glass-sheen:.06;
  --tint-primary:.50;

  /* --- Bestands-Tokens umdefiniert: dreht den Großteil der Seite mit --- */
  --bg:#070E1A;
  --bg-2:#0B1424;
  --dark:#04090F;
  --dark-2:#0E1B2E;
  --ink:#EAF1F8;
  --ink-soft:#A8BACB;
  --ink-dim:#6E8098;
  --blue:#1189C9;
  --blue-h:#2A9FDC;
  --blue-l:#4FB8E8;
  --link:#4FB8E8;
  --ok:#2FD4C4;
  --line:rgba(255,255,255,.16);
  --hairline:rgba(255,255,255,.09);
  --sh-1:0 2px 14px rgba(0,0,0,.34);
  --sh-2:0 14px 46px rgba(0,0,0,.48);

  --ff:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --ff-num:"Space Grotesk","Inter",system-ui,sans-serif;
}

/* Vorbereitet, bewusst noch NICHT ausgebaut: die helle Fassung wird erst
   gebaut, wenn Felix am fertigen dunklen Bild entschieden hat, ob er sie
   überhaupt will (Entscheidung 5 vom 03.08.). Hier stehen nur die Tokens —
   keine Regel unten greift auf harte Farben zu, also kostet der Umschalter
   später Stunden statt Tage. */
[data-theme="light"]{
  --bg:#FFFFFF;  --bg-2:#F3F6FA; --dark:#0B1424; --dark-2:#152238;
  --ink:#0B1424; --ink-soft:#4A5C70; --ink-dim:#7B8CA0;
  --blue:#0E6FA8; --blue-h:#0C5F91; --blue-l:#0E6FA8; --link:#0E6FA8;
  --line:rgba(11,20,36,.16); --hairline:rgba(11,20,36,.09);
  --glass-rim:.55; --glass-sheen:.03; --gbr:1.02;
  --sh-1:0 2px 12px rgba(11,20,36,.08); --sh-2:0 10px 40px rgba(11,20,36,.14);
}

/* ------------------------------------------------------------ GRUNDLAGE */
body{
  background:var(--night);
  color:var(--ink);
  font-family:var(--ff);
}
::selection{background:rgba(17,137,201,.45);color:#fff}

/* Hintergrund: ein einziges festes Canvas hinter der ganzen Seite.
   Ersetzt die frueheren zwei Flaechen aus body::before/::after UND das
   Hero-Canvas. Logik: assets/js/hintergrund.js
   Wabengitter mit ovaler Aufloesung, atmenden Kanten und Auslaeufern; das
   Leuchten liegt nur unter einem Abschnitt mit data-zustand="welle". */
#grund{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none; display:block;
}
/* Ausfallsicherung: ohne JavaScript bleibt eine ruhige Flaeche statt einer
   nackten Farbe. Bewusst SCHWACH und an anderen Stellen als die Verlaeufe im
   Canvas — sonst addiert sich beides unter dem Hero. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(70% 55% at 30% 30%,rgba(14,111,168,.09),transparent 70%),
    radial-gradient(80% 60% at 70% 96%,rgba(14,111,168,.06),transparent 72%);
}

/* Sektionen sind transparent, damit der Hintergrund durchläuft.
   Der Wechsel Abschnitt/Abschnitt kommt über eine leichte Aufhellung. */
section,header.hero,.bridge,.band,footer{background:transparent}
.story-alt,#websites,#erstgespraech,#bausteine,#horizont,footer{
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
}
#maschinenraum{background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.18))}

/* ---------------------------------------------------------------- GLAS --
   Rezeptur v4: Füllung 0, Form entsteht aus Lichtkante + Schein.
   Keine Außenlinie. Der Hintergrund läuft sichtbar durch. */
.glass,
.nav,
.tier,.care-line,.site-btn,.more-card,.rad-card,.bs-card,.notyou,
.funnel,.faq details,.stackbar,.seg,.prefill,
.aut-card,.dm-card,.wett-col,.wirt-card,.person-card,.demo-teaser,.tech{
  background:transparent;
  border:0;
  -webkit-backdrop-filter:blur(var(--glass-blur)) brightness(var(--gbr)) saturate(var(--gsat));
  backdrop-filter:blur(var(--glass-blur)) brightness(var(--gbr)) saturate(var(--gsat));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,var(--glass-rim)),
    0 0 34px rgba(255,255,255,var(--glass-sheen));
}
/* Lesefläche statt Glas: überall dort, wo Fließtext steht. */
.solid,.faq .a,.lead,.mp-text{backdrop-filter:none;-webkit-backdrop-filter:none}

/* ----------------------------------------------------------------- NAV --
   Gescrollt wird die Nav deckender — Lesbarkeit über Effekt. */
.nav{
  -webkit-backdrop-filter:blur(14px) brightness(var(--gbr)) saturate(var(--gsat));
  backdrop-filter:blur(14px) brightness(var(--gbr)) saturate(var(--gsat));
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07);
}
.nav.scrolled{
  background:rgba(7,14,26,.78);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.10),0 8px 26px rgba(0,0,0,.34);
}
.nav-links a{color:var(--ink-soft)}
.nav-links a:hover{color:var(--turq)}
.burger span{background:var(--ink)}
.nav-links.open{
  background:rgba(7,14,26,.94);
  -webkit-backdrop-filter:blur(16px) saturate(var(--gsat));
  backdrop-filter:blur(16px) saturate(var(--gsat));
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.logo{color:var(--ink)}
.logo .mark-m6{width:22px;height:22px;flex:none;display:block}
.logo .star{display:none}

/* -------------------------------------------------------------- BUTTONS */
.btn-gold{
  background:rgba(17,137,201,var(--tint-primary));
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 22px rgba(17,137,201,.22);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--gsat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--gsat));
}
.btn-gold:hover{background:rgba(42,159,220,.62)}
.btn-ghost{color:var(--turq);box-shadow:inset 0 0 0 1px rgba(47,212,196,.55);background:transparent}
.btn-ghost:hover{background:rgba(47,212,196,.14);color:var(--turq)}
.btn-ghost.on-dark{color:var(--turq);box-shadow:inset 0 0 0 1px rgba(47,212,196,.55)}
.btn-ghost.on-dark:hover{background:rgba(47,212,196,.14);color:var(--turq)}
:focus-visible{outline:2px solid var(--turq);outline-offset:3px;border-radius:6px}

/* --------------------------------------------------------------- TYPO --- */
h1,h2,h3{color:var(--ink)}
.kicker{color:var(--turq);letter-spacing:.12em}
.lead{color:var(--ink-soft)}
.bridge p{color:var(--ink)}
.hero .lead,.page-hero .lead{color:var(--ink-soft)}
.hero h1 em,.hero-line2 em,.mr-claim b,.page-hero h1 em{
  background:linear-gradient(92deg,var(--ocean-br),var(--turq));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Zahlen und Preise: Sand + technische Schrift, sparsam eingesetzt. */
.tier .from,.bs-price,.dm-price,.wirt-num,.aut-num{
  font-family:var(--ff-num);color:var(--sand);letter-spacing:-.01em;
}
.tier .from small,.bs-price small,.dm-price small{color:var(--ink-dim);font-family:var(--ff)}

.hero{position:relative;background:transparent}
.hero .wrap{position:relative;z-index:1}
/* Die H1 trägt jetzt beide Aussagen und darf deshalb umbrechen. */
.hero h1.hero-wide{
  white-space:normal;
  font-size:clamp(38px,5.6vw,80px);
  max-width:15ch;
  margin:18px 0 30px;
}
@media(max-width:1080px){.hero h1.hero-wide{max-width:none;margin:16px auto 24px}}
.hero-trust{color:var(--ink-dim)}
.hero-trust .dots i{background:rgba(255,255,255,.10);color:var(--ink-soft);border-color:transparent}
.hero-trust a{color:var(--turq)!important}
.swap span{color:var(--turq)}
.stage .frame-note{color:var(--ink-dim)}
.page-hero{position:relative}

/* ------------------------------------------------- SEKTIONS-BAUSTEINE --- */
.sec-head .lead{color:var(--ink-soft)}
.card{background:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,var(--glass-rim))}

/* Preis-Stufen */
.tier .badge{background:rgba(47,212,196,.16);color:var(--turq)}
.tier.mid{box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 0 44px rgba(17,137,201,.16),0 0 0 1px rgba(47,212,196,.22)}
.tier.mid .from{color:var(--sand)}
.tier.mid .from small,.tier.mid ul li{color:var(--ink-soft)}
.tier ul li{color:var(--ink-soft)}
.tier ul svg,.tier.mid ul svg{color:var(--turq)}
.tier p{color:var(--ink-soft)!important}
.care-line svg{color:var(--turq)}
.tiers-more a{color:var(--turq)}

/* Showcase-Teleskop */
.tele-filters button,.chips button,.tiers button,.rad-btn,.bs-add{
  background:transparent;border:1px solid var(--line);color:var(--ink-soft);
}
.tele-filters button:hover,.chips button:hover,.tiers button:hover,.rad-btn:hover,.bs-add:hover{
  border-color:rgba(47,212,196,.5);color:var(--turq);
}
.tele-filters button.on,.chips button.on,.tiers button.on{
  background:rgba(17,137,201,var(--tint-primary));border-color:transparent;color:#fff;
}
.site-btn.on{box-shadow:inset 0 1px 0 rgba(255,255,255,var(--glass-rim)),0 0 0 1px rgba(47,212,196,.55),0 0 26px rgba(47,212,196,.10)}
.site-btn small{color:var(--ink-soft)}
.site-btn .note{color:var(--turq)}
.tele-hint{color:var(--ink-dim)}
.tele-open{color:var(--turq)}
.seg button{color:var(--ink-soft)}
.seg button.on{background:rgba(17,137,201,var(--tint-primary));color:#fff;box-shadow:none}
/* Geräterahmen: das Innenleben bleibt bewusst hell — es zeigt echte Seiten. */
.device-frame{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}

/* Mehr-Karten */
.more-card{color:var(--ink)}
.more-card:hover{background:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 0 40px rgba(17,137,201,.14)}
.more-card p{color:var(--ink-soft)}
.more-link{color:var(--turq)}

/* Funnel, FAQ, Formulare */
.funnel input,.funnel textarea{
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);
}
.funnel input::placeholder,.funnel textarea::placeholder{color:var(--ink-dim)}
.funnel input:focus,.funnel textarea:focus{border-color:var(--turq);box-shadow:0 0 0 3px rgba(47,212,196,.18)}
.fun-steps i{background:rgba(255,255,255,.12)}
.fun-steps i.on{background:var(--turq)}
.fun-back{color:var(--ink-soft)}
.fun-back:hover{color:var(--ink)}
.fun-note,.fun-done p{color:var(--ink-dim)}
.fun-done .tick{background:rgba(47,212,196,.20)}
.fun-done .tick svg{color:var(--turq)}
.prefill{color:var(--ink-soft)}
.faq summary{color:var(--ink)}
.faq summary::after{color:var(--ink-dim)}
/* Antworttext ist Fließtext — hier bewusst kein Glas darunter. */
.faq .a{color:var(--ink-soft)}
.faq details[open]{box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 0 0 1px rgba(47,212,196,.20)}

/* Bild-Band */
.band{background:var(--night)}
.band img{filter:grayscale(.7) contrast(1.05) brightness(.5) saturate(1.2)}
.band::after{background:linear-gradient(180deg,rgba(7,14,26,.72),rgba(7,14,26,.86))}
.band .band-quote p b{color:var(--turq)}

/* Maschinenraum / Prozess (Unterseiten) */
.mr-card{background:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,var(--glass-rim)),0 0 30px rgba(255,255,255,var(--glass-sheen));-webkit-backdrop-filter:blur(var(--glass-blur)) brightness(var(--gbr)) saturate(var(--gsat));backdrop-filter:blur(var(--glass-blur)) brightness(var(--gbr)) saturate(var(--gsat))}
.mr-card .ico{color:var(--turq)}
.mr-card p,.step p{color:var(--ink-soft)}
.proc-line{background:rgba(255,255,255,.12)}
.proc-line i{background:linear-gradient(180deg,var(--ocean),var(--turq))}
.step::before{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--ink-dim)}
.step.on::before{background:rgba(17,137,201,var(--tint-primary));border-color:transparent;color:#fff}
.rad-badge{background:rgba(47,212,196,.14);color:var(--turq)}
.rad-badge i{background:var(--turq)}
.rad-card p{color:var(--ink-soft)}
.rad-btn.done{background:rgba(47,212,196,.22);border-color:transparent;color:var(--turq)}
.notyou p{color:var(--ink-soft)}
.stackbar{color:var(--ink)}
.stackbar .lbl-s,.stackbar .cnt,.kombi small{color:var(--ink-dim)}
.stackbar b{color:var(--ink);font-family:var(--ff-num)}
.kombi .bar{background:rgba(255,255,255,.12)}
.kombi .bar i{background:linear-gradient(90deg,var(--ocean),var(--turq))}
.grp-title{color:var(--ink)}
.bs-card p{color:var(--ink-soft)}
.bs-card .ico{color:var(--turq)}
.demo-toggle{color:var(--turq)}

/* Story-Panels (Problemsektion) */
.story-num{color:var(--turq)}
.d-label{color:var(--ink-dim)}
.d-label i{background:var(--ink-dim)}
.d-label.us{color:var(--turq)}
.d-label.us i{background:var(--turq)}
.story .d-answer{color:var(--ink)}
.duo-cap,.ehrlich{color:var(--ink-dim)}
.story-dots i{background:rgba(255,255,255,.20)}
.story-dots i.on{background:var(--turq)}
.story-dots{background:transparent}

/* Footer */
footer{color:var(--ink-soft);border-top:1px solid var(--hairline)}
.foot-grid h4{color:var(--ink)}
.foot-grid p,.foot-grid li{color:var(--ink-soft)}
.foot-grid a:hover{color:var(--turq)}
.foot-base{color:var(--ink-dim)}
.foot-base a{color:var(--ink-soft);text-decoration:none}
.foot-base a:hover{color:var(--turq)}
.foot-legal{display:flex;gap:16px;flex-wrap:wrap}
footer .logo{color:var(--ink)!important}

/* =========================================================================
   DEMO-INSELN — bewusst helles Innenleben.
   Sie zeigen echte Werkzeuge (Browser, Google-Profil, Postfach, Handy).
   Hier werden die Tokens auf hell zurückgesetzt, damit kein einziges
   var(--ink) aus dem dunklen Theme hineinleuchtet.
   ====================================================================== */
#heroCanvas,.browser,.sv-card,.sv-b,.gp2,.phone,.demo-inner,.ba,.sms,
.brief-item,.inbox-mess,.brief2,.gp2c,.ba2{
  --bg:#ffffff; --bg-2:#f5f5f7; --dark:#000000; --dark-2:#1d1d1f;
  --ink:#1d1d1f; --ink-soft:#6e6e73; --ink-dim:#86868b;
  --blue:#0071e3; --blue-h:#0077ed; --blue-l:#2997ff; --link:#06c;
  --ok:#34c759;
  --line:#d2d2d7; --hairline:rgba(0,0,0,.1);
  --sh-1:0 2px 12px rgba(0,0,0,.06); --sh-2:0 8px 40px rgba(0,0,0,.12);
  --ff:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Helvetica,Arial,sans-serif;
  color:#1d1d1f;
}
/* Die Insel selbst bleibt weiß und bekommt eine ruhige Fassung im Dunkeln. */
.sv-card,.gp2,.phone,.browser,.demo-inner{
  background:#fff;
  box-shadow:0 18px 48px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6);
}
.sv-b .sv-bbody{box-shadow:0 12px 30px rgba(0,0,0,.4)}
.sv-b figcaption{color:var(--ink-dim)}
/* Die Bildunterschrift steht auf der dunklen Seite, nicht in der Insel. */
.story-visual>.sv-b figcaption,.sv-duo figcaption{color:#6E8098}

/* =========================================================================
   NEUE SEKTIONEN — Struktur „Produkte zuerst"
   ====================================================================== */

/* ---- 1 · Büro-Automation --------------------------------------------- */
.aut-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.aut-card{border-radius:var(--rad-l,28px);padding:30px 32px;display:flex;flex-direction:column;gap:14px}
.aut-list{list-style:none;display:grid;gap:14px;margin:0;padding:0}
.aut-list li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;color:var(--ink-soft);line-height:1.55}
.aut-list li svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--turq)}
.aut-list li b{color:var(--ink);font-weight:600}
.aut-num{font-size:15px;font-weight:700}
.aut-note{font-size:13.5px;color:var(--ink-dim);line-height:1.6;max-width:60ch}

/* Tages-Briefing — Beweis aus dem eigenen Betrieb, bewusst ohne Preise. */
.brief-proof{border-radius:22px;padding:24px 26px;display:flex;flex-direction:column;gap:14px}
.brief-proof .bp-head{display:flex;align-items:center;gap:11px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--turq)}
.brief-proof .bp-head i{width:7px;height:7px;border-radius:50%;background:var(--turq);font-style:normal;flex:none}
.brief-proof h3{font-size:20px;font-weight:700;letter-spacing:-.02em}
.bp-rows{display:grid;gap:9px}
.bp-row{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.045);font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.bp-row b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.bp-tag{flex:none;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:9px;background:rgba(17,137,201,.22);color:#BFE4F8;font-family:var(--ff)}
.bp-tag.hot{background:rgba(230,210,174,.16);color:var(--sand)}
.bp-foot{font-size:12.5px;color:var(--ink-dim);line-height:1.6}

/* Verweis auf die Regler-Demo */
.demo-teaser{display:flex;gap:18px;align-items:center;flex-wrap:wrap;border-radius:20px;padding:20px 24px;margin-top:26px}
.demo-teaser svg{width:26px;height:26px;flex:none;color:var(--turq)}
.demo-teaser p{font-size:14.5px;color:var(--ink-soft);flex:1;min-width:240px;line-height:1.55}
.demo-teaser p b{color:var(--ink)}
.demo-teaser .dt-note{display:block;font-size:12px;color:var(--ink-dim);margin-top:4px}

/* ---- 2 · Digitale Mitarbeiter (6 Karten) ----------------------------- */
.dm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.dm-card{border-radius:var(--rad,18px);padding:26px 24px;display:flex;flex-direction:column;gap:11px}
.dm-card .ico{width:30px;height:30px;color:var(--turq)}
.dm-card .ico svg{width:100%;height:100%}
.dm-card h3{font-size:17px;font-weight:600;letter-spacing:-.01em}
.dm-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;flex:1}
.dm-price{font-size:15px;font-weight:700}
.dm-price small{display:block;font-size:12px;font-weight:400;margin-top:2px}
/* Baustein-Fussnote statt Preis — bewusst NICHT in Sand, Sand bleibt Preisen und Zahlen vorbehalten */
.dm-note{font-size:12.5px;color:var(--ink-dim);line-height:1.55;padding-top:11px;border-top:1px solid rgba(255,255,255,.08)}
.dm-note b{color:var(--ink-soft);font-weight:600}
/* Ablaufkette im Baustein — zeigt, wer handelt: der Kunde, das Modul, nicht der Inhaber */
.chain{list-style:none;counter-reset:ch;margin:2px 0 0;padding:0;display:grid;gap:9px}
.chain li{counter-increment:ch;position:relative;padding-left:30px;font-size:13px;color:var(--ink-dim);line-height:1.5}
.chain li::before{content:counter(ch);position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:var(--ff-num);
  color:var(--turq);box-shadow:inset 0 0 0 1px rgba(47,212,196,.45)}
.chain li::after{content:"";position:absolute;left:9.5px;top:22px;bottom:-9px;width:1px;background:rgba(47,212,196,.28)}
.chain li:last-child::after{display:none}
.chain li b{color:var(--ink-soft);font-weight:600}
.chain li:last-child b{color:var(--turq)}
.tier-soon{font-size:12.5px;color:var(--ink-dim);line-height:1.55;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.dm-more{margin-top:26px;text-align:center;font-size:15px}
.dm-more a{color:var(--turq);text-decoration:none;font-weight:600;display:inline-flex;gap:7px;align-items:center}
.dm-more a:hover .arrow{transform:translateX(3px)}

/* ---- 3 · Wettbewerbs-Positionierung ---------------------------------- */
.wett-grid{display:grid;grid-template-columns:1fr 1.14fr 1fr;gap:18px;align-items:stretch}
.wett-col{border-radius:var(--rad-l,28px);padding:30px 28px;display:flex;flex-direction:column;gap:12px}
.wett-col.mitte{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 44px rgba(17,137,201,.16),0 0 0 1px rgba(47,212,196,.28)}
.wett-col h3{font-size:19px;font-weight:700;letter-spacing:-.02em}
.wett-col .wt-sub{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.wett-col.mitte .wt-sub{color:var(--turq)}
.wett-col ul{list-style:none;display:grid;gap:9px;margin:6px 0 0;padding:0;font-size:14px;color:var(--ink-soft);line-height:1.5}
.wett-col li{display:flex;gap:10px;align-items:flex-start}
.wett-col li::before{content:"—";color:var(--ink-dim);flex:none}
.wett-col.mitte li::before{content:"✓";color:var(--turq);font-weight:700}
.wett-foot{margin-top:24px;text-align:center;font-size:13.5px;color:var(--ink-dim);max-width:70ch;margin-left:auto;margin-right:auto;line-height:1.65}
@media(max-width:1000px){.wett-grid{grid-template-columns:1fr}}

/* ---- 4 · Wirtschaftlichkeit ------------------------------------------ */
.wirt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.wirt-card{border-radius:var(--rad,18px);padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.wirt-num{font-size:30px;font-weight:700;line-height:1.05;letter-spacing:-.02em}
.wirt-card h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.wirt-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.wirt-rech{font-size:12.5px;color:var(--ink-dim);font-family:var(--ff-num);letter-spacing:0;padding-top:10px;border-top:1px solid var(--hairline);line-height:1.6}
.wirt-disclaimer{margin-top:26px;font-size:13px;color:var(--ink-dim);line-height:1.7;max-width:76ch}

/* ---- 5 · Personen ----------------------------------------------------- */
.person-card{border-radius:var(--rad-l,28px);padding:34px 36px;display:grid;grid-template-columns:150px 1fr;gap:34px;align-items:center}
.person-mono{
  width:150px;height:150px;border-radius:34px;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-num);font-size:52px;font-weight:700;letter-spacing:-.03em;color:var(--sand);
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  position:relative;
}
/* TODO: echtes Foto Felix -> assets/img/felix-decker.webp.
   Bewusst kein Stockfoto — bis dahin steht hier das Monogramm. */
.person-mono::after{
  content:"Foto folgt";position:absolute;bottom:-26px;left:0;right:0;text-align:center;
  font-family:var(--ff);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);
}
.person-card h3{font-size:23px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.person-role{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--turq);margin-bottom:14px;display:block}
.person-card p{font-size:15px;color:var(--ink-soft);line-height:1.65;max-width:62ch}
.person-card p+p{margin-top:12px}
@media(max-width:720px){
  .person-card{grid-template-columns:1fr;gap:44px;padding:30px 24px;text-align:center}
  .person-mono{margin:0 auto}
  .person-card p{margin-left:auto;margin-right:auto}
}

/* ---- Problemsektion: austauschbarer Block ----------------------------- */
/* Fassung A. Der gesamte Block zwischen den Markern kann ersetzt werden,
   ohne dass irgendetwas anderes auf der Seite davon abhängt.
   Siehe HTML-Kommentare PROBLEMSEKTION-START / PROBLEMSEKTION-ENDE. */
.problem-block{position:relative}

/* ---- Rechtsseiten (Impressum/Datenschutz) ---------------------------- */
.legal{padding:140px 0 90px;position:relative}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(32px,4.4vw,48px);line-height:1.08;font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.legal h2{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:42px 0 12px;text-align:left}
.legal h3{font-size:16.5px;font-weight:600;margin:24px 0 8px}
.legal p,.legal li{font-size:15.5px;line-height:1.75;color:var(--ink-soft)}
.legal p+p{margin-top:12px}
.legal ul{margin:10px 0 0 20px;display:grid;gap:7px}
.legal a{color:var(--turq)}
.legal address{font-style:normal;line-height:1.85;color:var(--ink-soft);font-size:15.5px}
.legal .entwurf{
  border-radius:16px;padding:18px 22px;margin:26px 0 8px;font-size:14px;line-height:1.65;
  background:rgba(230,210,174,.10);color:var(--sand);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.legal .entwurf b{color:var(--sand)}
.legal .offen{color:var(--ink-dim);font-size:14px}

/* --------------------------------------------------------- RESPONSIVE -- */
@media(max-width:1000px){
  .aut-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:740px){
  .aut-card,.brief-proof{padding:22px 20px}
  .demo-teaser{padding:18px 20px}
}

/* ------------------------------------------------------------- MOTION -- */
@media(prefers-reduced-motion:reduce){
  }

/* -------------------------------------------------------------- RHYTHMUS --
   Der Preisblock stand direkt unter dem Geraeterahmen und wurde optisch von
   ihm verschluckt; zur Bruecke hin klafften dagegen ueber 300 px Leere.
   Beides hier korrigiert, ohne die Sektionslogik anzufassen. */
#preise{margin-top:104px;padding-top:52px;border-top:1px solid var(--hairline)}
#websites{padding-bottom:60px}
.care-line{margin-bottom:0}
.bridge{padding:60px 0 22px}
@media(max-width:900px){
  #preise{margin-top:64px;padding-top:38px}
  #websites{padding-bottom:44px}
  .bridge{padding:44px 0 16px}
}

/* Kompakte Verweisliste — ersetzt die ausgelagerten Problemgeschichten */
.pk-list{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:1px;background:rgba(255,255,255,.08);border-radius:var(--rad,18px);overflow:hidden}
.pk-list li{background:transparent}
.pk-list a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 24px;
  text-decoration:none;color:var(--ink-soft);font-size:16px;line-height:1.4;
  -webkit-backdrop-filter:blur(var(--glass-blur)) brightness(var(--gbr)) saturate(var(--gsat));
  backdrop-filter:blur(var(--glass-blur)) brightness(var(--gbr)) saturate(var(--gsat));
  box-shadow:inset 0 1px 0 rgba(255,255,255,var(--glass-rim));transition:color .18s}
.pk-list a:hover{color:var(--turq)}
.pk-list .arrow{flex:none;color:var(--turq);transition:transform .18s}
.pk-list a:hover .arrow{transform:translateX(3px)}

/* ------------------------------------------------- VORHER / NACHHER --------
   Zwei echte Seiten im selben Rahmen, per Regler geteilt. Die Seiten laufen
   in voller Schreibtischbreite und werden herunterskaliert — sonst sähe man
   die Mobilfassung und nicht den Aufbau. Beide liegen unter beispiel/,
   also gleiche Herkunft: keine Anfrage an einen fremden Server. */
.tf{position:relative;border-radius:var(--rad,18px);overflow:hidden;border:1px solid var(--hairline);
  box-shadow:var(--sh-2);aspect-ratio:16/9;width:100%;max-width:860px;margin:0 auto;
  background:#fff;user-select:none;--x:46%;touch-action:pan-y}
.tf .pane{position:absolute;inset:0;overflow:hidden}
.tf .neu{clip-path:inset(0 0 0 var(--x))}
.tf .alt{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.tf iframe{position:absolute;top:0;left:0;width:1280px;height:900px;border:0;
  transform-origin:0 0;pointer-events:none;background:#fff}
.tf .hdl{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:var(--turq);
  cursor:ew-resize;z-index:5;box-shadow:0 0 16px rgba(47,212,196,.55)}
.tf .hdl::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:var(--turq);box-shadow:0 6px 22px rgba(0,0,0,.42)}
.tf .hdl::before{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  color:#06232a;font-size:16px;font-weight:700;letter-spacing:2px;font-family:var(--ff-num)}
.tf .hdl:focus-visible{outline:2px solid var(--turq);outline-offset:4px}
/* Die Marken „vorher/nachher" saßen oben und lagen damit genau auf der
   Navigation der Seiten im Rahmen. Sie gehören nach unten in die Ecken —
   dort ist bei beiden Fassungen Fläche, keine Bedienung. */
.tf .tag{position:absolute;bottom:14px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;padding:5px 11px;border-radius:8px;z-index:3;pointer-events:none;
  backdrop-filter:blur(6px) saturate(140%)}
.tf .tag.l{left:14px;background:rgba(0,0,0,.62);color:#e8e8ea}
.tf .tag.r{right:14px;background:var(--turq);color:#06232a}
.tf-unten{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start;margin:26px auto 0;max-width:1180px}
@media(max-width:820px){.tf-unten{grid-template-columns:1fr;gap:14px}}
.tf-lese{font-size:15px;line-height:1.7;color:var(--ink-soft);max-width:72ch;margin:0}
.tf-lese b{color:var(--ink);font-weight:600}
.tf-links{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;margin:0}
.tf-links a{color:var(--turq);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(47,212,196,.32);padding-bottom:2px}
.tf-links a:hover{border-color:var(--turq)}
.tf-fuss{margin:22px auto 0;max-width:1180px;font-size:12.5px;line-height:1.65;color:var(--ink-dim)}
@media(max-width:700px){.tf{aspect-ratio:4/3}}

/* ══════════════════════════════════════════════════════════════════════════
   HERO — Satzspiegel auf zwölf Spalten (Variante B1, freigegeben)
   --------------------------------------------------------------------------
   Drei Ebenen auf einem Raster: Kopfzeile, Satz, Produktleiste. Links
   beginnt jede Ebene bei Spalte 1, rechts bei Spalte 9 — Ortsangabe,
   Erklärungstext und der dritte Produktpunkt stehen dadurch exakt
   untereinander. Zwischen Spalte 7 und 9 steht Luft statt einer Trennlinie;
   Weißraum teilt sauberer als ein Strich.

   Der Hero hat einen eigenen Innenabstand (--rand) zusätzlich zur
   Seitenbreite. Nichts darin berührt den Bildschirmrand.
   ══════════════════════════════════════════════════════════════════════════ */
.hero{--rand:clamp(18px,3.6vw,68px);
  min-height:100svh;display:flex;align-items:stretch;padding:0;background:transparent;text-align:left}
.hero>.wrap{width:min(1240px,94vw);margin:0 auto;padding:64px var(--rand) 56px;
  display:flex;flex-direction:column;gap:64px}
.hero .satz{flex:1;align-content:center}
.hero .raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}

.hero .kick{display:flex;align-items:center;gap:14px;grid-column:1 / span 7;margin:0;
  font-family:var(--ff-num,"Space Grotesk",Inter,system-ui);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--turq,#2FD4C4)}
.hero .kick::before{content:"";width:26px;height:1px;background:currentColor;opacity:.75;flex:none}
.hero .ort{grid-column:9 / span 4;font-family:var(--ff-num,"Space Grotesk",Inter,system-ui);
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-dim,#6E8098)}
.hero .kopf{border-bottom:1px solid var(--hairline);padding-bottom:24px;align-items:center}

.hero .satz{align-items:center}
.hero h1.hero-wide{grid-column:1 / span 7;margin:0;max-width:none;
  font-size:clamp(42px,6.3vw,92px);line-height:.90;font-weight:700;letter-spacing:-.042em}
.hero .re{grid-column:9 / span 4;display:flex;flex-direction:column;gap:16px}
.hero .re .sub{font-size:clamp(18px,1.5vw,21px);font-weight:600;letter-spacing:-.017em;
  line-height:1.32;margin:0;color:var(--ink);text-wrap:balance}
.hero .re .lead{font-size:16.5px;line-height:1.62;margin:0;max-width:none}
.hero .tun{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:8px}
.hero .tun .link{font-size:15.5px;font-weight:500;color:var(--ink-soft);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid var(--hairline-2,rgba(255,255,255,.19));transition:.2s}
.hero .tun .link:hover{color:var(--turq,#2FD4C4);border-color:var(--turq,#2FD4C4)}

/* ── Produktleiste ────────────────────────────────────────────────────────
   Eigene schmale Sektion direkt unter dem Hero, nicht mehr im Hero selbst.
   Sie ist der Übergang: erst der Satz allein auf dem Bildschirm, dann die
   drei Linien, dann die Beispielseiten. Oben und unten eine Haarlinie,
   dazwischen nichts als die drei Einträge. */
.prodband{--rand:clamp(18px,3.6vw,68px);position:relative;padding:0}
.prodband>.wrap{width:min(1240px,94vw);margin:0 auto;padding:0 var(--rand)}
.prodband .raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}
.prod{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding:30px 0;row-gap:26px}
.prod a{grid-column:span 4;text-decoration:none;color:inherit;display:block;padding-right:32px}
.prod a:hover .pn{color:var(--turq,#2FD4C4)}
.prod a:hover .pp{transform:translateX(3px)}
.pn{display:flex;align-items:center;gap:9px;margin-bottom:7px;transition:.2s;
  font-family:var(--ff-num,"Space Grotesk",Inter,system-ui);font-size:15px;font-weight:500;color:var(--ink)}
.pp{font-size:13px;color:var(--ink-dim,#6E8098);transition:transform .2s}
.pd{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0;max-width:34ch}
.pd b{font-family:var(--ff-num,"Space Grotesk",Inter,system-ui);font-weight:500;color:var(--sand,#E6D2AE)}

@media (max-width:1080px){
  .hero{min-height:auto}
  .hero>.wrap{padding:96px var(--rand) 48px;gap:48px}
  .hero h1.hero-wide{font-size:clamp(38px,8.2vw,64px)}
  .hero .raster{grid-template-columns:1fr;row-gap:24px}
  .hero .kick,.hero .ort,.hero h1.hero-wide,.hero .re{grid-column:auto}
  .prodband .raster{grid-template-columns:1fr;row-gap:24px}
  .prod a{grid-column:auto;padding-right:0}
  .hero .satz{row-gap:32px;align-items:start}
  .hero .kopf{align-items:baseline}
}

/* ── Refresh-Abschnitt: was der Regler zeigt, in zwei Spalten erklärt ──── */
.rf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px;
  max-width:860px;margin:34px auto 0}
@media(max-width:820px){.rf-grid{grid-template-columns:1fr;gap:30px}}
.rf-grid h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0 0 14px;color:var(--ink)}
.rf-liste{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.rf-liste li{position:relative;padding-left:22px;font-size:15px;line-height:1.55;color:var(--ink-soft)}
.rf-liste li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:50%;border:1.5px solid var(--turq)}
.rf-aus li::before{border-color:var(--ink-dim);background:var(--ink-dim);opacity:.5}
.rf-hinweis{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--hairline);
  font-size:14.5px;line-height:1.62;color:var(--ink-soft)}
.rf-hinweis b{color:var(--ink);font-weight:600}
.rf-hinweis a{color:var(--turq);text-decoration:none;border-bottom:1px solid rgba(47,212,196,.4)}
.rf-hinweis a:hover{border-color:var(--turq)}
#refresh .tf-fuss{max-width:860px}

/* ── Beispielseiten-Liste: auf dunklem Grund lesbar ───────────────────────
   Der Bestand setzte die Knöpfe auf weißen Grund mit dunkler Schrift. Auf
   der Nachtblau-Fläche steht das Glas dahinter — dunkle Schrift darauf ist
   nicht mehr lesbar. Titel deshalb in Weiß, Beschreibung in Türkis; das
   trennt die beiden Ebenen und hält den Kontrast auf beiden Zeilen. */
.site-btn{background:transparent;box-shadow:none;color:var(--ink)}
.site-btn b{color:#fff;font-size:15px}
.site-btn small{color:var(--turq);opacity:.92;font-size:12.5px}
.site-btn.on b{color:#fff}
.site-btn.on small{opacity:1}
.site-btn .note{color:var(--sand)}

/* ── Regler in den Stufen-Spalten ─────────────────────────────────────────
   In Stufe 1 und Stufe 2 sitzt jeweils ein Vorher/Nachher-Regler an der
   Stelle, an der vorher ein einzelnes Live-Beispiel stand. Er füllt die
   Spalte, deshalb hier kein max-width. */
.td-demo .tf{max-width:none;margin:0}
.tf-titel{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 12px;
  font-family:var(--ff-num,"Space Grotesk",Inter,system-ui);font-size:13px;
  font-weight:500;letter-spacing:.01em;color:var(--ink)}
.tf-titel span{font-family:var(--ff);font-size:12.5px;font-weight:400;color:var(--ink-dim,#6E8098)}
.tf-titel.dark{color:#f5f5f7}
.td-demo-links{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0 0;font-size:12.5px}
.td-demo-links a{color:var(--turq);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(47,212,196,.32);padding-bottom:1px}
.td-demo-links a:hover{border-color:var(--turq)}
.rf-grid{margin-top:44px}

/* ── Weiche Abschnittsfläche ──────────────────────────────────────────────
   Ersatz für die vollflächigen `background:var(--bg-2)`-Blöcke. Die rissen
   oben und unten je eine harte Kante in den Scroll und deckten das
   Wabenmuster ab. Der Schleier läuft an beiden Enden auf null. */
.sanft{position:relative}
.sanft::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.028) 20%,
    rgba(255,255,255,.028) 80%, rgba(255,255,255,0) 100%)}

/* ── Refresh: drei Fragen zum Aufklappen ──────────────────────────────────
   Ersetzt zwei offene Listen nebeneinander. Zugeklappt sind es drei Zeilen;
   wer mehr wissen will, klappt genau das auf, was ihn betrifft. */
.rf-fragen{max-width:860px;margin:44px auto 0;display:grid;gap:10px}
.rf-fragen details{border:1px solid var(--hairline);border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(4px) brightness(1.10) saturate(150%);
  backdrop-filter:blur(4px) brightness(1.10) saturate(150%)}
.rf-fragen details[open]{border-color:rgba(47,212,196,.34)}
.rf-fragen summary{cursor:pointer;list-style:none;padding:18px 22px;display:flex;
  align-items:baseline;gap:12px;flex-wrap:wrap}
.rf-fragen summary::-webkit-details-marker{display:none}
.rf-fragen summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;
  border-right:2px solid var(--turq);border-bottom:2px solid var(--turq);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s}
.rf-fragen details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.rf-fragen summary b{font-size:16px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.rf-fragen summary span{font-size:14.5px;color:var(--ink-dim)}
.rf-a{padding:0 22px 20px}
.rf-a ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rf-a li{position:relative;padding-left:20px;font-size:15px;line-height:1.55;color:var(--ink-soft)}
.rf-a li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  border-radius:50%;border:1.5px solid var(--turq)}
.rf-a p{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.rf-a a{color:var(--turq);text-decoration:none;border-bottom:1px solid rgba(47,212,196,.4)}
.rf-a a:hover{border-color:var(--turq)}
@media(max-width:600px){.rf-fragen summary{flex-direction:column;gap:5px}}

/* ══════════════════════════════════════════════════════════════════════════
   STATUSLEITER — drei Stufen, überall dieselbe Bedeutung
   --------------------------------------------------------------------------
   Anlass: Die Website hat Postfachassistent und Beleg-Sortierer verkauft,
   bevor sie als Produkt für fremde Betriebe fertig waren. Wer morgen alles
   bestellt, bekäme eine halbfertige App — und genau das darf nicht passieren.

   Deshalb trägt ab jetzt jedes Produkt sichtbar einen von drei Zuständen:

     buchbar        Heute bestellbar, mit Preis, ohne Vorbehalt.
     pilot          Läuft im eigenen Umfeld im Echtbetrieb. Kein Preis,
                    keine Bestellstrecke — nur Warteliste.
     vorbereitung   Idee mit Richtung, noch nichts, was läuft.

   Die Regel dazu: Ein Preis darf ausschließlich neben `buchbar` stehen.
   Steht irgendwo ein Preis an einem Pilotprodukt, ist das ein Fehler.
   ══════════════════════════════════════════════════════════════════════════ */
.status{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;
  border-radius:999px;font-family:var(--ff-num,"Space Grotesk",Inter,system-ui);
  font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;vertical-align:middle}
.status::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}

.status-buchbar{color:var(--turq);background:rgba(47,212,196,.10);
  box-shadow:inset 0 0 0 1px rgba(47,212,196,.28)}
.status-buchbar::before{background:var(--turq);box-shadow:0 0 0 3px rgba(47,212,196,.18)}

.status-pilot{color:var(--sand);background:rgba(230,210,174,.09);
  box-shadow:inset 0 0 0 1px rgba(230,210,174,.26)}
.status-pilot::before{background:var(--sand)}

.status-vorbereitung{color:var(--ink-dim);background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px var(--hairline)}
.status-vorbereitung::before{background:var(--ink-dim)}

/* Der Pilotblock — eine Sektion, die erklärt statt zu verkaufen. */
.pilot-kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.pilot-warum{margin:0 0 40px;padding:22px 26px;border-radius:16px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.045);border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(4px) brightness(1.12) saturate(150%);
  backdrop-filter:blur(4px) brightness(1.12) saturate(150%);
  font-size:15.5px;line-height:1.62;color:var(--ink-soft);max-width:74ch}
.pilot-warum::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sand);opacity:.8}
.pilot-warum b{color:var(--ink);font-weight:600}

/* Warteliste statt Kaufknopf */
.warte{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px}
.warte .hinweis{font-size:13.5px;color:var(--ink-dim);max-width:44ch;line-height:1.55}

/* Statuswort in der Produktleiste unter dem Hero */
.pd-status{display:inline-block;margin-top:6px;font-family:var(--ff-num,"Space Grotesk",Inter,system-ui);
  font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--sand)}
.pd-status.pd-ja{color:var(--turq)}

/* Zustandszeile unter einer Lösungs-Antwort */
.d-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  font-size:13.5px;color:var(--ink-dim)}

/* ── Kurzbegründung mit Aufklapper ────────────────────────────────────────
   Ersetzt drei Absätze Rechtfertigung. Wer es wissen will, klickt; wer
   nicht, liest eine Zeile weiter. Nicht alles muss auf der Seite erklärt
   sein — Rückfragen sind der bessere Weg. */
.pilot-kurz{margin:0 0 8px;max-width:74ch;font-size:15.5px;line-height:1.62;color:var(--ink-soft)}
.warum-knopf{display:inline-flex;align-items:center;gap:7px;margin-left:8px;
  font-family:var(--ff);font-size:14px;font-weight:600;color:var(--turq);
  background:transparent;border:0;border-bottom:1px solid rgba(47,212,196,.4);
  padding:0 0 2px;cursor:pointer;transition:.18s}
.warum-knopf:hover{border-color:var(--turq)}
.warum-knopf span{font-size:15px;line-height:1;transition:transform .2s}
.warum-knopf[aria-expanded="true"] span{transform:rotate(45deg)}
.warum-text{margin-top:16px;max-width:72ch;padding-left:18px;border-left:2px solid var(--hairline)}
.warum-text p{font-size:15px;line-height:1.65;color:var(--ink-soft);margin:0 0 12px}
.warum-text p:last-child{margin-bottom:0}
.warum-text a{color:var(--turq);text-decoration:none;border-bottom:1px solid rgba(47,212,196,.4)}


/* ══════════════════════════════════════════════════════════════════════════
   STUFEN-SEKTIONEN — die Kerbe
   --------------------------------------------------------------------------
   Nach der Handskizze. Ein Spaltenraster kann das NICHT: dort wäre jede
   Zelle gleich breit, und die erste Zeile der Überschrift könnte nicht über
   die Kante hinauslaufen. Deshalb ein umflossenes Element.

     Basis — schnell online.          ←  läuft frei über die Kante hinaus
     Oder aufgefrischt.      ┌──────────────────────┐
     Zwei Wege, ein Preis.   │                      │
     Entweder Sie brauchen   │       REGLER         │
     zügig eine Seite …      │   vorher / nachher   │
     … kostet es so wenig.   └──────────────────────┘
     ⬭ ⬭ ⬭ Merkmale         ┌──────────────────────┐
     ⬭ ⬭ ⬭                  │ Ihre Seite ist in    │
                            │ die Jahre gekommen?  │
     ────────────────────────────────────────────────
     Was ändert sich? · Was bleibt gleich? · Wann reicht das nicht?

   Der rechte Block steht im Markup VOR der Überschrift — nur so umfließt
   ihn der Text. Er hängt genau eine Überschriftenzeile tief: dadurch läuft
   Zeile 1 frei darüber, und alles darunter bricht an seiner linken Kante
   ab. Der Vorspann geht deshalb nie weiter als „aufgefrischt." — er wird
   stattdessen länger, so wie in der Skizze.
   ══════════════════════════════════════════════════════════════════════════ */
@media(min-width:1001px){
  .td-sec .td-head{--h2:clamp(32px,4.8vw,62px);max-width:none;margin-bottom:0}
  .td-sec .td-head h2{font-size:var(--h2);max-width:none;margin:10px 0 14px}
  .kicker-zeile{margin:0}

  /* ── WARUM DER BLOCK HINTER DER ÜBERSCHRIFT STEHT ────────────────────
     Drei Anläufe sind daran gescheitert, den Abstand so zu berechnen, dass
     der umflossene Block knapp UNTER der ersten Zeile beginnt. Das war der
     Denkfehler: Solange die Überschrift überhaupt in Reichweite des Blocks
     steht, hängt ihr Umbruch an Pixeln — an der Zeilenhöhe, am Schriftgrad,
     an der Fenstergröße. Ein Rundungsfehler, und „online." rutscht runter.

     Jetzt steht der Block im Markup HINTER der Überschrift. Damit ist die
     Überschrift ein abgeschlossener Block VOR dem Umfluss: Sie bekommt
     immer die volle Breite, egal wie breit der Block ist oder wo er sitzt.
     Sie KANN nicht mehr beschnitten werden.

     Nach oben neben die zweite Zeile geholt wird der Block per negativem
     Abstand. Das verschiebt ihn rein optisch — auf den Textfluss der
     Überschrift hat es keinen Einfluss mehr, weil die längst gesetzt ist. */
  /* --luft ist EIN Wert für beide Abstände: nach links zum Text und nach
     oben zur ersten Überschriftenzeile. Dadurch sitzt der Regler optisch
     gleich weit von beidem entfernt, statt oben zu kleben.
       Oberkante = Unterkante Zeile 1 + luft
     Der negative Abstand rechnet die zweite Zeile und den Abstand unter
     der Überschrift heraus. */
  .td-rechts{--luft:38px;float:right;width:50%;
    margin:calc(var(--luft) - (var(--h2) * 1.08) - 14px) 0 0 var(--luft);
    display:flex;flex-direction:column;gap:24px}
  .td-rechts .td-demo{margin:0;width:100%}

  /* Der Vorspann bricht dort, wo „Oder aufgefrischt." endet. */
  .td-sec .td-head .lead{max-width:46ch}
  .td-sec .fchips{margin-top:30px}

  /* Untere Reihe: links der Erklärkasten, rechts die Fragen. Gleiche
     Oberkante, je die halbe Breite. */
  .td-unten{clear:both;display:grid;grid-template-columns:1fr 1fr;
    gap:38px;align-items:start;margin-top:56px}
  .td-unten .td-refresh{margin:0}
  .td-unten .rf-fragen{max-width:none;margin:0}
  .td-sec .tf-fuss,.td-sec .cmp-wrap{clear:both}
  .td-sec .tf-fuss{max-width:none;margin:22px 0 0}
  .td-sec .td-head::after{content:"";display:block;clear:both}
}

/* Zwischen 1001 und 1199 px wird nicht hochgezogen: dort kann die
   Überschrift dreizeilig werden, und der Block läge sonst darüber. */
@media(min-width:1001px) and (max-width:1199px){
  .td-rechts{margin-top:14px;width:46%}
}

/* Unter 1000 px kein Umfluss — alles einfach untereinander. */
@media(max-width:1000px){
  .td-rechts{display:flex;flex-direction:column;gap:26px;margin-top:34px}
  .td-sec .td-head .lead{max-width:56ch}
  .td-sec .rf-fragen{margin-top:36px}
}

@media(max-width:1000px){
  .td-unten{display:grid;grid-template-columns:1fr;gap:30px;margin-top:38px}
}