/* ============================================================================
   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)); }
.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%; }
/* 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%; }
/* 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*="uvv-werkstatt-besprechung"]         { 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-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%; }
/* 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). */