/* ==========================================================================
   Stadler Prüfpumpen – Version 1 „Original“
   Originalgetreue Umsetzung des Entwurfs: hell, Orange + Marineblau, Inter
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Orange des Logos (assets/img/logo.svg); die Abstufungen haben denselben Farbton */
  --orange: #ff6300;
  --orange-600: #ee5700; /* Hover: etwas dunkler */
  --orange-ink: #e05200; /* kleine orange Texte auf Weiß: kräftiger für bessere Lesbarkeit (3,9 : 1) */
  --navy: #0b3570;
  --navy-700: #0e3874;
  --navy-900: #082650;
  --ink: #1d3760;
  --muted: #566a87;
  --line: #e3e7ee;
  --soft: #f7f8fc;
  --white: #fff;

  --radius: 4px;
  --container: 82.5rem;
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --header-h: clamp(4.75rem, 6.7vw, 6rem);

  /* Kopfzeile – auf allen Seiten und in allen Sprachen dieselben Maße (keine sprachabhängigen Regeln).
     Ab 1200 px steht das Menü neben dem Logo; Logo (13.5rem → 20rem) und Menüschrift wachsen bis 1408 px Fensterbreite
     linear mit. Das Logo beginnt so breit wie im Kopf mit Menü-Schalter darunter – es springt beim Umschalten nicht und
     wächst über alle Breiten stetig. Erst ab 1200 px passen die Menüpunkte daneben (zweizeilig, feste Plätze, siehe
     .nav-list li). Sie stehen gleichmäßig verteilt zwischen Logo und Sprachumschalter (siehe .nav-list): auf Deutsch
     rund 35 px auseinander bei 1200 px neben einer Scrollleiste, 41 px ab 1423 px, nach dem Scrollen (kleineres Logo)
     41–51 px. --nav-gap ist nur der Mindestabstand. Unter 1200 px liegt das Menü hinter dem Schalter (siehe unten). */
  --logo-w: clamp(13.5rem, 50vw - 24rem, 20rem);
  --logo-w-small: max(9.5rem, var(--logo-w) * .82); /* nach dem Scrollen */
  --nav-fs: clamp(.875rem, .1538rem + .9615vw, 1rem);
  --nav-gap: 1.5rem;

  --shadow-sm: 0 1px 2px rgba(11, 53, 112, .05), 0 8px 24px -12px rgba(11, 53, 112, .18);
  --shadow-md: 0 2px 4px rgba(11, 53, 112, .05), 0 22px 44px -18px rgba(11, 53, 112, .3);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Variablen für den gemeinsamen Anfrage-Dialog (assets/css/base.css) */
  --focus: var(--orange);
  --dlg-accent: var(--orange);
  --dlg-accent-hover: var(--orange-600);
  --dlg-accent-ink: var(--orange-ink);
  --dlg-ink: var(--navy);
  --dlg-text: var(--ink);
  --dlg-muted: var(--muted);
  --dlg-radius: 4px;
}

body {
  display: flex; /* der Fuß bleibt auch auf kurzen Seiten (Impressum, Fehlerseite) am unteren Rand */
  flex-direction: column;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
}

