/* =========================================================
   NEXALVO · Look „Aurora“ · WordPress-Fassung · Version 2.0.6
   Automatisch erzeugt aus prototyp/ (build-wordpress.pl). Nicht hier bearbeiten,
   sondern im Prototyp ändern und neu bauen. Farben: Blöcke „FARB-STEUERUNG“.
========================================================= */

/* Elementor: volle Breite für alle Container (Handbuch Schritt 8) */
html body .elementor .e-con.e-parent { padding: 0; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; }
html body .elementor .e-con-boxed > .e-con-inner { width: 100%; max-width: none; }
html body .elementor-section.elementor-section-boxed > .elementor-container { max-width: none; }

/* Die Seite selbst (Theme/Elementor setzen am <body> eigene Schrift und Farbe) */
#nx { display: block; width: 100%; font: 400 16px/normal var(--nx-font); letter-spacing: normal; word-spacing: normal; text-transform: none; text-align: start; text-shadow: none;
  color: var(--nx-weiss); background: var(--nx-schwarz); -webkit-font-smoothing: antialiased; overflow-x: clip; }

/* Angemeldete Redakteure: Kopfzeile unter die schwarze WordPress-Leiste schieben (Besucher sehen die Leiste nicht) */
body.admin-bar #nx .nx-kopf { top: 46px; }
@media (max-width: 782px) { body.admin-bar #nx .nx-kopf { top: 56px; } }

/* Schutz: Grundstile von Theme (z. B. Hello Elementor) und Elementor innerhalb der Seite
   auf Browser-Standard zurücksetzen. Danach gelten exakt dieselben Regeln wie im Prototyp. */
#nx :where(a, button, input, textarea, select, label, form, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd,
  img, figure, em, b, strong, small, s, u, i, time, output, pre, code, nav, header, footer, section, article, details, summary) { all: revert; }

/* ===== NEXALVO – Prototyp 0.1 · 31.10.2026 ===== */

/* Hausschrift Sora (gewählt 01.11.2026): lokal gehostet, SIL Open Font License, eine variable Datei
   für alle Stärken. Zeichen außerhalb der Schrift (→, ✓, ≈) kommen aus der Systemschrift. */
@font-face {
  font-family: "NX Sora";
  src: url("fonts/sora-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/sora-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Look A „Digital Core“ (Standard). Look B „Liquid Light“ überschreibt diese Werte in look-hell.css. */
:root {
  --nx-schwarz: #05070A;   /* Grundfläche */
  --nx-graphit: #11161D;
  --nx-graphit-2: #1A212B;
  --nx-cyan: #22E4FF;      /* Akzent 1 */
  --nx-orange: #FF8A3D;    /* Akzent 2 */
  --nx-chrom: #C9D3DD;     /* Text hell-sekundär */
  --nx-weiss: #F2F6F9;     /* Text */
  --nx-grau: #8D99A6;      /* Text gedämpft */
  /* dieselben Töne als RGB-Tripel für rgba(var(--x), Deckkraft) */
  --a1: 34,228,255;        /* Akzent 1 */
  --a2: 255,138,61;        /* Akzent 2 */
  --a1h: 156,244,255;      /* Akzent 1 hell */
  --a-mitte: #9CF4FF;      /* Mitte der Verläufe */
  --fl: 5,7,10;            /* dunkle Glas-Flächen */
  --fl-tief: 10,15,20;     /* Bildhintergründe */
  --ton: 255,255,255;      /* feine Linien und Flächen */
  --ton-stroke: 201,211,221;
  --sh: 0,0,0;             /* Schatten */
  --tief: 0,0,0;           /* abgedunkelte Flächen */
  --nx-schwarz-rgb: 5,7,10; /* Grundfläche als Tripel (Warp-Sterne im Finale) */
  --akzent3: #FFFFFF;      /* dritter Akzent (Verläufe, Sterne) */
  --akzent3-rgb: 255,255,255;
  --stern: #FFFFFF;        /* Sternfarbe im Portal-Flug */
  --kern-staub: #9FEFFF;   /* 3D-Kern: Sternenstaub */
  --kern-glut: #FFD2A8;    /* 3D-Kern: Glut in der Mitte */
  --nx-font: "NX Sora", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --nx-kopf: 76px;
}
#nx, #nx *, #nx *::before, #nx *::after { box-sizing: border-box; }
#nx [hidden] { display: none !important; } /* sonst überschreiben Klassen wie .nx-btn das hidden-Attribut */
html { background: var(--nx-schwarz); scroll-behavior: smooth; }
body { margin: 0; background: var(--nx-schwarz); color: var(--nx-weiss); font-family: var(--nx-font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
#nx a { color: inherit; text-decoration: none; }
#nx em { font-style: normal; background: linear-gradient(100deg, var(--nx-cyan), var(--a-mitte) 45%, var(--nx-orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#nx .nx-container { width: min(1200px, 100% - 48px); margin: 0 auto; }
#nx.nx-seite { overflow-x: clip; } /* hereinfliegende Elemente nie breiter als der Bildschirm (wie in der WordPress-Fassung) */

/* ---------- Kopf ---------- */
#nx .nx-kopf {
  position: fixed; z-index: 50; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(1200px, 100% - 28px); height: 58px; padding: 0 10px 0 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-radius: 999px; border: 1px solid rgba(var(--ton),.09);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 40px rgba(var(--sh),.35);
}
/* Logo A1 „Knoten-X“: Schrift in Textfarbe, das X mit Verlaufslinie und Knoten (Farben aus den Akzent-Variablen) */
#nx .nx-logo { position: relative; display: inline-flex; align-items: center; font-weight: 650; letter-spacing: .32em; font-size: 15px; line-height: 1; color: var(--nx-weiss); white-space: nowrap; }
#nx .nx-logo-x { width: .86em; height: .86em; margin-right: .32em; overflow: visible; flex: none; }
#nx .nx-logo-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* das X als echter Buchstabe: Suchmaschinen und Kopieren lesen „NEXALVO“, sichtbar ist die Grafik */
#nx .nx-logo-x line { stroke-width: 13; stroke-linecap: round; }
#nx .nx-logo-x line:not(.nx-x-verlauf) { stroke: currentColor; }
#nx .nx-xv-1 { stop-color: var(--nx-cyan); } #nx .nx-xv-2 { stop-color: var(--nx-orange); } #nx .nx-xv-3 { stop-color: var(--akzent3); }

#nx .nx-menu { display: flex; gap: 30px; font-size: 14px; color: var(--nx-grau); }
#nx .nx-menu a { transition: color .25s; }
#nx .nx-menu a:hover { color: var(--nx-weiss); }
#nx .nx-fortschritt { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 2px; }
#nx .nx-fortschritt span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--nx-cyan), var(--nx-orange)); box-shadow: 0 0 12px var(--nx-cyan); }

/* ---------- Buttons ---------- */
#nx .nx-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 28px; border-radius: 999px; font-weight: 600; font-size: 15px;
  color: #001318; background: linear-gradient(135deg, #7FF2FF, var(--nx-cyan) 55%, #12B8D6);
  box-shadow: 0 0 0 1px rgba(var(--a1),.4), 0 10px 40px -8px rgba(var(--a1),.65);
  transition: box-shadow .3s; will-change: transform;
}
#nx .nx-btn:hover { box-shadow: 0 0 0 1px rgba(var(--a1),.7), 0 14px 50px -6px rgba(var(--a1),.9); }
#nx .nx-btn--klein { height: 40px; padding: 0 18px; font-size: 13.5px; }
#nx .nx-btn--glas { color: var(--nx-weiss); background: rgba(var(--ton),.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#nx .nx-btn--glas:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 10px 40px -10px rgba(255,255,255,.25); }

/* ---------- Hero (Szene 1–2) ---------- */
#nx .nx-hero { position: relative; height: 440vh; }
#nx .nx-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, #0B1A24 0%, #070B10 55%, var(--nx-schwarz) 100%); }
#nx .nx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#nx .nx-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 85% 75% at 50% 50%, transparent 55%, rgba(0,0,0,.65) 100%); }

#nx .nx-step { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; }
#nx .nx-step a { pointer-events: auto; }

#nx .nx-s1 { justify-content: flex-end; padding: 0 max(24px, calc((100vw - 1200px) / 2)) 12vh; }
#nx .nx-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-grau); }
#nx .nx-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--nx-cyan); box-shadow: 0 0 10px var(--nx-cyan), 0 0 22px var(--nx-cyan); }
#nx .nx-s1 h1 { margin: 0; max-width: 760px; font-size: clamp(38px, 5.6vw, 82px); line-height: 1.02; letter-spacing: -.035em; font-weight: 650; }
/* Auftritt Hero-Text: per CSS statt Skript, damit der Text sofort im Dokument „sichtbar“ ist (Google-Screenshot, LCP).
   Beginnt fast unsichtbar und unscharf, während sich die Partikel sammeln. */
#nx .nx-s1 > * { animation: nx-auftritt 1.1s cubic-bezier(.22,.8,.24,1) .7s both; }
#nx .nx-s1 > :nth-child(2) { animation-delay: .82s; }
#nx .nx-s1 > :nth-child(3) { animation-delay: .94s; }
#nx .nx-s1 > :nth-child(4) { animation-delay: 1.06s; }
#nx .nx-s1 > :nth-child(5) { animation-delay: 1.18s; }
@keyframes nx-auftritt { from { opacity: .06; transform: translateY(30px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { #nx .nx-s1 > * { animation: none; } }
#nx .nx-claim { margin: 22px 0 0; font-size: clamp(16px, 1.4vw, 20px); color: var(--nx-chrom); letter-spacing: .02em; }
#nx .nx-aktionen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

#nx .nx-s2 { align-items: center; justify-content: center; text-align: center; opacity: 0; }
#nx .nx-gross { margin: 0; font-size: clamp(40px, 7vw, 110px); line-height: 1; letter-spacing: -.04em; font-weight: 650; }
/* Kein -webkit-text-stroke: Sora ist eine variable Schrift mit überlappenden Konturen, der Umriss zeigt sonst innere Linien.
   Stattdessen eine durchscheinende Füllung mit Verlauf (die Füllung deckt die Überlappungen sauber ab). */
#nx .nx-gross span { color: transparent; background: linear-gradient(180deg, rgba(var(--ton-stroke),.5), rgba(var(--ton-stroke),.12)); -webkit-background-clip: text; background-clip: text; }

#nx .nx-s3 { align-items: center; justify-content: center; gap: clamp(22px, 4vh, 44px); padding: calc(var(--nx-kopf) + 20px) 24px 40px; }
#nx .nx-s3-titel { margin: 0; text-align: center; font-size: clamp(28px, 3.6vw, 54px); letter-spacing: -.03em; font-weight: 650; opacity: 0; }
#nx .nx-panels { width: min(1120px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }

/* Liquid-Glass-Karte */
#nx .nx-panel {
  --mx: 50%; --my: 0%;
  position: relative; overflow: hidden; padding: 26px 26px 24px; border-radius: 22px; min-height: 150px;
  background: linear-gradient(140deg, rgba(255,255,255,.085), rgba(255,255,255,.015) 60%);
  border: 1px solid rgba(var(--ton),.1);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -20px 40px -30px rgba(var(--a1),.35), 0 24px 60px -20px rgba(var(--sh),.6);
}
#nx .nx-panel::before { /* Lichtreflex folgt der Maus */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--a1),.16), transparent 45%);
}
#nx .nx-panel::after { /* Glaskante */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,.4), rgba(255,255,255,0) 35%, rgba(var(--a1),.25) 80%, rgba(var(--a2),.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
#nx .nx-s3 .nx-panel { opacity: 0; visibility: hidden; pointer-events: auto; } /* unsichtbar = nicht klickbar, sonst verdecken sie die Hero-Knöpfe */
#nx .nx-nr { font-size: 12px; letter-spacing: .2em; color: var(--nx-cyan); }
#nx .nx-panel h3 { margin: 12px 0 8px; font-size: 21px; letter-spacing: -.01em; font-weight: 620; }
#nx .nx-panel p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--nx-grau); }

#nx .nx-scrollhinweis { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px; border-radius: 20px; border: 1px solid rgba(var(--ton),.25); pointer-events: auto; }
#nx .nx-scrollhinweis span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--nx-cyan); animation: nx-scroll 1.8s infinite; }
@keyframes nx-scroll { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Szene 3: Websites ---------- */
#nx .nx-sz3 { position: relative; height: 460vh; background: linear-gradient(var(--nx-schwarz), var(--nx-schwarz) 20%); }
#nx .nx-sz3-buehne {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(300px, 0.8fr) 1.2fr; align-items: center; gap: 4vw;
  padding: calc(var(--nx-kopf) + 24px) max(24px, calc((100vw - 1240px) / 2)) 40px;
  background:
    radial-gradient(ellipse 50% 60% at 72% 50%, rgba(var(--a1),.08), transparent 70%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 60px 60px;
}
#nx .nx-sz3-text h2 { margin: 0 0 4vh; font-size: clamp(34px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -.035em; font-weight: 650; }
#nx .nx-sz3-steps { position: relative; min-height: 150px; }
#nx .nx-sz3-step { position: absolute; inset: 0 0 auto 0; opacity: 0; }
#nx .nx-sz3-step h3 { margin: 10px 0 8px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 620; }
#nx .nx-sz3-step p { margin: 0; max-width: 420px; color: var(--nx-grau); font-size: 16.5px; line-height: 1.55; }
#nx .nx-sz3-cta { margin-top: 2vh; opacity: 0; }
#nx .nx-sz3-area { position: relative; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 44px; }

/* Gerät (Glasrahmen) – Maße und Variablen setzt nx-device.js */
#nx .nx-dev {
  --rad: 16; --pad: 8; --bar: 1; --menu: 1; --notch: 0; --fT: 3.7; --fB: 1.45; --fS: 1.15;
  position: relative; display: flex; flex-direction: column; container-type: inline-size;
  padding: calc(var(--pad) * 1px); border-radius: calc(var(--rad) * 1px);
  background: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 50%, rgba(var(--a1),.08));
  border: 1px solid rgba(var(--ton),.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 40px 120px -30px rgba(var(--a1),.35), 0 30px 80px -20px rgba(var(--sh),.7);
  will-change: width, height;
}
#nx .nx-dev-bar { flex: none; display: flex; align-items: center; gap: .8cqw; height: calc(var(--bar) * 3.4cqw); opacity: var(--bar); overflow: hidden; padding: 0 1cqw; }
#nx .nx-dev-bar i { width: .9cqw; height: .9cqw; border-radius: 50%; background: rgba(255,255,255,.28); }
#nx .nx-dev-bar span { margin: 0 auto; padding: .35cqw 3cqw; border-radius: 99px; background: rgba(var(--ton),.08); font-size: 1.1cqw; color: var(--nx-grau); }
#nx .nx-dev-screen {
  position: relative; flex: 1; overflow: hidden; container-type: inline-size;
  border-radius: max(4px, calc((var(--rad) - var(--pad)) * 1px));
  background: #F6F4EF; color: #1C2126; font-family: var(--nx-font);
}
#nx .nx-dev-badge { position: absolute; right: 6px; top: -26px; white-space: nowrap; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-grau); }
#nx .nx-dev-notch { position: absolute; top: 1.6%; left: 50%; width: 30%; height: 2.6%; transform: translateX(-50%); border-radius: 99px; background: #0A0D11; opacity: var(--notch); z-index: 5; }
#nx .nx-dev-cursor {
  position: absolute; z-index: 6; width: 3.2cqw; height: 3.2cqw; min-width: 14px; min-height: 14px; opacity: 0; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-7 1.2L8.2 21z' fill='%231C2126' stroke='white' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 4px rgba(var(--sh),.35));
}

/* Mini-Website (Beispiel) */
#nx [data-d] { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); }
#nx .nx-ms-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 5%; background: #fff; border-bottom: 1px solid #E8E4DB; font-size: calc(var(--fS) * 1cqw); }
#nx .nx-ms-nav b { font-size: 1.15em; letter-spacing: -.01em; }
#nx .nx-ms-nav b::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .45em; vertical-align: -.1em; border-radius: 30%; background: linear-gradient(135deg, #2F7D6A, #E8B04B); }
#nx .nx-ms-menu { display: flex; gap: 2.4em; opacity: var(--menu); color: #59616A; }
#nx .nx-ms-menu i { font-style: normal; }
#nx .nx-ms-burger { position: absolute; right: 5%; display: grid; gap: .28em; opacity: calc(1 - var(--menu)); }
#nx .nx-ms-burger i { display: block; width: 1.5em; height: .16em; border-radius: 2px; background: #1C2126; }
#nx .nx-ms-title { font-size: calc(var(--fT) * 1cqw); line-height: 1.04; font-weight: 700; letter-spacing: -.03em; }
#nx .nx-ms-text { font-size: calc(var(--fB) * 1cqw); line-height: 1.45; color: #59616A; overflow: hidden; }
#nx .nx-ms-cta { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 99px; background: #2F7D6A; color: #fff; font-weight: 600; font-size: calc(var(--fB) * 1cqw); }
#nx .nx-ms-ripple { position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1; margin: -20% 0 0 -20%; border-radius: 50%; background: rgba(255,255,255,.6); transform: scale(0); }
#nx .nx-ms-bild { overflow: hidden; border-radius: 1.6cqw; background: linear-gradient(140deg, #1F5C4E, #2F7D6A 45%, #E8B04B); }
#nx .nx-ms-bild i { position: absolute; border-radius: 50%; filter: blur(.4cqw); }
#nx .nx-ms-bild i:nth-child(1) { width: 60%; aspect-ratio: 1; right: -12%; top: -18%; background: radial-gradient(circle, rgba(255,255,255,.55), transparent 65%); }
#nx .nx-ms-bild i:nth-child(2) { width: 46%; aspect-ratio: 1; left: 8%; bottom: -22%; background: radial-gradient(circle, rgba(232,176,75,.9), transparent 65%); }
#nx .nx-ms-bild i:nth-child(3) { width: 26%; aspect-ratio: 1; left: 44%; top: 30%; border-radius: 30%; filter: none; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); transform: rotate(18deg); }
#nx .nx-ms-card, #nx .nx-ms-card2, #nx .nx-ms-card3 {
  display: grid; grid-template-columns: auto 1fr; align-content: center; column-gap: 1em; padding: 0 6%;
  border-radius: 1.4cqw; background: #fff; box-shadow: 0 6px 18px -10px rgba(var(--sh),.25); font-size: calc(var(--fS) * 1cqw);
}
#nx .nx-ms-icon { grid-row: span 2; width: 2.4em; height: 2.4em; border-radius: 30%; background: linear-gradient(135deg, rgba(47,125,106,.18), rgba(232,176,75,.3)); align-self: center; }
#nx .nx-ms-card b, #nx .nx-ms-card2 b, #nx .nx-ms-card3 b { font-size: 1.15em; }
#nx .nx-ms-card small, #nx .nx-ms-card2 small, #nx .nx-ms-card3 small { color: #59616A; font-size: 1em; }

#nx .nx-chips { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; gap: 8px; }
#nx .nx-chip {
  --on: 0;
  padding: 7px 14px; border-radius: 99px; font-size: 12.5px; letter-spacing: .04em; white-space: nowrap;
  color: color-mix(in srgb, var(--nx-cyan) calc(var(--on) * 100%), var(--nx-grau));
  border: 1px solid color-mix(in srgb, var(--nx-cyan) calc(var(--on) * 70%), rgba(var(--ton),.1));
  background: color-mix(in srgb, rgba(var(--a1),.12) calc(var(--on) * 100%), transparent);
}

