/* ==========================================================================
   Stadler Prüfpumpen – Produktseiten
   (Tankwagen-/Tankcontainer, Bahn-/Kesselwagen, Individuallösung)
   Die Seiten verwenden die Bausteine der Startseite aus style.css (Kopfbereich .hero,
   .btn, .section-title, .cards/.card, .checklist, Kontakt-Band .cta, Kopf- und Fußzeile).
   Hier stehen nur die Ergänzungen der Unterseiten. Immer nach base.css und style.css einbinden.
   ========================================================================== */

/* ---------- Kopfbereich: kompaktere Variante des Startseiten-Heros ---------- */
/* Auf allen Produktseiten gleich hoch: die Mindesthöhe reicht für den längsten Kopf (dreizeiliger Titel, Einleitung
   bis drei Zeilen) – Kopfbereich und Kennzahlen springen beim Wechsel zwischen den Seiten nicht */
.hero--page .hero-inner {
  min-height: clamp(26rem, 12.5rem + 22.5vw, 34.5rem);
}

/* Text oben statt senkrecht mittig: Brotkrümel und Titel stehen auf allen Produktseiten an derselben Stelle */
.hero--page .hero-copy {
  align-self: start;
  padding-block: clamp(1.75rem, 3.2vw, 2.5rem) clamp(2.75rem, 4.5vw, 3.75rem);
}

.hero--page h1 {
  margin-top: 1.1rem;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: 1.12;
  text-wrap: balance;
}

/* Platzhalter der anderen Sprachen in ihrer eigenen Titelgröße (siehe .hero h1 > .fit in style.css) */
.hero--page h1 > .fit {
  font-size: clamp(2rem, 3.4vw, 3.25rem);
}

/* Französisch: die längeren Titel etwas kleiner und schmaler, damit „… conteneurs-citernes (3 pouces)“ wie im
   Deutschen dreizeilig bleibt (ersetzt hier auch die größere Titelschrift der französischen Startseite). Die Breite
   begrenzt den französischen Text selbst (eigener Inhalt oder Platzhalter), nicht den Titel – sonst stünden die
   Platzhalter der anderen Sprachen auf der französischen Seite zu schmal. */
.hero--page h1:lang(fr),
.hero--page h1 > .fit:lang(fr) {
  font-size: clamp(1.625rem, 2.9vw, 2.75rem);
}

.hero--page h1 > :lang(fr) {
  max-width: 15.5em;
}

/* Baugröße im Titel, z. B. „(3 Zoll)“ */
.hero-size {
  color: var(--orange-ink);
  white-space: nowrap;
}

.hero--page .hero-lead {
  max-width: 33rem;
  margin-top: 1.4rem;
  text-wrap: balance; /* ausgewogene Zeilen statt eines einzelnen Worts in der letzten */
}

/* Das Foto steht am Anfang der Bildspalte (ohne den Versatz der Startseite in die Textspalte) und mit etwas Luft
   über dem unteren Rand: die Pumpen enden verschieden (Stutzen, Flansch) – knapp darüber wirkten sie wie auf die
   Kante gestellt */
.hero--page .hero-product {
  --pumpe-h: clamp(22rem, 31vw, 30rem); /* Bildhöhe */
  margin-left: 0;
  margin-bottom: clamp(1rem, 1.7vw, 1.5rem);
}

.hero--page .hero-product img {
  height: var(--pumpe-h);
}

/* Foto mit Bodenschatten (Bahn-/Kesselwagen): der Flansch endet 2 % der Bildhöhe höher als Stutzen und Fuß der
   anderen Fotos – um so viel tiefer gesetzt, steht die Pumpe gleich hoch über dem Rand */
.hero-product--schatten img {
  translate: 0 2%;
}

/* Zwei Pumpen nebeneinander (Tankwagen: Edelstahl und Messing; Individuallösung: montiert und zerlegt), jede mit
   Bildunterschrift im Stil der Fotos weiter unten (.photo). Beide Figuren teilen sich zwei Zeilen (Unterraster): die
   Pumpen stehen unten bündig, die Unterschriften beginnen auf einer Linie – auch wenn eine davon umbricht. Jede Figur
   ist so breit wie ihr Foto oder ihre Unterschrift (in der längsten Sprachfassung, data-fit). */
