/*
  Komponenten, Rescue Trade™ Website
  Nur wiederverwendbare Bausteine (Header/Footer-Chrome, Buttons,
  Utilities). Keine Inhaltssektionen – die kommen in einem späteren
  Durchgang. Werte ausschließlich aus tokens.css.

  Nav-Breakpoint (Desktop-Navigation → Mobile-Menü): 960px.
  Der Header startet hier in seinem soliden (weißen) Ruhezustand, weil
  in diesem Durchgang noch kein Hero existiert. Der transparente
  Zustand über einem dunklen Hero ist ein späterer, eigener Durchgang
  (Scroll-Verhalten).
*/

/* -----------------------------------------------------------------
   Layout-Utilities
----------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-48);
}

.container--wide {
  max-width: var(--container-max-wide);
  margin-inline: auto;
  padding-inline: var(--space-24);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------------
   Skip-Link
----------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-16);
  top: var(--space-16);
  background: var(--color-anthracite);
  color: var(--color-white);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-sm);
  z-index: 300;
  text-decoration: none;
  /* Grauer Standard-Fokusring (--focus-ring-color) hat auf Anthrazit
     nur Kontrast 1,96 (gemessen) – auf jeder dunklen Fläche hier auf
     eine helle Stufe umgestellt, die fokussierbaren Kinder erben das
     automatisch über die CSS-Variable. */
  --focus-ring-color: var(--white-a85);
  transform: translateY(-150%);
  transition: transform var(--transition-base);
}
.skip-link:focus {
  transform: translateY(0);
}

/* -----------------------------------------------------------------
   Eyebrow – Mono-Label vor Überschriften
----------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide-018);
  text-transform: uppercase;
  color: var(--color-gray);
}
.eyebrow--on-dark {
  color: var(--white-a65);
}

/* -----------------------------------------------------------------
   Markenzeichen ™ – immer hochgestellt und klein, nie ®
----------------------------------------------------------------- */
sup.tm {
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-none);
  vertical-align: super;
}
.tm-022 { font-size: var(--fs-tm-022); }
.tm-040 { font-size: var(--fs-tm-040); }
.tm-045 { font-size: var(--fs-tm-045); }
.tm-055 { font-size: var(--fs-tm-055); }
.tm-060 { font-size: var(--fs-tm-060); }

/* -----------------------------------------------------------------
   Buttons
   Hinweis: Der Entwurf verwendet für Button-Text vereinzelt
   Schriftschnitt 600. Es liegt keine Roboto-Datei in 600 vor
   (siehe base.css), deshalb hier auf --fw-bold (700) gemappt.
----------------------------------------------------------------- */
/* text-align wirkt hier nur im Umbruchfall und ist deshalb bewusst
   ungescopet: Der Button ist inline-flex mit justify-content: center,
   bei einzeiligem Text übernimmt die Flex-Zentrierung die horizontale
   Ausrichtung vollständig und text-align bleibt folgenlos. Erst wenn
   der Text innerhalb des Buttons umbricht, richtet text-align die
   Zeilen zueinander aus – ohne diese Zeile stünden sie linksbündig,
   während der Block als Ganzes zentriert bleibt, was schief aussieht.
   Aufgefallen bei „Tragetücher und Rettungsdecke" im Hero der
   Rescue Carry™-Seite bei 390px. Gehört an .btn selbst und nicht an
   die eine Stelle, damit der nächste umbrechende Button nicht
   dieselbe Schieflage bekommt. Gemessen: von 33 Buttons auf
   Startseite, Produktseite und Zertifikate-Seite ändert sich bei 1440
   und 390 genau dieser eine. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-32);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  line-height: var(--lh-1);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  /* Rot bleibt exklusiv für Aktionen: Buttons bekommen einen roten
     Fokusring statt des grauen Standardrings (--focus-ring-color, s.
     css/base.css/tokens.css), egal auf welchem Grund sie stehen –
     kein Grau-auf-Anthrazit-Kontrastproblem, weil hier eine eigene
     Farbe statt Vererbung greift. Formularfelder (vom Kunden später
     ergänzt) sollen denselben Aktions-Fokus bekommen, siehe unten. */
}
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  --focus-ring-color: var(--color-red);
}

.btn--primary {
  background: var(--color-red);
  color: var(--color-white);
}
.btn--primary:hover {
  background: var(--color-red-hover);
  color: var(--color-white);
}

.btn--outline {
  background: transparent;
  border-color: var(--white-a45);
  color: var(--color-white);
  font-weight: var(--fw-medium);
}
.btn--outline:hover {
  border-color: var(--color-white);
  color: var(--color-white);
}

/* Gegenstück zu .btn--outline für hellen statt dunklen Grund: dunkle
   Kontur/Schrift statt heller, kehrt beim Hover zur vollen Fläche um
   (füllt mit Anthrazit statt es aufzuhellen). Beide Outline-Varianten
   bleiben damit gleich schwer wie ein gefüllter .btn--primary daneben
   – reine Kontur wirkt sonst leicht neben einer vollen Fläche
   untergeordnet. */
.btn--outline-dark {
  background: transparent;
  border-color: var(--color-black);
  color: var(--color-black);
}
.btn--outline-dark:hover {
  background: var(--color-anthracite);
  color: var(--color-white);
}

.btn--sm {
  padding: var(--space-12) var(--space-24);
}

/* -----------------------------------------------------------------
   Header / Navigation
----------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-48);
  height: var(--size-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
}
@media (max-width: 600px) {
  .site-header__inner {
    padding-inline: var(--space-16);
  }
  .container {
    padding-inline: var(--space-16);
  }
}

/* Ausgleich für den fixierten Header: #main beginnt sonst unter ihm.
   Ausnahme: Seiten mit dunklem Foto-/Video-Hero ($heroDunkel in der
   jeweiligen Seite), deren Hero bewusst bis unter den (dort
   transparenten) Header reicht. */
#main {
  padding-top: var(--size-header-height);
  /* Reserviert Platz für die fixierte .sticky-cta-Leiste (siehe unten),
     damit sie nie echten Footer-Inhalt überlagert – unabhängig davon,
     ob das Ausblende-JavaScript am Seitenende überhaupt läuft. */
  padding-bottom: var(--size-sticky-cta-height);
}
body.has-hero-dunkel #main {
  padding-top: 0;
}

@media (max-width: 600px) {
  #main {
    padding-bottom: var(--size-sticky-cta-height-mobile);
  }
}

.logo-chip {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition-base), padding var(--transition-base);
}
.logo-chip img {
  display: block;
  height: var(--size-logo-header);
  width: auto;
}
/* Transparent marks; the footer uses the white-letter artwork on dark. */
.logo-chip--footer {
  background: transparent;
  padding: 0;
}
.logo-chip--footer img {
  height: var(--size-logo-footer);
}
/* Monochrome product marks are already transparent. White foreground only
   on dark heroes; no white panel and no bitmap/background replacement. */
.logo-chip--hero {
  background: transparent;
  padding: 0;
}
.logo-chip--hero img {
  height: var(--size-logo-hero-wordmark);
  filter: brightness(0) invert(1);
}
@media (max-width: 900px) {
  .logo-chip--hero img {
    height: var(--size-logo-hero-wordmark-mobile);
  }
}

/* -----------------------------------------------------------------
   Produktlogo: Wortmarke + Icon je Produktlinie, Pfade siehe
   $rt_product_logos in inc/config.php. Ursprungsdateien sind
   dunkel/schwarz auf transparent; .product-logo--invert kehrt sie
   für dunklen Untergrund um (kein Verlust, da Alphakanal erhalten
   bleibt). Höhe wird kontextuell gesetzt, siehe .hero__col-logo und
   .product-row__logo.
----------------------------------------------------------------- */
.product-logo {
  display: block;
  width: auto;
}
.product-logo--invert {
  filter: brightness(0) invert(1);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-38);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-38);
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
}

