/* ==========================================================================
   ESTATESUITE — STARTSEITE
   Eigenständiges Stylesheet. Die Startseite lädt css/style.css bewusst NICHT
   mehr: style.css versorgt die 16 Astro-Unterseiten, demo.html und die
   Rechtsseiten und benutzt dieselben Tokennamen (--bg, --line, --card) mit
   anderen Werten. Ein Überlagern hätte den Header verändert, der unverändert
   bleiben soll. Getrennte Dateien = keine Kaskadenkollision, kein Risiko für
   die Unterseiten, und die Startseite lädt 43 statt 293 KB.

   Drei Blöcke sind 1:1 aus style.css portiert und sollen exakt gleich
   aussehen wie vorher — Header/Mega-Menü/Mobile-Menü, Logo-Marquee und die
   Datenschutz-Sektion samt Iron-Dome. Ihre Tokens tragen deshalb das Präfix
   --k-* und behalten die Originalwerte aus style.css; sie werden NICHT auf
   das neue Farbsystem umgestellt. Wer dort etwas ändert, muss es in style.css
   gegenprüfen, solange die Unterseiten noch auf dem alten System laufen.
   ========================================================================== */

/* ==========================================================================
   1 · TOKENS
   ========================================================================== */
:root {
  /* ---- Flächen ---- */
  --bg:      #F5F6F8;
  --surf:    #FFFFFF;
  --surf-2:  #FAFBFC;
  --tint:    #EEF1F6;

  /* ---- Text ---- */
  --txt:     #101527;
  --txt-2:   #4E5666;
  /* --txt-3 trägt fast allen Fließtext zweiter Ordnung (Kartentexte,
     Footer-Links, Tabellen-Untertitel). Der Wert der Vorlage (#7E868F) und
     der alte --faint (#98a0b4) lagen beide unter 4,5:1 auf Weiß. #6B7280
     liegt bei 4,83:1 und hält damit WCAG AA auch bei 14px. */
  --txt-3:   #6B7280;

  /* ---- Linien ---- */
  --line:    rgba(16, 21, 39, 0.085);
  --line-2:  rgba(16, 21, 39, 0.15);
  --hair:    rgba(16, 21, 39, 0.055);

  /* ---- Primär: Blau führt ---- */
  --blu:      #2563eb;
  --blu-ink:  #1a3c79;
  --blu-deep: #0d2249;
  --blu-lt:   #7EA4F4;
  --blu-sf:   #E6EDFF;
  --blu-br:   rgba(37, 99, 235, 0.24);
  --blu-grad: linear-gradient(135deg, #1a3c79, #2563eb 55%, #4f46e5);

  /* ---- Akzent: Gold für Kennzahlen und Wärme ---- */
  --gold:    #A96E17;
  --gold-2:  #E9B75E;
  --gold-3:  #F6D8A0;
  --gold-sf: #FDF5E7;
  --gold-br: rgba(169, 110, 23, 0.24);

  /* ---- Status: Grün ---- */
  --grn:     #0E7E56;
  --grn-sf:  #E6F5EE;
  --grn-br:  rgba(14, 126, 86, 0.22);
  --grn-lt:  #57D3A3;

  /* ---- Dunkelflächen (identisch zu style.css --ink*, damit die
         Datenschutz-Sektion nahtlos anschließt) ---- */
  --dk:      #070B16;
  --dk-2:    #0C1222;
  --dk-3:    #121A30;
  --dk-line: rgba(143, 165, 215, 0.16);
  --dk-txt:  #97A2B8;

  /* ---- Karten & Schatten ---- */
  --card:    linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 100%);
  --card-h:  linear-gradient(180deg, #FFFFFF 0%, #F6F8FB 100%);
  --edge:    inset 0 1px 0 #FFFFFF;
  --lift:    0 1px 2px rgba(16, 21, 39, 0.05), 0 10px 24px -14px rgba(16, 21, 39, 0.16);
  --lift-2:  0 2px 6px rgba(16, 21, 39, 0.06), 0 34px 72px -30px rgba(16, 21, 39, 0.3);

  /* ---- Typografie ---- */
  /* Kein 'Geist' im Fallback: der Browser lädt es dann tatsächlich mit
     (+29 KB), obwohl es nie zu sehen ist. Systemschrift genügt als Brücke,
     bis die beiden woff2 da sind (font-display: swap). */
  --disp: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Layout ---- */
  --gut:  clamp(18px, 3.5vw, 40px);
  --maxw: 1240px;
  --sec-pad: clamp(64px, 7.5vw, 120px);
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --r-x: 24px;

  /* ======================================================================
     Erhaltungsblock — Originalwerte aus css/style.css (dort Z. 8–85).
     Nur für Header, Mobile-Menü, Marquee und Datenschutz-Sektion.
     ====================================================================== */
  --k-fog:       #f4f6fb;
  --k-text:      #101527;
  --k-muted:     #5b6478;
  --k-faint:     #98a0b4;
  --k-line:      rgba(16, 21, 39, 0.10);
  --k-line-soft: rgba(16, 21, 39, 0.055);
  --k-ink:       #070b16;
  --k-ink-2:     #0c1222;
  --k-ink-3:     #121a30;
  --k-text-d:    #eef1f8;
  --k-muted-d:   #97a2b8;
  --k-line-d:    rgba(143, 165, 215, 0.16);
  --k-navy:      #0d2249;
  --k-blue:      #2563eb;
  --k-blue-bright: #7ea4f4;
  --k-blue-ink:  #1a3c79;
  --k-blue-soft: #e6edff;
  --k-grad:      linear-gradient(135deg, #1a3c79, #2563eb 55%, #4f46e5);
  --k-ok:        #16a34a;
  --k-ok-bright: #5fd9a2;
  --k-shadow-lg: 0 32px 80px -36px rgba(16, 21, 39, 0.30);
  --k-shadow-blue: 0 22px 54px -24px rgba(37, 99, 235, 0.42);
  --k-font-display: 'Geist', 'Plus Jakarta Sans', 'Avenir Next', sans-serif;
  --k-font-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', monospace;
  --k-container: 1280px;
  --k-pad: clamp(20px, 4vw, 48px);
  --k-r-lg: 20px;
  --k-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   2 · RESET & BASIS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}

/* Kein overflow-x:hidden auf html/body — das würde position:sticky
   (Header, Zitatkasten in der Diagnose) aushebeln. Überstehende Deko liegt
   stattdessen in .sec-bg, das selbst clippt. */
body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Tabellenziffern NUR in den Spalten, die untereinander fluchten müssen.
   `tnum` zieht in Schibsted Grotesk auch Punkt und Komma auf Ziffernbreite.
   Zwischen Ziffern fällt das nicht auf („349.000 €"), nach einem Buchstaben
   schon: die Kennzahl las sich als „120 Mio . €", die H1 als „vergeben .".
   Deshalb hier nur die reinen Zahlenspalten — nicht .stat-n, .float-v,
   .ref-n oder .panel-c, deren Text Zahl und Wort mischt. */
.row-v, .row-t, .kv b { font-variant-numeric: tabular-nums; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong, b { font-weight: 600; }
::selection { background: rgba(37, 99, 235, 0.18); }

:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Papierkorn — nimmt den großen Flächen die digitale Flachheit */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: 0.028; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   3 · TYPOGRAFIE
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--disp); font-weight: 700; letter-spacing: -0.022em;
  line-height: 1.1; text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); letter-spacing: -0.03em; line-height: 1.07; font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.7rem); letter-spacing: -0.026em; line-height: 1.12; }
