/* ============================================================================
   LP-FRAMEWORK · abgenommenes Landingpage-Design (Basis: /elevah/, 28.07.2026)
   Genutzt von: /elevah/, /geraete/, /geraete/gabelstapler|lagertechnik|spezialgeraete/
   Scope .lp; Fonts Inter Variable lokal; Seiten-Body-Klasse: lp-seite.
   Erweiterungs-Pattern der Geräteseiten: assets/css/lp-geraete.css
   ========================================================================== */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* main.css begrenzt p/li auf Lesebreite; die LP setzt eigene Maße je Klasse.
   :where() hält die Spezifität bei 0-1-0, damit die LP-Regeln darunter gewinnen. */
.lp :where(p, li){max-width:none}

/* ============ ELEVAH Landingpage (Scope: .lp) ============ */
:root{
  --lp-red:#f80202;              /* Markenrot: Flächen, Balken, große Typo */
  --lp-red-hover:#cf0101;
  /* ── Kontrast-Varianten des Markenrots ──────────────────────────────────
     #f80202 erreicht als Textfarbe nirgends AA: auf Weiß 4,20:1, auf #f2f2f2
     3,75:1, auf der dunklen Karte 3,42:1 (nötig sind 4,5:1 für Text unter
     19 px). Deshalb drei abgeleitete Werte – gemessen, nicht geschätzt:
       --lp-red-text  kleiner roter Text auf hellen Flächen  (5,4–6,0:1)
       --lp-red-hell  kleiner roter Text auf dunklen Flächen (5,7–8,3:1)
       --lp-red-fill  rote FLÄCHE unter kleinem weißem Text  (weiß 5,66:1)
     Große Typo (≥ 24 px bzw. ≥ 19 px fett) darf --lp-red behalten: dort
     genügen 3:1. Kontext-Umschalter ist --lp-akzent (siehe unten). */
  --lp-red-text:#c90000;
  --lp-red-hell:#ff7a7a;
  --lp-red-fill:#d10000;
  --lp-black:#000000;
  --lp-anthrazit:#4e4c4c;        /* Textfarbe auf hellem Grund */
  --lp-flaeche-dunkel:#3a3838;   /* dunkle Sektionsfläche (war #4e4c4c: dort
                                    scheiterten Silber 3,62:1 und Rot 2,03:1) */
  --lp-card:#2a2a2a;
  --lp-light:#f2f2f2;
  --lp-grau:#666666;             /* war #707070 → auf #f2f2f2 nur 4,42:1 */
  --lp-silber:#aca8a8;
  --lp-hellgrau:#989898;
  --lp-altrosa:#bc9999;         /* nur auf dunklem Grund (dort 8,2:1) */
  --lp-altrosa-dunkel:#9d7070;  /* dieselbe Rosé-Nuance für helle Flächen:
                                   #bc9999 auf #f2f2f2 war 2,30:1 (Großtext
                                   braucht 3:1), jetzt 3,76:1 */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lp *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
body.lp-seite{background:#fff}
.lp{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--lp-anthrazit);background:#fff;font-size:1rem;line-height:1.5;
    --lp-akzent:var(--lp-red-text)}   /* helle Umgebung; dunkle Flächen schalten auf --lp-red-hell um */
.lp *,.lp *::before,.lp *::after{box-sizing:border-box}
.lp :where(h1,h2,h3,p){margin:0;font-family:inherit}
.lp img{display:block;max-width:100%;height:auto}
.lp a:focus-visible{outline:3px solid var(--lp-red);outline-offset:3px;border-radius:4px}
.lp .lp-dark a:focus-visible,.lp .lp-hero a:focus-visible{outline-color:#fff}

/* Skip-Link */
.lp-skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--lp-red);color:#fff;padding:10px 18px;font-family:'Inter',sans-serif}
.lp-skip:focus{left:8px;top:8px}

