/* SurIT — gemeinsames Stylesheet. Frueher inline in index.html. */
/* ═══════════════════════════════════════════════════════════════
   SurIT — Premium Dark Redesign
   Variants A (Editorial) + B (Terminal), Dark+Light themes
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════ FONTS
   Lokal ausgeliefert. Die Seite baut keine Verbindung zu externen Servern auf. */
@font-face { font-family: 'Bebas Neue';     font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/bebas-neue-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat';     font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/montserrat-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat';     font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/montserrat-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat';     font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/montserrat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat';     font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat';     font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/montserrat-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2'); }

:root {
  /* Palette — Dark (default) */
  --bg:          #0A0A0D;
  --bg-elev:    #111115;
  --bg-card:    #15151B;
  --bg-card-2:  #1A1A22;
  --surface:    #1F1F28;
  --line:       rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.15);

  --fg:         #F5F1EC;
  --fg-mute:    rgba(245,241,236,0.62);
  /* 0.40 ergab gemessen 3.48:1 und damit unter den 4.5:1, die fuer Text unter 24px
     faellig sind. Das Token traegt jedes Mikrolabel der Seite, deshalb hier korrigiert
     und nicht in sechs Einzelregeln. Wert gemessen, nicht geschaetzt. */
  --fg-soft:    rgba(245,241,236,0.56);
  --fg-faint:   rgba(245,241,236,0.20);

  --cream:      #F5F1EC;

  /* Accent — Weinrot (default) */
  --accent:     #C23C48;
  --accent-2:   #8B1A1A;
  --accent-soft: rgba(194,60,72,0.12);
  --accent-glow: rgba(194,60,72,0.35);
  /* Akzent als Kleintext. #C23C48 kommt auf keinem Grund über 3.8:1, für Text unter 24px
     sind aber 4.5:1 fällig. Mischung Richtung --fg hellt im Dark auf und dunkelt im Light ab,
     folgt dabei automatisch jedem [data-accent]. Flächen und Displaygrößen behalten --accent. */
  --accent-text: color-mix(in srgb, var(--accent) 75%, var(--fg));
  /* Trustpilot-Grün, gleiche Rechnung: der Markenton hält auf Weiß nur 3.2:1. */
  --ok:         #2FA273;
  --ok-text:    #3FBE8A;

  /* Type */
  --f-display: "Bebas Neue", Impact, sans-serif;
  --f-body:    "Montserrat", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Typoskala. Vorher waren es 44 handgesetzte Groessen ohne Verhaeltnis zueinander.
     Ab hier gilt: neue Regel nimmt einen Wert von hier, oder es gibt keinen neuen Wert.
     Die Untergrenze fuer Fliesstext ist --fs-sm, alles darunter ist Label, nie Prosa. */
  --fs-3xs: 0.6875rem;  /* 11px — nur Mono-Mikrolabels */
  --fs-2xs: 0.75rem;    /* 12px — Mono-Labels, Eyebrow, Chips */
  --fs-xs:  0.8125rem;  /* 13px — Mono-Meta */
  --fs-sm:  0.9375rem;  /* 15px — Prosa-Untergrenze */
  --fs-base: 1rem;      /* 16px — Fliesstext */
  --fs-md:  1.125rem;   /* 18px — Lede */
  --fs-lg:  1.375rem;   /* 22px — Kartentitel */
  --fs-xl:  1.75rem;    /* 28px */
  --fs-2xl: clamp(1.75rem, 3vw, 2.5rem);
  --fs-3xl: clamp(2rem, 4vw, 3.25rem);  /* Sektionstitel */
  --fs-4xl: clamp(4rem, 11vw, 11rem);   /* Hero, der einzige Hoehepunkt der Seite */

  /* Zeilenlaenge. Gemessen lagen Kartentexte bei 91 Zeichen, ein Callout bei 133.
     Achtung ch: das ist die Breite der Null, in Montserrat 0.61em, das mittlere
     Zeichen aber nur 0.49em. 58ch rendert deshalb als rund 72 echte Zeichen, nicht 58. */
  --measure:      54ch;
  --measure-wide: 56ch;

  /* Density */
  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2rem;
  /* Auch diese zwei waren fest. --sp-5 traegt den Abstand unter jedem Sektionskopf,
     --sp-6 den Footer. Achtmal 3rem sind auf 390px allein 384px Luft. */
  --sp-5:  clamp(1.75rem, 4vw, 3rem);
  --sp-6:  clamp(2.5rem, 6vw, 5rem);
  /* Vorher flache 9rem ohne eine einzige Media Query: bei 390px derselbe Abstand wie
     bei 1920px. Neun Sektionen mal 2 mal 144px waren allein 2592px Luft auf dem Handy. */
  --sp-section: clamp(3.5rem, 7vw, 7rem);
  --gutter:     clamp(1.25rem, 4vw, 2rem);
  --radius: 14px;
  --radius-lg: 22px;

  /* Easing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Light theme */
[data-theme="light"] {
  --bg:        #F5F1EC;
  --bg-elev:   #EEE8E0;
  --bg-card:   #FFFFFF;
  --bg-card-2: #F8F4EE;
  --surface:   #EFEAE2;
  --line:       rgba(16,12,12,0.10);
  --line-strong:rgba(16,12,12,0.20);

  --fg:         #100C0C;
  --fg-mute:    rgba(16,12,12,0.66);
  --fg-soft:    rgba(16,12,12,0.68);
  --fg-faint:   rgba(16,12,12,0.22);

  --ok-text:    #196848;
}

/* Accent variations */
[data-accent="amber"]    { --accent: #E8A53B; --accent-2: #B8751A; --accent-soft: rgba(232,165,59,0.14); --accent-glow: rgba(232,165,59,0.35); }
[data-accent="electric"] { --accent: #4F6BFF; --accent-2: #2A3FBF; --accent-soft: rgba(79,107,255,0.14); --accent-glow: rgba(79,107,255,0.35); }
[data-accent="forest"]   { --accent: #2FA273; --accent-2: #196547; --accent-soft: rgba(47,162,115,0.14); --accent-glow: rgba(47,162,115,0.35); }
[data-accent="violet"]   { --accent: #9B5DE5; --accent-2: #6130A8; --accent-soft: rgba(155,93,229,0.14); --accent-glow: rgba(155,93,229,0.35); }
[data-accent="mono"]     { --accent: #F5F1EC; --accent-2: #8A8680; --accent-soft: rgba(245,241,236,0.10); --accent-glow: rgba(245,241,236,0.20); }
[data-theme="light"][data-accent="mono"] { --accent: #100C0C; --accent-2: #555049; --accent-soft: rgba(16,12,12,0.08); --accent-glow: rgba(16,12,12,0.2); }

/* Density. Muessen Clamps sein, ein fester Wert hier haette die Responsivitaet oben
   wieder ausgehebelt. Der Auslieferungswert steht in :root, nicht hier. */
[data-density="compact"] { --sp-section: clamp(2.5rem, 5vw, 5rem);  --sp-6: 3rem; --sp-5: 2rem; }
[data-density="airy"]    { --sp-section: clamp(5rem, 10vw, 11rem); --sp-6: 7rem; --sp-5: 4rem; }

/* ─────────── Base ─────────── */
* { box-sizing: border-box; }
/* Die Navbar ist fixed, ohne scroll-padding landet jedes Ankerziel darunter. */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--f-body); font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.4s ease, color 0.4s ease;
}

::selection { background: var(--accent); color: #fff; }

/* Bebas Neue ist eine All-Caps-Schrift: der Kleinbuchstabe "ö" rendert ohne Punkte.
   text-transform: uppercase wandelt ö→Ö (Großglyphe mit Punkten) vor dem Rendern. */
.hero-headline, .section-title, .about-title, .contact-title, .cta-title,
.sc-title, .step h3, .stack-name, .audience-name, .footer-word {
  text-transform: uppercase;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ─────────── Grain & ambient ─────────── */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
[data-theme="light"] .grain { display: none; }

.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0.55;
  will-change: transform;
}
.orb-1 { width: 520px; height: 520px; left: -10%; top: -12%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  animation: orbFloat1 22s ease-in-out infinite; }
.orb-2 { width: 420px; height: 420px; right: -8%; top: 35%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  opacity: 0.35;
  animation: orbFloat2 28s ease-in-out infinite; }
.orb-3 { width: 380px; height: 380px; left: 25%; bottom: -15%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  opacity: 0.25;
  animation: orbFloat3 32s ease-in-out infinite; }

@keyframes orbFloat1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,80px)} }
@keyframes orbFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-60px,-40px)} }
@keyframes orbFloat3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-60px)} }

