/* ============================================================
   THERIAK — theriak.eu Website v3 ("Offizin")
   Apothecary paper + serif counsel voice (Fraunces) for the
   profession; evergreen machine-room sections + mono labels
   for the KI. Patterned on how vertical-AI leaders (legal,
   healthcare) encode their industry: material palettes, serif
   display at regular weight, hairline ledger rules, the
   artifact of work in the hero, compliance at the CTA.
   Fully self-contained: self-hosted fonts, inline SVG icons,
   zero external requests (DSGVO).
   ============================================================ */

/* ---- Self-hosted fonts (variable, latin subset) ---- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/IBMPlexSans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-Regular-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexMono-Medium-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/IBMPlexMono-SemiBold-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/Fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/Fraunces-italic-latin.woff2') format('woff2');
}

/* ---- Tokens ---- */
:root {
  --emerald-900: #022C22;
  --emerald-700: #065F46;
  --emerald-600: #047857;
  --emerald-500: #059669;
  --emerald-400: #10B981;
  --emerald-300: #A7F3D0;
  --emerald-100: #ECFDF5;

  /* Accents — semantic law: blue = Gesetz, violet = KI/Leitlinie,
     amber = Vertrag/Mensch, emerald = THERIAK (only interactive color). */
  --blue-700: #1D4ED8;
  --blue-500: #3B82F6;
  --blue-300: #93C5FD;
  --blue-100: #DBEAFE;
  --violet-600: #7C3AED;
  --violet-400: #A78BFA;
  --violet-300: #C4B5FD;
  --amber-600: #D97706;
  --amber-500: #F59E0B;
  --amber-300: #FCD34D;
  --rose-500: #F43F5E;
  --white: #FFFFFF;

  /* Apothecary paper (light ground) — warm ivory, not clinical white */
  --paper: #FAF8F1;
  --paper-2: #F3EFE4;
  --paper-line: #E2DCC9;
  --paper-line-strong: #CFC7AE;
  --bronze: #96683F;
  --bronze-deep: #6E4526;

  /* Warm ink text on paper */
  --text-primary: #14261F;
  --text-secondary: #3E5548;
  --text-muted: #6E6A5B;
  --primary: var(--emerald-500);
  --primary-hover: var(--emerald-600);
  --bg: var(--paper);
  --surface-card: #FFFEF9;
  --card-border: var(--paper-line);

  /* Atmosphere */
  --aura-emerald: rgba(16, 185, 129, 0.15);
  --aura-blue: rgba(29, 78, 216, 0.12);
  --aura-amber: rgba(245, 158, 11, 0.13);

  /* Dark ground ("Maschinenraum") */
  --ink: #022C22;
  --ink-2: #04382C;
  --ink-line: rgba(167, 243, 208, 0.14);
  --glow: rgba(16, 185, 129, 0.35);
  --text-on-ink: #ECFDF5;
  --text-on-ink-dim: #A7F3D0;

  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --radius-input: 6px;
  --radius-card: 12px;
  --radius-badge: 9999px;

  --shadow-card: 0 1px 3px rgba(31, 26, 12, 0.06), 0 1px 2px rgba(31, 26, 12, 0.04);
  --shadow-elevated: 0 4px 6px -1px rgba(31, 26, 12, 0.07), 0 2px 4px -2px rgba(31, 26, 12, 0.05);
  --shadow-strong: 0 24px 48px -16px rgba(2, 44, 34, 0.28);
  --shadow-focus: 0 0 0 3px rgba(5, 150, 105, 0.18);
  --shadow-focus-dark: 0 0 0 3px rgba(167, 243, 208, 0.4);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-reveal: 600ms;
  --dur-micro: 180ms;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* short pages (legal) keep the footer at the viewport bottom */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { flex: 1; }
a { color: var(--primary-hover); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-input);
}
.on-ink a:focus-visible, .on-ink button:focus-visible {
  box-shadow: var(--shadow-focus-dark);
}
img, svg { display: block; }
button { font-family: inherit; }

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* anchor targets land below the sticky header */
[id] { scroll-margin-top: 80px; }

/* ---- Dark-section atmosphere: subliminal film grain (≤3%) ---- */
.on-ink { position: relative; }
.on-ink::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Display type: the counsel voice ---- */
h1, h2, .section-head h2 {
  font-family: var(--font-serif);
  font-weight: 440;
  font-variant-ligatures: common-ligatures contextual;
}

/* ---- Ledger rule head: hairline + mono number + running title ---- */
.rule-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--paper-line-strong);
  padding-top: 12px;
  margin-bottom: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rule-head .num { color: var(--primary); }
.on-ink .rule-head {
  border-top-color: var(--ink-line);
  color: rgba(167, 243, 208, 0.6);
}
.on-ink .rule-head .num { color: var(--emerald-400); }

/* ---- Scroll reveal system (JS-gated: page is fully visible without JS) ---- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---- Header (paper, hairline) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 248, 241, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--paper-line);
}
.site-header::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(31, 26, 12, 0.08);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.site-header.is-scrolled::after { opacity: 1; }
.site-header .container {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}
.brand:hover { text-decoration: none; }
.brand img { height: 30px; width: auto; }
.wordmark {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--emerald-900);
}
.header-nav { display: flex; align-items: center; gap: 26px; }
/* exclude .btn so nav-link colors can never override button colors */
.header-nav a:not(.btn) {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color var(--dur-micro) ease;
}
.header-nav a:not(.btn):hover { color: var(--emerald-900); text-decoration: none; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-input);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-micro) ease, box-shadow var(--dur-micro) ease,
              transform var(--dur-micro) ease, border-color var(--dur-micro) ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--emerald-600);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--emerald-700);
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35);
}
/* hover must not swallow the keyboard focus ring */
.btn-primary:focus-visible {
  box-shadow: var(--shadow-focus), 0 4px 16px rgba(5, 150, 105, 0.35);
}
.btn-ghost {
  background: transparent;
  color: var(--emerald-900);
  border-color: var(--paper-line-strong);
}
.btn-ghost:hover {
  border-color: var(--emerald-500);
  background: rgba(5, 150, 105, 0.05);
}

/* ============================================================
   HERO — ruled apothecary paper, the corpus as a cabinet
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  /* ruled ledger lines + warm auras on ivory */
  background-image:
    repeating-linear-gradient(180deg, transparent 0 55px, rgba(2, 44, 34, 0.035) 55px 56px),
    radial-gradient(900px 600px at 90% -10%, var(--aura-emerald), transparent 60%),
    radial-gradient(700px 500px at -10% 90%, var(--aura-amber), transparent 55%),
    linear-gradient(180deg, #FBF9F3, var(--paper));
}
.hero .container { position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 50fr) minmax(0, 44fr);
  gap: 64px;
  align-items: center;
  padding: 88px 0 110px;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-radius: var(--radius-badge);
  border: 1px solid var(--paper-line-strong);
  background: rgba(255, 254, 249, 0.75);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0 0 28px;
}
.hero-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber-500);
  flex: none;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.hero h1 {
  margin: 0 0 24px;
  font-size: clamp(40px, 4.8vw, 64px);
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--emerald-900);
}
.hero h1 .l2 {
  display: block;
  color: var(--emerald-600);
}
.hero h1 em {
  font-style: italic;
  font-weight: 460;
}
.hero .lead {
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 54ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
/* compliance at the point of conversion */
.hero-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.hero-proof li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-proof li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald-500);
  flex: none;
}
.hero-proof li:nth-child(2)::before { background: var(--blue-500); }
.hero-proof li:nth-child(3)::before { background: var(--violet-400); }

