/*
  Startseite, Rescue Trade™ Website
  Nur seitenspezifisches Layout. Wiederverwendbare Bausteine liegen in
  css/components.css.
*/

/* -----------------------------------------------------------------
   01 Hero – nur der homepage-exklusive Teil (Produkt-Spaltenreihe
   unter der Unterzeile). Der Rest (.hero, __media, __scrim, __content,
   __eyebrow, __title, __subline) ist seitenübergreifend und liegt seit
   der Firma- bzw. den Produktseiten in css/components.css. Die
   Hero-Buttons (__actions) entfallen auf der Startseite ersatzlos,
   der Sticky Footer deckt "Anfragen" und "Zu den Produkten" bereits ab
   – .hero__actions bleibt als Komponente für die Produktseiten
   erhalten, siehe dort.
----------------------------------------------------------------- */
.hero__subline {
  margin-bottom: var(--space-56);
}

.hero__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-20);
  padding-bottom: var(--space-44);
}

/* Deutlich größere Fläche mit eigenem Hintergrund statt der früheren
   dünnen, transparenten Spalte (nur eine obere Trennlinie) – auf
   ausdrücklichen Wunsch, damit die drei Produktlinien als eigene,
   klickbare Flächen wahrgenommen werden, nicht als Fußnote unter der
   Unterzeile. Ruhezustand dezent (weiß in geringer Deckkraft) statt
   Rot, damit Rot beim Hover/Fokus seine Signalwirkung behält –
   „die aktive in Rot" aus der
   Vorlage ist hier als Hover-/Fokus-Zustand umgesetzt, es gibt auf
   der Startseite sonst keinen fachlichen Grund, eine der drei
   gleichrangigen Produktlinien dauerhaft hervorzuheben. */
.hero__col {
  display: block;
  padding: var(--space-32) var(--space-28);
  background: var(--white-a06);
  border: 1px solid var(--white-a20);
  border-radius: var(--radius-sm);
  min-width: 0;
  text-decoration: none;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.hero__col:hover,
.hero__col:focus-visible {
  background: var(--color-red);
  border-color: var(--color-red);
}
.hero__col:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.hero__col-name {
  margin: 0 0 var(--space-10);
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-36);
  letter-spacing: var(--ls-tight-02);
  color: var(--color-white);
}
.hero__col-desc {
  margin: 0;
  font-size: var(--fs-15);
  color: var(--white-a70);
  overflow-wrap: break-word;
}
.hero__col:hover .hero__col-desc,
.hero__col:focus-visible .hero__col-desc {
  color: var(--white-a94);
}
@media (prefers-reduced-motion: reduce) {
  .hero__col {
    transition: none;
  }
}

/* .hero__title (components.css) läuft über --fs-h2-xl bei 1440px auf
   77,76px – für die Startseiten-Headline zu groß, feste, kleinere
   Startseiten-Größe statt am gemeinsamen Token zu drehen (das würde
   auch .audience__h2 und den Firma-Hero mitverändern). Drei feste
   Stufen statt einer fluiden Größe, gemessen mit der längeren,
   produktbezogenen Fassung „Rescue Trade™ — Einweg Bettwäsche,
   Umbettungslaken & Transfertücher" (auf ausdrücklichen Wunsch, nennt
   Name und Angebot zugleich): bei 1440px halten 36–54px den Text
   zuverlässig auf zwei Zeilen, ab 56px sind es drei – 50px gewählt,
   mit Sicherheitsabstand zur 54px-Kante, aber noch deutlich lesbar,
   nicht erschlagend.
*/
.hero__title {
  font-size: 50px;
}

/* Zwischenstufe für Tablet-Breiten (deckt 768px mit ab) – bei 900px
   bleiben zwei Zeilen bis 48px erhalten, am unteren Rand dieser Stufe
   (701px, direkt oberhalb der Mobil-Stufe unten) bricht das schon ab
   38px auf drei um. 36px gewählt, damit die ganze Stufe (701–900px)
   zuverlässig zweizeilig bleibt, nicht nur die Ränder einzeln
   geprüft.

   .hero__cols wechselt in derselben Stufe auf eine Spalte statt erst
   bei 700px: bei drei Spalten reichte die Spaltenbreite ab 768px
   abwärts nicht mehr, um einen Produktnamen wie "Rescue Bedding™" bei
   der jetzt kräftigeren Überschriftgröße (36px) auf einer Zeile zu
   halten – „Rescue" brach einzeln in eine eigene erste Zeile um,
   gemessen: 153px verfügbare Breite je Spalte bei 768px. Eine Spalte
   löst das vollständig, statt die Schrift zusätzlich zu verkleinern
   und damit "kräftigere Typografie" wieder zu unterlaufen. */