main {
  flex: 1 0 auto;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.nowrap {
  white-space: nowrap;
}

/* Begriffe, die nicht am Bindestrich umbrechen sollen (z. B. „VA-Edelstahl“, „conteneurs-citernes“) – anders als
   .nowrap auch auf Handys */
.nobr {
  white-space: nowrap;
}

/* Zeilenfall: Überschriften und kurze Texte ausgewogen, Absätze und Listenpunkte ohne einzelnes Wort in der letzten
   Zeile (Chrome/Edge, Safari 17.5+, Firefox 121+; ältere Browser ignorieren es) */
h1, h2, h3, h4, .eyebrow, .btn, figcaption, blockquote {
  text-wrap: balance;
}

p, li, dd {
  text-wrap: pretty;
}

/* ---------- Gleiche Größe in allen Sprachen ----------
   Jedes Element mit data-fit trägt unsichtbare Platzhalter mit dem Text der anderen Sprachfassungen (.fit, die
   Texte als Attribut data-t) und seinen eigenen Inhalt in .fit-own – erzeugt von scripts/sync_fit.py. Alle liegen
   in derselben Rasterzelle übereinander: Das Element ist bei jeder Breite so hoch wie die längste Fassung (und, wo
   sich die Breite nach dem Inhalt richtet, so breit wie die breiteste). So sind Überschriften, Absätze und damit
   alle Boxen in jeder Sprache gleich groß, und beim Sprachwechsel springt nichts. Ein Raster statt float über dem
   Text: Safari gleicht Zeilen neben einem float nicht mehr aus (text-wrap: balance). Schmuck per ::before/::after
   (z. B. der Strich über den Vorzeilen) behält seinen Platz davor bzw. dahinter. */
[data-fit] {
  display: grid;
  align-content: start;
}

[data-fit]::before {
  grid-row: 1;
}

[data-fit] > .fit,
[data-fit] > .fit-own {
  grid-area: 2 / 1;
}

[data-fit]::after {
  grid-row: 3;
}

.fit {
  visibility: hidden;
}

.fit [data-t]::before {
  content: attr(data-t);
}

/* Safari setzt mit text-wrap: pretty ganze Absätze neu und kann dabei eine Zeile mehr brauchen – für den Text der
   Platzhalter (lauter kleine <span>) anders als für den eigenen Text derselben Sprache. Damit beide gleich
   umbrechen, gilt dort der normale Umbruch wie in Firefox, das pretty nicht kennt (Ausgleich kurzer Texte siehe
   product.css). hanging-punctuation kennt nur Safari. */
@supports (hanging-punctuation: first) {
  :where(p, li, dd)[data-fit],
  [data-fit] :where(p, li, dd) {
    text-wrap: wrap;
  }
}

/* ---------- Bausteine ---------- */
.eyebrow {
  font-size: clamp(.78rem, .97vw, .875rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.eyebrow--bar::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-bottom: 1rem;
  border-radius: 2px;
  background: var(--orange);
}

/* Strich links vor der Vorzeile – absolut gesetzt, damit der Text allein im Raster von data-fit liegt; bricht die
   Vorzeile um (Handys), steht der Strich vor der ersten Zeile */
.eyebrow--line {
  position: relative;
  padding-left: calc(2.75rem + .9rem);
  color: var(--white);
}

.eyebrow--line::before {
  content: "";
  position: absolute;
  top: calc(.8em - 1.5px); /* mittig zur ersten Zeile (Zeilenhöhe 1,6) */
  left: 0;
  width: 2.75rem;
  height: 3px;
  border-radius: 2px;
  background: var(--orange);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.02rem 1.65rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ff7429 0%, var(--orange) 55%, #f95a00 100%);
  color: var(--white);
  font-size: clamp(1rem, 1.18vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 1px 1px rgba(160, 60, 0, .25), 0 10px 22px -10px rgba(255, 99, 0, .65);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn svg {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  transition: transform .25s ease;
}

/* Beschriftung mit Platzhaltern (data-fit): Die Schaltfläche ist in jeder Sprache so breit und hoch wie die längste
   Beschriftung; bricht nur eine andere Sprache zweizeilig um, steht der eigene Text trotzdem mittig */
.btn > [data-fit] > .fit-own {
  align-self: center;
}

.btn:hover {
  filter: brightness(.96) saturate(1.08);
  transform: translateY(-1px);
  box-shadow: 0 1px 1px rgba(160, 60, 0, .25), 0 16px 28px -12px rgba(255, 99, 0, .75);
}

.btn:hover svg {
  transform: translateX(5px);
}

.btn:active {
  transform: none;
}

.section-title {
  font-size: clamp(1.75rem, 2.92vw, 2.625rem);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--navy);
  text-wrap: balance;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white); /* deckend: beim Scrollen scheint kein Text durch (ein Weichzeichner griff am Rand nicht) */
  border-bottom: 2px solid var(--orange);
  transition: box-shadow .25s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 10px 30px -18px rgba(11, 53, 112, .45);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nav-gap); /* wie in der Navigation: auch der Abstand zum Logo wird gleich groß (siehe .nav-list) */
  min-height: var(--header-h); /* min-height statt height: dreizeilige Menüpunkte (längere Sprachen) werden nie abgeschnitten */
  transition: min-height .25s ease;
}

.is-scrolled .header-inner {
  min-height: 4.5rem;
}

.logo {
  display: block;
  flex: none;
}

.site-header .logo img {
  width: var(--logo-w);
  transition: width .25s ease;
}

.site-header.is-scrolled .logo img {
  width: var(--logo-w-small);
}

/* Solange site.js beim Laden den Anfangszustand setzt, ohne Übergänge: Kommt die Seite schon gescrollt an (nach einem
   Sprachwechsel an derselben Lesestelle), stünde der Header sonst erst groß da und schrumpfte sichtbar */
.site-header.no-transition,
.site-header.no-transition * {
  transition: none !important;
}

/* Navigation und Sprachumschalter nebeneinander; auf Mobilgeräten untereinander (siehe unten). Beide sind gleich hoch
   (stretch): Der orange Strich unter der aktiven Sprache sitzt so auf derselben Höhe wie der unter dem aktuellen
   Menüpunkt (base.css, „Sprachumschalter“) */
.main-nav {
  display: flex;
  flex-grow: 1; /* reicht vom Logo bis zum rechten Rand */
  align-items: stretch;
  gap: var(--nav-gap);
}

/* Die Menüpunkte stehen gleichmäßig verteilt zwischen Logo und Sprachumschalter: Der freie Platz geht zu gleichen
   Teilen vor, zwischen und hinter die Punkte (space-evenly), dazu kommt überall derselbe Mindestabstand (--nav-gap –
   auch im Kopf zum Logo und hier zum Umschalter). Nach dem Scrollen wird das Logo kleiner, die Punkte gleiten mit */
.nav-list {
  display: flex;
  flex-grow: 1;
  justify-content: space-evenly;
  gap: var(--nav-gap);
  font-size: var(--nav-fs); /* auch Maß der Plätze (em) */
}

/* Feste Plätze: Jeder Menüpunkt ist so breit wie sein deutscher Text (--nav-slot, in em der Menüschrift, gemessen in
   Inter 600), der Text steht mittig darin – längere englische und französische Texte ragen gleichmäßig nach beiden
   Seiten darüber hinaus. Beim Sprachwechsel bleibt so jeder Punkt an seiner Stelle, nur sein Text wechselt; auf
   Deutsch sind die Abstände genau gleich, auf Englisch und Französisch (andere Textlängen) nicht ganz. Wird ein
   deutscher Menütext geändert, hier nachmessen.
   Jeder Menüpunkt ist außerdem so hoch wie der höchste (zweizeilige); der Link füllt ihn aus, sein Text steht darin
   senkrecht mittig. Der Unterstrich am unteren Rand des Links sitzt so bei ein- und zweizeiligen Punkten auf
   derselben Höhe, knapp unter der letzten Zeile der zweizeiligen */
.nav-list li {
  display: flex;
  flex: none;
  justify-content: center;
  width: var(--nav-slot);
}

.nav-list li:nth-child(1) {
  --nav-slot: 4.68em;
}

.nav-list li:nth-child(2) {
  --nav-slot: 13.35em;
}

.nav-list li:nth-child(3) {
  --nav-slot: 9.75em;
}

.nav-list li:nth-child(4) {
  --nav-slot: 9.17em;
}

.nav-list li:nth-child(5) {
  --nav-slot: 3.91em;
}

.nav-list a {
  position: relative;
  display: flex;
  flex: none; /* ist er breiter als sein Platz, bricht er trotzdem nicht weiter um */
  flex-direction: column;
  justify-content: center;
  padding-block: .5rem;
  font-weight: 600;
  line-height: 1.25; /* kompakt genug, dass der Unterstrich auch im niedrigen gescrollten Header Abstand zur orangen Linie hat */
  text-align: center;
  color: var(--navy);
  transition: color .2s ease;
}

.nav-break {
  display: block;
}

.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

.nav-list a:hover::after,
.nav-list a[aria-current]::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  color: var(--navy);
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  margin-inline: auto;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, background-color .2s ease;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before {
  top: -7px;
}

.nav-toggle-bars::after {
  top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(0deg, rgba(214, 222, 234, .55) 0%, rgba(214, 222, 234, 0) 26%),
    linear-gradient(180deg, #fdfdfe 0%, #f5f7fb 100%);
}

.hero-media {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: min(66%, 62rem);
}

.hero-media picture,
.hero-media img {
  width: 100%;
  height: 100%;
}

.hero-media img {
  object-fit: cover;
  object-position: 100% 58%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 16%, #000 44%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 16%, #000 44%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  align-items: center;
  min-height: clamp(30rem, 41.8vw, 39rem);
}

.hero-copy {
  padding-block: 3.5rem 4rem;
}

.hero h1 {
  margin-top: 1rem;
  font-size: clamp(2.25rem, 4.44vw, 4.125rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--navy);
}

/* Die Titelgröße hängt von der Sprache ab (unten): Die Platzhalter der anderen Sprachen (.fit, siehe data-fit) nehmen
   deshalb nicht die Größe des Titels an, sondern die ihrer eigenen Sprache – mit Laufweite in em dazu, die sonst in
   Pixeln der Titelgröße geerbt würde */
.hero h1 > .fit {
  font-size: clamp(2.25rem, 4.44vw, 4.125rem);
  letter-spacing: -.025em;
}

/* Französisch: die längere Überschrift bleibt bei zwei Zeilen */
@media (min-width: 721px) {
  .hero h1:lang(fr),
  .hero h1 > .fit:lang(fr) {
    font-size: clamp(2rem, 3.75vw, 3.5rem);
  }
}

@media (max-width: 720px) {
  .hero h1:lang(fr),
  .hero h1 > .fit:lang(fr) {
    font-size: clamp(1.6rem, 7vw, 2.3rem);
  }
}

/* Startseite (.hero--home): der zweite Teil der Überschrift („mit Vakuumprüfpumpen“, „par pompes d'essai à vide“)
   hält auch auf Handys zusammen (.nobr) – die Schrift wächst dort mit der Fensterbreite so, dass er ab 320 px in
   eine Zeile passt. Englisch bricht auf Handys frei um („Leak Testing with / Vacuum Test Pumps“) und ist ab 721 px
   etwas kleiner: „with Vacuum Test Pumps“ ist die längste Zeile und bestimmt bis rund 1450 px die Breite der
   Textspalte – größer ließe sie dem Video weniger Platz (siehe .hero--home .hero-inner). */
@media (min-width: 721px) {
  .hero--home h1:lang(en),
  .hero--home h1 > .fit:lang(en) {
    font-size: clamp(2.125rem, 4.44vw, 3.875rem);
  }
}

@media (max-width: 720px) {
  .hero--home h1:lang(de),
  .hero--home h1 > .fit:lang(de) {
    font-size: min(2.6rem, 8.4vw - .2rem);
  }

  .hero--home h1:lang(fr),
  .hero--home h1 > .fit:lang(fr) {
    font-size: min(2.3rem, 7.8vw - .2rem);
  }
}

.hero-lead {
  max-width: 29rem;
  margin-top: 1.7rem;
  font-size: clamp(1.0625rem, 1.53vw, 1.375rem);
  line-height: 1.55;
  color: var(--ink);
}

/* Startseite: der kurze Einleitungstext ausgewogen – kein einzelnes Wort in der letzten Zeile, auch in Firefox
   (kennt text-wrap: pretty noch nicht) */
.hero--home .hero-lead {
  text-wrap: balance;
}

.hero .btn {
  margin-top: 2.1rem;
}

.hero-product {
  align-self: end;
  justify-self: start;
  margin-left: clamp(-3rem, -6vw + 3rem, 0rem);
  margin-bottom: clamp(1rem, 1.7vw, 1.5rem); /* das Foto ist knapp zugeschnitten: Luft zum unteren Rand */
}

/* Freigestelltes Produktfoto (assets/img/produkte/): der enge Schatten zeichnet die Kontur des hellen Edelstahls
   gegen den hellen Hintergrund nach, der weite hebt die Pumpe ab */
.hero-product img {
  width: auto;
  height: clamp(26rem, 37vw, 35rem);
  filter: drop-shadow(0 1px 1px rgba(8, 30, 66, .28)) drop-shadow(0 20px 24px rgba(8, 30, 66, .2));
}

/* Startseite: rechts neben dem Text das Produktvideo (siehe „Produktvideo“), senkrecht mittig; der Kopfbereich ist
   so hoch wie der Text. Die Textspalte ist genau so breit wie die längste Zeile der Überschrift – der breitesten der
   drei Sprachen, weil die Platzhalter der anderen (data-fit) mit in der Spalte stehen. Der Spaltenabstand ist damit
   der kleinste Abstand zum Video (36 px bei 961 px, 48 px ab 1500 px), alles Übrige bekommt das Video. Bis 960 px
   steht es unter dem Text (siehe „Responsive“). */
.hero--home .hero-inner {
  --abstand: clamp(2.25rem, 3.2vw, 3rem);
  grid-template-columns: min-content minmax(0, 1fr);
  column-gap: var(--abstand);
  min-height: 0;
}

/* Neben dem Text reicht das Video über den Inhalt hinaus nach rechts – so wird es größer, ohne dass die Überschrift
   kleiner werden muss. Es steht mittig zwischen Überschrift und Fensterrand: rechts derselbe Abstand wie links
   (--abstand), höchstens 52rem breit (dann so hoch wie der Text); in noch breiteren Fenstern wachsen beide Abstände
   gleich. --rand ist der Abstand des Inhalts zum Fensterrand, gemessen an der Breite des Kopfbereichs (cqw) – 100vw
   zählte die Scrollleiste mit. */
@media (min-width: 961px) {
  .hero--home {
    container-type: inline-size;
  }

  .hero--home .hero-video {
    --rand: calc((100cqw - min(100cqw - 2 * var(--gutter), var(--container))) / 2);
    margin-block: 2rem; /* wäre es höher als der Text: stößt nicht an Kopf und Unterkante */
    margin-right: calc(var(--abstand) - var(--rand));
  }

  .hero--home .hero-video > * {
    max-width: 52rem;
    margin-inline: auto;
  }
}

/* dezente Eingangsanimation */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: rise .8s cubic-bezier(.2, .7, .2, 1) both;
  }

  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-copy > :nth-child(4) { animation-delay: .24s; }

  .hero-product img,
  .hero-video {
    animation: rise 1s cubic-bezier(.2, .7, .2, 1) .15s both;
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(22px);
    }
  }

  /* nach einem Sprachwechsel nicht noch einmal: der Kopfbereich war schon zu sehen (lang-switched, siehe base.css) */
  .lang-switched .hero-copy > *,
  .lang-switched .hero-product img,
  .lang-switched .hero-video {
    animation: none;
  }
}