.nav-link {
  text-decoration: none;
  color: var(--color-black);
  white-space: nowrap;
  transition: color var(--transition-base);
}
.nav-link:hover {
  color: var(--color-red);
}
.nav-link.is-active {
  color: var(--color-red);
}

/* Warenkorbzaehler: getrennt vom Linktext, auch im dunklen Hero lesbar. */
.nav-link--cart {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.nav-link--cart .cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: var(--color-red);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Untermenü in der Hauptnavigation (Produktlinien) */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.nav-dropdown__chevron {
  display: block;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}
.nav-dropdown.is-open .nav-dropdown__chevron {
  transform: rotate(180deg);
}
.nav-dropdown.is-open .nav-dropdown__trigger {
  color: var(--color-red);
}
.nav-dropdown__menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  --focus-ring-color: var(--color-gray);
}
.nav-dropdown__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-sm);
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base);
}
.nav-dropdown__link:hover,
.nav-dropdown__link:focus-visible {
  background: var(--color-gray-100);
  color: var(--color-red);
}
.nav-dropdown__link.is-active {
  background: var(--color-gray-100);
  color: var(--color-red);
  font-weight: var(--fw-bold);
}

@media (min-width: 961px) and (max-width: 1280px) {
  .site-nav,
  .site-nav__links {
    gap: var(--space-22);
  }
}

@media (min-width: 961px) {
  .nav-dropdown__menu {
    position: absolute;
    top: calc(100% + var(--space-12));
    left: calc(-1 * var(--space-14));
    min-width: 210px;
    padding: var(--space-8);
    gap: var(--space-0);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: calc(var(--z-header) + 2);
  }
  .nav-dropdown__menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--space-16));
    height: var(--space-16);
  }
  html.js .nav-dropdown__menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }
  html.js .nav-dropdown.is-open .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

@media (min-width: 961px) and (hover: hover) {
  html.js .nav-dropdown:hover:not(.is-force-closed) .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  html.js .nav-dropdown:hover:not(.is-force-closed) .nav-dropdown__chevron {
    transform: rotate(180deg);
  }
  html.js .nav-dropdown:hover:not(.is-force-closed) .nav-dropdown__trigger {
    color: var(--color-red);
  }
}