@media (max-width: 900px) {
  .hero__title {
    font-size: 36px;
  }
  .hero__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
  }
}

@media (max-width: 700px) {
  /* Eigene, noch kleinere Stufe statt der 36px von der Tablet-Stufe
     oben: bei 390px reicht die Spaltenbreite selbst bei 36px nicht,
     um „Umbettungslaken" (Produktname, nicht kürzbar) ohne hässlichen
     Umbruch mitten im Wort zu setzen (overflow-wrap: break-word
     greift dann sichtbar ein). Bei 32px passt das längste Wort mit
     klarer Reserve in die Spalte (gemessen: ~232px bei 294px
     Spaltenbreite) – vier statt zwei Zeilen bei dieser Breite, aber
     sauberer Umbruch geht hier vor Zeilenzahl.
  */
  .hero__title {
    font-size: 32px;
  }
}

/* -----------------------------------------------------------------
   01b Produktbereich – drei Sektionen (Bedding/Carry/Transfer), direkt
   unter dem Hero, siehe index.php für die PHP-Schleife. Kategorien-
   Tabs mit Bild+Datenblock je Kategorie, Fail-open ohne JavaScript:
   .produktbereich__panel ist ohne html.js-Klasse für alle Kategorien
   sichtbar (gestapelt), erst mit JavaScript blendet
   js/main.js/html.js alle außer der aktiven aus.

   Kompakter gehalten auf ausdrücklichen Wunsch (eine Produktlinie
   soll auf einem üblichen Laptop-Bildschirm weitgehend ohne Scrollen
   erfassbar sein) – der Sektionsabstand oben/unten
   (.produktbereich { padding }) bleibt dabei bewusst unverändert,
   das ist der Rhythmus zwischen den Sektionen, nur die Innenabstände
   innerhalb einer Sektion sind reduziert.
----------------------------------------------------------------- */
.produktbereich {
  padding: var(--space-96) 0;
  border-top: 1px solid var(--color-line);
}
.produktbereich__head {
  margin-bottom: var(--space-32);
}
.produktbereich__title-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-24);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}
.produktbereich__h2 {
  margin: 0;
  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);
}
/* Zweizeilig begrenzt (auf ausdrücklichen Wunsch) – der eingekürzte
   Text in inc/lang/de.php passt bei --measure-620 zuverlässig auf
   zwei Zeilen, line-clamp bleibt zusätzliche Absicherung, falls der
   Text später wieder wächst, statt eine dritte Zeile hart
   abzuschneiden. */
.produktbereich__text {
  margin: 0;
  max-width: 82ch;
  font-size: var(--fs-17);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* Tab-Leiste allein in voller Breite (der Anfrage-Button stand hier
   früher daneben, schnitt dadurch bei Bedding – acht Kategorien – die
   letzte Kategorie auf "Kata" ab; Button jetzt am Ende des Datenblocks
   je Kategorie, siehe .produktbereich__cta weiter unten).
   .produktbereich-tabs-row nur noch positionierender Rahmen für die
   beiden Fade-Overlays. */
.produktbereich__tabs-row {
  position: relative;
  margin-bottom: var(--space-32);
  border-bottom: 1px solid var(--color-line);
}
.produktbereich__tabs {
  display: flex;
  gap: var(--space-8);
  overflow-x: auto;
  padding-bottom: var(--space-12);
  scroll-snap-type: x proximity;
}
.produktbereich__tab {
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: var(--space-12) var(--space-20);
  border: none;
  background: var(--color-gray-100);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: var(--color-text);
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

/* Das Kategorie-Symbol sitzt im Markup (rt_category_icon in inc/config.php)
   und nicht in einem <img>, weil es die Textfarbe übernehmen muss: der aktive Tab ist
   weiß auf Anthrazit und würde mit einer festen Symbolfarbe nicht passen. */
.produktbereich__tab-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: currentColor;
}
.produktbereich__tab.is-active {
  background: var(--color-anthracite);
  color: var(--color-white);
}
.produktbereich__tab:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}
/* Auf schmalen Schirmen dürfen die Beschriftungen umbrechen und sind
   in der Breite gedeckelt. Grund: Die Tab-Reihe scrollt waagerecht,
   und seit der Kunde die Rescue-Transfer-Gruppen benannt hat, ist der
   längste Tab einzeilig 332px breit – breiter als die bei 390px nur
   294px breite Reihe. Einen Tab, der nicht in sein eigenes Fenster
   passt, kann man nie ganz lesen, und es war jeweils nur einer zu
   sehen. Gemessen mit Deckel: Reihe 49px höher, dafür 351px weniger
   Scrollweg.

   Gilt für alle drei Produktlinien gleich. Bei Rescue Bedding™ und
   Rescue Carry™ sind die Namen kurz genug, dass der Deckel dort meist
   gar nicht greift – geprüft. */
