/* ==========================================================================
   KORAX Analytics — Website Stylesheet
   Stauß Technologies GbR
   Brand: Signal Teal #00FFA6 · Void Black #0A0A0A · Carbon #141414
   Schriften: Inter (UI/Fließtext) + Orbitron (Display/Labels), lokal gehostet
   ========================================================================== */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/orbitron-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/orbitron-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/orbitron-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/orbitron-latin-800-normal.woff2') format('woff2');}

/* ---------- Tokens ---------- */
:root{
  --ease-rev:cubic-bezier(.22,.7,.3,1);
  --signal:#00FFA6;
  --void:#050807;
  --carbon:#0d1211;
  --surface:#111716;
  --line:#1f2a28;
  --line-soft:#18201f;
  --text:#ffffff;
  --text-2:#a8b0ae;
  --text-3:#7c8583;
  --text-4:#5d6664;
  --red:#ff5f6d;
  --amber:#ffb547;

  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Orbitron','Inter',sans-serif;

  --maxw:1240px;
  --pad:clamp(20px,5vw,64px);
  --radius:14px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:var(--font-ui);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;}
h1,h2,h3,h4,p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
::selection{background:rgba(0,255,166,.24);color:#fff;}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px;}

/* ---------- Typo-Helfer ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.eyebrow{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(12px,1.02vw,14px);
  letter-spacing:.2em;text-transform:uppercase;color:#939d9b;
  line-height:1.45;
}
.lead{color:var(--text-2);font-size:clamp(15px,1.15vw,17px);line-height:1.75;}
h1,h2{font-weight:400;letter-spacing:-.025em;line-height:1.05;}
.h-hero{font-size:clamp(42px,5.6vw,76px);}
.h-sec{font-size:clamp(29px,3.5vw,45px);line-height:1.1;}
/* Feste Zeilenumbrüche nur dort, wo die Zeile sicher passt (englische Fassung).
   DE und ES brechen frei um und bekommen leicht kompaktere Displaygrößen. */
@media (min-width:1101px){
  html[lang="en"] .hero-copy h1,
  html[lang="en"] .split h2,
  html[lang="en"] .platform-copy h2,
  html[lang="en"] .cta-inner h2{white-space:nowrap;}
  html[lang="de"] .hero-copy h1,
  html[lang="de"] .cta-inner h2{white-space:nowrap;}
}
html[lang="es"] .h-hero{font-size:clamp(38px,4.6vw,60px);}
html[lang="de"] .h-hero{font-size:clamp(40px,5.1vw,70px);}
html[lang="es"] .h-sec,html[lang="de"] .h-sec{font-size:clamp(28px,3.2vw,41px);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:8px;font-size:14.5px;font-weight:500;
  border:1px solid transparent;cursor:pointer;transition:.22s ease;white-space:nowrap;
}
.btn svg{flex:none;transition:transform .22s ease;}
.btn:hover svg{transform:translateX(3px);}
.btn--primary{background:var(--signal);color:#03110c;font-weight:600;}
.btn--primary:hover{background:#4dffc0;box-shadow:0 0 34px rgba(0,255,166,.25);}
.btn--ghost{border-color:rgba(0,255,166,.42);color:var(--signal);background:transparent;padding:11px 20px;font-size:13.5px;}
.btn--ghost:hover{background:rgba(0,255,166,.08);border-color:var(--signal);}
.link-underline{
  display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--text);
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:4px;transition:.22s;
}
.link-underline:hover{color:var(--signal);border-color:var(--signal);}
.link-underline b{font-weight:400;}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(5,8,7,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.site-header.is-scrolled{border-bottom-color:var(--line-soft);background:rgba(5,8,7,.92);}
.header-inner{display:flex;align-items:center;gap:32px;height:74px;}
.brand{display:flex;align-items:center;flex:none;}
.brand img{height:26px;width:auto;}
.nav{display:flex;align-items:center;gap:34px;margin-left:26px;}
.nav a{font-size:14px;color:var(--text-2);transition:color .2s;}
.nav a:hover{color:var(--text);}
.header-actions{display:flex;align-items:center;gap:22px;margin-left:auto;flex:0 0 auto;}
.nav{min-width:0;}
.header-actions .login{font-size:14px;color:var(--text-2);}
.header-actions .login:hover{color:var(--text);}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;color:var(--text);padding:8px;cursor:pointer;}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;overflow:hidden;padding-top:clamp(48px,5.4vw,72px);padding-bottom:clamp(52px,5.6vw,78px);}
.hero::before{
  content:"";position:absolute;top:-320px;right:-180px;width:1100px;height:900px;
  background:radial-gradient(ellipse at center,rgba(0,255,166,.10),rgba(0,255,166,.03) 42%,transparent 70%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px) 0 0/100% 88px,
    linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px) 0 0/88px 100%;
  mask-image:radial-gradient(ellipse 90% 70% at 30% 20%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 30% 20%,#000,transparent 75%);
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(28px,4vw,60px);align-items:center;
}
.hero-copy{max-width:585px;}
.hero-copy .eyebrow{display:block;margin-bottom:26px;}
.hero-copy h1{margin-bottom:26px;}
.hero-copy .lead{margin-bottom:38px;max-width:470px;}
.hero-cta{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
.hero-visual{position:relative;}
.hero-visual .device{
  width:calc(100% + var(--pad) + 8vw);
  transform:perspective(2400px) rotateY(-3.5deg);transform-origin:left center;
}

/* ==========================================================================
   Geräte-Gehäuse — echte Display-Seitenverhältnisse
   Laptop 16:10 (1728×1080) · iPad 4:3 (1366×1024) · iPhone 9:19.5 (390×844)
   Der Inhalt wird in echter Punktauflösung gerendert und per JS skaliert.
   ========================================================================== */
.device{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0f1514,#080c0b 60%);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02) inset;
  aspect-ratio:16/10;
}
.device--tablet{border-radius:16px;aspect-ratio:4/3;}
.phone{
  width:min(252px,80vw);flex:none;
  background:linear-gradient(160deg,#0f1514,#080c0b);
  border:1px solid #222c2a;border-radius:30px;padding:6px;
  box-shadow:0 40px 70px -22px rgba(0,0,0,.95);
}
.phone-screen{
  position:relative;overflow:hidden;background:var(--void);
  border-radius:25px;aspect-ratio:9/19.5;
}
.device > .mock,.phone-screen > .mock{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;}
.phone-screen > .mock{display:flex;flex-direction:column;}

/* ==========================================================================
   Terminal-UI im Mock (Größen gelten für die echte Punktauflösung)
   ========================================================================== */
.mock{font-feature-settings:"tnum" 1;}
.app{display:grid;grid-template-columns:208px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:100%;overflow:hidden;}
.app--noside{grid-template-columns:minmax(0,1fr);}

.app-top{
  grid-column:1/-1;display:flex;align-items:center;gap:14px;
  padding:11px 16px;border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.012);
}
.app-top .brandmini{display:flex;align-items:center;flex:none;}
.app-top .book{
  display:flex;align-items:center;gap:6px;flex:none;padding:5px 10px;border-radius:6px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.03);font-size:12px;color:var(--text-2);
}
.app-top .book b{font-weight:600;color:var(--text);}
.app-search{
  flex:1;display:flex;align-items:center;gap:9px;max-width:560px;
  background:rgba(255,255,255,.035);border:1px solid var(--line-soft);border-radius:7px;
  padding:7px 12px;color:var(--text-3);font-size:12.5px;
}
.app-top .top-icons{margin-left:auto;display:flex;align-items:center;gap:16px;color:var(--text-3);}
.live{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--text-3);letter-spacing:.08em;}
.live i{width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px rgba(0,255,166,.12);flex:none;}
.badge{position:relative;display:inline-flex;}
.badge em{
  position:absolute;top:-5px;right:-7px;background:var(--red);color:#fff;font-style:normal;
  font-size:8.5px;line-height:1;padding:2px 4px;border-radius:5px;font-weight:700;
}