[data-theme="light"] .orb { opacity: 0.3; }
[data-theme="light"] .orb-2, [data-theme="light"] .orb-3 { opacity: 0.18; }

/* ─────────── Reveal ─────────── */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════ NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.1rem 2rem;
  transition: background 0.35s, backdrop-filter 0.35s, border-color 0.35s, padding 0.35s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--line);
  padding: 0.7rem 2rem;
}
.nav-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.nav-logo { display: flex; align-items: center; gap: 0.6rem; }
.nav-mark { width: 34px; height: 34px; transition: transform 0.4s var(--ease-elastic); }
.nav-logo:hover .nav-mark { transform: rotate(-8deg) scale(1.08); }
.nav-wordmark {
  font-family: var(--f-display); font-size: 1.55rem; letter-spacing: 0.1em; color: var(--fg);
}
.nav-wordmark em { color: var(--accent); font-style: normal; }

.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a {
  position: relative;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-mute);
  transition: color 0.2s;
  padding: 0.3rem 0;
}
.nav-links a::before {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px; background: var(--accent);
  transition: width 0.3s var(--ease-out);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::before { width: 100%; }
/* Aktueller Abschnitt. Zwei Signale, nicht nur Farbe: der Strich unter dem Eintrag
   traegt die Aussage mit, sonst haengt sie allein an einem Farbunterschied. */
.nav-links a.is-current,
.nav-links a[aria-current] { color: var(--fg); }
.nav-links a.is-current::before,
.nav-links a[aria-current]::before { width: 100%; }
.mobile-menu a.is-current,
.mobile-menu a[aria-current] { color: var(--accent-text); }
@media (max-width: 980px) { .nav-links { display: none; } }

.nav-actions { display: flex; align-items: center; gap: 0.75rem; }
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--fg-mute);
  transition: border-color 0.2s, color 0.2s, transform 0.4s var(--ease-elastic);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); transform: rotate(30deg); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.nav-cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.7rem 1.1rem;
  background: var(--accent); color: #fff;
  font-family: var(--f-display); font-size: 1rem; letter-spacing: 0.1em;
  border-radius: 100px;
  transition: transform 0.3s var(--ease-elastic), box-shadow 0.3s;
  box-shadow: 0 6px 20px -6px var(--accent-glow);
}
.nav-cta svg { width: 14px; height: 14px; }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -6px var(--accent-glow); }

.nav-burger { display: none; width: 40px; height: 40px; flex-direction: column; gap: 6px; align-items: center; justify-content: center; }
.nav-burger span { display: block; width: 20px; height: 1.5px; background: var(--fg); transition: transform 0.3s, opacity 0.3s; }
.nav-burger.open span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-burger.open span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (max-width: 980px) { .nav-burger { display: flex; } .nav-cta { display: none; } }

.mobile-menu {
  position: fixed; inset: 64px 0 0 0; z-index: 90;
  background: var(--bg); padding: 3rem 2rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  transform: translateY(-20px); opacity: 0; pointer-events: none;
  transition: transform 0.4s var(--ease-out), opacity 0.3s;
}
.mobile-menu[data-open="true"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-menu a { font-family: var(--f-display); font-size: 2rem; letter-spacing: 0.08em; color: var(--fg); padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.mobile-menu a.mobile-cta { color: var(--accent); border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════ MAIN */
main { position: relative; z-index: 2; }

/* ─────────── Section scaffolding ─────────── */
section {
  position: relative;
  padding: var(--sp-section) var(--gutter);
  max-width: 1400px; margin: 0 auto;
}

/* Sektionsstufen. Vorher hatte jede der neun Sektionen dieselbe Behandlung: gleiche
   9rem Luft, gleiche Eyebrow-Pille, gleicher Displaytitel bei 86px. Neun gleich laute
   Hoehepunkte lesen sich als ueberladen, egal wie wenig Text darin steht.
   Regel: hoechstens zwei .tier-anchor je Seite, sonst ist wieder alles gleich laut. */
section.tier-anchor { --sp-section: clamp(5rem, 9vw, 9rem); }
section.tier-inset  { --sp-section: clamp(2.5rem, 4.5vw, 4.5rem); }

.section-head {
  max-width: 760px; margin: 0 auto var(--sp-5);
  text-align: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-mono); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--accent-soft);
  border-radius: 100px;
  margin-bottom: 1.5rem;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.section-title {
  font-family: var(--f-display); letter-spacing: -0.01em;
  font-size: var(--fs-3xl); line-height: 0.95;
  margin: 0 0 1.25rem; color: var(--fg);
  text-wrap: balance;
}
.section-title em { font-style: italic; font-weight: 400; color: var(--accent); }
.section-lede {
  color: var(--fg-mute); font-size: var(--fs-md); line-height: 1.7;
  max-width: var(--measure); margin: 0 auto;
  font-weight: 300;
}

/* Inset-Stufe ist das Tal: kleiner Titel in der Brotschrift, keine Eyebrow, kein Kursiv-Akzent.
   Das ist der Unterschied zwischen "die Seite hat Rhythmus" und "die Seite schreit neunmal". */
section.tier-inset .section-head { margin-bottom: var(--sp-4); }
section.tier-inset .section-title {
  font-family: var(--f-body); font-weight: 600;
  font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -0.01em;
}
section.tier-inset .section-title em { font-style: normal; color: var(--fg-mute); }
section.tier-inset .eyebrow { display: none; }
section.tier-inset .section-lede { font-size: var(--fs-base); }

/* ═══════════════════════════════════════════════════════════════ HERO */
.hero {
  /* dvh statt vh: auf Mobile rechnet vh mit ausgeblendeter Browserleiste und schiebt den
     Hero ueber den Bildschirmrand hinaus. */
  min-height: 100dvh;
  /* War hart 9rem und ignorierte damit den Token. Auf 390px kamen 144px Abstand oben auf
     einen ohnehin bildschirmhohen Hero. Die Navbar braucht Platz, mehr aber auch nicht. */
  padding: calc(var(--sp-section) + 1rem) var(--gutter) 0;
  display: flex; flex-direction: column; justify-content: space-between;
  max-width: none;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 0%, transparent 80%);
  opacity: 0.55;
}
.hero-mark {
  position: absolute; right: -80px; bottom: -60px; width: 520px; height: 520px;
  opacity: 0.12;
}
.hero-shield-outline {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawShield 3s var(--ease-out) forwards 0.5s;
}
@keyframes drawShield { to { stroke-dashoffset: 0; } }

/* Datenhoheits-Siegel — Signatur des Hero */
.hero-seal {
  position: absolute; right: 0; top: 47%;
  width: 142px; height: 142px; z-index: 3;
  pointer-events: none;
}
@media (max-width: 1180px) { .hero-seal { width: 118px; height: 118px; top: 52%; } }
@media (max-width: 760px)  { .hero-seal { display: none; } }
.hero-seal svg { width: 100%; height: 100%; overflow: visible; }
.hero-seal .seal-rotate { transform-origin: 100px 100px; animation: sealSpin 42s linear infinite; }
@keyframes sealSpin { to { transform: rotate(360deg); } }
.hero-seal-text { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 1.4px; fill: var(--fg-soft); text-transform: uppercase; }
.hero-seal-ring { fill: none; stroke: var(--line-strong); }
.hero-seal-mark { fill: none; stroke: var(--accent); }
@media (prefers-reduced-motion: reduce) { .hero-seal .seal-rotate { animation: none; } }

.hero-inner {
  max-width: 1400px; width: 100%; margin: 0 auto;
  padding: var(--sp-6) 0 var(--sp-5);
  position: relative; z-index: 2;
}
.hero-meta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-mono); font-size: 0.78rem; color: var(--fg-mute);
  margin-bottom: 2.5rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: color-mix(in srgb, var(--bg-card) 60%, transparent);
  backdrop-filter: blur(8px);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #2FA273; position: relative; }