/* ---- Der Quellenschrank ---- */
.cabinet-wrap {
  position: relative;
  /* room for the overlapping answer card */
  padding: 0 0 76px 36px;
}
.cabinet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  background:
    radial-gradient(500px 300px at 80% 0%, rgba(16, 185, 129, 0.10), transparent 65%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 7px),
    linear-gradient(175deg, #07402F 0%, #032B20 70%, #02251C 100%);
  border: 1px solid rgba(1, 20, 15, 0.55);
  box-shadow:
    var(--shadow-strong),
    inset 0 2px 0 rgba(167, 243, 208, 0.14),
    inset 0 -4px 8px rgba(0, 0, 0, 0.35),
    inset 3px 0 6px rgba(0, 0, 0, 0.22),
    inset -3px 0 6px rgba(0, 0, 0, 0.22);
}
.drawer {
  position: relative;
  min-height: 74px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(110, 69, 38, 0.03) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #F9F5EA 0%, #EFE9D8 70%, #E1D9C1 100%);
  border: 1px solid rgba(2, 44, 34, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 4px rgba(2, 44, 34, 0.13);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 6px;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
              filter 0.45s ease;
}
/* the dark slot the drawer slid out of — revealed only when open */
.drawer::after {
  content: '';
  position: absolute;
  top: -13px;
  left: 7%;
  right: 7%;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(0, 14, 10, 0.85), rgba(0, 14, 10, 0.2));
  opacity: 0;
  transition: opacity 0.3s ease 0.12s;
  pointer-events: none;
}
/* colored spine: the source type, readable at a glance */
.drawer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--drawer-accent, var(--blue-500));
  opacity: 0.75;
}
.d-gesetz { --drawer-accent: var(--blue-500); }
.d-vertrag { --drawer-accent: var(--amber-500); }
.d-leitlinie { --drawer-accent: var(--violet-400); }
.drawer .plate {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--emerald-900);
  padding: 4px 8px;
  border: 1px solid #A9834F;
  border-radius: 3px;
  background: linear-gradient(180deg, #FFFEF6, #F4EEDC);
  box-shadow:
    0 0 0 1px rgba(110, 69, 38, 0.22),
    0 1px 1px rgba(2, 44, 34, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer .knob {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 28%, #F2D9AC, #C29257 40%, var(--bronze) 68%, var(--bronze-deep));
  border: 1px solid rgba(90, 55, 28, 0.55);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.35),
    inset 0 -1px 1px rgba(255, 255, 255, 0.25);
}
/* retrieval sweep + the pulled drawer */
.drawer.scan {
  box-shadow: inset 0 -3px 0 rgba(2, 44, 34, 0.10),
              0 0 0 2px rgba(16, 185, 129, 0.45),
              0 0 22px rgba(16, 185, 129, 0.3);
}
.drawer.open {
  transform: translateY(12px) scale(1.12);
  /* realism, not a highlight ring: deep cast shadow onto the cabinet,
     contact shadow, kept bevels, and a slight catch-light */
  box-shadow:
    0 26px 36px -12px rgba(1, 16, 12, 0.6),
    0 8px 14px -6px rgba(1, 16, 12, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 4px rgba(2, 44, 34, 0.13);
  filter: brightness(1.04);
  z-index: 2;
}
.drawer.open::after { opacity: 1; }
/* the artifact: an answered question with its citation.
   Custom props parameterize the "dealt from the drawer" flight so the
   mobile (static, in-flow) layout can swap it for a plain lay-down. */
.hero-card {
  --card-tilt: -1.4deg;   /* resting z-rotation */
  --deal-x: 30px;         /* flight start: toward the cabinet, up-right */
  --deal-y: -38px;
  --deal-rx: 26deg;       /* lifting-off tilt at flight start */
  position: absolute;
  left: -18px;
  right: 31%;
  bottom: -6px;
  min-height: 228px;
  margin: 0;
  background: var(--surface-card);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-card);
  padding: 18px 20px 16px;
  box-shadow: 0 24px 48px -12px rgba(2, 44, 34, 0.35);
  transform: rotate(var(--card-tilt));
}
/* deeper, softer "lifted paper" shadow — revealed by opacity only,
   so flight stays compositor-friendly. Invisible without JS. */
.hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-card);
  box-shadow: 0 40px 72px -16px rgba(2, 44, 34, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.hero-card .hc-q {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.hero-card .hc-a {
  font-family: var(--font-serif);
  font-weight: 420;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.hero-card .hc-chips { margin: 0; }

/* Four landing corners — the card lands in the quadrant opposite the
   open drawer, so the pulled drawer is never covered. Base position
   (no class) is bottom-left, matching the no-JS scene 0. The flight
   vector flips with the corner so the sheet always arrives from the
   drawer's side. Desktop only: the mobile card is static in flow. */
@media (min-width: 701px) {
  .hero-card.pos-br {
    left: 31%;
    right: -18px;
    --card-tilt: 1.2deg;
    --deal-x: -30px;
  }
  .hero-card.pos-tl {
    top: -64px;
    bottom: auto;
    --deal-y: 38px;
    --deal-rx: -22deg;
  }
  .hero-card.pos-tr {
    top: -64px;
    bottom: auto;
    left: 31%;
    right: -18px;
    --card-tilt: 1.2deg;
    --deal-x: -30px;
    --deal-y: 38px;
    --deal-rx: -22deg;
  }
}

/* ---- Card choreography (JS-gated; the no-JS card is simply at rest) ----
   .lift  — the old sheet is picked back up toward the drawer (transition)
   .deal  — the new sheet flies out of the drawer and lands (keyframes)
   .enter — first reveal: the sheet unfolds onto the desk (keyframes)
   A finished/removed class always resolves to the identical resting
   transform, so stopCycle() can drop any of them without a jump. */
.js .hero-card {
  transition: transform 300ms var(--ease-out), opacity 260ms ease;
}
.js .hero-card.lift {
  opacity: 0;
  transform: perspective(1100px)
             translate3d(calc(var(--deal-x) * 0.6), calc(var(--deal-y) * 0.6), 18px)
             rotateX(14deg)
             rotate(calc(var(--card-tilt) * 0.3));
  transition: transform 240ms cubic-bezier(0.5, 0, 0.75, 0.4),
              opacity 220ms ease 20ms;
}
.js .hero-card.lift::after { opacity: 1; }
.js .hero-card.deal {
  animation: card-deal 620ms cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.js .hero-card.deal::after {
  animation: card-shadow-settle 620ms ease both;
}
/* the 160ms delay lets the wrap's own reveal fade get ahead, so the
   unfold itself is what the reader actually sees */
.js .hero-card.enter {
  animation: card-unfold 640ms var(--ease-out) 160ms both;
}
.js .hero-card.enter::after {
  animation: card-shadow-settle 640ms ease 160ms both;
}
/* dealt from the drawer: rise from the cabinet, tilted as if just pulled,
   land with one gentle overshoot (78%) — no cartoon bounce */
@keyframes card-deal {
  0% {
    opacity: 0;
    transform: perspective(1100px)
               translate3d(var(--deal-x), var(--deal-y), 24px)
               rotateX(var(--deal-rx))
               rotate(0.4deg);
  }
  45% { opacity: 1; }
  78% {
    transform: perspective(1100px)
               translate3d(-2px, 2px, 0)
               rotateX(-2deg)
               rotate(calc(var(--card-tilt) - 0.3deg));
  }
  100% {
    opacity: 1;
    transform: perspective(1100px) rotate(var(--card-tilt));
  }
}
/* first reveal: paper unfolds and lays down onto the desk */
@keyframes card-unfold {
  0% {
    opacity: 0;
    transform: perspective(1100px)
               translate3d(0, -14px, 0)
               rotateX(-56deg)
               rotate(0deg);
  }
  60% { opacity: 1; }
  82% {
    transform: perspective(1100px) rotateX(3deg) rotate(var(--card-tilt));
  }
  100% {
    opacity: 1;
    transform: perspective(1100px) rotate(var(--card-tilt));
  }
}
/* the lifted-paper shadow eases away as the sheet settles */
@keyframes card-shadow-settle {
  0% { opacity: 1; }
  70% { opacity: 0.6; }
  100% { opacity: 0; }
}
/* garnish: the open drawer's glow pulses once as the sheet leaves it */
.js .drawer.open.pulse {
  animation: drawer-pulse 600ms ease-out;
}
@keyframes drawer-pulse {
  0%, 100% { filter: brightness(1.04); }
  40% { filter: brightness(1.15); }
}

/* ============================================================
   STATS — protagonist numerals between hairlines
   ============================================================ */
.stats {
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
  background: var(--paper-2);
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
}
.stat {
  display: flex;
  flex-direction: column;
  padding: 32px 28px 30px;
  border-left: 1px solid var(--paper-line);
}
.stat:first-child { border-left: 0; }
/* numeral leads, label follows (dt precedes dd in markup for semantics) */
.stat dd {
  order: 1;
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--emerald-900);
}
.stat dt {
  order: 2;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ============================================================
   DEMO — the Co-Pilot answers, live (Maschinenraum)
   ============================================================ */
.demo {
  background:
    radial-gradient(1000px 600px at 85% 0%, rgba(124, 58, 237, 0.10), transparent 60%),
    radial-gradient(800px 500px at 0% 100%, rgba(29, 78, 216, 0.10), transparent 55%),
    var(--ink);
  color: var(--text-on-ink);
  padding: 88px 0 72px;
}
.demo .section-head { max-width: 680px; margin-bottom: 36px; }
.demo .section-head p { color: var(--text-on-ink-dim); }

.demo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 20px;
  max-width: 880px;
}
html:not(.js) .demo-tabs { display: none; }
.demo-tab {
  padding: 8px 16px;
  border-radius: var(--radius-badge);
  border: 1px solid var(--ink-line);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-on-ink-dim);
  cursor: pointer;
  transition: border-color var(--dur-micro) ease, background var(--dur-micro) ease,
              color var(--dur-micro) ease;
}
.demo-tab:hover { border-color: rgba(167, 243, 208, 0.4); color: var(--text-on-ink); }
.demo-tab:focus-visible { border-radius: var(--radius-badge); }
.demo-tab.active {
  border-color: rgba(16, 185, 129, 0.6);
  background: rgba(16, 185, 129, 0.1);
  color: var(--emerald-300);
}

/* gradient hairline: emerald → blue → violet around the product window */
.demo-frame {
  max-width: 882px;
  margin: 0 auto;
  padding: 1px;
  border-radius: 13px;
  background: linear-gradient(140deg,
    rgba(16, 185, 129, 0.55),
    rgba(29, 78, 216, 0.40) 55%,
    rgba(124, 58, 237, 0.35));
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5),
              0 0 70px -30px var(--glow),
              0 0 90px -50px rgba(29, 78, 216, 0.3);
}
.demo-window {
  background: var(--ink-2);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.demo-titlebar {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-line);
  position: relative;
}
.demo-titlebar .dots { display: flex; gap: 7px; }
.demo-titlebar .dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-line);
}
.demo-titlebar .title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(167, 243, 208, 0.75);
  white-space: nowrap;
}
/* min-height covers a complete dialogue so playback resets never change
   page height (which would shift the reader's scroll position) */