@media (max-width: 700px) {
  .produktbereich__tab {
    white-space: normal;
    max-width: var(--tab-max-schmal);
  }
}

/* Scroll-Verlauf an den Rändern der Tab-Leiste, zeigt an, dass in die
   jeweilige Richtung noch weitere Kategorien folgen (auf ausdrücklichen
   Wunsch, nachdem "Wischen nötig" nicht erkennbar war). js/main.js
   berechnet den tatsächlichen Scroll-Zustand je Sektion (scrollWidth
   vs. clientWidth/scrollLeft) und setzt .is-visible – rein dekorativ,
   ohne html.js bleiben beide unsichtbar, die Tab-Leiste selbst bleibt
   trotzdem regulär scrollbar (natives overflow-x: auto). */
.produktbereich__tabs-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--space-64);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.produktbereich__tabs-fade--left {
  left: 0;
  background: linear-gradient(to right, var(--color-white), transparent);
}
.produktbereich__tabs-fade--right {
  right: 0;
  background: linear-gradient(to left, var(--color-white), transparent);
}
.produktbereich__tabs-fade.is-visible {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .produktbereich__tabs-fade {
    transition: none;
  }
}

.produktbereich__panel {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--space-40);
}
/* Nur mit html.js blenden sich inaktive Kategorien aus – ohne
   JavaScript bleiben alle gestapelt sichtbar (Fail-open, wie beim
   FAQ-Akkordeon). */
html.js .produktbereich__panel:not(.is-active) {
  display: none;
}

.produktbereich__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-content: start;
}
/* 1:1 statt 4:3 (auf ausdrücklichen Wunsch – gleicht die Bildspalte
   an die Höhe der
   Datenspalte an; 5:4 allein reichte dafür nicht annähernd, siehe dort
   die gemessenen Werte). */
.produktbereich__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: block;
  background: var(--color-gray-100);
}
/* Kategorien mit nur einem Foto (kein zweites Motiv verfügbar):
   Bild über beide Spalten statt halbe Fläche
   leer zu lassen. :only-child greift automatisch, sobald
   .produktbereich__images ein einzelnes .produktbereich__image
   enthält – keine eigene Markup-Kennzeichnung nötig. Eigenes,
   breiteres Seitenverhältnis (2:1 statt 1:1): über die volle
   652px-Breite gäbe 1:1 ein 652px hohes Bild, weit über die
   Datenspalte hinaus – 2:1 trifft deren
   Höhe stattdessen fast genau. */
.produktbereich__image-caption { position: static; display: block; padding: 8px 10px; background: rgba(255,255,255,.96); color: var(--color-anthracite); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.produktbereich__image:only-child {
  grid-column: 1 / -1;
  aspect-ratio: 2 / 1;
}
.produktbereich__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Produktbilder behalten ihre Bildfläche; Beschriftungen folgen im Fluss.
   Fallbackbilder ohne Produktklasse behalten ihre bisherige Geometrie. */
.produktbereich__image--product,
.produktbereich__image--product:only-child {
  display: block;
  aspect-ratio: auto;
  background: var(--color-white);
}
.produktbereich__image--product img {
  display: block;
  position: static;
  inset: auto;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.produktbereich__image--product:only-child img {
  aspect-ratio: 2 / 1;
}
.produktbereich__bezeichnung {
  margin: 0 0 var(--space-8);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  color: var(--color-black);
}
.produktbereich__kurzbeschreibung {
  margin: 0 0 var(--space-14);
  font-size: var(--fs-16);
  color: var(--color-text-secondary);
}
/* Dichter als der globale .fact-list-Standard (components.css,
   20px) – eigene, hier begrenzte Regel statt .fact-list--on-light
   selbst zu ändern, das auch auf der Zertifikate-Seite läuft
   (zert-download) und dort nicht enger werden soll. Trägt zusammen
   mit dem 1:1-Bildformat dazu bei, dass Bild- und Datenspalte auf
   ähnlicher Höhe enden. */
.produktbereich .fact-list__row {
  padding: var(--space-8) 0;
}

/* Anfrage-Button entfällt (Sticky-Footer deckt das ab) –
   .produktbereich__cta führt stattdessen zur
   Produktseite und steht als letztes Element im Datenblock, statt in
   einer eigenen Fußzeile unter der ganzen Sektion (das ließ die
   Bildspalte darüber sonst mit sichtbarer Lücke enden). */
.produktbereich__cta {
  margin-top: var(--space-24);
}

@media (max-width: 900px) {
  .produktbereich {
    padding: var(--space-64) 0;
  }
  .produktbereich__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
  }
}
@media (max-width: 480px) {
  .produktbereich__images {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------
   02 Zielgruppen
----------------------------------------------------------------- */
.audience {
  padding: var(--space-170) 0 var(--space-150);
}
.audience__head {
  margin-bottom: var(--space-96);
}
.audience__head .eyebrow {
  margin-bottom: var(--space-20);
}
/* hyphens + overflow-wrap gegen einen gemessenen Überlauf bei 390px:
   „Organisationen," ist bei 44px 298px breit, die Spalte hat 294px
   hyphens:auto setzt den Trennstrich,
   weil <html> lang="de" trägt, overflow-wrap sichert den Fall ohne
   deutsches Trennwörterbuch ab. */
.audience__h2 {
  margin: 0;
  max-width: var(--measure-900);
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2-xl);
  line-height: var(--lh-098);
  letter-spacing: var(--ls-tight-025);
  color: var(--color-black);
  hyphens: auto;
  overflow-wrap: break-word;
}
.audience__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-64);
}
.audience__item:nth-child(2) { margin-top: var(--space-64); }
.audience__item:nth-child(3) { margin-top: var(--space-128); }