.hero-product--paar {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: clamp(1.25rem, 3vw, 2.75rem);
}

.hero-product--paar figure {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  justify-items: center;
  margin: 0;
}

.hero-product--paar picture {
  align-self: end;
}

/* nie in der Breite gestaucht (die Bildhöhe ist fest) – die Größen unten sind so bemessen, dass das Paar passt */
.hero-product--paar img {
  max-width: none;
}

.hero-product--paar figcaption {
  align-self: start;
  margin-top: .6rem;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  color: var(--muted);
}

/* Liegt ein Hintergrundfoto dahinter (Tankwagen-Seite: dort dunkel), steht die Unterschrift auf einem hellen Schild.
   Es umgibt nur den Text der eigenen Sprache; die Platzhalter (data-fit) haben dieselben Abstände. Links etwas mehr
   Abstand: die Laufweite steht auch hinter dem letzten Buchstaben. */
.hero-media ~ .hero-inner .hero-product--paar figcaption > * {
  padding: .3rem calc(.55rem - .07em) .3rem calc(.55rem + .07em);
}

.hero-media ~ .hero-inner .hero-product--paar figcaption > .fit-own {
  place-self: start center; /* nur so groß wie der eigene Text, auch wenn eine andere Sprache umbricht */
  border-radius: 2px;
  background: rgba(255, 255, 255, .88);
}

/* Individuallösung: dieselbe Sonderanfertigung montiert (individual1) und zerlegt (individual2). Die Teile sind auf
   ihrem Foto rund 25 % größer abgebildet als an der montierten Pumpe: auf 80 % verkleinert und auf demselben Boden
   stehend zeigen beide Fotos denselben Maßstab (T-Griff und Rohr gleich breit). Das Foto der montierten Pumpe ist
   dunkler und kontrastreicher als das zweite: sanft angeglichen. */
.hero--page .hero-product--zerlegt figure + figure img {
  height: calc(var(--pumpe-h) * .8);
}

.hero-product--zerlegt figure:first-child img {
  filter: contrast(.9) brightness(1.06) drop-shadow(0 1px 1px rgba(8, 30, 66, .28)) drop-shadow(0 20px 24px rgba(8, 30, 66, .2));
}

@media (min-width: 721px) {
  /* Abstand zur Pumpe: Brotkrümel, Titel und Einleitung enden deutlich vor der Bildspalte */
  .hero--page .hero-copy {
    padding-right: clamp(2rem, 5vw, 4.5rem);
  }
}

/* Brotkrümelnavigation in der Typografie der Vorzeilen. Die Einträge laufen als Text, damit lange Namen auf
   schmalen Bildschirmen normal umbrechen; die Zeilen werden ausgeglichen, und das Trennzeichen hängt am vorigen
   Eintrag – so beginnt keine Zeile mit „›“. */
.breadcrumb {
  font-size: clamp(.75rem, .9vw, .8125rem);
}

.breadcrumb ol {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-feature-settings: "case" 1; /* Satzzeichen auf Versalhöhe */
  text-wrap: balance;
}

.breadcrumb li {
  display: inline;
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin: 0 .2em 0 .5em;
  color: color-mix(in srgb, var(--muted) 60%, transparent);
}

/* Platz für zwei Zeilen, unten ausgerichtet: bricht ein langer Name um, wächst der Brotkrümel nach oben und der
   Titel bleibt an seiner Stelle (auf Handys stehen alle Köpfe ohnehin gleich oben) */
@media (min-width: 721px) {
  .hero--page .breadcrumb {
    display: grid;
    align-content: end;
    min-height: 3.2em; /* 2 × Zeilenhöhe 1,6 */
  }

  /* auch innerhalb des Platzes für die längste Sprachfassung (data-fit) unten, direkt über dem Titel */
  .hero--page .breadcrumb > .fit-own {
    align-self: end;
  }
}

.breadcrumb a {
  color: var(--muted);
  transition: color .2s ease;
}

.breadcrumb a:hover {
  color: var(--navy);
}

.breadcrumb [aria-current] {
  color: var(--orange-ink);
}

