/* MK E-Motors OnePager · OnlineOptimierung 2026-11 */
@font-face{font-family:"Archivo";src:url(../fonts/archivo.woff2) format("woff2");font-weight:700 800;font-stretch:112%;font-display:swap}
@font-face{font-family:"Public Sans";src:url(../fonts/publicsans.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{
  --ink:#0d0d0f;--ink2:#1b1b1f;--paper:#f4f3ef;--white:#fff;--line:#d9d7d0;--mute:#5d5d63;
  --acc:#84bc04;--acc-dk:#4d6e00;--acc-lt:#eef6d8;
  --h:"Archivo",Arial Narrow,Arial,sans-serif;--b:"Public Sans",Arial,sans-serif;
  --pad:clamp(20px,4.5vw,72px);--sec:clamp(64px,9vw,128px)
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--b);font-size:17px;line-height:1.65;color:var(--ink);background:var(--paper);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--h);font-stretch:112%;font-weight:800;line-height:1.04;letter-spacing:-.01em}
h1{font-size:clamp(34px,9vw,92px);overflow-wrap:break-word;text-transform:uppercase}
h2{font-size:clamp(32px,4.2vw,58px);text-transform:uppercase;margin-bottom:.5em}
h3{font-size:clamp(20px,1.7vw,24px);margin-bottom:.4em}
p+p{margin-top:1em}
.wrap{padding:0 var(--pad)}
.sec{padding:var(--sec) var(--pad)}
.eyebrow{display:block;font-family:var(--h);font-stretch:112%;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-dk);margin-bottom:18px}
.dark .eyebrow,.hero .eyebrow{color:var(--acc)}
.lead{font-size:clamp(18px,1.45vw,21px);max-width:62ch}
.mute{color:var(--mute)}
.skip{position:absolute;left:8px;top:-100px;opacity:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:99}
.skip:focus{top:8px;opacity:1}