/* ---------- Szene 4: Business-Tools ---------- */
#nx .nx-sz4 { position: relative; padding: 14vh 0; background: var(--nx-schwarz); }
#nx .nx-sz4-buehne {
  display: grid; grid-template-columns: minmax(280px, .75fr) 1.25fr; gap: 4vw; align-items: center;
  width: min(1240px, 100% - 48px); margin: 0 auto;
}
#nx .nx-sz4--pin { height: 300vh; padding: 0; }
#nx .nx-sz4--pin .nx-sz4-buehne {
  position: sticky; top: 0; height: 100vh; height: 100svh; width: auto; margin: 0;
  padding: calc(var(--nx-kopf) + 20px) max(24px, calc((100vw - 1240px) / 2)) 28px;
  background: radial-gradient(ellipse 45% 55% at 70% 55%, rgba(var(--a2),.07), transparent 70%);
}
#nx .nx-sz4-text h2 { margin: 0 0 18px; font-size: clamp(34px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -.035em; font-weight: 650; }
#nx .nx-sz4-text .nx-text { font-size: 17px; margin: 0 0 18px; }
#nx .nx-sz4-liste { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; color: var(--nx-chrom); font-size: 15.5px; }
#nx .nx-sz4-liste li::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 12px; vertical-align: middle; background: linear-gradient(90deg, var(--nx-cyan), var(--nx-orange)); }
#nx .nx-sz4-hint { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px; border-radius: 99px; font-size: 14px; color: var(--nx-weiss); background: rgba(var(--a1),.08); border: 1px solid rgba(var(--a1),.28); }

#nx .nx-sz4-dash { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#nx .nx-tp { min-height: var(--tp-h, auto); }
#nx .nx-tp-angebot { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 18px; }
#nx .nx-tp-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
#nx .nx-tp-1 { display: grid; }
#nx .nx-tp[hidden] { display: none; }

/* Reiter der Tool-Galerie */
#nx .nx-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 16px; overflow-x: auto; scrollbar-width: none; background: rgba(var(--tief),.35); border: 1px solid rgba(var(--ton),.07); }
#nx .nx-tabs::-webkit-scrollbar { display: none; }
#nx .nx-tabs button {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 9px; border: 0; border-radius: 11px; cursor: pointer;
  background: transparent; color: var(--nx-grau); font: inherit; font-size: 13px; font-weight: 560; letter-spacing: -.01em; white-space: nowrap; transition: background .25s, color .25s;
}
#nx .nx-tabs button small { font-size: 10.5px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
#nx .nx-tabs button:hover { color: var(--nx-weiss); background: rgba(var(--ton),.04); }
#nx .nx-tabs button[aria-selected="true"] { color: var(--nx-weiss); background: linear-gradient(150deg, rgba(var(--a1),.18), rgba(var(--a1),.05)); box-shadow: inset 0 0 0 1px rgba(var(--a1),.45), 0 0 18px -4px rgba(var(--a1),.5); }
#nx .nx-tabs button[aria-selected="true"] small { color: var(--nx-cyan); opacity: 1; }
#nx .nx-tabs .nx-tab-idee small { color: var(--nx-orange); opacity: 1; }
#nx .nx-tabs .nx-tab-idee[aria-selected="true"] { background: linear-gradient(150deg, rgba(var(--a2),.2), rgba(var(--a2),.05)); box-shadow: inset 0 0 0 1px rgba(var(--a2),.5), 0 0 18px -4px rgba(var(--a2),.5); }
#nx .nx-tabs button:focus-visible { outline: 2px solid var(--nx-cyan); outline-offset: 1px; }
#nx .nx-tabs-hinweis { margin: -2px 0 2px; font-size: 12.5px; color: var(--nx-grau); }
#nx .nx-tabs-hinweis::before { content: "↳ "; color: var(--nx-orange); }

/* Kleine Tools */
#nx .nx-klein { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--nx-grau); }
#nx .nx-hinweis { opacity: .8; }
#nx .nx-seg.nx-seg--4 { grid-template-columns: repeat(4, 1fr); }
#nx .nx-e-mitte { display: flex; align-items: center; gap: 16px; margin: 16px 0 14px; }
#nx .nx-ring { width: 92px; height: 92px; flex: none; transform: rotate(-90deg); }
#nx .nx-ring circle { fill: none; stroke-width: 10; stroke: rgba(255,255,255,.08); }
#nx .nx-ring .nx-ring-wert { stroke: var(--nx-cyan); stroke-linecap: round; transition: stroke-dashoffset .5s cubic-bezier(.3,.8,.3,1); filter: drop-shadow(0 0 6px rgba(var(--a1),.6)); }
#nx .nx-e-mitte .nx-stunden { margin-bottom: 0; }
#nx .nx-makro { margin: 14px 0 0; }
#nx .nx-makro-p { background: var(--nx-orange); } #nx .nx-makro-k { background: var(--nx-cyan); } #nx .nx-makro-f { background: var(--nx-chrom); }

#nx .nx-fd { align-content: start; }
#nx .nx-fd-dots { display: flex; gap: 6px; margin-bottom: 22px; }
#nx .nx-fd-dots i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); transition: background .3s, box-shadow .3s; }
#nx .nx-fd-dots i.an { background: var(--nx-cyan); box-shadow: 0 0 10px rgba(var(--a1),.6); }
#nx .nx-fd-frage { margin: 0 0 18px; font-size: clamp(22px, 2vw, 30px); font-weight: 620; letter-spacing: -.02em; }
#nx .nx-fd-opts { display: grid; gap: 10px; }
#nx .nx-fd-opts button { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-radius: 14px; cursor: pointer; text-align: left;
  font: inherit; font-size: 15.5px; color: var(--nx-weiss); background: rgba(var(--ton),.04); border: 1px solid rgba(var(--ton),.1); transition: border-color .25s, background .25s, transform .25s; }
#nx .nx-fd-opts button::after { content: "→"; color: var(--nx-cyan); opacity: 0; transform: translateX(-6px); transition: .25s; }
#nx .nx-fd-opts button:hover { border-color: rgba(var(--a1),.5); background: rgba(var(--a1),.07); transform: translateX(4px); }
#nx .nx-fd-opts button:hover::after { opacity: 1; transform: none; }
#nx .nx-fd-titel { margin: 0; font-size: clamp(26px, 2.6vw, 38px); font-weight: 650; letter-spacing: -.02em; background: linear-gradient(100deg, #fff, var(--nx-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#nx .nx-fd-text { margin: 6px 0 14px; color: var(--nx-chrom); }
#nx .nx-fd-gruende { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#nx .nx-fd-gruende li { padding: 6px 12px; border-radius: 99px; font-size: 13px; background: rgba(var(--ton),.05); border: 1px solid rgba(var(--ton),.1); }
#nx .nx-fd-gruende span { margin-right: 6px; color: var(--nx-grau); }
#nx .nx-fd .nx-aktionen { margin-top: 0; gap: 10px; }
#nx .nx-btn:disabled { opacity: .45; cursor: not-allowed; }