.app-side{border-right:1px solid var(--line-soft);padding:10px 8px;display:flex;flex-direction:column;gap:2px;}
.side-group{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-4);padding:14px 10px 6px;}
.side-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;font-size:13px;color:var(--text-3);}
.side-item svg{flex:none;opacity:.8;}
.side-item.is-active{background:rgba(0,255,166,.10);color:var(--signal);}
.side-item.is-active svg{opacity:1;}
.side-item .count{margin-left:auto;font-size:10px;color:var(--text-3);background:rgba(255,255,255,.05);padding:1px 5px;border-radius:4px;}
.side-foot{margin-top:auto;padding:10px;border-top:1px solid var(--line-soft);font-size:10px;color:var(--text-4);line-height:1.5;}

.app-main{padding:14px 18px;display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;}
.app-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.app-h h4{font-size:16px;font-weight:500;letter-spacing:-.01em;}
.app-h span{font-size:11px;color:var(--text-3);}

/* Ticker */
.ticker{display:flex;align-items:center;gap:20px;padding:5px 0;border-bottom:1px solid var(--line-soft);overflow:hidden;flex:none;}
.tick{display:flex;align-items:baseline;gap:6px;font-size:11.5px;white-space:nowrap;}
.tick b{font-weight:500;color:var(--text-3);letter-spacing:.06em;}
.tick span{color:var(--text);font-weight:500;}
.tick em{font-style:normal;font-size:11px;}

/* Karten */
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;padding:12px 14px;min-width:0;}
.card-label{font-size:11px;color:var(--text-3);letter-spacing:.07em;text-transform:uppercase;}
.card-value{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-top:4px;}
.card-value small{font-size:13px;font-weight:500;opacity:.65;}
.big-value{font-size:28px;font-weight:600;letter-spacing:-.02em;}
.big-value small{font-size:15px;opacity:.6;}
.delta{font-size:12px;font-weight:500;margin-top:3px;}
.up{color:var(--signal);}
.down{color:var(--red);}
.spark{margin-top:7px;height:30px;width:100%;}

.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;}
.grid-32{display:grid;grid-template-columns:1.45fr 1fr;gap:11px;}

.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.panel-h b{font-size:12.5px;font-weight:500;color:var(--text);}
.panel-h span{font-size:9.5px;color:var(--text-4);letter-spacing:.08em;}

.chip-row{display:flex;gap:5px;align-items:center;}
.chip{font-size:10px;color:var(--text-3);padding:2px 7px;border-radius:4px;border:1px solid var(--line-soft);}
.chip.is-on{color:var(--signal);border-color:rgba(0,255,166,.35);background:rgba(0,255,166,.08);}

/* Tagesspanne */
.range{margin-top:7px;}
.range-bar{position:relative;height:3px;border-radius:2px;background:#1c2523;}
.range-bar i{position:absolute;top:-2px;width:2px;height:7px;background:var(--text);border-radius:1px;}
.range-lbl{display:flex;justify-content:space-between;font-size:9px;color:var(--text-4);margin-top:4px;}

/* KPI-Leiste */
.kpis{display:flex;border-top:1px solid var(--line-soft);margin-top:9px;padding-top:9px;}
.kpi{flex:1;min-width:0;padding-right:10px;}
.kpi + .kpi{padding-left:10px;border-left:1px solid var(--line-soft);}
.kpi b{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);font-weight:500;}
.kpi span{display:block;font-size:14px;font-weight:600;margin-top:3px;}

/* Donut */
.donut-wrap{display:flex;align-items:center;justify-content:center;gap:14px;padding:4px 0;}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.donut-center b{font-size:16px;font-weight:600;}
.donut-center span{font-size:10px;color:var(--text-3);letter-spacing:.12em;}
.legend{display:flex;flex-direction:column;gap:6px;}
.legend i{width:7px;height:7px;border-radius:50%;display:inline-block;}

/* Event-Feed */
.evt{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-soft);}
.evt:last-child{border-bottom:0;}
.evt time{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums;flex:none;width:38px;}
.evt .flag{font-size:14px;flex:none;}
.evt .evt-body{min-width:0;flex:1;}
.evt .evt-body b{display:block;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.evt .evt-body span{display:block;font-size:10.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tag{font-size:9.5px;letter-spacing:.08em;padding:2px 6px;border-radius:4px;flex:none;}
.tag--high{background:rgba(255,95,109,.14);color:var(--red);}
.tag--mid{background:rgba(255,181,71,.14);color:var(--amber);}

/* Positionstabelle */
.tbl{width:100%;border-collapse:collapse;font-size:12px;}
.tbl th{
  text-align:left;font-weight:500;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-4);padding:0 8px 6px 0;border-bottom:1px solid var(--line-soft);white-space:nowrap;
}
.tbl td{padding:6px 8px 6px 0;border-bottom:1px solid rgba(255,255,255,.035);white-space:nowrap;color:var(--text-2);}
.tbl tr:last-child td{border-bottom:0;}
.tbl .inst{color:var(--text);font-weight:500;}
.tbl .isin{color:var(--text-4);font-size:10px;}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;}
.wbar{position:relative;width:46px;height:3px;border-radius:2px;background:#1c2523;display:inline-block;vertical-align:middle;}
.wbar i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--signal);opacity:.75;}
.typebadge{font-size:9px;letter-spacing:.06em;padding:1px 5px;border-radius:4px;border:1px solid var(--line);color:var(--text-3);}