/* Buttons: flach, eckig */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--h);font-stretch:112%;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:17px 26px;border:2px solid var(--ink);background:var(--ink);color:#fff;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.on-dark .btn{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.on-dark .btn:hover{background:#fff;border-color:#fff}
.on-dark .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.on-dark .btn.ghost:hover{background:#fff;color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}

/* Header: eine Leiste */
.hd{position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;display:flex;align-items:center;gap:28px;padding:0 var(--pad);height:64px;transition:height .25s,background .25s}
.hd.small{height:56px;background:rgba(13,13,15,.94);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand img{width:36px;height:36px;object-fit:contain;transition:transform .4s}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.brand span{font-family:var(--h);font-stretch:112%;font-weight:800;font-size:18px;letter-spacing:.04em;text-transform:uppercase}
.nav{display:flex;gap:26px}
.nav a{font-size:14px;font-weight:600;text-decoration:none;letter-spacing:.03em;opacity:.85}
.nav a:hover{opacity:1;color:var(--acc)}
.hd .soc{display:flex;gap:6px}
.hd .soc a{display:grid;place-items:center;width:38px;height:38px}
.hd .soc svg{width:19px;height:19px;fill:#fff;transition:fill .2s}
.hd .soc a:hover svg{fill:var(--acc)}
.hd .call{padding:10px 16px;font-size:13px;background:var(--acc);border-color:var(--acc);color:var(--ink)}
.hd .call:hover{background:#fff;border-color:#fff}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px auto;transition:transform .2s}
@media(max-width:1020px){
  .nav{position:fixed;inset:56px 0 auto 0;flex-direction:column;gap:0;background:var(--ink);padding:8px var(--pad) 24px;display:none}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid #2a2a30;font-size:17px}
  .burger{display:block}
  .hd .soc{display:none}
}
@media(max-width:520px){.hd .call .t{display:none}.hd .call{padding:11px 12px}.brand span{font-size:15px}}

/* Hero-Varianten */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero h1{margin-bottom:22px}
.hero .lead{color:#e6e6e6}
.hero-full{min-height:min(88vh,860px);display:flex;align-items:flex-end}
.hero-full>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.06);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.hero-full::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,13,15,.92) 0%,rgba(13,13,15,.72) 42%,rgba(13,13,15,.15) 80%),linear-gradient(0deg,rgba(13,13,15,.75),transparent 45%)}
.hero-full .in{position:relative;z-index:2;padding:120px var(--pad) clamp(48px,7vw,96px);max-width:1000px}
.loaded .hero-full>img{transform:scale(1)}
.hero-split{display:grid;grid-template-columns:1fr 1fr;min-height:min(86vh,840px)}
.hero-split .in{padding:clamp(56px,8vw,120px) var(--pad);display:flex;flex-direction:column;justify-content:center}
.hero-split .pic{position:relative;overflow:hidden}
.hero-split .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero-split.light{background:var(--paper);color:var(--ink)}
.hero-split.light .lead{color:var(--ink2)}
.hero-split.light .eyebrow{color:var(--acc-dk)}
@media(max-width:900px){
  .hero-split{grid-template-columns:1fr}
  .hero-split .pic{height:62vw;min-height:300px;order:-1}
  .hero-full{display:block;min-height:0}
  .hero-full>img{position:relative;height:68vw;min-height:250px;object-position:62% 40%;transform:none}
  .hero-full::after{display:none}
  .hero-full .in{padding:34px var(--pad) 52px}
}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;border-top:1px solid rgba(255,255,255,.18)}
.facts div{padding:20px 18px 4px 0}
.facts b{display:block;font-family:var(--h);font-stretch:112%;font-size:clamp(22px,2.2vw,30px);line-height:1.1;color:var(--acc)}
.facts span{font-size:14px;color:#cfcfcf}
.light .facts{border-color:var(--line)}
.light .facts b{color:var(--ink)}
.light .facts span{color:var(--mute)}
@media(max-width:620px){.facts{grid-template-columns:1fr 1fr}}

/* Kurz gesagt */
.tldr{background:var(--white);border-left:6px solid var(--acc);padding:30px 34px;max-width:980px}
.tldr h2{font-size:22px;margin-bottom:10px;text-transform:none}
.tldr p{font-size:18px}

/* Social-Band */
.social{background:var(--ink2);color:#fff;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.social h2{color:#fff}
.social .nums{display:flex;gap:40px;margin:28px 0 6px;flex-wrap:wrap}
.social .nums b{display:block;font-family:var(--h);font-stretch:112%;font-size:clamp(40px,4.4vw,64px);line-height:1;color:var(--acc)}
.social .nums span{font-size:14px;color:#bdbdbd;letter-spacing:.04em}
.social .chans{display:grid;gap:10px;margin-top:30px;max-width:520px}
.chan{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid #3a3a42;text-decoration:none;transition:border-color .2s,background .2s}
.chan:hover{border-color:var(--acc);background:#232329}
.chan svg{width:26px;height:26px;fill:#fff;flex:none}
.chan b{font-family:var(--h);font-stretch:112%;font-size:17px;letter-spacing:.03em}
.chan small{display:block;color:#a9a9a9;font-size:14px}
.chan i{margin-left:auto;font-style:normal;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.wall a{position:relative;display:block;aspect-ratio:3/4;overflow:hidden}
.wall a:first-child{grid-row:span 2;aspect-ratio:auto}
.wall img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.wall a:hover img{transform:scale(1.05)}
.wall a span{position:absolute;left:10px;bottom:10px;font-size:12px;font-weight:600;background:rgba(13,13,15,.8);padding:4px 8px}
@media(max-width:900px){.social{grid-template-columns:1fr}}

/* Zwei-Spalten-Text */
.cols{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
.cols.rev{grid-template-columns:1.1fr .9fr}
.cols .pic{position:relative;overflow:hidden}
.cols .pic img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cols .pic.wide img{aspect-ratio:4/3}
.cap{font-size:13px;color:var(--mute);margin-top:10px}
@media(max-width:900px){.cols,.cols.rev{grid-template-columns:1fr}}

/* Karten / Raster */
.grid{display:grid;gap:2px;background:var(--line);border:2px solid var(--line)}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.grid>*{background:var(--white);padding:30px 28px}
.num{font-family:var(--h);font-stretch:112%;font-weight:800;font-size:46px;line-height:1;color:var(--acc-dk);display:block;margin-bottom:14px}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.g4,.g3,.g2{grid-template-columns:1fr}}

/* Modelle */
.models{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);margin-top:40px}
.model{background:var(--white);display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);transition:border-color .2s,transform .25s}
.model:hover{border-color:var(--ink);transform:translateY(-3px)}
.model img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff}
.model .t{padding:18px 20px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px;flex:1}
.model h3{margin:0;font-size:20px}
.model .sp{font-size:14px;color:var(--mute)}
.model .pr{margin-top:auto;padding-top:10px;font-weight:600}
.model .pr s{color:var(--mute);font-weight:400;margin-left:6px;font-size:14px}
.tag{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;background:var(--acc-lt);color:var(--acc-dk)}
.tag.a1{background:#ececec;color:var(--ink)}
@media(max-width:1100px){.models{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.models{grid-template-columns:1fr 1fr;gap:10px}.model .t{padding:14px}.model h3{font-size:16px}}

/* Tabelle */
.tbl{width:100%;border-collapse:collapse;background:var(--white);font-size:15.5px}
.tbl th,.tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{background:var(--ink);color:#fff;font-family:var(--h);font-stretch:112%;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.tbl tbody tr:hover td{background:#fafaf6}
.tbl td:first-child{font-weight:600}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:32px;border:1px solid var(--line)}
.scroll .tbl{min-width:760px}
.note{font-size:14px;color:var(--mute);margin-top:14px;max-width:90ch}

/* Dunkle Sektion */
.dark{background:var(--ink);color:#fff}
.dark .mute{color:#bdbdbd}
.dark .grid{background:#2a2a30;border-color:#2a2a30}
.dark .grid>*{background:var(--ink2)}
.dark .num{color:var(--acc)}

/* Standorte */
.locs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px);margin-top:40px}
.loc{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column}
.loc .pic{overflow:hidden}
.loc .pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
.loc .t{padding:28px 30px 30px}
.loc h3{font-size:26px}
.loc address{font-style:normal;margin:6px 0 14px}
.loc dl{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;font-size:15px;margin:14px 0 22px}
.loc dt{color:var(--mute)}
.loc .btns{margin-top:auto}
.loc .btn{padding:13px 18px;font-size:13px}
@media(max-width:800px){.locs{grid-template-columns:1fr}}

/* Liste mit Haken */
.check{list-style:none;display:grid;gap:12px;margin-top:20px}
.check li{position:relative;padding-left:32px}
.check li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:9px;border-left:3px solid var(--acc-dk);border-bottom:3px solid var(--acc-dk);transform:rotate(-45deg)}
.dark .check li::before{border-color:var(--acc)}
.chips{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-weight:600}

/* FAQ */
.faq{max-width:980px;margin-top:30px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 48px 22px 0;position:relative;font-family:var(--h);font-stretch:112%;font-weight:700;font-size:clamp(18px,1.5vw,21px);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--acc-dk)}
.faq .a{padding:0 0 24px;max-width:78ch}

/* CTA */
.cta{background:var(--acc);color:var(--ink);display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.cta h2{margin-bottom:.3em}
.cta .btn{background:var(--ink);border-color:var(--ink);color:#fff}
.cta .btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.cta .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.cta .btn.ghost:hover{background:var(--ink);color:#fff}
@media(max-width:900px){.cta{grid-template-columns:1fr}}

/* Footer */
.ft{background:var(--ink);color:#cfcfcf;padding:64px var(--pad) 28px;font-size:15px}
.ft .row{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px}
.ft h3{color:#fff;font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.ft a{text-decoration:none}.ft a:hover{color:var(--acc)}
.ft ul{list-style:none;display:grid;gap:6px}
.ft .soc{display:flex;gap:10px;margin-top:16px}
.ft .soc a{display:grid;place-items:center;width:44px;height:44px;border:1px solid #3a3a42}
.ft .soc svg{width:20px;height:20px;fill:#fff}
.ft .soc a:hover{border-color:var(--acc)}
.ft .bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;border-top:1px solid #2a2a30;margin-top:44px;padding-top:22px;font-size:14px}
.ft .bot nav{display:flex;gap:20px}
@media(max-width:900px){.ft .row{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ft .row{grid-template-columns:1fr}}

/* Rechtsseiten */
.legal{max-width:860px;padding:var(--sec) var(--pad)}
.legal h1{font-size:clamp(36px,5vw,64px);margin-bottom:30px}
.legal h2{font-size:22px;text-transform:none;margin:34px 0 10px}

/* Eine Animation: sanftes Einblenden + Bild-Wischen */
.js .rv{opacity:0;translate:0 28px;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;translate:0 0}
.js .wipe img{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.js .wipe.in img{clip-path:inset(0 0 0 0)}
.js .stag>*{opacity:0;translate:0 22px;transition:opacity .7s ease,translate .7s ease}
.js .stag.in>*{opacity:1;translate:0 0}
.js .stag.in>*:nth-child(2){transition-delay:.08s}.js .stag.in>*:nth-child(3){transition-delay:.16s}.js .stag.in>*:nth-child(4){transition-delay:.24s}
.js .stag.in>*:nth-child(5){transition-delay:.32s}.js .stag.in>*:nth-child(6){transition-delay:.4s}.js .stag.in>*:nth-child(7){transition-delay:.48s}.js .stag.in>*:nth-child(8){transition-delay:.56s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .stag>*{opacity:1;translate:none;transition:none}
  .js .wipe img{clip-path:none;transition:none}
  .hero-full>img{transform:none;transition:none}
}
.hero-split>*,.social>*,.cols>*,.cta>*,.locs>*,.grid>*{min-width:0}
@media(max-width:620px){.wall{grid-template-columns:1fr 1fr}.wall a:first-child{grid-row:auto;aspect-ratio:3/4}.wall a:nth-child(n+5){display:none}.wall a span{display:none}.chan{padding:14px}.chan i{display:none}}
@media(max-width:360px){.hero .eyebrow{font-size:11px;letter-spacing:.1em}}

/* ===== v2 2026-11-10: Hero passt in den Laptop-Viewport ===== */
.hero-full,.hero-split{height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:540px;max-height:940px}
.hero-full{align-items:center}
.hero-full .in{padding:clamp(24px,4svh,56px) var(--pad)}
.hero-split .in{padding:clamp(24px,4svh,64px) var(--pad)}
.hero h1{font-size:clamp(34px,min(6vw,8.4svh),88px);margin-bottom:clamp(12px,2svh,22px)}
.hero .lead{font-size:clamp(16px,min(1.3vw,2.25svh),20px);max-width:56ch}
.hero .eyebrow{margin-bottom:clamp(10px,1.8svh,18px)}
.hero .btns{margin-top:clamp(16px,3.2svh,34px)}
.hero .btn{padding:clamp(12px,1.9svh,17px) 24px}
.hero .facts{margin-top:clamp(18px,3.6svh,44px)}
.hero .facts div{padding:clamp(10px,1.8svh,18px) 18px 0 0}
.hero .facts b{font-size:clamp(20px,min(2vw,3.4svh),30px)}
@media(max-width:900px){.hero-full,.hero-split{height:auto;max-height:none;min-height:0}}

/* Hero-Einstieg: gestaffelt + Startbild-Zoom */
@keyframes mk-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes mk-zoom{from{transform:scale(1.16)}to{transform:scale(1)}}
@keyframes mk-wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.hero-seq>*{animation:mk-up .9s cubic-bezier(.2,.7,.2,1) both}
.hero-seq>*:nth-child(2){animation-delay:.12s}.hero-seq>*:nth-child(3){animation-delay:.26s}.hero-seq>*:nth-child(4){animation-delay:.4s}.hero-seq>*:nth-child(5){animation-delay:.54s}
.hero-full>img{transform:none;transition:none;animation:mk-zoom 7s cubic-bezier(.15,.6,.25,1) both}
.hero-split .pic{animation:mk-wipe 1.2s cubic-bezier(.7,0,.2,1) .15s both}
.hero-split .pic img{animation:mk-zoom 7s cubic-bezier(.15,.6,.25,1) both}
.facts div{position:relative}
.facts div::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--acc);animation:mk-bar 1s ease 1s forwards}
.facts div:nth-child(2)::before{animation-delay:1.15s}.facts div:nth-child(3)::before{animation-delay:1.3s}.facts div:nth-child(4)::before{animation-delay:1.45s}
@keyframes mk-bar{to{width:48px}}

/* Scroll-Muster: Linie vor der Dachzeile, Bilder wischen + zoomen, Karten gestaffelt */
.eyebrow::before{content:"";display:inline-block;vertical-align:middle;height:2px;width:28px;background:currentColor;margin-right:10px;transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1) .2s}
.js .rv:not(.in) .eyebrow::before{transform:scaleX(0)}
.js .wipe img{transform:scale(1.16);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1),transform 1.8s cubic-bezier(.2,.7,.2,1)}
.js .wipe.in img{transform:scale(1)}
.js .stag>*{transform:scale(.97)}
.js .stag.in>*{transform:none;transition:opacity .7s ease,translate .7s ease,transform .7s ease}
.model img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.model:hover img{transform:scale(1.06)}
.model{overflow:hidden}
.grid>*{position:relative;transition:background .3s}
.grid>*::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .45s ease}
.grid>*:hover::after{transform:scaleX(1)}
.js .tbl tbody tr{opacity:0;translate:-16px 0;transition:opacity .5s ease,translate .5s ease}
.js .in .tbl tbody tr,.js .rv.in .tbl tbody tr{opacity:1;translate:0 0}
.js .in .tbl tbody tr:nth-child(2){transition-delay:.06s}.js .in .tbl tbody tr:nth-child(3){transition-delay:.12s}.js .in .tbl tbody tr:nth-child(4){transition-delay:.18s}.js .in .tbl tbody tr:nth-child(5){transition-delay:.24s}.js .in .tbl tbody tr:nth-child(6){transition-delay:.3s}.js .in .tbl tbody tr:nth-child(7){transition-delay:.36s}.js .in .tbl tbody tr:nth-child(8){transition-delay:.42s}.js .in .tbl tbody tr:nth-child(9){transition-delay:.48s}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.22);transform:translateX(-101%) skewX(-18deg);transition:transform .5s ease;z-index:-1}
.btn:hover::after{transform:translateX(101%) skewX(-18deg)}
.faq details[open] .a{animation:mk-up .45s ease both}

/* TikTok-Reel */
.social{display:block}
.soc-top{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,80px);align-items:end}
.soc-top .nums{margin-top:0}
.reel{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,20px);margin-top:clamp(36px,5vw,64px)}
.tt{margin:0}
.tt-frame{position:relative;aspect-ratio:9/16;overflow:hidden;background:#000;border-radius:10px;border:1px solid #33333b;cursor:pointer}
.tt-frame video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.tt:hover .tt-frame video{transform:scale(1.03)}
.tt-views{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;background:rgba(13,13,15,.78);padding:5px 9px;border-radius:4px}
.tt-views svg{width:13px;height:13px;fill:#fff}
.tt-frame::after{content:"";position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 rgba(132,188,4,.7);opacity:0;transition:opacity .3s}
.tt.playing .tt-frame::after{opacity:1;animation:mk-ping 1.6s infinite}
@keyframes mk-ping{70%{box-shadow:0 0 0 9px rgba(132,188,4,0)}100%{box-shadow:0 0 0 0 rgba(132,188,4,0)}}
.tt figcaption{padding-top:12px;font-size:14px;line-height:1.4}
.tt figcaption b{display:block;font-weight:600;margin-bottom:4px}
.tt figcaption a{color:var(--acc);text-decoration:none;font-weight:600;font-size:13px}
.tt figcaption a:hover{text-decoration:underline}
@media(max-width:1100px){.soc-top{grid-template-columns:1fr}}
@media(max-width:900px){.reel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);padding:0 var(--pad) 8px}.tt{flex:0 0 58vw;max-width:260px;scroll-snap-align:start}}
@media(prefers-reduced-motion:reduce){
  .hero-seq>*,.hero-full>img,.hero-split .pic,.hero-split .pic img,.facts div::before{animation:none}
  .facts div::before{width:48px}
  .js .wipe img,.js .stag>*{transform:none}
  .js .tbl tbody tr{opacity:1;translate:none}
  .js .rv:not(.in) .eyebrow::before{transform:none}
}
.stand{font-size:13px;color:var(--mute);margin-top:12px!important}
.about-sec{display:grid;grid-template-columns:minmax(0,980px) 1fr;gap:clamp(20px,3vw,48px);align-items:stretch}
.about{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:2px solid var(--line);align-self:start}
.about div{background:var(--white);padding:16px 18px}
.about dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acc-dk)}
.about dd{font-size:15px;line-height:1.4;margin-top:4px}
@media(max-width:1200px){.about-sec{grid-template-columns:1fr}}
@media(min-width:901px){.hero-split{grid-template-columns:1.12fr .88fr}}
.hero-split h1{font-size:clamp(30px,min(4.5vw,7.8svh),84px)}
.hero-split .lead{font-size:clamp(15px,min(1.2vw,2.2svh),19px)}
.hero-split .facts span{font-size:13px}
@media(max-width:620px){.hero .facts{grid-template-columns:1fr 1fr}}
.btn::after{transform:translateX(-140%) skewX(-18deg)}
.btn:hover::after{transform:translateX(140%) skewX(-18deg)}
.soc-top{align-items:end}
.social .nums{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(18px,3vw,44px);margin:0}
.social .nums b{font-size:clamp(28px,3.4vw,52px)}
.social .chans{display:grid;grid-template-columns:repeat(3,1fr);max-width:none;margin-top:clamp(28px,3.5vw,48px)}
@media(max-width:900px){.social .chans{grid-template-columns:1fr}}
@media(max-width:520px){.social .nums{grid-template-columns:repeat(3,1fr);gap:12px}.social .nums b{font-size:24px}.social .nums span{font-size:12px;line-height:1.3;display:block}}
.social .nums b{white-space:nowrap}
@media(max-width:900px){.reel{scroll-padding-left:var(--pad)}}
@media(max-width:520px){.social .nums b{font-size:22px}}
/* Performance: nur Transform/Opacity animieren (GPU) */
.hero-seq h1{animation-name:mk-rise}
@keyframes mk-rise{from{transform:translateY(30px)}to{transform:none}}
.hero-full>img,.hero-split .pic img{will-change:transform}
.hero-split .pic{animation:none}
.hero-split .pic::before{content:"";position:absolute;inset:0;z-index:2;background:var(--ink);transform-origin:100% 50%;animation:mk-cover 1.1s cubic-bezier(.7,0,.2,1) .15s both;pointer-events:none}
.hero-split.light .pic::before{background:var(--paper)}
@keyframes mk-cover{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.tt.playing .tt-frame::after{animation:none;box-shadow:0 0 0 3px rgba(132,188,4,.35)}
@media(prefers-reduced-motion:reduce){.hero-split .pic::before{display:none}.hero-seq h1{animation:none}}
@media(min-width:1101px){.soc-top{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.social .nums{grid-template-columns:repeat(3,minmax(0,max-content));justify-self:end}
.social .nums b{font-size:clamp(26px,2.9vw,50px)}
@media(max-width:1100px){.social .nums{justify-self:start}}
@media(max-width:520px){.social .nums{grid-template-columns:repeat(3,minmax(0,1fr))}.social .nums b{font-size:clamp(18px,5.6vw,22px)}}
@media(max-width:480px){h2{font-size:clamp(25px,7.6vw,34px)}h1,h2{hyphens:auto;-webkit-hyphens:auto}}
.loc-more address{margin:0 0 14px;font-size:15px;line-height:1.5}
.loc-more{background:var(--paper)}
.tbl td.best{font-weight:700;color:var(--acc-dk);background:var(--acc-lt)}
@media(max-width:420px){.about{grid-template-columns:1fr}}
.about dt{overflow-wrap:anywhere}
@media(min-width:1101px){.models:has(>:nth-child(5):last-child){grid-template-columns:repeat(5,1fr)}}
@media(min-width:600px){.nw{white-space:nowrap}}