@media (max-width: 900px) {
  .audience {
    padding: var(--space-96) 0 var(--space-64);
  }
  .audience__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-48);
  }
  .audience__item:nth-child(2),
  .audience__item:nth-child(3) {
    margin-top: 0;
  }
}

/* -----------------------------------------------------------------
   03 Vergleichstabelle
----------------------------------------------------------------- */
.compare {
  padding: var(--space-170) 0;
}
.compare__head {
  max-width: var(--measure-980);
  margin-bottom: var(--space-72);
}
.compare__head .eyebrow {
  margin-bottom: var(--space-20);
}
.compare__h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2-table);
  line-height: var(--lh-102);
  letter-spacing: var(--ls-tight-02);
  color: var(--color-black);
}
.compare .compare-table__row,
.compare .compare-table__head {
  grid-template-columns: 240px minmax(0, 1.15fr) minmax(0, 1fr);
}
.compare .compare-table--vs .compare-table__row,
.compare .compare-table--vs .compare-table__head {
  grid-template-columns: minmax(160px, 220px) minmax(0, 1.2fr) minmax(0, 1fr);
}

@media (max-width: 900px) {
  .compare {
    padding: var(--space-96) 0;
  }
}

/* -----------------------------------------------------------------
   05 Jede Sekunde zählt (Vorteile)
----------------------------------------------------------------- */
.benefits {
  padding: var(--space-120) 0 var(--space-170);
}
.benefits__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-96);
  align-items: start;
}
.benefits__head {
  position: sticky;
  top: 140px;
}
.benefits__head .eyebrow {
  margin-bottom: var(--space-20);
}
.benefits__h2 {
  margin: 0 0 var(--space-24);
  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);
}
.benefits__subline {
  margin: 0;
  font-size: var(--fs-17);
  color: var(--color-text-secondary);
}

@media (max-width: 900px) {
  .benefits {
    padding: var(--space-64) 0 var(--space-96);
  }
  .benefits__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
  }
  .benefits__head {
    position: static;
  }
}

/* -----------------------------------------------------------------
   07 Kosten
----------------------------------------------------------------- */
.costs {
  padding: var(--space-160) 0;
}
.costs__head {
  max-width: var(--measure-900);
  margin-bottom: var(--space-88);
}
.costs__head .eyebrow {
  margin-bottom: var(--space-20);
}
.costs__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);
}
.costs__subline {
  margin: 0;
  font-size: var(--fs-17);
  color: var(--color-text-secondary);
}
.costs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-64);
}
.costs__title {
  margin: 0 0 var(--space-18);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  color: var(--color-black);
}

@media (max-width: 900px) {
  .costs {
    padding: var(--space-96) 0;
  }
  .costs__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-48);
  }
}

/* -----------------------------------------------------------------
   08 Verfügbarkeit – vereint Überschrift, Faktenreihe, drei
   Kurzpunkte, Lagerfoto mit Zitat und Downloadliste in einer
   Sektion, Aufbau nach der Kundenvorlage. Ersetzt die gepinnte
   Zähler-Sektion (.avail). .avail selbst
   bleibt als Baustein in css/components.css bestehen, läuft weiterhin
   auf der Firma-Seite („Fertigung & Logistik") – hier nicht mehr
   verwendet, deshalb kein .avail-Override mehr in dieser Datei.
----------------------------------------------------------------- */
.availability {
  padding: var(--space-96) 0;
}
.availability__h2 {
  margin: 0 0 var(--space-40);
  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);
}

