/* =========================================================
   NEXT STRATEGY AI — Redesign Startseite
   Aesthetik: Dark / Premium / "Sichere KI-Infrastruktur"
   Markenfarben: Mint #85e1c0 -> Lime #94ed85 auf Near-Black
   Symmetrischer, zentrierter Aufbau
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  --bg:        #08110d;   /* fast schwarz mit leichtem Grün */
  --bg-2:      #0c1611;   /* Sektion */
  --surface:   #101d17;   /* Karten */
  --surface-2: #13241c;   /* Karten hover */
  --mint:      #85e1c0;
  --lime:      #94ed85;
  --grad:      linear-gradient(120deg, #85e1c0 0%, #94ed85 100%);
  --grad-soft: linear-gradient(120deg, rgba(133,225,192,.16), rgba(148,237,133,.16));

  --ink:       #f3fbf6;
  --muted:     rgba(232, 248, 240, .68);
  --muted-2:   rgba(232, 248, 240, .46);
  --line:      rgba(160, 240, 200, .12);
  --line-2:    rgba(148, 237, 133, .28);

  --radius:    20px;
  --radius-sm: 14px;
  --radius-lg: 32px;
  --container: 1200px;
  --nav-h:     78px;
  --ease:      cubic-bezier(.22, 1, .36, 1);

  --shadow:    0 30px 80px -30px rgba(0,0,0,.85);
  --glow:      0 0 60px -10px rgba(148,237,133,.35);

  --ff-display: "Sora", system-ui, sans-serif;
  --ff-body:    "Manrope", system-ui, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, monospace;
}


/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--lime); color: #04130b; }

/* Scrollleiste in Markenfarben */
html { scrollbar-width: thin; scrollbar-color: #6cc79a var(--bg); }   /* Firefox */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--grad); border-radius: 10px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--lime); }

/* ---------- Globale Hintergrund-Textur ---------- */
body::before {
  /* feines Gitter — wirkt wie Serverrack / Schaltkreis */
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(#000 0%, #000 42%, transparent 85%);
  mask-image: linear-gradient(#000 0%, #000 42%, transparent 85%);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
body::after {
  /* Grain-Overlay */
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout-Helfer ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.section { position: relative; z-index: 2; padding-block: clamp(64px, 8vw, 108px); }
.section--tight { padding-block: clamp(64px, 8vw, 108px); }   /* gleiche Abstände wie .section */
/* feiner, animierter Trenner oben an jeder Sektion (Licht-Sweep) */
.section::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--container), calc(100% - 48px)); height: 1px; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(160,240,200,.1) 30%, rgba(160,240,200,.1) 70%, transparent),
    linear-gradient(90deg, transparent 45.5%, rgba(148,237,133,.42) 50%, transparent 54.5%);
  background-size: 100% 100%, 170px 100%; background-repeat: no-repeat;
  background-position: 0 0, -170px 0;
  animation: sepSweep 14s linear infinite;
}
@keyframes sepSweep { to { background-position: 0 0, calc(100% + 170px) 0; } }
/* jede zweite Linie läuft in die andere Richtung */
.section:nth-of-type(even)::before {
  background-position: 0 0, calc(100% + 170px) 0;
  animation-name: sepSweepRev;
}
@keyframes sepSweepRev { to { background-position: 0 0, -170px 0; } }
/* keine Trennlinie direkt vor und nach "Bekannt aus" */
.trust::before { display: none; }
.trust + .section::before { display: none; }

/* Eyebrow / Mono-Label */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono);
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--grad);
}

/* Section-Head (zentriert = symmetrisch) */
.head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.head .eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--grad); }
.head h2 {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -.02em;
}
.head p { color: var(--muted); margin-top: 20px; font-size: 1.075rem; }
/* Produkte-Überschrift auf einer Zeile (Desktop), Mobile umbrechen */
#produkte .head { max-width: none; }
#produkte .head h2 { white-space: nowrap; }
@media (max-width: 640px) { #produkte .head h2 { white-space: normal; } }

.grad-text {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 100px; font-weight: 600; font-size: .96rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  white-space: nowrap; line-height: 1; will-change: transform;
}
.btn svg { width: 17px; height: 17px; transition: transform .35s var(--ease); }
.btn--primary { background: var(--grad); color: #04130b; box-shadow: var(--glow); }
.btn--primary:hover { box-shadow: 0 0 70px -8px rgba(148,237,133,.65); }
.btn--primary:hover svg { transform: translateX(4px); }
.btn--ghost { border: 1px solid var(--line-2); color: var(--ink); background: rgba(255,255,255,.02); }
.btn--ghost:hover { border-color: var(--lime); background: rgba(148,237,133,.07); }
.btn--lg { padding: 18px 34px; font-size: 1.02rem; }

/* ---------- Navigation ---------- */
/* Wrapper der Header-Komponente aus dem Layout nehmen, damit position:sticky
   des Headers relativ zum <body> wirkt (sonst klebt er nur im Wrapper). */
#site-header { display: contents; }
/* Header als schwebende Insel in Content-Breite */
.nav {
  position: sticky; top: 0; z-index: 100; padding: 14px 24px 0;
  transition: transform .65s cubic-bezier(.4, 0, .2, 1);
  /* Eigener GPU-Layer: verhindert Zucken/Flackern, wenn im Hintergrund
     etwas animiert ist (Lottie, Partikel). Sonst wird der sticky-Header
     bei jedem Frame neu zusammengesetzt. */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
.nav--hidden { transform: translateY(-130%) translateZ(0); }   /* beim Runterscrollen ausgefahren */
.nav__inner {
  position: relative; max-width: var(--container); margin-inline: auto;
  padding: 11px 12px 11px 22px; border-radius: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: rgba(13, 24, 18, .5); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--line-2);
  box-shadow: none;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* rotierender Leucht-Bogen als animierter Rahmen */
.nav__inner::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--nav-a), transparent 0deg, transparent 205deg, var(--mint) 285deg, var(--lime) 325deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; animation: navBorder 5s linear infinite;
  /* eigener Compositing-Layer → Repaints des animierten Rahmens triggern NICHT
     das Neu-Sampeln des backdrop-filter im .nav__inner (behebt das Zittern). */
  transform: translateZ(0); will-change: transform;
}
@property --nav-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes navBorder { to { --nav-a: 360deg; } }
.nav.scrolled .nav__inner { background: rgba(10, 19, 14, .72); box-shadow: 0 20px 54px -20px rgba(0,0,0,.92); }
.nav__logo img { height: 38px; width: auto; transform: translateY(2px); }
.nav__menu { display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 13px; font-family: var(--ff-mono); font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  transition: color .25s var(--ease);
}
/* Gradient-Unterstrich, der beim Hover von links gezeichnet wird */
.nav__link::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px;
  background: var(--grad); border-radius: 2px; box-shadow: 0 0 6px rgba(148,237,133,.5);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav__link:has(.chev)::after { right: 31px; }   /* Linie endet vor dem Pfeil, nur unter dem Text */
.nav__link:hover, .nav__item:hover .nav__link, .nav__item.is-open .nav__link { color: var(--ink); }
.nav__link:hover::after, .nav__item:hover .nav__link::after, .nav__item.is-open .nav__link::after { transform: scaleX(1); }
/* Roll-Effekt: Text rollt hoch, Gradient-Version rollt von unten nach */
.nav__txt { display: inline-block; overflow: hidden; vertical-align: middle; }
.nav__txt__roll { display: inline-block; position: relative; transition: transform .45s var(--ease); }
.nav__txt__roll::after {
  content: attr(data-text); position: absolute; left: 0; top: 100%; white-space: nowrap;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.nav__link:hover .nav__txt__roll, .nav__item:hover .nav__txt__roll { transform: translateY(-100%); }
.nav__link .chev { width: 11px; height: 11px; opacity: .6; transition: transform .3s var(--ease); }
.nav__item.is-open .chev { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position: absolute; top: calc(100% + 22px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 230px; padding: 12px;
  background: rgba(16, 29, 23, .96); backdrop-filter: blur(20px);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease), transform .3s var(--ease);
}
/* Brücke: schließt den Spalt nach oben, damit hover nie abreißt */
.dropdown::before {
  content: ""; position: absolute; bottom: 100%; left: 0; width: 100%; height: 26px;
}
.nav__item.is-open .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.dropdown--wide { min-width: 460px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }

/* Mega-Dropdown (mehrere Spalten mit Icon-Header) */
.dropdown--mega {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  padding: 0; overflow: hidden;
}
.dropdown--mega-2 { min-width: 500px; grid-template-columns: 1fr 1fr; }
.dropdown--mega-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* Mega-Items: position static damit Dropdown relativ zu .nav__inner positioniert wird */
.nav__item--mega { position: static; }
.nav__item--mega .dropdown--mega {
  left: 0; right: 0;
  top: calc(100% + 10px);
  transform: translateY(8px);
}
.nav__item--mega.is-open .dropdown--mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-col {
  padding: 24px 20px 20px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.mega-col:last-child { border-right: none; }
.mega-col__head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.mega-col__icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(133,225,192,.18), rgba(148,237,133,.10));
  border: 1px solid rgba(133,225,192,.25);
  display: flex; align-items: center; justify-content: center;
}
.mega-col__icon svg { width: 22px; height: 22px; stroke: var(--lime); }
.mega-col__icon--text {
  font-family: var(--ff-mono); font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  color: #fff; background: linear-gradient(135deg, rgba(133,225,192,.35), rgba(148,237,133,.2));
  border-color: rgba(133,225,192,.35);
}
.mega-col__head strong { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.mega-col__desc {
  font-size: .8rem; color: var(--muted-2); line-height: 1.55;
  margin-bottom: 12px; padding: 0 2px;
}
.mega-col a {
  display: block; padding: 8px 10px; border-radius: 8px;
  font-size: .88rem; font-weight: 500; color: var(--muted);
  transition: color .2s, background .2s;
}
.mega-col a:hover { color: var(--lime); background: rgba(148,237,133,.08); }
.dropdown a {
  display: block; padding: 9px 14px; border-radius: 9px; font-size: .9rem; color: var(--muted);
  transition: color .2s, background .2s;
}
.dropdown a:hover { color: var(--lime); background: rgba(148,237,133,.08); }
.dropdown__group-title {
  grid-column: 1 / -1; font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted-2); padding: 10px 14px 4px;
}

.nav__cta { display: flex; align-items: center; gap: 14px; }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); align-items: center; justify-content: center; }
.nav__burger span { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; transition: .3s; }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); transition: .3s; }
.nav__burger span::before { top: -6px; } .nav__burger span::after { top: 6px; }

/* ---------- HERO (Split: Text links / animiertes Logo rechts, 100vh) ---------- */
.hero {
  position: relative; z-index: 2; overflow: hidden;
  min-height: calc(100svh - var(--nav-h));
  display: flex; flex-direction: column;
  padding-block: 0;
}
/* Inhalt zentriert zwischen Header und Ticker, leicht nach oben versetzt */
.hero > .container { margin-block: auto; position: relative; z-index: 3; transform: translateY(-1.6vh); }
/* Animiertes Partikel-Netzwerk (Canvas) im Hero-Hintergrund */
.hero__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.08), #000 72%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.08), #000 72%); }
.hero__inner {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 5vw, 80px); align-items: center; width: 100%;
}
.hero__copy { text-align: left; }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; pointer-events: none; z-index: -1; }
.orb--1 { width: 620px; height: 620px; background: radial-gradient(circle, rgba(133,225,192,.5), transparent 65%); top: -200px; left: 50%; transform: translateX(-50%); animation: float 14s ease-in-out infinite; }
.orb--2 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(148,237,133,.4), transparent 65%); bottom: -120px; left: 12%; animation: float 18s ease-in-out infinite reverse; }
.orb--3 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(133,225,192,.32), transparent 65%); bottom: -80px; right: 10%; animation: float 16s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(0,-40px) scale(1.06); } }