/* Sprachumschalter */
.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide-012);
  text-transform: uppercase;
}
.lang-switch a {
  text-decoration: none;
  color: var(--color-text-secondary);
  opacity: 0.7;
}
.lang-switch a:hover {
  opacity: 1;
  color: var(--color-gray);
}
.lang-switch a[aria-current="true"] {
  opacity: 1;
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

/* Mobile-Menü-Schalter (Hamburger) */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.menu-toggle__bars {
  position: relative;
  width: 22px;
  height: 16px;
}
.menu-toggle__bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-anthracite);
  transition: transform var(--transition-base), opacity var(--transition-base), top var(--transition-base);
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 7px; }
.menu-toggle__bars span:nth-child(3) { top: 14px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

@media (max-width: 960px) {
  .site-nav__links {
    position: fixed;
    inset: var(--size-header-height) 0 0 0;
    z-index: calc(var(--z-header) + 1);
    flex-direction: column;
    align-items: flex-start;
    background: var(--color-white);
    padding: var(--space-32) var(--space-24);
    gap: var(--space-24);
    font-size: var(--fs-18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .nav-dropdown {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .nav-dropdown__trigger {
    font-size: var(--fs-18);
  }
  html.js .nav-dropdown:not(.is-open) .nav-dropdown__menu {
    display: none;
  }
  .nav-dropdown__menu {
    width: 100%;
    margin-top: var(--space-12);
    padding-left: var(--space-16);
    border-left: 2px solid var(--color-line);
    gap: var(--space-8);
  }
  .nav-dropdown__link {
    font-size: var(--fs-16);
    padding: var(--space-8) var(--space-12);
  }
  .lang-switch {
    order: 1;
  }
  .menu-toggle {
    display: inline-flex;
    order: 2;
  }
}

/* Open mobile menu: lock page scroll and force a solid header (incl. over dark heroes). */
body.is-nav-open {
  overflow: hidden;
  touch-action: none;
}
html.js body.has-hero-dunkel.is-nav-open .site-header {
  background: var(--color-white);
  border-bottom-color: var(--color-line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.js body.has-hero-dunkel.is-nav-open .site-header .logo-mark--on-light { display: block; }
html.js body.has-hero-dunkel.is-nav-open .site-header .logo-mark--on-dark { display: none; }
html.js body.has-hero-dunkel.is-nav-open .site-header .menu-toggle__bars span {
  background: var(--color-anthracite);
}

/* -----------------------------------------------------------------
   Header über dunklem Hero: startet transparent mit weißer Schrift,
   wird nach dem Scrollen solide (Klasse .is-solid, siehe js/main.js).
   $heroDunkel auf der Seite setzt body.has-hero-dunkel, siehe
   inc/header.php.

   Fail-open: Der transparente Zustand ist an html.js gebunden, eine
   Klasse, die ein Inline-Skript im <head> synchron VOR dem ersten
   Rendern setzt (siehe inc/header.php). Ohne JavaScript fehlt .js,
   der Header bleibt in seinem Basiszustand – solide weiß, immer
   lesbar – unabhängig vom Scroll-Status. Mit JavaScript, aber vor
   dem ersten Scroll-Event, sorgt derselbe Mechanismus für den
   gewünschten transparenten Startzustand über dem Hero.
----------------------------------------------------------------- */
html.js body.has-hero-dunkel .site-header {
  background: transparent;
  border-bottom-color: transparent;
}
html.js body.has-hero-dunkel .site-header .logo-chip {
  background: transparent;
  padding: var(--space-7) var(--space-0);
}
/* Keep brand red intact: switch artwork instead of filtering Rescue Trade. */
.logo-chip .logo-mark--on-dark { display: none; }
html.js body.has-hero-dunkel .site-header:not(.is-solid) .logo-mark--on-light { display: none; }
html.js body.has-hero-dunkel .site-header:not(.is-solid) .logo-mark--on-dark { display: block; }
html.js body.has-hero-dunkel .site-header .menu-toggle__bars span {
  background: var(--color-white);
}
html.js body.has-hero-dunkel .site-header.is-solid {
  background: var(--color-white);
  border-bottom-color: var(--color-line);
}
html.js body.has-hero-dunkel .site-header.is-solid .logo-chip {
  background: transparent;
  padding: var(--space-7) var(--space-0);
}
html.js body.has-hero-dunkel .site-header.is-solid .menu-toggle__bars span {
  background: var(--color-anthracite);
}
/* Nav-Links und Sprachumschalter sind nur oberhalb des Mobile-
   Breakpoints Teil der sichtbaren Kopfzeile selbst – im Mobile-Menü
   liegen sie in einem eigenen, immer soliden Panel (s. o.) und
   behalten dort ihre normale dunkle Schriftfarbe. */
@media (min-width: 961px) {
  html.js body.has-hero-dunkel .site-header .nav-link {
    color: var(--color-white);
  }
  html.js body.has-hero-dunkel .site-header .lang-switch a {
    color: var(--white-a70);
  }
  html.js body.has-hero-dunkel .site-header .lang-switch a[aria-current="true"] {
    color: var(--color-white);
  }
  html.js body.has-hero-dunkel .site-header.is-solid .nav-link {
    color: var(--color-black);
  }
  html.js body.has-hero-dunkel .site-header.is-solid .lang-switch a {
    color: var(--color-text-secondary);
  }
  html.js body.has-hero-dunkel .site-header.is-solid .lang-switch a[aria-current="true"] {
    color: var(--color-black);
  }
  html.js body.has-hero-dunkel .site-header .nav-link:hover,
  html.js body.has-hero-dunkel .site-header .nav-link.is-active,
  html.js body.has-hero-dunkel .site-header .nav-dropdown.is-open .nav-dropdown__trigger,
  html.js body.has-hero-dunkel .site-header.is-solid .nav-link:hover,
  html.js body.has-hero-dunkel .site-header.is-solid .nav-link.is-active,
  html.js body.has-hero-dunkel .site-header.is-solid .nav-dropdown.is-open .nav-dropdown__trigger {
    color: var(--color-red);
  }
}
@media (min-width: 961px) and (hover: hover) {
  html.js body.has-hero-dunkel .site-header .nav-dropdown:hover:not(.is-force-closed) .nav-dropdown__trigger {
    color: var(--color-red);
  }
}

/* @supports-Absicherung: sanfter Weichzeichner hinter dem soliden
   Header, nur wenn der Browser backdrop-filter beherrscht (ältere
   Firefox-Versionen nicht). Ohne Support bleibt es beim deckenden
   Weiß aus der Basisregel oben – rein kosmetisch, nie tragend. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  /* Ueber dem dunklen Hero: Hintergrund verschwommen (Glas-Effekt),
     dunkel getoent, damit weisse Schrift und rotes Logo lesbar bleiben. */
  html.js body.has-hero-dunkel .site-header:not(.is-solid) {
    background: rgba(17, 17, 17, 0.32);
    border-bottom-color: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
  .site-header.is-solid {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  /* Mobile-Menü offen: @supports-Glas oben hat gleiche Spezifität und
     käme sonst später — Containing Block durch backdrop-filter klemmt
     außerdem position:fixed .site-nav__links im Header (~64px). */
  html.js body.has-hero-dunkel.is-nav-open .site-header,
  html.js body.has-hero-dunkel.is-nav-open .site-header:not(.is-solid),
  html.js body.is-nav-open .site-header.is-solid {
    background: var(--color-white);
    border-bottom-color: var(--color-line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* -----------------------------------------------------------------
   Hero: dunkle Vollbild-Fläche mit Bild/Video, Verlaufs-Überlagerung
   und unten ausgerichtetem Inhalt (Eyebrow, Überschrift, Unterzeile).
   Seit die Firma-Seite denselben Aufbau braucht (bisher nur auf der
   Startseite), liegen die gemeinsamen Teile hier. Seitenspezifische
   Erweiterungen – z. B. die Produkt-Spaltenreihe im Hero der
   Startseite (`.hero__cols`) oder eine von 100vh abweichende Höhe –
   bleiben in der jeweiligen `css/pages/<seite>.css`, siehe dort.
----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-anthracite);
  overflow: hidden;
  --focus-ring-color: var(--white-a85);
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(8deg, var(--overlay-hero-1) 0%, var(--overlay-hero-2) 45%, var(--overlay-hero-3) 100%);
  pointer-events: none;
}
.hero__content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: var(--container-max);
  width: 100%;
  margin-inline: auto;
  padding: var(--space-130) var(--space-48) 0;
}
.hero__eyebrow {
  margin: 0 0 var(--space-28);
  max-width: var(--measure-620);
}
/* Bis zur Produktorientierung der Startseite
   war dies die riesige, großgeschriebene Wortmarke "RESCUE TRADE" –
   seit die Startseite wie die Firma-Seite einen echten Satz statt der
   Marke selbst zeigt, ist die vormalige Firma-Sonderregel (--fs-h2-xl,
   normale Groß-/Kleinschreibung) der gemeinsame Standard geworden;
   css/pages/firma.css überschreibt seither nichts mehr an dieser
   Klasse. */
.hero__title {
  margin: 0 0 var(--space-32);
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2-xl);
  line-height: var(--lh-098);
  letter-spacing: var(--ls-tight-025);
  max-width: var(--measure-900);
  color: var(--color-white);
  /* Lange deutsche Wörter (hier
     „Umbettungslaken") sprengen sonst die Zeile bei 390px, ohne dass
     das als Seiten-Überlauf sichtbar würde – .hero überdeckt das
     stillschweigend per eigenem overflow:hidden statt Zeilenumbruch. */
  overflow-wrap: break-word;
}
/* Alternative zu .hero__title, wenn die Überschrift eine Produkt-
   Wortmarke statt eines Satzes ist (Produktseiten): <h1> trägt direkt
   .logo-chip + .logo-chip--hero (transparent, große Höhe, siehe dort)
   und braucht nur noch den Außenabstand zur nächsten Zeile – Text-
   spezifische Werte wie Schriftgröße entfallen, das Bild bringt seine
   eigene Größe mit. align-self: flex-start ist Teil der Komponente
   selbst, nicht nur ein Seiten-Patch: .hero__content ist eine
   Flex-Spalte (siehe .hero), deren Stretch-Verhalten jedes direkte
   Kind sonst auf volle Breite zieht – sichtbar als übergroßer weißer
   Chip, der wie ein aufgeklebtes Rechteck über die ganze Spalte läuft,
   statt sich eng um die Wortmarke zu legen. */
.hero__wordmark {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 var(--space-32);
}
.hero__subline {
  margin: 0;
  max-width: var(--measure-520);
  font-size: var(--fs-18);
  line-height: var(--lh-16);
  color: var(--white-a85);
}
/* Button-Reihe im Hero, für mehr als einen Button (z. B. Produktseiten:
   "Jetzt anfragen" + "Zu den Details"). Auf der Startseite entfällt
   sie seit der Startseiten-Überarbeitung ersatzlos (Sticky Footer
   deckt beide Wege bereits ab) – die
   Klasse bleibt hier als seitenübergreifender Baustein für die
   Produktseiten erhalten. Dort ist .hero__actions direktes Kind von
   .hero__content (Spalten-Flex) und braucht deshalb zusätzlich
   `.hero__content > .hero__actions { align-self: flex-start }`,
   siehe css/pages/produkt.css – aus demselben Grund wie bei
   .hero__wordmark oben. */
.hero__actions {
  display: flex;
  gap: var(--space-16);
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .hero__content {
    padding-top: calc(var(--size-header-height) + var(--space-32));
  }
  .hero__title {
    font-size: clamp(52px, 16vw, 90px);
  }
  .hero__actions {
    width: 100%;
  }
  .hero__actions .btn {
    flex: 1 1 auto;
  }
}

/* -----------------------------------------------------------------
   Scroll-Reveal: Inhalt blendet beim Eintritt ins Viewport von unten
   ein (IntersectionObserver in js/main.js setzt .is-visible).
   Fail-open über html.js, wie beim Header oben: ohne JavaScript
   fehlt .js, [data-reveal] hat dann nie opacity:0 und ist immer
   sichtbar. prefers-reduced-motion schaltet die Bewegung zusätzlich
   ab, auch mit JavaScript.
----------------------------------------------------------------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(64px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -----------------------------------------------------------------
   Footer – vollständig: Logo/Beschreibung, Navigation, Kontakt,
   rechtliche Fußzeile, Wasserzeichen. Gemeinsam für alle Seiten.
----------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 0;
  background: var(--color-anthracite);
  color: var(--white-a70);
  overflow: hidden;
  --focus-ring-color: var(--white-a85);
}

.site-footer__top {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-110) var(--space-48) var(--space-90);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: var(--space-64);
  border-bottom: 1px solid var(--white-a15);
}

.site-footer__desc {
  margin: var(--space-26) 0 0;
  max-width: var(--measure-380);
  font-size: var(--fs-15);
  line-height: var(--lh-17);
}

.site-footer__col-label {
  margin: 0 0 var(--space-22);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide-018);
  text-transform: uppercase;
  color: var(--white-a45);
}

.site-footer__col-links {
  display: grid;
  gap: var(--space-14);
  font-size: var(--fs-15);
}
.site-footer__col-links a {
  color: var(--white-a85);
  text-decoration: none;
}
.site-footer__col-links a:hover {
  color: var(--color-white);
}
.site-footer__col-links span {
  display: block;
}

.site-footer__legal {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-30) var(--space-48);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  font-size: var(--fs-13);
  color: var(--white-a50);
}

.site-footer__legal a {
  color: var(--white-a70);
  text-decoration: none;
}
.site-footer__legal a:hover {
  color: var(--color-white);
}

.site-footer__legal-links {
  display: flex;
  gap: var(--space-28);
}

/* Icon aus dem Logo, groß und gedämpft als Hintergrundelement, rechts
   angeschnitten (overflow:hidden am .site-footer schneidet es).
   z-index:-1 hält es hinter Inhalt und Legal-Zeile, aber vor dem
   Footer-Hintergrund selbst (siehe z-index:0 auf .site-footer, das
   dafür einen eigenen Stapelkontext eröffnet). Einfaches <img> mit
   den Original-SVG-Farben, nur über opacity gedämpft – kein filter,
   keine mask: frühere Versuche (filter: brightness(0) invert(1),
   danach mask-image als Alphamaske) haben die Form entweder als reine
   weiße Fläche gerendert oder nur eine grobe Silhouette gezeigt. */
.site-footer__crest {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: -1;
  width: var(--size-footer-crest);
  aspect-ratio: 1;
  object-fit: contain;
  transform: translate(12%, -50%);
  opacity: var(--opacity-medium);
  pointer-events: none;
}

@media (max-width: 720px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-48);
    padding: var(--space-64) var(--space-24) var(--space-48);
  }
  .site-footer__legal {
    padding: var(--space-24);
    flex-direction: column;
    align-items: flex-start;
  }
  .site-footer__crest {
    width: var(--size-footer-crest-mobile);
    transform: translate(15%, -50%);
  }
}

/* -----------------------------------------------------------------
   Sticky-CTA-Leiste: fixiert am unteren Rand, auf jeder Seite über
   inc/footer.php eingebunden. Reserve dafür liegt auf #main
   (padding-bottom, siehe weiter oben in dieser Datei) – verhindert
   Überlagerung mit dem echten Footer strukturell, unabhängig davon,
   ob das Ausblende-JavaScript unten überhaupt läuft. Text links,
   Buttons rechts; auf Schmalbildschirmen entfällt der Text, nur die
   beiden kompakten Buttons bleiben.
----------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky-cta);
  background: var(--color-white);
  border-top: 1px solid var(--color-line);
  transition: transform var(--transition-base);
}
/* js/main.js setzt diese Klasse, sobald der echte Footer per
   IntersectionObserver ins Sichtfeld kommt – rein optisches
   Aufräumen am Seitenende, die #main-Reserve oben verhindert jede
   echte Überlagerung unabhängig davon. */
.sticky-cta.is-hidden {
  transform: translateY(100%);
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: none;
  }
}

.sticky-cta__inner {
  height: var(--size-sticky-cta-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}
.sticky-cta__text {
  margin: 0;
  font-size: var(--fs-15);
  color: var(--color-gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sticky-cta__actions {
  display: flex;
  gap: var(--space-12);
  flex-shrink: 0;
}
/* Eigene, kleinere Button-Größe nur für diese Leiste statt .btn--sm
   weiter zu verkleinern (das würde auch den Header-CTA mitverändern).
   36px Zielhöhe (10px Padding + 14px Schrift + 2px Rahmen) bleibt
   knapp unter der 44px-Referenzgröße für Touch-Ziele, aber deutlich
   über der Untergrenze – auf ausdrücklichen Wunsch kompakt, ohne die
   Bedienbarkeit auf Mobil zu verschlechtern. */
.sticky-cta .btn {
  padding: var(--space-10) var(--space-20);
  font-size: var(--fs-14);
  white-space: nowrap;
}

/* Der Satz verschwindet früher als der Rest der Mobilfassung, bei
   715px statt 600px. Gemessen: Ab 601px erscheint er wieder, passt
   aber erst ab 716px vollständig in seine Spalte – dazwischen kürzt
   ihn `text-overflow: ellipsis`. Bei 601px fehlen 115 von 337px, der
   Satz bricht mitten in „Rescue" ab. Ein Drittel eines Satzes ist
   schlechter als kein Satz, die beiden Buttons tragen die Funktion
   allein.

   Bewusst eine eigene Media Query und nicht der 600er-Block darunter:
   Der schaltet zusätzlich die Buttons auf volle Breite und mittig.
   Zwischen 601 und 715 sollen sie rechts stehen bleiben, nur der Text
   geht weg. */
@media (max-width: 715px) {
  .sticky-cta__text {
    display: none;
  }
  /* Ohne den Text hat .sticky-cta__inner (space-between) nur noch ein
     Kind, und die Buttons rutschen an den linken Rand. Beim Verkleinern
     über 715px hinweg sprängen sie damit von rechts nach links.
     margin-left: auto hält sie rechts, wo sie auch mit Text stehen.
     Unter 600px ohne Wirkung, dort setzt der Block darunter die Reihe
     auf volle Breite und mittig. */
  .sticky-cta__actions {
    margin-left: auto;
  }
}

@media (max-width: 600px) {
  .sticky-cta__inner {
    height: var(--size-sticky-cta-height-mobile);
    /* .container bringt sonst 48px Seitenpadding mit (für normale
       Seiteninhalte gedacht) – bei nur 294px Restbreite für zwei
       Buttons nebeneinander reichte das nicht: „Angebot anfragen"
       brach in eine zweite Zeile um und sprengte die Leistenhöhe
       (gemessen: Button 50px hoch bei nur 49px Leisten-Innenhöhe).
       Schmaleres Padding nur für diese Leiste behebt das strukturell,
       nicht nur weiß-space: nowrap allein (das hätte den Text sonst
       einfach abgeschnitten). */
    padding-inline: var(--space-16);
  }
  /* .sticky-cta__text ist hier schon durch die Regel oben
     ausgeblendet, siehe dort. */
  .sticky-cta__actions {
    width: 100%;
    justify-content: center;
  }
  .sticky-cta__actions .btn {
    flex: 1 1 0;
  }
}

/* -----------------------------------------------------------------
   Marquee: endlos laufendes Textband. Inhalt im Markup 2× duplizieren
   (zweites <div aria-hidden="true">), damit die Schleife nahtlos ist.
----------------------------------------------------------------- */
.marquee {
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-26) 0;
  overflow: hidden;
  background: var(--color-white);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-56);
}
html.js .marquee__track {
  animation: rt-marquee 36s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  html.js .marquee__track {
    animation: none;
  }
}
@keyframes rt-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--space-56);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-22);
  letter-spacing: var(--ls-wide-002);
  text-transform: uppercase;
  color: var(--color-black);
  white-space: nowrap;
}
.marquee__group img {
  display: block;
  width: var(--size-icon-18);
  height: var(--size-icon-18);
  flex-shrink: 0;
}

/* -----------------------------------------------------------------
   Nummerierte Merkmalsliste: Linie, Titel, Text. Für Zielgruppen-/
   Vorteile-artige Raster mit mehreren Punkten.
----------------------------------------------------------------- */
.numbered-feature__title {
  margin: 0 0 var(--space-16);
  padding-top: var(--space-24);
  border-top: 2px solid var(--color-black);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-25);
  letter-spacing: var(--ls-tight-01);
  color: var(--color-black);
  min-width: 0;
  overflow-wrap: break-word;
}
.numbered-feature__text {
  margin: 0;
  font-size: var(--fs-16);
}