/* ---------- Kennzahlen: Band unter dem Kopfbereich (wie die Vorteile der Startseite) ---------- */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding-block: clamp(2.25rem, 4vw, 3rem) clamp(2.5rem, 4vw, 3.25rem);
}

.fact {
  padding: .5rem clamp(1rem, 2vw, 1.75rem) .75rem;
  border-left: 1px solid var(--line);
  text-align: center;
}

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

.fact dt {
  font-size: clamp(.75rem, .9vw, .8125rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.fact-value {
  display: block;
  margin-top: .55rem;
  font-size: clamp(1.625rem, 2.5vw, 2.25rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--navy);
}

.fact-note {
  display: block;
  max-width: 16rem;
  margin: .55rem auto 0;
  font-size: clamp(.9375rem, 1.1vw, 1rem);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: balance; /* zweizeilig gleichmäßig statt „… externe / Druckluft“ */
}

/* ---------- Abschnitte ---------- */
.section {
  padding-block: clamp(3.5rem, 6vw, 5.25rem);
}

.section--soft {
  background: var(--soft);
}

/* Abschnittsüberschrift mit dem orangen Strich der Startseiten-Vorzeilen */
.section-head::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-bottom: 1.1rem;
  border-radius: 2px;
  background: var(--orange);
}

.section-head .section-text {
  max-width: 46rem;
  margin-top: 1.25rem;
}

.section-head .section-text strong {
  font-weight: 650;
  color: var(--navy);
}

/* Zweispaltig: Überschrift links, Inhalt rechts (wie „Unsere Vakuumprüfpumpen“ auf der Startseite) */
.split {
  display: grid;
  grid-template-columns: minmax(0, .4fr) minmax(0, .6fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}

/* Text links, Randspalte rechts */
.split--aside {
  grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
}

/* ---------- Fließtext ---------- */
/* Mit data-fit liegen die Absätze in .fit-own bzw. in den Platzhalter-Kopien .fit (Platz für die längste
   Sprachfassung am Ende des Blocks statt hinter jedem Absatz) – dort gilt derselbe Abstand */
.prose > :not(.fit, .fit-own) + *,
.prose > :is(.fit, .fit-own) > * + * {
  margin-top: 1.25rem;
}

.prose p {
  font-size: clamp(1rem, .9rem + .25vw, 1.0625rem);
  line-height: 1.8;
}

.prose strong {
  font-weight: 650;
  color: var(--navy);
}

.prose .lede {
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  line-height: 1.6;
  color: var(--navy);
}

/* hervorgehobener Grundsatz im Text */
.prose .pullquote {
  padding: .2rem 0 .2rem 1.35rem;
  border-left: 3px solid var(--orange);
  font-size: clamp(1.125rem, 1rem + .45vw, 1.3125rem);
  line-height: 1.55;
  color: var(--navy);
}

/* ---------- Tafeln der Randspalte ---------- */
.panel {
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 2.5vw, 2rem);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* Karten-Bausteine (Symbol, Titel, Checkliste) in einer Tafel: ohne das Kartenraster der Startseite */
.panel .card-title {
  min-height: 0;
  margin-top: 1.25rem;
}

.panel .card-icon--square {
  margin: 0;
}

/* Kennzahl aus dem Text, groß gesetzt */
.stat-value {
  font-size: clamp(3rem, 5.5vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--orange-ink);
}

.stat-value small {
  display: block;
  margin-bottom: .4rem;
  font-size: clamp(.8125rem, 1vw, .875rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.stat-text {
  margin-top: .9rem;
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--navy);
  text-wrap: balance; /* kurze Aussage: gleich lange Zeilen, auch in Firefox kein einzelnes Wort am Ende */
}

.stat-source {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: balance;
}

/* ---------- Vorteile: vier Karten in einer Reihe ---------- */
/* Abstand zwischen Kartenreihen am Vorteil statt als Zeilenabstand des Rasters (siehe „Responsive“): der läge auch
   zwischen den Zeilen der Unterraster (.benefit), und Firefox rechnet sie damit zu hoch */
.benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 1.25rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

/* Die Karten einer Reihe teilen sich die Zeilen für Symbol, Titel und Text (Unterraster): bricht ein Titel um,
   beginnen trotzdem alle Beschreibungen der Reihe auf derselben Höhe */
.benefit {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 1.75rem 1.5rem 1.9rem;
  border-top: 3px solid var(--orange);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

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

.benefit-title {
  margin-top: 1.1rem;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--navy);
}

.benefit p {
  margin-top: .6rem;
  font-size: .9375rem;
  line-height: 1.7;
}

.benefit strong {
  font-weight: 650;
  color: var(--navy);
}

/* ---------- Handhabung in Schritten ---------- */
.steps {
  --steps-gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--steps-gap);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

.step {
  position: relative;
  counter-increment: step;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--orange);
  border-radius: 50%;
  background: var(--white);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--orange-ink);
}

/* Verbindungslinie zum nächsten Schritt */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(1.75rem - 1px);
  left: calc(3.5rem + .75rem);
  right: calc(.75rem - var(--steps-gap));
  height: 2px;
  border-radius: 1px;
  background: var(--line);
}

