/* ============================================================
   medivaris.de — Vorschlag 5 „Horizont"
   Design/Farbwelt/Effekte aus Vorschlag 4 · Inhalt aus Vorschlag 2
   Signature: scroll-gesteuertes RPMC-Explosionsdiagramm
   Vanilla, vollständig offline.
   ============================================================ */
:root{
  --ink:#0F172A; --night:#020617; --night-soft:#0F172A; --paper:#F8FAFC;
  --cyan:#22D3EE; --sky:#0EA5E9; --blue:#2563EB; --blue-deep:#1D4ED8; --violet:#6366F1;
  --emerald:#34D399; --amber:#FBBF24;
  --slate-200:#E2E8F0; --slate-300:#CBD5E1; --slate-400:#94A3B8; --slate-500:#64748B; --slate-600:#475569;
  --glass-dark:rgba(255,255,255,.06); --glass-line:rgba(148,163,184,.25);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
  --grad-accent:linear-gradient(92deg,var(--cyan),var(--sky) 45%,var(--violet));
  --grad-blue:linear-gradient(120deg,var(--sky),var(--blue));
  --shadow-soft:0 24px 60px -24px rgba(15,23,42,.28);
  --radius:18px; --maxw:1180px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; }
body{ font-family:var(--font); background:var(--night); color:var(--slate-300); line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection{ background:rgba(34,211,238,.35); color:#fff; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ list-style:none; }
[id]{ scroll-margin-top:88px; }
a:focus-visible,button:focus-visible,input:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:10px; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--blue); color:#fff; padding:10px 18px; border-radius:0 0 10px 0; font-weight:700; text-decoration:none; }
.skip-link:focus{ left:0; }

/* Typo */
.kicker{ display:inline-flex; align-items:center; gap:.7em; font-size:12px; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--sky); }
.kicker::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--sky)); }
.grad-text{ background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.trademark-star{
  display:inline-block;
  margin-left:.06em;
  font-size:.48em;
  line-height:0;
  vertical-align:super;
  color:currentColor;
  font-weight:700;
}
.wrap{ width:min(var(--maxw),92vw); margin-inline:auto; }
.section-head{ max-width:760px; margin-bottom:clamp(40px,6vw,72px); }
.section-head h2{ font-size:clamp(30px,4vw,48px); line-height:1.12; letter-spacing:-.03em; font-weight:800; color:#fff; margin:.55em 0 .45em; }
.section-head p{ font-size:clamp(16px,1.4vw,19px); color:var(--slate-400); }
.on-light .section-head h2{ color:var(--ink); }
.on-light .section-head p{ color:var(--slate-600); }

/* Scroll progress */
.progress{ position:fixed; inset:0 auto auto 0; width:100%; height:3px; z-index:200; pointer-events:none; }
.progress b{ display:block; height:100%; background:var(--grad-accent); transform:scaleX(0); transform-origin:0 50%; }

/* Nav */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(2,6,23,.55); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid rgba(148,163,184,.12); transition:background .35s ease,border-color .35s ease; }
.nav.scrolled{ background:rgba(2,6,23,.82); border-bottom-color:rgba(148,163,184,.22); }
.nav-inner{ width:min(1560px,96vw); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; }
.brand{ display:inline-flex; align-items:center; text-decoration:none; flex:none; }
.brand .chip{ background:#fff; border-radius:13px; padding:9px 16px; display:inline-flex; align-items:center; box-shadow:0 6px 22px -8px rgba(2,6,23,.55), 0 0 0 1px rgba(148,163,184,.2); transition:transform .2s ease, box-shadow .2s ease; }
.brand:hover .chip{ transform:translateY(-1px); box-shadow:0 10px 26px -8px rgba(2,6,23,.6), 0 0 0 1px rgba(34,211,238,.35); }
/* medivaris-Wortmarke sauber aus dem Logo freigestellt (Whitespace weggeschnitten) */
.logo-medivaris{ display:block; background:url("/assets/img/medivaris.webp") no-repeat; }
.logo-medivaris--nav{ width:134px; height:30px; background-size:237px auto; background-position:-51px -56px; }
.logo-medivaris--footer{ width:141px; height:34px; background-size:249px auto; background-position:-53px -58px; }
.logo-medivaris--lg{ width:196px; height:47px; background-size:346px auto; background-position:-74px -80px; }
[hidden]{ display:none !important; }
.nav-links{ display:flex; align-items:center; gap:1px; }
.nav-links a{ display:block; padding:9px 11px; border-radius:10px; font-size:14.5px; font-weight:600; text-decoration:none; color:var(--slate-300); transition:color .2s ease,background .2s ease; }
.nav-links a:hover{ color:#fff; background:rgba(255,255,255,.07); }
.nav-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-portal{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:11px; font-size:14px; font-weight:700; text-decoration:none; color:#E2E8F0; background:var(--glass-dark); border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:border-color .2s ease,color .2s ease,transform .2s ease; }
.nav-portal:hover{ border-color:rgba(34,211,238,.5); color:#fff; transform:translateY(-1px); }
.nav-portal svg{ width:16px; height:16px; flex:none; }
.nav-contact{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:11px; font-size:14px; font-weight:700; text-decoration:none; color:var(--slate-300); border:1px solid transparent; transition:color .2s ease, background .2s ease; }
.nav-contact:hover{ color:#fff; background:rgba(255,255,255,.07); }
.nav-contact svg{ width:16px; height:16px; flex:none; }
.nav-m{ display:none; }
.nav-cta{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:11px; font-size:14px; font-weight:700; text-decoration:none; color:#fff; background:var(--grad-blue); box-shadow:0 8px 24px -10px rgba(14,165,233,.7); transition:filter .2s ease,transform .2s ease; }
.nav-cta:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.nav-cta svg{ width:16px; height:16px; flex:none; }
.nav-burger{ display:none; background:var(--glass-dark); border:1px solid var(--glass-line); border-radius:10px; width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.nav-burger span{ width:18px; height:2px; background:#E2E8F0; border-radius:2px; display:block; transition:transform .25s ease,opacity .25s ease; }
.nav.open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2){ opacity:0; }
.nav.open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:14px; font-family:var(--font); font-size:16px; font-weight:700; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease; }
.btn svg{ flex:none; }
.btn-primary{ background:var(--grad-blue); color:#fff; box-shadow:0 14px 40px -12px rgba(14,165,233,.65); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 48px -12px rgba(14,165,233,.8); }
.btn-ghost{ background:var(--glass-dark); color:#E2E8F0; border-color:var(--glass-line); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:rgba(34,211,238,.5); color:#fff; }

/* Hero */
.hero{ position:relative; overflow:hidden; padding:clamp(140px,17vh,200px) 0 clamp(40px,5vw,64px); background:var(--night); isolation:isolate; }
.aurora{ position:absolute; inset:-30% -10%; z-index:-2; pointer-events:none; will-change:transform; }
.aurora i{ position:absolute; border-radius:50%; filter:blur(70px); display:block; }
.aurora i:nth-child(1){ width:56vw; height:56vw; left:-12vw; top:-6vw; background:radial-gradient(circle at 35% 35%,rgba(14,165,233,.34),transparent 62%); animation:drift1 26s ease-in-out infinite alternate; }
.aurora i:nth-child(2){ width:48vw; height:48vw; right:-10vw; top:2vw; background:radial-gradient(circle at 60% 40%,rgba(34,211,238,.22),transparent 60%); animation:drift2 32s ease-in-out infinite alternate; }
.aurora i:nth-child(3){ width:44vw; height:44vw; left:26vw; top:16vw; background:radial-gradient(circle at 50% 50%,rgba(99,102,241,.20),transparent 62%); animation:drift3 38s ease-in-out infinite alternate; }
@keyframes drift1{ from{transform:translate3d(0,0,0)} to{transform:translate3d(6vw,4vw,0)} }
@keyframes drift2{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-5vw,6vw,0)} }
@keyframes drift3{ from{transform:translate3d(0,0,0)} to{transform:translate3d(4vw,-5vw,0)} }
.grain{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.05; 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"); }
.hero-inner{ position:relative; text-align:center; }
.hero .hero-kicker .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--cyan); margin-right:2px; box-shadow:0 0 0 0 rgba(34,211,238,.5); animation:pulse 2.4s ease-out infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(34,211,238,.5)} 70%{box-shadow:0 0 0 11px rgba(34,211,238,0)} 100%{box-shadow:0 0 0 0 rgba(34,211,238,0)} }
.hero .hero-inner{ width:min(1280px,94vw); }
.hero-fade{ position:absolute; left:0; right:0; bottom:0; height:220px; z-index:-1; pointer-events:none; background:linear-gradient(180deg, rgba(2,6,23,0), var(--night)); }
.hero h1{ margin:22px auto 18px; max-width:none; font-size:clamp(32px,5.3vw,66px); line-height:1.06; letter-spacing:-.035em; font-weight:800; color:#fff; text-wrap:balance; }
.hero .sub{ max-width:680px; margin:0 auto 22px; font-size:clamp(17px,1.6vw,20px); color:var(--slate-400); text-wrap:balance; }
.hero .sub strong{ color:var(--slate-200); font-weight:600; }
.hero-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:34px; }
.hero-badges li{ font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--slate-300); padding:7px 15px; border-radius:999px; background:var(--glass-dark); border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.hero-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-bottom:clamp(30px,4vw,44px); }
.hero .hero-cta{ margin-bottom:0; }
.hero-scrollcue{ display:inline-flex; flex-direction:column; align-items:center; gap:8px; color:var(--slate-500); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.hero-scrollcue svg{ width:22px; height:22px; animation:bob 2.2s ease-in-out infinite; }
.signal-product-cue{ display:flex; justify-content:center; padding:clamp(28px,4vw,48px) 4vw clamp(24px,3vw,38px); background:var(--night); text-align:center; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.6 } 50%{ transform:translateY(6px); opacity:1 } }
.hero .rise{ animation:rise .9s cubic-bezier(.2,.65,.25,1) both; }
.hero .rise.d1{ animation-delay:.06s } .hero .rise.d2{ animation-delay:.16s } .hero .rise.d3{ animation-delay:.28s } .hero .rise.d4{ animation-delay:.42s } .hero .rise.d5{ animation-delay:.56s }
@keyframes rise{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:translateY(0) } }

/* ============================================================
   SCROLLYTELLING — RPMC-Explosionsdiagramm
   ============================================================ */
.scrolly{ position:relative; background:var(--night); }
.scrolly .scrolly-sticky{ position:relative; }
.scrolly.is-ready{ height:250vh; }
.scrolly.is-ready .scrolly-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; }
.dg-frame{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; padding:56px 3vw 0; }
.dg-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(60% 55% at 50% 48%, rgba(14,165,233,.12), transparent 70%); }
.dg-svg-wrap{ position:relative; z-index:1; flex:1; min-height:0; width:100%; }
.dg-svg-wrap svg{ display:block; width:100%; height:auto; }
.scrolly.is-ready .dg-svg-wrap svg{ height:100%; }

/* Stage heading (oben) */
.dg-stagehead{ position:relative; flex:none; text-align:center; z-index:2; pointer-events:none; margin-bottom:2px; }
.dg-stagehead .dg-step{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--sky); font-weight:700; }
.dg-stagehead .dg-title{ display:block; margin-top:4px; font-size:clamp(18px,2.3vw,27px); font-weight:800; letter-spacing:-.02em; color:#fff; }

/* Captions (unten links) + Rail (rechts) */
.dg-caption{ position:relative; flex:none; z-index:3; width:min(840px,92vw); margin:6px auto 0; min-height:82px; padding:2px 0; }
.dg-cap{ position:absolute; inset:0; opacity:0; transform:translateY(8px); transition:opacity .24s ease, transform .24s ease; text-align:center; display:flex; align-items:flex-start; justify-content:center; }
.dg-cap p{ color:#E6EEF9; font-size:clamp(15px,1.45vw,18px); line-height:1.55; max-width:76ch; margin:0 auto; }
.dg-cap p b{ color:#fff; font-weight:700; }
.scrolly:not(.is-ready) .dg-cap{ position:static; opacity:1; transform:none; margin-bottom:10px; }
.dg-rail{ position:absolute; right:clamp(14px,2.4vw,32px); top:50%; transform:translateY(-50%); z-index:3; display:flex; flex-direction:column; gap:14px; align-items:center; }
.scrolly:not(.is-ready) .dg-rail{ display:none; }
.dg-dot{ width:11px; height:11px; border-radius:50%; border:1px solid rgba(148,163,184,.5); background:transparent; cursor:pointer; padding:0; transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease; }
.dg-dot:hover{ border-color:var(--cyan); }
.dg-hint{ position:absolute; right:clamp(14px,2.4vw,32px); bottom:26px; z-index:3; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-500); display:flex; align-items:center; gap:7px; opacity:1; transition:opacity .4s ease; }
.dg-hint svg{ width:15px; height:15px; animation:bob 2.2s ease-in-out infinite; }

/* --- Diagramm-Elemente (SVG) --- */
.dg-node rect{ fill:rgba(255,255,255,.05); stroke:rgba(148,163,184,.35); stroke-width:1; }
.dg-node.in rect{ stroke:rgba(34,211,238,.45); fill:rgba(34,211,238,.06); }
.dg-node.out rect{ stroke:rgba(52,211,153,.45); fill:rgba(52,211,153,.06); }
.dg-node text{ fill:#E2E8F0; font-family:var(--font); font-size:15.5px; font-weight:650; }
.dg-node .nsub{ fill:#7691b1; font-size:10px; font-weight:700; letter-spacing:.12em; }
.dg-klabel{ fill:#64748B; font-family:var(--font); font-size:11px; font-weight:700; letter-spacing:.3em; }
.dg-base{ stroke:rgba(148,163,184,.16); stroke-width:1.5; fill:none; }
.dg-line{ stroke:url(#fluxGrad); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-dasharray:5 14; animation:dashflow 3.2s linear infinite; }
.dg-line.out{ stroke:url(#fluxGradOut); }
.dg-line.loop{ stroke:url(#fluxGradLoop); stroke-width:1.6; stroke-dasharray:4 12; animation:dashflow 4s linear infinite; }
@keyframes dashflow{ to{ stroke-dashoffset:-38; } }
/* Wandernde Datenpunkte auf den Datenautobahnen (wie Vorschlag 4) */
.dg-fd{ visibility:hidden; }
@supports (offset-path: path("M0 0 L10 10")){
  .dg-fd{ visibility:visible; offset-rotate:0deg; animation:fdtravel 4.4s cubic-bezier(.5,.05,.5,.95) infinite; }
}
.dg-fd circle:first-child{ fill:rgba(103,232,249,.22); }
.dg-fd circle:last-child{ fill:#67E8F9; }
.dg-fd.out circle:first-child{ fill:rgba(110,231,183,.22); }
.dg-fd.out circle:last-child{ fill:#6EE7B7; }
@keyframes fdtravel{ 0%{ offset-distance:0%; opacity:0 } 12%{ opacity:1 } 85%{ opacity:1 } 100%{ offset-distance:100%; opacity:0 } }
.dg-looplabel{ fill:#a5b4fc; font-family:var(--font); font-size:11.5px; font-weight:700; letter-spacing:.06em; }

/* Hub kompakt */
.dg-hub-core{ fill:url(#hubGrad); stroke:rgba(125,211,252,.55); stroke-width:1.2; }
.dg-hub-ring{ fill:none; stroke:rgba(34,211,238,.5); stroke-width:1.2; transform-box:fill-box; transform-origin:center; animation:hubpulse 3.4s cubic-bezier(.45,0,.4,1) infinite; }
.dg-hub-ring.r2{ animation-delay:1.7s; }
@keyframes hubpulse{ 0%{ transform:scale(.94); opacity:.85 } 70%{ transform:scale(1.28); opacity:0 } 100%{ transform:scale(1.28); opacity:0 } }
.dg-hub-title{ fill:#fff; font-family:var(--font); font-size:34px; font-weight:800; letter-spacing:-.02em; }
.dg-hub-sub{ fill:#7DD3FC; font-family:var(--font); font-size:11px; font-weight:700; letter-spacing:.28em; }
.dg-cap-ring text{ fill:#93a7c4; font-family:var(--font); font-size:13px; font-weight:700; letter-spacing:.08em; }

/* Engine-Bay (Motorhaube offen) */
.dg-bay-shell{ fill:rgba(9,17,33,.72); stroke:rgba(56,189,248,.35); stroke-width:1.4; }
.dg-bay-glow{ fill:url(#bayGlow); }
.dg-bay-title{ fill:#7DD3FC; font-family:var(--font); font-size:12px; font-weight:800; letter-spacing:.24em; }
.dg-bay-sub{ fill:#5b6a84; font-family:var(--font); font-size:10.5px; font-weight:600; letter-spacing:.1em; }
.dg-bus{ stroke:rgba(56,189,248,.30); stroke-width:2; fill:none; stroke-dasharray:3 9; animation:dashflow 3s linear infinite; }
.dg-chip rect{ fill:rgba(30,41,59,.72); stroke:rgba(148,163,184,.28); stroke-width:1; }
.dg-chip:nth-child(2n) rect{ stroke:rgba(56,189,248,.28); }
.dg-chip .ct{ fill:#DCE7F5; font-family:var(--font); font-size:12px; font-weight:700; }
.dg-chip .cs{ fill:#6b7d97; font-family:var(--font); font-size:9px; font-weight:600; letter-spacing:.06em; }
.dg-chip .led{ transform-box:fill-box; transform-origin:center; animation:led 2.6s ease-in-out infinite; }
@keyframes led{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
/* Schreib-Trichter (Not-Aus Gate) */
.dg-gate .gate-box{ fill:rgba(251,191,36,.07); stroke:rgba(251,191,36,.72); stroke-width:1.3; }
.dg-gate .gate-funnel{ fill:none; stroke:#FBBF24; stroke-width:1.9; stroke-linejoin:round; stroke-linecap:round; }
.dg-gate .gate-drop{ fill:#FBBF24; }
.dg-gate text{ fill:#FCD34D; font-family:var(--font); font-weight:700; text-anchor:middle; }
.dg-gate .gt{ font-size:11px; } .dg-gate .gs{ font-size:8.5px; letter-spacing:.08em; fill:#c79a3f; }

.node-led{ transform-box:fill-box; transform-origin:center; animation:led 2.6s ease-in-out infinite; }

/* Standards/Weitere-Boxen */
.dg-groupbox rect{ fill:rgba(255,255,255,.035); stroke:rgba(148,163,184,.24); stroke-width:1; stroke-dasharray:5 5; }
.dg-groupbox .gbh{ fill:#93a7c4; font-family:var(--font); font-size:11px; font-weight:800; letter-spacing:.14em; }
.dg-groupbox .gbi{ fill:#8ea3c0; font-family:var(--font); font-size:11.5px; font-weight:600; }

/* --- Layer-Sichtbarkeit nach Stage --- */
.dg-layer{ transition:opacity .42s cubic-bezier(.22,.61,.36,1), transform .42s cubic-bezier(.22,.61,.36,1), filter .42s ease; transform-box:view-box; }
.scrolly:not(.is-ready) .dg-layer{ opacity:1 !important; transform:none !important; filter:none !important; }
/* Default (JS ready) start hidden */
.scrolly.is-ready .dg-inbound1,
.scrolly.is-ready .dg-inbound2,
.scrolly.is-ready .dg-bay,
.scrolly.is-ready .dg-outbound1,
.scrolly.is-ready .dg-outbound2,
.scrolly.is-ready .dg-loop{ opacity:0; }
.scrolly.is-ready .dg-hub{ opacity:1; }
.scrolly.is-ready .dg-capring{ opacity:0; }
/* Stage 0: Hub & Fähigkeiten-Ring vergrößert = kompakter, gefüllter Auftakt, zoomt beim Weiterscrollen heraus */
.dg-hub, .dg-capring{ transform-origin:660px 440px; }
.scrolly.is-ready[data-stage="0"] .dg-hub{ transform:scale(1.42); }
.scrolly.is-ready[data-stage="0"] .dg-capring{ transform:scale(1.36); }

/* Stage 0 — Kern */
.scrolly[data-stage="0"] .dg-hub{ opacity:1; }
.scrolly[data-stage="0"] .dg-capring{ opacity:1; }
/* Stage 1 — 4 Datenquellen */
.scrolly[data-stage="1"] .dg-hub{ opacity:1; }
.scrolly[data-stage="1"] .dg-capring{ opacity:0; }
.scrolly[data-stage="1"] .dg-inbound1{ opacity:1; }
/* Stage 2 — mehr Kanäle */
.scrolly[data-stage="2"] .dg-hub{ opacity:1; }
.scrolly[data-stage="2"] .dg-inbound1{ opacity:1; }
.scrolly[data-stage="2"] .dg-inbound2{ opacity:1; }
/* Stage 3 — Motorhaube offen */
.scrolly[data-stage="3"] .dg-hub{ opacity:0; }
.scrolly[data-stage="3"] .dg-bay{ opacity:1; }
.scrolly[data-stage="3"] .dg-inbound1{ opacity:.32; filter:grayscale(.5); }
.scrolly[data-stage="3"] .dg-inbound2{ opacity:.22; filter:grayscale(.6); }
/* Stage 4 — abgehende Kanäle */
.scrolly[data-stage="4"] .dg-hub{ opacity:0; }
.scrolly[data-stage="4"] .dg-bay{ opacity:1; }
.scrolly[data-stage="4"] .dg-inbound1{ opacity:.24; filter:grayscale(.6); }
.scrolly[data-stage="4"] .dg-inbound2{ opacity:.16; filter:grayscale(.7); }
.scrolly[data-stage="4"] .dg-outbound1{ opacity:1; }
.scrolly[data-stage="4"] .dg-outbound2{ opacity:1; }
.scrolly[data-stage="4"] .dg-loop{ opacity:.9; }
/* Stage 5 — Gesamtbild */
.scrolly[data-stage="5"] .dg-hub{ opacity:0; }
.scrolly[data-stage="5"] .dg-bay{ opacity:1; }
.scrolly[data-stage="5"] .dg-inbound1{ opacity:.92; }
.scrolly[data-stage="5"] .dg-inbound2{ opacity:.85; }
.scrolly[data-stage="5"] .dg-outbound1{ opacity:.92; }
.scrolly[data-stage="5"] .dg-outbound2{ opacity:.85; }
.scrolly[data-stage="5"] .dg-loop{ opacity:1; }
.scrolly[data-stage="5"] .dg-hint{ opacity:0; }

/* Caption/Rail aktiv nach Stage */
.scrolly[data-stage="0"] .dg-cap[data-cap="0"],
.scrolly[data-stage="1"] .dg-cap[data-cap="1"],
.scrolly[data-stage="2"] .dg-cap[data-cap="2"],
.scrolly[data-stage="3"] .dg-cap[data-cap="3"],
.scrolly[data-stage="4"] .dg-cap[data-cap="4"],
.scrolly[data-stage="5"] .dg-cap[data-cap="5"]{ opacity:1; transform:none; transition:opacity .42s ease .2s, transform .42s ease .2s; }
.scrolly[data-stage="0"] .dg-dot[data-dot="0"],
.scrolly[data-stage="1"] .dg-dot[data-dot="1"],
.scrolly[data-stage="2"] .dg-dot[data-dot="2"],
.scrolly[data-stage="3"] .dg-dot[data-dot="3"],
.scrolly[data-stage="4"] .dg-dot[data-dot="4"],
.scrolly[data-stage="5"] .dg-dot[data-dot="5"]{ background:var(--cyan); border-color:var(--cyan); transform:scale(1.35); box-shadow:0 0 14px rgba(34,211,238,.7); }
/* Stagehead aktiv */
.dg-sh{ display:none; }
.scrolly[data-stage="0"] .dg-sh[data-sh="0"],
.scrolly[data-stage="1"] .dg-sh[data-sh="1"],
.scrolly[data-stage="2"] .dg-sh[data-sh="2"],
.scrolly[data-stage="3"] .dg-sh[data-sh="3"],
.scrolly[data-stage="4"] .dg-sh[data-sh="4"],
.scrolly[data-stage="5"] .dg-sh[data-sh="5"]{ display:block; }
.scrolly:not(.is-ready) .dg-sh[data-sh="5"]{ display:block; }
.scrolly:not(.is-ready) .dg-stagehead{ position:static; margin:0 0 8px; }
.scrolly:not(.is-ready) .dg-frame{ padding:40px 3vw; flex-direction:column; }
.scrolly:not(.is-ready) .dg-caption{ position:static; width:min(720px,92vw); margin-inline:auto; padding-top:8px; }

/* KPI-Band */
.stats{ position:relative; background:var(--night); padding:clamp(24px,4vw,52px) 0; border-top:1px solid rgba(148,163,184,.1); border-bottom:1px solid rgba(148,163,184,.1); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,40px); }
.stat{ position:relative; padding-left:20px; }
.stat::before{ content:""; position:absolute; left:0; top:5px; bottom:5px; width:3px; border-radius:3px; background:var(--grad-blue); opacity:.9; }
.stat .val{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:700; line-height:1.04; letter-spacing:-.02em; font-size:clamp(34px,4.6vw,60px); background:linear-gradient(120deg,#7DD3FC,#38BDF8 45%,#3B82F6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .val.small{ font-size:clamp(17px,2vw,26px); white-space:nowrap; }
.stat .lbl{ display:block; margin-top:8px; font-size:14.5px; font-weight:700; color:var(--slate-200); }
.stat .sub{ display:block; margin-top:2px; font-size:12.5px; font-family:var(--mono); color:var(--slate-500); }

/* Horizonte */
.horizon{ position:relative; height:clamp(150px,22vh,260px); pointer-events:none; }
.horizon-dawn{ background:linear-gradient(180deg,#020617 0%,#0F172A 20%,#31445f 46%,#8fa6bf 70%,#dbe4ee 87%,#F8FAFC 100%); }
.horizon-dawn::before{ content:""; position:absolute; inset:0; background:radial-gradient(56% 95% at 50% 58%,rgba(34,211,238,.22),rgba(14,165,233,.07) 48%,transparent 72%); }
.horizon-dusk{ background:linear-gradient(180deg,#F8FAFC 0%,#dbe4ee 13%,#8fa6bf 32%,#31445f 58%,#0F172A 82%,#020617 100%); }
.horizon-dusk::before{ content:""; position:absolute; inset:0; background:radial-gradient(52% 90% at 50% 46%,rgba(99,102,241,.16),rgba(37,99,235,.06) 46%,transparent 70%); }

/* Helle Welt */
.on-light{ background:var(--paper); color:var(--slate-600); }
.features{ padding:clamp(30px,5vw,80px) 0 clamp(50px,6vw,90px); }

/* Bento (Inhalt/Struktur aus V2, Skin aus V4) */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.tile{ position:relative; overflow:hidden; grid-column:span 4; display:flex; flex-direction:column; background:rgba(255,255,255,.82); border:1px solid rgba(148,163,184,.28); border-radius:var(--radius); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 14px 36px -22px rgba(15,23,42,.22); padding:24px 22px 26px; transition:transform .3s cubic-bezier(.2,.65,.3,1),box-shadow .3s ease,border-color .3s ease; }
.tile::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--grad-accent); transform:scaleX(0); transform-origin:0 50%; transition:transform .35s cubic-bezier(.2,.65,.3,1); }
.tile:hover{ transform:translateY(-5px); box-shadow:0 26px 52px -24px rgba(14,165,233,.38); border-color:rgba(14,165,233,.45); }
.tile:hover::after{ transform:scaleX(1); }
.tile-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sky); margin-bottom:12px; }
.tile-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(37,99,235,.12)); color:#0369A1; margin-bottom:16px; }
.tile-icon svg{ width:22px; height:22px; }
.tile h3{ font-size:16.5px; font-weight:750; color:var(--ink); letter-spacing:-.01em; margin-bottom:8px; }
.tile p{ font-size:14px; line-height:1.62; color:var(--slate-500); }
.tile--lg{ grid-column:span 7; }
.tile--lg.tile--right{ grid-column:span 5; }
.tile--lg h3{ font-size:22px; }
.tile--lg p{ font-size:15px; max-width:54ch; }
.tile-shot{ margin:22px -6px -8px; border:1px solid rgba(148,163,184,.28); border-bottom:none; border-radius:12px 12px 0 0; overflow:hidden; background:#0B1220; box-shadow:0 -14px 40px -22px rgba(14,165,233,.4); }
.tile-shot img{ width:100%; height:auto; aspect-ratio:16/9.3; object-fit:cover; object-position:left top; transition:transform .5s ease; }
.tile:hover .tile-shot img{ transform:scale(1.03); }
.tile--w3{ grid-column:span 3; } .tile--w5{ grid-column:span 5; } .tile--w6{ grid-column:span 6; }
.tile--hi{ border-color:rgba(14,165,233,.5); background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(224,242,254,.5)); }
@media (max-width:1080px){ .bento{ grid-template-columns:repeat(6,1fr); } .tile,.tile--w3,.tile--w5,.tile--w6{ grid-column:span 3; } .tile--lg,.tile--lg.tile--right{ grid-column:span 6; } }
@media (max-width:680px){ .tile,.tile--w3,.tile--w5,.tile--w6,.tile--lg,.tile--lg.tile--right{ grid-column:span 6; } .tile--lg p{ max-width:none; } }

/* Showcase-Galerie */
.stage-shots{ padding:clamp(10px,3vw,30px) 0 clamp(60px,7vw,100px); }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.g-card{ overflow:hidden; display:flex; flex-direction:column; background:rgba(255,255,255,.82); border:1px solid rgba(148,163,184,.28); border-radius:var(--radius); box-shadow:0 14px 36px -24px rgba(15,23,42,.22); transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.g-card:hover{ transform:translateY(-5px); border-color:rgba(14,165,233,.45); box-shadow:0 26px 52px -24px rgba(14,165,233,.35); }
.g-media{ overflow:hidden; border-bottom:1px solid rgba(148,163,184,.22); background:#0B1220; }
.g-media img{ width:100%; height:auto; aspect-ratio:16/9.4; object-fit:cover; object-position:left top; transition:transform .5s ease; }
.g-card:hover .g-media img{ transform:scale(1.03); }
.g-caption{ padding:18px 20px 22px; }
.g-caption h3{ font-size:16px; font-weight:750; color:var(--ink); margin-bottom:5px; }
.g-caption p{ font-size:13.5px; color:var(--slate-500); }
@media (max-width:960px){ .gallery{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .gallery{ grid-template-columns:1fr; } }

/* Film-/Video-Sektion */
.filmstage{ padding:clamp(10px,3vw,30px) 0 clamp(60px,7vw,110px); }
.filmstage .section-head{ text-align:center; max-width:720px; margin-left:auto; margin-right:auto; }
.filmstage .section-head .kicker{ justify-content:center; }
.video-wrap{ position:relative; width:min(1000px,100%); margin:clamp(28px,4vw,44px) auto 0; }
.video-frame{ position:relative; border-radius:20px; overflow:hidden; background:#0B1220; border:1px solid rgba(148,163,184,.28); box-shadow:0 44px 100px -44px rgba(14,165,233,.45), 0 0 0 1px rgba(148,163,184,.1); aspect-ratio:16/9; }
.video-frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; background:#0B1220; }
.video-cover{ position:absolute; inset:0; z-index:2; cursor:pointer; border:none; padding:0; margin:0; width:100%; height:100%; background:transparent; display:flex; align-items:center; justify-content:center; transition:opacity .45s ease, visibility .45s; }
.video-frame.playing .video-cover{ opacity:0; visibility:hidden; pointer-events:none; }
.video-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,6,23,.12), rgba(2,6,23,.5)); }
.video-play{ position:relative; z-index:1; width:clamp(66px,8.5vw,92px); height:clamp(66px,8.5vw,92px); border-radius:50%; background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; box-shadow:0 20px 50px -12px rgba(2,6,23,.6); transition:transform .25s ease, background .25s ease, border-color .25s ease; }
.video-cover:hover .video-play{ transform:scale(1.07); background:var(--grad-blue); border-color:transparent; }
.video-play svg{ width:36%; height:36%; margin-left:9%; fill:#fff; }
.video-play .pulse{ position:absolute; inset:-2px; border-radius:50%; border:1.5px solid rgba(255,255,255,.55); animation:vpulse 2.6s ease-out infinite; }
@keyframes vpulse{ 0%{ transform:scale(1); opacity:.7 } 70%{ transform:scale(1.45); opacity:0 } 100%{ opacity:0 } }
.video-badge{ position:absolute; z-index:1; bottom:clamp(14px,2.4vw,24px); left:clamp(14px,2.4vw,24px); display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#fff; background:rgba(2,6,23,.5); border:1px solid rgba(255,255,255,.2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-radius:999px; padding:7px 14px; }
.video-frame.playing .video-badge{ opacity:0; transition:opacity .3s ease; }
.video-badge svg{ width:14px; height:14px; }
.video-note{ text-align:center; margin-top:16px; font-size:13.5px; color:var(--slate-500); }

/* Über medivaris */
.about{ padding:clamp(50px,7vw,100px) 0; background:#fff; position:relative; }
.about::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(50% 60% at 82% 20%,rgba(34,211,238,.07),transparent 70%); }
.about-grid{ position:relative; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(32px,5vw,72px); align-items:start; }
.about-brand{ display:flex; width:fit-content; max-width:100%; align-items:center; background:#fff; border-radius:16px; padding:16px 22px; margin-bottom:22px; box-shadow:0 18px 40px -22px rgba(15,23,42,.28), 0 0 0 1px rgba(148,163,184,.18); }
.about h2{ font-size:clamp(28px,3.4vw,42px); font-weight:800; letter-spacing:-.03em; color:var(--ink); margin:.55em 0 .5em; text-wrap:balance; }
.about .lead{ font-size:clamp(16px,1.5vw,19px); color:var(--slate-600); max-width:58ch; }
.about .lead strong{ color:var(--ink); }
.about-facts{ display:grid; gap:14px; }
.about-facts li{ display:flex; gap:14px; align-items:flex-start; background:var(--paper); border:1px solid rgba(148,163,184,.25); border-radius:14px; padding:16px 18px; }
.about-facts .fi{ flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(37,99,235,.13)); color:#0369A1; }
.about-facts b{ display:block; font-size:14.5px; color:var(--ink); font-weight:700; }
.about-facts span{ font-size:13.5px; color:var(--slate-500); }

/* Dunkle Welt */
.deep{ background:var(--night); position:relative; }
.compare{ padding:clamp(30px,5vw,70px) 0 clamp(60px,7vw,90px); position:relative; overflow:hidden; }
.compare::before{ content:""; position:absolute; width:60vw; height:60vw; right:-24vw; top:-16vw; background:radial-gradient(circle at 50% 50%,rgba(37,99,235,.14),transparent 62%); filter:blur(60px); pointer-events:none; }
.table-shell{ position:relative; border-radius:22px; border:1px solid rgba(148,163,184,.2); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 40px 110px -50px rgba(14,165,233,.3); }
.table-scroll{ overflow-x:auto; scrollbar-width:thin; border-radius:22px; }
table.cmp{ width:100%; min-width:760px; border-collapse:separate; border-spacing:0; font-size:14.5px; }
.cmp th,.cmp td{ padding:15px 18px; text-align:left; vertical-align:top; border-bottom:1px solid rgba(148,163,184,.14); }
.cmp thead th{ font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-400); padding-top:22px; padding-bottom:14px; }
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{ border-bottom:none; }
.cmp tbody th{ font-weight:650; color:#E2E8F0; width:25%; }
.cmp td{ color:var(--slate-400); width:37.5%; }
.cmp .col-rpmc{ background:linear-gradient(180deg,rgba(34,211,238,.09),rgba(37,99,235,.05)); border-left:1px solid rgba(34,211,238,.4); border-right:1px solid rgba(34,211,238,.4); color:#E8FBFF; }
.cmp thead .col-rpmc{ border-top:2px solid var(--cyan); font-size:15px; letter-spacing:.02em; text-transform:none; }
.cmp thead .col-rpmc .grad-text{ font-weight:800; font-size:17px; }
.cmp small{ display:block; color:var(--slate-500); font-size:12px; margin-top:3px; font-weight:400; }
.cmp .col-rpmc small{ color:#9bd8ea; }
.cmp .yes{ color:#34D399; font-weight:700; } .cmp .part{ color:#FBBF24; font-weight:700; } .cmp .non{ color:var(--slate-500); font-weight:700; } .cmp .mid{ color:var(--slate-500); }
.cmp .price{ font-family:var(--mono); font-weight:700; letter-spacing:.06em; }
.cmp-notes{ margin-top:18px; display:grid; gap:7px; }
.cmp-note{ font-size:12.5px; line-height:1.55; color:var(--slate-500); max-width:96ch; }
.table-hint{ display:none; }
@media (max-width:1140px){ .table-scroll{ -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent); mask-image:linear-gradient(90deg,#000 90%,transparent); } .table-hint{ display:block; margin-top:12px; text-align:center; font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--sky); } }
/* Einordnung als Karten auf kleinen Bildschirmen (kein Horizontal-Scrollen) */
@media (max-width:760px){
  .compare .table-shell{ border:none; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .compare .table-scroll{ overflow:visible; border-radius:0; -webkit-mask-image:none; mask-image:none; }
  .table-hint{ display:none !important; }
  table.cmp{ min-width:0; width:100%; display:block; font-size:14.5px; }
  .cmp thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .cmp tbody{ display:block; }
  .cmp tbody tr{ display:block; margin-bottom:16px; border:1px solid rgba(148,163,184,.22); border-radius:16px; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); }
  .cmp tbody th, .cmp tbody td{ display:block; width:auto; border:none; padding:12px 16px; }
  .cmp tbody th{ background:rgba(255,255,255,.05); color:#fff; font-size:15px; font-weight:750; border-bottom:1px solid rgba(148,163,184,.16); }
  .cmp tbody td{ border-bottom:1px solid rgba(148,163,184,.1); color:var(--slate-300); }
  .cmp tbody tr td:last-child{ border-bottom:none; }
  .cmp tbody td::before{ content:attr(data-label); display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-500); margin-bottom:3px; }
  .cmp tbody td.col-rpmc{ background:linear-gradient(90deg,rgba(34,211,238,.12),rgba(37,99,235,.05)); border-left:3px solid var(--cyan); color:#E8FBFF; }
  .cmp tbody td.col-rpmc::before{ color:var(--cyan); }
  .cmp small{ display:block; margin-top:3px; }
}

/* Kopfmenue: jeder Punkt bleibt einzeilig (NR, 11.09.2026) */
.nav-links{ flex-wrap:nowrap; }
.nav-links li{ flex:none; }
.nav-links a{ white-space:nowrap; padding:9px 9px; }

/* Voraussetzungen (NR, 11.09.2026) */
.voraussetzungen .vor-block{ margin-bottom:clamp(30px,4vw,46px); }
.vor-h3{ font-size:clamp(19px,2vw,23px); font-weight:800; letter-spacing:-.01em; color:#fff; margin:0 0 16px; }
.vor-hinweis{ position:relative; border-radius:22px; padding:clamp(26px,3vw,38px); background:linear-gradient(180deg,rgba(251,191,36,.09),rgba(255,255,255,.02)); border:1px solid rgba(251,191,36,.34); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.vor-hinweis-tag{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:14px; }
.vor-hinweis-tag svg{ width:17px; height:17px; flex:none; }
.vor-hinweis h3{ font-size:clamp(21px,2.4vw,27px); font-weight:800; letter-spacing:-.02em; color:#fff; margin-bottom:12px; }
.vor-hinweis > p{ font-size:15.5px; color:var(--slate-300); max-width:92ch; }
.vor-hinweis b{ color:#fff; }
.vor-hinweis .demo-punkte{ margin-top:20px; }
.section-head p.vor-fussnote, .vor-fussnote{ margin-top:10px; font-size:13.5px; font-style:italic; line-height:1.6; color:var(--slate-500); max-width:92ch; }
.vor-optional{ position:relative; margin-top:clamp(18px,2vw,26px); border-radius:22px; padding:clamp(26px,3vw,38px); background:linear-gradient(180deg,rgba(34,211,238,.07),rgba(255,255,255,.02)); border:1px solid rgba(34,211,238,.3); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.vor-optional-tag{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin-bottom:14px; }
.vor-optional-tag svg{ width:17px; height:17px; flex:none; }
.vor-optional h3{ font-size:clamp(21px,2.4vw,27px); font-weight:800; letter-spacing:-.02em; color:#fff; margin-bottom:12px; }
.vor-optional > p{ font-size:15.5px; color:var(--slate-300); max-width:92ch; }
.vor-optional b{ color:#fff; }
.vor-optional .demo-punkte{ margin-top:20px; margin-bottom:0; }

/* Downloads */
.downloads{ padding:clamp(30px,5vw,60px) 0 clamp(50px,6vw,80px); position:relative; overflow:hidden; }
.downloads::before{ content:""; position:absolute; width:52vw; height:52vw; left:-22vw; bottom:-24vw; background:radial-gradient(circle at 50% 50%,rgba(34,211,238,.12),transparent 62%); filter:blur(60px); pointer-events:none; }
.dl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px); position:relative; }
.dl-card{ position:relative; display:flex; flex-direction:column; gap:18px; border-radius:22px; padding:clamp(26px,3vw,36px); background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:transform .3s cubic-bezier(.2,.65,.3,1),border-color .3s ease,box-shadow .3s ease; }
.dl-card:hover{ transform:translateY(-5px); border-color:rgba(34,211,238,.5); box-shadow:0 30px 70px -30px rgba(34,211,238,.4); }
.dl-top{ display:flex; align-items:center; gap:16px; }
.dl-ico{ flex:none; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(37,99,235,.18)); color:#7DD3FC; border:1px solid rgba(125,211,252,.3); }
.dl-card h3{ font-size:20px; font-weight:800; letter-spacing:-.01em; color:#fff; }
.dl-meta{ font-size:13px; color:var(--slate-500); font-weight:600; letter-spacing:.04em; }
.dl-card p{ font-size:14.5px; color:var(--slate-400); flex:1; }
.dl-card .btn{ align-self:flex-start; }

/* Compliance-Band */
.compliance{ border-top:1px solid rgba(148,163,184,.12); border-bottom:1px solid rgba(148,163,184,.12); background:radial-gradient(56% 130% at 50% 0%,rgba(37,99,235,.09),transparent 70%),rgba(15,23,42,.55); padding:clamp(40px,5vw,56px) 0; text-align:center; }
.chip-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:18px; }
.c-chip{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:14.5px; letter-spacing:.02em; color:#E2E8F0; background:rgba(30,41,59,.7); border:1px solid var(--glass-line); border-radius:99px; padding:10px 20px; transition:border-color .25s,box-shadow .25s; }
.c-chip:hover{ border-color:rgba(56,189,248,.55); box-shadow:0 0 24px rgba(56,189,248,.18); }
.c-chip svg{ width:16px; height:16px; color:var(--cyan); flex:none; }
.compliance p{ color:var(--slate-400); font-size:1rem; max-width:62ch; margin:0 auto; }

/* Finale */
.finale{ position:relative; overflow:hidden; text-align:center; padding:clamp(80px,12vw,150px) 0; isolation:isolate; }
.finale .aurora{ inset:-40% -10%; }
.finale h2{ font-size:clamp(32px,5vw,64px); font-weight:800; letter-spacing:-.04em; line-height:1.06; color:#fff; max-width:18ch; margin:0 auto 20px; text-wrap:balance; }
.finale p{ max-width:560px; margin:0 auto 34px; color:var(--slate-400); font-size:clamp(16px,1.5vw,19px); }
.finale .hero-cta{ margin-bottom:0; }
.finale .dl-grid{ max-width:980px; margin:10px auto 0; text-align:left; }
.finale .dl-card{ background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); }

/* Kontaktformular */
.contact{ max-width:900px; margin:clamp(34px,5vw,56px) auto 0; text-align:left; }
/* ── Live-Demo (30.08.2026) ────────────────────────────────────────────────
   Nutzt bewusst dieselben Bausteine wie der Kontaktbereich darunter
   (.contact-panel, .dl-ico, .btn) — ein eigener Stil wuerde den Abschnitt wie
   einen Fremdkoerper wirken lassen. */
.demo{ max-width:900px; margin:clamp(34px,5vw,56px) auto 0; text-align:left; }
.demo-kopf{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.demo-punkte{ list-style:none; margin:20px 0 26px; padding:0; display:grid; gap:13px; }
.demo-punkte li{ position:relative; padding-left:30px; color:var(--slate-300); font-size:15.5px; line-height:1.6; }
.demo-punkte li::before{ content:""; position:absolute; left:7px; top:9px; width:8px; height:8px; border-radius:50%; background:#22D3EE; box-shadow:0 0 0 4px rgba(34,211,238,.15); }
.demo-punkte li b{ color:#fff; font-weight:650; }
.demo-aktionen{ display:flex; flex-wrap:wrap; gap:14px; }
.demo-fuss{ margin:22px 0 0; padding-top:18px; border-top:1px solid var(--glass-line); color:var(--slate-400); font-size:14.5px; }
.demo-fuss a{ color:#7DD3FC; font-weight:600; }
@media (max-width:640px){ .demo-aktionen .btn{ width:100%; justify-content:center; } }
.contact-panel{ position:relative; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); border:1px solid var(--glass-line); border-radius:22px; padding:clamp(26px,3.4vw,40px); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 30px 80px -40px rgba(14,165,233,.3); }
.contact-panel h3{ font-size:clamp(20px,2.2vw,25px); font-weight:800; color:#fff; letter-spacing:-.01em; }
.contact-panel .contact-sub{ color:var(--slate-400); font-size:15px; margin:6px 0 22px; }
.cf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cf-field{ display:flex; flex-direction:column; gap:7px; }
.cf-field.full{ grid-column:1 / -1; }
.cf-field label{ font-size:13px; font-weight:700; color:#E2E8F0; }
.cf-field input, .cf-field textarea{ font-family:var(--font); font-size:15px; color:#E2E8F0; background:rgba(2,6,23,.5); border:1px solid var(--glass-line); border-radius:11px; padding:12px 14px; transition:border-color .18s ease, box-shadow .18s ease; }
.cf-field input::placeholder, .cf-field textarea::placeholder{ color:#5b6a84; }
.cf-field input:focus, .cf-field textarea:focus{ outline:none; border-color:var(--sky); box-shadow:0 0 0 4px rgba(14,165,233,.16); }
.cf-field textarea{ min-height:120px; resize:vertical; line-height:1.55; }
.cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cf-bottom{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-top:20px; }
.cf-captcha{ display:flex; flex-direction:column; gap:8px; }
.cf-captcha > label{ font-size:13px; font-weight:700; color:#E2E8F0; }
.cf-captcha .cf-qhint{ font-weight:500; color:var(--slate-500); }
.cf-q{ display:flex; align-items:center; gap:10px; }
.cf-qbox{ font-family:var(--mono); font-weight:700; font-size:16px; letter-spacing:.06em; color:#7DD3FC; background:rgba(2,6,23,.55); border:1px solid rgba(56,189,248,.35); border-radius:9px; padding:9px 14px; min-width:92px; text-align:center; }
.cf-q .cf-eq{ color:var(--slate-400); font-weight:700; }
.cf-q input{ width:96px; text-align:center; font-family:var(--mono); }
.cf-refresh{ background:none; border:1px solid var(--glass-line); color:var(--slate-400); cursor:pointer; padding:8px; border-radius:9px; display:inline-flex; transition:color .2s ease, border-color .2s ease; }
.cf-refresh:hover{ color:var(--cyan); border-color:rgba(34,211,238,.5); }
.cf-refresh svg{ width:17px; height:17px; }
.cf-submit{ padding:14px 26px; }
.cf-status{ margin-top:0; font-size:14px; font-weight:600; border-radius:11px; max-height:0; opacity:0; overflow:hidden; transition:opacity .3s ease, max-height .3s ease, margin-top .3s ease; }
.cf-status.show{ opacity:1; max-height:200px; margin-top:18px; padding:12px 16px; }
.cf-status.ok{ background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.45); color:#6EE7B7; }
.cf-status.err{ background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.45); color:#FCA5A5; }
.cf-privacy{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;color:#b7c6da;font-size:13px;line-height:1.5}.cf-privacy input{width:18px;height:18px;margin-top:1px;accent-color:#22d3ee}.cf-privacy a{color:#7dd3fc}
@media (max-width:620px){ .cf-grid{ grid-template-columns:1fr; } .cf-bottom{ flex-direction:column; align-items:stretch; } .cf-submit{ justify-content:center; } }

/* Footer */
.footer{ background:var(--night); border-top:1px solid rgba(148,163,184,.12); padding:clamp(50px,6vw,70px) 0 40px; font-size:14px; }
.footer-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,3fr); gap:clamp(30px,4vw,60px); margin-bottom:44px; }
.footer-logos{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.footer-logos .chip{ background:#fff; border-radius:12px; padding:7px 14px; display:inline-flex; }
.footer-logos img{ height:32px; width:auto; }
.footer p{ color:var(--slate-500); max-width:44ch; }
.footer h4{ font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--slate-400); margin-bottom:16px; }
.footer ul{ display:grid; gap:10px; }
.footer ul a{ text-decoration:none; color:var(--slate-400); transition:color .2s ease; }
.footer ul a:hover{ color:var(--cyan); }
.footer-legal{ border-top:1px solid rgba(148,163,184,.12); padding-top:26px; display:grid; gap:12px; color:var(--slate-500); font-size:13px; }
.footer-legal .marks{ max-width:none; font-size:12.5px; color:#5b6a84; }

/* Reveals */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .26s cubic-bezier(.4,0,.7,.2),transform .26s cubic-bezier(.4,0,.7,.2); }
.reveal-left{ transform:translate(-12px,18px); }
.reveal-right{ transform:translate(12px,18px); }
.reveal-pop{ transform:translateY(18px) scale(.96); }
.reveal.in{ opacity:1; transform:none; transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1); transition-delay:var(--d,0s); }
.tile.reveal,.g-card.reveal,.dl-card.reveal{ transition:opacity .26s cubic-bezier(.4,0,.7,.2),transform .26s cubic-bezier(.4,0,.7,.2),box-shadow .3s ease,border-color .3s ease; }
.tile.reveal.in,.g-card.reveal.in,.dl-card.reveal.in{ transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease; }

/* Responsive */
@media (max-width:1024px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); row-gap:30px; }
  .about-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .dg-caption{ width:min(92vw,560px); }
}
/* ---- Mobile-Navigation: alles ins Burger-Menü, sobald der Platz knapp wird ---- */
/* Grenze am 11.09.2026 von 1180 auf 1420 angehoben: mit dem Punkt Voraussetzungen
   braucht die Leiste 1327 px; darunter lief sie über und quetschte die Punkte. */
@media (max-width:1420px){
  .nav-links{ position:absolute; top:calc(100% + 10px); right:3vw; left:auto; flex-direction:column; align-items:stretch; gap:2px; min-width:min(280px,86vw); padding:10px; background:rgba(2,6,23,.97); border:1px solid var(--glass-line); border-radius:16px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 30px 70px -20px rgba(0,0,0,.6); opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .25s ease,transform .25s ease; }
  .nav.open .nav-links{ opacity:1; transform:none; pointer-events:auto; }
  .nav-links a{ padding:12px 14px; border-radius:10px; font-size:15px; }
  .nav-m{ display:block; }
  .nav-m--sep{ margin-top:6px; padding-top:8px; border-top:1px solid rgba(148,163,184,.16); }
  .nav-actions .nav-contact, .nav-actions .nav-portal, .nav-actions .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
}
@media (max-width:860px){
  .scrolly.is-ready{ height:auto; }
  .scrolly.is-ready .scrolly-sticky{ position:static; height:auto; }
  .scrolly.is-ready .dg-svg-wrap svg{ height:auto; }
  .scrolly.is-ready .dg-inbound1,.scrolly.is-ready .dg-inbound2,.scrolly.is-ready .dg-bay,.scrolly.is-ready .dg-outbound1,.scrolly.is-ready .dg-outbound2,.scrolly.is-ready .dg-loop,.scrolly.is-ready .dg-hub,.scrolly.is-ready .dg-capring{ opacity:1 !important; filter:none !important; }
  .scrolly.is-ready .dg-hub,.scrolly.is-ready .dg-capring{ opacity:0 !important; }
  .dg-rail{ display:none; }
  .dg-hint{ display:none; }
  .dg-stagehead{ position:static; margin-bottom:8px; }
  .dg-frame{ padding:30px 3vw; flex-direction:column; }
  .dg-caption{ position:static; width:min(92vw,640px); margin-inline:auto; padding-top:6px; }
  /* Auf Mobil nur die zusammenfassende Beschreibung + finale Überschrift zeigen */
  .dg-cap{ display:none !important; }
  .dg-cap[data-cap="5"]{ display:block !important; position:static !important; opacity:1 !important; transform:none !important; margin-bottom:6px; }
  .dg-sh{ display:none !important; }
  .dg-sh[data-sh="5"]{ display:block !important; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .dl-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr 1fr; gap:16px 18px; }
  .hero{ padding-top:120px; }
  .aurora i:nth-child(3){ display:none; }
}
@media (max-width:420px){ .stat .val{ font-size:34px; } }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .hero .rise{ animation:none; opacity:1; transform:none; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .scrolly.is-ready{ height:auto; }
  .scrolly.is-ready .scrolly-sticky{ position:static; height:auto; }
  .scrolly.is-ready .dg-svg-wrap svg{ height:auto; }
  .dg-rail,.dg-hint{ display:none; }
  .dg-frame{ padding:40px 3vw; flex-direction:column; }
  .dg-caption{ position:static; width:min(720px,92vw); margin-inline:auto; }
  .dg-cap{ position:static !important; opacity:1 !important; transform:none !important; margin-bottom:8px; }
  .dg-layer{ opacity:1 !important; transform:none !important; filter:none !important; }
  .scrolly.is-ready .dg-hub,.scrolly.is-ready .dg-capring{ opacity:0 !important; }
  .dg-sh{ display:none; } .dg-sh[data-sh="5"]{ display:block; }
  .dg-stagehead{ position:static; margin-bottom:8px; }
}

/* ===== Umbau 09.09.2026: Abschnitte „Warum RPMC" und „Pilotprogramm" (gleiche Bausteine wie Downloads/Kontakt) ===== */
.warum{ position:relative; background:var(--night); padding:clamp(64px,9vw,120px) 0 clamp(40px,6vw,80px); }
.warum .section-head{ max-width:820px; }
.warum-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); margin-bottom:clamp(28px,4vw,48px); }
.warum-split .dl-card{ gap:12px; }
.warum-split .dl-card h3{ font-size:17px; }
.warum-split .dl-card .tile-tag{ margin-bottom:0; }
.warum-split .dl-card p{ flex:0; }
.warum-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,24px); }
.warum-grid .dl-card{ gap:12px; padding:clamp(22px,2.6vw,30px); }
.warum-grid .dl-card h3{ font-size:17.5px; line-height:1.25; }
.warum-grid .dl-card p{ font-size:14.5px; flex:0; }
.warum-grid .dl-card p.loesung{ color:#E8FBFF; border-top:1px solid rgba(148,163,184,.18); padding-top:12px; margin-top:4px; }
.warum-grid .dl-card p.loesung b{ color:var(--cyan); font-weight:700; }
.warum-fazit{ margin-top:clamp(28px,4vw,44px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); }
.warum-fazit .dl-card{ border-color:rgba(34,211,238,.35); background:linear-gradient(180deg,rgba(34,211,238,.09),rgba(37,99,235,.04)); gap:8px; }
.warum-fazit .dl-card h3{ font-size:19px; }
.warum-fazit .dl-card p{ flex:0; color:var(--slate-300); }
.pilot{ position:relative; padding:clamp(56px,8vw,104px) 0; background:radial-gradient(60% 120% at 50% 100%,rgba(37,99,235,.12),transparent 70%),var(--night); }
.pilot .contact-panel{ max-width:1020px; margin:0 auto; }
.pilot .kicker{ margin-bottom:14px; }
.pilot h2{ font-size:clamp(28px,3.6vw,42px); line-height:1.12; letter-spacing:-.03em; font-weight:800; color:#fff; margin:0 0 14px; }
.pilot .pilot-lead{ color:var(--slate-400); font-size:clamp(15.5px,1.3vw,17.5px); max-width:70ch; margin:0 0 6px; }
.pilot .demo-aktionen{ margin-top:6px; }
.pilot .pilot-fuss{ margin-top:18px; font-size:13px; color:var(--slate-500); }
@media (max-width:1024px){ .warum-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .warum-split,.warum-grid,.warum-fazit{ grid-template-columns:1fr; } }
/* Hero: Abzeichen sind Sprungmarken, Pilot-Knopf eigene Zeile */
.hero-badges li{ padding:0; }
.hero-badges li a{ display:block; padding:8px 16px; border-radius:999px; text-decoration:none; color:inherit; transition:color .2s ease, border-color .2s ease, background .2s ease; }
.hero-badges li:hover{ border-color:rgba(34,211,238,.6); background:rgba(34,211,238,.08); }
.hero-badges li a:hover{ color:#fff; }
.hero-badges li a::after{ content:" ↓"; opacity:.55; }
.hero-pilot{ display:flex; justify-content:center; margin-top:18px; margin-bottom:clamp(30px,4vw,44px); }
.btn-pilot{ background:linear-gradient(120deg,#34D399,#22D3EE 60%,#0EA5E9); color:#04121F; font-size:17px; padding:17px 36px; border-radius:16px; box-shadow:0 0 0 4px rgba(52,211,153,.18), 0 18px 48px -14px rgba(52,211,153,.75); }
.btn-pilot:hover{ transform:translateY(-2px); box-shadow:0 0 0 6px rgba(52,211,153,.22), 0 24px 56px -14px rgba(52,211,153,.9); }
/* Vier Antworten im Detail (Sprungziele der Abzeichen) */
.detail{ position:relative; background:var(--night); padding:clamp(48px,7vw,96px) 0; border-top:1px solid rgba(148,163,184,.1); }
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); }
.detail-grid .dl-card{ gap:10px; }
.detail-grid .dl-card h3{ font-size:20px; }
.detail-grid .dl-card p{ flex:0; }
.detail-grid .demo-punkte{ margin:8px 0 0; gap:9px; }
.detail-grid .demo-punkte li{ font-size:14.5px; }
.detail-grid .dl-card .fazit{ margin-top:8px; padding-top:12px; border-top:1px solid rgba(148,163,184,.18); color:#E8FBFF; }
/* Einführung: eine Kachel, zentriert */
.einfuehrung{ margin:clamp(40px,6vw,72px) auto 0; max-width:900px; }
.einfuehrung .dl-card{ text-align:left; border-color:rgba(52,211,153,.45); background:linear-gradient(180deg,rgba(52,211,153,.10),rgba(34,211,238,.04)); gap:12px; }
.einfuehrung .dl-card h3{ font-size:clamp(22px,2.4vw,28px); line-height:1.2; }
.einfuehrung .dl-card p.lead{ font-size:17px; color:#E2E8F0; flex:0; }
.einfuehrung .demo-punkte{ margin:6px 0 0; }
/* Pilot: ein Knopf, zentriert, breiter */
.pilot .demo-aktionen{ justify-content:center; margin-top:10px; }
.pilot .btn-primary{ justify-content:center; min-width:min(460px,100%); padding:18px 44px; font-size:17.5px; }
.pilot .pilot-fuss{ text-align:center; }
@media (max-width:760px){ .detail-grid{ grid-template-columns:1fr; } }