/* ============================================================================
   SCHAAF GABELSTAPLER · neu-basis.css
   Sitewide-Basis des NEUEN, vom Kunden abgenommenen Designs (Referenz:
   /startseite-neu/ auf der Live-Domain): DaxPro, Rot #f80202, Topbar,
   weiße Header-Leiste, Dropdowns, Mobile-Drawer, Footer.
   Wird auf ALLEN Seiten nach main.css geladen; Sektions-Styles der neuen
   Startseite liegen separat in neu-startseite.css.
   ========================================================================== */

/* ── Tokens (Referenzwerte der abgenommenen Seite) ── */
:root {
  --f: calc(100vw / 1920);       /* Fluid-Faktor des 1920er-Layouts */
  --red:   #f80202;             /* Markenrot: Flächen, Balken, große Typo */
  /* Rot als FLÄCHE unter kleinem weißem Text: #f80202 ergibt nur 4,20:1
     (AA verlangt 4,5:1). --red-fill ist die gemessene Variante mit 5,66:1. */
  --red-fill: #d10000;
  /* Rot als kleiner TEXT auf der dunklen Footer-Fläche schafft AA nicht
     (2,03:1); dort steht --red-hell. */
  --red-hell: #ff7a7a;
  /* Rot als kleiner TEXT auf Weiß: 4,20:1 → --red-text mit 6,03:1 */
  --red-text: #c90000;
  --dark:  #4e4c4c;             /* Navigationstext auf Weiß */
  --dark-flaeche: #3a3838;      /* Footer-Fläche: auf #4e4c4c erreichte das
                                   helle Rot nur 3,38:1, jetzt 4,6:1 */
  --gray:  #707070;
  --light: #f2f2f2;
  --white: #ffffff;
  --font-dax: 'DaxPro', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ease-nav: cubic-bezier(.23,1,.32,1);
}

/* DaxPro (Agentur-Lizenz; nur Regular vorhanden, Fettungen synthetisch wie im Original) */
@font-face {
  font-family: 'DaxPro';
  src: url('/assets/fonts/daxpro-regular.woff2') format('woff2'),
       url('/assets/fonts/daxpro-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ════════════════════════════════════════════════════════════════════════
   KOPF (Topbar + weiße Leiste + Nav + Dropdowns) · Desktop ≥ 1024px
   Flow-Layout statt Absolut-Koordinaten des Originals, visuell identisch:
   Topbar 38px-äquiv., weiße Leiste bis 159px-äquiv., Nav zentriert, Versalien.
   ════════════════════════════════════════════════════════════════════════ */
.kopf { font-family: var(--font-dax); position: relative; z-index: 100; }
.kopf a { text-decoration: none; }

.topbar {
  height: clamp(30px, calc(38 * var(--f)), 46px);
  background: var(--red-fill);
  display: flex; align-items: center; justify-content: flex-end;
  /* seit dem Wegfall der Social-Icons (01.08.2026) beidseitig gleicher Rand */
  padding-inline: clamp(16px, calc(40 * var(--f)), 48px);
  gap: clamp(10px, calc(16 * var(--f)), 20px);
}
.topbar__claim {
  margin: 0 auto 0 0;
  color: var(--white);
  font-size: clamp(11px, calc(15 * var(--f)), 16px);
  font-weight: 300; letter-spacing: .04em;
}
.topbar__phone {
  color: var(--white);
  font-size: clamp(12px, calc(18 * var(--f)), 20px);
  font-weight: 300; letter-spacing: .05em; text-transform: uppercase;
}
.topbar__phone:hover { opacity: .85; }

.kopf__leiste {
  background: var(--white);
  display: flex; align-items: center;
  gap: clamp(16px, calc(36 * var(--f)), 48px);
  padding: 0 clamp(16px, calc(70 * var(--f)), 96px);
  min-height: clamp(64px, calc(112 * var(--f)), 124px);
  border-bottom: 1px solid rgba(0,0,0,.05);
  transition: min-height .3s var(--ease-nav);
}
.kopf__logo { flex: none; display: flex; align-items: center; }
.kopf__logo img { width: clamp(150px, calc(248 * var(--f)), 274px); height: auto; transition: width .3s var(--ease-nav); }

.kopf__nav {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, calc(28 * var(--f)), 36px);
  margin-inline: auto;
}
.kopf__mega-halter { position: relative; }
.kopf__nav a.kopf__punkt, .kopf__nav > a {
  position: relative;
  font-size: clamp(12px, calc(17 * var(--f)), 19px);
  font-weight: 400; color: var(--dark); text-transform: uppercase;
  white-space: nowrap; transition: color .22s;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 0;
}
/* Animierter Unterstrich statt reinem Farbwechsel */
.kopf__nav a.kopf__punkt::after, .kopf__nav > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: right center;
  transition: transform .32s var(--ease-nav);
}
.kopf__nav a.kopf__punkt:hover, .kopf__nav > a:hover,
.kopf__nav a[aria-current="page"] { color: var(--red-text); }
.kopf__nav a.kopf__punkt:hover::after, .kopf__nav > a:hover::after,
.kopf__nav a[aria-current="page"]::after,
.kopf__mega-halter:focus-within > .kopf__punkt::after { transform: scaleX(1); transform-origin: left center; }
.kopf__pfeil {
  width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease-nav);
}
.kopf__mega-halter:hover .kopf__pfeil,
.kopf__mega-halter:focus-within .kopf__pfeil { transform: rotate(-135deg) translate(-2px,-2px); }