.hero__badge {
  display: inline-flex; align-items: center; gap: 11px; padding: 7px 18px 7px 7px;
  border: 1px solid rgba(148,237,133,.18); border-radius: 100px;
  background: linear-gradient(118deg, rgba(148,237,133,.12), rgba(133,225,192,.04) 60%, rgba(148,237,133,.02));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .74rem; color: var(--muted); margin-bottom: 32px; font-family: var(--ff-mono); letter-spacing: .03em;
  box-shadow: 0 6px 28px -10px rgba(148,237,133,.3), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.hero__badge:hover {
  border-color: rgba(148,237,133,.4);
  box-shadow: 0 8px 34px -8px rgba(148,237,133,.45), inset 0 1px 0 rgba(255,255,255,.07);
  transform: translateY(-1px);
}
.hero__badge b {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 100px; flex: none;
  background: var(--grad); color: #04130b; font-weight: 800; font-size: .72rem; letter-spacing: .07em;
  box-shadow: 0 2px 12px -2px rgba(148,237,133,.55);
}
.hero__badge-txt { white-space: nowrap; }
.hero__badge-txt strong { color: var(--lime); font-weight: 600; }
.hero__badge-txt i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--lime); opacity: .7; vertical-align: middle; margin: 0 3px; }
/* Schmale Screens: Badge vertikal stapeln – Pill mittig oben, Text zentriert darunter */
@media (max-width: 520px) {
  .hero__badge { flex-direction: column; gap: 9px; padding: 13px 22px; border-radius: 20px; text-align: center; }
  .hero__badge-txt { display: block; line-height: 1.55; white-space: normal; }
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: #04130b; box-shadow: 0 0 0 0 rgba(4,19,11,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(4,19,11,.5);} 70%{box-shadow:0 0 0 8px rgba(4,19,11,0);} 100%{box-shadow:0 0 0 0 rgba(4,19,11,0);} }

.hero h1 {
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.04; letter-spacing: -.035em;
  margin-inline: 0;
}
.hero h1 span { display: block; }
/* "Unternehmens-KI" immer in einer Zeile halten */
.hero h1 .grad-text { white-space: nowrap; }
/* "sicher · privat · leistungsstark" – Wort für Wort getippt, Strich folgt danach (JS-gesteuert) */
.hero__tagline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 34px; margin-top: 22px; font-family: var(--ff-display); font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: -.01em; }
.hero__tagline span { position: relative; color: var(--mint); line-height: 1.1; padding-bottom: 8px; white-space: nowrap; }
/* Buchstaben erscheinen nacheinander ("geschrieben") */
.hero__tagline .ch { display: inline-block; opacity: 0; transform: translateY(.14em); transition: opacity .09s linear, transform .18s var(--ease); }
.hero__tagline .ch.on { opacity: 1; transform: none; }
/* blinkender Schreib-Cursor, läuft mit den Buchstaben mit */
.hero__tagline .caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: -.12em; margin: 0 1px; background: var(--lime); box-shadow: 0 0 8px rgba(148,237,133,.8); animation: caret .7s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* Gradient-Linie + Scan-Kopf starten erst, wenn das Wort fertig getippt ist (.drawn) */
/* Dünne Gradient-Linie (Pseudo-Element – rendert zuverlässig schlank) */
.hero__tagline span::after {
  content: ""; position: absolute; left: 0; bottom: 6px; height: 2px; width: 0;
  background: var(--grad); border-radius: 2px; box-shadow: 0 0 4px rgba(148,237,133,.3);
}
.hero__tagline span.drawn::after { animation: drawLine .55s var(--ease) forwards, lineGlow 2.6s ease-in-out .55s infinite; }
/* Leuchtender Scan-Kopf, zieht die Linie und verglüht am Ende */
.hero__tagline span::before {
  content: ""; position: absolute; bottom: 2px; left: 0; width: 10px; height: 10px;
  border-radius: 50%; background: #eafff2; opacity: 0;
  box-shadow: 0 0 12px 3px rgba(148,237,133,.95), 0 0 28px 9px rgba(133,225,192,.5);
}
.hero__tagline span.drawn::before { animation: scanHead .55s var(--ease) forwards; }
@keyframes drawLine { from { width: 0; } to { width: 100%; } }
@keyframes scanHead { 0% { left: 0; opacity: 1; } 78% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes wordGlow { 0% { text-shadow: 0 0 0 rgba(148,237,133,0); } 45% { text-shadow: 0 0 20px rgba(148,237,133,.9); } 100% { text-shadow: 0 0 0 rgba(148,237,133,0); } }
/* Dauerhafter, sanft pulsierender Glow der fertigen Linien */
@keyframes lineGlow {
  0%, 100% { box-shadow: 0 0 3px rgba(148,237,133,.25); }
  50%      { box-shadow: 0 0 8px rgba(148,237,133,.55); }
}
.hero__sub { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 46ch; margin: 20px 0 0; }
.hero__actions { display: flex; gap: 16px; justify-content: flex-start; flex-wrap: nowrap; margin-top: 32px; }

/* Hero-Lauftext (Produkte & Leistungen) – bündig am unteren Hero-Rand */
.hero__ticker { position: relative; z-index: 2; width: 100%; overflow: hidden; border-top: 1px solid var(--line); background: rgba(8,17,13,.4); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.hero__ticker__track { display: flex; align-items: center; width: max-content; padding: 16px 0; animation: ticker 36s linear infinite; }
.hero__ticker span { font-family: var(--ff-mono); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hero__ticker i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); margin: 0 26px; box-shadow: 0 0 10px rgba(148,237,133,.6); }
@keyframes ticker { to { transform: translateX(-33.333%); } }

/* Hero Visual: animiertes NXS-Logo mit Orbits & Partikeln (wie particles.js) */
.hero__visual { position: relative; display: grid; place-items: center; min-height: 440px; perspective: 1100px; animation: heroVisualIn .7s var(--ease) both; }
@keyframes heroVisualIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.logo-stage {
  position: relative; width: min(460px, 92%); aspect-ratio: 1;
  display: grid; place-items: center; transform-style: preserve-3d;
  transition: transform .3s var(--ease);
}
.hero__logo-name { position: absolute; z-index: 3; left: 2%; top: 100%; margin-top: 0.42em; white-space: nowrap;
  text-align: left; letter-spacing: .13em; word-spacing: .14em;
  font-family: var(--ff-display); font-weight: 700; font-size: clamp(.85rem, 1.5vw, 1.3rem);
  color: var(--ink); text-shadow: 0 8px 30px rgba(0,0,0,.6); }
.glow-core { position: absolute; width: 62%; height: 62%; border-radius: 50%; background: radial-gradient(circle, rgba(148,237,133,.45), transparent 66%); filter: blur(34px); animation: pulse-core 5s ease-in-out infinite; }
@keyframes pulse-core { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.14); opacity: 1; } }
/* Logo-Lockup: NXS-Bild + „Next Strategy AI" als eine Einheit (JS animiert das Lockup) */
.hero__logo-lockup {
  position: relative; z-index: 3; width: 74%;
  transform: rotateY(-7deg); will-change: transform; transform-style: preserve-3d;
}
.hero__logo {
  display: block; width: 100%;
  /* Logo weiß einfärben (brightness(0) invert(1)) + grüner Glow */
  filter: brightness(0) invert(1) drop-shadow(0 24px 60px rgba(148,237,133,.5));
}
.orbit { position: absolute; border-radius: 50%; border: 1px dashed var(--line-2); }
.orbit--1 { inset: 2%;  animation: spin 30s linear infinite; }
.orbit--2 { inset: 16%; border-style: dotted; opacity: .55; animation: spin 20s linear infinite reverse; }
.orbit--3 { inset: -12%; border-color: var(--line); animation: spin 44s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.particle { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 14px rgba(148,237,133,.9); z-index: 2; animation: floatP 6s ease-in-out infinite; }
.particle.sm { width: 7px; height: 7px; }
@keyframes floatP { 0%,100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-18px); opacity: 1; } }
.p1 { top: 6%;  left: 50%; animation-delay: 0s; }
.p2 { top: 30%; left: 4%;  animation-delay: .9s; }
.p3 { top: 70%; left: 0%;  animation-delay: 1.8s; }
.p4 { top: 92%; left: 44%; animation-delay: 1.2s; }
.p5 { top: 66%; right: 2%; left: auto; animation-delay: .4s; }
.p6 { top: 24%; right: 6%; left: auto; animation-delay: 1.5s; }

/* Showcase (Laptop) — eigene Sektion unter dem Hero */
.hero__showcase { position: relative; max-width: 940px; margin: 0 auto; }
.hero__showcase::before { content: ""; position: absolute; inset: -8% -4% -30% -4%; background: var(--grad-soft); filter: blur(60px); border-radius: 50%; z-index: -1; }
.hero__frame {
  border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 12px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  box-shadow: var(--shadow); backdrop-filter: blur(6px);
}
.hero__frame img { border-radius: 22px; width: 100%; }

/* ---------- Trust / Bekannt aus ---------- */
.trust { padding-block: 56px; position: relative; z-index: 2; border-block: 1px solid var(--line); }
.trust__label {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  font-family: var(--ff-mono); font-size: .76rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 36px;
}
.trust__label::before, .trust__label::after { content: ""; height: 1px; width: clamp(48px, 14vw, 200px); }
.trust__label::before { background: linear-gradient(90deg, transparent, rgba(148,237,133,.9)); animation: linePulse 2.8s ease-in-out infinite; }
.trust__label::after  { background: linear-gradient(90deg, rgba(148,237,133,.9), transparent); animation: linePulse 2.8s ease-in-out .4s infinite; }
@keyframes linePulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* Logos fest über die volle Breite, weiß – bei Hover farbig */
.trust__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px 54px; }
.trust__logos img { height: 62px; width: auto; opacity: .7; filter: brightness(0) invert(1); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.trust__logos img:hover { opacity: 1; transform: scale(1.14); }

/* ---------- Karten-Grid (Lösungen) ---------- */
.grid { display: grid; gap: 24px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  position: relative; padding: 32px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
  overflow: hidden;
}
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
.card:hover { transform: translateY(-6px); background: var(--surface-2); }
.card:hover::after { opacity: 1; }
.card__ico {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid var(--line-2); margin-bottom: 22px; color: var(--lime);
}
.card__ico svg { width: 26px; height: 26px; }
.card h3 { font-family: var(--ff-display); font-weight: 600; font-size: 1.22rem; margin-bottom: 10px; letter-spacing: -.01em; }
.card p { color: var(--muted); font-size: .96rem; }
.card__num { position: absolute; top: 26px; right: 30px; font-family: var(--ff-mono); font-size: .8rem; color: var(--muted-2); }

/* Produkt-Karten */
.card--product { display: flex; flex-direction: column; }
.card__domain { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .08em; color: var(--mint); margin-bottom: 6px; }
.card--product h3 { margin-bottom: 12px; }
.card__tag { color: var(--ink) !important; font-weight: 600; font-size: 1rem !important; margin-bottom: 18px; }
.card__list { display: flex; flex-direction: column; gap: 11px; margin-bottom: 24px; }
.card__list li { position: relative; padding-left: 22px; color: var(--muted); font-size: .92rem; }
.card__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--lime); font-weight: 600; font-size: .92rem; }
.card__link svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.card--product:hover .card__link svg { transform: translateX(4px); }

/* ---------- Lösungen-Flow (vertikale Zickzack-Timeline) ---------- */
.flow { position: relative; max-width: 1040px; margin: 0 auto; }
.flow::before {
  content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(133,225,192,.6) 10%, rgba(148,237,133,.6) 90%, transparent);
}
.flow__row { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; column-gap: clamp(28px, 4vw, 60px); margin-bottom: clamp(44px, 6vw, 88px); }
.flow__row:last-child { margin-bottom: 0; }
.flow__visual { grid-column: 1; grid-row: 1; position: relative; padding: 12px; border-radius: var(--radius); border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.flow__visual img { width: 100%; border-radius: 14px; display: block; }
.flow__visual::before { content: ""; position: absolute; inset: -12%; background: var(--grad-soft); filter: blur(55px); border-radius: 50%; z-index: -1; }
/* rotierender Leucht-Rahmen wie im Header – leuchtet beim Hover stärker */
.flow__visual::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--flow-a), transparent 0deg, transparent 210deg, var(--mint) 290deg, var(--lime) 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: .55; transition: opacity .4s var(--ease);
  animation: flowBorder 6s linear infinite;
}
.flow__visual:hover { transform: translateY(-5px); box-shadow: 0 26px 64px -26px rgba(0,0,0,.7), 0 0 54px -12px rgba(148,237,133,.45); }
.flow__visual:hover::after { opacity: 1; }
@property --flow-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes flowBorder { to { --flow-a: 360deg; } }
.flow__node {
  grid-column: 2; grid-row: 1; justify-self: center; z-index: 2;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--ff-mono); font-weight: 600; font-size: 1.05rem;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 0 0 6px var(--bg);
  transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease);
}
/* leuchtet auf, wenn die Reihe auf der richtigen Scroll-Höhe ist */
.flow__row.active .flow__node {
  color: #04130b; background: var(--grad); border-color: transparent;
  box-shadow: 0 0 0 6px var(--bg), 0 0 38px -2px rgba(148,237,133,.85);
  transform: scale(1.1);
}
.flow__body { grid-column: 3; grid-row: 1; text-align: center; }
.flow__ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line-2); color: var(--lime); margin: 0 auto 18px; }
.flow__ico svg { width: 24px; height: 24px; }
.flow__body h3 { font-family: var(--ff-display); font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -.01em; margin-bottom: 12px; }
.flow__body p { color: var(--muted); font-size: 1.04rem; max-width: 42ch; margin-inline: auto; text-wrap: balance; }
/* gerade Reihen spiegeln (Zickzack) */
.flow__row:nth-child(even) .flow__visual { grid-column: 3; }
.flow__row:nth-child(even) .flow__body { grid-column: 1; }
@media (max-width: 820px) {
  .flow { max-width: 540px; }
  .flow::before { left: 27px; }
  .flow__row { grid-template-columns: 54px 1fr; column-gap: 20px; row-gap: 18px; margin-bottom: 44px; }
  .flow__node { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .flow__visual, .flow__row:nth-child(even) .flow__visual { grid-column: 2; grid-row: 1; }
  .flow__body, .flow__row:nth-child(even) .flow__body { grid-column: 2; grid-row: 2; text-align: left; }
  .flow__ico, .flow__body p { margin-inline: 0; }
}

/* Edle Badge-Pill (z. B. Produkt · DSGPT) */
.badge-pill {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  padding: 9px 18px; border-radius: 100px; border: 1px solid var(--line-2); background: var(--grad-soft);
  font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; box-shadow: 0 0 30px -12px rgba(148,237,133,.4);
}
.badge-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px rgba(148,237,133,.9); animation: pulseDot 2.2s ease-in-out infinite; }
.badge-pill__sep { color: var(--muted-2); }
.badge-pill strong { font-weight: 700; letter-spacing: .14em; }
@keyframes pulseDot { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }

/* ---------- Use-Cases (Fill-on-Hover Grid) ---------- */
.usecases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.uc { position: relative; overflow: hidden; padding: 32px 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; transition: transform .4s var(--ease), background .4s var(--ease); }
/* einheitlicher Hover wie bei den anderen Karten: anheben + Gradient-Rahmen */
.uc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
.uc:hover { transform: translateY(-6px); background: var(--surface-2); }
.uc:hover::after { opacity: 1; }
/* große Outline-Geisterzahl im Hintergrund (editorial/modern) */
.uc__num { position: absolute; top: 20px; right: 24px; z-index: 0; pointer-events: none; font-family: var(--ff-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--ink); -webkit-text-stroke: 0; transition: color .4s var(--ease), transform .4s var(--ease); }
.uc:hover .uc__num { color: var(--lime); transform: scale(1.06); }
.uc__ico, .uc h3, .uc p, .uc__tag, .uc__link { position: relative; z-index: 1; }
.uc__ico { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line-2); color: var(--lime); margin-bottom: 20px; }
.uc__ico svg { width: 26px; height: 26px; }
.uc h3 { font-family: var(--ff-display); font-weight: 600; font-size: 1.18rem; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 10px; }
.uc p { color: var(--muted); font-size: .95rem; flex: 1; }
.uc__tag {
  margin-top: 16px; align-self: flex-start; display: inline-flex; align-items: center; line-height: 1;
  font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 13px 7px 15px; border-radius: 100px; border: 1px solid var(--line-2);
  color: #c7f7b8; background: rgba(148,237,133,.08); text-shadow: 0 0 8px rgba(148,237,133,.6);
  animation: tagPulse 2.6s ease-in-out infinite;
}
@keyframes tagPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(148,237,133,0); border-color: var(--line-2); } 50% { box-shadow: 0 0 14px -3px rgba(148,237,133,.5); border-color: rgba(148,237,133,.55); } }
.uc--cta { background: var(--grad-soft); border-color: var(--line-2); }
.uc__link { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; color: var(--lime); font-weight: 600; font-size: .92rem; }
.uc__link svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.uc--cta:hover .uc__link svg { transform: translateX(4px); }
@media (max-width: 980px) { .usecases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .usecases { grid-template-columns: 1fr; } }

/* ---------- Technische Vorteile (Intro + Icon-Liste) ---------- */
.vorteile { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.vorteile__intro h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 18px; }
.vorteile__intro p { color: var(--muted); font-size: 1.05rem; max-width: 40ch; }
.vorteile__list { display: flex; flex-direction: column; gap: 12px; }
.adv { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); }
.adv:hover { transform: translateX(6px); border-color: var(--line-2); background: var(--surface-2); }
.adv__ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line-2); color: var(--lime); }
.adv__ico svg { width: 22px; height: 22px; }
.adv h3 { font-family: var(--ff-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: 3px; }
.adv p { color: var(--muted); font-size: .9rem; }
@media (max-width: 900px) { .vorteile { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- DSGPT Bento-Showcase ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(165px, auto); gap: 18px; }
.bento__tile {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); padding: 28px;
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.bento__tile:hover { transform: translateY(-5px); border-color: var(--line-2); background: var(--surface-2); }
.bento__ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line-2); color: var(--lime); margin-bottom: 16px; flex: none; }
.bento__ico svg { width: 22px; height: 22px; }
.bento__tile h3 { font-family: var(--ff-display); font-weight: 600; font-size: 1.18rem; line-height: 1.2; letter-spacing: -.01em; margin-bottom: 8px; }
.bento__tile p { color: var(--muted); font-size: .94rem; }
.bento__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.bento__chips span { font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .02em; padding: 5px 9px; border-radius: 100px; border: 1px solid var(--line-2); background: var(--grad-soft); color: var(--lime); white-space: nowrap; }

/* Großer Showcase mit animiertem DSGPT-Chat + Rahmen */
.bento__showcase { grid-column: 1 / 4; grid-row: 1 / 3; padding: 0; }
.bento__badge { font-family: var(--ff-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; }
.bento__shot { flex: 1; min-height: 0; display: grid; place-items: center; margin: 16px 0; }
.bento__shot img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 14px; }
.bento__showcase-text { color: var(--muted); font-size: .98rem; max-width: 54ch; }
.bento__showcase::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--flow-a), transparent 0deg, transparent 210deg, var(--mint) 290deg, var(--lime) 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .6;
  animation: flowBorder 6s linear infinite;
}
.bento__showcase:hover::after { opacity: 1; }
.bento__showcase:hover { box-shadow: 0 26px 64px -26px rgba(0,0,0,.6), 0 0 54px -14px rgba(148,237,133,.35); }

/* Animierter DSGPT-Chat */
.chat { display: flex; flex-direction: column; height: 100%; padding: 22px 24px; animation: chatFloat 6s ease-in-out infinite; }
@keyframes chatFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.chat__bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); flex: none; }
.chat__bar .bento__badge { font-size: 1.3rem; }
.chat__status { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .06em; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.chat__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(148,237,133,.85); }
.chat__scroll { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding-top: 18px; }
.msg { max-width: 84%; padding: 12px 16px; border-radius: 16px; font-size: .92rem; line-height: 1.45; opacity: 0; transform: translateY(10px); animation: msgIn .4s var(--ease) forwards; }
@keyframes msgIn { to { opacity: 1; transform: none; } }
.msg--user { align-self: flex-end; background: var(--grad); color: #04130b; font-weight: 500; border-bottom-right-radius: 5px; }
.msg--ai { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 5px; }
.msg--typing { display: inline-flex; gap: 5px; align-items: center; }
.msg--typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); animation: chatTyping 1.2s infinite; }
.msg--typing span:nth-child(2) { animation-delay: .2s; }
.msg--typing span:nth-child(3) { animation-delay: .4s; }
@keyframes chatTyping { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Highlight-Kachel "kein Abo" */
.bento__price { grid-column: 4; grid-row: 1; background: linear-gradient(155deg, rgba(133,225,192,.16), rgba(148,237,133,.05)); border-color: var(--line-2); }
.bento__price h3 { font-size: 1.3rem; }
.bento__dsgvo { grid-column: 4; grid-row: 2; }

.dsgpt__cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }

@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .bento__showcase { grid-column: 1 / -1; grid-row: auto; min-height: 360px; }
  .bento__price, .bento__dsgvo { grid-column: auto; grid-row: auto; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento__showcase { min-height: 300px; }
  .dsgpt__cta .btn { width: 100%; }
}

/* ---------- Split-Sektion (50/50, balanciert) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.split--rev .split__media { order: 2; }
.split__media { position: relative; padding: 12px; border-radius: var(--radius); border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.split__media img { border-radius: 14px; width: 100%; display: block; }
/* Workshop-Bild grün einfärben (Duotone), damit es zu den anderen Illustrationen passt */
.split__media--tint img { filter: grayscale(100%) sepia(100%) hue-rotate(72deg) saturate(340%) brightness(.95) contrast(1.05); }
.split__media::before { content: ""; position: absolute; inset: -12%; background: var(--grad-soft); filter: blur(60px); border-radius: 50%; z-index: -1; }
.split__media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--flow-a), transparent 0deg, transparent 210deg, var(--mint) 290deg, var(--lime) 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .55; transition: opacity .4s var(--ease);
  animation: flowBorder 6s linear infinite;
}
.split .split__media:hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 28px 66px -26px rgba(0,0,0,.7), 0 0 56px -12px rgba(148,237,133,.5); }
.split .split__media:hover::after { opacity: 1; }
.split__body h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 22px; }
.split__body > p { color: var(--muted); font-size: 1.05rem; margin-bottom: 28px; }

/* Feature-Liste mit Check */
.checks { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.checks li { display: flex; align-items: center; gap: 14px; font-size: 1rem; }
.checks .tick { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--grad-soft); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--lime); }
.checks .tick svg { width: 14px; height: 14px; }
/* ============================================================
   KI-Beratung (Editorial: Kopf-Split + Vorteils-Grid)
   ============================================================ */
.kib{position:relative;overflow-x:clip}

/* Kopfbereich: editorialer Split */
.kib-head{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(44px,6vw,72px)}
.kib-title{margin:22px 0 0;font-family:var(--ff-display);font-weight:800;font-size:clamp(1.9rem,2.6vw + .8rem,3rem);line-height:1.1;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.kib-lead{margin:0;padding-left:24px;border-left:1px solid var(--line-2);color:var(--muted);font-size:1.05rem;line-height:1.75}

/* Vorteile: 2x2-Grid aus Hairline-Rows */
.kib-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,64px);border-top:1px solid var(--line)}
.kib-item{position:relative;display:grid;grid-template-columns:2.4rem 46px minmax(0,1fr);gap:16px;align-items:center;padding:24px 14px 24px 18px;border-bottom:1px solid var(--line);background-color:rgba(133,225,192,0);transition:background-color .5s var(--ease)}
.kib-item:hover{background-color:rgba(133,225,192,.05)}
.kib-item::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:2px;border-radius:2px;background:var(--grad);transform:scaleY(0);transform-origin:center;transition:transform .45s var(--ease)}
.kib-item:hover::before{transform:scaleY(1)}
.kib-item__num{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;color:var(--muted-2);transition:color .4s var(--ease)}
.kib-item:hover .kib-item__num{color:var(--lime)}
.kib-item__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--radius-sm);border:1px solid var(--line);background:linear-gradient(160deg,var(--surface-2),var(--surface));color:var(--mint);transition:color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.kib-item:hover .kib-item__icon{color:var(--lime);border-color:var(--line-2);box-shadow:var(--glow);transform:translateY(-2px)}
.kib-item__icon svg{width:21px;height:21px}
.kib-item__title{margin:0 0 4px;font-family:var(--ff-display);font-weight:700;font-size:1.05rem;color:var(--ink)}
.kib-item__desc{margin:0;color:var(--muted);font-size:.94rem;line-height:1.5}

/* CTA */
.kib-cta{display:flex;justify-content:center;margin-top:clamp(36px,5vw,52px)}

/* Responsive */
@media (max-width:960px){
  .kib-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:24px}
  .kib-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .kib-head__main{min-width:0}
  .kib .badge-pill{max-width:100%;flex-wrap:wrap;row-gap:4px;white-space:normal;font-size:.62rem;letter-spacing:.14em;padding:8px 14px}
  .kib-lead{padding-left:16px;font-size:1rem}
  .kib-item{grid-template-columns:46px minmax(0,1fr);gap:14px;padding:20px 10px 20px 14px}
  .kib-item__num{display:none}
  .kib-item__icon{width:42px;height:42px}
  .kib-cta .btn{width:100%;justify-content:center;text-align:center;white-space:normal;line-height:1.3}
}

/* Pill-Liste (Vorteile / Use-Cases) */
.pills { display: flex; flex-wrap: wrap; gap: 12px; }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 100px; border: 1px solid var(--line); background: var(--surface); font-size: .92rem; color: var(--ink); transition: border-color .3s, background .3s, transform .3s; }
.pill:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateY(-2px); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }

/* schwebende Live-Badges (Special) */
.float-badge { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px; border-radius: 100px; background: rgba(8,17,13,.86); backdrop-filter: blur(10px); border: 1px solid var(--line-2); font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .05em; color: var(--ink); box-shadow: var(--shadow); white-space: nowrap; }
.float-badge--a { left: -14px; bottom: 26px; animation: badgeFloat 5s ease-in-out infinite; }
.float-badge--b { right: -12px; top: 30px; animation: badgeFloat 6.2s ease-in-out .4s infinite; }
.float-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px rgba(148,237,133,.9); animation: pulseDot 1.8s ease-in-out infinite; }
@keyframes badgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 900px) { .float-badge--a { left: 10px; } .float-badge--b { right: 10px; } }

/* ---------- Voice Agent ---------- */
.voice { position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: clamp(40px, 6vw, 72px); border: 1px solid var(--line-2); background: linear-gradient(150deg, rgba(133,225,192,.07), rgba(16,29,23,.6)); text-align: center; }
.voice__ring { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 28px; display: grid; place-items: center; background: var(--grad); color: #04130b; box-shadow: var(--glow); position: relative; }
.voice__ring svg { width: 40px; height: 40px; }
.voice__ring::before, .voice__ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line-2); animation: ripple 2.6s ease-out infinite; }
.voice__ring::after { animation-delay: 1.3s; }
@keyframes ripple { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.1); opacity: 0; } }
.voice h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 20px; letter-spacing: -.02em; }
.voice p { color: var(--muted); max-width: 62ch; margin: 0 auto 32px; font-size: 1.05rem; }
.voice__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; max-width: 640px; margin-inline: auto; }
/* Voice-Call-Console (Lisa-Avatar + Live-Status + Wellenform + Play) */
.voice__call { display: flex; align-items: center; gap: 22px; max-width: 640px; margin: 36px auto 28px; padding: 18px 22px; border-radius: 22px; border: 1px solid var(--line-2); background: rgba(8,17,13,.55); backdrop-filter: blur(8px); box-shadow: var(--shadow); text-align: left; }
.voice__avatar { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--surface); color: var(--lime); transition: box-shadow .3s var(--ease); }
.voice__avatar svg { width: 28px; height: 28px; }
.voice__avatar::before, .voice__avatar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--lime); opacity: 0; }
.voice__call.playing .voice__avatar { box-shadow: 0 0 26px -4px rgba(148,237,133,.6); }
.voice__call.playing .voice__avatar::before { animation: ripple 2.2s ease-out infinite; }
.voice__call.playing .voice__avatar::after { animation: ripple 2.2s ease-out 1.1s infinite; }
.voice__callinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.voice__status { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .04em; color: var(--muted); }
.voice__statusdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.voice__call.playing .voice__statusdot { background: var(--lime); box-shadow: 0 0 10px rgba(148,237,133,.9); animation: pulseDot 1.4s ease-in-out infinite; }
.voice__wave { display: flex; align-items: center; gap: 3px; height: 36px; }
.voice__wave span { flex: 1; height: 100%; border-radius: 3px; background: var(--grad); opacity: .3; transform: scaleY(.2); }
.voice__call.playing .voice__wave span { animation: waveBar .85s ease-in-out infinite; opacity: 1; }
@keyframes waveBar { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
.voice__callside { flex: none; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.voice__time { font-family: var(--ff-mono); font-size: .74rem; color: var(--muted-2); }
.voice__play { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: none; background: var(--grad); color: #04130b; box-shadow: var(--glow); transition: transform .3s var(--ease); }
.voice__play:hover { transform: scale(1.07); }
.voice__play svg { width: 22px; height: 22px; }
.voice__play .ic-pause { display: none; }
.voice__call.playing .voice__play .ic-play { display: none; }
.voice__call.playing .voice__play .ic-pause { display: block; }
@media (max-width: 560px) { .voice__call { flex-wrap: wrap; justify-content: center; gap: 16px; } .voice__callinfo { order: 3; flex-basis: 100%; } }

/* ---------- Banner (BAFA / CTA) ---------- */
.banner { position: relative; border-radius: var(--radius-lg); padding: clamp(40px,6vw,68px); text-align: center; border: 1px solid var(--line); background: var(--bg-2); overflow: hidden; }
.banner__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(148,237,133,.16), transparent 70%); pointer-events: none; }
.banner__tag { display: inline-block; font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); padding: 7px 16px; border: 1px solid var(--line-2); border-radius: 100px; margin-bottom: 24px; }
.banner h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.7rem); letter-spacing: -.02em; max-width: 22ch; margin-inline: auto; }
.banner p { color: var(--muted); max-width: 60ch; margin: 18px auto 0; font-size: 1.05rem; }
.banner .btn { margin-top: 34px; }