/* -----------------------------------------------------------------
   Vergleichstabelle: Kopf + Zeilen mit hervorgehobener Mittelspalte.
   Grid-Spalten werden je Einsatz über eine Modifier-Klasse oder
   Inline-Style gesetzt (siehe css/pages/home.css für die Startseite).
----------------------------------------------------------------- */
.compare-table {
  display: grid;
}
.compare-table__row,
.compare-table__head {
  display: grid;
  min-width: 0;
}
.compare-table__row > * {
  min-width: 0;
  overflow-wrap: break-word;
}
.compare-table__head-empty {
  border-bottom: 2px solid var(--color-black);
}
.compare-table__head-rescue {
  background: var(--color-anthracite);
  padding: var(--space-24) var(--space-32);
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: var(--color-white);
}
/* Legacy logo-chip im Rescue-Kopf (falls andere Tabellen): bleibt kompakt. */
.compare-table__head-rescue .logo-chip {
  background: var(--color-white);
  padding: var(--space-8) var(--space-16);
}
.compare-table__head-rescue .logo-chip img {
  height: var(--size-logo-table);
}
.compare-table__head-other {
  border-bottom: 2px solid var(--color-black);
  padding: var(--space-24) var(--space-32);
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: var(--color-text-secondary);
}
.compare-table__label {
  padding: var(--space-26) var(--space-32) var(--space-26) 0;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: var(--color-black);
  display: flex;
  align-items: center;
}
.compare-table__rescue {
  background: var(--color-anthracite);
  color: var(--color-white);
  padding: var(--space-26) var(--space-32);
  font-size: var(--fs-15);
  line-height: var(--lh-155);
  border-bottom: 1px solid var(--white-a18);
  display: flex;
  align-items: center;
}
.compare-table__row:last-child .compare-table__rescue {
  border-bottom: none;
}
.compare-table__other {
  padding: var(--space-26) var(--space-32);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-15);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
}
/* Zuordnungs-Label je Wert („Rescue Trade™ Einweg" / Inhalt von
   col_other), nur auf Mobil sichtbar (siehe Media Query unten) – auf
   Desktop übernehmen die Spaltenköpfe (__head-rescue mit Logo,
   __head-other) diese Rolle bereits, das Label wäre dort doppelt. */