/* CTA im Header */
.kopf__cta {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red-fill); color: var(--white);
  padding: clamp(9px, calc(13 * var(--f)), 15px) clamp(14px, calc(26 * var(--f)), 30px);
  border-radius: 10px;
  font-size: clamp(12px, calc(16 * var(--f)), 17px); font-weight: 700;
  white-space: nowrap;
  transition: background-color .25s, transform .25s, box-shadow .25s;
}
.kopf__cta:hover { background: #cf0101; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(248,2,2,.3); }

/* ── Mega-Menü ───────────────────────────────────────────────────────── */
.kopf__mega {
  /* Am Viewport zentriert statt am Nav-Punkt: verhindert Überlauf bei
     linken/rechten Menüpunkten. position:fixed, da .kopf sticky ist. */
  position: fixed; top: var(--kopf-unten, 132px); left: 50%; translate: -50% 0;
  width: min(1080px, 94vw);   /* vier Kategorie-Karten brauchen mehr Breite */
  background: var(--white);
  border-top: 3px solid var(--red);
  box-shadow: 0 26px 60px rgba(0,0,0,.18);
  border-radius: 0 0 18px 18px;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .26s var(--ease-nav), transform .26s var(--ease-nav), visibility .26s;
  z-index: 60;
}
.kopf__mega--schmal { width: min(720px, 94vw); }
.kopf__mega-halter:hover .kopf__mega,
.kopf__mega-halter:focus-within .kopf__mega { opacity: 1; visibility: visible; transform: translateY(0); }
.kopf__mega-inner { padding: clamp(18px, calc(26 * var(--f)), 30px); }

.kopf__mega-karten { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.kopf__mkarte {
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: var(--light); text-decoration: none;
  transition: transform .28s var(--ease-nav), box-shadow .28s var(--ease-nav);
}
.kopf__mkarte:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.14); }
.kopf__mkarte-bild { display: block; aspect-ratio: 16/10; overflow: hidden; background: #fff; }

.kopf__mkarte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease-nav); }
.kopf__mkarte:hover .kopf__mkarte-bild img { transform: scale(1.05); }
/* Logo-Variante der Mega-Karten (Geräte-Kategorien). Steht NACH den generischen
   Bild-Regeln: gleiche Spezifität, die spätere gewinnt – sonst schneidet
   object-fit:cover die Logos an (gesehen: „.EVA" statt ELEVAH). */