h3 { font-size: clamp(1.22rem, 1.8vw, 1.55rem); letter-spacing: -0.02em; line-height: 1.24; }
h4 { font-size: 1.02rem; letter-spacing: -0.012em; font-weight: 600; line-height: 1.36; }

/* Kartenüberschriften sind semantisch h3 (sie hängen direkt unter dem h2 der
   Sektion), optisch aber die kleinere Stufe. Vorher standen hier h4 — das
   übersprang eine Ebene und fiel im Accessibility-Audit als
   „heading-order" durch. */
.dc h3, .fc h3, .stp h3, .dv h3, .pers h3 {
  font-size: 1.02rem; letter-spacing: -0.012em; font-weight: 600; line-height: 1.36;
}

.grad { color: var(--txt); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad {
    background: linear-gradient(168deg, #101527 8%, #1A3C79 58%, #2C4C86 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.lead {
  font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.64;
  color: var(--txt-2); max-width: 58ch; text-wrap: pretty;
}
.sm { font-size: 0.93rem; color: var(--txt-3); line-height: 1.6; }

.tagpill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; color: var(--txt-2);
  padding: 6px 14px 6px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line-2);
  box-shadow: var(--edge), 0 4px 14px -8px rgba(16, 21, 39, 0.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tagpill i {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--gold-2); box-shadow: 0 0 0 3px rgba(233, 183, 94, 0.22);
}

.eyebrow {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--blu-ink); margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 16px; height: 1px; background: var(--blu-br); }
.eyebrow.g { color: var(--grn); }
.eyebrow.g::before { background: var(--grn-br); }
.eyebrow.m { color: var(--txt-3); }
.eyebrow.m::before { background: var(--line-2); }

/* ==========================================================================
   4 · LAYOUT
   ========================================================================== */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

.sec { padding-block: var(--sec-pad); position: relative; }
.sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--line-2) 35%, var(--line-2) 65%, transparent 100%);
}
.sec--el { background: var(--surf); }
.sec--nl::before { display: none; }
.sec > .wrap { position: relative; z-index: 2; }

/* Deko-Ebene: clippt selbst, damit weder body noch .sec overflow brauchen
   (position:sticky bliebe sonst wirkungslos). */
.sec-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(16px); }
.glow--blue { background: radial-gradient(circle, rgba(37, 99, 235, 0.26) 0%, transparent 68%); }
.glow--gold { background: radial-gradient(circle, rgba(233, 183, 94, 0.34) 0%, rgba(233, 183, 94, 0.08) 42%, transparent 70%); }
.glow--grn  { background: radial-gradient(circle, rgba(14, 126, 86, 0.2) 0%, transparent 68%); }