.step-title {
  margin-top: 1.35rem;
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--navy);
}

.step p {
  max-width: 24rem;
  margin-top: .55rem;
  font-size: clamp(.9375rem, .9rem + .15vw, 1rem);
  line-height: 1.7;
}

.step strong {
  font-weight: 650;
  color: var(--navy);
}

/* Hinweis unter den Schritten, so breit wie die Schrittreihe */
.note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding: 1.35rem 1.5rem;
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.note svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .2rem;
  color: var(--orange);
}

.note p {
  line-height: 1.7;
}

/* Firefox kennt text-wrap: pretty (Absätze, style.css) noch nicht, Safari bekommt es in den Textbausteinen nicht
   (data-fit, siehe style.css): dort die kurzen Texte unter den Überschriften, der Vorteil-Karten, Schritte und des
   Hinweises ausgleichen, damit kein einzelnes Wort in der letzten Zeile steht */
@supports not (text-wrap: pretty) or (hanging-punctuation: first) {
  .section-head .section-text,
  .benefit p,
  .step p,
  .note p {
    text-wrap: balance;
  }
}

/* ---------- Karten mit zwei Spalten (Standardpumpen auf der Seite Individuallösung) ---------- */
/* Nebeneinander teilen sich beide Karten ihre Zeilen (Unterraster): Symbol, Titel mit Unterzeile, Beginn der
   Checkliste und „Mehr erfahren“ stehen auf einer Linie, auch wenn ein Titel nur in einer Karte umbricht. Die
   Mindesthöhe der Kartentitel aus style.css entfällt – sie ist für die drei schmalen Karten der Startseite bemessen. */
@media (min-width: 721px) {
  .cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0; /* nur eine Kartenreihe; mit Zeilenabstand rechnet Firefox das Unterraster zu hoch */
  }

  .cards--2 > .card {
    display: grid;
    grid-row: span 4; /* Symbol, Titel, Checkliste, „Mehr erfahren“ */
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  /* Titel unten in ihrer Zeile: bricht nur ein Titel um, stehen trotzdem beide Unterzeilen direkt über der Checkliste */
  .cards--2 .card-title,
  .cards--2 .card-title:lang(fr) {
    align-self: end;
    min-height: 0;
  }

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

  /* die kürzere Liste behält ihre Abstände (nicht auf die Höhe der längeren gestreckt) */
  .cards--2 .checklist {
    align-self: start;
  }

  .cards--2 .card-link {
    justify-self: start;
  }
}

.cards--2 .checklist li {
  text-wrap: balance; /* zweizeilig gleichmäßig statt „… safety / requirements“ */
}

/* ---------- Produktfotos (aufbereitet mit scripts/produktfotos.py; Kopfbereich siehe style.css) ---------- */
/* Foto mit Bildunterschrift im weißen Rahmen */
.photo {
  margin: 0;
  padding: .5rem .5rem 0;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.photo figcaption {
  padding: .75rem .25rem .85rem;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  color: var(--muted);
}

/* Handhabung mit Einsatzfoto: Überschrift und Schritte links, das Foto rechts daneben */
.howto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(2.5rem, 6vw, 6rem);
}

.howto > .section-head,
.howto > .steps {
  grid-column: 1;
}

.howto-photo {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: clamp(11.5rem, 16vw, 13.75rem); /* Original 220 px breit – nicht größer ziehen */
}