/* ---------- Finaler CTA-Banner (animierte Border + Glow) ---------- */
.cta { position: relative; overflow: hidden; text-align: center; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); border-radius: 28px; border: 1px solid var(--line-2); background: linear-gradient(150deg, rgba(133, 225, 192, .08), rgba(8, 17, 13, .5)); }
.cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: conic-gradient(from var(--flow-a), transparent 0deg, transparent 210deg, var(--mint) 290deg, var(--lime) 330deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: flowBorder 9s linear infinite; }
.cta__orb { position: absolute; width: 340px; height: 340px; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }
.cta__orb1 { background: rgba(133, 225, 192, .22); top: -140px; left: -80px; }
.cta__orb2 { background: rgba(148, 237, 133, .18); bottom: -160px; right: -60px; }
.cta > * { position: relative; z-index: 1; }
.cta h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.02em; margin: 16px 0 14px; }
.cta > p { color: var(--muted); font-size: 1.05rem; max-width: 56ch; margin: 0 auto 24px; }
.cta__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; margin-bottom: 30px; }
.cta__chips span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: .8rem; letter-spacing: .02em; color: var(--ink); padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.cta__chips svg { width: 15px; height: 15px; color: var(--lime); flex: none; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ---------- KI-Bedarfsanalyse (3-Schritt-Prozess) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.step { position: relative; padding: 30px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); transition: transform .4s var(--ease); }
.step::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
.step:hover { transform: translateY(-6px); }
.step:hover::after { opacity: 1; }
.step__num { position: absolute; top: 18px; right: 22px; font-family: var(--ff-display); font-weight: 800; font-size: 2.3rem; line-height: 1; color: var(--ink); -webkit-text-stroke: 0; }
.step__ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 18px; background: var(--grad-soft); border: 1px solid var(--line-2); }
.step__ico svg { width: 24px; height: 24px; color: var(--lime); }
.step h3 { font-family: var(--ff-display); font-weight: 600; font-size: 1.18rem; margin-bottom: 10px; letter-spacing: -.01em; }
.step p { color: var(--muted); font-size: .96rem; line-height: 1.6; }
@media (min-width: 821px) {
  .step:not(:last-child)::before { content: ""; position: absolute; top: 50%; right: -18px; width: 11px; height: 11px; border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2); transform: translateY(-50%) rotate(45deg); z-index: 2; }
}
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* ---------- TV-Beitrag (NDR) Aufwertung ---------- */
.tv__frame { padding: 8px; background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)); border-color: var(--line-2); }
.tv__frame img { border-radius: 13px; }
.tv__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: conic-gradient(from var(--flow-a), transparent 0deg, transparent 210deg, var(--mint) 290deg, var(--lime) 330deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: flowBorder 9s linear infinite; }
.tv__play { inset: 8px; border-radius: 13px; }
.tv__play span { position: relative; }
.tv__play span::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(148, 237, 133, .55); animation: tvPulse 2.4s ease-out infinite; }
@keyframes tvPulse { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.55); opacity: 0; } }
.tv__live { position: absolute; top: 18px; left: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 6px 12px; border-radius: 100px; background: rgba(8, 17, 13, .7); border: 1px solid var(--line-2); backdrop-filter: blur(6px); }
.tv__live i { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 10px #ff5a5a; animation: pulseDot 1.6s ease-in-out infinite; }
.tv__meta { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 26px; }
.tv__meta span { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); padding: 7px 13px; border: 1px solid var(--line); border-radius: 100px; background: var(--card); }
.tv__meta svg { width: 15px; height: 15px; color: var(--lime); flex: none; }

/* ---------- Kontaktsektion: animierter Rahmen ---------- */
.contact { position: relative; }
.contact::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; background: conic-gradient(from var(--flow-a), transparent 0deg, transparent 215deg, var(--mint) 295deg, var(--lime) 335deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .7; animation: flowBorder 12s linear infinite; }

/* ---------- Team-Banner (Karriere) Aufwertung ---------- */
.banner--accent::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: conic-gradient(from var(--flow-a), transparent 0deg, transparent 210deg, var(--mint) 290deg, var(--lime) 330deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: flowBorder 10s linear infinite; }
.banner__perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin-top: 26px; position: relative; }
.banner__perks span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px; background: var(--card); }
.banner__perks svg { width: 14px; height: 14px; color: var(--lime); flex: none; }
.banner--accent .btn { margin-top: 30px; }

/* ---------- Warum wir: Ghost-Nummern ---------- */
.why-grid .card { padding-top: 30px; }
.card__idx { position: absolute; top: 20px; right: 26px; font-family: var(--ff-display); font-weight: 800; font-size: 2rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line-2); pointer-events: none; }

/* ---------- Final CTA Aufwertung ---------- */
.final::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: conic-gradient(from var(--flow-a), transparent 0deg, transparent 210deg, var(--mint) 290deg, var(--lime) 330deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: flowBorder 11s linear infinite; }
.final .badge-pill, .final__rocket, .final h2, .final p, .final__chips, .final .btn { position: relative; z-index: 1; }
.final__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin-top: 28px; }
.final__chips span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px; background: var(--card); }
.final__chips svg { width: 14px; height: 14px; color: var(--lime); flex: none; }

/* ---------- LLM-Strategie (animierter Orbit-Core) ---------- */
.llm { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.llm__copy h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 18px; }
.llm__copy > p { color: var(--muted); font-size: 1.05rem; max-width: 52ch; margin-bottom: 26px; }
.llm__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; }
.llm__stats div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.llm__stats b { display: block; font-family: var(--ff-display); font-weight: 700; font-size: 1rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 3px; }
.llm__stats span { font-size: .8rem; color: var(--muted-2); }

.llm__orbit { position: relative; justify-self: center; width: min(380px, 92%); aspect-ratio: 1; display: grid; place-items: center; }
.llm__glow { position: absolute; inset: 18%; border-radius: 50%; background: var(--grad-soft); filter: blur(50px); }
.llm__ring { position: absolute; border: 1px solid var(--line-2); border-radius: 50%; }
.llm__ring::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px 2px rgba(148, 237, 133, .6); top: -5px; left: calc(50% - 4.5px); }
.llm__ring.r1 { inset: 13%; animation: llmSpin 16s linear infinite; }
.llm__ring.r2 { inset: 2%; animation: llmSpin 24s linear infinite reverse; }
.llm__ring.r3 { inset: 25%; animation: llmSpin 32s linear infinite; }
@keyframes llmSpin { to { transform: rotate(360deg); } }
.llm__core { position: relative; width: 33%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-family: var(--ff-mono); font-weight: 500; font-size: 1.05rem; letter-spacing: .14em; color: var(--ink); background: radial-gradient(circle at 32% 30%, rgba(148, 237, 133, .24), rgba(15, 20, 17, .92)); border: 1px solid var(--line-2); animation: llmPulse 3.6s ease-in-out infinite; }
@keyframes llmPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(148, 237, 133, .22), inset 0 0 30px rgba(148, 237, 133, .1); }
  50% { transform: scale(1.06); box-shadow: 0 0 60px rgba(148, 237, 133, .42), inset 0 0 30px rgba(148, 237, 133, .16); }
}
.llm__chip { position: absolute; font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); white-space: nowrap; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.llm__chip.c1 { top: 1%; left: 50%; transform: translateX(-50%); }
.llm__chip.c2 { bottom: 13%; left: 2%; }
.llm__chip.c3 { bottom: 13%; right: 2%; }
@media (max-width: 900px) { .llm { grid-template-columns: 1fr; gap: 40px; } .llm__orbit { order: -1; } }
@media (max-width: 560px) { .llm__stats { grid-template-columns: 1fr; } }

/* ---------- BAFA-Förderung (Förder-Ring + Count-up) ---------- */
.bafa { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.bafa__body h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 18px; }
.bafa__body > p { color: var(--muted); font-size: 1.05rem; max-width: 46ch; margin-bottom: 24px; }
.bafa__points { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-bottom: 30px; }
.bafa__points span { display: inline-flex; align-items: center; gap: 8px; font-size: .94rem; color: var(--ink); }
.bafa__points svg { width: 16px; height: 16px; color: var(--lime); flex: none; }
.bafa__ring { position: relative; justify-self: center; width: min(300px, 82%); aspect-ratio: 1; display: grid; place-items: center; }
.bafa__ring::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: var(--grad-soft); filter: blur(42px); z-index: -1; }
.bafa__ring svg { width: 100%; height: 100%; }
.bafa__prog { stroke-dasharray: 478; stroke-dashoffset: 478; transition: stroke-dashoffset 1.8s var(--ease); filter: drop-shadow(0 0 8px rgba(148,237,133,.5)); }
.bafa__ring.run .bafa__prog { stroke-dashoffset: 95; }
.bafa__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.bafa__pct { font-family: var(--ff-display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bafa__sub { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
@media (max-width: 900px) { .bafa { grid-template-columns: 1fr; gap: 40px; } .bafa__ring { order: -1; } }

/* ---------- TV-Beitrag ---------- */
.tv__frame { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); display: block; }
.tv__frame img { width: 100%; transition: transform .6s var(--ease); }
.tv__frame:hover img { transform: scale(1.04); }
.tv__play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(0deg, rgba(8,17,13,.6), rgba(8,17,13,.1)); }
.tv__play span { width: 78px; height: 78px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #04130b; box-shadow: var(--glow); transition: transform .4s var(--ease); }
.tv__frame:hover .tv__play span { transform: scale(1.1); }
.tv__play svg { width: 30px; height: 30px; margin-left: 4px; }

/* ---------- Kontakt-Person ---------- */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 5vw, 72px); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(32px, 4vw, 56px); }
.contact__photo { position: relative; }
.contact__photo img { border-radius: var(--radius); width: 100%; border: 1px solid var(--line-2); }
.contact__photo::before { content: ""; position: absolute; inset: -14%; background: var(--grad-soft); filter: blur(50px); z-index: -1; border-radius: 50%; }
.contact h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.02em; margin-bottom: 18px; }
.contact > div > p { color: var(--muted); font-size: 1.05rem; margin-bottom: 26px; }
.contact__meta { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.contact__meta a, .contact__meta span { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: .98rem; }
.contact__meta svg { width: 18px; height: 18px; color: var(--lime); flex: none; }
.contact__check { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.contact__check span { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink); }
.contact__check svg { width: 16px; height: 16px; color: var(--lime); }

/* ---------- News ---------- */
.news-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .4s var(--ease); }
.news-card:hover { transform: translateY(-6px); border-color: var(--line-2); }
.news-card__img { aspect-ratio: 16/10; overflow: hidden; }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
/* Grüne Iso-Illustrationen (transparent) auf dunklem Karten-Glow */
.news-card__img--iso { background: radial-gradient(ellipse at 55% 45%, rgba(148,237,133,.16), transparent 66%); }
.news-card__img--iso img { object-fit: contain; padding: 9%; }
.news-card:hover .news-card__img img { transform: scale(1.05); }
.news-card__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.news-card__tag { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); margin-bottom: 14px; }
.news-card h3 { font-family: var(--ff-display); font-weight: 600; font-size: 1.12rem; line-height: 1.3; margin-bottom: 20px; flex: 1; letter-spacing: -.01em; }
.news-card__more { display: inline-flex; align-items: center; gap: 8px; color: var(--lime); font-weight: 600; font-size: .9rem; }
.news-card__more svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.news-card:hover .news-card__more svg { transform: translateX(4px); }

/* ---------- Final CTA ---------- */
.final { position: relative; text-align: center; border-radius: var(--radius-lg); padding: clamp(56px, 8vw, 110px) clamp(24px,4vw,48px); overflow: hidden; border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(133,225,192,.1), rgba(8,17,13,.4)); }
.final__rocket { width: 86px; margin: 0 auto 28px; }
.final h2 { font-family: var(--ff-display); font-weight: 800; font-size: clamp(2.1rem, 5vw, 3.6rem); letter-spacing: -.03em; line-height: 1.04; max-width: 18ch; margin-inline: auto; }
.final p { color: var(--muted); max-width: 58ch; margin: 24px auto 0; font-size: 1.1rem; }
.final .btn { margin-top: 38px; }