/* Barrier-Monitor */
.barrier{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.035);}
.barrier:last-child{border-bottom:0;}
.barrier .bn{min-width:0;flex:1;}
.barrier .bn b{display:block;font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.barrier .bn span{font-size:9.5px;color:var(--text-4);}
.barrier .bdist{width:64px;flex:none;}
.barrier .bdist .wbar{width:100%;}
.barrier .bpct{font-size:12px;font-weight:600;width:46px;text-align:right;flex:none;}

/* Chart-Achsen & Statusleiste */
.chart-wrap{position:relative;}
.chart-axis{display:flex;justify-content:space-between;font-size:9.5px;color:var(--text-4);margin-top:5px;}
.statusbar{
  display:flex;align-items:center;gap:18px;flex:none;
  border-top:1px solid var(--line-soft);padding:7px 0 0;margin-top:auto;
  font-size:9.5px;color:var(--text-4);letter-spacing:.05em;
}
.statusbar .sep{margin-left:auto;}
.statusbar span{white-space:nowrap;}
/* Die Leiste läuft unter beiden Spalten der Oberfläche durch */
.app > .statusbar{grid-column:1 / -1;}
.statusbar{overflow:hidden;}

/* ---------- iPhone-Scope (390 pt logisch, iOS-typische Größen) ---------- */
.phone-status{display:flex;justify-content:space-between;padding:14px 22px 4px;font-size:13px;color:var(--text-3);flex:none;}
.phone-body{padding:0 17px;display:flex;flex-direction:column;gap:13px;flex:1;min-height:0;overflow:hidden;}
.phone-tabbar{
  display:flex;justify-content:space-between;align-items:center;flex:none;
  padding:12px 22px 16px;border-top:1px solid var(--line-soft);margin-top:auto;
}
.phone-tab{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--text-3);}
.phone-tab.is-active{color:var(--signal);}
.fab{
  width:38px;height:38px;border-radius:12px;background:var(--signal);color:#03110c;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;
}
.gauge-wrap{position:relative;width:68px;height:68px;flex:none;}
.gauge-wrap b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;}

.phone-screen .card{padding:13px 14px;border-radius:12px;}
.phone-screen .card-label{font-size:11px;}
.phone-screen .evt{padding:8px 0;gap:9px;}
.phone-screen .evt time{font-size:11.5px;width:38px;}
.phone-screen .evt .flag{font-size:15px;}
.phone-screen .evt .evt-body b{font-size:13px;}
.phone-screen .evt .evt-body span{font-size:10.5px;}
.phone-screen .tag{font-size:9.5px;}
.phone-screen .kpi b{font-size:9.5px;}
.phone-screen .kpi span{font-size:13.5px;}

/* ==========================================================================
   Sektion: A unified perspective
   ========================================================================== */
.section{padding:clamp(60px,7vw,100px) 0;}
.section--line{border-top:1px solid var(--line-soft);}
.split{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(28px,4.4vw,72px);align-items:end;}
.split .eyebrow{display:block;margin-bottom:24px;}

.pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:clamp(48px,6vw,84px);border-top:1px solid var(--line-soft);}
.pillar{padding:36px 26px 0 0;position:relative;}
.pillar + .pillar{padding-left:26px;}
.pillar + .pillar::before{content:"";position:absolute;left:0;top:34px;bottom:4px;width:1px;background:var(--line-soft);}
.pillar-icon{
  width:46px;height:46px;border:1px solid var(--line);border-radius:9px;
  display:flex;align-items:center;justify-content:center;color:var(--text);margin-bottom:20px;
  background:rgba(255,255,255,.015);
}
.pillar h3{font-size:15.5px;font-weight:600;margin-bottom:9px;letter-spacing:-.01em;}
.pillar p{font-size:13.5px;color:var(--text-2);line-height:1.62;}

/* ==========================================================================
   Sektion: Plattform
   ========================================================================== */
.platform{position:relative;overflow:hidden;background:linear-gradient(180deg,#070b0a,#050807);border-top:1px solid var(--line-soft);}
.platform::before{
  content:"";position:absolute;top:10%;right:-10%;width:900px;height:700px;
  background:radial-gradient(ellipse at center,rgba(0,255,166,.07),transparent 68%);pointer-events:none;
}
.platform-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4vw,56px);align-items:center;
}
.platform-copy{max-width:500px;}
.platform-copy .eyebrow{display:block;margin-bottom:22px;}
.platform-copy h2{margin-bottom:22px;}
.platform-copy .lead{margin-bottom:34px;}
.feature-list{display:flex;flex-direction:column;gap:14px;margin-bottom:38px;}
.feature-list li{display:flex;align-items:center;gap:14px;font-size:14.5px;color:var(--text);}
.dot{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,255,166,.45);flex:none;display:flex;align-items:center;justify-content:center;}
.dot::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--signal);}

.platform-visual{position:relative;}
.platform-visual .device{
  width:calc(100% + var(--pad) + 6vw);
  transform:perspective(2400px) rotateY(-3deg);transform-origin:left center;
}
.platform-visual .phone{position:absolute;left:3%;bottom:-7%;z-index:3;}

.device-note{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:36px;position:relative;z-index:2;}
.device-note b{display:block;font-size:14.5px;font-weight:500;margin-bottom:4px;}
.device-note span{font-size:13px;color:var(--text-2);}
.device-note .icons{display:flex;gap:16px;color:var(--text-3);}

/* ==========================================================================
   CTA & Footer
   ========================================================================== */
.cta{border-top:1px solid var(--line-soft);background:linear-gradient(180deg,#060a09,#050807);position:relative;overflow:hidden;}
.cta::before{
  content:"";position:absolute;left:50%;top:-40%;width:900px;height:640px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,255,166,.07),transparent 68%);pointer-events:none;
}
.cta-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.cta-inner .eyebrow{display:block;margin-bottom:22px;}
.cta-inner h2{margin-bottom:24px;}
.cta-text{
  font-size:clamp(15px,1.15vw,17px);line-height:1.75;color:var(--text-2);
  max-width:620px;margin:0 auto;
}
.cta-actions{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  margin-top:clamp(32px,3.6vw,44px);
}
.btn--lg{padding:17px 34px;font-size:15.5px;}
.cta-meta{
  margin:0;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-4);font-family:var(--font-display);font-weight:500;
}
@media (max-width:560px){
  .cta-meta{letter-spacing:.06em;font-size:10.5px;}
  .btn--lg{padding:15px 26px;font-size:14.5px;width:100%;justify-content:center;}
  .cta-actions{width:100%;}
}

.site-footer{border-top:1px solid var(--line-soft);padding:34px 0;}
.footer-inner{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.site-footer img{height:19px;}
.footer-nav{display:flex;gap:26px;margin-left:auto;flex-wrap:wrap;}
.footer-nav a{font-size:13px;color:var(--text-3);transition:color .2s;}
.footer-nav a:hover{color:var(--text);}
.footer-legal{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft);display:flex;gap:18px;flex-wrap:wrap;font-size:11.5px;color:var(--text-3);line-height:1.6;}
.footer-legal p{max-width:820px;}

/* ==========================================================================
   Rechtsseiten
   ========================================================================== */
