/* ============================================================
   MMHP Produkt-Landingpages — gemeinsame Formsprache (SSOT)
   Scope: .mmhp-lp — geteilt von EA288, EA189, 2l-TDI-Umruestung.
   Basis = Mitnehmer-LP-Formsprache, OHNE Bildvergleich-Slider,
   Zeitstrahl und Fahrzeugliste (die bleiben Mitnehmer-spezifisch).
   Die Mitnehmer-LP nutzt bewusst weiter ihre eigene Inline-CSS
   (.mmhp-lp-mitnehmer) und ist von dieser Datei NICHT betroffen.
   ============================================================ */
.mmhp-lp{
  --bg:#121211;
  --s1:#1a1a19;
  --s2:#201f1e;
  --tx:#f0f0f0;
  --tx2:rgba(255,255,255,.7);
  --tx3:rgba(255,255,255,.55);
  --hair:rgba(255,255,255,.12);
  --green:#c7ff3f;
  --f:'Lexend',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-family:var(--f);font-weight:400;font-size:15.5px;line-height:1.65;
  color:var(--tx2);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  margin:0;padding:0;
}
.mmhp-lp *{margin:0;padding:0;box-sizing:border-box}
.mmhp-lp ::selection{background:var(--tx);color:var(--bg)}
.mmhp-lp a{color:inherit}
.mmhp-lp img{max-width:100%;display:block}
.mmhp-lp strong{font-weight:600;color:var(--tx)}
.mmhp-lp .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Layout-Skelett */
.mmhp-lp .wrap{max-width:1120px;margin:0 auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}
.mmhp-lp .mono-label{font-family:var(--f);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--tx3)}
.mmhp-lp .num{font-variant-numeric:tabular-nums}