/* Buttons */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;width:269px;max-width:100%;min-height:42px;padding:9px 18px;border-radius:10px;background:var(--lp-red-fill);color:#fff;font-size:clamp(1rem,.94vw,1.125rem);font-weight:400;line-height:1.2;text-align:center;text-decoration:none;transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease}
.lp-btn:hover{background:var(--lp-red-hover);transform:translateY(-2px);box-shadow:0 6px 18px rgba(248,2,2,.28)}
.lp-btn:active{transform:translateY(0) scale(.97);transition-duration:.12s}
.lp-btn--ghost{background:#fff;color:var(--lp-anthrazit);border:1px solid var(--lp-anthrazit)}
.lp-btn--ghost:hover{background:var(--lp-light);box-shadow:0 6px 18px rgba(0,0,0,.15)}
@media (hover:none){.lp-btn:hover{transform:none;box-shadow:none;background:var(--lp-red-fill)}.lp-btn--ghost:hover{background:#fff}}

/* ============ Scroll-Animationen ============ */
/* Reveal (fade + rise) — nur mit JS aktiv, damit ohne JS alles sichtbar bleibt */
.js .lp [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js .lp [data-reveal].is-visible{opacity:1;transform:none}
/* Zeilenweises Einblenden */
.js .lp [data-lines] .lp-line{display:block;opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js .lp [data-lines].is-visible .lp-line{opacity:1;transform:none}
/* Gestaffelte Verzögerung für Gruppen und Zeilen */
.js .lp [data-lines] .lp-line:nth-child(2){transition-delay:.09s}
.js .lp [data-lines] .lp-line:nth-child(3){transition-delay:.18s}
.js .lp [data-lines] .lp-line:nth-child(4){transition-delay:.27s}
.js .lp [data-stagger]>*{transition-delay:calc(var(--i,0)*70ms)}
/* Parallax: Versatz läuft über die eigenständige CSS-Property `translate`.
   Wichtig, weil `transform` schon von der Reveal-Transition belegt ist – sonst
   überschreiben sich beide und das Bild zappelt gegen das Einblenden.
   `will-change` setzt lp-motion.js nur, solange ein Bild im Blickfeld ist. */
.lp-compare__media{position:relative}
/* Parallax-Überstand nur ab Desktop; auf Mobile bleiben die Original-Ausschnitte erhalten */
@media (min-width:1024px){
  /* Überstand von 130 % auf 118 % reduziert: Beim flacheren Hero (546 statt
     727 px) schnitt der Überstand 23 % der Bildhöhe weg, jetzt 15 %. Die
     Parallax-Amplitude leitet lp-motion.js aus dem Überstand ab und bleibt
     mit ~48 px ausreichend. */
  .js .lp img.lp-hero__bg[data-parallax]{left:0;right:0;top:-9%;bottom:auto;width:100%;height:118%}
  .js .lp .lp-compare__media img[data-parallax]{position:absolute;top:-10%;left:0;width:100%;height:120%}
  .js .lp .lp-solutions__item img[data-parallax]{top:-8%;bottom:auto;left:0;right:0;width:100%;height:116%}
}
/* Hover-Lift der Produktbilder (nicht parallax-gebunden) */
@media (hover:hover) and (pointer:fine){
  .lp-model__img img{transition:transform .4s var(--ease-out)}
  .lp-model:hover .lp-model__img img{transform:translateY(-10px) scale(1.02)}
}
@media (prefers-reduced-motion:reduce){
  .js .lp [data-reveal],.js .lp [data-lines] .lp-line{opacity:1;transform:none;transition:none}
  .js .lp [data-parallax]{translate:none!important}
}

/* ============ Hero ============ */
/* Höhe 25 % reduziert (war clamp(560px,50.6vw,1100px) = 727 px bei 1440 px
   Viewport, also 81 % der Bildschirmhöhe). Der Inhalt braucht nur 255–393 px,
   der Rest war leere Bildfläche. */
.lp-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(420px,38vw,825px);padding:120px clamp(20px,4.95vw,95px) clamp(32px,2.66vw,51px);overflow:hidden}
.lp img.lp-hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
/* Verlauf hinter dem Hero-Text. Vorher 56,4 % hoch und von TRANSPARENTEM WEISS
   nach Schwarz: im oberen Textbereich lag der Fließtext dadurch fast ungeschützt
   auf hellen Bildzonen (gemessen bis 1,1:1 auf der Luftaufnahme). Jetzt 86 % hoch
   und durchgehend aus Schwarz aufgebaut – Bildwirkung bleibt, der Text steht. */
.lp-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:76%;z-index:-1;background:linear-gradient(180deg,rgba(3,3,3,0) 0%,rgba(3,3,3,.30) 45%,rgba(3,3,3,.70) 100%)}
.lp-hero__inner{width:100%;max-width:1730px;margin:0 auto}
.lp-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,577px);gap:32px clamp(24px,3vw,60px);align-items:end}
/* Unterseiten-Hero: Titel bewusst rund 12 % kleiner als der Startseiten-Hero.
   Der Bildstreifen ist seit der Höhenkorrektur flacher, ein Titel in
   Startseitengröße erschlägt darin den Rest. */
.lp-hero h1{font-size:clamp(1.8125rem,3.2vw,3.75rem);line-height:1.06;font-weight:500;color:var(--lp-light);text-shadow:0 1px 2px rgba(0,0,0,.45), 0 4px 18px rgba(0,0,0,.55);max-width:1232px}
.lp-hero h1 b{font-weight:900}
.lp-hero__text{font-size:clamp(1.125rem,1.25vw,1.5rem);line-height:1.43;font-weight:500;color:var(--lp-light);text-shadow:0 1px 2px rgba(0,0,0,.5), 0 3px 14px rgba(0,0,0,.6)}
.lp-hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px clamp(20px,1.4vw,27px);margin-top:clamp(40px,3.6vw,69px)}
/* Halbhoher Hero MIT Foto: für Seiten, auf denen der Inhalt sofort kommen soll
   (Kontakt, Standorte). Kein Vollbild-Auftritt, aber Bildwirkung bleibt.
   Nicht mit .lp-hero--kompakt verwechseln – das ist die Variante ohne Foto. */
