/* OpenPVS Messe-Showcase · DLX365 Design Standard 2026 (strict)
   Human Clinical Computing: ruhig, warm, menschlich, matt. Keine externen Schriften, keine Drittanbieter.
   Content first · Action second · Effect third. */

/* ---------- Tokens ---------- */
:root {
  /* Spacing (nur diese Werte) */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-20: 20px; --s-24: 24px; --s-32: 32px;
  --s-40: 40px; --s-48: 48px; --s-64: 64px; --s-80: 80px; --s-96: 96px; --s-128: 128px;
  /* Radius */
  --r-input: 12px; --r-button: 14px; --r-card: 20px; --r-media: 24px; --r-hero: 28px;
  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-micro: 160ms; --t-button: 140ms; --t-card: 220ms; --t-nav: 260ms; --t-page: 360ms; --t-hero: 800ms;
  /* Farben: warm, matt */
  --bg: #ffffff;
  --bg-2: #e8eef5;
  --surface: #ffffff;
  --surface-2: #f3f6fa;
  --ink: #082647;
  --ink-2: #2a3b52;
  --muted: #5b6b80;
  --faint: #93a1b3;
  --line: rgba(8, 38, 71, 0.12);
  --line-strong: rgba(8, 38, 71, 0.22);
  --accent: #082647;
  --accent-ink: #042040;
  --accent-soft: #e7ecf4;
  --warm: #236b44;
  --warm-soft: #e2f1e6;
  --ok: #236b44; --ok-soft: #e2f1e6;
  --warn: #b85a0c; --warn-soft: #fbead9;
  --alert: #c0001a; --alert-soft: #fbe3e6;
  --shadow-1: 0 1px 2px rgba(8, 38, 71, 0.06), 0 2px 8px rgba(8, 38, 71, 0.04);
  --shadow-2: 0 4px 16px rgba(8, 38, 71, 0.08);
  --shadow-3: 0 16px 48px rgba(8, 38, 71, 0.12);
  --font: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 68ch;
  --wrap: min(1240px, calc(100% - 2 * var(--s-24)));
  --px: 0; --py: 0;
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1, "cv11" 1; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
h2 { font-size: clamp(36px, 4.2vw, 56px); }
h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.02em; line-height: 1.15; }
h4 { font-size: 15px; letter-spacing: 0; font-weight: 600; color: var(--muted); }
p { margin: 0; }
dl, ol, ul { margin: 0; padding: 0; }
.lead { font-size: clamp(18px, 1.35vw, 20px); line-height: 1.5; color: var(--ink-2); max-width: var(--measure); }
.eyebrow { margin: 0 0 var(--s-16); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warm); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: var(--s-8); background: var(--surface); padding: var(--s-8) var(--s-12); border-radius: var(--r-input); z-index: 100; box-shadow: var(--shadow-2); }
.skip-link:focus { left: var(--s-8); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Status: Farbe + Text + Symbol (nie nur Farbe) */
.status { display: inline-flex; align-items: center; gap: var(--s-8); font-size: 13px; font-weight: 600; padding: var(--s-4) var(--s-12); border-radius: 999px; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.status.ok { background: var(--ok-soft); color: var(--ok); }
.status.warn { background: var(--warn-soft); color: var(--warn); }
.status.alert { background: var(--alert-soft); color: var(--alert); }
.status.info { background: var(--accent-soft); color: var(--accent-ink); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8); min-height: 48px; padding: 0 var(--s-24); border-radius: var(--r-button); font-weight: 600; font-size: 16px; border: 1px solid transparent; cursor: pointer; transition: transform var(--t-button) var(--ease), background var(--t-button) var(--ease), box-shadow var(--t-button) var(--ease), border-color var(--t-button) var(--ease); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--accent-ink); box-shadow: var(--shadow-2); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 var(--s-16); font-size: 15px; }
.linkish { font-weight: 600; color: var(--accent-ink); padding: var(--s-8) 0; border-bottom: 1px solid transparent; transition: border-color var(--t-micro) var(--ease); }
.linkish:hover { border-bottom-color: currentColor; }
/* Link-Optik auch für <button class="linkish"> (z. B. „Verwerfen“ im KI-Demo): Browser-Standard zurücksetzen */
button.linkish { background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; box-shadow: none; cursor: pointer; font: inherit; font-weight: 600; line-height: inherit; }
button.linkish:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* ---------- Topbar (Overlay-Navigation: einziger Einsatz von Backdrop-Blur) ---------- */
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); padding: var(--s-12) var(--s-24); background: rgba(255, 255, 255, 0.88); border-bottom: 1px solid var(--line); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); }
.brand { display: inline-flex; align-items: center; gap: var(--s-12); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.brand.tiny { font-size: 13px; gap: var(--s-8); }
.brand-mark { width: 24px; height: 24px; border-radius: 8px; background: var(--accent); position: relative; flex: none; }
.brand-mark::after { content: ""; position: absolute; inset: 7px; border-radius: 3px; background: #fff; opacity: 0.95; }
.brand.tiny .brand-mark { width: 16px; height: 16px; border-radius: 5px; }
.brand.tiny .brand-mark::after { inset: 5px; border-radius: 2px; }
.desktop-nav { display: flex; gap: var(--s-24); font-size: 15px; font-weight: 500; color: var(--ink-2); }
.desktop-nav a { padding: var(--s-8) 0; border-bottom: 2px solid transparent; transition: color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease); }
.desktop-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.top-actions { display: flex; align-items: center; gap: var(--s-20); }

/* ---------- Abschnitte ---------- */
main > section { width: var(--wrap); margin: 0 auto; padding: var(--s-96) 0; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-page) var(--ease), transform var(--t-page) var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 01 Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-64); align-items: center; padding-top: var(--s-64); padding-bottom: var(--s-80); min-height: calc(100vh - 64px); }
.hero h1 { font-size: clamp(44px, 6vw, 88px); max-width: 14ch; }
.hero .lead { margin-top: var(--s-24); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-32); }
.hero-proof { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-24); margin-top: var(--s-32); font-size: 14px; color: var(--muted); }
.hero-proof span::before { content: "·"; margin-right: var(--s-8); color: var(--warm); }
.hero-proof span:first-child::before { content: none; }
.hero-copy > * { animation: hero-in var(--t-hero) var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 80ms; }
.hero-copy > :nth-child(3) { animation-delay: 160ms; }
.hero-copy > :nth-child(4) { animation-delay: 240ms; }
.hero-copy > :nth-child(5) { animation-delay: 320ms; }
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero-stage { position: relative; height: 640px; }
.layer { will-change: transform; transition: transform var(--t-card) var(--ease); }
.hero-scene { position: absolute; inset: 0 0 0 8%; border-radius: var(--r-hero); overflow: hidden; background: linear-gradient(160deg, #f3f5f9 0%, #e4e9f1 60%, #d5dde9 100%); box-shadow: var(--shadow-3); animation: hero-in var(--t-hero) var(--ease) both; }
.hero-scene::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 20% 10%, rgba(255, 255, 255, 0.9), transparent 70%); pointer-events: none; }
.hero-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.hero-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 38, 71, 0) 40%, rgba(8, 38, 71, 0.6) 100%); display: none; pointer-events: none; }
.hero-stage.has-photo .hero-scene img, .hero-stage.has-photo .hero-scene::after { display: block; }
.hero-stage.has-photo .hero-scene::before { display: none; }
.hero-caption { position: absolute; left: var(--s-20); bottom: var(--s-20); z-index: 2; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; padding: var(--s-8) var(--s-12); border-radius: 999px; background: rgba(8, 38, 71, 0.7); }
.hero-window { position: absolute; left: 6%; right: 9%; top: 10%; bottom: 14%; z-index: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media); box-shadow: var(--shadow-3); overflow: hidden; display: grid; grid-template-rows: auto 1fr; transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transform-origin: 60% 50%; }
.hero-stage.has-photo .hero-window { left: auto; top: auto; right: 6%; bottom: 10%; width: 62%; height: 58%; transform: perspective(1400px) rotateY(-5deg); }
.hw-top { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-12); align-items: center; padding: var(--s-8) var(--s-16); border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 12px; }
.hw-context { color: var(--muted); font-weight: 500; }
.hw-clock { font-weight: 600; font-variant-numeric: tabular-nums; }
.hw-body { display: grid; grid-template-columns: 44px 1fr; min-height: 0; }
.hw-nav { display: grid; align-content: start; gap: var(--s-12); padding: var(--s-16) 0; justify-items: center; border-right: 1px solid var(--line); background: var(--surface-2); }
.hw-nav i { width: 20px; height: 20px; border-radius: 6px; background: var(--line); }
.hw-nav i.active { background: var(--accent); }
.hw-main { padding: var(--s-20); display: grid; gap: var(--s-16); align-content: start; min-width: 0; }
.hw-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-12); flex-wrap: wrap; }
.hw-head small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.hw-head b { font-size: 20px; letter-spacing: -0.01em; }
.hw-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-12); }
.hw-kpis div { padding: var(--s-12) var(--s-16); border-radius: var(--r-input); background: var(--surface-2); display: grid; gap: 2px; }
.hw-kpis strong { font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hw-kpis span { font-size: 12px; color: var(--muted); }
.hw-note { padding: var(--s-12) var(--s-16); border-radius: var(--r-input); border: 1px solid var(--line); display: grid; gap: var(--s-4); }
.hw-note small { font-size: 12px; color: var(--accent-ink); font-weight: 600; }
.hw-note p { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.caret { display: inline-block; width: 2px; height: 14px; background: var(--accent); vertical-align: -2px; margin-left: 2px; animation: caret 1s steps(2) infinite; }
@keyframes caret { to { opacity: 0; } }
.hw-actions { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.hw-actions span { font-size: 12px; font-weight: 600; padding: var(--s-8) var(--s-12); border-radius: var(--r-input); border: 1px solid var(--line-strong); background: var(--surface); }
.layer-card { position: absolute; display: grid; gap: var(--s-4); padding: var(--s-16) var(--s-20); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-2); font-size: 14px; animation: hero-in var(--t-hero) var(--ease) both; }
.layer-card small { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.layer-card b { font-size: 17px; letter-spacing: -0.01em; }
.layer-card span { color: var(--ink-2); }
.layer-card .status { margin-top: var(--s-8); justify-self: start; }
.card-patient { right: -3%; top: 3%; width: 250px; animation-delay: 300ms; }
.card-hint { left: -4%; top: 46%; width: 270px; border-left: 4px solid var(--warn); animation-delay: 450ms; }
.card-flow { right: -2%; bottom: -3%; width: 230px; animation-delay: 600ms; }
.card-flow ol { list-style: none; display: grid; gap: var(--s-8); margin-top: var(--s-8); }
.card-flow li { display: flex; align-items: center; gap: var(--s-12); color: var(--muted); }
.card-flow li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; }
.card-flow li.done { color: var(--ink-2); }
.card-flow li.done::before { background: var(--ok); border-color: var(--ok); }
.card-flow li.now { color: var(--ink); font-weight: 600; }
.card-flow li.now::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ---------- 02 Problem ---------- */
.problem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-64); border-top: 1px solid var(--line); }
.problem-list { display: grid; }
.problem-list > div { display: grid; grid-template-columns: 160px 1fr; gap: var(--s-24); padding: var(--s-24) 0; border-top: 1px solid var(--line); }
.problem-list > div:first-child { border-top: 0; padding-top: 0; }
.problem-list dt { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.problem-list dd { color: var(--ink-2); max-width: var(--measure); }

/* ---------- 03 Produktidee ---------- */
.idea { background: var(--surface); border-radius: var(--r-hero); padding: var(--s-80) var(--s-64); box-shadow: var(--shadow-1); }
.idea-copy { max-width: 760px; }
.idea-principles { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-48); margin-top: var(--s-64); }
.idea-principles li { display: grid; gap: var(--s-12); align-content: start; }
.idea-principles span { font-size: 56px; font-weight: 700; letter-spacing: -0.04em; color: var(--warm); line-height: 1; }
.idea-principles b { font-size: 20px; }
.idea-principles p { color: var(--ink-2); }

