/* ============================================================================
   SCHAAF GABELSTAPLER · neu-startseite.css
   1:1-Port der vom Kunden abgenommenen Startseite (/startseite-neu/).
   Angepasst: Header/Footer/Mobile-Nav liegen sitewide in neu-basis.css,
   Hero-Geometrie um die Header-Leiste (159*--f) reduziert, Bildpfade lokal.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* main.css begrenzt p auf Lesebreite (fester rem-Wert). In den pixelfixierten
   Sektionen kollidiert das mit den vw-skalierten Spalten: Bei 1920 px war die
   Hero-Subline 608 statt 900 Einheiten breit und brach in die CTAs. Die
   Startseite setzt ihre Breiten selbst. */
.startneu p { max-width: none; }
/* --f: 1 Figma pixel = calc(100vw/1920).  Usage: calc(N * var(--f)) */
:root {
  --f: calc(100vw / 1920);
  --red:   #f80202;
  --dark:  #4e4c4c;
  --gray:  #707070;
  --light: #f2f2f2;
  --white: #ffffff;
}

body { font-family: 'DaxPro', sans-serif; overflow-x: hidden; background: var(--white); }

img { display: block; max-width: none; }

a { text-decoration: none; color: inherit; }
/* Skip link */
.skip-link {
  position: absolute;
  top: -9999px; left: 0;
  background: var(--red); color: var(--white);
  padding: 8px 16px; z-index: 9999; border-radius: 0 0 4px 0;
  font-size: 14px; font-family: 'DaxPro', sans-serif;
}

.skip-link:focus { top: 0; }
/* Focus ring for accessibility */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
/* ═══════════════════════════════════════════════════
   HERO  (y 0–1081 px)
   All children are absolute – topbar + header + hero
   content all share y=0 origin.
═══════════════════════════════════════════════════ */
.hero {
  position: relative;
  height: calc(692 * var(--f));   /* 25 % flacher (war 922); alle Inhalts-Offsets unten um dieselben 230 nach oben gezogen, damit die Komposition erhalten bleibt */
  overflow: hidden;
}
/* Kontrast-Unterlage: Die abgenommene Vorlage stellt weißen Text ohne jede
   Abdunklung auf das Foto – gemessen 2,12:1 (Headline), 2,70:1 (Subline) und
   1,61:1 (Häkchenliste), AA verlangt 3:1 bzw. 4,5:1. Weicher Verlauf von unten,
   oben nur leicht: Das Bild bleibt sichtbar, der Text steht. Liegt über dem
   Bild (z-index 3) und unter den Textebenen (z-index 4). */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,8,.12) 0%, rgba(8,8,8,.36) 42%, rgba(8,8,8,.72) 100%);
}

/* Background image fills full 1081 px */
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* Der flachere Hero (692 statt 922) schnitt bei „center top" den Stapler
     mittig durch – Räder und Boden fehlten. 32 % zeigt ihn vollständig. */
  object-fit: cover; object-position: 50% 32%;
}
/* Partner-Logo-Strip (Logofahne): y=169, x=1501, w=480, h=82 */
.hero__partners {
  position: absolute;
  top: calc(10 * var(--f));
  right: 0;
  width: calc(490 * var(--f));
  height: calc(82 * var(--f));
  background: var(--white);
  border-radius: calc(8 * var(--f));
  display: flex; align-items: center; justify-content: space-around;
  padding: 0 calc(12 * var(--f));
  z-index: 8;
}

.hero__partners img {
  /* Modernisierung: Logos passen in die Box (Referenz hatte Overflow rechts) */
  height: auto; width: auto;
  max-height: calc(40 * var(--f));
  max-width: calc(86 * var(--f));
  object-fit: contain;
}

.hero__partners img.tall { max-height: calc(62 * var(--f)); }
/* Hero headline (y=619, x=153) */
.hero__headline {
  position: absolute;
  top: calc(230 * var(--f));
  left: calc(153 * var(--f));
  width: calc(974 * var(--f));
  font-size: calc(65 * var(--f));
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 calc(3 * var(--f)) calc(6 * var(--f)) rgba(0,0,0,.16);
  line-height: 1.1;
  z-index: 4;
}
/* Hero subtext (y=816, x=145) */
.hero__sub {
  position: absolute;
  top: calc(427 * var(--f));
  left: calc(145 * var(--f));
  /* 832 war exakt an der Umbruchkante: bei 1920 px fiel das letzte Wort in
     eine 4. Zeile und lief in den CTA. 900 endet vor der Häkchenspalte (1057)
     und hält den Text auf drei Zeilen. */
  width: calc(900 * var(--f));
  font-size: calc(28 * var(--f));
  font-weight: 500;
  color: var(--white);
  text-shadow: 0 calc(3 * var(--f)) calc(6 * var(--f)) rgba(0,0,0,.16);
  line-height: calc(40 * var(--f));
  z-index: 4;
}
/* Checkmarks (y=870, x=1057) */
.hero__checks {
  position: absolute;
  top: calc(481 * var(--f));
  left: calc(1057 * var(--f));
  width: calc(634 * var(--f));
  font-size: calc(28 * var(--f));
  font-weight: 500;
  color: var(--white);
  text-shadow: 0 calc(3 * var(--f)) calc(6 * var(--f)) rgba(0,0,0,.16);
  line-height: calc(60 * var(--f));
  z-index: 4;
}
/* Button "Angebot anfordern" (y=968, x=142, w=346, h=71) */
.hero__btn-red {
  position: absolute;
  top: calc(579 * var(--f));
  left: calc(142 * var(--f));
  width: calc(346 * var(--f));
  height: calc(71 * var(--f));
  background: var(--red-fill);
  border: calc(1 * var(--f)) solid var(--gray);
  border-radius: calc(10 * var(--f));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(30 * var(--f));
  font-weight: 500;
  color: var(--white);
  box-shadow: 0 calc(3 * var(--f)) calc(6 * var(--f)) rgba(0,0,0,.16);
  z-index: 4;
  cursor: pointer;
}
/* Button "Geräte ansehen" (y=967, x=501, w=346, h=71) */
.hero__btn-white {
  position: absolute;
  top: calc(578 * var(--f));
  left: calc(501 * var(--f));
  width: calc(346 * var(--f));
  height: calc(71 * var(--f));
  background: var(--white);
  border: calc(1 * var(--f)) solid var(--gray);
  border-radius: calc(10 * var(--f));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(30 * var(--f));
  font-weight: 500;
  color: var(--gray);
  box-shadow: 0 calc(3 * var(--f)) calc(6 * var(--f)) rgba(0,0,0,.16);
  z-index: 4;
  cursor: pointer;
}
/* ═══════════════════════════════════════════════════
   NEEDS  (y 1081–2154, h=1073 px)
═══════════════════════════════════════════════════ */
.needs {
  position: relative;
  height: calc(926 * var(--f));
  background: var(--white);
  overflow: hidden;
}
/* Headline (y=1165 → section y=84) */
.needs__headline {
  position: absolute;
  top: calc(84 * var(--f));
  left: 0; right: 0;
  text-align: center;
  font-size: calc(45 * var(--f));
  font-weight: 900;
  color: var(--dark);
}
/* Subtext (y=1250 → section y=169) */
.needs__sub {
  position: absolute;
  top: calc(169 * var(--f));
  left: 0; right: 0; margin-inline: auto;
  width: calc(1144 * var(--f));
  text-align: center;
  font-size: calc(24 * var(--f));
  color: var(--dark);
  line-height: 1.5;
}
/* Cards: seit der 4. Karte (Service, 01.08.2026) vierspaltig: w=410, Lücke 35,
   Ränder 87 – Summe 4·410+3·35+2·87 = 1919 ≈ Designraster */
