/* ============================================================
   VEPROVIA — Startseite v3
   Basis: Claude-Design "Startseite.dc.html"
   Anpassungen: System-Cockpit als Fullscreen-Dashboard (CoStar-Stil),
   RIS-Glass-Sektion mit Fluid-Bild-Hintergrund
   ============================================================ */

/* ---- Lokale Schriften (DSGVO: kein Google-CDN) ---- */
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('../assets/fonts/outfit-var-latin.woff2') format('woff2-variations');
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:300 500;
  font-display:swap;
  src:url('../assets/fonts/newsreader-italic-var-latin.woff2') format('woff2-variations');
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#ffffff;color:#0c1a1c;font-family:'Outfit',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:#097f87;color:#fff}
button{font-family:inherit}

/* ---- Keyframes ---- */
@keyframes kb{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.16) translate(-1.5%,-1%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(36px,-28px) scale(1.18)}100%{transform:translate(0,0) scale(1)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-44px,22px) scale(.92)}100%{transform:translate(0,0) scale(1.1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---- Scroll-Progress ---- */
.progress-track{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;background:rgba(9,127,135,.08)}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#097f87,#13a8a0,#33c9c2);box-shadow:0 0 14px rgba(19,168,160,.5);transition:width .08s linear}

/* ---- Header (schwebende Glass-Pille) ---- */
.site-header{position:fixed;top:18px;left:0;right:0;z-index:110;display:flex;justify-content:center;padding:0 22px;pointer-events:none}
.header-pill{pointer-events:auto;width:100%;max-width:1280px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 10px 10px 22px;border-radius:100px;background:rgba(255,255,255,.46);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 34px rgba(12,40,42,.09);transition:all .45s cubic-bezier(.16,.84,.44,1)}
body.scrolled .header-pill{max-width:1140px;padding:8px 8px 8px 20px;background:rgba(255,255,255,.74);border-color:rgba(9,127,135,.16);box-shadow:0 16px 44px rgba(12,40,42,.16)}
.header-nav{display:flex;align-items:center;gap:2px}
.header-nav a{position:relative;padding:10px 16px;font-size:14.5px;font-weight:500;color:#1d3033;text-decoration:none;border-radius:100px;transition:background .2s,color .2s}
.header-nav a:hover{background:rgba(9,127,135,.1);color:#097f87}
.header-phone{display:inline-flex;align-items:center;gap:8px;padding:0;border-radius:100px;text-decoration:none;font-size:14px;font-weight:600;color:#0c1a1c;white-space:nowrap;overflow:hidden;background:rgba(9,127,135,.07);border:1px solid rgba(9,127,135,.14);transition:max-width .45s cubic-bezier(.16,.84,.44,1),opacity .35s ease,padding .4s,margin .4s,transform .2s;max-width:0;margin-right:-8px;opacity:0;pointer-events:none}
body.scrolled .header-phone{max-width:260px;padding:11px 16px 11px 14px;margin-right:0;opacity:1;pointer-events:auto}
.header-phone:hover{transform:translateY(-1px);background:rgba(9,127,135,.12)}
.btn-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:100px;text-decoration:none;font-size:14px;font-weight:700;color:#fff;white-space:nowrap;background:linear-gradient(120deg,#097f87,#13a8a0);box-shadow:0 8px 22px rgba(9,127,135,.34);transition:transform .2s,box-shadow .2s}
.btn-cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(9,127,135,.46)}

/* ---- Buttons / generische Hover-Utilities ---- */
.btn-primary{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:14px;text-decoration:none;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(120deg,#097f87,#13a8a0);box-shadow:0 10px 30px rgba(9,127,135,.32);transition:transform .25s,box-shadow .25s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(9,127,135,.42)}
.btn-glass{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:14px;text-decoration:none;font-size:16px;font-weight:600;color:#0c1a1c;background:rgba(255,255,255,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);box-shadow:0 4px 18px rgba(12,26,28,.08),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .25s,box-shadow .25s}
.btn-glass:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(12,26,28,.12)}
.hov-lift{transition:transform .2s}
.hov-lift:hover{transform:translateY(-2px)}

/* ---- Finder ---- */
.filter-btn{cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:100px;border:none;transition:all .35s cubic-bezier(.16,.84,.44,1);background:transparent}
.prod-card{position:relative;border-radius:24px;background:#fff;border:1px solid rgba(12,40,42,.08);box-shadow:0 2px 14px rgba(12,40,42,.05);transition:transform .28s cubic-bezier(.16,.84,.44,1),box-shadow .28s,border-color .28s;overflow:hidden}
.prod-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(12,40,42,.14);border-color:var(--hover-bd,rgba(9,127,135,.33))}

/* ---- Produkt-Showcase ---- */
.prod-tab{cursor:pointer;padding:12px 22px;border-radius:100px;font-size:14px;font-weight:700;backdrop-filter:blur(10px);transition:all .3s;border:1px solid rgba(12,40,42,.12)}
.kpi-tile{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:20px 22px;border-radius:18px;background:rgba(255,255,255,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 26px rgba(12,40,42,.08);transition:transform .25s,box-shadow .25s}
.kpi-tile:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(12,40,42,.13)}
.hotspot{position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.16,.84,.44,1)}
.hotspot span{width:12px;height:12px;border-radius:50%;animation:pulse 2.2s ease-in-out infinite}

/* ---- Hero: Foto-Hintergrund mit langsamem Zoom + weißem Verlauf ---- */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 26%;z-index:0;
  transform-origin:62% 34%;animation:heroZoom 30s ease-in-out infinite alternate;will-change:transform}
@keyframes heroZoom{0%{transform:scale(1.02)}100%{transform:scale(1.14)}}
/* Lichthof: weiche Ellipse unter der Textspalte, läuft vor den Personen aus.
   Kein Rechteck, keine Kante — das Foto bleibt rechts vollständig unangetastet. */
.hero-halo{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(48% 78% at 21% 56%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 34%,rgba(255,255,255,.68) 54%,rgba(255,255,255,.3) 72%,rgba(255,255,255,0) 88%),
  radial-gradient(30% 40% at 8% 22%,rgba(255,255,255,.5),rgba(255,255,255,0) 80%)}
/* Reserve: flächiges Overlay (aktuell nicht im Markup) */
.hero-overlay{position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.72)}
@media (max-width:960px){
  .hero-bg{object-position:66% 20%}
  .hero-halo{background:radial-gradient(120% 62% at 40% 40%,rgba(255,255,255,.94) 0%,rgba(255,255,255,.84) 42%,rgba(255,255,255,.55) 66%,rgba(255,255,255,.2) 82%,rgba(255,255,255,0) 96%)}
}

/* Kleinteilige Hero-Elemente bekommen echtes Glas statt Transparenz */
.hero-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:100px;font-size:14px;font-weight:600;color:#12292c;
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(12,40,42,.07)}

/* ---- RIS-Glass-Sektion: Fullscreen, MRT-Bild hinter den Glass-Elementen ---- */
.ris-full{position:relative;overflow:hidden;min-height:100vh;display:flex}
.ris-full .ris-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.ris-full::after{content:"";position:absolute;inset:0;background:linear-gradient(165deg,rgba(255,255,255,.6),rgba(255,255,255,.12) 45%,rgba(255,255,255,.2))}
.ris-inner{position:relative;z-index:2;width:min(1340px,82%);flex:none;margin:0 auto;padding:110px 0 70px;display:flex;flex-direction:column}
.ris-board{position:relative;flex:1;display:flex;flex-direction:column;min-height:520px}

/* ---- Webinare: Fullscreen, CT-Bild als Hintergrund, 3er-Grid ---- */
.webinar-full{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center}
.webinar-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* helles Motiv -> heller Schleier statt Abdunklung (Text steht dunkel darauf) */
.webinar-scrim{position:absolute;inset:0;background:
  linear-gradient(105deg,rgba(255,255,255,.74),rgba(255,255,255,.34) 48%,rgba(255,255,255,.12)),
  linear-gradient(180deg,rgba(255,255,255,.3),rgba(9,127,135,.05) 55%,rgba(9,127,135,.14))}
.webinar-wrap{position:relative;z-index:3;width:min(1340px,82%);margin:0 auto;padding:clamp(120px,15vh,180px) 0 clamp(110px,13vh,165px)}
.web-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;align-items:stretch}
.web-card{display:flex;flex-direction:column;padding:36px 34px 30px;border-radius:36px;background:linear-gradient(170deg,rgba(255,255,255,.93),rgba(240,250,246,.82) 45%,rgba(214,238,232,.74));backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 70px rgba(12,45,42,.18);transition:transform .3s cubic-bezier(.16,.84,.44,1)}
.web-card:hover{transform:translateY(-6px)}
.seat-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(12,26,28,.25);background:rgba(255,255,255,.35);cursor:pointer;font-size:18px;color:#0c1a1c;display:flex;align-items:center;justify-content:center;transition:background .2s}
.seat-btn:hover{background:rgba(255,255,255,.6)}

/* ---- Kino-Sektion ---- */
/* Bildausschnitt: beide Personen bleiben oben frei, Text sitzt unten links */
.cine-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 26%;opacity:0;transition:opacity 1.1s cubic-bezier(.16,.84,.44,1)}
.cine-photo.on{opacity:1}
@media (max-width:1100px){.cine-photo{object-position:60% 20%}}
@media (max-width:640px){.cine-photo{object-position:64% 16%}}
.cine-fade{transition:opacity .5s ease}
.cine-fade.is-out{opacity:0}