.dots {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.42;
  background-image: radial-gradient(rgba(16, 21, 39, 0.10) 1px, transparent 1px);
  background-size: 30px 30px;
}
/* Raster nur an den Rändern, nie hinter Lesetext */
.dots--edge { -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 26%, transparent 74%, #000 100%);
              mask-image: linear-gradient(90deg, #000 0%, transparent 26%, transparent 74%, #000 100%); }
.dots--top  { -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 55%);
              mask-image: linear-gradient(to bottom, #000 0%, transparent 55%); }

section[id] { scroll-margin-top: 90px; }

.head { max-width: 58ch; margin-bottom: clamp(36px, 4.5vw, 60px); position: relative; z-index: 2; }
.head h2 { margin-bottom: 16px; }
.head--c { margin-inline: auto; text-align: center; }
.head--c .lead { margin-inline: auto; }
.head--w { max-width: none; display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
@media (max-width: 880px) { .head--w { grid-template-columns: 1fr; gap: 18px; } }

/* ==========================================================================
   5 · BUTTONS & LINKS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em; cursor: pointer; position: relative;
  font-family: var(--body); font-weight: 600; font-size: 0.94rem;
  padding: 13px 22px; border-radius: var(--r-s); border: 1px solid transparent;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1), background 0.2s, box-shadow 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.btn-g {
  background: linear-gradient(180deg, #3A7BF5 0%, #2563eb 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 26px -14px rgba(37, 99, 235, 0.7);
}
.btn-g:hover {
  background: linear-gradient(180deg, #2E6DEE 0%, #1a3c79 100%);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 18px 34px -16px rgba(37, 99, 235, 0.8);
}
.btn-o {
  background: var(--surf); color: var(--txt); border-color: var(--line-2);
  box-shadow: var(--edge), 0 2px 8px -4px rgba(16, 21, 39, 0.12);
}
.btn-o:hover {
  border-color: rgba(37, 99, 235, 0.45); color: var(--blu-ink); transform: translateY(-2px);
  box-shadow: var(--edge), 0 10px 22px -12px rgba(16, 21, 39, 0.3);
}
.btn .a { transition: transform 0.2s; }
.btn:hover .a { transform: translateX(3px); }

.tlink {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 600; font-size: 0.93rem; color: var(--blu);
}
.tlink:hover { color: var(--blu-ink); }
.tlink .a { transition: transform 0.2s; }
.tlink:hover .a { transform: translateX(3px); }

/* ==========================================================================
   6 · KARTEN-GRUNDFORM
   ========================================================================== */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--edge), var(--lift); position: relative; overflow: hidden;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, translate 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.card:hover {
  border-color: var(--line-2); background: var(--card-h);
  box-shadow: var(--edge), var(--lift-2); translate: 0 -3px;
}

/* ==========================================================================
   7 · UTILITY-LEISTE
   ========================================================================== */
.util {
  border-bottom: 1px solid var(--line); background: var(--surf);
  font-size: 0.79rem; color: var(--txt-3);
}
.util .wrap { display: flex; justify-content: space-between; align-items: center; gap: 14px; height: 40px; }
.util b { color: var(--txt); font-weight: 600; }
.util-r { display: flex; gap: 22px; align-items: center; }
.util a:hover { color: var(--blu); }
@media (max-width: 960px) { .util-r span:first-child { display: none; } }
@media (max-width: 620px) {
  .util .wrap > span { display: none; }
  .util .wrap { justify-content: center; }
}

/* ==========================================================================
   8 · SCROLL-PROGRESS  (portiert: style.css 297–307)
   ========================================================================== */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 160; pointer-events: none; }
.progress__bar { display: block; height: 100%; background: var(--k-grad); transform: scaleX(0); transform-origin: left; }

/* ==========================================================================
   9 · HEADER / NAV  (portiert: style.css 308–448)
   Bewusst unverändert gegenüber der Vorgängerversion.
   Einzige Abweichung: position:sticky statt fixed, damit die Utility-Leiste
   darüber wegscrollen kann statt vom fixierten Header verdeckt zu werden.
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 150;
  transition: transform 0.5s var(--k-ease), background-color 0.4s var(--k-ease),
              box-shadow 0.4s var(--k-ease), border-color 0.4s var(--k-ease);
  border-bottom: 1px solid transparent;
  background: var(--bg);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--k-line-soft);
  box-shadow: 0 8px 30px -18px rgba(16, 21, 39, 0.18);
}
.nav.is-hidden { transform: translateY(-100%); }
/* Offenes Mobile-Menü: Nav bekommt soliden Hintergrund, damit gescrollter
   Menü-Text nicht sichtbar hinter das transparente Logo läuft. */
.nav.is-menu { background: var(--bg); border-bottom-color: var(--k-line-soft); }

.nav__inner {
  max-width: var(--k-container); margin: 0 auto; padding: 16px var(--k-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.nav__brand { display: inline-flex; align-items: center; flex: none; }
.brand-logo { height: 24px; width: auto; }

.nav__links { display: flex; align-items: center; gap: 10px; }
.nav__link {
  position: relative; white-space: nowrap;
  font-weight: 500; font-size: 15px; color: var(--k-muted);
  padding: 9px 14px; border-radius: 999px;
  transition: color 0.3s var(--k-ease), background-color 0.3s var(--k-ease);
}
.nav__link:hover { color: var(--k-text); background: var(--k-fog); }
.nav__caret { font-size: 10px; opacity: 0.6; }

.nav__actions { display: flex; align-items: center; gap: 18px; }
.nav__lead { display: flex; align-items: center; }
.brand-madein {
  display: inline-flex; align-items: center; gap: 9px;
  margin-left: 20px; padding-left: 20px; border-left: 1px solid var(--k-line);
}
.brand-madein__flag {
  width: 15px; height: 21px; flex: none; border-radius: 2.5px; overflow: hidden;
  background: linear-gradient(90deg, #16171a 0 33.34%, #d10a0a 33.34% 66.67%, #f5c518 66.67% 100%);
  box-shadow: 0 1px 2px rgba(16, 21, 39, 0.18);
}
.brand-madein__txt {
  display: inline-flex; flex-direction: column;
  font-family: var(--k-font-mono);
  font-size: 9.5px; font-weight: 600; line-height: 1.28;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--k-muted);
}
.brand-madein__line { white-space: nowrap; }
@media (max-width: 1120px) { .brand-madein { display: none; } }

.nav__login { font-weight: 500; font-size: 15px; color: var(--k-muted); transition: color 0.3s var(--k-ease); }
.nav__login:hover { color: var(--k-text); }

.nav__burger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--k-line);
}
.nav__burger span {
  display: block; width: 18px; height: 2px; background: var(--k-text); border-radius: 2px;
  transition: transform 0.35s var(--k-ease), opacity 0.35s var(--k-ease);
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Mega-Menü — öffnet per :hover/:focus-within; auf Touch setzt js/shell.js .is-open */
.nav__drop { position: relative; display: inline-flex; align-items: center; }
.nav__dropmenu {
  position: absolute; top: calc(100% + 10px); right: 0;
  display: flex; gap: 36px; min-width: 640px; padding: 26px 30px;
  background: #fff; border: 1px solid var(--k-line-soft); border-radius: var(--k-r-lg);
  box-shadow: var(--k-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.3s var(--k-ease), transform 0.3s var(--k-ease), visibility 0.3s;
}
.nav__drop:hover .nav__dropmenu,
.nav__drop:focus-within .nav__dropmenu,
.nav__drop.is-open .nav__dropmenu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropcol { display: flex; flex-direction: column; gap: 2px; min-width: 170px; }
.nav__drophead {
  font-size: 10px; color: var(--k-faint); letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 8px;
}
.nav__dropcol a {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; color: var(--k-muted);
  padding: 7px 10px; margin-inline: -10px; border-radius: 10px;
  transition: color 0.25s var(--k-ease), background-color 0.25s var(--k-ease);
  white-space: nowrap;
}
.nav__dropcol a:hover { color: var(--k-blue-ink); background: var(--k-blue-soft); }
.nav__dropicon {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.75;
}

/* Header-CTA — in style.css heißt das .btn/.btn--primary/.btn--sm. Auf der
   Startseite ist .btn bereits vom neuen Designsystem belegt (8px-Radius statt
   Pille), deshalb hier als .k-btn geführt. */
.k-btn {
  position: relative; overflow: hidden; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--body); font-weight: 600; font-size: 15.5px; letter-spacing: 0.005em;
  padding: 15px 28px; border-radius: 999px;
  transition: transform 0.35s var(--k-ease), box-shadow 0.35s var(--k-ease),
              background-color 0.35s var(--k-ease), color 0.35s var(--k-ease),
              border-color 0.35s var(--k-ease);
}
.k-btn__label { position: relative; z-index: 1; }
.k-btn__arrow { position: relative; z-index: 1; transition: transform 0.35s var(--k-ease); }
.k-btn:hover .k-btn__arrow { transform: translateX(4px); }
.k-btn--primary { color: #fff; background: var(--k-blue); box-shadow: var(--k-shadow-blue); }
.k-btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.22) 50%, transparent 75%);
  transform: translateX(-100%); transition: transform 0.9s var(--k-ease);
}
.k-btn--primary:hover { background: var(--k-blue-ink); transform: translateY(-2px); }
.k-btn--primary:hover::before { transform: translateX(100%); }
.k-btn--sm { padding: 10px 20px; font-size: 14px; }

/* ---------- Mobile-Menü (portiert: style.css 422–448) ---------- */
.mmenu {
  position: fixed; inset: 0; z-index: 140;
  /* 132px statt der früheren 100px: über dem Header sitzt jetzt die
     Utility-Leiste, der Header endet bei ungescrollter Seite erst bei ~116px.
     Mit 100px lief der Menü-CTA hinter das Logo. */
  background: var(--bg); padding: 132px var(--k-pad) 40px;
  display: flex; flex-direction: column; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity 0.4s var(--k-ease), transform 0.4s var(--k-ease), visibility 0.4s;
}
.mmenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mmenu__links { display: flex; flex-direction: column; }
.mmenu__link {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(28px, 7vw, 40px); letter-spacing: -0.01em;
  padding: 10px 0; border-bottom: 1px solid var(--k-line-soft);
}
.mmenu__idx { font-size: 12px; color: var(--k-faint); }
.mmenu__group { margin: 26px 0 8px; font-size: 11px; color: var(--k-faint); letter-spacing: 0.14em; }
.mmenu__sublink { padding: 11px 0; font-size: 16.5px; color: var(--k-muted); }
/* CTA steht oben im Menü (vor den Links) — fett & prominent. */
.mmenu__cta { margin: 4px 0 26px; font-weight: 800; }
.mmenu__cta .k-btn__label { font-weight: 800; }
.mmenu__foot { margin-top: 24px; font-size: 10.5px; color: var(--k-faint); }

.mono { font-family: var(--k-font-mono); font-size: 0.72em; letter-spacing: 0.08em; }

.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--k-ok); flex: none;
  animation: livePulse 2.2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 163, 107, 0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(15, 163, 107, 0); }
}