.demo-body {
  position: relative;
  padding: 28px;
  min-height: 360px;
  background: linear-gradient(180deg, transparent, rgba(29, 78, 216, 0.05));
}
@media (max-width: 700px) {
  .demo-body { min-height: 440px; }
}

.demo-dialog + .demo-dialog {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px dashed var(--ink-line);
}
.js .demo-dialog { display: none; margin-top: 0; padding-top: 0; border-top: 0; }
.js .demo-dialog.active { display: block; }

.msg { max-width: 82%; margin-bottom: 18px; }
.msg-q {
  margin-left: auto;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px 12px 4px 12px;
  padding: 14px 18px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-on-ink);
}
.msg-a {
  margin-right: auto;
  background: rgba(2, 44, 34, 0.55);
  border: 1px solid var(--ink-line);
  border-radius: 12px 12px 12px 4px;
  padding: 16px 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-on-ink);
}
.msg-a .word { display: inline; }
.js .msg-a .word {
  opacity: 0;
  transition: opacity 120ms ease;
}
.js .msg-a .word.on { opacity: 1; }

.typing-caret::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--emerald-400);
  animation: caret 1s steps(2, jump-none) infinite;
}
@keyframes caret {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* the KI speaks violet — retrieval/thinking is visually the AI,
   distinct from the emerald answer */
.demo-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--violet-300);
  margin: 0 0 18px;
}
.demo-status .sdots { display: inline-flex; gap: 5px; }
.demo-status .sdots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-line);
  transition: background var(--dur-micro) ease;
}
.demo-status .sdots span.on { background: var(--violet-400); }

.demo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--paper-2);
  border: 1px solid var(--card-border);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}
/* semantic citation chips (dark ground) — blue = Gesetz/Verordnung,
   amber = Vertrag, violet = Leitlinie */