/* Faktenreihe: .facts-row__grid liefert weiterhin nur das 4er-Grid
   (unverändert, siehe unten), .availability__facts liefert Rahmen und
   Abstand zur Sektion – zusammen auf demselben Element im Markup,
   damit das Grid bei Bedarf an anderer Stelle ohne die
   Sektions-Rahmung wiederverwendbar bliebe. */
.availability__facts {
  padding: var(--space-40) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-64);
}
.facts-row__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.facts-row__item {
  padding: 0 var(--space-32);
  border-left: 1px solid var(--color-line);
}
.facts-row__item:first-child {
  padding-left: 0;
  border-left: none;
}
.facts-row__value {
  font-size: var(--fs-44);
}

/* Drei Kurzpunkte, fette Überschrift + zwei Zeilen Text. */
.availability__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-48);
  margin-bottom: var(--space-96);
}
.availability__points-title {
  margin: 0 0 var(--space-10);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  color: var(--color-black);
}
.availability__points-text {
  margin: 0;
  font-size: var(--fs-15);
  color: var(--color-text-secondary);
}

/* Lagerfoto links, Downloadliste + CTA rechts. align-items: start,
   weil beide Spalten unterschiedlich hoch sind (Foto vs.
   Eyebrow+Liste+Button) und nicht aufeinander gestreckt werden
   sollen – das Foto ist dabei bereits die etwas höhere Spalte (4:3
   bei 6fr Breite), keine Leerfläche darunter. */
.availability__body {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--space-64);
  align-items: start;
}
.availability__media {
  aspect-ratio: 4 / 3;
}
/* Ab der Zweispaltigkeit (901px, siehe Media Query unten) wächst die
   Höhe langsamer als die Spaltenbreite, statt dem festen 4:3 zu
   folgen. Grund: Die Downloadliste hat seit dem Entfernen zweier
   Einträge eine feste Inhaltshöhe von 285px, das Foto wuchs aber mit
   der Spalte weiter – bei 1440px endete die rechte Spalte dadurch
   195px über der Unterkante des Fotos.

   Eine feste Höhe löst das nicht, weil sie nicht bei zwei Breiten
   gleichzeitig richtig sein kann: 300px ergeben bei 1200px ein
   brauchbares 1,73:1, bei 1440px aber ein 2,13:1-Band, in dem das
   Lagermotiv seine Deckenhöhe und Fluchtlinie verliert. Deshalb
   clamp: unten 300px, damit das Foto bei 1000px nicht kleiner wird
   als vorher, oben 390px, damit es bei sehr breiten Schirmen nicht
   wieder davonläuft, dazwischen 26vw.

   Der gestapelte Fall unter 901px bleibt bewusst bei 4:3 – dort steht
   das Foto über der Liste, nicht daneben, es gibt also keine Lücke
   auszugleichen. */
@media (min-width: 901px) {
  .availability__media {
    aspect-ratio: auto;
    height: clamp(var(--media-h-300), 26vw, var(--media-h-390));
  }
}
.availability__cta {
  margin-top: var(--space-24);
}

@media (max-width: 900px) {
  .availability {
    padding: var(--space-64) 0;
  }
  .availability__facts {
    padding: var(--space-24) 0;
  }
  .availability__points {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
    margin-bottom: var(--space-64);
  }
  .availability__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-48);
  }
}
@media (max-width: 900px) {
  .facts-row__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-32);
  }
  .facts-row__item:nth-child(odd) {
    padding-left: 0;
    border-left: none;
  }
  .facts-row__item:nth-child(-n+2) {
    padding-top: 0;
  }
}
@media (max-width: 480px) {
  .facts-row__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-24);
  }
  .facts-row__item {
    padding-left: 0;
    border-left: none;
  }
}

/* -----------------------------------------------------------------
   08b Nachweise zum Download – schmale Zeilen statt Karten, auf
   ausdrücklichen Wunsch nach der Kundenvorlage: Titel fett, darunter
   eine Zeile Kurzbeschreibung/Format/Größe, rechts ein reiner
   Pfeil statt eines beschrifteten Buttons, dünne Trennlinien
   zwischen den Zeilen. Kein .doc-download hier (das bleibt die
   gerahmte Karten-Variante der Zertifikate-Seite, siehe dort) –
   eigenes, schlankeres Muster, weil die Vorlage explizit „keine
   Kästen mit Rahmen" vorgibt. Pfade/Dateigröße kommen aus
   $rt_home_downloads (inc/config.php), Format aus der Dateiendung.
   Jetzt Teil von .availability__body statt
   einer eigenen Sektion, siehe oben – die Zeilen-Klassen selbst
   unverändert.
----------------------------------------------------------------- */
.downloads__eyebrow {
  margin-bottom: var(--space-24);
}
.downloads__list {
  border-top: 1px solid var(--color-line);
}
.downloads__row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-24);
  align-items: center;
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
}
.downloads__title {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: var(--color-black);
}
.downloads__meta {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}
.downloads__icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--color-text-secondary);
  transition: color var(--transition-base), transform var(--transition-base);
}
a.downloads__row:hover .downloads__icon,
a.downloads__row:focus-visible .downloads__icon {
  color: var(--color-red);
  transform: translateY(3px);
}
a.downloads__row:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}
/* Platzhalter-Zustand (Datei folgt noch): <div> statt <a>, deshalb
   ohne Hover-/Fokus-Verhalten – Pfeil zusätzlich gedämpft, damit die
   Zeile nicht wie eine bedienbare aussieht. */