/* ---------- Seitenwechsel ----------
   Browser mit seitenübergreifenden View Transitions (Chrome/Edge ab 126, Safari ab 18.2) animieren jeden Wechsel zu
   einer anderen Seite der Website – Unterseiten, Impressum, Datenschutz, Danke- und Fehlerseite, auch mit der
   Zurück-Taste:
   - Der Kopf bleibt stehen. Er, das Logo und ab 1200 px jeder Menüpunkt und der Sprachumschalter werden einzeln
     übergeblendet: Kommt die alte Seite gescrollt mit kleinem Kopf und die neue oben mit großem, wachsen Kopf und Logo
     weich mit und die Menüpunkte gleiten an ihre Stelle, statt doppelt zu erscheinen (die Fläche des Kopfs wird dafür
     auf die jeweilige Höhe gestreckt).
   - Der Inhalt blendet aus, danach der neue ein (vt-out, vt-in) – nie stehen zwei Seiten halb übereinander. Dabei
     steigen Kopfbereich und Abschnitte der neuen Seite wie beim Laden auf (Eingangsanimation oben, data-reveal),
     Textseiten wie Impressum, Datenschutz, Danke- und Fehlerseite als Ganzes (page-enter).
   - Nach einem Sprachwechsel (lang-switched) steht die neue Seite an derselben Stelle wie die alte und hat dieselben
     Maße (data-fit): Beide gehen gleichmäßig ineinander über, sodass Kopf, Bilder und Flächen ruhig stehen bleiben,
     und die neuen Texte steigen sanft ein (lang-text).
   Ohne View Transitions (Firefox) erscheint die neue Seite sofort, die Einblendungen der neuen Seite laufen trotzdem.
   Damit die neue Seite schon im ersten Bild fertig dasteht (Lesestelle, Kopfzustand, gesehene Abschnitte), binden alle
   Seiten site.js im <head> mit blocking="render" ein – Chrome zeichnete sonst oft erst die Seite ganz oben und sprang
   dann. Bei „Bewegung reduzieren“ wechseln die Seiten wie bisher sofort. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .site-header {
    view-transition-name: site-header;
  }

  .site-header .logo {
    view-transition-name: site-logo;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: .45s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }

  ::view-transition-old(site-header),
  ::view-transition-new(site-header) {
    height: 100%;
  }

  html:not(.lang-switched)::view-transition-old(root) {
    animation: vt-out .25s cubic-bezier(.4, 0, 1, 1) both;
  }

  html:not(.lang-switched)::view-transition-new(root) {
    animation: vt-in .35s cubic-bezier(0, 0, .2, 1) .1s both;
  }

  @keyframes vt-out {
    to {
      opacity: 0;
    }
  }

  @keyframes vt-in {
    from {
      opacity: 0;
    }
  }

  main.legal > .legal-inner {
    animation: page-enter .6s cubic-bezier(.2, .7, .2, 1) backwards;
  }

  @keyframes page-enter {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
  }

  /* Sprachwechsel: nur die Texte (.fit-own, siehe „Gleiche Größe in allen Sprachen“), Rechtstexte ohne Platzhalter als
     Ganzes. Getrennte Regeln: Ein Browser ohne :has() verwürfe sonst die ganze Regel. */
  .lang-switched main.legal > .legal-inner {
    animation: none;
  }

  .lang-switched .fit-own {
    animation: lang-text .5s cubic-bezier(.2, .7, .2, 1) .06s backwards;
  }

  .lang-switched main.legal > .legal-inner:not(:has(.fit-own)) {
    animation: lang-text .5s cubic-bezier(.2, .7, .2, 1) .06s backwards;
  }

  @keyframes lang-text {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  }
}