/* ---------- Kontakt-Band ---------- */
.cta-action strong {
  font-weight: 700;
  color: var(--white);
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .benefit:nth-child(n+3) {
    margin-top: 1.25rem;
  }

  /* Überschrift über den Zweierkarten (wie bei den Produktkarten der Startseite): daneben wären die Karten so schmal,
     dass Titel und Listenpunkte umbrechen */
  .split--cards {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Neben dem Einsatzfoto sind drei Schritte nebeneinander zu schmal: untereinander wie auf dem Handy
     (Nummer links, senkrechte Verbindungslinie), das Foto bleibt rechts daneben */
  .howto .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .howto .step {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 1.1rem;
  }

  .howto .step::before {
    grid-row: span 2;
  }

  .howto .step-title {
    margin-top: .85rem;
  }

  .howto .step p {
    grid-column: 2;
  }

  .howto .step:not(:last-child)::after {
    top: calc(3.5rem + .5rem);
    bottom: calc(.5rem - var(--steps-gap));
    left: calc(1.75rem - 1px);
    right: auto;
    width: 2px;
    height: auto;
  }
}

@media (max-width: 960px) {
  .facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }

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

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

/* Die Bildspalte ist hier schmal: die Pumpenpaare kleiner (bei 721 px rund 235 px hoch, bei 960 px fast so hoch wie
   die Einzelfotos), damit beide Fotos samt Unterschriften nebeneinander passen – knappstes ist „montiert / zerlegt“.
   Die Unterschrift auf dem Schild (Tankwagen) bricht hier zweizeilig um; der Kopfbereich bleibt trotzdem so hoch wie
   auf den anderen Produktseiten. */
@media (min-width: 721px) and (max-width: 960px) {
  .hero--page .hero-product--paar {
    --pumpe-h: clamp(14.5rem, 48.95vw - 7.375rem, 21.5rem);
  }
}

/* Tafel unter dem Text, so breit wie der Text: damit sie nicht halb leer bleibt, steht die Kennzahl links neben ihrem
   Text und die Checkliste zweispaltig */
@media (min-width: 541px) and (max-width: 960px) {
  .panel:has(> .stat-value) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(1.75rem, 4vw, 2.5rem);
    align-items: center;
  }

  .panel > .stat-value {
    grid-row: span 2;
  }

  .panel > .stat-text {
    margin-top: 0;
  }

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

@media (max-width: 720px) {
  /* ohne die automatische Silbentrennung der Startseite: mit dem Zeilenausgleich trennte sie „Kess-elwagen“ */
  .hero--page h1 {
    font-size: clamp(1.75rem, 7.4vw, 2.4rem);
    -webkit-hyphens: manual;
    hyphens: manual;
  }

  .hero--page h1 > .fit {
    font-size: clamp(1.75rem, 7.4vw, 2.4rem);
  }

  .hero--page h1:lang(fr),
  .hero--page h1 > .fit:lang(fr) {
    font-size: clamp(1.6rem, 7vw, 2.3rem);
  }

  .hero--page .hero-copy {
    padding-block: 2.5rem .5rem;
  }

  .hero--page .hero-media {
    height: 19rem;
  }

  .hero--page .hero-product {
    --pumpe-h: 17.5rem;
  }

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

  .benefit:nth-child(n+2) {
    margin-top: 1.25rem;
  }

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

  .step {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 1.1rem;
  }

  .step::before {
    grid-row: span 2;
  }

  .step-title {
    margin-top: .85rem;
  }

  .step p {
    grid-column: 2;
  }

  .step:not(:last-child)::after {
    top: calc(3.5rem + .5rem);
    bottom: calc(.5rem - var(--steps-gap));
    left: calc(1.75rem - 1px);
    right: auto;
    width: 2px;
    height: auto;
  }

  /* Einsatzfoto mittig zwischen Einleitung und Schritten */
  .howto {
    grid-template-columns: minmax(0, 1fr);
  }

  .howto-photo {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    width: 13rem;
    margin-top: clamp(2rem, 4vw, 2.5rem);
  }
}

@media (max-width: 540px) {
  .facts-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

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

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

  .note {
    padding: 1.2rem 1.15rem;
  }
}