/*
  Produktseiten (Rescue Bedding™ / Rescue Carry™ / Rescue Transfer™),
  Rescue Trade™ Website.
  Gemeinsames seitenspezifisches Layout für alle drei Produktseiten,
  eingebunden über inc/produkt-template.php – siehe dort für die
  gemeinsame Struktur, hier nur das Aussehen. Wiederverwendbare
  Bausteine liegen in css/components.css.
*/

/* -----------------------------------------------------------------
   01 Hero – kürzer als der Video-Hero der Startseite, analog zur
   Firma-Seite: kein Grund für volle 100vh, da kein Bezug zur
   Produkt-Spaltenreihe der Startseite besteht.
----------------------------------------------------------------- */
.hero {
  min-height: 88vh;
}
/* Produkt-Hero ohne Cover-Crop: Bild bestimmt die Höhe (volle Breite,
   natürliches Seitenverhältnis). Scrim/Content bleiben absolut darüber.
   Nur Transfer (.hero--photo); Bedding/Carry nutzen Cover + min-height 88vh. */
.hero.hero--photo {
  min-height: 0;
  height: auto;
  overflow: hidden;
}
.hero.hero--photo .hero__media {
  position: relative;
  inset: auto;
  top: auto;
  display: block;
  line-height: 0;
}
.hero.hero--photo .hero__media img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: unset;
  object-position: center center;
  display: block;
}
.hero.hero--photo .hero__scrim,
.hero.hero--photo .hero__content {
  position: absolute;
  inset: 0;
}
.hero.hero--photo .hero__content {
  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) var(--space-72);
  pointer-events: none;
}
.hero.hero--photo .hero__content > * {
  pointer-events: auto;
}
@media (max-width: 700px) {
  .hero.hero--photo .hero__content {
    padding-top: calc(var(--size-header-height) + var(--space-32));
  }
}
.hero__content {
  padding-bottom: var(--space-72);
}
.hero__subline {
  max-width: var(--measure-620);
  margin-bottom: var(--space-40);
}
/* .hero__actions (components.css) ist hier direktes Kind von
   .hero__content (Flex-Spalte), braucht deshalb zusätzlich align-self,
   siehe Kommentar bei .hero__actions in components.css. */
.hero__content > .hero__actions {
  align-self: flex-start;
}

/* -----------------------------------------------------------------
   02 Produktvorstellung – großes Bleed-Bild mit dreiteiliger
   Vorschau-Reihe darunter, daneben Eyebrow/Überschrift/Fließtext.
   Kein Vorbild in bestehenden Komponenten (anders als .product-row,
   das keine Vorschau-Reihe kennt), deshalb seitenspezifisch.
----------------------------------------------------------------- */
.produkt-vorstellung {
  padding-top: var(--space-170);
}
.produkt-vorstellung__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-96);
  align-items: start;
}
/* Ohne echtes Foto (Bildregister liefert kein "main", siehe
   $rt_product_vorstellung in inc/config.php und die Verzweigung in
   inc/produkt-template.php): keine Bildspalte, Text nimmt die volle
   Breite, aber begrenzt auf eine lesbare Zeilenlänge statt über
   1440px zu laufen. */
.produkt-vorstellung__grid--text-only {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--measure-900);
}
.produkt-vorstellung__main {
  margin-left: min(0px, calc((100vw - 1440px) / -2));
  height: var(--media-h-560);
}
/* Flex statt Grid, weil die Anzahl der Ansichten variiert (0–3, siehe
   inc/produkt-template.php) – Flex-Kinder mit flex:1 teilen sich die
   Breite unabhängig von der Anzahl gleichmäßig auf, ohne dass CSS die
   tatsächliche Anzahl kennen müsste (anders als bei einem festen
   `repeat(3, …)`-Grid, das bei weniger als drei Ansichten Lücken
   ließe). Wird nur gerendert, wenn mindestens eine Ansicht existiert. */
.produkt-vorstellung__views {
  display: flex;
  gap: var(--space-20);
  margin-top: var(--space-20);
}
/* position:relative + overflow:hidden + object-fit:cover auf dem Bild:
   ohne das ragt ein Foto, dessen eigenes Seitenverhältnis schmaler/
   höher ist als die 180px-Kachel, über die feste Höhe hinaus in die
   Sektion darunter hinein – das Kind-Bild hat sonst keine eigene
   Höhenbegrenzung, nur `max-width: 100%` aus dem globalen img-Reset
   (siehe css/base.css), die Höhe bleibt frei/proportional. Exakt das
   Muster von .gallery-grid__item (siehe components.css), hier nicht
   darüber wiederverwendet, weil .gallery-grid für eine Mehrspalten-
   Masonry-Galerie gebaut ist, nicht für eine feste 1–3er-Reihe. */