.chip-gesetz {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.45);
  color: var(--blue-300);
}
.chip-vertrag {
  background: rgba(245, 158, 11, 0.13);
  border-color: rgba(245, 158, 11, 0.4);
  color: var(--amber-300);
}
.chip-leitlinie {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.45);
  color: var(--violet-300);
}
/* light-ground variants */
.chip-gesetz-l {
  background: var(--blue-100);
  border-color: #BFDBFE;
  color: var(--blue-700);
}
.chip-vertrag-l {
  background: #FEF3C7;
  border-color: #FDE68A;
  color: #78350F;
}
.chip-leitlinie-l {
  background: #F5F3FF;
  border-color: #DDD6FE;
  color: #5B21B6;
}
.js .demo-chips .chip {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.js .demo-chips .chip.pop { opacity: 1; transform: scale(1); }

.demo-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(167, 243, 208, 0.78);
}
.js .demo-note { opacity: 0; transition: opacity 400ms ease; }
.js .demo-note.on { opacity: 1; }

.demo-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin: 18px auto 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(167, 243, 208, 0.75);
}
.demo-legend .lg {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.lg-blue { background: var(--blue-500); }
.lg-amber { background: var(--amber-500); }
.lg-violet { background: var(--violet-400); }

/* ============================================================
   HERITAGE — the name, typeset like a colophon
   ============================================================ */
.heritage {
  background: var(--paper-2);
  border-bottom: 1px solid var(--paper-line);
}
.heritage-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 72px 0;
  text-align: center;
}
.heritage-mark {
  width: 30px;
  height: auto;
  margin: 0 auto 24px;
  color: var(--bronze);
  opacity: 0.85;
}
.heritage-text {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.6;
  color: var(--text-primary);
}
.heritage-text em {
  font-style: italic;
  color: var(--emerald-700);
}

/* ============================================================
   LIGHT SECTIONS
   ============================================================ */
.section { padding: 88px 0; }
.section-alt {
  background: var(--paper-2);
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.section-head { position: relative; max-width: 680px; margin-bottom: 48px; }
.section-head h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--emerald-900);
}
.section-head p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.6;
}
.on-ink .section-head h2 { color: var(--white); }

/* ---- Feature split rows with product vignettes ---- */
.split-row {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: 56px;
  align-items: center;
}
.split-row > * { min-width: 0; }
.split-row + .split-row { margin-top: 96px; }
.split-row.flip .split-text { order: 2; }
.split-text h3 {
  margin: 0 0 14px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--emerald-900);
}
.split-text p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.split-text p:last-child { margin-bottom: 0; }

.vignette {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elevated);
  padding: 26px;
}
/* colored light behind each product vignette */
.vignette::before {
  content: '';
  position: absolute;
  inset: -28px -20px;
  z-index: -1;
  border-radius: 24px;
  background: radial-gradient(closest-side, var(--vignette-aura, var(--aura-emerald)), transparent);
}
.aura-emerald { --vignette-aura: var(--aura-emerald); }
.aura-blue { --vignette-aura: var(--aura-blue); }
.aura-amber { --vignette-aura: var(--aura-amber); }
.aura-violet { --vignette-aura: rgba(124, 58, 237, 0.12); }

/* ---- Das KI-Team: three named personas, violet = KI ---- */
.ki-team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0 0 12px;
}
.ki-card {
  position: relative;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--ki-accent, var(--violet-400));
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px 22px 18px;
}
/* persona colors follow the brand's semantic accents by domain —
   Adenin/QMS = emerald (matches the chromatogram convention A = green),
   Thymin/Compliance = Gesetz-blue, Guanin/Beratung = Mensch-amber.
   Violet stays the collective KI marker (fallback, and Cytosin one day). */
.ki-a { --ki-accent: var(--emerald-500); --ki-tint: var(--emerald-100); --ki-deep: var(--emerald-600); }
.ki-t { --ki-accent: var(--blue-500); --ki-tint: var(--blue-100); --ki-deep: var(--blue-700); }
.ki-g { --ki-accent: var(--amber-500); --ki-tint: #FEF3C7; --ki-deep: #92400E; }
/* the fourth colleague: violet, still in training — dashed silhouette */
.ki-c {
  --ki-accent: var(--violet-400);
  --ki-tint: #F5F3FF;
  --ki-deep: var(--violet-600);
  border-style: dashed;
  border-top-style: solid;
  background: var(--paper);
}
.ki-eta {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--paper-line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
/* the base's skeletal graph as a background watermark — large, grey,
   bleeding off the card edge, always behind the text */
.ki-molecule {
  position: absolute;
  right: 4px;
  bottom: -16px;
  width: 180px;
  height: auto;
  color: var(--text-muted);
  opacity: 0.13;
  transform: rotate(-8deg);
  pointer-events: none;
}
.ki-card > *:not(.ki-molecule) { position: relative; z-index: 1; }
.ki-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ki-tint, #F5F3FF);
  color: var(--ki-deep, var(--violet-600));
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 21px;
  margin-bottom: 12px;
}
.ki-name {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--emerald-900);
  margin: 0 0 2px;
}
.ki-role {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ki-deep, var(--violet-600));
  margin: 0 0 14px;
}
.ki-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ki-card li {
  position: relative;
  padding: 5px 0 5px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.ki-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ki-accent, var(--violet-400));
}
.ki-audit {
  margin: 0 0 72px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* vignette: KI-drafted SOP document */
.mini-doc {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 16px 18px 12px;
  background: var(--surface-card);
}
.md-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.md-head .pill-violet { margin-bottom: 0; }
.md-title {
  font-family: var(--font-serif);
  font-weight: 460;
  font-size: 17.5px;
  letter-spacing: -0.01em;
  color: var(--emerald-900);
  margin: 0 0 8px;
}
.md-line {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 6px;
}
.md-fade { opacity: 0.55; }
.md-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--card-border);
  padding-top: 10px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}

/* vignette: self-inspection checklist */
.mc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.mc-head strong { font-size: 15px; }
.mc-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}
.mc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  font-size: 14px;
  color: var(--text-primary);
}
.mc-list li + li { border-top: 1px solid var(--card-border); }
.mc-list .cb {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--paper-line-strong);
  border-radius: 4px;
  background: var(--surface-card);
  position: relative;
}
.mc-list .done .cb {
  background: var(--primary);
  border-color: var(--primary);
}
.mc-list .done .cb::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mc-list li:not(.done) { color: var(--text-muted); }
.mc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--card-border);
  padding-top: 12px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