/* ==========================================================================
   10 · HERO
   ========================================================================== */
.hero {
  padding-block: clamp(52px, 7vw, 96px) 0;
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 74%);
}
.hero::before { display: none; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-bg .g1 { width: 940px; height: 620px; left: 50%; top: -300px; transform: translateX(-50%); }
.hero-bg .g2 { width: 620px; height: 520px; right: -180px; top: 90px; }
.hero-in { position: relative; z-index: 3; text-align: center; max-width: 900px; margin-inline: auto; }
.hero .tagpill { margin-bottom: 26px; }
.hero h1 { margin-bottom: 24px; }
.hero .lead { margin-inline: auto; margin-bottom: 32px; max-width: 56ch; }
.hero-act { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 20px; }
.hero-fine { font-size: 0.86rem; color: var(--txt-3); }

/* ---------- Produktbühne: freigegebene Einheiten ---------- */
.stage { position: relative; margin-top: clamp(40px, 5vw, 70px); z-index: 3; }
.stage::before {
  content: ''; position: absolute; left: 50%; top: -30px; transform: translateX(-50%);
  width: min(780px, 92%); height: 190px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(37, 99, 235, 0.3) 0%, transparent 70%);
  filter: blur(26px);
}
.panel {
  position: relative; background: var(--surf);
  border: 1px solid var(--line-2); border-radius: var(--r-x); overflow: hidden;
  box-shadow: var(--edge), 0 2px 8px rgba(16, 21, 39, 0.05), 0 44px 90px -40px rgba(16, 21, 39, 0.36);
}
.panel-h {
  display: flex; align-items: center; gap: 11px; padding: 15px 20px;
  border-bottom: 1px solid var(--line); background: var(--surf-2);
}
.panel-h .live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--grn); flex: none;
  box-shadow: 0 0 0 3px rgba(14, 126, 86, 0.18); animation: bk 2.4s infinite;
}
@keyframes bk { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.panel-t { font-weight: 600; font-size: 0.9rem; letter-spacing: -0.02em; }
.panel-c { margin-left: auto; font-size: 0.79rem; color: var(--txt-3); }
.panel-cols {
  display: grid; grid-template-columns: 1fr 130px 120px 110px; gap: 14px;
  padding: 11px 20px; border-bottom: 1px solid var(--hair);
  font-size: 0.72rem; color: var(--txt-3); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; background: var(--surf-2);
}
.panel-cols span:not(:first-child) { text-align: right; }
.list { height: 340px; overflow: hidden; position: relative; }
.list::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, #FFFFFF 0%, transparent 13%, transparent 82%, #FFFFFF 100%);
}
/* Läuft bewusst durch, auch unter der Maus: die Liste ist ein Schaufenster,
   kein Bedienelement. Ein Stopp beim Drüberfahren wirkte wie ein Aussetzer. */
.track { animation: up 42s linear infinite; }
@keyframes up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.row {
  display: grid; grid-template-columns: 1fr 130px 120px 110px; gap: 14px; align-items: center;
  padding: 13px 20px; border-bottom: 1px solid var(--hair); transition: background 0.2s;
}
.row:hover { background: var(--surf-2); }
.row-m { display: flex; align-items: center; gap: 12px; min-width: 0; }
.row-i {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: var(--blu-sf); border: 1px solid var(--blu-br);
  display: grid; place-items: center; color: var(--blu-ink);
}
.row-o { font-weight: 600; font-size: 0.88rem; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-s { font-size: 0.76rem; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.row-v { text-align: right; font-size: 0.85rem; font-weight: 600; letter-spacing: -0.015em; }
.row-t { text-align: right; font-size: 0.8rem; color: var(--txt-3); }
@media (max-width: 760px) {
  .panel-cols, .row { grid-template-columns: 1fr 110px; }
  .row-hide { display: none; }
}
.st {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.74rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--grn-sf); color: var(--grn); border: 1px solid var(--grn-br);
}
.st i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.st.res { background: var(--gold-sf); color: var(--gold); border-color: var(--gold-br); }
.panel-f {
  padding: 13px 20px; border-top: 1px solid var(--line); background: var(--surf-2);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 0.79rem; color: var(--txt-3);
}

/* Schwebende Kennzahlen-Karten */
.float {
  position: absolute; z-index: 5;
  background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line-2);
  border-radius: var(--r-m); padding: 12px 15px;
  box-shadow: var(--edge), 0 20px 40px -18px rgba(16, 21, 39, 0.35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: fl 6s ease-in-out infinite;
}
@keyframes fl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.float-l { font-size: 0.7rem; color: var(--txt-3); font-weight: 600; margin-bottom: 3px; letter-spacing: 0.05em; text-transform: uppercase; }
.float-v { font-family: var(--disp); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.03em; display: flex; align-items: center; gap: 7px; }
.f1 { left: -16px; top: 24%; }
.f2 { right: -18px; bottom: 20%; animation-delay: 1.6s; }
@media (max-width: 900px) { .f1, .f2 { display: none; } }

/* ---------- Kennzahlband ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: clamp(36px, 4vw, 56px); position: relative; z-index: 3; }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px 22px; box-shadow: var(--edge), var(--lift); }
.stat-n { font-family: var(--disp); font-weight: 800; font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -0.028em; line-height: 1; color: var(--txt); }
.stat-l { font-size: 0.83rem; color: var(--txt-3); margin-top: 8px; line-height: 1.35; }

/* ==========================================================================
   11 · LOGO-MARQUEE  (portiert: style.css 743–777, unverändert)
   ========================================================================== */
.marquee {
  padding: 40px 0 56px;
  border-top: 1px solid var(--k-line-soft);
  border-bottom: 1px solid var(--k-line-soft);
  background: var(--bg);
}
/* Label und Text-Logos standen auf --k-faint (#98a0b4) und liefen damit schon
   in der Vorgängerversion unter 4,5:1 — Lighthouse markiert sie als
   Kontrastfehler. Hier auf --txt-2 angehoben (≈6:1); der zurückhaltende
   Eindruck bleibt über Größe, Laufweite und die ausgegraute Logo-Reihe. */
.marquee__label {
  text-align: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--txt-2); margin-bottom: 26px;
}
.marquee__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marqueeMove 44s linear infinite; }
@keyframes marqueeMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Zweite Reihe läuft gegenläufig, damit die beiden Aussagen (Bauträger /
   angebundene Systeme) optisch nicht als eine Liste gelesen werden. */