.produkt-vorstellung__view {
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  height: 180px;
}
.produkt-vorstellung__view img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.produkt-vorstellung__eyebrow {
  margin-bottom: var(--space-20);
}
/* hyphens + overflow-wrap gegen einen gemessenen Überlauf bei 390px:
   „Das Einweg-Umbettungslaken" auf der Transfer-Seite bricht hinter dem
   Bindestrich, und „Umbettungslaken" allein ist bei 36px noch 304px
   breit, also 10px breiter als die Spalte. hyphens:auto setzt einen echten Trennstrich, weil <html>
   lang="de" trägt; overflow-wrap bleibt als Absicherung stehen, falls
   ein Browser kein deutsches Trennwörterbuch mitbringt – dann bricht
   das Wort hart, läuft aber nicht über. Beide kosten dieselbe
   zusätzliche Zeile (gemessen: 80px auf 120px Höhe). */
.produkt-vorstellung__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);
  hyphens: auto;
  overflow-wrap: break-word;
}
.produkt-vorstellung__text p {
  margin: 0 0 var(--space-20);
  font-size: var(--fs-16);
}
.produkt-vorstellung__text p:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------------------------------
   Fotoreihe der Kategorien – ein Foto je Kategorie dieser
   Produktlinie mit dem Kategorienamen darunter, siehe
   inc/produkt-template.php.

   Abstände: .produkt-vorstellung trägt nur oben Padding,
   .produkt-merkmale bringt sein eigenes oberes Padding mit (110px).
   Diese Sektion bekommt deshalb ebenfalls 110px oben und bewusst
   kein Padding unten – dadurch sind beide Brüche innerhalb der
   hellen Zone gleich groß (Vorstellung → 110 → Kategorien → 110 →
   Merkmale), und wenn die Sektion entfällt (englische Seiten, keine
   Kategorien hinterlegt), stehen zwischen Vorstellung und Merkmalen
   wieder genau die 110px von vorher. Gemessen: 110px bei 1440px,
   96px ab 900px abwärts, jeweils identisch mit und ohne Sektion.
   Die 170px bleiben dem Wechsel zwischen hell und dunkel
   vorbehalten, nicht dem Bruch innerhalb einer Zone.
----------------------------------------------------------------- */
.produkt-kategorien {
  padding-top: var(--space-110);
}
.produkt-kategorien__head {
  max-width: var(--measure-900);
  margin-bottom: var(--space-56);
}
.produkt-kategorien__eyebrow {
  margin-bottom: var(--space-20);
}
/* Eine Stufe kleiner als .produkt-vorstellung__h2 und
   .produkt-daten__h2 (--fs-h2-lg): die Fotoreihe ordnet sich den
   beiden Hauptsektionen unter, statt mit ihnen zu konkurrieren.
   Bestehendes Token, kein neues erfunden. */
.produkt-kategorien__h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2-table);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-tight-025);
  color: var(--color-black);
  overflow-wrap: break-word;
}
.produkt-kategorien__text {
  margin: var(--space-24) 0 0;
  max-width: var(--measure-780);
  font-size: var(--fs-16);
  line-height: var(--lh-17);
  color: var(--color-text-secondary);
}
/* auto-fit statt fester Spaltenzahl je Produktlinie: die Anzahl der
   Kategorien kommt aus den Daten (Bedding 8, Transfer 4, Carry 3) und
   kann sich ändern, CSS darf sie deshalb nicht kennen. min(100%, …)
   wie bei .spec-grid in components.css – ohne das erzwingt die
   Mindestbreite bei 390px eine Spalte, die breiter ist als der
   Container, und die Seite läuft horizontal über. */
.produkt-kategorien__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-kategorien)), 1fr));
  gap: var(--space-24);
}
/* Unter 520px reicht die Breite für die 200px-Untergrenze nicht mehr,
   auto-fit fällt dort auf eine einzige Spalte zurück – die acht
   Bedding-Kategorien stünden dann als acht gestapelte Kacheln
   untereinander. Deshalb hier ausnahmsweise eine feste Spaltenzahl.
   Sie gilt für alle drei Produktlinien gleich, die Zahl der Einträge
   steuert also weiterhin nichts.

   520px als Grenze ist gemessen: genau dort bildet auto-fit von sich
   aus zwei Spalten mit exakt 200px Kachelbreite. Die feste Regel
   liefert an derselben Stelle dasselbe Ergebnis, das Raster springt am
   Übergang also nicht. Unter 520px werden die Kacheln zwangsläufig
   schmaler als 200px (bei 390px sind es 135px) – zwei kleine Kacheln
   sind dort besser als eine große, weil acht gestapelte Kacheln die
   Reihe über 2800px hoch machen würden. */