.downloads__row--pending .downloads__icon {
  color: var(--color-line);
}
@media (prefers-reduced-motion: reduce) {
  .downloads__icon {
    transition: none;
  }
}

/* -----------------------------------------------------------------
   09 Über Rescue Trade – nutzt .company (Bleed-Bild + Text +
   Kennzahlenreihe), seit der Firma-Seite ein seitenübergreifender
   Baustein in css/components.css.

   .company--reverse: Bild rechts statt links, auf ausdrücklichen
   Wunsch – die Sektion darüber (.availability) hat ihr Foto ebenfalls
   links, zwei Bilder direkt untereinander wirkten ohne diesen Wechsel
   eintönig. Muster wie .product-row--reverse (components.css): DOM-
   Reihenfolge bleibt Bild-zuerst (Screenreader/Tab-Reihenfolge
   unverändert), nur .company__media bekommt per order einen höheren
   Wert als das implizite order:0 des Textblocks und rutscht dadurch
   visuell hinter ihn. Zusätzlich die Bild-Anschnittkante gedreht:
   .company__media blutet in der Grundeinstellung links bis zur
   Viewportkante aus (margin-left, siehe components.css) – rechts vom
   Textblock braucht es stattdessen margin-right, exakt das dort
   dokumentierte Gegenstück-Muster von .avail__media. */
.company--reverse .company__media {
  order: 1;
  margin-left: 0;
  margin-right: 0;
  /* About aerial: volle Spaltenhöhe, kein Bleed (Abstand links/rechts gleich). */
  align-self: stretch;
  height: 100%;
}

@media (max-width: 900px) {
  /* Bild bleibt auf Mobil zuerst, unabhängig vom Desktop-Wechsel –
     dieselbe Begründung wie bei .product-row--reverse: Der
     "zwei Bilder untereinander"-Effekt ist ein Nebeneinander-Problem
     der Desktop-Spalten, auf Mobil trennen Fakten, Punkte und
     Downloadliste die beiden Fotos ohnehin um ein Vielfaches der
     Bildhöhe. */
  .company--reverse .company__media {
    order: initial;
    margin-right: 0;
  }
}

/* -----------------------------------------------------------------
   10 Galerie
----------------------------------------------------------------- */
.gallery {
  padding: var(--space-40) 0 var(--space-120);
  overflow: clip;
}

/* -----------------------------------------------------------------
   11 FAQ
----------------------------------------------------------------- */
.faq {
  padding: var(--space-170) 0;
}
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-96);
  align-items: start;
}
.faq__head {
  position: sticky;
  top: 140px;
}
.faq__head .eyebrow {
  margin-bottom: var(--space-20);
}
.faq__h2 {
  margin: 0 0 var(--space-24);
  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);
}
.faq__text {
  margin: 0 0 var(--space-36);
  font-size: var(--fs-17);
  color: var(--color-text-secondary);
}
.faq__list {
  border-top: 1px solid var(--color-line);
}

@media (max-width: 900px) {
  .faq {
    padding: var(--space-96) 0;
  }
  .faq__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
  }
  .faq__head {
    position: static;
  }
}

/* -----------------------------------------------------------------
   Produktbereich ohne Fotos (02.11.2026): Panel einspaltig, Daten
   auf breiten Schirmen in zwei Spalten (Text + Button links,
   Merkmale rechts), damit keine leere Bildhälfte bleibt.
   ----------------------------------------------------------------- */