#nx .nx-kal { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; margin-bottom: 14px; }
#nx .nx-kal button { display: grid; gap: 2px; justify-items: center; padding: 7px 0; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600; color: var(--nx-weiss);
  background: rgba(var(--ton),.04); border: 1px solid rgba(var(--ton),.08); cursor: pointer; position: relative; }
#nx .nx-kal button small { font-size: 10px; font-weight: 400; color: var(--nx-grau); }
#nx .nx-kal button:disabled { opacity: .35; cursor: default; }
#nx .nx-kal button[data-tag]::after { content: ""; position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--nx-cyan); box-shadow: 0 0 6px var(--nx-cyan); }
#nx .nx-kal button.an { border-color: rgba(var(--a1),.6); background: rgba(var(--a1),.1); }
#nx .nx-ws-liste { display: grid; gap: 10px; }
#nx .nx-ws { display: grid; grid-template-columns: 1.2fr 1fr auto; grid-template-areas: "t bar akt" "t frei akt" "ok ok ok"; column-gap: 18px; row-gap: 4px; align-items: center;
  padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(var(--ton),.08); }
#nx .nx-ws > div:first-child { grid-area: t; display: grid; gap: 2px; }
#nx .nx-ws > div:first-child small { color: var(--nx-grau); font-size: 12.5px; }
#nx .nx-ws-bar { grid-area: bar; height: 6px; border-radius: 6px; background: rgba(var(--ton),.08); overflow: hidden; }
#nx .nx-ws-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--nx-cyan), var(--nx-orange)); transition: width .45s cubic-bezier(.3,.8,.3,1); }
#nx .nx-ws-frei { grid-area: frei; font-size: 12px; color: var(--nx-grau); }
#nx .nx-ws-aktion { grid-area: akt; display: flex; align-items: center; gap: 10px; }
#nx .nx-ws-anzahl { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 99px; background: rgba(var(--tief),.35); }
#nx .nx-ws-anzahl button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(var(--ton),.08); color: var(--nx-weiss); font-size: 15px; cursor: pointer; }
#nx .nx-ws-anzahl b { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
#nx .nx-ws-ok { grid-area: ok; font-size: 12.5px; color: var(--nx-cyan); }
#nx .nx-ws-ok:empty { display: none; }
#nx .nx-ws--voll { opacity: .6; }
#nx .nx-ws--voll .nx-ws-frei { color: var(--nx-orange); font-weight: 600; }
#nx .nx-ws--voll .nx-ws-anzahl { visibility: hidden; }

#nx .nx-quer { display: grid; place-items: center; height: 170px; margin: 0 0 12px; border-radius: 14px;
  background: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 20px 20px, rgba(0,0,0,.25); }
#nx .nx-quer-form { display: grid; place-items: center; border: 2px solid var(--nx-cyan); background: rgba(var(--a1),.08); box-shadow: 0 0 24px rgba(var(--a1),.3), inset 0 0 20px rgba(var(--a1),.15);
  transition: width .45s cubic-bezier(.3,.8,.3,1), height .45s cubic-bezier(.3,.8,.3,1), border-radius .45s; }
#nx .nx-quer-mass { font-size: 11px; color: var(--nx-cyan); white-space: nowrap; }

#nx .nx-idee { align-content: start; }
#nx .nx-idee-gross { margin: 0 0 18px; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; font-weight: 600; letter-spacing: -.015em; }
#nx .nx-idee-weg { list-style: none; counter-reset: w; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
#nx .nx-idee-weg li { counter-increment: w; position: relative; padding: 14px 12px 12px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(var(--ton),.08); }
#nx .nx-idee-weg li::before { content: "0" counter(w); display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .18em; color: var(--nx-orange); }
#nx .nx-idee-weg b { display: block; font-size: 14.5px; margin-bottom: 4px; }
#nx .nx-idee-weg span { font-size: 12.5px; line-height: 1.4; color: var(--nx-grau); }
#nx .nx-idee-chips { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#nx .nx-idee-chips li { padding: 6px 12px; border-radius: 99px; font-size: 13px; color: var(--nx-chrom); background: rgba(var(--a2),.06); border: 1px solid rgba(var(--a2),.25); }
#nx .nx-idee .nx-aktionen { margin-top: 0; gap: 10px; }

#nx .nx-sz4-doc { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; }
#nx .nx-sz4-doc .nx-pipe { margin: 0; }
#nx .nx-sz4-linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
#nx .nx-sz4-linien path { fill: none; stroke: rgba(var(--a1),.35); stroke-width: 1.5; stroke-dasharray: 400; }
#nx .nx-sz4-linien path.nx-fluss { stroke: var(--nx-cyan); stroke-width: 2.5; stroke-dasharray: 6 60; stroke-linecap: round; animation: nx-fluss 1.6s linear infinite; filter: drop-shadow(0 0 4px var(--nx-cyan)); }
@keyframes nx-fluss { to { stroke-dashoffset: -66; } }
#nx .nx-frag { position: absolute; z-index: 3; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0;
  color: var(--nx-cyan); background: rgba(var(--a1),.08); border: 1px solid rgba(var(--a1),.35); box-shadow: 0 0 18px rgba(var(--a1),.25); }

/* Karten im Dashboard (Glas wie .nx-panel) */
#nx .nx-card {
  position: relative; z-index: 1; padding: 22px; border-radius: 22px;
  background: linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.015) 60%), rgba(var(--fl),.6);
  border: 1px solid rgba(var(--ton),.1);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 70px -30px rgba(var(--sh),.7);
}
#nx .nx-card-kopf { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 18px; font-weight: 620; font-size: 15px; }
#nx .nx-card-kopf small { font-weight: 400; font-size: 12px; color: var(--nx-grau); letter-spacing: .04em; }
#nx .nx-label { display: flex; justify-content: space-between; margin: 16px 0 8px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--nx-grau); }
#nx .nx-label output { color: var(--nx-weiss); font-size: 15px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
#nx .nx-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(var(--tief),.35); border: 1px solid rgba(var(--ton),.06); }
#nx .nx-seg--2 { grid-template-columns: 1fr 1fr; }
#nx .nx-seg button { height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--nx-grau); font: inherit; font-size: 13.5px; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
#nx .nx-seg button:hover { color: var(--nx-weiss); }
#nx .nx-seg button[aria-pressed="true"] { color: #001318; font-weight: 600; background: linear-gradient(135deg, #7FF2FF, var(--nx-cyan)); box-shadow: 0 4px 18px -4px rgba(var(--a1),.6); }
#nx .nx-seg button:focus-visible, #nx .nx-range:focus-visible, #nx .nx-switch input:focus-visible + .nx-switch-knopf { outline: 2px solid var(--nx-cyan); outline-offset: 2px; }

#nx .nx-range { --fill: 4%; width: 100%; height: 28px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
#nx .nx-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--nx-cyan), var(--nx-orange)) 0 0 / var(--fill) 100% no-repeat, rgba(255,255,255,.1); }
#nx .nx-range::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--nx-cyan), var(--nx-orange)) 0 0 / var(--fill) 100% no-repeat, rgba(255,255,255,.1); }
#nx .nx-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(var(--a1),.3), 0 0 18px rgba(var(--a1),.7); }
#nx .nx-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(var(--a1),.3), 0 0 18px rgba(var(--a1),.7); }

#nx .nx-switch { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 14.5px; color: var(--nx-chrom); cursor: pointer; }
#nx .nx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#nx .nx-switch-knopf { position: relative; width: 44px; height: 26px; flex: none; border-radius: 99px; background: rgba(255,255,255,.12); transition: background .25s; }
#nx .nx-switch-knopf::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
#nx .nx-switch input:checked + .nx-switch-knopf { background: var(--nx-orange); box-shadow: 0 0 16px rgba(var(--a2),.5); }
#nx .nx-switch input:checked + .nx-switch-knopf::after { transform: translateX(18px); }

#nx .nx-brutto { margin: 0; font-size: clamp(34px, 3.4vw, 50px); font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #fff, var(--nx-cyan) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#nx .nx-stunden { margin: 2px 0 16px; font-size: 13.5px; color: var(--nx-grau); }
#nx .nx-mix { display: flex; height: 8px; border-radius: 8px; overflow: hidden; background: rgba(var(--ton),.06); margin-bottom: 14px; }
#nx .nx-mix span { height: 100%; transition: width .45s cubic-bezier(.3,.8,.3,1); }
#nx .nx-mix-mat, #nx .nx-dot--mat { background: var(--nx-cyan); }
#nx .nx-mix-arb, #nx .nx-dot--arb { background: var(--nx-orange); }
#nx .nx-mix-sonst, #nx .nx-dot--sonst { background: var(--nx-chrom); }
#nx .nx-zeilen { margin: 0; display: grid; gap: 7px; font-size: 14px; }
#nx .nx-zeilen div { display: flex; justify-content: space-between; transition: opacity .3s; }
#nx .nx-zeilen dt { color: var(--nx-grau); }
#nx .nx-zeilen dd { margin: 0; font-variant-numeric: tabular-nums; }
#nx .nx-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; }
#nx .nx-zeile-summe { padding-top: 8px; margin-top: 4px; border-top: 1px solid rgba(var(--ton),.1); }
#nx .nx-zeile-summe dt { color: var(--nx-weiss); }
#nx .nx-zeilen .nx-aus { opacity: .25; }

#nx .nx-pipe { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: s; font-size: 12px; color: var(--nx-grau); }
#nx .nx-pipe li { --on: 0; position: relative; padding-top: 22px; text-align: center; color: color-mix(in srgb, var(--nx-weiss) calc(var(--on) * 100%), var(--nx-grau)); }
#nx .nx-pipe li::before { content: ""; position: absolute; top: 4px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; z-index: 1;
  background: color-mix(in srgb, var(--nx-cyan) calc(var(--on) * 100%), #2A333D); box-shadow: 0 0 calc(var(--on) * 14px) var(--nx-cyan); }
#nx .nx-pipe li + li::after { content: ""; position: absolute; top: 9px; right: 50%; width: 100%; height: 2px; background: linear-gradient(90deg, var(--nx-cyan) calc(var(--on) * 100%), rgba(255,255,255,.1) 0); }
#nx .nx-doc-zeile { display: flex; gap: 18px; align-items: center; }
#nx .nx-papier { flex: none; width: 104px; height: 140px; padding: 0 0 8px; border-radius: 6px; overflow: hidden; background: #fff; color: #1C2126; font-size: 7px; line-height: 1.3; box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); transform: rotate(-3deg); }
#nx .nx-papier-kopf { padding: 9px 8px 7px; margin-bottom: 6px; background: var(--nx-schwarz); border-bottom: 2px solid var(--nx-cyan); color: #fff; font-weight: 700; font-size: 10px; }
#nx .nx-papier p { display: flex; justify-content: space-between; margin: 0 8px 4px; font-variant-numeric: tabular-nums; }
#nx .nx-papier [data-mini-titel] { font-weight: 600; margin-bottom: 7px; }
#nx .nx-papier-summe { padding-top: 4px; border-top: 1px solid #1C2126; font-weight: 700; }
#nx .nx-doc-titel { margin: 0; font-weight: 620; }
#nx .nx-doc-info { margin: 2px 0 12px; font-size: 13px; color: var(--nx-grau); }
#nx .nx-pdf-status { margin: 10px 0 0; font-size: 12px; color: var(--nx-grau); }

/* ---------- Szene 5: Automation ---------- */
#nx .nx-sz5 { position: relative; padding: 14vh 0; background: linear-gradient(var(--nx-schwarz), var(--nx-schwarz)); }
#nx .nx-sz5-buehne { width: min(1240px, 100% - 48px); margin: 0 auto; display: grid; grid-template-rows: auto 1fr; gap: 4vh; }
#nx .nx-sz5--pin { height: 360vh; padding: 0; }
#nx .nx-sz5--pin .nx-sz5-buehne {
  position: sticky; top: 0; height: 100vh; height: 100svh; width: auto; margin: 0;
  padding: calc(var(--nx-kopf) + 22px) max(24px, calc((100vw - 1240px) / 2)) 4vh;
  background: radial-gradient(ellipse 60% 50% at 55% 70%, rgba(var(--a1),.06), transparent 70%);
}
#nx .nx-sz5-kopf { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4vw; align-items: end; }
#nx .nx-sz5-kopf > *, #nx .nx-sz5-buehne > * { min-width: 0; } /* lange Protokollzeilen dürfen die Spalte nicht verbreitern */
#nx .nx-flow-text h2 { margin: 0 0 14px; font-size: clamp(32px, 3.6vw, 54px); line-height: 1.05; letter-spacing: -.035em; font-weight: 650; }
#nx .nx-flow-text .nx-text { margin: 0 0 18px; font-size: 16.5px; max-width: 560px; }
#nx .nx-flow-uhr { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 16px; max-width: 420px; }
#nx .nx-flow-uhr span { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--nx-grau); }
#nx .nx-flow-zeit { justify-self: end; font-size: 26px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--nx-weiss); }
#nx .nx-flow-balken { grid-column: 1 / -1; height: 6px; margin: 8px 0 6px; border-radius: 6px; background: rgba(var(--ton),.08); overflow: hidden; }
#nx .nx-flow-balken span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--nx-orange), #FFB27A); box-shadow: 0 0 12px rgba(var(--a2),.6); }
#nx .nx-flow-uhr small { grid-column: 1 / -1; font-size: 11.5px; color: var(--nx-grau); }
/* Handy/Tablet (Szene läuft ohne Festpinnen mit): Zeitanzeige als Glasleiste unter der Kopfzeile mitführen,
   bis der Ablauf endet. „display: contents“ hebt die Zwischenhüllen auf, damit „sticky“ über die ganze Bühne wirkt. */