.status-dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: #2FA273; opacity: 0.3;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(3); opacity: 0; } }

.hero-headline {
  font-family: var(--f-display);
  font-size: clamp(4rem, 11vw, 11rem); line-height: 0.86;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-5);
  color: var(--fg);
}
.hero-headline .line { display: block; overflow: hidden; }
.hero-headline .line > span {
  display: inline-block; transform: translateY(110%);
  animation: lineUp 1s var(--ease-out) forwards;
}
.hero-headline .line:nth-child(1) > span { animation-delay: 0.2s; }
.hero-headline .line:nth-child(2) > span { animation-delay: 0.35s; }
.hero-headline .line:nth-child(3) > span { animation-delay: 0.5s; }
.hero-headline .line-accent > span { color: var(--accent); }
@keyframes lineUp { to { transform: translateY(0); } }
@media (max-width: 540px) {
  .hero-headline { font-size: clamp(2.78rem, 11.39vw, 4.81rem); }
}

.hero-subline {
  font-family: var(--f-body);
  /* War 0.72rem. Das ist eine Aussage, die gelesen werden soll, kein Zierlabel,
     und 11,5px erfuellen die Prosa-Untergrenze nicht. Sperrung dafuer zurueckgenommen. */
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin: -1.5rem 0 2.5rem;
}

.hero-columns {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem;
  align-items: end;
  margin-bottom: var(--sp-5);
}
@media (max-width: 900px) { .hero-columns { grid-template-columns: 1fr; gap: 2rem; } }
.hero-lede {
  font-size: 1.1rem; line-height: 1.7; color: var(--fg-mute);
  max-width: 520px; margin: 0;
  font-weight: 300;
}
.hero-lede strong { color: var(--fg); font-weight: 600; }
.hero-lede em { color: var(--accent); font-style: italic; }

.hero-ctas { display: flex; flex-direction: column; gap: 0.85rem; align-items: flex-end; justify-self: end; }
@media (max-width: 900px) { .hero-ctas { justify-self: start; align-items: flex-start; } }
.hero-jump {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--fg-mute); border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px; transition: color 0.2s, border-color 0.2s;
}
.hero-jump:hover { color: var(--accent); border-color: var(--accent); }
.hero-jump svg { width: 13px; height: 13px; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 1rem 1.75rem;
  font-family: var(--f-display); font-size: 1.1rem; letter-spacing: 0.1em;
  border-radius: 100px;
  transition: transform 0.3s var(--ease-elastic), box-shadow 0.3s, background 0.2s, color 0.2s, border-color 0.2s;
  position: relative; overflow: hidden;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease-out); }
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 8px 24px -8px var(--accent-glow);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -8px var(--accent-glow); }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-ghost {
  color: var(--fg); border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg-card) 30%, transparent);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }
/* Auf schmalen Displays passte "Souveränitäts-Audit anfragen" nicht in den Button.
   .btn schneidet per overflow:hidden ab, das letzte Zeichen fiel weg. */
@media (max-width: 520px) {
  .btn { font-size: 0.95rem; padding: 0.9rem 1.25rem; white-space: normal; text-align: center; }
}

.hero-meta-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  margin-top: auto;
}
@media (max-width: 700px) { .hero-meta-grid { grid-template-columns: repeat(2,1fr); } }
.meta-cell {
  padding: 1.5rem 1.25rem;
  background: color-mix(in srgb, var(--bg-card) 80%, transparent);
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 0.3rem;
  transition: background 0.3s;
}
.meta-cell:hover { background: var(--bg-card-2); }
.meta-k { font-family: var(--f-mono); font-size: 0.7rem; color: var(--accent); letter-spacing: 0.15em; }
.meta-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-soft); font-weight: 500; }
.meta-value { font-family: var(--f-display); font-size: 2.6rem; color: var(--fg); letter-spacing: 0.02em; line-height: 1; margin-top: 0.25rem; }
.meta-value em { font-style: normal; color: var(--accent); }
/* Praezisiert eine Zahl, die sonst als Durchschnitt gelesen wuerde. Nur die
   Trustpilot-Zelle traegt das, die Zeile darf die Zellenhoehe angleichen. */
.meta-note { font-family: var(--f-mono); font-size: var(--fs-3xs); letter-spacing: 0.08em; color: var(--fg-soft); margin-top: 0.35rem; }

/* ═══════════════════════════════════════════════════════════════ SERVICES */
.service-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 900px) { .service-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .service-grid { grid-template-columns: 1fr; } }

.service-card {
  position: relative; overflow: hidden;
  padding: 2.5rem 2rem 2rem;
  background: var(--bg-card);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background 0.35s, transform 0.4s var(--ease-out);
  display: flex; flex-direction: column; gap: 1rem;
  min-height: 280px;
}
.service-card:nth-child(3n) { border-right: 0; }
.service-card:nth-last-child(-n+3) { border-bottom: 0; }
@media (max-width: 900px) {
  .service-card, .service-card:nth-child(3n) { border-right: 1px solid var(--line); }
  .service-card:nth-child(2n) { border-right: 0; }
  .service-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .service-card:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 620px) {
  .service-card, .service-card:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--line); }
  .service-card:last-child { border-bottom: 0; }
}

.service-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), var(--accent-soft), transparent 60%);
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.service-card:hover { background: var(--bg-card-2); }
.service-card:hover::before { opacity: 1; }
.service-card.featured::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent);
}

.sc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.sc-num { font-family: var(--f-mono); font-size: 0.78rem; color: var(--accent); letter-spacing: 0.15em; }
.sc-badge { font-family: var(--f-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); padding: 0.25rem 0.55rem; border: 1px solid var(--accent); border-radius: 100px; }

.sc-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 14px;
  margin-top: 0.25rem;
  transition: transform 0.5s var(--ease-elastic), background 0.3s;
}
.service-card:hover .sc-icon { transform: rotate(-8deg) scale(1.1); background: color-mix(in srgb, var(--accent) 25%, transparent); }
.sc-icon svg { width: 22px; height: 22px; }

.sc-title { font-family: var(--f-display); font-size: var(--fs-xl); letter-spacing: 0.01em; margin: 0; color: var(--fg); line-height: 1.05; }
.sc-desc { color: var(--fg-mute); font-size: var(--fs-sm); line-height: 1.65; margin: 0; font-weight: 300; max-width: var(--measure); }