/* Buttons: dunkle Platte, grüner Text, harte Kante. */
.mmhp-lp .btn{font-family:var(--f);font-size:13.5px;font-weight:600;letter-spacing:.02em;text-decoration:none;display:inline-flex;align-items:center;gap:10px;padding:14px 26px;background:#0e0e0d;color:var(--green);border:1px solid rgba(199,255,63,.45);cursor:pointer;transition:border-color .18s ease,background .18s ease}
.mmhp-lp .btn svg{width:14px;height:14px;flex:none}
.mmhp-lp .btn:hover{border-color:var(--green);background:#0a0a09}
.mmhp-lp .btn:focus-visible,
.mmhp-lp .vidbtn:focus-visible,
.mmhp-lp .vc-allow:focus-visible,
.mmhp-lp .vc-open:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ---------- HERO — Titel links, Video rechts ---------- */
.mmhp-lp .hero{padding:clamp(60px,9vw,120px) 0 0}
.mmhp-lp .hgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:clamp(32px,5.5vw,80px);align-items:center}
.mmhp-lp .hero h1{font-family:var(--f);font-weight:800;font-size:clamp(30px,4.6vw,58px);letter-spacing:-.04em;line-height:1.05;color:var(--tx)}
.mmhp-lp .hero h1 .vline{display:block;font-weight:300;letter-spacing:-.02em;color:var(--tx2);font-size:.5em;line-height:1.3;margin-top:.6em}
.mmhp-lp .hero h1 .vline .vmark{color:var(--green);font-weight:600}
.mmhp-lp .hlead{margin-top:20px;font-size:15px;color:var(--tx2);max-width:54ch}

/* Video: externe Fassade (iframe erst nach Klick) + natives Self-Hosted-Video */
.mmhp-lp .vid{background:var(--s1);border:1px solid var(--hair)}
.mmhp-lp .vstage{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mmhp-lp .vstage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mmhp-lp .vstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0e0e0d}
.mmhp-lp .vidbtn{appearance:none;background:#0e0e0d;color:var(--green);border:1px solid rgba(199,255,63,.45);width:76px;height:76px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .18s ease,background .18s ease}
.mmhp-lp .vidbtn:hover{border-color:var(--green);background:#0a0a09}
.mmhp-lp .vidbtn svg{width:24px;height:24px}
.mmhp-lp .vidfoot{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--hair);padding:10px 14px;font-family:var(--f);font-size:9px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3)}
.mmhp-lp .vid noscript a{color:var(--tx2)}
/* Consent-Zeile: nur sichtbar, wenn Consent-API vorhanden und "media" noch nicht erlaubt */
.mmhp-lp .vconsent{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;border-top:1px solid var(--hair);padding:10px 14px}
.mmhp-lp .vconsent[hidden]{display:none}
.mmhp-lp .vc-allow{appearance:none;font-family:var(--f);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--green);background:#0e0e0d;border:1px solid rgba(199,255,63,.35);padding:7px 12px;cursor:pointer;transition:border-color .18s ease}
.mmhp-lp .vc-allow:hover{border-color:var(--green)}
.mmhp-lp .vc-open{appearance:none;background:none;border:none;font-family:var(--f);font-size:11px;color:var(--tx3);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mmhp-lp .vc-open:hover{color:var(--tx)}
/* Hero-Kurzclip: natives Autoplay-Loop-Video (kein data-src/Consent), natuerliches Seitenverhaeltnis, kein Crop, keine Beschriftung */
.mmhp-lp .heroclip{overflow:hidden}
.mmhp-lp .heroclip video{display:block;width:100%;height:auto}

/* ---------- KENNZAHLEN-BAND ---------- */
.mmhp-lp .statband{margin-top:clamp(48px,7vw,88px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.mmhp-lp .stats{display:grid;grid-template-columns:repeat(4,1fr)}
.mmhp-lp .stat{padding:clamp(24px,3.6vw,40px) clamp(12px,2vw,24px);border-left:1px solid var(--hair);text-align:center}
.mmhp-lp .stat:first-child{border-left:none}
.mmhp-lp .stat .z{position:relative;display:inline-block;font-family:var(--f);font-weight:800;font-size:clamp(28px,3.8vw,52px);letter-spacing:-.04em;line-height:1;color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.mmhp-lp .stat .z::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-.16em;width:.62em;height:3px;background:var(--green)}
.mmhp-lp .stat .l{font-family:var(--f);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);margin-top:14px}

/* ---------- Abschnitts-Bausteine ---------- */
.mmhp-lp .sec{padding:clamp(64px,9vw,130px) 0 0}
.mmhp-lp .shead .stop{display:flex;align-items:center;gap:14px}
.mmhp-lp .sicon{flex:none;width:24px;height:24px;color:var(--tx3)}
.mmhp-lp .sicon .acc{stroke:var(--green)}
.mmhp-lp .snum{flex:none;font-family:var(--f);font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--tx3)}
.mmhp-lp .shead .sline{flex:1 1 auto;height:1px;background:linear-gradient(90deg,rgba(199,255,63,.55),var(--hair) 70%)}
.mmhp-lp .shead h2{font-family:var(--f);font-weight:700;font-size:clamp(26px,3.6vw,46px);letter-spacing:-.035em;line-height:1.1;color:var(--tx);margin-top:14px}
.mmhp-lp .shead .sub4{font-family:var(--f);font-weight:500;font-size:clamp(14px,1.7vw,17px);letter-spacing:.04em;text-transform:uppercase;color:var(--green);margin-top:10px}
.mmhp-lp .secintro{margin-top:18px;font-size:15px;color:var(--tx2);max-width:64ch}
.mmhp-lp .copy p{margin-top:16px;font-size:15px;color:var(--tx2);max-width:66ch}
.mmhp-lp .copy p:first-child{margin-top:0}
.mmhp-lp .tgrid{display:grid;grid-template-columns:minmax(220px,.55fr) 1.45fr;gap:clamp(28px,5vw,76px);align-items:start;margin-top:clamp(28px,4.5vw,48px)}
.mmhp-lp .tgrid .ghead{position:sticky;top:clamp(24px,4vh,48px)}
.mmhp-lp .tgrid .ghead h4{font-family:var(--f);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.mmhp-lp .tgrid .ghead h2{font-family:var(--f);font-weight:700;font-size:clamp(24px,3vw,36px);letter-spacing:-.03em;line-height:1.12;color:var(--tx);margin-top:12px;max-width:15ch}

/* ---------- Bild-Bausteine: Einzelbild + Zweier-Reihe ---------- */
.mmhp-lp .leadfig{margin-top:clamp(28px,4.5vw,48px);background:var(--s1);border:1px solid var(--hair)}
.mmhp-lp .leadfig img{width:100%;height:auto}
.mmhp-lp .leadfig figcaption{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--hair);padding:10px 14px;font-family:var(--f);font-size:9px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3)}
.mmhp-lp .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px);margin-top:clamp(28px,4.5vw,48px)}
.mmhp-lp .duo figure{background:var(--s1);border:1px solid var(--hair)}
.mmhp-lp .duo img{width:100%;height:auto}
.mmhp-lp .duo figcaption{border-top:1px solid var(--hair);padding:9px 12px;font-family:var(--f);font-size:9px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3)}