/* ---------- 04 Fachrichtungen ---------- */
.spec-head { max-width: 820px; }
.spec-tabs { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-32); }
.spec-tabs [role="tab"] { min-height: 44px; padding: 0 var(--s-20); border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: 15px; cursor: pointer; transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease); }
.spec-tabs [role="tab"]:hover { border-color: var(--ink); }
.spec-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.device { margin-top: var(--s-32); border-radius: var(--r-media); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3); overflow: hidden; }
.device.switching .device-main { animation: morph var(--t-page) var(--ease); }
@keyframes morph { from { opacity: 0.4; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.device-top { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-16); align-items: center; padding: var(--s-12) var(--s-20); border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 14px; }
.device-context { color: var(--muted); font-weight: 500; }
.device-clock { font-weight: 600; font-variant-numeric: tabular-nums; }
.device-body { display: grid; grid-template-columns: 64px 1fr; min-height: 520px; }
.device-nav { display: grid; align-content: start; gap: var(--s-16); padding: var(--s-24) 0; justify-items: center; border-right: 1px solid var(--line); background: var(--surface-2); }
.device-nav i { width: 28px; height: 28px; border-radius: 8px; background: var(--line); }
.device-nav i.active { background: var(--accent); }
.device-main { padding: var(--s-32); display: grid; gap: var(--s-24); align-content: start; min-width: 0; }
.device-grid > * { min-width: 0; }
.device-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-16); flex-wrap: wrap; }
.device-head h3 { font-size: 28px; }
.device-grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: var(--s-16); }
.dev-block { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-20); display: grid; gap: var(--s-12); align-content: start; }
.dev-block h4 { margin: 0; }
.dev-next { grid-row: span 2; }
.dev-next ul, .dev-tasks ul { list-style: none; display: grid; gap: var(--s-8); }
.dev-next li { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-12); align-items: center; padding: var(--s-12) var(--s-16); border-radius: var(--r-input); background: var(--surface-2); font-size: 15px; }
.dev-next li time { font-weight: 600; font-variant-numeric: tabular-nums; }
.dev-next li b { display: block; }
.dev-next li span { display: block; color: var(--muted); font-size: 13px; }
.dev-tasks li { display: flex; gap: var(--s-12); align-items: center; font-size: 15px; }
.dev-tasks li::before { content: ""; width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--line-strong); flex: none; }
.dev-tasks li.done { color: var(--muted); text-decoration: line-through; }
.dev-tasks li.done::before { background: var(--ok); border-color: var(--ok); }
.dev-alert { border-left: 4px solid var(--warn); background: var(--warn-soft); border-color: var(--warn-soft); }
.dev-alert p { font-weight: 600; }
.dev-alert small { color: var(--muted); font-size: 13px; }
.dev-alert.none { border-left-color: var(--ok); background: var(--ok-soft); border-color: var(--ok-soft); }
.dev-messages p { color: var(--ink-2); font-size: 15px; }
.device-actions { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.device-actions button { min-height: 40px; padding: 0 var(--s-16); border-radius: var(--r-input); border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: 14px; cursor: default; display: inline-flex; align-items: center; gap: var(--s-8); animation: hero-in var(--t-card) var(--ease) both; }
.device-actions button:nth-child(2) { animation-delay: 60ms; }
.device-actions button:nth-child(3) { animation-delay: 120ms; }
.device-actions button:nth-child(4) { animation-delay: 180ms; }
.device-actions button small { color: var(--muted); font-weight: 400; }

/* ---------- 05 Workflow (Scrollytelling) ---------- */
.flow-head { max-width: 820px; margin-bottom: var(--s-48); }
.flow-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-64); align-items: start; }
.flow-sticky { position: sticky; top: 96px; }
.flow-device { background: var(--ink); color: #fff; border-radius: var(--r-media); padding: var(--s-40); display: grid; gap: var(--s-16); min-height: 440px; box-shadow: var(--shadow-3); }
.flow-progress { display: flex; align-items: center; gap: var(--s-12); font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.flow-progress span { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); overflow: hidden; display: block; }
.flow-progress i { display: block; height: 100%; width: 14%; background: #fff; border-radius: 4px; transition: width var(--t-page) var(--ease); }
.flow-actor { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #7fd19a; }
.flow-device h3 { font-size: 32px; color: #fff; }
.flow-text { color: rgba(255, 255, 255, 0.8); max-width: 44ch; }
.flow-facts { list-style: none; display: grid; gap: var(--s-8); margin-top: var(--s-8); }
.flow-facts li { display: flex; gap: var(--s-12); align-items: center; font-size: 15px; padding: var(--s-12) var(--s-16); border-radius: var(--r-input); background: rgba(255, 255, 255, 0.08); }
.flow-facts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7fd19a; flex: none; }
.flow-feedback { display: inline-flex; align-items: center; gap: var(--s-8); margin-top: var(--s-8); font-size: 14px; font-weight: 600; color: #8fe0a3; opacity: 0; transform: translateY(6px); transition: opacity var(--t-micro) var(--ease), transform var(--t-micro) var(--ease); }
.flow-feedback.show { opacity: 1; transform: none; }
.flow-feedback i { width: 18px; height: 18px; border-radius: 50%; background: var(--ok); position: relative; flex: none; }
.flow-feedback i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.flow-device .changing { animation: morph var(--t-page) var(--ease); }
.flow-steps { list-style: none; display: grid; gap: var(--s-8); padding: 20vh 0 30vh; }
.flow-step { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-8) var(--s-20); padding: var(--s-24); border-radius: var(--r-card); border: 1px solid transparent; opacity: 0.45; transition: opacity var(--t-card) var(--ease), background var(--t-card) var(--ease), border-color var(--t-card) var(--ease); }
.flow-step span { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--surface); border: 1px solid var(--line-strong); font-variant-numeric: tabular-nums; }
.flow-step b { font-size: 20px; letter-spacing: -0.01em; }
.flow-step p { color: var(--ink-2); }
.flow-step.active { opacity: 1; background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-1); }
.flow-step.active span { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- 06 Deep Dive ---------- */
.deep { display: grid; gap: var(--s-48); }
.deep-head { max-width: 820px; }
.deep-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-48); align-items: center; border-radius: var(--r-hero); padding: var(--s-48); }
.deep-copy { display: grid; gap: var(--s-20); align-content: start; }
.deep-copy p { color: var(--ink-2); max-width: var(--measure); }
.meta { display: grid; gap: var(--s-8); margin-top: var(--s-8); }
.meta > div { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-16); font-size: 15px; padding: var(--s-8) 0; border-top: 1px solid var(--line); }
.meta dt { color: var(--muted); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.chip { min-height: 40px; padding: 0 var(--s-16); border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: 14px; cursor: pointer; transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease); }
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.deep-medical { background: var(--surface); box-shadow: var(--shadow-1); }
.anatomy-orbit { position: relative; height: 440px; perspective: 1200px; display: grid; place-items: center; border-radius: var(--r-media); background: linear-gradient(180deg, var(--surface-2), var(--bg-2)); overflow: hidden; }
.knee-model { position: relative; width: 220px; height: 320px; transform-style: preserve-3d; transform: rotateX(12deg) rotateY(-18deg) rotateZ(-4deg); transition: transform var(--t-page) var(--ease); }
.bone { position: absolute; left: 70px; width: 80px; height: 130px; border-radius: 40px 40px 26px 26px / 40px 40px 26px 26px; background: linear-gradient(180deg, #fbf7ee, #e9e1cf); box-shadow: inset -12px 0 20px rgba(0, 0, 0, 0.08), 0 20px 40px rgba(28, 28, 30, 0.16); transition: opacity var(--t-page) var(--ease); }
.bone-a { top: 0; transform: translateZ(10px); }
.bone-b { bottom: 0; border-radius: 26px 26px 40px 40px / 26px 26px 40px 40px; transform: translateZ(10px); }
.joint { position: absolute; left: 54px; top: 118px; width: 112px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(27, 51, 88, 0.55), rgba(27, 51, 88, 0.22) 60%, transparent 72%); transform: translateZ(30px); transition: opacity var(--t-page) var(--ease); }
.muscle { position: absolute; width: 34px; height: 180px; border-radius: 18px; background: linear-gradient(180deg, #d99a93, #b8655f); opacity: 0.85; box-shadow: 0 10px 24px rgba(160, 60, 60, 0.2); transition: opacity var(--t-page) var(--ease); }
.muscle-a { left: 28px; top: 40px; transform: translateZ(-10px) rotateZ(6deg); }
.muscle-b { right: 28px; top: 90px; transform: translateZ(-10px) rotateZ(-6deg); }
.knee-model[data-layer="ziel"] .muscle { opacity: 0.35; }
.knee-model[data-layer="knochen"] .muscle { opacity: 0.12; }
.knee-model[data-layer="knochen"] .joint { opacity: 0.35; }
.knee-model[data-layer="muskeln"] .bone { opacity: 0.4; }
.knee-model[data-layer="muskeln"] .muscle { opacity: 1; }
.marker { position: absolute; display: flex; align-items: center; gap: var(--s-8); font-size: 13px; font-weight: 600; background: var(--surface); padding: var(--s-4) var(--s-12) var(--s-4) var(--s-8); border-radius: 999px; border: 1px solid var(--line); box-shadow: var(--shadow-1); transform: translateZ(60px); white-space: nowrap; }
.marker i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; }
.marker.danger i { background: var(--alert); }
.m1 { left: -70px; top: 60px; } .m2 { right: -70px; top: 150px; } .m3 { left: -50px; bottom: 30px; }

.deep-heal { background: var(--surface-2); }
.health-map { position: relative; height: 460px; border-radius: var(--r-media); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.health-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.health-map path { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.health-map path.edge-warn { stroke: var(--warn); stroke-dasharray: 4 6; }
.health-map path.edge-ok { stroke: var(--ok); }
.node { position: absolute; transform: translate(-50%, -50%); padding: var(--s-8) var(--s-16); border-radius: var(--r-input); background: var(--surface); border: 1px solid var(--line-strong); font-size: 14px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: var(--s-8); }
.node::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.node.warn::before { background: var(--warn); }
.node.fixing::before { background: var(--accent); }
.node.warn { border-color: var(--warn); }
.node.core { left: 50%; top: 50%; padding: var(--s-12) var(--s-20); font-size: 15px; background: var(--ink); color: #fff; border-color: var(--ink); }
.node.core::before { background: #fff; }
.n1 { left: 18%; top: 21%; } .n2 { left: 14%; top: 70%; } .n3 { left: 86%; top: 70%; } .n4 { left: 82%; top: 21%; } .n5 { left: 50%; top: 88%; }
.incident-card { position: absolute; right: var(--s-16); bottom: var(--s-16); width: 260px; padding: var(--s-16) var(--s-20); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--warn); box-shadow: var(--shadow-2); display: grid; gap: var(--s-4); }
.incident-card.ok { border-left-color: var(--ok); }
.incident-card .overline { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn); font-weight: 600; }
.incident-card.ok .overline { color: var(--ok); }
.incident-card b { font-size: 16px; }
.incident-card p { color: var(--ink-2); font-size: 14px; }
.incident-card button { margin-top: var(--s-8); min-height: 40px; border: 0; border-radius: var(--r-input); padding: 0 var(--s-16); background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; transition: background var(--t-button) var(--ease); }
.incident-card button:hover { background: var(--accent-ink); }
.incident-card button:disabled { opacity: 0.6; cursor: wait; }
.incident-card small { color: var(--muted); font-size: 13px; }
.repair-steps { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.repair-steps span { font-size: 13px; color: var(--muted); display: flex; gap: var(--s-8); align-items: center; }
.repair-steps span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.repair-steps span.done::before { background: var(--ok); }
.repair-steps span.running { color: var(--ink); }
.repair-steps span.running::before { background: var(--accent); }

.deep-ai { background: var(--surface); box-shadow: var(--shadow-1); }
.ai-card { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-24); display: grid; gap: var(--s-4); background: var(--surface); }
.ai-row { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-16); padding: var(--s-12) 0; border-top: 1px solid var(--line); font-size: 15px; }
.ai-row:first-child { border-top: 0; padding-top: 0; }
.ai-row dt { font-weight: 600; color: var(--muted); }
.ai-actions { display: flex; align-items: center; gap: var(--s-16); margin-top: var(--s-12); flex-wrap: wrap; }
.ai-actions small { color: var(--ok); font-weight: 600; }

/* ---------- 07 Integrationen ---------- */
.integrations { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-64); border-top: 1px solid var(--line); }
.int-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s-48); }
.int-list li { display: grid; gap: var(--s-4); padding: var(--s-20) 0; border-bottom: 1px solid var(--line); }
.int-list b { font-size: 20px; letter-spacing: -0.01em; }
.int-list span { color: var(--muted); font-size: 15px; }