/* ---------- Footer ---------- */
.footer { position: relative; z-index: 2; border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 88px) 36px; margin-top: clamp(60px,8vw,100px); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.footer__brand img { height: 46px; margin-bottom: 22px; }
.footer__brand p { color: var(--muted); font-size: .95rem; max-width: 34ch; }
.footer__social { display: flex; gap: 12px; margin-top: 24px; }
.footer__social a { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); transition: all .3s var(--ease); }
.footer__social a:hover { color: #04130b; background: var(--grad); border-color: transparent; transform: translateY(-3px); }
.footer__social svg { width: 18px; height: 18px; }
.footer__col h4 { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 20px; }
.footer__col a { display: block; color: var(--muted); font-size: .95rem; padding: 7px 0; transition: color .25s, transform .25s; }
.footer__col a:hover { color: var(--lime); transform: translateX(4px); }
.footer__meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 30px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.footer__meta p { color: var(--muted-2); font-size: .88rem; }
.footer__meta nav { display: flex; gap: 24px; }
.footer__meta nav a { color: var(--muted-2); font-size: .88rem; transition: color .25s; }
.footer__meta nav a:hover { color: var(--lime); }
.footer__addr { color: var(--muted); font-size: .9rem; line-height: 1.8; }

/* ---------- Schnellkontakt-Leiste (rechts, vertikal fixiert) ---------- */
.quick-actions {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
}
.qa {
  display: flex; align-items: center; overflow: hidden;
  padding: 14px; border-radius: 100px;
  background: rgba(16,29,23,.85); backdrop-filter: blur(10px);
  border: 1px solid var(--line); color: var(--ink);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.6);
  transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.qa svg { width: 22px; height: 22px; flex: none; color: var(--lime); }
.qa span {
  max-width: 0; opacity: 0; white-space: nowrap; font-weight: 600; font-size: .92rem;
  transition: max-width .4s var(--ease), opacity .3s var(--ease), margin .4s var(--ease);
}
.qa:hover { border-color: var(--line-2); background: var(--surface-2); box-shadow: 0 0 28px -6px rgba(148,237,133,.4); }
.qa:hover span { max-width: 220px; opacity: 1; margin-right: 12px; }
.qa:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
/* Primär-Button (Termin buchen) hervorgehoben */
.qa--primary { background: var(--grad); border-color: transparent; box-shadow: 0 0 30px -8px rgba(148,237,133,.5); }
.qa--primary svg, .qa--primary span { color: #04130b; }
.qa--primary:hover { background: var(--grad); box-shadow: 0 0 40px -6px rgba(148,237,133,.7); }

/* Trenner zwischen Kontakt- und Social-Buttons */
.quick-actions__sep { width: 22px; height: 1px; background: var(--line-2); margin: 4px auto; }

/* ---------- Nach-oben-Button ---------- */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #04130b; background: var(--grad); border: none; box-shadow: 0 12px 32px -8px rgba(148,237,133,.55); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9); transition: opacity .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -8px rgba(148,237,133,.75); }
.to-top svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .to-top { right: 16px; bottom: 16px; } }

/* ---------- Scroll-Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav__menu, .nav__cta .btn { display: none; }
  .nav__burger { display: flex; }
  .nav__menu.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; padding: 14px;
    background: rgba(10,19,14,.98); border: 1px solid var(--line-2); border-radius: 18px;
    backdrop-filter: blur(20px); box-shadow: 0 20px 50px -20px rgba(0,0,0,.85);
  }
  .nav__menu.open .nav__link { justify-content: space-between; }
  .nav__menu.open .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: rgba(255,255,255,.02); margin: 4px 0 8px; min-width: 0; }
  .dropdown--wide { grid-template-columns: 1fr; }
  .dropdown--mega, .dropdown--mega-2, .dropdown--mega-4 { grid-template-columns: 1fr; min-width: 0; transform: none !important; left: 0; right: 0; }
  .mega-col { border-right: none; border-bottom: 1px solid var(--line); padding: 16px 12px; }
  .mega-col:last-child { border-bottom: none; }
  .split, .contact { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  /* Gestackte Split-Sektionen auf Mobile zentrieren (Text + Button), Häkchenlisten links lassen */
  .split__body, .bafa__body, .llm__copy { text-align: center; }
  .split__body .checks { text-align: left; }
  .split__body .badge-pill, .bafa__body .badge-pill, .llm__copy .badge-pill { margin-inline: auto; }
  .hero { min-height: auto; padding-block: clamp(48px,9vw,72px); }
  .hero__inner { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .hero__copy { text-align: center; }
  .hero h1 { max-width: none; margin-inline: auto; }
  .hero__sub { margin-inline: auto; }
  .hero__tagline { justify-content: center; }
  .hero__actions { justify-content: center; }
  .hero__visual { order: -1; min-height: 320px; }
  .logo-stage { width: min(320px, 78%); }
  .quick-actions { right: 12px; gap: 10px; }
  .qa { padding: 12px; }
  .qa svg { width: 20px; height: 20px; }
}
@media (max-width: 640px) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .container { padding-inline: 20px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__meta { flex-direction: column; align-items: flex-start; }
  .voice__actions, .hero__actions { flex-direction: column; }
  .voice__actions .btn, .hero__actions .btn { width: 100%; }
  .trust__logos { justify-content: center; gap: 24px 28px; }
  .trust__logos img { height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__tagline span::after { width: 100%; }       /* Unterstrich statisch sichtbar */
  .hero__tagline span::before { display: none; }     /* Scan-Kopf aus */
}

/* ===== Mobile: schwebende Quick-Actions ausblenden, Kontakt/Social ins Burger-Menü ===== */
.nav__mobile-extra { display: none; }
@media (max-width: 900px) {
  .quick-actions { display: none; }   /* stört beim Scrollen – Links jetzt im Burger-Menü */
  .nav__menu.open .nav__mobile-extra {
    display: flex; flex-direction: column; gap: 2px;
    margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line-2);
  }
  .nav__mobile-label {
    font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted-2); padding: 4px 6px 8px;
  }
  .nav__mobile-link {
    display: flex; align-items: center; gap: 12px; padding: 11px 8px;
    color: var(--ink); font-weight: 500; border-radius: 10px; transition: background .2s;
  }
  .nav__mobile-link:hover { background: rgba(148,237,133,.06); }
  .nav__mobile-link svg { width: 19px; height: 19px; stroke: var(--lime); flex: none; }
  .nav__mobile-social { display: flex; gap: 10px; padding: 12px 6px 4px; }
  .nav__mobile-social a {
    width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line-2);
    display: flex; align-items: center; justify-content: center; color: var(--ink); transition: .2s;
  }
  .nav__mobile-social a:hover { border-color: var(--lime); color: var(--lime); background: rgba(148,237,133,.06); }
  .nav__mobile-social svg { width: 18px; height: 18px; }
}

/* ===== Kontaktformular auf der Startseite (#kontakt) ===== */
.hcf-wrap {
  position: relative;
  margin: 48px 0 0; padding: clamp(32px, 4vw, 56px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
}
.hcf-wrap::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px;
  background: conic-gradient(from var(--flow-a), transparent 0deg, transparent 215deg, var(--mint) 295deg, var(--lime) 335deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: .7; animation: flowBorder 12s linear infinite;
}
.hcf-head { text-align: center; margin-bottom: 28px; }
.hcf-head .badge-pill { margin: 0 auto 16px; }
.hcf-head h3 { font-family: var(--ff-display); font-size: clamp(1.4rem,3vw,1.9rem); font-weight: 700; margin-bottom: 10px; }
.hcf-head p { color: var(--muted); font-size: .95rem; }
.hcf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hcf-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.hcf-field label { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.hcf-field input, .hcf-field textarea {
  width: 100%; padding: 13px 15px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-2); color: var(--ink);
  font-family: inherit; font-size: .95rem; transition: border-color .2s, background .2s, box-shadow .2s;
}
.hcf-field textarea { resize: vertical; min-height: 130px; }
.hcf-field input:focus, .hcf-field textarea:focus { outline: none; border-color: var(--lime); background: rgba(148,237,133,.05); box-shadow: 0 0 0 3px rgba(148,237,133,.12); }
.hcf-field input::placeholder, .hcf-field textarea::placeholder { color: rgba(200,220,210,.35); }
.hcf-consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 22px; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.hcf-consent input { margin-top: 2px; accent-color: #94ed85; width: 16px; height: 16px; flex: none; }
.hcf-consent a { color: var(--lime); text-decoration: underline; }
.hcf .btn { width: 100%; justify-content: center; }
.hcf-note { text-align: center; font-size: .85rem; color: var(--lime); margin-top: 14px; min-height: 18px; }
@media (max-width: 560px) { .hcf-row { grid-template-columns: 1fr; } .hcf-wrap { padding: 24px 18px; } }

/* Voice-Aktionen: die 2 verbleibenden Buttons füllen die volle Breite (Desktop) */
.voice__actions .btn { flex: 1; }
@media (max-width: 640px) { .voice__actions .btn { flex: none; } }

/* Überbreite Deko (Orbs, Ringe, Orbits) innerhalb der Sektionen clippen → kein
   horizontaler Scroll auf Mobile. Bewusst auf den Sektionen, NICHT auf html/body,
   sonst bricht position:sticky des Headers (overflow-x:clip nur auf x → vertikales
   sticky in Sektionen bleibt unberührt). */
.section, .hero, .page-hero { overflow-x: clip; }


/* ======================================================
   SERVICE-SEKTIONEN (.svc-): ruhiges Split-Pattern
   Text-Spalte (Badge + H2 + Absatz + CTA) neben
   vertikaler Hairline-Vorteilsliste. .svc--rev spiegelt.
   ====================================================== */

.svc{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); /* Text minimal breiter */
  gap:clamp(44px,6vw,92px);
  align-items:center;
}
/* Gerade Sektionen: Seiten tauschen */
.svc--rev .svc__copy{order:2}
.svc--rev .svc__list{order:1}

/* --- Text-Spalte --- */
.svc__copy .badge-pill{margin-bottom:22px}
.svc__title{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:clamp(1.65rem,3.4vw,2.35rem);
  line-height:1.16;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 18px;
  text-wrap:balance;
}
.svc__text{
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.75;
  max-width:56ch;
  margin:0 0 30px;
}
.svc__cta{display:flex}

/* --- Vorteils-Liste: Hairline-Rows --- */
.svc__list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
}
.svc__item{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  padding:17px 18px 17px 20px;
  border-bottom:1px solid var(--line);
  transition:background-color .35s var(--ease);
}
/* Einfahrende Gradient-Kante links (wie .kib-item) */
.svc__item::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:var(--grad);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .4s var(--ease);
}
.svc__item:hover{background:rgba(133,225,192,.05)}
.svc__item:hover::before{transform:scaleY(1)}

/* Icon-Kachel 46px */
.svc__icon{
  flex:0 0 46px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  color:var(--mint);
  transition:box-shadow .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.svc__icon svg{width:21px;height:21px}
.svc__item:hover .svc__icon{
  border-color:var(--line-2);
  color:var(--lime);
  box-shadow:0 0 26px -8px rgba(148,237,133,.5); /* dezenter Icon-Glow */
}

/* Einzeiliger Vorteils-Text */
.svc__label{
  color:var(--muted);
  font-size:.99rem;
  line-height:1.45;
  transition:color .35s var(--ease);
}
.svc__item:hover .svc__label{color:var(--ink)}

/* --- Responsive --- */
@media (max-width:960px){
  .svc{
    grid-template-columns:1fr;
    gap:38px;
    align-items:start;
  }
  /* Einspaltig: Text IMMER zuerst, auch bei .svc--rev */
  .svc--rev .svc__copy{order:1}
  .svc--rev .svc__list{order:2}
  .svc__text{margin-bottom:26px}
}
@media (max-width:600px){
  .svc__copy .badge-pill{margin-bottom:18px}
  .svc__title{margin-bottom:14px}
  .svc__item{gap:14px;padding:14px 12px 14px 16px}
  .svc__icon{flex-basis:40px;width:40px;height:40px;border-radius:12px}
  .svc__icon svg{width:19px;height:19px}
  .svc__label{font-size:.94rem}
  /* lange CTA-Labels dürfen umbrechen */
  .svc__cta .btn{white-space:normal;text-align:center}
}

/* Ruhe bewahren */
@media (prefers-reduced-motion:reduce){
  .svc__item,
  .svc__item::before,
  .svc__icon,
  .svc__label{transition:none}
}

/* ============================================================
   Mailbot-Demo-Modal (.mbd-)
   nutzt ausschließlich vorhandene Design-Tokens
   ============================================================ */

.mbd{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:24px;}
.mbd[hidden]{display:none!important;}

.mbd__backdrop{position:absolute;inset:0;background:rgba(4,10,7,.8);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);opacity:0;transition:opacity .3s var(--ease);}
.mbd__panel{position:relative;width:100%;max-width:720px;max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:26px clamp(18px,4vw,34px) 30px;opacity:0;transform:translateY(18px) scale(.97);transition:opacity .3s var(--ease),transform .5s var(--ease);outline:none;}
.mbd--open .mbd__backdrop{opacity:1;}
.mbd--open .mbd__panel{opacity:1;transform:none;}
.mbd__panel::-webkit-scrollbar{width:8px;}
.mbd__panel::-webkit-scrollbar-thumb{background:rgba(160,240,200,.16);border-radius:99px;}