@media (max-width: 900px), (max-height: 599px) {
  #nx .nx-sz5-buehne { display: block; }
  #nx .nx-sz5-kopf, #nx .nx-flow-text { display: contents; }
  #nx .nx-flow-uhr { position: sticky; top: 76px; z-index: 6; max-width: none; margin: 0 0 20px; padding: 10px 14px 8px; border-radius: 16px;
    border: 1px solid rgba(var(--ton),.1); background: rgba(var(--fl),.84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px -18px rgba(var(--sh),.55); }
  #nx .nx-log { margin-bottom: 4vh; }
}

#nx .nx-log {
  list-style: none; margin: 0; padding: 16px 18px; border-radius: 16px; min-height: 196px;
  font: 12.5px/1.75 Consolas, "Cascadia Mono", "SF Mono", monospace; color: var(--nx-chrom);
  background: rgba(var(--fl),.7); border: 1px solid rgba(var(--ton),.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#nx .nx-log li { opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1024px) { #nx .nx-log li { white-space: normal; } } /* Tablet/Handy: Zeilen umbrechen statt „…“ */
#nx .nx-log time { margin-right: 12px; color: var(--nx-cyan); }
#nx .nx-log li:last-child { color: #FFC59A; }

#nx .nx-flow-graph {
  --richtung: h; --merge: 0;
  position: relative; align-self: center;
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, auto); column-gap: clamp(36px, 6vw, 100px); row-gap: 16px; align-items: center;
}
#nx .nx-flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
#nx .nx-e-base { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 1.5; stroke-dasharray: 3 5; }
#nx .nx-e-glow { fill: none; stroke: var(--nx-cyan); stroke-width: calc(2px + var(--merge) * 1.5px); stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 calc(4px + var(--merge) * 6px) rgba(var(--a1),.9)); }
#nx .nx-e-dot { fill: #fff; opacity: 0; filter: drop-shadow(0 0 6px var(--nx-cyan)); }

#nx .nx-node {
  --on: 0;
  position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.015)), rgba(var(--fl),.85);
  border: 1px solid color-mix(in srgb, var(--nx-cyan) calc(var(--on) * 60%), rgba(var(--ton),.1));
  box-shadow: 0 0 calc(var(--on) * 28px + var(--merge) * 12px) color-mix(in srgb, rgba(var(--a1),.45) calc(var(--on) * 100%), transparent), inset 0 1px 0 rgba(255,255,255,.1);
}
#nx .nx-node svg { grid-row: span 2; width: 28px; height: 28px; fill: none; stroke: color-mix(in srgb, var(--nx-cyan) calc(var(--on) * 100%), var(--nx-grau)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#nx .nx-node b { font-size: 15px; font-weight: 620; color: color-mix(in srgb, var(--nx-weiss) calc(50% + var(--on) * 50%), transparent); }
#nx .nx-node-st { position: relative; height: 16px; font-size: 12px; }
#nx .nx-node-st i { position: absolute; left: 0; top: 0; font-style: normal; white-space: nowrap; }
#nx .nx-node-st i:first-child { color: var(--nx-grau); opacity: calc(1 - var(--on)); }
#nx .nx-node-st i:last-child { color: var(--nx-cyan); opacity: var(--on); }
#nx .nx-node-st i:last-child::before { content: "✓ "; }
#nx .nx-node--ziel { border-color: color-mix(in srgb, var(--nx-orange) calc(var(--on) * 80%), rgba(var(--ton),.1)); box-shadow: 0 0 calc(var(--on) * 36px) color-mix(in srgb, rgba(var(--a2),.5) calc(var(--on) * 100%), transparent); }
#nx .nx-node--ziel svg { stroke: color-mix(in srgb, var(--nx-orange) calc(var(--on) * 100%), var(--nx-grau)); }
#nx .nx-node--ziel .nx-node-st i:last-child { color: var(--nx-orange); }

#nx .nx-flow-graph [data-node="a"] { grid-column: 1; grid-row: 2; }
#nx .nx-flow-graph [data-node="k"] { grid-column: 2; grid-row: 2; }
#nx .nx-flow-graph [data-node="p"] { grid-column: 3; grid-row: 2; }
#nx .nx-flow-graph [data-node="m"] { grid-column: 4; grid-row: 1; }
#nx .nx-flow-graph [data-node="t"] { grid-column: 4; grid-row: 2; }
#nx .nx-flow-graph [data-node="c"] { grid-column: 4; grid-row: 3; }
#nx .nx-flow-graph [data-node="o"] { grid-column: 5; grid-row: 2; }
#nx .nx-flow-fertig {
  position: absolute; left: 50%; bottom: -54px; transform: translateX(-50%); opacity: 0; margin: 0; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 99px; font-size: 14.5px; font-weight: 600;
  background: rgba(var(--a2),.1); border: 1px solid rgba(var(--a2),.4); color: #FFD2A8; box-shadow: 0 0 30px rgba(var(--a2),.25);
}
#nx .nx-flow-fertig .nx-punkt { background: var(--nx-orange); box-shadow: 0 0 10px var(--nx-orange); }

/* ---------- Szene 6: Relaunch ---------- */
#nx .nx-sz6 { position: relative; padding: 14vh 0; background: var(--nx-schwarz); }
#nx .nx-sz6-buehne { width: min(1240px, 100% - 48px); margin: 0 auto; display: grid; grid-template-columns: minmax(280px, .72fr) 1.28fr; gap: 4vw; align-items: center; }
#nx .nx-sz6-buehne > * { min-width: 0; }
#nx .nx-sz6--pin { height: 350vh; padding: 0; }
#nx .nx-sz6--pin .nx-sz6-buehne {
  position: sticky; top: 0; height: 100vh; height: 100svh; width: auto; margin: 0;
  padding: calc(var(--nx-kopf) + 20px) max(24px, calc((100vw - 1240px) / 2)) 30px;
  background: radial-gradient(ellipse 50% 60% at 68% 50%, rgba(var(--a1),.07), transparent 70%);
}
#nx .nx-cmp-text { container-type: inline-size; } /* Überschrift richtet sich nach der Spaltenbreite, „außergewöhnlich.“ passt immer */
#nx .nx-cmp-text h2 { margin: 0 0 16px; font-size: min(clamp(34px, 4.2vw, 62px), 10.8cqi); overflow-wrap: break-word; line-height: 1.04; letter-spacing: -.035em; font-weight: 650; }
#nx .nx-cmp-text .nx-text { font-size: 16.5px; margin: 0 0 22px; }
#nx .nx-cmp-werte { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#nx .nx-cmp-werte li { display: grid; grid-template-columns: 110px auto 1fr; align-items: baseline; gap: 12px; padding: 10px 14px; border-radius: 12px; font-size: 14px; background: rgba(var(--ton),.03); border: 1px solid rgba(var(--ton),.07); }
#nx .nx-cmp-werte span { color: var(--nx-grau); font-size: 12.5px; }
#nx .nx-cmp-werte s { color: #8A6F6F; text-decoration-color: rgba(255,120,120,.6); }
#nx .nx-cmp-werte b { color: var(--nx-cyan); font-weight: 600; }
#nx .nx-cmp-werte b::before { content: "→ "; color: var(--nx-grau); font-weight: 400; }

#nx .nx-cmp-rahmen {
  position: relative; display: flex; flex-direction: column; width: min(100%, 860px); justify-self: center; container-type: inline-size;
  padding: 8px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 50%, rgba(var(--a1),.08)); border: 1px solid rgba(var(--ton),.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 40px 120px -30px rgba(var(--a1),.35), 0 30px 80px -20px rgba(var(--sh),.7);
}
#nx .nx-cmp-bar { --bar: 1; }
#nx .nx-cmp-screen {
  --pos: 100;
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; perspective: 900px; container-type: inline-size;
  touch-action: pan-y; user-select: none; background: var(--nx-schwarz);
}
#nx .nx-cmp--bereit .nx-cmp-screen { cursor: ew-resize; }
#nx .nx-neu, #nx .nx-alt, #nx .nx-kachel { position: absolute; inset: 0; }
#nx .nx-alt { clip-path: inset(0 calc(100% - var(--pos) * 1%) 0 0); }
#nx .nx-kacheln { position: absolute; inset: 0; visibility: hidden; opacity: 0; transform-style: preserve-3d; }
#nx .nx-deko-t::before { content: attr(data-t); } /* Text der Deko-Kacheln (siehe nx-compare.js) */
#nx .nx-kachel .nx-alt { clip-path: none; }
#nx .nx-kachel { will-change: transform, opacity; }