.needs__card {
  position: absolute;
  top: calc(336 * var(--f));
  width: calc(410 * var(--f));
  height: calc(445 * var(--f));
  border-radius: calc(27 * var(--f));
  overflow: hidden;
}

.needs__card { display: block; color: inherit; text-decoration: none; }
.needs__card:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.needs__card:nth-child(3) { left: calc(87 * var(--f)); }

.needs__card:nth-child(4) { left: calc(532 * var(--f)); }

.needs__card:nth-child(5) { left: calc(977 * var(--f)); }

.needs__card:nth-child(6) { left: calc(1422 * var(--f)); }

.needs__card > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Der Verlauf der Vorlage dunkelt nur den Fuß der Karte ab. Die weiße
   Überschrift sitzt aber OBEN im Bild und kam dort auf 1,0–2,9:1 Kontrast
   (gemessen, AA verlangt 4,5:1) – bei „Individuelle Lösungen“ weiß auf der
   weißen Freistellfläche des Composites also praktisch unsichtbar. Zweite
   Verlaufsstufe von oben (62 % Schwarz, endet bei 42 %) hebt alle drei Labels
   über 4,5:1, ohne die Bildaussage anzutasten. */
.needs__card__grad {
  position: absolute; inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(10,10,10,.46) 0%,
      rgba(10,10,10,.36) 28%,
      rgba(10,10,10,0) 50%
    ),
    linear-gradient(
      359.65deg,
      rgba(78,76,76,0) 35.761%,
      rgba(16,15,15,.5) 99.549%
    );
}

.needs__card__label {
  position: absolute;
  top: calc(32 * var(--f));
  left: 0; right: 0;
  text-align: center;
  font-size: calc(42 * var(--f));   /* 60 passte zur 551er-Karte, 410 braucht kleiner */
  font-weight: 500;
  color: var(--light);
  text-transform: uppercase;
  line-height: 1.15;
  padding: 0 calc(8 * var(--f));
}

.needs__btn {
  position: absolute;
  top: calc(722 * var(--f));
  height: calc(36 * var(--f));
  background: var(--white);
  border: calc(1 * var(--f)) solid var(--gray);
  border-radius: calc(10 * var(--f));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(24 * var(--f));
  font-weight: 700;
  color: var(--gray);
  text-transform: uppercase;
  cursor: pointer;
}

.needs__btn:nth-child(7)  { left: calc(144 * var(--f)); width: calc(296 * var(--f)); }

.needs__btn:nth-child(8)  { left: calc(589 * var(--f)); width: calc(296 * var(--f)); }

.needs__btn:nth-child(9)  { left: calc(1034 * var(--f)); width: calc(296 * var(--f)); }

.needs__btn:nth-child(10) { left: calc(1479 * var(--f)); width: calc(296 * var(--f)); }
/* ═══════════════════════════════════════════════════
   WHY SCHAAF  (y 2154–3983, h=1829 px)
═══════════════════════════════════════════════════ */
.why {
  position: relative;
  height: calc(1829 * var(--f));
  background: var(--dark);
  overflow: hidden;
}

.why__headline {
  position: absolute;
  top: calc(56 * var(--f));
  left: 0; right: 0; margin-inline: auto;
  width: calc(795 * var(--f));
  text-align: center;
  font-size: calc(60 * var(--f));
  color: var(--white);
  line-height: 1.2;
}

.why__sub {
  position: absolute;
  top: calc(244 * var(--f));
  left: 0; right: 0; margin-inline: auto;
  width: calc(1237 * var(--f));
  text-align: center;
  font-size: calc(24 * var(--f));
  color: var(--white);
  line-height: 1.5;
}

.why__title-1 {
  position: absolute;
  top: calc(484 * var(--f));
  left: calc(75 * var(--f));
  width: calc(751 * var(--f));
  text-align: center;
}

.why__title-1 .t { font-size: calc(36 * var(--f)); line-height: 1.15; color: var(--white); text-transform: uppercase; margin-bottom: calc(8 * var(--f)); }

.why__title-1 .s { font-size: calc(20 * var(--f)); color: var(--white); line-height: 1.5; }

.why__img-tieflader {
  position: absolute;
  top: calc(607 * var(--f));
  left: calc(49 * var(--f));
  width: calc(803 * var(--f));
  height: calc(501 * var(--f));
  border-radius: calc(32 * var(--f));
  object-fit: cover;
}

.why__img-7307 {
  position: absolute;
  top: calc(1131 * var(--f));
  left: calc(204 * var(--f));
  width: calc(648 * var(--f));
  height: calc(464 * var(--f));
  border-radius: calc(32 * var(--f));
  object-fit: cover;
}

.why__title-3 {
  position: absolute;
  top: calc(1606 * var(--f));
  left: calc(204 * var(--f));
  width: calc(648 * var(--f));
  text-align: center; /* wie Titel 1/2/4 – saß als einziger linksbündig */
}

.why__title-3 .t { font-size: calc(36 * var(--f)); line-height: 1.15; color: var(--white); text-transform: uppercase; margin-bottom: calc(8 * var(--f)); }

.why__title-3 .s { font-size: calc(20 * var(--f)); color: var(--white); line-height: 1.5; }