.legal{padding:clamp(56px,7vw,92px) 0 clamp(64px,8vw,110px);}
.legal-inner{max-width:780px;}
.legal h1{font-size:clamp(32px,4.4vw,48px);margin-bottom:14px;}
.legal .updated{font-size:13px;color:var(--text-3);margin-bottom:46px;}
.legal h2{font-size:21px;font-weight:600;letter-spacing:-.01em;margin:44px 0 14px;}
.legal h3{font-size:16px;font-weight:600;margin:28px 0 10px;}
.legal p,.legal li{font-size:15px;color:var(--text-2);line-height:1.75;}
.legal p + p{margin-top:14px;}
.legal ul{list-style:disc;padding-left:20px;margin:12px 0;display:flex;flex-direction:column;gap:7px;}
.legal a{color:var(--signal);border-bottom:1px solid rgba(0,255,166,.3);}
.legal a:hover{border-color:var(--signal);}
.legal strong{color:var(--text);font-weight:600;}
.legal .box{background:var(--carbon);border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px 26px;margin:22px 0;}
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-3);margin-bottom:34px;}
.back-link:hover{color:var(--signal);}

/* ==========================================================================
   Reveal
   ========================================================================== */
/* Grundverhalten: jedes Element blendet ein, die Variante bestimmt die Bewegung */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .85s var(--ease-rev),transform .85s var(--ease-rev),filter .85s var(--ease-rev);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{opacity:1;transform:none;filter:none;}

/* Nur einblenden, die Bewegung machen die Kinder */
.reveal--fade{transform:none;}
/* Aus der Fläche heraus, für Karten in Rastern */
.reveal--card{transform:translateY(26px) scale(.988);}
/* Für Geräte: sanft scharf werden, wirkt wie ein Display, das angeht */
.reveal--device{
  transform:translateY(30px) scale(.962);filter:blur(8px);
  transition-duration:1.2s;
}
/* Abschlussblöcke, die sich aufrichten */
.reveal--rise{transform:translateY(34px) scale(.985);transform-origin:50% 100%;}

/* Trennlinie zwischen Abschnitten zeichnet sich von links */
.section--line{position:relative;border-top-color:transparent;}
.section--line::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--line-soft);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.15s var(--ease-rev);
}
.section--line.is-drawn::before{transform:none;}

/* Zeitstrahl im Ablauf: Punkt setzt sich, Linie wächst nach unten */
.flow-step.reveal .flow-meta::before{
  transform:scale(.35);opacity:0;
  transition:transform .55s cubic-bezier(.34,1.45,.5,1) 60ms,opacity .4s ease 60ms;
}
.flow-step.reveal.is-in .flow-meta::before{transform:none;opacity:1;}
.flow-step.reveal .flow-meta::after{
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .95s var(--ease-rev) 150ms;
}
.flow-step.reveal.is-in .flow-meta::after{transform:none;}
.flow-step.reveal .flow-num,
.flow-step.reveal .flow-time,
.flow-step.reveal .flow-stamp{
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease-rev),transform .6s var(--ease-rev);
}
.flow-step.reveal .flow-time{transition-delay:110ms;}
.flow-step.reveal .flow-stamp{transition-delay:170ms;}
.flow-step.reveal.is-in .flow-num,
.flow-step.reveal.is-in .flow-time,
.flow-step.reveal.is-in .flow-stamp{opacity:1;transform:none;}
.flow-step.reveal .flow-body{
  opacity:0;transform:translateX(-18px);
  transition:opacity .8s var(--ease-rev) 120ms,transform .8s var(--ease-rev) 120ms;
}
.flow-step.reveal .flow-panel{
  opacity:0;transform:translateY(20px) scale(.99);
  transition:opacity .95s var(--ease-rev) 240ms,transform .95s var(--ease-rev) 240ms;
}
.flow-step.reveal.is-in .flow-body,
.flow-step.reveal.is-in .flow-panel{opacity:1;transform:none;}

/* Hero: läuft beim Laden, nicht beim Scrollen */
@keyframes heroIn{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
@keyframes heroDevice{from{opacity:0;transform:translateY(34px) scale(.96);filter:blur(9px);}
                      to{opacity:1;transform:none;filter:none;}}
.hero-copy > *{animation:heroIn .9s var(--ease-rev) both;}
.hero-copy > .eyebrow{animation-delay:.05s;}
.hero-copy > .h-hero{animation-delay:.15s;}
.hero-copy > .lead{animation-delay:.28s;}
.hero-copy > .hero-cta{animation-delay:.4s;}
.hero-visual{animation:heroDevice 1.35s var(--ease-rev) .3s both;}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal--card,.reveal--device,.reveal--rise,.reveal--fade{
    opacity:1;transform:none;filter:none;transition:none;
  }
  .section--line::before,
  .flow-step.reveal .flow-meta::before,
  .flow-step.reveal .flow-meta::after,
  .flow-step.reveal .flow-body,
  .flow-step.reveal .flow-panel,
  .flow-step.reveal .flow-num,
  .flow-step.reveal .flow-time,
  .flow-step.reveal .flow-stamp{transform:none;opacity:1;transition:none;}
  .hero-copy > *,.hero-visual{animation:none;}
  .faq-item[open] .faq-a{animation:none;}
  html{scroll-behavior:auto;}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .hero-visual .device,.platform-visual .device{width:100%;transform:none;}
  .platform-visual .phone{position:relative;z-index:3;margin:-44px auto 0;left:auto;bottom:auto;}
  .hero-grid,.platform-grid{grid-template-columns:minmax(0,1fr);}
  .hero-copy,.platform-copy{max-width:640px;}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pillar{padding:32px 22px 32px 0;}
  .pillar + .pillar::before{top:30px;}
  .pillar:nth-child(odd){padding-left:0;}
  .pillar:nth-child(odd)::before{display:none;}
  .pillar:nth-child(even){padding-left:22px;}
  .split{grid-template-columns:minmax(0,1fr);align-items:start;gap:24px;}

}
@media (max-width:1140px){
  .nav,.header-actions .login{display:none;}
  .header-actions{margin-left:auto;}
  .nav-toggle{display:block;order:3;margin-left:0;}
  .nav.is-open{
    display:flex;flex-direction:column;align-items:flex-start;gap:20px;
    position:absolute;top:100%;left:0;right:0;padding:24px var(--pad) 30px;
    background:rgba(5,8,7,.98);border-bottom:1px solid var(--line-soft);margin:0;
  }
  .nav.is-open a{font-size:16px;color:var(--text);}
  .pillars{grid-template-columns:minmax(0,1fr);}
  .pillar,.pillar:nth-child(even){padding:28px 0;border-top:1px solid var(--line-soft);}
  .pillar:first-child{border-top:0;}
  .pillar + .pillar::before{display:none;}
  .footer-nav{margin-left:0;width:100%;gap:18px;}
}