/* Alte Beispielseite (bewusst von gestern) */
#nx .nx-alt { background: #D4D0C8; color: #000; font-family: "Times New Roman", Times, serif; font-size: 1.6cqw; }
#nx .nx-alt-kopf { padding: 2.2cqw 3cqw; background: linear-gradient(#1B3F94, #0A246A); color: #FFFF66; border-bottom: .4cqw ridge #888; }
#nx .nx-alt-kopf b { display: block; font-size: 3.6cqw; letter-spacing: .1em; font-family: Arial Black, Arial, sans-serif; text-shadow: .25cqw .25cqw 0 #000; }
#nx .nx-alt-kopf small { font-size: 1.6cqw; font-style: italic; color: #fff; }
#nx .nx-alt-body { display: grid; grid-template-columns: 20% 1fr; gap: 1.5cqw; padding: 1.5cqw; }
#nx .nx-alt-menu { display: grid; gap: .8cqw; align-content: start; }
#nx .nx-alt-menu u { display: block; padding: .6cqw 1cqw; color: #0000EE; background: #ECE9D8; border: .25cqw outset #fff; font-size: 1.5cqw; }
#nx .nx-alt-inhalt { padding: 1.5cqw 2cqw; background: #fff; border: .25cqw inset #999; }
#nx .nx-alt-inhalt p { margin: 0 0 1.2cqw; }
#nx .nx-alt-h1 { font-size: 2.8cqw; color: #CC0000; font-weight: bold; text-align: center; text-decoration: underline; }
#nx .nx-alt-baustelle { margin: 1.5cqw 0; padding: 1.2cqw; text-align: center; font-weight: bold; font-family: Arial, sans-serif; font-size: 1.6cqw;
  background: repeating-linear-gradient(45deg, #FFD700 0 1.4cqw, #000 1.4cqw 2.8cqw); color: #fff; text-shadow: 0 0 .4cqw #000, 0 0 .4cqw #000; }
#nx .nx-alt-tel { font-size: 2cqw; font-weight: bold; color: #006600; }
#nx .nx-alt-fuss { font-size: 1.2cqw; color: #555; text-align: center; }
#nx .nx-alt-fuss span { font-family: "Courier New", monospace; background: #000; color: #0F0; padding: 0 .4cqw; }

/* Neue Beispielseite */
#nx .nx-neu { display: grid; grid-template-rows: auto 1fr auto; background: #F4F1EA; color: #14181D; font-family: var(--nx-font); font-size: 1.4cqw; visibility: hidden; }
#nx .nx-neu-nav { display: flex; align-items: center; gap: 3cqw; padding: 1.8cqw 4cqw; }
#nx .nx-neu-nav b { font-size: 1.7cqw; letter-spacing: -.01em; margin-right: auto; }
#nx .nx-neu-nav b::before { content: ""; display: inline-block; width: 1.5cqw; height: 1.5cqw; margin-right: .7cqw; vertical-align: -.25cqw; border-radius: .4cqw; background: linear-gradient(135deg, #0E6E8C, #FF8A3D); }
#nx .nx-neu-nav span { display: flex; gap: 2.6cqw; color: #59616A; }
#nx .nx-neu-nav i, #nx .nx-neu-btns i { font-style: normal; }
#nx .nx-neu-nav em { font-style: normal; padding: .8cqw 2cqw; border-radius: 99px; background: #14181D; color: #fff; font-weight: 600; }
#nx .nx-neu-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3cqw; align-items: center; padding: 1cqw 4cqw; }
#nx .nx-neu-hero small { display: inline-block; margin-bottom: 1.2cqw; padding: .5cqw 1.2cqw; border-radius: 99px; background: rgba(14,110,140,.1); color: #0E6E8C; font-size: 1.15cqw; font-weight: 600; }
#nx .nx-neu-h1 { margin: 0 0 1.4cqw; font-size: 4.6cqw; line-height: 1.02; font-weight: 750; letter-spacing: -.035em; }
#nx .nx-neu-h1 span { display: block; color: #0E6E8C; }
#nx .nx-neu-p { margin: 0 0 2cqw; color: #59616A; line-height: 1.5; }
#nx .nx-neu-btns { display: flex; gap: 1.2cqw; }
#nx .nx-neu-btns em { font-style: normal; padding: 1.1cqw 2.2cqw; border-radius: 99px; background: #0E6E8C; color: #fff; font-weight: 600; box-shadow: 0 1cqw 2.5cqw -1cqw rgba(14,110,140,.7); }
#nx .nx-neu-btns i { padding: 1.1cqw 2.2cqw; border-radius: 99px; border: 1px solid #C9C3B6; }
#nx .nx-neu-bild { position: relative; aspect-ratio: 4 / 3.4; border-radius: 2.4cqw; overflow: hidden; background: linear-gradient(150deg, #0B4F66, #0E6E8C 45%, #FF8A3D); box-shadow: 0 3cqw 5cqw -2.5cqw rgba(0,0,0,.4); }
#nx .nx-neu-bild i { position: absolute; border-radius: 50%; }
#nx .nx-neu-bild i:first-child { width: 70%; aspect-ratio: 1; right: -15%; top: -20%; background: radial-gradient(circle, rgba(255,255,255,.5), transparent 65%); }
#nx .nx-neu-bild i:last-child { width: 38%; aspect-ratio: 1; left: 18%; bottom: 14%; border-radius: 28%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.45); transform: rotate(-14deg); backdrop-filter: blur(4px); }
#nx .nx-neu-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; padding: 1.5cqw 4cqw 2.6cqw; }
#nx .nx-neu-karten div { display: grid; gap: .3cqw; padding: 1.4cqw 1.8cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 .8cqw 2cqw -1.2cqw rgba(0,0,0,.25); }
#nx .nx-neu-karten b { font-size: 1.5cqw; }
#nx .nx-neu-karten small { color: #59616A; font-size: 1.15cqw; }

/* Lichttunnel */
#nx .nx-tunnel { position: absolute; inset: 0; display: grid; place-items: center; visibility: hidden; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(var(--a1),.25), rgba(var(--fl),.9) 45%, var(--nx-schwarz) 75%); }
#nx .nx-tunnel i { position: absolute; width: 40cqw; aspect-ratio: 1; border-radius: 50%; border: .5cqw solid var(--nx-cyan); box-shadow: 0 0 3cqw rgba(var(--a1),.8), inset 0 0 3cqw rgba(var(--a1),.6); opacity: 0; }
#nx .nx-tunnel i:nth-child(even) { border-color: var(--a-mitte); border-radius: 30%; }
#nx .nx-tunnel i:nth-child(3n) { border-color: var(--nx-orange); box-shadow: 0 0 3cqw rgba(var(--a2),.8); }

/* Regler */
#nx .nx-cmp-griff { position: absolute; top: 0; bottom: 0; left: calc(var(--pos) * 1%); width: 44px; margin-left: -22px; z-index: 4; visibility: hidden; opacity: 0; cursor: ew-resize; touch-action: none; }
#nx .nx-cmp-griff::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(var(--a1),.9), 0 0 2px #000; }
#nx .nx-cmp-griff span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: rgba(255,255,255,.18); border: 2px solid #fff; backdrop-filter: blur(8px); box-shadow: 0 0 20px rgba(var(--a1),.7); }
#nx .nx-cmp-griff span::before, #nx .nx-cmp-griff span::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
#nx .nx-cmp-griff span::before { left: 4px; border-right-color: #fff; }
#nx .nx-cmp-griff span::after { right: 4px; border-left-color: #fff; }
#nx .nx-cmp-griff:focus-visible span { outline: 2px solid var(--nx-cyan); outline-offset: 3px; }
#nx .nx-cmp-label { position: absolute; top: 12px; z-index: 3; padding: 5px 12px; border-radius: 99px; font: 600 11.5px/1.2 var(--nx-font); letter-spacing: .12em; text-transform: uppercase; opacity: 0; pointer-events: none; }
#nx .nx-cmp-label--alt, #nx .nx-cmp-label--alt2 { left: 12px; background: rgba(var(--tief),.65); color: #fff; }
#nx .nx-cmp-label--neu { right: 12px; background: rgba(14,110,140,.9); color: #fff; }
/* Schilder blenden aus, wenn ihre Seite fast ganz verdeckt ist (--a: Einblendung durch die Regie) */
#nx .nx-cmp-label--alt2 { --a: 0; opacity: calc(var(--a) * clamp(0, (var(--pos) - 12) / 10, 1)); }
#nx .nx-cmp-label--neu { --a: 0; opacity: calc(var(--a) * clamp(0, (88 - var(--pos)) / 10, 1)); }
#nx .nx-cmp-hinweis { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); margin: 0; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 8px 16px; border-radius: 99px; font-size: 13.5px; background: rgba(var(--a1),.08); border: 1px solid rgba(var(--a1),.28); visibility: hidden; opacity: 0; }

/* ---------- Szene 7: Referenzen ---------- */
#nx .nx-sz7 { position: relative; padding: 14vh 0; background: linear-gradient(var(--nx-schwarz), var(--nx-schwarz) 40%, var(--nx-schwarz)); }
#nx .nx-sz7-buehne { width: min(1240px, 100% - 48px); margin: 0 auto; display: grid; justify-items: center; gap: 4vh; }
#nx .nx-sz7-buehne > * { min-width: 0; }
#nx .nx-sz7--pin { height: 270vh; padding: 0; }
#nx .nx-sz7--pin .nx-sz7-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; width: auto; margin: 0; align-content: center; padding: calc(var(--nx-kopf) + 16px) max(24px, calc((100vw - 1240px) / 2)) 30px; overflow: hidden; }
#nx .nx-refs-text { text-align: center; }
#nx .nx-refs-text h2 { margin: 0 0 12px; font-size: clamp(34px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -.035em; font-weight: 650; }
#nx .nx-refs-text .nx-text { margin: 0 auto; }

#nx .nx-refs-raum {
  --licht: 0;
  position: relative; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px);
  perspective: 1600px; perspective-origin: 50% 30%; transform-style: preserve-3d;
}
#nx .nx-refs-raum::before { /* Boden-Raster mit Lichtschein: der „digitale Raum“ */
  content: ""; position: absolute; left: -20%; right: -20%; top: 55%; height: 120%; z-index: -1; pointer-events: none;
  transform: rotateX(72deg); transform-origin: 50% 0; opacity: calc(var(--licht) * .9);
  background: linear-gradient(rgba(var(--a1),.18) 1px, transparent 1px) 0 0 / 70px 70px, linear-gradient(90deg, rgba(var(--a1),.18) 1px, transparent 1px) 0 0 / 70px 70px;
  -webkit-mask: radial-gradient(ellipse 60% 70% at 50% 0%, #000, transparent 75%); mask: radial-gradient(ellipse 60% 70% at 50% 0%, #000, transparent 75%);
}
#nx .nx-refs-raum::after { content: ""; position: absolute; inset: -10% 10% 20%; z-index: -2; pointer-events: none; opacity: var(--licht);
  background: radial-gradient(ellipse at 50% 60%, rgba(var(--a1),.16), transparent 65%); filter: blur(20px); }

#nx .nx-ref {
  --mx: 50%; --my: 0%;
  position: relative; display: flex; flex-direction: column; overflow: hidden; cursor: pointer; border-radius: 18px; transform-style: preserve-3d; will-change: transform;
  background: linear-gradient(150deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 55%), rgba(var(--fl),.85);
  border: 1px solid rgba(var(--ton),.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 40px 80px -40px rgba(var(--sh),.9);
  transition: border-color .3s, box-shadow .3s;
}
#nx .nx-ref::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: radial-gradient(500px circle at var(--mx) var(--my), rgba(var(--a1),.14), transparent 45%); }
#nx .nx-ref:hover, #nx .nx-ref:focus-visible { border-color: rgba(var(--a1),.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 40px 90px -30px rgba(var(--a1),.45); outline: none; }
#nx .nx-ref:hover::after, #nx .nx-ref:focus-visible::after { opacity: 1; }
#nx .nx-ref-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; flex: none; }
#nx .nx-ref-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); }
#nx .nx-ref-bar span { margin: 0 auto; padding: 2px 12px; border-radius: 99px; background: rgba(var(--ton),.07); font-size: 11px; color: var(--nx-grau); }
#nx .nx-ref-bild { position: relative; aspect-ratio: 16 / 9; margin: 0 8px; border-radius: 10px; overflow: hidden; background: rgb(var(--fl-tief)); }
#nx .nx-ref-bild img, #nx .nx-ref-bild canvas { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.3,.8,.3,1), opacity .5s; }
/* Zeichenfläche liegt über dem Vorschaubild und erscheint erst, wenn alle Bilder fertig geladen sind */
#nx .nx-ref-bild canvas, #nx .nx-ref-gross canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: transform .6s cubic-bezier(.3,.8,.3,1), opacity .5s; }
#nx .nx-ref--bereit canvas { opacity: 1; }
#nx .nx-ref:hover .nx-ref-bild :is(img, canvas) { transform: scale(1.04); }
/* Platzhalter für den Einflug; das Fenster darin neigt sich mit der Maus */
#nx .nx-ref-platz { display: flex; min-width: 0; }
#nx .nx-ref-platz > .nx-ref { flex: 1; min-width: 0; }
#nx .nx-ref-badge, #nx .nx-ref-live { position: absolute; top: 10px; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: .04em; backdrop-filter: blur(8px); }
#nx .nx-ref-badge { left: 10px; background: rgba(var(--fl),.7); color: var(--nx-weiss); border: 1px solid rgba(var(--ton),.15); }
#nx .nx-ref-live { right: 10px; background: rgba(var(--a1),.15); color: var(--nx-cyan); border: 1px solid rgba(var(--a1),.4); }
#nx .nx-ref-live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; vertical-align: 1px; }
#nx .nx-ref-live--bald { background: rgba(var(--a2),.15); color: #FFB27A; border-color: rgba(var(--a2),.4); }
#nx .nx-ref-info { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
#nx .nx-ref-info small { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--nx-cyan); }
#nx .nx-ref-info h3 { margin: 0; font-size: clamp(17px, 1.4vw, 21px); font-weight: 640; letter-spacing: -.01em; }
#nx .nx-ref-info p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--nx-grau); }
#nx .nx-ref-tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#nx .nx-ref-tags li { padding: 3px 9px; border-radius: 99px; font-size: 11.5px; color: var(--nx-chrom); background: rgba(var(--ton),.05); border: 1px solid rgba(var(--ton),.09); }
#nx .nx-ref-mehr { margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--nx-weiss); }
#nx .nx-ref-mehr b { display: inline-block; color: var(--nx-cyan); transition: transform .3s; }
#nx .nx-ref:hover .nx-ref-mehr b { transform: translateX(5px); }
#nx .nx-refs-hinweis { margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 99px; font-size: 13.5px; background: rgba(var(--a1),.08); border: 1px solid rgba(var(--a1),.28); }
#nx .nx-nur-touch { display: none; }
@media (pointer: coarse) { #nx .nx-nur-maus { display: none; } #nx .nx-nur-touch { display: inline; } }

/* Große Ansicht */
html.nx-gesperrt { overflow: hidden; }
#nx .nx-ref-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(var(--fl),.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#nx .nx-ref-overlay[hidden] { display: none; }
#nx .nx-ref-panel {
  position: relative; width: min(1120px, 100%); max-height: calc(100svh - 48px); overflow: auto; transform-origin: 0 0; border-radius: 22px;
  background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 50%), rgb(var(--fl)); border: 1px solid rgba(var(--ton),.14);
  box-shadow: 0 60px 140px -40px rgba(var(--sh),.9), 0 0 0 1px rgba(var(--a1),.12);
}
#nx .nx-ref-zu { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(var(--ton),.2); background: rgba(var(--fl),.7);
  color: var(--nx-weiss); font-size: 22px; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); }
#nx .nx-ref-zu:hover { border-color: var(--nx-cyan); color: var(--nx-cyan); }
#nx .nx-ref-zu:focus-visible { outline: 2px solid var(--nx-cyan); outline-offset: 2px; }
#nx .nx-ref-inhalt { display: grid; grid-template-columns: 1.15fr 1fr; }
#nx .nx-ref-gross { position: relative; min-height: 100%; background: rgb(var(--fl-tief)); }
#nx .nx-ref-gross img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; }
#nx .nx-ref-gross-hinweis { position: absolute; left: 14px; bottom: 14px; padding: 5px 12px; border-radius: 99px; font-size: 11.5px; background: rgba(var(--fl),.7); color: var(--nx-chrom); backdrop-filter: blur(8px); }
#nx .nx-ref-text { padding: 34px 34px 30px; }
#nx .nx-ref-text h3 { margin: 0 0 12px; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.02em; font-weight: 650; }
#nx .nx-ref-text .nx-text { font-size: 15.5px; margin: 0 0 18px; }
#nx .nx-ref-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 16px; }
#nx .nx-ref-spalten h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--nx-cyan); }
#nx .nx-ref-spalten ul { margin: 0; padding-left: 16px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.45; color: var(--nx-chrom); }
#nx .nx-ref-text .nx-aktionen { margin-top: 20px; }
#nx .nx-ref-intern { margin: 2px 0 16px; padding: 16px 18px 18px; border-radius: 16px; border: 1px solid rgba(var(--a1),.2);
  background: linear-gradient(135deg, rgba(var(--a1),.09), rgba(var(--a2),.06)); }
#nx .nx-ref-intern h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--nx-cyan); }
#nx .nx-ref-intern h4 svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
#nx .nx-ref-intern > p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--nx-grau); }
#nx .nx-ref-ablauf { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
#nx .nx-ref-ablauf li { position: relative; padding: 5px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 560; color: var(--nx-weiss);
  background: rgb(var(--fl)); border: 1px solid rgba(var(--ton),.14); }