.why__title-2 {
  position: absolute;
  top: calc(486 * var(--f));
  left: calc(975 * var(--f));
  width: calc(798 * var(--f));
  text-align: center;
}

.why__title-2 .t { font-size: calc(36 * var(--f)); line-height: 1.15; color: var(--white); text-transform: uppercase; margin-bottom: calc(8 * var(--f)); }

.why__title-2 .s { font-size: calc(20 * var(--f)); color: var(--white); line-height: 1.5; }

.why__img-werkstatt {
  position: absolute;
  top: calc(607 * var(--f));
  left: calc(876 * var(--f));
  width: calc(1001 * var(--f));
  height: calc(411 * var(--f));
  border-radius: calc(32 * var(--f));
  object-fit: cover;
  object-position: center top;
}

.why__img-dirk {
  position: absolute;
  top: calc(1042 * var(--f));
  left: calc(876 * var(--f));
  width: calc(744 * var(--f));
  height: calc(553 * var(--f));
  border-radius: calc(32 * var(--f));
  object-fit: cover;
}

.why__title-4 {
  position: absolute;
  top: calc(1611 * var(--f));
  left: calc(905 * var(--f));
  width: calc(686 * var(--f));
  text-align: center;
}

.why__title-4 .t { font-size: calc(36 * var(--f)); line-height: 1.15; color: var(--white); text-transform: uppercase; margin-bottom: calc(8 * var(--f)); }

.why__title-4 .s { font-size: calc(20 * var(--f)); color: var(--white); line-height: 1.5; }
/* ═══════════════════════════════════════════════════
   SECTORS  (y 3983–5831, h=1848 px)
═══════════════════════════════════════════════════ */
.sectors {
  position: relative;
  height: calc(1848 * var(--f));
  background: var(--white);
  overflow: hidden;
}

.sectors__headline {
  position: absolute;
  top: calc(165 * var(--f));
  left: 0; right: 0;
  text-align: center;
  font-size: calc(45 * var(--f));
  color: var(--gray);
  text-transform: uppercase;
}

.sectors__sub {
  position: absolute;
  top: calc(261 * var(--f));
  left: 0; right: 0; margin-inline: auto;
  width: calc(1036 * var(--f));
  text-align: center;
  font-size: calc(24 * var(--f));
  color: var(--dark);
  line-height: 1.5;
  text-wrap: balance; /* Zweizeiler symmetrisch – wirkte sonst linkslastig */
}

.sectors__img-1 {
  position: absolute;
  top: calc(405 * var(--f)); left: calc(10 * var(--f));
  width: calc(945 * var(--f)); height: calc(639 * var(--f));
  object-fit: cover;
}

.sectors__img-2 {
  position: absolute;
  top: calc(405 * var(--f)); left: calc(964 * var(--f));
  width: calc(945 * var(--f)); height: calc(639 * var(--f));
  object-fit: cover;
}

.sectors__img-3 {
  position: absolute;
  top: calc(1055 * var(--f)); left: calc(10 * var(--f));
  width: calc(945 * var(--f)); height: calc(625 * var(--f));
  object-fit: cover;
}

.sectors__img-4 {
  position: absolute;
  top: calc(1055 * var(--f)); left: calc(964 * var(--f));
  width: calc(945 * var(--f)); height: calc(625 * var(--f));
  object-fit: cover;
}

.sectors__badge {
  position: absolute;
  border-radius: calc(10 * var(--f));
  background: var(--light);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(45 * var(--f));
  color: var(--red);
  height: calc(66 * var(--f));
}

.sectors__badge-1 { top: calc(918 * var(--f)); left: calc(285 * var(--f)); width: calc(386 * var(--f)); }

.sectors__badge-2 { top: calc(911 * var(--f)); left: calc(1206 * var(--f)); width: calc(515 * var(--f)); }

.sectors__badge-3 { top: calc(1553 * var(--f)); left: calc(224 * var(--f)); width: calc(505 * var(--f)); }

.sectors__badge-4 { top: calc(1554 * var(--f)); left: calc(1166 * var(--f)); width: calc(595 * var(--f)); }

.sectors__btn {
  position: absolute;
  height: calc(42 * var(--f));
  width: calc(200 * var(--f));
  background: var(--red-fill);
  border-radius: calc(10 * var(--f));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(18 * var(--f));
  color: var(--white);
  cursor: pointer;
}

.sectors__btn-1 { top: calc(984 * var(--f)); left: calc(383 * var(--f)); }

.sectors__btn-2 { top: calc(977 * var(--f)); left: calc(1367 * var(--f)); }

.sectors__btn-3 { top: calc(1619 * var(--f)); left: calc(383 * var(--f)); }

.sectors__btn-4 { top: calc(1620 * var(--f)); left: calc(1364 * var(--f)); }
/* ═══════════════════════════════════════════════════
   SERVICES  (y 5831–8111, h=2280 px)
═══════════════════════════════════════════════════ */
.services {
  position: relative;
  height: calc(2280 * var(--f));
  background: var(--white);
  overflow: hidden;
}

.services__headline {
  position: absolute;
  top: calc(0 * var(--f));
  left: 0; right: 0;
  padding-top: calc(24 * var(--f));
  text-align: center;
  font-size: calc(45 * var(--f));
  color: var(--gray);
}

.svc__img-1 {
  position: absolute;
  top: calc(89 * var(--f)); left: calc(43 * var(--f));
  width: calc(1132 * var(--f)); height: calc(625 * var(--f));
  border-radius: calc(32 * var(--f));
  object-fit: cover;
}

.svc__title-1 {
  position: absolute;
  top: calc(184 * var(--f)); left: calc(1228 * var(--f));
  width: calc(520 * var(--f));
  font-size: calc(45 * var(--f)); font-weight: 500; color: var(--gray);
}

.svc__desc-1 {
  position: absolute;
  top: calc(309 * var(--f)); left: calc(1228 * var(--f));
  width: calc(617 * var(--f));
  font-size: calc(20 * var(--f)); color: var(--dark); line-height: calc(30 * var(--f));
}

.svc__btn-1 {
  position: absolute;
  top: calc(529 * var(--f)); left: calc(1228 * var(--f));
  width: calc(200 * var(--f)); height: calc(42 * var(--f));
  background: var(--red); border-radius: calc(10 * var(--f));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(18 * var(--f)); color: var(--white); cursor: pointer;
}

.svc__img-2 {
  position: absolute;
  top: calc(807 * var(--f)); left: calc(744 * var(--f));
  width: calc(1132 * var(--f)); height: calc(625 * var(--f));
  border-radius: calc(32 * var(--f));
  object-fit: cover;
}