/* ==========================================================================
   Sprachauswahl
   ========================================================================== */
.lang{position:relative;flex:none;}
.lang-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  color:var(--text);padding:8px 14px 8px 16px;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.lang-btn:hover{border-color:rgba(0,255,166,.45);}
.lang-code{
  font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.14em;line-height:1;
}
.lang-caret{opacity:.7;transition:transform .22s ease;}
.lang.is-open .lang-btn{border-color:rgba(0,255,166,.5);background:rgba(0,255,166,.05);}
.lang.is-open .lang-caret{transform:rotate(180deg);}

.lang-list{
  position:absolute;top:calc(100% + 10px);right:0;z-index:70;
  min-width:184px;padding:10px;
  background:#0c1110;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.95);
  display:flex;flex-direction:column;
  transform-origin:top right;
}
.lang-list[hidden]{display:none;}
.lang.is-open .lang-list{animation:langIn .18s cubic-bezier(.22,.7,.3,1);}
@keyframes langIn{from{opacity:0;transform:translateY(-6px) scale(.98);}to{opacity:1;transform:none;}}

.lang-list button{
  position:relative;display:flex;align-items:center;
  background:transparent;border:0;cursor:pointer;
  font-family:var(--font-ui);font-size:15px;color:var(--text-3);
  padding:12px 30px 12px 14px;border-radius:9px;text-align:left;
  transition:color .18s,background .18s;
}
.lang-list button:hover{color:var(--text);background:rgba(255,255,255,.04);}
.lang-list button[aria-checked="true"]{color:var(--text);font-weight:600;}
.lang-list button[aria-checked="true"]::after{
  content:"";position:absolute;right:14px;top:50%;margin-top:-3px;
  width:6px;height:6px;border-radius:50%;background:var(--signal);
}

@media (max-width:820px){
  .lang-btn{padding:7px 12px 7px 14px;}
  .lang-code{font-size:11.5px;}
  .lang-list{min-width:168px;}
  .lang-list button{font-size:14.5px;padding:11px 28px 11px 12px;}
}
@media print{ .lang{display:none !important;} }

/* ==========================================================================
   Barrierefreiheit & Druck
   ========================================================================== */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--signal);color:#03110c;font-weight:600;font-size:14px;
  padding:12px 20px;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

.notfound{display:flex;align-items:center;min-height:56vh;}

@media print{
  .site-header,.site-footer,.back-link,.lang,.skip-link,.hero::before,.hero::after{display:none !important;}
  body{background:#fff;color:#000;}
  .legal p,.legal li{color:#222;font-size:11pt;}
  .legal h1,.legal h2,.legal h3,.legal strong{color:#000;}
  .legal a{color:#000;border:0;}
  .legal a[href^="http"]::after,.legal a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}
  .legal .box{border:1px solid #bbb;background:#fafafa;}
  .legal{padding:0;}
  .wrap{max-width:none;padding:0;}
}


/* ==========================================================================
   Sektion: Event to portfolio (Ablaufbeispiel)
   ========================================================================== */
.flow{
  list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:0;
}
.flow-step{
  display:grid;grid-template-columns:186px minmax(0,.74fr) minmax(0,1.16fr);
  gap:clamp(20px,3vw,44px);
  padding:clamp(26px,3vw,38px) 0;
  border-top:1px solid var(--line-soft);
  align-items:start;
}
.flow-step:last-child{border-bottom:1px solid var(--line-soft);}

.flow-meta{position:relative;padding:2px 0 0 30px;}
.flow-meta::before{
  content:"";position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--void);border:2px solid var(--signal);box-shadow:0 0 0 4px rgba(0,255,166,.10);
}
.flow-num{
  font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.16em;
  color:var(--text-3);display:block;margin-bottom:11px;
}
.flow-time{display:block;line-height:1;white-space:nowrap;}
.flow-time b{
  font-family:var(--font-display);font-weight:700;font-size:clamp(21px,2.1vw,28px);
  color:var(--signal);letter-spacing:-.01em;
}
.flow-time em{
  font-style:normal;font-family:var(--font-display);font-weight:500;
  font-size:13px;color:var(--text-4);margin-left:3px;letter-spacing:.06em;
}
.flow-meta::after{
  content:"";position:absolute;left:5px;top:22px;bottom:-40px;width:1px;
  background:linear-gradient(180deg,rgba(0,255,166,.45),rgba(0,255,166,.12));
}
.flow-step:last-child .flow-meta::after{
  bottom:auto;height:74px;
  background:linear-gradient(180deg,rgba(0,255,166,.45),rgba(0,255,166,0));
}

/* Abschluss: Gesamtdauer */
.flow-total{
  display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);
  padding:clamp(24px,3vw,34px) 0 0;
}
.flow-total-num{
  font-family:var(--font-display);font-weight:800;font-size:clamp(38px,4.6vw,58px);
  color:var(--signal);line-height:1;letter-spacing:-.02em;flex:none;
}
.flow-total-num em{font-style:normal;font-size:.42em;font-weight:600;margin-left:3px;color:var(--text-3);}
.flow-total p{font-size:15px;line-height:1.65;color:var(--text-2);max-width:460px;}

.flow-body h3{font-size:19px;font-weight:500;letter-spacing:-.015em;margin-bottom:12px;}
.flow-body p{font-size:14.5px;line-height:1.7;color:var(--text-2);}

/* Panels: Produktausschnitte in Website-Größe (nicht skaliert) */
.fp{
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:16px 18px;font-variant-numeric:tabular-nums;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.85);
}
.fp-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid var(--line-soft);
}
.fp-h b{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);}
.fp-h span{font-size:11px;color:var(--text-4);letter-spacing:.06em;}
.fp-title{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:3px;}
.fp-sub{font-size:12px;color:var(--text-4);letter-spacing:.04em;}

.fp-stats{display:flex;gap:0;margin-top:15px;}
.fp-stat{flex:1;min-width:0;padding-right:12px;}
.fp-stat + .fp-stat{padding-left:12px;border-left:1px solid var(--line-soft);}
.fp-stat b{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-4);font-weight:500;}
.fp-stat span{display:block;font-size:16px;font-weight:600;margin-top:4px;}

.fp-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px;}
.fp-tag{
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;border:1px solid var(--line);color:var(--text-3);
}
.fp-tag--signal{border-color:rgba(0,255,166,.4);color:var(--signal);background:rgba(0,255,166,.07);}
.fp-tag--alert{border-color:rgba(255,95,109,.4);color:var(--red);background:rgba(255,95,109,.07);}

/* Cross-Asset-Zeilen */
.fp-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.fp-row:last-child{border-bottom:0;}
.fp-row .n{flex:1;min-width:0;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fp-row .v{font-size:13px;font-weight:600;width:78px;text-align:right;flex:none;}
.fp-row .m{width:72px;flex:none;}
.fp-meter{position:relative;height:4px;border-radius:2px;background:#1c2523;overflow:hidden;}
.fp-meter i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--signal);opacity:.8;}
.fp-meter.is-alert i{background:var(--red);}
.fp-row .c{font-size:10px;letter-spacing:.08em;color:var(--text-4);width:52px;text-align:right;flex:none;text-transform:uppercase;}