/* vignette: document list */
.doc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  font-size: 14px;
}
.doc-row + .doc-row { border-top: 1px solid var(--card-border); }
.doc-id {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--blue-700);
  flex: none;
}
.doc-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.badge {
  flex: none;
  padding: 2px 10px;
  border-radius: var(--radius-badge);
  font-size: 11.5px;
  font-weight: 700;
}
.badge-ok { background: var(--emerald-100); color: var(--emerald-600); }
.badge-warn { background: #FFFBEB; color: #92400E; }
.doc-read {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--card-border);
  font-size: 13px;
  color: var(--text-muted);
}
.doc-read .bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--paper-2);
  overflow: hidden;
}
.doc-read .bar i {
  display: block;
  height: 100%;
  width: 89%;
  border-radius: 3px;
  background: var(--primary);
}
.js .doc-read .bar i {
  width: 0;
  transition: width 400ms var(--ease-out) 300ms;
}
.js .is-in .doc-read .bar i { width: 89%; }
.doc-read .val { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }

/* vignette: CAPA card */
.mini-capa {
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--amber-600);
  border-radius: 8px;
  padding: 16px 18px;
}
.mini-capa .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.mini-capa .head strong { font-size: 15px; }
.mini-capa .cid { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.mini-capa .desc { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 12px; }
/* violet = preventive (the app's own semantic, surfaced) */
.pill-violet {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-badge);
  background: #F5F3FF;
  color: var(--violet-600);
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 16px;
}
.mini-steps { display: flex; align-items: flex-start; }
.mini-step { flex: 1; position: relative; text-align: center; }
.mini-step::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--card-border);
}
.mini-step:first-child::before { display: none; }
.mini-step .pt {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--surface-card);
  border: 2px solid var(--card-border);
}
.mini-step.done .pt { background: var(--primary); border-color: var(--primary); }
.mini-step.now .pt { border-color: var(--primary); }
.mini-step span {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.3;
}
.mini-step.done span, .mini-step.now span { color: var(--text-secondary); }

/* ---- Flow map: many triggers, one verified core, three result types ---- */
#funktionsweise {
  background-image:
    radial-gradient(720px 440px at 90% 6%, rgba(139, 92, 246, 0.07), transparent 60%),
    radial-gradient(600px 400px at 4% 96%, rgba(59, 130, 246, 0.05), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%237C3AED' stroke-opacity='0.05' stroke-width='1.5'%3E%3Cpath d='M30 40 L110 20 L150 90 M110 20 L200 60 M150 90 L60 150 L20 210 M60 150 L170 170 L210 120 M170 170 L120 230'/%3E%3C/g%3E%3Cg fill='%237C3AED' fill-opacity='0.07'%3E%3Ccircle cx='30' cy='40' r='2.5'/%3E%3Ccircle cx='110' cy='20' r='2.5'/%3E%3Ccircle cx='150' cy='90' r='2.5'/%3E%3Ccircle cx='200' cy='60' r='2.5'/%3E%3Ccircle cx='60' cy='150' r='2.5'/%3E%3Ccircle cx='20' cy='210' r='2.5'/%3E%3Ccircle cx='170' cy='170' r='2.5'/%3E%3Ccircle cx='210' cy='120' r='2.5'/%3E%3Ccircle cx='120' cy='230' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}
.flowmap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.08fr) 64px minmax(0, 1fr);
  align-items: stretch;
}
.fm-col { display: flex; flex-direction: column; min-width: 0; }
.fm-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
  height: 16px;
}
.fm-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
/* the middle column is one machine: a framed panel the wires plug into.
   It wraps its content and centers on the gutters' convergence line, so
   the incoming/outgoing bundles land on its edges, not in empty space. */
.fm-stack.fm-core {
  justify-content: center;
  gap: 0;
  flex: 0 0 auto;
  margin: auto 0;
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow-card);
}
/* sockets at the exact points the wire bundles arrive and leave */
.fm-stack.fm-core::before,
.fm-stack.fm-core::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--surface-card);
}
.fm-stack.fm-core::before { left: -5px; border: 2px solid var(--blue-500); }
.fm-stack.fm-core::after { right: -5px; border: 2px solid var(--emerald-500); }
.fm-node {
  background: var(--surface-card);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--fm-accent, var(--primary));
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 13px 16px;
}
.fm-amber { --fm-accent: var(--amber-500); }
.fm-blue { --fm-accent: var(--blue-500); }
.fm-violet { --fm-accent: #8B5CF6; }
.fm-emerald { --fm-accent: var(--emerald-500); }
/* roadmap nodes: dashed silhouette, same language as Cytosin's card */
.fm-future {
  border-style: dashed;
  border-left-style: solid;
  background: var(--paper);
}
.fm-future strong { color: var(--text-secondary); }
.fm-more {
  margin: 22px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.fm-node strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--emerald-900);
  margin-bottom: 3px;
}
.fm-node span {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.fm-node span.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.fm-gutter {
  padding-top: 30px; /* mirror of fm-label height + margin, keeps geometry true */
  display: flex;
}
.fm-gutter svg { width: 100%; height: 100%; }
.fm-dash { stroke-dasharray: 6 6; }
/* connectors energize while the section is on screen (.flow-on is
   toggled by an IntersectionObserver and cleared by motionStops) */
.js .flowmap.flow-on .fm-dash {
  animation: dashflow 1400ms linear infinite;
}
@keyframes dashflow {
  from { stroke-dashoffset: 12; }
  to { stroke-dashoffset: 0; }
}
.fm-core-link {
  display: flex;
  justify-content: center;
  padding: 6px 0;
}
.fm-core-link svg { width: 22px; height: 36px; }

.pipeline-caption {
  max-width: 640px;
  margin: 36px auto 0;
  text-align: center;
  font-size: 16px;
  color: var(--text-secondary);
}

/* ============================================================
   SECURITY (dark band)
   ============================================================ */
.trust {
  background:
    radial-gradient(900px 600px at 92% 0%, var(--aura-blue), transparent 55%),
    radial-gradient(700px 500px at 0% 100%, rgba(124, 58, 237, 0.08), transparent 55%),
    var(--ink);
  color: var(--text-on-ink);
}
.trust .section-head p { color: var(--text-on-ink-dim); }

/* three principles: what the KI will not do — serif statements on rules */
.grundsaetze {
  max-width: 820px;
  margin: 0 0 56px;
}
.g-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emerald-400);
  margin: 0 0 8px;
}
.g-list {
  list-style: none;
  counter-reset: gz;
  margin: 0;
  padding: 0;
}
.g-list li {
  counter-increment: gz;
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 18px;
  padding: 20px 0;
}
/* the rule above each Grundsatz is an element (not a border) so it can
   draw itself in on reveal; without JS it is simply at rest, fully drawn */