.svc__title-2 {
  position: absolute;
  top: calc(911 * var(--f));
  left: calc(75 * var(--f));
  width: calc(620 * var(--f));
  text-align: right;
  font-size: calc(45 * var(--f)); font-weight: 500; color: var(--gray);
}

.svc__desc-2 {
  position: absolute;
  top: calc(1030 * var(--f)); left: calc(75 * var(--f));
  width: calc(617 * var(--f));
  text-align: right;
  font-size: calc(20 * var(--f)); color: var(--dark); line-height: calc(30 * var(--f));
}

.svc__btn-2 {
  position: absolute;
  top: calc(1215 * var(--f)); left: calc(495 * var(--f));
  width: calc(200 * var(--f)); height: calc(42 * var(--f));
  background: var(--red); border-radius: calc(10 * var(--f));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(18 * var(--f)); color: var(--white); cursor: pointer;
}

.svc__img-3 {
  position: absolute;
  top: calc(1525 * var(--f)); left: calc(43 * var(--f));
  width: calc(1132 * var(--f)); height: calc(625 * var(--f));
  border-radius: calc(32 * var(--f));
  object-fit: cover;
}

.svc__title-3 {
  position: absolute;
  top: calc(1643 * var(--f)); left: calc(1245 * var(--f));
  width: calc(570 * var(--f));
  font-size: calc(45 * var(--f)); font-weight: 500; color: var(--gray);
}

.svc__desc-3 {
  position: absolute;
  top: calc(1791 * var(--f)); left: calc(1245 * var(--f));
  width: calc(617 * var(--f));
  font-size: calc(20 * var(--f)); color: var(--dark); line-height: calc(30 * var(--f));
}

.svc__btn-3 {
  position: absolute;
  top: calc(1960 * var(--f)); left: calc(1245 * var(--f));
  width: calc(200 * var(--f)); height: calc(42 * var(--f));
  background: var(--red); border-radius: calc(10 * var(--f));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(18 * var(--f)); color: var(--white); cursor: pointer;
}
/* ═══════════════════════════════════════════════════
   STOCK  (y 8111–8964, h=853 px)
═══════════════════════════════════════════════════ */
.stock {
  position: relative;
  /* 853 → 590: flacher seit dem Zoom auf den vorderen Gerätepark (01.08.2026) */
  height: calc(590 * var(--f));
  background: var(--dark);
  overflow: hidden;
}

.stock__photo {
  position: absolute;
  top: 0; left: 0;
  /* 1275/590 ≈ Bildverhältnis des Kundenbilds (1660/768) – Breite folgt IMMER
     dem Bild, sonst schneidet cover vertikal ab; rechts ab ~1106 deckt der
     solide Verlauf ohnehin alles */
  width: calc(1275 * var(--f)); height: 100%;
  object-fit: cover;
}

.stock__grad {
  position: absolute;
  top: 0; left: calc(17 * var(--f));
  width: calc(1903 * var(--f)); height: 100%;
  background: linear-gradient(
    to left,
    #4e4c4c 0%,
    rgba(76,74,74,.97) 42.775%,
    rgba(16,15,15,0) 57.889%
  );
}

.stock__blend {
  position: absolute;
  top: 0; left: calc(-17 * var(--f));
  width: calc(1954 * var(--f)); height: 100%;
  background: black;
  mix-blend-mode: multiply;
  opacity: .45;
}

.stock__headline {
  position: absolute;
  top: calc(44 * var(--f));
  left: calc(460 * var(--f));
  width: calc(1000 * var(--f));
  text-align: center;
  font-size: calc(52 * var(--f));
  color: var(--white);
  line-height: 1.2;
}

.stock__desc {
  position: absolute;
  top: calc(240 * var(--f)); left: calc(1270 * var(--f));
  width: calc(520 * var(--f));
  font-size: calc(32 * var(--f)); color: var(--white); line-height: 1.45;
}

.stock__btn {
  position: absolute;
  top: calc(478 * var(--f)); left: calc(1271 * var(--f));
  width: calc(318 * var(--f)); height: calc(42 * var(--f));
  background: var(--red); border-radius: calc(10 * var(--f));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(18 * var(--f)); color: var(--white); cursor: pointer;
}
/* ═══════════════════════════════════════════════════
   USE-CASES  (y 8964–10672, h=1708 px)
   Asymmetric bento – top-left image bleeds LEFT
═══════════════════════════════════════════════════ */
.use-cases {
  position: relative;
  height: calc(1708 * var(--f));
  background: var(--white);
  overflow: hidden;
}

.use-cases__headline {
  position: absolute;
  top: calc(165 * var(--f));
  left: 0; right: 0; text-align: center;
  font-size: calc(60 * var(--f)); color: var(--gray);
}

.use-card-1 {
  position: absolute;
  top: calc(311 * var(--f));
  left: calc(-213 * var(--f));
  width: calc(1156 * var(--f)); height: calc(634 * var(--f));
  border-radius: calc(32 * var(--f));
  overflow: hidden;
}

.use-card-1 img { width: 100%; height: 100%; object-fit: cover; }

/* Textfuß für die Einsatz-Captions (R5c): Ohne Streifen standen die weißen
   Zeilen auf beliebigen Bildzonen – auf den flachen Karten mitten auf der
   Maschine. Gleiches Muster wie needs__grad / .lp-fall::after. */
.use-card-1::after, .use-card-2::after, .use-card-3::after, .use-card-4::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.66) 100%);
  pointer-events: none;
}

.use-cap-1 {
  position: absolute;
  top: calc(868 * var(--f));
  left: calc(77 * var(--f));
  width: calc(866 * var(--f));
  text-align: center;
  font-size: calc(30 * var(--f)); color: var(--white);
  text-shadow: 0 calc(2 * var(--f)) calc(8 * var(--f)) rgba(0,0,0,.5);
}

.use-card-2 {
  position: absolute;
  top: calc(474 * var(--f));
  left: calc(977 * var(--f));
  width: calc(866 * var(--f)); height: calc(471 * var(--f));
  border-radius: calc(32 * var(--f));
  overflow: hidden;
}

.use-card-2 img { width: 100%; height: 100%; object-fit: cover; }

.use-cap-2 {
  position: absolute;
  top: calc(868 * var(--f));
  left: calc(984 * var(--f));
  width: calc(866 * var(--f));
  text-align: center;
  font-size: calc(30 * var(--f)); color: var(--white);
  text-shadow: 0 calc(2 * var(--f)) calc(8 * var(--f)) rgba(0,0,0,.5);
}