@media (max-width: 520px) {
  .produkt-kategorien__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Kacheln der Produktkategorien sind klickbare Links in den Katalog */
.produkt-kategorien__item {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: transform 0.2s ease;
}
.produkt-kategorien__item:hover {
  transform: translateY(-3px);
}
.produkt-kategorien__item:hover .produkt-kategorien__caption {
  color: var(--color-red-600, #c81e2b);
}
.produkt-kategorien__arrow {
  color: var(--color-red-600, #c81e2b);
  font-weight: var(--fw-bold, 700);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.produkt-kategorien__item:hover .produkt-kategorien__arrow {
  transform: translateX(3px);
}
/* 3:2 statt 1:1, weil die Vorlagen 3:2 sind: 12 der 15 Fotos haben
   exakt 1350×900, sie füllen den Rahmen damit ohne jeden Beschnitt.
   Ein 1:1-Rahmen schnitt bei allen zwölf ein Drittel der Breite weg,
   was besonders bei langen gefalteten Laken das Motiv zerstörte. Drei
   Fotos weichen ab und werden weiterhin leicht beschnitten:
   Polyester-Decken (1461×900), Katastrophenhilfe-Set (1175×900) und
   die Rettungsdecke (1800×900, für die 2:1-Sonderfläche der
   Startseite enger zugeschnitten).

   Der graue Grund ist der Ladezustand und die Fläche für die drei
   abweichenden Fotos. Er macht die Kachelkante nicht sichtbar: die
   Fotos sind deckende JPEGs und füllen den Rahmen vollständig, ein
   Hintergrund darunter ist dann nie zu sehen. Dafür sorgt die
   Hairline unten. */
.produkt-kategorien__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--color-gray-100);
}
/* Weiße Produkte auf weißem Fotohintergrund verschwimmen sonst mit der
   Seite, die Kachel hat dann keine erkennbare Kante. Eine Linie in
   --color-line ist der leiseste Weg, das zu beheben; eine Fläche
   darunter wirkt nicht, siehe oben. */
.produkt-kategorien__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-line);
  pointer-events: none;
}
.produkt-kategorien__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* overflow-wrap, weil Kategorienamen wie „Katastrophenhilfe-Set" und
   „Kopfkissenbezüge" die Zelle sonst sprengen, sobald die Spalte auf
   ihre Mindestbreite fällt. */
.produkt-kategorien__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: var(--space-12);
  font-size: var(--fs-15);
  line-height: var(--lh-155);
  color: var(--color-text);
  overflow-wrap: break-word;
  transition: color 0.2s ease;
}

/* Symbol vor der Beschriftung. Es erbt deren Farbe und wechselt beim
   Überfahren mit ihr auf Rot (siehe rt_category_icon in inc/config.php). */
.produkt-kategorien__caption-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}
.produkt-kategorien__caption-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: currentColor;
}

/* -----------------------------------------------------------------
   Merkmale-Liste – reine Layout-Hülle, die Einträge selbst sind
   .stat-list__item (siehe components.css).
----------------------------------------------------------------- */
.produkt-merkmale {
  padding-top: var(--space-110);
  padding-bottom: var(--space-170);
}
.produkt-merkmale__cta {
  margin-top: var(--space-48);
}

/* Bedding/Carry/Transfer: Merkmalliste + Vorstellungs-Text links, Bild rechts
   (wie Startseite .company--reverse: Media zuerst im DOM, order rechts).
   Main-Fotos: product-{bedding,carry,transfer}-main.jpg. Bedding-Hero separat:
   product-bedding-hero.jpg. Hover auf .stat-list__item links (components.css),
   nicht auf dem Bild. */
.produkt-merkmale__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--space-96);
  align-items: stretch;
}
.produkt-merkmale__content {
  min-width: 0;
}
/* Media-Spalte visuell rechts (DOM bleibt Media-zuerst wie .company--reverse). */
.produkt-merkmale--with-media .produkt-merkmale__media {
  order: 1;
}
.produkt-merkmale--with-media .produkt-vorstellung__text {
  margin-bottom: var(--space-40);
}
.produkt-merkmale--with-media .produkt-vorstellung__text p:last-child {
  margin-bottom: 0;
}
.produkt-merkmale__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-media, 12px);
  min-height: var(--media-h-560);
  align-self: stretch;
  height: 100%;
}
.produkt-merkmale__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* -----------------------------------------------------------------
   03 Technische Details – dunkler Kopf über einem .spec-grid (siehe
   components.css für die Datenblock-Komponente selbst).