/* Kopf */
.mbd__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.mbd__kicker{display:block;font-family:var(--ff-mono);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin-bottom:6px;}
.mbd__title{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.3rem,3vw,1.6rem);line-height:1.2;color:var(--ink);margin:0;}
.mbd__close{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);}
.mbd__close:hover{color:var(--ink);border-color:var(--line-2);background:rgba(133,225,192,.07);}

/* Schritt-Indikator */
.mbd__steps{display:flex;align-items:center;list-style:none;margin:20px 0 22px;padding:0;}
.mbd__step{display:flex;align-items:center;gap:8px;}
.mbd__step + .mbd__step{flex:1;}
.mbd__step + .mbd__step::before{content:"";flex:1;height:1px;background:var(--line);margin:0 12px;transition:background .4s var(--ease);}
.mbd__step.is-active::before,.mbd__step.is-done::before{background:var(--line-2);}
.mbd__step-dot{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);font-family:var(--ff-mono);font-size:.7rem;font-weight:600;color:var(--muted-2);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);}
.mbd__step.is-active .mbd__step-dot{background:var(--grad);border-color:transparent;color:#08110d;box-shadow:0 0 24px -6px rgba(148,237,133,.4);}
.mbd__step.is-done .mbd__step-dot{border-color:var(--line-2);color:var(--mint);background:rgba(133,225,192,.08);}
.mbd__step-label{font-family:var(--ff-mono);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);transition:color .3s var(--ease);}
.mbd__step.is-active .mbd__step-label{color:var(--ink);}
.mbd__step.is-done .mbd__step-label{color:var(--muted);}

/* Views */
.mbd__view{animation:mbdView .4s var(--ease) both;}
.mbd__view[hidden]{display:none;}
@keyframes mbdView{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.mbd__viewtitle{font-family:var(--ff-mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin:0 0 8px;}
.mbd__lead{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0 0 18px;}

/* Schritt 1: Kacheln */
.mbd__tiles{display:grid;gap:10px;}
.mbd-tile{position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font:inherit;cursor:pointer;overflow:hidden;transition:background .25s var(--ease),border-color .25s var(--ease);}
.mbd-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease);}
.mbd-tile:hover{background:rgba(133,225,192,.05);border-color:var(--line-2);}
.mbd-tile:hover::before,.mbd-tile.is-selected::before{transform:scaleY(1);}
.mbd-tile.is-selected{background:rgba(133,225,192,.07);border-color:var(--line-2);}
.mbd-tile:focus-visible{outline:2px solid var(--mint);outline-offset:2px;}
.mbd-tile__icon{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:linear-gradient(160deg,var(--surface-2),var(--surface));color:var(--mint);transition:box-shadow .3s var(--ease),border-color .3s var(--ease);}
.mbd-tile:hover .mbd-tile__icon,.mbd-tile.is-selected .mbd-tile__icon{border-color:var(--line-2);box-shadow:0 0 24px -6px rgba(148,237,133,.35);}
.mbd-tile__body{flex:1;min-width:0;display:grid;gap:3px;}
.mbd-tile__meta{display:flex;align-items:center;gap:8px;min-width:0;}
.mbd-tile__sender{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mbd-tile__tag{flex:none;font-family:var(--ff-mono);font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);border:1px solid var(--line);border-radius:999px;padding:4px 8px;background:rgba(133,225,192,.06);white-space:nowrap;}
.mbd-tile__subject{font-weight:700;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mbd-tile__preview{color:var(--muted-2);font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mbd-tile__check{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-2);color:transparent;transition:background .25s var(--ease),color .25s var(--ease);}
.mbd-tile.is-selected .mbd-tile__check{background:var(--grad);border-color:transparent;color:#08110d;}

/* Mail-Karte */
.mbd-mail{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2);overflow:hidden;}
.mbd-mail__head{display:grid;gap:6px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);}
.mbd-mail__row{display:flex;gap:10px;min-width:0;font-size:.85rem;align-items:baseline;}
.mbd-mail__key{flex:none;width:56px;font-family:var(--ff-mono);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);}
.mbd-mail__val{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mbd-mail__val--strong{color:var(--ink);font-weight:700;}
.mbd-mail__body{padding:16px;font-size:.88rem;line-height:1.65;color:var(--muted);white-space:pre-line;}
.mbd-mail__badge{justify-self:start;font-family:var(--ff-mono);font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);border:1px solid var(--line-2);border-radius:999px;padding:4px 9px;background:rgba(133,225,192,.08);margin-bottom:2px;}
.mbd-mail--reply{margin-top:6px;border-color:var(--line-2);animation:mbdView .5s var(--ease) both;}