.kopf__mkarte-bild--logo { aspect-ratio: 16/7; display: flex; align-items: center; justify-content: center; padding: 14px 18px; }
.kopf__mkarte-bild--logo img { width: auto; height: auto; max-width: 82%; max-height: 52px; object-fit: contain; }
.kopf__mkarte:hover .kopf__mkarte-bild--logo img { transform: none; }
.kopf__mega-karten--vier { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* Fünf Kategorie-Karten (seit SVETRUCK, 02.09.2026): eigene Spaltenzahl und ein
   breiteres Panel, damit die Kartentexte nicht auf drei Zeilen laufen. */
.kopf__mega-karten--fuenf { grid-template-columns: repeat(5, minmax(0,1fr)); }
.kopf__mega--breit { width: min(1280px, 96vw); }
.kopf__mkarte-text { display: block; padding: 13px 15px 16px; }
.kopf__mkarte-text b { display: block; font-size: 17px; font-weight: 700; color: var(--dark); }
.kopf__mkarte:hover .kopf__mkarte-text b { color: var(--red-text); }
.kopf__mkarte-text span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--gray); }

.kopf__mega-liste { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 14px; }
.kopf__mega-liste a {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 13px; border-radius: 12px; text-decoration: none;
  transition: background-color .22s, transform .22s;
}
.kopf__mega-liste a:hover { background: rgba(248,2,2,.05); transform: translateX(3px); }
.kopf__mega-liste b { font-size: 15px; font-weight: 900; color: var(--red); line-height: 1.3; flex: none; }
.kopf__mega-liste span { display: block; font-size: 15px; font-weight: 700; color: var(--dark); line-height: 1.3; }
.kopf__mega-liste em { display: block; margin-top: 3px; font-style: normal; font-size: 13px; font-weight: 400; color: var(--gray); line-height: 1.4; }

.kopf__mega-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,.09);
}
.kopf__mega-fuss a { font-size: 14px; font-weight: 700; color: var(--dark); text-decoration: none; transition: color .2s; }
.kopf__mega-fuss a:hover { color: var(--red); }
.kopf__mega-portal { margin-left: auto; color: var(--red) !important; display: inline-flex; align-items: center; gap: 7px; }
.kopf__mega-portal::after {
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .25s;
}
.kopf__mega-portal:hover::after { transform: rotate(45deg) translate(2px,-2px); }

/* Kompakter Header nach dem Scrollen */
.kopf--klein .topbar { height: 0; overflow: hidden; }
.kopf--klein .kopf__leiste { min-height: clamp(56px, calc(78 * var(--f)), 86px); }
.kopf--klein .kopf__logo img { width: clamp(130px, calc(190 * var(--f)), 210px); }