----------------------------------------------------------------- */
.produkt-daten {
  background: var(--color-anthracite);
  padding: var(--space-170) 0;
  --focus-ring-color: var(--white-a85);
}
.produkt-daten__head {
  max-width: var(--measure-900);
  margin-bottom: var(--space-72);
}
.produkt-daten__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-white);
}
.produkt-daten__note {
  margin: var(--space-24) 0 0;
  font-size: var(--fs-16);
  color: var(--white-a85);
}
/* Bezeichnung der einzigen Ausführung bei nur einem Datenblock (siehe
   inc/produkt-template.php: dort läuft dann weder .compare-table
   noch .produkt-spec-mobile, sondern ausschließlich .spec-grid mit
   genau einem .spec-block, dessen eigenes .spec-block__label die
   Bezeichnung schon trägt – dieser Titel ist nur der Rahmen darüber,
   analog zu __head vor der Tabelle bei mehreren Ausführungen). */
.produkt-daten__variant-label {
  margin: 0 0 var(--space-32);
}

/* Vergleichstabelle bei mehreren Ausführungen (aktuell nur Rescue
   Transfer™, drei Ausführungen): Spaltenzahl kommt aus den Daten
   (Label-Spalte + eine Spalte je Ausführung), siehe .compare-table in
   components.css für das Grundgerüst und dessen eigenen Kommentar zur
   Spaltenbreite als Inline-Style vom Template. Ab 900px sichtbar –
   darunter übernimmt .produkt-spec-mobile (s. u.) dieselben Daten als
   Stapelung pro Ausführung, weil sich "Zeile = Merkmal, Spalte =
   Ausführung" nicht sinnvoll in eine schmale Spalte pressen lässt.
   Beide Varianten stehen im Markup, nur eine ist per Media Query
   sichtbar – kein JavaScript nötig, kein Layout-Sprung beim Resize. */
.produkt-spec-table {
  display: block;
}
.produkt-spec-mobile {
  display: none;
}
@media (max-width: 900px) {
  .produkt-spec-table {
    display: none;
  }
  .produkt-spec-mobile {
    display: block;
  }
}

/* -----------------------------------------------------------------
   04 Abschluss – .cta-panel (components.css) hat von sich aus kein
   oberes Padding (dort bislang immer der letzte Block vor einer
   Sektion mit eigenem unteren Abstand, z. B. der Galerie auf der
   Firma-Seite). Nach dem Datenblock/der Vergleichstabelle fehlt
   dieser Abstand, die Sektion klebt an der vorherigen – hier auf den
   Produktseiten mit dem sonst auf der Seite üblichen Sektionsabstand
   ergänzt statt am gemeinsamen Baustein zu ändern, um Firma nicht
   ungefragt mit zu beeinflussen.
----------------------------------------------------------------- */
.cta-panel {
  padding-top: var(--space-170);
}

/* -----------------------------------------------------------------
   Artikeltabelle aus dem Shopsystem des Kunden – nur Kopf und die
   Stelle, an der sein Einbettungsschnipsel landet, siehe
   inc/produkt-template.php und $rt_shop_embed in inc/config.php.

   Nur oberes Padding: die Sektion steht zwischen dem dunklen
   .produkt-daten und .cta-panel, das seine 170px oben selbst
   mitbringt. Mit eigenem unteren Padding stünden dort 340px Luft.
----------------------------------------------------------------- */
.produkt-artikel {
  padding-top: var(--space-170);
}
.produkt-artikel__head {
  max-width: var(--measure-900);
  margin-bottom: var(--space-56);
}
.produkt-artikel__eyebrow {
  margin-bottom: var(--space-20);
}
.produkt-artikel__h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2-table);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-tight-025);
  color: var(--color-black);
  overflow-wrap: break-word;
}
.produkt-artikel__text {
  margin: var(--space-24) 0 0;
  max-width: var(--measure-780);
  font-size: var(--fs-16);
  line-height: var(--lh-17);
  color: var(--color-text-secondary);
}
/* Bewusst nur der Außenabstand, keine Gestaltung: was in diesem
   Container steht, kommt vom Kunden und darf von uns nicht
   überschrieben werden. Attributselektor, weil die id den
   Produktschlüssel enthält (produkttabelle-embed-bedding usw.). */