.lp-hero--halb{min-height:clamp(300px,29vw,470px);padding-top:clamp(52px,4.4vw,80px)}
.lp-hero--halb h1{font-size:clamp(1.75rem,3.2vw,3.75rem)}
.lp-hero--halb .lp-hero__text{font-size:clamp(1.0625rem,1.25vw,1.5rem)}
.lp-hero--halb::after{height:74%}
/* Bis 1199 px statt 1023 px einspaltig: Bei 1024 px blieb für die Überschrift
   nur eine ~350 px schmale Spalte neben dem 577-px-Vorspann – die ELEVAH-H1
   lief dort auf sechs Zeilen mit einem einzelnen Wort am Schluss. */
@media (max-width:1199px){
  .lp-hero__grid{grid-template-columns:1fr}
  .lp-hero{padding-top:64px}
  .lp-hero h1{line-height:1.08}
}

/* ============ Vergleich: Leiter / Stapler / ELEVAH ============ */
.lp-compare{background:var(--lp-black);padding:clamp(56px,4.53vw,87px) clamp(20px,3vw,40px) clamp(96px,15.4vw,296px)}
.lp-compare__inner{max-width:1594px;margin:0 auto}
.lp-compare h2{font-size:clamp(1.75rem,2.34vw,2.8125rem);line-height:normal;font-weight:400;color:var(--lp-light);text-align:center;max-width:1060px;margin:0 auto;text-wrap:balance}
.lp-compare__row{display:grid;grid-template-columns:minmax(0,1020fr) minmax(0,551fr);gap:23px;margin-top:42px}
.lp-compare__row:first-of-type{margin-top:clamp(48px,3.85vw,74px)}
.lp-compare__media{border-radius:32px;overflow:hidden}
.lp-compare__media img{width:100%;height:100%;object-fit:cover}
.lp-compare__card{background:var(--lp-card);border-radius:29px;padding:clamp(32px,2.6vw,50px) clamp(24px,1.6vw,31px) clamp(32px,2.1vw,40px);display:flex;flex-direction:column}
.lp-compare__card h3{font-size:clamp(3rem,4.69vw,5.625rem);line-height:normal;font-weight:500;color:var(--lp-silber)}
.lp-compare__card h3 b{color:var(--lp-red);font-weight:900;text-transform:uppercase}
.lp-compare__sub{font-size:clamp(1.125rem,1.25vw,1.5rem);line-height:1.5;font-weight:400;color:var(--lp-silber);margin-top:28px;max-width:520px}
.lp-compare__body{font-size:clamp(1rem,.94vw,1.125rem);line-height:1.34;font-weight:400;color:var(--lp-silber);margin-top:clamp(36px,3.4vw,65px);max-width:479px}
.lp-compare__card--highlight .lp-compare__sub,
.lp-compare__card--highlight .lp-compare__body{color:var(--lp-light)}
@media (max-width:1023px){
  .lp-compare__row{grid-template-columns:1fr}
  .lp-compare__media img{aspect-ratio:1020/518}
}