.compare-table__mobile-label {
  display: none;
}
/* Haken/Kreuz vor dem jeweiligen Wert, nach Kundenvorlage – rein
   dekorativ (aria-hidden am SVG, die Zuordnung selbst tragen die
   Spaltenköpfe bzw. __mobile-label), deshalb hier nur farbliche
   Kennzeichnung, kein zusätzlicher Text. Rot für den Haken ist eine
   bewusste, vom Kunden angefragte Ausnahme von „Rot nur für Aktionen"
   analog zum
   Marquee-Symbol und .statement-panel__final. */
.compare-table__value {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.compare-table__icon {
  flex-shrink: 0;
}
.compare-table__value--rescue .compare-table__icon {
  color: var(--color-red);
}
.compare-table__value--other .compare-table__icon {
  color: var(--color-gray);
}

@media (max-width: 780px) {
  .compare-table__head {
    display: none;
  }
  .compare-table__row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .compare-table__head-rescue,
  .compare-table__head-other {
    padding: var(--space-16) var(--space-20);
  }
  .compare-table__label {
    padding: var(--space-20) var(--space-20) var(--space-8);
    border-bottom: none;
  }
  .compare-table__rescue,
  .compare-table__other {
    padding: var(--space-12) var(--space-20) var(--space-20);
    flex-direction: column;
    align-items: flex-start;
  }
  .compare-table__other {
    border-bottom: 1px solid var(--color-line);
  }
  /* Ohne die Desktop-Spaltenköpfe (siehe .compare-table__head oben)
     ist auf Mobil sonst nicht erkennbar, welcher der beiden gestapelten
     Werte zu Rescue Trade™ und welcher zu herkömmlichen Produkten
     gehört – das Label übernimmt hier die Zuordnung, die auf Desktop
     die Spaltenüberschrift liefert. */
  .compare-table__mobile-label {
    display: block;
    margin-bottom: var(--space-6);
  }
}

/* -----------------------------------------------------------------
   Homepage Vergleich RT vs. herkömmlich (.compare-table--vs):
   gerundete Card, klarer Spaltenkontrast, mobil Kriterium-Karten.
   Produkt-.compare-table / --on-dark bleiben unberührt.
----------------------------------------------------------------- */
.compare-table--vs {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-media, 12px);
  overflow: hidden;
  background: var(--color-white);
}
.compare-table--vs .compare-table__head-empty {
  background: var(--color-gray-100);
  border-bottom: 1px solid var(--color-line);
}
.compare-table--vs .compare-table__head-rescue {
  box-shadow: inset 0 3px 0 0 var(--color-red);
  padding: var(--space-24) var(--space-28);
  background: var(--color-anthracite);
  color: var(--color-white);
}
.compare-table--vs .compare-table__head-other {
  background: var(--color-gray-100);
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-24) var(--space-28);
  color: var(--color-gray);
}
.compare-table--vs .compare-table__label {
  padding: var(--space-22) var(--space-28) var(--space-22) var(--space-28);
  background: var(--color-white);
}
.compare-table--vs .compare-table__rescue {
  padding: var(--space-22) var(--space-28);
  box-shadow: inset 3px 0 0 0 var(--color-red);
}
.compare-table--vs .compare-table__other {
  padding: var(--space-22) var(--space-28);
  background: var(--color-gray-100);
  color: var(--color-gray);
  border-bottom-color: var(--color-line);
}
.compare-table--vs .compare-table__row:last-child .compare-table__label,
.compare-table--vs .compare-table__row:last-child .compare-table__other {
  border-bottom: none;
}
.compare-table--vs .compare-table__value--rescue {
  font-weight: var(--fw-medium, 500);
}
.compare-table--vs .compare-table__icon {
  width: 20px;
  height: 20px;
}

@media (max-width: 780px) {
  .compare-table--vs {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
  }
  .compare-table--vs .compare-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-media, 12px);
    overflow: hidden;
    background: var(--color-white);
  }
  .compare-table--vs .compare-table__label {
    padding: var(--space-16) var(--space-20);
    border-bottom: 1px solid var(--color-line);
    background: var(--color-white);
  }
  .compare-table--vs .compare-table__rescue {
    padding: var(--space-14) var(--space-20) var(--space-16);
    box-shadow: inset 3px 0 0 0 var(--color-red);
    border-bottom: 1px solid var(--white-a18);
  }
  .compare-table--vs .compare-table__other {
    padding: var(--space-14) var(--space-20) var(--space-16);
    border-bottom: none;
    background: var(--color-gray-100);
  }
  .compare-table--vs .compare-table__mobile-label {
    margin-bottom: var(--space-8);
  }
}

/* Neutrale Zellen fürs .compare-table-Gerüst, für N-spaltige
   Vergleiche ohne die feste Rescue/Andere-Rollenverteilung von
   __rescue/__other (z. B. Produktseiten: mehrere Ausführungen
   gleichrangig nebeneinander). __head-cell/__cell liefern nur Struktur
   (Padding, Ausrichtung) – Typografie kommt bei __head-cell über die
   zusätzliche Klasse .eyebrow.eyebrow--on-dark im Markup, bei __cell
   sowie bei __label über die Modifier-Klasse .compare-table--on-dark
   direkt darunter (Farben/Rahmen), analog zu .fact-list auf dunklem
   Grund. Spaltenzahl (200px Label + N Datenspalten) kommt datenbedingt
   als Inline-Style vom Template, siehe inc/produkt-template.php –
   entspricht dem eingangs dokumentierten Prinzip "Grid-Spalten je
   Einsatz über Modifier-Klasse oder Inline-Style". */
.compare-table__head-cell,
.compare-table__cell {
  padding: var(--space-26) var(--space-32);
  display: flex;
  align-items: center;
  font-size: var(--fs-15);
}
.compare-table__head-cell {
  border-bottom: 2px solid;
}
.compare-table__cell {
  border-bottom: 1px solid;
}
.compare-table__row:last-child .compare-table__cell {
  border-bottom: none;
}
.compare-table__cell--links {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}
.compare-table__cell--links .link-arrow {
  font-size: var(--fs-15);
}