.use-card-3 {
  position: absolute;
  top: calc(977 * var(--f));
  left: calc(77 * var(--f));
  width: calc(866 * var(--f)); height: calc(594 * var(--f));
  border-radius: calc(32 * var(--f));
  overflow: hidden;
}

.use-card-3 img { width: 100%; height: 100%; object-fit: cover; }

.use-cap-3 {
  position: absolute;
  top: calc(1494 * var(--f));
  left: calc(205 * var(--f));
  width: calc(620 * var(--f));
  text-align: center;
  font-size: calc(30 * var(--f)); color: var(--white);
  text-shadow: 0 calc(2 * var(--f)) calc(8 * var(--f)) rgba(0,0,0,.5);
}

.use-card-4 {
  position: absolute;
  top: calc(977 * var(--f));
  left: calc(977 * var(--f));
  width: calc(789 * var(--f)); height: calc(377 * var(--f));
  border-radius: calc(32 * var(--f));
  overflow: hidden;
}

.use-card-4 img { width: 100%; height: 100%; object-fit: cover; }

.use-cap-4 {
  position: absolute;
  top: calc(1277 * var(--f));
  left: calc(976 * var(--f));
  width: calc(789 * var(--f));
  text-align: center;
  font-size: calc(30 * var(--f)); color: var(--white);
  text-shadow: 0 calc(2 * var(--f)) calc(8 * var(--f)) rgba(0,0,0,.5);
}

.use-cases__btn {
  position: absolute;
  top: calc(1529 * var(--f)); left: calc(1151 * var(--f));
  width: calc(259 * var(--f)); height: calc(42 * var(--f));
  background: var(--red); border-radius: calc(10 * var(--f));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(18 * var(--f)); color: var(--white); cursor: pointer;
}
/* ═══════════════════════════════════════════════════
   CONTACT CTA  (y 10672–11430, h=758 px)
═══════════════════════════════════════════════════ */
.contact {
  position: relative;
  height: calc(758 * var(--f));
  background: var(--white);
  overflow: hidden;
}

.contact__photo {
  position: absolute;
  top: 0; left: calc(348 * var(--f));
  width: calc(835 * var(--f)); height: calc(654 * var(--f));
  border-radius: calc(32 * var(--f));
  object-fit: cover;
  object-position: left center;
}

.contact__grad {
  position: absolute;
  top: 0; left: calc(427 * var(--f));
  width: calc(887 * var(--f)); height: calc(654 * var(--f));
  border-radius: calc(32 * var(--f));
  background: linear-gradient(
    91.18deg,
    rgba(242,242,242,0) 0.97%,
    rgba(210,210,210,.267) 35.21%,
    rgb(121,121,121) 58.89%
  );
}

.contact__headline {
  position: absolute;
  top: calc(78 * var(--f)); left: calc(960 * var(--f));
  width: calc(313 * var(--f));
  font-size: calc(36 * var(--f));
  color: var(--light);
  line-height: 1.3;
}

.contact__text {
  position: absolute;
  /* 313 px Spaltenbreite reichten für zwei Zeilen; der deutsche Text braucht
     drei und stieß bis auf 2 px an die Telefonnummer darunter. Der Block
     startet jetzt 14 px höher, die Nummer bleibt auf ihrer Designposition. */
  top: calc(313 * var(--f)); left: calc(960 * var(--f));
  width: calc(313 * var(--f));
  font-size: calc(22 * var(--f));
  color: var(--light);
  line-height: 1.5;
}

.contact__phone {
  position: absolute;
  top: calc(429 * var(--f)); left: calc(960 * var(--f));
  font-size: calc(36 * var(--f));
  color: var(--light);
}

.contact__btn {
  position: absolute;
  top: calc(512 * var(--f)); left: calc(1176 * var(--f));
  width: calc(408 * var(--f)); height: calc(55 * var(--f));
  background: var(--red); border-radius: calc(10 * var(--f));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(24 * var(--f)); color: var(--white); cursor: pointer;
}
/* ═══════════════════════════════════════════════════
   TRUST  (y 11430–11865, h=435 px)
═══════════════════════════════════════════════════ */
.trust {
  position: relative;
  height: calc(500 * var(--f));
  background: var(--white);
  overflow: hidden;
}

.trust__headline {
  position: absolute;
  top: calc(0 * var(--f));
  padding-top: calc(52 * var(--f));
  left: 0; right: 0; text-align: center;
  font-size: calc(45 * var(--f)); color: var(--gray);
}

.trust__logos {
  position: absolute;
  top: calc(160 * var(--f));
  left: calc(77 * var(--f));
  right: calc(77 * var(--f));
  display: flex; gap: calc(16 * var(--f));
}

.trust__box {
  flex: 1;
  height: calc(262 * var(--f));
  border: calc(1 * var(--f)) solid var(--gray);
  border-radius: calc(32 * var(--f));
  display: flex; align-items: center; justify-content: center;
  padding: calc(24 * var(--f));
  overflow: hidden;
}

.trust__box img { max-width: 100%; max-height: 100%; object-fit: contain; }