/* Verteilungsvergleich */
.fp-dist{position:relative;margin-top:6px;}
.fp-legend{display:flex;gap:16px;margin-top:10px;font-size:11px;color:var(--text-3);}
.fp-legend i{display:inline-block;width:14px;height:2px;vertical-align:middle;margin-right:6px;}
.fp-shift{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:600;}
.fp-shift em{font-style:normal;color:var(--text-4);font-weight:400;}
.fp-arrow{color:var(--signal);}

/* Tabelle */
.fp-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.fp-tbl th{
  text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-4);font-weight:500;padding:0 10px 8px 0;border-bottom:1px solid var(--line-soft);white-space:nowrap;
}
.fp-tbl td{padding:9px 10px 9px 0;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text-2);white-space:nowrap;}
.fp-tbl tr:last-child td{border-bottom:0;}
.fp-tbl tr.total td{color:var(--text);font-weight:600;border-top:1px solid var(--line-soft);}
.fp-tbl .r{text-align:right;}
.fp-tbl .inst{color:var(--text);}

.fp-note{
  margin-top:15px;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:11px;line-height:1.6;color:var(--text-4);
}
.fp-note b{color:var(--text-3);font-weight:600;}

@media (max-width:1100px){
  .flow-step{grid-template-columns:170px minmax(0,1fr);}
  .flow-panel{grid-column:1/-1;margin-top:6px;}
  .flow-meta::after{bottom:-30px;}
}
@media (max-width:560px){
  .flow-step{grid-template-columns:minmax(0,1fr);gap:14px;}
  .flow-meta{display:flex;align-items:baseline;gap:14px;padding-left:26px;}
  .flow-num{margin-bottom:0;}
  .flow-meta::after{display:none;}
  .flow-total{flex-direction:column;align-items:flex-start;gap:12px;}
  .flow-time{margin-top:0;}
  .fp{padding:14px 15px;}
  .fp-stats{flex-wrap:wrap;gap:10px 0;}
  .fp-stat{flex:0 0 50%;}
  .fp-stat + .fp-stat{border-left:0;padding-left:0;}
  .fp-tbl{font-size:11.5px;}
}

/* Korrekturen Flow-Panels */
.fp-row .m,.fp-meter{display:block;}
.fp-row .m{width:72px;}
.fp-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.flow-meta::after{top:38px;}
@media (max-width:560px){
  .fp-row .n{font-size:12px;}
  .fp-row .m{width:48px;}
  .fp-row .v{width:66px;font-size:12px;}
  .fp-row .c{display:none;}
}

/* ==========================================================================
   Datenschutz-Hinweis (kein Consent nötig, da keine Cookies gesetzt werden)
   ========================================================================== */
.notice{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:80;
  display:flex;justify-content:center;pointer-events:none;
}
.notice-inner{
  pointer-events:auto;
  display:flex;align-items:flex-start;gap:14px;
  max-width:760px;width:100%;
  background:rgba(13,18,17,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.95);
  transform:translateY(14px);opacity:0;
  transition:transform .45s cubic-bezier(.22,.7,.3,1),opacity .45s;
}
.notice.is-in .notice-inner{transform:none;opacity:1;}
.notice-icon{flex:none;color:var(--signal);margin-top:2px;}
.notice-text{font-size:12.5px;line-height:1.65;color:var(--text-2);margin:0;flex:1;min-width:0;}
.notice-text b{color:var(--text);font-weight:600;display:block;margin-bottom:2px;font-size:13px;}
.notice-text a{color:var(--signal);border-bottom:1px solid rgba(0,255,166,.3);margin-left:4px;white-space:nowrap;}
.notice-text a:hover{border-color:var(--signal);}
.notice-btn{
  flex:none;background:transparent;border:1px solid rgba(0,255,166,.42);color:var(--signal);
  font-size:12.5px;font-weight:600;padding:9px 18px;border-radius:7px;cursor:pointer;
  transition:.2s;margin-top:1px;
}
.notice-btn:hover{background:rgba(0,255,166,.09);border-color:var(--signal);}
@media (max-width:640px){
  .notice{left:10px;right:10px;bottom:10px;}
  .notice-inner{flex-wrap:wrap;padding:14px 15px;gap:11px;}
  .notice-text{flex:1 1 100%;order:2;}
  .notice-icon{order:1;}
  .notice-btn{order:3;width:100%;padding:11px 18px;}
}
@media print{ .notice{display:none !important;} }

/* Header-Dichte, sobald die Labels in DE und ES länger werden */
@media (max-width:1480px){
  .header-inner{gap:18px;}
  .nav{gap:20px;margin-left:8px;}
  .nav a{font-size:13.5px;}
  .header-actions{gap:14px;}
  .header-actions .login{display:none;}
  .btn--ghost{padding:10px 15px;font-size:12.5px;}
}
@media (max-width:620px){
  .header-actions .btn--ghost{display:none;}
}
/* Der Pilot-Button erscheint nur im aufgeklappten Menü */
.nav-cta{display:none;}
@media (max-width:1140px){
  .nav.is-open .nav-cta{
    display:inline-flex;align-items:center;background:var(--signal);color:#03110c;
    font-weight:600;font-size:15px;padding:12px 22px;border-radius:8px;margin-top:4px;
  }
}

/* Panels dürfen im Grid nicht über ihre Spalte hinauswachsen */
.flow-panel,.fp{min-width:0;}
.fp-tbl-wrap{max-width:100%;}

/* Hinweis unter dem Pilot-Button */
.cta-meta{
  margin-top:14px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-4);font-family:var(--font-display);font-weight:500;white-space:nowrap;
}
@media (max-width:1100px){ .cta-meta{white-space:normal;} }

/* Vorher/Nachher-Werte in einer Zeile halten */
.fp-stat > span{display:block;}
.fp-shift{display:flex !important;align-items:baseline;gap:7px;flex-wrap:nowrap;}
.fp-shift em,.fp-shift .fp-arrow{display:inline !important;font-size:inherit;margin:0;}
.fp-shift em{font-size:14px;}

/* Absoluter Zeitstempel unter der verstrichenen Zeit */
.flow-stamp{
  display:block;margin-top:7px;
  font-family:var(--font-display);font-weight:500;font-size:11px;letter-spacing:.06em;
  color:var(--text-4);font-variant-numeric:tabular-nums;white-space:nowrap;
}
@media (max-width:560px){
  .flow-stamp{margin-top:0;align-self:baseline;}
}

/* Zielgruppe in den Produktkarten hervorheben */
.pillar p b{display:block;color:var(--text);font-weight:600;margin-bottom:5px;}