#nx .nx-ref-ablauf li + li { margin-left: 22px; }
#nx .nx-ref-ablauf li + li::before { content: "→"; position: absolute; left: -17px; top: 50%; transform: translateY(-50%); color: var(--nx-cyan); font-weight: 600; }
#nx .nx-ref-intern ul { margin: 0; padding-left: 16px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.45; color: var(--nx-chrom); }

@media (min-width: 901px) and (max-height: 820px) {
  #nx .nx-ref-info p { display: none; }
  #nx .nx-ref-info { padding: 12px 16px 14px; }
  #nx .nx-refs-text h2 { font-size: clamp(30px, 3.4vw, 50px); }
  #nx .nx-sz7--pin .nx-sz7-buehne { gap: 3vh; }
}

/* ---------- Szene 8: Finale ---------- */
#nx .nx-sz8 { position: relative; padding: 12vh 0 10vh; background: var(--nx-schwarz); overflow: hidden; }
#nx .nx-sz8-buehne { position: relative; width: min(1240px, 100% - 48px); margin: 0 auto; display: grid; justify-items: center; gap: 28px; }
#nx .nx-sz8--pin { height: 300vh; padding: 0; overflow: visible; }
#nx .nx-sz8--pin .nx-sz8-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; width: auto; margin: 0; overflow: hidden; place-items: center; padding: calc(var(--nx-kopf) + 16px) 24px 24px; }
#nx .nx-sz8--pin .nx-sz8-buehne > * { grid-area: 1 / 1; } /* alles übereinander in der Bildmitte */
#nx .nx-warp { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#nx .nx-portal { --dreh: 0; position: relative; width: min(52vmin, 460px); aspect-ratio: 1; pointer-events: none; }
#nx .nx-sz8:not(.nx-sz8--pin) .nx-portal { position: absolute; top: 0; left: 50%; margin-left: max(-26vmin, -230px); opacity: .5; }
#nx .nx-portal i { position: absolute; inset: 0; border-radius: 50%; }
#nx .nx-portal i:nth-child(1) { background: conic-gradient(from 0deg, transparent, var(--nx-cyan), transparent 30%, var(--a-mitte), transparent 60%, var(--nx-orange), transparent 85%);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 69%, transparent 70%); mask: radial-gradient(circle, transparent 64%, #000 65%, #000 69%, transparent 70%);
  filter: drop-shadow(0 0 calc(10px + var(--dreh) * 20px) var(--nx-cyan)); animation: nx-dreh 6s linear infinite; }
#nx .nx-portal i:nth-child(2) { inset: 9%; border: 2px dashed rgba(var(--a1h),.55); animation: nx-dreh 14s linear infinite reverse; }
#nx .nx-portal i:nth-child(3) { inset: 17%; border: 1.5px solid rgba(var(--a2),.7); box-shadow: 0 0 24px rgba(var(--a2),.5), inset 0 0 24px rgba(var(--a2),.3); border-left-color: transparent; border-right-color: transparent; animation: nx-dreh 4s linear infinite; }
#nx .nx-portal i:nth-child(4) { inset: 26%; border: 1px solid rgba(var(--a1),.5); border-top-color: transparent; animation: nx-dreh 9s linear infinite reverse; }
#nx .nx-portal b { position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #BFF8FF 12%, rgba(var(--a1),.55) 35%, rgba(var(--a1),.08) 62%, transparent 70%);
  box-shadow: 0 0 calc(60px + var(--dreh) * 80px) rgba(var(--a1),.6); animation: nx-puls 2.4s ease-in-out infinite; }
@keyframes nx-dreh { to { transform: rotate(360deg); } }
@keyframes nx-puls { 50% { transform: scale(1.08); filter: brightness(1.2); } }
#nx .nx-blitz { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 46%, #fff, rgba(var(--a1h),.85) 25%, rgba(var(--a1),.25) 60%, transparent 80%); }

#nx .nx-sz8-titel { position: relative; text-align: center; z-index: 2; }
#nx .nx-sz8-titel h2 { margin: 0; font-size: clamp(38px, 5.6vw, 88px); line-height: 1.02; letter-spacing: -.04em; font-weight: 650; text-shadow: 0 0 40px rgba(var(--fl),.9); }
#nx .nx-sz8-titel .nx-claim { margin-top: 18px; }

/* Projekt-Finder */
#nx .nx-finder {
  position: relative; z-index: 3; width: min(760px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 16px;
  padding: 26px 28px 20px; border-radius: 24px;
  background: linear-gradient(150deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 55%), rgba(var(--fl),.78);
  border: 1px solid rgba(var(--ton),.14); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px rgba(var(--a1),.12), 0 50px 120px -30px rgba(var(--a1),.35);
}
#nx .nx-sz8--pin .nx-finder { visibility: hidden; opacity: 0; }
/* Handy/Tablet: nur der Flug ist festgepinnt (nx-portal.js baut Flugraum + Flug-Bühne), der Finder folgt im Seitenfluss */
#nx .nx-sz8--handyflug { padding: 0 0 10vh; overflow: visible; }
#nx .nx-sz8--handyflug .nx-sz8-buehne { display: block; width: auto; margin: 0; padding: 0; }
#nx .nx-sz8-flugraum { position: relative; height: 240vh; height: 240svh; }
#nx .nx-sz8-flug { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; padding: calc(var(--nx-kopf) + 12px) 20px 24px; }
#nx .nx-sz8-flug > * { grid-area: 1 / 1; }
#nx .nx-sz8--handyflug .nx-portal { position: relative; top: auto; left: auto; margin: 0; opacity: 0; width: min(62vmin, 360px); }
#nx .nx-sz8--handyflug .nx-finder { width: calc(100% - 32px); max-width: 760px; max-height: none; margin: -34vh auto 0; }
#nx .nx-fi-kopf p { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; }
#nx .nx-fi-kopf b { font-size: 15px; letter-spacing: .02em; }
#nx .nx-fi-schritt { font-size: 12.5px; color: var(--nx-grau); }
#nx .nx-fi-balken { height: 4px; border-radius: 4px; background: rgba(var(--ton),.08); overflow: hidden; }
#nx .nx-fi-balken span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--nx-cyan), var(--nx-orange)); box-shadow: 0 0 10px rgba(var(--a1),.6); transition: width .45s cubic-bezier(.3,.8,.3,1); }
#nx .nx-fi-koerper { min-height: 250px; }
#nx .nx-fi-frage { margin: 4px 0 16px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 640; letter-spacing: -.02em; outline: none; }
#nx .nx-fi-frage em { display: block; font-size: .7em; margin-top: 4px; }
#nx .nx-fi-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#nx .nx-fi-chips { display: flex; flex-wrap: wrap; gap: 10px; }
#nx .nx-fi-karten button, #nx .nx-fi-chips button {
  font: inherit; color: var(--nx-weiss); cursor: pointer; text-align: left;
  background: rgba(var(--ton),.04); border: 1px solid rgba(var(--ton),.12); transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
#nx .nx-fi-karten button { display: grid; gap: 4px; padding: 18px; border-radius: 16px; }
#nx .nx-fi-karten b { font-size: 16.5px; font-weight: 620; }
#nx .nx-fi-karten small { font-size: 13px; color: var(--nx-grau); }
#nx .nx-fi-chips button { padding: 11px 18px; border-radius: 99px; font-size: 14.5px; }
#nx .nx-fi-karten button:hover, #nx .nx-fi-chips button:hover { border-color: rgba(var(--a1),.5); background: rgba(var(--a1),.06); transform: translateY(-2px); }
#nx .nx-fi-karten button[aria-pressed="true"], #nx .nx-fi-chips button[aria-pressed="true"] { border-color: var(--nx-cyan); background: rgba(var(--a1),.13); box-shadow: 0 0 22px -6px rgba(var(--a1),.7); }
#nx .nx-fi-chips button[aria-pressed="true"]::before { content: "✓ "; color: var(--nx-cyan); }
#nx .nx-fi-karten button:focus-visible, #nx .nx-fi-chips button:focus-visible { outline: 2px solid var(--nx-cyan); outline-offset: 2px; }
#nx .nx-fi-fuss { display: flex; justify-content: space-between; gap: 10px; }
#nx .nx-fi-fuss .nx-fi-weiter { margin-left: auto; }
#nx .nx-fi-datenschutz { margin: 0; font-size: 12px; color: var(--nx-grau); text-align: center; }
#nx .nx-fi-hinweis { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; color: var(--nx-weiss); background: rgba(var(--a1),.12); border: 1px solid rgba(var(--a1),.3); } /* Danke-Ansicht: Bestätigung + Spam-Ordner */
#nx .nx-fi-skizze { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 0 0 4px; font-size: 14px; }
#nx .nx-fi-skizze div { display: flex; gap: 10px; }
#nx .nx-fi-skizze dt { min-width: 66px; color: var(--nx-grau); }
#nx .nx-fi-skizze dd { margin: 0; }
#nx .nx-fi-bausteine { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#nx .nx-fi-bausteine li { padding: 6px 12px; border-radius: 99px; font-size: 13px; color: #CFFAFF; background: rgba(var(--a1),.1); border: 1px solid rgba(var(--a1),.35); }
#nx .nx-fi-form { display: grid; gap: 10px; }
#nx .nx-fi-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#nx .nx-fi-form label { display: grid; gap: 5px; font-size: 12.5px; color: var(--nx-grau); }
#nx .nx-fi-form input:not([type=checkbox]), #nx .nx-fi-form textarea {
  font: inherit; font-size: 15px; color: var(--nx-weiss); padding: 11px 14px; border-radius: 12px; resize: vertical;
  background: rgba(var(--tief),.35); border: 1px solid rgba(var(--ton),.14); transition: border-color .2s, box-shadow .2s;
}
#nx .nx-fi-form input:focus, #nx .nx-fi-form textarea:focus { outline: none; border-color: var(--nx-cyan); box-shadow: 0 0 0 3px rgba(var(--a1),.18); }
#nx .nx-fi-ok { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 10px !important; line-height: 1.4; }
#nx .nx-fi-ok input { margin-top: 2px; accent-color: var(--nx-cyan); width: 16px; height: 16px; flex: none; }
#nx .nx-fi-fehler { margin: 0; min-height: 1em; font-size: 13px; color: #FFB27A; }
#nx .nx-fi-ok a { color: var(--nx-cyan); text-decoration: underline; text-underline-offset: 2px; }
/* Lockfeld für Bots: für Menschen unsichtbar, Screenreader überspringen es (aria-hidden, tabindex -1) */
#nx .nx-fi-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#nx .nx-fi-senden:disabled { opacity: .7; cursor: progress; }
#nx .nx-fi-form .nx-aktionen { margin-top: 2px; gap: 10px; }
#nx .nx-fi-pre { margin: 0 0 12px; padding: 16px 18px; border-radius: 14px; overflow: auto; white-space: pre-wrap;
  font: 13px/1.7 Consolas, "Cascadia Mono", "SF Mono", monospace; color: var(--nx-chrom); background: rgba(var(--fl),.75); border: 1px solid rgba(var(--a1),.2); }

/* ---------- Allgemein & Fußzeile ---------- */
#nx .nx-text { max-width: 640px; color: var(--nx-grau); font-size: 18px; line-height: 1.6; }
#nx .nx-fuss { position: relative; padding: 64px 0 28px; color: var(--nx-grau); font-size: 14px; background: linear-gradient(var(--nx-schwarz), #03050A); }
#nx .nx-fuss::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1200px, 100% - 48px); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--a1),.5), rgba(var(--a2),.4), transparent); }
#nx .nx-fuss-raster { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
#nx .nx-fuss-raster p { margin: 12px 0 0; max-width: 280px; line-height: 1.5; }
#nx .nx-fuss nav { display: grid; gap: 8px; align-content: start; }
#nx .nx-fuss nav b { margin-bottom: 4px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-weiss); font-weight: 600; }
#nx .nx-fuss nav a { transition: color .2s; }
#nx .nx-fuss nav a:hover { color: var(--nx-cyan); }

/* ---------- Unterseiten (Impressum, Datenschutz): Kopf als dunkle Bühne, Text hell und ruhig ---------- */
#nx .nx-recht-kopf { position: relative; overflow: hidden; padding: calc(var(--nx-kopf) + 90px) 0 64px; color: var(--nx-weiss);
  background: radial-gradient(90% 120% at 85% 0%, rgba(var(--a1),.28), transparent 60%), radial-gradient(60% 90% at 10% 100%, rgba(var(--a2),.18), transparent 60%), var(--nx-schwarz); }