/* darunter liegt die Navigation im aufklappbaren Menü. Einzeln statt als Ganzes: Neben dem kleinen Logo stehen die
   Menüpunkte weiter links (siehe .nav-list) – die ganze Navigation würde beim Übergang gestreckt */
@media (prefers-reduced-motion: no-preference) and (min-width: 1200px) {
  .nav-list li:nth-child(1) {
    view-transition-name: site-nav-1;
  }

  .nav-list li:nth-child(2) {
    view-transition-name: site-nav-2;
  }

  .nav-list li:nth-child(3) {
    view-transition-name: site-nav-3;
  }

  .nav-list li:nth-child(4) {
    view-transition-name: site-nav-4;
  }

  .nav-list li:nth-child(5) {
    view-transition-name: site-nav-5;
  }

  .main-nav .lang-switch {
    view-transition-name: site-lang;
  }
}

/* ---------- Vorteile ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: clamp(2.25rem, 4vw, 3rem) clamp(2.5rem, 4vw, 3.25rem);
}

/* Symbol, Titel und Text jeder Karte liegen in gemeinsamen Zeilen des Rasters (subgrid): bricht ein Titel um
   (z. B. „Individuelle / Lösungen“ bei 961 px), beginnen die Texte der Reihe trotzdem auf gleicher Höhe */