.marquee__track--rev { animation-direction: reverse; animation-duration: 52s; }
.marquee__label--sub { margin-top: 30px; }
.marquee__group { display: flex; align-items: center; gap: clamp(40px, 6vw, 84px); padding-right: clamp(40px, 6vw, 84px); }
.marquee__logo {
  display: inline-flex; align-items: center; opacity: 0.55; filter: grayscale(1);
  transition: opacity 0.3s var(--k-ease), filter 0.3s var(--k-ease);
}
.marquee__logo:hover { opacity: 1; filter: none; }
.marquee__logo img { height: 30px; width: auto; }
.marquee__logo--text { font-size: 14px; font-weight: 600; color: var(--txt-2); white-space: nowrap; opacity: 1; filter: none; }

/* ==========================================================================
   12 · DIAGNOSE
   ========================================================================== */
.diag { display: grid; grid-template-columns: 1.14fr 0.86fr; gap: clamp(24px, 3vw, 44px); align-items: start; position: relative; z-index: 2; }
@media (max-width: 960px) { .diag { grid-template-columns: 1fr; } }
.dg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .dg { grid-template-columns: 1fr; } }
.dc { padding: clamp(20px, 2.2vw, 26px); }
.dc-n { font-family: var(--disp); font-weight: 700; font-size: 0.76rem; color: var(--gold); letter-spacing: 0.08em; margin-bottom: 14px; }
.dc h3 { margin-bottom: 8px; font-size: 1.04rem; }
.dc p { font-size: 0.91rem; color: var(--txt-3); line-height: 1.55; }

.qbox {
  border-radius: var(--r-l); padding: clamp(24px, 2.8vw, 34px);
  position: sticky; top: 96px; color: #fff;
  background: linear-gradient(165deg, var(--dk-3) 0%, var(--dk) 62%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px -30px rgba(16, 21, 39, 0.6);
  overflow: hidden;
}
.qbox::before {
  content: ''; position: absolute; width: 320px; height: 320px; right: -140px; bottom: -160px;
  background: radial-gradient(circle, rgba(233, 183, 94, 0.28) 0%, transparent 66%);
}
.qbox > * { position: relative; z-index: 2; }
/* relative statt static: mit static verlöre ::before seinen Bezugsrahmen und
   hinge an .diag — der Glow ragte dann 140px über die Seite hinaus und
   erzeugte auf dem Handy horizontales Scrollen. */
@media (max-width: 960px) { .qbox { position: relative; top: auto; } }
.qm { font-family: var(--disp); font-size: 3rem; line-height: 0.55; color: var(--gold-2); display: block; margin-bottom: 16px; }
.qbox .q { font-family: var(--disp); font-weight: 600; font-size: clamp(1.08rem, 1.5vw, 1.26rem); letter-spacing: -0.016em; line-height: 1.44; margin-bottom: 18px; color: #fff; }
.qbox .w { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.13); }
.qbox .a2 { font-size: 0.92rem; color: rgba(255, 255, 255, 0.72); line-height: 1.6; }

/* ==========================================================================
   13 · SÄULEN
   ========================================================================== */
.pil {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(30px, 4.5vw, 70px); align-items: center; padding-block: clamp(44px, 5vw, 72px);
}
.pil > * { min-width: 0; }
.pil + .pil { border-top: 1px solid var(--line); }
@media (max-width: 920px) { .pil { grid-template-columns: 1fr; gap: 30px; } }
.pil h3 { margin-bottom: 14px; }
.pil p { font-size: 1.03rem; color: var(--txt-2); line-height: 1.72; max-width: 44ch; }
.pil .tlink { margin-top: 18px; }
.pil--rev .pc { order: 2; }
@media (max-width: 920px) { .pil--rev .pc { order: 1; } }
.pv { position: relative; }

.mock {
  background: var(--surf); border: 1px solid var(--line-2); border-radius: var(--r-l); padding: 18px;
  box-shadow: var(--edge), 0 2px 8px rgba(16, 21, 39, 0.05), 0 28px 60px -34px rgba(16, 21, 39, 0.34);
}
.mock-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.mock-t { font-weight: 600; font-size: 0.88rem; letter-spacing: -0.02em; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 0.86rem; color: var(--txt-3); }
.kv:last-child { border-bottom: 0; }
.kv b { color: var(--txt); font-weight: 600; text-align: right; }
.kv .hl { color: var(--gold); }

.tl { display: grid; gap: 8px; padding-top: 6px; }
.tli { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-m); font-size: 0.87rem; background: var(--surf-2); border: 1px solid var(--line); }
.tli .dot { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--grn-sf); color: var(--grn); border: 1px solid var(--grn-br); }
.tli .n { font-weight: 600; letter-spacing: -0.015em; }
.tli .c { margin-left: auto; font-size: 0.79rem; color: var(--txt-3); }
.tli.off { opacity: 0.5; background: transparent; border-style: dashed; }
.tli.off .dot { background: var(--tint); color: var(--txt-3); border-color: var(--line); }

.split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; padding-top: 6px; }
.sp { border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; background: var(--surf-2); }
.sp-h { margin: 0 0 11px; font-family: var(--disp); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--txt-3); }
.sp li { font-size: 0.82rem; color: var(--txt-2); padding: 5px 0; display: flex; gap: 8px; align-items: center; }
.sp li i { width: 5px; height: 5px; border-radius: 50%; background: var(--grn); flex: none; box-shadow: 0 0 0 3px rgba(14, 126, 86, 0.14); }
.sp li.off { color: var(--txt-3); text-decoration: line-through; text-decoration-color: rgba(16, 21, 39, 0.25); }
.sp li.off i { background: rgba(16, 21, 39, 0.18); box-shadow: none; }
.spd { width: 1px; background: linear-gradient(180deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent); }

/* ==========================================================================
   14 · MERKMALSKARTEN
   ========================================================================== */
.fg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 920px) { .fg { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .fg { grid-template-columns: 1fr; } }
.fc { padding: clamp(20px, 2.2vw, 26px); }
.fc-i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 16px; background: var(--blu-sf); color: var(--blu-ink); border: 1px solid var(--blu-br); }
.fc h3 { margin-bottom: 8px; }
.fc p { font-size: 0.91rem; color: var(--txt-3); line-height: 1.55; }

/* ==========================================================================
   15 · SCHRITTE
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; z-index: 2; }
@media (max-width: 920px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.stp { padding: clamp(20px, 2.2vw, 26px); position: relative; }
.stp-n {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 16px;
  font-family: var(--disp); font-weight: 700; font-size: 0.85rem; letter-spacing: -0.02em;
  background: var(--tint); color: var(--txt-2); border: 1px solid var(--line);
}
.stp:first-child .stp-n { background: var(--blu-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 14px -8px rgba(37, 99, 235, 0.8); }
.stp h3 { margin-bottom: 8px; }
.stp p { font-size: 0.91rem; color: var(--txt-3); line-height: 1.55; }
.stp-t { display: inline-block; margin-top: 15px; font-size: 0.77rem; font-weight: 600; color: var(--gold); background: var(--gold-sf); border: 1px solid var(--gold-br); padding: 4px 10px; border-radius: 999px; }

/* ==========================================================================
   16 · BAUTRÄGER
   ========================================================================== */