/* ============ Lösungen (2x2 Grid) ============ */
.lp-solutions{background:var(--lp-flaeche-dunkel);padding:clamp(48px,2.92vw,56px) 0 clamp(56px,3vw,60px)}
.lp-solutions h2{font-size:clamp(2rem,3.125vw,3.75rem);line-height:1.17;font-weight:400;color:var(--lp-light);text-align:center;max-width:991px;margin:0 auto;padding:0 20px}
.lp-solutions__sub{font-size:clamp(1.125rem,1.25vw,1.5rem);line-height:3.125;font-weight:400;color:#fff;text-align:center;max-width:1452px;margin:16px auto 0;padding:0 20px}
.lp-solutions__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 14px;max-width:1868px;margin:40px auto 0;padding:0 clamp(16px,1.35vw,26px)}
.lp-solutions__item{position:relative;aspect-ratio:927/601;overflow:hidden}
.lp-solutions__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Fläche war --lp-silber #aca8a8; der weiße Text darauf erreichte nur
   2,35:1. Dunkle Platte über dem Foto: 14,3:1, gleiche Formsprache. */
.lp-solutions__caption{position:absolute;left:0;right:0;bottom:0;min-height:28.8%;background:var(--lp-card);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(14px,1.3vw,25px) clamp(20px,5vw,110px)}
.lp-solutions__caption h3{font-size:clamp(1.375rem,1.67vw,2rem);line-height:normal;font-weight:400;color:#fff}
.lp-solutions__caption p{font-size:clamp(1rem,1.04vw,1.25rem);line-height:normal;font-weight:400;color:#fff;max-width:617px;margin-top:4px}
@media (max-width:1023px){
  .lp-solutions__grid{grid-template-columns:1fr}
  .lp-solutions__sub{line-height:1.7}
  .lp-solutions__item{aspect-ratio:auto}
  .lp-solutions__item img{position:static;width:100%;height:auto;aspect-ratio:927/428}
  .lp-solutions__caption{position:static;min-height:0;padding:20px 24px 24px}
}

/* ============ Modelle / Produkte ============ */
.lp-models{background:#fff}
.lp-models__band{background:var(--lp-light);padding:clamp(32px,2.2vw,42px) 20px clamp(36px,2.5vw,48px);text-align:center}
.lp-models__band h2{font-size:clamp(2.25rem,3.65vw,4.375rem);line-height:1.29;font-weight:500;color:var(--lp-altrosa-dunkel);max-width:1320px;margin:0 auto;text-wrap:balance}
.lp-models__quote{font-size:clamp(1.25rem,1.46vw,1.75rem);line-height:1.29;font-weight:500;color:var(--lp-anthrazit);max-width:867px;margin:clamp(20px,2vw,38px) auto 0}
.lp-models__arrow{width:clamp(160px,15.1vw,290px);height:clamp(88px,8.4vw,161px);margin:-1px auto 0;background:var(--lp-light);clip-path:polygon(0 0,100% 0,50% 100%)}
.lp-models__intro{font-size:clamp(1.125rem,1.25vw,1.5rem);line-height:normal;font-weight:500;color:var(--lp-anthrazit);text-align:center;max-width:727px;margin:clamp(48px,4.6vw,88px) auto 0;padding:0 20px}
.lp-models__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px clamp(24px,2vw,40px);align-items:end;max-width:1810px;margin:clamp(40px,3.2vw,61px) auto 0;padding:0 clamp(20px,2vw,40px) clamp(48px,3.8vw,73px)}
.lp-model{display:flex;flex-direction:column;align-items:center;text-align:center}
.lp-model__img{display:flex;align-items:flex-end;justify-content:center;width:100%}
.lp-model__img img{width:auto;max-width:100%}
.lp-model--80e .lp-model__img img{max-height:526px}
.lp-model--65 .lp-model__img img{max-height:541px}
.lp-model--51 .lp-model__img img{max-height:454px}
.lp-model__specs{font-size:clamp(1rem,.94vw,1.125rem);line-height:normal;font-weight:400;color:var(--lp-anthrazit);margin-top:14px;min-height:4.2em}
.lp-model__specs b{font-weight:900}
.lp-model .lp-btn{margin-top:22px}
@media (max-width:767px){
  .lp-models__grid{grid-template-columns:1fr;gap:56px}
  .lp-model__specs{min-height:0}
  .lp-model--80e .lp-model__img img,.lp-model--65 .lp-model__img img,.lp-model--51 .lp-model__img img{max-height:min(70vw,460px)}
}

/* ============ Partner ============ */
.lp-partner{background:var(--lp-black);padding:clamp(88px,11.9vw,228px) 20px clamp(64px,5.2vw,100px);text-align:center}
.lp-partner__eyebrow{font-size:clamp(1.125rem,1.25vw,1.5rem);line-height:normal;font-weight:500;color:var(--lp-light)}
.lp-partner h2{font-size:clamp(2.5rem,4.17vw,5rem);line-height:1.125;font-weight:500;color:var(--lp-altrosa);max-width:1258px;margin:8px auto 0}
.lp-partner__list{list-style:none;margin:clamp(48px,4.85vw,93px) auto 0;padding:0;max-width:1248px}
.lp-partner__list li{font-size:clamp(1.375rem,2.5vw,3rem);line-height:1.28;font-weight:500;color:#fff}
.lp-partner__text{font-size:clamp(1.125rem,1.25vw,1.5rem);line-height:normal;font-weight:500;color:var(--lp-hellgrau);max-width:1133px;margin:clamp(40px,4vw,77px) auto 0}
.lp-partner__text b{font-weight:500;color:var(--lp-light)}

/* ============ CTA ============ */
.lp-cta{background:#fff;padding:clamp(72px,8.2vw,157px) clamp(20px,2vw,40px) clamp(96px,11.8vw,227px)}
.lp-cta__card{background:var(--lp-light);border-radius:32px;max-width:1369px;margin:0 auto;padding:clamp(40px,3.2vw,62px) clamp(24px,4vw,60px) clamp(36px,2.4vw,47px);text-align:center}
.lp-cta__card h2{font-size:clamp(1.75rem,2.34vw,2.8125rem);line-height:normal;font-weight:400;color:var(--lp-grau)}
.lp-cta__card p{font-size:clamp(1rem,.94vw,1.125rem);line-height:1.5;font-weight:400;color:var(--lp-anthrazit);margin-top:14px}
.lp-cta__card .lp-btn{margin-top:clamp(32px,3.4vw,66px)}

/* ════════════════════════════════════════════════════════════════════════════
   KONTRAST · Akzent-Umschaltung und dunkle Flächen
   Warum: Das Markenrot #f80202 erreicht als Textfarbe unter 19 px nirgends die
   AA-Schwelle 4,5:1 (Weiß 4,20 · #f2f2f2 3,75 · Karte 3,42 · #4e4c4c 2,03).
   Rote Textregeln nutzen daher var(--lp-akzent); hier steht, welcher Wert auf
   welcher Fläche gilt. Voreinstellung (.lp) ist --lp-red-text für helle Flächen.
   Flächen, die Rot tragen (Buttons, Balken, große Zahlen), bleiben unverändert.
   ══════════════════════════════════════════════════════════════════════════ */
.lp-compare, .lp-compare__card, .lp-solutions, .lp-partner,
.lp-zahlen, .lp-vorteile, .lp-vorteil, .lp-band, .lp-hero,
.lp-sektion--dunkel, .lp-sektion--anthrazit,
.lp-fall, .lp-standort, .lp-portal, .lp-sprung, .lp-branche, .askizze,
.lp-kurz--dunkel, .lp-sektion--dunkel + .lp-kurz, .lp-loesung--dunkel,
.lp-tabelle thead th, .lp-lkarte__liste, .lp-warum__karte, .lp-skarte, .lp-vollband,
.lp .sektion--kohle, .lp .sektion--stahl, .lp .hinweis-band--kohle,
.lp table.matrix thead th, .lp .portal
  { --lp-akzent: var(--lp-red-hell); }

/* Helle Karten, die auch in dunklen Abschnitten stehen können, zurückschalten */
.lp-btn--ghost, .lp-models__band, .lp-cta__card, .lp-erklaer, .lp-produkt,
.lp-tabelle-rahmen, .lp-form, .lp-form__karte, .lp-weg, .lp-loesung__karte,
.formular-karte, .lp-faqform__karte, .lp-sektion--grau .lp-standort,
.lp .spec, .lp .klasse-karte, .lp .stapel__karte, .lp .tabelle-rahmen,
.lp .person, .lp .akkordeon details, .lp .weiche__karte, .lp .bento__feld,
.lp .formular-karte, .lp .form-rahmen
  { --lp-akzent: var(--lp-red-text); }

/* … und deren dunkle Varianten wieder auf die helle Rot-Variante */
.lp-sektion--dunkel .lp-leistung, .lp-sektion--anthrazit .lp-leistung,
.lp-sektion--dunkel .lp-person, .lp-sektion--anthrazit .lp-person,
.lp-sektion--dunkel .lp-faq details, .lp-sektion--anthrazit .lp-faq details,
.lp-loesung--dunkel .lp-loesung__karte,
.lp .sektion--kohle .person, .lp .sektion--stahl .person,
.lp .sektion--kohle .spec, .lp .sektion--stahl .spec,
.lp .sektion--kohle .klasse-karte, .lp .sektion--kohle .stapel__karte,
.lp .sektion--kohle .akkordeon details, .lp .sektion--stahl .akkordeon details,
.lp .sektion--kohle .weiche__karte, .lp .sektion--kohle .bento__feld
  { --lp-akzent: var(--lp-red-hell); }

/* Dunkle Sektionsfläche: #4e4c4c war als Fläche zu hell (Silber 3,62:1,
   Rot 2,03:1). --lp-flaeche-dunkel bringt Silber auf 5,0:1 und die helle
   Rot-Variante auf 4,6:1. --lp-anthrazit bleibt unverändert Textfarbe. */
.lp-sektion--anthrazit, .lp-solutions, .lp-zahlen, .lp .sektion--stahl
  { background: var(--lp-flaeche-dunkel); }

/* Mobil sitzt der Hero-Text höher im Verlauf (gestapeltes Grid, kein
   Parallax-Überstand) und kam über hellen Bildzonen nur auf 3,2–4,0:1.
   Höhere Spezifität als .lp-hero--tief::after, damit die Regel für alle
   Hero-Varianten greift, unabhängig von der Dateireihenfolge. */
@media (max-width: 1023px) {
  .lp .lp-hero::after {
    height: 96%;
    background: linear-gradient(180deg, rgba(3,3,3,0) 0%, rgba(3,3,3,.55) 30%, rgba(3,3,3,.9) 100%);
  }
}

/* Gleiches Thema im Vollbreiten-Bildband: mobil steht die Headline höher im
   Verlauf (gemessen 2,7:1 auf /geraete/lagertechnik/, nötig sind 3:1). */
@media (max-width: 1023px) {
  .lp .lp-band::after {
    background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.58) 40%, rgba(0,0,0,.86) 100%);
  }
}

/* Das kleine Eyebrow-Label sitzt oben im Hero, wo der Verlauf noch offen ist.
   Über hellen Bildzonen (Himmel, weiße Hallenwand) kam es auf 1,4–4,0:1 – seit
   die Heros flacher sind, auch am Desktop. Es bekommt deshalb auf allen Breiten
   eine eigene Unterlage; auf dunklen Motiven fällt sie nicht auf. */
.lp .lp-hero__eyebrow {
  background: rgba(3,3,3,.66);
  padding: 5px 11px 5px 9px;
  border-radius: 5px;
}

/* ════════════════════════════════════════════════════════════════════════════
   RHYTHMUS · vertikale Abstände zwischen Textbausteinen (31.07.2026)
   Gemessen über alle 38 Seiten bei 1440 und 390 px: Ein Abstand unter rund
   0,25 em der größeren beteiligten Schrift liest sich als „geklebt".
   Die Regeln greifen über NACHBARSCHAFT, nicht über Wrapper-Klassen. Grund:
   Die Eyebrow-Label stehen mal in .sektion-kopf, mal in einem nackten div –
   und nur die erste Variante hatte einen Abstand (0 px statt 12 px auf sieben
   Seiten). em statt px, damit der Abstand mit der Überschrift mitwächst.
   Steht in lp.css, weil das die einzige Datei ist, die jede LP-Seite lädt.
   ══════════════════════════════════════════════════════════════════════════ */
.lp :where(.label, .kennziffer, .lp-kopf__eyebrow, .lp-erklaer__eyebrow, .lp-hero__eyebrow,
     .lp-portal__eyebrow, .lp-weg__label, .lp-fall__label, .lp-kurz__label,
     .lp-partner__eyebrow, .lp-solutions__eyebrow, .lp-models__eyebrow)
  + :is(h1, h2, h3, h4) { margin-top: .32em; }

/* Überschrift → Fließtext: 8 px unter einer 34-px-Zeile war zu wenig.
   `p:not([class])` trifft nur Absätze OHNE eigenes Pattern – so bleibt z. B.
   `.lp-compare__sub` mit seinen 28 px unangetastet. */
/* Bewusst clamp() statt em: Ziel der Regel ist der ABSATZ, `em` würde sich
   also an dessen 15–19 px orientieren (0,32 em = 5 px) statt an der 28–46 px
   großen Überschrift darüber. */
.lp :where(h2, h3, .display-xl, .display-l, .display-m, .display-s) + p:not([class]) { margin-top: clamp(11px, 1.1vw, 18px); }
.lp .lp-cta__card h2 + p { margin-top: clamp(12px, 1.2vw, 20px); }
.lp .lp-loesung h2 + .lp-loesung__claim { margin-top: clamp(13px, 1.25vw, 21px); }
.lp .bento__inhalt .display-s + p { margin-top: clamp(9px, .85vw, 14px); }
.lp .hinweis-band :where(h3, .h3) + p { margin-top: clamp(8px, .7vw, 12px); }
.lp .hinweis-band p + :where(.text-link, .knopf) { margin-top: .6em; }
.lp .hinweis-band .label + p { margin-top: .55em; }

/* Titel → nachgestelltes Label (Produktkarten der Detailseiten) */
.lp .lp-produkt h3 + .lp-produkt__typ { margin-top: .3em; }
.lp .lp-solutions__item h3 + p { margin-top: clamp(8px, .8vw, 13px); }

/* Hinweiszeilen unter Rastern und Tabellen hingen ohne Abstand am Block */
.lp :where(.lp-katalog, .lp-ukat, .lp-marken, .lp-produkte__grid) + :where(p, .lp-katalog__hinweis, .lp-produkte__hinweis) { margin-top: clamp(16px, 1.5vw, 26px); }
.lp .tabelle-rahmen + .tabelle-hinweis { margin-top: 12px; }
.lp :where(button, .knopf, .lp-btn) + .formular__meta { margin-top: 14px; }

/* Aufzählungen ohne eigenes Abstands-Pattern */
.lp :where(.lp-produkt, .lp-fall, .lp-weg) li + li { margin-top: 7px; }