.g-list li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink-line);
  transform-origin: left center;
}
.g-list li::before {
  content: counter(gz, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(167, 243, 208, 0.55);
  padding-top: 6px;
}
.g-list strong {
  font-family: var(--font-serif);
  font-weight: 460;
  font-size: clamp(19px, 2.2vw, 23px);
  letter-spacing: -0.01em;
  color: var(--white);
}
.g-list span {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-on-ink-dim);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.trust-item {
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-card);
  padding: 24px;
  background: var(--ink-2);
}
/* per-item colored icon tiles — color lives only in these 40px tiles */
.trust-item .tile {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.trust-item svg { width: 20px; height: 20px; }
.tile-emerald { background: rgba(16, 185, 129, 0.14); color: #34D399; }
.tile-blue { background: rgba(59, 130, 246, 0.14); color: #60A5FA; }
.tile-violet { background: rgba(124, 58, 237, 0.14); color: var(--violet-400); }
.tile-amber { background: rgba(245, 158, 11, 0.14); color: #FBBF24; }
.trust-item h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}
.trust-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-on-ink-dim);
}

/* data-flow strip */
.dataflow {
  margin-top: 24px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-card);
  background: var(--ink-2);
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}
.flow-node {
  border: 1px solid rgba(167, 243, 208, 0.3);
  border-radius: 10px;
  padding: 14px 22px;
  text-align: center;
}
.flow-node strong {
  display: block;
  font-size: 15px;
  color: var(--white);
}
.flow-node span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-on-ink-dim);
  margin-top: 3px;
}
.flow-node.dead {
  border-color: rgba(167, 243, 208, 0.12);
  opacity: 0.55;
}
.flow-node.dead strong { color: var(--text-on-ink-dim); }
.flow-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 116px;
  flex: 0 0 auto;
}
.flow-track {
  position: relative;
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
}
.flow-wire {
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--emerald-400) 0 7px,
    transparent 7px 13px
  );
  animation: wire-flow 0.9s linear infinite;
}
@keyframes wire-flow {
  to { background-position: 13px 0; }
}
.flow-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink-2);
  border: 1px solid rgba(167, 243, 208, 0.35);
  display: grid;
  place-items: center;
  color: var(--emerald-400);
  box-shadow: 0 0 0 5px var(--ink-2);
}
.flow-badge svg { width: 13px; height: 13px; }
.flow-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-on-ink-dim);
  white-space: nowrap;
}
.flow-link.cut .flow-wire {
  background: repeating-linear-gradient(
    90deg,
    rgba(167, 243, 208, 0.22) 0 7px,
    transparent 7px 13px
  );
  animation: none;
}
.flow-link.cut .flow-badge {
  border-color: rgba(244, 63, 94, 0.45);
  color: var(--rose-500);
}
.flow-link.cut .flow-tag { color: rgba(167, 243, 208, 0.4); }
.dataflow-caption {
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(167, 243, 208, 0.8);
  margin-top: 4px;
}

/* ============================================================
   PILOT & CONTACT (paper)
   ============================================================ */
.pilot-frame {
  padding: 1px;
  border-radius: 13px;
  background: linear-gradient(140deg,
    rgba(16, 185, 129, 0.5),
    rgba(29, 78, 216, 0.25),
    rgba(245, 158, 11, 0.3));
  box-shadow: var(--shadow-strong);
}
.pilot-card {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.pilot-card > * { min-width: 0; }
.pilot-card p {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 16px;
}
.stepper {
  display: flex;
  margin: 28px 0 4px;
}
.step { flex: 1; position: relative; text-align: center; }
.step::before {
  content: '';
  position: absolute;
  top: 7px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--card-border);
}
.step:first-child::before { display: none; }
.step .pt {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--surface-card);
  border: 2px solid var(--card-border);
}
.step.active .pt { background: var(--primary); border-color: var(--primary); }
/* the fill: progress running from the active step partway to the next.
   A separate element (::after) so it can grow via scaleX on reveal;
   without JS it rests at its final extent. */
.step.active + .step::after {
  content: '';
  position: absolute;
  top: 7px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary) 40%, rgba(5, 150, 105, 0));
  transform: scaleX(0.62);
  transform-origin: left center;
}
.step span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.3;
}
.step.active span { color: var(--text-secondary); }
.contact-box {
  background: var(--paper-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  text-align: center;
}
.contact-box .label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.contact-form { text-align: left; }
.cf-field { display: block; margin-bottom: 14px; }
.cf-field span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.cf-field input,
.cf-field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
}
.cf-field input:focus-visible,
.cf-field textarea:focus-visible {
  outline: none;
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
/* honeypot: invisible to people, present for bots */
.cf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.contact-form .btn { width: 100%; margin-top: 4px; }
.cf-status {
  margin: 10px 0 0;
  font-size: 14px;
  min-height: 1em;
}
.cf-status.err { color: #B91C1C; }
.cf-status.okay { color: var(--emerald-700, #047857); font-weight: 600; }
.cf-alt {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--text-secondary);
  text-align: center;
}
.cf-alt a { font-family: var(--font-mono); font-size: 13px; }
.contact-box .btn { margin-top: 4px; }

/* ============================================================
   FOOTER (dark, closes the frame)
   ============================================================ */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-top: 1px solid var(--ink-line);
  padding: 40px 0;
}
.site-footer .watermark {
  position: absolute;
  right: -40px;
  bottom: -140px;
  width: 360px;
  height: auto;
  opacity: 0.08;
  pointer-events: none;
}
.site-footer .container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-brand img { height: 30px; width: auto; }
.fb-text { display: flex; flex-direction: column; gap: 2px; }
.fb-word {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--white);
}
.fb-legal {
  font-size: 12.5px;
  color: var(--text-on-ink-dim);
}
.footer-mail {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--emerald-400);
  padding: 8px 0;
}
.footer-mail:hover { color: var(--white); text-decoration: none; }
.footer-mail:focus-visible { box-shadow: var(--shadow-focus-dark); }
.footer-nav { display: flex; gap: 22px; }
.footer-nav a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-on-ink-dim);
  padding: 8px 0;
}
.footer-nav a:hover { color: var(--white); }
.footer-nav a:focus-visible { box-shadow: var(--shadow-focus-dark); }

/* ============================================================
   LEGAL PAGES (paper body)
   ============================================================ */
.legal-page { padding: 64px 0 88px; }
.legal-page .container { max-width: 760px; }
.legal-page h1 {
  font-family: var(--font-serif);
  font-weight: 440;
  font-size: 34px;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--emerald-900);
}
.legal-page .updated {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 40px;
}
.legal-page h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 36px 0 10px;
  color: var(--emerald-900);
}
.legal-page p, .legal-page li {
  font-size: 15.5px;
  color: var(--text-secondary);
}
.legal-page .placeholder {
  background: #FFFBEB;
  border: 1px dashed var(--amber-600);
  border-radius: 4px;
  padding: 0 6px;
  color: #92400E;
  font-family: var(--font-mono);
  font-size: 13.5px;
}

/* ============================================================
   MOTION — section choreography (all JS-gated on .js; without JS
   every block below leaves the page at its final, resting state.
   Vocabulary: paper settles, ink draws, numerals count, dashes
   flow, chips stamp. Transform/opacity only.)
   ============================================================ */