.dev { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 4vw, 60px); align-items: center; position: relative; z-index: 2; }
@media (max-width: 900px) { .dev { grid-template-columns: 1fr; } }
.dev-g { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .dev-g { grid-template-columns: 1fr; } }
.dv { padding: 20px 22px; }
.dv-i { color: var(--blu); margin-bottom: 13px; }
.dv h3 { margin-bottom: 6px; font-size: 0.98rem; }
.dv p { font-size: 0.88rem; color: var(--txt-3); line-height: 1.52; }

/* ==========================================================================
   17 · REFERENZEN
   ========================================================================== */
.refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; position: relative; z-index: 2; }
@media (max-width: 940px) { .refs { grid-template-columns: 1fr; } }
.ref { padding: clamp(24px, 2.5vw, 30px); display: flex; flex-direction: column; }
.ref-q { font-family: var(--disp); font-weight: 600; font-size: 1rem; letter-spacing: -0.012em; line-height: 1.55; margin-bottom: 24px; flex: 1; text-wrap: pretty; }
.ref-m { padding-top: 20px; border-top: 1px solid var(--line); margin-bottom: 20px; }
.ref-n { font-family: var(--disp); font-weight: 800; font-size: 1.95rem; letter-spacing: -0.028em; line-height: 1; color: var(--gold); }
.ref-l { font-size: 0.83rem; color: var(--txt-3); margin-top: 7px; }
.ref-w { display: flex; align-items: center; gap: 11px; }
.ref-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--tint); border: 1px solid var(--line); color: var(--txt-2); font-family: var(--disp); font-weight: 700; font-size: 0.75rem; }
.ref-nm { font-weight: 600; font-size: 0.89rem; letter-spacing: -0.015em; }
.ref-r { font-size: 0.79rem; color: var(--txt-3); }

/* ==========================================================================
   18 · DATENSCHUTZ + IRON-DOME  (portiert: style.css 158–205, 1661–1763)
   Unverändert gegenüber der Vorgängerversion — inklusive der blauen
   Schild-Grafik. --dk == --k-ink, deshalb passt die Fläche zum neuen System.
   ========================================================================== */
.section { padding-block: var(--sec-pad); position: relative; background: var(--bg); }
.section--ink { background: var(--k-ink); color: var(--k-text-d); }
.container { width: 100%; max-width: var(--k-container); margin: 0 auto; padding-inline: var(--k-pad); }

.section__title {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(28px, 3.9vw, 46px); line-height: 1.1; letter-spacing: -0.022em;
  color: var(--k-navy); text-wrap: balance;
}
.section--ink .section__title { color: var(--k-text-d); }
.section__sub { margin-top: 18px; font-size: clamp(16px, 1.5vw, 19px); color: var(--k-muted); max-width: 640px; text-wrap: pretty; }
.section__sub--dark, .section--ink .section__sub { color: var(--k-muted-d); }

.k-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--k-blue-ink); margin-bottom: 20px;
}
.k-eyebrow--dark { color: var(--k-blue-bright); }
.k-eyebrow__dot { width: 8px; height: 8px; border-radius: 2.5px; background: var(--k-grad); flex: none; transform: rotate(45deg); }

.privacy__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.privacy__list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-top: 28px; }
.privacy__list li { position: relative; padding: 9px 0 9px 28px; font-size: 15px; color: var(--k-muted-d); }
.privacy__list li::before { content: "✓"; position: absolute; left: 0; top: 9px; color: var(--k-ok-bright); font-weight: 700; font-size: 13px; }
/* overflow-x: clip gegen den rotierenden .dome__sweep: der ist absolut
   positioniert und wächst beim Drehen über die Dome-Breite hinaus, wodurch
   die Seite auf schmalen Displays um bis zu 28 px horizontal scrollbar wurde.
   Sichtbar geht dabei nichts verloren — der Sweep ist ohnehin auf einen Ring
   innerhalb des Schilds maskiert. `clip` statt `hidden`, damit die Beschriftung
   unterhalb des Schilds (bottom: -46px) weiter herausragen darf. */
.privacy__visual { display: flex; flex-direction: column; align-items: center; gap: 58px; overflow-x: clip; }

/* Iron-Dome: Schutzschild um Deutschland */
.dome { position: relative; width: min(440px, 86vw); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.dome__shield { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dome__ring--1 { transform-origin: center; animation: domeSpin 26s linear infinite; }
.dome__ring--2 { transform-origin: center; animation: domeSpin 40s linear infinite reverse; }
@keyframes domeSpin { to { transform: rotate(360deg); } }
.dome__sweep {
  position: absolute; inset: 3%; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(126, 164, 244, 0) 0deg,
    rgba(126, 164, 244, 0) 285deg,
    rgba(126, 164, 244, 0.10) 330deg,
    rgba(126, 164, 244, 0.34) 358deg,
    rgba(180, 205, 250, 0.55) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 55%, black 56%, black 98%, transparent 99%);
  mask: radial-gradient(farthest-side, transparent 55%, black 56%, black 98%, transparent 99%);
  animation: domeSweep 4.6s linear infinite;
}
@keyframes domeSweep { to { transform: rotate(360deg); } }
.dome__fx { position: absolute; inset: 0; pointer-events: none; }
.dome__threat {
  position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%;
  background: #e07070; box-shadow: 0 0 10px rgba(224, 112, 112, 0.65);
  opacity: 0; will-change: transform, opacity;
}
.dome__ripple {
  position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid rgba(126, 164, 244, 0.85); opacity: 0; will-change: transform, opacity;
}
.dome__blocked {
  position: absolute; left: 0; top: 0;
  font-family: var(--k-font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--k-ok-bright); background: rgba(22, 163, 74, 0.14);
  border: 1px solid rgba(95, 217, 162, 0.4);
  padding: 3px 8px; border-radius: 999px;
  opacity: 0; white-space: nowrap; will-change: transform, opacity;
}
.dome__label {
  position: absolute; bottom: -46px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 9px; letter-spacing: 0.12em; color: var(--k-muted-d);
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--k-line-d);
  white-space: nowrap;
}
.dome .vault__core { width: 54%; position: relative; z-index: 2; }
.vault__core {
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle at 50% 32%, var(--k-ink-3), var(--k-ink-2) 72%);
  border: 1px solid var(--k-line-d);
  box-shadow: inset 0 0 60px -20px rgba(37, 99, 235, 0.35), 0 40px 90px -40px rgba(0, 0, 0, 0.8);
  text-align: center;
}
.vault__flag { font-size: 30px; }
/* Einzige Abweichung im Erhaltungsblock: Das Wort „Deutschland" im Kern des
   Schutzschilds lief auf Geist. Geist wurde sonst nirgends mehr gebraucht —
   für ein Wort hätte der Browser 29 KB nachgeladen. Jetzt die Display-Schrift
   der Seite. Zum Zurückdrehen: var(--k-font-display). */
