/* ============================================================
   ACCELNESS — Design-System (Phase 1)
   Dunkel-Design only. Vanilla CSS, kein Build.
   Effekt-Disziplin: pro Fläche max. 1 Tilt + 1 Atem-Glow + 1 Sweep.
   ============================================================ */

/* ---------- 1) Tokens ---------- */
:root{
  --bg: #040c18;
  --bg-2: #081527;
  --brand: #3f9fff;
  --brand-rgb: 63,159,255;
  --brand-deep: #1f7de0;
  --brand-soft: #6db9ff;
  --accent: #ff9a3d;
  --accent-rgb: 255,154,61;
  --text: #eaf2fb;
  --text-dim: #c6d5e6;
  --line: rgba(255,255,255,.08);
  --glass: rgba(255,255,255,.04);
  --radius: 18px;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.76,0,.24,1);
  --header-h: 76px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2) Reset / Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-soft)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
::selection{background:rgba(var(--brand-rgb),.35);color:#fff}

.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
section{padding-block:clamp(3.5rem,9vw,7rem)}
.section-alt{background:var(--bg-2)}

/* ---------- 3) Typografie ---------- */
h1,h2,h3{margin:0 0 .6em;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.display{
  font-size:clamp(2.6rem,7.2vw,5.6rem);
  line-height:.98;
  letter-spacing:-.03em;
  font-weight:800;
}
.h2{font-size:clamp(1.9rem,4.5vw,3.1rem);letter-spacing:-.025em}
.h3{font-size:clamp(1.2rem,2.2vw,1.45rem)}
p{margin:0 0 1em}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--text-dim);max-width:56ch}
.dim{color:var(--text-dim)}
.eyebrow{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:1rem;
}
.grad-text{
  background:linear-gradient(100deg,#fff 20%,var(--brand-soft) 55%,var(--brand));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------- 4) Preloader (Superconscious-Stil) ---------- */
/* Ohne JS unsichtbar — html.js wird per Inline-Script gesetzt. */
#preloader{position:fixed;inset:0;z-index:1000;display:none}
.js #preloader{display:block}
.pre-panel{
  position:absolute;left:0;width:100%;height:50.5%;
  background:linear-gradient(180deg,var(--bg),#030a13);
  transition:transform .85s var(--ease-io);
  will-change:transform;
}
.pre-panel.top{top:0}
.pre-panel.bot{bottom:0;background:linear-gradient(0deg,var(--bg),#030a13)}
#preloader.done .pre-panel.top{transform:translateY(-101%)}
#preloader.done .pre-panel.bot{transform:translateY(101%)}
.pre-core{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  transition:opacity .35s ease;
}
#preloader.done .pre-core{opacity:0}
.pre-mark{font-size:clamp(1.2rem,3vw,1.7rem);font-weight:800;letter-spacing:.02em;color:#fff}
.pre-mark span{color:var(--brand)}
.pre-count{
  font-size:clamp(3.4rem,11vw,7.5rem);
  font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(180deg,#fff,rgba(var(--brand-rgb),.55));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums;
}
.pre-bar{width:min(240px,50vw);height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:1rem}
.pre-bar i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .2s linear}
/* Kurz-Fade bei Folge-Seiten (sessionStorage accelness_seen) */
#preloader.quick .pre-core{display:none}
#preloader.quick .pre-panel{transition-duration:.45s}
/* Erstbesuch: nur kurzer Logo-Fade — Zaehler/Balken/Slogan bleiben aus */
#preloader.brief .pre-count,
#preloader.brief .pre-bar,
#preloader.brief .pre-word{display:none}
#preloader.brief .pre-panel{transition-duration:.55s}
#preloader.brief .pre-mark{font-size:clamp(1.6rem,4vw,2.2rem);animation:preMarkIn .45s ease both}
@keyframes preMarkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#preloader.gone{display:none !important}

/* ---------- 5) Sticky Glass-Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(4,12,24,.4);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .35s ease,border-color .35s ease;
}
.site-header.scrolled{background:rgba(4,12,24,.78);border-color:rgba(255,255,255,.1)}
.header-row{display:flex;align-items:center;gap:1.4rem;height:var(--header-h);transition:height .3s ease}
.site-header.scrolled .header-row{height:62px}

.logo{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.15rem;letter-spacing:-.01em;color:#fff;position:relative;z-index:3}
.logo:hover{color:#fff}
.logo .mark{width:33px;height:26px;flex:none} /* 40:32-Verhaeltnis, "Al"-Marke */
.logo b{color:#fff;font-weight:800}
.logo span{color:var(--brand);font-weight:800}

.site-nav{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
.site-nav a{position:relative;color:var(--text-dim);font-weight:600;font-size:.95rem;padding-block:.3rem}
.site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.site-nav a:hover{color:var(--text)}
.site-nav a:hover::after{transform:scaleX(1)}
.site-nav a[aria-current="page"]{color:var(--text)}
.site-nav a[aria-current="page"]::after{transform:scaleX(1)}

.lang-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;gap:2px;position:relative;z-index:3}
.lang-btn{
  border:0;background:transparent;color:var(--text-dim);
  font-size:.78rem;font-weight:700;letter-spacing:.06em;
  padding:.3rem .65rem;border-radius:999px;transition:background .25s,color .25s;
}
.lang-btn.on{background:rgba(var(--brand-rgb),.2);color:var(--text)}
.lang-btn:hover{color:var(--text)}

/* Seit die Seite drei Sprachen anbietet (DE/EN/ES), braucht der Umschalter auf
   schmalen Handys weniger Platz — sonst schiebt der dritte Knopf das Menue-Symbol
   aus dem Bild. Ab 400 px Breite bleibt alles wie bisher. */
@media (max-width: 400px){
  /* Der Platz fuer den dritten Sprachknopf kommt aus der Polsterung, nicht mehr
     aus der Schriftgroesse: 11,5 px lagen unter der Lesbarkeitsgrenze von 12 px
     und ergaben 25 x 27 px grosse Ziele. Am 01.09.2026 nachgemessen. */
  .lang-btn{padding:.34rem .42rem;font-size:.75rem;letter-spacing:.02em}
}
@media (max-width: 360px){
  /* Unter 360 px reicht auch das nicht: Wortlogo + drei Knoepfe + Menue-Symbol
     ergaben 33 px Ueberstand, das Symbol schrumpfte von 44 auf 34 px. Auf sehr
     schmalen Geraeten traegt die Bildmarke die Marke allein — das aria-label
     des Logos bleibt und nennt weiterhin "Accelness". */
  .logo > span{display:none}
}

.header-cta{white-space:nowrap;position:relative;z-index:3}

/* Burger (nur mobil sichtbar) */
.burger{
  display:none;position:relative;z-index:3;
  width:44px;height:44px;border:1px solid var(--line);border-radius:12px;
  background:var(--glass);place-items:center;
}
.burger i,.burger i::before,.burger i::after{
  content:"";display:block;width:20px;height:2px;background:var(--text);
  border-radius:2px;position:relative;transition:transform .35s var(--ease-out),opacity .25s;
}
.burger i::before{position:absolute;top:-6px}
.burger i::after{position:absolute;top:6px}
body.nav-open .burger i{transform:rotate(45deg)}
body.nav-open .burger i::before{transform:rotate(-90deg);top:0}
body.nav-open .burger i::after{opacity:0}

/* ---------- 6) Hero (Ken-Burns + Parallax + Zeilen-Reveal) ---------- */
/* Startversatz der Reveal-Zeilen — an einer Stelle, damit die Messung
   (docs/messung-block-06-07.mjs) denselben Wert liest wie das Layout. */
:root{--lr-start:115%}
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  /* unten 7rem statt 5rem: der .scroll-hint ist 72px hoch und sitzt bei
     bottom:1.6rem — 5rem Polster liessen ihn in die Pillen/Buttons ragen
     (gemessen 02.09.2026: -17,6px Luft auf /accelnexus/, /crm/, /ki-ready/ u.a.) */
  padding-block:calc(var(--header-h) + 3rem) 7rem;
  overflow:hidden;
  isolation:isolate;
}
.hero-media{position:absolute;inset:-12% 0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover}
.kenburns{animation:kenburns 18s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-shade{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(0deg,var(--bg) 4%,rgba(4,12,24,.55) 45%,rgba(4,12,24,.25) 100%),
    radial-gradient(90% 60% at 30% 80%,rgba(4,12,24,.5),transparent);
}
.hero-inner{position:relative}
.hero .lead{margin-top:1.4rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}

/* Zeilenweiser Staffel-Reveal aus Clip-Masken */
/* Die Reserve sitzt am .lr-inner, nicht an der Klammer: so waechst mit dem
   Clip-Bereich auch die Malflaeche von .grad-text (background-clip:text) —
   sonst bekaeme die Verlaufszeile unten eine harte Kante.
   Gemessen 02.09.2026 (system-ui/Segoe UI 800): fontBoundingBoxDescent
   = .2455em, Oberkante von AeOeUe ragt .029em ueber die Zeilenbox
   (line-height:.98). Reserve .28em unten / .06em oben, per negativem
   Aussenabstand an der Klammer exakt wieder herausgerechnet — der
   Zeilenfluss bleibt damit unveraendert. */
.lr{display:block;overflow:hidden;margin-block:-.06em -.28em}
.lr-inner{display:inline-block;padding-block:.06em .28em}
.js .lr-inner{
  transform:translateY(var(--lr-start));
  transition:transform .95s var(--ease-out);
  transition-delay:var(--d,0s);
  will-change:transform;
}
.js .hero.in .lr-inner{transform:translateY(0)}
.js .hero-fade{opacity:0;transform:translateY(18px);transition:opacity .8s ease var(--d,.5s),transform .8s var(--ease-out) var(--d,.5s)}
.js .hero.in .hero-fade{opacity:1;transform:none}

/* Scroll-Indikator */
.scroll-hint{
  position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:var(--text-dim);font-size:.78rem;letter-spacing:.25em;text-transform:uppercase;
}
.scroll-hint::after{
  content:"";width:1px;height:44px;
  background:linear-gradient(180deg,var(--brand),transparent);
  animation:hintDrop 2.2s var(--ease-io) infinite;
  transform-origin:top;
}
@keyframes hintDrop{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 7) Bild-Reveal (Clip-Path zieht auf) ---------- */
.img-reveal{border-radius:var(--radius);overflow:hidden;position:relative}
.js .img-reveal{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.15s var(--ease-io);
  will-change:clip-path;
}
.js .img-reveal img{transform:scale(1.16);transition:transform 1.5s var(--ease-out) .1s;will-change:transform}
.js .img-reveal.in{clip-path:inset(0 0 0 0)}
.js .img-reveal.in img{transform:scale(1)}

/* Zweispaltiger Medienblock */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}

/* ---------- 8) Infinite-Marquee (nahtlos, 2× dupliziert, -50 %) ---------- */
.marquee{
  overflow:hidden;padding-block:1.4rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex;width:max-content;
  animation:marquee 30s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-set{display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem;flex:none}
.marquee-set span{
  font-size:clamp(1rem,2vw,1.3rem);font-weight:700;letter-spacing:.04em;
  color:var(--text-dim);white-space:nowrap;
}
.marquee-set i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- 9) Karten (Glas + Spotlight + Tilt) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card{
  position:relative;overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),
    linear-gradient(160deg,rgba(var(--brand-rgb),.07),transparent 55%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:1.8rem 1.6rem;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:transform .25s ease,border-color .35s ease,box-shadow .35s ease;
}
.card::before{ /* Maus-Spotlight */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(var(--brand-rgb),.13),transparent 65%);
  opacity:0;transition:opacity .35s ease;
}
.card:hover::before{opacity:1}
.card:hover{
  --lift:-5px;
  border-color:rgba(var(--brand-rgb),.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 22px 55px -22px rgba(var(--brand-rgb),.4);
}
.card h3{margin-top:1.1rem}
.card p{color:var(--text-dim);margin-bottom:0}
.card .card-link{display:inline-block;margin-top:1rem;font-weight:700;font-size:.92rem}

/* Icon-Kachel: hinterleuchtet, atmender Glow (KEINE Emojis) */
.ico-tile{
  width:56px;height:56px;border-radius:16px;
  display:grid;place-items:center;color:var(--brand);
  background:linear-gradient(180deg,rgba(var(--brand-rgb),.17),rgba(var(--brand-rgb),.05));
  border:1px solid rgba(var(--brand-rgb),.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  animation:icoGlow 4.5s ease-in-out infinite;
  animation-delay:var(--gd,0s);
  transition:transform .3s var(--ease-out);
}
.card:hover .ico-tile{transform:scale(1.07)}
.ico-tile svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes icoGlow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 rgba(var(--brand-rgb),0)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 26px -4px rgba(var(--brand-rgb),.45)}
}

/* ---------- 10) Zahlen-Band ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  padding-block:clamp(2rem,5vw,3.5rem);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.stats::before,.stats::after{
  content:"";position:absolute;width:280px;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--brand-rgb),.85) 30%,#cfe6ff 50%,rgba(var(--brand-rgb),.85) 70%,transparent);
  filter:drop-shadow(0 0 7px rgba(var(--brand-rgb),.75));
}
.stats::before{top:0;animation:statLineRtl 7s linear infinite}
.stats::after{bottom:0;animation:statLineLtr 7s linear infinite;animation-delay:3.5s}
@keyframes statLineRtl{from{left:100%}to{left:-280px}}
@keyframes statLineLtr{from{left:-280px}to{left:100%}}
@media (prefers-reduced-motion:reduce){.stats::before,.stats::after{animation:none;content:none}}
.stat{text-align:center}
.stat b{
  display:block;font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;line-height:1;
  color:var(--accent);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.stat .suffix{color:var(--accent);font-size:.6em;font-weight:800}
.stat > span{display:block;margin-top:.5rem;color:var(--text-dim);font-size:.92rem}
.stat b span{display:inline;margin:0;color:var(--accent);font-size:inherit}
.stat b span.suffix{font-size:.6em}
.stat .ico-tile{margin:0 auto 1rem}
.stat:hover .ico-tile{transform:scale(1.07)}
.stat-t{display:block;font-size:1.25rem;font-weight:800;letter-spacing:-.01em}

/* Endlos-Ticker unter dem Zahlen-Band */
.ticker{
  overflow:hidden;border-bottom:1px solid var(--line);padding:1.35rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-track{display:flex;width:max-content;animation:tickerMove 44s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{
  white-space:nowrap;color:var(--text-dim);font-size:1.18rem;padding:0 .2rem;
  display:flex;align-items:center;
}
.ticker-track span::after{content:"✦";color:var(--brand);font-size:.7em;padding:0 1.4rem;opacity:.8}
@keyframes tickerMove{to{transform:translateX(-50%)}}

/* ---- Problem-Blasen (PAS): anklicken → zerplatzen → Lösung ---- */
.pop-field{position:relative;min-height:440px}
.pop-item{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s)}
.pop-bubble{
  width:100%;height:100%;border-radius:50%;cursor:pointer;padding:.6rem;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font:inherit;font-size:.92rem;font-weight:700;color:#eaf2fb;letter-spacing:.01em;
  border:1px solid rgba(var(--brand-rgb),.45);
  background:radial-gradient(circle at 32% 28%,rgba(var(--brand-rgb),.34),rgba(var(--brand-rgb),.10) 55%,rgba(4,12,24,.25));
  box-shadow:0 0 26px rgba(var(--brand-rgb),.22),inset 0 0 22px rgba(var(--brand-rgb),.12);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:popFloat var(--fs,7s) ease-in-out var(--fd,0s) infinite;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.pop-bubble:hover{box-shadow:0 0 38px rgba(var(--brand-rgb),.45),inset 0 0 26px rgba(var(--brand-rgb),.2)}
.pop-bubble::before{content:"";position:absolute;top:14%;left:20%;width:26%;height:16%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.55),transparent 70%);pointer-events:none}
@keyframes popFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.pop-item.bursting .pop-bubble{animation:popBurst .38s var(--ease-out) forwards}
@keyframes popBurst{
  40%{transform:scale(1.22);opacity:1;filter:brightness(1.6)}
  100%{transform:scale(1.55);opacity:0;filter:brightness(2)}
}
.pop-solution{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;text-align:center;padding:.7rem;border-radius:22px;
  border:1px solid rgba(var(--brand-rgb),.55);
  background:linear-gradient(160deg,rgba(var(--brand-rgb),.14),rgba(4,12,24,.6));
  box-shadow:0 0 30px rgba(var(--brand-rgb),.28),inset 0 0 18px rgba(var(--brand-rgb),.1);
  color:var(--text-dim);font-size:.85rem;line-height:1.45;
  opacity:0;transform:scale(.6);pointer-events:none;
}
.pop-item.solved .pop-solution{pointer-events:auto}
.pop-item.solved .pop-solution{opacity:1;transform:scale(1);transition:opacity .35s var(--ease-out) .25s,transform .45s var(--ease-out) .25s}
.pop-solution svg{width:26px;height:26px;fill:none;stroke:#3ddc84;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none;filter:drop-shadow(0 0 6px rgba(61,220,132,.5))}
.pop-hint{position:absolute;left:0;right:0;bottom:-1.6rem;text-align:center;color:var(--text-dim);opacity:.65;font-size:.82rem;margin:0}
/* 3D-Modus (pas3d.js aktiv): WebGL-Blasen ersetzen die CSS-Blasen,
   die Loesungs-Karten bleiben an ihren .pop-item-Positionen nutzbar */
.pas3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pas3d-on .pop-item{pointer-events:none}
.pas3d-on .pop-solution{z-index:1}
.pas3d-on .pop-bubble{visibility:hidden;animation:none}

/* ---- Beleg → KI → Excel: animierte Pipeline (ConBono-Case) ---- */
.pipe{position:relative;display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:1.5rem 0;min-height:440px;justify-content:center}
.pipe-stage{display:flex;flex-direction:column;align-items:center;gap:.55rem}
.pipe-label{color:var(--text-dim);font-size:.9rem;text-align:center;max-width:260px}
/* Karten (Beleg + Excel) */
.pipe-card{position:relative;width:190px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(var(--brand-rgb),.35);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(4,12,24,.55));
  box-shadow:0 8px 30px rgba(0,0,0,.35),inset 0 0 20px rgba(var(--brand-rgb),.06);
  padding:16px 18px}
/* Beleg */
.pipe-card.doc{height:118px}
.doc-line{display:block;height:7px;border-radius:4px;background:rgba(198,213,230,.4);margin-bottom:9px}
.doc-line.l1{width:55%}.doc-line.l2{width:80%}.doc-line.l3{width:68%}.doc-line.l4{width:74%}
.doc-total{display:block;height:10px;width:40%;border-radius:4px;background:rgba(var(--brand-rgb),.7);margin-top:2px}
/* Sucher-Ecken (Fokussieren wie in einer Scan-App) */
.vf{position:absolute;inset:8px;pointer-events:none;opacity:0;transform:scale(1.14);
  animation:pipeVf 8s var(--ease-out) infinite}
.vf i{position:absolute;width:16px;height:16px;border:0 solid rgba(207,230,255,.95);
  filter:drop-shadow(0 0 6px rgba(var(--brand-rgb),.8))}
.vf .c1{left:0;top:0;border-left-width:2px;border-top-width:2px;border-top-left-radius:5px}
.vf .c2{right:0;top:0;border-right-width:2px;border-top-width:2px;border-top-right-radius:5px}
.vf .c3{left:0;bottom:0;border-left-width:2px;border-bottom-width:2px;border-bottom-left-radius:5px}
.vf .c4{right:0;bottom:0;border-right-width:2px;border-bottom-width:2px;border-bottom-right-radius:5px}
@keyframes pipeVf{0%{opacity:0;transform:scale(1.14)}4%{opacity:1}10%{transform:scale(1)}14%{opacity:1;transform:scale(1)}18%,100%{opacity:0;transform:scale(1)}}
/* Kamera-Blitz */
.flash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0;
  animation:pipeFlash 8s ease-out infinite}
@keyframes pipeFlash{0%,13%{opacity:0}14.5%{opacity:.9}20%,100%{opacity:0}}
.scan{position:absolute;left:0;right:0;height:24px;top:-24px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(var(--brand-rgb),.35),rgba(207,230,255,.85),rgba(var(--brand-rgb),.35),transparent);
  box-shadow:0 0 16px rgba(var(--brand-rgb),.7);
  animation:pipeScan 8s cubic-bezier(.5,0,.5,1) infinite}
@keyframes pipeScan{0%,18%{top:-24px;opacity:0}22%{opacity:1}42%{top:118px;opacity:1}48%,100%{top:118px;opacity:0}}
/* KI-Kern */
.ai-wrap{position:relative}
.ai-frag{position:absolute;padding:.18rem .5rem;border-radius:8px;white-space:nowrap;
  font-family:"Consolas","SFMono-Regular",Menlo,monospace;font-size:.8rem;color:#cfe6ff;
  border:1px solid rgba(var(--brand-rgb),.45);background:rgba(4,12,24,.7);
  box-shadow:0 0 12px rgba(var(--brand-rgb),.35);opacity:0;pointer-events:none}
.ai-frag.f1{right:calc(100% + 10px);top:6px;animation:pipeFrag 8s ease infinite}
.ai-frag.f2{left:calc(100% + 10px);top:32px;animation:pipeFrag2 8s ease infinite}
.ai-frag.f3{right:calc(100% + 14px);bottom:2px;animation:pipeFrag3 8s ease infinite}
@keyframes pipeFrag{0%,32%{opacity:0;transform:translateY(4px)}36%{opacity:1;transform:translateY(0)}44%{opacity:1}48%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes pipeFrag2{0%,40%{opacity:0;transform:translateY(4px)}44%{opacity:1;transform:translateY(0)}52%{opacity:1}56%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes pipeFrag3{0%,48%{opacity:0;transform:translateY(4px)}52%{opacity:1;transform:translateY(0)}60%{opacity:1}64%,100%{opacity:0;transform:translateY(-4px)}}
.ai-core{position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  color:#eaf2fb;font-weight:800;letter-spacing:.04em;font-size:1.2rem;
  border:1px solid rgba(var(--brand-rgb),.5);
  background:radial-gradient(circle at 32% 28%,rgba(var(--brand-rgb),.5),rgba(var(--brand-rgb),.12) 60%,rgba(4,12,24,.4));
  box-shadow:0 0 30px rgba(var(--brand-rgb),.4),inset 0 0 24px rgba(var(--brand-rgb),.2);
  animation:pipePulse 2.4s ease-in-out infinite}
.ai-core::before,.ai-core::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(var(--brand-rgb),.5);animation:pipeRing 2.4s ease-out infinite}
.ai-core::after{animation-delay:1.2s}
.ai-core span{position:relative;z-index:1}
@keyframes pipePulse{0%,100%{box-shadow:0 0 24px rgba(var(--brand-rgb),.32),inset 0 0 20px rgba(var(--brand-rgb),.16)}50%{box-shadow:0 0 44px rgba(var(--brand-rgb),.6),inset 0 0 28px rgba(var(--brand-rgb),.28)}}
@keyframes pipeRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
/* Fluss-Punkte zwischen den Stationen */
.pipe-flow{position:relative;width:2px;height:46px;border-radius:2px;
  background:linear-gradient(180deg,rgba(var(--brand-rgb),.15),rgba(var(--brand-rgb),.5),rgba(var(--brand-rgb),.15))}
.pipe-flow i{position:absolute;left:50%;top:0;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:#cfe6ff;box-shadow:0 0 10px rgba(var(--brand-rgb),.9);
  animation:pipeDrop 1.8s linear infinite}
.pipe-flow i:nth-child(2){animation-delay:.6s}
.pipe-flow i:nth-child(3){animation-delay:1.2s}
@keyframes pipeDrop{0%{top:-4px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:46px;opacity:0}}
/* Excel: Zeilen tippen sich Ziffer für Ziffer ein */
.pipe-card.xls{height:142px}
.xls-head{display:block;height:9px;width:100%;border-radius:4px;background:rgba(var(--brand-rgb),.55);margin-bottom:9px}
.xls-row,.xls-sum{display:block;overflow:hidden;white-space:pre;width:0;opacity:0;
  font-family:"Consolas","SFMono-Regular",Menlo,monospace;font-size:.66rem;line-height:1;
  color:#b8cbe0;margin-bottom:7px}
.xls-row.r1{animation:pipeType1 8s steps(18,end) infinite}
.xls-row.r2{animation:pipeType2 8s steps(18,end) infinite}
.xls-row.r3{animation:pipeType3 8s steps(18,end) infinite}
.xls-row.r4{animation:pipeType4 8s steps(18,end) infinite}
@keyframes pipeType1{0%,46%{width:0;opacity:0}47%{opacity:1;width:0}53%{width:100%}96%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@keyframes pipeType2{0%,53%{width:0;opacity:0}54%{opacity:1;width:0}60%{width:100%}96%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@keyframes pipeType3{0%,60%{width:0;opacity:0}61%{opacity:1;width:0}67%{width:100%}96%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@keyframes pipeType4{0%,67%{width:0;opacity:0}68%{opacity:1;width:0}74%{width:100%}96%{width:100%;opacity:1}100%{width:100%;opacity:0}}
/* grüne Summenzeile — erscheint zusammen mit dem Häkchen */
.xls-sum{color:#3ddc84;font-weight:700;margin-bottom:0;border-top:1px solid rgba(61,220,132,.35);padding-top:6px;
  text-shadow:0 0 8px rgba(61,220,132,.35);animation:pipeSum 8s ease infinite}
@keyframes pipeSum{0%,78%{width:0;opacity:0}79%{opacity:1;width:0}84%{width:100%;opacity:1}96%{width:100%;opacity:1}100%{width:100%;opacity:0}}
.xls-badge{position:absolute;right:10px;bottom:10px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:rgba(61,220,132,.16);border:1px solid rgba(61,220,132,.6);opacity:0;transform:scale(.5);
  animation:pipeDone 8s ease infinite}
.xls-badge svg{width:14px;height:14px;fill:none;stroke:#3ddc84;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes pipeDone{0%,78%{opacity:0;transform:scale(.5)}84%{opacity:1;transform:scale(1.15)}88%,96%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
/* Eingangs-Stapel (Fleißarbeit / verstreute Infos) */
.in-stack{display:flex;flex-direction:column;gap:8px;width:200px}
.in-item{display:flex;align-items:center;gap:9px;padding:.45rem .65rem;border-radius:10px;
  border:1px solid rgba(var(--brand-rgb),.32);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(4,12,24,.5));
  color:#cfe6ff;font-size:.76rem;opacity:0;transform:translateX(-16px)}
.in-item svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.in-item.i1{animation:pipeIn1 8s var(--ease-out) infinite}
.in-item.i2{animation:pipeIn2 8s var(--ease-out) infinite}
.in-item.i3{animation:pipeIn3 8s var(--ease-out) infinite}
@keyframes pipeIn1{0%{opacity:0;transform:translateX(-16px)}5%{opacity:1;transform:translateX(0)}92%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
@keyframes pipeIn2{0%,6%{opacity:0;transform:translateX(-16px)}11%{opacity:1;transform:translateX(0)}92%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
@keyframes pipeIn3{0%,12%{opacity:0;transform:translateX(-16px)}17%{opacity:1;transform:translateX(0)}92%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
/* Chaos-Variante: schief liegende Zettel */
.in-stack.chaos .t1{transform:translateX(-16px) rotate(-2.5deg)}
.in-stack.chaos .t2{transform:translateX(-16px) rotate(1.8deg)}
.in-stack.chaos .t3{transform:translateX(-16px) rotate(-1.4deg)}
.in-stack.chaos .t1{animation-name:pipeChaos1}
.in-stack.chaos .t2{animation-name:pipeChaos2}
.in-stack.chaos .t3{animation-name:pipeChaos3}
@keyframes pipeChaos1{0%{opacity:0;transform:translateX(-16px) rotate(-2.5deg)}5%{opacity:1;transform:translateX(0) rotate(-2.5deg)}92%{opacity:1;transform:translateX(0) rotate(-2.5deg)}100%{opacity:0;transform:translateX(0) rotate(-2.5deg)}}
@keyframes pipeChaos2{0%,6%{opacity:0;transform:translateX(-16px) rotate(1.8deg)}11%{opacity:1;transform:translateX(0) rotate(1.8deg)}92%{opacity:1;transform:translateX(0) rotate(1.8deg)}100%{opacity:0;transform:translateX(0) rotate(1.8deg)}}
@keyframes pipeChaos3{0%,12%{opacity:0;transform:translateX(-16px) rotate(-1.4deg)}17%{opacity:1;transform:translateX(0) rotate(-1.4deg)}92%{opacity:1;transform:translateX(0) rotate(-1.4deg)}100%{opacity:0;transform:translateX(0) rotate(-1.4deg)}}
/* Vorteils-Chips (Zeit, Geld, Fehlerfrei …) */
.ben-stack{display:flex;flex-direction:column;gap:8px;width:200px}
.ben-item{display:flex;align-items:center;gap:9px;padding:.45rem .65rem;border-radius:10px;
  border:1px solid rgba(61,220,132,.45);
  background:linear-gradient(160deg,rgba(61,220,132,.1),rgba(4,12,24,.55));
  box-shadow:0 0 14px rgba(61,220,132,.12);
  color:#d9f5e6;font-size:.76rem;font-weight:600;opacity:0;transform:scale(.88)}
.ben-item svg{width:15px;height:15px;flex:none;fill:none;stroke:#3ddc84;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(61,220,132,.5))}
.ben-item.b1{animation:pipeBen1 8s var(--ease-out) infinite}
.ben-item.b2{animation:pipeBen2 8s var(--ease-out) infinite}
.ben-item.b3{animation:pipeBen3 8s var(--ease-out) infinite}
@keyframes pipeBen1{0%,46%{opacity:0;transform:scale(.88)}51%{opacity:1;transform:scale(1)}97.5%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes pipeBen2{0%,53%{opacity:0;transform:scale(.88)}58%{opacity:1;transform:scale(1)}97.5%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes pipeBen3{0%,60%{opacity:0;transform:scale(.88)}65%{opacity:1;transform:scale(1)}97.5%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
/* „schneller"-Chip */
.pipe-fast{margin-top:.4rem;padding:.32rem .9rem;border-radius:999px;font-size:.82rem;font-weight:700;color:#cfe6ff;
  border:1px solid rgba(var(--brand-rgb),.4);background:rgba(var(--brand-rgb),.1);
  box-shadow:0 0 18px rgba(var(--brand-rgb),.2)}
/* Waagerechte Pipeline-Variante (volle Sektionsbreite, z. B. Referenzen).
   Nur ab 861px — darunter greift automatisch die vertikale Basis. */
@media (min-width:861px){
  .pipe-h{flex-direction:row;align-items:center;justify-content:center;gap:1.6rem;min-height:0;padding:3.2rem 0 1.2rem}
  .pipe-h .pipe-stage{align-self:stretch;justify-content:center}
  .pipe-h .in-stack,.pipe-h .ben-stack{width:250px}
  .pipe-h .in-item,.pipe-h .ben-item{font-size:.84rem;padding:.55rem .75rem}
  .pipe-h .pipe-flow{width:76px;height:2px;
    background:linear-gradient(90deg,rgba(var(--brand-rgb),.15),rgba(var(--brand-rgb),.5),rgba(var(--brand-rgb),.15))}
  .pipe-h .pipe-flow i{left:0;top:50%;margin-left:0;margin-top:-3.5px;animation-name:pipeDropH}
  /* KI-Fragmente wandern nach oben, damit sie seitlich nicht in die Nachbar-Stationen laufen */
  .pipe-h .ai-frag.f1{right:52%;top:auto;bottom:calc(100% + 10px)}
  .pipe-h .ai-frag.f2{left:52%;top:auto;bottom:calc(100% + 10px)}
  .pipe-h .ai-frag.f3{right:30%;bottom:calc(100% + 42px)}
  .pipe-h .pipe-fast{position:absolute;left:50%;transform:translateX(-50%);bottom:-1.4rem;margin-top:0}
}
@keyframes pipeDropH{0%{left:-4px;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:76px;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .scan,.vf,.flash,.ai-core,.ai-core::before,.ai-core::after,.ai-frag,.pipe-flow i,.xls-row,.xls-sum,.xls-badge,.in-item,.ben-item{animation:none}
  .xls-row,.xls-sum{opacity:1;width:100%}.xls-badge{opacity:1;transform:none}.scan,.vf,.flash,.ai-frag{display:none}
  .in-item,.ben-item{opacity:1;transform:none}
}
@media (max-width:860px){
  .pop-field{min-height:0;margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
  .pop-item{position:relative;left:auto;top:auto}
  .pop-hint{position:static;margin-top:.4rem;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .pop-bubble{animation:none}
  .pop-item.bursting .pop-bubble{animation:none;opacity:0}
  .pop-item.solved .pop-solution{transition:none}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .ticker-track span[aria-hidden]{display:none}
}

/* ---------- 11) Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.75rem;border-radius:999px;
  font-weight:700;font-size:.98rem;letter-spacing:.01em;
  border:0;text-align:center;
  transition:transform .25s var(--ease-out),box-shadow .3s ease,border-color .3s ease,color .3s ease,background .3s ease;
}
.btn-primary{
  position:relative;overflow:hidden;color:#04101f;
  background:linear-gradient(135deg,var(--brand-soft),var(--brand) 45%,var(--brand-deep));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 6px rgba(4,12,24,.25),
    0 12px 32px -12px rgba(var(--brand-rgb),.6);
}
.btn-primary::after{ /* Glanz-Sweep */
  content:"";position:absolute;top:0;bottom:0;left:-75%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .6s ease;
}
.btn-primary:hover{
  color:#04101f; /* Link-Hover-Regel (a:hover) darf die dunkle Schrift nicht überschreiben */
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 6px rgba(4,12,24,.25),
    0 16px 42px -12px rgba(var(--brand-rgb),.75);
}
.btn-primary:hover::after{left:130%}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{
  color:var(--text);background:transparent;
  border:1px solid rgba(255,255,255,.22);
}
.btn-ghost:hover{border-color:rgba(var(--brand-rgb),.6);color:#fff;transform:translateY(-2px)}

/* ---------- 12) CTA-Band (datenwellen.webp + Atem-Glow) ---------- */
.cta-band{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:24px;border:1px solid rgba(var(--brand-rgb),.3);
  padding:clamp(3rem,7vw,5.5rem) clamp(1.5rem,5vw,4rem);
  text-align:center;
  animation:brandGlow 5s ease-in-out infinite;
}
.cta-band .cta-bg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 90% at 50% 100%,rgba(4,12,24,.25),transparent),
    linear-gradient(180deg,rgba(4,12,24,.72),rgba(4,12,24,.45));
}
.cta-band .lead{margin-inline:auto}
.cta-band .hero-actions{justify-content:center}
@keyframes brandGlow{
  0%,100%{box-shadow:0 0 45px -20px rgba(var(--brand-rgb),.45)}
  50%{box-shadow:0 0 80px -14px rgba(var(--brand-rgb),.8)}
}

/* ---------- 13) Preis-Karten ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
.price-card{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  padding:2rem 1.7rem;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:transform .25s ease,border-color .35s ease,box-shadow .35s ease;
}
.price-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(var(--brand-rgb),.12),transparent 65%);
  opacity:0;transition:opacity .35s ease;
}
.price-card:hover::before{opacity:1}
.price-card:hover{--lift:-5px;border-color:rgba(var(--brand-rgb),.35)}
.price-card.featured{
  border-color:rgba(var(--brand-rgb),.45);
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),
    linear-gradient(160deg,rgba(var(--brand-rgb),.12),transparent 60%);
  animation:brandGlow 5s ease-in-out infinite;
}
.price-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  padding:.28rem .9rem;border-radius:999px;white-space:nowrap;
  font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#04101f;background:linear-gradient(135deg,var(--brand-soft),var(--brand));
}
.price-card .price{
  font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1;
  margin:.8rem 0 .2rem;
}
.price-card .price small{font-size:.42em;font-weight:600;color:var(--text-dim);letter-spacing:0}
.price-list{list-style:none;margin:1.2rem 0 1.6rem;padding:0;display:grid;gap:.6rem;color:var(--text-dim);font-size:.95rem}
.price-list li{display:flex;gap:.6rem;align-items:flex-start}
.price-list li::before{
  content:"";flex:none;width:16px;height:16px;margin-top:.22em;border-radius:50%;
  background:rgba(var(--brand-rgb),.18);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%233f9fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
.price-card .btn{margin-top:auto}

/* 5-Kachel-Raster (Preise): oben 3 Kacheln, unten 2 breitere ueber die volle Zeile */
.price-grid.grid-5{grid-template-columns:repeat(6,1fr)}
.price-grid.grid-5 .price-card{grid-column:span 2}
.price-grid.grid-5 .price-card.row2{grid-column:span 3}
@media (max-width:980px){
  .price-grid.grid-5{grid-template-columns:repeat(2,1fr)}
  .price-grid.grid-5 .price-card,
  .price-grid.grid-5 .price-card.row2{grid-column:auto}
}
@media (max-width:640px){
  .price-grid.grid-5{grid-template-columns:1fr}
}

/* ---------- 13c) Preise: Hero-Scroll-Buehne (Blase mit Al-Logo, Hubtown-Dramaturgie) ----------
   Standard (kein JS / kein WebGL / reduced-motion): normaler Hero mit H1 + Text.
   Erst wenn preise3d.js erfolgreich startet, schaltet es .has-preise3d frei:
   dann wird der Abschnitt zur gepinnten Scroll-Buehne (H1 unten links, Text
   rechts, Animation dahinter) und die Kacheln warten auf das Zerplatzen. */
#stage3d .stage-pin{width:100%;position:relative}
#stage3d .stage-copy{position:relative}
#preise3d{display:none}
.has-preise3d #preise3d{display:block;position:absolute;inset:0;z-index:-1}
.has-preise3d #preise3d canvas{width:100%;height:100%;display:block}
.has-preise3d #stage3d{
  display:block;height:260vh;min-height:0;padding:0;
  overflow:visible; /* WICHTIG: .hero hat overflow:hidden — das wuerde position:sticky im Pin toeten */
  margin-bottom:-88vh; /* Kacheln schieben sich schon waehrend des Zerplatzens ins Bild */
}
.has-preise3d #stage3d .stage-pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:flex-end;
  /* unten 7rem wie im normalen Hero: der .scroll-hint haengt hier am
     .stage-pin, nicht am .hero — mit 5,5rem ragte er in den Lead-Text
     (gemessen 02.09.2026: -1,6px bei 1024/1280/1920 px). */
  padding:calc(var(--header-h) + 2rem) 0 7rem;
}
.has-preise3d #stage3d .stage-copy{
  display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;width:100%;
}
.has-preise3d #stage3d .lead{max-width:340px;margin:0 0 .5rem}
.has-preise3d #pakete{background:transparent;position:relative;z-index:1}
/* Der seitliche Reveal-Versatz (translateX ±90px) darf die Seitenbreite nie
   aufblaehen — auch auf Desktop nicht (11px-Ueberlauf bei 1280px behoben) */
#pakete{overflow-x:clip}
/* Block 05 (02.09.2026): dieselbe Klammer ueberall, wo Preiskarten stehen.
   /accelnexus/ (#flatrate, #vergleich), /ki-ready/ (#vergleich) und /preise/ (#accelnexus,
   #ki-ready) hatten keine — der Vor-Reveal-Zustand (translateX +90px) machte die
   Seite 18 px (1280) bis 58 px (1024) breiter als das Fenster; nur
   body{overflow-x:hidden} verbarg das. Eigene Regel statt Selektorliste an
   #pakete, damit Browser ohne :has() die alte Regel behalten. Nur waagerecht:
   senkrecht bleibt overflow sichtbar, Hover-Lift und Glow werden nicht beschnitten. */
section:has(.price-card),section:has([data-reveal][data-dir]){overflow-x:clip}
/* Kacheln bleiben verborgen, bis die Blase zerplatzt ist (preise3d.js setzt stage-done) */
.has-preise3d:not(.stage-done) #pakete [data-reveal]{
  opacity:0 !important;
  transform:var(--from,translateY(26px)) !important;
  transition:none !important;
}
@media (max-width:900px){
  .has-preise3d #stage3d{height:200vh;margin-bottom:-70vh}
  /* 7rem statt 4,5rem — sonst liegt der Scroll-Hinweis auf dem Lead (-17,6px) */
  .has-preise3d #stage3d .stage-pin{align-items:flex-end;padding-bottom:7rem}
  .has-preise3d #stage3d .stage-copy{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .has-preise3d #stage3d .lead{max-width:560px}
}

/* Preiskacheln setzen sich aus vier Richtungen zusammen (faellt ohne JS/bei
   reduced-motion auf die bestehenden Reveal-Regeln zurueck) */
.js [data-reveal][data-dir="left"]{--from:translateX(-90px);transform:translateX(-90px)}
.js [data-reveal][data-dir="right"]{--from:translateX(90px);transform:translateX(90px)}
.js [data-reveal][data-dir="top"]{--from:translateY(-90px);transform:translateY(-90px)}
.js [data-reveal][data-dir="bottom"]{--from:translateY(90px);transform:translateY(90px)}

/* ---------- 14) FAQ (native details/summary, animiertes Plus) ---------- */
.faq{display:grid;gap:.8rem;max-width:760px}
.faq-item{
  border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.03);
  transition:border-color .3s ease,background .3s ease;
}
.faq-item[open]{border-color:rgba(var(--brand-rgb),.35);background:rgba(var(--brand-rgb),.05)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.3rem;cursor:pointer;font-weight:700;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{position:relative;width:18px;height:18px;flex:none}
.faq-plus::before,.faq-plus::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--brand);border-radius:2px;
  transition:transform .35s var(--ease-out);
}
.faq-plus::before{width:18px;height:2px;transform:translate(-50%,-50%)}
.faq-plus::after{width:2px;height:18px;transform:translate(-50%,-50%)}
.faq-item[open] .faq-plus::before{transform:translate(-50%,-50%) rotate(180deg)}
.faq-item[open] .faq-plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0)}
.faq-body{padding:0 1.3rem 1.2rem;color:var(--text-dim)}
.faq-item[open] .faq-body{animation:fadeUp .45s var(--ease-out) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 15) Formular ---------- */
.form{display:grid;gap:1.1rem;max-width:640px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:grid;gap:.4rem}
.field label{font-size:.85rem;font-weight:700;color:var(--text-dim);letter-spacing:.03em}
.field input,.field textarea,.field select{
  width:100%;font:inherit;color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;padding:.8rem 1rem;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.field textarea{resize:vertical;min-height:130px}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%239fb3c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:14px}
.field select option{background:var(--bg-2);color:var(--text)}
.field input::placeholder,.field textarea::placeholder{color:rgba(159,179,200,.55)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:rgba(var(--brand-rgb),.7);
  box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18),0 0 24px -8px rgba(var(--brand-rgb),.5);
  background:rgba(var(--brand-rgb),.05);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:rgba(255,110,110,.7)}
/* Honeypot: off-screen, NICHT display:none */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- 16) Footer ---------- */
.site-footer{
  position:relative;overflow:hidden;
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(var(--brand-rgb),.5),transparent) 1;
  background:linear-gradient(180deg,var(--bg),#030a13);
  padding-top:clamp(3rem,6vw,4.5rem);
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.2rem;padding-bottom:3rem}
.footer-grid h4{margin:0 0 1rem;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer-grid a{color:var(--text-dim);font-size:.95rem}
.footer-grid a:hover{color:var(--text)}
.footer-about p{color:var(--text-dim);font-size:.95rem;max-width:34ch}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding-block:1.4rem;border-top:1px solid var(--line);
  color:var(--text-dim);font-size:.85rem;
}
.footer-mark{
  font-size:clamp(4rem,15vw,12.5rem);font-weight:800;line-height:.9;letter-spacing:-.04em;
  text-align:center;white-space:nowrap;pointer-events:none;user-select:none;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,0));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  margin-bottom:-.18em;
}

/* ---------- 17) Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:1.6rem;z-index:1100;
  transform:translate(-50%,140%);
  max-width:min(90vw,420px);
  padding:.85rem 1.3rem;border-radius:14px;
  background:rgba(8,21,39,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(var(--brand-rgb),.4);
  box-shadow:0 14px 40px -14px rgba(var(--brand-rgb),.5);
  color:var(--text);font-weight:600;font-size:.95rem;text-align:center;
  transition:transform .45s var(--ease-out),opacity .35s ease;
  opacity:0;pointer-events:none;
}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ---------- 18) Scroll-Reveal-Utilities ---------- */
.js [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s ease var(--d,0s),transform .8s var(--ease-out) var(--d,0s);
}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- 19) Responsiv ---------- */
@media (max-width:1024px){
  .card-grid,.price-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
  /* Nav wird Vollbild-Overlay mit Staffel-Animation */
  .burger{display:grid}
  /* WICHTIG: backdrop-filter auf .site-header macht den Header zum Containing
     Block fuer position:fixed-Kinder — das Vollbild-Menue haengt dann am nur
     ~76px hohen Header statt am Viewport. Deshalb mobil: Blur + Hintergrund in
     ein ::before-Pseudo-Element auslagern (kein Vorfahr der Nav). */
  .site-header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .site-header::before{
    content:"";position:absolute;inset:0;z-index:0;
    background:rgba(4,12,24,.4);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    transition:background .35s ease;
  }
  .site-header.scrolled{background:transparent}
  .site-header.scrolled::before{background:rgba(4,12,24,.78)}
  .header-row{position:relative;z-index:1}
  .site-nav{
    position:fixed;inset:0;z-index:2;
    flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;
    background:rgba(4,12,24,.96);
    -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
    opacity:0;visibility:hidden;
    transition:opacity .4s ease,visibility 0s linear .4s;
  }
  body.nav-open .site-nav{opacity:1;visibility:visible;transition:opacity .4s ease}
  .site-nav a{
    font-size:1.5rem;font-weight:800;color:var(--text);
    opacity:0;transform:translateY(20px);
    transition:opacity .45s ease calc(.1s + var(--i,0)*70ms),
               transform .45s var(--ease-out) calc(.1s + var(--i,0)*70ms),color .25s;
  }
  body.nav-open .site-nav a{opacity:1;transform:none}
  body.nav-open{overflow:hidden}
  .header-cta{display:none}
  .split{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
}
@media (max-width:640px){
  .card-grid,.price-grid,.form-row,.footer-grid{grid-template-columns:1fr}
  .hero{min-height:92svh}
  .hero-actions .btn{flex:1 1 100%}
  /* Mobil-Drossel: Deko-Dauerschleifen aus (Akku) */
  .kenburns{animation:none}
  .ico-tile{animation:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 20px -6px rgba(var(--brand-rgb),.35)}
  .cta-band,.price-card.featured{animation:none;box-shadow:0 0 55px -16px rgba(var(--brand-rgb),.55)}
  .marquee-track{animation-duration:46s}
  /* data-dir-Reveal (Preise) mobil nur vertikal einschweben: der seitliche
     Versatz (translateX ±90px) blaehte den Layout-Viewport auf ~447px auf, wodurch
     Smartphones die ganze Seite herauszoomten. Nach dem Einblenden greift wie
     gehabt .in{transform:none} — deshalb nur der Vor-Reveal-Zustand (:not(.in)). */
  .js [data-reveal][data-dir]{--from:translateY(28px)}
  .js [data-reveal][data-dir]:not(.in){transform:translateY(28px)}
}

/* ---------- 19b) Phase-2-Ergänzungen (v2) ---------- */
/* Skip-Link (Barrierefreiheit) */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1200;
  background:var(--brand);color:#04101f;font-weight:700;
  padding:.7rem 1.3rem;border-radius:0 0 12px 0;
}
.skip-link:focus{left:0}

/* Preloader-Wort unter dem Zähler */
.pre-word{margin-top:.4rem;color:var(--text-dim);font-size:.95rem;letter-spacing:.06em}

/* Trust-Pills (Hero) */
.pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.pill{
  padding:.45rem 1rem;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:.85rem;font-weight:600;color:var(--text-dim);white-space:nowrap;
}

/* Kürzerer Hero für Unterseiten */
.hero-sub{min-height:76svh}

/* Ablauf: nummerierte Schritte */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.step{
  position:relative;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  padding:1.9rem 1.6rem 1.7rem;
}
.step-num{
  display:block;font-size:2.6rem;font-weight:800;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(180deg,var(--accent),rgba(var(--accent-rgb),.45));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  margin-bottom:.9rem;font-variant-numeric:tabular-nums;
}
.step h3{margin-bottom:.4em}
.step p{color:var(--text-dim);margin-bottom:0}

/* Check-Liste (Nutzen-/Leistungs-Bullets) */
.check-list{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.75rem;color:var(--text-dim)}
.check-list li{display:flex;gap:.65rem;align-items:flex-start}
.check-list li::before{
  content:"";flex:none;width:18px;height:18px;margin-top:.2em;border-radius:50%;
  background:rgba(var(--brand-rgb),.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%233f9fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
.check-list strong{color:var(--text)}

/* Vorher/Nachher-Vergleich */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:stretch}
.cmp-col{border-radius:var(--radius);padding:1.9rem 1.7rem;border:1px solid var(--line)}
.cmp-col h3{display:flex;align-items:center;gap:.6rem}
.cmp-col h3::before{content:"";width:10px;height:10px;border-radius:50%;flex:none}
.cmp-before{
  border-color:rgba(255,110,110,.28);
  background:linear-gradient(180deg,rgba(255,110,110,.07),rgba(255,110,110,.015));
}
.cmp-before h3::before{background:#ff6e6e;box-shadow:0 0 12px rgba(255,110,110,.6)}
.cmp-after{
  border-color:rgba(74,222,128,.3);
  background:linear-gradient(180deg,rgba(74,222,128,.07),rgba(74,222,128,.015));
}
.cmp-after h3::before{background:#4ade80;box-shadow:0 0 12px rgba(74,222,128,.6)}
.cmp-list{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.7rem;color:var(--text-dim)}
.cmp-list li{display:flex;gap:.65rem;align-items:flex-start}
.cmp-list li::before{
  content:"";flex:none;width:18px;height:18px;margin-top:.2em;border-radius:50%;
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
.cmp-before .cmp-list li::before{
  background-color:rgba(255,110,110,.15);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23ff6e6e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cmp-after .cmp-list li::before{
  background-color:rgba(74,222,128,.15);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%234ade80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Kleingedrucktes (Beispielrechnung) */
.note-small{font-size:.8rem;color:var(--text-dim);opacity:.85;line-height:1.5}

/* Zweispaltiges Karten-Raster (z. B. 4 Karten als 2×2) */
.card-grid.grid-2{grid-template-columns:repeat(2,1fr)}

/* Split mit getauschter Bildseite */
@media (min-width:921px){
  .split.rev > :first-child{order:2}
}
@media (max-width:920px){
  .steps,.cmp{grid-template-columns:1fr}
}
@media (max-width:640px){
  .card-grid.grid-2{grid-template-columns:1fr}
}

/* ---------- 19c) Phase-2B-Ergänzungen (v3) ---------- */
/* 4er-Preisraster (Preise-Seite) */
.price-grid.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.price-grid.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.price-grid.grid-4{grid-template-columns:1fr}}

/* Anliegen-Wähler (Kontakt): klickbare Karten mit eindeutigem Auswahl-Zustand */
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.choice{
  width:100%;font:inherit;text-align:left;cursor:pointer;color:var(--text);
  display:block;
}
.choice .h3{margin-top:1rem}
.choice.on{
  border-color:rgba(var(--brand-rgb),.7);
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),
    linear-gradient(160deg,rgba(var(--brand-rgb),.16),transparent 60%);
  box-shadow:
    0 0 0 1px rgba(var(--brand-rgb),.5),
    0 0 46px -10px rgba(var(--brand-rgb),.6);
}
.choices.has-choice .choice:not(.on){opacity:.55;filter:saturate(.6)}
.choices.has-choice .choice:not(.on):hover{opacity:.85;filter:none}
@media (max-width:920px){.choices{grid-template-columns:1fr}}

/* Initialen-Kachel (Über-Seite, bis Porträtfoto vorliegt) */
.avatar-tile{
  width:min(320px,100%);aspect-ratio:1;border-radius:24px;
  display:grid;place-items:center;
  font-size:clamp(4rem,8vw,6rem);font-weight:800;letter-spacing:-.02em;
  color:#fff;
  border:1px solid rgba(var(--brand-rgb),.35);
  background:
    radial-gradient(120% 120% at 20% 10%,rgba(255,255,255,.12),transparent 45%),
    linear-gradient(160deg,rgba(var(--brand-rgb),.35),rgba(var(--brand-rgb),.06) 65%),
    var(--bg-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 24px 60px -24px rgba(var(--brand-rgb),.55);
  user-select:none;
}
.avatar-cap{margin-top:1rem;color:var(--text-dim);font-size:.95rem;font-weight:600}

/* Rechtsseiten: ruhiges einspaltiges Layout */
.legal{max-width:760px;padding-top:calc(var(--header-h) + 3rem)}
.legal h1{font-size:clamp(2rem,5vw,3rem);letter-spacing:-.025em}
.legal h2{font-size:1.25rem;margin-top:2.4em}
.legal p,.legal li{color:var(--text-dim)}
.legal ul{padding-left:1.2rem}
.legal .binding{
  margin:1.4rem 0 2.2rem;padding:.9rem 1.2rem;border-radius:12px;
  border:1px solid rgba(var(--brand-rgb),.35);
  background:rgba(var(--brand-rgb),.07);
  color:var(--text);font-weight:600;font-size:.95rem;
}

/* Auffällige [Platzhalter]-Markierung (Inhaber füllt aus) */
.ph{
  color:var(--accent);
  background:rgba(var(--accent-rgb),.1);
  border:1px dashed rgba(var(--accent-rgb),.55);
  border-radius:6px;padding:0 .4em;font-weight:600;
}

/* Sprachblöcke (lange Rechtstexte): reagieren auf html[lang] aus setLang() */
.lang-block{display:none}
html[lang="de"] .lang-de{display:block}
html[lang="en"] .lang-en{display:block}

/* ---------- 19c) CTA-Aufbau-Animation (Superconscious-Stil, einmalig) ---------- */
/* Aktiv nur auf .cta-band[data-cta-anim]; Geometrie/Partikel/Split erzeugt main.js. */

/* Seed-of-Life-Geometrie: mittig hinter der Überschrift, startet unsichtbar */
.cta-geo{
  position:absolute;left:50%;top:50%;z-index:0;
  width:clamp(180px,32vw,320px);height:clamp(180px,32vw,320px);
  transform:translate(-50%,-50%);
  opacity:0;pointer-events:none;
  transition:opacity 1.2s ease;
}
.cta-geo.draw{opacity:1}
.cta-geo.is-out{opacity:0;transition:opacity 1s ease}  /* Ende: Kreise verschwinden ganz */
.cta-geo circle{
  fill:none;
  stroke:rgba(var(--brand-rgb),.9);
  stroke-width:1.1;
  stroke-dasharray:100;              /* Kreise tragen pathLength="100" (JS) */
  stroke-dashoffset:100;
  transition:stroke-dashoffset 1.1s cubic-bezier(.6,.05,.2,1);
  transition-delay:calc(var(--i,0) * .1s);
}
.cta-geo.draw circle{stroke-dashoffset:0}
.cta-geo .geo-glow{                     /* Orange-Glut im Zentrum */
  stroke:rgba(var(--accent-rgb),.8);
  stroke-width:1.6;
  filter:blur(3px);
}
.cta-geo .geo-ai{                       /* "Al"-Logomarke im Zentrum-Kreis */
  opacity:0;
  transform-box:fill-box;transform-origin:center;
  scale:.8;
  transition:opacity .8s ease,scale .8s cubic-bezier(.2,.8,.2,1);
}
.cta-geo.show-ai .geo-ai{opacity:1;scale:1}
.cta-geo.is-out .geo-ai{opacity:0;scale:.9;filter:blur(4px);transition:opacity .8s ease,scale .8s ease,filter .8s ease}

/* Partikel-Ebene: kleine leuchtende Punkte, laufen per WAAPI zur Mitte */
.cta-fx{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}
.cta-particle{
  position:absolute;border-radius:50%;
  width:6px;height:6px;
  background:var(--brand);
  box-shadow:0 0 10px 2px rgba(var(--brand-rgb),.7);
}
.cta-particle.alt{
  background:var(--accent);
  box-shadow:0 0 10px 2px rgba(var(--accent-rgb),.7);
}

/* Text sicher ÜBER der Geometrie stapeln */
.cta-band[data-cta-anim] .h2,
.cta-band[data-cta-anim] .lead,
.cta-band[data-cta-anim] .hero-actions{position:relative;z-index:1}

/* Buchstaben-Aufbau: Wort-Wrapper verhindert Umbruch mitten im Wort */
.cta-word{display:inline-block;white-space:nowrap}
.cta-char{
  display:inline-block;
  opacity:0;
  transform:translateX(var(--dx,0px));   /* Hälften kommen von links/rechts (JS setzt --dx) */
  filter:blur(6px);
  transition:opacity .95s ease,transform .95s cubic-bezier(.25,.8,.25,1),filter .95s ease;
}
.cta-band .h2.is-in .cta-char{opacity:1;transform:translateX(0);filter:none}

/* Lead + Button folgen dem Titel mit sanftem Nachzieher */
.cta-band[data-cta-anim] .lead,
.cta-band[data-cta-anim] .hero-actions{
  opacity:0;transform:translateY(14px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);
}
.cta-band[data-cta-anim] .lead{transition-delay:2.9s}
.cta-band[data-cta-anim] .hero-actions{transition-delay:3.1s}
.cta-band[data-cta-anim].cta-played .lead,
.cta-band[data-cta-anim].cta-played .hero-actions{opacity:1;transform:none}

/* ---------- 19d) 3D-Hintergrund Referenzen (refs3d.js) ---------- */
/* Fixe Canvas-Ebene hinter allem Inhalt (ueber dem body-Hintergrund) */
#refs3d{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.85}
#refs3d canvas{width:100%;height:100%;display:block}
/* Auf dieser Seite scheint das 3D durch die Sektion durch */
.has-refs3d .section-alt{background:rgba(8,21,39,.62)}

/* ---------- 19e) Über: Hero mit Sternen + Wort-Blasen (ueber3d.js, v2) ---------- */
/* Text sitzt unten (wie Preise-Buehne); die 3D-Ebene fuellt den ganzen Hero */
.ueber-hero{min-height:92svh;align-items:flex-end;padding-bottom:8rem}
#ueber3d{position:absolute;inset:0;z-index:0}
#ueber3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Copy liegt ueber dem Canvas; Klicks gehen durch die leeren Flaechen zur Blase */
.ueber-copy{position:relative;z-index:1;width:100%;pointer-events:none}
.ueber-copy .btn{pointer-events:auto}
/* Kompakte H1: exakt 2 Zeilen (nowrap), Schrift waechst mit dem Viewport —
   so bleibt der Text unten und die Blasen haben den oberen Bereich frei */
.ueber-hero .display{font-size:clamp(1.9rem,3vw,3.6rem);line-height:1.12}
.ueber-hero .display .lr{white-space:nowrap}
.ueber-hero .eyebrow{margin-bottom:.8rem}
.ueber-mid{text-align:center}
.ueber-mid h1{margin-bottom:0}
.ueber-copy .hero-actions{justify-content:center;margin-top:2.4rem}
.ueber-hero .scroll-hint{pointer-events:none}
/* Statische Badges: sichtbar ohne JS/WebGL/bei reduced-motion (oben rechts, dort ist frei) */
.bub-static{
  list-style:none;margin:0;padding:0;
  position:absolute;right:2rem;top:calc(var(--header-h) + 2.5rem);
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end;
}
.bub-static li{
  padding:.45em 1.05em;border-radius:999px;
  border:1px solid rgba(var(--brand-rgb),.35);
  background:rgba(8,21,39,.6);color:var(--text-dim);
  font-size:.9rem;letter-spacing:.05em;
}
/* Laeuft das 3D, bleiben die Badges nur fuer Screenreader erhalten */
.ueber3d-on .bub-static{
  width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;padding:0;margin:-1px;border:0;gap:0;
}
.ueber3d-on .bub-static li{border:0;padding:0;background:none}
@media (max-width:900px){
  /* Schmale Screens: keine 3D-Ebene, Text normal gestapelt */
  #ueber3d{display:none}
  .ueber-hero{align-items:center;padding-bottom:3rem}
  .ueber-hero .display{font-size:clamp(2.2rem,8vw,3rem)}
  .ueber-hero .display .lr{white-space:normal}
  .ueber-mid{text-align:left}
  .ueber-copy{pointer-events:auto}
  .ueber-copy .hero-actions{justify-content:flex-start}
}

/* ---------- 19f) Kontakt: drehbarer Sternenhimmel (kontakt3d.js) ---------- */
#kontakt3d{position:absolute;inset:0;z-index:0}
#kontakt3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Text liegt drueber, laesst Maus-Ziehen aber durch (im Hero gibt es keine Links) */
.kontakt-hero .hero-inner{position:relative;z-index:1;pointer-events:none}
.kontakt-hero .hero-inner a,.kontakt-hero .hero-inner .btn{pointer-events:auto}
.kontakt-hero .scroll-hint{pointer-events:none}

/* ---------- 19g) Preisstaffel-Tabelle (AccelNexus, 03.09.2026) ----------
   Vier Stufen nach Mitarbeiterzahl unter der Preiskarte. Steht bewusst hier
   und nicht seiteneigen: dieselbe Tabelle erscheint auf /accelnexus/ und
   /preise/ und speist sich aus denselben Schluesseln (su.flat.tier*). */
.tier-box{
  max-width:760px;margin:1.6rem auto 0;padding:1.3rem 1.5rem;
  border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);
}
.tier-h{font-size:1rem;font-weight:700;letter-spacing:-.01em;margin:0 0 .9rem;color:var(--text)}
.tier-table{width:100%;border-collapse:collapse;font-size:.95rem}
.tier-table th,.tier-table td{padding:.55rem .2rem;border-bottom:1px solid var(--line);vertical-align:top}
.tier-table thead th{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-dim);font-weight:700;
}
.tier-table thead th:first-child,.tier-table thead th:nth-child(2),
.tier-table tbody th,.tier-table .tier-extra{text-align:left}
.tier-table thead th:last-child,.tier-table .tier-price{text-align:right}
.tier-table tbody th{font-weight:600;color:var(--text-dim);white-space:nowrap;padding-right:1rem}
.tier-table .tier-extra{color:var(--text-dim);font-weight:400;font-size:.88rem;line-height:1.4;padding-right:1rem}
.tier-table .tier-price{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.tier-table tbody tr:last-child th,.tier-table tbody tr:last-child td{border-bottom:0}
.tier-box .note-small{margin-top:.9rem}

/* Gestapelte Fassung: Stufe und Betrag in einer Zeile, der Zusatz darunter.
   Zweimal ausgeschrieben statt geteilt — .tier-narrow gilt unabhaengig von der
   Fensterbreite (schmale Spalte auf /preise/), der Media-Block gilt fuer alle. */
.tier-box.tier-narrow .tier-table{display:block}
.tier-box.tier-narrow .tier-table tbody{display:block}
.tier-box.tier-narrow .tier-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tier-box.tier-narrow .tier-table tr{display:grid;grid-template-columns:1fr auto;column-gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.tier-box.tier-narrow .tier-table tbody tr:last-child{border-bottom:0}
.tier-box.tier-narrow .tier-table th,
.tier-box.tier-narrow .tier-table td{border-bottom:0;padding:.1rem 0}
.tier-box.tier-narrow .tier-table tbody th{grid-column:1;grid-row:1}
.tier-box.tier-narrow .tier-table .tier-price{grid-column:2;grid-row:1}
.tier-box.tier-narrow .tier-table .tier-extra{grid-column:1 / -1;grid-row:2;margin-top:.15rem;padding-right:0}

.cmp-hint{max-width:820px;margin-left:auto;margin-right:auto;text-align:center;font-size:1rem}

@media (max-width:640px){
  .tier-box{padding:1.1rem 1.1rem}
  .tier-table{display:block;font-size:.9rem}
  .tier-table tbody{display:block}
  .tier-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tier-table tr{display:grid;grid-template-columns:1fr auto;column-gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
  .tier-table tbody tr:last-child{border-bottom:0}
  .tier-table th,.tier-table td{border-bottom:0;padding:.1rem 0}
  .tier-table tbody th{grid-column:1;grid-row:1}
  .tier-table .tier-price{grid-column:2;grid-row:1}
  .tier-table .tier-extra{grid-column:1 / -1;grid-row:2;margin-top:.15rem;padding-right:0}
  .cmp-hint{text-align:left}
}

/* Ein Erklaerabsatz, der die ganze Preislogik traegt, wird in Lead-Groesse zur Wand.
   Gleiche Farbe und gleicher Abstand, nur normale Schriftgroesse und eine breitere
   Zeile — dann sind es rund zehn statt fuenfzehn Zeilen. */
.lead.lead-dense{font-size:1rem;line-height:1.75;max-width:68ch}

/* ---------- 20) PFLICHT: prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
    scroll-behavior:auto !important;
  }
  .kenburns,.marquee-track,.ico-tile,.cta-band,.price-card.featured,.scroll-hint::after{animation:none !important}
  .marquee-track{transform:none !important}
  .card,.price-card{transform:none !important}
  /* Reveal-Inhalte sichtbar lassen, auch wenn JS nie läuft */
  .js [data-reveal],.js .lr-inner,.js .hero-fade{opacity:1 !important;transform:none !important}
  .js .img-reveal{clip-path:none !important}
  .js .img-reveal img{transform:none !important}
  /* CTA-Aufbau: sofort Endzustand, keine Bewegung */
  .cta-geo{opacity:0 !important;transition:none !important}
  .cta-geo circle{stroke-dashoffset:0 !important;transition:none !important}
  .cta-char{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
  .cta-band[data-cta-anim] .lead,
  .cta-band[data-cta-anim] .hero-actions{opacity:1 !important;transform:none !important;transition:none !important}
  .cta-particle{display:none !important}
  /* Über-Blasen: nur die statischen Badges zeigen */
  #ueber3d canvas{display:none !important}
  .ueber3d-on .bub-static{width:auto;height:auto;overflow:visible;clip:auto;margin:0;gap:.6rem}
  #kontakt3d canvas{display:none !important}
}

/* ---------- Autofill (Chrome/Edge): dunkles Design behalten statt Weiss ---------- */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--bg-2) inset;
  box-shadow:0 0 0 1000px var(--bg-2) inset;
  border:1px solid rgba(255,255,255,.13);
  transition:background-color 9999999s ease-out;
}

/* ============================================================================
   Nacharbeit aus der Design- und Funktionspruefung vom 01.09.2026
   (docs/FUNDLISTE-Design-und-Funktion-2026-09-01.md)

   Alles hier greift auf ALLEN 15 Seiten. Deshalb steht es gebuendelt am Ende
   und in einem eigenen Commit: so laesst es sich einzeln zurueckrollen, ohne
   die uebrige Veroeffentlichung anzufassen.
   ========================================================================= */

/* Fund 1 — Pillen brechen mobil um, statt die Seite aufzuschieben.
   .pill traegt white-space:nowrap. Auf /referenzen/ schob "AccelMemory — Frage
   rein, Antwort aus dem Firmenwissen" (403 px, spanisch 505 px) die Seite bei
   360 px Inhaltsbreite um bis zu 162 px zur Seite; auf / schnitt dieselbe Pille
   die Kachel ab, weil .card overflow:hidden traegt. Zweizeilig ist besser als
   abgeschnitten. */
@media (max-width:640px){
  .pill{white-space:normal}
}

/* Fund 9 — KI-Fragmente der Prozess-Pipeline unter 861 px ausblenden.
   .ai-frag.f2 sitzt per left:calc(100% + 10px) rechts NEBEN seinem Container.
   Ab 861 px raeumt style.css das schon auf (.pipe-h .ai-frag.*, s. o.), darunter
   nicht — dort schob das unsichtbare Fragment /leistungen/ um 23 px (deutsch)
   bzw. 30 px (englisch) auf. Auch ein Element mit opacity:0 belegt Platz.
   prefers-reduced-motion blendet die Fragmente ohnehin schon aus. */
@media (max-width:860px){
  .ai-frag{display:none}
}

/* Fund 10 — lange deutsche Komposita duerfen die Seite nicht aufschieben.
   "Wettbewerbsfähigkeit" ist in der H2 336 px breit; bei 320 px Geraetebreite
   bleiben 305 px. Betroffen waren /referenzen/ (115 px), /leistungen/ (78 px),
   /datenschutz/ (50 px), / (33 px) und /accelnexus/ (6 px).
   overflow-wrap:break-word greift nur, wenn ein Wort sonst ueberliefe — die
   normale Typografie bleibt unberuehrt.

   Unter 480 px kommt overflow-wrap:anywhere dazu. Der Unterschied ist
   entscheidend und war beim ersten Anlauf der Fehler: break-word verhindert nur
   den SICHTBAREN Ueberlauf, laesst die intrinsische Mindestbreite (min-content)
   aber beim ganzen Wort — ein Raster, das sich danach bemisst, bleibt 336 px
   breit. Erst anywhere senkt auch min-content, und nur dann schrumpft die
   Spalte wirklich. Die Silbentrennung sorgt zusaetzlich dafuer, dass an einer
   sinnvollen Stelle getrennt wird; sie richtet sich nach dem lang-Attribut,
   das setLang je Sprache mitfuehrt. */
h1,h2,h3,h4,p,li,dd,dt,figcaption,blockquote,.lead,.display,.h2,.h3{
  overflow-wrap:break-word;
}
@media (max-width:480px){
  h1,h2,h3,h4,p,li,dd,dt,blockquote,.lead,.display,.h2,.h3{
    overflow-wrap:anywhere;
    -webkit-hyphens:auto;hyphens:auto;
  }
}

/* Fund 12 — Preis-Fussnoten nie unter 12 px.
   small ist mit .42em relativ zum Preis gesetzt. Auf /ki-ready/ drueckt eine
   seiteneigene Regel (#vergleich) den Preis mobil auf 24 px — 42 % davon sind
   10,1 px. Die Untergrenze faengt jede solche Verkleinerung ab, egal auf
   welcher Seite sie kuenftig entsteht. */
.price-card .price small{font-size:max(.42em,12px)}

/* Fund 19 — der Preis-Badge bleibt in seiner Karte.
   .price-badge sitzt absolut mittig ueber der Karte (left:50% + translateX(-50%))
   und trug white-space:nowrap. Er konnte deshalb weder umbrechen noch sich an der
   Karte ausrichten: was zu breit war, ragte symmetrisch nach beiden Seiten heraus.
   Auf /preise/ schob "Ab 6 Apps guenstiger als KI-Ready" (pr.kr.s3.badge) bei
   320 px Geraetebreite die Seite auf — englisch um 2 px, spanisch um 17 px.

   KEINE Schwelle nach Fensterbreite. Der Ueberstand haengt an der KARTENbreite,
   und die springt mit den Rasterstufen (3 Spalten -> 2 -> 1) hin und her. Deshalb
   ist der Badge auf Spanisch nicht nur mobil zu breit, sondern gemessen bei
   320/360/375/640/700/768/1024/1120 px — auch mitten auf dem Desktop:

     320 px  Karte 285  Badge 354  (+69)      768 px  Karte 341  Badge 354  (+13)
     640 px  Karte 283  Badge 354  (+71)     1024 px  Karte 305  Badge 354  (+49)
     700 px  Karte 310  Badge 354  (+44)     1120 px  Karte 337  Badge 354  (+17)

   width:max-content ist dabei nicht schmueckendes Beiwerk, sondern noetig: der
   Badge sitzt mit left:50% und ohne right, sein verfuegbarer Raum ist damit nur
   die HALBE Karte. Ohne width:max-content brach er schon bei 141 px um (gemessen)
   statt erst an der Kartenkante. max-width bindet ihn an seine Karte,
   white-space:normal erlaubt den Umbruch — zusammen greift die Regel genau
   dann, wenn der Text nicht passt, und sonst nie. Bei 1280 px bleibt der laengste Badge (354 px) einzeilig, weil die
   Karte dort 364 px breit ist.

   Das vertikale Zentrieren (top:0 statt -13px, dazu translateY(-50%)) haelt den
   Badge auch zweizeilig mittig auf der Kartenkante. Ohne das waere ein
   zweizeiliger Badge 34 px in die Karte geragt — bei 32 px Innenabstand haette er
   die Ueberschrift beruehrt.

   Fund 13 (Schrift mindestens 12 px) bleibt unangetastet: die Schriftgroesse wird
   hier nicht angefasst. Zurueckdrehen von Fund 13 behebt den Ueberstand ohnehin
   nicht — live gegengeprueft. */
.price-badge{
  top:0;transform:translate(-50%,-50%);
  width:-webkit-max-content;width:max-content;max-width:calc(100% - 8px);
  white-space:normal;text-align:center;
}