/* ============================================================
   NEXIQA Gen3  —  cinematic edition
   ============================================================ */

:root{
  --nxg3-bg:#000;
  --nxg3-ink:#f5f5f7;
  --nxg3-ink-dim:#a1a1a6;
  --nxg3-ink-faint:#6e6e73;
  --nxg3-line:rgba(255,255,255,.08);
  --nxg3-line-strong:rgba(255,255,255,.14);
  --nxg3-surface:#0b0b0d;
  --nxg3-surface-2:#111114;

  --nxg3-aurora-1:#00cfff;
  --nxg3-aurora-2:#a600ff;
  --nxg3-aurora-3:#ff006e;
  --nxg3-aurora-4:#ff8800;
  --nxg3-aurora-5:#43e97b;

  --nxg3-ease-soft:cubic-bezier(.22,.61,.36,1);
  --nxg3-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --nxg3-ease-slow:cubic-bezier(.16,1,.3,1);

  --nxg3-max-w:1200px;
  --nxg3-nav-h:56px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  background:#000;
  color-scheme:dark;
  scroll-behavior:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;   /* NOT hidden — hidden breaks position:sticky in descendants */
}

body{
  font-family:"Geist","SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  font-weight:400;
  background:#000;
  color:var(--nxg3-ink);
  line-height:1.5;
  overflow-x:clip;
  letter-spacing:-.005em;
}

img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

::selection{background:rgba(255,255,255,.18);color:#fff}

/* ----------  Global background ambience  ---------- */
.nxg3-bg-field{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60rem 60rem at 12% 8%,rgba(0,207,255,.08),transparent 60%),
    radial-gradient(55rem 55rem at 92% 18%,rgba(166,0,255,.09),transparent 62%),
    radial-gradient(70rem 70rem at 50% 110%,rgba(255,0,110,.06),transparent 60%);
}
.nxg3-grain{
  position:fixed;inset:-50%;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;opacity:.12;
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}
  16%{transform:translate(-2%,1%)}
  33%{transform:translate(1%,-2%)}
  50%{transform:translate(-1%,2%)}
  66%{transform:translate(2%,1%)}
  83%{transform:translate(-2%,-1%)}
  100%{transform:translate(0,0)}
}

/* ----------  Typography utilities  ---------- */
.nxg3-serif{font-family:"Instrument Serif","Times New Roman",serif;font-weight:400;letter-spacing:-.01em}
.nxg3-mono{font-family:"Geist Mono",ui-monospace,monospace;font-weight:500;letter-spacing:.02em;text-transform:uppercase;font-size:.72rem}

.nxg3-display{
  font-size:clamp(3rem,9.5vw,9rem);
  font-weight:600;
  line-height:.95;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.nxg3-headline{
  font-size:clamp(2.5rem,6.2vw,5rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.nxg3-subhead{
  font-size:clamp(1.5rem,3vw,2.4rem);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.02em;
}
.nxg3-lead{
  font-size:clamp(1.05rem,1.4vw,1.25rem);
  line-height:1.55;
  color:var(--nxg3-ink-dim);
  max-width:46ch;
}
.nxg3-eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font:500 .78rem/1 "Geist Mono",monospace;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--nxg3-ink-dim);
  padding:.55rem .85rem;
  border:1px solid var(--nxg3-line-strong);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.nxg3-eyebrow .nxg3-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--nxg3-aurora-5);
  box-shadow:0 0 12px var(--nxg3-aurora-5);
  animation:pulse 2s var(--nxg3-ease-soft) infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.6;transform:scale(.85)}
}

/* Gradient text */
.nxg3-grad{
  background:linear-gradient(92deg,#00cfff 0%,#a600ff 35%,#ff006e 65%,#ff8800 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-size:200% 100%;
  animation:gradSlide 14s linear infinite;
}
.nxg3-grad-2{
  background:linear-gradient(92deg,#c471ed,#f64f59,#12c2e9,#c471ed);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-size:200% 100%;
  animation:gradSlide 18s linear infinite;
}
.nxg3-grad-3{
  background:linear-gradient(92deg,#43e97b,#38f9d7,#43e97b);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-size:200% 100%;
  animation:gradSlide 14s linear infinite;
}
@keyframes gradSlide{to{background-position:-200% 0}}

/* ----------  Buttons  ---------- */
.nxg3-btn{
  --btn-bg:#fff;--btn-fg:#000;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.95rem 1.45rem;border-radius:999px;
  font:500 .95rem/1 "Geist",sans-serif;letter-spacing:-.01em;
  background:var(--btn-bg);color:var(--btn-fg);
  transition:transform .4s var(--nxg3-ease-soft),background .3s ease,box-shadow .4s var(--nxg3-ease-soft);
  will-change:transform;
}
.nxg3-btn:hover{transform:translateY(-1px);box-shadow:0 14px 40px -10px rgba(255,255,255,.25)}
.nxg3-btn:active{transform:translateY(0) scale(.98)}
.nxg3-btn.nxg3-ghost{
  --btn-bg:transparent;--btn-fg:#f5f5f7;
  border:1px solid var(--nxg3-line-strong);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.nxg3-btn.nxg3-ghost:hover{--btn-bg:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
.nxg3-btn svg{width:16px;height:16px}
.nxg3-btn .nxg3-arrow{transition:transform .4s var(--nxg3-ease-spring)}
.nxg3-btn:hover .nxg3-arrow{transform:translateX(3px)}

/* ============================================================
   NAV
   ============================================================ */
.nxg3-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nxg3-nav-h);
  display:flex;align-items:center;justify-content:center;
  /* Initial leicht abgedunkelt damit auf hellem Hero-Inhalt lesbar.
     Fadet KOMPLETT aus, sobald der Hero verlassen wird —
     die Sticky Page-Bar übernimmt dann (Apple-Style). */
  background:rgba(10,10,12,.42);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:opacity .55s cubic-bezier(.16,1,.3,1),
             transform .55s cubic-bezier(.16,1,.3,1),
             backdrop-filter .4s ease, background .4s ease;
}
.nxg3-nav.nxg3-scrolled{
  /* Wenn der User aus dem Hero rausscrollt → globale Navbar verschwindet */
  opacity:0;
  transform:translateY(-100%);
  pointer-events:none;
}
.nxg3-nav-inner{
  width:100%;max-width:var(--nxg3-max-w);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
}
.nxg3-nav-brand{
  font:600 1rem/1 "Geist",sans-serif;letter-spacing:-.02em;
  display:flex;align-items:center;gap:.55rem;
  text-decoration:none;color:#fff;
}
.nxg3-nav-brand .nxg3-brand-logo{
  height:24px;width:auto;display:block;
}
.nxg3-nav-brand-text{ display:inline-block; }
.nxg3-nav-brand .nxg3-mark{
  width:22px;height:22px;border-radius:6px;
  background:conic-gradient(from 210deg,#00cfff,#a600ff,#ff006e,#ff8800,#00cfff);
  box-shadow:0 0 14px rgba(166,0,255,.55),inset 0 0 0 1px rgba(255,255,255,.25);
  animation:markSpin 18s linear infinite;
}
@keyframes markSpin{to{transform:rotate(360deg)}}
.nxg3-nav-links{display:flex;gap:2rem}
.nxg3-nav-links a{
  font:500 .82rem/1 "Geist",sans-serif;color:var(--nxg3-ink-dim);
  transition:color .3s ease;position:relative;padding:6px 0;text-decoration:none;
}
.nxg3-nav-links a:hover{color:#fff}
.nxg3-nav-end{
  display:flex;align-items:center;gap:.6rem;
}
.nxg3-nav-cta{
  padding:.5rem 1rem;border-radius:999px;
  background:#fff;color:#000;font:500 .82rem/1 "Geist",sans-serif;
  transition:transform .3s var(--nxg3-ease-soft);text-decoration:none;
}
.nxg3-nav-cta:hover{transform:translateY(-1px)}
/* Sprachumschalter — Nav + Page-Bar = Aufklapp-Dropdown, Mobile-Menü = Button-Reihe (5 Sprachen) */
.nxg3-langdrop{position:relative;display:inline-flex}
.nxg3-langdrop-trigger{
  appearance:none;display:inline-flex;align-items:center;gap:5px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.78);
  font:600 .68rem/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.08em;
  padding:.46rem .6rem;border-radius:999px;cursor:pointer;
  transition:color .25s ease,background .25s ease,border-color .25s ease;
}
.nxg3-langdrop-trigger:hover{color:#fff;border-color:rgba(255,255,255,.32)}
.nxg3-langdrop-chev{width:11px;height:11px;opacity:.7;transition:transform .25s ease}
.nxg3-langdrop.nxg3-open .nxg3-langdrop-chev{transform:rotate(180deg)}
.nxg3-langdrop-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  min-width:150px;padding:6px;
  background:rgba(18,18,22,.96);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.5);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.nxg3-langdrop.nxg3-open .nxg3-langdrop-menu{opacity:1;transform:none;pointer-events:auto}
.nxg3-langdrop-menu button{
  appearance:none;display:block;width:100%;text-align:left;border:0;
  background:transparent;color:rgba(255,255,255,.7);
  font:500 .82rem/1 "Geist",sans-serif;
  padding:.6rem .7rem;border-radius:9px;cursor:pointer;
  transition:color .2s ease,background .2s ease;
}
.nxg3-langdrop-menu button:hover{color:#fff;background:rgba(255,255,255,.08)}
.nxg3-langdrop-menu button.nxg3-on{color:#fff;background:rgba(255,255,255,.12)}
/* Zehn Eintraege wuerden sonst laenger als manche Fenster.
   Deckel + Eigenscroll statt Ueberlauf. */
.nxg3-langdrop-menu{max-height:min(66vh,430px);overflow-y:auto;scrollbar-width:thin}
.nxg3-langdrop-menu button{display:flex;align-items:center;gap:9px;text-align:left}
.nxg3-langdrop-menu button em{
  flex-shrink:0;font-style:normal;
  font:600 .64rem/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.06em;
  color:rgba(255,255,255,.38);min-width:1.6em;
}
.nxg3-langdrop-menu button.nxg3-on em{color:rgba(255,255,255,.68)}
/* Sprachwahl im Mobile-Menü — ZWEISPALTIG mit Eigennamen.
   Eine einzelne Reihe aus Kuerzeln waere bei zehn Sprachen auf
   rund 30 px je Knopf geschrumpft: unlesbar und kaum treffbar.
   auto-fit haelt das Raster einspaltig, wenn der Platz eng wird. */
.nxg3-nav-lang{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:6px;width:100%;margin-top:10px;
}
.nxg3-nav-lang button{
  appearance:none;
  display:flex;align-items:center;gap:9px;
  min-height:44px;                 /* bequeme Fingergroesse */
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.62);
  font:500 .86rem/1.2 "Geist",sans-serif;letter-spacing:-.01em;
  padding:.6rem .72rem;border-radius:11px;cursor:pointer;text-align:left;
  transition:color .25s ease,background .25s ease,border-color .25s ease;
}
.nxg3-nav-lang button em{
  flex-shrink:0;font-style:normal;
  font:600 .66rem/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.06em;
  color:rgba(255,255,255,.4);
  transition:color .25s ease;
}
.nxg3-nav-lang button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nxg3-nav-lang button:hover{color:#fff;border-color:rgba(255,255,255,.24)}
.nxg3-nav-lang button.nxg3-on{
  background:linear-gradient(100deg,rgba(196,113,237,.20),rgba(18,194,233,.12));
  border-color:rgba(255,255,255,.22);color:#fff;
}
.nxg3-nav-lang button.nxg3-on em{color:rgba(255,255,255,.7)}
/* Die Reihe stiess sonst direkt an den Starten-Knopf. */
.nxg3-nav-lang{margin-bottom:12px}
/* sehr schmale Navbar: Dropdown der Haupt-Navbar ausblenden (Burger-Menü übernimmt) */
@media (max-width:560px){ .nxg3-nav .nxg3-langdrop{display:none} }
/* Anti-Flash während die Übersetzung angewendet wird */
html.nxg3-lang-pending body{visibility:hidden}
/* Sekundärer Pill-Button neben "Starten" (Preise) */
.nxg3-nav-pill{
  /* 1px kleiner als der CTA gepolstert — der Rand gleicht es aus,
     beide Pills sind exakt gleich hoch */
  padding:calc(.5rem - 1px) 1rem;border-radius:999px;
  background:transparent;color:var(--nxg3-ink);
  border:1px solid rgba(255,255,255,.22);
  font:500 .82rem/1 "Geist",sans-serif;
  transition:transform .3s var(--nxg3-ease-soft),border-color .3s var(--nxg3-ease-soft),background .3s var(--nxg3-ease-soft);
  text-decoration:none;white-space:nowrap;
}
.nxg3-nav-pill:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.05)}
@media(max-width:480px){ .nxg3-nav-pill{display:none} } /* sehr schmal: Preise steckt im Burger-Menü */

/* ── Hamburger button (visible only on small screens) ────────────── */
.nxg3-nav-burger{
  display:none;
  width:38px;height:38px;
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  cursor:pointer;
  position:relative;
  padding:0;
  transition:background .25s ease, border-color .25s ease;
}
.nxg3-nav-burger:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.30);
}
.nxg3-nav-burger span{
  position:absolute;left:50%;
  width:16px;height:1.5px;
  background:#f5ece2;border-radius:2px;
  transform:translateX(-50%);
  transition:transform .35s cubic-bezier(.16,1,.3,1),
             top .35s cubic-bezier(.16,1,.3,1),
             opacity .25s ease;
}
.nxg3-nav-burger span:nth-child(1){ top:14px; }
.nxg3-nav-burger span:nth-child(2){ top:22px; }
.nxg3-nav-burger.nxg3-is-open span:nth-child(1){
  top:18px; transform:translateX(-50%) rotate(45deg);
}
.nxg3-nav-burger.nxg3-is-open span:nth-child(2){
  top:18px; transform:translateX(-50%) rotate(-45deg);
}

@media(max-width:980px){
  .nxg3-nav-links{display:none}
  .nxg3-nav-burger{display:inline-flex;align-items:center;justify-content:center;}
}

/* ── Mobile Menu Overlay (slides up from bottom) ────────────────── */
.nxg3-nav-mobile-menu{
  position:fixed;inset:0;
  z-index:101; /* über .nav, unter .explore-modal */
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  pointer-events:none;
  transition:opacity .35s cubic-bezier(.16,1,.3,1),
             visibility 0s linear .35s;
}
.nxg3-nav-mobile-menu.nxg3-is-open{
  opacity:1;visibility:visible;
  pointer-events:auto;
  transition:opacity .35s cubic-bezier(.16,1,.3,1),
             visibility 0s linear 0s;
}
.nxg3-nav-mobile-backdrop{
  position:absolute;inset:0;
  background:rgba(7,7,10,.78);
  backdrop-filter:saturate(160%) blur(24px);
  -webkit-backdrop-filter:saturate(160%) blur(24px);
}
.nxg3-nav-mobile-panel{
  position:relative;z-index:1;
  margin-top:auto;
  background:rgba(15,15,18,.97);
  border-top:1px solid rgba(255,255,255,.08);
  border-radius:28px 28px 0 0;
  padding:32px 24px 28px;
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  font-family:"Geist","SF Pro Display",-apple-system,sans-serif;
  /* Seit die Sprachwahl zweispaltig ist (zehn Sprachen = fuenf Zeilen),
     kann das Menue auf kurzen Geraeten hoeher werden als der Bildschirm.
     Ohne Deckel waere der Starten-Knopf unerreichbar. dvh statt vh, weil
     die Adressleiste mobiler Browser sonst falsch mitgerechnet wird. */
  max-height:100vh;
  max-height:100dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nxg3-nav-mobile-panel::-webkit-scrollbar{display:none}
.nxg3-nav-mobile-menu.nxg3-is-open .nxg3-nav-mobile-panel{
  transform:translateY(0);
}
.nxg3-nav-mobile-inner{
  display:flex;flex-direction:column;
  padding-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:22px;
}
.nxg3-nav-mobile-inner a{
  padding:16px 4px;
  font:500 1.15rem/1 "Geist",sans-serif;
  letter-spacing:-.01em;
  color:#f5ece2;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:color .2s ease;
}
.nxg3-nav-mobile-inner a:last-child{ border-bottom:none; }
.nxg3-nav-mobile-inner a:hover,
.nxg3-nav-mobile-inner a:active{ color:#c471ed; }
.nxg3-nav-mobile-cta{
  display:block;
  padding:14px 24px;
  background:linear-gradient(120deg,#c471ed 0%,#ff5fae 50%,#ff9158 100%);
  color:#fff;
  border-radius:999px;
  font:600 14px/1 "Geist",sans-serif;
  text-align:center;
  text-decoration:none;
  transition:filter .2s ease;
  box-shadow:0 4px 14px rgba(196,113,237,.30);
}
.nxg3-nav-mobile-cta:hover{ filter:brightness(1.08); }

@media (prefers-reduced-motion:reduce){
  .nxg3-nav-mobile-menu, .nxg3-nav-mobile-panel, .nxg3-nav-burger span{
    transition-duration:.15s !important;
  }
}

/* ============================================================
   STICKY PAGE BAR — Apple-style mini bar, page-level navigation.
   Erscheint, sobald der User aus dem Hero scrollt (siehe JS).
   Pill-Design: sehr kompakt, blur-Hintergrund, mittig oben.
   ============================================================ */
.nxg3-page-bar{
  position:fixed;
  top:14px;
  left:50%;
  transform:translate(-50%,-130%);
  z-index:99;
  display:flex;align-items:center;
  padding:6px;
  background:rgba(15,15,18,.66);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  box-shadow:0 14px 40px rgba(0,0,0,.40);
  opacity:0;
  pointer-events:none;
  transition:transform .55s cubic-bezier(.16,1,.3,1),
             opacity .45s cubic-bezier(.16,1,.3,1);
  font-family:"Geist","SF Pro Display",-apple-system,sans-serif;
}
.nxg3-page-bar.nxg3-is-visible{
  transform:translate(-50%,0);
  opacity:1;
  pointer-events:auto;
}
.nxg3-page-bar-inner{
  display:flex;align-items:center;
  gap:14px;
}
.nxg3-page-bar-brand{
  display:inline-flex;align-items:center;gap:9px;
  padding:0 14px 0 10px;
  color:#f5ece2;
  font-size:14px;font-weight:500;
  letter-spacing:-.005em;
  text-decoration:none;
  white-space:nowrap;
}
.nxg3-page-bar-brand .nxg3-mark{
  width:14px;height:14px;border-radius:4px;
  background:conic-gradient(from 210deg,#00cfff,#a600ff,#ff006e,#ff8800,#00cfff);
  box-shadow:0 0 8px rgba(166,0,255,.5),inset 0 0 0 1px rgba(255,255,255,.18);
  animation:markSpin 18s linear infinite;
}
.nxg3-page-bar-brand .nxg3-brand-logo{
  height:18px;width:auto;display:block;
}
.nxg3-page-bar-actions{
  display:flex;align-items:center;gap:6px;
}
.nxg3-page-bar-explore{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  background:transparent;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  color:#f5ece2;
  font:500 13px/1 inherit;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.nxg3-page-bar-explore:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.30);
}
.nxg3-page-bar-explore svg{
  width:11px;height:11px;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.nxg3-page-bar-explore.nxg3-is-open svg{
  transform:rotate(180deg);
}
.nxg3-page-bar-link{
  padding:8px 10px;
  color:var(--nxg3-ink-dim);
  font:500 13px/1 inherit;
  border-radius:8px;
  white-space:nowrap;
  transition:color .25s ease, background .25s ease;
}
.nxg3-page-bar-link:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}
.nxg3-page-bar-cta{
  padding:8px 16px;
  background:linear-gradient(120deg,#c471ed 0%,#ff5fae 50%,#ff9158 100%);
  color:#fff;
  border-radius:999px;
  font:600 13px/1 inherit;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .2s ease, filter .2s ease, box-shadow .25s ease;
  box-shadow:0 4px 14px rgba(196,113,237,.30);
}
.nxg3-page-bar-cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:0 8px 22px rgba(196,113,237,.45);
}
@media(max-width:760px){
  .nxg3-page-bar{ top:10px; max-width:calc(100vw - 20px); }
  .nxg3-page-bar-inner{ gap:8px; }
  .nxg3-page-bar-brand{ font-size:13px; padding:0 8px; }
  .nxg3-page-bar-explore, .nxg3-page-bar-cta{ font-size:12px; padding:7px 12px; }
  .nxg3-page-bar-link{ font-size:12px; padding:7px 8px; }
}

/* ============================================================
   EXPLORE MODAL — Apple iPhone-Pro-style mega-menu.
   Öffnet sich beim Klick auf "Entdecken" in der Page-Bar.
   Cross-Sell-Cards + Akt-Anker + Tiefen-Page-Links.
   ============================================================ */
.nxg3-explore-modal{
  position:fixed;inset:0;
  z-index:200;
  display:flex;align-items:flex-start;justify-content:center;
  padding:74px 24px 40px;
  opacity:0;visibility:hidden;
  pointer-events:none;
  transition:opacity .35s cubic-bezier(.16,1,.3,1),
             visibility 0s linear .35s;
}
.nxg3-explore-modal.nxg3-is-open{
  opacity:1;visibility:visible;
  pointer-events:auto;
  transition:opacity .35s cubic-bezier(.16,1,.3,1),
             visibility 0s linear 0s;
}
.nxg3-explore-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(7,7,10,.78);
  backdrop-filter:saturate(160%) blur(24px);
  -webkit-backdrop-filter:saturate(160%) blur(24px);
}
.nxg3-explore-modal-card{
  position:relative;
  z-index:1;
  width:min(960px,100%);
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  background:rgba(15,15,18,.97);
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  padding:36px 44px 32px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  font-family:"Geist","SF Pro Display",-apple-system,sans-serif;
  transform:translateY(-12px);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  scrollbar-width:thin;
}
.nxg3-explore-modal.nxg3-is-open .nxg3-explore-modal-card{
  transform:translateY(0);
}
.nxg3-explore-modal-close{
  position:absolute;
  top:18px;right:18px;
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:none;
  color:#f5ece2;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s ease, transform .35s ease;
  z-index:2;
}
.nxg3-explore-modal-close:hover{
  background:rgba(255,255,255,.14);
  transform:rotate(90deg);
}
.nxg3-explore-modal-close svg{ width:16px;height:16px; }

/* Cross-Sell Cards */
.nxg3-explore-modal-products{
  display:flex;gap:12px;
  overflow-x:auto;
  padding:0 4px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:24px;
  scrollbar-width:thin;
}
.nxg3-explore-product{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;
  gap:6px;
  padding:14px 22px;
  text-decoration:none;
  color:rgba(245,236,226,.65);
  border-radius:14px;
  transition:background .2s ease, color .2s ease;
  min-width:118px;
}
.nxg3-explore-product:hover{
  background:rgba(255,255,255,.04);
  color:#f5ece2;
}
.nxg3-explore-product.nxg3-is-current{
  color:#f5ece2;
  background:rgba(255,255,255,.04);
}
.nxg3-explore-product-icon{
  width:54px;height:54px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#f5ece2;
}
.nxg3-explore-product-icon .nxg3-brand-logo{
  height:32px;width:auto;display:block;
}
.nxg3-explore-product-icon .nxg3-mark{
  width:32px;height:32px;border-radius:8px;
  background:conic-gradient(from 210deg,#00cfff,#a600ff,#ff006e,#ff8800,#00cfff);
  box-shadow:0 0 18px rgba(166,0,255,.45),inset 0 0 0 1px rgba(255,255,255,.18);
}
.nxg3-explore-product-icon .nxg3-mark.nxg3-mark-mono{
  background:linear-gradient(135deg,#3a3a40,#1a1a1d);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.nxg3-explore-product-name{
  font-size:14px;font-weight:500;letter-spacing:-.005em;
}
.nxg3-explore-product-status{
  font-family:"Geist Mono",ui-monospace,monospace;
  font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.40);
}
.nxg3-explore-product.nxg3-is-current .nxg3-explore-product-status{
  color:#c471ed;
}

/* Product Hero */
.nxg3-explore-modal-hero{
  display:flex;justify-content:space-between;align-items:center;
  gap:32px;flex-wrap:wrap;
  padding:8px 0 26px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:24px;
}
.nxg3-explore-modal-hero h2{
  font-size:clamp(28px,4vw,44px);
  font-weight:600;
  letter-spacing:-.025em;
  margin:0;
  color:#f5ece2;
  line-height:1.05;
}
.nxg3-explore-modal-meta{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.nxg3-explore-modal-price{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;
  font-size:15px;
  color:rgba(245,236,226,.72);
}
.nxg3-explore-modal-cta{
  padding:10px 22px;
  background:linear-gradient(120deg,#c471ed 0%,#ff5fae 50%,#ff9158 100%);
  color:#fff;
  border-radius:999px;
  font:600 14px/1 inherit;
  text-decoration:none;
  transition:transform .2s ease, filter .2s ease, box-shadow .25s ease;
  box-shadow:0 4px 14px rgba(196,113,237,.30);
}
.nxg3-explore-modal-cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:0 8px 22px rgba(196,113,237,.45);
}

/* Tabs */
.nxg3-explore-modal-tabs{
  margin-bottom:18px;
}
.nxg3-explore-tab{
  padding:8px 18px;
  background:rgba(255,255,255,.06);
  border:none;
  border-radius:999px;
  color:#f5ece2;
  font:500 13px/1 inherit;
  cursor:pointer;
  transition:background .2s ease;
}
.nxg3-explore-tab.nxg3-active{
  background:rgba(255,255,255,.12);
}

/* Akt-Grid */
.nxg3-explore-modal-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:6px 20px;
  margin-bottom:22px;
}
.nxg3-explore-anchor{
  display:flex;flex-direction:column;
  gap:4px;
  padding:14px 16px;
  border-radius:12px;
  text-decoration:none;
  color:#f5ece2;
  background:transparent;
  transition:background .2s ease;
  position:relative;
}
.nxg3-explore-anchor:hover{
  background:rgba(255,255,255,.04);
}
.nxg3-explore-anchor.nxg3-is-active{
  background:rgba(196,113,237,.08);
}
.nxg3-explore-anchor.nxg3-is-active::before{
  content:"";
  position:absolute;
  left:0;top:14px;bottom:14px;
  width:2px;
  background:linear-gradient(180deg,#c471ed,#ff5fae);
  border-radius:2px;
}
.nxg3-explore-anchor-num{
  font-family:"Geist Mono",ui-monospace,monospace;
  font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;
  color:#c471ed;
}
.nxg3-explore-anchor-name{
  font-size:15px;font-weight:500;
  letter-spacing:-.005em;
}
.nxg3-explore-anchor-desc{
  font-size:12px;
  color:rgba(245,236,226,.50);
  letter-spacing:-.005em;
}

/* Sekundäre Anker */
.nxg3-explore-modal-secondary{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:18px;
}
.nxg3-explore-anchor-mini{
  padding:6px 12px;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(255,255,255,.10);
  font:500 12px/1 inherit;
  color:rgba(245,236,226,.78);
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.nxg3-explore-anchor-mini:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.20);
  color:#f5ece2;
}

/* Footer Links */
.nxg3-explore-modal-footer{
  display:flex;flex-wrap:wrap;gap:18px 26px;
}
.nxg3-explore-modal-footer a{
  font-family:"Geist Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;
  color:#c471ed;
  text-decoration:none;
  transition:color .2s ease;
}
.nxg3-explore-modal-footer a:hover{
  color:#f5ece2;
}

@media(max-width:760px){
  .nxg3-explore-modal{ padding:60px 12px 24px; }
  .nxg3-explore-modal-card{
    padding:24px 20px 22px;
    max-height:calc(100vh - 80px);
    border-radius:22px;
  }
  .nxg3-explore-modal-hero{
    flex-direction:column;align-items:flex-start;
    gap:14px;
  }
  .nxg3-explore-modal-grid{
    grid-template-columns:1fr;
  }
  .nxg3-explore-modal-products{ padding-bottom:12px; }
  .nxg3-explore-product{ padding:12px 16px; min-width:96px; }
  .nxg3-explore-modal-footer{ gap:14px 20px; }
}

/* Body lock when modal open */
body.nxg3-explore-open{ overflow:hidden; }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .nxg3-page-bar, .nxg3-explore-modal, .nxg3-explore-modal-card,
  .nxg3-page-bar-explore svg, .nxg3-explore-modal-close{
    transition-duration:.15s !important;
  }
  .nxg3-page-bar-brand .nxg3-mark{ animation:none !important; }
}

/* ============================================================
   HERO — strictly centered, antigravity-inspired typo + vortex.
   Layout: eyebrow & spec at top split, monumental centered headline
   in the middle (Geist Sans bold + Instrument-Serif-italic accents),
   three app CTAs (Web/iOS/Android), scroll hint at bottom-center.
   Background: a 3D spark-vortex canvas spiraling outward from center,
   reactive to the mouse. The Gen3 folio watermark stays bottom-right.
   ============================================================ */
.nxg3-hero{
  position:relative;z-index:2;
  min-height:100dvh;
  display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;
  /* Symmetrisches vertikales Padding → echte Mitte (Y=50%).
     .hero-top und .hero-scroll sind absolute platziert (siehe unten),
     also blockieren sie den Mittelpunkt nicht mehr. */
  padding:max(calc(var(--nxg3-nav-h) + 6vh), 14vh) clamp(20px,4vw,52px);
  overflow:hidden;
  isolation:isolate;
}
/* Single soft ambient — two muted glows that drift very slowly.
   Restraint over decoration: this is atmosphere, not effect. */
.nxg3-hero-ambient{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  will-change:transform;
}
.nxg3-hero-ambient::before,
.nxg3-hero-ambient::after{
  content:'';position:absolute;border-radius:50%;
  filter:blur(90px);
}
.nxg3-hero-ambient::before{
  width:90vw;height:90vw;max-width:1300px;max-height:1300px;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(166,0,255,.20) 0%, transparent 65%);
  opacity:.55;
}
.nxg3-hero-ambient::after{
  width:70vw;height:70vw;max-width:900px;max-height:900px;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(0,207,255,.14) 0%, transparent 65%);
  opacity:.40;
}
/* Vortex canvas — 3D spark-stream behind everything except ambient.
   Click-through, fades in with the title reveal. */
.nxg3-hero-vortex{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;display:block;
  opacity:0;
  transition:opacity 1.4s cubic-bezier(.16,1,.3,1) .15s;
}
.nxg3-hero.nxg3-is-revealed .nxg3-hero-vortex{ opacity:1 }
/* Cover-only folio mark — oversized italic Instrument Serif at
   minimal opacity. Magazine masthead, not decoration. */
.nxg3-hero-folio{
  position:absolute;
  right:clamp(-2.5rem,-2vw,-1rem);
  bottom:-5vh;
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;font-weight:400;
  font-size:clamp(13rem,32vw,34rem);
  line-height:.82;letter-spacing:-.06em;
  color:#fff;opacity:.038;
  pointer-events:none;user-select:none;
  z-index:1;white-space:nowrap;
}

/* Top row — eyebrow left, editorial spec countdown right.
   Absolute platziert, damit .hero-center wirklich vertikal mittig sein kann.
   Top-Wert identisch zum (nun symmetrischen) Padding-Top, also bleibt die
   Eyebrow/Spec-Position visuell wie vorher. */
.nxg3-hero-top{
  position:absolute;
  top:max(calc(var(--nxg3-nav-h) + 6vh), 14vh);
  left:clamp(20px,4vw,52px);
  right:clamp(20px,4vw,52px);
  z-index:3;
  display:flex;justify-content:space-between;align-items:center;
  gap:1.25rem;flex-wrap:wrap;
}
.nxg3-hero-eyebrow{
  display:inline-flex;align-items:center;gap:1rem;
  font:500 .72rem/1 "Geist Mono",monospace;
  letter-spacing:.30em;text-transform:uppercase;
  color:var(--nxg3-ink-dim);
  opacity:0;
}
.nxg3-hero-eyebrow::before{
  content:'';width:60px;height:1px;
  background:linear-gradient(90deg, transparent, #c471ed 55%, #c471ed);
}
/* ── KEYNOTE-COUNTDOWN — Glas-Panel mit Aurora-Rand im Hero.
      Ersetzt den früheren Mini-Ticker oben rechts (zu unauffällig).
      Ziffern rollen beim Wechsel vertikal, Live-Dot pulsiert. ── */
.nxg3-keynote{
  position:relative;
  margin-top:clamp(8px,1.4vh,20px);
  display:inline-flex;flex-direction:column;align-items:center;gap:13px;
  padding:20px 34px 18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(18,15,26,.55), rgba(8,7,12,.38));
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:0 18px 60px rgba(0,0,0,.45), 0 0 42px rgba(166,0,255,.10);
  opacity:0;
}
.nxg3-keynote::before{
  content:"";position:absolute;inset:0;border-radius:22px;padding:1px;
  background:linear-gradient(120deg, rgba(0,207,255,.55), rgba(166,0,255,.5) 38%, rgba(255,0,110,.5) 72%, rgba(255,136,0,.55));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:.55;
  pointer-events:none;
}
.nxg3-keynote-live{
  display:inline-flex;align-items:center;gap:9px;
  font:500 .66rem/1 "Geist Mono",monospace;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--nxg3-ink-dim);
}
.nxg3-keynote-dot{
  width:8px;height:8px;border-radius:50%;
  background:#ff3b5c;box-shadow:0 0 12px rgba(255,59,92,.9);
  animation:nxg3KnPulse 1.8s ease-in-out infinite;
}
@keyframes nxg3KnPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.55}}
.nxg3-keynote-timer{
  display:flex;align-items:flex-start;gap:clamp(10px,1.6vw,18px);
  font-variant-numeric:tabular-nums;
}
.nxg3-kn-unit{display:flex;flex-direction:column;align-items:center;gap:7px}
.nxg3-kn-digits{
  position:relative;overflow:hidden;display:block;
  height:1.08em;min-width:2.1ch;
  font:600 clamp(2rem,4.6vw,3.2rem)/1.05 "Geist",sans-serif;
  letter-spacing:-.02em;color:#fff;
  text-shadow:0 0 26px rgba(166,108,255,.35);
}
.nxg3-kn-roll{
  position:absolute;inset:0;display:flex;justify-content:center;
  transition:transform .4s var(--nxg3-ease-slow),opacity .4s var(--nxg3-ease-slow);
}
.nxg3-kn-enter{transform:translateY(72%);opacity:0}
.nxg3-kn-exit{transform:translateY(-72%);opacity:0}
.nxg3-kn-label{
  font:500 .58rem/1 "Geist Mono",monospace;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--nxg3-ink-faint);
}
.nxg3-kn-colon{
  font:600 clamp(1.6rem,3.6vw,2.5rem)/1.3 "Geist",sans-serif;
  color:rgba(255,255,255,.25);
  animation:nxg3KnBlink 2s ease-in-out infinite;
}
@keyframes nxg3KnBlink{0%,100%{opacity:.25}50%{opacity:.6}}
.nxg3-keynote-date{
  font-size:.85rem;color:var(--nxg3-ink-dim);letter-spacing:.01em;
}
.nxg3-keynote-date b{color:var(--nxg3-ink);font-weight:500}
/* Livestream-Knopf: vor dem Event dezent-glasig, ab Eventbeginn rot und
   pulsierend. Beide Beschriftungen liegen im Markup, umgeschaltet wird
   allein ueber die Klasse .nxg3-live, die das Countdown-Script setzt. */
.nxg3-keynote-cta{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:2px;padding:10px 20px 10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  font:500 .84rem/1 "Geist",sans-serif;letter-spacing:-.01em;
  color:var(--nxg3-ink);text-decoration:none;
  transition:background .3s ease,border-color .3s ease,transform .3s var(--nxg3-ease-soft),box-shadow .3s ease;
}
.nxg3-keynote-cta:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.32);
  transform:translateY(-2px);
}
.nxg3-kn-cta-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:#ff3b5c;color:#fff;
  box-shadow:0 0 14px rgba(255,59,92,.55);
}
.nxg3-kn-cta-ico svg{width:9px;height:9px;margin-left:1px}
.nxg3-kn-cta-live{display:none}
.nxg3-keynote.nxg3-live .nxg3-kn-cta-pre{display:none}
.nxg3-keynote.nxg3-live .nxg3-kn-cta-live{display:inline}
.nxg3-keynote.nxg3-live .nxg3-keynote-cta{
  background:linear-gradient(120deg,#ff3b5c,#ff6a4d);
  border-color:transparent;color:#fff;
  box-shadow:0 10px 30px rgba(255,59,92,.35);
  animation:nxg3KnCta 2.4s ease-in-out infinite;
}
@keyframes nxg3KnCta{0%,100%{box-shadow:0 10px 30px rgba(255,59,92,.35)}50%{box-shadow:0 10px 42px rgba(255,59,92,.62)}}
.nxg3-kn-livemsg{
  font:600 clamp(1.5rem,3.4vw,2.2rem)/1.2 "Geist",sans-serif;color:#fff;
}
@media(max-width:640px){
  .nxg3-keynote{padding:15px 16px 13px;border-radius:18px;margin-top:6px;max-width:100%}
  .nxg3-keynote-timer{gap:9px}
  .nxg3-kn-digits{font-size:1.6rem}
  .nxg3-kn-colon{font-size:1.25rem}
  .nxg3-keynote-date{font-size:.78rem}
  .nxg3-keynote-cta{font-size:.8rem;padding:9px 16px 9px 12px}
}
@media(prefers-reduced-motion:reduce){
  .nxg3-keynote-dot,.nxg3-kn-colon,.nxg3-keynote.nxg3-live .nxg3-keynote-cta{animation:none}
  .nxg3-kn-roll{transition:none}
}

/* Center stack — title, sub, CTAs all centered horizontally */
.nxg3-hero-center{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(1.4rem,2.4vw,2.2rem);
  margin:auto 0;
  max-width:1180px;width:100%;
  pointer-events:auto;
}

/* Title — three-act cinematic intro.
   All three phases (acts) are stacked in the same grid cell. GSAP
   orchestrates them: each phase fades in word-by-word with blur-lift,
   holds, then blurs out — except the final phase ("NEXIQA Gen3.")
   which stays. Pure typography, the drama is in the timing & words. */
.nxg3-hero-title{
  position:relative;
  display:grid;
  font-family:"Geist","SF Pro Display",-apple-system,sans-serif;
  font-size:clamp(2.6rem, 7.6vw, 7.8rem);
  font-weight:600;
  line-height:.96;
  letter-spacing:-.045em;
  color:var(--nxg3-ink);
  margin:0;
  text-wrap:balance;
  font-feature-settings:"kern" 1, "calt" 1, "ss01" 1, "ss02" 1;
  -webkit-font-smoothing:antialiased;
}
/* All phases overlap in the same grid cell — GSAP fades between them */
.nxg3-hero-line{
  grid-area:1 / 1;
  display:block;
  text-align:center;
  text-wrap:balance;
  opacity:0;
  will-change:opacity, filter, transform;
}
.nxg3-hero-line .nxg3-word{
  display:inline-block;
  will-change:opacity, filter, transform;
}
/* Editorial italics for Schlüsselwörter — alle drei Akte teilen die
   gleiche typografische Sprache (Instrument Serif, kursiv). Akt 1+2
   bleiben weiß (per default vom h1), Akt 3 ("Gen3") wird lila — der
   einzige farbige Moment im Hero, der Wow-Reveal. */
.nxg3-hero-line em{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;font-weight:400;
  margin:0 .04em;
  letter-spacing:-.01em;
}
/* Final act — single editorial flourish on "Gen3"
   align-self:end pinnt die Final-Zeile an den unteren Rand des Grid-Cells.
   Die Cell-Höhe richtet sich nach dem längsten Akt-Text (Akt 1 oder 2),
   die Final-Zeile selbst ist aber immer nur 1 Zeile — ohne align-self:end
   würde sie mittig im 2-Zeilen-Cell schweben und vom Sub-Text wegrücken. */
.nxg3-hero-line--final{
  align-self:end;
}
.nxg3-hero-line--final em{
  color:#c471ed;
}

/* Sub — supporting line, fades in AFTER the final phase settles */
.nxg3-hero-sub{
  font-size:clamp(1.05rem, 1.4vw, 1.25rem);
  line-height:1.55;
  color:var(--nxg3-ink-dim);
  font-weight:400;
  letter-spacing:-.005em;
  max-width:48ch;
  margin:.2rem auto 0;
  opacity:0;
  text-wrap:balance;
}
.nxg3-hero-sub em{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;font-weight:400;
  color:#fff;
  margin:0 .04em;
}

/* Three app CTAs — one primary (Web), two store ghost buttons */
.nxg3-hero-ctas{
  display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;
  opacity:0;
  transition:opacity 1s ease;
}
.nxg3-hero-cta{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.95rem 1.45rem;
  border-radius:999px;
  font:500 .92rem/1 "Geist",sans-serif;
  letter-spacing:-.005em;
  background:rgba(255,255,255,.06);
  border:1px solid var(--nxg3-line-strong);
  color:#fff;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .4s var(--nxg3-ease-soft),
             background .3s ease,
             border-color .3s ease,
             box-shadow .4s var(--nxg3-ease-soft);
  will-change:transform;
}
.nxg3-hero-cta:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.28);
  transform:translateY(-1px);
}
.nxg3-hero-cta--primary{
  background:#fff;color:#000;
  border-color:transparent;
}
.nxg3-hero-cta--primary:hover{
  background:#fff;color:#000;
  box-shadow:0 14px 40px -10px rgba(255,255,255,.35);
}
.nxg3-hero-cta svg{width:16px;height:16px;flex-shrink:0}
.nxg3-hero-cta .nxg3-arrow{transition:transform .4s var(--nxg3-ease-spring)}
.nxg3-hero-cta:hover .nxg3-arrow{transform:translateX(3px)}

/* Scroll hint at the very bottom, centered */
/* Scroll-indicator — absolute am unteren Rand, damit .hero-center
   echt vertikal zentriert sein kann (Y=50%). */
.nxg3-hero-scroll{
  position:absolute;
  bottom:5vh;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  font:500 .68rem/1 "Geist Mono",monospace;
  letter-spacing:.30em;text-transform:uppercase;
  color:var(--nxg3-ink-faint);
  display:inline-flex;align-items:center;gap:.85rem;
  opacity:0;
  transition:opacity 1s ease, color .3s ease;
}
.nxg3-hero-scroll:hover{color:var(--nxg3-ink-dim)}
.nxg3-hero-scroll svg{
  width:13px;height:13px;
  animation:heroScrollFloat 2.4s ease-in-out infinite;
}
@keyframes heroScrollFloat{
  0%,100%{transform:translateY(0)}
  50%   {transform:translateY(5px)}
}

@media (max-width:760px){
  .nxg3-hero{padding:max(calc(var(--nxg3-nav-h) + 6vh), 14vh) clamp(20px,5vw,28px) 4vh}
  .nxg3-hero-folio{font-size:clamp(9rem,42vw,18rem);bottom:-3vh;right:-1.25rem}
  .nxg3-hero-top{flex-direction:column;gap:.6rem}
  .nxg3-hero-cta{padding:.85rem 1.2rem;font-size:.86rem}
}

@media (prefers-reduced-motion:reduce){
  /* Skip the cinematic intro — show only the final act */
  .nxg3-hero-line[data-phase="1"],
  .nxg3-hero-line[data-phase="2"]{ display:none }
  .nxg3-hero-line[data-phase="3"]{ opacity:1 }
  .nxg3-hero-line .nxg3-word{ opacity:1 !important; filter:none !important; transform:none !important }
  .nxg3-hero-eyebrow,.nxg3-keynote,.nxg3-hero-sub,.nxg3-hero-ctas,.nxg3-hero-scroll{opacity:1}
  .nxg3-hero-vortex{display:none}
}

/* ============================================================
   SECTION BASE
   ============================================================ */
.nxg3-sec{
  position:relative;z-index:2;
  width:100%;max-width:var(--nxg3-max-w);
  margin:0 auto;
  padding:clamp(80px,12vh,160px) 24px;
}
.nxg3-sec-wide{max-width:none;padding-left:0;padding-right:0}
.nxg3-sec-head{max-width:780px;margin:0 auto 60px;text-align:center}
.nxg3-sec-head .nxg3-lead{margin:1.2rem auto 0}

/* Reveal-on-scroll base */
.nxg3-reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--nxg3-ease-soft),transform 1.2s var(--nxg3-ease-soft)}
.nxg3-reveal.nxg3-in{opacity:1;transform:translateY(0)}
.nxg3-reveal-delay-1{transition-delay:.1s}
.nxg3-reveal-delay-2{transition-delay:.2s}
.nxg3-reveal-delay-3{transition-delay:.3s}

/* ============================================================
   COACH — zertifizierte Coaches finden / Coach werden
   Editorial-Split: links Features, rechts illustrative Profilkarte
   im App-Look. Reveals laufen über das globale .nxg3-reveal-System.
   ============================================================ */
.nxg3-coach-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,72px);
  align-items:center;
  max-width:1060px;margin:56px auto 0;padding:0 24px;
}
.nxg3-coach-feats{display:flex;flex-direction:column;gap:28px;text-align:left}
.nxg3-coach-feat h4{
  font:600 1rem/1.3 "Geist",sans-serif;color:var(--nxg3-ink);
  margin-bottom:8px;letter-spacing:-.01em;
}
.nxg3-coach-feat p{font-size:.98rem;line-height:1.6;color:var(--nxg3-ink-dim);max-width:52ch}
.nxg3-coach-card{
  border-radius:20px;border:1px solid var(--nxg3-line-strong);
  background:linear-gradient(180deg, rgba(12,14,20,.72), rgba(8,9,14,.5));
  backdrop-filter:blur(22px) saturate(1.1);
  -webkit-backdrop-filter:blur(22px) saturate(1.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 20px 60px rgba(0,0,0,.5);
  padding:28px 26px 26px;
  max-width:380px;margin:0 auto;width:100%;
  text-align:left;
}
.nxg3-coach-card-head{display:flex;align-items:center;gap:12px}
.nxg3-coach-ava{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 30% 30%, #6ec6ff, #a66cff 72%);
  box-shadow:0 0 18px rgba(110,198,255,.4);
}
.nxg3-coach-name{
  font:600 1.02rem/1.2 "Geist",sans-serif;color:var(--nxg3-ink);
  display:flex;align-items:center;gap:6px;
}
.nxg3-coach-name svg{width:15px;height:15px;color:#6ec6ff}
.nxg3-coach-handle{
  display:block;margin-top:3px;
  font:500 .72rem/1 "Geist Mono",monospace;letter-spacing:.04em;
  color:var(--nxg3-ink-faint);
}
.nxg3-coach-badge{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:18px;padding:9px 13px;border-radius:999px;
  border:1px solid rgba(110,198,255,.35);background:rgba(110,198,255,.10);
  font:500 .72rem/1.2 "Geist Mono",monospace;letter-spacing:.05em;text-transform:uppercase;
  color:#9dd8ff;
}
.nxg3-coach-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.nxg3-coach-tags span{
  padding:6px 11px;border-radius:999px;border:1px solid var(--nxg3-line);
  font-size:.78rem;color:var(--nxg3-ink-dim);
}
.nxg3-coach-stats{display:flex;gap:26px;margin-top:20px;padding-top:16px;border-top:1px solid var(--nxg3-line)}
.nxg3-coach-stats b{display:block;font:600 1.15rem/1 "Geist",sans-serif;color:var(--nxg3-ink);margin-bottom:5px}
.nxg3-coach-stats span{font:500 .6rem/1.3 "Geist Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--nxg3-ink-faint)}
.nxg3-coach-cta-pill{
  margin-top:22px;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 18px;border-radius:999px;background:#f5f5f7;color:#000;
  font:600 .92rem/1 "Geist",sans-serif;letter-spacing:-.01em;
}
.nxg3-coach-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:52px}
.nxg3-coach-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:999px;
  font:600 .95rem/1 "Geist",sans-serif;letter-spacing:-.01em;
  border:1px solid var(--nxg3-line-strong);color:var(--nxg3-ink);
  transition:border-color .3s var(--nxg3-ease-soft),background .3s var(--nxg3-ease-soft),transform .3s var(--nxg3-ease-soft);
}
.nxg3-coach-btn:hover{border-color:rgba(255,255,255,.4);transform:translateY(-1px)}
.nxg3-coach-btn--primary{background:#f5f5f7;color:#000;border-color:transparent}
.nxg3-coach-btn--primary:hover{background:#fff}
@media(max-width:900px){
  .nxg3-coach-grid{grid-template-columns:1fr}
  .nxg3-coach-card{max-width:420px}
}


/* ============================================================
   SPECIALISTS  (bento grid)
   ============================================================ */
.nxg3-specialists-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(140px,auto);
  gap:14px;margin-top:40px;
}
.nxg3-spec-card{
  position:relative;overflow:hidden;
  border:1px solid var(--nxg3-line);border-radius:24px;
  background:linear-gradient(145deg,#101013,#07070a);
  padding:28px;
  transition:transform .5s var(--nxg3-ease-soft),border-color .4s ease,box-shadow .5s var(--nxg3-ease-soft);
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:200px;
}
.nxg3-spec-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.08),transparent 60%);
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.nxg3-spec-card:hover::before{opacity:1}
.nxg3-spec-card:hover{
  transform:translateY(-3px);
  border-color:var(--nxg3-line-strong);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04);
}
.nxg3-spec-card .nxg3-icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--c1,#00cfff),var(--c2,#a600ff));
  color:#fff;box-shadow:0 8px 24px -4px rgba(0,0,0,.6);
}
.nxg3-spec-card .nxg3-icon svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nxg3-spec-card h3{
  font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin:18px 0 6px;color:#fff;
}
.nxg3-spec-card p{font-size:.92rem;color:var(--nxg3-ink-dim);line-height:1.5}
.nxg3-spec-card .nxg3-tag{
  position:absolute;top:18px;right:18px;
  font:500 .62rem/1 "Geist Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--nxg3-ink-faint);
  padding:5px 9px;border:1px solid var(--nxg3-line-strong);border-radius:999px;
  background:rgba(0,0,0,.4);backdrop-filter:blur(8px);
}
/* Sizing: 2×2 bento */
.nxg3-spec-card.nxg3-c-lg{grid-column:span 6;grid-row:span 2;min-height:320px}
.nxg3-spec-card.nxg3-c-md{grid-column:span 6;grid-row:span 1}
.nxg3-spec-card.nxg3-c-sm{grid-column:span 4;grid-row:span 1}
.nxg3-spec-card.nxg3-c-xs{grid-column:span 3;grid-row:span 1}
.nxg3-spec-card.nxg3-c-wide{grid-column:span 8}
.nxg3-spec-card.nxg3-c-narrow{grid-column:span 4}

@media(max-width:900px){
  .nxg3-specialists-grid{grid-template-columns:repeat(2,1fr)}
  .nxg3-spec-card.nxg3-c-lg,.nxg3-spec-card.nxg3-c-md,.nxg3-spec-card.nxg3-c-sm,.nxg3-spec-card.nxg3-c-xs,.nxg3-spec-card.nxg3-c-wide,.nxg3-spec-card.nxg3-c-narrow{
    grid-column:span 2;grid-row:auto;min-height:180px;
  }
}

/* Animated background inside large spec cards */
.nxg3-spec-card.nxg3-c-lg{padding:34px}
.nxg3-spec-card.nxg3-c-lg::after{
  content:"";position:absolute;right:-40%;top:-30%;
  width:80%;height:160%;
  background:radial-gradient(circle,var(--c1),transparent 60%);
  filter:blur(60px);opacity:.28;pointer-events:none;
  animation:orbDrift 16s ease-in-out infinite;
}
@keyframes orbDrift{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-40px,30px)}
}


/* ============================================================
   TX-INTRO  —  Apple-grade cinematic blur intro that announces
   each of the three feature pillars. Centered monumental layout.
   Italic accent words use the EXACT gradient of the section that
   follows, so the visual mood carries over with no seam at the
   handoff. The bottom of the intro fades to the section's exact
   background colour (not generic black) — the next section's own
   top fade then continues the gradient invisibly.
   Animation timings (blur, nth-child cascade, delays) are kept
   byte-identical to the reference Cinematic-Blur templates.
   ============================================================ */
.nxg3-tx-intro{
  --tx-accent:     #ff9d6a;
  --tx-gradient:   linear-gradient(115deg, #ffa86a 0%, #ff5fae 50%, #a66cff 100%);
  --tx-text-dim:   rgba(245,245,247,.62);
  --tx-text-faint: rgba(245,245,247,.30);
  --tx-bg-out:     #000;

  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:18vh clamp(20px, 4vw, 64px) 22vh;
  background:#000;
  color:var(--nxg3-ink);
  isolation:isolate;
  overflow:hidden;
}

/* Per-pillar palette + atmospheric tint.
   Each variant gets a subtle radial-gradient ATMOSPHERE in the mood
   of the section that follows (warm peach/violet for Bio-ID, fire
   for Lagerfeuer, cool indigo for Radar). The intro's plain black
   gets a barely-there warm/cool wash, so when the user enters the
   real section the colour temperature is already established.
   The italic accent words use the EXACT gradient of the section's
   own headlines — so the handoff is colour-continuous.
   IMPORTANT: bottom fade always goes to PURE BLACK (#000), because
   each pinned section starts with its own ::before overlay that
   fades from #000 to its bg colour. Black-to-black at the seam is
   invisible; if we faded to the section's tinted colour instead,
   we'd get a visible mismatch at the join. */
.nxg3-tx-intro--bioid{
  --tx-accent:    #ff9d6a;
  --tx-gradient:  linear-gradient(115deg, #ffa86a 0%, #ff5fae 50%, #a66cff 100%);
  background:
    radial-gradient(80rem 60rem at 50% 60%, rgba(255,168,106,.045), transparent 65%),
    radial-gradient(70rem 50rem at 80% 30%, rgba(166,108,255,.030), transparent 60%),
    #000;
}
.nxg3-tx-intro--lagerfeuer{
  --tx-accent:    #ff7828;
  --tx-gradient:  linear-gradient(115deg, #ffb36a 0%, #ff7828 55%, #d14220 100%);
  background:
    radial-gradient(80rem 60rem at 50% 60%, rgba(255,120,40,.060), transparent 65%),
    radial-gradient(70rem 50rem at 20% 30%, rgba(120,40,0,.040), transparent 60%),
    #000;
}
.nxg3-tx-intro--shield{
  --tx-accent:    #6ec6ff;
  --tx-gradient:  linear-gradient(115deg, #6ec6ff 0%, #7ea8ff 55%, #a66cff 100%);
  background:
    radial-gradient(80rem 60rem at 50% 60%, rgba(110,198,255,.045), transparent 65%),
    radial-gradient(70rem 50rem at 20% 30%, rgba(126,168,255,.030), transparent 60%),
    #000;
}
/* ============================================================
   SHIELD-SIMULATION — animierte Anfrage-Pipeline.
   Du-Karte → Shield-Ring (Identität bleibt zurück, Tag flippt
   Du→NEXIQA) → externes Modell → Antwort zurück. Zeitgesteuerter
   Loop (kein Scroll-Pinning), pausiert außerhalb des Viewports.
   Chip-Bewegung: JS misst Stationspositionen, CSS-Transition auf
   transform animiert (keine Layout-Props).
   ============================================================ */
.nxg3-shieldsim{position:relative;padding-top:0}
.nxg3-shieldsim-stage{
  position:relative;
  max-width:960px;margin:44px auto 0;
  min-height:300px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:24px 8px;
}
.nxg3-shieldsim-node{
  position:relative;z-index:2;
  width:200px;padding:18px 18px 16px;
  border-radius:18px;border:1px solid var(--nxg3-line-strong);
  background:linear-gradient(180deg, rgba(14,15,20,.8), rgba(8,9,12,.6));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 16px 46px rgba(0,0,0,.45);
  text-align:center;
  transition:border-color .4s var(--nxg3-ease-soft),box-shadow .4s var(--nxg3-ease-soft);
}
.nxg3-shieldsim-node.nxg3-hot{border-color:rgba(110,198,255,.5);box-shadow:0 0 34px rgba(110,198,255,.18), inset 0 0 0 1px rgba(255,255,255,.04)}
.nxg3-shieldsim-node .nxg3-ava{
  width:40px;height:40px;border-radius:50%;margin:0 auto 10px;
  background:radial-gradient(circle at 30% 30%, #ff9158, #a66cff 72%);
  box-shadow:0 0 16px rgba(255,145,88,.4);
}
.nxg3-shieldsim-node--ai .nxg3-ava{
  border-radius:12px;
  background:linear-gradient(135deg,#2a3040,#12151d);
  border:1px solid var(--nxg3-line-strong);
  box-shadow:none;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;
}
.nxg3-shieldsim-node h5{font:600 .95rem/1.2 "Geist",sans-serif;color:var(--nxg3-ink);margin-bottom:4px}
.nxg3-shieldsim-node p{font:500 .62rem/1.5 "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--nxg3-ink-faint)}
.nxg3-shieldsim-proc{display:inline-flex;gap:4px;margin-top:8px;opacity:0;transition:opacity .3s}
.nxg3-shieldsim-node.nxg3-hot .nxg3-shieldsim-proc{opacity:1}
.nxg3-shieldsim-proc span{width:5px;height:5px;border-radius:50%;background:#6ec6ff;animation:nxg3SsDot 1s ease-in-out infinite}
.nxg3-shieldsim-proc span:nth-child(2){animation-delay:.15s}
.nxg3-shieldsim-proc span:nth-child(3){animation-delay:.3s}
@keyframes nxg3SsDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}

/* Shield-Ring (Mitte) */
.nxg3-shieldsim-ring{
  position:relative;z-index:2;flex:0 0 auto;
  width:128px;height:128px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.nxg3-shieldsim-ring::before{
  content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;
  background:conic-gradient(from 0deg, rgba(0,207,255,.7), rgba(166,0,255,.6), rgba(255,0,110,.55), rgba(0,207,255,.7));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
.nxg3-shieldsim-ring::after{
  content:"";position:absolute;inset:10px;border-radius:50%;
  background:radial-gradient(circle, rgba(110,198,255,.10), transparent 70%);
  transition:opacity .3s;
}
.nxg3-shieldsim-ring .nxg3-ico{font-size:1.5rem;line-height:1}
.nxg3-shieldsim-ring .nxg3-lbl{font:500 .56rem/1 "Geist Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--nxg3-ink-dim)}
.nxg3-shieldsim-ring{transition:transform .45s var(--nxg3-ease-spring)}
.nxg3-shieldsim-ring.nxg3-pulse{transform:scale(1.12)}
.nxg3-shieldsim-ring.nxg3-pulse::after{opacity:1}

/* Leitbahnen (marching dashes, laufen nur bei .nxg3-run) */
.nxg3-shieldsim-lane{
  position:relative;flex:1;height:2px;z-index:1;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 8px, transparent 8px 16px);
  background-size:16px 2px;
  opacity:.5;
}
.nxg3-shieldsim.nxg3-run .nxg3-shieldsim-lane{animation:nxg3SsLane 1.2s linear infinite}
@keyframes nxg3SsLane{to{background-position:16px 0}}

/* Der Nachrichten-Chip */
.nxg3-shieldsim-chip{
  position:absolute;top:0;left:0;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:999px;
  border:1px solid var(--nxg3-line-strong);
  background:rgba(24,25,32,.92);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  font:500 .8rem/1 "Geist",sans-serif;color:var(--nxg3-ink);
  white-space:nowrap;
  opacity:0;
  transition:transform 1.15s var(--nxg3-ease-slow),opacity .35s var(--nxg3-ease-soft),border-color .4s,background .4s;
  will-change:transform;
}
.nxg3-shieldsim-chip.nxg3-vis{opacity:1}
.nxg3-shieldsim-chip.nxg3-anon{border-color:rgba(110,198,255,.45);background:rgba(14,24,34,.94)}
.nxg3-shieldsim-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:999px;
  font:500 .6rem/1 "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.1);color:var(--nxg3-ink-dim);
  transition:background .35s,color .35s;
}
.nxg3-shieldsim-chip.nxg3-anon .nxg3-shieldsim-tag{background:rgba(110,198,255,.16);color:#9dd8ff}

/* Status-Zeile */
.nxg3-shieldsim-status{
  margin:26px auto 0;max-width:640px;text-align:center;
  font:500 .78rem/1.6 "Geist Mono",monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--nxg3-ink-dim);
  min-height:2.4em;
  transition:opacity .3s var(--nxg3-ease-soft);
}
.nxg3-shieldsim-status b{color:#9dd8ff;font-weight:500}
.nxg3-shieldsim-status.nxg3-swap{opacity:0}

/* Mobile: Pipeline vertikal */
@media(max-width:640px){
  .nxg3-shieldsim-stage{
    flex-direction:column;min-height:0;gap:14px;
    margin-top:32px;padding:12px 0;
  }
  .nxg3-shieldsim-node{width:min(100%,300px);padding:14px 16px 13px}
  .nxg3-shieldsim-node .nxg3-ava{width:34px;height:34px;margin-bottom:8px}
  .nxg3-shieldsim-ring{width:104px;height:104px}
  .nxg3-shieldsim-lane{
    flex:0 0 auto;width:2px;height:34px;
    background:repeating-linear-gradient(180deg, rgba(255,255,255,.22) 0 8px, transparent 8px 16px);
    background-size:2px 16px;
  }
  .nxg3-shieldsim.nxg3-run .nxg3-shieldsim-lane{animation:nxg3SsLaneV 1.2s linear infinite}
  .nxg3-shieldsim-status{font-size:.68rem;padding:0 16px}
}
@keyframes nxg3SsLaneV{to{background-position:0 16px}}
@media(prefers-reduced-motion:reduce){
  .nxg3-shieldsim-lane,.nxg3-shieldsim-proc span{animation:none !important}
  .nxg3-shieldsim-chip{transition:none}
  .nxg3-shieldsim-ring{transition:none}
}

.nxg3-tx-intro--radar{
  --tx-accent:    #a66cff;
  --tx-gradient:  linear-gradient(115deg, #ff9158 0%, #ff5fae 45%, #a66cff 85%);
  background:
    radial-gradient(80rem 60rem at 50% 60%, rgba(166,108,255,.040), transparent 65%),
    radial-gradient(70rem 50rem at 80% 30%, rgba(80,200,255,.025), transparent 60%),
    #000;
}

/* Top fade — gentle blend from the previous section (which ends in #000) */
.nxg3-tx-intro::before{
  content:'';
  position:absolute;left:0;right:0;top:0;
  height:20vh;
  background:linear-gradient(to top, transparent, #000);
  pointer-events:none;
  z-index:0;
}
/* Bottom fade — to PURE BLACK so the seam matches the next section's
   own #000 top-overlay. Both sides are black at the seam → invisible. */
.nxg3-tx-intro::after{
  content:'';
  position:absolute;left:0;right:0;bottom:0;
  height:28vh;
  background:linear-gradient(to bottom, transparent, #000);
  pointer-events:none;
  z-index:0;
}

/* Label — centered chapter marker with accent line on BOTH sides */
.nxg3-tx-intro .nxg3-label{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:12px;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--tx-accent);
  display:inline-flex;align-items:center;gap:18px;
  margin-bottom:64px;
  opacity:0;transform:translateY(14px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
  position:relative;z-index:1;
}
.nxg3-tx-intro .nxg3-label::before,
.nxg3-tx-intro .nxg3-label::after{
  content:'';
  width:48px;height:1px;
  background:var(--tx-accent);
  opacity:.65;
}
.nxg3-tx-intro.nxg3-in-view .nxg3-label{ opacity:1;transform:none;transition-delay:0s; }

/* Headline — monumental size on big screens, centered, italic accent
   words use the exact section gradient (background-clip text). */
.nxg3-tx-intro .nxg3-head{
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;
  font-size:clamp(48px, 9vw, 156px);
  line-height:1;
  letter-spacing:-.035em;
  max-width:18ch;
  margin:0 auto;
  color:var(--nxg3-ink);
  text-wrap:balance;
  position:relative;z-index:1;
}
.nxg3-tx-intro .nxg3-head .nxg3-word{
  display:inline-block;
  opacity:0;
  filter:blur(18px);
  transform:translateY(.4em);
  transition:opacity 1.4s cubic-bezier(.16,1,.3,1),
             filter 1.4s cubic-bezier(.16,1,.3,1),
             transform 1.4s cubic-bezier(.16,1,.3,1);
}
.nxg3-tx-intro .nxg3-head .nxg3-word.nxg3-italic{
  font-style:italic;
  background:var(--tx-gradient);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  /* Kursiv-Unterlängen (g) + Rechts-Überhang (f) liegen außerhalb der
     Standard-Textbox; ohne Erweiterung malt background-clip:text sie nicht
     aus → sie wirken abgeschnitten. Padding vergrößert die Malfläche,
     der gleich große negative Margin hält das Layout exakt gleich. */
  padding:0 .12em .1em 0;
  margin:0 -.12em -.1em 0;
  /* CSS `filter` replaces the entire list, so we re-state blur(18px)
     here together with the drop-shadow halo. The drop-shadow gives
     the gradient text a soft glow that reads at 144px without
     looking smudgy at smaller sizes. */
  filter:blur(18px) drop-shadow(0 0 30px rgba(255,140,90,.18));
}
.nxg3-tx-intro.nxg3-in-view .nxg3-head .nxg3-word{ opacity:1; filter:blur(0); transform:none; }
.nxg3-tx-intro.nxg3-in-view .nxg3-head .nxg3-word.nxg3-italic{
  filter:blur(0) drop-shadow(0 0 30px rgba(255,140,90,.18));
}
.nxg3-tx-intro .nxg3-head .nxg3-word:nth-child(1){ transition-delay:.05s }
.nxg3-tx-intro .nxg3-head .nxg3-word:nth-child(2){ transition-delay:.18s }
.nxg3-tx-intro .nxg3-head .nxg3-word:nth-child(3){ transition-delay:.32s }
.nxg3-tx-intro .nxg3-head .nxg3-word:nth-child(4){ transition-delay:.48s }
.nxg3-tx-intro .nxg3-head .nxg3-word:nth-child(5){ transition-delay:.66s }

/* Underline — centered, gradient-coloured, longer for presence */
.nxg3-tx-intro .nxg3-underline{
  margin:60px auto 0;
  height:1px;
  background:var(--tx-gradient);
  width:0;
  max-width:220px;
  transition:width 1.6s 1s cubic-bezier(.16,1,.3,1);
  position:relative;z-index:1;
}
.nxg3-tx-intro.nxg3-in-view .nxg3-underline{ width:220px; }

/* Body — centered, larger on desktop, comfortable reading width */
.nxg3-tx-intro .nxg3-body{
  margin:60px auto 0;
  max-width:62ch;
  font-size:clamp(17px, 1.35vw, 22px);
  line-height:1.6;
  color:var(--tx-text-dim);
  font-family:'Geist','SF Pro Text',-apple-system,sans-serif;
  font-weight:400;
  letter-spacing:-0.005em;
  opacity:0;transform:translateY(14px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
  position:relative;z-index:1;
}
.nxg3-tx-intro .nxg3-body strong{ color:var(--nxg3-ink); font-weight:500; }
.nxg3-tx-intro.nxg3-in-view .nxg3-body{ opacity:1; transform:none; transition-delay:1.1s; }

/* Feature triplet — wider grid, generous gap, text aligned left
   inside cells (multi-line paragraphs are easier to read left-aligned
   even when the section as a whole is centered). */
.nxg3-tx-intro .nxg3-features{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:56px clamp(40px, 4vw, 72px);
  margin:96px auto 0;
  max-width:1180px;
  width:100%;
  position:relative;
  z-index:1;
  text-align:left;
}
.nxg3-tx-intro .nxg3-feature{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
}
.nxg3-tx-intro .nxg3-feature h4{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.20em;
  color:var(--tx-accent);
  margin-bottom:14px;
  text-transform:uppercase;
  font-weight:500;
}
.nxg3-tx-intro .nxg3-feature p{
  font-size:15px;
  color:var(--tx-text-dim);
  line-height:1.6;
  font-family:'Geist','SF Pro Text',sans-serif;
  font-weight:400;
}
.nxg3-tx-intro.nxg3-in-view .nxg3-feature:nth-child(1){ transition-delay:1.4s; opacity:1; transform:none; }
.nxg3-tx-intro.nxg3-in-view .nxg3-feature:nth-child(2){ transition-delay:1.6s; opacity:1; transform:none; }
.nxg3-tx-intro.nxg3-in-view .nxg3-feature:nth-child(3){ transition-delay:1.8s; opacity:1; transform:none; }

@media (max-width:768px){
  .nxg3-tx-intro{ padding:14vh clamp(20px, 5vw, 32px) 18vh; }
  .nxg3-tx-intro .nxg3-head{ max-width:none; }
  .nxg3-tx-intro .nxg3-label{ gap:14px; font-size:11px; }
  .nxg3-tx-intro .nxg3-label::before, .nxg3-tx-intro .nxg3-label::after{ width:32px; }
  .nxg3-tx-intro .nxg3-features{ gap:40px; margin-top:64px; }
}

@media (prefers-reduced-motion:reduce){
  .nxg3-tx-intro .nxg3-head .nxg3-word,
  .nxg3-tx-intro .nxg3-label,
  .nxg3-tx-intro .nxg3-body,
  .nxg3-tx-intro .nxg3-feature{
    opacity:1; transform:none; filter:none;
    transition:none;
  }
  .nxg3-tx-intro .nxg3-underline{ width:220px; transition:none; }
}

/* ============================================================
   DEVICES  (showcase)
   ============================================================ */
.nxg3-devices{
  position:relative;padding:clamp(100px,14vh,180px) 24px;text-align:center;
}
.nxg3-device-stage{
  position:relative;margin:60px auto 0;
  width:min(1100px,100%);height:min(560px,70vh);
  perspective:1200px;
}
.nxg3-device-laptop,.nxg3-device-tablet,.nxg3-device-phone{
  position:absolute;
  transition:transform .8s var(--nxg3-ease-slow);
  will-change:transform;
}
.nxg3-device-laptop{
  top:10%;left:50%;transform:translateX(-50%);
  width:75%;filter:drop-shadow(0 40px 80px rgba(0,0,0,.8));
}
.nxg3-device-tablet{
  bottom:5%;left:8%;width:34%;
  filter:drop-shadow(0 30px 60px rgba(166,0,255,.35));
  transform:rotate(-6deg);
}
.nxg3-device-phone{
  bottom:0;right:8%;width:16%;
  filter:drop-shadow(0 30px 60px rgba(0,207,255,.4));
  transform:rotate(8deg);
}
@media(max-width:820px){
  /* Schmaleres Sektionspolster statt Ausbruch auf 100vw — der Laptop bekommt
     so fast dieselbe Breite, ohne von der Breite des Eltern-Kastens abzuhaengen.
     (Der Ausbruch per calc(50% - 50vw) verschob die Buehne im WP-Embed nach links.) */
  /* Sicherheitsnetz: was hier passiert, bleibt in der Sektion. */
  .nxg3-devices{ padding-left:10px; padding-right:10px; overflow-x:clip }
  .nxg3-device-stage{
    height:auto;display:flex;flex-direction:column;gap:34px;align-items:center;
    width:100%;max-width:100%;margin-left:auto;margin-right:auto;
  }
  .nxg3-device-laptop,.nxg3-device-tablet,.nxg3-device-phone{
    position:relative;width:auto;transform:none;top:auto;bottom:auto;left:auto;right:auto;
    margin-left:auto;margin-right:auto;
  }
  /* Groessenhierarchie wie in echt: Laptop > Tablet > Handy.
     Der zweite Deckel (100vw - 20px) greift auch dann, wenn der Eltern-Kasten
     durch das WordPress-Theme breiter ausfaellt als der Bildschirm. */
  .nxg3-device-laptop{max-width:min(100%, calc(100vw - 20px))}
  .nxg3-device-tablet{max-width:min(74%, calc(74vw - 15px))}
  .nxg3-device-phone{max-width:min(42%, calc(42vw - 8px))}
}

/* ============================================================
   PRICING
   ============================================================ */
.nxg3-pricing{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;
}
/* Vier Plaene nebeneinander werden unter ~1300px zu schmal fuer die
   Feature-Listen (Essential hat 13 Punkte) — darum 2x2 als Zwischenstufe. */
@media(max-width:1300px){.nxg3-pricing{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.nxg3-pricing{grid-template-columns:1fr}}
/* Pro-Karte: warmes Gold statt des Violetts von Essential. Zwei Karten mit
   identischer Hervorhebung wuerden um dieselbe Aufmerksamkeit kaempfen —
   Essential bleibt die Empfehlung, Pro ist sichtbar die Spitze. */
.nxg3-plan.nxg3-plan-pro{
  background:
    radial-gradient(600px 300px at 50% -10%,rgba(255,145,60,.16),transparent 60%),
    linear-gradient(160deg,#1c1206,#080503);
  border-color:rgba(255,145,60,.42);
  box-shadow:0 40px 100px -30px rgba(255,145,60,.38);
}
.nxg3-plan.nxg3-plan-pro .nxg3-ribbon{
  background:linear-gradient(90deg,#ff9138,#ffd06a);
  color:#231303;
  box-shadow:0 8px 22px rgba(255,145,60,.45);
}
.nxg3-plan.nxg3-plan-pro .nxg3-btn{
  background:linear-gradient(90deg,#ff9138,#ffc266);
  color:#231303;border-color:transparent;
}
.nxg3-plan{
  position:relative;
  padding:36px 30px 30px;
  border:1px solid var(--nxg3-line);border-radius:28px;
  background:linear-gradient(160deg,#0e0e12,#07070a);
  display:flex;flex-direction:column;gap:22px;
  transition:transform .4s var(--nxg3-ease-soft),border-color .3s ease,box-shadow .5s var(--nxg3-ease-soft);
}
.nxg3-plan:hover{transform:translateY(-4px);border-color:var(--nxg3-line-strong)}
.nxg3-plan.nxg3-featured{
  background:
    radial-gradient(600px 300px at 50% -10%,rgba(166,0,255,.15),transparent 60%),
    linear-gradient(160deg,#1a0a24,#070009);
  border-color:rgba(166,0,255,.4);
  box-shadow:0 40px 100px -30px rgba(166,0,255,.4);
}
.nxg3-plan .nxg3-plan-name{font:500 .72rem/1 "Geist Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--nxg3-ink-dim)}
.nxg3-plan .nxg3-plan-price{
  font-size:clamp(2.6rem,4vw,3.4rem);font-weight:600;letter-spacing:-.03em;line-height:1;
  display:flex;align-items:baseline;gap:4px;
}
.nxg3-plan .nxg3-plan-price span{font-size:.9rem;font-weight:400;color:var(--nxg3-ink-dim);letter-spacing:0}
.nxg3-plan .nxg3-plan-alt{
  margin:-14px 0 22px;
  font-size:.82rem;color:var(--nxg3-ink-faint);
}
.nxg3-plan .nxg3-plan-alt b{color:var(--nxg3-ink-dim);font-weight:500}
/* „Alles aus BASIC, plus:" — Ueberschrift der Liste, kein Feature-Punkt.
   Sitzt zwischen Preiszeile und Liste und traegt deren Abstand mit. */
.nxg3-plan-inherit{
  margin:-10px 0 -8px;
  font:500 .82rem/1.4 "Geist",sans-serif;
  color:var(--nxg3-ink-dim);
}
/* Credits-Erklärblock unter dem Pricing-Grid */
.nxg3-credits-note{
  max-width:1060px;margin:28px auto 0;padding:26px 28px;
  border-radius:20px;border:1px solid var(--nxg3-line);
  background:var(--nxg3-surface);
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  text-align:left;
}
.nxg3-credits-note h4{
  font:600 .95rem/1.3 "Geist",sans-serif;color:var(--nxg3-ink);
  margin-bottom:7px;letter-spacing:-.01em;
}
.nxg3-credits-note p{font-size:.88rem;line-height:1.55;color:var(--nxg3-ink-dim)}
@media(max-width:900px){.nxg3-credits-note{grid-template-columns:1fr}}

/* ============================================================
   DEMO — „Frag NEXIQA": Replika des echten App-Screens im
   Darkmode der Seite. Empty-State: violetter Glow + Begrüßung +
   Vorschlagsfragen + Eingabefeld-Deko. Nach Klick: User-Blase
   rechts mit Zeitstempel, Tipp-Indikator, dann die Antwort als
   formatierter Rich-Text (Emoji-Kopfzeile, Liste) in voller
   Breite — Segmente faden gestaffelt ein, wie in der App.
   ============================================================ */
.nxg3-demo-box{
  position:relative;
  max-width:760px;margin:52px auto 0;
  border-radius:24px;border:1px solid var(--nxg3-line-strong);
  background:linear-gradient(180deg, rgba(13,14,19,.92), rgba(7,8,11,.78));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 30px 90px rgba(0,0,0,.6);
  overflow:hidden;text-align:left;
}
.nxg3-demo-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--nxg3-line);position:relative;z-index:2}
.nxg3-demo-head .nxg3-dot-live{width:8px;height:8px;border-radius:50%;background:#43e97b;box-shadow:0 0 10px rgba(67,233,123,.8)}
.nxg3-demo-head span{font:500 .68rem/1 "Geist Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--nxg3-ink-faint)}

.nxg3-demo-screen{
  position:relative;
  min-height:380px;max-height:470px;overflow-y:auto;
  padding:24px 22px 14px;
  display:flex;flex-direction:column;gap:14px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;
}
.nxg3-demo-glow{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(340px 240px at 50% 40%, rgba(166,108,255,.14), transparent 70%),
    radial-gradient(300px 220px at 45% 46%, rgba(255,95,174,.05), transparent 70%);
  transition:opacity .6s var(--nxg3-ease-soft);
}
.nxg3-demo-box.nxg3-chatting .nxg3-demo-glow{opacity:.3}

/* Empty-State: Begrüßung wie der App-Startscreen */
.nxg3-demo-greet{position:relative;z-index:1;margin-top:auto;text-align:center;padding:30px 8px 4px}
.nxg3-demo-greet .nxg3-hi{font-size:.92rem;color:var(--nxg3-ink-dim);margin-bottom:10px}
.nxg3-demo-greet .nxg3-q{font:600 clamp(1.3rem,3.4vw,1.7rem)/1.2 "Geist",sans-serif;color:var(--nxg3-ink);letter-spacing:-.02em;text-wrap:balance}
.nxg3-demo-suggest{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;margin:16px auto auto;width:min(100%,460px)}
.nxg3-demo-box.nxg3-chatting .nxg3-demo-greet{display:none}
.nxg3-demo-box.nxg3-chatting .nxg3-demo-suggest{margin:10px 0 0;width:100%}
.nxg3-demo-sugg{
  text-align:left;padding:10px 14px;border-radius:12px;
  font:400 .93rem/1.45 "Geist",sans-serif;color:var(--nxg3-ink-dim);
  transition:background .25s var(--nxg3-ease-soft),color .25s var(--nxg3-ease-soft);
}
.nxg3-demo-sugg:hover{background:rgba(255,255,255,.05);color:var(--nxg3-ink)}
.nxg3-demo-sugg.nxg3-asked{opacity:.45}

/* Chat-Zustand */
.nxg3-demo-user{
  position:relative;z-index:1;align-self:flex-end;max-width:86%;
  background:rgba(255,255,255,.08);border:1px solid var(--nxg3-line-strong);
  border-radius:18px 18px 6px 18px;padding:12px 16px;
  font-size:.95rem;line-height:1.5;color:var(--nxg3-ink);
}
.nxg3-demo-time{position:relative;z-index:1;align-self:flex-end;font:500 .62rem/1 "Geist Mono",monospace;letter-spacing:.08em;color:var(--nxg3-ink-faint);margin-top:-6px}
.nxg3-demo-typing{position:relative;z-index:1;display:inline-flex;gap:5px;padding:12px 4px 2px}
.nxg3-demo-typing span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);animation:nxg3DemoDot 1.1s ease-in-out infinite}
.nxg3-demo-typing span:nth-child(2){animation-delay:.15s}
.nxg3-demo-typing span:nth-child(3){animation-delay:.3s}
@keyframes nxg3DemoDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* Antwort: Rich-Text in voller Breite, wie die echte Gen3-Antwort */
.nxg3-demo-ai{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;padding:2px 2px 6px}
.nxg3-demo-seg{opacity:0;transform:translateY(10px);transition:opacity .7s var(--nxg3-ease-soft),transform .8s var(--nxg3-ease-soft)}
.nxg3-demo-seg.nxg3-in{opacity:1;transform:translateY(0)}
.nxg3-demo-seg .nxg3-aih{font:600 1.08rem/1.35 "Geist",sans-serif;color:var(--nxg3-ink);letter-spacing:-.015em}
.nxg3-demo-seg p{font-size:.94rem;line-height:1.6;color:var(--nxg3-ink-dim)}
.nxg3-demo-seg b{color:var(--nxg3-ink);font-weight:600}
.nxg3-demo-seg ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:2px 0 0;padding:0}
.nxg3-demo-seg ul li{position:relative;padding-left:18px;font-size:.94rem;line-height:1.55;color:var(--nxg3-ink-dim)}
.nxg3-demo-seg ul li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:#a66cff}

/* Eingabefeld-Replika (Deko) — wie der App-Prompt */
.nxg3-demo-inputbar{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:12px;
  margin:2px 14px 14px;padding:6px 8px 6px 6px;
  border-radius:999px;border:1px solid var(--nxg3-line-strong);
  background:rgba(255,255,255,.04);
}
.nxg3-demo-plus{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:var(--nxg3-ink-dim);flex:0 0 auto}
.nxg3-demo-plus svg{width:16px;height:16px}
.nxg3-demo-ph{flex:1;font-size:.95rem;color:var(--nxg3-ink-faint);user-select:none;white-space:nowrap;overflow:hidden}
.nxg3-demo-icoset{display:flex;align-items:center;color:var(--nxg3-ink-faint)}
.nxg3-demo-icoset svg{width:18px;height:18px}
.nxg3-demo-send{width:34px;height:34px;border-radius:50%;background:linear-gradient(120deg,#ff9158,#ff5fae 55%,#a66cff);display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto;box-shadow:0 4px 16px rgba(255,95,174,.35)}
.nxg3-demo-send svg{width:15px;height:15px}
.nxg3-demo-note{margin-top:14px;font-size:.78rem;color:var(--nxg3-ink-faint);text-align:center}

/* ============================================================
   DETAILS — „Durchdacht bis ins Detail": kompaktes Feature-Raster
   ============================================================ */
.nxg3-details-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  max-width:1060px;margin:52px auto 0;padding:0 24px;text-align:left;
}
.nxg3-detail{
  padding:20px 20px 18px;border-radius:16px;
  border:1px solid var(--nxg3-line);background:var(--nxg3-surface);
  transition:border-color .3s var(--nxg3-ease-soft),transform .3s var(--nxg3-ease-soft);
}
.nxg3-detail:hover{border-color:var(--nxg3-line-strong);transform:translateY(-2px)}
.nxg3-detail h4{font:600 .92rem/1.3 "Geist",sans-serif;color:var(--nxg3-ink);margin-bottom:6px;letter-spacing:-.01em}
.nxg3-detail p{font-size:.84rem;line-height:1.5;color:var(--nxg3-ink-dim)}
@media(max-width:900px){.nxg3-details-grid{grid-template-columns:1fr 1fr}}

/* ============================================================
   MOBILE-LAYOUTS der neuen Sektionen (Coach, Demo, Details).
   Eigenständig gestaltet, nicht nur kollabiert: volle Breiten,
   linksbündige Listen-Chips, kompakte Kacheln.
   ============================================================ */
@media(max-width:640px){
  /* Coach: Karte nutzt die volle Breite, Buttons werden zu
     vollbreiten Stack-Buttons, Stats verteilen sich gleichmäßig */
  .nxg3-coach-grid{margin-top:40px;gap:36px;padding:0}
  .nxg3-coach-card{max-width:none}
  .nxg3-coach-stats{gap:0;justify-content:space-between}
  .nxg3-coach-actions{flex-direction:column;align-items:stretch;margin-top:40px}
  .nxg3-coach-btn{justify-content:center;padding:15px 26px}

  /* Demo: kompakter App-Screen — Begrüßung kleiner, Blasen breiter,
     Eingabefeld-Deko enger */
  .nxg3-demo-box{margin-top:40px;border-radius:20px}
  .nxg3-demo-screen{min-height:340px;max-height:440px;padding:18px 14px 10px}
  .nxg3-demo-greet{padding-top:22px}
  .nxg3-demo-greet .nxg3-q{font-size:1.22rem}
  .nxg3-demo-sugg{padding:11px 12px;font-size:.88rem}
  .nxg3-demo-user{max-width:94%;font-size:.9rem;padding:11px 13px}
  .nxg3-demo-seg .nxg3-aih{font-size:1rem}
  .nxg3-demo-seg p,.nxg3-demo-seg ul li{font-size:.9rem}
  .nxg3-demo-inputbar{margin:2px 10px 10px}
  .nxg3-demo-ph{font-size:.9rem}

  /* Details: kompakte Kacheln — die Neuner-Reihe bleibt scanbar
     statt einer 1.100px-Kolonne */
  .nxg3-details-grid{grid-template-columns:1fr;margin-top:36px;gap:10px;padding:0}
  .nxg3-detail{padding:14px 16px 13px;border-radius:14px}
  .nxg3-detail h4{font-size:.86rem;margin-bottom:4px}
  .nxg3-detail p{font-size:.78rem;line-height:1.45}
}

/* ============================================================
   DETAIL-TOUR — Apple-Scrollytelling (ersetzt das 9er-Grid).
   Gepinnte Bühne, der SCROLL treibt 10 Mini-Szenen: Wellenform
   wächst, Text tippt sich, Theme kippt, Chat faltet sich ins
   PDF, die Suche springt an die Fundstelle … Copy-Rail links,
   App-Panel Mitte, Fortschritt rechts.
   ============================================================ */
.nxg3-dt{
  position:relative;
  height:530vh;             /* 14 Steps ≈ 35vh pro Effekt (Pacing-Regel) */
  background:
    radial-gradient(70rem 45rem at 78% 30%, rgba(120,100,220,.07), transparent 65%),
    radial-gradient(60rem 40rem at 18% 70%, rgba(106,168,255,.05), transparent 60%);
  z-index:2;
}
.nxg3-dt-stage{
  position:sticky;top:0;
  height:100vh;
  display:grid;
  grid-template-columns:minmax(270px,380px) auto 28px;
  gap:clamp(32px,5vw,84px);
  align-items:center;justify-content:center;
  padding:0 clamp(20px,4vw,56px);
}
/* ---- Copy-Rail links ---- */
.nxg3-dt-rail{position:relative;min-height:300px}
.nxg3-dt-copy{
  position:absolute;top:50%;left:0;right:0;
  transform:translateY(-50%) translateY(22px);
  opacity:0;filter:blur(6px);
  transition:opacity .5s var(--nxg3-ease-soft),transform .55s var(--nxg3-ease-soft),filter .5s var(--nxg3-ease-soft);
  pointer-events:none;
}
.nxg3-dt-copy.nxg3-on{opacity:1;transform:translateY(-50%);filter:blur(0)}
.nxg3-dt-num{
  display:inline-block;
  font:500 .72rem/1 "Geist Mono",ui-monospace,monospace;
  letter-spacing:.22em;color:#8ea2ff;
  margin-bottom:18px;
}
.nxg3-dt-num i{font-style:normal;color:var(--nxg3-ink-faint);margin-left:4px}
.nxg3-dt-copy h3{
  font:600 clamp(1.6rem,2.6vw,2.3rem)/1.1 "Geist",sans-serif;
  letter-spacing:-.02em;color:var(--nxg3-ink);
  margin:0 0 14px;
}
.nxg3-dt-copy p{
  font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.55;
  color:var(--nxg3-ink-dim);max-width:34ch;
}
/* ---- App-Panel Mitte ---- */
.nxg3-dt-panel{
  position:relative;
  width:clamp(330px,32vw,420px);
  height:min(540px,68vh);
  border-radius:26px;
  background:linear-gradient(180deg, rgba(26,27,36,.92) 0%, rgba(14,15,22,.94) 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 30px 80px rgba(0,0,0,.55),
    0 0 60px rgba(120,100,220,.10);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.nxg3-dt-panel::before{  /* Aurora-Haarlinie oben */
  content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(142,162,255,.6), rgba(208,139,255,.5), transparent);
}
.nxg3-dt-chrome{
  display:flex;align-items:center;gap:6px;
  padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06);
}
.nxg3-dt-chrome-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)}
.nxg3-dt-chrome-title{
  margin-left:auto;
  font:500 .62rem/1 "Geist Mono",ui-monospace,monospace;
  letter-spacing:.18em;text-transform:uppercase;color:var(--nxg3-ink-faint);
}
.nxg3-dt-scenes{position:relative;flex:1}
.nxg3-dt-scene{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding:26px;
  opacity:0;transform:translateY(12px) scale(.985);
  transition:opacity .45s var(--nxg3-ease-soft),transform .5s var(--nxg3-ease-soft);
  pointer-events:none;
}
.nxg3-dt-scene.nxg3-on{opacity:1;transform:none}
/* ---- Bausteine ---- */
.nxg3-dt-bubble{
  max-width:88%;
  padding:13px 16px;border-radius:16px;
  font:400 .92rem/1.5 "Geist",sans-serif;color:var(--nxg3-ink);
}
.nxg3-dt-ai{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-bottom-left-radius:6px}
.nxg3-dt-user{
  background:linear-gradient(120deg,#4a6cf7,#8b5cf6);
  border-bottom-right-radius:6px;align-self:flex-end;color:#fff;
}
.nxg3-dt-word{opacity:.4;transition:opacity .18s ease,color .18s ease}
.nxg3-dt-word.nxg3-lit{opacity:1;color:#cfe0ff}
.nxg3-dt-wave{display:flex;align-items:flex-end;gap:3px;height:44px}
.nxg3-dt-wave span{
  width:4px;height:40px;border-radius:2px;
  background:linear-gradient(180deg,#8ea2ff,#d08bff);
  transform:scaleY(.18);transform-origin:bottom;
  transition:transform .25s var(--nxg3-ease-soft),opacity .25s ease;opacity:.3;
}
.nxg3-dt-playrow{display:flex;align-items:center;gap:12px}
.nxg3-dt-play{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:#12141c;
}
.nxg3-dt-play svg{width:15px;height:15px;margin-left:2px}
.nxg3-dt-play--sm{width:28px;height:28px}
.nxg3-dt-play--sm svg{width:11px;height:11px}
.nxg3-dt-time,.nxg3-dt-vtime{font:500 .72rem/1 "Geist Mono",monospace;color:var(--nxg3-ink-faint);letter-spacing:.08em;min-width:3ch}
/* Mikro */
.nxg3-dt-mic{
  position:relative;width:78px;height:78px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(142,162,255,.1);border:1px solid rgba(142,162,255,.35);color:#aebcff;
}
.nxg3-dt-mic svg{width:30px;height:30px}
.nxg3-dt-mic-ring{
  position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(142,162,255,.45);
  animation:nxg3DtPulse 2.4s ease-out infinite;
}
.nxg3-dt-mic-ring.nxg3-r2{animation-delay:1.2s}
@keyframes nxg3DtPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.75);opacity:0}}
.nxg3-dt-input{
  width:86%;min-height:52px;
  display:flex;align-items:center;
  padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  font:400 .95rem/1.4 "Geist",sans-serif;color:var(--nxg3-ink);
}
.nxg3-dt-caret{
  display:inline-block;width:2px;height:1.15em;margin-left:2px;
  background:#8ea2ff;animation:nxg3DtBlink 1s steps(1) infinite;
}
@keyframes nxg3DtBlink{50%{opacity:0}}
/* Sprachnachricht */
.nxg3-dt-voice{
  display:flex;align-items:center;gap:12px;
  width:86%;padding:12px 16px;border-radius:16px;border-bottom-left-radius:6px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);
}
.nxg3-dt-vwave{position:relative;flex:1;display:flex;align-items:center;gap:2.5px;height:30px}
.nxg3-dt-vwave span{
  flex:1;min-width:2px;border-radius:2px;
  background:rgba(255,255,255,.22);
  transition:background .2s ease;
}
.nxg3-dt-vwave span.nxg3-done{background:linear-gradient(180deg,#8ea2ff,#d08bff)}
.nxg3-dt-vwave .nxg3-dt-ph{
  position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:1px;
  left:var(--dt-ph,0%);background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.7);
}
.nxg3-dt-pills{display:flex;gap:8px}
.nxg3-dt-pills span{
  min-width:44px;text-align:center;
  padding:7px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  font:500 .76rem/1 "Geist",sans-serif;color:var(--nxg3-ink-dim);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.nxg3-dt-pills span.nxg3-on{background:#fff;color:#12141c;border-color:#fff}
/* Schriftgröße */
.nxg3-dt-scale{
  max-width:82%;text-align:center;
  font:500 13px/1.45 "Geist",sans-serif;color:var(--nxg3-ink);
  letter-spacing:-.01em;min-height:5.5em;
  display:flex;align-items:center;
}
/* Hell & Dunkel */
.nxg3-dt-theme{position:relative;width:82%;height:170px}
.nxg3-dt-theme-card{
  position:absolute;inset:0;border-radius:18px;padding:20px;
  display:flex;flex-direction:column;gap:12px;justify-content:center;
}
.nxg3-dt-theme-dark{background:#17181f;border:1px solid rgba(255,255,255,.09)}
.nxg3-dt-theme-dark .nxg3-dt-theme-line{background:rgba(255,255,255,.14)}
.nxg3-dt-theme-dark .nxg3-dt-theme-msg{color:rgba(255,255,255,.85)}
.nxg3-dt-theme-light{background:#f4f5f8;clip-path:circle(0% at 84% 16%)}
.nxg3-dt-theme-light .nxg3-dt-theme-line{background:rgba(20,22,30,.14)}
.nxg3-dt-theme-light .nxg3-dt-theme-msg{color:#191b24}
.nxg3-dt-theme-line{display:block;width:42%;height:9px;border-radius:5px}
.nxg3-dt-theme-msg{font:400 .88rem/1.45 "Geist",sans-serif}
.nxg3-dt-toggle{
  position:relative;width:58px;height:30px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);
}
.nxg3-dt-knob{
  position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;
  background:#fff;transform:translateX(var(--dt-knob,0px));
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
/* Antwortsprache */
.nxg3-dt-langwrap{position:relative;width:82%;min-height:4.4em}
.nxg3-dt-langwrap span{
  position:absolute;inset:13px 16px;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s ease,transform .3s ease;
}
.nxg3-dt-langwrap span.nxg3-on{opacity:1;transform:none}
.nxg3-dt-langrow{display:flex;align-items:center;gap:12px}
.nxg3-dt-langtag{
  font:600 .68rem/1 "Geist Mono",monospace;letter-spacing:.2em;
  padding:6px 12px;border-radius:999px;
  border:1px solid rgba(142,162,255,.4);color:#aebcff;background:rgba(142,162,255,.08);
}
.nxg3-dt-langmore{font:400 .74rem/1.3 "Geist",sans-serif;color:var(--nxg3-ink-faint)}
/* PDF-Export — edel gesetztes Dokument mit Seitenstapel */
.nxg3-dt-pdfchat{display:flex;flex-direction:column;gap:9px;width:74%}
.nxg3-dt-mini{display:block;height:16px;border-radius:8px}
.nxg3-dt-mini.nxg3-dt-user{width:62%;align-self:flex-end;background:linear-gradient(120deg,#4a6cf7,#8b5cf6);opacity:.85}
.nxg3-dt-mini.nxg3-dt-ai{width:78%;background:rgba(255,255,255,.14);border:0}
.nxg3-dt-mini.nxg3-short{width:48%}
.nxg3-dt-pdfstack{position:relative;width:min(248px,76%);height:236px;opacity:0}
.nxg3-dt-page{
  position:absolute;inset:0;border-radius:12px;
  background:#fdfdfd;box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.nxg3-dt-page--b1{transform:rotate(2.4deg) translate(5px,4px);background:#eceef3}
.nxg3-dt-page--b2{transform:rotate(-3deg) translate(-6px,7px);background:#e2e5ec}
.nxg3-dt-page--main{
  display:flex;flex-direction:column;gap:10px;
  padding:16px 18px 12px;
}
.nxg3-dt-page-el{opacity:0;transform:translateY(8px)}
.nxg3-dt-page-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding-bottom:9px;border-bottom:1px solid #e4e7ee;
}
.nxg3-dt-page-brand{
  font:700 .72rem/1 "Geist",sans-serif;letter-spacing:.16em;
  background:linear-gradient(90deg,#4a6cf7,#a855f7);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nxg3-dt-page-doc{font:500 .52rem/1 "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#9aa1b2;text-align:right}
.nxg3-dt-page-q{font:600 .68rem/1.4 "Geist",sans-serif;color:#171a22}
.nxg3-dt-page-a{font:400 .62rem/1.5 "Geist",sans-serif;color:#4c5262}
.nxg3-dt-page-li{display:flex;align-items:center;gap:7px}
.nxg3-dt-page-li i{width:4px;height:4px;border-radius:50%;background:#8b5cf6;flex-shrink:0}
.nxg3-dt-page-skel{display:block;flex:1;height:6px;border-radius:3px;background:#e3e6ec}
.nxg3-dt-page-skel.nxg3-short{flex:0 0 55%}
.nxg3-dt-page-foot{
  margin-top:auto;padding-top:8px;border-top:1px solid #e4e7ee;
  font:500 .5rem/1 "Geist Mono",monospace;letter-spacing:.1em;color:#9aa1b2;text-align:center;
}
.nxg3-dt-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  background:rgba(90,205,150,.12);border:1px solid rgba(90,205,150,.35);
  font:500 .78rem/1 "Geist",sans-serif;color:#8fe5b8;opacity:0;
}
.nxg3-dt-badge svg{width:13px;height:13px}
/* Ordnung im Verlauf */
.nxg3-dt-list{display:flex;flex-direction:column;gap:10px;width:84%}
.nxg3-dt-row{
  position:relative;
  display:flex;align-items:center;gap:10px;
  height:46px;padding:0 16px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  font:500 .84rem/1 "Geist",sans-serif;color:var(--nxg3-ink);
  will-change:transform;
}
.nxg3-dt-row[data-row="0"]{border-color:rgba(142,162,255,.35);background:rgba(142,162,255,.09)}
.nxg3-dt-pin{width:14px;height:14px;color:#8ea2ff;opacity:0;transform:scale(.4)}
.nxg3-dt-pin svg{width:14px;height:14px;display:block}
/* Suche über alle Chats */
.nxg3-dt-search{
  display:flex;align-items:center;gap:10px;
  width:86%;min-height:46px;
  padding:12px 16px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  font:500 .92rem/1.3 "Geist",sans-serif;color:var(--nxg3-ink);
}
.nxg3-dt-search svg{width:16px;height:16px;color:var(--nxg3-ink-faint);flex-shrink:0}
.nxg3-dt-results{display:flex;flex-direction:column;gap:8px;width:86%}
.nxg3-dt-res{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:42px;padding:0 14px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  font:500 .8rem/1.2 "Geist",sans-serif;color:var(--nxg3-ink);
  opacity:0;transform:translateY(10px);
}
.nxg3-dt-res.nxg3-act{border-color:rgba(142,162,255,.45);background:rgba(142,162,255,.1)}
.nxg3-dt-res-count{
  flex-shrink:0;
  font:600 .64rem/1 "Geist Mono",monospace;letter-spacing:.06em;
  padding:5px 9px;border-radius:999px;
  background:rgba(142,162,255,.14);border:1px solid rgba(142,162,255,.3);color:#aebcff;
}
.nxg3-dt-snippet{
  /* klappt scroll-getrieben unter dem aktiven Chat auf (JS setzt max-height) */
  box-sizing:border-box;max-height:0;overflow:hidden;opacity:0;
  margin:-8px 0 0 14px;padding:9px 12px;border-radius:0 10px 10px 10px;
  border-left:2px solid rgba(142,162,255,.55);
  background:rgba(142,162,255,.07);
  font:400 .74rem/1.5 "Geist",sans-serif;color:var(--nxg3-ink-dim);
}
.nxg3-dt-snippet mark{
  background:rgba(142,162,255,.28);color:#dfe7ff;
  padding:1px 4px;border-radius:4px;
}
/* NEXIQA-Support */
.nxg3-dt-dim{width:74%;display:flex;flex-direction:column;gap:8px;opacity:.65}
.nxg3-dt-mini-line{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.16)}
.nxg3-dt-mini-line.nxg3-short{width:55%}
.nxg3-dt-flag{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.16);color:var(--nxg3-ink-dim);
  background:rgba(255,255,255,.05);
  transition:color .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease;
}
.nxg3-dt-flag svg{width:17px;height:17px}
.nxg3-dt-flag.nxg3-hot{
  color:#ffb1a6;border-color:rgba(255,120,100,.5);background:rgba(255,120,100,.1);
  box-shadow:0 0 24px rgba(255,120,100,.25);
}
.nxg3-dt-ticket{
  padding:13px 18px;border-radius:12px;
  background:#fdfdfd;color:#171a22;
  border-left:3px solid #8b5cf6;
  font:600 .8rem/1.4 "Geist",sans-serif;
  box-shadow:0 14px 36px rgba(0,0,0,.45);
  opacity:0;max-width:86%;
}
.nxg3-dt-reply{
  display:flex;flex-direction:column;gap:5px;
  max-width:86%;padding:11px 15px;border-radius:14px;border-bottom-left-radius:6px;
  background:rgba(142,162,255,.09);border:1px solid rgba(142,162,255,.3);
  opacity:0;transform:translateY(10px);
}
.nxg3-dt-reply-meta{
  display:flex;align-items:center;gap:6px;
  font:600 .62rem/1 "Geist Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#aebcff;
}
.nxg3-dt-reply-meta::before{
  content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:#5acd96;box-shadow:0 0 8px rgba(90,205,150,.7);
}
.nxg3-dt-reply-text{font:400 .82rem/1.5 "Geist",sans-serif;color:var(--nxg3-ink)}
/* ---- 10 · Videoanalyse: Bildfenster + zwei Auswertungsspuren ---- */
.nxg3-dt-vid{
  position:relative;width:84%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:linear-gradient(150deg,#1d2030,#12141d);
  border:1px solid rgba(255,255,255,.10);
}
.nxg3-dt-vid-shape{
  position:absolute;border-radius:8px;opacity:.75;
  transition:opacity .3s ease,transform .3s ease;
}
.nxg3-dt-vid-shape.nxg3-s1{left:12%;bottom:18%;width:26%;height:38%;background:linear-gradient(180deg,#8ea2ff,#5f6fd6)}
.nxg3-dt-vid-shape.nxg3-s2{left:46%;bottom:18%;width:26%;height:60%;background:linear-gradient(180deg,#d08bff,#8a5fd6)}
.nxg3-dt-vid-shape.nxg3-seen{opacity:1;transform:translateY(-3px)}
.nxg3-dt-vid-scan{
  position:absolute;top:0;bottom:0;width:2px;left:var(--dt-scan,0%);
  background:#fff;box-shadow:0 0 14px rgba(255,255,255,.8);
}
.nxg3-dt-vid-tc{
  position:absolute;right:8px;bottom:7px;
  font:500 .62rem/1 "Geist Mono",monospace;letter-spacing:.06em;
  color:rgba(255,255,255,.8);background:rgba(0,0,0,.45);
  padding:4px 6px;border-radius:5px;
}
.nxg3-dt-lanes{display:flex;flex-direction:column;gap:9px;width:84%}
.nxg3-dt-lane{display:flex;align-items:center;gap:10px}
.nxg3-dt-lane-tag{
  flex:0 0 42px;
  font:600 .6rem/1 "Geist Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--nxg3-ink-faint);
}
.nxg3-dt-lane-track{display:flex;flex:1;gap:4px}
.nxg3-dt-lane-track i{
  flex:1;height:8px;border-radius:3px;
  background:rgba(255,255,255,.10);
  transition:background .3s ease,transform .3s ease;
}
.nxg3-dt-lane:nth-child(1) .nxg3-dt-lane-track i.nxg3-on{background:linear-gradient(90deg,#8ea2ff,#aebcff);transform:scaleY(1.5)}
.nxg3-dt-lane:nth-child(2) .nxg3-dt-lane-track i.nxg3-on{background:linear-gradient(90deg,#d08bff,#e3b6ff);transform:scaleY(1.5)}
.nxg3-dt-vidout{opacity:0;transform:translateY(10px)}

/* ---- 11 · Audioanalyse: Wellenform + Transkript mit Zeitmarke und Sprecher ---- */
.nxg3-dt-awave{position:relative;flex:1;display:flex;align-items:center;gap:2.5px;height:30px}
.nxg3-dt-awave span{
  flex:1;min-width:2px;border-radius:2px;background:rgba(255,255,255,.22);
  transition:background .2s ease;
}
.nxg3-dt-awave span.nxg3-done{background:linear-gradient(180deg,#8ea2ff,#d08bff)}
.nxg3-dt-awave .nxg3-dt-ph{
  position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:1px;
  left:var(--dt-ph,0%);background:#fff;box-shadow:0 0 10px rgba(255,255,255,.7);
}
.nxg3-dt-atime{font:500 .7rem/1 "Geist Mono",monospace;color:var(--nxg3-ink-dim);flex:0 0 auto}
.nxg3-dt-tscript{display:flex;flex-direction:column;gap:9px;width:86%}
.nxg3-dt-tline{
  display:flex;align-items:flex-start;gap:9px;
  font:400 .78rem/1.45 "Geist",sans-serif;color:var(--nxg3-ink-dim);
  opacity:0;transform:translateY(8px);
}
.nxg3-dt-ts{
  flex:0 0 auto;font:500 .66rem/1.7 "Geist Mono",monospace;
  color:#8ea2ff;letter-spacing:.04em;
}
.nxg3-dt-spk{
  flex:0 0 18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font:600 .62rem/1 "Geist",sans-serif;color:#12141c;
  background:#8ea2ff;margin-top:1px;
}
.nxg3-dt-spk.nxg3-b{background:#d08bff}

/* ---- 12 · Audio-Generierung: Spuren fuellen sich, dann steht der Track ---- */
.nxg3-dt-stems{display:flex;flex-direction:column;gap:10px;width:82%}
.nxg3-dt-stem{display:flex;align-items:center;gap:10px}
.nxg3-dt-stem-tag{
  flex:0 0 54px;
  font:600 .6rem/1 "Geist Mono",monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nxg3-ink-faint);
}
.nxg3-dt-stem-bar{
  position:relative;flex:1;height:8px;border-radius:4px;
  background:rgba(255,255,255,.09);overflow:hidden;
}
.nxg3-dt-stem-bar i{
  position:absolute;inset:0 auto 0 0;width:0%;border-radius:4px;
  background:linear-gradient(90deg,#8ea2ff,#d08bff);
}
.nxg3-dt-track{
  display:flex;align-items:center;gap:11px;width:82%;
  padding:11px 14px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  opacity:0;transform:translateY(10px);
}
.nxg3-dt-track-meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.nxg3-dt-track-meta b{font:600 .82rem/1.2 "Geist",sans-serif;color:var(--nxg3-ink)}
.nxg3-dt-track-meta i{font:400 .66rem/1.2 "Geist Mono",monospace;font-style:normal;color:var(--nxg3-ink-faint);letter-spacing:.06em}
.nxg3-dt-eq{display:flex;align-items:flex-end;gap:2.5px;height:16px;flex:0 0 auto}
.nxg3-dt-eq i{width:2.5px;border-radius:2px;background:#8ea2ff;height:30%}
.nxg3-dt-track-time{font:500 .68rem/1 "Geist Mono",monospace;color:var(--nxg3-ink-dim);flex:0 0 auto}

/* ---- 13 · Video-Generierung: Einzelbilder rendern nacheinander ---- */
.nxg3-dt-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:84%;
}
.nxg3-dt-cell{
  aspect-ratio:16/10;border-radius:9px;
  background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);
  opacity:.25;transform:scale(.94);
}
/* Gerendertes Bild: warmer Sonnenaufgang-Verlauf, passend zum Prompt */
.nxg3-dt-cell.nxg3-done{
  opacity:1;transform:scale(1);border-color:rgba(255,255,255,.14);
  background:linear-gradient(180deg,#2b2350 0%,#7a4a86 45%,#e0894f 78%,#f3c37a 100%);
}
.nxg3-dt-render{display:flex;align-items:center;gap:11px;width:84%}
.nxg3-dt-render-bar{
  position:relative;flex:1;height:5px;border-radius:3px;
  background:rgba(255,255,255,.09);overflow:hidden;
}
.nxg3-dt-render-bar i{
  position:absolute;inset:0 auto 0 0;width:0%;border-radius:3px;
  background:linear-gradient(90deg,#8ea2ff,#d08bff);
}
.nxg3-dt-render-pct{
  font:500 .66rem/1 "Geist Mono",monospace;color:var(--nxg3-ink-dim);
  flex:0 0 40px;text-align:right;font-variant-numeric:tabular-nums;
}
/* ---- Fortschritts-Dots rechts ---- */
.nxg3-dt-dots{display:flex;flex-direction:column;gap:10px;justify-self:end}
.nxg3-dt-dots span{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.16);
  transition:background .3s ease,box-shadow .3s ease,transform .3s ease;
}
.nxg3-dt-dots span.nxg3-on{
  background:#8ea2ff;transform:scale(1.35);
  box-shadow:0 0 10px rgba(142,162,255,.7);
}
/* ---- Überspringen-Button: dezente Glas-Pille, nur während des Pins ---- */
.nxg3-dt-skip{
  position:absolute;
  left:50%;bottom:24px;
  transform:translateX(-50%) translateY(8px);
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 18px;border-radius:999px;
  background:rgba(10,11,18,.55);
  border:1px solid rgba(255,255,255,.14);
  color:var(--nxg3-ink-dim);
  font:500 .74rem/1 "Geist",sans-serif;letter-spacing:.04em;
  cursor:pointer;
  opacity:0;pointer-events:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:opacity .4s ease,transform .4s ease,color .25s ease,border-color .25s ease;
}
.nxg3-dt-skip svg{width:12px;height:12px}
.nxg3-dt-skip:hover{color:var(--nxg3-ink);border-color:rgba(142,162,255,.55)}
.nxg3-dt-skip:focus-visible{outline:2px solid #8ea2ff;outline-offset:3px}
.nxg3-dt-stage.nxg3-dt-live .nxg3-dt-skip{opacity:1;pointer-events:auto;transform:translateX(-50%)}
/* ---- Mobile: Panel oben, Copy darunter, Dots als Reihe ---- */
@media (max-width:860px){
  .nxg3-dt{height:460vh}
  .nxg3-dt-stage{
    display:flex;flex-direction:column;
    gap:20px;padding:0 18px;
    justify-content:center;
  }
  .nxg3-dt-panel{order:1;width:min(88vw,370px);height:min(400px,52vh)}
  .nxg3-dt-rail{order:2;width:100%;min-height:150px}
  .nxg3-dt-copy{text-align:center}
  .nxg3-dt-copy p{margin:0 auto}
  .nxg3-dt-copy h3{font-size:1.35rem;margin-bottom:8px}
  .nxg3-dt-num{margin-bottom:10px}
  .nxg3-dt-dots{order:3;flex-direction:row;justify-self:center}
  .nxg3-dt-scene{padding:18px;gap:14px}
  .nxg3-dt-theme{height:140px}
  /* PDF: kompakter Stapel, damit Chat + Blatt + Badge ins 400px-Panel passen */
  .nxg3-dt-pdfchat{gap:6px}
  .nxg3-dt-mini{height:12px}
  .nxg3-dt-pdfstack{height:190px;width:min(220px,72%)}
  .nxg3-dt-page--main{padding:12px 14px 9px;gap:7px}
  .nxg3-dt-page-a{font-size:.58rem}
  /* Suche: engere Zeilen */
  .nxg3-dt-search{min-height:42px;padding:10px 14px}
  .nxg3-dt-res{min-height:38px}
  .nxg3-dt-snippet{font-size:.7rem}
  /* Support: vier Elemente → alles etwas kompakter */
  /* Die vier neuen Szenen brauchen mobil weniger Luft und schmalere Bloecke,
     sonst sprengen Transkript und Filmstreifen die Panel-Hoehe. */
  .nxg3-dt-scene[data-scene="10"],
  .nxg3-dt-scene[data-scene="11"],
  .nxg3-dt-scene[data-scene="12"],
  .nxg3-dt-scene[data-scene="13"]{gap:11px}
  .nxg3-dt-vid,.nxg3-dt-lanes,.nxg3-dt-strip,.nxg3-dt-render{width:92%}
  .nxg3-dt-tscript,.nxg3-dt-stems,.nxg3-dt-track{width:94%}
  .nxg3-dt-tline{font-size:.72rem}
  .nxg3-dt-stem-tag{flex-basis:46px}
  .nxg3-dt-scene[data-scene="9"]{gap:10px}
  .nxg3-dt-scene[data-scene="9"] .nxg3-dt-dim{display:none}
  .nxg3-dt-flag{width:38px;height:38px}
}
/* ---- Reduced Motion: ruhige, ungepinnte Liste ---- */
@media (prefers-reduced-motion:reduce){
  .nxg3-dt{height:auto}
  .nxg3-dt-stage{position:relative;height:auto;display:block;padding:60px 20px}
  .nxg3-dt-panel,.nxg3-dt-dots,.nxg3-dt-skip{display:none}
  .nxg3-dt-rail{min-height:0}
  .nxg3-dt-copy{
    position:static;opacity:1;transform:none;filter:none;
    max-width:600px;margin:0 auto 34px;pointer-events:auto;
  }
  .nxg3-dt-mic-ring,.nxg3-dt-caret{animation:none}
}
.nxg3-plan ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.nxg3-plan ul li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.92rem;color:#dcdce0;
}
.nxg3-plan ul li svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;stroke:#43e97b;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nxg3-plan .nxg3-ribbon{
  position:absolute;top:20px;right:20px;
  font:500 .62rem/1 "Geist Mono",monospace;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;padding:6px 10px;border-radius:999px;
  background:linear-gradient(90deg,#a600ff,#ff006e);
  box-shadow:0 8px 22px rgba(166,0,255,.5);
}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.nxg3-cta{
  position:relative;text-align:center;
  padding:clamp(120px,18vh,220px) 24px;
  overflow:hidden;
}
.nxg3-cta .nxg3-halo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(700px,90vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(166,0,255,.35),rgba(0,207,255,.15) 40%,transparent 70%);
  filter:blur(60px);pointer-events:none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.nxg3-foot{
  position:relative;z-index:2;
  border-top:1px solid var(--nxg3-line);
  padding:80px clamp(24px,5vw,72px) 36px;
  color:var(--nxg3-ink-faint);
  font-size:.85rem;
}
.nxg3-foot-grid{
  max-width:var(--nxg3-max-w);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:48px;
  margin-bottom:54px;
}
.nxg3-foot-brand-col{
  display:flex;flex-direction:column;gap:14px;
}
.nxg3-foot .nxg3-brand{
  display:inline-flex;align-items:center;gap:10px;
  color:#fff;font:500 1rem/1 "Geist",sans-serif;
  letter-spacing:-.005em;
}
.nxg3-foot .nxg3-brand .nxg3-mark{
  width:18px;height:18px;border-radius:5px;
  background:conic-gradient(from 210deg,#00cfff,#a600ff,#ff006e,#ff8800,#00cfff);
  box-shadow:0 0 10px rgba(166,0,255,.45),inset 0 0 0 1px rgba(255,255,255,.18);
  animation:markSpin 18s linear infinite;
}
.nxg3-foot .nxg3-brand .nxg3-brand-logo{
  height:22px;width:auto;display:block;
}
.nxg3-foot-tagline{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;
  font-size:1.05rem;
  color:var(--nxg3-ink-dim);
  margin:0;
  max-width:24ch;
  line-height:1.4;
}
.nxg3-foot-tagline em{
  font-style:italic;
  background:linear-gradient(115deg,#c471ed 0%,#ff5fae 50%,#ff9158 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nxg3-foot-col{
  display:flex;flex-direction:column;gap:10px;
}
.nxg3-foot-col h6{
  font:500 .68rem/1 "Geist Mono",ui-monospace,monospace;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--nxg3-ink-faint);
  margin:0 0 8px 0;
}
.nxg3-foot-col a{
  color:var(--nxg3-ink-dim);
  text-decoration:none;
  font-size:.9rem;
  transition:color .25s ease;
}
.nxg3-foot-col a:hover{ color:#fff; }
.nxg3-foot-bottom{
  max-width:var(--nxg3-max-w);
  margin:0 auto;
  padding-top:28px;
  border-top:1px solid var(--nxg3-line);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
  font:500 .68rem/1 "Geist Mono",ui-monospace,monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--nxg3-ink-faint);
}
.nxg3-foot-bottom-tag{
  color:rgba(196,113,237,.7);
}
@media(max-width:860px){
  .nxg3-foot{ padding:60px 24px 28px; }
  .nxg3-foot-grid{
    grid-template-columns:1fr 1fr;
    gap:36px 24px;
    margin-bottom:36px;
  }
  .nxg3-foot-brand-col{
    grid-column:1 / -1;
  }
  .nxg3-foot-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    text-align:left;
  }
}

/* ============================================================
   MICRO INTERACTIONS
   ============================================================ */
/* Cursor-follow magnet on buttons */
.nxg3-magnet{transition:transform .3s var(--nxg3-ease-soft)}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media(max-width:640px){
  .nxg3-sec{padding-left:20px;padding-right:20px}
  .nxg3-hero{padding-left:20px;padding-right:20px}
}

/* ============================================================
   STATS (animated counters)
   ============================================================ */
.nxg3-stats{
  position:relative;z-index:2;
  padding:clamp(100px,14vh,160px) 24px;
  border-top:1px solid var(--nxg3-line);
  border-bottom:1px solid var(--nxg3-line);
  background:linear-gradient(180deg,rgba(255,255,255,.015),transparent);
}
.nxg3-stats-inner{
  max-width:var(--nxg3-max-w);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
}
.nxg3-stat{text-align:left;position:relative}
.nxg3-stat::before{
  content:"";position:absolute;left:0;top:-26px;
  width:28px;height:1px;background:linear-gradient(90deg,#fff,transparent);
}
.nxg3-stat .nxg3-n{
  font-family:"Geist",sans-serif;
  font-size:clamp(2.6rem,5vw,4.5rem);font-weight:500;
  letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:4px;
}
.nxg3-stat .nxg3-n .nxg3-suffix{
  font-size:.55em;font-weight:400;color:var(--nxg3-ink-dim);letter-spacing:-.02em;
}
.nxg3-stat .nxg3-t{
  margin-top:14px;
  font:500 .75rem/1.4 "Geist Mono",monospace;letter-spacing:.18em;text-transform:uppercase;
  color:var(--nxg3-ink-dim);max-width:24ch;
}
@media(max-width:900px){.nxg3-stats-inner{grid-template-columns:repeat(2,1fr);gap:40px 30px}}
@media(max-width:520px){.nxg3-stats-inner{grid-template-columns:1fr}}

/* ============================================================
   HORIZONTAL PINNED SCROLL
   ============================================================ */
.nxg3-hpin{
  position:relative;
  height:400vh;  /* drives the horizontal travel */
}
.nxg3-hpin-stick{
  position:sticky;top:0;
  height:100vh;
  display:flex;align-items:center;
  overflow:hidden;
}
.nxg3-hpin-track{
  display:flex;gap:24px;
  padding:0 max(24px,calc((100vw - 1100px)/2));
  will-change:transform;
}
.nxg3-hpin-card{
  flex-shrink:0;
  width:min(560px,80vw);height:min(640px,72vh);
  border-radius:28px;
  position:relative;overflow:hidden;
  border:1px solid var(--nxg3-line-strong);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:40px;
}
.nxg3-hpin-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,transparent 50%,rgba(0,0,0,.85) 100%);
  z-index:1;pointer-events:none;
}
.nxg3-hpin-card .nxg3-num{
  position:absolute;top:30px;left:40px;z-index:2;
  font:500 .7rem/1 "Geist Mono",monospace;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.65);
}
.nxg3-hpin-card h3{
  position:relative;z-index:2;
  font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:600;letter-spacing:-.025em;
  line-height:1.1;margin-bottom:8px;
}
.nxg3-hpin-card p{
  position:relative;z-index:2;
  font-size:1rem;color:rgba(255,255,255,.75);line-height:1.5;max-width:38ch;
}
.nxg3-hpin-card .nxg3-bg-img,
.nxg3-hpin-card .nxg3-bg-vid{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  background-size:cover;background-position:center;
  object-fit:cover;
  transition:transform 1.5s var(--nxg3-ease-slow);
  pointer-events:none;
}
.nxg3-hpin-card:hover .nxg3-bg-img,
.nxg3-hpin-card:hover .nxg3-bg-vid{transform:scale(1.04)}

.nxg3-hpin-header{
  position:absolute;top:max(var(--nxg3-nav-h),60px);left:0;right:0;
  text-align:center;padding:0 24px;z-index:3;
  pointer-events:none;
}
.nxg3-hpin-header .nxg3-eyebrow{pointer-events:all}
.nxg3-hpin-header h2{margin-top:14px;font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:600;letter-spacing:-.03em}

.nxg3-hpin-progress{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  width:min(320px,70vw);height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;
  z-index:3;
}
.nxg3-hpin-progress span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#00cfff,#a600ff,#ff006e);
  transition:width .1s linear;
}

@media(max-width:760px){
  .nxg3-hpin{height:auto}
  .nxg3-hpin-stick{position:relative;height:auto;padding:60px 0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .nxg3-hpin-track{gap:16px;padding:0 24px}
  .nxg3-hpin-card{scroll-snap-align:center;width:82vw;height:70vh}
  .nxg3-hpin-header{position:relative;top:auto;margin-bottom:30px}
  .nxg3-hpin-progress{display:none}
}

/* ============================================================
   GB-METRIK-INFO — i-Buttons mit Erklär-Popover (Klick/Escape)
   ============================================================ */
.nxg3-gb-metric-header{position:relative}
.nxg3-gb-info{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;margin-left:8px;vertical-align:2px;
  border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);color:var(--nxg3-ink-dim);
  font:600 .6rem/1 "Geist Mono",ui-monospace,monospace;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.nxg3-gb-info:hover{color:var(--nxg3-ink);border-color:rgba(142,162,255,.6);background:rgba(142,162,255,.12)}
.nxg3-gb-info:focus-visible{outline:2px solid #8ea2ff;outline-offset:2px}
.nxg3-gb-info-pop{
  position:absolute;left:0;right:0;top:calc(100% + 10px);
  z-index:6;padding:14px 16px;border-radius:14px;
  background:rgba(16,17,26,.97);border:1px solid rgba(142,162,255,.3);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  font:400 .8rem/1.6 "Geist",sans-serif;color:var(--nxg3-ink-dim);
  text-transform:none;letter-spacing:0;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.nxg3-gb-metric-header.nxg3-info-open .nxg3-gb-info-pop{opacity:1;transform:none;pointer-events:auto}

/* Rezensions-Buttons unter den Testimonial-Karten */
.nxg3-testi-more{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:46px}
@media(max-width:640px){
  .nxg3-testi-more{flex-direction:column;align-items:stretch}
  .nxg3-testi-more .nxg3-btn{justify-content:center}
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.nxg3-testimonials{
  padding:clamp(100px,14vh,160px) 24px;
  max-width:var(--nxg3-max-w);margin:0 auto;position:relative;z-index:2;
}
.nxg3-testi-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;
}
@media(max-width:900px){.nxg3-testi-grid{grid-template-columns:1fr}}

.nxg3-testi{
  position:relative;padding:34px 32px 30px;
  border:1px solid var(--nxg3-line);border-radius:22px;
  background:linear-gradient(160deg,#0e0e12,#07070a);
  transform-style:preserve-3d;
  transition:transform .5s var(--nxg3-ease-soft),border-color .3s ease,box-shadow .5s var(--nxg3-ease-soft);
  will-change:transform;
  display:flex;flex-direction:column;
}
.nxg3-testi:hover{
  border-color:var(--nxg3-line-strong);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9);
}
.nxg3-testi-stars{
  display:flex;gap:3px;margin-bottom:22px;
}
.nxg3-testi-stars svg{width:15px;height:15px;fill:#ffc857;stroke:none}
.nxg3-testi blockquote{
  font-family:"Instrument Serif",serif;
  font-size:1.35rem;font-weight:400;line-height:1.35;letter-spacing:-.01em;
  color:#f0f0f4;margin-bottom:auto;padding-bottom:26px;
}
.nxg3-testi blockquote::before{content:"“";color:var(--nxg3-ink-faint);margin-right:2px}
.nxg3-testi blockquote::after{content:"”";color:var(--nxg3-ink-faint);margin-left:2px}
.nxg3-testi-person{
  display:flex;align-items:center;gap:12px;
  padding-top:20px;border-top:1px solid var(--nxg3-line);
  margin-top:6px;
}
.nxg3-testi-avatar{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  font:600 .9rem/1 "Geist",sans-serif;
  background:linear-gradient(135deg,var(--c1,#00cfff),var(--c2,#a600ff));
  color:#fff;
  box-shadow:0 6px 18px -4px rgba(0,0,0,.7);
}
.nxg3-testi-person .nxg3-who{font-size:.92rem;font-weight:500;color:#fff}
.nxg3-testi-person .nxg3-role{font-size:.78rem;color:var(--nxg3-ink-dim);margin-top:2px}

/* ============================================================
   CLOSING BEAT — letzte cinematic Headline vor Pricing.
   Folgt dem [data-watch] Reveal-Pattern; Animation triggert via
   den vorhandenen IntersectionObserver, der .in-view setzt.
   ============================================================ */
.nxg3-closing-beat{
  box-sizing:border-box;   /* explizit: manche WP-Themes überschreiben unseren *-Reset;
                              sonst würde das vertikale Padding die Höhe aufblähen */
  min-height:60vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  /* Vertikales Padding bewusst NICHT gesetzt — die min-height + Flex-Zentrierung
     liefert den Freiraum. So bleibt die Sektionshöhe robust bei 60vh, egal welches
     box-sizing das WordPress-Theme erzwingt (verhinderte den riesigen Leerraum
     vor „Preise"). Lokal unverändert, da Text ohnehin in 60vh zentriert ist. */
  padding:0 clamp(20px,5vw,50px);
  position:relative;
  z-index:2;
}
.nxg3-closing-beat-eyebrow{
  font:500 .68rem/1 "Geist Mono", ui-monospace, monospace;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--nxg3-ink-faint);
  display:inline-flex; align-items:center; gap:1rem;
  margin-bottom:32px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.nxg3-closing-beat-eyebrow .nxg3-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:linear-gradient(115deg,#c471ed,#ff5fae,#ff9158);
  box-shadow:0 0 12px rgba(196,113,237,.55);
}
.nxg3-closing-beat-title{
  font-family:"Geist","SF Pro Display",-apple-system,sans-serif;
  font-size:clamp(2.4rem,6vw,5.4rem);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1.04;
  color:var(--nxg3-ink);
  max-width:18ch;
  margin:0;
  opacity:0;
  filter:blur(8px);
  transform:translateY(20px);
  transition:
    opacity 1.2s .25s cubic-bezier(.16,1,.3,1),
    transform 1.2s .25s cubic-bezier(.16,1,.3,1),
    filter 1.2s .25s cubic-bezier(.16,1,.3,1);
}
.nxg3-closing-beat-title em{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  background:linear-gradient(115deg,#c471ed 0%,#ff5fae 50%,#ff9158 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.nxg3-closing-beat.nxg3-in-view .nxg3-closing-beat-eyebrow{
  opacity:1; transform:translateY(0);
}
.nxg3-closing-beat.nxg3-in-view .nxg3-closing-beat-title{
  opacity:1; filter:blur(0); transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .nxg3-closing-beat-eyebrow,
  .nxg3-closing-beat-title{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
}

/* ============================================================
   BENCHMARKS  (Gen3 vs Gen2 vs Experte vs GPT-5.6)
   ============================================================ */
.nxg3-gb-section{
  --gb-a:#6aa8ff;
  --gb-b:#d08bff;
  --gb-c:#ff6ec7;
  --gb-d:#ffcf6a;
  --gb-glow:rgba(208,139,255,.32);
  --gb-glow-soft:rgba(106,168,255,.18);
  --gb-glow-warm:rgba(255,110,199,.22);
  --gb-line:rgba(255,255,255,.07);
  --gb-line-strong:rgba(255,255,255,.14);
  --gb-fg-mute:#6e6e73;
  position:relative;z-index:2;
  padding:clamp(140px,18vh,220px) 8vw clamp(160px,22vh,260px);
  margin:0;
}
.nxg3-gb-section::before,
.nxg3-gb-section::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:120vw; height:90vh;
  pointer-events:none;
  z-index:-1;
  filter:blur(80px);
}
.nxg3-gb-section::before{
  top:-30vh;
  background:radial-gradient(ellipse 60% 55% at 30% 60%,
    var(--gb-glow-soft) 0%,
    var(--gb-glow) 30%,
    transparent 70%);
}
.nxg3-gb-section::after{
  bottom:-30vh;
  background:radial-gradient(ellipse 60% 55% at 50% 40%,
    var(--gb-glow) 0%,
    var(--gb-glow-warm) 35%,
    transparent 75%);
}

/* hero — left-aligned, oversized, no center-stack */
.nxg3-gb-hero{
  max-width:1400px;
  margin:0 auto;
  position:relative;
}
.nxg3-gb-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font:500 .68rem/1 "Geist Mono",ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--nxg3-ink-dim);
  padding:8px 14px;
  border:1px solid var(--gb-line-strong);
  border-radius:999px;
  margin-bottom:48px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  background:rgba(255,255,255,.02);
  will-change:transform,opacity;
}
.nxg3-gb-eyebrow .nxg3-gb-eyebrow-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gb-a), var(--gb-b) 45%, var(--gb-c));
  box-shadow:0 0 12px var(--gb-glow);
  animation:gbPulse 2.4s ease-in-out infinite;
}
@keyframes gbPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.55; transform:scale(.85); }
}
.nxg3-gb-headline{
  font:500 clamp(56px,9.5vw,160px)/.92 "Geist","SF Pro Display",sans-serif;
  letter-spacing:-.045em;
  margin:0 0 40px;
  color:var(--nxg3-ink);
  max-width:14ch;
}
.nxg3-gb-headline .nxg3-gb-line{
  display:block;
  /* Reveal-Maske (Wörter fahren von unten ein). overflow:clip statt hidden
     erlaubt via overflow-clip-margin, dass Kursiv-Unterlängen (g) unten
     sichtbar bleiben — ohne das Layout zu verändern. Das Durchblitzen der
     einfahrenden Wörter ist durch deren opacity-Fade unsichtbar. */
  overflow:clip;
  overflow-clip-margin:.13em;
}
.nxg3-gb-headline .nxg3-gb-word{
  display:inline-block;
  will-change:transform,opacity;
}
.nxg3-gb-headline .nxg3-gb-accent{
  display:inline-block;
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.02em;
  background:linear-gradient(110deg, var(--gb-a) 0%, var(--gb-b) 40%, var(--gb-c) 70%, var(--gb-d) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  /* Malfläche nach unten erweitern, damit background-clip:text die
     Kursiv-Unterlänge (g in „Weniger") ausmalt; negativer Margin hält
     die Zeilenhöhe exakt gleich. */
  padding:0 .1em .12em 0;
  margin:0 -.1em -.12em 0;
}
.nxg3-gb-subhead{
  font:400 clamp(17px,1.4vw,21px)/1.5 "Geist","SF Pro Text",sans-serif;
  color:var(--nxg3-ink-dim);
  max-width:54ch;
  margin:0 0 60px;
  will-change:transform,opacity;
}
.nxg3-gb-subhead strong{
  color:var(--nxg3-ink);
  font-weight:500;
}
.nxg3-gb-chip{
  display:inline-flex;
  align-items:center;
  gap:18px;
  padding:14px 22px 14px 14px;
  border-radius:18px;
  border:1px solid var(--gb-line-strong);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  margin-bottom:0;
  will-change:transform,opacity;
}
.nxg3-gb-chip-glyph{
  width:44px;height:44px;
  border-radius:11px;
  background:linear-gradient(135deg, var(--gb-a) 0%, var(--gb-b) 45%, var(--gb-c) 80%, var(--gb-d));
  position:relative;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 8px 24px var(--gb-glow);
}
.nxg3-gb-chip-glyph::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1.5px solid rgba(0,0,0,.55);
  border-radius:5px;
}
.nxg3-gb-chip-glyph::after{
  content:"";
  position:absolute;
  inset:14px;
  background:rgba(0,0,0,.55);
  border-radius:2px;
}
.nxg3-gb-chip-text{ display:flex; flex-direction:column; gap:2px; }
.nxg3-gb-chip-label{
  font:400 10px/1 "Geist Mono",ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--nxg3-ink-dim);
}
.nxg3-gb-chip-name{
  font:500 16px/1.15 "Geist","SF Pro Text",sans-serif;
  letter-spacing:-.01em;
  color:var(--nxg3-ink);
}

/* shell that holds tabs/domain/metrics — gives breathing room from hero */
.nxg3-gb-shell{
  max-width:1400px;
  margin:120px auto 0;
  padding-top:64px;
  border-top:1px solid var(--gb-line);
  position:relative;
}

/* tabs */
.nxg3-gb-tabs-wrap{
  display:flex;justify-content:center;
  margin:0 auto 80px;
}
.nxg3-gb-tabs{
  position:relative;
  display:inline-flex;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--gb-line-strong);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  isolation:isolate;
}
.nxg3-gb-tab-pill{
  position:absolute;
  top:6px; bottom:6px; left:0;
  width:0;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 0 0 1px rgba(208,139,255,.18) inset,
    0 4px 18px rgba(208,139,255,.10);
  z-index:0;
  pointer-events:none;
  transition:transform .55s cubic-bezier(.16,1,.3,1), width .55s cubic-bezier(.16,1,.3,1);
  will-change:transform,width;
}
.nxg3-gb-tab{
  position:relative;z-index:1;
  background:transparent;border:0;
  color:var(--nxg3-ink-dim);
  font:500 .85rem/1 "Geist","SF Pro Text",sans-serif;
  letter-spacing:-.01em;
  padding:12px 22px;
  border-radius:999px;
  cursor:pointer;
  transition:color .5s ease;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.nxg3-gb-tab:hover{ color:rgba(245,245,247,.85); }
.nxg3-gb-tab.nxg3-is-active{ color:var(--nxg3-ink); }
.nxg3-gb-tab:focus-visible{
  outline:2px solid var(--gb-b);
  outline-offset:4px;
}

/* domain display */
.nxg3-gb-domain-display{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:64px;
  align-items:end;
  margin:0 auto 70px;
  max-width:1100px;
  padding-bottom:36px;
  border-bottom:1px solid var(--gb-line);
}
.nxg3-gb-domain-meta{
  font:500 .68rem/1 "Geist Mono",ui-monospace,monospace;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gb-fg-mute);
  margin-bottom:18px;
}
.nxg3-gb-domain-meta .nxg3-num{ color:var(--nxg3-ink); font-weight:500; }
.nxg3-gb-domain-meta .nxg3-sep{
  display:inline-block;
  width:24px; height:1px;
  background:var(--gb-line-strong);
  vertical-align:middle;
  margin:0 14px;
}
.nxg3-gb-domain-title{
  font:400 clamp(36px,5.5vw,80px)/.98 "Geist","SF Pro Display",sans-serif;
  letter-spacing:-.03em;
  color:var(--nxg3-ink);
  will-change:transform,opacity;
}
.nxg3-gb-domain-title em{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  background:linear-gradient(110deg, var(--gb-a), var(--gb-b) 45%, var(--gb-c) 70%, var(--gb-d));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.nxg3-gb-domain-desc{
  font:400 1rem/1.55 "Geist","SF Pro Text",sans-serif;
  color:var(--nxg3-ink-dim);
  padding-bottom:6px;
  will-change:transform,opacity;
}

/* metrics */
.nxg3-gb-metrics{ max-width:1100px; margin:0 auto; }
.nxg3-gb-metric{ margin-bottom:56px; }
.nxg3-gb-metric:last-child{ margin-bottom:0; }
.nxg3-gb-metric-header{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:18px;
  border-bottom:1px solid var(--gb-line);
  margin-bottom:24px;
}
.nxg3-gb-metric-name{
  font:500 clamp(20px,2.2vw,28px)/1 "Geist","SF Pro Display",sans-serif;
  letter-spacing:-.02em;
  color:var(--nxg3-ink);
}
.nxg3-gb-metric-hint{
  font:500 .68rem/1 "Geist Mono",ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--gb-fg-mute);
}

.nxg3-gb-bar-row{
  display:grid;
  grid-template-columns:220px 1fr 100px;
  align-items:center;
  gap:28px;
  padding:11px 0;
}
.nxg3-gb-bar-label{
  display:flex;align-items:center;gap:12px;
  font:400 .95rem/1 "Geist","SF Pro Text",sans-serif;
  color:var(--nxg3-ink-dim);
  transition:color .4s ease;
}
.nxg3-gb-bar-row.nxg3-is-hero .nxg3-gb-bar-label{
  color:var(--nxg3-ink);
  font-weight:500;
}
.nxg3-gb-bar-swatch{
  width:10px;height:10px;
  border-radius:2px;
  flex-shrink:0;
}
/* Die vier Gen3-Modelle in absteigender Saettigung — die Reihenfolge der
   Reihe ist damit auch ohne Beschriftung ablesbar. Die Referenzgruppe
   (Gen2, Experte, ChatGPT) bleibt bewusst entsaettigt. */
.nxg3-gb-bar-row[data-actor="pro"] .nxg3-gb-bar-swatch{
  background:linear-gradient(135deg, var(--gb-a), var(--gb-b) 40%, var(--gb-c) 75%, var(--gb-d));
  box-shadow:0 0 8px var(--gb-glow);
}
.nxg3-gb-bar-row[data-actor="plus"] .nxg3-gb-bar-swatch{ background:rgba(201,176,255,.85); }
.nxg3-gb-bar-row[data-actor="core"] .nxg3-gb-bar-swatch{ background:rgba(143,227,200,.8); }
.nxg3-gb-bar-row[data-actor="flow"] .nxg3-gb-bar-swatch{ background:rgba(120,200,255,.75); }
.nxg3-gb-bar-row[data-actor="gen2"] .nxg3-gb-bar-swatch{ background:rgba(160,168,184,.55); }
.nxg3-gb-bar-row[data-actor="expert"] .nxg3-gb-bar-swatch{ background:var(--gb-d); }
.nxg3-gb-bar-row[data-actor="gpt"] .nxg3-gb-bar-swatch{ background:rgba(245,245,247,.28); }

.nxg3-gb-bar-track{
  height:4px;
  background:rgba(255,255,255,.06);
  border-radius:999px;
  overflow:hidden;
  position:relative;
}
.nxg3-gb-bar-row.nxg3-is-hero .nxg3-gb-bar-track{ height:8px; }

.nxg3-gb-bar-fill{
  height:100%;
  width:0%;
  border-radius:999px;
}
.nxg3-gb-bar-row[data-actor="pro"] .nxg3-gb-bar-fill{
  background:linear-gradient(90deg, var(--gb-a) 0%, var(--gb-b) 40%, var(--gb-c) 75%, var(--gb-d) 100%);
  box-shadow:
    0 0 16px var(--gb-glow),
    0 0 1px rgba(255,255,255,.4) inset;
}
.nxg3-gb-bar-row[data-actor="plus"] .nxg3-gb-bar-fill{ background:rgba(201,176,255,.8); }
.nxg3-gb-bar-row[data-actor="core"] .nxg3-gb-bar-fill{ background:rgba(143,227,200,.75); }
.nxg3-gb-bar-row[data-actor="flow"] .nxg3-gb-bar-fill{ background:rgba(120,200,255,.7); }
.nxg3-gb-bar-row[data-actor="gen2"] .nxg3-gb-bar-fill{ background:rgba(160,168,184,.55); }
.nxg3-gb-bar-row[data-actor="expert"] .nxg3-gb-bar-fill{ background:var(--gb-d); }
.nxg3-gb-bar-row[data-actor="gpt"]  .nxg3-gb-bar-fill{ background:rgba(245,245,247,.35); }

/* Gruppentrenner zwischen der Gen3-Reihe und den Vergleichswerten.
   Traegt die Kernaussage der Sektion: alles ueber der Linie ist neu,
   alles Neue liegt ueber allem darunter. */
.nxg3-gb-group-sep{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:14px;
  margin:14px 0 6px;
}
.nxg3-gb-group-sep span{
  font:400 .68rem/1 "Geist Mono",ui-monospace,monospace;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gb-fg-mute);white-space:nowrap;
}
.nxg3-gb-group-sep::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--gb-line-strong),transparent);
}
.nxg3-gb-bar-row.nxg3-gb-is-ref .nxg3-gb-bar-label,
.nxg3-gb-bar-row.nxg3-gb-is-ref .nxg3-gb-bar-value{ opacity:.72; }

.nxg3-gb-bar-value{
  font:400 1rem/1 "Geist Mono",ui-monospace,monospace;
  text-align:right;
  color:var(--nxg3-ink-dim);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  transition:color .4s ease;
}
.nxg3-gb-bar-row.nxg3-is-hero .nxg3-gb-bar-value{
  color:var(--nxg3-ink);
  font-weight:500;
  font-size:1.25rem;
}
.nxg3-gb-bar-value .nxg3-unit{
  font-size:.6em;
  color:var(--gb-fg-mute);
  margin-left:2px;
}
.nxg3-gb-winner-mark{
  display:inline-block;
  margin-left:8px;
  font:500 .56rem/1 "Geist Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.16em;
  padding:3px 7px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(106,168,255,.18), rgba(208,139,255,.18) 45%, rgba(255,110,199,.18));
  border:1px solid rgba(208,139,255,.4);
  color:var(--gb-b);
  vertical-align:middle;
}

.nxg3-gb-nav-hint{
  margin:48px auto 0;
  text-align:center;
  font:500 .62rem/1 "Geist Mono",ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--gb-fg-mute);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.nxg3-gb-nav-hint kbd{
  font:500 .62rem/1 "Geist Mono",monospace;
  padding:3px 7px;
  border:1px solid var(--gb-line-strong);
  border-radius:5px;
  background:rgba(255,255,255,.03);
  color:var(--nxg3-ink-dim);
}

/* closing */
.nxg3-gb-closing{
  margin:160px auto 0;
  max-width:1100px;
  padding:0 24px;
  text-align:center;
  position:relative;
}
.nxg3-gb-closing-num{
  font:300 clamp(180px,28vw,420px)/.85 "Geist","SF Pro Display",sans-serif;
  letter-spacing:-.06em;
  background:linear-gradient(180deg, var(--nxg3-ink) 0%, var(--gb-b) 55%, var(--gb-c) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:12px;
  will-change:transform,opacity;
}
.nxg3-gb-closing-fraction{
  font:500 .78rem/1 "Geist Mono",ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--nxg3-ink-dim);
  margin-bottom:40px;
}
.nxg3-gb-closing-title{
  font:400 clamp(28px,3.8vw,52px)/1.08 "Geist","SF Pro Display",sans-serif;
  letter-spacing:-.025em;
  color:var(--nxg3-ink);
  margin:0 auto 22px;
  max-width:880px;
}
.nxg3-gb-closing-title em{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  background:linear-gradient(110deg, var(--gb-a), var(--gb-b) 45%, var(--gb-c) 70%, var(--gb-d));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.nxg3-gb-closing-sub{
  font:400 1rem/1.55 "Geist","SF Pro Text",sans-serif;
  color:var(--nxg3-ink-dim);
  max-width:520px;
  margin:0 auto;
}
.nxg3-gb-footnote{
  margin:48px auto 0;max-width:640px;
  text-align:center;
  font:500 .66rem/1.5 "Geist Mono",monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--nxg3-ink-faint);
}

@media(max-width:980px){
  .nxg3-gb-domain-display{ grid-template-columns:1fr; gap:24px; margin-bottom:54px; }
  .nxg3-gb-bar-row{
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    gap:8px 16px;
    padding:12px 0;
  }
  .nxg3-gb-bar-label{ grid-column:1; grid-row:1; }
  .nxg3-gb-bar-value{ grid-column:2; grid-row:1; text-align:right; }
  .nxg3-gb-bar-track{ grid-column:1 / -1; grid-row:2; }
  .nxg3-gb-tab{ padding:11px 14px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce){
  .nxg3-gb-section *, .nxg3-gb-section *::before, .nxg3-gb-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .nxg3-gb-bar-fill{ width:var(--gb-final-width, 0%) !important; }
}

/* ============================================================
   FAQ  —  zweispaltig: Schiene mit Filter + durchsuchbares Akkordeon
   ============================================================ */
.nxg3-faq-layout{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(40px,6vw,88px);
  align-items:start;
}

/* ---------- linke Schiene ---------- */
.nxg3-faq-rail{
  position:sticky;
  top:calc(var(--nxg3-nav-h) + 40px);
}
.nxg3-faq-head{
  margin-top:18px;
  font-size:clamp(2rem,3.4vw,2.9rem);
  line-height:1.06;
}
.nxg3-faq-intro{
  margin-top:20px;
  font-size:.95rem;line-height:1.65;
  color:var(--nxg3-ink-dim);
  max-width:34ch;
}
.nxg3-faq-cats{
  margin-top:34px;
  display:flex;flex-direction:column;gap:2px;
}
.nxg3-faq-cat{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;padding:11px 14px;
  border-radius:11px;
  border:1px solid transparent;
  background:transparent;
  font:500 .92rem/1.3 "Geist",sans-serif;
  letter-spacing:-.01em;
  color:var(--nxg3-ink-dim);
  text-align:left;
  transition:color .28s var(--nxg3-ease-soft),background .28s var(--nxg3-ease-soft),border-color .28s var(--nxg3-ease-soft);
}
.nxg3-faq-cat:hover{color:var(--nxg3-ink);background:rgba(255,255,255,.04)}
.nxg3-faq-cat.nxg3-on{
  color:#fff;
  background:linear-gradient(100deg,rgba(196,113,237,.16),rgba(18,194,233,.10));
  border-color:rgba(255,255,255,.12);
}
.nxg3-faq-count{
  flex-shrink:0;
  font-style:normal;
  font-variant-numeric:tabular-nums;
  font-size:.76rem;
  color:var(--nxg3-ink-faint);
  transition:color .28s var(--nxg3-ease-soft);
}
.nxg3-faq-cat.nxg3-on .nxg3-faq-count{color:rgba(255,255,255,.62)}
.nxg3-faq-cat[data-empty="1"]{opacity:.34;pointer-events:none}

.nxg3-faq-help{
  margin-top:36px;padding:20px;
  border-radius:16px;
  border:1px solid var(--nxg3-line);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
}
.nxg3-faq-help-t{
  font:600 .95rem/1.3 "Geist",sans-serif;
  letter-spacing:-.015em;color:#fff;
}
.nxg3-faq-help-p{
  margin-top:8px;
  font-size:.86rem;line-height:1.6;
  color:var(--nxg3-ink-dim);
}
.nxg3-faq-help-a{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:14px;
  font:500 .86rem/1 "Geist",sans-serif;
  color:#fff;
  transition:gap .3s var(--nxg3-ease-spring);
}
.nxg3-faq-help-a svg{width:15px;height:15px}
.nxg3-faq-help-a:hover{gap:13px}

/* ---------- Suche ---------- */
.nxg3-faq-search{
  position:relative;
  display:flex;align-items:center;
  margin-bottom:12px;
  border-radius:14px;
  border:1px solid var(--nxg3-line);
  background:rgba(255,255,255,.03);
  transition:border-color .3s var(--nxg3-ease-soft),background .3s var(--nxg3-ease-soft);
}
.nxg3-faq-search:focus-within{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.05);
}
.nxg3-faq-search-i{
  flex-shrink:0;
  width:17px;height:17px;margin-left:17px;
  color:var(--nxg3-ink-faint);
  pointer-events:none;
}
.nxg3-faq-input{
  flex:1;min-width:0;
  padding:15px 14px;
  border:0;background:transparent;outline:0;
  font:400 .95rem/1.4 "Geist",sans-serif;
  letter-spacing:-.01em;
  color:var(--nxg3-ink);
}
.nxg3-faq-input::placeholder{color:var(--nxg3-ink-faint)}
.nxg3-faq-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.nxg3-faq-clear{
  flex-shrink:0;
  display:grid;place-items:center;
  width:28px;height:28px;margin-right:12px;
  border-radius:50%;
  color:var(--nxg3-ink-dim);
  background:rgba(255,255,255,.06);
  transition:color .25s,background .25s;
}
.nxg3-faq-clear svg{width:13px;height:13px}
.nxg3-faq-clear:hover{color:#fff;background:rgba(255,255,255,.13)}
/* Eigene display-Regeln schlagen sonst das [hidden] des Browsers. */
.nxg3-faq-clear[hidden]{display:none}

/* ---------- Akkordeon ---------- */
.nxg3-faq-wrap{
  display:flex;flex-direction:column;gap:2px;
}
.nxg3-faq-item{
  position:relative;
  border-radius:14px;
  border:1px solid transparent;
  transition:background .35s var(--nxg3-ease-soft),border-color .35s var(--nxg3-ease-soft);
}
/* Trennlinie zwischen geschlossenen Nachbarn */
.nxg3-faq-item::after{
  content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px;
  background:var(--nxg3-line);
  transition:opacity .3s var(--nxg3-ease-soft);
}
.nxg3-faq-item:last-child::after,
.nxg3-faq-item.nxg3-open::after,
.nxg3-faq-item.nxg3-open + .nxg3-faq-item::after{opacity:0}
.nxg3-faq-item:hover{background:rgba(255,255,255,.022)}
.nxg3-faq-item.nxg3-open{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  border-color:rgba(255,255,255,.10);
}
/* Farbkante links, nur im offenen Zustand */
.nxg3-faq-item::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,#c471ed,#12c2e9);
  opacity:0;transform:scaleY(.3);transform-origin:center;
  transition:opacity .4s var(--nxg3-ease-soft),transform .5s var(--nxg3-ease-soft);
}
.nxg3-faq-item.nxg3-open::before{opacity:1;transform:scaleY(1)}

.nxg3-faq-q{
  position:relative;
  width:100%;text-align:left;
  padding:22px 18px;
  display:flex;align-items:center;gap:16px;
  font:500 1.06rem/1.45 "Geist",sans-serif;
  letter-spacing:-.015em;color:var(--nxg3-ink);
  transition:color .3s ease;
}
.nxg3-faq-q:hover{color:#fff}
.nxg3-faq-n{
  flex-shrink:0;
  font-style:normal;
  font-variant-numeric:tabular-nums;
  font-size:.74rem;font-weight:500;
  color:var(--nxg3-ink-faint);
  padding-top:.2em;
  transition:color .3s var(--nxg3-ease-soft);
}
.nxg3-faq-item.nxg3-open .nxg3-faq-n{color:rgba(196,113,237,.9)}
.nxg3-faq-qt{flex:1;min-width:0}
.nxg3-faq-q .nxg3-plus{
  position:relative;
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--nxg3-line-strong);
  display:grid;place-items:center;
  transition:transform .4s var(--nxg3-ease-spring),background .3s,border-color .3s;
}
.nxg3-faq-q .nxg3-plus::before,
.nxg3-faq-q .nxg3-plus::after{
  content:"";position:absolute;
  width:10px;height:1.5px;background:#fff;border-radius:2px;
  transition:transform .4s var(--nxg3-ease-spring);
}
.nxg3-faq-q .nxg3-plus::after{transform:rotate(90deg)}
.nxg3-faq-item.nxg3-open .nxg3-faq-q .nxg3-plus{background:#fff;border-color:#fff}
.nxg3-faq-item.nxg3-open .nxg3-faq-q .nxg3-plus::before,
.nxg3-faq-item.nxg3-open .nxg3-faq-q .nxg3-plus::after{background:#000}
.nxg3-faq-item.nxg3-open .nxg3-faq-q .nxg3-plus::after{transform:rotate(0deg)}

.nxg3-faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .5s var(--nxg3-ease-soft);
}
.nxg3-faq-a-inner{
  padding:0 18px 24px 58px;max-width:66ch;
  font-size:.98rem;color:var(--nxg3-ink-dim);line-height:1.68;
  opacity:0;transform:translateY(-6px);
  transition:opacity .4s var(--nxg3-ease-soft) .06s,transform .4s var(--nxg3-ease-soft) .06s;
}
.nxg3-faq-item.nxg3-open .nxg3-faq-a-inner{opacity:1;transform:none}
/* Suchtreffer-Hervorhebung */
.nxg3-faq-qt mark,.nxg3-faq-a-inner mark{
  background:rgba(196,113,237,.26);color:#fff;border-radius:3px;padding:0 2px;
}

.nxg3-faq-hide{display:none}
.nxg3-faq-empty[hidden]{display:none}
.nxg3-faq-empty{
  margin-top:28px;padding:26px 18px;
  text-align:center;
  font-size:.95rem;line-height:1.6;
  color:var(--nxg3-ink-dim);
  border:1px dashed var(--nxg3-line-strong);
  border-radius:14px;
}

/* ---------- Tablet / Handy ---------- */
@media (max-width:960px){
  .nxg3-faq-layout{grid-template-columns:1fr;gap:34px}
  .nxg3-faq-rail{position:static;top:auto}
  .nxg3-faq-intro{max-width:60ch}
  /* Kategorien werden zur waagerechten Chip-Reihe */
  .nxg3-faq-cats{
    flex-direction:row;flex-wrap:nowrap;
    gap:8px;margin-top:26px;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* Rand ausbrechen, damit die Reihe am Bildschirmrand ausläuft */
    margin-left:-24px;margin-right:-24px;
    padding:2px 24px;
  }
  .nxg3-faq-cats::-webkit-scrollbar{display:none}
  .nxg3-faq-cat{
    width:auto;flex-shrink:0;
    padding:9px 15px;border-radius:999px;
    border-color:var(--nxg3-line);
    font-size:.86rem;
  }
  .nxg3-faq-cat .nxg3-faq-count{display:none}
  /* Schiene und Hauptspalte loesen sich auf, damit ALLE Bausteine
     eigene Rasterzellen bekommen und frei sortierbar sind.
     Die Support-Karte rutscht so ans Ende statt zu verschwinden. */
  .nxg3-faq-rail,.nxg3-faq-main{display:contents}
  .nxg3-faq-layout > .nxg3-faq-rail > .nxg3-eyebrow{order:1}
  .nxg3-faq-head{order:2}
  .nxg3-faq-intro{order:3}
  .nxg3-faq-cats{order:4}
  .nxg3-faq-search{order:5;margin-top:6px}
  .nxg3-faq-wrap{order:6}
  .nxg3-faq-empty{order:7}
  .nxg3-faq-help{order:8;margin-top:8px}
}
@media (max-width:600px){
  .nxg3-faq-q{padding:19px 14px;gap:12px;font-size:.99rem}
  .nxg3-faq-n{display:none}
  .nxg3-faq-a-inner{padding:0 14px 21px;font-size:.94rem}
  .nxg3-faq-item::after{left:14px;right:14px}
  .nxg3-faq-input{padding:14px 12px;font-size:.92rem}
  .nxg3-faq-search-i{margin-left:14px}
}

@media (prefers-reduced-motion:reduce){
  .nxg3-faq-a{transition:none}
  .nxg3-faq-a-inner{transition:none;opacity:1;transform:none}
  .nxg3-faq-item::before{transition:none}
}

/* Custom Cursor entfernt (Juli 2026, Feedback der Kollegen:
   nachziehender Ring wirkte störend) — native Maus. */

/* ============================================================
   SCRUB STORY  —  cinematic scroll-driven frame sequence
   ============================================================ */
.nxg3-scrub-story{
  position:relative;
  height:340vh;               /* total scroll distance — kurz gehalten: Film läuft zeitbasiert, Scroll macht nur Shrink+Text */
  background:#000;
  z-index:3;
  /* sit above hero ambience, below nav */
}
.nxg3-scrub-story::before{
  /* subtle top fade so the transition from the hero feels filmic */
  content:"";position:absolute;left:0;right:0;top:0;height:18vh;
  background:linear-gradient(to bottom,#000 0%,transparent 100%);
  z-index:4;pointer-events:none;
}
.nxg3-scrub-story::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:14vh;
  background:linear-gradient(to top,#000 0%,transparent 100%);
  z-index:4;pointer-events:none;
}
.nxg3-scrub-stage{
  position:sticky;top:0;
  width:100%;height:100vh;
  overflow:hidden;
  display:block;
  background:#000;
}
.nxg3-scrub-canvas-wrap{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:100vw;height:100vh;
  border-radius:0;
  overflow:hidden;
  will-change:width,height,border-radius,transform;
  background:#000;
  z-index:2;
  /* sharp, cinematic crop */
  box-shadow:0 0 0 0 rgba(0,0,0,0);
}
.nxg3-scrub-video{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  background:#000;
}
/* iPhone mockup — bezel ring via inset box-shadow so the canvas can
   shine through the "screen" area beneath it */
.nxg3-scrub-phone{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
  transition:opacity .5s var(--nxg3-ease-soft);
  background:transparent;
  border-radius:46px;
  /* bezel ring painted inward; glows painted outward */
  box-shadow:
    inset 0 0 0 10px #1f1f23,
    inset 0 0 0 11px rgba(255,255,255,.08),
    inset 0 2px 0 10px rgba(255,255,255,.04),
    0 40px 120px rgba(166,0,255,.35),
    0 20px 60px rgba(0,207,255,.28),
    0 10px 30px rgba(255,0,110,.18);
  will-change:width,height;
  z-index:1;
}
.nxg3-scrub-phone.nxg3-visible{opacity:1}

/* Decorative overlay (notch + side buttons), drawn OVER the canvas */
.nxg3-scrub-phone-deco{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
  transition:opacity .5s var(--nxg3-ease-soft);
  border-radius:46px;
  z-index:3;
}
.nxg3-scrub-phone-deco.nxg3-visible{opacity:1}
.nxg3-scrub-phone-notch{
  position:absolute;
  top:10px;left:50%;transform:translateX(-50%);
  width:34%;height:24px;
  background:#000;
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.nxg3-scrub-phone-notch::after{
  content:"";position:absolute;right:16%;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#1a1a1f 0%,#050505 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.nxg3-scrub-phone-btn{
  position:absolute;
  background:linear-gradient(to right,#18181c,#2e2e32);
  border-radius:2px;
}
.nxg3-scrub-phone-btn.nxg3-vol{ left:-2px; top:22%; width:4px; height:46px; }
.nxg3-scrub-phone-btn.nxg3-pwr{ right:-2px; top:26%; width:4px; height:64px; }

/* Text that slides in at the end.
   On viewports wider than 1600px, the right-padding scales up so the
   text doesn't pin to the screen edge and drift away from the phone.
   max() picks whichever pulls text further inward. */
.nxg3-scrub-outro{
  position:absolute;
  right:max(clamp(24px,6vw,96px), calc((100vw - 1600px) / 2 + 40px));
  top:50%;
  transform:translateY(-50%);
  width:min(480px,42vw);
  opacity:0;
  pointer-events:none;
  z-index:5;
  will-change:opacity,transform;
}
.nxg3-scrub-outro.nxg3-visible{pointer-events:auto}
.nxg3-scrub-outro .nxg3-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font:500 .68rem/1 "Geist Mono",monospace;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--nxg3-ink-dim);
  margin-bottom:24px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--nxg3-line-strong);
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(10px);
}
.nxg3-scrub-outro .nxg3-eyebrow .nxg3-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--nxg3-aurora-1);
  box-shadow:0 0 10px var(--nxg3-aurora-1);
  animation:pulseDot 1.8s ease-in-out infinite;
}
.nxg3-scrub-outro h2{
  font-size:clamp(2rem,3.8vw,3.4rem);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:600;
  margin-bottom:22px;
}
.nxg3-scrub-outro h2 .nxg3-em{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  background:linear-gradient(120deg,var(--nxg3-aurora-1),var(--nxg3-aurora-2),var(--nxg3-aurora-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.01em;
}
.nxg3-scrub-outro p{
  font-size:clamp(1rem,1.2vw,1.15rem);
  color:var(--nxg3-ink-dim);
  line-height:1.55;
  margin-bottom:32px;
  max-width:42ch;
}
.nxg3-scrub-outro-cta{
  display:flex;gap:12px;flex-wrap:wrap;
}
.nxg3-scrub-outro-cta .nxg3-btn{
  /* inherits global .btn */
  padding:12px 22px;font-size:.92rem;
}
.nxg3-scrub-outro-cta .nxg3-store{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;
  border-radius:999px;
  border:1px solid var(--nxg3-line-strong);
  color:var(--nxg3-ink);
  background:rgba(255,255,255,.03);
  font:500 .88rem/1 "Geist",sans-serif;
  transition:background .25s var(--nxg3-ease-soft),border-color .25s var(--nxg3-ease-soft),transform .25s var(--nxg3-ease-soft);
}
.nxg3-scrub-outro-cta .nxg3-store:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);
  transform:translateY(-2px);
}
.nxg3-scrub-outro-cta .nxg3-store svg{width:18px;height:18px}

/* Progress bar (tiny, bottom) */
.nxg3-scrub-progress{
  position:absolute;
  left:50%;bottom:6vh;
  transform:translateX(-50%);
  width:min(220px,36vw);
  height:2px;
  background:rgba(255,255,255,.08);
  border-radius:2px;
  overflow:hidden;
  z-index:6;
  opacity:.85;
}
.nxg3-scrub-progress span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--nxg3-aurora-1),var(--nxg3-aurora-2),var(--nxg3-aurora-3));
  transition:width .08s linear;
}
.nxg3-scrub-hint{
  position:absolute;
  left:50%;bottom:calc(6vh + 18px);
  transform:translateX(-50%);
  z-index:6;
  font:500 .62rem/1 "Geist Mono",monospace;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--nxg3-ink-faint);
  opacity:.9;
  transition:opacity .4s var(--nxg3-ease-soft);
}
.nxg3-scrub-hint.nxg3-hide{opacity:0}

@keyframes pulseDot{
  0%,100%{transform:scale(1);box-shadow:0 0 10px var(--nxg3-aurora-1)}
  50%{transform:scale(1.25);box-shadow:0 0 18px var(--nxg3-aurora-1)}
}

/* ============ Handy: Handy oben, Schlusssatz unten ============
   Auf dem Desktop stehen Video und Text NEBENeinander — da traegt der
   dunkle Buehnenhintergrund den Text. Auf dem Handy lagen beide
   uebereinander: heller Videoinhalt direkt unter weisser Schrift.
   Loesung in drei Schritten:
   (1) das Videofenster wird kleiner und rutscht hoch (siehe phoneTarget im JS),
   (2) es dimmt sich weg, sobald der Schlusssatz einsetzt,
   (3) der Text bekommt eine eigene, weich auslaufende Flaeche.
   Alles greift ausschliesslich unter 768px. */
@media (max-width:768px){
  .nxg3-scrub-story{height:300vh}

  /* (2) Video, Rahmen und Deko treten zurueck — gesteuert vom Scroll-Wert,
     den das Script als --nxg3-scrub-tc auf die Buehne schreibt. */
  .nxg3-scrub-canvas-wrap,
  .nxg3-scrub-phone,
  .nxg3-scrub-phone-deco{
    filter:
      brightness(calc(1 - var(--nxg3-scrub-tc, 0) * .58))
      saturate(calc(1 - var(--nxg3-scrub-tc, 0) * .4));
  }

  .nxg3-scrub-outro{
    right:auto;left:50%;
    top:auto;bottom:7vh;
    transform:translateX(-50%);
    width:min(90vw,420px);
    text-align:center;
  }
  /* (3) Weiche Flaeche hinter dem Text. Laeuft nach oben aus, damit keine
     sichtbare Kante entsteht — der Text wirkt wie auf einer Milchglas-Bahn,
     nicht wie in einem Kasten. */
  .nxg3-scrub-outro::before{
    content:"";
    position:absolute;
    inset:-56px -6vw -14vh;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(180deg,
      rgba(6,6,10,0) 0%,
      rgba(6,6,10,.55) 18%,
      rgba(6,6,10,.86) 42%,
      rgba(6,6,10,.94) 100%);
    -webkit-backdrop-filter:blur(10px) saturate(1.1);
    backdrop-filter:blur(10px) saturate(1.1);
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);
    mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);
  }

  /* Kompaktere Typografie: der Block muss unter das Videofenster passen,
     ohne dass der Text winzig wird. */
  .nxg3-scrub-outro .nxg3-eyebrow{margin-bottom:14px;padding:7px 12px;font-size:.62rem}
  .nxg3-scrub-outro h2{font-size:1.72rem;line-height:1.08;margin-bottom:14px}
  .nxg3-scrub-outro p{
    font-size:.92rem;line-height:1.5;margin:0 auto 18px;
    color:var(--nxg3-ink-dim);max-width:34ch;
  }
  /* Drei Store-Knoepfe in EINER Reihe statt umbrechend in zwei. */
  .nxg3-scrub-outro-cta{justify-content:center;gap:8px;flex-wrap:nowrap}
  .nxg3-scrub-outro-cta .nxg3-store{
    padding:10px 13px;font-size:.78rem;gap:7px;white-space:nowrap;
    background:rgba(255,255,255,.06);
  }
  .nxg3-scrub-outro-cta .nxg3-store svg{width:15px;height:15px}

  .nxg3-scrub-progress{bottom:2.5vh}
  .nxg3-scrub-hint{bottom:calc(2.5vh + 14px)}
}
@media (max-width:768px) and (prefers-reduced-motion:reduce){
  /* Ohne Bewegung bleibt das Video hell — dann traegt allein die Flaeche. */
  .nxg3-scrub-canvas-wrap,.nxg3-scrub-phone,.nxg3-scrub-phone-deco{filter:none}
}

/* Respect reduced motion: snap to final frame, skip animation */
@media (prefers-reduced-motion:reduce){
  .nxg3-scrub-story{height:auto;min-height:100vh}
  .nxg3-scrub-stage{position:relative;height:auto;min-height:100vh;padding:60px 0}
}


/* ============================================================
   BIO-ID  —  warm halftone-dot calibration scene (Gen3 · Akt 03)
   ============================================================ */
.nxg3-bioid{
  position:relative;
  /* 560vh → 330vh (Juli 2026, Kollegen-Feedback „zu viel scrollen"):
     ein leichter Scroll = ein Fakt. Choreografie ist p-relativ. */
  height:330vh;
  background:
    radial-gradient(80rem 40rem at 20% 30%, rgba(255,140,60,.06), transparent 60%),
    radial-gradient(70rem 40rem at 80% 70%, rgba(166,0,255,.05), transparent 60%),
    #050304;
  z-index:2;
  isolation:isolate;
}
.nxg3-bioid::before{
  content:"";position:absolute;left:0;right:0;top:0;height:22vh;
  background:linear-gradient(to bottom,#000 0%,transparent 100%);
  z-index:4;pointer-events:none;
}
.nxg3-bioid::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:18vh;
  background:linear-gradient(to top,#000 0%,transparent 100%);
  z-index:4;pointer-events:none;
}
.nxg3-bioid-stage{
  position:sticky;top:0;
  width:100%;height:100vh;
  overflow:hidden;
  display:block;
}
/* Animatable progress for the cinematic approach (0 = section gerade ins Bild
   reingekommen, 1 = sticky-Andocken). JS schreibt den Wert pro Scroll-Frame. */
@property --bioid-approach {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
/* Wrapper trägt die Approach-Effekte (opacity/transform/filter:blur). Dadurch
   liegt der Filter auf einem ANDEREN Element als das mix-blend-mode-Canvas
   darin — der Browser kann beides clean GPU-beschleunigen.
   .is-approaching togglt JS während approachP < 1 → will-change nur dann aktiv,
   spart VRAM nach Abschluss der Approach-Phase. */
.nxg3-bioid-canvas-wrap{
  position:absolute;inset:0;
  z-index:1;
  --bioid-approach: 0;
  opacity: var(--bioid-approach);
  transform: scale(calc(1 + (1 - var(--bioid-approach)) * 0.04)) translateZ(0);
  transform-origin: center center;
  filter: blur(calc((1 - var(--bioid-approach)) * 14px));
  backface-visibility: hidden;
}
.nxg3-bioid-canvas-wrap.nxg3-is-approaching{
  will-change: transform, filter, opacity;
}
.nxg3-bioid-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  mix-blend-mode:screen;   /* halftone glow compositing */
}
/* soft warm vignette on top to keep text legible */
.nxg3-bioid-veil{
  position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(50rem 45rem at 30% 50%, rgba(0,0,0,.55), transparent 65%),
    radial-gradient(60rem 40rem at 100% 50%, rgba(0,0,0,.72), transparent 70%);
  pointer-events:none;
}
/* Closing-Zustand: Hintergrund deutlich abdunkeln, damit „Das ist kein
   Profil. / Das bist Du." klar lesbar ist — Körpergrafik bleibt erahnbar */
.nxg3-bioid-veil::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70rem 50rem at 50% 55%, rgba(0,0,0,.8), rgba(0,0,0,.55) 75%);
  opacity:0;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1);
}
.nxg3-bioid-canvas-wrap.nxg3-dimmed .nxg3-bioid-veil::after{opacity:1}
/* chapter index — top left */
.nxg3-bioid-chapter{
  position:absolute;
  top:clamp(90px,14vh,140px);
  left:clamp(24px,6vw,64px);
  z-index:5;
  display:flex;align-items:center;gap:14px;
  font:500 .68rem/1 "Geist Mono",monospace;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--nxg3-ink-dim);
}
.nxg3-bioid-chapter .nxg3-idx{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--nxg3-line-strong);
  color:var(--nxg3-ink);
  font-size:.7rem;
  backdrop-filter:blur(10px);
}
.nxg3-bioid-chapter .nxg3-dot{
  width:6px;height:6px;border-radius:50%;
  background:#ff9158;
  box-shadow:0 0 10px #ff9158;
  animation:pulseDotWarm 2.1s ease-in-out infinite;
}
@keyframes pulseDotWarm{
  0%,100%{transform:scale(1);box-shadow:0 0 10px #ff9158}
  50%{transform:scale(1.3);box-shadow:0 0 18px #ffb980}
}

/* Headline block — lower-left */
.nxg3-bioid-copy{
  position:absolute;
  left:clamp(24px,6vw,72px);
  bottom:clamp(80px,14vh,140px);
  max-width:min(560px,46vw);
  z-index:5;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .8s var(--nxg3-ease-soft), transform .8s var(--nxg3-ease-soft);
}
.nxg3-bioid-copy.nxg3-in{opacity:1;transform:translateY(0)}
.nxg3-bioid-copy h2{
  font-size:clamp(2.4rem,4.6vw,4.2rem);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:600;
  color:#f5ece2;
  margin-bottom:18px;
}
.nxg3-bioid-copy h2 .nxg3-em{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;font-weight:400;
  background:linear-gradient(115deg,#ffa86a 0%,#ff5fae 50%,#a66cff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.01em;
}
.nxg3-bioid-copy p{
  font-size:clamp(.98rem,1.1vw,1.12rem);
  line-height:1.55;
  color:var(--nxg3-ink-dim);
  max-width:48ch;
}

/* Bio-fact card — right */
.nxg3-bioid-card{
  position:absolute;
  right:clamp(24px,5vw,72px);
  top:50%;
  transform:translateY(-50%);
  width:min(360px,32vw);
  z-index:5;
  padding:28px 24px 24px;
  border-radius:20px;
  border:1px solid var(--nxg3-line-strong);
  background:
    linear-gradient(180deg, rgba(20,12,10,.62) 0%, rgba(10,6,6,.42) 100%);
  backdrop-filter:blur(22px) saturate(1.1);
  -webkit-backdrop-filter:blur(22px) saturate(1.1);
  opacity:0;
  transition:opacity .6s var(--nxg3-ease-soft);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 20px 60px rgba(0,0,0,.5);
}
.nxg3-bioid-card.nxg3-in{opacity:1}
.nxg3-bioid-card-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:22px;
  padding-bottom:14px;
  border-bottom:1px solid var(--nxg3-line);
}
.nxg3-bioid-card-head .nxg3-avatar{
  width:28px;height:28px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, #ff9158, #a66cff 70%, transparent 72%);
  box-shadow:0 0 18px rgba(255,145,88,.5);
}
.nxg3-bioid-card-head .nxg3-meta{
  display:flex;flex-direction:column;gap:2px;
}
.nxg3-bioid-card-head .nxg3-meta .nxg3-label{
  font:500 .6rem/1 "Geist Mono",monospace;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--nxg3-ink-faint);
}
.nxg3-bioid-card-head .nxg3-meta .nxg3-name{
  font:500 .92rem/1 "Geist",sans-serif;
  color:#f5ece2;
}
.nxg3-bioid-card-head .nxg3-status{
  margin-left:auto;
  font:500 .56rem/1 "Geist Mono",monospace;
  letter-spacing:.18em;text-transform:uppercase;
  color:#ff9158;
  display:inline-flex;align-items:center;gap:6px;
}
.nxg3-bioid-card-head .nxg3-status::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:#ff9158;box-shadow:0 0 8px #ff9158;
  animation:pulseDotWarm 1.8s ease-in-out infinite;
}
.nxg3-bioid-facts{
  list-style:none;display:flex;flex-direction:column;gap:13px;
}
.nxg3-bioid-fact{
  display:flex;align-items:flex-start;gap:11px;
  font:500 .94rem/1.35 "Geist",sans-serif;
  color:var(--nxg3-ink-dim);
  opacity:0;
  transform:translateX(10px);
  transition:opacity .55s var(--nxg3-ease-soft), transform .55s var(--nxg3-ease-soft);
}
.nxg3-bioid-fact.nxg3-in{opacity:1;transform:translateX(0);color:#f5ece2}
.nxg3-bioid-fact .nxg3-check{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  margin-top:2px;
  background:transparent;
  border:1px solid rgba(255,255,255,.2);
  transition:background .45s var(--nxg3-ease-spring), border-color .45s var(--nxg3-ease-spring), box-shadow .45s var(--nxg3-ease-spring);
}
.nxg3-bioid-fact.nxg3-in .nxg3-check{
  background:linear-gradient(135deg,#ff9158,#ff5fae);
  border-color:transparent;
  box-shadow:0 0 12px rgba(255,95,174,.4);
}
.nxg3-bioid-fact .nxg3-check svg{
  width:10px;height:10px;stroke:#fff;stroke-width:3;fill:none;
  opacity:0;transform:scale(.5);
  transition:opacity .35s .15s var(--nxg3-ease-soft), transform .35s .15s var(--nxg3-ease-spring);
}
.nxg3-bioid-fact.nxg3-in .nxg3-check svg{opacity:1;transform:scale(1)}
.nxg3-bioid-fact .nxg3-label{
  flex:1;
}
.nxg3-bioid-fact .nxg3-region{
  display:block;
  font:500 .62rem/1 "Geist Mono",monospace;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--nxg3-ink-faint);
  margin-top:4px;
}

.nxg3-bioid-card-foot{
  margin-top:22px;padding-top:16px;
  border-top:1px solid var(--nxg3-line);
  display:flex;justify-content:space-between;align-items:center;
  font:500 .6rem/1 "Geist Mono",monospace;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--nxg3-ink-faint);
}
.nxg3-bioid-card-foot .nxg3-progress{
  flex:1;margin-left:16px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  position:relative;
}
.nxg3-bioid-card-foot .nxg3-progress span{
  position:absolute;left:0;top:0;bottom:0;width:0%;
  background:linear-gradient(90deg,#ffa86a,#ff5fae,#a66cff);
  transition:width .5s var(--nxg3-ease-soft);
}

/* Closing moment — appears over the particle field at the very end */
.nxg3-bioid-closing{
  position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:8px;
  opacity:0;
  pointer-events:none;
  transition:opacity .9s var(--nxg3-ease-soft);
  text-align:center;padding:0 24px;
}
.nxg3-bioid-closing.nxg3-in{opacity:1}
.nxg3-bioid-closing .nxg3-pre{
  font:500 .72rem/1 "Geist Mono",monospace;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--nxg3-ink-dim);
  margin-bottom:18px;
}
.nxg3-bioid-closing .nxg3-kicker{
  font-size:clamp(1.1rem,1.6vw,1.4rem);
  font-weight:500;
  color:var(--nxg3-ink-dim);
  letter-spacing:-.01em;
}
.nxg3-bioid-closing .nxg3-punch{
  font-size:clamp(3rem,7.5vw,7rem);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:.98;
  color:#f5ece2;
}
.nxg3-bioid-closing .nxg3-punch em{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;font-weight:400;
  background:linear-gradient(115deg,#ffa86a 0%,#ff5fae 55%,#a66cff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Mobile: stack, simpler */
@media (max-width:860px){
  .nxg3-bioid{height:290vh}
  /* Kapitelmarke ganz nach oben — sonst startet sie auf derselben Zeile
     wie die Ueberschrift und liegt darunter. */
  /* Kraeftiger als auf dem Desktop: auf dem kleinen Schirm steht die Marke
     allein ueber der Ueberschrift und darf die Sektion auch anfuehren. */
  .nxg3-bioid-chapter{
    top:3vh; left:50%; transform:translateX(-50%);
    color:#fff; font-weight:600; letter-spacing:.2em;
    /* Eigener Schein: die Marke steht auf dem hellen Halbton-Canvas und
       verschwimmt sonst darin. Warm getoent wie der Punkt daneben. */
    text-shadow:0 0 14px rgba(255,145,88,.55), 0 0 30px rgba(255,145,88,.28);
  }
  .nxg3-bioid-chapter .nxg3-idx{
    background:rgba(255,145,88,.16);
    border-color:rgba(255,145,88,.55);
    color:#fff; font-weight:600;
    box-shadow:0 0 16px rgba(255,145,88,.35);
    text-shadow:none;
  }
  .nxg3-bioid-chapter .nxg3-dot{ box-shadow:0 0 14px #ff9158, 0 0 26px rgba(255,145,88,.5) }
  .nxg3-bioid-copy{
    left:20px;right:20px;bottom:auto;top:8.5vh;max-width:none;text-align:center;
  }
  .nxg3-bioid-copy h2{font-size:clamp(1.85rem,7.4vw,2.8rem);line-height:1.06}
  .nxg3-bioid-copy p{font-size:.92rem;line-height:1.5;margin-top:12px}
  .nxg3-bioid-card{
    right:auto;left:50%;transform:translate(-50%, 0);
    top:auto;bottom:10vh;
    width:min(92vw,360px);
  }
  .nxg3-bioid-closing .nxg3-punch{font-size:clamp(2.4rem,10vw,4rem)}
}

@media (prefers-reduced-motion:reduce){
  .nxg3-bioid{height:auto;min-height:100vh}
  .nxg3-bioid-stage{position:relative;height:auto;min-height:100vh;padding:80px 0}
  .nxg3-bioid-copy,.nxg3-bioid-card{opacity:1;transform:none}
  .nxg3-bioid-fact{opacity:1;transform:none}
  .nxg3-bioid-closing{opacity:1;position:relative;padding:60px 0}
  /* Skip the cinematic approach — show the canvas in its final state */
  .nxg3-bioid-canvas-wrap{
    --bioid-approach:1;
    opacity:1;
    transform:none;
    filter:none;
  }
}


/* ============================================================
   RADAR  —  Smart Connect / Resonanz-Radar (Gen3 · Akt 04)
   ============================================================ */

/* Animatable custom properties — make intent transitions smooth */
@property --r-c1 {
  syntax: '<color>';
  inherits: true;
  initial-value: #ff9158;
}
@property --r-c2 {
  syntax: '<color>';
  inherits: true;
  initial-value: #ff5fae;
}
@property --r-c3 {
  syntax: '<color>';
  inherits: true;
  initial-value: #a66cff;
}
@property --r-glow {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(255,145,88,.35);
}
@property --r-text {
  /* Tinted body-text color — leans toward intent palette but stays readable */
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(255, 215, 185, .76);
}
@property --r-wash-a {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(255,140,60,.04);
}
@property --r-wash-b {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(80,200,255,.05);
}

.nxg3-radar{
  position:relative;
  /* 620vh → 380vh → 300vh (Juli 2026): weniger Scrollweg pro Phase,
     damit sich die Sektion nicht zäh anfühlt — Choreografie ist
     p-relativ und skaliert automatisch mit. */
  height:300vh;
  /* Default tribe palette — overridden by per-intent classes */
  --r-c1:#ff9158;
  --r-c2:#ffb380;
  --r-c3:#ff5fae;
  --r-glow:rgba(255,145,88,.40);
  --r-text:rgba(255, 215, 185, .76);
  --r-wash-a:rgba(255,140,60,.05);
  --r-wash-b:rgba(255,180,90,.04);
  --r-sweep-dur:13s;     /* tribe = relaxed */
  --r-pulse-dur:2.8s;    /* core ring breathe */
  background:
    radial-gradient(90rem 60rem at 80% 20%, var(--r-wash-a), transparent 60%),
    radial-gradient(70rem 50rem at 20% 80%, var(--r-wash-b), transparent 60%),
    #040408;
  z-index:2;
  isolation:isolate;
  transition:
    --r-c1 .9s var(--nxg3-ease-soft),
    --r-c2 .9s var(--nxg3-ease-soft),
    --r-c3 .9s var(--nxg3-ease-soft),
    --r-glow .9s var(--nxg3-ease-soft),
    --r-text .9s var(--nxg3-ease-soft),
    --r-wash-a 1.1s var(--nxg3-ease-soft),
    --r-wash-b 1.1s var(--nxg3-ease-soft);
}

/* ── Per-intent palettes (set on .radar by JS) ─────────────────── */
.nxg3-radar.nxg3-intent-tribe{
  --r-c1:#ff9158; --r-c2:#ffb380; --r-c3:#ff5fae;
  --r-glow:rgba(255,145,88,.40);
  --r-text:rgba(255, 215, 185, .80);   /* warm cream-orange — Tribe */
  --r-wash-a:rgba(255,140,60,.06);
  --r-wash-b:rgba(255,180,90,.04);
  --r-sweep-dur:13s;
  --r-pulse-dur:3.0s;
}
.nxg3-radar.nxg3-intent-soul{
  --r-c1:#ff5fae; --r-c2:#ff8fc5; --r-c3:#ffb3d9;
  --r-glow:rgba(255,95,174,.42);
  --r-text:rgba(255, 205, 225, .82);   /* soft rose — Soul */
  --r-wash-a:rgba(255,95,174,.07);
  --r-wash-b:rgba(255,160,200,.04);
  --r-sweep-dur:10s;
  --r-pulse-dur:2.4s;
}
.nxg3-radar.nxg3-intent-pro{
  --r-c1:#a66cff; --r-c2:#c498ff; --r-c3:#7c6ce0;
  --r-glow:rgba(166,108,255,.42);
  --r-text:rgba(220, 205, 255, .84);   /* gentle violet — Pro */
  --r-wash-a:rgba(140,100,240,.07);
  --r-wash-b:rgba(90,140,255,.05);
  --r-sweep-dur:7s;
  --r-pulse-dur:1.8s;
}
.nxg3-radar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:20vh;
  background:linear-gradient(to bottom,#000 0%,transparent 100%);
  z-index:4;pointer-events:none;
}
.nxg3-radar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:16vh;
  background:linear-gradient(to top,#000 0%,transparent 100%);
  z-index:4;pointer-events:none;
}
.nxg3-radar-stage{
  position:sticky;top:0;
  width:100%;height:100vh;
  overflow:hidden;
  display:block;
}
.nxg3-radar-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  z-index:1;
  cursor:crosshair;
}

/* concentric range rings (pure CSS) */
.nxg3-radar-rings{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:2;pointer-events:none;
  width:min(80vh, 80vw);
  aspect-ratio:1/1;
  opacity:0;
  transition:opacity 1s var(--nxg3-ease-soft);
}
.nxg3-radar-rings.nxg3-in{opacity:.65}
.nxg3-radar-rings::before,
.nxg3-radar-rings::after,
.nxg3-radar-rings .nxg3-ring-mid{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px dashed rgba(255,255,255,.08);
  pointer-events:none;
}
.nxg3-radar-rings::before{ width:100%; height:100%; border-style:solid; border-color:rgba(255,255,255,.05); }
.nxg3-radar-rings .nxg3-ring-mid{ width:66%; height:66%; }
.nxg3-radar-rings::after{ width:33%; height:33%; }

/* rotating sonar sweep line */
.nxg3-radar-sweep{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(80vh, 80vw);
  aspect-ratio:1/1;
  z-index:2;pointer-events:none;
  opacity:0;
  transition:opacity 1s var(--nxg3-ease-soft);
}
.nxg3-radar-sweep.nxg3-in{opacity:1}
.nxg3-radar-sweep svg{
  width:100%; height:100%; display:block; overflow:visible;
  /* drives the radialGradient stops & rescan stroke via currentColor */
  color:var(--r-c1);
  transition:color .9s var(--nxg3-ease-soft);
}
.nxg3-radar-sweep .nxg3-pulse-ring{
  animation:pulseRingExpand var(--r-sweep-dur) cubic-bezier(.22,.61,.36,1) infinite;
  transform-origin:50% 50%;
}
.nxg3-radar-sweep .nxg3-pr1{ stroke:var(--r-c1); animation-delay: 0s; }
.nxg3-radar-sweep .nxg3-pr2{ stroke:var(--r-c2); animation-delay: calc(var(--r-sweep-dur) * 0.5); }
.nxg3-radar-sweep .nxg3-pr3{ stroke:var(--r-c3); animation-delay: 999s; }  /* effectively off — two rings feel calmer */
.nxg3-radar-sweep .nxg3-rescan-ring{
  stroke:var(--r-c2);
  transform-origin:50% 50%;
  pointer-events:none;
}
.nxg3-radar-sweep .nxg3-rescan-ring.nxg3-fire{
  animation:rescanSweep 1.4s cubic-bezier(.22,.61,.36,1) 1;
}
.nxg3-radar-sweep .nxg3-ambient-glow{
  transform-origin:50% 50%;
  animation:ambientBreathe 16s ease-in-out infinite;
}
@keyframes pulseRingExpand{
  0%{   r:2;  stroke-opacity:0;     stroke-width:0.35; }
  14%{         stroke-opacity:.22;  }
  70%{                               stroke-width:0.10; }
  100%{ r:50; stroke-opacity:0;     stroke-width:0.06; }
}
@keyframes rescanSweep{
  0%{   r:2;  stroke-opacity:.85; stroke-width:0.9; }
  60%{                            stroke-width:0.35; }
  100%{ r:55; stroke-opacity:0;   stroke-width:0.15; }
}
@keyframes ambientBreathe{
  0%,100%{ transform:scale(.97); opacity:.18; }
  50%{     transform:scale(1.03); opacity:.30; }
}

/* chapter index */
.nxg3-radar-chapter{
  position:absolute;
  top:clamp(90px,14vh,140px);
  left:clamp(24px,6vw,64px);
  z-index:5;
  display:flex;align-items:center;gap:14px;
  font:500 .68rem/1 "Geist Mono",monospace;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--nxg3-ink-dim);
}
.nxg3-radar-chapter .nxg3-idx{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--nxg3-line-strong);
  color:var(--nxg3-ink);
  font-size:.7rem;
  backdrop-filter:blur(10px);
}
.nxg3-radar-chapter .nxg3-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--r-c2);
  box-shadow:0 0 10px var(--r-c2);
  animation:pulseDotRose 2s ease-in-out infinite;
  transition:background .9s var(--nxg3-ease-soft), box-shadow .9s var(--nxg3-ease-soft);
}
@keyframes pulseDotRose{
  0%,100%{transform:scale(1);   box-shadow:0 0 10px var(--r-c2)}
  50%   {transform:scale(1.3);  box-shadow:0 0 18px var(--r-c1)}
}

/* Headline — bottom-left */
.nxg3-radar-copy{
  position:absolute;
  left:clamp(24px,6vw,72px);
  bottom:clamp(80px,14vh,140px);
  max-width:min(520px,42vw);
  z-index:5;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s var(--nxg3-ease-soft), transform .8s var(--nxg3-ease-soft);
}
.nxg3-radar-copy.nxg3-in{opacity:1;transform:translateY(0)}
.nxg3-radar-copy h2{
  font-size:clamp(2.2rem,4.4vw,4rem);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:600;
  color:#f5ece2;
  margin-bottom:16px;
}
.nxg3-radar-copy h2 .nxg3-em{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;font-weight:400;
  background:linear-gradient(115deg,#ff9158 0%,#ff5fae 45%,#a66cff 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.01em;
}
.nxg3-radar-copy p{
  font-size:clamp(.98rem,1.1vw,1.1rem);
  line-height:1.55;
  color:var(--r-text);
  max-width:46ch;
  transition:
    color .9s var(--nxg3-ease-soft),
    opacity .35s var(--nxg3-ease-soft),
    filter .45s var(--nxg3-ease-soft),
    transform .55s var(--nxg3-ease-soft);
}
.nxg3-radar-copy p.nxg3-swap-out{
  opacity:0;
  filter:blur(6px);
  transform:translateY(6px);
}

/* ── Live Info Card — sits below the Intent-Switch on the right ────── */
.nxg3-radar-info{
  position:absolute;
  top:calc(clamp(90px,14vh,140px) + 70px);  /* under the switch */
  right:clamp(24px,5vw,72px);
  z-index:5;
  width:min(280px, 32vw);
  padding:18px 20px 16px;
  border-radius:16px;
  border:1px solid var(--nxg3-line-strong);
  background:
    linear-gradient(180deg, rgba(20,14,22,.62) 0%, rgba(10,8,14,.42) 100%);
  backdrop-filter:blur(20px) saturate(1.15);
  -webkit-backdrop-filter:blur(20px) saturate(1.15);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 18px 40px rgba(0,0,0,.40),
    0 0 28px -6px var(--r-glow);
  opacity:0;
  transform:translateY(-6px);
  transition:
    opacity .6s var(--nxg3-ease-soft),
    transform .8s var(--nxg3-ease-soft),
    box-shadow .9s var(--nxg3-ease-soft);
}
.nxg3-radar-info.nxg3-in{ opacity:1; transform:translateY(0); }
.nxg3-radar-info::before{
  /* thin colored top edge — the "intent signature" */
  content:"";
  position:absolute;
  left:14px;right:14px;top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--r-c1), var(--r-c2), transparent);
  opacity:.6;
  transition:background .9s var(--nxg3-ease-soft);
}
.nxg3-radar-info-eyebrow{
  font:500 .62rem/1 "Geist Mono",monospace;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--r-c2);
  margin-bottom:14px;
  transition:color .9s var(--nxg3-ease-soft), opacity .25s var(--nxg3-ease-soft), filter .35s var(--nxg3-ease-soft);
}
.nxg3-radar-info-eyebrow.nxg3-swap-out{ opacity:0; filter:blur(4px); }
.nxg3-radar-info-stat{
  display:flex;flex-direction:column;gap:4px;
  margin-bottom:12px;
}
.nxg3-radar-info-num{
  font-size:clamp(2rem, 2.6vw, 2.6rem);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1;
  background:linear-gradient(115deg, var(--r-c1), var(--r-c2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
  transition:filter .35s var(--nxg3-ease-soft);
}
.nxg3-radar-info-num.nxg3-counting{ filter:blur(.6px); }
.nxg3-radar-info-label{
  font:500 .68rem/1.3 "Geist Mono",monospace;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--nxg3-ink-faint);
  transition:opacity .25s var(--nxg3-ease-soft), filter .35s var(--nxg3-ease-soft);
}
.nxg3-radar-info-label.nxg3-swap-out{ opacity:0; filter:blur(4px); }
.nxg3-radar-info-tagline{
  font-size:.86rem;
  line-height:1.5;
  color:var(--r-text);
  letter-spacing:-.005em;
  transition:
    color .9s var(--nxg3-ease-soft),
    opacity .35s var(--nxg3-ease-soft),
    filter .45s var(--nxg3-ease-soft),
    transform .55s var(--nxg3-ease-soft);
}
.nxg3-radar-info-tagline.nxg3-swap-out{
  opacity:0;
  filter:blur(5px);
  transform:translateY(4px);
}

/* Intention Switch — top-right */
.nxg3-radar-switch{
  position:absolute;
  top:clamp(90px,14vh,140px);
  right:clamp(24px,5vw,72px);
  z-index:6;
  display:flex;gap:6px;
  padding:6px;
  border-radius:999px;
  background:rgba(15,10,16,.55);
  border:1px solid var(--nxg3-line-strong);
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .5s var(--nxg3-ease-soft), transform .7s var(--nxg3-ease-soft);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.nxg3-radar-switch.nxg3-in{opacity:1;transform:translateY(0)}
.nxg3-radar-switch-btn{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;
  border-radius:999px;
  font:500 .82rem/1 "Geist",sans-serif;
  letter-spacing:-.005em;
  color:var(--nxg3-ink-dim);
  cursor:pointer;
  transition:color .35s var(--nxg3-ease-soft), background .35s var(--nxg3-ease-soft);
  white-space:nowrap;
  user-select:none;
}
.nxg3-radar-switch-btn .nxg3-ico{
  width:14px;height:14px;opacity:.7;
  transition:opacity .35s var(--nxg3-ease-soft);
}
.nxg3-radar-switch-btn.nxg3-active{
  color:#fff;
  background:linear-gradient(120deg, var(--c1, #ff9158), var(--c2, #ff5fae));
  box-shadow:
    0 6px 18px var(--glow, rgba(255,95,174,.35)),
    inset 0 0 0 1px rgba(255,255,255,.12);
}
.nxg3-radar-switch-btn.nxg3-active .nxg3-ico{opacity:1}
.nxg3-radar-switch-btn:hover:not(.nxg3-active){
  color:#f5ece2;
  background:rgba(255,255,255,.04);
}
/* per-intention colors */
.nxg3-radar-switch-btn[data-intent="tribe"]{ --c1:#ff9158; --c2:#ffb380; --glow:rgba(255,145,88,.35); }
.nxg3-radar-switch-btn[data-intent="soul"]{  --c1:#ff5fae; --c2:#ff8fc5; --glow:rgba(255,95,174,.40); }
.nxg3-radar-switch-btn[data-intent="pro"]{   --c1:#a66cff; --c2:#c498ff; --glow:rgba(166,108,255,.38); }

/* Center avatar pulse */
.nxg3-radar-core{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:2;pointer-events:none;
  width:46px;height:46px;
  opacity:0;
  transition:opacity 1s var(--nxg3-ease-soft);
}
.nxg3-radar-core.nxg3-in{opacity:1}
.nxg3-radar-core .nxg3-core-dot{
  position:absolute;inset:0;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--r-c1) 45%, var(--r-c2) 72%, transparent 80%);
  box-shadow:0 0 30px var(--r-glow), 0 0 60px var(--r-glow);
  transition:background .9s var(--nxg3-ease-soft), box-shadow .9s var(--nxg3-ease-soft);
}
.nxg3-radar-core .nxg3-core-ring{
  position:absolute;inset:-12px;
  border-radius:50%;
  border:1px solid var(--r-c1);
  opacity:.55;
  animation:corePulse var(--r-pulse-dur) ease-in-out infinite;
  transition:border-color .9s var(--nxg3-ease-soft);
}
.nxg3-radar-core .nxg3-core-ring.nxg3-r2{ inset:-28px; animation-delay:.6s; border-color:var(--r-c2); opacity:.35; }
.nxg3-radar-core .nxg3-core-ring.nxg3-r3{ inset:-48px; animation-delay:1.2s; border-color:var(--r-c3); opacity:.22; }
@keyframes corePulse{
  0%,100%{ transform:scale(1);    opacity:.9; }
  50%{    transform:scale(1.06);  opacity:.35; }
}
.nxg3-radar-core-label{
  position:absolute;
  left:50%;top:100%;
  transform:translate(-50%, 28px);
  font:500 .58rem/1 "Geist Mono",monospace;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--nxg3-ink-faint);
  white-space:nowrap;
}

/* Match Card (spawned by JS on orb click/auto-demo) */
/* Profil-Popup im Stil der echten Gen3-App: helle Karte, zentrierter
   Aufbau (Avatar, Name, Handle, Tags, Meta-Chips, CTA, Melden-Link).
   Positionierung/Einblendung unverändert (am Orb verankert). */
.nxg3-radar-match{
  position:absolute;
  z-index:8;
  padding:26px 20px 14px;
  border-radius:22px;
  width:min(320px, 86vw);
  background:#fff;
  color:#101826;
  text-align:center;
  /* Feiner Farbring passend zur Partikelfarbe der aktiven Intention
     (data-intent setzt --rm-ring/--rm-glow) + dunkler Boden-Schatten */
  box-shadow:
    0 0 0 1.5px var(--rm-ring, rgba(255,255,255,.18)),
    0 24px 70px rgba(0,0,0,.55), 0 4px 18px rgba(0,0,0,.35);
  transform-origin:center bottom;
  opacity:0;
  transform:translate(-50%, -100%) translateY(8px) scale(.96);
  transition:opacity .35s var(--nxg3-ease-soft), transform .4s var(--nxg3-ease-spring);
  pointer-events:none;
}
/* Intentions-Farben = Radar-Partikelfarben (Chat warm-orange,
   Flirt rosa, Coach violett) — harmoniert mit dem Orb-Feld dahinter */
.nxg3-radar-match[data-intent="tribe"]{ --rm-ring:rgba(255,145,88,.6);  --rm-glow:rgba(255,145,88,.4); }
.nxg3-radar-match[data-intent="soul"]{  --rm-ring:rgba(255,95,174,.6);  --rm-glow:rgba(255,95,174,.4); }
.nxg3-radar-match[data-intent="pro"]{   --rm-ring:rgba(166,108,255,.6); --rm-glow:rgba(166,108,255,.4); }
/* Sanft atmender Außen-Glow (nur außerhalb der Karte sichtbar) */
.nxg3-radar-match::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:inherit;
  box-shadow:0 0 44px 6px var(--rm-glow, transparent);
  pointer-events:none;
  animation:nxg3RmGlow 3.4s ease-in-out infinite;
}
@keyframes nxg3RmGlow{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .nxg3-radar-match::after{ animation:none; opacity:.75; }
}
.nxg3-radar-match.nxg3-in{
  opacity:1;
  transform:translate(-50%, -100%) translateY(0) scale(1);
  pointer-events:auto;
}
/* Smart-Placement: liegt der Punkt zu weit oben im Viewport,
   klappt die Karte unter den Punkt statt darüber (JS setzt die Klasse) */
.nxg3-radar-match.nxg3-rm-below{
  transform-origin:center top;
  transform:translate(-50%, 0) translateY(-8px) scale(.96);
}
.nxg3-radar-match.nxg3-rm-below.nxg3-in{
  transform:translate(-50%, 0) translateY(0) scale(1);
}
.nxg3-rp-close{
  position:absolute;top:12px;right:12px;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#f1f3f6;border:0;cursor:pointer;color:#3a4452;
  transition:background .2s ease;
}
.nxg3-rp-close:hover{ background:#e5e9ee; }
.nxg3-rp-close svg{ width:15px;height:15px; }
/* Varianten: JS blendet die zur Intention passende ein */
.nxg3-radar-profile{ display:none; }
.nxg3-radar-profile.nxg3-on{ display:block; }
.nxg3-rp-ava{
  position:relative;
  width:64px;height:64px;border-radius:50%;
  margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--rp-g1,#6aa8ff), var(--rp-g2,#a66cff));
  color:#fff;font:600 1.5rem/1 "Geist",sans-serif;
}
.nxg3-rp-online{
  position:absolute;right:1px;bottom:1px;
  width:13px;height:13px;border-radius:50%;
  background:#31c463;border:2.5px solid #fff;
}
.nxg3-rp-name{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font:700 1.2rem/1.2 "Geist",sans-serif;color:#101826;letter-spacing:-.01em;
}
.nxg3-rp-verified{ width:17px;height:17px;flex-shrink:0; }
.nxg3-rp-handle{
  margin-top:3px;
  font:500 .85rem/1.3 "Geist",sans-serif;color:#7a8494;
}
.nxg3-rp-loc{
  margin-top:8px;
  font:500 .8rem/1.3 "Geist",sans-serif;color:#98a1ae;
}
.nxg3-rp-flirtlabel{
  margin-top:8px;
  font:600 .64rem/1 "Geist Mono",ui-monospace,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:#5b6675;
}
.nxg3-rp-chips, .nxg3-rp-tags{
  display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
  margin-top:12px;
}
.nxg3-rp-chips span, .nxg3-rp-tags span{
  display:inline-flex;align-items:center;
  padding:6px 11px;border-radius:999px;
  background:#f1f3f6;
  font:500 .74rem/1 "Geist",sans-serif;color:#3f4a58;letter-spacing:-.005em;
}
.nxg3-rp-badge{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;padding:7px 12px;border-radius:999px;
  background:#e9f1fb;
  font:600 .76rem/1.2 "Geist",sans-serif;color:#1c4d8f;
}
.nxg3-rp-details{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:8px;padding:7px 12px;border-radius:999px;
  background:#fff;border:1px solid #d8dde4;cursor:pointer;
  font:500 .74rem/1.2 "Geist",sans-serif;color:#3f4a58;
  transition:background .2s ease;
}
.nxg3-rp-details:hover{ background:#f5f7f9; }
.nxg3-rp-details svg{ width:13px;height:13px;color:#5b6675; }
.nxg3-rp-meta{
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px;
  margin-top:12px;
}
.nxg3-rp-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 12px;border-radius:12px;
  background:#f1f3f6;
  font:500 .72rem/1 "Geist",sans-serif;color:#8a93a3;
}
.nxg3-rp-chip svg{ width:13px;height:13px;color:#8a93a3; }
.nxg3-rp-chip b{ font-weight:700;color:#101826; }
.nxg3-rp-since{
  margin-top:12px;
  font:500 .76rem/1.3 "Geist",sans-serif;color:#98a1ae;
}
.nxg3-rp-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:14px;padding:13px 16px;
  border-radius:999px;border:0;cursor:pointer;
  background:#16283a;color:#fff;
  font:600 .86rem/1 "Geist",sans-serif;letter-spacing:.01em;
  transition:transform .25s var(--nxg3-ease-spring), filter .25s var(--nxg3-ease-soft);
}
.nxg3-rp-cta:hover{ transform:translateY(-1px); filter:brightness(1.12); }
.nxg3-rp-cta svg{ width:16px;height:16px; }
.nxg3-rp-report{
  display:block;width:100%;margin-top:4px;padding:9px 0;
  background:transparent;border:0;cursor:pointer;
  font:500 .8rem/1 "Geist",sans-serif;color:#e2574c;
}
.nxg3-rp-report:hover{ text-decoration:underline; }

/* Closing reveal */
.nxg3-radar-closing{
  position:absolute;inset:0;z-index:7;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:10px;
  opacity:0;
  pointer-events:none;
  transition:opacity .9s var(--nxg3-ease-soft);
  text-align:center;padding:0 24px;
  background:radial-gradient(60rem 50rem at 50% 50%, rgba(0,0,0,.4), transparent 70%);
}
.nxg3-radar-closing.nxg3-in{opacity:1}
.nxg3-radar-closing .nxg3-pre{
  font:500 .72rem/1 "Geist Mono",monospace;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--nxg3-ink-dim);
  margin-bottom:18px;
}
.nxg3-radar-closing .nxg3-punch{
  font-size:clamp(3rem,7.5vw,7rem);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:.98;
  color:#f5ece2;
  max-width:16ch;
}
.nxg3-radar-closing .nxg3-punch em{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;font-weight:400;
  background:linear-gradient(115deg,#ff9158 0%,#ff5fae 55%,#a66cff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nxg3-radar-closing .nxg3-sub{
  margin-top:18px;
  font-size:clamp(1rem,1.2vw,1.15rem);
  color:var(--nxg3-ink-dim);
  max-width:48ch;
}

/* Mobile */
/* ============ Handy: drei klar getrennte Zonen ============
   Der Radar-Kreis hat den Radius min(Breite,Hoehe)*0.40 — auf 375x812 also
   150px um die Bildmitte, er belegt damit 256..556. Vorher lag die Kopfzeile
   auf der Ueberschrift und die Ueberschrift ragte 52px in den Kreis; der
   Intentions-Schalter brach in zwei Reihen um, und die Live-Zahl — die
   eigentliche Aussage der Sektion — war ganz ausgeblendet.
   Neu: Kopf oben, Radar in der Mitte, Bedienung unten. Jede Zone hat ihren
   eigenen Streifen, nichts ueberlagert sich mehr. */
@media (max-width:860px){
  .nxg3-radar{height:260vh}

  /* Zone 1 — Kopf: Kapitelmarke ganz nach oben, damit sie die Headline freigibt */
  .nxg3-radar-chapter{ top:3vh; left:50%; transform:translateX(-50%); }
  .nxg3-radar-copy{
    left:20px;right:20px;bottom:auto;top:8.5vh;max-width:none;text-align:center;
  }
  .nxg3-radar-copy h2{ font-size:clamp(1.85rem,7.4vw,2.6rem); line-height:1.06 }
  .nxg3-radar-copy p{ font-size:.92rem; line-height:1.5; margin-top:12px }

  /* Zone 3 — Bedienung: EINE Reihe, direkt unter dem Kreis verankert.
     calc(50% + 170px) haengt am Kreisrand (Mitte + Radius 150 + 20 Luft),
     nicht am unteren Bildschirmrand — so sitzt der Schalter auf jedem
     Geraet gleich weit unter dem Radar. */
  .nxg3-radar-switch{
    top:calc(50% + 170px); bottom:auto;
    right:50%; transform:translate(50%, 0);
    flex-wrap:nowrap; justify-content:center; gap:6px;
  }
  .nxg3-radar-switch.nxg3-in{ transform:translate(50%, 0); }
  .nxg3-radar-switch-btn{ padding:7px 11px; font-size:.72rem; gap:6px; white-space:nowrap }
  .nxg3-radar-switch-btn .nxg3-ico{ width:13px; height:13px }

  /* Die Live-Zahl kommt zurueck — sie ist der Beleg der Sektion. Nicht als
     Karte wie auf dem Desktop, sondern als ruhige Zeile unter dem Schalter. */
  .nxg3-radar-info{
    display:block;
    top:calc(50% + 226px); bottom:auto;
    right:50%; transform:translateX(50%);
    width:min(92vw, 340px); max-width:none;
    padding:0; border:0; background:none; backdrop-filter:none;
    text-align:center;
  }
  .nxg3-radar-info.nxg3-in{ transform:translateX(50%); }
  .nxg3-radar-info-eyebrow{ display:none }   /* Modus steht schon im Schalter */
  /* Zahl und Beschriftung untereinander statt nebeneinander: in einer Reihe
     brach "aktive Gruppen · 50 km" auf zwei Zeilen um und lief dabei bis an
     den linken Rand. Gestapelt und zentriert steht beides ruhig. */
  .nxg3-radar-info-stat{ display:flex; flex-direction:column; align-items:center; gap:3px }
  .nxg3-radar-info-num{ font-size:1.7rem; line-height:1 }
  .nxg3-radar-info-label{ font-size:.8rem; text-align:center; line-height:1.35 }
  .nxg3-radar-info-tagline{ font-size:.76rem; margin-top:6px; max-width:30ch; margin-inline:auto }

  /* Profilkarte: gedeckelt auf die Bildhoehe, Inhalt kompakter.
     overscroll-behavior haelt den Seiten-Scroll an, wenn man in der Karte
     ans Ende wischt — sonst springt die ganze Sektion weiter. */
  .nxg3-radar-match{
    width:min(92vw, 340px);
    max-height:min(72vh, 560px);
    overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:20px 16px 12px;
  }
  .nxg3-radar-match .nxg3-rp-ava{ width:52px; height:52px }
  .nxg3-radar-match .nxg3-rp-name{ font-size:1rem }
  .nxg3-radar-match .nxg3-rp-tags{ gap:5px }
  .nxg3-radar-match .nxg3-rp-tags span{ padding:4px 8px; font-size:.66rem }
  .nxg3-radar-match .nxg3-rp-meta{ gap:8px; font-size:.7rem }

  /* Auf dem Handy liegt der Schlusssatz direkt auf Ringen und Orbs. Der
     Desktop-Schleier (40 % Schwarz) reicht dort nicht — hier deckt eine
     kraeftigere Flaeche mit leichter Unschaerfe den Radar ab. */
  .nxg3-radar-closing{
    background:radial-gradient(90rem 70rem at 50% 50%,
      rgba(2,2,6,.94) 0%, rgba(2,2,6,.88) 40%, rgba(2,2,6,.62) 100%);
    -webkit-backdrop-filter:blur(7px) saturate(.85);
    backdrop-filter:blur(7px) saturate(.85);
  }
  .nxg3-radar-closing .nxg3-punch{ font-size:clamp(2.2rem,10vw,4rem) }
}
@media (max-width:860px) and (max-height:700px){
  /* Niedrige Geraete: Kreis und Text ruecken zusammen, sonst rutscht die
     Zeile unter dem Schalter aus dem Bild. */
  .nxg3-radar-copy h2{ font-size:1.6rem }
  /* Profilkarte noch knapper deckeln — die Platzierungslogik haelt 12px Rand
     und 72px Nav-Abstand frei, dafuer muss die Karte kleiner bleiben. */
  .nxg3-radar-match{ max-height:62vh }
  .nxg3-radar-copy p{ display:none }
  .nxg3-radar-info-tagline{ display:none }
}

@media (prefers-reduced-motion:reduce){
  .nxg3-radar{height:auto;min-height:100vh}
  .nxg3-radar-stage{position:relative;height:auto;min-height:100vh;padding:80px 0}
  .nxg3-radar-copy,.nxg3-radar-switch,.nxg3-radar-core,.nxg3-radar-rings,.nxg3-radar-sweep,.nxg3-radar-info{opacity:1;transform:none}
  .nxg3-radar-sweep .nxg3-pulse-ring,.nxg3-radar-sweep .nxg3-ambient-glow{animation:none}
  .nxg3-radar-core .nxg3-core-ring{animation:none}
  .nxg3-radar-copy p,
  .nxg3-radar-info-eyebrow,.nxg3-radar-info-tagline,.nxg3-radar-info-label,.nxg3-radar-info-num{transition:none}
}


/* ============================================================
   LAGERFEUER  —  Hybrid-Raum / AI-Co-Pilot (Gen3 · Akt 05)
   ============================================================ */
/* Registered custom-properties — `--cf-fire` ramps smoothly through
   a numeric range, so the chat-card box-shadow can flicker with the
   fire intensity without per-frame style mutations on every other
   property. JS sets only --cf-fire on .campfire-chat each frame. */
@property --cf-fire{
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}
@property --cf-glow{
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}
@property --cf-glow-far{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --cf-bright{
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}
@property --cf-sat{
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}
@property --cf-scale{
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}
@property --cf-jx{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --cf-jy{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.nxg3-campfire{
  position:relative;
  /* 640vh → 360vh (Juli 2026, Kollegen-Feedback): eine Chat-Nachricht
     pro leichtem Scroll, kein Leerlauf vor dem Closing. */
  height:360vh;
  background:
    radial-gradient(80rem 60rem at 50% 70%, rgba(255,120,40,.08), transparent 60%),
    radial-gradient(70rem 50rem at 20% 30%, rgba(120,40,0,.05), transparent 60%),
    #050302;
  z-index:2;
  isolation:isolate;
}
.nxg3-campfire::before{
  content:"";position:absolute;left:0;right:0;top:0;height:22vh;
  background:linear-gradient(to bottom,#000 0%,transparent 100%);
  z-index:4;pointer-events:none;
}
.nxg3-campfire::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:18vh;
  background:linear-gradient(to top,#000 0%,transparent 100%);
  z-index:4;pointer-events:none;
}
.nxg3-campfire-stage{
  position:sticky;top:0;
  width:100%;height:100vh;
  overflow:hidden;
  display:block;
}
.nxg3-campfire-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  z-index:1;
  mix-blend-mode:screen;
}
.nxg3-campfire-veil{
  position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(50rem 40rem at 30% 50%, rgba(0,0,0,.3), transparent 65%),
    radial-gradient(60rem 40rem at 95% 50%, rgba(0,0,0,.75), transparent 70%);
  pointer-events:none;
}

/* chapter index */
.nxg3-campfire-chapter{
  position:absolute;
  top:clamp(90px,14vh,140px);
  left:clamp(24px,6vw,64px);
  z-index:5;
  display:flex;align-items:center;gap:14px;
  font:500 .68rem/1 "Geist Mono",monospace;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--nxg3-ink-dim);
}
.nxg3-campfire-chapter .nxg3-idx{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--nxg3-line-strong);
  color:var(--nxg3-ink);
  font-size:.7rem;
  backdrop-filter:blur(10px);
}
.nxg3-campfire-chapter .nxg3-dot{
  width:6px;height:6px;border-radius:50%;
  background:#ff7828;
  box-shadow:0 0 10px #ff7828;
  animation:pulseDotAmber 1.6s ease-in-out infinite;
}
@keyframes pulseDotAmber{
  0%,100%{transform:scale(1);box-shadow:0 0 10px #ff7828}
  50%{transform:scale(1.35);box-shadow:0 0 20px #ffa368}
}

/* Headline — upper-left */
.nxg3-campfire-copy{
  position:absolute;
  left:clamp(24px,6vw,72px);
  top:clamp(180px,26vh,280px);
  max-width:min(480px,38vw);
  z-index:5;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .45s var(--nxg3-ease-soft), transform .8s var(--nxg3-ease-soft);
}
.nxg3-campfire-copy.nxg3-in{opacity:1;transform:translateY(0)}
.nxg3-campfire-copy h2{
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:600;
  color:#f5ece2;
  margin-bottom:16px;
}
.nxg3-campfire-copy h2 .nxg3-em{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;font-weight:400;
  background:linear-gradient(115deg,#ffb36a 0%,#ff7828 55%,#d14220 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.01em;
}
.nxg3-campfire-copy p{
  font-size:clamp(.96rem,1.05vw,1.08rem);
  line-height:1.55;
  color:var(--nxg3-ink-dim);
  max-width:44ch;
}

/* Participant avatars arranged in a semicircle around the fire */
.nxg3-campfire-circle{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(88vh,80vw);
  aspect-ratio:1/1;
  z-index:3;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s var(--nxg3-ease-soft);
}
.nxg3-campfire-circle.nxg3-in{opacity:1}
/* Avatars — each one is a "person" around the fire. They breathe
   slowly, jitter spatially, react to fire intensity, and most
   importantly LIGHT UP when their owner is currently speaking in
   the chat (data-idx → data-author mapping in JS). */
.nxg3-campfire-avatar{
  position:absolute;
  z-index:3;
  width:44px;height:44px;
  border-radius:50%;
  /* Base transform set inline via style="left:Xpx;top:Ypx" — we use a
     translate(-50%) to anchor the orb on its label's center, plus a
     CSS-var-driven extra X/Y for the spatial-jitter loop and a scale
     for the speaking-pulse. */
  transform:translate(-50%, -50%)
            translate(var(--cf-jx, 0), var(--cf-jy, 0))
            scale(var(--cf-scale, 1));
  background:
    radial-gradient(circle at 35% 35%,
      rgba(255,210,170,.8) 0%,
      rgba(255,130,60,.5) 40%,
      rgba(100,30,0,.2) 75%,
      transparent 100%);
  box-shadow:
    0 0 calc(16px * var(--cf-glow, 1))   rgba(255,120,50,.35),
    0 0 calc(32px * var(--cf-glow-far, 0))  var(--cf-color-far, rgba(255,160,90,.4)),
    inset 0 0 0 1px rgba(255,180,100,.15);
  filter:brightness(var(--cf-bright, 1)) saturate(var(--cf-sat, 1));
  transition:filter .55s var(--nxg3-ease-soft),
             box-shadow .55s var(--nxg3-ease-soft);
  will-change:transform, filter, box-shadow;
}
.nxg3-campfire-avatar.nxg3-nexiqa{
  width:56px;height:56px;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,230,200,.95) 0%,
      rgba(255,145,88,.7) 28%,
      rgba(255,95,174,.5) 55%,
      rgba(166,108,255,.25) 78%,
      transparent 100%);
  box-shadow:
    0 0 calc(30px * var(--cf-glow, 1))  rgba(255,120,50,.4),
    0 0 calc(60px * var(--cf-glow-far, 0)) rgba(166,108,255,.5),
    inset 0 0 0 1px rgba(255,255,255,.1);
}

/* Speaking state — orb scales up, glow surges, color shifts to the
   speaker's own accent. Driven by CSS vars set per-author in JS. */
.nxg3-campfire-avatar.nxg3-is-speaking{
  --cf-scale: 1.35;
  --cf-bright: 1.55;
  --cf-sat: 1.25;
  --cf-glow: 2.2;
  --cf-glow-far: 1;
  z-index: 4;
  transition:filter .35s var(--nxg3-ease-soft),
             box-shadow .35s var(--nxg3-ease-soft);
}
/* Dimmed state — non-active speakers fade to background while
   someone else holds the floor */
.nxg3-campfire-avatar.nxg3-is-dimmed{
  --cf-bright: 0.55;
  --cf-sat: 0.7;
}
/* NEXIQA's calm "listening" pulse — runs always while the section is
   visible. Stops only during the speaking pulse + after the burst. */
.nxg3-campfire-avatar.nxg3-nexiqa.nxg3-is-listening{
  animation:cfNexiqaListening 3.6s ease-in-out infinite;
}
@keyframes cfNexiqaListening{
  0%, 100%{ --cf-glow: 1; --cf-bright: 1; }
  50%    { --cf-glow: 1.4; --cf-bright: 1.18; }
}
/* NEXIQA's burst — fires once when the knowledge card appears */
.nxg3-campfire-avatar.nxg3-nexiqa.nxg3-is-burst{
  animation:cfNexiqaBurst 1.6s var(--nxg3-ease-soft);
}
@keyframes cfNexiqaBurst{
  0%   { --cf-scale: 1;   --cf-glow: 1;   --cf-bright: 1; }
  25%  { --cf-scale: 1.6; --cf-glow: 3.2; --cf-bright: 1.9; --cf-glow-far: 1.4; --cf-sat: 1.3; }
  100% { --cf-scale: 1;   --cf-glow: 1;   --cf-bright: 1; }
}

/* Per-author color profile (used by .is-speaking glow + connection-line) */
.nxg3-campfire-avatar[data-author="anna"]{
  --cf-color-far: rgba(255,180,120,.55);
}
.nxg3-campfire-avatar[data-author="markus"]{
  --cf-color-far: rgba(166,200,255,.55);
}
.nxg3-campfire-avatar[data-author="julia"]{
  --cf-color-far: rgba(255,180,210,.55);
}
.nxg3-campfire-avatar[data-author="tom"]{
  --cf-color-far: rgba(220,200,140,.55);
}
.nxg3-campfire-avatar[data-author="lena"]{
  --cf-color-far: rgba(180,210,160,.55);
}
.nxg3-campfire-avatar[data-author="paul"]{
  --cf-color-far: rgba(200,170,210,.55);
}

.nxg3-campfire-avatar .nxg3-label{
  position:absolute;
  left:50%;top:calc(100% + 10px);
  transform:translateX(-50%);
  font:500 .56rem/1 "Geist Mono",monospace;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,200,160,.5);
  white-space:nowrap;
  transition:color .4s ease, opacity .4s ease;
}
.nxg3-campfire-avatar.nxg3-nexiqa .nxg3-label{
  color:rgba(255,230,200,.75);
}
.nxg3-campfire-avatar.nxg3-is-speaking .nxg3-label{
  color:rgba(255,235,200,.95);
  opacity:1;
}
.nxg3-campfire-avatar.nxg3-is-dimmed .nxg3-label{
  opacity:0.4;
}

/* Connection line — full SVG covering .campfire-circle, line drawn
   between two avatars in JS. Hidden by default; flashes once via
   stroke-dashoffset animation when @NEXIQA is mentioned. */
.nxg3-campfire-link{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:2;
  opacity:0;
  transition:opacity .25s ease;
}
.nxg3-campfire-link.nxg3-is-active{
  opacity:1;
}
.nxg3-campfire-link line{
  stroke-dasharray:4 6;
  stroke-dashoffset:0;
  animation:cfLinkFlow 1.4s linear;
  filter:drop-shadow(0 0 6px rgba(255,180,120,.6));
}
@keyframes cfLinkFlow{
  from{ stroke-dashoffset:60; }
  to  { stroke-dashoffset:0; }
}

@media (prefers-reduced-motion:reduce){
  .nxg3-campfire-avatar.nxg3-nexiqa.nxg3-is-listening,
  .nxg3-campfire-avatar.nxg3-nexiqa.nxg3-is-burst{ animation:none; }
  .nxg3-campfire-avatar{ transition:none; }
  .nxg3-campfire-link line{ animation:none; }
}

/* Chat panel — right.
   The box-shadow's outer warm-orange layer is driven by --cf-fire
   (a CSS variable updated each frame in JS to match the live fire
   intensity). Result: the chat-card's edges flicker with the fire,
   so it FEELS like the people are sitting close to flames. */
.nxg3-campfire-chat{
  position:absolute;
  right:clamp(24px,5vw,72px);
  top:50%;
  transform:translateY(-50%);
  width:min(380px,32vw);
  max-height:min(620px, 80vh);
  z-index:6;
  padding:20px 20px 18px;
  border-radius:20px;
  border:1px solid var(--nxg3-line-strong);
  background:
    linear-gradient(180deg, rgba(20,14,10,.72) 0%, rgba(10,6,4,.55) 100%);
  backdrop-filter:blur(22px) saturate(1.1);
  -webkit-backdrop-filter:blur(22px) saturate(1.1);
  --cf-fire: 1;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 20px 50px rgba(0,0,0,.55),
    0 0 calc(40px * var(--cf-fire)) rgba(255,140,60, calc(.18 * var(--cf-fire))),
    0 0 calc(80px * var(--cf-fire)) rgba(255,90,30, calc(.10 * var(--cf-fire)));
  opacity:0;
  transition:opacity .45s var(--nxg3-ease-soft),
             box-shadow .25s linear;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.nxg3-campfire-chat.nxg3-in{opacity:1}
.nxg3-campfire-chat-head{
  display:flex;align-items:center;gap:10px;
  padding-bottom:14px;
  border-bottom:1px solid var(--nxg3-line);
  margin-bottom:14px;
  flex:0 0 auto;
}
.nxg3-campfire-chat-head .nxg3-fire-ico{
  font-size:1.2rem;
  filter:drop-shadow(0 0 8px rgba(255,120,50,.6));
}
.nxg3-campfire-chat-head .nxg3-meta{
  display:flex;flex-direction:column;gap:2px;flex:1;
}
.nxg3-campfire-chat-head .nxg3-meta .nxg3-topic{
  font:500 .9rem/1 "Geist",sans-serif;
  color:#f5ece2;
}
.nxg3-campfire-chat-head .nxg3-meta .nxg3-sub{
  font:500 .58rem/1 "Geist Mono",monospace;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--nxg3-ink-faint);
}
.nxg3-campfire-chat-head .nxg3-listening{
  display:inline-flex;align-items:center;gap:6px;
  font:500 .54rem/1 "Geist Mono",monospace;
  letter-spacing:.2em;text-transform:uppercase;
  color:#ffa368;
}
.nxg3-campfire-chat-head .nxg3-listening::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:#ffa368;box-shadow:0 0 8px #ffa368;
  animation:pulseDotAmber 1.8s ease-in-out infinite;
}
.nxg3-campfire-chat-body{
  flex:1;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;   /* stick to bottom — newest always visible */
  gap:12px;
  padding-right:4px;
  min-height:0;               /* allow flex child to shrink */
  position:relative;
}
.nxg3-campfire-chat-body::before{
  /* top fade so messages dissolve upward as new ones push them up */
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:48px;
  background:linear-gradient(to bottom,
    rgba(10,6,4,.85) 0%,
    rgba(10,6,4,.55) 40%,
    rgba(10,6,4,0) 100%);
  pointer-events:none;
  z-index:2;
}
.nxg3-campfire-msg{
  display:flex;flex-direction:column;gap:3px;
  flex:0 0 auto;
  /* hidden state: fully below, invisible */
  max-height:0;
  opacity:0;
  transform:translateY(14px);
  overflow:hidden;
  transition:
    max-height .55s var(--nxg3-ease-soft),
    opacity .45s var(--nxg3-ease-soft),
    transform .45s var(--nxg3-ease-soft),
    margin .55s var(--nxg3-ease-soft);
}
.nxg3-campfire-msg.nxg3-in{
  max-height:220px;
  opacity:1;
  transform:translateY(0);
}
.nxg3-campfire-msg .nxg3-author{
  font:500 .62rem/1 "Geist Mono",monospace;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,200,160,.55);
}
.nxg3-campfire-msg .nxg3-author.nxg3-user-anna{ color:rgba(255,145,88,.85); }
.nxg3-campfire-msg .nxg3-author.nxg3-user-markus{ color:rgba(166,200,255,.75); }
.nxg3-campfire-msg .nxg3-author.nxg3-user-julia{ color:rgba(255,180,200,.75); }
.nxg3-campfire-msg .nxg3-text{
  font:500 .86rem/1.4 "Geist",sans-serif;
  color:#f0e6dc;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);
}
.nxg3-campfire-msg.nxg3-mention .nxg3-text{
  color:#fff;
  background:rgba(255,140,60,.08);
  border-color:rgba(255,140,60,.22);
}
.nxg3-campfire-msg.nxg3-mention .nxg3-text strong{
  color:#ffb368;
  font-weight:600;
}

/* Knowledge card (NEXIQA reply) — distinct styling */
.nxg3-campfire-kcard{
  flex:0 0 auto;
  max-height:0;
  opacity:0;
  transform:translateY(14px) scale(.98);
  overflow:hidden;
  transition:
    max-height .7s var(--nxg3-ease-soft),
    opacity .55s var(--nxg3-ease-soft),
    transform .55s var(--nxg3-ease-spring),
    margin .7s var(--nxg3-ease-soft),
    padding .7s var(--nxg3-ease-soft);
  margin-top:0;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(255,140,60,.3);
  background:
    linear-gradient(180deg, rgba(40,22,12,.75) 0%, rgba(24,14,8,.6) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,200,160,.08),
    0 8px 24px rgba(255,120,50,.18);
}
.nxg3-campfire-kcard.nxg3-in{
  max-height:480px;
  opacity:1;
  transform:translateY(0) scale(1);
  margin-top:4px;
  padding:14px 14px 12px;
}
.nxg3-campfire-kcard-head{
  display:flex;align-items:center;gap:8px;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,200,160,.12);
}
.nxg3-campfire-kcard-head .nxg3-logo{
  width:22px;height:22px;border-radius:5px;
  background:
    conic-gradient(from 210deg at 50% 50%, #ffa86a 0%, #ff5fae 25%, #a66cff 50%, #55c8ff 75%, #ffa86a 100%);
  box-shadow:0 0 12px rgba(255,120,50,.35);
  position:relative;
  /* halftone dot texture */
  mask-image:radial-gradient(circle at 30% 30%, #000 0%, #000 35%, transparent 38%),
             radial-gradient(circle at 70% 50%, #000 0%, #000 25%, transparent 28%),
             radial-gradient(circle at 40% 70%, #000 0%, #000 22%, transparent 24%);
  -webkit-mask-composite:source-over;
}
.nxg3-campfire-kcard-head .nxg3-name{
  font:500 .82rem/1 "Geist",sans-serif;
  color:#ffd9b3;
  letter-spacing:-.005em;
}
.nxg3-campfire-kcard-head .nxg3-tag{
  margin-left:auto;
  font:500 .54rem/1 "Geist Mono",monospace;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,180,100,.6);
  padding:3px 7px;border-radius:999px;
  border:1px solid rgba(255,180,100,.25);
  background:rgba(255,140,60,.08);
}
.nxg3-campfire-kcard-body{
  font:500 .82rem/1.5 "Geist",sans-serif;
  color:#f5ece2;
}
.nxg3-campfire-kcard-body strong{ color:#ffb368; font-weight:600; }
.nxg3-campfire-kcard-body em{
  font-family:"Instrument Serif",serif;
  font-style:italic;
  color:#ffc588;
}

/* Closing reveal */
.nxg3-campfire-closing{
  position:absolute;inset:0;z-index:7;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:10px;
  opacity:0;
  pointer-events:none;
  transition:opacity .9s var(--nxg3-ease-soft);
  text-align:center;padding:0 24px;
  background:radial-gradient(60rem 50rem at 50% 50%, rgba(0,0,0,.5), transparent 70%);
}
.nxg3-campfire-closing.nxg3-in{opacity:1}
.nxg3-campfire-closing .nxg3-pre{
  font:500 .72rem/1 "Geist Mono",monospace;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--nxg3-ink-dim);
  margin-bottom:18px;
}
.nxg3-campfire-closing .nxg3-punch{
  font-size:clamp(2.8rem,7vw,6.5rem);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:.98;
  color:#f5ece2;
  max-width:18ch;
}
.nxg3-campfire-closing .nxg3-punch em{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-style:italic;font-weight:400;
  background:linear-gradient(115deg,#ffb36a 0%,#ff7828 55%,#d14220 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nxg3-campfire-closing .nxg3-sub{
  margin-top:28px;
  font-size:clamp(1rem,1.2vw,1.12rem);
  color:var(--nxg3-ink-dim);
  max-width:44ch;
}
.nxg3-campfire-closing .nxg3-sub em{
  font-family:"Instrument Serif",serif;
  font-style:italic;
  color:#ffc588;
}

/* Mobile */
/* ============ Handy: Text oben, Feuer in der Mitte, Chat unten ============
   Vorher lagen alle drei Ebenen uebereinander: die Ueberschrift ragte 171px
   in den Avatarring, der Chat noch einmal 169px — auf 375px war das ein
   einziger Stapel. Auf dem Desktop stehen die drei NEBENeinander (Copy links,
   Feuer Mitte, Chat rechts); untereinander gestapelt braucht jede Ebene ihren
   eigenen Streifen.
   Der Chat waechst mit jeder Nachricht (318 -> 422px). Er ist deshalb hier
   fest gedeckelt — sein Koerper hat ohnehin overflow:hidden und
   justify-content:flex-end, die neueste Nachricht steht also immer unten. */
@media (max-width:860px){
  .nxg3-campfire{height:320vh}

  /* Kapitelmarke ganz nach oben — sie lag vorher hinter der Ueberschrift. */
  .nxg3-campfire-chapter{ top:4vh; left:50%; transform:translateX(-50%) }

  /* Der Einstiegstext wird vom Script stufenlos nach oben aus dem Bild
     gefahren (translateY + opacity als Inline-Style). Keine CSS-Transition
     hier — sonst laeuft die Bewegung dem Finger hinterher. */
  .nxg3-campfire-copy{
    left:20px;right:20px;top:13vh;max-width:none;text-align:center;
    will-change:transform,opacity;
  }
  .nxg3-campfire-copy h2{ font-size:clamp(1.8rem,7vw,2.5rem); line-height:1.08 }
  .nxg3-campfire-copy p{ font-size:.9rem; line-height:1.5; margin-top:11px; max-width:32ch; margin-inline:auto }

  /* Feuerstelle und Avatarring ruecken GEMEINSAM nach oben, gesteuert von
     --nxg3-cf-lift. Die Leinwand mitzuverschieben ist billiger als die
     Feuerhoehe neu zu berechnen — die Steinverlaeufe sind vorgerendert. */
  .nxg3-campfire-canvas{ transform:translateY(var(--nxg3-cf-lift, 0px)) }
  .nxg3-campfire-circle{
    width:min(56vw, 210px); top:62%;
    transform:translate(-50%, calc(-50% + var(--nxg3-cf-lift, 0px)));
    will-change:transform;
  }

  /* Der Chat kommt erst, wenn der Text draussen ist. */
  .nxg3-campfire:not(.nxg3-cf-talk) .nxg3-campfire-chat{
    opacity:0; transform:translate(-50%, 26px); pointer-events:none;
  }

  .nxg3-campfire-chat{
    right:auto;left:50%;transform:translate(-50%, 0);
    top:auto;bottom:4vh;
    width:min(92vw,380px);
    max-height:46vh;
    transition:opacity .5s var(--nxg3-ease-soft), transform .5s var(--nxg3-ease-soft);
  }
  /* Weicher Uebergang nach oben, damit der Chat vor dem Feuer zu schweben
     scheint statt es hart abzuschneiden. */
  .nxg3-campfire-chat::before{
    content:"";position:absolute;left:0;right:0;top:-34px;height:34px;
    background:linear-gradient(180deg, rgba(9,7,6,0), rgba(9,7,6,.72));
    pointer-events:none;border-radius:inherit;
  }

  .nxg3-campfire-closing .nxg3-punch{ font-size:clamp(2rem,9vw,3.6rem) }
}
@media (max-width:860px) and (max-height:700px){
  /* Niedrige Geraete: Einleitungssatz weicht, der Chat bekommt den Platz. */
  .nxg3-campfire-copy{ top:11vh }
  .nxg3-campfire-circle{ width:min(48vw, 176px); top:64% }
  .nxg3-campfire-chat{ max-height:44vh; bottom:3vh }
}

@media (prefers-reduced-motion:reduce){
  .nxg3-campfire{height:auto;min-height:100vh}
  .nxg3-campfire-stage{position:relative;height:auto;min-height:100vh;padding:80px 0}
  .nxg3-campfire-copy,.nxg3-campfire-circle,.nxg3-campfire-chat{opacity:1;transform:none}
  .nxg3-campfire-msg,.nxg3-campfire-kcard{opacity:1;transform:none}
}


/* ============================================================
   SHOWCASE — 9 Assistants (Apple iPhone-style horizontal reel)
   ============================================================ */
.nxg3-showcase-trigger{
  position:relative;
  padding:160px 24px 140px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(80rem 60rem at 50% 38%, rgba(80,120,180,.06), transparent 65%),
    radial-gradient(60rem 50rem at 50% 92%, rgba(120,60,180,.05), transparent 60%),
    linear-gradient(180deg,#0a0c12 0%, #06080c 100%);
}
.nxg3-showcase-trigger::after{
  content:"";
  position:absolute; left:50%; top:68%;
  width:min(70vw, 900px); height:min(70vw, 900px);
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(120,100,220,.12), transparent 72%);
  pointer-events:none;
  filter:blur(20px);
  opacity:.8;
}

/* Staggered reveal — driven by .in class on .showcase-trigger */
.nxg3-showcase-trigger .nxg3-eyebrow,
.nxg3-showcase-trigger h2 .nxg3-w,
.nxg3-showcase-tablet,
.nxg3-showcase-cta{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.nxg3-showcase-trigger.nxg3-in .nxg3-eyebrow{opacity:1;transform:none;transition-delay:.05s}
.nxg3-showcase-trigger.nxg3-in h2 .nxg3-w{opacity:1;transform:none}
.nxg3-showcase-trigger.nxg3-in h2 .nxg3-w:nth-child(1){transition-delay:.15s}
.nxg3-showcase-trigger.nxg3-in h2 .nxg3-w:nth-child(2){transition-delay:.23s}
.nxg3-showcase-trigger.nxg3-in h2 .nxg3-w:nth-child(3){transition-delay:.31s}
.nxg3-showcase-trigger.nxg3-in h2 .nxg3-w:nth-child(4){transition-delay:.39s}
.nxg3-showcase-trigger.nxg3-in h2 .nxg3-w:nth-child(5){transition-delay:.47s}
.nxg3-showcase-trigger.nxg3-in .nxg3-showcase-tablet{opacity:1;transform:none;transition-delay:.6s;transition-duration:1.1s}
.nxg3-showcase-trigger.nxg3-in .nxg3-showcase-cta{opacity:1;transform:none;transition-delay:1.15s}

.nxg3-showcase-trigger .nxg3-eyebrow{margin-bottom:30px}
.nxg3-showcase-trigger h2{
  font-size:clamp(2.2rem,4.6vw,4rem);
  line-height:1.06;
  letter-spacing:-.025em;
  margin:0 0 56px;   /* Sub-Text entfernt (Juli 2026) — Headline trägt den Abstand zum Laptop */
  max-width:22ch;
  font-weight:600;
}
.nxg3-showcase-trigger h2 .nxg3-w{display:inline-block}
.nxg3-showcase-trigger h2 em{
  font-style:normal;
  background:linear-gradient(95deg,#ffcf6a 0%,#d08bff 55%,#6aa8ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nxg3-showcase-tablet{
  position:relative;
  width:min(94%, 1180px);
  margin:0 auto 68px;
  filter: drop-shadow(0 50px 90px rgba(0,0,0,.55)) drop-shadow(0 12px 28px rgba(120,100,220,.18));
}
.nxg3-showcase-tablet::before{
  content:"";
  position:absolute; inset:-6% -4% -2% -4%;
  background:radial-gradient(closest-side, rgba(120,100,220,.22), transparent 70%);
  filter:blur(32px);
  z-index:-1;
  opacity:.7;
  pointer-events:none;
}
.nxg3-showcase-tablet img{display:block;width:100%;height:auto}

/* ----- Call-to-action group (pill button + hint) ----- */
.nxg3-showcase-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  position:relative;
}
.nxg3-showcase-cta-hint{
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.nxg3-showcase-cta-hint::before,
.nxg3-showcase-cta-hint::after{
  content:""; width:22px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
}
.nxg3-showcase-open{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:12px 16px 12px 28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  color:#fff;
  font-size:1.02rem;
  letter-spacing:.005em;
  cursor:pointer;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             border-color .35s ease,
             background .35s ease,
             box-shadow .35s ease;
  user-select:none;
  font-family:inherit;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  animation: showcase-float 4.2s ease-in-out infinite;
  isolation:isolate;
}
@keyframes showcase-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.nxg3-showcase-open::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(115deg,
    transparent 38%,
    rgba(255,255,255,.14) 48%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,.14) 52%,
    transparent 62%);
  background-size:200% 100%;
  background-position:-120% 0;
  mix-blend-mode:overlay;
  pointer-events:none;
  animation: showcase-shimmer 4.8s ease-in-out infinite;
  animation-delay:1.4s;
  z-index:1;
}
@keyframes showcase-shimmer{
  0%,55%{background-position:-120% 0}
  75%{background-position:220% 0}
  100%{background-position:220% 0}
}
.nxg3-showcase-open > *{position:relative;z-index:2}
.nxg3-showcase-open:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.3);
  background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
  box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 0 6px rgba(208,139,255,.12);
  animation-play-state:paused;
}
.nxg3-showcase-open:focus-visible{
  outline:none;
  border-color:rgba(208,139,255,.7);
  box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 0 4px rgba(208,139,255,.35);
}
.nxg3-showcase-open .nxg3-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px;
  background:linear-gradient(140deg,#ffcf6a 0%,#d08bff 55%,#6aa8ff 100%);
  position:relative;
  flex:0 0 auto;
  color:#0a0c12;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  box-shadow:0 6px 18px rgba(208,139,255,.35);
}
.nxg3-showcase-open .nxg3-arrow::before{
  content:"";
  width:10px; height:10px;
  border-right:2px solid currentColor;
  border-top:2px solid currentColor;
  transform:translateX(-2px) rotate(45deg);
}
.nxg3-showcase-open .nxg3-arrow::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:0 0 0 0 rgba(208,139,255,.55);
  animation: showcase-pulse 2.6s cubic-bezier(.22,.61,.36,1) infinite;
  pointer-events:none;
}
.nxg3-showcase-open .nxg3-pulse-ring{
  position:absolute; inset:-4px;
  border-radius:999px;
  border:1px solid rgba(208,139,255,.5);
  opacity:0;
  animation: showcase-pulse-ring 2.6s cubic-bezier(.22,.61,.36,1) infinite;
  animation-delay:1.3s;
  pointer-events:none;
}
@keyframes showcase-pulse{
  0%{box-shadow:0 0 0 0 rgba(208,139,255,.5)}
  60%{box-shadow:0 0 0 18px rgba(208,139,255,0)}
  100%{box-shadow:0 0 0 0 rgba(208,139,255,0)}
}
@keyframes showcase-pulse-ring{
  0%{transform:scale(1);opacity:.55}
  80%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}
.nxg3-showcase-open:hover .nxg3-arrow{transform:translateX(6px);box-shadow:0 10px 24px rgba(208,139,255,.5)}
.nxg3-showcase-open:active{transform:translateY(-1px) scale(.985)}

/* ----- Fullscreen reel overlay ----- */
.nxg3-showcase-reel{
  position:fixed; inset:0;
  z-index:1000;
  background:#05070c;
  display:flex; flex-direction:column;
  transform:translate3d(100%,0,0);
  visibility:hidden;
  box-shadow:-40px 0 80px rgba(0,0,0,.6);
  transition:
    transform .62s cubic-bezier(.32,.72,.2,1),
    visibility 0s linear .62s;
  will-change:transform;
}
.nxg3-showcase-reel.nxg3-open{
  transform:translate3d(0,0,0);
  visibility:visible;
  transition:
    transform .66s cubic-bezier(.22,.65,.25,1),
    visibility 0s linear 0s;
}
.nxg3-showcase-reel::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60rem 50rem at 20% 30%, rgba(120,100,220,.12), transparent 60%),
    radial-gradient(60rem 50rem at 80% 70%, rgba(60,120,200,.10), transparent 60%);
  pointer-events:none;
  opacity:0;
  transition:opacity .7s ease .15s;
}
.nxg3-showcase-reel.nxg3-open::before{opacity:1}

/* Page-push: trigger section slides slightly left while the reel swipes in */
.nxg3-showcase-trigger{
  transition:transform .66s cubic-bezier(.22,.65,.25,1),
             filter .66s cubic-bezier(.22,.65,.25,1);
}
body.nxg3-reel-lock .nxg3-showcase-trigger{
  transform:translateX(-48px);
  filter:brightness(.6);
}

.nxg3-showcase-reel .nxg3-reel-close,
.nxg3-showcase-reel .nxg3-reel-back,
.nxg3-showcase-reel .nxg3-reel-hint,
.nxg3-showcase-reel .nxg3-reel-progress{
  opacity:0;
  transition:opacity .45s ease;
}
.nxg3-showcase-reel.nxg3-open .nxg3-reel-close{opacity:1;transition-delay:.35s}
.nxg3-showcase-reel.nxg3-open .nxg3-reel-back{opacity:1;transition-delay:.4s}
.nxg3-showcase-reel.nxg3-open .nxg3-reel-hint{opacity:1;transition-delay:.5s}
.nxg3-showcase-reel.nxg3-open .nxg3-reel-progress{opacity:1;transition-delay:.3s}

.nxg3-reel-close{
  position:absolute; top:22px; right:22px;
  width:46px;height:46px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(20,22,28,.55);
  color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:5;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
  padding:0;
}
.nxg3-reel-close:hover{background:rgba(40,42,50,.7);border-color:rgba(255,255,255,.32);transform:rotate(90deg)}
.nxg3-reel-close svg{width:18px;height:18px;display:block}

.nxg3-reel-back{
  position:absolute; bottom:26px; left:26px;
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(20,22,28,.55);
  color:rgba(255,255,255,.9);
  font-size:.92rem; cursor:pointer;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  z-index:5;
  font-family:inherit;
  transition:background .2s ease, border-color .2s ease;
}
.nxg3-reel-back:hover{background:rgba(40,42,50,.7);border-color:rgba(255,255,255,.32)}
.nxg3-reel-back .nxg3-chev{display:inline-block;width:8px;height:8px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);margin-right:2px}

.nxg3-reel-track{
  flex:1;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  outline:none;
  /* pan-x sagt dem Browser eindeutig: hier wird NUR waagerecht gewischt.
     Mit dem Standardwert auto entscheidet er anhand der ersten Pixel
     selbst ueber die Achse — ein langsamer oder leicht schraeger Wisch
     wurde dann auf senkrecht festgelegt, wo es nichts zu scrollen gibt,
     und die Geste verpuffte. pinch-zoom bleibt erlaubt (Barrierefreiheit). */
  touch-action:pan-x pinch-zoom;
  /* Beide Achsen abfangen: overflow:hidden am body haelt iOS Safari
     nicht zuverlaessig vom Mitscrollen ab. */
  overscroll-behavior:contain;
}
.nxg3-reel-track::-webkit-scrollbar{display:none}

.nxg3-reel-slide{
  flex:0 0 100vw;
  height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:0;
  padding:0 7vw;
  align-items:center;
  position:relative;
}
.nxg3-reel-slide::before{
  content:"";position:absolute;inset:0;
  background:var(--slide-bg, radial-gradient(60rem 50rem at 30% 50%, rgba(120,160,220,.08), transparent 70%));
  pointer-events:none;
  opacity:.95;
  z-index:0;
}
.nxg3-reel-slide > *{position:relative;z-index:1}

.nxg3-reel-media{
  justify-self:center;
  align-self:center;
  width:100%;
  max-width:720px;
  /* Bildformat — folgt den Assistenten-Bildern der Wissensdatenbanken.
     Historie: 4:5 hochkant -> 16:10 Breitbild -> 4:3 (Aug. 2026), weil die
     neuen Bilder alle ~4:3 sind und im 16:10-Rahmen oben/unten 14-17 %
     verloren haetten. Neue Bilder also bitte im Format 4:3 liefern. */
  aspect-ratio:4/3;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(145deg, var(--slide-c1, #2a2d36), var(--slide-c2, #10121a));
  box-shadow:0 60px 120px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.3);
  position:relative;
}
.nxg3-reel-media img{width:100%;height:100%;object-fit:cover;display:block}
.nxg3-reel-media-placeholder{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(3rem,7vw,6rem);
  font-weight:300;letter-spacing:-.02em;
  color:rgba(255,255,255,.18);
  font-variant-numeric:tabular-nums;
  user-select:none;
}

.nxg3-reel-copy{
  padding:0 0 0 60px;
  max-width:640px;
}
.nxg3-reel-num{
  display:block;
  font-size:.78rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.42);
  margin-bottom:18px;
  font-variant-numeric:tabular-nums;
}
.nxg3-reel-tag{
  display:inline-block;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.78);
  margin-bottom:22px;
}
.nxg3-reel-title{
  font-size:clamp(2rem,4.6vw,3.6rem);
  line-height:1.05; letter-spacing:-.02em;
  margin:0 0 22px;
  color:#fff;
  font-weight:600;
}
.nxg3-reel-title em{
  font-style:normal;
  background:linear-gradient(90deg, var(--slide-g1,#ffcf6a), var(--slide-g2,#d08bff));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nxg3-reel-body{
  font-size:clamp(1rem,1.15vw,1.1rem);
  line-height:1.62;
  color:rgba(255,255,255,.78);
  margin:0 0 28px;
}
.nxg3-reel-body em{color:#fff;font-style:normal;font-weight:500}
/* Pointe: der Merksatz zwischen Fliesstext und Beispielfrage. Traegt die
   Akzentfarbe der jeweiligen Slide (--slide-g1) und steht bewusst ohne
   Kasten — sonst konkurriert er optisch mit der Frage direkt darunter. */
.nxg3-reel-punch{
  font:600 clamp(1rem,1.25vw,1.18rem)/1.45 "Geist",sans-serif;
  letter-spacing:-.01em;
  color:var(--slide-g1,#fff);
  max-width:34ch;
  margin:0 0 24px;
}
.nxg3-reel-example{
  font-size:.98rem;
  line-height:1.5;
  color:rgba(255,255,255,.86);
  padding:16px 22px;
  border-left:2px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.03);
  border-radius:0 12px 12px 0;
  font-style:italic;
  max-width:48ch;
  margin:0;
}

.nxg3-reel-progress{
  position:absolute;
  left:50%; bottom:26px;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:18px;
  padding:10px 18px 10px 20px;
  border-radius:999px;
  background:rgba(20,22,28,.6);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  z-index:4;
  pointer-events:none;
}
.nxg3-reel-dots{display:flex;align-items:center;gap:6px}
.nxg3-reel-dots .nxg3-dot{
  display:block;
  width:22px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.14);
  position:relative;
  overflow:hidden;
  transition:width .35s cubic-bezier(.22,.65,.25,1), background .35s ease;
}
.nxg3-reel-dots .nxg3-dot::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,#ffcf6a 0%,#d08bff 55%,#6aa8ff 100%);
  transform:scaleX(var(--fill, 0));
  transform-origin:left center;
  transition:transform .18s linear;
  border-radius:inherit;
}
.nxg3-reel-dots .nxg3-dot.nxg3-current{
  width:40px;
  background:rgba(255,255,255,.22);
}
.nxg3-reel-counter{
  font-size:.8rem;
  letter-spacing:.22em;
  color:rgba(255,255,255,.78);
  font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:center;
  white-space:nowrap;
}
.nxg3-reel-counter .nxg3-sep{margin:0 6px;color:rgba(255,255,255,.35)}
.nxg3-reel-counter #reelCurrent{
  display:inline-block;
  min-width:1.5em; text-align:right;
  color:#fff;
}
.nxg3-reel-progress.nxg3-at-end{
  border-color:rgba(208,139,255,.5);
  box-shadow:0 10px 30px rgba(0,0,0,.4), 0 0 0 4px rgba(208,139,255,.15);
}
.nxg3-reel-hint{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-size:.74rem; letter-spacing:.25em; text-transform:uppercase;
  color:rgba(255,255,255,.32);
  display:flex; align-items:center; gap:12px;
  pointer-events:none;
  transition:opacity .4s ease;
  z-index:5;
}
.nxg3-reel-hint.nxg3-hide{opacity:0}
.nxg3-reel-hint .nxg3-arr{display:inline-block;width:24px;height:1px;background:rgba(255,255,255,.32);position:relative}
.nxg3-reel-hint .nxg3-arr::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;border-right:1px solid rgba(255,255,255,.32);border-top:1px solid rgba(255,255,255,.32);transform:translateY(-50%) rotate(45deg)}

body.nxg3-reel-lock{overflow:hidden}

@media (max-width:900px){
  .nxg3-reel-slide{grid-template-columns:1fr;padding:70px 24px 110px;align-content:center}
  /* 32vh als dritte Schranke: seit das Bildfeld 4:3 statt 16:10 ist, waere es
     auf niedrigen Handys (z. B. 375x667) zu hoch geworden und haette die Copy
     aus dem Slide gedrueckt (Track hat overflow-y:hidden). Auf hohen Handys
     greift weiterhin 72vw/320px, das Bild bleibt also gross. */
  .nxg3-reel-media{max-width:min(72vw, 320px, 32vh);margin:0 auto 12px}
  .nxg3-reel-copy{padding:0;max-width:100%;text-align:left}
  .nxg3-reel-title{font-size:clamp(1.7rem,7vw,2.4rem)}
  .nxg3-reel-body{font-size:.98rem;margin-bottom:20px}
  .nxg3-reel-punch{font-size:.98rem;margin-bottom:18px;max-width:100%}
  .nxg3-reel-example{font-size:.9rem;padding:13px 16px}
  .nxg3-showcase-tablet{margin-bottom:40px}
  .nxg3-showcase-trigger{padding:100px 20px 90px}
  .nxg3-reel-back{bottom:22px;left:20px;font-size:.85rem;padding:9px 16px}
  .nxg3-reel-close{top:18px;right:18px;width:42px;height:42px}
  .nxg3-reel-progress{bottom:78px;gap:12px;padding:8px 14px}
  .nxg3-reel-dots .nxg3-dot{width:14px}
  .nxg3-reel-dots .nxg3-dot.nxg3-current{width:26px}
  .nxg3-reel-counter{font-size:.72rem;letter-spacing:.18em}
}
@media (prefers-reduced-motion:reduce){
  .nxg3-showcase-trigger .nxg3-eyebrow,
  .nxg3-showcase-trigger h2 .nxg3-w,
  .nxg3-showcase-trigger .nxg3-sub,
  .nxg3-showcase-tablet,
  .nxg3-showcase-cta{opacity:1;transform:none;transition:none}
  .nxg3-showcase-open{animation:none}
  .nxg3-showcase-open::before{display:none}
  .nxg3-showcase-open .nxg3-arrow::after{animation:none}
  .nxg3-showcase-open .nxg3-pulse-ring{display:none}
  .nxg3-reel-media,.nxg3-reel-copy{transform:none;opacity:1;transition:none}
  .nxg3-showcase-reel{transition:transform .25s ease, visibility 0s linear .25s}
  .nxg3-showcase-reel.nxg3-open{transition:transform .25s ease, visibility 0s linear 0s}
  body.nxg3-reel-lock .nxg3-showcase-trigger{transform:none;filter:none;transition:none}
  .nxg3-reel-track{scroll-behavior:auto}
}

/* ============================== GEN3 BILDGENERIERUNG (Diffusion) ============================== */
.nxg3-diff-section{
  position:relative;
  width:100%;
  height:440vh;
  background:#050509;
  color:#f2f0ee;
  overflow:visible;
  isolation:isolate;
}
.nxg3-diff-pin{
  position:sticky; top:0;
  width:100%; height:100vh;
  overflow:hidden;
}
.nxg3-diff-pin::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 800px at 18% 12%, rgba(106,168,255,.09), transparent 60%),
    radial-gradient(1000px 700px at 82% 88%, rgba(255,110,199,.09), transparent 60%),
    radial-gradient(800px 600px at 50% 50%, rgba(208,139,255,.06), transparent 70%);
}
.nxg3-diff-pin::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:9;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
}
.nxg3-diff-canvas{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
  z-index:1;
}
/* Reveal-Logo — sitzt exakt auf der gleichen Position/Größe wie die
   Punkt-Wolke, damit Schwarm und Logo als EIN zusammenhängendes Form-
   Ereignis wirken. Opacity + Scale werden vom JS anhand des Scroll-
   Progress gesteuert.
   Austausch-Hinweis: Dieses <img> kann 1:1 durch ein eigenes Base64-
   kodiertes NEXIQA-Logo ersetzt werden, z. B.:
   src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBD..." */
.nxg3-diff-logo{
  position:absolute; top:50%; left:50%;
  width:min(50vmin, 560px); height:min(50vmin, 560px);
  transform:translate(-50%,-50%) scale(0.96);
  object-fit:contain;
  opacity:0;
  pointer-events:none;
  will-change:opacity, transform;
  z-index:3;
  filter:drop-shadow(0 20px 60px rgba(208,139,255,.35));
}
.nxg3-diff-layer{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center;
  padding:0 36px;
  pointer-events:none;
  will-change:opacity, transform;
  z-index:4;
}
.nxg3-diff-layer--hero{justify-content:flex-start; padding-top:14vh}
.nxg3-diff-layer--hero .nxg3-eyebrow{
  font-family:"Geist Mono", ui-monospace, monospace;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(242,240,238,.55);
  margin:0 0 22px;
  display:inline-flex; align-items:center; gap:14px;
}
.nxg3-diff-layer--hero .nxg3-eyebrow::before,
.nxg3-diff-layer--hero .nxg3-eyebrow::after{
  content:""; width:24px; height:1px; background:rgba(242,240,238,.26);
}
.nxg3-diff-layer--hero h2{
  font-family:"Instrument Serif","Times New Roman",serif; font-weight:400;
  font-size:clamp(40px, 7vw, 96px);
  line-height:.98; letter-spacing:-.03em;
  margin:0 0 18px; color:#f2f0ee;
}
.nxg3-diff-layer--hero h2 em{
  font-style:italic;
  background:linear-gradient(110deg,#6aa8ff,#d08bff 45%,#ff6ec7 70%,#ffcf6a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nxg3-diff-layer--hero p{
  font-size:16px; max-width:520px; color:rgba(242,240,238,.78);
  margin:0; line-height:1.55;
}
.nxg3-diff-layer--outro{justify-content:flex-end; padding-bottom:18vh}
.nxg3-diff-layer--outro h3{
  font-family:"Instrument Serif","Times New Roman",serif; font-weight:400;
  font-size:clamp(30px, 4.6vw, 56px);
  line-height:1.02; letter-spacing:-.025em;
  margin:0 0 16px; color:#f2f0ee;
}
.nxg3-diff-layer--outro h3 em{font-style:italic; color:rgba(242,240,238,.6)}
.nxg3-diff-layer--outro p{
  font-size:15px; max-width:440px; color:rgba(242,240,238,.72);
  margin:0; line-height:1.55;
}
.nxg3-diff-hud{
  position:absolute; left:36px; top:50%;
  transform:translateY(-50%); z-index:5;
  display:flex; flex-direction:column; gap:12px;
  font-family:"Geist Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(242,240,238,.48);
  pointer-events:none;
}
.nxg3-diff-hud-row{display:flex; align-items:center; gap:12px; transition:color .3s ease}
.nxg3-diff-hud-dot{
  width:7px; height:7px; border-radius:50%;
  background:rgba(242,240,238,.26);
  transition:background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.nxg3-diff-hud-row.nxg3-is-active{color:#f2f0ee}
.nxg3-diff-hud-row.nxg3-is-active .nxg3-diff-hud-dot{
  background:#d08bff;
  box-shadow:0 0 14px #d08bff;
  transform:scale(1.15);
}
.nxg3-diff-caption{
  position:absolute; left:50%; bottom:62px;
  transform:translateX(-50%);
  z-index:5; text-align:center;
  max-width:640px; padding:0 24px;
  pointer-events:none;
}
.nxg3-diff-caption-label{
  font-family:"Geist Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(242,240,238,.48); margin-bottom:10px;
}
.nxg3-diff-caption-text{
  font-family:"Instrument Serif","Times New Roman",serif; font-style:italic;
  font-size:clamp(18px, 2.4vw, 28px);
  line-height:1.25; color:#f2f0ee;
  min-height:1.4em;
  transition:opacity .35s ease;
}
.nxg3-diff-progress{
  position:absolute; left:50%; bottom:28px;
  transform:translateX(-50%);
  width:min(320px, 62vw); height:3px; border-radius:2px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  z-index:5;
}
.nxg3-diff-progress__fill{
  display:block; height:100%;
  background:linear-gradient(90deg,#6aa8ff,#d08bff,#ff6ec7,#ffcf6a);
  box-shadow:0 0 10px rgba(208,139,255,.45);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .12s linear;
}
/* ============================================================
   BENTO  —  Premium-Galerie (sitzt im gleichen Pin wie Diffusion)
   Übernommen aus Bildanimation_Gen3.html, integriert nach Diffusion.
   Eigene CSS-Custom-Properties unter --bento-* gescoped, damit
   nichts mit den Site-Variablen kollidiert.
   ============================================================ */
.nxg3-bento-scope {
  --bento-bg: #07070a;
  --bento-bg-elev: #0e0e12;
  --bento-ink: #f5f3ee;
  --bento-ink-dim: #9a9a9d;
  --bento-ink-mute: #5a5a5d;
  --bento-accent: #c9a96a;
  --bento-accent-soft: rgba(201, 169, 106, 0.22);
  --bento-accent-glow: rgba(201, 169, 106, 0.4);
  --bento-line: rgba(245, 243, 238, 0.07);
  --bento-line-strong: rgba(245, 243, 238, 0.14);
  --bento-ease-out:    cubic-bezier(0.32, 0.72, 0, 1);
  --bento-ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);
  --bento-ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Bento-Stage: lebt INNERHALB der .diff-pin auf z-index:3 ─── */
.nxg3-bento-stage {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 1320px);
  z-index: 3;
  pointer-events: auto;
  opacity: 0;                /* JS toggelt sichtbar via .bento-live */
  /* 1.0s Fade — gibt dem User Atempause, das diff-logo bleibt der visuelle Fokus */
  transition: opacity 1.0s var(--bento-ease-cinema);
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
}
.nxg3-bento-stage.nxg3-bento-live { opacity: 1; }

.nxg3-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Zellenhöhe reagiert auf Viewport-BREITE UND -HÖHE — der kleinere
     gewinnt. Plus: Grid+Palette zusammen dürfen das Viewport nicht sprengen.
     Mit 17vh-Cap passt das Bento-Stack (Grid + Palette + Gap) sicher in
     Laptops/Mobiles, ohne dass der diff-final-Headline ("Erstellt mit
     NEXIQA Gen3") nach oben gedrängt wird. */
  grid-auto-rows: clamp(120px, min(17vw, 17vh), 220px);
  grid-template-areas:
    "a a b b"
    "a a b b"
    "c d d e";
  gap: clamp(12px, 1.4vw, 20px);
  width: 100%;
}

/* ── Cells ────────────────────────────────────────────────── */
.nxg3-bento-stage .nxg3-cell {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bento-bg-elev);
  border: 1px solid var(--bento-line);
  box-shadow: 0 24px 48px rgba(0,0,0,.45), 0 8px 16px rgba(0,0,0,.25);
  cursor: zoom-in;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.nxg3-bento-stage .nxg3-bento-grid.nxg3-gathered .nxg3-cell {
  opacity: 0;
  transform: translate(var(--bx, 0px), var(--by, 0px)) scale(0.06);
  filter: blur(28px) saturate(0.5);
}
.nxg3-bento-stage .nxg3-bento-grid.nxg3-gathered.nxg3-ready .nxg3-cell {
  transition:
    opacity 1.1s var(--bento-ease-cinema),
    transform 1.4s var(--bento-ease-cinema),
    filter 1.1s var(--bento-ease-cinema),
    border-color 0.45s ease,
    box-shadow 0.55s ease;
}
.nxg3-bento-stage .nxg3-bento-grid.nxg3-bloomed .nxg3-cell {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  filter: blur(0) saturate(1);
}
.nxg3-bento-stage .nxg3-bento-grid.nxg3-bloomed .nxg3-c-a { transition-delay: 0.20s; }
.nxg3-bento-stage .nxg3-bento-grid.nxg3-bloomed .nxg3-c-b { transition-delay: 0.30s; }
.nxg3-bento-stage .nxg3-bento-grid.nxg3-bloomed .nxg3-c-d { transition-delay: 0.55s; }
.nxg3-bento-stage .nxg3-bento-grid.nxg3-bloomed .nxg3-c-c { transition-delay: 0.70s; }
.nxg3-bento-stage .nxg3-bento-grid.nxg3-bloomed .nxg3-c-e { transition-delay: 0.78s; }
.nxg3-bento-stage .nxg3-c-a { grid-area: a; }
.nxg3-bento-stage .nxg3-c-b { grid-area: b; }
.nxg3-bento-stage .nxg3-c-c { grid-area: c; }
.nxg3-bento-stage .nxg3-c-d { grid-area: d; }
.nxg3-bento-stage .nxg3-c-e { grid-area: e; }

.nxg3-bento-stage .nxg3-cell > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition:
    opacity 0.6s var(--bento-ease-soft),
    transform 0.8s var(--bento-ease-out),
    filter 0.6s var(--bento-ease-soft);
}
.nxg3-bento-stage .nxg3-cell-label {
  position: absolute; top: 12px; right: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.22em;
  color: var(--bento-ink);
  background: rgba(7,7,10,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 10px;
  border: 1px solid var(--bento-line-strong);
  border-radius: 100px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .4s var(--bento-ease-soft), transform .4s var(--bento-ease-soft);
  z-index: 3;
}
.nxg3-bento-stage .nxg3-cell::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    rgba(201,169,106,.04) 0%,
    rgba(201,169,106,.10) 50%,
    rgba(201,169,106,.04) 100%);
  background-size: 200% 100%;
  animation: bento-shimmer 2.4s ease-in-out infinite;
  pointer-events: none;
  opacity: 1;
  transition: opacity .6s ease;
  z-index: 1;
}
.nxg3-bento-stage .nxg3-cell.nxg3-loaded::before { opacity: 0; }
@keyframes bento-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (hover: hover) {
  .nxg3-bento-stage .nxg3-cell:hover {
    transform: translateY(-6px) scale(1.015) !important;
    border-color: var(--bento-accent-soft);
    box-shadow:
      0 36px 72px rgba(0,0,0,.55),
      0 0 0 1px var(--bento-accent-soft),
      0 0 60px rgba(201,169,106,.20);
    z-index: 5;
    transition-delay: 0s !important;
  }
  .nxg3-bento-stage .nxg3-cell:hover > img { transform: scale(1.05); filter: brightness(1.06); }
  .nxg3-bento-stage .nxg3-cell:hover .nxg3-cell-label { opacity: 1; transform: translateY(0); }
}

/* Palette swap cross-dissolve */
.nxg3-bento-stage .nxg3-bento-grid.nxg3-swap-out .nxg3-cell > img {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(10px) saturate(0.7);
}
.nxg3-bento-stage .nxg3-bento-grid.nxg3-swap-out .nxg3-c-a > img { transition-delay: 0ms;   }
.nxg3-bento-stage .nxg3-bento-grid.nxg3-swap-out .nxg3-c-b > img { transition-delay: 50ms;  }
.nxg3-bento-stage .nxg3-bento-grid.nxg3-swap-out .nxg3-c-d > img { transition-delay: 100ms; }
.nxg3-bento-stage .nxg3-bento-grid.nxg3-swap-out .nxg3-c-c > img { transition-delay: 150ms; }
.nxg3-bento-stage .nxg3-bento-grid.nxg3-swap-out .nxg3-c-e > img { transition-delay: 180ms; }

/* ── Palette switcher (sits INSIDE bento-stage, directly below the grid) ───
   top:100% verankert sie an die Grid-Unterkante — egal wie groß die Grid
   responsiv wird, der Abstand zur Palette bleibt konstant. Funktioniert
   damit auf jedem Display ohne Überlappung. */
.nxg3-palette-row {
  position: absolute;
  left: 50%;
  top: calc(100% + clamp(20px, 3vh, 40px));
  transform: translateX(-50%);
  z-index: 6;
  display: flex; flex-direction: column;
  align-items: center; gap: 1.1rem;
  opacity: 0;
  transition: opacity .9s var(--bento-ease-cinema);
  pointer-events: auto;
  font-family: 'Manrope', sans-serif;
}
.nxg3-palette-row.nxg3-bento-live { opacity: 1; }
.nxg3-palette-dots {
  display: inline-flex; align-items: center;
  gap: 1.4rem;
  padding: .85rem 1.6rem;
  border: 1px solid var(--bento-line-strong);
  border-radius: 100px;
  background: rgba(14,14,18,.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nxg3-palette-dots .nxg3-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--dot-bg);
  border: 1px solid rgba(245,243,238,.18);
  cursor: pointer;
  transition: transform .5s var(--bento-ease-out), box-shadow .5s var(--bento-ease-soft);
  position: relative; padding: 0; flex-shrink: 0; outline: none;
}
.nxg3-palette-dots .nxg3-dot:hover { transform: scale(1.15); }
.nxg3-palette-dots .nxg3-dot::after {
  content: ''; position: absolute; inset: -7px;
  border: 1.5px solid transparent;
  border-radius: 50%; pointer-events: none;
  transform: scale(0.8);
  transition: border-color .45s var(--bento-ease-soft), transform .5s var(--bento-ease-out);
}
.nxg3-palette-dots .nxg3-dot.nxg3-active {
  transform: scale(1.18);
  box-shadow: 0 0 16px rgba(201,169,106,.5);
}
.nxg3-palette-dots .nxg3-dot.nxg3-active::after { border-color: var(--bento-accent); transform: scale(1); }
.nxg3-palette-name {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--bento-ink-dim);
  letter-spacing: 0.01em;
  transition: opacity .4s var(--bento-ease-soft), transform .4s var(--bento-ease-soft);
  height: 1.3em; text-align: center;
}
.nxg3-palette-name strong {
  font-family: 'Manrope', sans-serif;
  font-style: normal; font-weight: 400;
  color: var(--bento-accent);
  letter-spacing: 0.06em;
  font-size: 0.7rem; text-transform: uppercase;
  margin-right: 0.6rem;
}
.nxg3-palette-name.nxg3-fading { opacity: 0; transform: translateY(4px); }

/* ── Lightbox (fixed overlay) ──────────────────────────────── */
.nxg3-bento-lightbox {
  position: fixed; inset: 0;
  background: rgba(7,7,10,.94);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  z-index: 200;            /* above navbar (z-index 100) */
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--bento-ease-cinema);
  font-family: 'Manrope', sans-serif;
  --bento-bg-elev: #0e0e12;
  --bento-ink: #f5f3ee;
  --bento-ink-mute: #5a5a5d;
  --bento-accent: #c9a96a;
  --bento-accent-soft: rgba(201,169,106,.22);
  --bento-line-strong: rgba(245,243,238,.14);
  --bento-ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);
}
.nxg3-bento-lightbox.nxg3-active { opacity: 1; pointer-events: auto; }
.nxg3-bento-lightbox::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(201,169,106,.08) 0%, transparent 60%);
  pointer-events: none;
}
body.nxg3-bento-lightbox-open .nxg3-bento-stage {
  filter: blur(8px) brightness(0.55);
  transform: translate(-50%, -50%) scale(0.97);
  transition: filter .5s ease, transform .5s ease;
}
.nxg3-bento-lightbox-content {
  position: relative;
  max-width: min(900px, 100%); max-height: 90vh;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.5rem;
}
.nxg3-bento-lightbox-frame {
  position: relative;
  border: 1px solid var(--bento-accent-soft);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px var(--bento-accent-soft),
    0 30px 80px rgba(0,0,0,.6),
    0 0 100px rgba(201,169,106,.18);
  background: var(--bento-bg-elev);
  transform-origin: center center;
  will-change: transform;
  contain: layout paint;
  overflow: hidden;
  backface-visibility: hidden;
}
.nxg3-bento-lightbox-img {
  display: block;
  max-width: 100%; max-height: 75vh;
  width: auto; height: auto;
}
.nxg3-bento-lightbox .nxg3-lb-corner {
  position: absolute; width: 20px; height: 20px;
  border: 1px solid var(--bento-accent); pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.nxg3-bento-lightbox.nxg3-active .nxg3-lb-corner { opacity: 1; transition-delay: .55s; }
.nxg3-bento-lightbox .nxg3-lb-corner.nxg3-tl { top: -10px; left: -10px;    border-right: none; border-bottom: none; }
.nxg3-bento-lightbox .nxg3-lb-corner.nxg3-tr { top: -10px; right: -10px;   border-left: none;  border-bottom: none; }
.nxg3-bento-lightbox .nxg3-lb-corner.nxg3-bl { bottom: -10px; left: -10px; border-right: none; border-top: none; }
.nxg3-bento-lightbox .nxg3-lb-corner.nxg3-br { bottom: -10px; right: -10px;border-left: none;  border-top: none; }
.nxg3-bento-lightbox-meta {
  display: flex; justify-content: space-between;
  align-items: baseline; width: 100%; gap: 2rem;
  opacity: 0;
  transition: opacity .4s ease;
}
.nxg3-bento-lightbox.nxg3-active .nxg3-bento-lightbox-meta { opacity: 1; transition-delay: .45s; }
.nxg3-bento-lightbox-title {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 1.6rem; color: var(--bento-ink);
}
.nxg3-bento-lightbox-detail {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.22em;
  color: var(--bento-ink-mute); text-transform: uppercase;
  text-align: right;
}
.nxg3-bento-lightbox-detail span { color: var(--bento-accent); display: block; margin-top: 4px; }
.nxg3-bento-lightbox-close {
  position: absolute; top: -55px; right: 0;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--bento-line-strong);
  color: var(--bento-ink); cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s ease, transform .3s ease, border-color .3s ease, color .3s ease;
  font-size: 1.1rem; line-height: 1;
  opacity: 0;
}
.nxg3-bento-lightbox.nxg3-active .nxg3-bento-lightbox-close { opacity: 1; transition-delay: .4s, 0s, 0s, 0s; }
.nxg3-bento-lightbox-close:hover {
  border-color: var(--bento-accent); color: var(--bento-accent);
  transform: rotate(90deg);
}

/* ── Mobile: 2-Spalten-Layout ──────────────────────────────── */
@media (max-width: 760px) {
  .nxg3-bento-stage .nxg3-bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "a a"
      "a a"
      "b b"
      "b b"
      "c d"
      "e e";
    /* 6 Zeilen passen auf Mobile sonst nicht mehr in den Viewport. Mit
       11vh-Cap bleibt die Gesamthöhe (Grid + Palette + Gap) immer im Bild. */
    grid-auto-rows: clamp(80px, min(30vw, 11vh), 180px);
  }
  /* Auf Mobile etwas engerer Abstand zwischen Grid und Palette,
     damit die Palette sicher im Viewport bleibt. */
  .nxg3-palette-row {
    top: calc(100% + clamp(14px, 2vh, 22px));
  }
  .nxg3-palette-dots { gap: 1rem; padding: .7rem 1.2rem; }
  .nxg3-palette-dots .nxg3-dot { width: 22px; height: 22px; }
  .nxg3-bento-lightbox-meta { flex-direction: column; gap: 0.6rem; align-items: flex-start; }
  .nxg3-bento-lightbox-detail { text-align: left; }
  .nxg3-bento-stage .nxg3-cell-label { font-size: .5rem; padding: 4px 8px; top: 8px; right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .nxg3-bento-stage *, .nxg3-bento-stage *::before, .nxg3-bento-stage *::after,
  .nxg3-bento-lightbox *, .nxg3-bento-lightbox *::before, .nxg3-bento-lightbox *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.3s !important;
  }
}

/* Finale Headline "Erstellt mit NEXIQA Gen3." */
.nxg3-diff-final{
  position:absolute;
  top:14vh; left:0; right:0;
  text-align:center;
  padding:0 36px;
  z-index:6;
  pointer-events:none;
  opacity:0;
  transform:translateY(16px);
  will-change:opacity, transform;
}
.nxg3-diff-final .nxg3-eyebrow{
  font-family:"Geist Mono", ui-monospace, monospace;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(242,240,238,.55);
  margin:0 0 22px;
  display:inline-flex; align-items:center; gap:14px;
}
.nxg3-diff-final .nxg3-eyebrow::before,
.nxg3-diff-final .nxg3-eyebrow::after{
  content:""; width:24px; height:1px; background:rgba(242,240,238,.26);
}
.nxg3-diff-final h3{
  font-family:"Instrument Serif","Times New Roman",serif; font-weight:400;
  font-size:clamp(34px, 5.6vw, 76px);
  line-height:1.02; letter-spacing:-.025em;
  margin:0; color:#f2f0ee;
}
.nxg3-diff-final h3 em{
  font-style:italic;
  background:linear-gradient(110deg,#6aa8ff,#d08bff 45%,#ff6ec7 70%,#ffcf6a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

@media (max-width:900px){
  .nxg3-diff-section{height:400vh}
  .nxg3-diff-hud{left:18px; font-size:10px; letter-spacing:.18em}
  .nxg3-diff-layer--hero{padding-top:10vh}
  .nxg3-diff-layer--outro{padding-bottom:14vh}
  .nxg3-diff-caption{bottom:62px}
  .nxg3-diff-progress{bottom:26px}
  .nxg3-diff-final{top:10vh}
}
@media (prefers-reduced-motion:reduce){
  .nxg3-diff-section{height:auto; min-height:100vh}
  .nxg3-diff-pin{position:relative; height:100vh}
}

/* ============================== FRAG. WISSE. (Cinematic 4-Akt) ============================== */
.nxg3-fw-section{
  position:relative;
  width:100%;
  /* 560vh → 480vh (Juli 2026): Steps kommen etwas zügiger — bewusst nur
     leicht gestrafft, die 4 Typewriter-Szenen brauchen ihre Lesezeit. */
  height:480vh;
  background:#050509;
  --fw-accent:#6aa8ff;
  --fw-glow:rgba(106,168,255,.16);
  --fw-glow-x:70%;
  --fw-glow-y:40%;
  transition:background 1.2s cubic-bezier(.65,0,.35,1);
}
.nxg3-fw-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--fw-glow-x) var(--fw-glow-y), var(--fw-glow), transparent 55%);
  pointer-events:none;
  z-index:1;
  transition:background 1.2s cubic-bezier(.65,0,.35,1);
}
.nxg3-fw-pin{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  overflow:hidden;
  z-index:2;
}
.nxg3-fw-eyebrow{
  position:absolute;
  /* clear the fixed navbar (--nxg3-nav-h: 56px) plus a bit of breathing room */
  top:clamp(82px, 12vh, 112px);
  left:50%;
  transform:translateX(-50%);
  font:500 .68rem/1 "Geist Mono",ui-monospace,monospace;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--nxg3-ink-faint);
  z-index:7;
  white-space:nowrap;
  opacity:0;
  transition:opacity .6s ease, color .9s ease;
}
.nxg3-fw-eyebrow .nxg3-dot{
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--fw-accent);
  vertical-align:middle;
  margin-right:10px;
  transition:background .9s ease;
}
.nxg3-fw-phone-wrap{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  width:auto;
  height:auto;
  will-change:transform,filter;
  pointer-events:none;
}
.nxg3-fw-phone-wrap::before{
  content:"";
  position:absolute;
  inset:-14% -36%;
  background:radial-gradient(ellipse at center, var(--fw-glow), transparent 60%);
  filter:blur(60px);
  z-index:-1;
  transition:background 1s ease;
  pointer-events:none;
}
.nxg3-fw-phone-wrap img{
  display:block;
  height:72vh;
  width:auto;
  max-width:none;
  object-fit:contain;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.55));
}
.nxg3-fw-phone-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,.025) 3px,
    rgba(255,255,255,.025) 4px
  );
  z-index:1;
  opacity:.45;
  mix-blend-mode:overlay;
}
/* Lebendes Display: Overlay exakt auf der Bildschirmflaeche des Fotos.
   Der Innen-Wrapper umschliesst das Bild passgenau (fit-content), damit
   die %-Koordinaten des Overlays IMMER der Bildbox folgen — egal ob
   Desktop (absolute Buehne) oder Mobile (statische Spalte). */
.nxg3-fw-phone-inner{position:relative;width:fit-content;margin:0 auto}
.nxg3-fw-screen{
  position:absolute;
  left:10.41%; top:1.6%;
  width:41.71%; height:63.66%;
  border-radius:15.3% / 7.05%;   /* entspricht dem 90px-Eckradius des Fotos */
  overflow:hidden;
  /* bewusst KEIN Hintergrund: solange der erste Screen noch laedt,
     scheint das im Foto eingebaute Display durch (kein weisser Blitz) */
  transform:translateZ(0);       /* eigener Layer: Radius-Clipping bleibt beim Crossfade stabil */
}
.nxg3-fw-screen img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:none;                   /* neutralisiert das drop-shadow der Wrap-img-Regel */
  opacity:0; transform:scale(1.045);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform 1.15s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.nxg3-fw-screen img.nxg3-on{opacity:1;transform:scale(1)}
.nxg3-fw-island{
  position:absolute;
  left:34.1%; top:1.2%; width:31.4%; height:4.2%;
  background:#050505; border-radius:999px;
  z-index:2;
}
@media (prefers-reduced-motion:reduce){
  .nxg3-fw-screen img{transition:none}
}
.nxg3-fw-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:4;
  pointer-events:none;
}
.nxg3-fw-lines path{
  fill:none;
  stroke:#f5f5f7;
  stroke-width:1.1;
  stroke-linecap:round;
  opacity:0;
}
.nxg3-fw-lines circle.nxg3-fw-end{
  fill:var(--fw-accent);
  opacity:0;
  transition:fill .9s ease;
}
.nxg3-fw-lines circle.nxg3-fw-end-ring{
  fill:none;
  stroke:var(--fw-accent);
  stroke-width:1;
  opacity:0;
  transition:stroke .9s ease;
}
.nxg3-fw-scene{
  position:absolute;
  z-index:6;
  opacity:0;
  pointer-events:none;
  width:100%;
  transition:opacity .5s ease;
}
.nxg3-fw-scene-meta{
  font:500 .68rem/1 "Geist Mono",ui-monospace,monospace;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--fw-accent);
  margin-bottom:24px;
  display:flex;
  align-items:center;
  gap:12px;
  transition:color .9s ease;
}
.nxg3-fw-scene-meta::before{
  content:"";
  width:28px; height:1px;
  background:var(--fw-accent);
  transition:background .9s ease;
}
.nxg3-fw-scene h2{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-weight:400;
  font-size:clamp(56px, 9.5vw, 168px);
  line-height:.92;
  letter-spacing:-.02em;
  color:var(--nxg3-ink);
}
.nxg3-fw-scene h2 em{
  font-style:italic;
  color:var(--fw-accent);
  transition:color .9s ease;
}
.nxg3-fw-scene h2 .nxg3-fw-strike{
  position:relative;
  color:var(--nxg3-ink-faint);
  font-style:normal;
}
.nxg3-fw-scene h2 .nxg3-fw-strike::after{
  content:"";
  position:absolute;
  left:-2%; right:-2%;
  top:56%;
  height:3px;
  background:var(--fw-accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .9s cubic-bezier(.65,0,.35,1) .3s, background .9s ease;
}
.nxg3-fw-scene.nxg3-is-active h2 .nxg3-fw-strike::after{ transform:scaleX(1); }
.nxg3-fw-scene p{
  margin-top:22px;
  max-width:46ch;
  font:400 1rem/1.6 "Geist","SF Pro Text",sans-serif;
  color:var(--nxg3-ink-dim);
}
.nxg3-fw-cursor{
  display:inline-block;
  width:.06em;
  height:.78em;
  background:var(--fw-accent);
  margin-left:.06em;
  vertical-align:-.04em;
  opacity:0;
  animation:fw-blink 1s step-end infinite;
  transition:background .9s ease;
}
.nxg3-fw-scene.nxg3-is-active .nxg3-fw-cursor{ opacity:1; }
@keyframes fw-blink{ 50%{opacity:0} }

.nxg3-fw-scene-1{ top:11%; left:5%; max-width:54%; }
.nxg3-fw-scene-2{ top:14%; right:5%; max-width:54%; text-align:right; }
.nxg3-fw-scene-2 p{ margin-left:auto; }
.nxg3-fw-scene-3{ bottom:9%; right:5%; max-width:58%; text-align:right; }
.nxg3-fw-scene-3 p{ margin-left:auto; }
.nxg3-fw-scene-4{ bottom:9%; left:5%; max-width:58%; }

/* In rechtsbündigen Szenen (2 + 3) muss die Meta-Zeile auch rechts sitzen,
   sonst kippt sie über das mittig stehende Phone-Mockup. row-reverse setzt
   den Strich (::before) hinter den Akt-Text → Lesefluss läuft sauber zum
   rechtsbündigen <h2> darunter. */
.nxg3-fw-scene-2 .nxg3-fw-scene-meta,
.nxg3-fw-scene-3 .nxg3-fw-scene-meta{
  flex-direction:row-reverse;
}

.nxg3-fw-char{
  display:inline-block;
  transform:translateY(.6em);
  opacity:0;
  will-change:transform,opacity;
  transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .55s ease;
}
.nxg3-fw-scene.nxg3-is-active .nxg3-fw-char{ transform:translateY(0); opacity:1; }

.nxg3-fw-phase{
  position:absolute;
  bottom:36px;
  left:50%;
  transform:translateX(-50%);
  z-index:8;
  font:500 .62rem/1 "Geist Mono",ui-monospace,monospace;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--nxg3-ink-faint);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s ease;
}
.nxg3-fw-pin.nxg3-is-live .nxg3-fw-phase{ opacity:1; }
.nxg3-fw-phase .nxg3-fw-phase-label{ color:var(--fw-accent); transition:color .9s ease; }
.nxg3-fw-phase .nxg3-fw-dots{ display:flex; gap:8px; }
.nxg3-fw-phase .nxg3-fw-dot{
  width:6px; height:6px;
  border-radius:50%;
  border:1px solid var(--nxg3-ink-faint);
  transition:all .5s ease;
}
.nxg3-fw-phase .nxg3-fw-dot.nxg3-on{
  background:var(--fw-accent);
  border-color:var(--fw-accent);
  transform:scale(1.3);
}
/* ============ Handy: klebendes Handy, Schritte ziehen daran vorbei ============
   Auf dem Desktop ist das eine gepinnte Buehne: Handy in der Mitte, die vier
   Schritte blenden ringsum ein. Das laesst sich auf 375px nicht nachbauen —
   vorher fiel deshalb ALLES weg: Handy oben, danach vier Textbloecke am Stueck,
   das lebende Display war beim Lesen laengst aus dem Bild.
   Mobile Uebersetzung derselben Idee: Das Handy bleibt oben stehen, die vier
   Schritte scrollen darunter durch, und der aktive Schritt steht im Vordergrund
   waehrend die anderen zuruecktreten. Das Display wechselt weiterhin mit —
   nur getaktet nach dem Schritt, der gerade unter dem Handy steht. */
@media (max-width: 980px){
  .nxg3-fw-section{ height:auto; }
  /* overflow:hidden am Pin (Desktop: clippt Linien und Schein) macht jedes
     position:sticky darin wirkungslos — auf dem Handy muss es also weg.
     Der Schein wird stattdessen unten schmaler gefasst, damit nichts seitlich
     herauslaeuft. */
  .nxg3-fw-pin{ position:relative; height:auto; overflow:visible; padding:26px 22px 12vh; }
  .nxg3-fw-lines{ display:none; }

  /* Kopfzeile bleibt sichtbar, solange man in der Sektion ist */
  .nxg3-fw-eyebrow{
    /* 56px = Hoehe der fixierten Navbar, sonst verschwindet die Zeile darunter */
    position:sticky; top:56px; z-index:5;
    /* left/transform der Basisregel aufheben — im Fluss zentriert das Flexbox */
    left:auto; right:auto; transform:none;
    display:flex; justify-content:center;
    opacity:1 !important;
    margin:0 -22px; padding:14px 22px 10px;
    background:linear-gradient(180deg, #050509 62%, transparent);
  }

  /* Das Handy haelt an und begleitet alle vier Schritte */
  .nxg3-fw-phone-wrap{
    position:sticky; top:100px; left:auto;
    transform:none; height:auto; aspect-ratio:auto;
    margin:0 auto 4vh; z-index:4;
    display:flex; justify-content:center;
  }
  /* NUR das Foto treffen. Vorher galt die Regel auch fuer die vier App-Screens
     im lebenden Display: die stehen auf height:100% ihres Kastens, bekamen hier
     aber 40vh — bei gleicher Spezifitaet gewinnt die spaetere Regel. Dadurch
     waren die Screens zu hoch und object-fit:cover hat sie stark angeschnitten,
     was auf dem Handy wie ein Zoom aussah. */
  .nxg3-fw-phone-inner > img{ height:38vh; max-height:380px; }
  /* Ohne dieses Band liefe der Text links und rechts am Handy vorbei nach
     oben aus dem Bild. Es blendet ihn kurz vor dem Handy weich aus und
     liegt selbst UNTER dem Handy (z-index 3 gegen 4). */
  .nxg3-fw-pin::after{
    content:"";position:fixed;left:0;right:0;top:0;
    height:calc(100px + 38vh + 14px);
    background:linear-gradient(180deg, #050509 0%, #050509 74%, rgba(5,5,9,0) 100%);
    z-index:3;pointer-events:none;
    opacity:0;transition:opacity .35s ease;
  }
  .nxg3-fw-pin.nxg3-is-live::after{ opacity:1; }
  /* Der Schein hinter dem Handy wuerde die Texte darunter aufhellen */
  .nxg3-fw-phone-wrap::before{ inset:-8% -20%; filter:blur(46px); opacity:.7 }

  /* Ein Schritt pro Bildschirmlaenge, Text sitzt unten im Block —
     also immer unterhalb des klebenden Handys. */
  .nxg3-fw-scene{
    position:relative;
    inset:auto !important;
    max-width:100% !important;
    text-align:left !important;
    margin:0;
    min-height:74vh;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding-bottom:7vh;
    opacity:.3;
    transform:translateY(10px);
    transition:opacity .45s var(--nxg3-ease-soft), transform .45s var(--nxg3-ease-soft);
  }
  /* Der Schritt, den das Display gerade zeigt, tritt hervor. */
  .nxg3-fw-scene.nxg3-is-active{ opacity:1; transform:none; }
  .nxg3-fw-scene p{ margin-left:0 !important; }
  .nxg3-fw-scene .nxg3-fw-char{ transform:none; opacity:1; }
  .nxg3-fw-scene-meta{ color:var(--fw-accent); transition:color .6s ease; }

  /* Fortschrittspunkte als schmale Leiste am unteren Rand — zeigt beim
     Scrollen, wo man in den vier Schritten steht. */
  .nxg3-fw-phase{
    display:flex; position:fixed;
    left:50%; bottom:18px; transform:translateX(-50%);
    z-index:6; gap:12px; align-items:center;
    padding:8px 14px; border-radius:999px;
    background:rgba(10,10,14,.72);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border:1px solid var(--nxg3-line);
    opacity:0; pointer-events:none;
    transition:opacity .4s ease;
  }
  .nxg3-fw-pin.nxg3-is-live .nxg3-fw-phase{ opacity:1; }
  .nxg3-fw-phase-label{ font-size:.56rem; letter-spacing:.16em; }
}
@media (max-width: 980px) and (prefers-reduced-motion:reduce){
  /* Ohne Bewegung: alle Schritte gleichwertig lesbar, nichts klebt. */
  .nxg3-fw-scene{ opacity:1; transform:none; min-height:0; padding-bottom:56px; }
  .nxg3-fw-phone-wrap{ position:relative; top:auto; }
  .nxg3-fw-phase{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .nxg3-fw-section{ height:auto; }
  .nxg3-fw-pin{ position:relative; height:100vh; }
}

/* ============================================================
   PERSPEKTIVEN — Frischer 1:1-Einbau aus tPerspektiven.html
   Klassennamen via "tp-" Prefix gescoped; Werte/Strukturen
   identisch mit dem Standalone-Template. Anpassungen für NEXIQA:
     • Display-Font: Instrument Serif (statt Fraunces)
     • Body-Font: Geist (statt Plus Jakarta Sans)
     • Akzent: NEXIQA-Magenta #c471ed
   Kein Loader, kein eigener Cursor — die laufen global im NEXIQA.
   ============================================================ */
.nxg3-tp-block{
  --tp-pad: clamp(1.25rem, 4vw, 3rem);
  --tp-maxw: 1440px;
  --tp-bg: #0a0908;
  --tp-bg-elev: #14110f;
  --tp-ink: #f5f1e8;
  --tp-ink-muted: #8a8275;
  --tp-line: rgba(245,241,232,0.08);
  --tp-line-strong: rgba(245,241,232,0.18);
  --tp-accent: #c471ed;
  --tp-accent-glow: rgba(196,113,237,.42);
  --tp-font-display: "Instrument Serif", "Times New Roman", serif;
  --tp-font-body: "Geist", "SF Pro Text", -apple-system, sans-serif;
  position: relative;
  color: var(--tp-ink);
  font-family: var(--tp-font-body);
  font-weight: 400;
}
.nxg3-tp-block ::selection{ background: var(--tp-accent); color: var(--tp-bg); }

/* ===================== HERO ===================== */
.nxg3-tp-hero{
  min-height: 100vh;
  padding: var(--tp-pad);
  padding-top: 25vh;
  padding-bottom: 8vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.nxg3-tp-hero__ambient{
  position: absolute;
  top: 50%; left: 50%;
  width: 80vw; height: 80vw;
  max-width: 900px; max-height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--tp-accent-glow) 0%, transparent 60%);
  filter: blur(80px);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}
.nxg3-tp-hero__eyebrow{
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--tp-ink-muted);
  font-weight: 500;
  opacity: 0;
}
.nxg3-tp-hero__eyebrow::before{
  content: ""; width: 60px; height: 1px;
  background: var(--tp-accent);
}
.nxg3-tp-hero__title{
  position: relative; z-index: 2;
  font-family: var(--tp-font-display);
  font-size: clamp(3rem, 11vw, 11rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 400;
  color: var(--tp-ink);
  margin: 2rem 0;
  max-width: 14ch;
}
.nxg3-tp-hero__title em{
  font-style: italic;
  color: var(--tp-accent);
  font-weight: 400;
}
.nxg3-tp-hero__title .nxg3-tp-word-wrap{
  display: inline-block;
  /* overflow:clip + clip-margin: Reveal-Maske bleibt, aber Kursiv-Unterlängen
     (g in „Frage") und Rechts-Überhang (e in „Eine") werden nicht mehr
     abgeschnitten. Knapp bemessen (Überstand ~14px), damit die opak
     einfahrenden Wörter beim Reveal nicht durchblitzen. Layout unverändert. */
  overflow: clip;
  overflow-clip-margin: .12em;
  vertical-align: baseline;
}
.nxg3-tp-hero__title .nxg3-tp-word{
  display: inline-block;
  /* siehe Mirror-Titel: Versatz > Clip-Rand, sonst leckt die Maske */
  transform: translateY(135%);
  will-change: transform;
}
.nxg3-tp-hero__bottom{
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem; flex-wrap: wrap;
}
.nxg3-tp-hero__sub{
  max-width: 38ch;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.5;
  color: var(--tp-ink-muted);
  font-weight: 400;
  opacity: 0;
}
.nxg3-tp-hero__sub em{
  font-family: var(--tp-font-display);
  font-style: italic;
  color: var(--tp-ink);
  font-weight: 400;
}
.nxg3-tp-hero__scroll{
  font-size: 0.7rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--tp-ink-muted);
  display: flex; align-items: center; gap: 0.75rem;
  opacity: 0;
}
.nxg3-tp-hero__scroll svg{
  width: 14px; height: 14px;
  animation: tpFloat 2.4s ease-in-out infinite;
}
@keyframes tpFloat{
  0%,100%{ transform: translateY(0); }
  50%   { transform: translateY(6px); }
}

/* ===================== ANTWORT-SYNAPSE (Mindmap im Hero) =====================
   Entfaltung macht das JS-Modul (GSAP-One-Shot beim Eintritt); hier liegen
   Layout, Chip-Optik und die Ambient-Loops (Puls, Partikel, Schweben).
   Chips sind in % der Figur positioniert — preserveAspectRatio="none" am SVG
   sorgt dafür, dass die Ast-Enden IMMER unter den Chips liegen. */
.nxg3-syn{
  position:relative; z-index:1;
  width:100%; max-width:640px;
  height:400px; margin:48px auto 12px;
  pointer-events:none;
}
.nxg3-syn-stage{position:absolute;inset:0}
.nxg3-syn-net{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nxg3-syn-path{
  fill:none; stroke:var(--syn-c,#8ea2ff); stroke-opacity:.5;
  stroke-width:1.4; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.nxg3-syn-p-sub{stroke-opacity:.32;stroke-width:1.1}
.nxg3-syn-chip{
  position:absolute; left:var(--sx); top:var(--sy);
  translate:-50% -50%;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:999px;
  background:rgba(13,14,22,.72);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font:500 .78rem/1 "Geist",sans-serif; color:var(--nxg3-ink);
  white-space:nowrap;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
  pointer-events:auto;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.nxg3-syn-chip:hover{ border-color:var(--syn-c,#8ea2ff); box-shadow:0 0 26px -4px var(--syn-c,#8ea2ff); }
.nxg3-syn-chip > svg{width:13px;height:13px;color:var(--syn-c,#8ea2ff);flex-shrink:0}
.nxg3-syn-sub{padding:6px 11px;gap:6px}
.nxg3-syn-sub .nxg3-syn-txt{font-size:.7rem;color:var(--nxg3-ink-dim)}
.nxg3-syn-core{
  padding:12px 18px;
  font-weight:600; font-size:.86rem;
  background:linear-gradient(120deg, rgba(74,108,247,.28), rgba(139,92,246,.28)), rgba(13,14,22,.82);
  border-color:rgba(142,162,255,.5);
}
.nxg3-syn-ring{
  position:absolute; inset:-1px; border-radius:inherit;
  border:1px solid rgba(142,162,255,.6);
  opacity:0; pointer-events:none;
}
.nxg3-syn.nxg3-live .nxg3-syn-ring{ animation:nxg3SynPulse 2.8s ease-out infinite; }
@keyframes nxg3SynPulse{ 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.65);opacity:0} }
/* Partikel wandern die Hauptäste entlang zum Kern (nur wenn unterstützt) */
.nxg3-syn-spark{ fill:#fff; opacity:0; }
@supports (offset-path: path('M0,0 L1,1')){
  .nxg3-syn.nxg3-live .nxg3-syn-spark{
    animation:nxg3SynTravel var(--sd,4s) linear infinite;
    animation-delay:var(--sdel,0s);
  }
}
@keyframes nxg3SynTravel{
  0%{offset-distance:100%;opacity:0}
  12%{opacity:.9}
  85%{opacity:.9}
  100%{offset-distance:0%;opacity:0}
}
/* sanftes Schweben des GESAMTEN Netzes — Chips bleiben auf den Ästen */
.nxg3-syn.nxg3-live .nxg3-syn-stage{ animation:nxg3SynFloat 9s ease-in-out infinite alternate; }
@keyframes nxg3SynFloat{ from{transform:translateY(4px)} to{transform:translateY(-6px)} }
/* Loops pausieren, sobald die Synapse den Viewport verlässt (IO setzt die Klasse) */
.nxg3-syn:not(.nxg3-syn-vis) .nxg3-syn-stage,
.nxg3-syn:not(.nxg3-syn-vis) .nxg3-syn-spark,
.nxg3-syn:not(.nxg3-syn-vis) .nxg3-syn-ring{ animation-play-state:paused; }
/* Desktop: absolut in der rechten Hero-Hälfte, vertikal zentriert.
   Die Headline wird dafür kompakter (6.5vw statt 11vw) — erst dadurch
   entsteht das echte Nebeneinander Headline links / Synapse rechts. */
@media (min-width:1200px){
  .nxg3-tp-hero__title{ font-size: clamp(3rem, 6.5vw, 7.5rem); }
  .nxg3-tp-hero .nxg3-syn{
    position:absolute; right:calc(var(--tp-pad) * .75); top:50%;
    transform:translateY(-50%);
    width:min(44vw, 720px); height:min(66vh, 620px);
    max-width:none; margin:0;
  }
}
@media (max-width:640px){
  .nxg3-syn{height:400px;margin:36px auto 0}
  .nxg3-syn-chip{font-size:.66rem;padding:6px 10px;gap:5px}
  .nxg3-syn-chip > svg{width:11px;height:11px}
  .nxg3-syn-sub{padding:5px 8px}
  .nxg3-syn-sub .nxg3-syn-txt{font-size:.6rem}
  .nxg3-syn-core{font-size:.74rem;padding:9px 13px}
}
@media (prefers-reduced-motion:reduce){
  .nxg3-syn *{animation:none !important}
  .nxg3-syn-spark{display:none}
}

/* ===================== FEATURE — common ===================== */
.nxg3-tp-feature{ position: relative; padding: 0; }
.nxg3-tp-feature__num{
  font-family: var(--tp-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(8rem, 22vw, 22rem);
  line-height: 0.8;
  color: var(--tp-ink);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}
.nxg3-tp-feature__kicker{
  font-size: 0.7rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--tp-accent);
  font-weight: 600;
  display: flex; align-items: center; gap: 0.75rem;
}
.nxg3-tp-feature__kicker::before{
  content: ""; width: 30px; height: 1px;
  background: var(--tp-accent);
}
.nxg3-tp-feature__title{
  font-family: var(--tp-font-display);
  font-size: clamp(2.2rem, 5.5vw, 5rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--tp-ink);
}
.nxg3-tp-feature__title em{
  font-style: italic;
  color: var(--tp-accent);
}
.nxg3-tp-feature__body{
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.6;
  color: var(--tp-ink-muted);
  font-weight: 400;
  max-width: 48ch;
}
.nxg3-tp-feature__body strong{
  color: var(--tp-ink);
  font-weight: 500;
}
.nxg3-tp-feature__video-wrap{
  position: relative;
  overflow: hidden;
  background: var(--tp-bg-elev);
  border: 1px solid var(--tp-line);
}
.nxg3-tp-feature__video-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10,9,8,0.4) 100%);
  pointer-events: none;
}
.nxg3-tp-feature__video{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.nxg3-tp-feature__corners{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 2;
}
.nxg3-tp-feature__corners::before,
.nxg3-tp-feature__corners::after{
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--tp-accent);
}
.nxg3-tp-feature__corners::before{
  top: 12px; left: 12px;
  border-right: none; border-bottom: none;
}
.nxg3-tp-feature__corners::after{
  bottom: 12px; right: 12px;
  border-left: none; border-top: none;
}

/* ===================== FEATURE 01 — pinned, scaling phone ===================== */
.nxg3-tp-f1{ height: 220vh; }
.nxg3-tp-f1__pin{
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nxg3-tp-f1__num{
  position: absolute;
  top: 8vh;
  left: var(--tp-pad);
  z-index: 1;
}
.nxg3-tp-f1__meta{
  position: absolute;
  top: 50%;
  left: var(--tp-pad);
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 26vw;
}
.nxg3-tp-f1__meta-right{
  position: absolute;
  top: 50%;
  right: var(--tp-pad);
  transform: translateY(-50%);
  z-index: 3;
  text-align: right;
  max-width: 26vw;
}
.nxg3-tp-f1__video-wrap{
  width: 28vw;
  aspect-ratio: 9/16;
  max-width: 380px;
  border-radius: 28px;
  z-index: 2;
  box-shadow: 0 60px 100px -40px var(--tp-accent-glow),
              0 30px 60px -20px rgba(0,0,0,0.6);
  will-change: transform;
}

/* ===================== FEATURE 02 — asymmetric split ===================== */
.nxg3-tp-f2{
  padding: 18vh var(--tp-pad);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 6vw;
  align-items: center;
  position: relative;
  max-width: var(--tp-maxw);
  margin: 0 auto;
}
.nxg3-tp-f2__text{
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}
.nxg3-tp-f2__num-inline{
  font-family: var(--tp-font-display);
  font-style: italic;
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1;
  color: var(--tp-accent);
  font-weight: 400;
}
.nxg3-tp-f2__video-wrap{
  aspect-ratio: 9/16;
  max-width: 440px;
  margin-left: auto;
  border-radius: 24px;
  box-shadow: 0 50px 80px -30px rgba(0,0,0,0.7);
}

/* ===================== FEATURE 03 — editorial overlap ===================== */
.nxg3-tp-f3{
  padding: 18vh var(--tp-pad);
  position: relative;
  max-width: var(--tp-maxw);
  margin: 0 auto;
}
.nxg3-tp-f3__big-num{
  font-family: var(--tp-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(12rem, 30vw, 30rem);
  line-height: 0.85;
  color: var(--tp-accent);
  opacity: 0.12;
  position: absolute;
  top: 8vh;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}
.nxg3-tp-f3__inner{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: end;
}
.nxg3-tp-f3__video-wrap{
  aspect-ratio: 16/10;
  border-radius: 18px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7);
}
.nxg3-tp-f3__text{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 2rem;
}
.nxg3-tp-f3__pull{
  font-family: var(--tp-font-display);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--tp-ink);
  border-left: 1px solid var(--tp-accent);
  padding-left: 1.25rem;
  margin-top: 1rem;
}

/* ===================== FEATURE 04 — pinned cinematic ===================== */
.nxg3-tp-f4{
  height: 200vh;
  position: relative;
}
.nxg3-tp-f4__pin{
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.nxg3-tp-f4__video-wrap{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
  border-radius: 0;
}
.nxg3-tp-f4__video-wrap::after{
  background: linear-gradient(180deg,
    rgba(10,9,8,0.6) 0%,
    rgba(10,9,8,0.3) 40%,
    rgba(10,9,8,0.5) 70%,
    rgba(10,9,8,0.95) 100%);
}
.nxg3-tp-f4__overlay{
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 12vh var(--tp-pad) 8vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.nxg3-tp-f4__top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.nxg3-tp-f4__top-num{
  font-family: var(--tp-font-display);
  font-style: italic;
  font-size: clamp(4rem, 8vw, 8rem);
  line-height: 1;
  color: var(--tp-ink);
  font-weight: 400;
}
.nxg3-tp-f4__bottom{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: end;
}
.nxg3-tp-f4__title{
  font-family: var(--tp-font-display);
  font-size: clamp(2.5rem, 7vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--tp-ink);
}
.nxg3-tp-f4__title em{
  font-style: italic;
  color: var(--tp-accent);
}
.nxg3-tp-f4__body{
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.6;
  color: var(--tp-ink);
  font-weight: 400;
  max-width: 50ch;
  padding-bottom: 0.5rem;
}

/* ===================== FEATURE 05 — crescendo ===================== */
.nxg3-tp-f5{
  padding: 22vh var(--tp-pad);
  max-width: var(--tp-maxw);
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.nxg3-tp-f5__kicker-wrap{
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
.nxg3-tp-f5__title{
  font-family: var(--tp-font-display);
  font-size: clamp(3rem, 9vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 400;
  color: var(--tp-ink);
  margin-bottom: 4vh;
}
.nxg3-tp-f5__title em{
  font-style: italic;
  color: var(--tp-accent);
  display: block;
}
.nxg3-tp-f5__video-wrap{
  aspect-ratio: 16/9;
  max-width: 1100px;
  margin: 4vh auto 4vh;
  border-radius: 16px;
  box-shadow: 0 80px 160px -40px var(--tp-accent-glow),
              0 60px 100px -40px rgba(0,0,0,0.8);
}
.nxg3-tp-f5__body{
  max-width: 60ch;
  margin: 0 auto;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.6;
  color: var(--tp-ink-muted);
  font-weight: 400;
}
.nxg3-tp-f5__orb{
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 50vw;
  max-width: 700px;
  aspect-ratio: 1/1;
  background: radial-gradient(circle, var(--tp-accent-glow) 0%, transparent 60%);
  filter: blur(100px);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}

/* ===================== UTILS ===================== */
.nxg3-tp-reveal{ opacity: 0; }
.nxg3-tp-word-wrap{
  display: inline-block;
  /* NICHT overflow:hidden — das schnitt Unterlaengen (Spiegel) und den
     Rechtsueberhang der Kursiven (Muster, deine) ab. clip + Rand haelt die
     Reveal-Maske und gibt den Glyphen ihren Platz. */
  overflow: clip;
  overflow-clip-margin: .18em;
  vertical-align: baseline;
}
.nxg3-tp-word{ display: inline-block; will-change: transform; }
/* FOUC-Schutz für F5: Wörter starten unsichtbar bis GSAP gsap.set greift */
/* 135% statt 110%: der Versatz muss den overflow-clip-margin ueberschreiten,
   sonst blitzt das wartende Wort unter der Zeile durch. */
.nxg3-tp-f5__title .nxg3-tp-word{ transform: translateY(135%); }

/* ===================== Responsive ===================== */
@media (max-width: 900px){
  .nxg3-tp-f1{ height: auto; }
  .nxg3-tp-f1__pin{ height: auto; padding: 12vh var(--tp-pad); flex-direction: column; gap: 2rem; }
  .nxg3-tp-f1__num{ position: static; font-size: 6rem; }
  .nxg3-tp-f1__meta, .nxg3-tp-f1__meta-right{
    position: static; transform: none; max-width: 100%; text-align: left;
  }
  .nxg3-tp-f1__video-wrap{ width: 70vw; max-width: 320px; }
  .nxg3-tp-f2{ grid-template-columns: 1fr; padding: 12vh var(--tp-pad); }
  .nxg3-tp-f2__video-wrap{ max-width: 320px; margin: 0 auto; }
  .nxg3-tp-f3{ padding: 12vh var(--tp-pad); }
  .nxg3-tp-f3__inner{ grid-template-columns: 1fr; gap: 2rem; }
  .nxg3-tp-f4{ height: auto; }
  .nxg3-tp-f4__pin{ height: 100vh; min-height: 600px; }
  .nxg3-tp-f4__bottom{ grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce){
  .nxg3-tp-reveal{ opacity: 1; }
  .nxg3-tp-word{ transform: none !important; }
  .nxg3-tp-hero__eyebrow,
  .nxg3-tp-hero__sub,
  .nxg3-tp-hero__scroll{ opacity: 1; }
  .nxg3-tp-f1, .nxg3-tp-f4{ height: auto; }
  .nxg3-tp-f1__pin{ height: 100vh; }
  .nxg3-tp-f4__pin{ height: 100vh; }
}

/* ============================================================
   ENGINES BLOCK — wave→sphere cinematic + spec content.
   Imported from LLMPerformancegen3.html template.
   All rules scoped under .eng-block to avoid collision with
   the rest of the page's CSS. CSS variables only inherit
   inside the wrapper.
   ============================================================ */
.nxg3-eng-block{
  /* Animation-aligned palette (warm engine glow) */
  --eng-warm-white: #fff4e6;
  --eng-warm-light: #ffd9a8;
  --eng-warm-mid:   #ffaa66;
  --eng-warm-orange:#ff5500;
  --eng-warm-deep:  #c4732e;
  --eng-warm-darkest:#4a0000;

  --eng-flow:       #b8e7ff;
  --eng-flow-glow:  rgba(120, 200, 255, 0.55);
  --eng-core:       #8fe3c8;
  --eng-core-glow:  rgba(110, 220, 185, 0.45);
  --eng-plus:       #c9b0ff;
  --eng-plus-glow:  rgba(170, 130, 255, 0.45);
  --eng-pro-glow:   rgba(255, 150, 80, 0.65);

  --eng-text:       #f5f5f7;
  --eng-text-dim:   #a1a1aa;
  --eng-text-mute:  #6b6b75;
  --eng-border:     rgba(255,255,255,0.08);
  --eng-border-strong: rgba(255,255,255,0.14);
  --eng-bg-2:       #0a0a0d;

  position:relative;
  z-index:2;
  color:var(--eng-text);
  font-family:'Geist','SF Pro Text',sans-serif;
}

/* Canvas — fixed background, visibility hard-toggled by JS to the
   exact pin range of .scroll-stage. NO CSS transition — GSAP handles
   opacity directly with a quick tween, otherwise the CSS easing fights
   the GSAP timing and causes the wave to overlay the previous section
   on backscroll. Initial state: hidden. */
.nxg3-eng-block #webgl-canvas{
  position:fixed;
  top:0;left:0;
  width:100vw;height:100vh;
  z-index:1;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
}

/* ===== Cinematic stage ===== */
.nxg3-eng-block .nxg3-scroll-stage{
  position:relative;
  height:300vh;
  z-index:2;
  pointer-events:none;
}
.nxg3-eng-block .nxg3-sticky-stage{
  position:sticky;top:0;
  height:100vh;width:100%;
  overflow:hidden;
}
.nxg3-eng-block .nxg3-text-act{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;
  padding:60px 40px;
  opacity:0;
  will-change:opacity,transform;
  pointer-events:none;
}
.nxg3-eng-block .nxg3-text-act > *{ pointer-events:auto; }

/* Act I — Hero (wave) */
.nxg3-eng-block .nxg3-act-hero{
  justify-content:flex-end;
  padding-bottom:14vh;
  text-align:center;
  opacity:1;
}
.nxg3-eng-block .nxg3-eng-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Geist Mono',monospace;
  font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--eng-text-dim);
  padding:8px 16px;
  border:1px solid var(--eng-border);
  border-radius:100px;
  background:rgba(10,10,13,.5);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  margin-bottom:32px;
}
.nxg3-eng-block .nxg3-eng-eyebrow .nxg3-pulse-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--eng-warm-mid);
  box-shadow:0 0 12px var(--eng-gen3-glow);
  animation:eng-pulse-dot 2s ease-in-out infinite;
}
@keyframes eng-pulse-dot{
  0%,100%{ opacity:1;transform:scale(1) }
  50%    { opacity:.5;transform:scale(.85) }
}
.nxg3-eng-block .nxg3-hero-headline{
  font-family:'Instrument Serif',serif;
  font-weight:400;
  font-size:clamp(48px,8vw,110px);
  line-height:.98;letter-spacing:-.025em;
  color:var(--eng-text);
  max-width:16ch;
  margin:0 auto 28px;
  text-shadow:
    0 0 40px rgba(255,150,80,.15),
    0 0 80px rgba(255,100,50,.08);
}
.nxg3-eng-block .nxg3-hero-headline em{
  font-style:italic;
  background:linear-gradient(135deg,var(--eng-warm-light) 0%,var(--eng-warm-mid) 50%,var(--eng-warm-deep) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 20px rgba(255,150,80,.3));
}
.nxg3-eng-block .nxg3-hero-sub{
  font-size:19px;line-height:1.5;
  font-weight:300;
  color:var(--eng-text-dim);
  max-width:560px;margin:0 auto 60px;
}
.nxg3-eng-block .nxg3-scroll-cue{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--eng-text-mute);
  opacity:.8;
}
.nxg3-eng-block .nxg3-scroll-cue .nxg3-line{
  width:1px;height:50px;
  background:linear-gradient(to bottom,transparent,var(--eng-text-mute),transparent);
  animation:eng-line-pulse 2.5s ease-in-out infinite;
}
@keyframes eng-line-pulse{
  0%,100%{ opacity:.4;transform:scaleY(.6) }
  50%    { opacity:1;transform:scaleY(1) }
}

/* Act II — Stat moments (during morph) */
.nxg3-eng-block .nxg3-act-stat{ justify-content:center;text-align:center; }
.nxg3-eng-block .nxg3-stat-eyebrow{
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--eng-text-mute);
  margin-bottom:20px;
}
.nxg3-eng-block .nxg3-stat-figure{
  font-family:'Instrument Serif',serif;
  font-weight:400;
  font-size:clamp(96px,16vw,220px);
  line-height:.85;letter-spacing:-.04em;
  background:linear-gradient(180deg,var(--eng-warm-white) 0%,var(--eng-warm-light) 35%,var(--eng-warm-mid) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 60px rgba(255,150,80,.25));
  margin-bottom:24px;text-align:center;
}
.nxg3-eng-block .nxg3-stat-figure .nxg3-unit{
  font-family:'Geist',sans-serif;
  font-size:.32em;font-weight:300;
  letter-spacing:-.01em;
  vertical-align:super;margin-left:4px;
  opacity:.85;
}
.nxg3-eng-block .nxg3-stat-label{
  font-size:18px;color:var(--eng-text);
  font-weight:400;letter-spacing:-.005em;
  margin-bottom:6px;
}
.nxg3-eng-block .nxg3-stat-meta{
  font-family:'Geist Mono',monospace;
  font-size:11px;color:var(--eng-text-mute);
  letter-spacing:.16em;text-transform:uppercase;
}

/* Act III — Finale (sphere formed) */
.nxg3-eng-block .nxg3-act-finale{
  justify-content:space-between;text-align:center;
  padding-top:90px;padding-bottom:14vh;
}
.nxg3-eng-block .nxg3-finale-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Geist Mono',monospace;
  font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--eng-warm-light);
  padding:8px 16px;
  border:1px solid rgba(255,178,122,.3);
  border-radius:100px;
  background:rgba(255,150,80,.06);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.nxg3-eng-block .nxg3-finale-bottom{
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.nxg3-eng-block .nxg3-finale-headline{
  font-family:'Instrument Serif',serif;
  font-weight:400;
  font-size:clamp(48px,8vw,100px);
  line-height:.98;letter-spacing:-.025em;
  color:var(--eng-text);
}
.nxg3-eng-block .nxg3-finale-headline em{
  font-style:italic;
  background:linear-gradient(135deg,var(--eng-warm-light) 0%,var(--eng-warm-mid) 60%,var(--eng-warm-deep) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.nxg3-eng-block .nxg3-finale-sub{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:21px;color:var(--eng-text-dim);
}

/* ===== Content (after cinematic) ===== */
.nxg3-eng-block .nxg3-eng-content{
  position:relative;z-index:3;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,150,80,.04) 0%, transparent 60%),
    #050507;
}
.nxg3-eng-block .nxg3-eng-content::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity:.05;pointer-events:none;mix-blend-mode:overlay;
}
.nxg3-eng-block .nxg3-eng-container{
  max-width:1280px;margin:0 auto;
  padding:0 32px;
  position:relative;z-index:2;
}

/* Static stats grid */
.nxg3-eng-block .nxg3-stats-section{ padding:140px 0 60px; }
.nxg3-eng-block .nxg3-stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:60px;
  border-top:1px solid var(--eng-border);
  padding-top:64px;
}
@media (max-width:800px){
  .nxg3-eng-block .nxg3-stats-grid{ grid-template-columns:1fr;gap:44px }
}
.nxg3-eng-block .nxg3-stat-cell{ text-align:left;padding-right:24px }
.nxg3-eng-block .nxg3-stats-num{
  font-family:'Instrument Serif',serif;
  font-weight:400;
  font-size:clamp(72px,10vw,130px);
  line-height:.9;letter-spacing:-.04em;
  margin-bottom:18px;
  background:linear-gradient(180deg,#fff 0%,var(--eng-warm-light) 60%,var(--eng-warm-mid) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 40px rgba(255,150,80,.12));
}
.nxg3-eng-block .nxg3-stats-num .nxg3-unit{
  font-family:'Geist',sans-serif;
  font-size:.32em;font-weight:400;letter-spacing:-.01em;
  -webkit-text-fill-color:var(--eng-text-mute);
  color:var(--eng-text-mute);
  margin-left:4px;vertical-align:super;
}
.nxg3-eng-block .nxg3-stats-label{
  font-size:15px;color:var(--eng-text);
  font-weight:500;margin-bottom:6px;letter-spacing:-.005em;
}
.nxg3-eng-block .nxg3-stats-meta{
  font-family:'Geist Mono',monospace;
  font-size:11px;color:var(--eng-text-mute);
  letter-spacing:.12em;text-transform:uppercase;
}

/* Engine benchmark */
.nxg3-eng-block .nxg3-bench{ padding:120px 0 }
.nxg3-eng-block .nxg3-bench-intro{ max-width:720px;margin-bottom:80px; }
.nxg3-eng-block .nxg3-section-eyebrow{
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--eng-text-mute);margin-bottom:18px;
}
.nxg3-eng-block .nxg3-bench h2,
.nxg3-eng-block .nxg3-family h2{
  font-family:'Instrument Serif',serif;
  font-weight:400;
  font-size:clamp(36px,5vw,60px);
  line-height:1.05;letter-spacing:-.02em;
  color:var(--eng-text);margin-bottom:20px;
}
.nxg3-eng-block .nxg3-bench h2 em,
.nxg3-eng-block .nxg3-family h2 em{
  font-style:italic;color:var(--eng-warm-light);
}
.nxg3-eng-block .nxg3-bench-desc,
.nxg3-eng-block .nxg3-family-desc{
  font-size:17px;line-height:1.55;
  color:var(--eng-text-dim);max-width:56ch;font-weight:300;
}
.nxg3-eng-block .nxg3-bench-chart{ display:flex;flex-direction:column;gap:56px; }
.nxg3-eng-block .nxg3-metric-block{
  border-top:1px solid var(--eng-border);padding-top:32px;
}
.nxg3-eng-block .nxg3-metric-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:28px;flex-wrap:wrap;gap:12px;
}
.nxg3-eng-block .nxg3-metric-name{
  font-size:20px;font-weight:500;letter-spacing:-.01em;
}
.nxg3-eng-block .nxg3-metric-context{
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--eng-text-mute);
}
.nxg3-eng-block .nxg3-bars{ display:flex;flex-direction:column;gap:18px; }
.nxg3-eng-block .nxg3-bar-row{
  display:grid;grid-template-columns:90px 1fr 80px;
  align-items:center;gap:24px;
}
@media (max-width:600px){
  .nxg3-eng-block .nxg3-bar-row{ grid-template-columns:70px 1fr 60px;gap:14px }
}
.nxg3-eng-block .nxg3-bar-label{ font-size:14px;color:var(--eng-text);font-weight:500; }
.nxg3-eng-block .nxg3-bar-track{
  height:10px;background:rgba(255,255,255,.04);
  border-radius:100px;overflow:hidden;position:relative;
  border:1px solid var(--eng-border);
}
.nxg3-eng-block .nxg3-bar-fill{
  height:100%;border-radius:100px;width:0;
  position:relative;
  box-shadow:0 0 12px currentColor;
  overflow:hidden;
  transition:width 1.4s cubic-bezier(.2,.8,.2,1);
}
.nxg3-eng-block .nxg3-bar-fill::after{
  content:'';position:absolute;
  top:0;right:0;bottom:0;width:12px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.4));
  border-radius:0 100px 100px 0;
}
.nxg3-eng-block .nxg3-bar-fill::before{
  content:'';position:absolute;
  top:0;left:0;width:100%;height:100%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.25) 50%,transparent 100%);
  animation:eng-shimmer 4s ease-in-out infinite;
  animation-delay:2s;
}
@keyframes eng-shimmer{
  0%,100%{ transform:translateX(-100%) }
  50%    { transform:translateX(100%) }
}
.nxg3-eng-block .nxg3-bar-fill.nxg3-flow{
  background:linear-gradient(90deg,#4a8db8 0%,#b8e7ff 100%);
  color:var(--eng-flow-glow);
}
.nxg3-eng-block .nxg3-bar-fill.nxg3-core{
  background:linear-gradient(90deg,#3f9a7d 0%,#8fe3c8 100%);
  color:var(--eng-core-glow);
}
.nxg3-eng-block .nxg3-bar-fill.nxg3-plus{
  background:linear-gradient(90deg,#6b4fb0 0%,#c9b0ff 100%);
  color:var(--eng-plus-glow);
}
.nxg3-eng-block .nxg3-bar-fill.nxg3-pro{
  background:linear-gradient(90deg,var(--eng-warm-deep) 0%,var(--eng-warm-mid) 50%,var(--eng-warm-light) 100%);
  color:var(--eng-pro-glow);
}
.nxg3-eng-block .nxg3-bar-value{
  font-family:'Geist Mono',monospace;
  font-size:13px;color:var(--eng-text-dim);
  text-align:right;letter-spacing:.04em;
}
.nxg3-eng-block .nxg3-bar-row.nxg3-winner .nxg3-bar-label,
.nxg3-eng-block .nxg3-bar-row.nxg3-winner .nxg3-bar-value{ color:var(--eng-text); }
.nxg3-eng-block .nxg3-bar-row.nxg3-winner.nxg3-pro-win .nxg3-bar-value{ color:var(--eng-warm-light); }
.nxg3-eng-block .nxg3-bar-row.nxg3-winner.nxg3-flow-win .nxg3-bar-value{ color:var(--eng-flow); }
.nxg3-eng-block .nxg3-bar-row:not(.nxg3-winner) .nxg3-bar-label,
.nxg3-eng-block .nxg3-bar-row:not(.nxg3-winner) .nxg3-bar-value{ opacity:.6; }

/* Engine family strip */
.nxg3-eng-block .nxg3-family{
  padding:100px 0;
  border-top:1px solid var(--eng-border);
}
.nxg3-eng-block .nxg3-family-intro{ margin-bottom:70px;max-width:720px; }
.nxg3-eng-block .nxg3-engines-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--eng-border);
  border-radius:18px;overflow:hidden;
  border:1px solid var(--eng-border);
}
@media (max-width:1200px){
  .nxg3-eng-block .nxg3-engines-strip{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:850px){
  .nxg3-eng-block .nxg3-engines-strip{ grid-template-columns:1fr }
}
/* Flagship-Karte: minimal angehobener Untergrund + warmer Saum oben,
   damit Pro sich abhebt, ohne die Reihe optisch zu zerreissen. */
.nxg3-eng-block .nxg3-engine-pill-flagship{
  background:linear-gradient(180deg,rgba(255,140,60,.07),var(--eng-bg-2) 60%);
}
.nxg3-eng-block .nxg3-engine-pill-flagship::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--eng-warm-mid),transparent);
}
.nxg3-eng-block .nxg3-engine-pill{
  background:var(--eng-bg-2);
  padding:36px 32px;
  transition:background .4s ease;
  position:relative;
}
.nxg3-eng-block .nxg3-engine-pill:hover{ background:rgba(255,255,255,.03); }
.nxg3-eng-block .nxg3-engine-pill-head{
  display:flex;align-items:center;gap:14px;
  margin-bottom:18px;
}
.nxg3-eng-block .nxg3-engine-icon{
  width:36px;height:36px;border-radius:50%;
  flex-shrink:0;position:relative;
}
.nxg3-eng-block .nxg3-engine-icon.nxg3-flow{
  background:radial-gradient(circle at 35% 35%,#e8f6ff 0%,var(--eng-flow) 50%,#4a8db8 100%);
  box-shadow:0 0 20px var(--eng-flow-glow),inset 0 1px 1px rgba(255,255,255,.5);
}
.nxg3-eng-block .nxg3-engine-icon.nxg3-core{
  background:radial-gradient(circle at 35% 35%,#e6fff6 0%,var(--eng-core) 50%,#3f9a7d 100%);
  box-shadow:0 0 20px var(--eng-core-glow),inset 0 1px 1px rgba(255,255,255,.5);
}
.nxg3-eng-block .nxg3-engine-icon.nxg3-plus{
  background:radial-gradient(circle at 35% 35%,#f3ecff 0%,var(--eng-plus) 50%,#6b4fb0 100%);
  box-shadow:0 0 20px var(--eng-plus-glow),inset 0 1px 1px rgba(255,255,255,.5);
}
/* Nur das Flagship pulsiert — die Animation markiert die Spitze der Reihe. */
.nxg3-eng-block .nxg3-engine-icon.nxg3-pro{
  background:radial-gradient(circle at 35% 35%,var(--eng-warm-white) 0%,var(--eng-warm-mid) 45%,var(--eng-warm-deep) 100%);
  box-shadow:0 0 24px var(--eng-pro-glow),inset 0 1px 1px rgba(255,255,255,.5);
  animation:eng-pulse-icon 2.6s ease-in-out infinite;
}
@keyframes eng-pulse-icon{
  0%,100%{ box-shadow:0 0 24px var(--eng-pro-glow),inset 0 1px 1px rgba(255,255,255,.5);transform:scale(1) }
  50%    { box-shadow:0 0 40px rgba(255,130,60,.95),inset 0 1px 1px rgba(255,255,255,.5);transform:scale(1.06) }
}
.nxg3-eng-block .nxg3-engine-name{ display:flex;flex-direction:column;gap:2px; }
.nxg3-eng-block .nxg3-engine-name h3{
  font-size:22px;font-weight:500;letter-spacing:-.02em;
}
.nxg3-eng-block .nxg3-engine-name .nxg3-ident{
  font-family:'Geist Mono',monospace;
  font-size:10px;color:var(--eng-text-mute);
  letter-spacing:.14em;text-transform:uppercase;
}
.nxg3-eng-block .nxg3-engine-tagline{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:17px;line-height:1.4;
  color:var(--eng-text-dim);
  margin-bottom:20px;min-height:3em;
}
.nxg3-eng-block .nxg3-engine-tags{ display:flex;flex-wrap:wrap;gap:6px; }
.nxg3-eng-block .nxg3-engine-tag{
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--eng-text-mute);
  padding:4px 9px;
  border:1px solid var(--eng-border);border-radius:4px;
}

/* CTA */
.nxg3-eng-block .nxg3-cta-section{
  padding:100px 0 160px;text-align:center;
  border-top:1px solid var(--eng-border);
}
.nxg3-eng-block .nxg3-cta-block{
  display:inline-flex;flex-direction:column;align-items:center;gap:28px;
}
.nxg3-eng-block .nxg3-cta-line{
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:24px;line-height:1.4;
  color:var(--eng-text-dim);max-width:32ch;
}
.nxg3-eng-block .nxg3-cta-button{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 28px;
  background:linear-gradient(135deg,var(--eng-warm-light) 0%,var(--eng-warm-deep) 100%);
  color:#1a0d00;border:none;border-radius:14px;
  font-family:'Geist',sans-serif;
  font-size:15px;font-weight:500;letter-spacing:-.005em;
  cursor:pointer;
  box-shadow:
    0 0 40px rgba(255,150,80,.3),
    inset 0 1px 0 rgba(255,220,180,.45);
  transition:transform .3s ease,box-shadow .3s ease;
}
.nxg3-eng-block .nxg3-cta-button:hover{
  transform:translateY(-2px);
  box-shadow:
    0 12px 50px rgba(255,150,80,.45),
    inset 0 1px 0 rgba(255,220,180,.55);
}
.nxg3-eng-block .nxg3-cta-button .nxg3-arrow{ transition:transform .3s ease; }
.nxg3-eng-block .nxg3-cta-button:hover .nxg3-arrow{ transform:translateX(4px); }
.nxg3-eng-block .nxg3-cta-foot{
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--eng-text-mute);
}

@media (max-width:700px){
  .nxg3-eng-block .nxg3-eng-container{ padding:0 20px }
  .nxg3-eng-block .nxg3-bench{ padding:80px 0 }
  .nxg3-eng-block .nxg3-family,
  .nxg3-eng-block .nxg3-cta-section{ padding:70px 0 }
  .nxg3-eng-block .nxg3-stat-figure{ font-size:96px }
}

@media (prefers-reduced-motion:reduce){
  .nxg3-eng-block .nxg3-scroll-stage{ height:auto }
  .nxg3-eng-block .nxg3-sticky-stage{ position:relative;height:auto;min-height:100vh;padding:80px 0; }
  .nxg3-eng-block .nxg3-text-act{ position:relative;opacity:1;padding:40px 0; }
  .nxg3-eng-block .nxg3-act-hero{ padding-bottom:40px }
  .nxg3-eng-block .nxg3-act-stat,
  .nxg3-eng-block .nxg3-act-finale{ padding:40px 0 }
  .nxg3-eng-block #webgl-canvas{ display:none }
}