/* ============================================================
   SCHRIFTEN — vom Kunden lizenziert
   Moldiv ist als WOFF2 direkt eingebettet, reist also mit der Datei.
   DIN Pro erwartet die Dateien daneben; bis dahin greift der Fallback.
   ============================================================ */
@font-face{font-family:"Moldiv";font-style:normal;font-weight:400;font-display:swap;
  src:url(https://143418085.fs1.hubspotusercontent-eu1.net/hubfs/143418085/mocci-website/moldiv-400.woff2) format("woff2")}
@font-face{font-family:"DINPro";font-style:normal;font-weight:400;font-display:swap;
  src:url(https://143418085.fs1.hubspotusercontent-eu1.net/hubfs/143418085/mocci-website/dinpro-400.woff2) format("woff2")}
@font-face{font-family:"DINPro";font-style:normal;font-weight:500;font-display:swap;
  src:url(https://143418085.fs1.hubspotusercontent-eu1.net/hubfs/143418085/mocci-website/dinpro-500.woff2) format("woff2")}

/* ============================================================
   TOKENS — 1:1 aus der mocci Brand Capsule
   ============================================================ */
:root{
  --deep:#080823; --ink:#080823; --white:#FFFFFF;
  --ocean:#0066FF;
  /* Ton der Musterkacheln. Muss hier stehen, weil die Kachel in einem
     eigenen defs-SVG liegt: currentColor loest sich dort gegen die Farbe
     dieses SVG auf, nicht gegen die Sektion, die das Muster benutzt. */
  --pattern-ton:#0066FF; --ocean-on-dark:#3385FF; --ocean-on-light:#0062F6;
  --ocean-muted:#80B2FF; --ocean-surface:#CCE0FF; --ocean-whisper:#EDF4FF;
    /* Figma onOcean: Flaeche und Kontur auf Ocean-Grund */
    --on-ocean-hairline:#297EFF;
    --on-ocean-chip:#4D94FF;
  --surface:#F3F3F4; --subtle:#E6E6E9; --border:#CECED3;
  --muted:#848491; --secondary:#5E5E70;
  --on-dark-muted:#9C9CA7; --on-dark-quiet:#828290;
  --on-dark-border:#3E3E53; --on-dark-hairline:#303046;
  --on-dark-surface:#14142E; --on-dark-glass:#1E1E3A; --ocean-glow:#071035;
  --spring:#80C000; --sun:#FFD500; --coral:#FF5A5A;
  /* Moldiv und DIN Pro sind vom Kunden lizenziert und als WOFF2 eingebettet. */
  --display:"Moldiv",system-ui,sans-serif;
  --sans:"DINPro",system-ui,sans-serif;
  --gutter:80px;            /* Sektions-Innenabstand links/rechts */
  --content:1280px;         /* 1440 minus 2x80 */
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--deep);font-family:var(--sans);-webkit-font-smoothing:antialiased;
  /* clip statt hidden: hidden macht den Body zum Scrollcontainer und schneidet
     position:fixed-Elemente wie die Sticky-Leiste an */
  overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}

/* ============================================================
   TEXTSTILE — exakt die 25 Stile der Library
   ============================================================ */
.t-dXXL{font:400 104px/.88 var(--display);letter-spacing:-.02em}
.t-dXL {font:400 80px/.92 var(--display);letter-spacing:-.01em}
.t-dL  {font:400 64px/1.15 var(--display)}   /* Figma text/display/L = 64 / 115 %.
   Vorher .92: bei Moldiv (Ascender .80 / Descender .20) ueberlappen sich die
   Zeilen um .08em, Unterlaengen und Versalien der Folgezeile stossen zusammen. */
.t-dXS {font:400 24px/1.10 var(--display)}
.t-h1  {font:400 48px/1.15 var(--display)}
.t-h2  {font:400 36px/1.25 var(--display)}
.t-h3  {font:500 28px/1.30 var(--sans)}
.t-h4  {font:500 22px/1.30 var(--sans)}
.t-bodyLarge{font:400 18px/1.60 var(--sans)}
.t-bodyLargeStrong{font:500 18px/1.60 var(--sans)}
.t-body{font:400 16px/1.65 var(--sans)}
.t-bodyStrong{font:500 16px/1.65 var(--sans)}
.t-small{font:400 14px/1.60 var(--sans)}
.t-smallStrong{font:500 14px/1.60 var(--sans)}
.t-label{font:500 14px/1.40 var(--sans)}
.t-caption{font:400 12px/1.45 var(--sans)}
.t-overline{font:500 12px/1.50 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.t-overlineSmall{font:500 11px/1.50 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.t-button{font:500 16px/1 var(--sans)}
/* Farb-Utilities, benannt wie die Tokens */
.c-white{color:var(--white)} .c-ink{color:var(--ink)}
.c-oceanOnDark{color:var(--ocean-on-dark)} .c-oceanSurface{color:var(--ocean-surface)}
.c-oceanOnLight{color:var(--ocean-on-light)}
.c-ocean{color:var(--ocean)} .c-onDarkMuted{color:var(--on-dark-muted)}
.c-onDarkQuiet{color:var(--on-dark-quiet)} .c-secondary{color:var(--secondary)}
.c-muted{color:var(--muted)}
.c-subtle{color:var(--subtle)} .c-surface{color:var(--surface)}

/* ============================================================
   LAYOUT — Auto-Layout als Flexbox
   ============================================================ */
.sec{position:relative;padding:0 var(--gutter)}
.sec>.inner{position:relative;max-width:var(--content);margin:0 auto;z-index:2}
.bg-deep{background:var(--deep);color:var(--white)}
.bg-white{background:var(--white);color:var(--ink)}
.bg-surface{background:var(--surface);color:var(--ink)}
.bg-ocean{background:var(--ocean);color:var(--white)}
.bg-whisper{background:var(--ocean-whisper);color:var(--ink)}
.bg-onDarkSurface{background:var(--on-dark-surface);color:var(--white)}
.col{display:flex;flex-direction:column}
.row{display:flex;flex-direction:row}
.ac{align-items:center} .as{align-items:flex-start} .jc{justify-content:center}
.jsb{justify-content:space-between} .wrap{flex-wrap:wrap}
.fill{flex:1 1 0;min-width:0}
.hairline-top{border-top:1px solid var(--border)}
.hairline-top-dark{border-top:1px solid var(--on-dark-border)}

/* Dekorationsebene: 1440 breit, zentriert, von der Sektion beschnitten.
   Dadurch bleiben absolute Designelemente auf ihren Figma-Koordinaten. */
.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:paint}
/* Deko laeuft auf volle Modulbreite, nicht auf feste 1440 px */
.deco-in{position:absolute;left:0;top:0;width:100%;height:100%}
.deco-in>*{position:absolute}
/* Pattern: nahtlose SVG-Kachel, keine Bildkanten mehr */
svg.pattern{color:var(--ocean);
  /* Im Layout ist das Muster nicht gleichmaessig: es laeuft nach rechts oben aus */
  -webkit-mask-image:linear-gradient(to top right,#000 0%,rgba(0,0,0,.5) 34%,transparent 66%);
  mask-image:linear-gradient(to top right,#000 0%,rgba(0,0,0,.5) 34%,transparent 66%)}
.bg-white svg.pattern,.bg-whisper svg.pattern{color:var(--ocean-on-light)}

/* ============================================================
   EYEBROW
   ============================================================ */
.eyebrow{display:flex;align-items:flex-start;gap:14px}
/* Der Balken sitzt auf der optischen Mitte der ERSTEN Zeile, nicht mittig
   ueber zwei Zeilen. Zeilenhoehe 18px, Balken 10px hoch: Versatz 4px. */
.eyebrow .rule{margin-top:4px}
.eyebrow .rule{width:48px;height:10px;flex:none;background:var(--ocean)}
.eyebrow .rule.on-dark{background:var(--ocean-on-dark)}

/* ============================================================
   BUTTON — Component Button, Radius 0, Chevron rechts
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 24px;
  border:2px solid transparent;text-decoration:none;white-space:nowrap;cursor:pointer;
  font:500 16px/1 var(--sans);transition:background .18s,color .18s,border-color .18s}
.btn .chev{width:18px;height:18px;flex:none}
.btn--primary{background:var(--ocean);color:var(--white)}
.btn--primary:hover{background:var(--white);color:var(--deep);border-color:var(--white)}
.btn--secondary{background:var(--deep);color:var(--white)}
.btn--secondary:hover{background:var(--ocean)}
.btn--outline{background:transparent;color:var(--ocean-on-light);border-color:var(--ocean-on-light)}
.btn--outline:hover{background:var(--ocean);color:var(--white);border-color:var(--ocean)}
.btn--ondark{background:transparent;color:var(--white);border-color:var(--white)}
.btn--ondark:hover{background:var(--white);color:var(--deep)}
.textlink{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font:500 16px/1 var(--sans);color:var(--ocean-on-dark)}
.textlink.on-light{color:var(--ocean-on-light)}
.textlink:hover{text-decoration:none}
.textlink .chev{width:16px;height:16px;transition:transform .22s cubic-bezier(.2,0,0,1)}
.textlink:hover .chev{transform:translateX(5px)}

/* ============================================================
   HEADER — Component SiteHeader, immer dunkel, sticky
   ============================================================ */
.site-header{position:sticky;top:0;z-index:90;background:var(--deep);
  border-bottom:1px solid var(--on-dark-hairline)}
.site-header{position:sticky}
/* Figma SiteHeader v2 / breakpoint=Desktop: Hoehe 88, Polster 14/64,
   Reihenabstand 24, nav mit 48 links und 32 zwischen den Punkten. */
.site-header .bar{position:relative;max-width:1440px;margin:0 auto;padding:14px 64px;
  min-height:88px;display:flex;align-items:center;gap:24px}
/* Logo als Vektor aus der Brand Capsule, Lockup lang */
.brandlink{flex:none;display:block;line-height:0;text-decoration:none}
/* viewBox exakt auf die Tinte gerechnet: Wortmarke x 40.53..270.23,
   Signet x 279.49..311.40, y 39.80..104.27. Verhaeltnis 4.201, kein Schutzraum. */
svg.brand{display:block;height:28px;width:auto;flex:none;align-self:flex-start}
svg.brand .mk{fill:var(--white)}
svg.brand .sg{fill:var(--ocean-on-dark)}
svg.brand--footer{height:36px;margin-bottom:10px}
.mainnav{flex:1;display:flex;align-items:center;gap:32px;padding-left:48px}
.navitem{position:relative}
.navitem>a{display:inline-flex;align-items:center;gap:6px;padding:10px 0;
  font:500 14px/1.4 var(--sans);color:var(--white);text-decoration:none}
.navitem>a .chev{width:14px;height:14px}
.navitem>a:hover{color:var(--ocean-on-dark)}
.navitem.is-active>a{color:var(--ocean-on-dark)}
.navitem.is-active>a::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--ocean-on-dark)}
.header-cta{flex:none;display:flex;align-items:center;gap:12px}
.burger{width:24px;height:24px;margin-left:28px;border:0;background:none;cursor:pointer;
  display:flex;gap:5px;flex-direction:column;justify-content:center}
.burger span{display:block;height:2px;background:var(--white)}
#navtoggle,#burgertoggle{display:none}
/* Burger-Panel: Corporate-Themen, Component BurgerPanel */
.burgerpanel{position:absolute;top:100%;left:0;right:0;display:none;z-index:94;
  background:var(--deep);border-bottom:1px solid var(--on-dark-border);
  box-shadow:0 12px 32px rgba(8,8,35,.5)}
#burgertoggle:checked ~ .burgerpanel{display:block}
.burgerpanel>.inner{max-width:1440px;margin:0 auto;padding:28px var(--gutter) 36px}
.burgerpanel .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 28px;margin-top:16px}
.burgerpanel a{display:flex;align-items:center;gap:14px;padding:12px 0;text-decoration:none;
  border-top:1px solid var(--on-dark-hairline);transition:color .18s}
.burgerpanel a b{display:block;font:400 16px/1.4 var(--sans);color:var(--white)}
.burgerpanel a small{display:block;margin-top:3px;font:400 12px/1.45 var(--sans);color:var(--on-dark-muted)}
.burgerpanel a .chev{width:16px;height:16px;margin-left:auto;flex:none;color:var(--on-dark-muted);
  opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.burgerpanel a:hover b{color:var(--ocean-on-dark)}
.burgerpanel a:hover .chev{opacity:1;transform:translateX(0);color:var(--ocean-on-dark)}
.burgerpanel a.shop{grid-column:1/-1;background:var(--on-dark-surface);padding:14px 16px;margin-top:12px;
  border-top:0}
.burgerpanel a.shop b{color:var(--ocean-on-dark)}
/* Flyout — Component NavFlyout */
.flyout{position:absolute;top:100%;left:0;min-width:392px;padding:12px 0;display:none;
  background:var(--deep);border:1px solid var(--on-dark-border);
  box-shadow:0 8px 24px rgba(8,8,35,.45);z-index:95}
.navitem:hover .flyout,.navitem:focus-within .flyout{display:block}
.flyout a{display:flex;align-items:center;gap:16px;padding:14px 16px;text-decoration:none}
/* Figma NavFlyoutItem state=Hover: Flaeche onDark/surface, Titel und Chevron
   auf oceanOnDark, die Subline bleibt onDarkMuted. */
.flyout a:hover{background:var(--on-dark-surface)}
.flyout a:hover b{color:var(--ocean-on-dark)}
.flyout a:hover .chev{color:var(--ocean-on-dark);transform:translateX(3px)}
.flyout a:hover small{color:var(--on-dark-muted)}
.flyout b{display:block;font:500 16px/1.3 var(--sans);color:var(--white)}
.flyout small{display:block;margin-top:3px;font:400 12px/1.45 var(--sans);color:var(--on-dark-muted)}
.flyout .chev{width:18px;height:18px;margin-left:auto;flex:none;color:var(--on-dark-muted);
  transition:color .18s ease,transform .18s ease}

/* ============================================================
   01 HERO — pad 110 / 72, bg deep
   ============================================================ */
.hero{padding-top:110px;padding-bottom:72px}
.hero .pattern{left:-300px;top:-300px;width:2200px;height:2000px;opacity:.30}
.hero .glow{left:220px;top:171px;width:1000px;height:600px;border-radius:50%;
  background:#0064FF;opacity:.30;filter:blur(150px)}
.hero .shape{display:none}
.hero h1{margin:40px 0 0}
.hero h1 span{text-shadow:0 0 20px rgba(8,8,35,.5)}
.hero h1 span{display:block}
.hero .lower{margin-top:44px;display:flex;gap:56px}
.hero .copy{width:500px;max-width:100%;display:flex;flex-direction:column;gap:26px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .heroimg{position:absolute;left:760px;top:0;width:600px;height:462px;z-index:1;
  clip-path:url(#mformclip);-webkit-clip-path:url(#mformclip);overflow:hidden}
.hero .heroimg video{width:100%;height:100%;object-fit:cover;display:block}
.hero h1,.hero .lower,.hero .kpi-strip,.hero .logowall,.hero .eyebrow{position:relative;z-index:2}
.hero .kpi-strip{margin-top:56px;padding-top:30px;border-top:1px solid var(--on-dark-border);
  display:flex}
.hero .kpi{flex:1 1 0;min-width:0;padding-right:24px;display:flex;flex-direction:column;gap:8px}
.hero .logowall{padding-top:56px}
.hero .logowall .panel{margin-top:20px;background:var(--white);padding:20px 24px;flex-wrap:nowrap;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.hero .logowall .wallhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.hero .logowall .swipe{display:none;align-items:center;gap:6px;flex:none;
  font:500 13px/1 var(--sans);color:var(--ocean-on-dark)}
.hero .logowall .swipe .chev{width:14px;height:14px}
.hero .logowall /* Figma: Logo-Instanz 100 x 32 in einem 1280 breiten Panel, neun Marken.
   Die Bilder liegen fest im Markup, daher hier contain statt Sprite-Ausschnitt. */
.lg{width:100px;height:32px;background-repeat:no-repeat;background-size:contain;
  background-position:center;flex:0 0 auto}

/* ============================================================
   02 DAS MOCCI SYSTEM — pad 96/96, bg white
   ============================================================ */
.system{padding-top:56px;padding-bottom:56px}
  /* Mehr Scrollweg fuer das gepinnte Modul, damit der dritte Schritt bis
     zum Ende gelesen werden kann, bevor die Seite weiterlaeuft. */
  .system .stage{min-height:0}
  @media (min-width:901px){ .system{padding-bottom:180px} }
/* Pinning: die Buehne bleibt stehen, bis alle drei Schritte durch sind */
.system .pinwrap{position:relative;height:230vh;margin-top:24px}
.system .pin{position:sticky;top:96px;display:flex;flex-direction:column;
  gap:20px;padding:0}
.system .pin>.eyebrow{margin-bottom:0}
/* Rad an die Resthöhe binden, damit Kopf und Ergebniszeile im Bild bleiben */
.system .pin /* Figma: Radrahmen 470 px. Vorher an die Fensterhoehe gekoppelt, dadurch
     live nur ~230 px — die 16-px-Labels liefen aus der Felge heraus. */
  .wheelwrap{width:470px;height:470px}
/* Die Hoehe der Textspalte setzt das Script aus dem hoechsten Schritt. */
.system .pin .wsteps{min-height:0}
.system .pin>.stage{width:100%;margin-top:52px}
.system .pin{isolation:auto}
.system .wheelglow{position:absolute;left:50%;top:50%;width:1150px;height:680px;
  margin:-340px 0 0 -575px;border-radius:50%;background:#0064FF;opacity:.13;
  filter:blur(150px);pointer-events:none;z-index:0}
.system .head{width:820px;max-width:100%;display:flex;flex-direction:column;gap:14px;margin-top:26px}
.system .stage{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:88px}
.wheelwrap{position:relative;width:470px;height:470px;flex:none}
.wheelwrap svg{width:100%;height:100%;display:block;transform-origin:50% 50%}
.wheelwrap .rim{fill:none;stroke:var(--ink);stroke-width:1.047}
.wheelwrap /* Nur der aktive Fluegel ist voll Ocean, die beiden anderen hellblau.
   Der Uebergang laeuft weich und etwas laenger als die Raddrehung. */
.sector{fill:var(--ocean-surface);transition:fill .7s cubic-bezier(.4,0,.2,1)}
.wheelwrap .sector.is-on{fill:var(--ocean)}
.wheelwrap .hub{position:absolute;left:50%;top:50%;width:61px;height:61px;
  margin:-30.5px 0 0 -30.5px;border-radius:50%;background:var(--ink);z-index:2}
.wheelwrap .axle{position:absolute;left:50%;top:50%;width:15px;height:15px;
  margin:-7.5px 0 0 -7.5px;border-radius:50%;background:var(--white);z-index:3}
.wheelwrap .labels{position:absolute;inset:0}
.wheelwrap .labels span{position:absolute;left:50%;top:50%;white-space:nowrap;
  font:400 24px/1.15 var(--display);color:var(--secondary);transition:color .45s ease;
  transform:translate(-50%,-50%)}
.wheelwrap .labels span.is-on{color:var(--white)}
.wsteps{position:relative;width:520px;flex:none;min-height:392px;padding-bottom:8px}
.wstep{position:absolute;inset:0;opacity:0;pointer-events:none;
  /* Nur weiches Erscheinen, keine senkrechte Bewegung */
  transition:opacity .5s cubic-bezier(.2,0,0,1)}
.wstep.is-on{opacity:1;pointer-events:auto}
.steprail{display:flex;gap:8px;align-items:center;margin-bottom:28px}
.steprail i{display:block;width:16px;height:3px;background:var(--border);transition:all .45s ease}
.steprail i.is-on{width:44px;background:var(--ocean-on-light)}
.bullets{list-style:none;display:flex;flex-direction:column;margin-top:22px}
.bullets li{display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:start;padding:9px 0}
.bullets li::before{content:"";display:block;height:2px;margin-top:11.8px;background:var(--ocean-on-light)}
.system .outcome{margin-top:52px;padding-top:32px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:24px}
.system .outcome>span:first-child{flex:none;white-space:nowrap}
.system .outcome>p{flex:1 1 auto;min-width:0}

/* ============================================================
   03 ANTRIEB — pad 100/96, bg deep
   ============================================================ */
.antrieb{padding-top:100px;padding-bottom:96px}
/* v10-Geometrie der hellen Sektionen. Die Gradient-Ausblendung sitzt auf
     .pattern und wirkt ueber die Elementbox — deshalb muss die Box zur
     Sektionshoehe passen, sonst liegt der sichtbare Teil komplett in der
     deckenden Zone und das Muster wirkt flach. */
  /* Volle Modulbreite unabhaengig vom Viewport, Ton oceanSurface — auf der
     oceanWhisper-Flaeche des Moduls waere oceanWhisper selbst unsichtbar. */
  /* Volle Modulbreite unabhaengig vom Viewport. Ton wie in Figma: Ocean-Tint
     mit niedriger Deckkraft, was auf der Flaeche als oceanWhisper liest. */
  /* Grund oceanWhisper #EDF4FF, Muster Ocean #0066FF mit 5 % Deckkraft.
     Groesster Kanalunterschied ist Rot: 237 x 0,05 = 11,9 von 255, also
     4,6 Prozent — bleibt unter der Grenze von 5 %. */
  /* Grund ist oceanWhisper #EDF4FF, das Muster ein Ocean-Ton mit 5 %
     Deckkraft: ergibt rund (225,237,255), also gut 5 % dunkler. */
  .sec.antrieb svg.pattern{left:0;top:0;width:100%;height:100%;opacity:.05}
.antrieb .head{width:880px;max-width:100%;display:flex;flex-direction:column;gap:16px;margin-top:26px}
.antrieb .pinwrap{position:relative;margin-top:40px}
.antrieb .pin{display:flex;align-items:center}
.bikewrap{position:relative;width:1280px;max-width:100%;height:700px}
.bikeglow{display:none;position:absolute;left:130px;top:130px;width:1020px;height:500px;border-radius:50%;
  background:var(--ocean);opacity:.22;filter:blur(130px)}
.bikeimg{position:absolute;left:0;top:0;width:1280px;height:700px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  /* Freigestelltes Bike als transparentes WebP, direkt eingebettet.
     Der frueher noetige screen-Kniff gegen den dunklen Grund entfaellt. */
  background-image:url(https://143418085.fs1.hubspotusercontent-eu1.net/hubfs/143418085/mocci-website/img-565c9cab4b.webp)}
.hs{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:var(--white);border:2px solid var(--ocean-on-light);z-index:3;
  cursor:pointer;transition:all .45s cubic-bezier(.2,0,0,1)}
.hs:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.hs .bar{position:absolute;left:50%;top:50%;background:var(--ocean-on-light);
  transition:all .45s cubic-bezier(.2,0,0,1)}
.hs .bar.h{width:16px;height:2px;margin:-1px 0 0 -8px}
.hs .bar.v{width:2px;height:16px;margin:-8px 0 0 -1px}
.hs.is-on{width:44px;height:44px;margin:-22px 0 0 -22px;background:var(--ocean);
  border-color:var(--ocean);box-shadow:0 0 26px 2px rgba(0,102,255,.55)}
.hs.is-on .bar{background:var(--white)}
.hs.is-on .bar.h{width:18px;margin:-1px 0 0 -9px}
.hs.is-on .bar.v{height:18px;margin:-9px 0 0 -1px}
.hs .ring{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  border:2px solid var(--ocean);border-radius:50%;opacity:0;
  animation:radiate 2.4s cubic-bezier(.2,0,0,1) infinite}
.hs .ring:nth-of-type(2){animation-delay:1.2s}
/* Hover: Ocean-Flaeche mit weissem Kreuz, wie im aktiven Zustand */
.hs:hover{background:var(--ocean);border-color:var(--ocean);
  box-shadow:0 0 26px 2px rgba(0,102,255,.45)}
.hs:hover .bar{background:var(--white)}
@keyframes radiate{0%{transform:scale(.75);opacity:.8}70%{opacity:.1}100%{transform:scale(1.95);opacity:0}}
.glass{position:absolute;width:400px;padding:24px;z-index:4;pointer-events:none;
  /* Glass: Figma hat auf der Kachel einen Background-Blur mit Radius 28, der
     hinter der deckend weissen Fuellung aber wirkungslos bleibt. Damit der
     Effekt sichtbar wird, laeuft die Flaeche hier leicht durchscheinend. */
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);backdrop-filter:blur(28px) saturate(1.4);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 16px 32px rgba(8,8,35,.10),0 2px 6px rgba(8,8,35,.06),
             inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.glass.is-on{opacity:1;transform:none}
.glass .top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.glass .pill{background:var(--ocean);color:var(--white);padding:6px 12px}
.glass .lab{margin-left:auto;color:var(--secondary)}
.glass .body{display:grid;grid-template-columns:78px 1fr;gap:18px;align-items:start}
.glass .det{width:78px;height:78px;border:1px solid var(--border);background-repeat:no-repeat}
.glass h4{margin:0 0 8px;white-space:pre-line;color:var(--ink);text-shadow:none}
.glass p{margin:0;color:var(--secondary);text-shadow:none}
.bikerail{display:none}
.bikerail i{display:block;width:14px;height:3px;background:var(--ocean-surface);transition:all .4s ease}
.bikerail i.is-on{width:40px;background:var(--ocean)}
.antrieb .ctarow{margin-top:36px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   04 LÖSUNGEN — pad 130/140, bg white, Signet-Deko 954px
   ============================================================ */
.loesungen{padding-top:130px;padding-bottom:140px}
/* Figma: Signet 954 px, Fuellung oceanWhisper #EDF4FF */
  /* Figma: Signet 954 px bei x 648 in einer 1440 breiten Sektion. Seit die
     Deko-Ebene auf volle Breite laeuft, muss die Position vom zentrierten
     Inhalt aus gerechnet werden: 648 - 720 = -72 ab Mitte. */
  .loesungen .signet{left:50%;margin-left:-72px;top:123px;width:954px;height:954px;
    opacity:1;fill:var(--ocean-whisper);color:var(--ocean-whisper)}
.loesungen .head{width:780px;max-width:100%;display:flex;flex-direction:column;gap:18px;margin-top:26px}
.branchen{margin-top:40px;display:flex;gap:26px;align-items:stretch}
  /* Figma: Karte 409x813, Reihe 933 — der Versatz 0/60/120 wird unten
     ausgeglichen, damit alle drei Karten exakt gleich hoch bleiben. */
  .branchen>.offset{display:flex;flex-direction:column}
  .branchen>.offset>.card{flex:1 1 auto}
  .branchen>.offset:nth-child(1){padding-bottom:120px}
  /* Link unten buendig: der Textkoerper dehnt sich, der Link wird gedrueckt. */
  .card>.cbody{flex:1 1 auto}
  .card>.cbody>.link,.card>.cbody>.rows+*{margin-top:auto}
.branchen>.offset{flex:1 1 0;min-width:0}
.branchen>.offset:nth-child(2){padding-top:60px;padding-bottom:60px}
.branchen>.offset:nth-child(3){padding-top:120px}
.card{background:var(--white);border:1px solid var(--border);display:flex;
  flex-direction:column;gap:20px;padding-bottom:30px}
.card .media{width:100%;aspect-ratio:409/240;background-repeat:no-repeat;
  background-position:center;background-size:cover;background-color:var(--subtle)}
.card .cbody{padding:0 30px;display:flex;flex-direction:column}
.card .rows{margin:22px 0 18px}
.card .rows>div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;
  border-top:1px solid var(--border)}

/* ============================================================
   05 ZAHLEN — pad 120/110, bg deep
   ============================================================ */
.zahlen{padding-top:120px;padding-bottom:110px}
.zahlen .pattern{left:-300px;top:-300px;width:2200px;height:1700px;opacity:.26}
.zahlen .bignr{position:absolute;left:141px;bottom:100%;color:#0C0C64;z-index:0;
  display:flex;flex-direction:row;align-items:baseline;gap:6px;
  width:auto;padding:0;border:0;
  pointer-events:none;white-space:nowrap;
  font-size:255.49px;
  /* display/XXL hat Zeilenhoehe 88 %. Moldiv: Ascender .80, Descender .20 bei 1000 upm.
     Grundlinie liegt damit .74em unter der Boxoberkante, also .14em ueber der Unterkante.
     Genau um diesen Betrag nach unten schieben, dann sitzt die Schriftunterlinie auf der Haarlinie. */
  line-height:.88;
  margin-bottom:-.14em}
.kpi-grid>div{position:relative;z-index:1}
.zahlen .bignr span{font:400 255.49px/.88 var(--display);letter-spacing:-.02em}
.zahlen .bignr i{font:400 53.37px/.88 var(--display);font-style:normal}
.zahlen .head{width:800px;max-width:100%;display:flex;flex-direction:column;gap:18px;margin-top:26px}
.zahlen .row{margin-top:40px;display:flex;gap:40px;align-items:flex-start}
.uptime{width:560px;flex:none;background:var(--ocean);padding:34px;
  display:flex;flex-direction:column;gap:12px}
.uptime .chart{width:100%;height:120px;background:var(--ocean-on-dark);
  border:1px dashed var(--white)}
.uptime .weeks{display:flex;justify-content:space-between}
.kpi-wrap{flex:1 1 0;min-width:0;position:relative}
.kpi-grid{width:100%;display:flex;flex-wrap:wrap}
.kpi-grid>div{width:50%;padding:22px 20px 22px 0;border-top:1px solid var(--on-dark-border);
  display:flex;flex-direction:column;gap:6px}


/* ============================================================
   06 KUNDENSTIMME — pad 130/140, bg oceanWhisper, weißer Glow
   ============================================================ */
.stimme{padding-top:130px;padding-bottom:140px}
.stimme>.inner{position:relative}
.stimme /* Figma zitat-signet: 138,8 x 85 bei x 157 / y -84 */
/* Figma zitat-signet 138,8 x 85; 20 px tiefer, damit es das Bild ueberlappt */
.quotemark{position:absolute;left:157px;top:-64px;width:138.8px;height:85px;z-index:5;pointer-events:none}
.stimme .pattern{left:-300px;top:-300px;width:2200px;height:1600px;opacity:.26;color:var(--ocean)}
.stimme .glow{left:222px;top:89px;width:996px;height:589px;border-radius:50%;
  background:var(--ocean);opacity:.30;filter:blur(150px)}
.stimme .zitat{display:flex;gap:64px;align-items:flex-start}
/* Der Eyebrow steht im Markup vor dem Bild, damit die Mobile-Reihenfolge stimmt.
   Am Desktop wird er auf die Textspalte eingerueckt: Bildbreite plus Spaltenabstand. */
.stimme /* Das Eyebrow sitzt jetzt in der Textspalte jedes Slides und wandert damit
   beim Wechsel mit. Der fruehere Versatz von 384 px entfaellt. */
.stimme-eyebrow{margin-left:0;margin-bottom:26px}
.stimme .media{width:320px;flex:none;position:relative}
.stimme .portrait{width:320px;height:auto;aspect-ratio:152.83/166.67;display:block}
.stimme .txt{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.stimme .person{display:flex;flex-direction:column;gap:4px;margin-top:32px}
.stimme .case-kpi{margin-top:36px;padding-top:28px;border-top:1px solid var(--on-dark-border);display:flex}
.stimme .case-kpi>div{flex:1 1 0;min-width:0;padding-right:24px;
  display:flex;flex-direction:column;gap:6px}
.stimme .link{margin-top:30px}
/* Figma: TextLink OnDark, also weiss */
.stimme .link .textlink{color:var(--white)}

/* ============================================================
   07 EINSPARPOTENZIAL — pad 130/130, bg ocean, Vektor-Deko
   ============================================================ */
.teaser{padding-top:130px;padding-bottom:130px}
@media (max-width:900px){
  }
.teaser .row{display:flex;gap:72px;align-items:center}
.teaser .txt{width:540px;flex:none;max-width:100%;display:flex;flex-direction:column}
.teaser .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
/* Laptop — Component LaptopMockup */
.laptop{flex:1 1 0;min-width:0;position:relative;max-width:688px;margin-left:auto}
/* Markenzeichen mittig hinter dem Laptop, an das Geraet gebunden statt an
   absolute Koordinaten. Dadurch sitzt es in jeder Breite zentriert. */
.laptop .lshape{position:absolute;left:50%;top:50%;width:74.9%;
  aspect-ratio:152.83/166.67;
  /* Aus Figma gerechnet: Form 515 zu Laptop 688 = 74,9 %. Senkrecht zentriert,
     waagerecht um 134px nach rechts versetzt, das sind 26 % der Formbreite. */
  transform:translate(calc(-50% + 26%),-50%);
  z-index:0;pointer-events:none;opacity:.55}
.laptop .lid,.laptop .hinge,.laptop .base,.laptop .lglow{position:relative;z-index:1}
.laptop /* Zarter blauer Schein hinter dem Laptop. Vorher Navy auf Ocean-Grund —
   auf der jetzt weissen Flaeche wirkte das als grauer Schatten. */
.lglow{position:absolute;left:-8%;top:6%;width:116%;height:104%;border-radius:50%;
  /* transparent ist Schwarz mit Alpha 0 — die Interpolation lief dadurch
     ueber Grautoene und der Schein wirkte grau. Endfarbe explizit Ocean
     mit Alpha 0. */
  background:radial-gradient(58% 58% at 50% 52%,rgba(0,102,255,.85) 0%,rgba(0,102,255,.45) 52%,rgba(0,102,255,0) 100%);
  opacity:.34;filter:blur(72px)}
.laptop .lid{position:relative;background:var(--on-dark-border);border-radius:12px;padding:12px;
  box-shadow:0 24px 48px rgba(8,8,35,.45)}
.laptop .bezel{background:var(--deep);border-radius:8px;padding:10px}
.laptop .screen{position:relative;aspect-ratio:592/340;background:var(--on-dark-surface);
  border-radius:4px;overflow:hidden}
.laptop .sbar{height:34px;background:var(--deep);display:flex;align-items:center;
  padding:0 16px;gap:8px}
.laptop .sbar .dots{margin-left:auto;display:flex;gap:6px}
.laptop .sbar i{width:6px;height:6px;border-radius:50%;background:var(--on-dark-border);display:block}
.laptop .sbody{display:grid;grid-template-columns:1fr 1.4fr;gap:18px;padding:18px}
.laptop .fld{margin-bottom:14px}
.laptop .fld b{display:block;margin-top:5px;padding:7px 10px;background:var(--deep);
  border:1px solid var(--on-dark-border);color:var(--white)}
.laptop .res{background:var(--ocean);padding:14px}
.laptop .res .rn{font:400 44px/1 var(--display);color:var(--white);margin:8px 0}
.laptop .sov{position:absolute;inset:0;background:rgba(8,8,35,.86);
  display:grid;place-content:center;text-align:center;gap:6px}
.laptop .hinge{width:78%;height:10px;margin:0 auto;background:var(--on-dark-quiet);border-radius:4px}
.laptop .base{position:relative;height:26px;margin:0 -5%;background:var(--on-dark-border);border-radius:8px;
  box-shadow:0 14px 30px rgba(8,8,35,.4)}
.laptop .base::after{content:"";position:absolute;left:50%;top:8px;width:120px;height:6px;
  margin-left:-60px;background:var(--deep);border-radius:3px}

/* ============================================================
   08 SERVICE — pad 130/140, bg white
   ============================================================ */
.service{padding-top:130px;padding-bottom:140px}
.service .head{width:820px;max-width:100%;display:flex;flex-direction:column;gap:18px;margin-top:26px}
.prozess{margin-top:40px;display:flex;gap:24px;align-items:flex-start}
.prozess>div{flex:1 1 0;min-width:0;padding:26px 16px 30px 0;border-top:1px solid var(--ocean)}
.prozess .num{font:400 64px/.92 var(--display);color:transparent;
  -webkit-text-stroke:1.5px var(--ocean);text-stroke:1.5px var(--ocean);
  opacity:1;margin-bottom:10px}
/* Keine Linie ueber der Infozeile. Die Trennung zur Infografik uebernimmt
   der Abstand, die senkrechten Trennlinien zwischen den vier Elementen bleiben. */
.service .kpi{margin-top:48px;padding-top:0;display:flex}
.service .kpi>div{flex:1 1 0;min-width:0;padding-right:24px;display:flex;flex-direction:column;gap:8px}
.service .kpi>div+div{border-left:1px solid var(--border);padding-left:24px}

/* ============================================================
   09 KONTAKT — head bg deep pad 120/56, Split zwei Pfade
   ============================================================ */
.kontakt-head{background:var(--deep);color:var(--white);padding:120px var(--gutter) 56px}
.kontakt-head .inner{max-width:var(--content);margin:0 auto}
.kontakt-head .head{width:780px;max-width:100%;display:flex;flex-direction:column;gap:18px;margin-top:26px}
/* Beide Kaesten sitzen auf Gridbreite, kein Full-Bleed */
.kontakt-split-wrap{background:var(--deep);padding:0 var(--gutter) 0}
.kontakt-split{display:flex;max-width:var(--content);margin:0 auto}
.kontakt-split>div{flex:1 1 0;min-width:0;display:flex}
.kontakt-split>div>.box{width:100%;padding:64px 40px 72px}
.kontakt-split>.pfad-a{background:var(--ocean)}
.kontakt-split>.pfad-b{background:var(--deep);border:1px solid var(--on-dark-border);
  border-left:0}
.kontakt-split .pfad-a{background:var(--ocean);color:var(--white)}
.kontakt-split .pfad-b{background:var(--deep);color:var(--white);
  border-left:1px solid var(--on-dark-border)}
.kontakt-split h3{margin:16px 0 14px}
.kontakt-split p{max-width:520px}
.kontakt-split .btnrow{margin-top:26px}
.kontakt-split .who{margin-top:24px}

/* ============================================================
   FOOTER — pad 80/36, bg onDarkSurface, 2pt Ocean oben
   ============================================================ */
.site-footer{background:var(--on-dark-surface);color:var(--white);
  border-top:2px solid var(--ocean-on-dark);padding:80px var(--gutter) 36px}
.site-footer .inner{max-width:var(--content);margin:0 auto}
.ftop{display:flex;gap:48px;align-items:flex-start}
.fbrand{width:300px;flex:none;display:flex;flex-direction:column;gap:16px}
.fcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:11px}
.fcol a{position:relative;display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;color:var(--on-dark-muted);padding:2px 0;
  transition:color .18s}
/* Figma NavFlyoutItem: der Chevron ist auch im Ruhezustand sichtbar, 18 px,
   in onDarkMuted. Die alte Regel blendete ihn auf 0 und machte ihn 14 px klein. */
.fcol a .chev{width:18px;height:18px;opacity:1;transform:none;
  transition:color .18s ease,transform .18s ease}
.fcol a:hover{color:var(--ocean-on-dark)}
.fcol a:hover .chev{transform:translateX(3px)}
.fshop{margin-top:48px;padding:22px 0;border-top:1px solid var(--on-dark-hairline);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px}
.fshop a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--ocean-on-dark);transition:color .18s}
.fshop a .chev{width:16px;height:16px;transition:transform .22s cubic-bezier(.2,0,0,1)}
.fshop a:hover .chev{transform:translateX(5px)}
.flegal{padding-top:18px;border-top:1px solid var(--on-dark-hairline);
  display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.flegal .copy{flex:1 1 auto}
.flegal .links{flex:none;display:flex;flex-direction:row;justify-content:flex-end;gap:20px}
.flegal a{text-decoration:none;transition:color .18s}
.flegal a:hover{color:var(--ocean-on-dark);text-decoration:underline;text-underline-offset:3px}

/* Platzhalter, wie im Layout benannt */
.ph{background:var(--subtle);border:1px dashed var(--border);display:grid;place-items:center;
  text-align:center;padding:12px;color:var(--secondary);font:400 12px/1.4 var(--sans)}
.ph.on-dark{background:var(--on-dark-surface);border-color:var(--on-dark-border);
  color:var(--on-dark-quiet)}
/* Mobile Sticky-CTA, laut Briefing */
.stickybar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--deep);border-top:1px solid var(--on-dark-border);
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));gap:12px}
.stickybar .btn{flex:1;justify-content:center}



/* ============================================================
   MIKROANIMATIONEN — gestaffeltes Erscheinen beim Scrollen
   ============================================================ */
.rv{opacity:0;transition:opacity .62s cubic-bezier(.2,0,0,1),transform .62s cubic-bezier(.2,0,0,1)}
.rv-up{transform:translateY(26px)}
.rv-far{transform:translateY(64px)}
.rv-left{transform:translateX(-28px)}
.rv-right{transform:translateX(28px)}
.rv-in{transform:scale(.96)}
.rv.is-in{opacity:1;transform:none}
/* Ziffern zaehlen hoch, Zeichen bleiben stabil breit */
.count{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none}
}

/* ---------- Service-Infografik: drei Marken-Badges mit Verbindungslinien ---------- */
.steaser{margin-top:40px;padding:44px 32px;background:var(--ocean-whisper);
  border:1px solid var(--ocean-surface);display:flex;flex-direction:column;align-items:center;gap:24px}
.sflow{width:100%;display:grid;grid-template-columns:repeat(3,1fr);align-items:start}
.sflow>div{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
/* Verbindungslinie setzt 18px nach der Formkante an und endet 18px davor */
.sflow>div:not(:last-child)::after{content:"";position:absolute;top:41px;
  left:calc(50% + 56px);width:calc(100% - 112px);height:1px;background:var(--ocean-muted)}
.sbadge{width:76px;height:83px;flex:none;background:var(--ocean);
  -webkit-clip-path:url(#mformclip);clip-path:url(#mformclip);
  display:grid;place-items:center}
.sbadge svg{width:46px;height:46px;fill:none;stroke:var(--white);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.sclose{text-align:center;font-size:28px}
@media (max-width:900px){
  .steaser{padding:24px 20px;gap:20px}
  .sbadge{width:48px;height:52px}
  .sbadge svg{width:29px;height:29px;stroke-width:1.8}
  .sflow{gap:0 8px}
  .sflow>div{gap:12px}
  .sflow>div>span:last-child{font-size:14px;line-height:1.45}
  .sflow>div:not(:last-child)::after{top:26px;left:calc(50% + 36px);width:calc(100% - 72px)}
}

/* ---------- Ablauf der Infografik: eins nach dem anderen ---------- */
.sflow>div{opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.2,0,0,1),transform .5s cubic-bezier(.2,0,0,1)}
.sflow>div:not(:last-child)::after{transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.2,0,0,1)}
.sflow.is-run>div{opacity:1;transform:none}
.sflow.is-run>div:nth-child(1){transition-delay:0ms}
.sflow.is-run>div:nth-child(2){transition-delay:520ms}
.sflow.is-run>div:nth-child(3){transition-delay:1040ms}
.sflow.is-run>div:nth-child(1)::after{transform:scaleX(1);transition-delay:280ms}
.sflow.is-run>div:nth-child(2)::after{transform:scaleX(1);transition-delay:800ms}
.sclose{opacity:0;transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.2,0,0,1),transform .5s cubic-bezier(.2,0,0,1);
  transition-delay:1450ms}
.steaser.is-run .sclose{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sflow>div,.sclose{opacity:1!important;transform:none!important;transition:none}
  .sflow>div:not(:last-child)::after{transform:scaleX(1)!important;transition:none}
}
/* ============================================================
   RESPONSIV — nur Fluss, keine Stylings
   ============================================================ */
@media (max-width:1439px){
  /* Dekorationen bleiben auf ihrer 1440er Achse zentriert und werden beschnitten */
  .hero .heroimg{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:600/462;margin-top:8px}
  .hero .lower{align-items:flex-start}
  .hero .lower>.copy{flex:0 0 500px}
  .bikewrap{width:100%}
}
@media (max-width:1200px){
  :root{--gutter:48px}
  .system .stage{gap:48px}
  .wheelwrap{width:min(470px,42vw);height:min(470px,42vw)}
  .wsteps{width:auto;flex:1 1 0;min-height:420px}
  .zahlen .row{flex-direction:column}
  .uptime{width:100%}
  .kpi-grid>div{width:50%}
  .teaser .row{flex-direction:column;gap:32px}
  .teaser .txt{width:100%;display:flex;flex-direction:column}
  /* Reihenfolge wie im Mobile-Layout: Kopf, Copy, Laptop, Copy, CTA */
  .teaser .row{display:flex}
  .teaser .laptop{order:2}
  .teaser .txt{order:1}
  .teaser .txt>.eyebrow{order:1}
  .teaser .txt>h2{order:2}
  .teaser .txt>p:first-of-type{order:3}
  .teaser .txt>p:nth-of-type(2){order:5}
  .teaser .txt>.cta{order:6}
  .laptop{margin:0 auto;max-width:100%}
  .stimme .zitat{gap:40px}
  .stimme .media,.stimme .portrait{width:240px;height:auto}
  .ftop{flex-wrap:wrap}
  .fbrand{width:100%}
  .fcol{flex:1 1 40%}
}
@media (max-width:900px){
  :root{--gutter:32px}
  /* Typo eine Stufe herunter, Verhältnisse bleiben */
  .t-dXXL{font-size:60px}.t-dXL{font-size:48px}.t-dL{font-size:40px}
  .t-h1{font-size:34px}.t-h2{font-size:28px}.t-h3{font-size:23px}
  /* Navigation */
  .mainnav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;padding:8px 0;background:var(--deep);border-bottom:1px solid var(--on-dark-hairline);
    display:none}
  #navtoggle:checked ~ .mainnav,#burgertoggle:checked ~ .mainnav{display:flex}
  .burgerpanel .cols{grid-template-columns:1fr}
  .navitem>a{padding:14px var(--gutter)}
  svg.brand{height:24px}
  svg.brand--footer{height:32px}
  .navitem.is-active>a::after{display:none}
  .flyout{position:static;display:block;min-width:0;border:0;box-shadow:none;padding:0 0 8px;
    background:var(--on-dark-surface)}
  .flyout a{padding:12px var(--gutter)}
  .header-cta .btn:not(:last-of-type){display:none}
  .stickybar{display:flex}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  /* Sektionen */
  .hero{padding-top:72px;padding-bottom:56px}
  .hero .lower{flex-direction:column;gap:32px}
  .hero .lower>.copy{flex:none;width:100%}
  /* QS 08/2026: mobil je zwei Kennzahlen nebeneinander */
  .hero .kpi-strip{flex-wrap:wrap;gap:0 24px}
  .hero .kpi{flex:0 0 calc(50% - 12px);padding-right:0;padding-bottom:20px}
  .hero .logowall .panel{justify-content:flex-start}
  .hero .logowall .lg{width:calc(50% - 8px)}
  .system,.antrieb,.loesungen,.zahlen,.stimme,.teaser,.service{
    padding-top:88px;padding-bottom:88px}
  .kontakt-head{padding-top:88px;padding-bottom:40px}
  /* Scrollytelling wird gestapelt */
  .system .pinwrap,.antrieb .pinwrap{height:auto;margin-top:24px}
  .system .pin,.antrieb .pin{position:static;height:auto;top:auto;gap:24px}
  /* gleiche Spezifitaet wie die Desktop-Regeln, sonst gewinnen die */
  .system .pin .wheelwrap{width:min(78vw,340px);height:min(78vw,340px)}
  .system .pin .wsteps{min-height:0}
  /* Im Mobile-Layout sind alle drei Fluegel blau und alle Labels weiss */
  .system .pin .wheelwrap .sector{fill:var(--ocean)}
  .system .pin .wlabels span{color:var(--white)}
  /* alle drei Bloecke sichtbar, Buttons inklusive */
  .system .pin .wsteps .wstep{position:static;opacity:1;transform:none;pointer-events:auto}
  .system .pin .steprail{display:none}
  /* Der Glow ist 1150x680 absolut. Ohne hohe Sticky-Buehne ragt er ueber die
     Sektion und legt sich ueber das Modul darunter. Also kleiner und beschnitten. */
  .system{overflow:hidden}
  .system .pin{position:relative}
  .system .wheelglow{width:420px;height:300px;margin:-150px 0 0 -210px;opacity:.16}
  .system .pin .wsteps{width:100%}
  .system .pin>.stage{margin-top:0}
  .system .outcome{margin-top:24px;padding-top:20px}
  .system .stage{flex-direction:column;gap:40px}
  .wheelwrap{width:min(78vw,340px);height:min(78vw,340px)}
  .wsteps{position:static;min-height:0;display:flex;flex-direction:column;gap:48px;width:100%}
  .wstep{position:static;opacity:1;transform:none;pointer-events:auto}
  .steprail{display:none}
  .bikewrap{height:auto}
  .bikeglow{display:none}
  .bikeimg{position:relative;left:auto;top:auto;width:100%;height:auto;
    aspect-ratio:1000/700;background-size:contain}
  /* Sprungmarken bleiben sichtbar und klickbar, wie im Mobile-Layout */
  .hs{width:44px;height:44px;margin:-22px 0 0 -22px}
  .bikerail{display:none}
  .glass{position:static;width:100%;margin-top:24px;display:none;
    opacity:1;transform:none;
    background:var(--white);border-color:var(--ocean-surface);
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .glass.is-on{display:block}
  .glass h4,.glass p{text-shadow:none}
  /* Raster */
  .branchen,.prozess{flex-direction:column;gap:24px}
  .branchen>.offset:nth-child(2),.branchen>.offset:nth-child(3){padding-top:0}
  .kpi-grid>div{width:100%}
  .stimme .stimme-eyebrow{margin-left:0;margin-bottom:20px}
  .stimme .zitat{flex-direction:column;gap:24px;align-items:center}
  .stimme .media{width:100%;display:flex;justify-content:center;position:relative}
  .stimme .portrait{width:min(64vw,240px);height:auto}
  .stimme .txt{width:100%}
  .stimme .txt>*{text-align:left}
  /* Anfuehrungszeichen kleiner und an das Bild gesetzt */
  .stimme .quotemark{position:absolute;left:auto;right:8%;top:-18px;
    width:82px;height:50px;z-index:5}
  .stimme .case-kpi{flex-direction:column;border-top:0;padding-top:0}
  .stimme .case-kpi>div{padding:16px 0;border-top:1px solid var(--border)}
  .service .kpi{flex-wrap:wrap}
  .service .kpi>div{flex:1 1 45%;padding-bottom:20px}
  .kontakt-split{flex-direction:column}
  .kontakt-split>div>.box{padding:48px 28px 56px}
  .kontakt-split>.pfad-b{border:1px solid var(--on-dark-border);border-top:0}
  .flegal{flex-direction:column;align-items:flex-start;gap:14px}
  .flegal .links{flex-wrap:wrap;justify-content:flex-start}
  .system .outcome{flex-direction:column;align-items:flex-start;gap:12px}
  .fcol{flex:1 1 100%}
}

/* ============================================================
   MOBILE 390 — nach der gestalteten Vorlage v10 Mobile
   Gutter 16, Sektionspadding 64/64, Hero 40/56, Inhalt 358
   ============================================================ */
@media (max-width:640px){
  :root{--gutter:16px}
  .site-header .bar{padding:14px var(--gutter)}
  /* Sektionsabstaende exakt wie in der Vorlage */
  .system,.antrieb,.loesungen,.zahlen,.stimme,.teaser,.service{
    padding-top:64px;padding-bottom:64px}
  .hero{padding-top:40px;padding-bottom:56px}
  .kontakt-head{padding-top:64px;padding-bottom:24px}
  .site-footer{padding:48px var(--gutter) 24px}
  /* Hero: Bild steht in der Vorlage VOR der Copy */
  .hero>.inner{display:flex;flex-direction:column;gap:32px}
  .hero>.inner>.eyebrow{order:1;margin-bottom:0}
  .hero>.inner>h1{order:2;margin:0}
  .hero>.inner>.heroimg{order:3;height:309px;aspect-ratio:auto}
  .hero>.inner>.lower{order:4;margin-top:0}
  .hero>.inner>.kpi-strip{order:5;margin-top:0}
  .hero>.inner>.logowall{order:6;padding-top:0}
  /* QS 08/2026: auch im Schmalformat zwei Kennzahlen pro Reihe */
  .hero .kpi-strip{flex-wrap:wrap;gap:0 20px}
  .hero .kpi{flex:0 0 calc(50% - 10px);padding:0 0 18px;border-top:0}
  .hero .logowall .lg{width:calc(50% - 8px)}
  /* Footer: Spalten zweispaltig umbrechen, Rechtliches gestapelt */
  .ftop{flex-wrap:wrap;gap:16px}
  .fbrand{width:100%}
  .fcol{flex:1 1 calc(50% - 8px);min-width:calc(50% - 8px)}
  .fshop{flex-direction:column;align-items:flex-start;gap:8px}
  .flegal{flex-direction:column;align-items:flex-start;gap:12px}
  .flegal .links{flex-direction:column;align-items:flex-start;gap:8px}
  /* Kontakt: Pfade gestapelt, volle Breite */
  .kontakt-split-wrap{padding:0}
  .kontakt-split>div>.box{padding:40px var(--gutter) 48px}
  /* Typo eine Stufe tiefer als im Tablet-Bereich */
  .t-dXXL{font-size:40px}.t-dXL{font-size:34px}.t-dL{font-size:30px}
  .t-h1{font-size:26px}.t-h2{font-size:24px}.t-h3{font-size:20px}.t-h4{font-size:18px}
  .t-bodyLarge,.t-bodyLargeStrong{font-size:16px}
  /* Ghost-Zahl klein, wie in der Vorlage 210x95 bei 100/180 */
  .zahlen .bignr{font-size:88px;left:auto;right:0;bottom:auto;top:-108px;margin-bottom:0}
  .uptime{padding:20px}
  .uptime .big{font-size:52px}
  .laptop{max-width:358px}
}
@media (max-width:560px){
  :root{--gutter:16px}
  .t-dXXL{font-size:42px}.t-dXL{font-size:36px}.t-h1{font-size:28px}
  .hero .kpi{flex:0 0 calc(50% - 10px)}
  .hero .logowall .lg{width:100%}
  .service .kpi>div{flex:1 1 100%}
  .uptime{padding:24px}
  /* Der Laptop bleibt exakt die Desktop-Fassung und wird nur verkleinert.
     zoom skaliert auch die festen Pixelwerte im Display und wirkt auf die Hoehe. */
}
@media (prefers-reduced-motion:reduce){
  /* Nur Bewegung abschalten, Bedienung bleibt: das Bike ist klickgesteuert */
  .wsteps{position:static;display:flex;flex-direction:column;gap:48px;min-height:0}
  .wstep{position:static;opacity:1;transform:none;pointer-events:auto}
  .wheelwrap svg{transform:none!important}
  .hs .ring{animation:none}
  .rv{opacity:1!important;transform:none!important;transition:none}
  .sflow>div,.sclose{opacity:1!important;transform:none!important;transition:none}
  .sflow>div:not(:last-child)::after{transform:scaleX(1)!important;transition:none}
}


/* ============================================================
   ABSCHLUSSBLOCK MOBILE — steht bewusst am Ende der Datei.
   Grund: es gibt drei separate 900px-Blöcke und 560px stand vor 640px.
   Statt weiter einzelne Eigenschaften zu überschreiben, wird das
   Verhalten der beiden Scrollytelling-Module hier verbindlich gesetzt.
   ============================================================ */
@media (max-width:900px){
  /* ---- Systemrad: kein Pinning, alles gestapelt und sichtbar ---- */
  .system{overflow:hidden}
  .system .pinwrap{height:auto!important;margin-top:24px!important}
  .system .pin{position:static!important;display:block!important;top:auto!important;
    padding:0!important;gap:0!important}
  .system .pin>.eyebrow{margin:0 0 18px!important}
  .system .pin>.head{margin:0 0 28px!important}
  .system .pin>.stage{display:block!important;margin:0!important;width:100%!important}
  /* Glow als Hintergrund des Rades statt absolut, dadurch kein Überlaufen */
  .system .pin .wheelglow{display:none!important}
  .system .pin .wheelwrap{position:relative!important;width:min(78vw,320px)!important;
    height:min(78vw,320px)!important;margin:0 auto 34px!important;
    background:radial-gradient(closest-side,rgba(0,102,255,.24),rgba(0,102,255,0) 78%)}
  .system .pin .wsteps{position:static!important;width:100%!important;min-height:0!important;
    display:flex!important;flex-direction:column!important;gap:44px!important;padding:0!important}
  .system .pin .wstep{position:static!important;inset:auto!important;
    opacity:1!important;transform:none!important;transition:none!important;pointer-events:auto!important}
  .system .pin .steprail{display:none!important}
  /* alle drei Flügel blau, alle Labels weiß */
  .system .pin .wheelwrap .sector{fill:var(--ocean)!important}
  .system .pin .wlabels span{color:var(--white)!important}
  .system .outcome{margin-top:36px!important;padding-top:22px!important;
    flex-direction:column!important;align-items:flex-start!important;gap:10px!important}
  .system .outcome>span:first-child{white-space:nowrap}

  /* ---- Bike: Marker sichtbar und klickbar, eine Kachel darunter ---- */
  .antrieb .pinwrap{height:auto!important;margin-top:24px!important}
  .antrieb .pin{position:static!important;height:auto!important;top:auto!important;display:block!important}
  .bikewrap{height:auto!important;min-height:0!important}
  .bikeglow{display:none!important}
  .bikeimg{position:relative!important;left:auto!important;top:auto!important;
    width:100%!important;height:auto!important;aspect-ratio:1000/700!important;
    background-size:contain!important}
  .hs{width:44px!important;height:44px!important;margin:-22px 0 0 -22px!important;display:block!important}
  .glass{position:static!important;width:100%!important;margin-top:24px!important;
    left:auto!important;top:auto!important;display:none!important;
    opacity:1!important;transform:none!important;
    background:rgba(255,255,255,.74)!important;border-color:var(--on-dark-border)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .glass.is-on{display:block!important}
  .glass h4,.glass p{text-shadow:none!important}
  .bikerail{display:none!important}

  /* ---- Trennlinien zwischen Bike, Service und Data ---- */
  .system .pin .wsteps{gap:0!important}
  .system .pin .wstep+.wstep{border-top:1px solid var(--border);
    padding-top:36px!important;margin-top:36px!important}
    /* QS 08/2026: der erste Schritt bekommt oben denselben Trennstrich */
    .wsteps>.wstep:first-child{border-top:1px solid var(--border);
    padding-top:36px!important}

  /* ---- Logowall als Wisch-Element ---- */
  .hero .logowall .panel{flex-wrap:nowrap!important;justify-content:flex-start!important;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:24px!important;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:18px 20px!important}
  .hero .logowall .panel::-webkit-scrollbar{display:none}
  .hero .logowall .lg{flex:0 0 auto!important;width:112px!important;height:42px!important;
    scroll-snap-align:start}
  .hero .logowall .swipe{display:flex!important;align-items:center;gap:6px;
    margin-top:10px;font:400 12px/1.4 var(--sans);color:var(--on-dark-quiet)}

  /* ---- Rechner-Teaser: Laptop zwischen die beiden Copy-Blöcke ---- */
  .teaser .row{display:flex!important;flex-direction:column!important;gap:24px!important}
  .teaser .txt{display:contents!important}
  .teaser .txt>.eyebrow{order:1}
  .teaser .txt>h2{order:2}
  .teaser .txt>p:first-of-type{order:3}
  /* Laptop: Groesse, Luft und Malebene an einer Stelle gebuendelt.
     zoom .44 ergibt 273px effektiv. Der Aussenabstand wird vom Zoom geteilt,
     150px ergeben also 66px echte Luft, plus 24px Zeilenabstand. */
  .teaser .laptop{order:4;width:620px;max-width:none;zoom:.44;
    margin:150px auto!important;z-index:0!important}
  .teaser .laptop .lshape{width:96.8%!important;
    transform:translate(calc(-50% - 3.7%),-50%)!important}
  /* display:contents loest die Textspalte auf, ihre Kinder bleiben Kinder von .txt.
     Deshalb brauchen beide Ebenen eine Malebene ueber dem Laptop. */
  .teaser .row>*,.teaser .txt>*{position:relative;z-index:1}
  .teaser .txt>p:nth-of-type(2){order:5}
  .teaser .txt>.cta{order:6}
  /* display:contents macht die Textkinder zu Flex-Elementen der Zeile.
     Deren align-items:center htte sie zentriert, deshalb hier zuruecksetzen. */
  .teaser .row{align-items:stretch!important;text-align:left}
  .teaser .row>*{text-align:left}
  /* Die Dekoebene ist am Desktop 1440 breit und mittig verankert.
     Auf Mobile auf die Sektionsbreite setzen, sonst liegen die Formen ausserhalb. */
  .deco-in{left:0!important;width:100%!important;margin-left:0!important}
    /* Pattern und Verlaeufe an die neue Bezugsbreite anpassen */
  .hero .pattern,.antrieb .pattern,.stimme .pattern{left:-40%!important;top:-20%!important;
    width:180%!important;height:150%!important}
  .hero .glow{left:-15%!important;top:8%!important;width:130%!important;height:46%!important}
  .stimme .glow{left:-15%!important;top:10%!important;width:130%!important;height:44%!important}
  .loesungen .signet{left:auto!important;right:-30%!important;top:6%!important;
    width:120%!important;height:auto!important;aspect-ratio:1/1}

  /* Zitat: mehr Abstand um das Bild */
  .stimme .stimme-eyebrow{margin-left:0!important;margin-bottom:24px!important}
  .stimme .zitat{gap:36px!important}

  /* Service-Infografik: mehr Luft in der Box */
  .steaser{padding:36px 20px!important;gap:28px!important}
  /* Infozeile: Trennlinien zwischen den vier Elementen */
  /* Infozeile: Linie an jedem Element, dadurch ueberall derselbe Abstand.
     Die senkrechte Linie vom Desktop muss hier weg. */
  .service .kpi{flex-direction:column!important;border-top:0!important;padding-top:0!important}
  .service .kpi>div{flex:none!important;padding:18px 24px 18px 0!important;
    border-left:0!important;border-top:1px solid var(--border)!important;margin:0!important}
  /* Die oberste Linie faellt weg, sie saesse direkt unter der Infografik */
  .service .kpi>div:first-child{border-top:0!important;padding-top:0!important}
}

/* ============================================================
   Systemrad bei niedrigen Fenstern
   Der gepinnte Block braucht Kopf, Rad, Textspalte und Ergebniszeile
   gleichzeitig im Bild. Bei 1080px Hoehe passt das mit den grosszuegigen
   Abstaenden. Bei 900px waeren es 928px, also 28 zu viel — deshalb hier
   engere Werte und ein kleineres Rad.
   ============================================================ */
@media (max-height:1000px) and (min-width:901px){
  .system .pin{top:96px}
  .system .pin>.stage{margin-top:32px}
  /* Figma-Mass 470 px. Die Deckel bleiben, weil das Rad im gepinnten
     Zustand neben den Text passen muss — aber deutlich hoeher als vorher. */
  .system .pin .wheelwrap{width:min(470px,52vh);height:min(470px,52vh)}
  .system .outcome{margin-top:32px;padding-top:24px}
  .system .pin{gap:14px}
}
@media (max-height:820px) and (min-width:901px){
  .system .pin{top:76px;gap:10px}
  .system .pin>.stage{margin-top:20px}
  .system .pin .wheelwrap{width:min(470px,50vh);height:min(470px,50vh)}
  .system .outcome{margin-top:20px;padding-top:18px}
  .system .bullets li{padding:5px 0}
  .system .pin>.head{gap:10px}
}

/* Unter 740px Fensterhoehe reicht der Platz nicht mehr fuer alle vier Teile
   gleichzeitig. Dann wird das Pinning aufgegeben und das Modul laeuft normal
   durch — lesbar bleibt es damit in jedem Fall. */
@media (max-height:740px) and (min-width:901px){
  .system .pinwrap{height:auto}
  .system .pin{position:static;top:auto}
  .system .pin>.stage{margin-top:32px}
  .system .pin .wheelwrap{width:min(420px,52vh);height:min(420px,52vh)}
  .system .pin .wsteps .wstep{position:static;opacity:1;pointer-events:auto}
  .system .pin .wsteps{display:flex;flex-direction:column;gap:40px}
  .system .pin .steprail{display:none}
  .system .pin .wheelwrap .sector{fill:var(--ocean)}
  .system .pin .wlabels span{color:var(--white)}
}

/* ---- Weiche Raddrehung -----------------------------------------------------
   Die Drehung wird vom Scrollen nur als Ziel gesetzt. Rad und Labels laufen
   diesem Ziel gedaempft nach, dadurch bewegt sich das Rad ruhig weiter,
   auch wenn gerissen gescrollt wird. Auf Mobile aus, dort dreht nichts. */
@media (min-width:901px){
  #wheel{transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
  #wlabels span{transition:transform 1.15s cubic-bezier(.16,1,.3,1),opacity .5s ease}
}

/* ---- 07 Service auf Ocean, 08 Einsparpotenzial auf Weiss ------------------
   Getauscht gegenueber v10. Das Brandzeichen liegt als Sektionsdeko hinter
   der deckenden Kachel und ist rechts angeschnitten. Figma: Signet 954 px in
   einer 1097 hohen Sektion bei x 900 von 1440, Deckkraft 30 %. */
.service{position:relative;overflow:hidden}
.service>.ssignet{position:absolute;left:62.5%;top:8%;height:87%;width:auto;
  fill:var(--on-ocean-hairline);opacity:.30;pointer-events:none;z-index:0}
.service>.inner{position:relative;z-index:1}
.service .steaser{background:var(--on-ocean-hairline);border-color:var(--on-ocean-chip)}
.service .sbadge{background:var(--white);border-color:var(--white)}
.service .sbadge svg{stroke:var(--ocean);color:var(--ocean)}
.service .kpi>div+div{border-left-color:var(--on-ocean-hairline)}
.btn--onocean{background:var(--white);border:1px solid var(--white);color:var(--ocean-on-light)}
.btn--onocean:hover{background:var(--ocean-surface);border-color:var(--ocean-surface);color:var(--deep)}
/* Weisse Flaeche, daher oceanWhisper wie gewuenscht */
    .sec.teaser svg.pattern{left:0;top:0;width:100%;height:100%;opacity:.05}
.teaser .laptop .lshape{display:none}

/* ---- Kundenstimme: Referenzbadge auf dem Portrait und Slider-Steuerung ----
   Figma: weisses Badge 132 x 56, sitzt unten am Portrait. */
/* Figma: Badge 132 x 51 bei x 198 in einer 320 breiten Media — unten rechts,
   ueber die Bildkante hinausragend. */
.stimme .refbadge{position:absolute;left:auto;right:-10px;bottom:-18px;transform:none;
  width:132px;height:51px;background:var(--white);display:grid;place-items:center;z-index:6}
.stimme .refbadge .lg{width:100px;height:27px;background-size:contain;
  background-position:center;background-repeat:no-repeat}
.stimme .slidernav{display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:44px}
.stimme .marks{display:flex;align-items:center;gap:8px;height:24px}
.stimme /* Figma 472:3321 — Slide-Indikator:
   Spur immer 40 x 4 in neutral/border #CECED3, Abstand 8, im aktiven Marker
   ein Fortschrittsbalken in oceanOnDark #3385FF, der in 12 s volllaeuft.
   Die Spurbreite wechselt nicht, der Fortschritt zeigt den Takt an. */
.marks i{display:block;width:40px;height:4px;background:var(--border);
  overflow:hidden;position:relative;flex:0 0 auto}
.marks i>b{display:block;height:100%;width:0;background:var(--ocean-on-dark)}
.marks i.is-on>b{width:100%;
  transition:width linear;transition-duration:var(--takt,12s)}
.marks i.is-on.halt>b{transition:none}
.stimme .marks .counter{color:var(--border);font-size:12px;letter-spacing:0}
.stimme .marks .counter{margin-left:8px;color:var(--border)}
.stimme .navbtns{display:flex;gap:8px}
.stimme .navbtns button{width:44px;height:44px;border-radius:999px;background:transparent;
  border:1px solid var(--ocean-on-dark);color:var(--white);display:grid;place-items:center;
  cursor:pointer;transition:background .2s ease}
.stimme .navbtns button:hover:not(:disabled){background:rgba(51,133,255,.18)}
.stimme .navbtns button:disabled{opacity:.4;cursor:default}
.stimme .navbtns svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* Slider-Wechsel: der neue Slide faehrt leicht von rechts ein und blendet
   auf, der alte geht nach links weg. Bei reduzierter Bewegung nur Blende. */
/* Slider: alle Slides liegen absolut im selben Kasten uebereinander, keiner
   steht im Fluss. Dadurch wechselt nie die Positionierung mitten in der
   Bewegung — genau das hat vorher die Animation des abgehenden Slides
   verschluckt. Die Kastenhoehe setzt die Logik und faehrt sie weich mit,
   deshalb springt beim Wechsel nichts mehr. */
.stimme .slidebox{position:relative;transition:height .55s cubic-bezier(.22,1,.36,1)}
.stimme .slidebox>.slide{position:absolute;left:0;top:0;width:100%;
  opacity:0;transform:translateX(-46px);pointer-events:none;
  transition:opacity .5s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.stimme .slidebox>.slide.aktiv{opacity:1;transform:none;pointer-events:auto;z-index:2}
/* Richtung spiegelt sich: vorwaerts kommt der neue von links und der alte
   geht nach rechts, rueckwaerts umgekehrt. */
.stimme .slidebox>.slide.ab-vor{opacity:0;transform:translateX(46px);z-index:1}
.stimme .slidebox>.slide.ab-zurueck{opacity:0;transform:translateX(-46px);z-index:1}
.stimme .slidebox>.slide.wartet-zurueck{transform:translateX(46px)}
@media (prefers-reduced-motion:reduce){
  .stimme .slidebox>.slide{transition:opacity .3s ease;transform:none}
  .stimme .slidebox>.slide.ab{transform:none}
}
}
}
@media (max-width:900px){
  .service>.ssignet{left:auto;right:-30%;top:auto;bottom:6%;height:auto;width:110%}
  .stimme .slidernav{margin-top:30px}
  .stimme .refbadge{bottom:-20px;width:112px;height:48px}
}

/* ---- Sprachwahl im Header (Figma SiteHeader v2) ---- */
header .lang{color:var(--white);opacity:.72;letter-spacing:.08em;margin:0 4px 0 10px;
  align-self:center;cursor:pointer;transition:opacity .2s ease}
header .lang:hover{opacity:1}
@media (max-width:900px){ header .lang{display:none} }

/* ---- NAVIGATION -----------------------------------------------------------
   Werte aus Figma: SiteHeader v2 / breakpoint=Desktop (cta gap 20, langswitch
   Polster links 16, Text und Chevron mit Abstand 6), NavFlyout menu=Angebot
   (786 breit, zwei Spalten je 392) und BurgerPanel.
   -------------------------------------------------------------------------- */
header .header-cta{gap:20px!important}
header .langswitch{position:relative;display:flex;align-items:center;padding-left:16px}
header .langbtn{display:flex;align-items:center;gap:6px;padding:8px 0;border:0;background:none;
  cursor:pointer;font:500 14px/1.5 var(--sans);color:var(--white)}
header .langbtn .chev{width:14px;height:14px;transition:transform .2s ease}
header .langbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
header .langbtn:hover{color:var(--ocean-on-dark)}
header .langpanel{position:absolute;top:100%;right:0;min-width:96px;margin-top:10px;
  list-style:none;padding:8px 0;background:var(--deep);border:1px solid var(--on-dark-border);
  box-shadow:0 8px 24px rgba(8,8,35,.45);display:none;z-index:96}
header .langswitch.is-open .langpanel{display:block}
header .langpanel li{padding:10px 16px;font:500 14px/1.5 var(--sans);
  color:var(--on-dark-muted);cursor:pointer;transition:color .16s ease,background .16s ease}
header .langpanel li:hover{background:var(--on-dark-surface);color:var(--white)}
header .langpanel li.is-on{color:var(--ocean-on-dark)}
header .burger{margin-left:0!important}

/* Die Grundregel darf KEIN display setzen, sonst steht das Menue dauerhaft
   offen — genau das war der Fehler. Nur der geoeffnete Zustand wird zu flex. */
.flyout--zwei{min-width:786px;padding:12px 0}
.navitem:hover .flyout--zwei,.navitem:focus-within .flyout--zwei{display:flex}
.flyout--zwei>.fcol{width:392px;flex:none;display:flex;flex-direction:column}
.flyout--zwei>.fcol+.fcol{border-left:1px solid var(--on-dark-hairline)}

.burgerpanel .cols--einspaltig{display:flex!important;grid-template-columns:none!important;
  flex-direction:column;gap:0!important;margin-top:16px}
.burgerpanel .cols--einspaltig>a{border-top:1px solid var(--on-dark-hairline)}
.burgerpanel .cols--einspaltig>a:first-child{border-top:0}
/* Zubehoer zeigt seinen Chevron von Anfang an; beim Hover wechseln Text und
   Chevron auf Weiss. */
.burgerpanel a.shop{grid-column:auto;margin-top:20px;background:var(--on-dark-glass);
  padding:16px;border-top:0!important;transition:background .18s ease}
.burgerpanel a.shop .chev{opacity:1!important;transform:none!important;color:var(--ocean-on-dark)}
.burgerpanel a.shop:hover{background:var(--ocean)}
.burgerpanel a.shop:hover b,.burgerpanel a.shop:hover .chev{color:var(--white)!important}
@media (max-width:900px){
  header .langswitch{display:none}
  .flyout--zwei{min-width:0;flex-direction:column}
  .flyout--zwei>.fcol{width:100%}
  .flyout--zwei>.fcol+.fcol{border-left:0;border-top:1px solid var(--on-dark-hairline)}
}

/* BurgerPanel nach Figma: 360 breit, Polster 28, rechts angesetzt statt ueber
   die volle Breite — bei einer einzigen Spalte wirkte die 1280er Flaeche leer. */
@media (min-width:901px){
  .burgerpanel{left:auto;right:var(--gutter);width:360px;
    border:1px solid var(--on-dark-border);border-top:0}
  .burgerpanel>.inner{max-width:none;margin:0;padding:28px}
}

/* ---- Burger-Panel: Werte aus Figma BurgerPanel ---------------------------
   Panel 360 breit, Polster 28, Eintraege 50 hoch mit 12 oben/unten und einer
   Haarlinie OBEN (strokeTop 1), keine Chevrons. Der Zubehoer-Block hat den
   Chevron direkt hinter dem Titel und behaelt seine Subline.
   ------------------------------------------------------------------------- */
.burgerpanel .cols--einspaltig>a{display:block;padding:12px 0;border-top:1px solid var(--on-dark-hairline);
  text-decoration:none;transition:color .16s ease}
.burgerpanel .cols--einspaltig>a>b{display:block;font:400 16px/1.6 var(--sans);color:var(--white)}
.burgerpanel .cols--einspaltig>a:hover>b{color:var(--ocean-on-dark)}
.burgerpanel .cols--einspaltig>a:first-child{border-top:0}
/* Zubehoer: Titel und Chevron in einer Zeile, Chevron direkt am Text */
.burgerpanel a.shop{display:block!important;margin-top:20px;background:var(--on-dark-glass);
  padding:16px!important;border-top:0!important;transition:background .18s ease}
.burgerpanel a.shop .shoptitel{display:inline-flex;align-items:center;gap:4px}
.burgerpanel a.shop .shoptitel b{font:500 16px/1.6 var(--sans);color:var(--ocean-on-dark)}
.burgerpanel a.shop .chev{width:18px;height:18px;margin-left:0!important;opacity:1!important;
  transform:none!important;color:var(--ocean-on-dark)}
.burgerpanel a.shop small{display:block;margin-top:4px;font:400 12px/1.5 var(--sans);
  color:var(--on-dark-muted)}
.burgerpanel a.shop:hover{background:var(--ocean)}
.burgerpanel a.shop:hover b,.burgerpanel a.shop:hover .chev{color:var(--white)!important}
.burgerpanel a.shop:hover small{color:rgba(255,255,255,.82)}

/* ---- Flyout-Abstaende exakt nach Figma NavFlyout --------------------------
   Panel: Polster 12 oben/unten, Eintraege mit 2 px Abstand.
   Das Item ist 360 breit in einer 392 breiten Spalte, also 16 px Einzug plus
   16 px Innenpolster — der Text beginnt bei 32, die Hoverflaeche ist 360 breit.
   Angebot: zwei Spalten je 392 mit 2 px Abstand, zusammen 786.
   ------------------------------------------------------------------------- */
.flyout{padding:12px 16px!important}
.navitem:hover .flyout,.navitem:focus-within .flyout{display:flex;flex-direction:column;gap:2px}
.flyout--zwei{padding:12px 0!important}
.navitem:hover .flyout--zwei,.navitem:focus-within .flyout--zwei{
  display:flex;flex-direction:row;gap:2px}
.flyout--zwei>.fcol{width:392px;flex:none;display:flex;flex-direction:column;
  gap:2px;padding:0 16px}
.flyout a{padding:14px 16px;gap:16px;align-items:flex-start}
.flyout a b{line-height:1.6}
.flyout a small{line-height:1.5;margin-top:3px}
/* Figma: der Chevron sitzt senkrecht mittig im Item (y 29 bei Hoehe 75),
   nicht auf der Titelzeile. */
.flyout a>.chev{align-self:center;margin-top:0}

/* Burger-Punkte mit Chevron, wie in den Flyouts: rechtsbuendig, 18 px,
   im Ruhezustand gedaempft, beim Hover blau und 3 px nach rechts. */
.burgerpanel .cols--einspaltig>a:not(.shop){display:flex!important;align-items:center;gap:16px}
.burgerpanel .cols--einspaltig>a:not(.shop)>b{flex:1 1 auto}
.burgerpanel .cols--einspaltig>a:not(.shop)>.chev{width:18px;height:18px;flex:none;
  margin-left:auto!important;opacity:1!important;transform:none!important;
  color:var(--on-dark-muted);transition:color .18s ease,transform .18s ease}
.burgerpanel .cols--einspaltig>a:not(.shop):hover>.chev{color:var(--ocean-on-dark)!important;
  transform:translateX(3px)!important}

/* ---- MOBILE-KORREKTUREN --------------------------------------------------
   Werte aus den Figma-Mobile-Screens 03 Antrieb (207:4196), 04 Lösungen,
   06 Kundenstimme (207:4385) und 08 Einsparpotenzial.
   ------------------------------------------------------------------------ */
@media (max-width:900px){
  /* Bike: keine Trennlinien am Modul. Figma hat dort keinen Rahmen. */
  .antrieb,.sec.antrieb{border-top:0!important;border-bottom:0!important}
  .antrieb .head,.antrieb .pinwrap,.antrieb .pin{border:0!important}

  /* Bike-Grafik groesser: die Buehne laeuft bis an die Geraeterand-Kante,
     also 390 statt 358 — der Sektionspolster von 16 wird aufgehoben.
     Zusaetzlich sind die Sprungmarken kleiner, damit sie sich bei der
     schmalen Breite nicht mehr beruehren. */
  .antrieb .pinwrap{overflow:hidden}
  .bikewrap{width:calc(100% + 32px)!important;margin-left:-16px!important}
  .bikeimg{width:100%!important;aspect-ratio:1000/700!important}
  .hs{width:34px!important;height:34px!important;margin:-17px 0 0 -17px!important}
  .hs .bar.h{width:12px!important;margin:-1px 0 0 -6px!important}
  .hs .bar.v{height:12px!important;margin:-6px 0 0 -1px!important}

  /* Glass-Kachel: Kontur hellblau wie in Figma, nicht grau */
  .glass{border:1px solid var(--ocean-surface)!important}

  /* Lösungen: gleichmaessige Abstaende. Der Desktop-Versatz 0/60/120 mit
     Ausgleichspolster ergibt gestapelt ungleiche Luecken. */
  .branchen{flex-direction:column!important;gap:24px!important}
  .branchen>.offset{padding:0!important}

  /* Zitat: Eyebrow oben, einzeilig, mit Luft ums Bild wie in Figma (Polster 16,
     Abstand Eyebrow zum Bild 24). */
  .stimme .stimme-eyebrow{margin-bottom:24px!important;flex-wrap:nowrap!important}
  .stimme .stimme-eyebrow span:last-child{white-space:nowrap}
  .stimme .media{margin:0 auto!important;padding:0 8px!important}
  /* Flink-Badge: weisser Kasten an der Bildkante, mit Luft zum Geraeterand */
  .stimme .refbadge{right:8px!important;bottom:-18px!important;width:116px!important;height:46px!important}
  .stimme .refbadge .lg{width:84px!important;height:22px!important}
  /* Marker wie am Desktop: Spur 40x4, Fortschritt in oceanOnDark */
  .stimme .marks i{width:40px!important;height:4px!important;background:var(--border)!important}
  .stimme .marks i>b{background:var(--ocean-on-dark)!important}

  /* Rechner-Teaser: Abstaende wie in Figma, nicht auseinandergezogen */
  .teaser .row{gap:24px!important}
  .teaser .txt{gap:16px!important}
  .teaser .cta{margin-top:8px!important}
  .teaser .laptop{margin:8px auto!important}
}

@media (max-width:900px){
  /* Figma-Mobile: das Eyebrow steht ganz oben, ueber dem Bild. Da es im Markup
     in der Textspalte sitzt (damit es beim Slidewechsel mitwandert), wird der
     Slide hier zum Grid und die Textspalte per display:contents aufgeloest —
     dann laesst sich das Eyebrow mit order nach vorn ziehen. */
  .stimme .slidebox>.slide{display:grid!important;gap:0}
  .stimme .slidebox>.slide>.txt{display:contents!important}
  .stimme .stimme-eyebrow{order:-1!important;margin-bottom:20px!important}
  .stimme .slidebox>.slide>.media{order:0!important;margin-bottom:24px!important}
}

/* ---- MOBILE-NACHBESSERUNGEN ---------------------------------------------
   Alle Werte aus den Figma-Mobile-Screens 01 Hero, 03 Antrieb,
   08 Einsparpotenzial und 09 Kontakt.
   ------------------------------------------------------------------------ */
@media (max-width:900px){
  /* Hero: scroll-snap mandatory hat das erste Logo an den Containerstart
     gerastet und damit das linke Polster von 20 px aufgehoben. */
  .logowall .panel{scroll-snap-type:none!important;scroll-padding-left:20px}
  .logowall .panel>.lg{scroll-snap-align:none!important}

  /* Bike: nichts beschneidet mehr — der Kachelschatten lag vorher im
     overflow:hidden des Rahmens und wurde abgeschnitten.
     Der Rahmen bleibt auf Inhaltsbreite (358 in 390 mit 16 Polster), nur das
     BILD laeuft bis an die Geraetekanten. Damit sitzt die Kachel auf derselben
     Kante wie Headline und Buttons, also mittig im Layout. */
  .antrieb .pinwrap{overflow:visible!important}
  .bikewrap{width:100%!important;margin:0!important;overflow:visible!important}
  .bikeimg{width:calc(100% + 32px)!important;margin-left:-16px!important}
  #bikewrap>.glass{position:relative!important;left:auto!important;top:auto!important;
    width:100%!important;margin:0!important}

  /* Rechner-Teaser: der Inline-Abstand von 26 px an der Headline addierte sich
     auf die 24 px Reihenluecke — daher 50 statt 24. */
  .teaser h2{margin-top:0!important}
  .teaser .row{gap:24px!important}
  .teaser .txt{gap:24px!important}
  /* Der Textblock trug zusaetzlich 18 px Eigenabstand oben — der addierte sich
     auf die 24 px Luecke und ergab 52. */
  .teaser .txt>p{margin-top:0!important}
  .teaser .laptop{margin:0 auto!important;padding-top:40px!important}
  .teaser .cta{margin-top:0!important}

  /* Kontakt: alle drei Headlines gleich gross. Vorher 24 / 40 / 40. */
  .kontakt h2,.kontakt h3,.pfad h2,.pfad h3,
  .naechster h2,.naechster h3{font-size:28px!important;line-height:1.25!important}

  /* Die Zeilen unter den Buttons sind am Desktop nicht vorhanden — mobil auch weg. */
  .who{display:none!important}
}

@media (max-width:900px){
  /* Die beiden Pfad-Headlines tragen einen Inline-Wert von 40 px; der schlaegt
     jede Klassenregel. Deshalb hier mit gleicher Spezifitaet ueberschreiben,
     damit alle drei Headlines im Kontaktmodul gleich gross sind. */
  h2.t-h2,h3.pfadkopf{font-size:28px!important;line-height:1.25!important}
}

@media (max-width:900px){
  /* Figma-Mobile 06: alle Bloecke im Zitat mit 24 Abstand. Name-Block und Link
     hatten zusaetzlich eigene Abstaende und standen dadurch zu weit weg. */
  .stimme .slidebox>.slide{gap:24px!important}
  .stimme .person{margin-top:0!important}
  .stimme .case-kpi{margin-top:0!important;padding-top:0!important;border-top:0!important}
  .stimme .link{margin-top:0!important}
}

/* ---- MOBILMENÜ -----------------------------------------------------------
   Zweistufig: Ebene 1 sind die Hauptpunkte, Ebene 2 der jeweilige Flyout.
   Vollflächiges Overlay, Zeilenhöhe mindestens 48 für sichere Treffer,
   Zurück-Zeile in jeder Unterebene, Sprachwahl und CTA am Fuß.
   Aufgebaut aus dem vorhandenen Markup, damit Inhalte nicht doppelt pflegt
   werden müssen.
   ------------------------------------------------------------------------ */
.mmenu{position:fixed;inset:0;z-index:120;display:none;background:var(--deep);
  color:var(--white);flex-direction:column}
.mmenu.is-open{display:flex}
body.mmenu-offen{overflow:hidden}
.mmenu__bar{flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 16px;min-height:73px;border-bottom:1px solid var(--on-dark-hairline)}
.mmenu__bar svg.brand{height:26px}
.mmenu__zu{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;
  color:var(--white);cursor:pointer}
.mmenu__zu svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round}
.mmenu__viewport{flex:1 1 auto;position:relative;overflow:hidden}
.mmenu__stapel{position:absolute;inset:0;display:flex;width:200%;
  transition:transform .32s cubic-bezier(.22,1,.36,1)}
.mmenu.zeigt-ebene2 .mmenu__stapel{transform:translateX(-50%)}
.mmenu__ebene{width:50%;flex:none;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:8px 16px 24px}
.mmenu__zeile{display:flex;align-items:center;gap:16px;width:100%;min-height:56px;
  padding:14px 0;border:0;border-top:1px solid var(--on-dark-hairline);
  background:none;color:var(--white);text-align:left;text-decoration:none;
  font:400 17px/1.4 var(--sans);cursor:pointer}
.mmenu__ebene>.mmenu__zeile:first-of-type{border-top:0}
.mmenu__zeile>span{flex:1 1 auto;min-width:0}
.mmenu__zeile b{display:block;font:500 17px/1.4 var(--sans)}
.mmenu__zeile small{display:block;margin-top:3px;font:400 13px/1.45 var(--sans);
  color:var(--on-dark-muted)}
.mmenu__zeile .chev{width:20px;height:20px;flex:none;color:var(--on-dark-muted);
  stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mmenu__zeile:active{background:var(--on-dark-surface)}
.mmenu__zurueck{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;
  padding:12px 0;border:0;background:none;cursor:pointer;
  font:500 14px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ocean-on-dark)}
.mmenu__zurueck svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.mmenu__ueberschrift{margin:4px 0 12px;font:400 24px/1.2 var(--display)}
.mmenu__shop{display:block;margin-top:24px;padding:16px;background:var(--on-dark-glass);
  text-decoration:none}
.mmenu__shop b{display:inline-flex;align-items:center;gap:6px;
  font:500 16px/1.5 var(--sans);color:var(--ocean-on-dark)}
.mmenu__shop b svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.mmenu__shop small{display:block;margin-top:4px;font:400 12px/1.5 var(--sans);
  color:var(--on-dark-muted)}
.mmenu__sprache{display:flex;align-items:center;gap:8px;margin-top:24px;
  padding-top:20px;border-top:1px solid var(--on-dark-hairline)}
.mmenu__sprache span{font:400 12px/1.5 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-dark-muted);margin-right:4px}
.mmenu__sprache button{min-width:48px;min-height:40px;border:1px solid var(--on-dark-border);
  background:none;color:var(--on-dark-muted);font:500 14px/1 var(--sans);cursor:pointer}
.mmenu__sprache button.is-on{border-color:var(--ocean-on-dark);color:var(--ocean-on-dark)}
.mmenu__fuss{flex:none;padding:12px 16px;border-top:1px solid var(--on-dark-hairline)}
.mmenu__fuss .btn{width:100%;justify-content:center}
@media (min-width:901px){ .mmenu{display:none!important} }

/* Footer: Figma setzt die Frage vor dem Zubehör-Link auf oceanSurface, also
   das hellere Blau — der Link selbst bleibt oceanOnDark. Desktop und Mobile
   gleich. */
.site-footer .fshop>span{color:var(--ocean-surface)}
@media (max-width:900px){
  .site-footer .fshop>span{color:var(--ocean-surface)!important}
}

/* ============================================================
   HEADLINES DESKTOP — Startseite v13
   Figma setzt die Modul-Headlines jetzt auf text/h1 (Moldiv 48 / 115 %)
   statt text/h2. Bewusst nur ab 901 px: die Mobile-Stufen in den
   max-width-Bloecken bleiben unangetastet.
   ============================================================ */
@media (min-width:901px){
  .system .head>h2,
  .antrieb .head>h2,
  .loesungen .head>h2,
  .service .head>h2,
  .teaser .txt>h2,
  .kontakt-head .head>h2{font-size:48px;line-height:1.15}
  /* Bei 48 px sitzen die harten Umbrueche der 36-px-Fassung falsch.
     In Figma laufen diese vier Headlines frei um — nur die System-Headline
     hat einen echten Umbruch und behaelt ihr <br>. */
  br.br-mobil{display:none}
}

/* ============================================================
   ZITATMODUL — Figma Desktop 207:3647 / Mobile 207:4385
   Der Ghostbutton (Button/type=OnDark) gilt in beiden Fassungen und
   steht jeweils ueber der Slider-Steuerung.
   Nur die beiden Werte unten sind desktop-spezifisch: Mobile behaelt
   laut Vorlage KPI 24 px und die Trennlinie je Kachel.
   ============================================================ */
@media (min-width:901px){
  /* case-kpi: Trennlinie ist in Figma Ocean, nicht onDark/border */
  .stimme .case-kpi{border-top-color:var(--ocean)}
  /* KPI-Zahlen auf text/mobile/display — Moldiv 40 / 115 % */
  .stimme .case-kpi .t-dXS{font-size:40px;line-height:1.15}
}


/* ===== Medien-Platzhalter: Bild/Video statt Platzhaltertext (mocci) ===== */
.mocci-media-wrap{position:relative;overflow:hidden}
.mocci-media-wrap>.mocci-media{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.heroimg .mocci-media{width:100%;height:100%;object-fit:cover;display:block}


/* ===== Laptop-Mockup: pflegbarer Bildschirm-Inhalt (mocci) ===== */
.hn-laptop .hn-screen{position:absolute;left:9.474%;top:4.231%;width:81.053%;height:73.077%;object-fit:cover;border-radius:calc(8px * var(--s));z-index:2;display:block}


/* ===== Formular-Fallback: greift auch fuer vereinfachtes Editor-Markup ohne hs-Klassen (mocci) ===== */
.kformular label,.lp-formwrap label{display:block;font:500 13px/1.4 var(--text,'DINPro',sans-serif);color:var(--ink);margin:0 0 6px}
.kformular form>div,.lp-formwrap form>div{margin-bottom:14px}
.kformular input:not([type=checkbox]):not([type=radio]):not([type=submit]),.lp-formwrap input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.kformular select,.lp-formwrap select,.kformular textarea,.lp-formwrap textarea{width:100%;box-sizing:border-box;background:var(--white);border:1px solid var(--border);padding:12px 14px;font:400 15px/1.4 var(--text,'DINPro',sans-serif);color:var(--ink);border-radius:0}
.kformular input:focus,.lp-formwrap input:focus,.kformular select:focus,.lp-formwrap select:focus{outline:none;border-color:var(--ocean)}
.kformular input[type=submit],.lp-formwrap input[type=submit]{display:inline-block;width:auto;background:var(--ocean);color:var(--white);border:2px solid var(--ocean);padding:14px 26px;font:500 15px/1 var(--text,'DINPro',sans-serif);cursor:pointer;border-radius:0;margin-top:8px}
.kformular input[type=submit]:hover,.lp-formwrap input[type=submit]:hover{background:transparent;color:var(--ocean-on-light)}


/* ===== Dashboard-Teaser: interaktiver Mini-Rechner im Laptop-Screen (mocci) ===== */
.teaser .sbody--rechner{display:block;padding:14px 22px;overflow:hidden}
.mocci-mini-rechner{display:flex;flex-direction:column;gap:9px}
.mocci-mini-rechner .mr-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px}
.mocci-mini-rechner .mr-row b{color:var(--white)}
.mocci-mini-rechner input[type=range]{width:100%;appearance:none;-webkit-appearance:none;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ocean) 0 50%,var(--on-dark-border) 50% 100%);outline:none}
.mocci-mini-rechner input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--white);border:3px solid var(--ocean);cursor:pointer}
.mocci-mini-rechner input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--white);border:3px solid var(--ocean);cursor:pointer}
.mocci-mini-rechner .mr-res{margin-top:4px;padding:10px 14px;background:var(--on-dark-surface,#14142E);display:flex;flex-direction:column;gap:2px}
.mocci-mini-rechner .mr-res .rn{font:400 26px/1.1 var(--display);color:var(--white)}
.mocci-mini-rechner .mr-cta{margin-top:8px;align-self:flex-start;padding:9px 16px;font-size:13px}


/* ===== LP-Laptop (setup): pflegbarer Bildschirm-Inhalt (mocci) ===== */
.laptop--lp .screen{position:relative;overflow:hidden}
.laptop--lp .screen .mocci-media.lp-screen{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}


/* ===== LP-Laptop: Overlay mit optionalem CTA (mocci) ===== */
.laptop--lp .screen .lp-sov{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;background:rgba(8,8,35,.55);backdrop-filter:blur(2px);padding:12px}
.laptop--lp .screen .lp-sov .lp-sov-cta{margin-top:8px;padding:9px 16px;font-size:13px}


/* ===== Automatische Zeilenbalance fuer Ueberschriften (mocci) =====
   Der Browser bricht mehrzeilige Headlines selbst harmonisch um —
   manuelle Umbrueche (|) sind nur noch Feinschliff. */
.sec h1,.sec h2,.sec h3,.lp-hero h1,.hero h1,.kontakt-head h2{text-wrap:balance}


/* ===== Systemseiten: 404/500, Passwort, E-Mail-Abos (mocci) ===== */
.sysseite{min-height:56vh;display:flex;align-items:center;padding-top:110px;padding-bottom:120px;position:relative;overflow:hidden}
.sysseite .sys-inner{position:relative;z-index:2;max-width:720px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.sysseite .sys-code{font:400 120px/1 var(--display);color:transparent;-webkit-text-stroke:2px var(--ocean-on-dark)}
.sysseite .cta{margin-top:10px}
.sysseite--hell .sys-inner{max-width:640px}
.syskarte{width:100%;background:var(--white);border:1px solid var(--border);padding:28px;margin-top:10px}
.syskarte h1,.syskarte h2,.syskarte h3{font:400 20px/1.3 var(--display);color:var(--ink);margin:0 0 12px}
.syskarte p{font:400 14px/1.5 var(--text,'DINPro',sans-serif);color:var(--secondary)}
.syskarte input[type=checkbox]{width:auto}


/* === Zweispalt portabel: aus mocci-lp.css uebernommen, damit mocci-zweispalt auch auf Nicht-LP-Seiten (base+lsg) korrekt rendert === */
.ausfaelle{padding-top:120px;padding-bottom:130px}
.zweispalt{margin-top:26px;display:flex;gap:56px;align-items:center}
.zweispalt .bildseite{flex:0 0 470px;aspect-ratio:470/390;position:relative;clip-path:url(#mformclip)}
.zweispalt .bildseite img{width:100%;height:100%;object-fit:cover;display:block}
.zweispalt .bildseite .tbd{position:absolute;inset:0;display:grid;place-items:center;font:400 56px/1 var(--display);color:var(--white)}
.zweispalt .textseite{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:18px}
.kasten-hell{margin-top:14px;background:var(--ocean-whisper);padding:26px}
.kasten-hell ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:14px}
.kasten-hell li{position:relative;padding-left:18px}
.kasten-hell li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ocean-on-light)}
@media (max-width:1200px){
.zweispalt{flex-direction:column;align-items:stretch;gap:32px}
.zweispalt .textseite{flex:none}
.zweispalt .bildseite{flex:none;width:100%;aspect-ratio:16/11}
}
@media (max-width:900px){.ausfaelle{padding-top:80px;padding-bottom:80px}}
@media (max-width:640px){.ausfaelle{padding-top:60px;padding-bottom:60px}}


/* HubSpot-Formular: zweispaltige Reihen fuellen die Karte (HubSpot setzt sonst max-width:500px) */
.kformular .form-columns-2,.lp-formwrap .form-columns-2,
.kformular .form-columns-1,.lp-formwrap .form-columns-1,
.kformular .form-columns-3,.lp-formwrap .form-columns-3{max-width:none;display:flex;flex-wrap:wrap;gap:0 20px}
.kformular .form-columns-2>.hs-form-field,.lp-formwrap .form-columns-2>.hs-form-field{flex:1 1 calc(50% - 10px);min-width:0;width:auto!important;float:none}
.kformular .form-columns-1>.hs-form-field,.lp-formwrap .form-columns-1>.hs-form-field{flex:1 1 100%;min-width:0;width:auto!important;float:none}
.kformular .form-columns-3>.hs-form-field,.lp-formwrap .form-columns-3>.hs-form-field{flex:1 1 calc(33.333% - 14px);min-width:0;width:auto!important;float:none}
.kformular .hs-form-field .input,.lp-formwrap .hs-form-field .input{margin-right:0}
.kformular .hs-form-field>label,.lp-formwrap .hs-form-field>label{margin-bottom:2px}
.kformular .hs-field-desc,.lp-formwrap .hs-field-desc{display:block;margin:0 0 6px;font:400 12px/1.4 var(--sans);color:var(--muted)}
@media (max-width:640px){
.kformular .form-columns-2>.hs-form-field,.lp-formwrap .form-columns-2>.hs-form-field,
.kformular .form-columns-3>.hs-form-field,.lp-formwrap .form-columns-3>.hs-form-field{flex:1 1 100%}
}


/* ===========================================================================
   QS 08/2026 · CTA-Buttons mobil ueber die volle Breite
   Isabelle: "Button ueber komplette Breite darstellen -> gilt fuer einige der
   Module in der mobilen Ansicht". Der Navi-Hero macht das bereits; hier fuer
   Startseiten-Hero, Abschluss-CTAs und Karten-CTAs nachgezogen.
   =========================================================================== */
@media (max-width:640px){
  .hero .cta,.antrieb .ctarow,.ctablock .cta,.teaser .cta,.service .cta,
  .loesungen .karte .link,.stimme .link,.kraeder .cta,.zubehoer .cta,
  .vorteile .cta,.ausgang .cta,.probefahrt .cta,.foerderung .cta,
  .faq .cta,.vergleich .cta,.material .cta{
    flex-direction:column;align-items:stretch;width:100%}
  .hero .cta>.btn,.antrieb .ctarow>.btn,.ctablock .cta>.btn,.teaser .cta>.btn,
  .service .cta>.btn,.loesungen .karte .link>.btn,.stimme .link>.btn,
  .kraeder .cta>.btn,.zubehoer .cta>.btn,.vorteile .cta>.btn,
  .ausgang .cta>.btn,.probefahrt .cta>.btn,.foerderung .cta>.btn,
  .faq .cta>.btn,.vergleich .cta>.btn,.material .cta>.btn{
    width:100%;justify-content:space-between}
  .wege .weg .cta>.btn{width:100%;justify-content:space-between}
}


/* QS 08/2026 · aktiver Slider-Strich immer blau (Kundenraeder, Zitate) */
.marks i.is-on{background:var(--ocean)}
.bg-deep .marks i.is-on,.bg-onDarkSurface .marks i.is-on,
.stimme .marks i.is-on{background:var(--ocean-on-dark)!important}


/* ===========================================================================
   QS 08/2026 · Mobile-Korrekturen aus der Abnahme
   =========================================================================== */

/* 1) Breadcrumb war im Schmalformat abgeschnitten — nur "Home" sichtbar.
      Ursache: nicht umbrechende Flex-Zeile. */
.breadcrumb{flex-wrap:wrap;row-gap:4px}

/* 2) Reihenfolge im Unterseiten-Hero. Die Order-Regeln des Startseiten-Heros
      griffen auch hier; Breadcrumb und Trust-Zeile hatten keine Order und
      rutschten dadurch vor Overline und Headline. */
@media (max-width:640px){
  .hero--navi>.inner>.breadcrumb,.hero--lsg>.inner>.breadcrumb{order:0}
  .hero--navi>.inner>.eyebrow,.hero--lsg>.inner>.eyebrow{order:1}
  .hero--navi>.inner>h1,.hero--lsg>.inner>h1{order:2}
  .hero--navi>.inner>.heroimg,.hero--lsg>.inner>.heroimg,
  .hero--navi>.inner>.heroplatz,.hero--lsg>.inner>.heroplatz{order:3}
  .hero--navi>.inner>.lower,.hero--lsg>.inner>.lower{order:4}
  .hero--navi>.inner>.kpileiste,.hero--lsg>.inner>.kpileiste{order:5}
  .hero--navi>.inner>.trustchip,.hero--lsg>.inner>.trustchip{order:6;margin-top:8px}
}

/* 3) Hero-Bild im Schmalformat: die Figma-Freiform ist auf die Desktop-Groesse
      gerechnet und schnitt das Bild seitlich an. Mobil daher abgerundetes
      Rechteck statt Clip-Pfad. */
@media (max-width:900px){
  .hero--navi .heroimg,.hero--lsg .heroimg{
    clip-path:none!important;-webkit-clip-path:none!important;
    border-radius:24px;overflow:hidden}
}

/* 4) Produktbilder liefen aus der Kachel heraus ("Bilder sind nicht
      responsive"): Freisteller gehoeren eingepasst, nicht formatfuellend. */
.bildplatz .mocci-media-wrap{width:100%;height:100%}
.bildplatz .mocci-media,.bildplatz img{object-fit:contain!important;
  max-width:100%;max-height:100%;padding:8px}


/* ===========================================================================
   Uptime-Rechner als Seiten-Modul (QS 08/2026)
   Der Rechner aus /mocci/modules/uptime-calculator bringt keinen eigenen
   Sektionsrahmen mit — im LP-Template sitzt er im Hero. Wird er ueber den
   Seiten-Editor platziert (dann steckt er in einer .dnd-row), fehlen Grund,
   Polster und Raster. Das ergaenzen wir hier, ohne das Git-Modul anzufassen.
   =========================================================================== */
.dnd-row .mo-calc,
.dnd-section .mo-calc{
  background:var(--white);
  padding:120px var(--gutter);
}
.dnd-row .mo-calc .mo-calc__layout,
.dnd-section .mo-calc .mo-calc__layout{
  max-width:var(--content);
  margin:0 auto;
}
@media (max-width:900px){
  .dnd-row .mo-calc,.dnd-section .mo-calc{padding:80px var(--gutter)}
}
@media (max-width:640px){
  .dnd-row .mo-calc,.dnd-section .mo-calc{padding:60px var(--gutter)}
}


/* ===========================================================================
   HubSpot dnd-Spalte auf volle Breite zwingen
   Setzt das Template eine vertikale Ausrichtung auf die Spalte, macht HubSpot
   daraus ein Flex-Item. Ein Flex-Item ohne Breitenangabe schrumpft auf die
   Inhaltsbreite — bei unseren Sektionen sind das 1280 px Inhalt + 2x80 px
   Gutter = 1440 px. Die Spalte klebte dadurch links am Rand, waehrend Header
   und Footer weiter ueber die volle Breite zentriert waren (Kundenstories).
   =========================================================================== */
.row-fluid > .span12.dnd-column{width:100%;flex:1 1 100%;min-width:0}


/* Mobile-Header-Fix 2026-09: Auf Phones <= ~405px lief die Header-Leiste ueber (Logo + CTA + Burger + Gutter > Viewport),
   der Burger lag rechts ausserhalb des sichtbaren Bereichs und war nicht antippbar (body overflow hidden). */
@media (max-width:640px){
  .site-header .bar{gap:12px;min-height:72px;padding-top:10px;padding-bottom:10px}
  .site-header .brandlink{flex:none}
  .site-header .header-cta{margin-left:auto;gap:10px;flex:0 1 auto;min-width:0}
  .site-header .header-cta .btn{padding:0 14px;height:40px;font-size:13px;white-space:nowrap}
  .site-header .burger{margin-left:4px;flex:none}
}
/* Sehr schmale Geraete: CTA im Header ausblenden – er steht ohnehin im Fuss des Mobile-Menues. */
@media (max-width:360px){.site-header .header-cta .btn{display:none}}


/* Burger-CSS-Fallback 2026-09: #burgertoggle steht im Markup hinter .mainnav, daher greift
   "#burgertoggle:checked ~ .mainnav" nie. Ohne JS (oder wenn das JS-Menue scheitert) oeffnet
   der Burger jetzt trotzdem die Hauptnavigation als Dropdown. */
@media (max-width:900px){
  .site-header:has(#burgertoggle:checked) .mainnav{display:flex}
  .site-header:has(#burgertoggle:checked) .burgerpanel{display:none}
}