.feature {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: .5rem clamp(1rem, 2vw, 1.75rem) .75rem;
  border-left: 1px solid var(--line);
  text-align: center;
}

.feature:first-child {
  border-left: 0;
}

.feature-icon {
  width: clamp(3.25rem, 4.58vw, 4.125rem);
  height: clamp(3.25rem, 4.58vw, 4.125rem);
  margin-inline: auto;
  color: var(--orange);
}

.feature-title {
  margin-top: 1.1rem;
  font-size: clamp(1.125rem, 1.53vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--navy);
}

.feature p {
  max-width: 17rem;
  margin: .8rem auto 0;
  font-size: clamp(.9375rem, 1.18vw, 1.0625rem);
  line-height: 1.7;
  color: var(--muted);
  text-wrap: balance; /* kurze, mittig gesetzte Texte: gleich lange Zeilen statt eines einzelnen Worts am Ende */
}

/* ---------- Produktvideo ----------
   Im Kopfbereich der Startseite (.hero-video). Zwei-Klick-Lösung: zuerst nur das Vorschaubild vom eigenen Server mit
   Abspiel-Schaltfläche; nach dem Klick setzt site.js den YouTube-Player an dieselbe Stelle (16:9-Rahmen, deshalb
   springt nichts). */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy-900);
  box-shadow: var(--shadow-md);
}

.video-poster,
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-poster picture,
.video-poster img {
  width: 100%;
  height: 100%;
}