/* ---------- 08 Vertrauen ---------- */
.trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-64); background: var(--ink); color: #fff; border-radius: var(--r-hero); padding: var(--s-80) var(--s-64); }
.trust .eyebrow { color: #7fd19a; }
.trust .lead { color: rgba(255, 255, 255, 0.78); }
.trust-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-24); margin-top: var(--s-32); }
.trust .linkish { color: #fff; }
.trust-panel { background: var(--surface); color: var(--ink); border-radius: var(--r-card); padding: var(--s-24); display: grid; gap: var(--s-4); align-content: start; }
.trust-row { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-16); padding: var(--s-12) 0; border-top: 1px solid var(--line); font-size: 15px; }
.trust-row:first-child { border-top: 0; padding-top: 0; }
.trust-row dt { color: var(--muted); font-weight: 600; }
.trust-facts { list-style: none; display: grid; gap: var(--s-8); margin-top: var(--s-16); padding-top: var(--s-16); border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.trust-facts li::before { content: "✓"; color: var(--ok); font-weight: 700; margin-right: var(--s-8); }

/* ---------- 09 Proof ---------- */
.proof { padding-top: var(--s-64); padding-bottom: var(--s-64); }
.proof-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-32); }
.proof-list > div { border-left: 1px solid var(--line); padding-left: var(--s-24); }
.proof-list dt { font-size: clamp(40px, 4vw, 64px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.proof-list dd { color: var(--muted); margin-top: var(--s-8); font-size: 15px; }

/* ---------- 10 Preise ---------- */
.price-copy { max-width: 820px; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-16); margin-top: var(--s-48); align-items: end; }
.plan { display: grid; gap: var(--s-16); padding: var(--s-32); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.plan header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-8); }
.plan header b { font-size: 20px; }
.plan header span { font-size: 13px; color: var(--muted); font-weight: 600; }
.plan .price { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; display: grid; gap: var(--s-4); }
.plan .price small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan ul { list-style: none; display: grid; gap: var(--s-8); color: var(--ink-2); font-size: 15px; }
.plan li::before { content: "·"; color: var(--warm); font-weight: 700; margin-right: var(--s-8); }
.plan.featured { background: var(--ink); color: #fff; border-color: var(--ink); padding: var(--s-40) var(--s-32); box-shadow: var(--shadow-3); }
.plan.featured header span { color: #7fd19a; }
.plan.featured .price small, .plan.featured ul { color: rgba(255, 255, 255, 0.78); }
.calculator { margin-top: var(--s-32); display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--s-32); align-items: center; padding: var(--s-32); border-radius: var(--r-card); background: var(--surface-2); }
.calculator label { display: grid; gap: var(--s-8); font-weight: 600; font-size: 14px; color: var(--muted); }
.calculator input[type="range"] { width: 100%; accent-color: var(--accent); }
.calculator b { font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums; }
.calculator select { min-height: 44px; border-radius: var(--r-input); border: 1px solid var(--line-strong); background: var(--surface); padding: 0 var(--s-12); font: inherit; }
.calc-result { display: grid; gap: var(--s-4); text-align: right; }
.calc-result span { font-size: 14px; color: var(--muted); }
.calc-result strong { font-size: 40px; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- 11 Pilot ---------- */
.pilot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-64); border-top: 1px solid var(--line); }
.pilot-levels { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-24); }
.pilot-levels li { padding: var(--s-8) var(--s-16); border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.pilot-levels b { color: var(--warm); margin-right: var(--s-4); }
.cta-stack { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-24); margin-top: var(--s-32); }
.pilot-form { display: grid; gap: var(--s-16); padding: var(--s-32); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); }
.pilot-form label { display: grid; gap: var(--s-8); font-size: 14px; font-weight: 600; color: var(--muted); }
.pilot-form input:not([type="checkbox"]), .pilot-form select { min-height: 48px; border-radius: var(--r-input); border: 1px solid var(--line-strong); background: var(--surface); padding: 0 var(--s-16); font: inherit; color: var(--ink); transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease); }
.pilot-form input:focus, .pilot-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); outline: 0; }
.pilot-form .touched:invalid { border-color: var(--alert); }
.pilot-form .consent { grid-template-columns: auto 1fr; align-items: start; font-weight: 400; color: var(--ink-2); }
.pilot-form .consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); }
.pilot-form .consent a { color: var(--accent-ink); font-weight: 600; }
.form-note { font-size: 14px; color: var(--muted); }
.form-note.ok { color: var(--ok); font-weight: 600; }
.form-note.error { color: var(--alert); font-weight: 600; }
.btn.sent { background: var(--ok); }