.sc-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.sc-tag {
  font-family: var(--f-mono); font-size: 0.68rem;
  color: var(--fg-soft); padding: 0.2rem 0.55rem;
  border: 1px solid var(--line); border-radius: 100px;
  letter-spacing: 0.05em;
  transition: color 0.2s, border-color 0.2s;
}
.service-card:hover .sc-tag { color: var(--fg-mute); border-color: var(--line-strong); }

.service-cta {
  margin-top: 2rem;
  padding: 2rem 2.5rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(110deg, var(--bg-card) 0%, color-mix(in srgb, var(--accent) 10%, var(--bg-card)) 100%);
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  flex-wrap: wrap;
}
/* Abbinder unter den vier Schritten. Ersetzt den frueheren .service-cta-Kasten,
   siehe Kommentar in index.html#ablauf. */
.process-close {
  margin: var(--sp-4) 0 0; max-width: var(--measure-wide);
  font-size: var(--fs-md); line-height: 1.6; font-weight: 300; color: var(--fg-mute);
}
.cta-eyebrow { font-family: var(--f-mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.35rem; }
.cta-title { font-family: var(--f-display); font-size: 1.8rem; color: var(--fg); line-height: 1.1; letter-spacing: 0.01em; max-width: 480px; }

/* ═══════════════════════════════════════════════════════════════ PROCESS */
.process {
  position: relative;
}
.process-track {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
@media (max-width: 900px) { .process-track { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .process-track { grid-template-columns: 1fr; } }

.process-line {
  position: absolute; top: 68px; left: 2rem; right: 2rem; height: 1px;
  background: var(--line); z-index: 0;
}
.process-line-fill {
  height: 100%; width: 0%;
  background: var(--accent);
  transition: width 0.8s var(--ease-out);
}
@media (max-width: 900px) { .process-line { display: none; } }

.step {
  position: relative; z-index: 1;
  padding: 0; text-align: left;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.step-num {
  font-family: var(--f-display); font-size: 5rem;
  color: var(--accent); line-height: 0.9;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 40px var(--accent-glow);
}
.step-icon {
  position: absolute; top: 54px; left: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--accent); color: var(--accent);
  transition: background 0.3s, transform 0.4s var(--ease-elastic);
}
.step-icon svg { width: 14px; height: 14px; }
.step:hover .step-icon { background: var(--accent); color: #fff; transform: rotate(15deg) scale(1.15); }
@media (max-width: 900px) { .step-icon { position: static; margin-bottom: 0.5rem; } }

.step h3 {
  font-family: var(--f-display); font-size: var(--fs-lg); letter-spacing: 0.02em;
  color: var(--fg); margin: 1rem 0 0; line-height: 1.1;
}
.step p { color: var(--fg-mute); font-size: var(--fs-sm); line-height: 1.65; margin: 0; font-weight: 300; max-width: var(--measure); }
.step-foot {
  margin-top: auto; padding-top: 0.75rem;
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
  border-top: 1px dashed var(--line);
  padding-top: 0.75rem;
}
/* Leistungsumfang in der Schritt-Karte. .stack-list schiebt sich sonst per
   margin-top:auto nach unten und kaempft mit .step-foot um denselben Platz. */
.step-list { margin-top: 0.5rem; padding-top: 0; }

/* Einstieg in zwei Stufen. Sitzt zwischen Section-Head und Prozess-Leiter.
   2rem ist der Abstand, den alle anderen Bloecke innerhalb einer Section halten. */
.entry-grid { margin-bottom: 2rem; }
.entry-diff {
  color: var(--fg-mute); font-size: var(--fs-sm); line-height: 1.7; font-weight: 300;
  max-width: var(--measure); margin: 0 0 2rem;
}
/* .entry-scope steht weiter unten, direkt hinter .reference-card. Hier wuerde es
   nicht greifen, .reference-card kommt spaeter in der Datei und gewinnt bei
   gleicher Spezifitaet. */

/* Zielgruppen-Unterseiten. Sie haben keinen Vollbild-Hero, der Einstieg beginnt
   direkt unter der festen Navigation. */
.sub-hero { padding-top: calc(var(--sp-section) + 3.5rem); }
.sub-hero .section-head { margin-bottom: var(--sp-4); }
.sub-hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════ ABOUT */
.about-grid {
  display: grid; grid-template-columns: 0.85fr 1fr; gap: 5rem; align-items: center;
}
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 3rem; } }

.about-portrait { position: relative; }
.portrait-frame {
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  position: relative;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6), 0 0 0 1px var(--line);
  transform: rotate(-1.5deg);
  transition: transform 0.5s var(--ease-out);
}
.portrait-frame:hover { transform: rotate(0deg) scale(1.02); }
[data-theme="light"] .portrait-frame { box-shadow: 0 30px 60px -30px rgba(0,0,0,0.25), 0 0 0 1px var(--line); }

.portrait-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-soft);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, var(--bg-card)), var(--bg-card));
}
.portrait-placeholder svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.4; }
.portrait-hint { text-align: center; position: relative; z-index: 1; }
.portrait-hint-k { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 0.75rem; }
.portrait-hint-v { font-family: var(--f-display); font-size: 1.6rem; letter-spacing: 0.02em; color: var(--fg); line-height: 1.1; margin-bottom: 1rem; }
.portrait-hint-spec { font-family: var(--f-mono); font-size: 0.7rem; color: var(--fg-soft); letter-spacing: 0.08em; }

.portrait-caption {
  position: absolute; bottom: -30px; right: -10px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-strong);
  padding: 0.75rem 1.25rem; border-radius: 100px;
  font-family: var(--f-mono); font-size: 0.75rem; color: var(--fg-mute);
  display: flex; align-items: center; gap: 0.6rem;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.4);
  transform: rotate(3deg);
}
.caption-scribble { width: 50px; height: 12px; }

.about-title {
  font-family: var(--f-display); font-size: clamp(2.8rem, 5vw, 4.8rem); line-height: 0.95;
  letter-spacing: -0.01em; margin: 1.25rem 0 1.5rem; color: var(--fg);
  text-wrap: balance;
}
.about-title em { font-style: italic; color: var(--accent); font-weight: 400; }
.about-title .accent { color: var(--accent); }

.about-paragraphs p { color: var(--fg-mute); font-size: var(--fs-base); line-height: 1.8; margin: 0 0 1rem; font-weight: 300; max-width: var(--measure); }
.about-paragraphs strong { color: var(--fg); font-weight: 600; }
.about-paragraphs em { color: var(--accent); font-style: italic; font-weight: 500; }