.trust__box--empty { background: var(--light); border: none; }
/* ═══════════════════════════════════════════════════
   TABLET  (640px – 1023px)
   Rescale --f so content behaves like a 1024px viewport
═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {

:root { --f: calc(100vw / 1024); }
}
/* ═══════════════════════════════════════════════════
   MOBILE  (< 640px)
   Full flow-based layout, sections become flex columns
═══════════════════════════════════════════════════ */
@media (max-width: 639px) {
/* ── HERO ── */
.hero {
    height: auto;
    overflow: visible;
    background: var(--dark);
    display: flex;
    flex-direction: column;
  }

.hero__bg {
    position: static;
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center 30%;
    order: 4;
  }

.hero__partners {
    position: static;
    order: 5;
    background: rgba(255,255,255,.92);
    height: auto;
    width: 100%;
    padding: 8px 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 12px;
    border-radius: 0;
    z-index: auto;
  }

.hero__partners img, .hero__partners img.tall { height: 22px; width: auto; }

.hero__headline {
    position: static;
    order: 6;
    font-size: 26px;
    line-height: 1.25;
    width: auto;
    color: var(--white);
    padding: 20px 16px 8px;
    z-index: auto;
    text-shadow: 0 2px 6px rgba(0,0,0,.4);
  }

.hero__sub {
    position: static;
    order: 7;
    font-size: 14px;
    width: auto;
    color: rgba(255,255,255,.9);
    padding: 0 16px 12px;
    line-height: 1.5;
    z-index: auto;
    text-shadow: none;
  }

.hero__checks {
    position: static;
    order: 8;
    display: flex;
    flex-direction: column;
    gap: 8px;                 /* 4 px liefen bei line-height:1 auf 4 px Luft hinaus */
    padding: 0 16px 16px;
    width: auto;
    height: auto;
    line-height: 1.25;
    z-index: auto;
    text-shadow: none;
  }

.hero__checks p { font-size: 14px; color: var(--white); }

.hero__btn-red {
    position: static;
    order: 9;
    width: calc(100% - 32px);
    height: 48px;
    margin: 0 16px 10px;
    font-size: 16px;
    border-radius: 8px;
    z-index: auto;
    box-shadow: none;
    border: none;
  }

.hero__btn-white {
    position: static;
    order: 10;
    width: calc(100% - 32px);
    height: 48px;
    margin: 0 16px 24px;
    font-size: 16px;
    border-radius: 8px;
    z-index: auto;
    box-shadow: none;
    border: 1px solid var(--gray);
  }
/* ── NEEDS ── */
.needs {
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 28px 16px 16px;
  }

.needs__headline {
    position: static;
    font-size: 24px;
    text-align: center;
    margin-bottom: 8px;
  }

.needs__sub {
    position: static;
    width: auto;
    font-size: 14px;
    text-align: center;
    margin-bottom: 20px;
    transform: none;
    line-height: 1.5;
  }

.needs__card:nth-child(3) {
    position: relative;
    width: 100%;
    height: 200px;
    left: auto;
    top: auto;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0;
    order: 2;
  }

.needs__card:nth-child(4) {
    position: relative;
    width: 100%;
    height: 200px;
    left: auto;
    top: auto;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0;
    order: 4;
  }

.needs__card:nth-child(5) {
    position: relative;
    width: 100%;
    height: 200px;
    left: auto;
    top: auto;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0;
    order: 6;
  }

.needs__card:nth-child(6) {
    position: relative;
    width: 100%;
    height: 200px;
    left: auto;
    top: auto;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0;
    order: 8;
  }

.needs__card__label { font-size: 28px; top: 12px; }

.needs__btn:nth-child(7) {
    position: static;
    width: auto;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    left: auto;
    top: auto;
    order: 3;
    align-self: center;
    margin: 8px 0 16px;
  }

.needs__btn:nth-child(8) {
    position: static;
    width: auto;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    left: auto;
    top: auto;
    order: 5;
    align-self: center;
    margin: 8px 0 16px;
  }

.needs__btn:nth-child(9) {
    position: static;
    width: auto;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    left: auto;
    top: auto;
    order: 7;
    align-self: center;
    margin: 8px 0 16px;
  }

.needs__btn:nth-child(10) {
    position: static;
    width: auto;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    left: auto;
    top: auto;
    order: 9;
    align-self: center;
    margin: 8px 0 8px;
  }
/* ── WHY ── */
.why {
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 28px 16px 32px;
  }

.why__headline {
    position: static;
    font-size: 24px;
    color: var(--white);
    text-align: center;
    width: auto;
    transform: none;
    margin-bottom: 10px;
    order: 1;
  }

.why__sub {
    position: static;
    font-size: 14px;
    color: rgba(255,255,255,.85);
    text-align: center;
    width: auto;
    transform: none;
    margin-bottom: 20px;
    order: 2;
  }

.why__title-1 {
    position: static;
    width: auto;
    text-align: left;
    order: 3;
    margin-bottom: 10px;
  }

.why__title-1 .t { font-size: 18px; margin-bottom: 4px; }

.why__title-1 .s { font-size: 14px; }

.why__img-tieflader {
    position: static;
    width: 100%;
    height: 200px;
    border-radius: 12px;
    order: 4;
    margin-bottom: 20px;
    top: auto; left: auto;
  }

.why__title-2 {
    position: static;
    width: auto;
    text-align: left;
    order: 5;
    margin-bottom: 10px;
  }

.why__title-2 .t { font-size: 18px; margin-bottom: 4px; }

.why__title-2 .s { font-size: 14px; }

.why__img-werkstatt {
    position: static;
    width: 100%;
    height: 200px;
    border-radius: 12px;
    order: 6;
    margin-bottom: 20px;
    top: auto; left: auto;
  }

.why__title-3 {
    position: static;
    width: auto;
    order: 7;
    margin-bottom: 10px;
  }

.why__title-3 .t { font-size: 18px; margin-bottom: 4px; }

.why__title-3 .s { font-size: 14px; }

.why__img-7307 {
    position: static;
    width: 100%;
    height: 180px;
    border-radius: 12px;
    order: 8;
    margin-bottom: 20px;
    top: auto; left: auto;
  }

.why__title-4 {
    position: static;
    width: auto;
    text-align: center;
    order: 9;
    margin-bottom: 10px;
  }

.why__title-4 .t { font-size: 18px; margin-bottom: 4px; }

.why__title-4 .s { font-size: 14px; }

.why__img-dirk {
    position: static;
    width: 100%;
    height: 200px;
    border-radius: 12px;
    order: 10;
    top: auto; left: auto;
  }
/* ── SECTORS ── */
.sectors {
    height: auto;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 28px 0 0;
  }

.sectors__headline {
    position: static;
    grid-column: 1 / -1;
    font-size: 22px;
    padding: 0 16px 8px;
    text-transform: uppercase;
  }

.sectors__sub {
    position: static;
    grid-column: 1 / -1;
    width: auto;
    transform: none;
    font-size: 14px;
    text-align: left;
    padding: 0 16px 16px;
    line-height: 1.5;
  }

.sectors__img-1 {
    position: static;
    width: 100%; height: 160px;
    grid-column: 1; grid-row: 3;
  }

.sectors__img-2 {
    position: static;
    width: 100%; height: 160px;
    grid-column: 2; grid-row: 3;
  }

.sectors__img-3 {
    position: static;
    width: 100%; height: 160px;
    grid-column: 1; grid-row: 5;
  }

.sectors__img-4 {
    position: static;
    width: 100%; height: 160px;
    grid-column: 2; grid-row: 5;
  }

.sectors__badge {
    position: static;
    width: 100%;
    height: 40px;
    font-size: 13px;
    border-radius: 0;
    background: var(--red);
    color: var(--white);
    padding-bottom: 8px;
  }

.sectors__badge-1 { grid-column: 1; grid-row: 4; top: auto; left: auto; }

.sectors__badge-2 { grid-column: 2; grid-row: 4; top: auto; left: auto; }

.sectors__badge-3 { grid-column: 1; grid-row: 6; top: auto; left: auto; }

.sectors__badge-4 { grid-column: 2; grid-row: 6; top: auto; left: auto; }

.sectors__btn { display: none; }
/* ── SERVICES ── */
.services {
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 28px 16px 20px;
  }

.services__headline {
    position: static;
    font-size: 24px;
    text-align: center;
    padding-top: 0;
    margin-bottom: 20px;
    color: var(--gray);
  }

.svc__img-1 {
    position: static;
    width: 100%; height: 220px;
    border-radius: 12px;
    left: auto; top: auto;
    order: 1;
    margin-bottom: 10px;
  }

.svc__title-1 {
    position: static;
    font-size: 22px;
    width: auto;
    left: auto; top: auto;
    order: 2;
    margin-bottom: 6px;
    color: var(--gray);
  }

.svc__desc-1 {
    position: static;
    font-size: 14px;
    width: auto;
    left: auto; top: auto;
    order: 3;
    line-height: 1.5;
    margin-bottom: 10px;
  }

.svc__btn-1 {
    position: static;
    width: auto;
    height: 42px;
    padding: 0 20px;
    font-size: 15px;
    border-radius: 8px;
    left: auto; top: auto;
    order: 4;
    align-self: flex-start;
    margin-bottom: 24px;
  }

.svc__img-2 {
    position: static;
    width: 100%; height: 220px;
    border-radius: 12px;
    left: auto; top: auto;
    order: 5;
    margin-bottom: 10px;
  }

.svc__title-2 {
    position: static;
    font-size: 22px;
    width: auto;
    left: auto; top: auto;
    order: 6;
    text-align: left;
    margin-bottom: 6px;
    color: var(--gray);
  }

.svc__desc-2 {
    position: static;
    font-size: 14px;
    width: auto;
    left: auto; top: auto;
    order: 7;
    text-align: left;
    line-height: 1.5;
    margin-bottom: 10px;
  }

.svc__btn-2 {
    position: static;
    width: auto;
    height: 42px;
    padding: 0 20px;
    font-size: 15px;
    border-radius: 8px;
    left: auto; top: auto;
    order: 8;
    align-self: flex-start;
    margin-bottom: 24px;
  }

.svc__img-3 {
    position: static;
    width: 100%; height: 220px;
    border-radius: 12px;
    left: auto; top: auto;
    order: 9;
    margin-bottom: 10px;
  }

.svc__title-3 {
    position: static;
    font-size: 22px;
    width: auto;
    left: auto; top: auto;
    order: 10;
    margin-bottom: 6px;
    color: var(--gray);
  }

.svc__desc-3 {
    position: static;
    font-size: 14px;
    width: auto;
    left: auto; top: auto;
    order: 11;
    line-height: 1.5;
    margin-bottom: 10px;
  }

.svc__btn-3 {
    position: static;
    width: auto;
    height: 42px;
    padding: 0 20px;
    font-size: 15px;
    border-radius: 8px;
    left: auto; top: auto;
    order: 12;
    align-self: flex-start;
  }
/* ── STOCK ── */
.stock {
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

.stock__photo {
    position: static;
    width: 100%;
    height: 220px;
    object-fit: cover;
    order: 1;
  }

.stock__grad { display: none; }

.stock__blend { display: none; }

.stock__headline {
    position: static;
    font-size: 24px;
    color: var(--white);
    text-align: center;
    width: auto;
    left: auto; top: auto;
    padding: 20px 16px 10px;
    order: 2;
  }

.stock__desc {
    position: static;
    font-size: 15px;
    color: rgba(255,255,255,.9);
    text-align: center;
    width: auto;
    left: auto; top: auto;
    padding: 0 16px 16px;
    line-height: 1.5;
    order: 3;
  }

.stock__btn {
    position: static;
    width: auto;
    height: 44px;
    padding: 0 20px;
    font-size: 15px;
    border-radius: 8px;
    left: auto; top: auto;
    margin-bottom: 24px;
    order: 4;
  }
/* ── USE-CASES ── */
.use-cases {
    height: auto;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 28px 12px 20px;
  }

.use-cases__headline {
    position: static;
    grid-column: 1 / -1;
    font-size: 24px;
    text-align: center;
    margin-bottom: 4px;
  }

.use-card-1 {
    position: static;
    width: auto; height: 170px;
    border-radius: 10px;
    left: auto; top: auto;
    grid-column: 1; grid-row: 2;
  }

.use-card-2 {
    position: static;
    width: auto; height: 170px;
    border-radius: 10px;
    left: auto; top: auto;
    grid-column: 2; grid-row: 2;
  }

.use-card-3 {
    position: static;
    width: auto; height: 170px;
    border-radius: 10px;
    left: auto; top: auto;
    grid-column: 1; grid-row: 4;
  }

.use-card-4 {
    position: static;
    width: auto; height: 170px;
    border-radius: 10px;
    left: auto; top: auto;
    grid-column: 2; grid-row: 4;
  }

.use-cap-1 {
    position: static;
    font-size: 12px;
    width: auto;
    left: auto; top: auto;
    transform: none;
    text-align: center;
    color: var(--dark);
    text-shadow: none;
    padding: 4px 0;
    grid-column: 1; grid-row: 3;
  }

.use-cap-2 {
    position: static;
    font-size: 12px;
    width: auto;
    left: auto; top: auto;
    transform: none;
    text-align: center;
    color: var(--dark);
    text-shadow: none;
    padding: 4px 0;
    grid-column: 2; grid-row: 3;
  }

.use-cap-3 {
    position: static;
    font-size: 12px;
    width: auto;
    left: auto; top: auto;
    transform: none;
    text-align: center;
    color: var(--dark);
    text-shadow: none;
    padding: 4px 0;
    grid-column: 1; grid-row: 5;
  }

.use-cap-4 {
    position: static;
    font-size: 12px;
    width: auto;
    left: auto; top: auto;
    transform: none;
    text-align: center;
    color: var(--dark);
    text-shadow: none;
    padding: 4px 0;
    grid-column: 2; grid-row: 5;
  }

.use-cases__btn {
    position: static;
    grid-column: 1 / -1;
    width: auto;
    height: 44px;
    padding: 0 24px;
    font-size: 15px;
    border-radius: 8px;
    left: auto; top: auto;
    justify-self: center;
    margin-top: 8px;
    grid-row: 6;
  }
/* ── CONTACT ── */
.contact {
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 24px;
  }

.contact__photo {
    position: static;
    width: calc(100% - 32px);
    height: 260px;
    border-radius: 12px;
    margin: 20px 16px 0;
    left: auto; top: auto;
  }

.contact__grad { display: none; }

.contact__headline {
    position: static;
    font-size: 22px;
    color: var(--dark);
    text-align: center;
    width: auto;
    left: auto; top: auto;
    padding: 16px 16px 6px;
  }

.contact__text {
    position: static;
    font-size: 15px;
    color: var(--dark);
    text-align: center;
    width: auto;
    left: auto; top: auto;
    padding: 0 16px 6px;
    line-height: 1.5;
  }

.contact__phone {
    position: static;
    font-size: 22px;
    color: var(--red);
    left: auto; top: auto;
    padding: 0 16px 14px;
  }

.contact__btn {
    position: static;
    height: 48px;
    width: auto;
    padding: 0 24px;
    font-size: 16px;
    border-radius: 8px;
    left: auto; top: auto;
  }
/* ── TRUST ── */
.trust {
    height: auto;
    overflow: visible;
    padding: 24px 12px 28px;
  }

.trust__headline {
    position: static;
    font-size: 20px;
    text-align: center;
    padding-top: 0;
    margin-bottom: 14px;
  }

.trust__logos {
    position: static;
    top: auto; left: auto; right: auto;
    flex-wrap: wrap;
    gap: 10px;
  }

.trust__box {
    flex: 0 0 calc(50% - 8px);
    height: 80px;
    border-radius: 10px;
    padding: 12px;
  }
}

@media (max-width: 639px) {
/* Push content below the fixed bar */
body { padding-top: 56px; }
}
/* ═══════════════════════════════════════════════════
   ANIMATIONS — hover transitions
═══════════════════════════════════════════════════ *//* Image zoom in containers */
.sectors__img-1, .sectors__img-2, .sectors__img-3, .sectors__img-4, .why__img-tieflader, .why__img-7307, .why__img-werkstatt, .why__img-dirk, .svc__img-1, .svc__img-2, .svc__img-3, .contact__photo, .stock__photo {
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.sectors__img-1:hover, .sectors__img-2:hover, .sectors__img-3:hover, .sectors__img-4:hover {
  transform: scale(1.04);
}

.why__img-tieflader:hover, .why__img-7307:hover, .why__img-werkstatt:hover, .why__img-dirk:hover, .svc__img-1:hover, .svc__img-2:hover, .svc__img-3:hover {
  transform: scale(1.03) translateY(-3px);
}

.contact__photo:hover { transform: scale(1.02); }
/* Use-case card image zoom (card has overflow:hidden) */
.use-card-1, .use-card-2, .use-card-3, .use-card-4 {
  cursor: pointer;
  will-change: transform;
}

.use-card-1 img, .use-card-2 img, .use-card-3 img, .use-card-4 img {
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.use-card-1:hover img, .use-card-2:hover img, .use-card-3:hover img, .use-card-4:hover img {
  transform: scale(1.06);
}
/* Needs card hover — box-shadow glow + lift */
.needs__card {
  transition: box-shadow 0.4s ease;
  will-change: transform, box-shadow;
  cursor: pointer;
}

.needs__card:hover {
  box-shadow:
    0 0 0 2px rgba(248,2,2,.55),
    0 28px 70px rgba(0,0,0,.45);
}
/* Button shimmer sweep — desktop only (all these buttons are position:absolute on desktop,
   so ::after works without adding position:relative which would break mobile layout) */
@media (min-width: 640px) {

.hero__btn-red, .hero__btn-white, .needs__btn, .sectors__btn, .svc__btn-1, .svc__btn-2, .svc__btn-3, .stock__btn, .use-cases__btn, .contact__btn {
    overflow: hidden;
  }

.hero__btn-red::after, .hero__btn-white::after, .needs__btn::after, .sectors__btn::after, .svc__btn-1::after, .svc__btn-2::after, .svc__btn-3::after, .stock__btn::after, .use-cases__btn::after, .contact__btn::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(
      105deg,
      transparent 30%,
      rgba(255,255,255,.22) 50%,
      transparent 70%
    );
    transform: translateX(-120%);
  }

.hero__btn-red:hover::after, .hero__btn-white:hover::after, .needs__btn:hover::after, .sectors__btn:hover::after, .svc__btn-1:hover::after, .svc__btn-2:hover::after, .svc__btn-3:hover::after, .stock__btn:hover::after, .use-cases__btn:hover::after, .contact__btn:hover::after {
    transform: translateX(120%);
    transition: transform 0.55s ease;
  }
}
/* Spotlight on stock section (cursor-following glow) */
.stock {
  --mx: 50%; --my: 50%;
}

.stock::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 500px at var(--mx) var(--my),
    rgba(255,255,255,.06) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.4s;
}

.stock:hover::after { opacity: 1; }

/* ── Kurz gesagt (GEO-Quick-Answer) ── */
.startkurz {
  background: var(--light);
  padding: calc(70 * var(--f)) 24px;
}
.startkurz__box {
  max-width: 900px;
  margin: 0 auto;
  border-left: 4px solid var(--red);
  padding-left: clamp(18px, calc(32 * var(--f)), 32px);
}
.startkurz__label {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--red-text);
  font-size: clamp(12px, calc(15 * var(--f)), 15px);
  margin-bottom: 10px;
}
.startkurz__box p {
  margin: 0;
  color: var(--dark);
  font-size: clamp(15px, calc(18 * var(--f)), 18px);
  line-height: 1.7;
}

/* ── Modernisierung: Bleed-Deko (Tieflader-Bild, Riesen-Typo) an der
      Sektionskante kappen, sonst weitet sich mobil der Layout-Viewport.
      (Kein Sticky innerhalb dieser Sektionen; Clip ist daher gefahrlos.) ── */
.hero, .why, .needs, .sectors, .services, .stock, .use-cases, .contact, .trust, .startkurz { overflow-x: clip; }

/* ── Modernisierung: Bewegung reduzieren ── */
@media (prefers-reduced-motion: reduce) {
  .needs__card, .use-card-1, .use-card-2, .use-card-3, .use-card-4 { transform: none !important; }
  .startneu * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}