.compare-table--on-dark .compare-table__label {
  color: var(--color-white);
  border-bottom-color: var(--white-a20);
}
.compare-table--on-dark .compare-table__head-empty {
  border-bottom-color: var(--white-a20);
}
.compare-table--on-dark .compare-table__head-cell {
  border-bottom-color: var(--white-a20);
}
.compare-table--on-dark .compare-table__cell {
  color: var(--white-a65);
  border-bottom-color: var(--white-a20);
}
@media (max-width: 780px) {
  .compare-table__head-cell,
  .compare-table__cell {
    padding: var(--space-16) var(--space-20);
  }
}

/* -----------------------------------------------------------------
   Bild-Zoom-Reveal: Container beschneidet, Bild zoomt beim Einscrollen
   von scale(1.18) auf scale(1). Für Produktfotos, Lagerfoto usw.
----------------------------------------------------------------- */
.zoom-media {
  position: relative;
  overflow: hidden;
}
.zoom-media img,
.zoom-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html.js .zoom-media img,
html.js .zoom-media video {
  transform: scale(1.18);
  transition: transform 0.8s ease;
}
html.js .zoom-media.is-visible img,
html.js .zoom-media.is-visible video {
  transform: scale(1);
}
/* Nach dem Scroll-Reveal leichter Zoom beim Hover – gleicher Effekt
   auf Startseite (.company__media) und Produkt-Merkmal-Media. */
html.js .zoom-media.is-visible:hover img,
html.js .zoom-media.is-visible:hover video {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  html.js .zoom-media img,
  html.js .zoom-media video {
    transform: none;
    transition: none;
  }
}

/* -----------------------------------------------------------------
   Produkt-Zeile: Bild + Text alternierend, für Produktübersichten.
   Bildposition per .product-row--reverse umkehren (order).
----------------------------------------------------------------- */
.product-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-88);
  align-items: center;
  padding: var(--space-60) 0;
  border-top: 1px solid var(--color-line);
}
.product-row--reverse {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.product-row--reverse .product-row__media {
  order: 2;
}
.product-row--reverse .product-row__body {
  order: 1;
}
.product-row__media {
  height: var(--media-h-520);
}
.product-row__body {
  min-width: 0;
}
.product-row__label {
  margin: 0 0 var(--space-10);
}
/* .product-row__name ist die H3 – trägt jetzt nur noch Abstand, der
   Inhalt ist das Produktlogo (.product-row__logo), keine eigene
   Textformatierung mehr nötig. Die H3 bleibt aus SEO-/Struktur-Gründen
   bestehen (das Logo übernimmt die Rolle der Überschrift). */
.product-row__name {
  margin: 0 0 var(--space-18);
}
.product-row__logo {
  display: block;
  height: var(--size-logo-row-product);
}
.product-row__text {
  margin: 0 0 var(--space-26);
  font-size: var(--fs-16);
}
.product-row__bullets {
  margin: 0 0 var(--space-30);
  display: grid;
}
.product-row__bullets li {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-15);
}
.product-row__bullets li:last-child {
  border-bottom: 1px solid var(--color-line);
}
.link-arrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-17);
  text-decoration: none;
  color: var(--color-gray);
}
.link-arrow:hover {
  color: var(--color-red);
}
/* Variante für dunklen Grund (z. B. im Datenblock, siehe .spec-block
   weiter unten): Weiß in Teildeckkraft statt Grau, volles Weiß statt
   Rot beim Hover – Rot bleibt damit weiterhin ausschließlich Buttons/
   aktiven Zuständen vorbehalten, nicht Links auf dunklem Grund. */
.link-arrow--on-dark {
  color: var(--white-a65);
}
.link-arrow--on-dark:hover {
  color: var(--color-white);
}

@media (max-width: 900px) {
  .product-row,
  .product-row--reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
    padding: var(--space-40) 0;
  }
  .product-row--reverse .product-row__media,
  .product-row--reverse .product-row__body,
  .product-row .product-row__media,
  .product-row .product-row__body {
    order: initial;
  }
  .product-row__media {
    height: var(--media-h-300);
  }
}

/* -----------------------------------------------------------------
   Stat-Liste: Titel + Text, gestapelt mit Linien. Für Vorteils-/
   Kennzahlenlisten (z. B. „Jede Sekunde zählt").
----------------------------------------------------------------- */
.stat-list__item {
  padding: var(--space-40) 0;
  border-top: 1px solid var(--color-line);
}
.stat-list__item:last-child {
  border-bottom: 1px solid var(--color-line);
}
.stat-list__title {
  margin: 0 0 var(--space-12);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  color: var(--color-black);
  overflow-wrap: break-word;
}
.stat-list__text {
  margin: 0;
  font-size: var(--fs-16);
}

/* Vorteile/Merkmale: einzelne Zeilen beim Hover rot (wie Startseite). */
.stat-list__item {
  transition: background-color .2s ease, color .2s ease;
  border-radius: var(--radius-media, 12px);
  padding-inline: 16px;
}
.stat-list__item:hover,
.stat-list__item:focus-within {
  background: #c80b0e;
  color: #fff;
  border-color: transparent;
}
.stat-list__item:hover .stat-list__title,
.stat-list__item:hover .stat-list__text,
.stat-list__item:focus-within .stat-list__title,
.stat-list__item:focus-within .stat-list__text {
  color: #fff;
}

/* -----------------------------------------------------------------
   Statement-Panel: vollflächig anthrazit, große Zeilen mit
   ansteigender Deckkraft, roter Schlusszeile. Für Problem-/
   Dringlichkeits-Framing-Sektionen.
----------------------------------------------------------------- */
.statement-panel {
  background: var(--color-anthracite);
  padding: var(--space-170) 0;
  --focus-ring-color: var(--white-a85);
}
.statement-panel__lead {
  margin: 0 0 var(--space-64);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-problem-lead);
  letter-spacing: var(--ls-tight-01);
  color: var(--white-a75);
}
.statement-panel__lines {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-problem-statement);
  line-height: var(--lh-102);
  letter-spacing: var(--ls-tight-025);
  text-transform: uppercase;
  color: var(--color-white);
}
.statement-panel__lines p {
  margin: 0;
}
/* Deckkraft nach Abstand von der letzten (roten) Zeile gezählt, nicht
   von der ersten – dieselbe Stufenskala funktioniert dadurch unabhängig
   davon, ob eine Sektion 3 oder 4 abgestufte Zeilen vor der Schlusszeile
   hat. */
.statement-panel__lines p:nth-last-child(5) { color: var(--white-a35); }
.statement-panel__lines p:nth-last-child(4) { color: var(--white-a45); }
.statement-panel__lines p:nth-last-child(3) { color: var(--white-a60); }
.statement-panel__lines p:nth-last-child(2) { color: var(--white-a80); }
.statement-panel__final {
  margin-top: var(--space-24) !important;
  color: var(--color-red) !important;
}
.statement-panel__text {
  margin: var(--space-72) 0 0;
  margin-left: auto;
  max-width: var(--measure-620);
  font-size: var(--fs-18);
  line-height: var(--lh-17);
  color: var(--white-a70);
}

@media (max-width: 700px) {
  .statement-panel {
    padding: var(--space-96) 0;
  }
  .statement-panel__lead {
    margin-bottom: var(--space-40);
  }
  .statement-panel__lines {
    font-size: clamp(28px, 9vw, 104px);
    overflow-wrap: break-word;
  }
  .statement-panel__text {
    margin-left: 0;
  }
}

/* -----------------------------------------------------------------
   Beschrifteter Abschnitt: Mono-Label mit oberer Linie, gefolgt von
   einer Überschrift. Für Spaltenköpfe in Raster-Layouts.
----------------------------------------------------------------- */
.bordered-label {
  display: block;
  margin: 0 0 var(--space-22);
  padding-top: var(--space-22);
  border-top: 2px solid var(--color-black);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide-018);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* -----------------------------------------------------------------
   Liste mit fettem Auftakt: <li><strong>Lead:</strong> Text</li>