/* Karten in einer Reihe sauber ausrichten (Titel, Label, Text auf gleicher Höhe) */
.pillars{grid-auto-rows:auto;}
@supports (grid-template-rows: subgrid){
  .pillars{grid-template-rows:auto auto auto;}
  .pillar{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start;}
}
@supports not (grid-template-rows: subgrid){
  .pillar h3{min-height:2.5em;}
}
.pillar h3{hyphens:manual;}
.nav a{white-space:nowrap;}
@media (max-width:900px){
  .pillars{grid-template-rows:none !important;}
  .pillar{display:block !important;}
}

/* Zielgruppen-Karten: Label und Text zeilenweise ausrichten */
.pillar-who{color:var(--text);font-weight:600;font-size:13.5px;line-height:1.5;margin-bottom:8px;}
@supports (grid-template-rows: subgrid){
  .pillars--who{grid-template-rows:auto auto auto auto;}
  .pillars--who .pillar{grid-row:span 4;}
}
@media (max-width:900px){
  .pillars--who{grid-template-rows:none !important;}
  .pillars--who .pillar{display:block !important;}
  .pillar-who{margin-bottom:6px;}
}

/* ==========================================================================
   Sektion: Sicherheit und Datenschutz
   ========================================================================== */
.trust{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,30px);
  margin-top:clamp(44px,5vw,72px);
}
.trust-item{
  background:var(--carbon);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(20px,2.2vw,28px);
  display:flex;flex-direction:column;
  transition:border-color .25s;
}
.trust-item:hover{border-color:rgba(0,255,166,.24);}
.trust-icon{
  width:40px;height:40px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,255,166,.09);color:var(--signal);margin-bottom:18px;
}
.trust-item h3{font-size:15.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:9px;}
.trust-item p{font-size:13.5px;line-height:1.65;color:var(--text-2);}

.trust-note{
  margin-top:clamp(26px,3vw,36px);
  font-size:13px;line-height:1.7;color:var(--text-3);max-width:820px;
}
.trust-note a{color:var(--signal);border-bottom:1px solid rgba(0,255,166,.3);}
.trust-note a:hover{border-color:var(--signal);}

@media (max-width:900px){
  .trust{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:620px){
  .trust{grid-template-columns:minmax(0,1fr);}
}

/* Szenariowirkung: Werte farblich fassen, Summenzeile hervorheben */
.pnl{
  display:inline-block;padding:3px 9px;border-radius:6px;
  font-weight:600;font-variant-numeric:tabular-nums;line-height:1.35;
}
.pnl.up{background:rgba(0,255,166,.11);color:var(--signal);}
.pnl.down{background:rgba(255,95,109,.12);color:var(--red);}
.pnl--lg{font-size:14px;padding:5px 12px;}

.fp-tbl--impact td{vertical-align:middle;}
.fp-tbl--impact tr.total td{
  background:rgba(0,255,166,.045);border-top:1px solid rgba(0,255,166,.22);
  padding-top:12px;padding-bottom:12px;color:var(--text);font-weight:600;
}
.fp-tbl--impact tr.total td:first-child{border-radius:8px 0 0 8px;padding-left:10px;}
.fp-tbl--impact tr.total td:last-child{border-radius:0 8px 8px 0;padding-right:10px;}
.pnl-pct{color:var(--signal);font-weight:700;font-size:13px;}
.pnl-lbl{color:var(--text-3);font-weight:400;font-size:11.5px;}

/* Wertspalte ruhiger, damit die Farbe wirkt */
.fp-tbl--impact tbody td:nth-child(2){color:var(--text-3);}
.fp-tbl--impact tr.total td:nth-child(2){color:var(--text);}

/* Beobachtung: hervorgehobene Kernaussage */
.fp-hero{
  margin-top:16px;padding:14px 16px;border-radius:10px;
  background:rgba(0,255,166,.06);border:1px solid rgba(0,255,166,.18);
}
.fp-hero b{
  display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3);font-weight:500;margin-bottom:6px;
}
.fp-hero-val{
  display:flex;align-items:baseline;gap:10px;
  font-size:26px;font-weight:700;color:var(--signal);letter-spacing:-.01em;
}
.fp-hero-val em{font-style:normal;font-size:19px;font-weight:500;color:var(--text-4);}
.fp-hero-val .fp-arrow{font-size:19px;color:var(--text-3);}
.fp-hero i{display:block;font-style:normal;font-size:11px;color:var(--text-4);margin-top:6px;}
.fp-stat span small{font-size:12px;font-weight:500;color:var(--text-4);}

/* Kennzahlenreihen: Label und Wert immer auf derselben Linie */
.fp-stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:auto auto;}
.fp-stat{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start;}
@supports not (grid-template-rows: subgrid){
  .fp-stats{display:flex;}
  .fp-stat b{min-height:2.3em;}
}
.fp-stat b{align-self:start;}
.fp-stat span{align-self:start;}

/* Renditestaffel in der Beobachtung */
.fp-ladder{
  margin-top:16px;border:1px solid var(--line-soft);border-radius:10px;
  padding:13px 15px;background:rgba(255,255,255,.015);
}
.fp-ladder-h{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);
  padding-bottom:9px;margin-bottom:4px;border-bottom:1px solid var(--line-soft);
}
.fp-lrow{
  display:grid;grid-template-columns:62px minmax(0,1fr) auto;
  align-items:baseline;gap:12px;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.035);
}
.fp-lrow:last-child{border-bottom:0;padding-bottom:0;}
.fp-lrow .p{font-size:15px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;}
.fp-lrow .t{font-size:12.5px;color:var(--text-2);line-height:1.5;}
.fp-lrow .v{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
@media (max-width:560px){
  .fp-lrow{grid-template-columns:54px minmax(0,1fr);gap:10px;}
  .fp-lrow .v{grid-column:2;justify-self:start;}
}

/* Sehr schmale Displays: Tabellen und Vorher-Nachher-Werte entlasten */
@media (max-width:560px){
  .fp-stage{grid-template-columns:20px minmax(0,1fr) auto;gap:9px;}
  .fp-stage .c{display:none;}
  .fp-shift{flex-wrap:wrap;font-size:13px;gap:5px;}
  .fp-shift em{font-size:12px;}
  .fp-tbl th:last-child,.fp-tbl td:last-child{display:none;}
  .fp-tbl th,.fp-tbl td{padding-right:8px;}
  .fp-tbl--impact tr.total td:nth-child(3){border-radius:0 8px 8px 0;padding-right:10px;}
  .fp-stats{grid-auto-flow:row;grid-template-rows:none;gap:10px 0;}
  .fp-stat{grid-row:auto;display:block;padding:0;}
}

/* Dreistufige Prüfung in der Beobachtung */
.fp-stages{
  margin-top:16px;border:1px solid rgba(0,255,166,.16);border-radius:10px;
  padding:13px 15px;background:rgba(0,255,166,.035);
}
.fp-stages-h{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal);
  padding-bottom:10px;margin-bottom:2px;border-bottom:1px solid rgba(0,255,166,.14);
}
.fp-stage{
  display:grid;grid-template-columns:22px minmax(0,1fr) auto 62px;
  align-items:center;gap:11px;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.035);
}
.fp-stage .k{
  font-size:12.5px;font-weight:600;color:var(--text-3);text-align:right;
  font-variant-numeric:tabular-nums;
}
.fp-stage .k--final{color:var(--signal);font-size:14px;font-weight:700;}
.fp-stage .k i{font-style:normal;font-weight:500;font-size:.76em;color:var(--text-4);letter-spacing:.01em;}
.fp-stages-f{
  margin-top:11px;padding-top:10px;border-top:1px solid rgba(0,255,166,.12);
  font-size:11px;line-height:1.6;color:var(--text-4);
}
.fp-stage:last-child{border-bottom:0;}
.fp-stage + .fp-stages-f{border-top:1px solid rgba(0,255,166,.12);}
.fp-stage .s{
  width:20px;height:20px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,255,166,.14);color:var(--signal);
  font-family:var(--font-display);font-size:10px;font-weight:700;
}
.fp-stage .n{font-size:12.5px;color:var(--text);}
.fp-stage .c{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* Erklärboxen in der linken Spalte des letzten Schritts */
.flow-explain{
  margin-top:18px;padding:14px 16px;
  border:1px solid var(--line-soft);border-radius:10px;
  background:rgba(255,255,255,.014);
}
.flow-explain b{
  display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--signal);font-weight:600;margin-bottom:8px;
}
.flow-explain p{font-size:13px;line-height:1.65;color:var(--text-2);}