.video-poster img {
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.video-poster:hover img {
  transform: scale(1.02);
}

/* Der Fokusrahmen liegt am Rahmen außen – am Link selbst schnitte ihn overflow: hidden ab */
.video-poster:focus-visible {
  outline: none;
}

.video-frame:has(.video-poster:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(4rem, 8vw, 5.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff7429 0%, var(--orange) 55%, #f95a00 100%);
  color: var(--white);
  box-shadow: 0 0 0 .5rem rgba(255, 255, 255, .3), 0 14px 30px -10px rgba(8, 30, 66, .6);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Das SVG deckt den ganzen Kreis ab; das Dreieck ist darin so gezeichnet, dass sein Schwerpunkt genau auf der
   Kreismitte liegt (optische Mitte) – keine Verschiebung per CSS nötig */
.video-play svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-poster:hover .video-play {
  transform: translate(-50%, -50%) scale(1.07);
  box-shadow: 0 0 0 .6rem rgba(255, 255, 255, .38), 0 18px 34px -10px rgba(8, 30, 66, .65);
}

.video-time {
  position: absolute;
  top: .75rem;
  right: .75rem;
  padding: .15rem .5rem;
  border-radius: 3px;
  background: rgba(8, 26, 54, .8);
  color: var(--white);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.video-note {
  margin-top: .9rem;
  font-size: .8125rem;
  line-height: 1.6;
  text-align: center;
  color: var(--muted);
}

.video-note a {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease;
}

.video-note a:hover {
  color: var(--orange-ink);
}

/* ---------- Produkte ---------- */
.products {
  padding-block: clamp(3.5rem, 6vw, 5.25rem) clamp(3.5rem, 6vw, 5rem);
  background: var(--soft);
}

/* Einleitung über den Karten: daneben blieben den drei Karten nur gut 200 px Breite */
.products-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 2.6vw, 2.5rem);
}

.products-intro {
  max-width: 44rem;
}

.products-intro .section-title {
  margin-top: .9rem;
}

.section-text {
  margin-top: 1.6rem;
  font-size: clamp(1rem, .9rem + .25vw, 1.0625rem);
  line-height: 1.8;
  color: var(--ink);
}

.products-intro .btn {
  margin-top: 2rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.card {
  padding: 1.9rem 1.25rem 2.1rem;
  border-top: 3px solid var(--orange);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 2rem; /* zusätzlich zum scroll-padding-top der Seite (base.css) */
  transition: translate .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
}

/* Die Karten blenden per data-reveal (transform) ein – das Anheben beim Hover läuft deshalb über die
   eigenständige translate-Eigenschaft und ergänzt die Übergangsliste der Einblendung. */
.js .card[data-reveal] {
  transition:
    opacity .7s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms),
    transform .7s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms),
    translate .3s cubic-bezier(.2, .7, .2, 1),
    box-shadow .3s ease;
}

.card:hover {
  translate: 0 -5px;
  box-shadow: var(--shadow-md);
}

.card:target {
  animation: card-focus 2s ease-out 1;
}

@keyframes card-focus {
  0%,
  35% {
    box-shadow: 0 0 0 3px rgba(255, 99, 0, .55), var(--shadow-md);
  }

  100% {
    box-shadow: 0 0 0 3px rgba(255, 99, 0, 0), var(--shadow-sm);
  }
}

.card-icon {
  width: 4.5rem;
  height: 2.75rem;
  color: var(--orange);
}

.card-icon--square {
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: -.15rem;
}

.card-title {
  min-height: 3.95em; /* zwei Titelzeilen + Unterzeile: hält die Checklisten auf einer Linie */
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1.46vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--navy);
}

/* Französisch: der erste Kartentitel braucht drei Zeilen – alle Karten reservieren sie, damit die Listen bündig bleiben */
@media (min-width: 1201px) {
  .card-title:lang(fr) {
    min-height: 5.2em;
  }
}

.card-sub {
  display: block;
  margin-top: .2rem;
  font-size: .8em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

.checklist {
  display: grid;
  gap: .8rem;
  margin-top: 1.5rem;
}

/* Haken links neben dem Text – absolut gesetzt, damit der Text allein im Raster von data-fit liegt. Er steht vor den
   Platzhaltern, nicht in .fit-own (scripts/sync_fit.py): Beim Sprachwechsel bleibt er stehen, nur der Text blendet ein. */
.checklist li {
  position: relative;
  padding-left: calc(1rem + .6rem);
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--ink);
}

.checklist svg {
  position: absolute;
  top: .17rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  color: var(--orange);
}

/* Startseite: umbrechende Listenpunkte der Karten ausgewogen – kein einzelnes Wort in der zweiten Zeile, auch in
   Firefox (kennt text-wrap: pretty noch nicht) */
.products .checklist li {
  text-wrap: balance;
}

/* „Mehr erfahren“: Verweis auf die Produktseite (bisher nur Deutsch). Er sitzt unten in der Karte – in allen
   Karten einer Reihe auf derselben Höhe –, und ::after macht die ganze Karte anklickbar. */
.card:has(.card-link) {
  position: relative;
  display: flex;
  flex-direction: column;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--orange-ink);
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card-link svg {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform .25s ease;
}

.card:hover .card-link svg {
  transform: translateX(4px);
}

@media (max-width: 720px) {
  .card:has(.card-link) {
    display: grid;
  }

  .card-link {
    grid-column: 2;
  }
}

@media (max-width: 540px) {
  .card-link {
    grid-column: 1;
  }
}