/* ---------- OBSOLESZENZ — Text + Kennzahl-Platte ---------- */
.mmhp-lp .obsostat{background:var(--s2);border:1px solid var(--hair);border-top:1px solid rgba(199,255,63,.5);padding:clamp(20px,3vw,32px);margin-top:24px}
.mmhp-lp .obsostat .z{font-family:var(--f);font-weight:800;font-size:clamp(44px,5vw,64px);letter-spacing:-.04em;line-height:1;color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.mmhp-lp .obsostat .l{font-family:var(--f);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);margin-top:10px}

/* ---------- VERBESSERUNGEN — Zwischenkapitel ---------- */
.mmhp-lp .verb{margin-top:clamp(64px,9vw,130px);padding:clamp(64px,9vw,120px) 0 clamp(48px,7vw,88px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.mmhp-lp .verb h1{font-family:var(--f);font-weight:800;font-size:clamp(34px,5vw,64px);letter-spacing:-.04em;line-height:1.04;color:var(--tx);margin-top:14px}
.mmhp-lp .verb .verbsub{margin-top:18px;font-size:clamp(15px,1.8vw,17px);color:var(--tx2);max-width:64ch}
.mmhp-lp .wornfig{margin-top:clamp(28px,4.5vw,48px);background:var(--s1);border:1px solid var(--hair)}
.mmhp-lp .wornfig img{width:100%;height:auto}
.mmhp-lp .wornfig figcaption{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--hair);padding:10px 14px;font-family:var(--f);font-size:9px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3)}

/* ---------- ABSCHLUSS-CTA ---------- */
.mmhp-lp .buy{padding:clamp(64px,9vw,120px) 0 clamp(72px,10vw,130px)}
.mmhp-lp .buypanel{border:1px solid var(--hair);border-top:1px solid rgba(199,255,63,.5);padding:clamp(28px,5vw,64px);position:relative;background:var(--s2)}
.mmhp-lp .buypanel::before{content:"";position:absolute;top:-1px;left:0;width:64px;height:1px;background:var(--green)}
.mmhp-lp .buypanel .buyh{font-family:var(--f);font-weight:700;font-size:clamp(24px,3.2vw,40px);letter-spacing:-.035em;line-height:1.1;color:var(--tx);margin-top:14px;max-width:24ch}
.mmhp-lp .buypanel .buysub{margin-top:16px;font-size:15px;color:var(--tx2);max-width:62ch}
.mmhp-lp .buypanel .btn{margin-top:26px}

/* ---------- Scroll-Reveal — reines Enhancement ---------- */
/* Ohne JS und bei reduced-motion ist alles sofort sichtbar (kein .js am Root / Regel unten). */
.mmhp-lp.js .rev{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.mmhp-lp.js .rev.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .mmhp-lp .btn,.mmhp-lp .vidbtn,.mmhp-lp .vc-allow{transition:none}
  .mmhp-lp.js .rev{opacity:1;transform:none;transition:none}
}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .mmhp-lp .hgrid{grid-template-columns:1fr;gap:36px}
  .mmhp-lp .tgrid{grid-template-columns:1fr;gap:22px}
  .mmhp-lp .tgrid .ghead{position:static}
  .mmhp-lp .tgrid .ghead h2{max-width:none}
}
@media(max-width:820px){
  .mmhp-lp .stats{grid-template-columns:1fr 1fr}
  .mmhp-lp .stat{border-left:none}
  .mmhp-lp .stat:nth-child(even){border-left:1px solid var(--hair)}
  .mmhp-lp .stat:nth-child(n+3){border-top:1px solid var(--hair)}
}
@media(max-width:620px){
  .mmhp-lp .duo{grid-template-columns:1fr}
}

/* ============ TOOL-TEASER (Kachel) + POPUP ============
   Ausgelagert (ADR-029, Welle 2) nach _static/css/mmhp-tool-embed.css —
   autark & wrapper-neutral, weil der Teaser auch auf der Lösungsfinder-LP
   (.mmhp-lp-lf, andere CSS-Basis) und später auf der Technologie-Seite läuft.
   assemble-dist injiziert die Datei zusammen mit dem Marker MMHP_TOOL_TEASER. */