[id^="produkttabelle-embed-"] {
  margin-top: var(--space-40);
}
/* Nur auf der Vorschau im Markup (rt_is_preview()), gestrichelter
   Rahmen wie bei .anfrage__vorschau-hinweis: so ist erkennbar, dass
   hier etwas eingehängt wird und nicht etwas fehlt. In der
   Kunden-Auslieferung existiert das Element nicht. */
.produkt-artikel__vorschau-hinweis {
  margin: var(--space-24) 0 0;
  padding: var(--space-24);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-15);
  line-height: var(--lh-155);
  color: var(--color-text-secondary);
}

@media (max-width: 900px) {
  .produkt-kategorien {
    padding-top: var(--space-96);
  }
  .produkt-artikel {
    padding-top: var(--space-96);
  }
  .produkt-vorstellung__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-48);
  }
  .produkt-vorstellung__main {
    margin-left: 0;
    height: 340px;
  }
  .produkt-vorstellung__view {
    height: 110px;
  }
  .produkt-merkmale {
    padding-top: var(--space-96);
    padding-bottom: var(--space-96);
  }
  .produkt-merkmale__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
  }
  /* Bild zuerst auf Mobil, analog .company--reverse (home.css). */
  .produkt-merkmale__media {
    order: -1;
    min-height: var(--media-h-300);
  }
  .produkt-daten {
    padding: var(--space-96) 0;
  }
  .cta-panel {
    padding-top: var(--space-96);
  }
}

/* Familienseiten: Vorstellungsfoto in voller Breite wie auf der
   Startseite (Wunsch Lucas 05.11.2026). Bild randlos ueber die ganze
   Fensterbreite, Text darunter in lesbarer Breite; Detailansichten
   (Carry/Transfer) als volle Reihe darunter. */
.produkt-vorstellung { overflow-x: clip; }
.produkt-vorstellung__grid:not(.produkt-vorstellung__grid--text-only) {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-64);
}
.produkt-vorstellung__grid:not(.produkt-vorstellung__grid--text-only) > div[data-reveal]:last-child {
  max-width: var(--measure-900, 900px);
}
.produkt-vorstellung__main {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: min(78vh, 760px);
  border-radius: 0;
}
.produkt-vorstellung__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.produkt-vorstellung__views {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  gap: 4px;
  margin-top: 4px;
}
.produkt-vorstellung__view { height: clamp(160px, 22vw, 340px); border-radius: 0; }
@media (max-width: 900px) {
  .produkt-vorstellung__main { margin-left: calc(50% - 50vw); height: 56vh; }
  .produkt-vorstellung__view { height: 120px; }
}

/* Artikeltabelle der Produktlinie (aus dem Shop) */
.produkt-artikel__table-wrap { overflow-x: auto; margin-top: var(--space-32, 32px); }
.produkt-artikel__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.produkt-artikel__table th { text-align: left; font-weight: var(--fw-bold, 700); padding: 10px 12px; border-bottom: 2px solid var(--color-black, #111); white-space: nowrap; }
.produkt-artikel__table td { padding: 10px 12px; border-bottom: 1px solid var(--color-line, #e2e5e9); vertical-align: top; }
.produkt-artikel__table tbody tr:hover { background: #f6f7f9; }
.produkt-artikel__sku a { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--color-black, #111); text-decoration: none; white-space: nowrap; }
.produkt-artikel__more a { color: var(--color-red, #c80b0e); white-space: nowrap; text-decoration: none; font-weight: 700; }

/* Einheitlich (05.11.2026): ein Radius fuer alle Medien/Karten, ein
   Seitenverhaeltnis je Section. Vorstellungsbild bleibt bildschirmbreit,
   mit 16px Rand, damit die runden Ecken sichtbar sind. */
.produkt-vorstellung__main { width: calc(100vw - 32px); margin-left: calc(50% - 50vw + 16px); border-radius: var(--radius-media, 12px); overflow: hidden; }
.produkt-vorstellung__views { width: calc(100vw - 32px); margin-left: calc(50% - 50vw + 16px); }
.produkt-vorstellung__view { width: auto; margin-left: 0; height: auto; aspect-ratio: 3 / 2; border-radius: var(--radius-media, 12px); overflow: hidden; }
.produkt-vorstellung__view img, .produkt-vorstellung__main img { width: 100%; height: 100%; object-fit: cover; }
.produkt-kategorien__item { border-radius: var(--radius-media, 12px); overflow: hidden; }
.produkt-kategorien__media { aspect-ratio: 3 / 2; overflow: hidden; }
.produkt-kategorien__media img { width: 100%; height: 100%; object-fit: cover; }
.produkt-artikel__table-wrap { border-radius: var(--radius-media, 12px); }