/* Startseite ab 961 px: die drei Karten teilen sich die Zeilen des Rasters (subgrid). Die Titel stehen unten bündig –
   so fluchten Untertitel, Checklisten und „Mehr erfahren“, auch wenn nur ein Titel umbricht (die Mindesthöhe der
   Kartentitel oben entfällt hier). */
@media (min-width: 961px) {
  /* nur eine Kartenreihe; mit Zeilenabstand rechnet Firefox das Unterraster zu hoch */
  .products .cards {
    row-gap: 0;
  }

  .products .card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .products .card-title {
    align-self: end;
    min-height: 0;
  }

  /* auch innerhalb des Platzes für die längste Sprachfassung (data-fit) unten bündig */
  .products .card-title > .fit-own {
    align-self: end;
  }

  .products .card-link {
    justify-self: start;
  }
}

/* Startseite 721–960 px: drei Spalten wären hier nur gut 200 px breit – die Karten stehen untereinander wie auf dem
   Handy (Symbol links neben Titel und Liste, siehe „Responsive“), die Checkliste nutzt die Breite zweispaltig */
@media (min-width: 721px) and (max-width: 960px) {
  .products .cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .products .card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: start;
  }

  .products .card-icon {
    grid-row: span 2;
    width: 4rem;
  }

  .products .card-icon--square {
    width: 2.75rem;
    margin-inline: .625rem;
  }

  .products .card-title {
    margin-top: 0;
  }

  .products .checklist,
  .products .card-link {
    grid-column: 2;
  }

  .products .checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

/* ---------- Kontakt-Band ---------- */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-700);
  color: var(--white);
  scroll-margin-top: -1.25rem; /* Band schließt direkt unter dem Header an (gleicht das scroll-padding aus base.css aus) */
}

/* Foto (::before) und Schleier darüber (::after) rechts im Band, zur Mitte hin ausgeblendet */
.cta::before,
.cta::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: min(58%, 56rem);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}

.cta::before {
  background: url("../img/hero-scene-navy.jpg") 100% 38% / cover no-repeat;
  background-image: image-set(
    url("../img/hero-scene-navy.webp") type("image/webp"),
    url("../img/hero-scene-navy.jpg") type("image/jpeg")
  );
  opacity: .8;
}

/* Der Text liegt je nach Breite über dem hellen Tank des Fotos: der Schleier dunkelt es so weit ab, dass jeder Text
   im Band mindestens 4,5 : 1 Kontrast hat. Ab 1440 px endet der Text weit vor dem rechten Rand – dort läuft der
   Schleier aus und das Foto bleibt hell. */
.cta::after {
  background: rgba(8, 38, 80, .6);
}

@media (min-width: 1440px) {
  .cta::after {
    background: linear-gradient(90deg, rgba(8, 38, 80, .6) calc(100% - 15rem), rgba(8, 38, 80, 0));
  }
}

.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, .47fr) minmax(0, .53fr);
  gap: 2rem clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 4.2vw, 3.5rem);
}

.cta-title {
  margin-top: 1.1rem;
  font-size: clamp(1.75rem, 2.92vw, 2.625rem);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.cta-action p {
  max-width: 29rem;
  font-size: clamp(1rem, .9rem + .25vw, 1.0625rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .92);
}

.cta-action .btn {
  margin-top: 1.6rem;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--white);
  color: var(--navy);
}

.footer-grid {
  display: grid;
  /* Navigation, Kontakt und Claim. Feste Spaltenanteile (minmax(0, …)) und eine feste Claim-Spalte: die Spalten
     liegen in jeder Sprache an derselben Stelle, egal wie lang Menüpunkte oder Claim sind. Navigation und Kontakt
     sind so breit, dass auch die längsten Menüpunkte (Französisch) nicht weiter umbrechen; Umbrüche siehe
     „Responsive“. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 12.5rem;
  gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2.5rem, 4vw, 3.25rem);
}

.footer-title {
  margin-bottom: .8rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}

.footer-links {
  display: grid;
  gap: .35rem;
  font-size: .90625rem;
}

.footer-links a,
.footer-contact a,
.footer-legal a {
  transition: color .2s ease;
}

.footer-links a:hover,
.footer-contact a:hover,
.footer-legal a:hover {
  color: var(--orange-ink);
}

/* Produktseiten im Fußmenü: Einsatzbereich und „Vakuumprüfpumpe“ in zwei Zeilen wie im Menü des Kopfes, beide in der
   Farbe der übrigen Menüpunkte */
.footer-links a {
  display: inline-block; /* ein Fokusrahmen um beide Zeilen */
  vertical-align: top;
}

.footer-sub {
  display: block;
}

.footer-contact {
  display: grid;
  gap: .85rem;
  font-size: .90625rem;
}

.footer-contact li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: .8rem;
  align-items: start;
}

.footer-contact svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .12rem;
  color: var(--orange);
}

.footer-claim {
  padding-left: clamp(1.5rem, 4vw, 3.75rem);
  border-left: 1px solid var(--line);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.footer-claim::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 3px;
  margin-bottom: .9rem;
  border-radius: 2px;
  background: var(--orange);
}

.footer-bottom {
  background: var(--soft);
  font-size: .8125rem;
}