.produktbereich__panel {
  grid-template-columns: minmax(0, 1fr);
}
.produktbereich__data {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto auto 1fr;
  column-gap: var(--space-40);
  align-items: start;
}
.produktbereich__data > .produktbereich__bezeichnung { grid-column: 1; grid-row: 1; }
.produktbereich__data > .produktbereich__kurzbeschreibung { grid-column: 1; grid-row: 2; }
.produktbereich__data > .produktbereich__cta { grid-column: 1; grid-row: 3; justify-self: start; align-self: start; }
.produktbereich__data > .fact-list { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
@media (max-width: 900px) {
  .produktbereich__data { display: block; }
}

/* Startseite: Anwendungsfotos je Produktlinie (CMS-Sektion homephotos) */
.produktbereich__photos {
  display: grid;
  max-width: 1100px;
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
  margin: clamp(20px, 2.4vw, 32px) auto clamp(24px, 3vw, 40px);
}
.produktbereich__photo {
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg, 12px);
  aspect-ratio: 3 / 2;
  background: #eef1f4;
}
.produktbereich__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.produktbereich__photo--video { background: #000; align-self: start; }
.home-slideshow { display: flex; flex-direction: column; min-width: 0; }
.home-slideshow__viewport { order: 0; width: 100%; }
.home-slideshow__slide { display: block; width: 100%; height: 100%; }
.home-slideshow__slide[hidden], .home-slideshow__controls[hidden] { display: none; }
.home-slideshow__slide:not([hidden]) { animation: home-photo-in .35s ease; }
.home-slideshow__controls {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}
.home-slideshow__controls button {
  min-height: 44px;
  min-width: 0;
  padding: 4px 10px;
  border: 1px solid #d0d3d8;
  border-radius: 3px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.home-slideshow__controls button:focus-visible { outline: 2px solid #c80b0e; outline-offset: 2px; }
.home-slideshow__toggle { flex: 0 1 110px; }
.home-slideshow__controls .home-slideshow__arrow { flex: 0 0 44px; font-size: 1.5rem; }
.home-slideshow__counter { min-width: 32px; text-align: center; font-size: .8rem; font-variant-numeric: tabular-nums; }
@keyframes home-photo-in { from { opacity: .6; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .home-slideshow__slide:not([hidden]) { animation: none; } }
.produktbereich__photo--video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 600px) {
  .produktbereich__photos { grid-template-columns: 1fr; gap: 12px; }
}

/* Full-frame live company photos only; existing gallery crops stay unchanged. */
.gallery-grid__item--live-original img { object-fit: contain; background: #fff; }

/* Original product-line symbols beside their existing wordmarks. */
.hero__col-name, .produktbereich__h2 { display: flex; align-items: center; gap: .3em; }
.home-brand-icon { width: 1.5em; height: 1em; flex: 0 0 1.5em; object-fit: contain; }
.home-brand-name { min-width: 0; }
.hero__col-name .home-brand-icon { filter: brightness(0) invert(1); }
@media (max-width: 600px) {
  .home-brand-icon { width: 1.15em; flex-basis: 1.15em; }
}

/* Kombinierter Medienblock (Slider + Video) unter den Kategorie-Daten */
.produktbereich__media {
  margin-top: clamp(24px, 3vw, 40px);
  padding: clamp(10px, 1.2vw, 16px);
  gap: clamp(10px, 1.2vw, 16px);
  background: #f4f5f7;
  border: 1px solid var(--color-line, #e2e5e9);
  border-radius: calc(var(--radius-lg, 12px) + 4px);
  align-items: start;
}
.produktbereich__media .produktbereich__photo--video { aspect-ratio: 3 / 2; }
/* Medien je Kategorie: beim Tab-Wechsel hineingleiten */
.produktbereich__panel .produktbereich__media { grid-column: 1 / -1; }
html.js .produktbereich__panel.is-active .produktbereich__media { animation: produktbereich-media-in .45s ease both; }
@keyframes produktbereich-media-in { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js .produktbereich__panel.is-active .produktbereich__media { animation: none; } }
/* Einsatzfelder: drei Spalten auf einer Hoehe, mit Anwendungsfoto (05.11.2026) */
.audience__item:nth-child(2), .audience__item:nth-child(3) { margin-top: 0; }
.audience__grid { align-items: start; gap: var(--space-48); }
.audience__photo { display: block; margin: 0 0 20px; overflow: hidden; border-radius: var(--radius-lg, 12px); aspect-ratio: 3 / 2; background: #eef1f4; }
.audience__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Titel einheitlich eine Zeile (06.11.2026): etwas kleiner als --fs-25, damit
   „Katastrophenhilfe & Hilfsorganisationen“ nicht umbricht; alle drei Karten gleich. */
.audience__item .numbered-feature__title {
  font-size: clamp(1.05rem, 0.35vw + 0.95rem, 1.25rem);
  line-height: 1.25;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .audience__item .numbered-feature__title { white-space: normal; }
}

/* Einheitlich (05.11.2026): ein Radius fuer Medien/Karten, 3:2 je Section
   (Medienblock, Slider, Einsatzfelder, Verfuegbarkeit). */
.produktbereich__media, .produktbereich__photo, .produktbereich__image,
.audience__photo, .availability__media, .home-slideshow { border-radius: var(--radius-media, 12px); overflow: hidden; }
.produktbereich__photo, .produktbereich__media .produktbereich__photo--video,
.audience__photo, .availability__media { aspect-ratio: 3 / 2; }
.produktbereich__photo img, .produktbereich__photo video, .audience__photo img,
.availability__media img, .availability__media video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Produktbereich: aufgeräumtes 2-Spalten-Layout (links: kompakter Kategorietext,
   Eckdaten & CTA; rechts: einzelner 16:9-Medien-Viewer für Bilder & Videos) (06.11.2026). */
.produktbereich__text {
  max-width: 68ch;
}
.produktbereich__data {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  grid-template-rows: auto;
  gap: clamp(28px, 3.8vw, 52px);
  align-items: start;
}
.produktbereich__info {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.produktbereich__info .produktbereich__bezeichnung {
  margin: 0 0 8px;
}
.produktbereich__info .produktbereich__kurzbeschreibung {
  margin: 0 0 18px;
  line-height: 1.6;
  max-width: 60ch;
}
.produktbereich__info .fact-list {
  margin: 0;
}
.produktbereich__info .fact-list__row {
  padding-block: 8px;
}
.produktbereich__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 20px;
}
.produktbereich__cta-row .produktbereich__cta {
  margin-top: 0;
}
.produktbereich__line-link {
  font-size: 14px;
  font-weight: 600;
  color: #344054;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.produktbereich__line-link:hover {
  color: #c80b0e;
}

.produktbereich__panel .produktbereich__data > .produktbereich__media {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.home-media-viewer__stage {
  width: 100%;
}
.produktbereich__media .home-slideshow__viewport,
.produktbereich__media .home-video-box__viewport {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: none;
  border-radius: var(--radius-media, 12px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  overflow: hidden;
  background: #111;
}
.produktbereich__media .home-slideshow__viewport {
  background: #fff;
}
.produktbereich__media [data-home-media-pane][hidden],
.produktbereich__media [data-home-photo-nav][hidden] {
  display: none !important;
}
.produktbereich__media .home-slideshow__slide {
  background: #eef1f4;
}
.produktbereich__media .home-slideshow__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.produktbereich__media .home-slideshow__slide--contain {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.produktbereich__media .home-slideshow__slide--contain[hidden] {
  display: none;
}
.produktbereich__media .home-slideshow__slide--contain img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #fff;
  clip-path: inset(2px);
}
.produktbereich__media .home-video-box__viewport video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.produktbereich__media .home-media-viewer__bar {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 10px;
  min-height: 34px;
}
.produktbereich__media .home-video-box__tabs,
.produktbereich__media .home-slideshow__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.produktbereich__media .home-slideshow__controls button {
  flex: 0 0 auto;
  width: auto;
  min-width: auto;
  height: 34px;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #1f242d;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.produktbereich__media .home-slideshow__controls button:hover {
  background: #f9fafb;
  border-color: #98a2b3;
}
.produktbereich__media .home-slideshow__controls .home-video-box__tab.is-active {
  background: #1f242d;
  border-color: #1f242d;
  color: #fff;
}
.produktbereich__media .home-slideshow__controls .home-video-box__tab.is-active:hover {
  background: #111827;
  border-color: #111827;
  color: #fff;
}
.home-video-box__play-icon {
  font-size: 9px;
  margin-right: 5px;
  line-height: 1;
  opacity: 0.8;
}
.produktbereich__media .home-slideshow__controls .home-slideshow__icon-btn {
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
}
.produktbereich__media .home-slideshow__controls .home-slideshow__toggle {
  font-size: 10px;
  letter-spacing: -1px;
}
.produktbereich__media .home-slideshow__controls .home-slideshow__arrow {
  font-size: 1.2rem;
  line-height: 1;
}
.produktbereich__media .home-slideshow__counter {
  flex: 0 0 auto;
  min-width: 40px;
  padding: 0 2px;
  white-space: nowrap;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: #475467;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .produktbereich__data {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .produktbereich__info,
  .produktbereich__panel .produktbereich__data > .produktbereich__media {
    grid-column: 1;
    grid-row: auto;
  }
}


/* Startseite: Bilder links und Videos rechts, ohne Produktdatenblock. */
.produktbereich__panel .produktbereich__data {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.produktbereich__panel .produktbereich__data > .produktbereich__media--photos {
  grid-column: 1;
  grid-row: 1;
}
.produktbereich__panel .produktbereich__data > .produktbereich__media--videos {
  grid-column: 2;
  grid-row: 1;
}
.produktbereich__panels + .produktbereich__cta-row {
  margin-top: 24px;
}
@media (max-width: 900px) {
  .produktbereich__panel .produktbereich__data {
    grid-template-columns: minmax(0, 1fr);
  }
  .produktbereich__panel .produktbereich__data > .produktbereich__media {
    grid-column: 1;
    grid-row: auto;
  }
}