/* Staffel und Prüfstufen nebeneinander */
.fp-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;margin-top:16px;align-items:stretch;}
/* Beide Kästen sind gleich hoch, der Inhalt verteilt sich darin gleichmäßig */
.fp-split .fp-ladder,.fp-split .fp-stages{display:flex;flex-direction:column;}
.fp-split .fp-lrow,.fp-split .fp-stage{flex:1 1 auto;}
.fp-split .fp-stages-f{margin-top:auto;}
.fp-split .fp-ladder,.fp-split .fp-stages{margin-top:0;}
.fp-split .fp-lrow{grid-template-columns:52px minmax(0,1fr) auto;gap:8px;padding:7px 0;}
.fp-split .fp-lrow .p{font-size:13.5px;}
.fp-split .fp-lrow .t{font-size:11.5px;}
.fp-split .fp-lrow .v{font-size:13px;}
.fp-split .fp-stage{grid-template-columns:19px minmax(0,1fr) auto 52px;gap:7px;padding:7px 0;}
.fp-split .fp-stage .s{width:18px;height:18px;font-size:9px;}
.fp-split .fp-stage .n{font-size:11.5px;}
.fp-split .fp-stage .c{font-size:11px;}
.fp-split .fp-stage .k{font-size:11.5px;}
.fp-split .fp-stage .k--final{font-size:12.5px;}
.fp-split .fp-stages-f{font-size:10px;margin-top:9px;padding-top:8px;}
@media (max-width:860px){
  .fp-split{grid-template-columns:minmax(0,1fr);}
}

/* ==========================================================================
   Fragen und Antworten
   ========================================================================== */
.faq-section{padding-top:clamp(56px,6vw,88px);border-top:1px solid var(--line-soft);}
.faq-head{max-width:640px;margin-bottom:clamp(32px,4vw,46px);}
.faq{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;align-items:start;
}
.faq-col{display:flex;flex-direction:column;gap:12px;}
.faq-item{
  border:1px solid var(--line-soft);border-radius:12px;
  background:rgba(255,255,255,.012);
  transition:border-color .35s ease,background .35s ease;
}
.faq-item[open]{border-color:rgba(0,255,166,.24);background:rgba(0,255,166,.022);}
.faq-item:hover{border-color:rgba(0,255,166,.2);}
.faq-item > summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:14px;
  padding:16px 18px;
  font-size:14.5px;font-weight:500;line-height:1.45;color:var(--text);
}
.faq-item > summary::-webkit-details-marker{display:none;}
.faq-item > summary:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:12px;}
.faq-item > summary i{
  position:relative;width:12px;height:12px;justify-self:end;flex:none;
  color:var(--text-3);transition:color .3s ease,transform .35s cubic-bezier(.22,.7,.3,1);
}
.faq-item > summary i::before,
.faq-item > summary i::after{
  content:"";position:absolute;left:0;top:50%;width:12px;height:1.5px;
  background:currentColor;border-radius:1px;transform:translateY(-50%);
  transition:transform .35s cubic-bezier(.22,.7,.3,1),opacity .3s ease;
}
.faq-item > summary i::after{transform:translateY(-50%) rotate(90deg);}
.faq-item[open] > summary i{color:var(--signal);transform:rotate(180deg);}
.faq-item[open] > summary i::after{transform:translateY(-50%) rotate(0deg);opacity:0;}
.faq-a{padding:0 18px 17px;}
.faq-a p{font-size:13.5px;line-height:1.72;color:var(--text-2);}
.faq-item[open] .faq-a{animation:faqIn .45s cubic-bezier(.22,.7,.3,1) both;}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.faq-note{
  margin-top:clamp(26px,3vw,36px);font-size:13.5px;line-height:1.7;color:var(--text-4);
}
@media (max-width:820px){
  .faq{grid-template-columns:minmax(0,1fr);gap:12px;}
}

/* Das Telefon setzt sich kurz nach dem Tablet davor */
.platform-visual.reveal .phone{
  opacity:0;transform:translateY(28px) scale(.94);
  transition:opacity .9s var(--ease-rev) .42s,transform .9s var(--ease-rev) .42s;
}
.platform-visual.reveal.is-in .phone{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .platform-visual.reveal .phone{opacity:1;transform:none;transition:none;}
}


/* ==========================================================================
   Geräte auf schmalen Displays
   Die Rahmen laufen bis an den Rand, damit die Oberfläche so groß wie
   möglich bleibt. Der Inhalt wird nicht unter eine lesbare Größe skaliert,
   stattdessen zeigt der Rahmen einen echten Ausschnitt.
   ========================================================================== */
@media (max-width:700px){
  .hero-visual,.platform-visual{
    width:calc(100% + var(--pad) * 2);
    margin-left:calc(var(--pad) * -1);
  }
  .hero-visual .device,.platform-visual .device{
    width:100%;border-radius:0;border-left:0;border-right:0;
  }
  .platform-visual .phone{
    width:min(300px,76vw);margin-top:-38px;
  }
  .device-note{
    width:calc(100% - var(--pad) * 2);margin-left:var(--pad);
  }
}