/* Schritt 2: Formular */
.mbd-field{margin:18px 0 4px;}
.mbd-field__label{display:block;font-family:var(--ff-mono);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.mbd-field__input{width:100%;padding:13px 16px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font-family:var(--ff-body);font-size:.95rem;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);}
.mbd-field__input::placeholder{color:var(--muted-2);}
.mbd-field__input:focus{outline:none;border-color:var(--line-2);box-shadow:0 0 0 3px rgba(148,237,133,.12);}
.mbd-field__input.is-invalid{border-color:rgba(255,120,120,.55);}
.mbd-field__input.is-invalid:focus{box-shadow:0 0 0 3px rgba(255,90,90,.12);}
.mbd-field__error{margin:8px 0 0;font-size:.8rem;color:#ff9d9d;}

.mbd-consent{display:flex;align-items:flex-start;gap:11px;margin:14px 0 2px;cursor:pointer;font-size:.82rem;line-height:1.55;color:var(--muted);}
.mbd-consent__box{flex:none;width:19px;height:19px;margin-top:2px;display:grid;place-items:center;border-radius:6px;border:1px solid var(--line-2);background:var(--bg-2);color:transparent;transition:background .2s var(--ease),color .2s var(--ease);}
.mbd-consent input:checked + .mbd-consent__box{background:var(--grad);border-color:transparent;color:#08110d;}
.mbd-consent input:focus-visible + .mbd-consent__box{outline:2px solid var(--mint);outline-offset:2px;}
.mbd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Fußzeilen / Buttons */
.mbd__foot{display:flex;justify-content:flex-end;gap:12px;margin-top:24px;}
.mbd__foot--split{justify-content:space-between;}
.mbd .btn:disabled{opacity:.4;pointer-events:none;}

/* Schritt 3: Pipeline */
.mbd-pipe{list-style:none;margin:8px 0 0;padding:0;}
.mbd-pipe__station{position:relative;display:flex;gap:14px;padding-bottom:22px;opacity:.35;transition:opacity .4s var(--ease);}
.mbd-pipe__station:last-child{padding-bottom:8px;}
.mbd-pipe__station:not(:last-child)::before{content:"";position:absolute;left:17px;top:40px;bottom:4px;width:1px;background:var(--line);}
.mbd-pipe__station.is-active,.mbd-pipe__station.is-done{opacity:1;}
.mbd-pipe__marker{position:relative;width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--muted-2);z-index:1;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);}
.mbd-pipe__num{font-family:var(--ff-mono);font-size:.68rem;font-weight:600;}
.mbd-pipe__spin,.mbd-pipe__mark{position:absolute;inset:0;display:none;place-items:center;}
.mbd-pipe__spin svg{animation:mbdSpin 1s linear infinite;}
@keyframes mbdSpin{to{transform:rotate(360deg);}}
.mbd-pipe__station.is-active .mbd-pipe__marker{border-color:var(--line-2);color:var(--mint);box-shadow:0 0 24px -6px rgba(148,237,133,.35);}
.mbd-pipe__station.is-active .mbd-pipe__num{display:none;}
.mbd-pipe__station.is-active .mbd-pipe__spin{display:grid;}
.mbd-pipe__station.is-done .mbd-pipe__marker{background:var(--grad);border-color:transparent;color:#08110d;}
.mbd-pipe__station.is-done .mbd-pipe__num{display:none;}
.mbd-pipe__station.is-done .mbd-pipe__mark{display:grid;}
.mbd-pipe__station.is-error .mbd-pipe__marker{background:rgba(255,90,90,.12);border:1px solid rgba(255,120,120,.4);color:#ffb4b4;box-shadow:none;}
.mbd-pipe__text{min-width:0;display:grid;gap:3px;padding-top:2px;}
.mbd-pipe__label{font-size:.92rem;font-weight:700;color:var(--ink);}
.mbd-pipe__sub{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.04em;color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Ergebnis */
.mbd-result{margin-top:18px;padding:16px 18px;border-radius:var(--radius-sm);border:1px solid;font-size:.9rem;animation:mbdView .4s var(--ease) both;}
.mbd-result--ok{border-color:var(--line-2);background:rgba(133,225,192,.07);}
.mbd-result--error{border-color:rgba(255,120,120,.35);background:rgba(255,90,90,.08);}
.mbd-result__msg{margin:0;line-height:1.6;color:var(--muted);}
.mbd-result--ok .mbd-result__msg strong{color:var(--ink);}
.mbd-result--error .mbd-result__msg{color:#ffb4b4;}
.mbd-result__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.mbd__fineprint{margin:14px 0 0;font-size:.72rem;line-height:1.5;color:var(--muted-2);}

/* Responsive */
@media (max-width:960px){
  .mbd__panel{padding:24px 20px 26px;}
}
@media (max-width:600px){
  .mbd{padding:12px;}
  .mbd__panel{padding:20px 16px 24px;border-radius:var(--radius);max-height:calc(100dvh - 24px);}
  .mbd__step-label{display:none;}
  .mbd__step + .mbd__step::before{margin:0 8px;}
  .mbd-tile{align-items:flex-start;padding:13px 14px;}
  .mbd-tile__check{display:none;}
  .mbd-tile__subject,.mbd-tile__preview{white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
  .mbd__foot,.mbd__foot--split{flex-direction:column-reverse;}
  .mbd .btn{width:100%;justify-content:center;white-space:normal;}
  .mbd-result__actions .btn{width:100%;}
}

/* Reduzierte Bewegung: alles instant */
@media (prefers-reduced-motion: reduce){
  .mbd,.mbd *,.mbd *::before,.mbd *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0ms!important;}
}

/* ============================================================
   ANFRAGE-WIZARD (.anf-)
   ============================================================ */
.anf-wrap {
  position: relative;
  margin-top: 0;
  padding: 52px;
  background: linear-gradient(165deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.anf-wrap::before {
  content: "";
  position: absolute;
  top: -170px; left: 50%;
  transform: translateX(-50%);
  width: 620px; height: 340px;
  background: radial-gradient(ellipse at center, rgba(148,237,133,.09), transparent 70%);
  pointer-events: none;
}
.anf-head { position: relative; text-align: center; margin-bottom: 44px; }
.anf-head .badge-pill { margin: 0 auto 16px; }
.anf-head h3 { font-family: var(--ff-display); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; margin-bottom: 10px; }
.anf-head p { color: var(--muted); font-size: .95rem; max-width: 560px; margin: 0 auto; }

.anf-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .85fr);
  gap: 48px;
  align-items: start;
}

/* ---------- Fortschritt: Netz-Nodes ---------- */
.anf-prog { position: relative; margin-bottom: 36px; }
.anf-prog__track {
  position: absolute;
  top: 21px; left: 12.5%; right: 12.5%;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
}
.anf-prog__fill {
  display: block;
  height: 100%; width: 0;
  background: var(--grad);
  border-radius: 2px;
  box-shadow: 0 0 14px -2px rgba(148,237,133,.55);
  transition: width .5s var(--ease);
}
.anf-prog__list { list-style: none; display: flex; margin: 0; padding: 0; position: relative; z-index: 1; }
.anf-prog__item { flex: 1; display: flex; justify-content: center; }
.anf-prog__node {
  background: none; border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  cursor: pointer;
  color: var(--muted-2);
  font-family: var(--ff-mono);
}
.anf-prog__node:disabled { cursor: default; opacity: .55; }
.anf-prog__node:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 10px; }
.anf-prog__dot {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: grid; place-items: center;
  font-size: .7rem; letter-spacing: .08em;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.anf-prog__check { display: none; width: 18px; height: 18px; }
.anf-prog__lbl { font-size: .6rem; text-transform: uppercase; letter-spacing: .14em; }
.anf-prog__node.is-active { color: var(--muted); }
.anf-prog__node.is-active .anf-prog__dot {
  border-color: var(--line-2);
  background: var(--surface);
  color: var(--lime);
  box-shadow: 0 0 26px -6px rgba(148,237,133,.55);
}
.anf-prog__node.is-done .anf-prog__dot {
  background: var(--grad);
  border-color: transparent;
  color: #08110d;
}
.anf-prog__node.is-done .anf-prog__num { display: none; }
.anf-prog__node.is-done .anf-prog__check { display: block; }
.anf-prog__node.is-done:not(:disabled):hover .anf-prog__dot { box-shadow: var(--glow); }

/* ---------- Schritte ---------- */
.anf-step { animation: anfStepIn .45s var(--ease); }
@keyframes anfStepIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.anf-step__title { font-family: var(--ff-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; outline: none; }
.anf-step__hint {
  font-family: var(--ff-mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 22px;
}

/* Schritt 1: Chips */
.anf-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.anf-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--ff-body); font-size: .9rem; font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.anf-chip:focus-visible, .anf-card:focus-visible, .anf-opt:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.anf-chip__icon {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  color: var(--mint);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.anf-chip__icon svg { width: 19px; height: 19px; }
.anf-chip:hover { border-color: var(--line-2); background: rgba(133,225,192,.05); color: var(--ink); }
.anf-chip[aria-pressed="true"] {
  border-color: var(--line-2);
  background: var(--grad-soft);
  color: var(--ink);
}
.anf-chip[aria-pressed="true"] .anf-chip__icon {
  background: var(--grad);
  border-color: transparent;
  color: #08110d;
  box-shadow: 0 0 18px -4px rgba(148,237,133,.45);
}

/* Schritt 2: Karten */
.anf-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.anf-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.anf-card:hover { border-color: var(--line-2); background: rgba(133,225,192,.05); }
.anf-card__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  color: var(--mint);
  margin-bottom: 8px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.anf-card__icon svg { width: 19px; height: 19px; }
.anf-card__val { font-family: var(--ff-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.anf-card__sub { font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.anf-card[aria-checked="true"] {
  border-color: var(--line-2);
  background: var(--grad-soft);
}
.anf-card[aria-checked="true"] .anf-card__icon {
  background: var(--grad);
  border-color: transparent;
  color: #08110d;
  box-shadow: 0 0 18px -4px rgba(148,237,133,.45);
}

/* Schritt 3: Optionen (Hairline-Rows) */
.anf-opts { display: flex; flex-direction: column; gap: 10px; }
.anf-opt {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--ff-body); font-size: .92rem; font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.anf-opt:hover { border-color: var(--line-2); background: rgba(133,225,192,.05); color: var(--ink); }
.anf-opt__icon {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  color: var(--mint);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.anf-opt__icon svg { width: 17px; height: 17px; }
.anf-opt__label { flex: 1; }
.anf-opt__dot {
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  position: relative;
  transition: border-color .3s var(--ease);
}
.anf-opt__dot::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--grad);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.anf-opt[aria-checked="true"] {
  border-color: var(--line-2);
  background: var(--grad-soft);
  color: var(--ink);
}
.anf-opt[aria-checked="true"] .anf-opt__icon { background: var(--grad); border-color: transparent; color: #08110d; }
.anf-opt[aria-checked="true"] .anf-opt__dot { border-color: var(--lime); }
.anf-opt[aria-checked="true"] .anf-opt__dot::after { opacity: 1; transform: scale(1); }

/* Schritt 4: Felder */
.anf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.anf-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.anf-field label {
  font-family: var(--ff-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-2);
}
.anf-field input, .anf-field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(8,17,13,.55);
  color: var(--ink);
  font-family: var(--ff-body); font-size: .95rem;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.anf-field textarea { resize: vertical; min-height: 110px; }
.anf-field input:focus, .anf-field textarea:focus {
  outline: none;
  border-color: var(--lime);
  background: rgba(148,237,133,.05);
  box-shadow: 0 0 0 3px rgba(148,237,133,.12);
}
.anf-field input::placeholder, .anf-field textarea::placeholder { color: rgba(200,220,210,.35); }
.anf-field input.is-invalid {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 3px rgba(255,107,107,.12);
}
.anf-field__err { min-height: 16px; font-size: .75rem; color: #ff6b6b; }
.anf-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 6px;
  font-size: .82rem; color: var(--muted); line-height: 1.5;
  cursor: pointer;
}
.anf-consent input { margin-top: 2px; accent-color: #94ed85; width: 16px; height: 16px; flex: none; }
.anf-consent a { color: var(--lime); text-decoration: underline; }

/* Meldung + Footer */
.anf-msg { min-height: 20px; margin-top: 14px; font-size: .85rem; color: var(--lime); text-align: center; }
.anf-msg.is-error { color: #ff6b6b; }
.anf-footer { display: flex; justify-content: space-between; gap: 14px; margin-top: 20px; }
.anf-footer #anfNext { margin-left: auto; }

/* Erfolgs-Ansicht */
.anf-success { text-align: center; padding: 44px 12px; animation: anfStepIn .45s var(--ease); }
.anf-success__ring {
  width: 84px; height: 84px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--grad);
  color: #08110d;
  display: grid; place-items: center;
  box-shadow: var(--glow);
  animation: anfPop .6s var(--ease) both;
}
.anf-success__ring svg { width: 38px; height: 38px; }
@keyframes anfPop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.anf-success h4 { font-family: var(--ff-display); font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; outline: none; }
.anf-success p { color: var(--muted); font-size: .95rem; max-width: 420px; margin: 0 auto; }

/* ---------- Live-Terminal ---------- */
.anf-aside { position: sticky; top: 96px; }
.anf-term {
  background: #060d0a;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.anf-term__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.anf-term__dot { width: 10px; height: 10px; border-radius: 50%; }
.anf-term__dot--r { background: #ff5f57; }
.anf-term__dot--y { background: #febc2e; }
.anf-term__dot--g { background: #28c840; }
.anf-term__title {
  margin-left: 10px;
  font-family: var(--ff-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: lowercase;
  color: var(--muted-2);
}
.anf-term__body {
  margin: 0;
  padding: 20px;
  min-height: 290px;
  font-family: var(--ff-mono); font-size: .78rem; line-height: 1.75;
  color: var(--muted);
  overflow-x: auto;
  white-space: pre;
}
.anf-t-key { color: var(--ink); }
.anf-t-str { color: var(--ink); }
.anf-t-p { color: rgba(232,248,240,.55); }
.anf-t-null { color: var(--muted-2); font-style: italic; }
.anf-t-new { display: inline-block; animation: anfValIn .45s var(--ease); }
@keyframes anfValIn {
  from { opacity: .2; }
  to   { opacity: 1; }
}
.anf-cursor {
  display: inline-block;
  width: 8px; height: 1.05em;
  margin-left: 3px;
  vertical-align: text-bottom;
  background: var(--lime);
  animation: anfBlink 1.1s steps(1) infinite;
}
@keyframes anfBlink { 50% { opacity: 0; } }

/* Vertrauens-Badges */
.anf-trust {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 20px;
  margin: 16px 0 0; padding: 0;
}
.anf-trust li {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--ff-mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-2);
}
.anf-trust svg { width: 13px; height: 13px; color: var(--lime); flex: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .anf-wrap { padding: 40px 28px; }
  .anf-grid { grid-template-columns: 1fr; gap: 36px; }
  .anf-aside { position: static; }
}
@media (max-width: 600px) {
  .anf-wrap { padding: 28px 18px; margin-top: 60px; }
  .anf-prog__lbl { display: none; }
  .anf-prog__track { top: 21px; }
  .anf-chips { grid-template-columns: repeat(2, 1fr); }
  .anf-chip { flex-direction: column; align-items: flex-start; gap: 10px; }
  .anf-cards { grid-template-columns: repeat(2, 1fr); }
  .anf-row { grid-template-columns: 1fr; }
  .anf-footer { flex-direction: column-reverse; }
  .anf-footer .btn { width: 100%; justify-content: center; white-space: normal; }
  .anf-term__body { font-size: .72rem; min-height: 0; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .anf-step, .anf-success, .anf-t-new { animation: none; }
  .anf-cursor { animation: none; }
  .anf-success__ring { animation: none; }
  .anf-prog__fill, .anf-chip, .anf-card, .anf-opt, .anf-opt__dot::after, .anf-prog__dot { transition: none; }
}


/* ============================================================
   svc2: Service-Sektion im BAFA-Stil (kurzer Text + animiertes Emblem)
   Alternierend: Standard = Text links / Emblem rechts, .svc2--rev = getauscht
   ============================================================ */
.svc2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.svc2--rev .svc2__body { order: 2; }
.svc2--rev .svc2__viz  { order: 1; }
.svc2__body h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 18px; }
.svc2__body > p { color: var(--muted); font-size: 1.05rem; max-width: 48ch; margin-bottom: 26px; }
.svc2__points { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-bottom: 30px; }
.svc2__points span { display: inline-flex; align-items: center; gap: 8px; font-size: .94rem; color: var(--ink); }
.svc2__points svg { width: 16px; height: 16px; color: var(--lime); flex: none; }
.svc2__viz { position: relative; justify-self: center; width: min(340px, 90%); aspect-ratio: 1; display: grid; place-items: center; }
/* Bild links (gespiegelte Sektionen): zum linken Rand statt zentriert */
.svc2--rev .svc2__viz { justify-self: start; }
.svc2__viz::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: var(--grad-soft); filter: blur(46px); z-index: -1; }
.svc2__viz > .svc2viz { position: absolute; inset: 0; width: 100%; height: 100%; }
.svc2__viz svg { width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {
  .svc2, .svc2--rev { grid-template-columns: 1fr; gap: 38px; justify-items: center; }
  .svc2 > * { order: 0 !important; }
  .svc2__viz { order: -1 !important; width: min(260px, 66%); justify-self: center !important; }
  .svc2__body { text-align: center; }
  .svc2__body .badge-pill { margin-inline: auto; }
  .svc2__points { justify-content: center; }
}
@media (max-width: 560px) {
  .svc2__body { text-align: center; }
  .svc2__body .badge-pill { margin-inline: auto; }
  .svc2__points { justify-content: center; }
}

/* ============================================================
   Service-Embleme (svc2viz) – animierte CSS-only Grafiken
   ============================================================ */

/* --- KI-Beratung (zentral, dreht sich nur) --- */
.svc2viz--beratung{position:absolute;inset:0;width:100%;height:100%;display:block;}
.svc2viz--beratung svg{display:block;width:100%;height:100%;}
.svc2viz--beratung circle{transform-box:fill-box;transform-origin:center;will-change:transform;}
.svc2viz--beratung .kib2-ring-dash{animation:kib2-spin 40s linear infinite;}
.svc2viz--beratung .kib2-ring-arc{animation:kib2-spin 10s linear infinite;}
.svc2viz--beratung .kib2-core-dot{animation:kib2-core 5.5s ease-in-out infinite;}
@keyframes kib2-spin{to{transform:rotate(360deg);}}
@keyframes kib2-core{0%,100%{transform:scale(1);opacity:.9;}50%{transform:scale(1.18);opacity:1;}}

/* --- Voice Agent --- */
.svc2viz--voice{position:relative;width:100%;height:100%;display:block;transform:translateZ(0);will-change:transform;}
.svc2viz--voice svg{display:block;}
.svc2viz--voice .v2-halo{transform-origin:100px 100px;animation:voice2-halo 6s ease-in-out infinite;}
.svc2viz--voice .v2-core{transform-origin:100px 100px;animation:voice2-breath 4.5s ease-in-out infinite;}
.svc2viz--voice .v2-phone{transform-origin:100px 100px;animation:voice2-phone 4.5s ease-in-out infinite;}
.svc2viz--voice .v2-track{stroke-width:1;stroke-dasharray:2 8;transform-origin:100px 100px;animation:voice2-spin 26s linear infinite;}
.svc2viz--voice .v2-wave{stroke-width:1.6;transform-origin:100px 100px;opacity:0;animation:voice2-ping 3.6s cubic-bezier(.22,.61,.36,1) infinite;}
.svc2viz--voice .v2-wave--1{animation-delay:0s;}
.svc2viz--voice .v2-wave--2{animation-delay:1.2s;}
.svc2viz--voice .v2-wave--3{animation-delay:2.4s;}
.svc2viz--voice .v2-bar{transform-origin:center bottom;transform-box:fill-box;animation:voice2-eq 1.4s ease-in-out infinite;}
.svc2viz--voice .v2-bar--1{animation-delay:0s;}
.svc2viz--voice .v2-bar--2{animation-delay:.22s;}
.svc2viz--voice .v2-bar--3{animation-delay:.44s;}
.svc2viz--voice .v2-bar--4{animation-delay:.30s;}
.svc2viz--voice .v2-bar--5{animation-delay:.12s;}
@keyframes voice2-ping{0%{transform:scale(1);opacity:0;}12%{opacity:.55;}100%{transform:scale(2.05);opacity:0;}}
@keyframes voice2-breath{0%,100%{transform:scale(1);}50%{transform:scale(1.035);}}
@keyframes voice2-phone{0%,100%{transform:rotate(0deg);}50%{transform:rotate(-4deg);}}
@keyframes voice2-halo{0%,100%{transform:scale(.94);opacity:.7;}50%{transform:scale(1.06);opacity:1;}}
@keyframes voice2-spin{to{transform:rotate(360deg);}}
@keyframes voice2-eq{0%,100%{transform:scaleY(.35);}50%{transform:scaleY(1);}}

/* --- Chatbot --- */
.svc2viz--chat{display:block;width:100%;height:100%;overflow:visible;}
.svc2viz--chat svg{display:block;transform:translateZ(0);}
.svc2viz--chat .chat2-ring{transform-box:fill-box;transform-origin:center;}
.svc2viz--chat .chat2-ring--2{animation:chat2-spin 34s linear infinite;}
.svc2viz--chat .chat2-bubble{transform-box:fill-box;transform-origin:center;will-change:transform,opacity;}
.svc2viz--chat .chat2-bubble--in{transform-origin:left center;animation:chat2-pop 7s ease-in-out infinite;}
.svc2viz--chat .chat2-bubble--out{transform-origin:right center;animation:chat2-pop 7s ease-in-out infinite;animation-delay:1.15s;}
.svc2viz--chat .chat2-dot{transform-box:fill-box;transform-origin:center;will-change:transform,opacity;animation:chat2-typing 1.5s ease-in-out infinite;}
.svc2viz--chat .chat2-dot--2{animation-delay:0.18s;}
.svc2viz--chat .chat2-dot--3{animation-delay:0.36s;}
@keyframes chat2-pop{0%{transform:scale(0.82);opacity:0;}12%{transform:scale(1.03);opacity:1;}20%{transform:scale(1);opacity:1;}88%{transform:scale(1);opacity:1;}94%{transform:scale(1.015);opacity:1;}100%{transform:scale(1);opacity:1;}}
@keyframes chat2-typing{0%,60%,100%{transform:translateY(0);opacity:0.55;}30%{transform:translateY(-5px);opacity:1;}}
@keyframes chat2-spin{to{transform:rotate(360deg);}}

/* --- n8n Workflow --- */
.svc2viz--flow{display:block;width:100%;height:100%;}
.svc2viz--flow svg{display:block;overflow:visible;}
.svc2viz--flow .flow2-halo{transform-box:fill-box;transform-origin:center;animation:flow2-breathe 6s ease-in-out infinite;}
.svc2viz--flow .flow2-link{opacity:.5;}
.svc2viz--flow .flow2-pulse{stroke-dasharray:14 200;stroke-dashoffset:214;filter:drop-shadow(0 0 3px var(--mint));animation:flow2-travel 3.2s linear infinite;}
.svc2viz--flow .flow2-pulse--1{animation-delay:0s;}
.svc2viz--flow .flow2-pulse--2{animation-delay:.8s;}
.svc2viz--flow .flow2-pulse--3{animation-delay:1.6s;}
.svc2viz--flow .flow2-pulse--4{animation-delay:2.4s;}
.svc2viz--flow .flow2-node{transform-box:fill-box;transform-origin:center;}
.svc2viz--flow .flow2-dot{transform-box:fill-box;transform-origin:center;animation:flow2-receive 3.2s ease-in-out infinite;}
.svc2viz--flow .flow2-node--1 .flow2-dot{animation-delay:0s;}
.svc2viz--flow .flow2-node--2 .flow2-dot{animation-delay:.8s;}
.svc2viz--flow .flow2-node--3 .flow2-dot{animation-delay:1.6s;}
.svc2viz--flow .flow2-node--4 .flow2-dot{animation-delay:2.4s;}
.svc2viz--flow .flow2-core-dot{transform-box:fill-box;transform-origin:center;animation:flow2-pulse-core 3.2s ease-in-out infinite;}
.svc2viz--flow .flow2-core-ring{transform-box:fill-box;transform-origin:center;stroke-dasharray:6 10;opacity:.6;animation:flow2-spin 22s linear infinite;}
@keyframes flow2-travel{from{stroke-dashoffset:214;}to{stroke-dashoffset:0;}}
@keyframes flow2-receive{0%,62%{transform:scale(1);opacity:.6;}70%{transform:scale(1.5);opacity:1;}85%,100%{transform:scale(1);opacity:.6;}}
@keyframes flow2-pulse-core{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.14);opacity:1;}}
@keyframes flow2-breathe{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.08);opacity:1;}}
@keyframes flow2-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* --- Mailbot --- */
.svc2viz--mail{position:absolute;inset:0;width:100%;height:100%;}
.svc2viz--mail svg{display:block;width:100%;height:100%;overflow:visible;}
.svc2viz--mail .mail2-ring{transform-box:fill-box;transform-origin:center;animation:mail2-spin 60s linear infinite;}
.svc2viz--mail .mail2-ring--2{animation:mail2-spin 44s linear infinite reverse;}
.svc2viz--mail .mail2-core{transform-box:fill-box;transform-origin:82px 96px;animation:mail2-breathe 6s ease-in-out infinite;will-change:transform;}
.svc2viz--mail .mail2-glow{transform-box:fill-box;transform-origin:center;animation:mail2-pulse 6s ease-in-out infinite;}
.svc2viz--mail .mail2-fly{transform-box:view-box;opacity:0;will-change:transform,opacity;}
.svc2viz--mail .mail2-fly--a{animation:mail2-fly-a 6s cubic-bezier(.4,0,.2,1) infinite;}
.svc2viz--mail .mail2-fly--b{animation:mail2-fly-b 6s cubic-bezier(.4,0,.2,1) infinite .9s;}
.svc2viz--mail .mail2-fly--c{animation:mail2-fly-c 6s cubic-bezier(.4,0,.2,1) infinite 1.8s;}
.svc2viz--mail .mail2-check{opacity:0;stroke-dasharray:20;stroke-dashoffset:20;}
.svc2viz--mail .mail2-check--a{animation:mail2-check 6s ease-out infinite 1.5s;}
.svc2viz--mail .mail2-check--b{animation:mail2-check 6s ease-out infinite 2.4s;}
.svc2viz--mail .mail2-check--c{animation:mail2-check 6s ease-out infinite 3.3s;}
@keyframes mail2-spin{to{transform:rotate(360deg);}}
@keyframes mail2-breathe{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-2px) scale(1.015);}}
@keyframes mail2-pulse{0%,100%{opacity:.08;}50%{opacity:.20;}}
@keyframes mail2-fly-a{0%,10%{transform:translate(82px,96px) scale(.4);opacity:0;}22%{transform:translate(82px,96px) scale(1);opacity:1;}55%{transform:translate(163px,53px) scale(1);opacity:1;}66%,100%{transform:translate(163px,53px) scale(.4);opacity:0;}}
@keyframes mail2-fly-b{0%,10%{transform:translate(82px,96px) scale(.4);opacity:0;}22%{transform:translate(82px,96px) scale(1);opacity:1;}55%{transform:translate(169px,101px) scale(1);opacity:1;}66%,100%{transform:translate(169px,101px) scale(.4);opacity:0;}}
@keyframes mail2-fly-c{0%,10%{transform:translate(82px,96px) scale(.4);opacity:0;}22%{transform:translate(82px,96px) scale(1);opacity:1;}55%{transform:translate(163px,149px) scale(1);opacity:1;}66%,100%{transform:translate(163px,149px) scale(.4);opacity:0;}}
@keyframes mail2-check{0%,6%{opacity:0;stroke-dashoffset:20;}10%{opacity:1;}24%{opacity:1;stroke-dashoffset:0;}46%,100%{opacity:0;stroke-dashoffset:0;}}

/* --- KI-Plattform --- */
.svc2viz--platform{position:absolute;inset:0;width:100%;height:100%;}
.svc2viz--platform svg{display:block;width:100%;height:100%;overflow:visible;}
.svc2viz--platform .plat2-halo{transform-box:fill-box;transform-origin:center;animation:plat2-halo 6s ease-in-out infinite;}
.svc2viz--platform .plat2-ring{stroke:var(--line,rgba(160,240,200,.12));stroke-width:1;transform-box:fill-box;transform-origin:center;}
.svc2viz--platform .plat2-ring--1{animation:plat2-breathe 7s ease-in-out infinite;}
.svc2viz--platform .plat2-ring--2{stroke:var(--line-2,rgba(148,237,133,.28));animation:plat2-breathe 7s ease-in-out infinite reverse;animation-delay:-3.5s;}
.svc2viz--platform .plat2-orbit{stroke:var(--line,rgba(160,240,200,.12));stroke-width:1;stroke-dasharray:2 7;transform-box:fill-box;transform-origin:center;animation:plat2-spin 40s linear infinite;}
.svc2viz--platform .plat2-satellites{transform-box:fill-box;transform-origin:100px 100px;animation:plat2-spin 24s linear infinite;}
.svc2viz--platform .plat2-sat{transform-box:fill-box;transform-origin:100px 100px;}
.svc2viz--platform .plat2-sat--a{transform:rotate(0deg);}
.svc2viz--platform .plat2-sat--b{transform:rotate(120deg);}
.svc2viz--platform .plat2-sat--c{transform:rotate(240deg);}
.svc2viz--platform .plat2-link{stroke:url(#plat2-grad);stroke-width:1;opacity:.35;stroke-dasharray:3 6;animation:plat2-flow 3.2s linear infinite;}
.svc2viz--platform .plat2-sat--b .plat2-link{animation-delay:-1.1s;}
.svc2viz--platform .plat2-sat--c .plat2-link{animation-delay:-2.2s;}
.svc2viz--platform .plat2-node{fill:url(#plat2-grad);transform-box:fill-box;transform-origin:center;animation:plat2-node 3.2s ease-in-out infinite;}
.svc2viz--platform .plat2-sat--b .plat2-node{animation-delay:-1.1s;}
.svc2viz--platform .plat2-sat--c .plat2-node{animation-delay:-2.2s;}
.svc2viz--platform .plat2-core{transform-box:fill-box;transform-origin:center;animation:plat2-pulse 6s ease-in-out infinite;}
.svc2viz--platform .plat2-core-plate{stroke:url(#plat2-grad);stroke-width:1.4;opacity:.55;}
.svc2viz--platform .plat2-core-fill{fill:url(#plat2-grad);opacity:.14;}
.svc2viz--platform .plat2-core-mark circle{fill:url(#plat2-grad);}
.svc2viz--platform .plat2-core-mark line{stroke:url(#plat2-grad);stroke-width:1;opacity:.5;}
.svc2viz--platform .plat2-core-mark{transform-box:fill-box;transform-origin:center;animation:plat2-mark 6s ease-in-out infinite;}
@keyframes plat2-spin{to{transform:rotate(360deg);}}
@keyframes plat2-halo{0%,100%{opacity:.7;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}
@keyframes plat2-breathe{0%,100%{opacity:.6;transform:scale(1);}50%{opacity:1;transform:scale(1.03);}}
@keyframes plat2-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}
@keyframes plat2-mark{0%,100%{opacity:.75;}50%{opacity:1;}}
@keyframes plat2-flow{to{stroke-dashoffset:-18;}}
@keyframes plat2-node{0%,100%{opacity:.7;transform:scale(1);}50%{opacity:1;transform:scale(1.25);}}

/* --- Reduced Motion: alle Embleme als sauberes Standbild --- */
@media (prefers-reduced-motion: reduce){
  .svc2viz [class*="2-"]{animation:none !important;}
  .svc2viz--voice .v2-wave{opacity:.28;}
  .svc2viz--voice .v2-wave--2{transform:scale(1.4);opacity:.18;}
  .svc2viz--voice .v2-wave--3{transform:scale(1.8);opacity:.1;}
  .svc2viz--mail .mail2-fly{opacity:1;}
  .svc2viz--mail .mail2-fly--a{transform:translate(163px,53px);}
  .svc2viz--mail .mail2-fly--b{transform:translate(169px,101px);}
  .svc2viz--mail .mail2-fly--c{transform:translate(163px,149px);}
  .svc2viz--mail .mail2-check{opacity:1;stroke-dashoffset:0;}
  .svc2viz--flow .flow2-pulse{stroke-dasharray:none;stroke-dashoffset:0;opacity:.7;}
}

/* ============================================================
   Cookie-Consent (DSGVO / TTDSG)
   ============================================================ */
html.ncc-lock { overflow: hidden; }
.footer__cookie-link { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; opacity: .82; transition: color .3s var(--ease), opacity .3s; }
.footer__cookie-link:hover { color: var(--lime); opacity: 1; }

/* Banner (erste Ebene) */
.ncc__banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; padding: 16px clamp(14px, 4vw, 34px); }
.ncc__banner[hidden] { display: none; }
.ncc__banner-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  background: rgba(12,22,17,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: clamp(18px, 2.4vw, 26px);
  box-shadow: 0 -10px 60px -20px rgba(0,0,0,.9), var(--glow); }
.ncc__text strong { display: block; font-family: var(--ff-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; color: var(--ink); }
.ncc__text p { color: var(--muted); font-size: .9rem; line-height: 1.6; margin: 0; }
.ncc__text a { color: var(--lime); text-decoration: underline; }
.ncc__actions { display: flex; gap: 10px; flex: none; }
.ncc__btn { padding: 12px 20px; font-size: .9rem; }
@media (max-width: 820px) {
  .ncc__banner-in { flex-direction: column; align-items: stretch; }
  .ncc__actions { flex-wrap: wrap; }
  .ncc__actions .ncc__btn { flex: 1 1 auto; justify-content: center; white-space: normal; }
}

/* Modal (Einstellungen) */
.ncc__modal { position: fixed; inset: 0; z-index: 3100; display: grid; place-items: center; padding: 20px; }
.ncc__modal[hidden] { display: none; }
.ncc__backdrop { position: absolute; inset: 0; background: rgba(4,10,7,.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ncc__panel { position: relative; width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(165deg, var(--surface), var(--bg-2)); border: 1px solid var(--line-2);
  border-radius: var(--radius-lg); padding: clamp(24px, 3.4vw, 38px); box-shadow: var(--shadow); }
.ncc__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ncc__head .badge-pill { margin: 0; }
.ncc__x { background: none; border: 1px solid var(--line); border-radius: 10px; width: 36px; height: 36px; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; flex: none; transition: border-color .3s, color .3s; }
.ncc__x:hover { border-color: var(--line-2); color: var(--ink); }
.ncc__panel h3 { font-family: var(--ff-display); font-weight: 700; font-size: 1.5rem; margin-bottom: 8px; }
.ncc__intro { color: var(--muted); font-size: .92rem; line-height: 1.6; margin-bottom: 22px; }
.ncc__cats { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.ncc__cat { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.02); cursor: pointer; }
.ncc__cat-txt strong { display: block; font-weight: 700; font-size: .98rem; margin-bottom: 3px; color: var(--ink); }
.ncc__cat-txt span { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.ncc__sw { position: relative; flex: none; width: 46px; height: 26px; }
.ncc__sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ncc__sw-track { position: absolute; inset: 0; border-radius: 100px; background: var(--surface-2); border: 1px solid var(--line-2); transition: background .3s var(--ease); }
.ncc__sw-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .3s var(--ease), background .3s; }
.ncc__sw input:checked + .ncc__sw-track { background: var(--grad); border-color: transparent; }
.ncc__sw input:checked + .ncc__sw-track::after { transform: translateX(20px); background: #04130b; }
.ncc__sw.is-locked { opacity: .7; }
.ncc__sw input:focus-visible + .ncc__sw-track { outline: 2px solid var(--lime); outline-offset: 2px; }
.ncc__foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
@media (max-width: 520px) {
  .ncc__foot { flex-direction: column-reverse; }
  .ncc__foot .ncc__btn { width: 100%; justify-content: center; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .ncc__sw-track, .ncc__sw-track::after { transition: none; }
}