.vault__title { font-family: var(--disp); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; }
.vault__sub { font-size: 9.5px; color: var(--k-muted-d); }
.vault__status { display: inline-flex; align-items: center; gap: 7px; font-size: 9px; color: var(--k-ok-bright); margin-top: 6px; }

.privacy__badges { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.k-badge {
  font-size: 9.5px; letter-spacing: 0.1em; color: var(--k-muted-d);
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--k-line-d); background: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   19 · SYSTEM-CHIPS
   ========================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 2; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--edge), 0 2px 8px -4px rgba(16, 21, 39, 0.12);
  font-size: 0.9rem; font-weight: 500; color: var(--txt-2);
  transition: border-color 0.22s, color 0.22s, translate 0.22s, box-shadow 0.22s;
}
a.chip:hover { border-color: var(--blu-br); color: var(--blu-ink); translate: 0 -2px; box-shadow: var(--edge), 0 10px 20px -10px rgba(16, 21, 39, 0.25); }
.chip .ci { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; background: var(--blu-sf); color: var(--blu-ink); border: 1px solid var(--blu-br); }

/* ==========================================================================
   20 · FAQ
   ========================================================================== */
.faq { max-width: 880px; display: grid; gap: 9px; position: relative; z-index: 2; }
.qa {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
  box-shadow: var(--edge), var(--lift); overflow: hidden;
  transition: border-color 0.22s, box-shadow 0.22s;
}
.qa[open] { border-color: var(--blu-br); box-shadow: var(--edge), var(--lift-2); }
.qa summary {
  list-style: none; cursor: pointer; padding: 20px 58px 20px 22px; position: relative;
  font-family: var(--disp); font-weight: 600; font-size: 1.01rem; letter-spacing: -0.012em;
  line-height: 1.42; transition: color 0.18s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--blu); }
.qa summary:focus-visible { outline: 2px solid var(--blu); outline-offset: -3px; }
.qa summary::after {
  content: ''; position: absolute; right: 20px; top: 50%; width: 24px; height: 24px;
  margin-top: -12px; border-radius: 7px; background-color: var(--tint);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 10px 1.6px, 1.6px 10px; background-position: center, center; background-repeat: no-repeat;
  color: var(--txt-2);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), background-color 0.2s, color 0.2s;
}
.qa[open] summary::after { transform: rotate(135deg); background-color: var(--blu-sf); color: var(--blu); }
.qa-a { padding: 0 56px 22px 22px; color: var(--txt-3); font-size: 0.94rem; line-height: 1.68; }
.qa-a p + p { margin-top: 11px; }
.qa-a a { color: var(--blu); font-weight: 600; }

/* ==========================================================================
   21 · TEAM
   ========================================================================== */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; z-index: 2; }
@media (max-width: 820px) { .people { grid-template-columns: 1fr; } }
.pers { padding: clamp(22px, 2.5vw, 30px); display: flex; gap: 18px; align-items: flex-start; }
.pers-av {
  width: 52px; height: 52px; border-radius: var(--r-m); flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: var(--blu-grad); color: #fff;
  font-family: var(--disp); font-weight: 800; font-size: 0.96rem; letter-spacing: -0.03em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.pers-av img { width: 100%; height: 100%; object-fit: cover; }
.pers h3 { font-size: 1.05rem; margin-bottom: 3px; }
.pers .rl { font-size: 0.82rem; color: var(--blu); font-weight: 600; margin-bottom: 10px; }
.pers p { font-size: 0.91rem; color: var(--txt-3); line-height: 1.55; }

/* ==========================================================================
   22 · ABSCHLUSS
   ========================================================================== */
.closer {
  position: relative; overflow: hidden; border-radius: clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--line-2);
  background: linear-gradient(170deg, #FFFFFF 0%, #F8FAFC 100%);
  box-shadow: var(--edge), 0 2px 8px rgba(16, 21, 39, 0.05), 0 40px 80px -44px rgba(16, 21, 39, 0.3);
  padding: clamp(30px, 4.5vw, 66px);
}
.closer .glow { width: 760px; height: 560px; left: -180px; bottom: -280px; }
.closer-g { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(28px, 4vw, 58px); align-items: center; position: relative; z-index: 2; }
@media (max-width: 880px) { .closer-g { grid-template-columns: 1fr; gap: 32px; } }
.cc { border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(22px, 2.6vw, 30px); background: var(--surf); box-shadow: var(--edge), var(--lift); }
.cc .t { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 18px; }
.cc ul { display: grid; gap: 13px; }
.cc li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.92rem; color: var(--txt-2); line-height: 1.45; }
.cc li .k { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--grn-sf); color: var(--grn); border: 1px solid var(--grn-br); margin-top: 2px; }
.cc-ph { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.87rem; color: var(--txt-3); }
.cc-ph a { color: var(--txt); font-weight: 600; }

/* ==========================================================================
   23 · FOOTER
   ========================================================================== */
.footer { padding: clamp(44px, 5vw, 68px) 0 28px; border-top: 1px solid var(--line); background: var(--surf); position: relative; }
.f-g { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: clamp(20px, 3vw, 36px); margin-bottom: 44px; }
@media (max-width: 1180px) { .f-g { grid-template-columns: 1.4fr repeat(3, 1fr); } }
@media (max-width: 1000px) { .f-g { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 620px) { .f-g { grid-template-columns: 1fr 1fr; } }
.f-b { max-width: 32ch; }
.f-b p { font-size: 0.89rem; color: var(--txt-3); line-height: 1.55; margin-top: 14px; }
.f-b .brand-logo { height: 22px; }
.f-h { font-size: 0.77rem; font-weight: 700; color: var(--txt); margin: 0 0 13px; letter-spacing: 0.01em; }
.f-c a, .f-c button {
  display: block; font-size: 0.88rem; color: var(--txt-3);
  padding: 5px 0; transition: color 0.16s; text-align: left;
}
.f-c a:hover, .f-c button:hover { color: var(--blu); }
.f-bot { border-top: 1px solid var(--line); padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.82rem; color: var(--txt-3); }
.f-bot a:hover { color: var(--blu); }

/* ==========================================================================
   24 · REVEAL
   Startzustand ist SICHTBAR. Erst wenn JS läuft (html.js), wird versteckt und
   der IntersectionObserver blendet ein. Andersherum — so wie in der Vorlage —
   bliebe die Seite bei blockiertem oder fehlgeschlagenem JS komplett weiß;
   Crawler und Content-Blocker treffen genau diesen Fall.
   ========================================================================== */
.rv, .rvs > * { opacity: 1; transform: none; translate: none; }

html.js .rv {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.75s cubic-bezier(0.2, 0.8, 0.3, 1), transform 0.75s cubic-bezier(0.2, 0.8, 0.3, 1);
}
html.js .rv.in { opacity: 1; transform: none; }

html.js .rvs > * {
  opacity: 0; translate: 0 18px;
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.3, 1), translate 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}
html.js .rvs.in > * { opacity: 1; translate: 0 0; }
html.js .rvs.in > *:nth-child(1) { transition-delay: 0.03s; }
html.js .rvs.in > *:nth-child(2) { transition-delay: 0.08s; }
html.js .rvs.in > *:nth-child(3) { transition-delay: 0.13s; }
html.js .rvs.in > *:nth-child(4) { transition-delay: 0.18s; }
html.js .rvs.in > *:nth-child(5) { transition-delay: 0.23s; }
html.js .rvs.in > *:nth-child(6) { transition-delay: 0.28s; }
html.js .rvs.in > *:nth-child(7) { transition-delay: 0.33s; }
html.js .rvs.in > *:nth-child(8) { transition-delay: 0.38s; }