----------------------------------------------------------------- */
.lead-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-14);
  font-size: var(--fs-15);
}
.lead-list strong {
  color: var(--color-black);
}

/* -----------------------------------------------------------------
   Fakten-Zeile: Label | Text nebeneinander, mit oberer Linie. Für
   Kennzahlen-/Fakten-Listen auf dunklem Grund.
----------------------------------------------------------------- */
.fact-list {
  display: grid;
}
.fact-list__row {
  padding: var(--space-20) 0;
  border-top: 1px solid var(--white-a20);
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: var(--space-20);
}
.fact-list__row:last-child {
  border-bottom: 1px solid var(--white-a20);
}
.fact-list__label {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: var(--color-white);
  min-width: 0;
  overflow-wrap: break-word;
}
.fact-list__text {
  font-size: var(--fs-15);
  color: var(--white-a65);
  min-width: 0;
  overflow-wrap: break-word;
}
@media (max-width: 560px) {
  .fact-list__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}
/* Variante für hellen Grund (z. B. das Download-Feld der
   Zertifikate-Seite, auf --color-gray-100) – .fact-list ist sonst
   durchgehend für dunklen Grund gebaut (weißes Label, halbtrans-
   parenter Text/Rahmen), auf hellem Grund sonst unlesbar. */
.fact-list--on-light .fact-list__row {
  border-top-color: var(--color-line);
}
.fact-list--on-light .fact-list__row:last-child {
  border-bottom-color: var(--color-line);
}
.fact-list--on-light .fact-list__label {
  color: var(--color-black);
}
.fact-list--on-light .fact-list__text {
  color: var(--color-text-secondary);
}

/* -----------------------------------------------------------------
   Einspaltige Aufzählung mit Trennlinien, ohne Aufzählungszeichen –
   für kurze, gleichrangige Einträge ohne Label/Wert-Struktur (anders
   als .fact-list). Erstmals für den Geltungsbereich einer
   Zertifizierung gebaut (Zertifikate-Seite), keine Zertifikats-
   spezifische Komponente.
----------------------------------------------------------------- */
.line-list {
  display: grid;
}
.line-list__item {
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-16);
  color: var(--color-text);
}
.line-list__item:last-child {
  border-bottom: 1px solid var(--color-line);
}

/* -----------------------------------------------------------------
   Datei-Download: Titel + Format/Größe links, Button rechts. Für
   PDF-Downloads (Zertifikate, künftig ggf. Datenblätter). Auf
   dunklem wie hellem Grund einsetzbar, siehe .doc-download--on-dark.
----------------------------------------------------------------- */
.doc-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  flex-wrap: wrap;
  padding: var(--space-24) var(--space-32);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}
.doc-download__title {
  margin: 0 0 var(--space-6);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-18);
  color: var(--color-black);
}
.doc-download__meta {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}
@media (max-width: 560px) {
  .doc-download {
    padding: var(--space-20);
  }
}

/* -----------------------------------------------------------------
   Gepinnte Zähler-Szene: Wrapper hoch (Höhe seitenspezifisch, siehe
   Startseite), innen sticky über volle Fensterhöhe. Der Zählstand
   selbst wird über js/main.js scrollgetrieben aktualisiert; ohne
   JavaScript bleibt der HTML-Startwert stehen (fail-open). Bei
   prefers-reduced-motion entfällt die Pin-Höhe komplett – kein langer
   Leerlauf-Scrollbereich.
----------------------------------------------------------------- */
.pin-wrapper {
  position: relative;
}
.pin-scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.pin-scene__eyebrow {
  margin: 0 0 var(--space-32);
}
.pin-scene__number {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-counter);
  line-height: 0.95;
  letter-spacing: var(--ls-tight-04);
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}
.pin-scene__sub {
  margin: var(--space-24) 0 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-counter-sub);
  letter-spacing: var(--ls-tight-01);
  color: var(--white-a65);
}
html.js .pin-scene__sub {
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .pin-wrapper {
    height: 100vh !important;
  }
  html.js .pin-scene__sub {
    opacity: 1;
  }
}
@media (max-width: 560px) {
  .pin-scene {
    padding-inline: var(--space-24);
  }
  .pin-scene__number {
    font-size: clamp(52px, 17vw, 230px);
  }
  .pin-scene__eyebrow {
    overflow-wrap: break-word;
  }
}

/* -----------------------------------------------------------------
   Pin-Showpiece, Rahmen um die gepinnte Zähler-Szene: dunkler
   Hintergrund, darunter Textspalte (Fließtext + `.fact-list` + CTA)
   neben randlosem Bleed-Bild, optional gefolgt von einem
   Video-Bereich. Historisch für die Verfügbarkeits-Kennzahl der
   Startseite entstanden (Klassenname „avail"), inzwischen aber ein
   seitenübergreifendes Muster – siehe Firma-Seite, „Fertigung &
   Logistik". `.pin-wrapper`-Höhe bleibt bewusst seitenspezifisch
   (siehe oben), jede Seite setzt sie selbst.
----------------------------------------------------------------- */
.avail {
  background: var(--color-anthracite);
  --focus-ring-color: var(--white-a85);
}
.avail__body {
  padding: var(--space-40) var(--space-48) var(--space-170);
}
.avail__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-96);
  align-items: center;
}
.avail__text {
  margin: 0 0 var(--space-40);
  font-size: var(--fs-17);
  line-height: var(--lh-17);
  color: var(--white-a80);
}
.avail__cta {
  margin-top: var(--space-48);
}
.avail__media {
  /* Randlos bis zur rechten Viewportkante, solange der Viewport
     breiter als der Container ist. */
  margin-right: min(0px, calc((100vw - 1440px) / -2));
  min-height: var(--media-h-580);
}
.avail__video-wrap {
  margin-top: var(--space-110);
  max-width: var(--measure-920);
}
.avail__video-wrap .eyebrow {
  margin-bottom: var(--space-20);
}
.avail__video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
}
.avail__video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .avail__body {
    padding: var(--space-32) var(--space-24) var(--space-96);
  }
  .avail__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-40);
  }
  .avail__media {
    margin-right: 0;
    min-height: var(--media-h-300);
  }
  .avail__video-wrap {
    margin-top: var(--space-64);
  }
}

/* -----------------------------------------------------------------
   Kennzahlen-Reihe: Wert (groß) + Mono-Label darunter, mehrspaltig.
----------------------------------------------------------------- */
.stat-row {
  display: flex;
  gap: var(--space-56);
  flex-wrap: wrap;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-28);
}
.stat-row__value {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-36);
  letter-spacing: var(--ls-tight-02);
  color: var(--color-black);
}
.stat-row__label {
  margin: var(--space-6) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide-012);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
@media (max-width: 900px) {
  .stat-row {
    gap: var(--space-32);
  }
}

/* -----------------------------------------------------------------
   Bleed-Bild mit Text und Kennzahlenreihe: Randloses Foto auf der
   einen Seite (bricht bis zur Viewportkante aus), Eyebrow/Überschrift/
   Fließtext plus `.stat-row` auf der anderen. Seit die Firma-Seite
   denselben Aufbau für „Geschichte & Standort" braucht (bisher nur
   auf der Startseite, „Über Rescue Trade"), liegt der Baustein hier.
   Der Bildanschnitt ist per Default links (`margin-left`); für einen
   rechten Anschnitt (wie `.avail__media` auf der Startseite) das
   Gegenstück `margin-right` seitenspezifisch setzen.
----------------------------------------------------------------- */
.company {
  padding: var(--space-170) 0;
}
.company__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--space-96);
  /* Höhe der Bildspalte folgt dem Textblock (06.11.2026). */
  align-items: stretch;
}
.company__media {
  /* Card-style media stays inside the container (equal left/right gap).
     Full-bleed margin broke spacing once the 12px radius was added. */
  margin-left: 0;
  min-height: var(--media-h-560);
  align-self: stretch;
  overflow: hidden;
  border-radius: var(--radius-media, 12px);
}
.company__media img,
.company__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.company__eyebrow {
  margin-bottom: var(--space-20);
}
.company__h2 {
  margin: 0 0 var(--space-32);
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2-lg);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-tight-025);
  color: var(--color-black);
}
.company__text p {
  margin: 0 0 var(--space-20);
  font-size: var(--fs-16);
}
.company__stats {
  margin-top: var(--space-8);
}
@media (max-width: 900px) {
  .company {
    padding: var(--space-96) 0;
  }
  .company__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
  }
  .company__media {
    margin-left: 0;
    min-height: var(--media-h-300);
  }
}