#nx .nx-recht-kopf h1 { margin: 14px 0; font-size: clamp(38px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -.04em; font-weight: 650; }
#nx .nx-recht-kopf .nx-text { max-width: 640px; margin: 0; }
#nx .nx-recht-inhalt > * { max-width: 820px; } /* bündig mit dem Seitenkopf, Zeilen nicht zu lang */
#nx .nx-recht-inhalt { padding: 48px 0 96px; color: var(--nx-chrom); font-size: 16px; line-height: 1.65; }
#nx .nx-recht-inhalt section { scroll-margin-top: 100px; }
#nx .nx-recht-inhalt h2 { margin: 40px 0 12px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.02em; font-weight: 640; color: var(--nx-weiss); }
#nx .nx-recht-inhalt h3 { margin: 24px 0 6px; font-size: 16.5px; font-weight: 620; color: var(--nx-weiss); }
#nx .nx-recht-inhalt p { margin: 0 0 12px; }
#nx .nx-recht-inhalt ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 4px; }
#nx .nx-recht-inhalt a { color: var(--nx-cyan); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
#nx .nx-recht-inhalt strong { color: var(--nx-weiss); font-weight: 620; }
#nx .nx-recht-inhalt .nx-recht-klein { margin: 0 0 2px; font-size: 13px; letter-spacing: .02em; color: var(--nx-grau); }
#nx .nx-recht-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; margin-bottom: 8px; }
#nx .nx-recht-karte { padding: 22px 24px 12px; border-radius: 20px; border: 1px solid rgba(var(--ton),.1); background: linear-gradient(150deg, rgba(var(--a1),.07), rgba(var(--a2),.04)); }
#nx .nx-recht-inhalt .nx-recht-karte h2 { margin-top: 0; }
#nx .nx-recht-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
#nx .nx-recht-inhalt .nx-recht-toc a { padding: 6px 12px; border-radius: 99px; font-size: 13px; line-height: 1.3; text-decoration: none; color: var(--nx-chrom); border: 1px solid rgba(var(--ton),.12); background: rgba(var(--ton),.03); transition: color .2s, border-color .2s; }
#nx .nx-recht-inhalt .nx-recht-toc a:hover { color: var(--nx-cyan); border-color: rgba(var(--a1),.4); }
#nx .nx-fuss-unten { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(var(--ton),.07); font-size: 12.5px; }

/* Aktiver Menüpunkt (setzt main.js beim Scrollen) */
#nx .nx-menu a { position: relative; }
#nx .nx-menu a.ist-aktiv { color: var(--nx-weiss); }
#nx .nx-menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; transform: scaleX(0); transition: transform .35s cubic-bezier(.3,.8,.3,1);
  background: linear-gradient(90deg, var(--nx-cyan), var(--nx-orange)); box-shadow: 0 0 8px rgba(var(--a1),.6); }
#nx .nx-menu a.ist-aktiv::after { transform: scaleX(1); }
@media (max-width: 1000px) { #nx .nx-menu { gap: 18px; font-size: 13px; } }
@media (max-width: 760px) {
  #nx .nx-fuss-raster { grid-template-columns: 1fr 1fr; }
  #nx .nx-fuss-raster > div:first-child { grid-column: 1 / -1; }
  #nx .nx-fuss-unten { flex-direction: column; }
}

/* ---------- Ohne WebGL / vor dem Laden ---------- */
.nx-nogl #nx .nx-canvas { display: none; }
.nx-nogl #nx .nx-buehne::before { content: ""; position: absolute; left: 50%; top: 42%; width: 46vmin; height: 46vmin; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FFD2A8 0 4%, rgba(var(--a1),.35) 12%, rgba(var(--a1),.06) 45%, transparent 70%); box-shadow: 0 0 0 1px rgba(var(--a1),.25) inset; }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  #nx .nx-menu { display: none; }
  #nx .nx-kopf { height: 52px; top: 10px; padding-left: 18px; }
  #nx .nx-hero { height: 380vh; }
  #nx .nx-s1 { padding-bottom: max(9vh, env(safe-area-inset-bottom)); }
  #nx .nx-aktionen .nx-btn { flex: 1 1 auto; }
  #nx .nx-scrollhinweis { display: none; }
  #nx .nx-panels { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #nx .nx-panel { padding: 16px 14px; min-height: 0; border-radius: 16px; }
  #nx .nx-panel h3 { margin: 8px 0 4px; font-size: 16px; }
  #nx .nx-panel p { font-size: 12.5px; line-height: 1.4; }
  #nx .nx-s3 { gap: 18px; padding-top: 80px; }
  #nx .nx-sz3 { height: 400vh; }
  #nx .nx-sz3-buehne { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 14px; padding: 76px 20px 20px; }
  #nx .nx-sz3-text h2 { margin-bottom: 12px; font-size: 30px; }
  #nx .nx-sz3-steps { min-height: 108px; }
  #nx .nx-sz3-step h3 { margin: 4px 0 4px; font-size: 18px; }
  #nx .nx-sz3-step p { font-size: 14px; line-height: 1.45; }
  #nx .nx-sz3-text .nx-kicker, #nx .nx-sz3-cta { display: none; }
  #nx .nx-sz3-area { padding-bottom: 40px; }
  #nx .nx-dev-badge { display: none; }
  #nx .nx-chip { padding: 6px 11px; font-size: 11.5px; }
  #nx .nx-sz4-buehne, #nx .nx-tp-angebot, #nx .nx-tp-2 { grid-template-columns: 1fr; }
  #nx .nx-tp { min-height: 0; }
  #nx .nx-tabs button { flex: 0 0 auto; }
  #nx .nx-idee-weg { grid-template-columns: 1fr 1fr; }
  #nx .nx-sz4-buehne { width: calc(100% - 32px); }
  #nx .nx-sz6-buehne { grid-template-columns: 1fr; width: calc(100% - 32px); gap: 28px; }
  #nx .nx-sz7-buehne { width: calc(100% - 32px); }
  #nx .nx-sz8-buehne { width: calc(100% - 32px); padding-top: 18vh; }
  #nx .nx-finder { padding: 20px 16px 16px; border-radius: 20px; }
  #nx .nx-fi-karten, #nx .nx-fi-skizze, #nx .nx-fi-felder { grid-template-columns: 1fr; }
  #nx .nx-fi-karten button { padding: 14px 16px; }
  #nx .nx-fi-chips button { padding: 10px 14px; font-size: 14px; }
  #nx .nx-fi-koerper { min-height: 0; }
  #nx .nx-refs-raum { grid-template-columns: 1fr; perspective: none; }
  #nx .nx-refs-raum::before { display: none; }
  #nx .nx-refs-hinweis { font-size: 12.5px; }
  #nx .nx-ref-overlay { padding: 10px; }
  #nx .nx-ref-panel { max-height: calc(100svh - 20px); }
  #nx .nx-ref-inhalt, #nx .nx-ref-spalten { grid-template-columns: 1fr; }
  #nx .nx-ref-gross img { min-height: 0; aspect-ratio: 16 / 10; }
  #nx .nx-ref-text { padding: 22px 20px 24px; }
  #nx .nx-cmp-rahmen { margin-bottom: 56px; }
  #nx .nx-cmp-werte li { grid-template-columns: 92px auto 1fr; gap: 8px; padding: 8px 10px; font-size: 13px; }
  #nx .nx-cmp-hinweis { font-size: 12.5px; }
  #nx .nx-kal { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; }
  #nx .nx-kal button { font-size: 12.5px; padding: 6px 0; }
  #nx .nx-ws { grid-template-columns: 1fr auto; grid-template-areas: "t t" "bar bar" "frei akt" "ok ok"; row-gap: 8px; }
  #nx .nx-sz4-doc { grid-template-columns: 1fr; gap: 20px; }
  #nx .nx-sz5-kopf { grid-template-columns: 1fr; gap: 20px; }
  #nx .nx-log { min-height: 0; font-size: 11px; padding: 12px 14px; }
  #nx .nx-flow-graph { --richtung: v; grid-template-columns: repeat(3, 1fr); grid-template-rows: none; column-gap: 8px; row-gap: 34px; padding-bottom: 70px; }
  #nx .nx-flow-graph .nx-node { grid-column: 1 / -1 !important; width: 72%; justify-self: center; }
  #nx .nx-flow-graph [data-node="a"] { grid-row: 1; }
  #nx .nx-flow-graph [data-node="k"] { grid-row: 2; }
  #nx .nx-flow-graph [data-node="p"] { grid-row: 3; }
  #nx .nx-flow-graph [data-node="o"] { grid-row: 5; }
  #nx .nx-flow-graph [data-node="m"], #nx .nx-flow-graph [data-node="t"], #nx .nx-flow-graph [data-node="c"] { grid-row: 4; width: 100%; padding: 10px 6px; grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 4px; }
  #nx .nx-flow-graph [data-node="m"] { grid-column: 1 !important; }
  #nx .nx-flow-graph [data-node="t"] { grid-column: 2 !important; }
  #nx .nx-flow-graph [data-node="c"] { grid-column: 3 !important; }
  #nx .nx-flow-graph [data-node="m"] svg, #nx .nx-flow-graph [data-node="t"] svg, #nx .nx-flow-graph [data-node="c"] svg { grid-row: auto; }
  #nx .nx-flow-graph [data-node="m"] b, #nx .nx-flow-graph [data-node="t"] b, #nx .nx-flow-graph [data-node="c"] b { font-size: 13px; }
  #nx .nx-flow-graph [data-node="m"] .nx-node-st, #nx .nx-flow-graph [data-node="t"] .nx-node-st, #nx .nx-flow-graph [data-node="c"] .nx-node-st { width: 100%; font-size: 10.5px; }
  #nx .nx-flow-graph [data-node="m"] .nx-node-st i, #nx .nx-flow-graph [data-node="t"] .nx-node-st i, #nx .nx-flow-graph [data-node="c"] .nx-node-st i { left: 0; right: 0; text-align: center; }
  #nx .nx-flow-fertig { bottom: 0; font-size: 13px; }
  #nx .nx-sz4-linien { display: none; }
  #nx .nx-card { padding: 18px; }
}
@media (max-width: 340px) { #nx .nx-panel p { display: none; } }

/* ---------- Niedrige Bildschirme am PC (Laptops): Tool-Galerie kompakter ----------
   Steht bewusst am Ende, damit diese Regeln die Grundregeln der Karten überschreiben. */
@media (min-width: 901px) and (max-height: 820px) {
  #nx .nx-card { padding: 16px 18px; }
  #nx .nx-card-kopf { margin-bottom: 10px; }
  #nx .nx-label { margin: 10px 0 6px; }
  #nx .nx-seg button { height: 34px; }
  #nx .nx-tabs button { padding: 6px 9px; }
  #nx .nx-sz4-text h2 { margin-bottom: 12px; }
  #nx .nx-sz4-text .nx-text, #nx .nx-sz4-liste { margin-bottom: 14px; }
  #nx .nx-papier { width: 92px; height: 124px; }
  #nx .nx-quer { height: 130px; }
  #nx .nx-e-mitte { margin: 10px 0; }
}
@media (min-width: 901px) and (max-height: 780px) {
  #nx .nx-sz4--pin .nx-sz4-buehne { padding-top: calc(var(--nx-kopf) + 10px); padding-bottom: 14px; }
  #nx .nx-tp-angebot { gap: 14px; }
  #nx .nx-card { padding: 14px 16px; }
  #nx .nx-label { margin: 8px 0 5px; }
  #nx .nx-seg button { height: 32px; }
  #nx .nx-brutto { font-size: 32px; }
  #nx .nx-stunden { margin-bottom: 10px; }
  #nx .nx-papier { width: 84px; height: 112px; }
  #nx .nx-sz4-text h2 { font-size: clamp(30px, 3.6vw, 52px); }
}

/* =========================================================
   NEXALVO – Look B „Liquid Light“ · Prototyp 0.1 · 31.10.2026
   Heller, ruhiger, weniger Technik: Perlweiß, Milchglas,
   kühles Blau mit Flieder und einem Hauch Pfirsich
   (in Anlehnung an Konzept C „Liquid Intelligence“).
   Aufbau, Szenen und Übergänge sind identisch mit Look A.
   Aktiv mit <html data-look="hell">.
========================================================= */
:root {
  --nx-schwarz: #F4F6FA;
  --nx-weiss: #0E1422;
  --nx-chrom: #2E3748;
  --nx-grau: #5E687B;
  --nx-cyan: #3D63FF;
  --nx-orange: #A46BFF;
  --a1: 61,99,255;
  --a2: 164,107,255;
  --a1h: 140,170,255;
  --a-mitte: #6F7DFF;
  --fl: 255,255,255;
  --fl-tief: 232,236,244;
  --ton: 18,28,58;
  --ton-stroke: 18,28,58;
  --sh: 52,64,110;
  --tief: 120,134,170;
  --nx-schwarz-rgb: 244,246,250;
  --akzent3: #FF8FA3;
  --akzent3-rgb: 255,143,163;
  --stern: #2E3748;
  --kern-staub: #8FA6FF;
  --kern-glut: #C9B8FF;
  color-scheme: light;
}

/* Verläufe: schillernd statt Neon */
:root #nx em { background-image: linear-gradient(100deg, var(--nx-cyan), color-mix(in srgb, var(--nx-cyan), var(--nx-orange)) 50%, var(--akzent3)); }
/* Logo: Farben kommen aus den Variablen, siehe style.css „Logo A1“ */
:root #nx .nx-brutto, :root #nx .nx-fd-titel { background-image: linear-gradient(100deg, var(--nx-weiss), var(--nx-cyan) 75%); }

/* Kopf und Buttons */
:root #nx .nx-kopf { background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 #fff, 0 10px 40px -12px rgba(var(--sh),.25); }
:root #nx .nx-btn { color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--nx-cyan) 80%, #fff), color-mix(in srgb, var(--nx-cyan) 85%, #000) 55%, color-mix(in srgb, var(--nx-orange) 80%, #000)); /* aus den Akzenten abgeleitet: auf Hell und Dunkel kräftig */ box-shadow: 0 0 0 1px rgba(var(--a1),.25), 0 12px 32px -10px rgba(var(--a1),.6); }
:root #nx .nx-btn:hover { box-shadow: 0 0 0 1px rgba(var(--a1),.45), 0 16px 40px -10px rgba(var(--a1),.75); }
:root #nx .nx-btn--glas { color: var(--nx-weiss); background: rgba(255,255,255,.65); box-shadow: inset 0 0 0 1px rgba(var(--ton),.14), 0 8px 24px -14px rgba(var(--sh),.4); }

/* Hero: Perlmutt-Licht statt Weltraum */
:root #nx .nx-buehne {
  background:
    radial-gradient(ellipse 45% 40% at 70% 35%, rgba(var(--a2),.16), transparent 70%),
    radial-gradient(ellipse 50% 45% at 30% 60%, rgba(var(--a1),.14), transparent 70%),
    radial-gradient(ellipse 40% 35% at 60% 80%, rgba(var(--akzent3-rgb),.12), transparent 70%),
    linear-gradient(#FBFCFE, #EEF2F9);
}
:root #nx .nx-vignette { background: radial-gradient(ellipse 85% 75% at 50% 50%, transparent 60%, rgba(214,222,240,.55) 100%); }
:root.nx-nogl #nx .nx-buehne::before { background: radial-gradient(circle, #fff 0 6%, rgba(var(--a1),.35) 14%, rgba(var(--a2),.12) 45%, transparent 70%); }

/* Glas wird Milchglas */
:root #nx .nx-panel, :root #nx .nx-card, :root #nx .nx-finder {
  background: linear-gradient(150deg, rgba(255,255,255,.88), rgba(255,255,255,.55));
  box-shadow: inset 0 1px 0 #fff, 0 24px 60px -28px rgba(var(--sh),.35);
}
/* Knoten und Projektfenster: nur die Fläche, ihre Leucht-Schatten (aktiv/hover) bleiben */
:root #nx .nx-node, :root #nx .nx-ref { background: linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,255,255,.6)); }
:root #nx .nx-dev, :root #nx .nx-cmp-rahmen { background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,.5) 50%, rgba(var(--a1),.08)); box-shadow: inset 0 1px 0 #fff, 0 40px 100px -40px rgba(var(--a1),.35), 0 30px 70px -30px rgba(var(--sh),.35); }
:root #nx .nx-dev-bar i, :root #nx .nx-ref-bar i { background: rgba(var(--ton),.18); }
:root #nx .nx-ref-panel { box-shadow: 0 60px 140px -40px rgba(var(--sh),.5), 0 0 0 1px rgba(var(--a1),.12); }