.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-block: 1.1rem;
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
  font-weight: 600;
}

/* Die aktuelle Seite markiert das Menü im Kopf; im Fuß nur die Rechtslinks – die gibt es im Kopf nicht */
.footer-legal a[aria-current] {
  color: var(--orange-ink);
}

/* ---------- Responsive ---------- */
/* Fuß: über 960 px drei Spalten. Darunter Navigation und Kontakt nebeneinander, der Claim darunter über die ganze
   Breite; unter 720 px eine Spalte – in allen Sprachen dieselben Umbrüche. */
@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .footer-claim {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 719px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1200px) {
  .card-title {
    min-height: 0;
  }
}

/* Menü hinter dem Schalter: unterhalb von 1200 px passen die zweizeiligen Menüpunkte nicht mehr in allen
   Sprachen neben das Logo (site.js schließt das offene Menü ab 1200 px wieder) */
@media (max-width: 1199px) {
  :root {
    --header-h: 4.5rem;
    --logo-w: clamp(12rem, 18vw, 13.5rem); /* bei 1199 px so breit wie ab 1200 px, auf 320-px-Handys Platz für den Schalter */
  }

  .nav-toggle {
    display: grid;
    place-items: center;
  }

  /* Das offene Menü beginnt unter der orangen Linie (2px border-bottom des Headers) – sie bleibt sichtbar */
  .main-nav {
    position: absolute;
    inset: calc(100% + 2px) 0 auto 0;
    max-height: calc(100dvh - var(--header-h) - 2px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .5rem var(--gutter) 1.5rem;
    background: var(--white);
    box-shadow: 0 24px 40px -24px rgba(11, 53, 112, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }

  .nav-open .main-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  /* Abgedunkelter Hintergrund unter dem offenen Menü: über der Seite, unter dem Header (z-index 50) samt oranger
     Linie; ein Klick darauf schließt das Menü (site.js) */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(6, 22, 52, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }

  body.nav-open::after {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .main-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .main-nav .lang-switch {
    align-self: flex-start;
    margin-top: .75rem;
  }

  .main-nav .lang-switch a {
    padding-block: .75rem;
    font-size: .875rem;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list li {
    display: block;
    width: auto;
  }

  .nav-list a {
    display: block;
    padding-block: 1rem;
    border-bottom: 1px solid var(--line);
    font-size: 1.0625rem;
    line-height: 1.4;
    text-align: start;
  }

  .nav-break {
    display: inline;
  }

  /* Unterstrich hier als kurzer Strich auf der Trennlinie des Links */
  .nav-list a::after {
    left: 0;
    right: auto;
    bottom: -1px;
    width: 3rem;
  }
}

@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  }

  .hero-media {
    width: 60%;
  }

  .hero-lead {
    max-width: 23.5rem;
  }

  .hero-product img {
    height: clamp(20rem, 42vw, 27rem);
  }

  /* Startseite: das Video unter dem Text, über die ganze Breite */
  .hero--home .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero--home .hero-copy {
    padding-bottom: 2rem;
  }

  .hero-video {
    margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
  }

  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature:nth-child(odd) {
    border-left: 0;
  }

  /* Abstand zur zweiten Reihe am Vorteil statt als Zeilenabstand des Rasters: der läge auch zwischen den Zeilen der
     Unterraster (.feature), und Firefox rechnet sie damit zu hoch */
  .feature:nth-child(n+3) {
    margin-top: 2.25rem;
  }

  .cta-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .nowrap {
    white-space: normal;
  }

  .hero h1 {
    font-size: clamp(1.8rem, 8.2vw, 2.6rem);
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .hero h1 > .fit {
    font-size: clamp(1.8rem, 8.2vw, 2.6rem);
  }

  .hero-copy {
    padding-block: 2.75rem 1rem;
  }

  .hero-media {
    inset: auto 0 0 0;
    width: 100%;
    height: 25rem;
  }

  .hero-media img {
    object-position: 80% 60%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  }

  .hero-product {
    justify-self: center;
    margin: 1rem 0 1.25rem;
  }

  .hero-product img {
    height: 23rem;
  }

  .cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    align-items: start;
  }

  .card-icon {
    grid-row: span 2;
    width: 4rem;
  }

  .card-icon--square {
    width: 2.75rem;
    margin-inline: .625rem;
  }

  .card-title {
    margin-top: 0;
  }

  .checklist {
    grid-column: 2;
  }
}

@media (max-width: 540px) {
  .features-grid {
    grid-template-columns: 1fr;
    row-gap: 0;
    padding-bottom: 0; /* bis zur Trennlinie darunter nur der Innenabstand des letzten Vorteils – wie zwischen den Vorteilen */
  }

  .feature {
    padding-block: 1.75rem;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .feature:nth-child(n+3) {
    margin-top: 0; /* untereinander trennen die Linien, siehe oben */
  }

  .feature:first-child {
    border-top: 0;
    padding-top: .5rem;
  }

  .btn {
    width: 100%;
    justify-content: space-between;
  }

  .card {
    grid-template-columns: minmax(0, 1fr);
  }

  .card-icon,
  .card-icon--square {
    margin: 0 0 1rem;
  }

  .checklist {
    grid-column: 1;
  }
}