/* ---------- Footer ---------- */
.footer { width: var(--wrap); margin: 0 auto; padding: var(--s-48) 0 var(--s-64); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-16); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.footer div:last-child { display: flex; flex-wrap: wrap; gap: var(--s-20); }
.footer a:hover { color: var(--ink); }

/* ---------- Betreiberportal ---------- */
.op-shell { width: var(--wrap); margin: 0 auto; padding: var(--s-48) 0 var(--s-96); display: grid; gap: var(--s-24); }
.op-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-24); flex-wrap: wrap; }
.op-head h1 { font-size: clamp(36px, 4vw, 56px); }
.op-head p { color: var(--ink-2); margin-top: var(--s-12); max-width: var(--measure); }
.op-mode { display: inline-flex; align-items: center; gap: var(--s-8); font-size: 13px; font-weight: 600; padding: var(--s-8) var(--s-12); border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.op-mode i { width: 8px; height: 8px; border-radius: 50%; background: var(--warm); }
.op-mode.live i { background: var(--ok); }
.op-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-16); }
.op-card { border-radius: var(--r-card); padding: var(--s-24); background: var(--surface); border: 1px solid var(--line); display: grid; gap: var(--s-8); align-content: start; }
.op-card.span2 { grid-column: span 2; }
.op-card.span4 { grid-column: span 4; }
.op-card h2 { font-size: 18px; }
.op-card .kpi { font-size: 40px; letter-spacing: -0.03em; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.op-card .sub { color: var(--muted); font-size: 14px; }
.gauge { position: relative; height: 8px; border-radius: 8px; background: var(--bg-2); overflow: hidden; margin-top: var(--s-8); }
.gauge i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); border-radius: 8px; transition: width var(--t-hero) var(--ease); }
.gauge.gold i { background: var(--warm); }
.op-list { list-style: none; display: grid; gap: var(--s-8); }
.op-list li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-12); align-items: center; padding: var(--s-12) var(--s-16); border-radius: var(--r-input); background: var(--surface-2); font-size: 15px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--alert); } .dot.todo { background: var(--faint); }
.op-list li small { color: var(--muted); display: block; font-size: 13px; }
.tag { font-size: 12px; font-weight: 700; padding: var(--s-4) var(--s-8); border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap; }
.tag.gold { background: var(--warm-soft); color: var(--warm); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.bad { background: var(--alert-soft); color: var(--alert); }
.tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-12); }
.track { padding: var(--s-16); border-radius: var(--r-input); background: var(--surface-2); display: grid; gap: var(--s-8); }
.track b { font-size: 15px; }
.track .gauge { margin: 0; }
.track small { color: var(--muted); font-size: 13px; }
.price-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-8); }
.gate { display: grid; grid-template-columns: 1fr auto; gap: var(--s-16); align-items: center; }
.gate .verdict { font-size: 24px; font-weight: 700; }
.gate .verdict.blocked { color: var(--alert); }
.gate .verdict.ready { color: var(--ok); }
.gate-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); margin-top: var(--s-8); }
.gate-checks span { font-size: 14px; padding: var(--s-8) var(--s-12); border-radius: var(--r-input); background: var(--surface-2); display: flex; gap: var(--s-8); align-items: center; }
.evidence-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-12); }
.evidence-grid div { padding: var(--s-12) var(--s-16); border-radius: var(--r-input); background: var(--surface-2); font-size: 14px; display: grid; gap: var(--s-4); }
.evidence-grid div b { font-size: 15px; }
.evidence-grid div small { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

/* ---------- Rechtliches ---------- */
.legal { width: min(760px, calc(100% - 2 * var(--s-24))); margin: 0 auto; padding: var(--s-48) 0 var(--s-96); display: grid; gap: var(--s-16); }
.legal h1 { font-size: clamp(32px, 4vw, 48px); }
.legal h2 { font-size: 20px; margin-top: var(--s-16); }
.legal h3 { font-size: 17px; margin-top: var(--s-8); }
.legal a { color: var(--accent-ink); font-weight: 600; }
.legal p, .legal li { color: var(--ink-2); }
.placeholder { background: var(--warm-soft); padding: 2px var(--s-8); border-radius: 6px; color: var(--warm); font-weight: 600; }

/* ---------- Breakpoints (DLX365 §29) ---------- */
@media (max-width: 1439px) {
  .hero-stage { height: 560px; }
}
@media (max-width: 1023px) {
  main > section { padding: var(--s-80) 0; }
  .hero { grid-template-columns: 1fr; min-height: auto; gap: var(--s-48); }
  .hero h1 { font-size: clamp(44px, 7.5vw, 72px); }
  .hero-stage { height: 520px; }
  .problem, .integrations, .trust, .pilot, .flow-layout, .deep-block { grid-template-columns: 1fr; }
  .flow-sticky { position: relative; top: 0; }
  .flow-steps { padding: var(--s-32) 0 0; }
  .idea, .trust { padding: var(--s-64) var(--s-40); }
  .idea-principles { grid-template-columns: 1fr; gap: var(--s-32); }
  .proof-list { grid-template-columns: repeat(3, 1fr); }
  .plans { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .calculator { grid-template-columns: 1fr 1fr; }
  .op-grid, .evidence-grid { grid-template-columns: 1fr 1fr; }
  .op-card.span4 { grid-column: span 2; }
  .tracks, .gate-checks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .topbar { padding: var(--s-12) var(--s-16); }
  .desktop-nav, .topbar .btn { display: none; }
  main > section { padding: var(--s-64) 0; }
  .hero { padding-top: var(--s-40); }
  .hero h1 { font-size: clamp(38px, 11vw, 56px); }
  .hero-stage { height: 460px; }
  .hero-scene { inset: 0; }
  .hero-window { left: 4%; right: 4%; top: 6%; bottom: 10%; transform: none; }
  .hw-kpis { grid-template-columns: 1fr 1fr; }
  .hw-kpis div:nth-child(3) { display: none; }
  .card-patient { right: var(--s-8); top: var(--s-8); width: 210px; }
  .card-hint { left: var(--s-8); top: auto; bottom: 72px; width: 230px; }
  .card-flow { display: none; }
  .problem-list > div { grid-template-columns: 1fr; gap: var(--s-8); }
  .idea, .trust { padding: var(--s-48) var(--s-24); border-radius: var(--r-media); }
  .device-body { grid-template-columns: 1fr; min-height: 0; }
  .device-nav { display: none; }
  .device-main { padding: var(--s-20); }
  .device-grid { grid-template-columns: 1fr; }
  .dev-next { grid-row: auto; }
  .dev-next li { grid-template-columns: 48px 1fr; }
  .dev-next li .status { display: none; }
  .flow-device { padding: var(--s-24); min-height: 0; }
  .flow-device h3 { font-size: 26px; }
  .deep-block { padding: var(--s-24); border-radius: var(--r-media); }
  .anatomy-orbit { height: 360px; }
  .m1 { left: -40px; } .m2 { right: -40px; } .m3 { left: -20px; }
  .health-map { height: 420px; }
  .incident-card { right: var(--s-8); bottom: var(--s-8); width: 220px; }
  .ai-row, .trust-row, .meta > div { grid-template-columns: 1fr; gap: var(--s-4); }
  .int-list { grid-template-columns: 1fr; }
  .proof-list { grid-template-columns: 1fr 1fr; gap: var(--s-24); }
  .plans, .calculator, .form-grid { grid-template-columns: 1fr; }
  .calc-result { text-align: left; }
  .op-grid, .evidence-grid, .tracks, .gate-checks { grid-template-columns: 1fr; }
  .op-card.span2, .op-card.span4 { grid-column: span 1; }
  .footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 599px) {
  .proof-list { grid-template-columns: 1fr; }
  .hero-stage { height: 420px; }
}

/* ---------- Reduced Motion (Pflicht, §31) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .layer { transform: none !important; }
  .knee-model { transform: rotateX(12deg) rotateY(-18deg) rotateZ(-4deg) !important; }
  .flow-step { opacity: 1; }
}
.footer-logo img { width: 260px; height: auto; }

/* OpenPVS-Logo (Bild) */
.brand .brand-mark-img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.brand.tiny .brand-mark-img { width: 20px; height: 20px; border-radius: 5px; }
.footer .brand .brand-mark-img { width: 30px; height: 30px; }

/* Medical 3D: echter Viewer (gleiche Herkunft) */
.medical-frame-wrap { border-radius: var(--r-media); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.medical-frame { display: block; width: 100%; height: 560px; border: 0; background: #fff; }
@media (max-width: 767px) { .medical-frame { height: 440px; } }

/* ---------- 09b Video ---------- */
.video { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-64); align-items: center; border-top: 1px solid var(--line); }
.video-chapters { list-style: none; display: grid; gap: var(--s-8); margin-top: var(--s-24); counter-reset: kap; }
.video-chapters li { display: flex; gap: var(--s-12); align-items: center; font-size: 15px; color: var(--ink-2); counter-increment: kap; }
.video-chapters li::before { content: counter(kap, decimal-leading-zero); font-weight: 700; color: var(--warm); font-variant-numeric: tabular-nums; }
.video-stage { margin: 0; border-radius: var(--r-media); overflow: hidden; background: var(--ink); box-shadow: var(--shadow-3); }
.video-stage video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); }
.video-stage figcaption { padding: var(--s-8) var(--s-16); font-size: 13px; color: rgba(255, 255, 255, 0.78); }
@media (max-width: 1023px) { .video { grid-template-columns: 1fr; } }