.about-values {
  list-style: none; padding: 0; margin: 1.5rem 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem;
}
@media (max-width: 500px) { .about-values { grid-template-columns: 1fr; } }
.about-values li {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--fs-sm); color: var(--fg-mute);
}
.about-values .check {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.about-values .check::after {
  content: ''; width: 7px; height: 3px;
  border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

/* Nachweise: die Titel selbst als Liste, kein Siegel und kein fremdes Logo.
   Mono, weil es Bezeichner sind und keine Prosa. */
.about-proof { margin-top: 1.75rem; }
.proof-list {
  list-style: none; padding: 0; margin: 0 0 0.6rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.proof-list li {
  font-family: var(--f-mono); font-size: var(--fs-2xs);
  padding: 0.25rem 0.55rem;
  background: var(--surface); border-radius: 6px;
  color: var(--fg-mute); letter-spacing: 0.02em;
}
.proof-note { margin: 0; font-size: var(--fs-sm); color: var(--fg-mute); }

.about-sign {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.sign-label { font-family: var(--f-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-soft); margin-bottom: 0.35rem; }
.sign-name {
  font-family: var(--f-display); font-size: 2.2rem; color: var(--fg); letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--fg), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sign-role { font-size: 0.82rem; color: var(--fg-mute); letter-spacing: 0.02em; }

/* ═══════════════════════════════════════════════════════════════ STACK */
.stack-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .stack-grid { grid-template-columns: repeat(6,1fr); } }
@media (max-width: 560px) { .stack-grid { grid-template-columns: repeat(2,1fr); } }

.stack-cell {
  grid-column: span 3;
  padding: 1.5rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 0.6rem;
  transition: transform 0.3s var(--ease-out), border-color 0.3s, background 0.3s;
  position: relative; overflow: hidden;
}
@media (max-width: 900px) { .stack-cell { grid-column: span 2; } }
@media (max-width: 560px) { .stack-cell { grid-column: span 1; } }
.stack-cell::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.stack-cell:hover { transform: translateY(-6px); border-color: var(--line-strong); background: var(--bg-card-2); }
.stack-cell:hover::before { transform: scaleX(1); }

/* .stack-grid bringt selbst keinen Aussenabstand mit, weil es frueher immer als
   einziger Block in seiner Section stand. Seit den Preisleitern stehen mehrere
   hintereinander, und dann kleben sie mit 0px aneinander. Nur die Paarungen, die
   gemessen 0px hatten, bekommen die 2rem des Section-Rhythmus. Ein pauschales
   margin auf .stack-grid wuerde die Abstaende aufblasen, die schon stimmen. */
.process-track + .stack-grid,
.service-grid + .stack-grid,
.stack-grid + .stack-grid,
.stack-grid + .entry-diff { margin-top: 2rem; }

/* Empfehlung: dieselbe Akzentleiste, die .stack-cell::before sonst erst beim
   Hover ausfaehrt. */
.stack-cell.featured { border-color: var(--line-strong); background: var(--bg-card-2); }
.stack-cell.featured::before { transform: scaleX(1); }

.stack-cell.wide { grid-column: span 6; }
@media (max-width: 900px) { .stack-cell.wide { grid-column: span 6; } }
@media (max-width: 560px) { .stack-cell.wide { grid-column: span 2; } }

/* Volle Breite. Schliesst die letzte Rasterzeile: der Passwort-Tresor stand als
   siebte Zelle mit span 6 allein in einer halb leeren Reihe. */
.stack-cell.full { grid-column: span 12; }
@media (max-width: 900px) { .stack-cell.full { grid-column: span 6; } }
@media (max-width: 560px) { .stack-cell.full { grid-column: span 2; } }

/* Drei gleich breite Zellen. Die Standardbreite span 3 laesst bei drei Karten
   ein Viertel der Reihe leer, span 4 fuellt die zwoelf Spalten aus. */
.stack-grid.cols-3 > .stack-cell { grid-column: span 4; }
@media (max-width: 900px) { .stack-grid.cols-3 > .stack-cell { grid-column: span 6; } }
@media (max-width: 560px) { .stack-grid.cols-3 > .stack-cell { grid-column: span 2; } }

.stack-key { font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--accent); letter-spacing: 0.12em; }
/* h3 seit dem Umbau: die vier Zielgruppenseiten hatten null Ueberschriften unter h2,
   rund 30 Karten hingen darunter. Styling bleibt identisch, nur die Gliederung stimmt jetzt. */
.stack-name {
  font-family: var(--f-display); font-size: var(--fs-lg); letter-spacing: 0.02em;
  color: var(--fg); line-height: 1; margin: 0; font-weight: 400;
}
.stack-list { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.35rem; padding-top: 0.75rem; }
.stack-list span {
  font-family: var(--f-mono); font-size: var(--fs-2xs);
  padding: 0.25rem 0.55rem;
  background: var(--surface); border-radius: 6px;
  color: var(--fg-mute); letter-spacing: 0.02em;
}
.stack-note { color: var(--fg-mute); font-size: var(--fs-sm); line-height: 1.6; font-weight: 300; margin: 0; max-width: var(--measure); }

/* Argumentationsblock unter dem Stack-Raster (Passwort-Tresor). Fliesstext, weil
   die Argumente aufeinander aufbauen; eine Liste wuerde die Reihenfolge als
   Gleichrangigkeit lesen lassen. Kein eigener Rahmen, der Block gehoert zur
   Sektion und soll keine achte Karte werden. */
.stack-detail { margin-top: var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.stack-detail-title {
  margin: 0 0 var(--sp-2);
  font-family: var(--f-display); font-weight: 400; font-size: var(--fs-xl);
  letter-spacing: 0.01em; color: var(--fg); max-width: var(--measure-wide);
}
.stack-detail p {
  margin: 0 0 var(--sp-2); max-width: var(--measure);
  font-size: var(--fs-base); line-height: 1.7; font-weight: 300; color: var(--fg-mute);
}
.stack-detail p:last-child { margin-bottom: 0; }
.stack-detail-price { color: var(--fg) !important; }
.stack-detail-price strong { font-weight: 600; color: var(--fg); }
/* Lizenzhinweis nach § 13 AGPL. Klein und sachlich, ausdruecklich kein Button. */
.stack-detail-fine { font-size: var(--fs-sm) !important; max-width: var(--measure-wide) !important; }

/* ═══════════════════════════════════════════════════════════════ REVIEWS */
.reviews-head {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: end;
  text-align: left; max-width: none;
}
.reviews-head .section-title { text-align: left; }
@media (max-width: 760px) { .reviews-head { grid-template-columns: 1fr; } }

.reviews-score {
  background: var(--bg-card);
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.score-num { font-family: var(--f-display); font-size: 3.5rem; color: var(--fg); line-height: 1; }
.score-stars { display: flex; gap: 0.2rem; }
.score-stars svg { width: 22px; height: 22px; }
.score-meta { font-family: var(--f-mono); font-size: 0.78rem; color: var(--fg-mute); letter-spacing: 0.02em; }
.score-meta a { color: var(--accent); }

.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }

.review {
  background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem;
  position: relative; overflow: hidden;
  transition: transform 0.3s var(--ease-out), border-color 0.3s;
}
.review:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.review-quote {
  position: absolute; top: 10px; right: 16px;
  font-family: var(--f-display); font-size: 6rem; color: var(--accent); opacity: 0.15;
  line-height: 1; pointer-events: none;
}
.review-stars { display: flex; gap: 0.15rem; }
.review-stars svg { width: 14px; height: 14px; }
.review h3 { font-size: 0.95rem; font-weight: 600; color: var(--fg); margin: 0; }
.review p { color: var(--fg-mute); font-size: var(--fs-sm); line-height: 1.65; margin: 0; font-weight: 300; max-width: var(--measure); }
.review-meta {
  display: flex; align-items: center; gap: 0.75rem;
  padding-top: 0.75rem; border-top: 1px solid var(--line); margin-top: auto;
}
.review-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--f-display); font-size: 0.95rem;
}
.review-name { font-size: 0.8rem; font-weight: 500; color: var(--fg); }
.review-verified { font-family: var(--f-mono); font-size: 0.65rem; color: var(--ok-text); letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; gap: 0.3rem; align-items: center; }

/* ═══════════════════════════════════════════════════════════════ CONTACT */
.contact-grid {
  display: grid; grid-template-columns: 0.85fr 1fr; gap: 4rem; align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 3rem; } }