/* Szene 3: Raster in zarter Linie */
:root #nx .nx-sz3-buehne {
  background:
    radial-gradient(ellipse 50% 60% at 72% 50%, rgba(var(--a1),.1), transparent 70%),
    linear-gradient(rgba(var(--ton),.045) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(var(--ton),.045) 1px, transparent 1px) 0 0 / 60px 60px;
}

/* Bedienelemente */
:root #nx .nx-seg, :root #nx .nx-tabs, :root #nx .nx-ws-anzahl { background: rgba(var(--ton),.05); }
:root #nx .nx-seg button[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, rgb(var(--a1h)), var(--nx-cyan)); }
:root #nx .nx-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--nx-cyan), var(--nx-orange)) 0 0 / var(--fill) 100% no-repeat, rgba(var(--ton),.1); }
:root #nx .nx-range::-moz-range-track { background: linear-gradient(90deg, var(--nx-cyan), var(--nx-orange)) 0 0 / var(--fill) 100% no-repeat, rgba(var(--ton),.1); }
:root #nx .nx-range::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--a1),.25), 0 4px 12px rgba(var(--sh),.35); }
:root #nx .nx-switch-knopf { background: rgba(var(--ton),.15); }
:root #nx .nx-switch-knopf::after { box-shadow: 0 1px 4px rgba(var(--sh),.4); }
:root #nx .nx-fi-form input:not([type=checkbox]), :root #nx .nx-fi-form textarea { background: rgba(255,255,255,.85); }
:root #nx .nx-quer { background: linear-gradient(rgba(var(--ton),.05) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, rgba(var(--ton),.05) 1px, transparent 1px) 0 0 / 20px 20px, rgba(232,236,244,.6); }
:root #nx .nx-ring circle { stroke: rgba(var(--ton),.08); }
:root #nx .nx-pipe li::before { background: color-mix(in srgb, var(--nx-cyan) calc(var(--on) * 100%), #D3D9E6); }
:root #nx .nx-pipe li + li::after { background: linear-gradient(90deg, var(--nx-cyan) calc(var(--on) * 100%), rgba(var(--ton),.1) 0); }

/* Akzent-Texte, die auf Dunkel hell waren */
:root #nx .nx-fi-bausteine li { color: color-mix(in srgb, var(--nx-cyan) 70%, #000); }
:root #nx .nx-log { box-shadow: inset 0 1px 0 #fff, 0 16px 40px -24px rgba(var(--sh),.3); }
:root #nx .nx-log li:last-child { color: color-mix(in srgb, var(--nx-orange) 72%, #000); }
:root #nx .nx-flow-fertig { color: color-mix(in srgb, var(--nx-orange) 65%, #000); box-shadow: 0 10px 30px -10px rgba(var(--a2),.4); }
:root #nx .nx-e-base { stroke: rgba(var(--ton),.16); }
:root #nx .nx-e-dot { fill: var(--nx-cyan); }
:root #nx .nx-cmp-werte s { color: #9A8A8A; }

/* Finale */
:root #nx .nx-portal b { background: radial-gradient(circle, #fff 0%, rgba(var(--a1h),.9) 14%, rgba(var(--a1),.45) 36%, rgba(var(--a2),.12) 62%, transparent 70%); }
:root #nx .nx-fuss { background: linear-gradient(var(--nx-schwarz), #E9EDF5); }


/* =========================================================
   NEXALVO – Look C „Aurora“ · Prototyp 0.1 · 31.10.2026
   Mischung aus beiden: Grundton hell und ruhig wie „Liquid Light“
   (alle Regeln aus look-hell.css gelten mit), aber die drei großen
   Show-Momente werden zur dunklen Bühne mit Leuchten wie bei
   „Digital Core“, in den Liquid-Farben Blau, Flieder, Pfirsich:
     Hero (Energiekern) · Relaunch (Lichttunnel) · Finale (Portal) · Fuß
   Dazwischen weiche Übergänge statt harter Kanten.
   Aktiv mit <html data-look="mix">.
========================================================= */

/* =========================================================
   FARB-STEUERUNG AURORA
   Hier (und für die hellen Szenen in look-hell.css, oberster Block)
   stehen alle Farben. Wer die Farbwelt ändern will, ändert nur diese
   Werte: CSS, 3D-Kern, Lichttunnel und Portal-Sterne folgen automatisch.
========================================================= */
:root {
  --aurora-nacht: #0A0D1C;   /* Grundton der dunklen Bühnen */
}

/* Dunkle Bühnen: dieselben Variablen, nur innerhalb dieser Bereiche dunkel */
:root #nx :is(.nx-hero, .nx-sz6, .nx-sz8, .nx-fuss, .nx-recht-kopf) {
  --nx-schwarz: var(--aurora-nacht);
  --nx-weiss: #F3F5FF;
  --nx-chrom: #C9CEE6;
  --nx-grau: #9097B3;
  --nx-cyan: #6E8BFF;        /* Akzent 1: Blau */
  --nx-orange: #C08CFF;      /* Akzent 2: Flieder */
  --a1: 110,139,255;         /* = Akzent 1 als Tripel */
  --a2: 192,140,255;         /* = Akzent 2 als Tripel */
  --a1h: 170,190,255;
  --a-mitte: #9AA8FF;
  --akzent3: #FF9FB5;        /* Akzent 3: Pfirsich-Rosé */
  --akzent3-rgb: 255,159,181;
  --fl: 10,13,28;            /* = Grundton als Tripel */
  --fl-tief: 16,20,40;
  --nx-schwarz-rgb: 10,13,28;
  --ton: 255,255,255;
  --ton-stroke: 201,206,230;
  --sh: 0,0,0;
  --tief: 0,0,0;
  --stern: #FFFFFF;
  --kern-staub: #B9C6FF;
  --kern-glut: #FFC2D1;
  color: var(--nx-weiss);
  color-scheme: dark;
}
:root #nx :is(.nx-sz6, .nx-sz8) { background: var(--nx-schwarz); }

/* Hero: Polarlicht über tiefem Indigo, der Kern leuchtet darin */
:root #nx .nx-hero .nx-buehne {
  background:
    linear-gradient(transparent 78%, var(--aurora-nacht)), /* unten exakt in den Übergang auslaufen */
    radial-gradient(ellipse 50% 45% at 72% 30%, rgba(var(--a2),.22), transparent 70%),
    radial-gradient(ellipse 55% 50% at 25% 65%, rgba(var(--a1),.2), transparent 70%),
    radial-gradient(ellipse 40% 35% at 60% 85%, rgba(var(--akzent3-rgb),.14), transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 45%, color-mix(in srgb, var(--aurora-nacht) 88%, var(--nx-cyan)) 0%, var(--aurora-nacht) 70%);
}
:root #nx .nx-hero .nx-vignette { background: radial-gradient(ellipse 85% 75% at 50% 50%, transparent 55%, rgba(var(--fl),.7) 100%); }

/* Glas auf dunklen Bühnen: dunkles Milchglas statt weißem */
:root #nx :is(.nx-hero, .nx-sz8) :is(.nx-panel, .nx-finder) {
  background: linear-gradient(150deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 60%), rgba(var(--fl),.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -20px 40px -30px rgba(var(--a1),.4), 0 30px 80px -30px rgba(0,0,0,.7);
}
:root #nx :is(.nx-hero, .nx-sz6, .nx-sz8) .nx-btn--glas { color: var(--nx-weiss); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
:root #nx .nx-sz6 .nx-cmp-rahmen { background: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 50%, rgba(var(--a1),.1)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 40px 120px -30px rgba(var(--a1),.45), 0 30px 80px -20px rgba(0,0,0,.7); }
:root #nx .nx-sz6 .nx-dev-bar i { background: rgba(255,255,255,.25); }
:root #nx .nx-sz6 .nx-cmp-werte s { color: #8E86A6; }
:root #nx .nx-sz8 .nx-fi-form :is(input:not([type=checkbox]), textarea) { background: rgba(0,0,0,.3); }
:root #nx .nx-sz8 .nx-fi-bausteine li { color: #DCE2FF; }
:root #nx .nx-sz8 .nx-portal b { background: radial-gradient(circle, #fff 0%, #D9E0FF 12%, rgba(var(--a1),.6) 34%, rgba(var(--a2),.14) 62%, transparent 70%); }
:root #nx .nx-sz8 .nx-seg { background: rgba(0,0,0,.3); }
:root #nx .nx-sz8 .nx-fi-pre { color: var(--nx-chrom); }
:root #nx .nx-fuss { background: linear-gradient(var(--aurora-nacht), color-mix(in srgb, var(--aurora-nacht), #000 40%)); }
/* Fuß-Logo: weiß über die dunkle Bühne (--nx-weiss) */
:root #nx .nx-sz6 .nx-tunnel { background: radial-gradient(circle at 50% 50%, rgba(var(--a2),.3), rgba(var(--fl),.92) 45%, var(--aurora-nacht) 75%); }
:root #nx .nx-sz6 .nx-tunnel i:nth-child(3n) { border-color: var(--akzent3); box-shadow: 0 0 3cqw rgba(var(--akzent3-rgb),.8); }

/* Helle Szenen: ruhige Farbschleier im Hintergrund (statisch, kostet keine Leistung) */
:root #nx .nx-sz4--pin .nx-sz4-buehne { background: radial-gradient(ellipse 50% 60% at 75% 55%, rgba(var(--a2),.1), transparent 70%), radial-gradient(ellipse 40% 50% at 15% 30%, rgba(var(--a1),.08), transparent 70%); }
:root #nx .nx-sz5--pin .nx-sz5-buehne { background: radial-gradient(ellipse 60% 50% at 55% 72%, rgba(var(--a1),.1), transparent 70%), radial-gradient(ellipse 35% 40% at 85% 20%, rgba(var(--akzent3-rgb),.08), transparent 70%); }
:root #nx .nx-sz7 { background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(var(--a2),.08), transparent 70%), var(--nx-schwarz); }

/* Weiche Übergänge zwischen hellen Szenen und dunklen Bühnen */
#nx .nx-uebergang { display: none; }
:root #nx .nx-uebergang { display: block; height: 32vh; pointer-events: none; }
:root #nx .nx-uebergang--hell { background: linear-gradient(var(--aurora-nacht), color-mix(in srgb, var(--aurora-nacht) 75%, var(--nx-cyan)) 30%, color-mix(in srgb, var(--nx-schwarz) 80%, var(--nx-cyan)) 72%, var(--nx-schwarz)); }
:root #nx .nx-uebergang--dunkel { background: linear-gradient(var(--nx-schwarz), color-mix(in srgb, var(--nx-schwarz) 80%, var(--nx-cyan)) 28%, color-mix(in srgb, var(--aurora-nacht) 75%, var(--nx-cyan)) 70%, var(--aurora-nacht)); }