/* ---- Ledger rules draw themselves (rule-head hairline) ---- */
.rule-head { position: relative; }
.js .rule-head,
.js .on-ink .rule-head { border-top-color: transparent; }
.js .rule-head::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--paper-line-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--ease-out);
}
.js .on-ink .rule-head::before { background: rgba(167, 243, 208, 0.14); }
.js .rule-head.is-in::before { transform: scaleX(1); }

/* ---- Stats: numerals count up; the still ones settle ---- */
.stat dd.counting { font-variant-numeric: tabular-nums; }
.js .stat dd.stat-settle {
  animation: stat-settle 700ms var(--ease-out) both;
}
@keyframes stat-settle {
  0% { opacity: 0; transform: translateY(8px) scale(0.94); }
  100% { opacity: 1; transform: none; }
}

/* ---- KI-Team: cards settle in sequence; molecules drift ---- */
/* the group reveal keeps its fade but hands the lift to the cards */
.js .ki-team[data-reveal] { transform: none; }
.js .ki-team[data-reveal] .ki-card { opacity: 0; }
/* entrance spans 3s in total: each card settles over 1.4s, the next
   one starting while the previous is still landing */
.js .ki-team.is-in .ki-card {
  opacity: 1;
  animation: ki-settle 1400ms var(--ease-out) backwards;
}
.js .ki-team.is-in .ki-card:nth-child(2) { animation-delay: 530ms; }
.js .ki-team.is-in .ki-card:nth-child(3) { animation-delay: 1060ms; }
.js .ki-team.is-in .ki-card:nth-child(4) { animation-delay: 1600ms; }
@keyframes ki-settle {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.ki-card {
  transition: transform var(--dur-micro) ease, box-shadow var(--dur-micro) ease;
}
.ki-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}
/* watermarks adrift — the motion only reads because the opacity breathes
   with it (a 0.13 watermark moving is still invisible); 7.5–11s sweeps,
   phases offset per card; runs only while on screen (.ki-live) */
.js .ki-team.ki-live .ki-molecule {
  animation: molecule-drift var(--drift-dur, 9s) ease-in-out var(--drift-delay, 0s) infinite alternate;
}
.ki-a .ki-molecule { --drift-dur: 8s; --drift-delay: -2s; }
.ki-t .ki-molecule { --drift-dur: 10s; --drift-delay: -5s; }
.ki-g .ki-molecule { --drift-dur: 7.5s; --drift-delay: -3.5s; }
.ki-c .ki-molecule { --drift-dur: 11s; --drift-delay: -7s; }
@keyframes molecule-drift {
  from {
    transform: rotate(-16deg) translate3d(0, 4px, 0) scale(1);
    opacity: 0.1;
  }
  to {
    transform: rotate(0deg) translate3d(12px, -10px, 0) scale(1.07);
    opacity: 0.26;
  }
}
/* the monograms breathe with the section — each base on its own rhythm */
.js .ki-team.ki-live .ki-monogram {
  animation: monogram-bob var(--bob-dur, 3.2s) ease-in-out var(--bob-delay, 0s) infinite alternate;
}
.ki-a .ki-monogram { --bob-dur: 3s; --bob-delay: -0.7s; }
.ki-t .ki-monogram { --bob-dur: 3.6s; --bob-delay: -1.9s; }
.ki-g .ki-monogram { --bob-dur: 2.8s; --bob-delay: -1.2s; }
.ki-c .ki-monogram { --bob-dur: 4s; --bob-delay: -0.3s; }
@keyframes monogram-bob {
  from { transform: translateY(2px); }
  to { transform: translateY(-6px); }
}
/* Cytosin is alive and still forming: its status dot breathes */
.eta-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--violet-400);
  margin-right: 8px;
  vertical-align: 0.5px;
}
.js .ki-team.ki-live .eta-dot {
  animation: eta-breathe 2.8s ease-in-out infinite;
}
@keyframes eta-breathe {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.18); }
}

/* ---- Flow map: nodes appear in flow order, then wires energize ---- */
.flowmap { position: relative; }
.js .flowmap[data-reveal] { transform: none; }
.js .flowmap[data-reveal] .fm-node,
.js .flowmap[data-reveal] .fm-core-link { opacity: 0; }
.js .flowmap.is-in .fm-node,
.js .flowmap.is-in .fm-core-link {
  opacity: 1;
  animation: fm-settle 520ms var(--ease-out) backwards;
}
@keyframes fm-settle {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
/* entry points → center → outputs, ~90ms apart */
.js .flowmap.is-in .fm-col:nth-child(1) .fm-node:nth-child(2) { animation-delay: 90ms; }
.js .flowmap.is-in .fm-col:nth-child(1) .fm-node:nth-child(3) { animation-delay: 180ms; }
.js .flowmap.is-in .fm-col:nth-child(1) .fm-node:nth-child(4) { animation-delay: 270ms; }
.js .flowmap.is-in .fm-col:nth-child(1) .fm-node:nth-child(5) { animation-delay: 360ms; }
.js .flowmap.is-in .fm-col:nth-child(3) .fm-node:nth-child(1) { animation-delay: 480ms; }
.js .flowmap.is-in .fm-col:nth-child(3) .fm-core-link { animation-delay: 560ms; }
.js .flowmap.is-in .fm-col:nth-child(3) .fm-node:nth-child(3) { animation-delay: 620ms; }
.js .flowmap.is-in .fm-col:nth-child(5) .fm-node:nth-child(1) { animation-delay: 760ms; }
.js .flowmap.is-in .fm-col:nth-child(5) .fm-node:nth-child(2) { animation-delay: 850ms; }
.js .flowmap.is-in .fm-col:nth-child(5) .fm-node:nth-child(3) { animation-delay: 940ms; }
.js .flowmap.is-in .fm-col:nth-child(5) .fm-node:nth-child(4) { animation-delay: 1030ms; }
/* connectors fade up once their endpoints exist */
.js .flowmap[data-reveal] .fm-gutter {
  opacity: 0;
  transition: opacity 700ms ease;
}
.js .flowmap.is-in .fm-gutter { opacity: 1; }
.js .flowmap.is-in .fm-gutter:nth-child(2) { transition-delay: 420ms; }
.js .flowmap.is-in .fm-gutter:nth-child(4) { transition-delay: 760ms; }
/* the traveling request: a small emerald pulse riding one wire at a time
   (positioned by JS along the SVG connector paths) */
.fm-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--emerald-400);
  box-shadow: 0 0 8px 2px rgba(16, 185, 129, 0.4);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
@media (max-width: 700px) {
  .fm-pulse { display: none; }
}

/* ---- Sicherheit: Grundsätze rows settle, their rules draw ----
   the three rows span 3s in total, each rule drawing with its row */