@media (scripting: none) {
  .rv, .rvs > * { opacity: 1 !important; transform: none !important; translate: none !important; }
}

/* ==========================================================================
   24b · BEWEGUNG IM DETAIL
   Bewusst klein gehalten: nichts hier verschiebt Layout, nichts läuft
   dauerhaft im Hintergrund. Alles hängt entweder am Reveal (läuft einmal)
   oder am Zeigergerät (läuft nur bei Absicht).
   ========================================================================== */

/* --- Kennzahlen: Tabellenziffern nur während des Hochzählens, damit die
       Zahl beim Wechsel von 7 auf 250 nicht in der Breite springt. --- */
.stat-n.is-counting { font-variant-numeric: tabular-nums; }

.stat { transition: border-color 0.25s, box-shadow 0.25s, translate 0.25s cubic-bezier(0.2, 0.8, 0.3, 1); }
.stat:hover { border-color: var(--line-2); box-shadow: var(--edge), var(--lift-2); translate: 0 -3px; }

/* --- Zeitleiste im Mockup läuft beim Reveal einmal durch --- */
html.js .rv .tli { opacity: 0; translate: 0 8px; }
html.js .rv.in .tli {
  opacity: 1; translate: 0 0;
  transition: opacity 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), translate 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}
html.js .rv.in .tli:nth-child(1) { transition-delay: 0.15s; }
html.js .rv.in .tli:nth-child(2) { transition-delay: 0.35s; }
html.js .rv.in .tli:nth-child(3) { transition-delay: 0.55s; }
html.js .rv.in .tli:nth-child(4) { transition-delay: 0.70s; }
html.js .rv.in .tli:not(.off) .dot svg { animation: hakenRein 0.4s cubic-bezier(0.2, 0.85, 0.3, 1) both; }
html.js .rv.in .tli:nth-child(1) .dot svg { animation-delay: 0.35s; }
html.js .rv.in .tli:nth-child(2) .dot svg { animation-delay: 0.55s; }
@keyframes hakenRein { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }

/* --- Trennungs-Mockup: Punkte laufen von oben nach unten ein --- */
html.js .rv .sp li { opacity: 0; }
html.js .rv.in .sp li { opacity: 1; transition: opacity 0.4s ease; }
html.js .rv.in .sp li:nth-child(1) { transition-delay: 0.20s; }
html.js .rv.in .sp li:nth-child(2) { transition-delay: 0.30s; }
html.js .rv.in .sp li:nth-child(3) { transition-delay: 0.40s; }
html.js .rv.in .sp li:nth-child(4) { transition-delay: 0.50s; }

/* --- Icons reagieren beim Drüberfahren --- */
.fc-i, .dv-i, .stp-n, .chip .ci, .row-i {
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1), background 0.28s, color 0.28s, border-color 0.28s;
}
.fc:hover .fc-i { transform: scale(1.09) rotate(-4deg); background: var(--blu); color: #fff; border-color: transparent; }
.dv:hover .dv-i { transform: scale(1.09) rotate(-4deg); }
.stp:hover .stp-n { transform: scale(1.07); border-color: var(--blu-br); color: var(--blu-ink); }
.stp:first-child:hover .stp-n { color: #fff; }
a.chip:hover .ci { transform: scale(1.09); background: var(--blu); color: #fff; border-color: transparent; }

/* --- Kartenüberschriften rücken beim Hover minimal nach --- */
.dc h3, .fc h3, .dv h3, .stp h3 { transition: color 0.22s; }
.card:hover h3 { color: var(--blu-ink); }

/* --- Mockup-Zeilen im Objektkasten heben sich beim Hover ab --- */
.kv { transition: color 0.2s; }
.mock:hover .kv b { color: var(--blu-ink); }
.mock:hover .kv .hl { color: var(--gold); }

/* --- Der Pfeil im Textlink schiebt eine feine Linie mit --- */
.tlink { position: relative; }
.tlink::after {
  content: ''; position: absolute; left: 0; right: 1.2em; bottom: -2px; height: 1px;
  background: currentColor; opacity: 0.25;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.tlink:hover::after { transform: scaleX(1); }

/* ==========================================================================
   25 · RESPONSIVE
   ========================================================================== */
@media (max-width: 1060px) {
  .nav__links { display: none; }
  .nav__login { display: none; }
  .nav__burger { display: flex; }
}
@media (max-width: 900px) {
  .privacy__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  /* Auf schmalen Displays konkurriert der Header-CTA mit dem Burger.
     Der primäre CTA liegt im Mobile-Menü (.mmenu__cta). */
  .nav__actions .k-btn { display: none; }
  .nav__actions { gap: 10px; }
  .hero-act .btn { width: 100%; justify-content: center; }
  .privacy__list { grid-template-columns: 1fr; gap: 6px; }
  .split { grid-template-columns: 1fr; }
  .spd { display: none; }
  .f-bot { justify-content: center; text-align: center; }
}

/* ==========================================================================
   26 · MOBILE-PERFORMANCE
   Große blur()-Flächen kosten auf Mobil-GPUs bei jedem Scroll-Frame Rasterzeit
   und lassen Taps ins Leere laufen. Auf Handy deshalb ohne Blur.
   ========================================================================== */
@media (max-width: 760px) {
  .nav.is-scrolled {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(255, 255, 255, 0.96);
  }
  .glow { filter: none; }
  .stage::before { filter: none; }
  .float, .tagpill { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ==========================================================================
   27 · REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .marquee__track, .track, .float, .dome__sweep,
  .dome__ring--1, .dome__ring--2, .live-dot, .panel-h .live { animation: none !important; }
  html.js .rv, html.js .rvs > *,
  html.js .rv .tli, html.js .rv .sp li,
  html.js .rv .tli .dot svg {
    opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important;
  }
}

/* Ohne JS gilt dasselbe: die gestaffelten Zustände hängen an html.js, aber
   der scripting-Query fängt zusätzlich den Fall ab, dass JS im Browser
   deaktiviert ist und die Klasse trotzdem im Markup stünde. */
@media (scripting: none) {
  .tli, .sp li, .tli .dot svg { opacity: 1 !important; translate: none !important; scale: none !important; }
}