@media (min-width: 1024px) {
  .kopf { position: sticky; top: 0; z-index: 1000; }
  .topbar { transition: height .3s var(--ease-nav); }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE NAV (fixe Leiste + Drawer mit Akkordeon) · < 1024px
   ════════════════════════════════════════════════════════════════════════ */
.mob-nav { display: none; }

@media (max-width: 1023.98px) {
  .kopf__leiste { display: none; }
  .topbar { justify-content: center; padding-right: 16px; height: 40px; }
  .topbar__claim { display: none; }
  .topbar__phone { font-size: 13px; }

  .mob-nav {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; left: 0; right: 0; height: 60px;
    background: var(--white); box-shadow: 0 2px 16px rgba(0,0,0,.12);
    padding: 0 16px; z-index: 2000;
    font-family: var(--font-dax);
  }
  .mob-nav__logo img { height: 28px; width: auto; }
  .mob-nav__right { display: flex; align-items: center; gap: 14px; }
  .mob-nav__ruf {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(248,2,2,.08); transition: background-color .2s;
  }
  .mob-nav__ruf svg { width: 20px; height: 20px; fill: var(--red); }
  .mob-nav__ruf:hover { background: rgba(248,2,2,.16); }
  .mob-nav__burger {
    display: flex; flex-direction: column; justify-content: space-between;
    width: 26px; height: 17px; background: none; border: none; cursor: pointer; padding: 0;
  }
  .mob-nav__burger span {
    display: block; height: 2.5px; background: var(--dark); border-radius: 2px;
    transition: transform .34s var(--ease-nav), opacity .2s;
    transform-origin: center;
  }
  .mob-nav--open .mob-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mob-nav--open .mob-nav__burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .mob-nav--open .mob-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mob-nav__drawer {
    display: flex; flex-direction: column;
    /* Unterkante der Leiste kommt per JS (--mobnav-unten): die Leiste ist
       sticky und rutscht beim Scrollen unter der Topbar hervor. */
    position: fixed; top: var(--mobnav-unten, 60px); left: 0; right: 0; bottom: 0;
    background: var(--white);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .3s var(--ease-nav), opacity .3s var(--ease-nav);
  }
  .mob-nav--open .mob-nav__drawer { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .mob-nav__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 12px; }

  .mob-nav__drawer a { display: block; text-decoration: none; }
  .mob-nav__haupt, .mob-nav__akk > summary {
    display: block; padding: 16px 20px;
    font-size: 21px; font-weight: 700; color: var(--dark);
    border-bottom: 1px solid rgba(0,0,0,.07);
    transition: color .2s, background-color .2s;
  }
  .mob-nav__haupt:hover, .mob-nav__akk > summary:hover { color: var(--red); background: rgba(248,2,2,.04); }
  .mob-nav__akk > summary { list-style: none; cursor: pointer; position: relative; padding-right: 54px; }
  .mob-nav__akk > summary::-webkit-details-marker { display: none; }
  .mob-nav__akk > summary::after {
    content: ""; position: absolute; right: 22px; top: 50%;
    width: 11px; height: 11px; border-right: 2.5px solid var(--red); border-bottom: 2.5px solid var(--red);
    transform: translateY(-70%) rotate(45deg); transition: transform .28s var(--ease-nav);
  }
  .mob-nav__akk[open] > summary { color: var(--red); }
  .mob-nav__akk[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
  .mob-nav__akk-inhalt { background: var(--light); padding: 4px 0; }
  .mob-nav__akk-inhalt a {
    padding: 13px 20px 13px 34px; font-size: 16px; font-weight: 400; color: var(--dark);
    border-bottom: 1px solid rgba(0,0,0,.05); position: relative;
  }
  .mob-nav__akk-inhalt a::before {
    content: ""; position: absolute; left: 20px; top: 50%; translate: 0 -50%;
    width: 6px; height: 6px; border-radius: 50%; background: var(--red); opacity: .45;
  }
  .mob-nav__akk-inhalt a:hover { color: var(--red); }
  .mob-nav__akk-inhalt a:last-child { border-bottom: none; }

  .mob-nav__fuss {
    flex: none; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(0,0,0,.09); background: var(--white);
    display: grid; gap: 12px;
  }
  .mob-nav__drawer-cta {
    background: var(--red-fill); color: var(--white) !important;
    text-align: center; padding: 15px 20px !important; border-radius: 10px;
    font-size: 17px !important; font-weight: 700 !important;
  }
  .mob-nav__phone {
    text-align: center; color: var(--red) !important;
    font-weight: 700 !important; font-size: 20px !important; padding: 4px 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   FOOTER (1:1-Portierung des abgenommenen Footers)
   ════════════════════════════════════════════════════════════════════════ */
.fussneu {
  font-family: var(--font-dax);
  background: var(--dark-flaeche); color: var(--white);
}
.fussneu a { text-decoration: none; color: inherit; transition: color .2s; }
.fussneu a:hover { color: var(--red); }
.fussneu__body {
  max-width: 1400px; margin-inline: auto;
  display: grid; gap: clamp(28px, 4vw, 64px);
  padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 60px) clamp(28px, 3vw, 48px);
}
@media (min-width: 800px) { .fussneu__body { grid-template-columns: 1.2fr 1fr 1.4fr; } }
.fussneu__logo-wrap { background: var(--white); display: inline-flex; padding: 10px 14px; border-radius: 6px; }
.fussneu__logo-wrap img { height: 34px; width: auto; }
.fussneu__tagline { margin: 18px 0 20px; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.85); max-width: 30ch; }
.fussneu__social { display: flex; gap: 12px; }
.fussneu__social a { display: flex; padding: 6px; }
.fussneu__social svg { width: 20px; height: 20px; fill: var(--white); transition: fill .2s; }
.fussneu__social a:hover svg { fill: var(--red); }
.fussneu__col h3 {
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.65); margin: 0 0 14px;
}
.fussneu__col--nav { display: grid; gap: 0; align-content: start; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.fussneu__col--nav h3 { grid-column: 1 / -1; }
.fussneu__col--nav a { padding: 6px 0; font-size: 15px; color: rgba(255,255,255,.9); }
.fussneu__locations { display: grid; gap: 18px; }
@media (min-width: 520px) { .fussneu__locations { grid-template-columns: 1fr 1fr; } }
.fussneu__location strong { display: block; color: var(--red-hell); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.fussneu__location p { margin: 0 0 6px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.85); }
.fussneu__location a { font-weight: 700; font-size: 16px; }
.fussneu__mail { display: inline-block; margin-top: 16px; font-size: 15px; color: rgba(255,255,255,.9); border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px; }
.fussneu__bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between;
  max-width: 1400px; margin-inline: auto;
  padding: 18px clamp(20px, 4vw, 60px) 22px;
  font-size: 13px; color: rgba(255,255,255,.78);
}
.fussneu__bottom-links { display: flex; gap: 18px; }
.fussneu__bottom-links a { color: rgba(255,255,255,.85); }

/* ── A11y-Ergänzungen (Modernisierung, unsichtbar im Normalzustand) ── */
.kopf a:focus-visible, .fussneu a:focus-visible, .mob-nav a:focus-visible,
.mob-nav__burger:focus-visible {
  outline: 3px solid var(--red); outline-offset: 2px; border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .kopf *, .mob-nav *, .fussneu * { transition-duration: .01ms !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   BILDFOKUS · object-position je Motiv (sitewide, greift über den Dateinamen)
   Warum: object-fit:cover schneidet ohne weitere Angabe immer aus der Mitte.
   Bei Hochformat-Fotos in breiten Rahmen (und umgekehrt) fällt das Motiv
   dadurch aus dem Ausschnitt – etwa beim Toyota an der Rampe, wo mittig nur
   die leere Torfläche steht. Die Werte unten setzen den Bildmittelpunkt auf
   das eigentliche Motiv. Prozentwerte: X Y, gemessen am Quellbild.
   Neue Bilder mit stark abweichendem Seitenverhältnis hier eintragen.
   ════════════════════════════════════════════════════════════════════════ */

/* Hochformat in breiten Rahmen: Motiv liegt unten (Stapler an der Rampe) */
img[src*="elektro-stapler-lkw-beladung"]      { object-position: 50% 88%; }
/* Fahrer sitzt im oberen Bilddrittel */
img[src*="lagertechnik-reflex-rangieren"]     { object-position: 50% 40%; }
img[src*="lagertechnik-bt-reflex-im-gang"]    { object-position: 50% 38%; }
/* Personen: auf Gesichtshöhe schneiden, nicht auf Hüfthöhe */
img[src*="geschaeftsfuehrer-dirk-marcel"]     { object-position: 50% 36%; }
/* Bediener steht links vom Gerät */
img[src*="lagertechnik-staxio-anwendung"]     { object-position: 42% 60%; }
img[src*="lagertechnik-levio-anwendung"]      { object-position: 45% 48%; }
/* Schwerlaststapler steht rechts der Bildmitte */
img[src*="spezialgeraete-svetruck-saegewerk"] { object-position: 56% 52%; }
img[src*="spezialgeraete-svetruck-ecs7h"]     { object-position: 50% 58%; }
img[src*="svetruck-schwerlaststapler"]        { object-position: 50% 58%; }
/* Startseite, Karte „Stapler mieten" (fast quadratisch): Ausschnitt auf den
   Traigo an der Laderampe, rechts im Lkw-Foto; das Foto läuft daneben
   unbeschnitten bei „Schnelle Verfügbarkeit" und auf /gabelstapler-mieten/ */
.needs__card img[src*="tieflader-anlieferung-mietstapler"] { object-position: 82% 55%; }
/* Querformat in hohen Rahmen: Lkw links der Mitte, Horizont unten */
img[src*="service-aussendienst-unterwegs"]    { object-position: 42% 58%; }
/* Gang mit Regalen: Fluchtpunkt leicht über der Mitte */
img[src*="service-ersatzteillager"]           { object-position: 50% 45%; }
/* Werkstattszenen: Arbeitshöhe statt Hallendach */
img[src*="werkstatt-detail-2023"]             { object-position: 50% 45%; }
img[src*="service-techniker-klemmbrett"]      { object-position: 50% 42%; }
img[src*="service-techniker-pruefung-toyota"] { object-position: 50% 45%; }
/* Regal-Einlagerung: Last und Fahrer sitzen unterhalb der Mitte */
img[src*="elektro-stapler-regal-einlagerung"] { object-position: 50% 60%; }
img[src*="holzlager-stapler-beladung"]        { object-position: 50% 85%; } /* Stapler unten im Quellbild */
img[src*="werkstatt-techniker-motorwartung"]  { object-position: 65% 50%; } /* Techniker rechts der Mitte (Startbox 0,69 + Prüftag 4/3) */
img[src*="werkstatt-pruefplan-besprechung-toyota80"]         { object-position: 50% 70%; } /* Besprechung untere Bildhälfte (UVV-Hero + Gebraucht-Band) */
/* Tonero-Holzhalle: Hero (Schulungen) hat nur horizontalen Spielraum – Fenster
   nach rechts, damit der Stapler links aus der Subline-Spalte rückt; im Band
   (Stapler & Lagertechnik) Fenster nach oben, Maschine über die Headline. */
.lp-hero__bg[src*="tonero-holztransport-halle"] { object-position: 100% 50%; }
.lp-band__bg[src*="tonero-holztransport-halle"] { object-position: 50% 28%; }
.lp-band__bg[src*="schulungsraum-theorie-seminar"] { object-position: 50% 62%; } /* Deckenraster kappen, Gruppe + Trainer halten */
.lp-band__bg[src*="schulungsraum-seminar-flipchart"] { object-position: 50% 62%; }   /* neues Kundenfoto 22.09.2026: Gruppe unten, Decke oben weicht */
.lp-fall img[src*="spezialgeraete-merlo-teleskop"] { object-position: 50% 88%; } /* nur Miet-Fallkarte: Merlo steht unten im Quellbild */
/* Panorama in fast quadratischem Rahmen: Gebäude sitzt rechts */
img[src*="schaaf-gelaende-herborn-luftaufnahme"] { object-position: 55% 50%; }
/* Straßenansicht: das Firmengebäude sitzt bei 38–55 % der Breite. Am Desktop
   entsteht kein Beschnitt (Bild und Hero-Kasten sind beide 3:2), auf dem Handy
   bleiben nur 42 % der Breite – X rückt das Gebäude dort in die Mitte. */
img[src*="unternehmen-standort-herborn"]      { object-position: 46% 58%; }
/* Flotten-Aufnahmen: Geräte stehen auf der unteren Bildhälfte, Hallendach bzw.
   Wolkenhimmel darf zuerst weichen */
img[src*="gemischte-flotte-betriebshof"]      { object-position: 50% 68%; }
img[src*="mietflotte-betriebshof"]            { object-position: 50% 62%; }
img[src*="mietflotte-beratung-halle"]         { object-position: 50% 60%; }
/* UVV-Prüfung: Prüfprotokoll und Messgerät liegen mittig-rechts */
/* Hochformat-Ladeszene in Querrahmen: Aktion liegt bei 55–92 % der Höhe */
img[src*="gabelstapler-mieten-kurzfristig"]   { object-position: 50% 88%; }
/* ── HERO-FOKUS ─────────────────────────────────────────────────────────────
   Eigene Werte NUR für die Hero-Bühne (.lp-hero__bg). Seit der Hero 25 % flacher
   ist (546 statt 727 px bei 1440 px), schneidet der Rahmen deutlich mehr Höhe
   weg – die drei Motive unten verloren ihr Hauptmotiv. Die Werte gelten
   absichtlich nicht für dieselben Dateien in Kacheln oder Kartenrahmen, dort
   stimmen die allgemeinen Werte weiter. Spezifität (Klasse + Attribut) schlägt
   die img[src*=…]-Regeln oben.
   ────────────────────────────────────────────────────────────────────────── */
/* Werkstatt-Duo: Köpfe sitzen im oberen Fünftel, mittig sah man nur Rümpfe */
/* Svetruck: bei 52 % war nur das Kabinendach im Bild, jetzt Maschine mit Rädern */
.lp-hero__bg[src*="spezialgeraete-svetruck-saegewerk"]  { object-position: 56% 74%; }
/* SVETRUCK-Kategorieseite: Querformat des Sägewerk-Motivs, Maschinen sitzen im
   unteren Drittel, Hallendach darf zuerst weichen */
.lp-hero__bg[src*="svetruck-saegewerk-schnittholz"]     { object-position: 50% 78%; }
/* Miet-Hero (Kundenfoto 02.09.2026, schwarzer SG-Lkw mit Traigo): Zugmaschine
   und Stapler in die obere Hälfte, Text steht auf dem Asphalt statt auf dem Lkw */
.lp-hero__bg[src*="tieflader-anlieferung-mietstapler"]  { object-position: 50% 56%; }
/* Kaufen-Hero (Kundenwunsch 02.09.2026: Text nicht auf den Geräten): Das
   Hallenfoto ist 2,2:1, der Rahmen 2,6:1 – kein Fokuswert trennt Text und
   Geräte. Deshalb wird das Bild nach oben geschoben (Geräte im oberen Teil),
   unten läuft es per Maske in den dunklen Verlauf aus, auf dem der Text steht.
   Ohne data-parallax, weil das Bild keinen Überstand mehr hat. */
.lp-hero--bildoben { background: #101010; }
.lp .lp-hero--bildoben .lp-hero__bg { top: -34%; bottom: auto; height: 100%; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }
/* ELEVAH: Kommissionierer auf der Bühne, Kopf lag genau auf der Schnittkante */
.lp-hero__bg[src*="elevah-kommissionierer-lagerhalle"]  { object-position: 50% 20%; }
/* BT-TYRO-Aktionsbild ist ein Composite mit Preisschild und zwei kleinen
   Einschüben oben. Mittig geschnitten hing einer halb im Rahmen; 90 % zeigt
   Preisschild und Gerät vollständig, die Einschübe liegen außerhalb. */
.lp-hero__bg[src*="bt-tyro-lhe-150-aktion"]             { object-position: 50% 90%; }
/* Kehrmaschine: Gelb-Kern liegt bei 33–69 % der Bildhöhe, Fenster 48 % */
.lp-hero__bg[src*="dulevo-reinigung-grosse-flaechen"]   { object-position: 50% 52%; }
/* Seitenstapler: Bulmor mit Stahlprofilen – Himmel oben wegschneiden */
.lp-hero__bg[src*="seitenstapler-bulmor-stahlhandling"] { object-position: 50% 78%; }
/* UVV + Jobs Mittelhessen: Technikerin arbeitet unten rechts im Quellbild */
.lp-hero__bg[src*="uvv-pruefung-technikerin"] { object-position: 50% 82%; }


/* Porträts: Kopf im oberen Bilddrittel */
.lp-person__bild img, .person__bild img       { object-position: 50% 22%; }

/* ════════════════════════════════════════════════════════════════════════════
   UMBRUCH · Zeilenfall von Überschriften und Fließtext (31.07.2026)
   Ausgangslage: Über die 38 Seiten gemessen brachen 9 Überschriften und
   Vorspänne so um, dass die letzte Zeile unter 28 % der längsten Zeile blieb –
   ein einzelnes Wort hing allein („… unter einem/Dach", „Ein Familienbetrieb,
   der Betriebe am Laufen/hält."). `balance` verteilt die Zeilen einer
   Überschrift gleichmäßig, `pretty` verhindert im Fließtext die Ein-Wort-
   Schlusszeile. Beides wird von älteren Browsern schlicht ignoriert.
   Steht sitewide, damit es auch die Startseite und die Bestands-Pattern trifft.
   ══════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4,
.display-xl, .display-l, .display-m, .display-s,
.lp-line, .lp-erklaer h2, .lp-band h2,
blockquote, figcaption, .lp-zahl span { text-wrap: balance; }
/* Vorspänne sind Fließtext: `balance` greift in Chrome nur bis sechs Zeilen und
   fällt darüber auf `wrap` zurück – der Mietseiten-Vorspann stand am Handy mit
   sieben Zeilen und einem einzelnen Wort am Schluss da. `pretty` kümmert sich
   genau um diese Schlusszeile, unabhängig von der Zeilenzahl. */
p, li, dd, address, .lp-hero__text, .lp-kopf__text, .lp-kurz__box p { text-wrap: pretty; }
/* Kein `nowrap` hier – überbreiter Inhalt weitet auf Handys den Layout-
   Viewport auf (Stolperfalle 10 in CLAUDE.md). */