/* ---- Kontakt-Dock ---- */
.dock{position:fixed;right:26px;top:50%;transform:translateY(-50%) translateX(90px);z-index:100;display:flex;flex-direction:column;gap:12px;opacity:0;pointer-events:none;transition:opacity .45s ease,transform .55s cubic-bezier(.16,.84,.44,1)}
body.scrolled .dock{transform:translateY(-50%) translateX(0);opacity:1;pointer-events:auto}
.dock a{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .22s}
.dock a:hover{transform:scale(1.09)}

/* ---- Prozess-Stepper ---- */
.step-btn{position:relative;z-index:1;display:flex;align-items:center;gap:18px;padding:14px 18px;border:none;background:transparent;border-radius:16px;cursor:pointer;text-align:left;transition:background .3s}
.step-circle{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .35s cubic-bezier(.16,.84,.44,1)}

/* ---- FAQ ---- */
.faq-btn{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:16px;cursor:pointer;text-align:left;transition:all .3s;background:transparent;border:1px solid rgba(12,40,42,.09)}

/* ---- Referenz-/Webinar-Slider-Pfeile ---- */
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid rgba(12,40,42,.12);background:rgba(255,255,255,.9);backdrop-filter:blur(10px);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(12,40,42,.12);transition:transform .2s}
.slider-arrow:hover{transform:translateY(-50%) scale(1.08)}
/* ---- Referenz-Galerie: 3D-Bühne (schräg unten vorne -> schräg hinten rechts) ---- */
.ref-stage{position:relative;height:530px;perspective:1900px;perspective-origin:30% 52%;overflow:hidden}
.ref-world{position:absolute;left:12%;bottom:54px;width:0;height:0;transform-style:preserve-3d}
.ref-tile{position:absolute;left:0;bottom:0;width:230px;height:330px;overflow:hidden;box-shadow:0 30px 60px rgba(12,40,42,.16);backface-visibility:hidden;
  --rx:5deg;--ry:30deg;--rz:-5deg;
  transform:translate3d(var(--tx,0px),var(--ty,0px),var(--tz,0px)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(var(--sc,1));
  transition:transform .75s cubic-bezier(.16,.84,.44,1),opacity .55s ease}
.ref-tile:hover{--sc:1.05}
/* Startposition der Kette bereits ohne JS (verhindert Stapeln vor dem Script-Start).
   Schrittweiten identisch zu STEP_X/STEP_Y/STEP_Z/WAVE in js/main.js. */
.ref-tile:nth-child(1){--tx:0px;--ty:0px;--tz:0px}
.ref-tile:nth-child(2){--tx:190px;--ty:-18px;--tz:-165px}
.ref-tile:nth-child(3){--tx:380px;--ty:-128px;--tz:-330px}
.ref-tile:nth-child(4){--tx:570px;--ty:-146px;--tz:-495px}
.ref-tile:nth-child(5){--tx:760px;--ty:-256px;--tz:-660px}
.ref-tile:nth-child(6){--tx:950px;--ty:-274px;--tz:-825px}
.ref-tile:nth-child(7){--tx:1140px;--ty:-384px;--tz:-990px}
@media (prefers-reduced-motion:reduce){.ref-tile{transition:none}}
/* Flache Fallback-Reihe auf schmalen Viewports */
.ref-stage.is-flat{height:420px;perspective:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.ref-stage.is-flat .ref-world{position:static;display:flex;gap:20px;width:max-content;height:auto;padding:16px 24px 30px;transform-style:flat}
.ref-stage.is-flat .ref-tile{position:relative;flex:none;scroll-snap-align:center;opacity:1!important;transform:none!important}
/* Im flachen Modus wird nativ gewischt — Pfeile waeren funktionslos (gleicher Breakpoint wie isFlat() in main.js) */
@media (max-width:900px){#ref-prev,#ref-next{display:none}}

/* ---- Footer-Links ---- */
.foot-link{display:block;font-size:14.5px;color:#46605f;text-decoration:none;padding:6px 0;transition:color .2s,transform .2s}
.foot-link:hover{color:#097f87;transform:translateX(3px)}
.legal-link{color:#5a7375;text-decoration:none;transition:color .2s}
.legal-link:hover{color:#097f87}
.social-pill{padding:9px 16px;border-radius:100px;font-size:13px;font-weight:600;text-decoration:none;color:#0c5a60;background:rgba(9,127,135,.08);border:1px solid rgba(9,127,135,.14);transition:background .2s}
.social-pill:hover{background:rgba(9,127,135,.14)}

/* ============================================================
   SYSTEM-COCKPIT — Fullscreen-Dashboard (CoStar-Referenz)
   ============================================================ */
.cockpit{position:relative;width:100%;min-height:100vh;background:#e9e6e1;overflow:hidden;display:flex;flex-direction:column;padding:clamp(30px,4vh,54px) clamp(26px,4vw,64px) clamp(28px,3.6vh,50px);color:#131717}
/* zwei gestapelte Hintergrund-Ebenen -> Crossfade beim Systemwechsel */
.cockpit-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity .85s cubic-bezier(.16,.84,.44,1)}
.cockpit-bg.on{opacity:1}
.cockpit-veil{position:absolute;inset:0;transition:background .85s ease;
  background:linear-gradient(120deg,rgba(240,243,243,.55),rgba(240,243,243,.28) 55%,rgba(240,243,243,.4))}
/* großes Hintergrund-Visual rechts (weich in den Hintergrund geblendet) */
.cockpit-visual{position:absolute;top:0;right:0;width:min(62%,920px);height:min(78vh,720px);pointer-events:none;
  -webkit-mask-image:radial-gradient(115% 100% at 60% 42%,#000 46%,transparent 76%);
  mask-image:radial-gradient(115% 100% at 60% 42%,#000 46%,transparent 76%)}
.cockpit-visual svg{width:100%;height:100%}

/* Top-Chrome */
.cockpit-chrome{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:14px}
.cockpit-chrome .chrome-group{display:flex;align-items:center;gap:10px}
.chrome-sq{width:42px;height:42px;border-radius:13px;background:#f2f0ec;border:1px solid rgba(19,23,23,.06);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(19,23,23,.05)}
.chrome-circle{width:42px;height:42px;border-radius:50%;background:#f2f0ec;border:1px solid rgba(19,23,23,.06);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(19,23,23,.05)}
.chrome-pill-dark{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:100px;background:#0c1a1c;color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;box-shadow:0 10px 26px rgba(12,26,28,.28)}
.cockpit-brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;letter-spacing:-.01em;color:#131717}

/* Headline + KPI-Chips */
.cockpit-head{position:relative;z-index:3;margin-top:clamp(30px,5vh,62px);max-width:640px}
.cockpit-head h2{margin:0;font-size:clamp(38px,4.2vw,62px);line-height:1.02;letter-spacing:-.02em;font-weight:400;color:#131717}
.cockpit-head p{margin:14px 0 0;max-width:620px;font-size:15.5px;line-height:1.55;letter-spacing:0;color:#46605f;font-weight:400}
.cockpit-kpis{position:relative;z-index:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,215px));gap:16px;margin-top:clamp(24px,3.8vh,40px);max-width:660px}
.kpi-chip{padding:15px 17px;border-radius:16px;background:rgba(255,255,255,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.85);box-shadow:0 4px 16px rgba(19,23,23,.05)}
.kpi-chip .k-label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.04em;color:#7f8683;margin-bottom:8px}
.kpi-chip .k-label svg{flex:none}
.kpi-chip .k-value{font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.02em;color:#131717}

/* Floating-Glass-Karten über dem Visual */
.cockpit-float{position:absolute;z-index:4;border-radius:18px;background:rgba(255,255,255,.62);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border:1px solid rgba(255,255,255,.85);box-shadow:0 18px 44px rgba(19,23,23,.14)}
.cockpit-dose{right:clamp(20px,4vw,60px);top:clamp(120px,19vh,190px);width:264px;padding:20px 22px}
.cockpit-team{right:clamp(20px,4vw,60px);top:clamp(400px,55vh,520px);padding:16px 20px;display:flex;align-items:center;gap:12px}
.cockpit-spot{position:absolute;z-index:4;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center}
.cockpit-spot span{width:8px;height:8px;border-radius:50%;background:#097f87}
/* Hotspot mit Beschriftung (Hover/Fokus) */
.cockpit-spot{border:none;padding:0;cursor:pointer}
.cockpit-spot::after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(6px);white-space:nowrap;padding:8px 14px;border-radius:100px;background:rgba(12,26,28,.9);color:#fff;font-size:12px;font-weight:600;letter-spacing:-.01em;box-shadow:0 10px 24px rgba(12,26,28,.28);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s cubic-bezier(.16,.84,.44,1)}
.cockpit-spot:hover::after,.cockpit-spot:focus-visible::after,.cockpit-spot.on::after{opacity:1;transform:translateX(-50%) translateY(0)}
.cockpit-spot::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(9,127,135,.45);opacity:.75;animation:spotPulse 2.6s ease-out infinite}
@keyframes spotPulse{0%{transform:scale(.85);opacity:.75}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* Systemwahl (Szenario-Umschalter) */
.cockpit-switch{position:relative;z-index:5;display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,3.2vh,34px);max-width:900px}
.sys-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:100px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.01em;color:#3c4442;background:rgba(255,255,255,.7);border:1px solid rgba(19,23,23,.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .28s cubic-bezier(.16,.84,.44,1)}
.sys-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.92)}
.sys-btn .sys-num{font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;color:#097f87}
.sys-btn.on{background:#0c1a1c;color:#fff;border-color:transparent;box-shadow:0 10px 26px rgba(12,26,28,.26)}
.sys-btn.on .sys-num{color:#7fe6dd}

/* Chrome-Buttons + Tabs werden interaktiv */
.chrome-circle,.chrome-sq{cursor:pointer;transition:transform .2s ease,background .2s ease}
.chrome-circle:hover,.chrome-sq:hover{transform:scale(1.07);background:#fff}
.chrome-pill-dark{transition:background .3s ease}
.cockpit-tabs .tab{cursor:pointer;border:none;font-family:inherit;background:transparent;transition:all .28s cubic-bezier(.16,.84,.44,1)}
.cockpit-tabs .tab:hover:not(.on){color:#0c1a1c;background:rgba(255,255,255,.7)}

/* Sanfter Wechsel der Inhalte beim Umschalten */
.sys-fade{transition:opacity .3s ease,transform .3s cubic-bezier(.16,.84,.44,1)}
.sys-fade.is-out{opacity:0;transform:translateY(8px)}

/* Untere Reihe: Tabs + Stat-Karten */
.cockpit-bottom{position:relative;z-index:3;margin-top:auto;padding-top:clamp(110px,16vh,210px)}
.cockpit-tabs{display:inline-flex;align-items:center;gap:4px;padding:5px;border-radius:100px;background:rgba(255,255,255,.66);backdrop-filter:blur(10px);border:1px solid rgba(19,23,23,.05)}
.cockpit-tabs .tab{padding:10px 22px;border-radius:100px;font-size:13.5px;font-weight:500;color:#3c4442;cursor:default}
.cockpit-tabs .tab.on{background:#0c1a1c;color:#fff;font-weight:600;box-shadow:0 6px 18px rgba(12,26,28,.24)}
.cockpit-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:22px}
/* Feature-Karten der Produktansicht */
.sys-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-top:20px}
.feat-card{display:flex;flex-direction:column;gap:9px;padding:18px 19px 19px;border-radius:18px;background:rgba(255,255,255,.8);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.9);box-shadow:0 6px 22px rgba(19,23,23,.06);transition:transform .25s cubic-bezier(.16,.84,.44,1),box-shadow .25s}
.feat-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(19,23,23,.12)}
.feat-card .f-ico{width:30px;height:30px;border-radius:10px;background:rgba(9,127,135,.1);display:inline-flex;align-items:center;justify-content:center}
.feat-card .f-title{font-size:14px;font-weight:700;letter-spacing:-.01em;color:#131717;line-height:1.25}
.feat-card .f-desc{font-size:12.5px;line-height:1.5;color:#5b6664}
/* Produkt-Pills mit Kategorie */
.sys-btn .sys-cat{font-size:10.5px;font-weight:600;letter-spacing:.04em;color:#7f8683;padding-left:8px;border-left:1px solid rgba(19,23,23,.12)}
.sys-btn.on .sys-cat{color:rgba(255,255,255,.6);border-left-color:rgba(255,255,255,.25)}
.stat-card{padding:20px 22px 18px;border-radius:20px;background:#fbfaf8;border:1px solid rgba(19,23,23,.05);box-shadow:0 6px 22px rgba(19,23,23,.05);display:flex;flex-direction:column}
.stat-card .s-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.stat-card .s-title{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#131717}
.stat-card .s-badge{font-size:10.5px;font-weight:600;color:#7f8683;display:inline-flex;align-items:center;gap:5px}
.stat-card .s-badge .dot{width:6px;height:6px;border-radius:50%;background:#d4a447}
.stat-card .s-badge.good{color:#0e9b6c}
.stat-card .s-badge.good .dot{background:#0e9b6c}
.stat-card .s-value{font-size:clamp(26px,2.1vw,32px);font-weight:600;letter-spacing:-.02em;color:#131717}
.stat-card .s-sub{margin-top:6px;font-size:11.5px;color:#8b8f8c}
.stat-card svg.chart{width:100%;height:64px;margin-top:auto;display:block}

/* Kontakt-Karte im Cockpit */
.stat-contact{display:flex;flex-direction:column;gap:10px}
.stat-contact .avatar{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#0a5158,#13a8a0);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff}
.stat-contact .row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#3c4442}
.stat-contact .row svg{flex:none}
.stat-contact a{color:#131717;font-weight:600;text-decoration:none}
.stat-contact a:hover{color:#097f87}

/* hidden schlägt Layout-Displays (flex/grid) */
[hidden]{display:none!important}

/* ---- Scroll-Reveal Grundzustand (JS setzt Opacity) ---- */
[data-reveal]{will-change:opacity,transform}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .cockpit-stats{grid-template-columns:repeat(2,1fr)}
  .cockpit-visual{width:88%;opacity:.65}
  .grid-2{grid-template-columns:1fr!important}
  .web-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
}
@media (max-width:960px){
  .header-nav{display:none}
  .hero-grid,.finder-head,.process-grid,.faq-grid,.cta-grid,.foot-top,.trust-grid2{grid-template-columns:1fr!important}
  .dock{display:none}
  .ris-side{position:static!important;width:100%!important;margin-top:20px}
  .ris-inner{min-height:0}
  .cockpit-dose{top:auto;bottom:46%}
  .cockpit-team{display:none}
  section{padding-left:22px!important;padding-right:22px!important}
}
@media (max-width:640px){
  .cockpit-stats{grid-template-columns:1fr}
  .cockpit{min-height:0}
  .cockpit-bottom{padding-top:60px}
  .cockpit-dose{position:static;width:100%;margin-top:24px}
  .foot-links{grid-template-columns:1fr!important}
  .showcase-grid{grid-template-columns:1fr!important}
}