/* -----------------------------------------------------------------
   Galerie: dreispaltiges, versetztes Bildraster.
----------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-20);
  align-items: start;
}
.gallery-grid__col {
  display: grid;
  gap: var(--space-20);
  min-width: 0;
}
.gallery-grid__col--offset {
  margin-top: 140px;
}
.gallery-grid__item {
  position: relative;
  overflow: hidden;
}
.gallery-grid__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-grid__item--260 { height: var(--media-h-260); }
.gallery-grid__item--300 { height: var(--media-h-300); }
.gallery-grid__item--400 { height: var(--media-h-400); }
.gallery-grid__item--480 { height: var(--media-h-480); }

@media (max-width: 700px) {
  .gallery-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .gallery-grid__col--offset {
    margin-top: 0;
  }
  .gallery-grid__item--260,
  .gallery-grid__item--300,
  .gallery-grid__item--400,
  .gallery-grid__item--480 {
    height: var(--media-h-300);
  }
}

/* -----------------------------------------------------------------
   Akkordeon: <button> + <div>, kein <details>. Weiches Auf-/Zuklappen
   über grid-template-rows (0fr → 1fr) auf dem Antwort-Wrapper, robuster
   als eine über die gemessene Höhe animierte Fassung (ruckelt leicht,
   weil jede Messung Layout erzwingt).
----------------------------------------------------------------- */
.accordion__item {
  border-bottom: 1px solid var(--color-line);
}
.accordion__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-24);
  width: calc(100% + 32px);
  margin-inline: -16px;
  padding: var(--space-28) 16px;
  background: none;
  border: none;
  border-radius: var(--radius-media, 12px);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.accordion__q {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  color: var(--color-black);
  transition: color .2s ease;
}
.accordion__icon {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-22);
  color: var(--color-gray);
  transition: color .2s ease;
}
.accordion__icon::before {
  content: "+";
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::before {
  content: "\2212";
}

/* Hover/Focus wie Merkmal-/Stat-Listen (rote Zeile, Aktions-Fokusring). */
.accordion__trigger:hover,
.accordion__trigger:focus-visible {
  background: #c80b0e;
  color: #fff;
  --focus-ring-color: var(--color-red);
}
.accordion__trigger:hover .accordion__q,
.accordion__trigger:hover .accordion__icon,
.accordion__trigger:focus-visible .accordion__q,
.accordion__trigger:focus-visible .accordion__icon {
  color: #fff;
}

/* Grundzustand, gilt IMMER (auch ohne JavaScript): Antworten bleiben
   vollständig sichtbar. Anders als beim früheren <details> gibt es
   hier keinen nativen Auf-/Zuklapp-Mechanismus mehr, auf den man ohne
   JavaScript zurückfallen könnte – bleibt html.js aus, darf also
   nichts verschwinden (Fail-Open). */
.accordion__answer-wrap {
  display: grid;
  grid-template-rows: 1fr;
}
.accordion__answer {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding: 0 var(--space-48) var(--space-30) 0;
  font-size: var(--fs-16);
  color: var(--color-text);
}

/* Weiches Auf-/Zuklappen nur mit JavaScript. js/main.js schaltet dafür
   pro Item die Klasse .is-open (serverseitig für die erste Frage schon
   gesetzt) und hält einen globalen Sperr-Zustand, damit sich niemals
   zwei Animationen überlappen. Höhe und Deckkraft laufen gemeinsam,
   damit der Text nicht hart ein-/ausblendet. */
html.js .accordion__answer-wrap {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-accordion);
}
html.js .accordion__answer {
  opacity: 0;
  transition: opacity var(--transition-accordion);
}
html.js .accordion__item.is-open .accordion__answer-wrap {
  grid-template-rows: 1fr;
}
html.js .accordion__item.is-open .accordion__answer {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.js .accordion__answer-wrap,
  html.js .accordion__answer {
    transition: none;
  }
}

@media (max-width: 560px) {
  .accordion__answer {
    padding-right: 0;
  }
}

/* -----------------------------------------------------------------
   CTA-Panel: zentrierte Abschluss-Sektion (Überschrift, kurzer Text,
   ein Button), ohne Eyebrow. Für den Seitenabschluss vor dem Footer,
   wenn eine Seite keinen inhaltlichen Grund mehr für eine weitere
   volle Sektion hat, aber noch einmal zur Handlung auffordern soll
   (Firma-Seite; vermutlich auch für FAQ, Zertifikate, Produkte
   wiederverwendbar).
----------------------------------------------------------------- */
.cta-panel {
  padding: 0 0 var(--space-170);
  text-align: center;
}
.cta-panel__h2 {
  margin: 0 0 var(--space-24);
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2-costs);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-tight-025);
  color: var(--color-black);
}
.cta-panel__text {
  margin: 0 auto var(--space-40);
  max-width: var(--measure-560);
  font-size: var(--fs-17);
  color: var(--color-text-secondary);
}
/* Optionale Button-Reihe, für mehr als einen (gleichrangigen) Button
   im Panel – z. B. „Anfrage stellen" + „Zum Shop" auf den
   Produktseiten. Ohne diese Klasse bleibt ein einzelner Button (wie
   bisher auf der Firma-Seite) einfach ein direktes Kind von
   .cta-panel, ohne Wrapper. */
.cta-panel__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .cta-panel {
    padding-bottom: var(--space-96);
  }
}

/* -----------------------------------------------------------------
   Datenblock: ein oder mehrere Label-Wert-Blöcke nebeneinander, für
   technische Daten auf dunklem Grund. Erstmals für die Produktseiten
   gebaut (Rescue Bedding™ u. a.), aber als eigenständige Komponente
   angelegt – kein Produktseiten-Spezifikum.

   .spec-grid ist die äußere Reihe: `repeat(auto-fit, minmax(min(100%,
   420px), 1fr))` bricht von selbst sauber um, egal ob ein Block
   (Bedding, Carry) oder mehrere nebeneinanderstehen (Rescue Transfer™
   mit drei Ausführungen, je eigenen technischen Daten) – kein
   JavaScript, keine Sonderfälle im Markup nötig, nur so viele
   .spec-block-Elemente wie Ausführungen vorhanden sind.

   .spec-block selbst ist Label + Zeilenliste + optionale Links:
   Das Label ist ein normales `.eyebrow.eyebrow--on-dark`, hier nur mit
   kleinerem Abstand nach unten (8px statt der sonst üblichen 20px).
   Die Zeilenliste ist unverändert `.fact-list` (siehe dort) – hier
   keine neue Zeilen-Darstellung, nur ein neuer Rahmen darum. Die
   Links darunter sind `.link-arrow--on-dark` (siehe dort für die
   Farb-Begründung), hier zusätzlich auf 15px verkleinert (passend zur
   Zeilengröße der Liste darüber, kleiner als der sonstige
   `.link-arrow`-Standard von 17px).
----------------------------------------------------------------- */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--space-96);
}
.spec-block__label {
  margin-bottom: var(--space-8);
}
.spec-block__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-40);
  margin-top: var(--space-32);
}
.spec-block__links .link-arrow--on-dark {
  font-size: var(--fs-15);
}
@media (max-width: 900px) {
  .spec-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-48);
  }
}