.contact-title {
  font-family: var(--f-display); font-size: clamp(2.8rem, 5vw, 5rem); line-height: 0.95;
  letter-spacing: -0.01em; margin: 1.25rem 0 1.25rem;
  text-wrap: balance;
}
.contact-title em { color: var(--accent); font-style: italic; font-weight: 400; }
.contact-lede { color: var(--fg-mute); font-size: 1rem; line-height: 1.7; max-width: 420px; font-weight: 300; }

.contact-channels { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.channel {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform 0.3s var(--ease-out), border-color 0.3s, background 0.3s;
  background: var(--bg-card);
}
.channel:hover { transform: translateX(6px); border-color: var(--accent); background: var(--bg-card-2); }
.channel-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.channel-icon svg { width: 18px; height: 18px; }
.channel-label { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-soft); margin-bottom: 0.2rem; }
.channel-value { font-size: 0.95rem; font-weight: 500; color: var(--fg); }

/* .contact-card ist derselbe Kasten ohne Formular. Steht dort, solange der
   Hoster kein PHP ausfuehrt und kontakt.php nicht laufen kann. Der Abstand
   kommt hier aus dem Flex-Gap, im Formular liefert ihn .form-fields. */
.contact-card { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-card .stack-note a { color: var(--accent); }

.contact-form, .contact-card {
  background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2rem;
}
.form-fields { display: flex; flex-direction: column; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.contact-form label {
  display: flex; flex-direction: column; gap: 0.35rem;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-soft);
}
.contact-form input, .contact-form select, .contact-form textarea {
  font-family: var(--f-body); font-size: 0.92rem; font-weight: 400;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  text-transform: none; letter-spacing: 0;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--fg-soft); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.form-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-check { flex-direction: row; align-items: flex-start; gap: 0.6rem; text-transform: none; letter-spacing: 0.01em; font-family: var(--f-body); font-size: 0.78rem; color: var(--fg-mute); line-height: 1.5; max-width: 320px; }
.form-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); }
.form-check a { color: var(--accent); text-decoration: underline; }

.form-sent { text-align: center; padding: 2rem 0; }
.form-sent-icon {
  width: 56px; height: 56px; margin: 0 auto 1rem;
  border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.form-sent-icon svg { width: 24px; height: 24px; }
.form-sent-title { font-family: var(--f-display); font-size: 2rem; color: var(--fg); letter-spacing: 0.02em; }
.form-sent-text { color: var(--fg-mute); font-size: 0.92rem; margin-top: 0.35rem; }

/* ═══════════════════════════════════════════════════════════════ AUDIENCE / REFERENCE / TRUST */
.audience-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
@media (max-width: 980px) { .audience-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .audience-grid { grid-template-columns: 1fr 1fr; } }
.audience-card {
  background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem 1.25rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem;
  transition: transform 0.3s var(--ease-out), border-color 0.3s, background 0.3s;
}
.audience-card:hover { transform: translateY(-5px); border-color: var(--line-strong); background: var(--bg-card-2); }
/* Grid-Items haben von Haus aus min-width:auto, koennen also nie schmaler werden
   als ihr laengstes Wort. Bei 390px sprengt "Psychotherapeuten" die 1fr-Spur und
   die Seite wird 415px breit. body{overflow-x:hidden} verdeckt das, gekappt wird
   die rechte Spalte trotzdem. Gilt genauso fuer .trust-item weiter unten. */
.audience-card, .trust-item { min-width: 0; }
/* hyphens statt overflow-wrap: "Psychotherapeuten" wird sonst irgendwo gekappt
   ("PSYCHOTHERA PEUTEN"). Mit lang="de" am <html> trennt der Browser nach Silben
   und setzt einen Bindestrich. break-word bleibt als Notnagel, falls ein Browser
   keine deutsche Trennung mitbringt. */
.audience-name { hyphens: auto; overflow-wrap: break-word; }
.audience-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.audience-icon svg { width: 22px; height: 22px; }
.audience-name { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: 0.01em; color: var(--fg); line-height: 1; }
/* Drei der fuenf Karten fuehren auf eine eigene Zielgruppenseite. */
.audience-link { justify-content: flex-start; }
.audience-more {
  margin-top: auto; padding-top: 0.75rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
  opacity: 0.75; transition: opacity 0.3s var(--ease-out);
}
.audience-more svg { width: 12px; height: 12px; transition: transform 0.3s var(--ease-out); }
.audience-link:hover .audience-more { opacity: 1; }
.audience-link:hover .audience-more svg { transform: translateX(3px); }
/* --accent-text, nicht --accent: diese Regel ist spezifischer als der Sammelselektor
   im Zugaenglichkeitsblock am Dateiende und gewinnt gegen ihn. Ohne das hier haetten die
   Zielgruppenkarten als einzige Elemente der Seite einen abweichenden Fokusring. */
.audience-link:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

/* Reference callout */
.reference-card {
  background: linear-gradient(110deg, var(--bg-card) 0%, color-mix(in srgb, var(--accent) 10%, var(--bg-card)) 100%);
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: 2.5rem; margin-bottom: 2rem;
  display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center;
}
@media (max-width: 760px) { .reference-card { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem; } }

/* Rollentrennung unter den Preiskarten. Muss hinter .reference-card stehen, sonst
   gewinnt deren margin-bottom. Ohne margin-top klebte der Block auf den
   Unterseiten mit 0px direkt am Karten-Raster. */
.entry-scope { margin-top: 2rem; margin-bottom: 3rem; padding: 1.75rem 2rem; }
@media (max-width: 760px) { .entry-scope { padding: 1.5rem; } }

.reference-badge {
  font-family: var(--f-display); font-size: 1.5rem; letter-spacing: 0.06em; line-height: 1.1;
  color: var(--accent); border: 1px solid var(--accent-soft);
  padding: 1.5rem 1.75rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, transparent); text-align: center;
}
.reference-badge small { display: block; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-soft); margin-top: 0.5rem; }
/* Ohne max-width lief dieser Callout auf 133 Zeichen je Zeile. Lesbar sind 60 bis 75. */
.reference-text { color: var(--fg-mute); font-size: var(--fs-base); line-height: 1.7; font-weight: 300; margin: 0; max-width: var(--measure-wide); }
.reference-text strong { color: var(--fg); font-weight: 600; }

/* Trust row */
.trust-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: var(--sp-5);
}
@media (max-width: 900px) { .trust-row { grid-template-columns: repeat(2,1fr); } }
.trust-item { background: var(--bg-card); padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }
.trust-k { font-family: var(--f-display); font-size: 2.1rem; color: var(--fg); line-height: 1; }
.trust-k em { font-style: normal; color: var(--accent); }
.trust-label { font-size: 0.76rem; color: var(--fg-soft); letter-spacing: 0.03em; line-height: 1.4; }

/* Bereich-2 Trenner */
.section-split { border-top: 1px solid var(--line); }
.section-head.left { text-align: left; margin-left: 0; margin-right: 0; max-width: 720px; }
.section-head.left .section-lede { margin-left: 0; }