.js .grundsaetze[data-reveal] .g-list li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1300ms var(--ease-out), transform 1300ms var(--ease-out);
}
.js .grundsaetze.is-in .g-list li { opacity: 1; transform: none; }
.js .grundsaetze.is-in .g-list li:nth-child(2) { transition-delay: 850ms; }
.js .grundsaetze.is-in .g-list li:nth-child(3) { transition-delay: 1700ms; }
.js .grundsaetze[data-reveal] .g-list li::after {
  transform: scaleX(0);
  transition: transform 1100ms var(--ease-out);
}
.js .grundsaetze.is-in .g-list li::after { transform: scaleX(1); }
.js .grundsaetze.is-in .g-list li:nth-child(2)::after { transition-delay: 850ms; }
.js .grundsaetze.is-in .g-list li:nth-child(3)::after { transition-delay: 1700ms; }

/* trust tiles: the four tiles cascade over 3s, each icon popping as
   its tile lands; overrides the generic reveal pace */
.js .trust-item[data-reveal] {
  transition-duration: 900ms, 900ms;
  transition-delay: calc(var(--i, 0) * 600ms);
}
.js .trust-item[data-reveal] .tile svg {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 600ms + 700ms);
}
.js .trust-item.is-in .tile svg { opacity: 1; transform: scale(1); }
.trust-item .tile { transition: color var(--dur-micro) ease; }
.trust-item:hover .tile-emerald { color: #6EE7B7; }
.trust-item:hover .tile-blue { color: #93C5FD; }
.trust-item:hover .tile-amber { color: #FCD34D; }
.trust-item:hover .tile-violet { color: #C4B5FD; }

/* ---- Pilot: steps settle, the line fills, the active point rings ----
   the four steps walk in over 3s, the fill following the last one */
.js .pilot-frame[data-reveal] .step {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out);
}
.js .pilot-frame.is-in .step { opacity: 1; transform: none; }
.js .pilot-frame.is-in .step:nth-child(2) { transition-delay: 640ms; }
.js .pilot-frame.is-in .step:nth-child(3) { transition-delay: 1280ms; }
.js .pilot-frame.is-in .step:nth-child(4) { transition-delay: 1900ms; }
.js .pilot-frame[data-reveal] .step.active + .step::after {
  transform: scaleX(0);
  transition: transform 1000ms var(--ease-out);
}
.js .pilot-frame.is-in .step.active + .step::after {
  transform: scaleX(0.62);
  transition-delay: 2000ms;
}
/* soft repeating ring on the active point — only while on screen
   (.pulse-on is observer-toggled and cleared by motionStops) */
.js .pilot-frame.pulse-on .step.active .pt::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--emerald-500);
  opacity: 0;
  animation: pt-ring 2.5s ease-out infinite;
}
@keyframes pt-ring {
  0% { transform: scale(0.55); opacity: 0.65; }
  65% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* print: none of the JS-gated hidden states may hide ink on paper */
@media print {
  .js .rule-head::before,
  .js .grundsaetze[data-reveal] .g-list li,
  .js .grundsaetze[data-reveal] .g-list li::after,
  .js .flowmap[data-reveal] .fm-node,
  .js .flowmap[data-reveal] .fm-core-link,
  .js .flowmap[data-reveal] .fm-gutter,
  .js .ki-team[data-reveal] .ki-card,
  .js .trust-item[data-reveal] .tile svg,
  .js .pilot-frame[data-reveal] .step,
  .js .pilot-frame[data-reveal] .step.active + .step::after,
  .js .msg-a .word,
  .js .demo-chips .chip,
  .js .demo-note {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .hero-grid { gap: 40px; }
}
@media (max-width: 1100px) {
  .ki-team { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding: 64px 0 80px;
  }
  .cabinet-wrap { max-width: 520px; margin: 0 auto; width: 100%; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stat { border-left: 0; border-top: 1px solid var(--paper-line); }
  .stat:nth-child(-n+2) { border-top: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--paper-line); }
  .ki-team { grid-template-columns: minmax(0, 1fr); }
  .split-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .split-row.flip .split-text { order: 0; }
  .split-row + .split-row { margin-top: 64px; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .pilot-card { grid-template-columns: minmax(0, 1fr); padding: 32px; }
  .section { padding: 64px 0; }
}
@media (max-width: 700px) {
  .flowmap { grid-template-columns: minmax(0, 1fr); }
  .fm-gutter { display: none; }
  .fm-col + .fm-col { margin-top: 8px; }
  .fm-col + .fm-col::before {
    content: '↓';
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--text-muted);
    text-align: center;
    margin: 0 0 8px;
  }
  .fm-label { height: auto; }
  /* no wires on mobile, so no sockets either */
  .fm-stack.fm-core::before,
  .fm-stack.fm-core::after { display: none; }
  .demo-body { padding: 20px; }
  .msg { max-width: 95%; }
  .drawer { min-height: 62px; }
  .drawer .plate { font-size: 9.5px; letter-spacing: 0.04em; padding: 3px 5px; }
  .hero-card {
    /* in-flow card: no absolute-position flight — degrade the deal to a
       simple lay-down from just above, folding onto the page */
    --card-tilt: -0.8deg;
    --deal-x: 0px;
    --deal-y: -10px;
    --deal-rx: -34deg;
    position: static;
    width: auto;
    min-height: 0;
    margin-top: 16px;
    transform: rotate(var(--card-tilt));
  }
  .js .hero-card.lift {
    transform: perspective(1100px) translate3d(0, -6px, 10px) rotateX(8deg) rotate(var(--card-tilt));
  }
  .cabinet-wrap { padding: 0 0 8px; }
  .g-list li { grid-template-columns: 34px 1fr; }
}
@media (max-width: 640px) {
  .wordmark { display: none; }
  .header-nav { gap: 14px; }
  .header-nav a:not(.btn) { font-size: 13px; }
  .header-nav .btn { padding: 9px 14px; font-size: 14px; }
}
@media (max-width: 520px) {
  .trust-grid { grid-template-columns: 1fr; }
  .dataflow { flex-direction: column; }
  .flow-link { flex-direction: row; width: auto; gap: 12px; }
  .flow-track { width: 30px; height: 84px; flex-direction: column; justify-content: center; }
  .flow-wire {
    flex: 1;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(
      180deg,
      var(--emerald-400) 0 7px,
      transparent 7px 13px
    );
    animation-name: wire-flow-v;
  }
  @keyframes wire-flow-v {
    to { background-position: 0 13px; }
  }
  .flow-link.cut .flow-wire {
    background: repeating-linear-gradient(
      180deg,
      rgba(167, 243, 208, 0.22) 0 7px,
      transparent 7px 13px
    );
  }
  .stats-row { grid-template-columns: 1fr; }
  .stat { border-left: 0 !important; border-top: 1px solid var(--paper-line); padding: 24px 8px 22px; }
  .stat:first-child { border-top: 0; }
}

/* print: scroll-reveal states must never hide content on paper */
@media print {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   REDUCED MOTION — everything instant, no scene loop
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}