/* ═══════════════════════════════════════════════════════════════ FOOTER */
.footer {
  position: relative; z-index: 2;
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  padding: 4rem 2rem 2rem;
  margin-top: var(--sp-6);
}
.footer-top {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 2fr; gap: 4rem;
}
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr; gap: 2.5rem; } }
.footer-brand { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-mark { width: 48px; height: 48px; }
.footer-word { font-family: var(--f-display); font-size: 2.5rem; color: var(--fg); letter-spacing: 0.08em; }
.footer-word em { color: var(--accent); font-style: normal; }
.footer-sub { color: var(--fg-mute); font-size: 0.92rem; line-height: 1.5; margin-top: 0.5rem; max-width: 200px; font-weight: 300; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 1000px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.footer-col { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col-title { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; margin-bottom: 0.4rem; }
.footer-col a { font-size: 0.88rem; color: var(--fg-mute); transition: color 0.2s, transform 0.2s; }
.footer-col a:hover { color: var(--fg); transform: translateX(3px); }
.footer-bottom {
  max-width: 1400px; margin: 3rem auto 0;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: 0.75rem; color: var(--fg-soft); letter-spacing: 0.04em;
  flex-wrap: wrap; gap: 1rem;
}
.footer-status { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fg-mute); }

/* ═══════════════════════════════════════════════════════════════ TWEAKS PANEL */
.tweaks {
  position: fixed; right: 20px; bottom: 20px; z-index: 1000;
  width: 280px;
  background: color-mix(in srgb, var(--bg-card) 94%, transparent);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5);
  overflow: hidden;
}
.tweaks-head { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); }
.tweaks-title { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: 0.08em; color: var(--fg); }
.tweaks-close { font-size: 1.5rem; color: var(--fg-soft); width: 28px; height: 28px; border-radius: 50%; transition: background 0.2s, color 0.2s; }
.tweaks-close:hover { background: var(--line); color: var(--fg); }
.tweaks-body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.tweak-group { display: flex; flex-direction: column; gap: 0.5rem; }
.tweak-label { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-soft); }
.tweak-row { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.tweak-row button {
  flex: 1; min-width: 0;
  padding: 0.5rem 0.5rem;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.05em;
  background: var(--surface); color: var(--fg-mute);
  border: 1px solid var(--line); border-radius: 8px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.tweak-row button:hover { color: var(--fg); border-color: var(--line-strong); }
.tweak-row button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tweak-accent button {
  flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  background: var(--sw); border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line);
  transition: transform 0.2s, box-shadow 0.2s;
}
.tweak-accent button.active { box-shadow: 0 0 0 2px var(--fg); transform: scale(1.08); }
.tweak-accent button:hover { transform: scale(1.12); }

/* ═══════════════════════════════════════════════════════════════ VARIANT B — TERMINAL */
[data-variant="b"] {
  --f-display: "JetBrains Mono", monospace;
}
[data-variant="b"] .section-title { letter-spacing: -0.02em; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; }
[data-variant="b"] .section-title em { font-style: normal; }
[data-variant="b"] .section-title em::before { content: '<'; color: var(--accent); opacity: 0.6; }
[data-variant="b"] .section-title em::after { content: '>'; color: var(--accent); opacity: 0.6; }

/* Hero variant B — terminal window */
[data-variant="b"] .hero-mark { display: none; }
[data-variant="b"] .hero-inner::before {
  content: '';
  position: absolute; inset: var(--sp-6) 0 var(--sp-5); z-index: -1;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
[data-variant="b"] .hero-inner {
  padding: var(--sp-6) 2.5rem var(--sp-5);
  border-radius: var(--radius-lg);
  position: relative;
}
[data-variant="b"] .hero-inner::after {
  content: ''; position: absolute; top: 1rem; left: 1.5rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: #ff5f56;
  box-shadow: 18px 0 0 #ffbd2e, 36px 0 0 #27c93f;
}
[data-variant="b"] .hero-headline { font-size: clamp(3rem, 9vw, 8.5rem); letter-spacing: -0.035em; }
[data-variant="b"] .hero-headline .line > span::before { content: '> '; color: var(--accent); opacity: 0.5; }
[data-variant="b"] .hero-headline .line:nth-child(2) > span::before,
[data-variant="b"] .hero-headline .line:nth-child(3) > span::before { content: ''; }

[data-variant="b"] .sc-title { font-family: var(--f-mono); font-size: 1.2rem; font-weight: 600; }
[data-variant="b"] .step h3 { font-family: var(--f-mono); font-size: 1.15rem; font-weight: 600; }
[data-variant="b"] .stack-name { font-family: var(--f-mono); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }
[data-variant="b"] .about-title { letter-spacing: -0.02em; font-size: clamp(2.2rem, 4.5vw, 3.8rem); }
[data-variant="b"] .contact-title { letter-spacing: -0.02em; }
[data-variant="b"] .step-num { font-size: 3.5rem; font-family: var(--f-mono); font-weight: 300; }
[data-variant="b"] .meta-value { font-family: var(--f-mono); font-size: 2rem; font-weight: 600; letter-spacing: -0.01em; }
[data-variant="b"] .score-num { font-family: var(--f-mono); font-size: 2.8rem; font-weight: 600; }

[data-variant="b"] .service-grid { border-radius: var(--radius); }
[data-variant="b"] .service-card { background: var(--bg); }
[data-variant="b"] .service-card::after {
  content: 'service_' attr(data-idx) '.svc'; position: absolute; bottom: 1rem; right: 1.25rem;
  font-family: var(--f-mono); font-size: 0.68rem; color: var(--fg-soft); opacity: 0.6;
}

/* Responsive nav on B */
[data-variant="b"] .nav-wordmark { font-family: var(--f-mono); font-weight: 600; font-size: 1.1rem; letter-spacing: 0; }
[data-variant="b"] .nav-wordmark em { font-style: normal; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .marquee-track, .orb, .status-dot::after { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ----------- Hero-Buehne: Globus -----------
   Scroll-gescrubbte Szene in vier Akten, Rendering in assets/hero-globe.js
   (WebGL, keine Bibliothek). Fortschritt = Scrollposition, rueckwaerts identisch.
   Fallback-Kaskade: ohne JavaScript oder ohne WebGL zeigt .hs-stage das Poster
   plus die komplette Copy statisch im Fluss. Die Klasse .hero-webgl setzt eine
   Feature-Probe im <head> vor dem ersten Paint, deshalb CLS 0. */
/* Scrollstrecke der Buehne. Halbiert am 12.08.2026 von 280 auf 140vh: alle drei
   tragenden Bewegungen setzen seither bei Fortschritt 0.00 ein, der erste
   gescrollte Pixel ist sichtbar. Vorher lag die erste Reaktion bei 0.14 und der
   erste Schnitt bei 0.30, das waren 423 respektive 907 Pixel ohne Reaktion. */
:root { --hero-scrub: 140vh; } /* Token auch in legal.css, identisch. */
@media (max-width: 767px) { :root { --hero-scrub: 110vh; } }
@media (prefers-reduced-motion: reduce) { :root { --hero-scrub: 0vh; } }

.hs-scene { position: relative; }
.hero-webgl .hs-scene { height: calc(100vh + var(--hero-scrub)); }
.hs-stage {
  position: relative; min-height: 100vh; overflow: hidden;
  background: var(--bg);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-webgl .hs-stage { position: sticky; top: 0; height: 100vh; min-height: 0; z-index: 0; }
/* Akt IV: nach dem Ende der Scrub-Distanz bleibt der letzte Frame als fixierter
   Hintergrund stehen, waehrend die erste Inhaltssektion darueber scrollt. */
.hero-webgl .hs-stage.hs-fixed { position: fixed; inset: 0; height: 100vh; }
.hs-canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-webgl .hs-canvas { display: block; }
/* Poster als background-image, nicht als <img>: so laedt nur die Datei des
   aktiven Themes (Browser fetchen nur angewandte CSS-Hintergruende). */
.hs-poster { position: absolute; inset: 0; background: var(--bg) url('hero-poster-dark.webp') center / cover no-repeat; }
[data-theme="light"] .hs-poster { background-image: url('hero-poster-light.webp'); }
.hero-webgl .hs-poster { display: none; }

.hs-labels { display: none; position: absolute; inset: 0; overflow: hidden; z-index: 2; pointer-events: none; }
.hero-webgl .hs-labels { display: block; }
.hs-label {
  position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity;
  font-family: var(--f-mono); font-size: var(--fs-3xs); font-weight: 500;
  letter-spacing: 0.12em; line-height: 1.5; white-space: nowrap;
  color: var(--fg-soft);
  text-shadow: 0 0 6px var(--bg), 0 1px 10px var(--bg); /* lesbar ueber hellen Lichtern */
}
.hs-label small { display: block; font-size: var(--fs-3xs); color: var(--fg-soft); opacity: 0.8; }
.hs-label.is-dim, .hs-label.is-dim small { color: var(--fg-faint); opacity: 1; }
.hs-label-us { text-align: right; }

/* Kontrastschleier. Im Fallback statisch an (Text liegt auf dem Poster), im
   WebGL-Pfad faehrt hero-globe.js die Deckkraft ueber Akt IV hoch. */
.hs-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.85;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, transparent 30%),
    linear-gradient(0deg, var(--bg) 4%, color-mix(in srgb, var(--bg) 62%, transparent) 42%, transparent 72%);
}
.hero-webgl .hs-scrim { opacity: 0; }

/* Copy-Ebenen. Im Fallback normale Bloecke im Fluss, im WebGL-Pfad absolut
   unten links; Ebene 2 blendet in Akt III ueber Ebene 1 ein. */
.hs-copy {
  position: relative; z-index: 3;
  padding: 0 var(--gutter);
  max-width: 74rem; width: 100%; margin: 0 auto;
}
.hs-copy-1 { padding-top: calc(100px + var(--sp-4)); }
.hs-copy-2 { padding-bottom: var(--sp-6); padding-top: var(--sp-4); }
.hero-webgl .hs-copy { position: absolute; left: 0; right: 0; bottom: clamp(2.5rem, 8vh, 6rem); padding-top: 0; padding-bottom: 0; }
.hero-webgl .hs-copy-2 { opacity: 0; pointer-events: none; }

/* Steht als <div>, nicht als <p>: nach der Typoskala ist --fs-2xs ein
   Mono-Mikrolabel, keine Prosa. Als <p> fiel es in die Prosa-Untergrenze von
   15px und meldete check-design.mjs zweimal Verstoss (12px). */
.hs-kicker {
  margin: 0 0 var(--sp-2);
  font-family: var(--f-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-soft);
}
.hs-headline {
  margin: 0 0 var(--sp-3);
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-4xl); line-height: 0.92; letter-spacing: 0.005em;
  text-transform: uppercase; color: var(--fg); text-wrap: balance;
}
.hs-headline .hs-resolve {
  display: block; margin-top: 0.35rem;
  font-size: var(--fs-3xl); line-height: 1.05;
  font-style: italic; color: var(--accent);
}
.hs-lede { margin: 0 0 var(--sp-3); font-size: var(--fs-md); line-height: 1.7; color: var(--fg-mute); max-width: var(--measure); }
.hs-copy .hero-jump { margin-top: var(--sp-2); }

.hs-hint {
  display: none; position: absolute; right: var(--gutter); bottom: 1.75rem; z-index: 3;
  font-family: var(--f-mono); font-size: var(--fs-3xs); letter-spacing: 0.2em;
  color: var(--fg-soft); align-items: center; gap: 10px;
}
.hero-webgl .hs-hint { display: flex; }
.hs-hint::before { content: ''; width: 44px; height: 1px; background: var(--fg-faint); }

/* Flache Viewports (Laptop mit Browser-Chrome): der bodenverankerte Copy-Block
   kollidiert sonst ab ~610px Hoehe mit der fixierten Nav. Typo eine Stufe runter,
   Ankerabstand enger. */
@media (max-height: 700px) {
  .hero-webgl .hs-headline { font-size: var(--fs-3xl); }
  .hero-webgl .hs-headline .hs-resolve { font-size: var(--fs-2xl); }
  .hero-webgl .hs-lede { font-size: var(--fs-sm); }
  .hero-webgl .hs-copy { bottom: clamp(1.5rem, 5vh, 3rem); }
  .hero-webgl .hs-copy .hero-meta-grid { display: none; } /* steht als Text in #referenz-Zahlen ohnehin nicht allein */
}

/* Inhalt nach der Buehne liegt ueber dem fixierten letzten Frame (Akt IV). */
.hs-after { position: relative; z-index: 1; }

@media (max-width: 767px) {
  .hero-webgl .hs-copy { bottom: clamp(2rem, 6vh, 4rem); }
  .hs-hint { display: none !important; }
}

/* Reduzierte Bewegung: kein Scrub (Token oben auf 0), ein statischer Frame,
   beide Copy-Ebenen sofort und untereinander im Fluss sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .hero-webgl .hs-stage { position: relative; top: auto; height: auto; min-height: 100vh; }
  .hero-webgl .hs-copy { position: relative; bottom: auto; }
  .hero-webgl .hs-copy-1 { padding-top: calc(100px + var(--sp-4)); }
  .hero-webgl .hs-copy-2 { opacity: 1; pointer-events: auto; padding-bottom: var(--sp-6); }
  .hero-webgl .hs-scrim { opacity: 0.85; }
}

/* ─────────── Zugänglichkeit ───────────
   Steht bewusst am Ende: der Block korrigiert nur Farbe und Trefferfläche und
   muss die Regeln oben überschreiben. */

/* Akzentrot als Kleintext. Die Auswahl ist gemessen, nicht geraten: das sind die
   Regeln, die unter 24px mit var(--accent) eingefärbt sind. */
.eyebrow,
.meta-k,
.sc-num,
.sc-badge,
.cta-eyebrow,
.step-foot,
.portrait-hint-k,
.stack-key,
.footer-col-title,
.audience-more,
.score-meta a,
.contact-card .stack-note a,
.stack-detail-fine a,
.proof-note a,
.process-close a,
.form-check a,
.hero-lede em,
.about-paragraphs em {
  color: var(--accent-text);
}
/* Die 0.75 aus .audience-more zog den gemessenen Wert noch einmal unter 4.5:1.
   Der Hover bleibt am Pfeil, nicht an der Deckkraft. */
.audience-more { opacity: 1; }

/* Fokus. Vorher gab es genau eine :focus-visible-Regel, alles andere hing am
   Browser-Default, und der ist auf dunklem Grund kaum zu sehen. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sprungmarke für Tastatur und Screenreader. */
.skip-link {
  position: absolute; left: 0.75rem; top: -100px; z-index: 1000;
  font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.08em;
  background: var(--accent); color: #fff;
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius) var(--radius);
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 0; }

/* Trefferflächen auf 44px. Nav-Icons bekommen eine unsichtbare Hitbox, damit die
   sichtbare Größe und damit das Nav-Layout unverändert bleibt. */
.theme-toggle, .nav-burger, .nav-logo { position: relative; }
.theme-toggle::after, .nav-burger::after, .nav-logo::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 100%; height: 44px; min-width: 44px; transform: translate(-50%, -50%);
}
.hero-jump, .skip-link { min-height: 44px; display: inline-flex; align-items: center; }

/* Footer- und Sprungmarkenlisten stehen auf Mobile zu eng für den Daumen.
   Der Abstand bleibt, damit sich die Flächen nicht überlappen. */
@media (max-width: 700px) {
  .footer-col a { min-height: 44px; display: flex; align-items: center; }
}