/* TS Engel — Startseite
   Alle Farben, Schriften, Maße und Bewegungswerte kommen aus tokens.css. */

:root {
  color-scheme: light;
  font-synthesis: none;
  scroll-behavior: smooth;
  /* Ankersprünge landen unter der klebenden Leiste, nicht dahinter.
     4,5 rem ist die geschrumpfte Höhe, der Rest ist Luft. */
  scroll-padding-block-start: calc(4.5rem + var(--abstand-6));

  /* Trennlinie auf --marke-tief. Keine neue Farbe, sondern die vorhandene
     Rolle --text-auf-tief auf Linienstärke heruntergemischt — --linie ist
     dort unsichtbar, weil die Fläche in beiden Modi dunkel bleibt. */
  --linie-auf-tief: color-mix(in oklch, var(--text-auf-tief) 32%, transparent);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--schrift-basis);
  line-height: var(--zeilenhoehe-text);
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

/* Der Symbolsatz steht am Anfang jeder Seite und wird nie selbst gezeigt —
   <use> greift die Symbole auch aus einem ausgeblendeten Behälter. */
.symbolsatz {
  display: none;
}

/* Symbole aus dem Satz oben (Lucide, ISC — siehe assets/lucide-LIZENZ.txt).
   Strichstärke und Farbe stehen hier, nicht in den Symbolen: so lassen sie
   sich an einer Stelle nachziehen. Kleine Symbole vertragen den etwas
   kräftigeren Strich, sonst franst die Form aus. */
.icon {
  flex: 0 0 auto;
  width: var(--abstand-5);
  height: var(--abstand-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
}

.icon--klein {
  width: var(--abstand-4);
  height: var(--abstand-4);
  stroke-width: 2;
}

.icon--gross {
  width: var(--abstand-8);
  height: var(--abstand-8);
  stroke-width: 1.5;
}

/* Nur für Screenreader. Kein display:none — das nähme den Text auch aus
   dem Barrierefreiheitsbaum. */
.nur-vorlesen {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
figure,
dl,
dd,
ul {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-titel);
  font-weight: var(--gewicht-titel-stark);
  letter-spacing: var(--titel-laufweite);
  line-height: var(--titel-zeilenhoehe);
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

.rahmen {
  width: min(100% - (2 * var(--abstand-6)), 90rem);
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: var(--ebene-hinweis);
  top: var(--abstand-4);
  left: var(--abstand-4);
  padding: var(--abstand-2) var(--abstand-4);
  border-radius: var(--radius-m);
  background: var(--marke);
  color: var(--text-invers);
  font-size: var(--schrift-klein);
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform var(--dauer-schnell) var(--kurve);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Kopfleiste
   Weiße, klebende Leiste. Beim Scrollen schrumpft sie von 6,5 auf 4,5 rem
   und die Wortmarke wechselt von der vollen Fassung auf die Kurzfassung —
   unter ca. 160 px Breite wird der Claim unleserlich, genau dort liegt die
   Umschaltschwelle.
   -------------------------------------------------------------------------- */

.site-header {
  /* Zwei Zustände, gesteuert über .site-header--schmal. Höhe und Logobreite
     stehen als Variablen, damit beide Werte an einer Stelle zusammenpassen. */
  --kopf-hoehe: 6.5rem;
  --logo-hoehe: 5rem;
  --logo-breite: 14.95rem;  /* 80 px × 2,985 — Seitenverhältnis der Vollfassung */

  position: sticky;
  z-index: var(--ebene-sticky);
  top: 0;
  border-block-end: 1px solid transparent;
  background: var(--bg);
  color: var(--text);
  transition:
    border-color var(--dauer-mittel) var(--kurve),
    box-shadow var(--dauer-mittel) var(--kurve);
}

.site-header--schmal {
  --kopf-hoehe: 4.5rem;
  --logo-hoehe: 3.5rem;
  --logo-breite: 7.9rem;    /* 56 px × 2,255 — Seitenverhältnis der Kurzfassung */

  border-block-end-color: var(--linie);
  box-shadow: var(--schatten-s);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--abstand-6);
  min-height: var(--kopf-hoehe);
  padding-block: var(--abstand-2);
  transition:
    min-height var(--dauer-ruhig) var(--kurve),
    padding-block var(--dauer-ruhig) var(--kurve);
}

/* Geschrumpft gibt das Polster nach, damit die 4 rem auch wirklich stehen —
   sonst diktiert die Höhe des Telefonfelds. */
.site-header--schmal .site-header__inner {
  padding-block: var(--abstand-1);
}

/* --- Wortmarke ----------------------------------------------------------
   Beide Fassungen liegen übereinander. Sie sind gleich hoch und links
   bündig, und das Monogramm sitzt in beiden Dateien an derselben Stelle —
   dadurch bleibt es beim Überblenden exakt stehen, während der Claim
   verschwindet und der Schriftzug in die Mitte rückt.                     */

.site-header__logo {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: var(--logo-breite);
  height: var(--logo-hoehe);
  border-radius: var(--radius-s);
  transition:
    width var(--dauer-ruhig) var(--kurve),
    height var(--dauer-ruhig) var(--kurve);
}

.site-header__logo-bild {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  transition: opacity var(--dauer-mittel) var(--kurve-weich);
}

.site-header__logo-bild--kompakt {
  opacity: 0;
}

.site-header--schmal .site-header__logo-bild--voll {
  opacity: 0;
}

.site-header--schmal .site-header__logo-bild--kompakt {
  opacity: 1;
}

/* Im Dunkelmodus entscheidet der Untergrund, nicht der Anlass: dort gehören
   die Negativfassungen hin. content: url() tauscht die Datei, ohne sie ein
   zweites Mal ins Markup zu schreiben — geladen wird nur, was sichtbar ist. */
[data-modus="dunkel"] .site-header__logo-bild--voll {
  content: url("../ts-engel-logo-negativ.svg");
}

[data-modus="dunkel"] .site-header__logo-bild--kompakt {
  content: url("../ts-engel-logo-kompakt-negativ.svg");
}

/* --- Navigation ----------------------------------------------------------
   Die Liste ist eine echte Liste: Screenreader sagen dadurch an, wie viele
   Punkte es sind und der wievielte gerade dran ist.                        */

.site-nav {
  min-width: 0;
  margin-inline: auto;
}

.site-nav__liste,
.site-unter {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__punkt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  padding: var(--abstand-2) var(--abstand-3);
  border-radius: var(--radius-m);
  color: var(--text-sekundaer);
  font-size: var(--schrift-klein);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dauer-schnell) var(--kurve),
    color var(--dauer-schnell) var(--kurve);
}

/* Zeiger und Aktivzustand sind zwei verschiedene Aussagen und bekommen
   deshalb zwei verschiedene Mittel: das Überfahren legt eine ruhige
   Akzentfläche unter den Punkt — dieselbe Sprache wie im Untermenü —,
   der Strich unten bleibt allein dem Abschnitt vorbehalten, in dem man
   gerade steht.

   Der Zustand hängt am Listenpunkt, nicht am Link: sonst fiele er in dem
   Moment weg, in dem der Zeiger ins Untermenü wandert — das liegt neben
   dem Link, nicht darin. Ein aufgeklapptes Untermenü hält ihn ebenfalls. */
.site-nav__punkt:hover > .site-nav__link,
.site-nav__punkt--offen > .site-nav__link,
.site-nav__link:focus-visible {
  background: var(--flaeche-akzent);
  color: var(--marke-text);
}

/* Kein Schriftschnittwechsel: der Aktivpunkt wandert beim Scrollen mit, und
   ein Sprung von 500 auf 600 würde bei jedem Wechsel die Nachbarn
   verschieben. Die Unterscheidung trägt die Farbe und der Strich. */
.site-nav__link--aktiv {
  color: var(--text);
}

/* Aktivzustand: ein durchgehender Strich in der Markenfarbe, auf Textbreite
   und bündig mit der Unterkante derselben Fläche, die das Überfahren füllt —
   beide Zustände teilen sich also eine Geometrie und unterscheiden sich nur
   im Mittel. Er wächst von links, damit der Wechsel zwischen zwei Punkten
   beim Scrollen wie ein Weiterrücken aussieht und nicht wie ein Blinken. */
.site-nav__link::after {
  position: absolute;
  right: var(--abstand-3);
  bottom: 0;
  left: var(--abstand-3);
  height: 2px;
  border-radius: var(--radius-s);
  background: var(--marke);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dauer-mittel) var(--kurve);
}

.site-nav__link--aktiv::after {
  transform: scaleX(1);
}

/* Der Verweis in den Teile-Shop trägt den Traktor statt des Pfeils nach
   außen. Er kommt als Bild und nicht aus dem Symbolsatz, weil er farbig ist
   und es bleiben soll — deshalb greift auch die Strichstärke aus .icon
   nicht. Nur die Höhe steht fest, die Breite ergibt sich aus dem
   Seitenverhältnis des Bildes. */
.site-nav__traktor {
  flex: 0 0 auto;
  block-size: var(--abstand-5);
  inline-size: auto;
}

/* --- Untermenü -----------------------------------------------------------
   Der Punkt bleibt ein Link auf den Abschnitt; das Aufklappen sitzt in einem
   eigenen Knopf daneben. Zwei getrennte Bedienelemente statt eines
   doppeldeutigen — damit funktioniert beides mit Tastatur und Zeiger.      */

.site-nav__auf {
  display: grid;
  place-items: center;
  width: var(--abstand-6);
  height: var(--abstand-6);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--text-gedaempft);
  cursor: pointer;
  transition:
    color var(--dauer-schnell) var(--kurve),
    transform var(--dauer-mittel) var(--kurve);
}

.site-nav__auf:hover {
  color: var(--text);
}

.site-nav__punkt--offen > .site-nav__auf {
  color: var(--text);
  transform: rotate(180deg);
}

.site-unter {
  position: absolute;
  z-index: var(--ebene-dropdown);
  top: calc(100% + var(--abstand-2));
  left: calc(-1 * var(--abstand-4));
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  visibility: hidden;
  min-width: 13rem;
  padding: var(--abstand-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  background: var(--flaeche);
  box-shadow: var(--schatten-m);
  opacity: 0;
  transform: translateY(calc(-1 * var(--abstand-2)));
  transition:
    opacity var(--dauer-mittel) var(--kurve),
    transform var(--dauer-mittel) var(--kurve),
    visibility 0s linear var(--dauer-mittel);
}

/* Zwischen Punkt und Feld liegen 8 px Luft. Ohne Brücke reißt der Zeiger-
   kontakt auf dem Weg dorthin ab — das Feld klappte unter dem Zeiger weg.
   Der Streifen gehört zum Feld, ist also mit ihm zusammen unsichtbar. */
.site-unter::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: var(--abstand-2);
  content: "";
}

.site-nav__punkt--offen > .site-unter {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.site-unter__link {
  display: block;
  padding: var(--abstand-2) var(--abstand-3);
  border-radius: var(--radius-s);
  color: var(--text-sekundaer);
  font-size: var(--schrift-klein);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dauer-schnell) var(--kurve),
    color var(--dauer-schnell) var(--kurve);
}

.site-unter__link:hover,
.site-unter__link:focus-visible {
  background: var(--flaeche-akzent);
  color: var(--marke-text);
}

/* --- Telefon -------------------------------------------------------------
   Die Nummer steht in der Mono-Schrift mit Tabellenziffern — dieselbe
   Auszeichnung wie Artikelnummern und Maße im übrigen Projekt.            */

.site-telefon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--abstand-3);
  padding: var(--abstand-2);
  padding-inline-end: var(--abstand-4);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  background: var(--flaeche);
  text-decoration: none;
  transition:
    border-color var(--dauer-schnell) var(--kurve),
    background-color var(--dauer-schnell) var(--kurve);
}

.site-telefon:hover {
  border-color: var(--marke);
  background: var(--flaeche-akzent);
}

.site-telefon__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--abstand-8);
  height: var(--abstand-8);
  border-radius: var(--radius-s);
  background: var(--flaeche-akzent);
  color: var(--marke-text);
  transition:
    background-color var(--dauer-schnell) var(--kurve),
    color var(--dauer-schnell) var(--kurve);
}

.site-telefon:hover .site-telefon__icon {
  background: var(--marke);
  color: var(--text-invers);
}

/* Beim Schrumpfen fällt die Beschriftung weg. 1fr → 0fr blendet die Zeile
   aus, ohne dass eine feste Höhe geraten werden muss. */
.site-telefon__text {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dauer-ruhig) var(--kurve);
}

.site-header--schmal .site-telefon__text {
  grid-template-rows: 0fr;
}

.site-telefon__label {
  overflow: hidden;
  min-height: 0;
  color: var(--text-gedaempft);
  font-size: var(--schrift-mikro);
  line-height: var(--zeilenhoehe-mini);
  transition: opacity var(--dauer-mittel) var(--kurve);
}

.site-header--schmal .site-telefon__label {
  opacity: 0;
}

.site-telefon__nummer {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--schrift-klein);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

/* --- Menüschalter — erst unterhalb von 64 rem sichtbar ------------------- */

.site-header__schalter {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--abstand-2);
  margin: 0;
  padding: var(--abstand-2) var(--abstand-3);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--schrift-klein);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dauer-schnell) var(--kurve);
}

.site-header__schalter:hover {
  border-color: var(--marke);
}

.site-header__schalter-zu,
.site-header--offen .site-header__schalter-auf {
  display: none;
}

.site-header--offen .site-header__schalter-zu {
  display: block;
}

/* --------------------------------------------------------------------------
   Hero
   Das Bild trägt den Abschnitt und läuft vollflächig darunter durch. Die
   Aufnahme ist links dunkel und nahezu leer, rechts liegen das Licht auf der
   geschliffenen Fläche und die warmen Reflexe — die Schrift steht deshalb
   links, wo das Bild von sich aus Platz lässt, und nimmt dem Bild nichts weg.

   Der Schleier ist kein Grauwert über allem, sondern folgt der Lichtführung
   der Aufnahme: links deckend, nach rechts auslaufend, unten geerdet, damit
   die Kante zum hellen Faktenband darunter sauber sitzt. Er sichert den
   Kontrast auch dann, wenn das Bild bei schmalen Fenstern anders beschnitten
   wird — verlassen kann man sich auf die Bildwerte nicht.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--marke-tief);
  color: var(--text-auf-tief);
}

/* Das Bildfeld ist etwas höher als der Abschnitt. Der Überstand ist der Weg,
   den die Aufnahme beim Scrollen zurückbleiben darf, ohne dass oben oder
   unten eine Kante frei wird. */
.hero__bildfeld {
  position: absolute;
  inset: -12% 0;
}

.hero__bild {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

.hero::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 48%,
      color-mix(in oklch, var(--marke-tief) 72%, transparent) 100%),
    linear-gradient(
      90deg,
      var(--marke-tief) 0%,
      color-mix(in oklch, var(--marke-tief) 92%, transparent) 38%,
      color-mix(in oklch, var(--marke-tief) 45%, transparent) 62%,
      transparent 84%);
  content: "";
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: clamp(28rem, 72svh, 44rem);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 34rem;
  padding-block: var(--abstand-16);
}

/* Die Überschrift trägt zwei Aussagen in zwei Registern: der Anspruch groß,
   der Zuschnitt darunter kleiner. Beide bleiben weiß — der Unterschied kommt
   aus Größe und Schnitt, nicht aus abgeschwächter Farbe. */
.hero h1 {
  display: grid;
  gap: var(--abstand-3);
  color: var(--text-auf-tief);
}

.hero__titel-haupt {
  font-size: var(--schrift-display);
}

.hero__titel-neben {
  max-width: 24ch;
  font-size: var(--schrift-h2);
  font-weight: var(--gewicht-titel);
  letter-spacing: 0;
}

.hero__lead {
  max-width: 38ch;
  margin-block-start: var(--abstand-6);
  color: var(--text-auf-tief);
  font-size: var(--schrift-gross);
  line-height: var(--zeilenhoehe-klein);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
  margin-block-start: var(--abstand-8);
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-3);
  min-height: 3rem;
  padding: var(--abstand-3) var(--abstand-4);
  border: 1px solid var(--marke);
  border-radius: var(--radius-m);
  background: var(--marke);
  color: var(--text-invers);
  font-size: var(--schrift-klein);
  font-weight: 500;
  line-height: var(--zeilenhoehe-klein);
  text-decoration: none;
  transition: background-color var(--dauer-schnell) var(--kurve), border-color var(--dauer-schnell) var(--kurve), color var(--dauer-schnell) var(--kurve);
}

.knopf:hover {
  border-color: var(--marke-hover);
  background: var(--marke-hover);
}

/* Das Zeichen rückt beim Überfahren ein Stück in seine Richtung — dieselbe
   Geste, die .text-link über den Abstand macht. */
.knopf .icon {
  transition: transform var(--dauer-schnell) var(--kurve);
}

.knopf:hover .icon {
  transform: translateX(0.125rem);
}

.knopf--hell {
  border-color: var(--text-auf-tief);
  background: var(--text-auf-tief);
  color: var(--marke-text);
}

.knopf--hell:hover {
  border-color: var(--flaeche-akzent);
  background: var(--flaeche-akzent);
  color: var(--marke-text);
}

.knopf--umriss {
  border-color: var(--text-auf-tief);
  background: transparent;
  color: var(--text-auf-tief);
}

.knopf--umriss:hover {
  border-color: var(--text-auf-tief);
  background: color-mix(in oklch, var(--text-auf-tief) 12%, transparent);
  color: var(--text-auf-tief);
}

.hero__note {
  max-width: 42ch;
  margin-block-start: var(--abstand-6);
  color: var(--text-auf-tief);
  font-size: var(--schrift-klein);
}

/* --- Bildaufbau ----------------------------------------------------------
   Eine zusammenhängende Sequenz beim Laden, keine verstreuten Einzeleffekte:

   1. Die Aufnahme setzt sich aus einer leichten Vergrößerung heraus.
   2. Ein Lichtstreifen läuft einmal über den Stahl — dieselbe Bewegung, die
      auf einer geschliffenen Fläche entsteht, wenn man den Kopf dreht. Er
      liegt unter dem Schleier, bleibt also auf dem Bild und läuft nicht
      über die Schrift.
   3. Die Überschrift wird zeilenweise freigelegt: die Zeile steigt hinter
      einer festen Kante hoch, statt einzublenden. Sie wird aufgedeckt, nicht
      eingeschaltet.
   4. Vorspann, Knöpfe und Nachsatz folgen gestaffelt.

   Danach steht die Seite still; beim Scrollen bleibt allein die Aufnahme
   etwas zurück. Alle Dauern leiten sich aus den Bewegungstokens ab, damit
   sich das Tempo der Seite an einer Stelle nachziehen lässt.

   opacity steht ausschließlich in Anfangs- und Endbildern der Bewegung, nie
   als Dauerzustand: abgeschwächte Schrift wäre ein Kontrastproblem.
   animation-fill-mode: both hält den Anfangszustand über die Verzögerung. */

@keyframes hero-bild-setzen {
  from {
    transform: scale(1.06);
  }
}

@keyframes hero-glanz {
  from {
    opacity: 0;
    transform: translateX(-65%);
  }

  30% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateX(65%);
  }
}

/* Die negativen Endwerte lassen Ober- und Unterlängen frei — inset(0) würde
   sie an der Kante des Textkastens abschneiden. */
@keyframes hero-zeile-freilegen {
  from {
    clip-path: inset(100% -0.12em -0.3em -0.12em);
    transform: translateY(0.3em);
  }

  to {
    clip-path: inset(-0.3em -0.12em -0.3em -0.12em);
    transform: translateY(0);
  }
}

@keyframes hero-zeile-auf {
  from {
    opacity: 0;
    transform: translateY(var(--abstand-4));
  }
}

@keyframes hero-bild-ziehen {
  to {
    transform: translateY(10%);
  }
}

.hero__bild {
  animation: hero-bild-setzen calc(var(--dauer-ruhig) * 3) var(--kurve) both;
}

.hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 40%,
    color-mix(in oklch, var(--text-auf-tief) 15%, transparent) 50%,
    transparent 60%);
  content: "";
  pointer-events: none;
  animation:
    hero-glanz calc(var(--dauer-ruhig) * 4) var(--kurve-weich)
    calc(var(--dauer-schnell) * 2) both;
}

.hero__titel-haupt,
.hero__titel-neben {
  animation: hero-zeile-freilegen calc(var(--dauer-ruhig) * 2) var(--kurve) both;
}

.hero__titel-neben {
  animation-delay: var(--dauer-schnell);
}

.hero__lead,
.hero__actions,
.hero__note {
  animation: hero-zeile-auf var(--dauer-ruhig) var(--kurve) both;
}

.hero__lead {
  animation-delay: calc(var(--dauer-schnell) * 2);
}

.hero__actions {
  animation-delay: calc(var(--dauer-schnell) * 3);
}

.hero__note {
  animation-delay: calc(var(--dauer-schnell) * 4);
}

/* Beim Wegscrollen bleibt die Aufnahme hinter der Seite zurück. Scroll-
   gebundene Bewegung braucht keine Dauer, deshalb greift die Abschaltung
   über animation-duration nicht — sie hängt hier an der Medienabfrage. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero__bildfeld {
      animation: hero-bild-ziehen linear both;
      animation-timeline: view();
      animation-range: exit;
    }
  }
}

/* --------------------------------------------------------------------------
   Fertigungsbereiche
   Drei Felder direkt unter dem Bild. Die Zeichen zeigen nicht das Werkzeug,
   sondern die Form, die dabei entsteht: rundes Teil, prismatisches Teil,
   ebene Fläche, lagenweise abgetragen. Genau darum geht es beim Verfahren —
   eine Drehmaschine und eine Fräsmaschine sähen als Zeichen fast gleich aus,
   ihre Ergebnisse nicht.

   Der Inhalt steht mittig, zwei Haarstriche teilen die drei Felder. Die
   Striche stehen nur zwischen den Feldern, nicht an den Außenkanten — sonst
   läge über dem Band ein geschlossener Rahmen, den es nicht hat.

   Die Felder tragen die Sprungziele des Untermenüs.
   -------------------------------------------------------------------------- */

.bereiche {
  border-block-end: 1px solid var(--linie);
  background: var(--bg-gedaempft);
}

.bereiche__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: var(--abstand-20);
}

.bereich {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--abstand-4);
  padding-inline: var(--abstand-8);
  text-align: center;
}

/* Die Trennstriche stehen zwischen den Feldern, nicht an den Außenkanten —
   deshalb der Nachbarselektor statt einer Kante an jedem Feld. Das Polster
   liegt symmetrisch auf allen dreien, damit der mittig gesetzte Inhalt auch
   im ersten und letzten Feld in der Spaltenmitte steht. */
.bereich + .bereich {
  border-inline-start: 1px solid var(--linie);
}

/* Die Plakette hebt das Zeichen vom getönten Band ab und gibt ihm den Raum,
   in dem es gezogen wird. */
.bereich__plakette {
  display: grid;
  place-items: center;
  width: var(--abstand-20);
  height: var(--abstand-20);
  border: 1px solid var(--linie);
  border-radius: var(--radius-voll);
  background: var(--flaeche);
  box-shadow: var(--schatten-s);
  color: var(--marke);
}

.bereich__titel {
  color: var(--text);
  font-size: var(--schrift-h3);
}

.bereich__text {
  max-width: 26ch;
  color: var(--text-gedaempft);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

/* --- Die Zeichen werden gezogen ------------------------------------------
   Die Umrisse sind reine Striche. Mit pathLength="1" an jeder Linie (siehe
   Symbolsatz in der Seite) meldet jede dieselbe normierte Länge, und ein
   Strichmuster von 1 lässt sich mit stroke-dashoffset von 1 auf 0 aufziehen:
   das Zeichen entsteht Linie für Linie, wie eine geplottete Zeichnung. Die
   beiden Eigenschaften werden vererbt und reichen dadurch durch <use> bis in
   die Symbole hinein.

   Alle drei Bewegungen eines Feldes hängen an derselben benannten Zeitachse
   des Feldes — sonst hätte jedes Element seine eigene, an seiner Größe
   gemessene, und die Sequenz liefe auseinander. Die Reihenfolge steckt
   deshalb in den Bildern der Bewegung, nicht in Verzögerungen: eine
   scrollgebundene Bewegung hat keine Zeit, auf die eine Verzögerung wirken
   könnte. */

@keyframes karte-setzen {
  from {
    opacity: 0;
    transform: translateY(var(--abstand-5));
  }

  45% {
    opacity: 1;
    transform: none;
  }
}

@keyframes bereich-plakette {
  from {
    opacity: 0;
    transform: scale(0.72);
  }

  55% {
    opacity: 1;
    transform: none;
  }
}

@keyframes bereich-zeichen-ziehen {
  from {
    stroke-dashoffset: 1;
  }

  25% {
    stroke-dashoffset: 1;
  }

  90% {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bereich {
      view-timeline: --bereich-sicht block;
      animation: karte-setzen linear both;
      animation-timeline: --bereich-sicht;
      animation-range: entry var(--von) entry var(--bis);
    }

    .bereich__plakette {
      animation: bereich-plakette linear both;
      animation-timeline: --bereich-sicht;
      animation-range: entry var(--von) entry var(--bis);
    }

    .bereich .icon {
      stroke-dasharray: 1;
      animation: bereich-zeichen-ziehen linear both;
      animation-timeline: --bereich-sicht;
      animation-range: entry var(--von) entry var(--bis);
    }

    /* Der Versatz staffelt die drei Felder. Fällt er aus, greift der
       Standardbereich und alle drei setzen sich gleichzeitig — kein Ausfall,
       nur ohne Staffelung. */
    .bereich:nth-child(1) {
      --von: 8%;
      --bis: 72%;
    }

    .bereich:nth-child(2) {
      --von: 16%;
      --bis: 80%;
    }

    .bereich:nth-child(3) {
      --von: 24%;
      --bis: 88%;
    }
  }
}

.abschnitt {
  padding-block: var(--abstand-24);
}

.leistungen {
  background: var(--bg);
}

.leistungen__inner {
  display: grid;
  gap: var(--abstand-12);
}

/* Der Abschnittskopf trägt nur noch die Überschrift und steht deshalb mittig.
   Ohne Breitenbegrenzung: text-wrap: balance auf h2 verteilt die Zeilen
   gleichmäßig, wenn die Überschrift doch einmal umbricht. */
.abschnitt__kopf {
  text-align: center;
}

.abschnitt__kopf h2,
.ablauf h2,
.ueber h2 {
  font-size: var(--schrift-h1);
}

/* --- Leistungskarten -----------------------------------------------------
   Jede Leistung ist eine eigene Karte, kein Feld in einem durchgehenden
   Raster. Vorher stießen die drei Aufnahmen ohne Zwischenraum aneinander und
   lasen sich als ein zerschnittenes Panorama statt als drei Motive — die
   Haarlinie dazwischen ging in den dunklen Bildern unter. Zwischenraum,
   Rundung und eine Abschlusslinie unter dem Bild geben jedem Motiv eine
   eigene Kante.                                                            */

.leistungen__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--abstand-6);
}

.leistung {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: var(--abstand-8);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  background: var(--flaeche);
  transition:
    border-color var(--dauer-mittel) var(--kurve),
    box-shadow var(--dauer-mittel) var(--kurve);
}

.leistung--haupt {
  background: var(--flaeche-akzent);
}

/* Die ganze Karte führt dorthin, wohin auch ihr Link führt. Die Fläche hängt
   am Link selbst — Name, Ziel und Fokus bleiben dadurch dort, wo sie
   hingehören, und es entsteht kein zweites Bedienelement daneben. */
.leistung .text-link::after {
  position: absolute;
  inset: 0;
  content: "";
}

.leistung:hover {
  border-color: var(--marke);
  box-shadow: var(--schatten-m);
}

.leistung:has(.text-link:focus-visible) {
  border-color: var(--marke);
}

.leistung__bild {
  width: calc(100% + (2 * var(--abstand-8)));
  margin: calc(-1 * var(--abstand-8)) calc(-1 * var(--abstand-8)) var(--abstand-6);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-block-end: 1px solid var(--linie);
  background: var(--flaeche-invers);
}

.leistung__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--dauer-ruhig) var(--kurve);
}

.leistung:hover .leistung__bild img {
  transform: scale(1.04);
}

.leistung__titel {
  display: grid;
  gap: var(--abstand-2);
}

.leistung h3 {
  font-size: var(--schrift-h2);
}

.leistung p {
  max-width: 34ch;
  margin-block-start: var(--abstand-5);
  color: var(--text-sekundaer);
}

.leistung ul {
  display: grid;
  gap: var(--abstand-2);
  margin-block-start: var(--abstand-5);
  padding-inline-start: 1.2rem;
  color: var(--text-sekundaer);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

.leistung .text-link {
  margin-block-start: auto;
  padding-block-start: var(--abstand-8);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  color: var(--marke-text);
  font-size: var(--schrift-klein);
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--dauer-schnell) var(--kurve), gap var(--dauer-schnell) var(--kurve);
}

.text-link:hover {
  color: var(--marke-hover);
  gap: var(--abstand-3);
}

.ablauf {
  background-color: var(--marke-tief);
  background-image:
    linear-gradient(
      90deg,
      color-mix(in oklch, var(--marke-tief) 78%, transparent),
      color-mix(in oklch, var(--marke-tief) 54%, transparent) 58%,
      color-mix(in oklch, var(--marke-tief) 38%, transparent)
    ),
    url("../images/ablauf-hintergrund.webp");
  background-position: center;
  background-size: cover;
  color: var(--text-auf-tief);
}

.ablauf__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.75fr);
  gap: var(--abstand-16);
  align-items: center;
  padding-block: var(--abstand-24);
}

.ablauf__copy p {
  max-width: 54ch;
  margin-block-start: var(--abstand-5);
  color: var(--text-auf-tief);
}

.ablauf__copy .knopf {
  margin-block-start: var(--abstand-8);
}

.ablauf__daten {
  display: grid;
  border-block: 1px solid var(--linie-auf-tief);
}

.ablauf__daten div {
  display: grid;
  gap: var(--abstand-1);
  padding-block: var(--abstand-4);
  border-block-end: 1px solid var(--linie-auf-tief);
}

.ablauf__daten div:last-child {
  border-block-end: 0;
}

.ablauf__daten dt {
  color: var(--text-auf-tief);
  font-family: var(--font-mono);
  font-size: var(--schrift-mini);
  line-height: var(--zeilenhoehe-mini);
}

.ablauf__daten dd {
  color: var(--text-auf-tief);
  font-size: var(--schrift-klein);
}

/* --------------------------------------------------------------------------
   Über uns
   Text links, Foto rechts, darauf ein Störer mit den drei Punkten, die ein
   Interessent zuerst wissen will: wie lange schon, ab welcher Stückzahl, mit
   wem er spricht. Der Störer greift ins Bild — dadurch liest sich die rechte
   Hälfte als eine Sache und nicht als Bild plus Kasten daneben.
   -------------------------------------------------------------------------- */

.ueber {
  padding-block: var(--abstand-24);
  background: var(--bg-gedaempft);
}

.ueber__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--abstand-16);
  align-items: center;
}

.ueber__copy {
  display: grid;
  justify-items: start;
  gap: var(--abstand-5);
}

/* Die zweite Zeile steht in der Markenfarbe und auf eigener Zeile: die
   Überschrift trägt zwei Aussagen, nicht eine lange. */
.ueber__titel-neben {
  display: block;
  color: var(--marke-text);
}

.ueber__copy p {
  max-width: var(--lesebreite);
  color: var(--text-sekundaer);
}

.ueber__copy .knopf {
  margin-block-start: var(--abstand-3);
}

.ueber__medien {
  position: relative;
}

.ueber__bild {
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-l);
  background: var(--flaeche-invers);
}

.ueber__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Der Störer sitzt am rechten Rand und ragt ein Stück über das Bild hinaus.
   Die Breite ist gedeckelt, damit er auf breiten Schirmen nicht das halbe
   Foto verdeckt. */
.stoerer {
  position: absolute;
  right: calc(-1 * var(--abstand-6));
  bottom: var(--abstand-10);
  display: grid;
  gap: var(--abstand-5);
  width: min(21rem, 72%);
  margin: 0;
  padding: var(--abstand-6);
  border-radius: var(--radius-l);
  background: var(--marke);
  box-shadow: var(--schatten-l);
  color: var(--text-invers);
  list-style: none;
}

.stoerer__punkt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--abstand-4);
  align-items: start;
}

.stoerer__punkt .icon {
  margin-block-start: 2px;
  color: var(--text-invers);
}

.stoerer__marke {
  color: var(--text-invers);
  font-family: var(--font-mono);
  font-size: var(--schrift-mini);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: var(--zeilenhoehe-mini);
  text-transform: uppercase;
}

.stoerer__text {
  margin-block-start: var(--abstand-1);
  color: var(--text-invers);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

/* --------------------------------------------------------------------------
   Produkte
   Vier Beispiele aus der eigenen Fertigung, keine Bestellstrecke: es stehen
   keine Preise dabei, gekauft wird im Teile-Shop. Der Hinweis unter dem
   Raster sagt genau das, damit niemand einen Warenkorb sucht.

   Die Aufnahmen sind freigestellt und tragen ihr Weiß mit — deshalb ist die
   Karte weiß und das Bild ohne eigenen Rahmen oder getönte Fläche. Auf einem
   grauen Grund stünde jedes Motiv sichtbar in einem weißen Kasten.
   -------------------------------------------------------------------------- */

.produkte {
  background: var(--bg);
}

.produkte__inner {
  display: grid;
  gap: var(--abstand-12);
}

.produkte__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--abstand-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.produkt {
  display: grid;
  align-content: start;
  gap: var(--abstand-2);
  padding: var(--abstand-5);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  background: var(--flaeche);
  transition:
    border-color var(--dauer-mittel) var(--kurve),
    box-shadow var(--dauer-mittel) var(--kurve);
}

.produkt:hover {
  border-color: var(--marke);
  box-shadow: var(--schatten-m);
}

.produkt__bild {
  overflow: hidden;
  margin: 0 0 var(--abstand-3);
  aspect-ratio: 4 / 3;
}

.produkt__bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--dauer-ruhig) var(--kurve);
}

/* Beim Überfahren rückt das Teil ein Stück heran — wie ein Stück, das man
   aus dem Regal nimmt. Der Überstand wird von der Bildfläche beschnitten;
   das trifft nur den weißen Rand, nicht das Motiv. */
.produkt:hover .produkt__bild img {
  transform: scale(1.05);
}

.produkt__titel {
  color: var(--text);
  font-size: var(--schrift-h4);
}

.produkt__text {
  color: var(--text-gedaempft);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

.produkte__hinweis {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-4);
  color: var(--text-gedaempft);
  font-size: var(--schrift-klein);
  text-align: center;
}

/* Dieselbe Staffelung wie bei den Fertigungsbereichen — vier Karten statt
   drei, sonst gleiche Regie. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .produkt {
      view-timeline: --produkt-sicht block;
      animation: karte-setzen linear both;
      animation-timeline: --produkt-sicht;
      animation-range: entry var(--von) entry var(--bis);
    }

    .produkt:nth-child(1) {
      --von: 8%;
      --bis: 70%;
    }

    .produkt:nth-child(2) {
      --von: 14%;
      --bis: 76%;
    }

    .produkt:nth-child(3) {
      --von: 20%;
      --bis: 82%;
    }

    .produkt:nth-child(4) {
      --von: 26%;
      --bis: 88%;
    }
  }
}

/* --------------------------------------------------------------------------
   Fußbereich
   Kontaktdaten stehen bei der Marke; Leistungen und Unternehmen bilden den
   kompakten Menüblock rechts. Die Abschlusszone trennt Rechtstexte und
   Urheberangaben von der Hauptnavigation.
   Auf der dunklen Fläche gilt zwingend die Negativfassung des Logos.
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--marke-tief);
  color: var(--text-auf-tief);
}

.site-footer a {
  text-decoration: none;
}

.site-footer__inner {
  padding-block: var(--abstand-16) var(--abstand-6);
}

.site-footer__haupt {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) repeat(2, minmax(10rem, max-content));
  align-items: flex-start;
  gap: var(--abstand-12);
  padding-block-end: var(--abstand-12);
}

.site-footer__marke {
  display: grid;
  align-content: start;
  gap: var(--abstand-5);
}

.site-footer__logo {
  display: block;
  width: 14rem;
}

.site-footer__logo img {
  width: 100%;
  height: auto;
}

.site-footer__adresse {
  color: var(--text-auf-tief);
  font-size: var(--schrift-klein);
  font-style: normal;
  line-height: var(--zeilenhoehe-klein);
}

.site-footer__daten {
  display: grid;
  gap: var(--abstand-1);
}

.site-footer__gruppe {
  min-width: 0;
}

.site-footer__gruppe--unternehmen {
  margin-inline-start: var(--abstand-8);
}

.site-footer__titel {
  margin-block-end: var(--abstand-4);
  color: var(--text-auf-tief);
  font-size: var(--schrift-klein);
  font-weight: var(--gewicht-titel);
  line-height: var(--zeilenhoehe-klein);
}

.site-footer__liste {
  display: grid;
  gap: var(--abstand-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: 2.75rem;
  margin-inline-start: calc(-1 * var(--abstand-2));
  padding-inline: var(--abstand-2);
  border-radius: var(--radius-m);
  color: var(--text-auf-tief);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
  transition:
    background-color var(--dauer-schnell) var(--kurve),
    transform var(--dauer-schnell) var(--kurve);
}

.site-footer__link:hover {
  background: color-mix(in oklch, var(--text-auf-tief) 8%, transparent);
  transform: translateX(var(--abstand-1));
}

.site-footer__abschluss {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-3) var(--abstand-8);
  padding-block-start: var(--abstand-5);
  border-block-start: 1px solid var(--linie-auf-tief);
}

.site-footer__meta {
  color: var(--text-auf-tief);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

.site-footer__urheber {
  display: grid;
  gap: var(--abstand-1);
}

.site-footer__recht {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--abstand-1) var(--abstand-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__recht a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--abstand-2);
  border-radius: var(--radius-m);
  color: var(--text-auf-tief);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
  transition: background-color var(--dauer-schnell) var(--kurve);
}

.site-footer__recht a:hover {
  background: color-mix(in oklch, var(--text-auf-tief) 8%, transparent);
}

.site-footer__credit {
  color: var(--text-auf-tief);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

.site-footer__credit span {
  font-weight: 500;
}

/* Der Erstellervermerk ist der einzige Satz der Fußzeile, in dem Verweise
   mitten im Text stehen. Sie brauchen deshalb eine Unterstreichung und
   können nicht wie die Menüpunkte darüber allein über ihre Fläche wirken.

   Der Strich steht auf halber Deckkraft und wird beim Überfahren voll. So
   ist der Verweis erkennbar, ohne dass drei Unterstreichungen in einer Zeile
   den Abschluss der Seite unruhig machen. */
.site-footer__credit a {
  color: var(--text-auf-tief);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--text-auf-tief) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--dauer-schnell) var(--kurve);
}

.site-footer__credit a:hover {
  text-decoration-color: var(--text-auf-tief);
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}

@media (max-width: 68rem) {
  .site-footer__haupt {
    grid-template-columns: minmax(16rem, 1fr) repeat(2, minmax(10rem, max-content));
    gap: var(--abstand-8);
  }

  .site-footer__gruppe--unternehmen {
    margin-inline-start: var(--abstand-4);
  }

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

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

  /* Die Hauptkarte nimmt die volle Breite. Über diese Breite braucht das
     Bild ein flacheres Format, sonst wird die Karte höher als der Schirm. */
  .leistung--haupt {
    grid-column: 1 / -1;
  }

  .leistung--haupt .leistung__bild {
    aspect-ratio: 3 / 1;
  }
}

@media (max-width: 64rem) {
  /* Unterhalb von 64 rem klappt die Navigation als Feld unter die Leiste.
     Eine zweite Zeile in der Leiste selbst würde beim Kleben dauerhaft
     Höhe kosten — genau das, was eine klebende Leiste vermeiden soll.

     Aufgezogen wird über clip-path: das Feld behält seine natürliche Höhe,
     auch wenn das Untermenü darin aufklappt, und die Bewegung bleibt eine
     reine Kompositor-Sache. */
  .site-header__schalter {
    display: inline-flex;
    order: 3;
  }

  .site-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    visibility: hidden;
    margin-inline: 0;
    border-block-end: 1px solid var(--linie);
    background: var(--bg);
    box-shadow: var(--schatten-l);
    clip-path: inset(0 0 100% 0);
    transition:
      clip-path var(--dauer-mittel) var(--kurve),
      visibility 0s linear var(--dauer-mittel);
  }

  .site-header--offen .site-nav {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition-delay: 0s;
  }

  .site-nav__liste {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: var(--abstand-2) var(--abstand-6) var(--abstand-6);
  }

  .site-nav__punkt {
    flex-wrap: wrap;
    border-block-end: 1px solid var(--linie);
  }

  .site-nav__punkt:last-child {
    border-block-end: 0;
  }

  .site-nav__link {
    flex: 1 1 auto;
    padding: var(--abstand-3);
    font-size: var(--schrift-basis);
  }

  /* Im Feld steht der Menütext auf 18 px — der Traktor wächst mit. */
  .site-nav__traktor {
    block-size: var(--abstand-6);
  }

  /* Der Aufklappknopf wird zur vollwertigen Schaltfläche am Zeilenende. */
  .site-nav__auf {
    width: var(--abstand-10);
    height: var(--abstand-10);
    margin-inline-start: auto;
  }

  /* Im Feld klappt das Untermenü in der Zeile auf, statt darüber zu liegen.
     Auf kleinen Ansichten wird es ohne Höhenanimation ein- und ausgeblendet,
     damit auch längere Leistungslisten ruckelfrei bleiben. */
  .site-unter {
    position: static;
    display: none;
    flex-basis: 100%;
    visibility: visible;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
  }

  /* Im Feld liegt das Untermenü in der Zeile — die Zeigerbrücke entfällt. */
  .site-unter::before {
    display: none;
  }

  .site-nav__punkt--offen > .site-unter {
    display: block;
  }

  .site-unter > li:first-child {
    padding-block-start: var(--abstand-1);
  }

  .site-unter > li:last-child {
    padding-block-end: var(--abstand-3);
  }

  .site-unter__link {
    padding: var(--abstand-2) var(--abstand-4);
    border-inline-start: 2px solid var(--linie);
    border-radius: 0;
    font-size: var(--schrift-klein);
  }

  .site-unter__link:hover,
  .site-unter__link:focus-visible {
    border-inline-start-color: var(--marke);
  }

  .site-telefon {
    margin-inline-start: auto;
  }
}

@media (max-width: 52rem) {
  .rahmen {
    width: min(100% - (2 * var(--abstand-4)), 90rem);
  }

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

  .site-footer__marke {
    grid-column: 1 / -1;
  }

  .site-footer__gruppe--unternehmen {
    margin-inline-start: 0;
  }

  /* Zwei Spalten sind hier zu eng: der Text käme unter 40 Zeichen je Zeile.
     Foto und Störer rücken deshalb unter den Text. */
  .ueber__inner {
    grid-template-columns: 1fr;
    gap: var(--abstand-10);
  }

  .ueber__bild {
    aspect-ratio: 16 / 9;
  }

  .stoerer {
    right: 0;
    width: min(21rem, 90%);
  }

  /* Drei Spalten bleiben, das Polster neben den Trennstrichen gibt nach. */
  .bereiche__inner {
    padding-block: var(--abstand-16);
  }

  .bereich {
    padding-inline: var(--abstand-5);
  }

  .site-header__inner {
    gap: var(--abstand-4);
  }

  .site-nav__liste {
    padding-inline: var(--abstand-4);
  }

  /* Auf schmalen Fenstern kippt der Schleier von waagerecht auf senkrecht:
     oben bleibt die Aufnahme frei, die Schrift rückt in den dunklen Teil
     darunter. Der Bildausschnitt wandert dabei etwas nach rechts und oben,
     damit das Licht auf der Fläche im Bild bleibt. */
  .hero::after {
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--marke-tief) 28%, transparent) 0%,
        color-mix(in oklch, var(--marke-tief) 82%, transparent) 46%,
        var(--marke-tief) 100%);
  }

  .hero__bild {
    object-position: 68% 42%;
  }

  .hero__inner {
    align-items: flex-end;
    min-height: clamp(30rem, 84svh, 40rem);
  }

  .hero__copy {
    max-width: none;
    padding-block: var(--abstand-20) var(--abstand-12);
  }

  .ablauf__inner {
    grid-template-columns: 1fr;
    gap: var(--abstand-8);
    padding-block: var(--abstand-16);
  }

  .site-footer__inner {
    padding-block: var(--abstand-8);
  }
}

@media (max-width: 40rem) {
  /* Einspaltig kippt die Karte in die Waagerechte: das Teil links, der Name
     rechts daneben. Vier hochformatige Karten untereinander wären sonst eine
     sehr lange Strecke. */
  .produkte__liste {
    grid-template-columns: 1fr;
    gap: var(--abstand-4);
  }

  .produkt {
    grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
    align-content: center;
    column-gap: var(--abstand-5);
  }

  .produkt__bild {
    grid-row: 1 / span 2;
    grid-column: 1;
    margin-block-end: 0;
  }

  .produkt__titel,
  .produkt__text {
    grid-column: 2;
  }

  /* Unter 40 rem bleibt für die Vollfassung kein Platz — bei rund 160 px
     Breite wird der Claim unleserlich. Dort gilt durchgehend die
     Kurzfassung, unabhängig vom Scrollzustand. */
  .site-header {
    --kopf-hoehe: 5rem;
    --logo-hoehe: 3.5rem;
    --logo-breite: 7.9rem;
  }

  .site-header--schmal {
    --kopf-hoehe: 4.25rem;
    --logo-hoehe: 3.25rem;
    --logo-breite: 7.35rem;
  }

  .site-header .site-header__logo-bild--voll {
    opacity: 0;
  }

  .site-header .site-header__logo-bild--kompakt {
    opacity: 1;
  }

  .site-header__inner {
    gap: var(--abstand-3);
  }

  /* Hörer und Menüzeichen werden zum gleichen Paar: zwei quadratische
     Schaltflächen mit derselben Umrandung. Die Beschriftungen bleiben für
     Screenreader im Baum — sie werden ausgeblendet, nicht entfernt. */
  .site-telefon,
  .site-header__schalter {
    display: grid;
    place-items: center;
    width: var(--abstand-12);
    height: var(--abstand-12);
    padding: 0;
  }

  .site-telefon__icon {
    width: auto;
    height: auto;
    background: none;
  }

  .site-telefon:hover .site-telefon__icon {
    background: none;
    color: var(--marke-text);
  }

  /* Ohne Beschriftung darf das Zeichen selbst größer stehen. */
  .site-telefon .icon,
  .site-header__schalter .icon {
    width: var(--abstand-6);
    height: var(--abstand-6);
  }

  .site-telefon__text,
  .site-header__schalter-text {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hero__inner {
    min-height: clamp(28rem, 82svh, 38rem);
  }

  .hero__copy {
    padding-block: var(--abstand-16) var(--abstand-10);
  }

  .hero__titel-haupt {
    font-size: var(--schrift-h1);
  }

  .hero__titel-neben {
    font-size: var(--schrift-h3);
  }

  .hero__lead {
    font-size: var(--schrift-basis);
  }

  .hero__actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .hero__actions .knopf {
    width: 100%;
  }

  /* Einspaltig wird aus den senkrechten Trennstrichen ein waagerechter. */
  .bereiche__inner {
    grid-template-columns: 1fr;
    padding-block: var(--abstand-16);
  }

  .bereich {
    padding: var(--abstand-10) 0;
  }

  .bereich + .bereich {
    border-inline-start: 0;
    border-block-start: 1px solid var(--linie);
  }

  .abschnitt {
    padding-block: var(--abstand-16);
  }

  .leistungen__inner {
    gap: var(--abstand-8);
  }

  .leistungen__liste {
    grid-template-columns: 1fr;
  }

  .leistung {
    padding: var(--abstand-6);
  }

  .leistung--haupt {
    grid-column: auto;
  }

  /* Einspaltig wird die Karte breit — das Bild braucht dann ein flacheres
     Format, damit man den Text darunter noch sieht. */
  .leistung__bild,
  .leistung--haupt .leistung__bild {
    width: calc(100% + (2 * var(--abstand-6)));
    margin: calc(-1 * var(--abstand-6)) calc(-1 * var(--abstand-6)) var(--abstand-5);
    aspect-ratio: 16 / 9;
  }

  .leistung .text-link {
    padding-block-start: var(--abstand-6);
  }

  .ueber {
    padding-block: var(--abstand-16);
  }

  /* Einspaltig rutscht der Störer unter das Bild und wird zur normalen
     Liste — überlappend hätte er auf dieser Breite das halbe Foto zu. */
  .stoerer {
    position: static;
    width: auto;
    margin-block-start: calc(-1 * var(--abstand-8));
    margin-inline: var(--abstand-4);
  }

  /* Volle Logofassung, aber schmaler — unter rund 160 px Breite wird der
     Claim unleserlich, hier bleiben wir mit 11,5 rem darüber. */
  .site-footer__logo {
    width: 11.5rem;
  }

  .site-footer__haupt {
    grid-template-columns: 1fr;
    gap: var(--abstand-8);
  }

  .site-footer__abschluss {
    align-items: flex-start;
    gap: var(--abstand-3);
  }

  .site-footer__recht {
    justify-content: flex-start;
  }

}

@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }

  /* Auch die Aufbaubewegung wird abgeschaltet, nicht nur die Übergänge:
     sie läuft auf ihren Endzustand zusammen, statt zu entfallen — sonst
     bliebe der Anfangszustand mit opacity 0 stehen. */
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   Ergänzungen für WordPress
   Alles hier kommt aus tokens.css. Zwei Dinge fehlten der reinen Startseite:
   eine flachere Fassung des Heros für Unterseiten und Fließtextregeln für
   den Inhalt, der aus dem Editor kommt.
   ========================================================================== */

/* --- Hero einer Unterseite ------------------------------------------------
   Dieselbe Fläche, nur flacher und mit einem Titelregister. Ohne Bild trägt
   --marke-tief allein; --text-auf-tief bleibt darauf lesbar.              */

.hero--seite .hero__inner {
  min-height: clamp(15rem, 34svh, 22rem);
}

.hero--seite .hero__copy {
  max-width: 44rem;
  padding-block: var(--abstand-12);
}

/* Trägt die Unterseite ein Beitragsbild, darf der Hero deutlich höher stehen
   und rückt damit in Richtung Startseite. Die flache Fassung oben bleibt für
   die Seiten ohne Aufnahme — Impressum und Datenschutz haben keine, und ein
   halber Bildschirm Markenblau wäre dort nur eine leere Fläche. Die Abfrage
   entscheidet das am Markup statt an einer zusätzlichen Body-Klasse. */
.hero--seite:has(.hero__bildfeld) .hero__inner {
  min-height: clamp(24rem, 58svh, 36rem);
}

.hero--seite:has(.hero__bildfeld) .hero__copy {
  padding-block: var(--abstand-16);
}

.hero--seite .hero__titel-haupt {
  font-size: var(--schrift-h1);
}

.hero--seite .hero__lead {
  max-width: var(--lesebreite);
  margin-block-start: var(--abstand-4);
  font-size: var(--schrift-basis);
  line-height: var(--zeilenhoehe-text);
}

/* --- Seiteninhalt aus dem Editor -----------------------------------------
   Die Grundregeln setzen alle Ränder auf 0, damit die Komponenten ihre
   Abstände selbst bestimmen. Freier Text braucht sie zurück — hier, an
   einer Stelle, statt im Editor über Inline-Angaben.                     */

.seiteninhalt {
  max-width: var(--lesebreite);
}

.seiteninhalt > * + * {
  margin-block-start: var(--abstand-6);
}

.seiteninhalt h2,
.seiteninhalt h3,
.seiteninhalt h4 {
  font-family: var(--font-titel);
  font-weight: var(--gewicht-titel-stark);
  letter-spacing: var(--titel-laufweite);
  line-height: var(--titel-zeilenhoehe);
  text-wrap: balance;
}

.seiteninhalt h2 { font-size: var(--schrift-h2); }
.seiteninhalt h3 { font-size: var(--schrift-h3); }

.seiteninhalt h4 {
  font-size: var(--schrift-h4);
  font-weight: var(--gewicht-titel);
}

/* Nach einer Überschrift steht der zugehörige Text enger als zwischen zwei
   Absätzen — sonst hängt die Überschrift zwischen den Blöcken. */
.seiteninhalt > * + h2,
.seiteninhalt > * + h3,
.seiteninhalt > * + h4 {
  margin-block-start: var(--abstand-12);
}

.seiteninhalt > :is(h2, h3, h4) + * {
  margin-block-start: var(--abstand-4);
}

.seiteninhalt a:not(.knopf):not(.text-link) {
  color: var(--marke-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.seiteninhalt a:not(.knopf):not(.text-link):hover {
  color: var(--marke-hover);
}

.seiteninhalt ul,
.seiteninhalt ol {
  padding-inline-start: var(--abstand-6);
}

.seiteninhalt li + li {
  margin-block-start: var(--abstand-2);
}

.seiteninhalt ::marker {
  color: var(--text-gedaempft);
}

.seiteninhalt figure,
.seiteninhalt img {
  max-width: 100%;
}

.seiteninhalt figcaption {
  margin-block-start: var(--abstand-2);
  color: var(--text-gedaempft);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

.seiteninhalt blockquote {
  margin: 0;
  padding-inline-start: var(--abstand-5);
  border-inline-start: 2px solid var(--linie-stark);
  color: var(--text-sekundaer);
}

.seiteninhalt code,
.seiteninhalt kbd {
  font-family: var(--font-mono);
  font-size: var(--schrift-klein);
}

.seiteninhalt hr {
  height: 1px;
  margin-block: var(--abstand-10);
  border: 0;
  background: var(--linie);
}

.seiteninhalt address {
  font-style: normal;
}

/* --- Tabellen ------------------------------------------------------------
   Breite Tabellen scrollen in ihrem eigenen Behälter; die Seite selbst
   scrollt nie waagerecht. Den Behälter setzt der Inhaltsfilter, nicht der
   Redakteur.                                                             */

.tabelle-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.seiteninhalt table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

.seiteninhalt :is(th, td) {
  padding: var(--abstand-3) var(--abstand-4);
  border-block-end: 1px solid var(--linie);
  text-align: start;
  vertical-align: top;
}

.seiteninhalt th {
  color: var(--text);
  font-weight: 600;
}

.seiteninhalt thead th {
  border-block-end: 1px solid var(--linie-stark);
}

/* --- Beitragslisten, Blättern --------------------------------------------
   Die Seite hat keinen Blog. Archiv, Suche und Einzelbeitrag brauchen
   trotzdem eine Form, damit nirgends ein nacktes Gerüst steht.          */

.beitrag + .beitrag {
  margin-block-start: var(--abstand-10);
  padding-block-start: var(--abstand-10);
  border-block-start: 1px solid var(--linie);
}

.beitrag__titel {
  font-size: var(--schrift-h3);
}

.beitrag__meta {
  margin-block-start: var(--abstand-2);
  color: var(--text-gedaempft);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

.blaettern {
  margin-block-start: var(--abstand-12);
}

.blaettern .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
  align-items: center;
}

.blaettern :is(a, span.current) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--abstand-3);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-m);
  color: var(--marke-text);
  font-size: var(--schrift-klein);
  text-decoration: none;
}

.blaettern span.current {
  border-color: var(--marke);
  background: var(--marke);
  color: var(--text-invers);
}

.blaettern a:hover {
  border-color: var(--marke);
  background: var(--flaeche-akzent);
}

/* --- Suchformular --------------------------------------------------------- */

.suche__label {
  display: block;
  margin-block-end: var(--abstand-2);
  color: var(--text-sekundaer);
  font-size: var(--schrift-klein);
  font-weight: 500;
}

.suche__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
}

.suche__feld {
  flex: 1 1 14rem;
  min-height: 3rem;
  padding: var(--abstand-2) var(--abstand-4);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-m);
  background: var(--flaeche);
  color: var(--text);
  font-family: inherit;
  font-size: var(--schrift-klein);
}

.suche__feld::placeholder {
  color: var(--text-gedaempft);
}

/* --- Klassen, die WordPress selbst setzt ---------------------------------- */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.alignleft {
  float: left;
  margin-inline-end: var(--abstand-6);
  margin-block-end: var(--abstand-4);
}

.alignright {
  float: right;
  margin-inline-start: var(--abstand-6);
  margin-block-end: var(--abstand-4);
}

.aligncenter {
  margin-inline: auto;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  margin-block-start: var(--abstand-2);
  color: var(--text-gedaempft);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

@media (max-width: 40rem) {
  .alignleft,
  .alignright {
    float: none;
    margin-inline: 0;
  }
}

/* Die zweite Titelzeile ist auf der Startseite bewusst schmal, damit sie
   unter dem großen Anspruch steht statt neben ihm. Auf einer Unterseite
   trägt sie die Aussage und bricht bei 24 Zeichen zu früh um. */
.hero--seite .hero__titel-neben {
  max-width: 40ch;
}

/* ==========================================================================
   Über uns
   Die Startseite beantwortet, was der Betrieb kann. Diese Seite beantwortet,
   ob man ihm ein Teil anvertrauen kann — und die Antwort darauf gibt in
   dieser Branche kein Werbetext, sondern ein Datenblatt.

   Deshalb läuft neben dem Fließtext eine Kennwerttafel mit, die beim Scrollen
   stehen bleibt: seit wann, welche Verfahren, welche Werkstoffe, ab welcher
   Stückzahl. Dieselben Angaben, die auf einem Lieferschein stünden. Sie sind
   die einzige Auffälligkeit der Seite; alles andere bleibt zurückhaltend.
   ========================================================================== */

.werkblatt {
  padding-block: var(--abstand-24);
  background: var(--bg);
}

.werkblatt__inner {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--abstand-16);
}

/* Die Spalte muss die volle Zeilenhoehe einnehmen, sonst hat die Tafel darin
   keinen Weg, den sie mitlaufen koennte: ein sticky-Element klebt nur
   innerhalb seines eigenen Elternbereichs. Mit align-items: start faellt die
   Zelle auf Inhaltshoehe zusammen und sticky bleibt wirkungslos. */
.werkblatt__spalte {
  height: 100%;
}

/* Die Tafel begleitet den Text, statt einmal am Anfang zu stehen. 4,5 rem ist
   die Höhe der geschrumpften Kopfleiste, der Rest ist Luft. */
.werkblatt__daten {
  position: sticky;
  top: calc(4.5rem + var(--abstand-6));
  display: grid;
  margin: 0;
  border-block-start: 2px solid var(--marke);
}

.werkblatt__daten div {
  display: grid;
  gap: var(--abstand-1);
  padding-block: var(--abstand-4);
  border-block-end: 1px solid var(--linie);
}

.werkblatt__daten div:last-child {
  border-block-end: 0;
}

.werkblatt__daten dt {
  color: var(--text-gedaempft);
  font-family: var(--font-mono);
  font-size: var(--schrift-mini);
  letter-spacing: 0.08em;
  line-height: var(--zeilenhoehe-mini);
  text-transform: uppercase;
}

.werkblatt__daten dd {
  margin: 0;
  color: var(--text);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

/* Die Jahreszahl trägt den Abschnitt und darf größer stehen als die übrigen
   Werte. Sie ist der eine Wert, den ein Interessent sich merkt. */
.werkblatt__daten .werkblatt__jahr {
  font-family: var(--font-titel);
  font-size: var(--schrift-h3);
  font-weight: var(--gewicht-titel-stark);
  letter-spacing: var(--titel-laufweite);
  line-height: var(--zeilenhoehe-eng);
}

/* --------------------------------------------------------------------------
   Bildstreifen
   Drei Aufnahmen aus der Bearbeitung, hochkant statt quer — die Startseite
   zeigt dieselben Motive im Querformat, der Zuschnitt unterscheidet die
   beiden Seiten voneinander. Die Beschriftung nennt das Verfahren; sie ist
   Angabe, keine Bildunterschrift.
   -------------------------------------------------------------------------- */

.bildstreifen {
  padding-block: var(--abstand-16);
  background: var(--bg);
}

.bildstreifen__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--abstand-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bildstreifen__feld {
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-l);
  background: var(--flaeche-invers);
}

.bildstreifen__feld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dauer-ruhig) var(--kurve);
}

.bildstreifen__punkt:hover .bildstreifen__feld img {
  transform: scale(1.04);
}

.bildstreifen__marke {
  margin-block-start: var(--abstand-4);
  color: var(--text-sekundaer);
  font-family: var(--font-mono);
  font-size: var(--schrift-mini);
  letter-spacing: 0.08em;
  line-height: var(--zeilenhoehe-mini);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Standort und Anfrage
   Der Abschluss der Seite, ohne Foto: das Werkstattbild steht schon im Hero.

   Die Fläche ist --flaeche-akzent und bewusst nicht --marke-tief. Der
   Fußbereich schließt direkt an und trägt dieselbe tiefe Farbe; zwei dunkle
   Flächen übereinander läsen sich als ein Block, und der Handlungsaufruf
   würde zum Vorspann der Fußzeile. Blaustichig hell setzt ihn sowohl vom
   neutralgrauen Bildstreifen darüber als auch vom Fuß darunter ab.
   -------------------------------------------------------------------------- */

.standort {
  padding-block: var(--abstand-24);
  background: var(--flaeche-akzent);
  color: var(--text);
}

.standort__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.75fr);
  gap: var(--abstand-16);
  align-items: center;
}

.standort__copy p {
  max-width: 54ch;
  margin-block-start: var(--abstand-5);
  color: var(--text-sekundaer);
}

.standort__copy .knopf {
  margin-block-start: var(--abstand-8);
}

/* Die Anschrift in derselben Form wie die Kennwerttafel, nur ohne den
   mitlaufenden Anteil — hier gibt es nichts zu begleiten. */
.standort__daten {
  display: grid;
  margin: 0;
  border-block-start: 2px solid var(--marke);
}

.standort__daten div {
  display: grid;
  gap: var(--abstand-1);
  padding-block: var(--abstand-4);
  border-block-end: 1px solid var(--linie);
}

.standort__daten div:last-child {
  border-block-end: 0;
}

.standort__daten dt {
  color: var(--text-gedaempft);
  font-family: var(--font-mono);
  font-size: var(--schrift-mini);
  letter-spacing: 0.08em;
  line-height: var(--zeilenhoehe-mini);
  text-transform: uppercase;
}

.standort__daten dd {
  margin: 0;
  color: var(--text);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

.standort__daten a {
  color: var(--marke-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.standort__daten a:hover {
  color: var(--marke-hover);
}

/* --------------------------------------------------------------------------
   Schmale Schirme
   Die Tafel klebt nicht mehr — auf einem Telefon steht sie über dem Text und
   wäre als mitlaufende Spalte nur im Weg.
   -------------------------------------------------------------------------- */

@media (max-width: 64rem) {
  .werkblatt__inner,
  .standort__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-10);
  }

  .werkblatt__daten {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--abstand-8);
  }

  .werkblatt__daten div:nth-last-child(2) {
    border-block-end: 0;
  }
}

@media (max-width: 52rem) {
  .bildstreifen__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bildstreifen__punkt:last-child {
    display: none;
  }
}

@media (max-width: 40rem) {
  .werkblatt {
    padding-block: var(--abstand-16);
  }

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

  .werkblatt__daten div:nth-last-child(2) {
    border-block-end: 1px solid var(--linie);
  }

  .standort {
    padding-block: var(--abstand-16);
  }
}

/* Eine Seite, die gelesen wird, braucht keinen Satzspiegel von 90 rem. Die
   Startseite ist eine Übersicht und nutzt die volle Breite; hier steht ein
   Text, und 72 rem halten Tafel, Spalte und Rand in einem Verhältnis, das
   nicht auseinanderfällt. */
.rahmen--schmal {
  width: min(100% - (2 * var(--abstand-6)), 72rem);
}

/* ==========================================================================
   Leistungsseiten
   Fünf Unterseiten, die dieselbe Frage aus fünf Richtungen beantworten: was
   ein Teil bei uns durchläuft. Sie teilen sich deshalb ein Gerüst — Hero,
   Kennwerttafel neben dem Text, Bildstreifen, ein eigener Mittelteil, ein
   Aufruf und der Verweis auf die Geschwister.

   Neu sind hier nur vier Bausteine. Alles andere kommt aus den Abschnitten
   weiter oben: .werkblatt trägt Tafel und Fließtext, .bildstreifen die
   Aufnahmen, .ablauf den Aufruf am Fuß.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bildplatzhalter
   Die Aufnahmen für diese Seiten liegen noch nicht vor. Ein leerer Bereich
   ließe die Seite in falschem Rhythmus stehen und wäre beim Nachreichen der
   Bilder eine zweite Layoutarbeit. Der Platzhalter nimmt deshalb schon jetzt
   das Seitenverhältnis ein, das die Aufnahme später hat, und nennt im Text,
   welches Motiv an diese Stelle gehört. Der Redakteur ersetzt die ganze
   <figure> durch die Bilddatei, sonst ändert sich nichts.
   -------------------------------------------------------------------------- */

.platzhalter {
  display: grid;
  place-content: center;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: var(--abstand-6);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-m);
  background-color: var(--bg-gedaempft);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 11px,
    var(--linie) 11px 12px
  );
  text-align: center;
}

.platzhalter--breit  { aspect-ratio: 16 / 9; }
.platzhalter--hoch   { aspect-ratio: 3 / 4; }

.platzhalter__text {
  max-width: 30ch;
  color: var(--text-gedaempft);
  font-family: var(--font-mono);
  font-size: var(--schrift-mini);
  line-height: var(--zeilenhoehe-mini);
}

/* Im Bildstreifen sitzt der Platzhalter an der Stelle des Bildfelds und muss
   dessen Form annehmen, nicht seine eigene — sonst springt die Seite in dem
   Moment, in dem die Aufnahme nachgereicht wird. */
.bildstreifen .platzhalter {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-l);
}

/* --------------------------------------------------------------------------
   Teileliste
   Eine Aufzählung typischer Bauteile, jedes mit einem Satz dazu, warum es
   gefertigt wird. Bewusst keine Karten: es sind Einträge eines Verzeichnisses
   und keine gleichwertigen Angebote, und ein Rahmen um jeden Eintrag würde
   ihnen ein Gewicht geben, das sie nicht haben. Die Haarlinie trennt, mehr
   braucht es nicht.
   -------------------------------------------------------------------------- */

.teileliste {
  padding-block: var(--abstand-20);
  border-block: 1px solid var(--linie);
  background: var(--bg-gedaempft);
}

.teileliste__inner {
  display: grid;
  gap: var(--abstand-10);
}

.teileliste__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--abstand-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Jeder Eintrag ist eine Zeile eines Registers: links der Name des Teils,
   rechts der Satz dazu. Vorher stand der Satz unter dem Namen, und weil beide
   linksbündig und gleich weit liefen, sahen sechs Einträge wie ein Absatz mit
   Zwischentiteln aus. Nebeneinander lässt sich die Liste überfliegen — man
   liest die Spalte der Namen und hält nur dort an, wo einer passt.

   Die Namensspalte ist mit 10 rem so bemessen, dass sie auch im schmalen
   Rahmen der übrigen Leistungsseiten noch eine lesbare Textspalte übrig
   lässt. Eine max-width braucht der Satz dadurch nicht: seine Zeilenlänge
   ergibt sich aus der Spalte, in der er steht. */
.teileliste__punkt {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: var(--abstand-2) var(--abstand-6);
  align-items: baseline;
  padding-block: var(--abstand-5);
  border-block-start: 1px solid var(--linie-stark);
}

.teileliste__name {
  color: var(--text);
  font-family: var(--font-titel);
  font-size: var(--schrift-h4);
  font-weight: var(--gewicht-titel);
  letter-spacing: var(--titel-laufweite);
  line-height: var(--zeilenhoehe-eng);
  text-wrap: balance;
}

.teileliste__text {
  color: var(--text-gedaempft);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

/* --------------------------------------------------------------------------
   Schritte
   Nur auf der Seite zum Fertigungsablauf. Dort ist der Inhalt tatsächlich
   eine Reihenfolge, und die Ziffer sagt etwas, das die Überschrift nicht
   sagt: dass Schritt vier ohne Schritt drei nicht stattfindet. Auf allen
   anderen Seiten hätte dieselbe Form nichts zu tragen.

   Die Ziffer steht groß und in der Markenfarbe in einer eigenen Spalte, die
   Haarlinie über jedem Schritt zieht die Folge zu einer Liste zusammen.
   -------------------------------------------------------------------------- */

.schritte {
  padding-block: var(--abstand-24);
  background: var(--bg);
}

.schritte__inner {
  display: grid;
  gap: var(--abstand-12);
}

.schritte__kopf h2 {
  font-size: var(--schrift-h1);
}

.schritte__kopf p {
  max-width: var(--lesebreite);
  margin-block-start: var(--abstand-5);
  color: var(--text-sekundaer);
  line-height: var(--zeilenhoehe-text);
}

.schritte__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.schritt {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--abstand-8);
  padding-block: var(--abstand-8);
  border-block-start: 1px solid var(--linie);
}

/* Der erste Strich ist der Anfang der Folge und trägt deshalb die
   Markenfarbe — dieselbe Auszeichnung wie am Kopf der Kennwerttafel. */
.schritt:first-child {
  border-block-start: 2px solid var(--marke);
}

.schritt__zahl {
  color: var(--marke);
  font-family: var(--font-titel);
  font-size: var(--schrift-h1);
  font-weight: var(--gewicht-titel-stark);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: var(--titel-laufweite);
  line-height: 1;
}

.schritt__titel {
  font-size: var(--schrift-h3);
}

.schritt__text {
  max-width: var(--lesebreite);
  margin-block-start: var(--abstand-3);
  color: var(--text-sekundaer);
  line-height: var(--zeilenhoehe-text);
}

/* --------------------------------------------------------------------------
   Weiter im Leistungsbereich
   Am Fuß jeder Leistungsseite stehen die vier anderen. Die Form nimmt das
   Band der Fertigungsbereiche von der Startseite auf, damit beide als
   dieselbe Sache gelesen werden, verzichtet aber auf die Zeichen: hier
   führen die Felder irgendwohin, und der Pfeil ist die Auskunft, auf die es
   ankommt.
   -------------------------------------------------------------------------- */

.weiter {
  border-block-start: 1px solid var(--linie);
  background: var(--bg-gedaempft);
}

.weiter__inner {
  padding-block: var(--abstand-16);
}

.weiter__titel {
  font-size: var(--schrift-h3);
}

.weiter__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block-start: var(--abstand-10);
  padding: 0;
  list-style: none;
}

.weiter__punkt + .weiter__punkt {
  border-inline-start: 1px solid var(--linie);
}

.weiter__punkt:first-child .weiter__link {
  padding-inline-start: 0;
}

.weiter__link {
  display: grid;
  align-content: start;
  gap: var(--abstand-2);
  height: 100%;
  padding: var(--abstand-2) var(--abstand-8);
  color: var(--text);
  text-decoration: none;
}

.weiter__name {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  color: var(--marke-text);
  font-family: var(--font-titel);
  font-size: var(--schrift-h4);
  font-weight: var(--gewicht-titel);
  letter-spacing: var(--titel-laufweite);
}

.weiter__link .icon {
  transition: transform var(--dauer-schnell) var(--kurve);
}

.weiter__link:hover .icon {
  transform: translate(2px, -2px);
}

.weiter__link:hover .weiter__name {
  color: var(--marke-hover);
}

.weiter__text {
  color: var(--text-gedaempft);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

/* --------------------------------------------------------------------------
   Schmale Schirme
   -------------------------------------------------------------------------- */

@media (max-width: 64rem) {
  .weiter__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--abstand-8) 0;
  }

  /* Bei zwei Spalten steht der Strich nur noch zwischen den Paaren, nicht
     mehr vor jedem zweiten Feld der ersten Zeile. */
  .weiter__punkt + .weiter__punkt {
    border-inline-start: 0;
  }

  .weiter__punkt:nth-child(even) {
    border-inline-start: 1px solid var(--linie);
  }

  .weiter__punkt:nth-child(odd) .weiter__link {
    padding-inline-start: 0;
  }
}

@media (max-width: 52rem) {
  .teileliste__liste {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .teileliste,
  .schritte {
    padding-block: var(--abstand-16);
  }

  .schritt {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--abstand-5);
  }

  .schritt__zahl {
    font-size: var(--schrift-h2);
  }

  .weiter__liste {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-6);
  }

  .weiter__punkt:nth-child(even) {
    border-inline-start: 0;
  }

  .weiter__link {
    padding-inline: 0;
  }
}

/* ==========================================================================
   Leistungsseite CNC-Drehen
   Die Seite lag zuerst als Fließtext neben einer mitlaufenden Kennwerttafel.
   Das trug, solange es keine Aufnahmen gab. Mit drei Studiofotos echter
   Drehteile stimmt es nicht mehr: die Tafel nahm ein Viertel der Breite ein,
   und alle Abschnitte darunter standen auf einem anderen Satzspiegel als
   Hero und Anfragestreifen.

   Der Aufbau ist deshalb ein anderer. Es gibt keine Spalte mehr, alle
   Abschnitte laufen im selben Rahmen wie Hero und Fußbereich, und keiner der
   Abschnitte begrenzt seinen Text über eine max-width. Die Zeilenlänge kommt
   überall aus der Spalte, in der der Text steht — das ist der Unterschied
   zwischen einem Satzspiegel und einem abgeschnittenen Absatz.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Abschnittskopf
   Überschrift links, der erklärende Satz rechts daneben in zwei Spalten. So
   trägt der Kopf die volle Breite, ohne dass rechts eine leere Hälfte stehen
   bleibt und ohne dass eine Breitenangabe den Text mitten im Abschnitt
   abschneidet. Zwei Textspalten halten die Zeile dabei von sich aus kurz.
   -------------------------------------------------------------------------- */

.vitrine__kopf,
.teileliste__kopf,
.einfuehrung__kopf {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--abstand-6) var(--abstand-12);
  align-items: start;
}

.vitrine__kopf h2,
.teileliste__kopf h2,
.einfuehrung__kopf h2 {
  font-size: var(--schrift-h1);
}

/* Zwei Spalten, aber erst ab 22 rem je Spalte. Der Wert entscheidet, wo der
   Satz umbricht und wo nicht: im Rahmen dieser Seite (90 rem) reicht die
   rechte Zelle für zwei Spalten, im schmaleren Rahmen der übrigen
   Leistungsseiten nicht, und dort bleibt der Absatz einspaltig, statt einen
   kurzen Satz auf zwei mal zwei Zeilen zu zerlegen. */
.vitrine__einleitung,
.teileliste__kopf p,
.einfuehrung__text {
  columns: 2 22rem;
  column-gap: var(--abstand-10);
  line-height: var(--zeilenhoehe-text);
}

.vitrine__einleitung > * + *,
.einfuehrung__text > * + * {
  margin-block-start: var(--abstand-5);
}

/* --- Blocksatz, und nur zusammen mit der Trennung -------------------------
   Zwei Spalten nebeneinander lesen sich als ein Block, solange beide Kanten
   stehen. Bei Flattersatz franst die Innenkante der linken Spalte gegen die
   Außenkante der rechten aus, und der Zwischenraum wirkt ungleichmäßig,
   obwohl er es nicht ist.

   Blocksatz allein wäre hier aber schlechter als Flattersatz. Bei rund 45
   Zeichen je Zeile und deutschen Komposita muss der Satz die Wortabstände so
   weit aufziehen, dass sich senkrechte Lücken durch den Absatz bilden.
   Deshalb steht die automatische Trennung daneben und nicht als Zutat.
   Sie greift, weil das Dokument lang="de" trägt.

   hyphenate-limit-chars hält die Trennung von Kurzwörtern und Zweibuchstaben-
   resten fern: erst ab sieben Zeichen wird getrennt, und links wie rechts
   müssen mindestens drei Zeichen stehen bleiben.                          */
.vitrine__einleitung,
.teileliste__kopf p,
.einfuehrung__text {
  hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
  text-align: justify;
  text-align-last: start;
}

/* --- Kein Hurenkind an der Spaltenkante ----------------------------------
   Die Einleitung besteht aus zwei Absätzen und läuft in zwei Spalten. Ohne
   Regel entscheidet der Umbruch allein die Höhe, und dabei rutschte die
   letzte Zeile des ersten Absatzes über die Kante nach oben in die zweite
   Spalte, oft mit einem einzigen Wort darauf.

   break-inside: avoid nimmt dem Umbruch die Stelle, an der er das tun kann:
   ein Absatz bleibt ganz, zwei Absätze ergeben zwei Spalten. Damit die
   Spalten dabei gleich hoch stehen, sind die beiden Absätze im Inhalt auf
   etwa gleiche Länge gebracht — das ist Redaktion und keine Technik, aber
   ohne sie stünde die eine Spalte zwei Zeilen tiefer als die andere.

   orphans und widows bleiben als Rückfall stehen. break-inside ist ein
   Wunsch und keine Garantie: passt ein Absatz einmal nicht in eine Spalte,
   bricht der Browser ihn trotzdem, und dann sollen wenigstens nie weniger
   als zwei Zeilen für sich stehen.                                        */
.vitrine__einleitung p,
.einfuehrung__text p {
  break-inside: avoid;
  orphans: 2;
  widows: 2;
}

/* Der Satz im Kopf der Teileliste ist ein einzelner Absatz und MUSS über die
   Spaltenkante brechen, sonst bliebe die zweite Spalte leer. Hier hilft kein
   break-inside, sondern nur die Untergrenze von zwei Zeilen je Seite der
   Kante. */
.teileliste__kopf p {
  orphans: 2;
  widows: 2;
}

/* --------------------------------------------------------------------------
   Kennwertband
   Dieselben Angaben, die vorher in der Spalte standen, quer über die Breite.

   Die Felder sind nicht gleich breit, sondern messen sich an ihrem Inhalt.
   Bei fünf gleichen Spalten stand neben „Seit 1999“ eine halbe Spalte Luft,
   während „Stahl · Edelstahl · Aluminium · Messing · Kunststoff“ auf drei
   Zeilen umbrach, und weil das letzte Feld sein Polster nach außen verliert,
   endete der Text vor der rechten Rahmenkante — das Band sah aus, als wäre
   es nach links gerutscht. Mit flex verteilt sich der Rest der Breite auf
   alle Felder und das Band schließt an beiden Kanten mit dem Rahmen ab.
   -------------------------------------------------------------------------- */

.kennwerte {
  border-block-end: 1px solid var(--linie);
  background: var(--bg);
}

.kennwerte__liste {
  display: flex;
  margin: 0;
  padding-block: var(--abstand-10);
}

.kennwerte__feld {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: var(--abstand-2);
  min-width: 0;
  padding-inline: var(--abstand-8);
}

/* Striche stehen zwischen den Feldern, nicht an den Außenkanten — dieselbe
   Regel wie im Band der Fertigungsbereiche auf der Startseite. */
.kennwerte__feld + .kennwerte__feld {
  border-inline-start: 1px solid var(--linie);
}

.kennwerte__feld:first-child {
  padding-inline-start: 0;
}

.kennwerte__feld:last-child {
  padding-inline-end: 0;
}

.kennwerte dt {
  color: var(--text-gedaempft);
  font-family: var(--font-mono);
  font-size: var(--schrift-mini);
  letter-spacing: 0.08em;
  line-height: var(--zeilenhoehe-mini);
  text-transform: uppercase;
}

.kennwerte dd {
  margin: 0;
  color: var(--text);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

/* Die Jahreszahl ist der eine Wert, den sich ein Interessent merkt, und darf
   deshalb größer stehen als die übrigen. */
.kennwerte__jahr {
  font-family: var(--font-titel);
  font-size: var(--schrift-h3);
  font-weight: var(--gewicht-titel-stark);
  letter-spacing: var(--titel-laufweite);
  line-height: var(--zeilenhoehe-eng);
}

/* --------------------------------------------------------------------------
   Vitrine
   Der eine auffällige Abschnitt der Seite, und er kommt nicht aus einer
   Gestaltungsidee, sondern aus dem Bildmaterial. Die drei Aufnahmen sind im
   Studio auf einem kühlen hellen Grau entstanden. Trägt der Abschnitt genau
   dieses Grau, verschwindet die Kante der Bilddatei und das Drehteil steht
   auf der Seite, statt in einem Kasten zu liegen.

   Daraus folgt der Rest von selbst. Kein Rahmen, keine Ecke, kein Schatten
   unter dem Bild — die Aufnahme bringt ihren eigenen mit, und ein zweiter
   darunter verriete den Kasten, den es nicht geben soll.
   -------------------------------------------------------------------------- */

.vitrine {
  padding-block: var(--abstand-24);
  background: var(--vitrine);
  color: var(--vitrine-text);
}

.vitrine__inner {
  display: grid;
  gap: var(--abstand-16);
}

.vitrine__einleitung p {
  color: var(--vitrine-text-sekundaer);
}

.einfuehrung__text p {
  color: var(--text-sekundaer);
}

.vitrine__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--abstand-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vitrine__bild {
  margin: 0;
}

/* Kein object-fit und kein festes Verhältnis: die drei Aufnahmen haben
   dasselbe Format, und ein Zuschnitt würde nur Grund abschneiden, den wir
   hier gerade brauchen.

   Die weiche Kante ist der Teil, der die Sache erst trägt. Nachgemessen sind
   die drei Studiogründe nicht gleichmäßig, sondern zu den Rändern hin
   abgedunkelt, und sie unterscheiden sich untereinander um wenige Stufen
   (#DEE2E5, #DEE1E6, #E4E7EC). Eine einzelne Fläche kann darunter nie alle
   drei treffen — auf zwei von drei Aufnahmen blieb das Rechteck der Bilddatei
   sichtbar. Zwei gekreuzte Masken blenden stattdessen den äußeren Rand aus,
   und damit verschwindet die Kante, statt gegen sie anzurechnen.

   8 % ist gemessen, nicht geschätzt: das Werkstück selbst liegt in allen drei
   Aufnahmen mindestens 10,9 % von jeder Kante entfernt, bei 6 % war die Kante
   noch zu sehen. Die Zwischenstufen bilden eine S-Kurve nach, weil eine
   gerade Rampe an ihrem oberen Ende als Streifen erkennbar bleibt.

   Fehlt einem Browser die Maskenunterstützung, steht die Aufnahme wie in
   jedem anderen Bildabschnitt der Seite mit sichtbarer Kante — kein Verlust,
   nur nicht der Gewinn.                                                  */
.vitrine__bild img {
  --feder: 8%;
  --kante:
    transparent 0,
    rgb(0 0 0 / 0.30) 3%,
    rgb(0 0 0 / 0.84) 6%,
    #000 var(--feder),
    #000 calc(100% - var(--feder)),
    rgb(0 0 0 / 0.84) 94%,
    rgb(0 0 0 / 0.30) 97%,
    transparent 100%;

  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(to right, var(--kante)),
    linear-gradient(to bottom, var(--kante));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, var(--kante)),
    linear-gradient(to bottom, var(--kante));
  mask-composite: intersect;
}

.vitrine__name {
  margin-block-start: var(--abstand-2);
  color: var(--vitrine-text);
  font-family: var(--font-titel);
  font-size: var(--schrift-h4);
  font-weight: var(--gewicht-titel);
  letter-spacing: var(--titel-laufweite);
  line-height: var(--zeilenhoehe-eng);
}

.vitrine__text {
  margin-block-start: var(--abstand-2);
  color: var(--vitrine-text-gedaempft);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

/* --------------------------------------------------------------------------
   Trenner
   Eine Aufnahme über die volle Breite, darauf der eine Satz, der auf dieser
   Seite mehr wert ist als jeder andere. Das Motiv trägt die Aussage selbst,
   weil links im Bild fast nichts steht — der Verlauf muss dort nur noch
   nachhelfen, statt das halbe Foto zuzudecken.

   Wie weit der Text läuft, entscheidet die Spalte und nicht eine
   Breitenangabe: die linke Hälfte des Rasters gehört der Schrift, die rechte
   bleibt dem Bild, und der Verlauf klingt genau an der Grenze zwischen beiden
   aus.
   -------------------------------------------------------------------------- */

.trenner {
  position: relative;
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(22rem, 34vw, 30rem);
  background: var(--marke-tief);
  color: var(--text-auf-tief);
}

.trenner__bildfeld {
  position: absolute;
  z-index: -2;
  inset: 0;
}

/* Der Ausschnitt hält die rechte Seite im Bild: dort liegen die Lichter,
   links bleibt die Fläche, auf der der Text steht. */
.trenner__bildfeld img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

.trenner::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    90deg,
    oklch(0.16 0.020 var(--blau-hue) / 0.90) 0%,
    oklch(0.16 0.020 var(--blau-hue) / 0.78) 40%,
    oklch(0.16 0.020 var(--blau-hue) / 0.22) 72%,
    transparent 100%
  );
}

.trenner__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: var(--abstand-20);
}

.trenner h2 {
  color: var(--text-auf-tief);
  font-size: var(--schrift-display);
}

.trenner p {
  margin-block-start: var(--abstand-6);
  color: var(--text-auf-tief);
  font-size: var(--schrift-gross);
  line-height: var(--zeilenhoehe-text);
}

.trenner .knopf {
  margin-block-start: var(--abstand-8);
}

/* --------------------------------------------------------------------------
   Textzeilen
   Die drei Auskünfte, die ein Interessent braucht, bevor er anfragt. Sie
   standen zuerst als Zeilen untereinander, Überschrift links, Absatz rechts.
   Das las sich wie ein Formular und ließ rechts vom Text eine leere Spalte
   stehen, weil der Absatz auf Lesebreite begrenzt war.

   Jetzt stehen sie nebeneinander. Drei Spalten sind zusammen so breit wie
   der Rahmen und einzeln so schmal, dass die Zeile von sich aus kurz bleibt.
   Der Strich in der Markenfarbe über jeder Spalte gibt dem Abschnitt die
   Ordnung, die vorher die Trennlinien zwischen den Zeilen geben mussten.
   -------------------------------------------------------------------------- */

.textzeilen {
  padding-block: var(--abstand-24);
  background: var(--bg);
}

.textzeilen__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--abstand-12);
}

.textzeilen__spalte {
  padding-block-start: var(--abstand-6);
  border-block-start: 2px solid var(--marke);
}

.textzeilen__titel {
  font-size: var(--schrift-h3);
  text-wrap: balance;
}

.textzeilen__text {
  margin-block-start: var(--abstand-5);
}

.textzeilen__text > * + * {
  margin-block-start: var(--abstand-4);
}

.textzeilen__text p {
  color: var(--text-sekundaer);
  line-height: var(--zeilenhoehe-text);
}

/* --------------------------------------------------------------------------
   Schmale Schirme
   -------------------------------------------------------------------------- */

@media (max-width: 76rem) {
  /* Fünf Felder in einer Zeile brauchen mehr Breite, als hier übrig ist. Als
     Raster stehen sie in zwei Zeilen; der Nachbarselektor für den Strich
     stimmt dann nicht mehr und wird für die Zeilenanfänge zurückgenommen. */
  .kennwerte__liste {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--abstand-8);
  }

  .kennwerte__feld:nth-child(3n + 1) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .kennwerte__feld:nth-child(3n) {
    padding-inline-end: 0;
  }

  .textzeilen__liste {
    gap: var(--abstand-8);
  }
}

@media (max-width: 64rem) {
  .vitrine__kopf,
  .teileliste__kopf,
  .einfuehrung__kopf {
    grid-template-columns: minmax(0, 1fr);
  }

  .vitrine__einleitung,
  .teileliste__kopf p,
  .einfuehrung__text {
    columns: 2 20rem;
  }

  .textzeilen__liste {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-10);
  }

  /* Nebeneinander wäre jede Spalte zu schmal; untereinander darf der Text
     dann wieder in zwei Spalten laufen. Auch hier bleibt jeder Absatz ganz,
     damit an der Spaltenkante keine einzelne Zeile hängen bleibt. */
  .textzeilen__text {
    columns: 2 18rem;
    column-gap: var(--abstand-10);
  }

  .textzeilen__text p {
    break-inside: avoid;
    orphans: 2;
    widows: 2;
  }

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

  /* Der waagerechte Verlauf setzt voraus, dass rechts vom Text noch Bild
     übrig ist. Ist die Fläche schmal, deckt ein gleichmäßiger Schleier das
     ganze Motiv ab — sonst steht die Überschrift auf den Lichtern. */
  .trenner::after {
    background: oklch(0.16 0.020 var(--blau-hue) / 0.80);
  }
}

@media (max-width: 52rem) {
  .vitrine__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vitrine__stueck:last-child {
    display: none;
  }

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

@media (max-width: 40rem) {
  .kennwerte__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--abstand-6);
  }

  .kennwerte__feld:nth-child(3n + 1) {
    padding-inline-start: var(--abstand-6);
    border-inline-start: 1px solid var(--linie);
  }

  .kennwerte__feld:nth-child(odd) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .kennwerte__feld:nth-child(even) {
    padding-inline-end: 0;
  }

  .vitrine,
  .textzeilen {
    padding-block: var(--abstand-16);
  }

  /* Eine Spalte von rund 20 rem trägt keinen Blocksatz mehr: bei etwa 40
     Zeichen je Zeile reißt er auch mit Trennung Lücken. Flattersatz ist auf
     dieser Breite die ruhigere Fassung. */
  .vitrine__einleitung,
  .teileliste__kopf p,
  .einfuehrung__text,
  .textzeilen__text {
    columns: auto;
    text-align: start;
  }

  .vitrine__liste {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-12);
  }

  /* Auf einer Spalte ist Platz für alle drei Aufnahmen. */
  .vitrine__stueck:last-child {
    display: block;
  }

  /* Name über dem Satz statt daneben: 10 rem sind hier ein Drittel der
     Fläche, und der Satz daneben stünde auf vier Wörtern pro Zeile. */
  .teileliste__punkt {
    grid-template-columns: minmax(0, 1fr);
  }

  .trenner {
    min-height: 0;
  }

  .trenner__inner {
    padding-block: var(--abstand-16);
  }
}

/* ==========================================================================
   Maschinenpark
   Fünfzehn Aufnahmen und sonst fast nichts. Die Seite beantwortet eine
   einzige Frage, nämlich ob der Betrieb die Bearbeitung eines Teils selbst
   ausführen kann, und diese Frage beantworten die Maschinen besser als jeder
   Satz über sie.

   Deshalb gibt es keinen Abschnittskopf über jeder Gruppe, sondern eine
   eigene Spalte daneben. Das Verfahren steht links auf derselben Höhe und in
   etwa derselben Breite wie ein Maschinenblatt, die Maschinen laufen rechts
   davon in ihrem eigenen Raster. Die Gruppe liest sich damit als eine
   Überschrift mit ihren Maschinen und nicht als Kasten über einem Raster.

   Anfangs lagen Verfahren und Maschinen in einem einzigen Raster, die
   Überschrift als dessen erste Zelle. Bei zwei Maschinen ging das auf. Bei
   drei und vier brach die Reihe um, und ein Maschinenblatt stand unter dem
   Text der Überschrift, wo die Spalte eigentlich zu Ende ist. Zwei
   ineinandergesetzte Raster halten die beiden Bereiche auseinander, egal wie
   viele Maschinen eine Gruppe hat.

   Die Bilder sind nicht anklickbar und tragen deshalb auch keine Fläche,
   keinen Schatten und keine Bewegung beim Überfahren. Es gibt nichts, wohin
   ein Klick führen könnte, und eine Karte, die auf eine Berührung antwortet,
   ohne etwas zu tun, ist ein Versprechen ohne Deckung.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Verfahrensleiste
   Sechs Sprungziele quer unter dem Hero, an derselben Stelle, an der die
   Leistungsseiten ihr Kennwertband tragen. Sie nennt die Verfahren und die
   Zahl der Maschinen dahinter, damit der Umfang der Seite feststeht, bevor
   man sie durchscrollt.

   Die Liste greift um ein Rahmenpolster über den Rahmen hinaus. Dadurch
   steht die Beschriftung des ersten Feldes genau auf der Fluchtlinie des
   Heros darüber, während die Fläche, die beim Überfahren aufscheint, das
   Feld ganz ausfüllt statt an der Schrift zu enden.
   -------------------------------------------------------------------------- */

.register {
  border-block-end: 1px solid var(--linie);
  background: var(--bg-gedaempft);
}

.register__liste {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-inline: calc(-1 * var(--abstand-6));
  padding: 0;
  list-style: none;
}

.register__punkt {
  min-width: 0;
}

/* Striche zwischen den Feldern, nicht an den Außenkanten. */
.register__punkt + .register__punkt {
  border-inline-start: 1px solid var(--linie);
}

.register__link {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-2);
  height: 100%;
  padding: var(--abstand-6);
  color: var(--text);
  text-decoration: none;
  transition:
    background-color var(--dauer-schnell) var(--kurve),
    color var(--dauer-schnell) var(--kurve);
}

.register__link:hover {
  background: var(--flaeche-akzent);
  color: var(--marke-text);
}

.register__name {
  font-family: var(--font-titel);
  font-size: var(--schrift-h4);
  font-weight: var(--gewicht-titel);
  letter-spacing: var(--titel-laufweite);
  line-height: var(--zeilenhoehe-eng);
}

/* Die Zahl ist eine Anzahl und keine Auszeichnung. Sie steht in der
   Mono-Schrift mit Tabellenziffern, damit die sechs Werte untereinander
   dieselbe Breite haben, und bleibt gedämpft, weil sie den Namen des
   Verfahrens begleitet und ihm nicht die Aufmerksamkeit nimmt. */
.register__zahl {
  color: var(--text-gedaempft);
  font-family: var(--font-mono);
  font-size: var(--schrift-mini);
  font-variant-numeric: tabular-nums;
  line-height: var(--zeilenhoehe-mini);
}

/* --------------------------------------------------------------------------
   Einführung
   Der zweispaltige Abschnittskopf, den zuerst die Drehseite bekommen hat:
   Überschrift links, zwei Absätze rechts daneben im Blocksatz. Er trägt
   inzwischen den Einstieg auf vier Seiten und heißt deshalb nach seiner
   Aufgabe und nicht nach der Seite, auf der er zuerst stand. Die Satzregeln
   dafür stehen weiter oben bei der Vitrine.
   -------------------------------------------------------------------------- */

.einfuehrung {
  padding-block: var(--abstand-20);
  background: var(--bg);
}

/* --------------------------------------------------------------------------
   Verfahrensgruppe
   Ein Haarstrich trennt die Gruppen, keine wechselnde Fläche. Die Aufnahmen
   bringen genug Farbe mit; ein zusätzlicher Wechsel zwischen Weiß und Grau
   würde daraus ein Streifenmuster machen.
   -------------------------------------------------------------------------- */

.verfahren {
  padding-block: var(--abstand-20);
  border-block-start: 1px solid var(--linie);
  background: var(--bg);
}

/* Ein Drittel für das Verfahren, zwei Drittel für seine Maschinen. Damit ist
   die Textspalte links etwa so breit wie ein einzelnes Maschinenblatt rechts,
   und die Fluchtlinien der Seite bleiben über alle sechs Gruppen dieselben,
   ob eine Gruppe nun zwei oder vier Maschinen hat. */
.verfahren__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--abstand-10);
  align-items: start;
}

.verfahren__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abstand-16) var(--abstand-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.verfahren__kopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-inline-end: var(--abstand-6);
}

.verfahren__titel {
  font-size: var(--schrift-h1);
  text-wrap: balance;
}

.verfahren__text {
  margin-block-start: var(--abstand-5);
  color: var(--text-sekundaer);
  line-height: var(--zeilenhoehe-text);
}

/* --------------------------------------------------------------------------
   Maschinenblatt
   Aufnahme, Gattung, Typenbezeichnung und ein Satz darüber, was die Maschine
   tut.

   Die Typenzeile steht nur dort, wo Hersteller und Typ am Gerät sicher
   ablesbar sind. Bei zehn der fünfzehn Maschinen fehlt sie deshalb, und
   dieses Fehlen ist die Angabe: eine erfundene Bezeichnung wäre auf einer
   Seite, die Fertigungsmöglichkeiten belegen soll, teurer als eine Lücke.
   -------------------------------------------------------------------------- */

.maschine {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.maschine__bild {
  margin: 0 0 var(--abstand-5);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  background: var(--bg-gedaempft);
}

.maschine__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Zwei der Aufnahmen sind hochkant entstanden und stehen zwischen liegenden.
   Im liegenden Ausschnitt liegt ihr Motiv nicht in der Mitte, sondern etwas
   darüber, weil dort Werkzeug, Tisch und Bedienfeld zusammenkommen. */
.maschine__bild--hoch img {
  object-position: center 44%;
}

/* Die Bohrgruppe kippt ins Hochformat, weil beide Maschinen hoch gebaut und
   beide Aufnahmen hochkant entstanden sind. Ein liegender Ausschnitt schnitte
   dort entweder das Typenschild oben oder den Aufspanntisch unten weg, und
   genau diese beiden Stellen sind der Grund, warum die Aufnahme auf der Seite
   steht. Die übrigen Gruppen bleiben liegend; ein Wechsel innerhalb einer
   Zeile wäre kein Rhythmus, sondern eine gebrochene Kante. */
.verfahren__raster--hoch .maschine__bild {
  aspect-ratio: 3 / 4;
}

.maschine__name {
  color: var(--text);
  font-family: var(--font-titel);
  font-size: var(--schrift-h3);
  font-weight: var(--gewicht-titel);
  letter-spacing: var(--titel-laufweite);
  line-height: var(--zeilenhoehe-eng);
}

.maschine__typ {
  margin-block-start: var(--abstand-2);
  color: var(--text-gedaempft);
  font-family: var(--font-mono);
  font-size: var(--schrift-mini);
  line-height: var(--zeilenhoehe-mini);
}

.maschine__text {
  margin-block-start: var(--abstand-3);
  color: var(--text-sekundaer);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

/* --------------------------------------------------------------------------
   Schmale Schirme
   -------------------------------------------------------------------------- */

@media (max-width: 76rem) {
  /* Sechs Felder nebeneinander lassen für „Stanzen und Strahlen“ keine zwei
     Wörter je Zeile übrig. Als zwei Reihen zu dritt stimmt die Breite wieder;
     der Nachbarselektor für den Strich wird an den Reihenanfängen
     zurückgenommen. */
  .register__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .register__punkt:nth-child(3n + 1) {
    border-inline-start: 0;
  }

  .register__punkt:nth-child(n + 4) {
    border-block-start: 1px solid var(--linie);
  }
}

@media (max-width: 64rem) {
  /* Nebeneinander bliebe für die Maschinen ein knappes Drittel der Breite
     übrig, und darauf ist von einer Maschine nichts mehr zu erkennen. Das
     Verfahren steht deshalb über seinen Maschinen statt neben ihnen. */
  .verfahren__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-10);
  }

  .verfahren__kopf {
    padding-inline-end: 0;
  }

  .verfahren__text {
    max-width: var(--lesebreite);
  }

  .verfahren__liste {
    gap: var(--abstand-12) var(--abstand-8);
  }
}

@media (max-width: 52rem) {
  .register__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .register__punkt:nth-child(3n + 1) {
    border-inline-start: 1px solid var(--linie);
  }

  .register__punkt:nth-child(odd) {
    border-inline-start: 0;
  }

  .register__punkt:nth-child(n + 3) {
    border-block-start: 1px solid var(--linie);
  }

  .register__link {
    padding: var(--abstand-5);
  }
}

@media (max-width: 40rem) {
  .einfuehrung,
  .verfahren {
    padding-block: var(--abstand-16);
  }

  .verfahren__liste {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-10);
  }
}

/* ==========================================================================
   Leistungsseiten, zweiter Durchgang
   Fräsen, Flachschleifen, Nachfertigung und Fertigungsablauf hatten bis
   hierher denselben Aufbau: links eine Datenspalte, rechts Fließtext, darunter
   ein Bildstreifen mit drei grauen Platzhaltern, dann eine Teileliste, dann
   der Anfragestreifen. Vier Seiten mit demselben Skelett lesen sich als eine
   Seite, die viermal ausgedruckt wurde.

   Die Seiten unterscheiden sich jetzt an der Stelle, an der sie sich auch
   inhaltlich unterscheiden, nämlich am tragenden Abschnitt in der Mitte.
   Fräsen zeigt die beiden Maschinen, Flachschleifen eine Tafel mit dem, was
   das Verfahren am Teil bewirkt, Nachfertigung drei nachgebaute Teile und die
   Gegenüberstellung von machbar und nicht machbar, der Fertigungsablauf seine
   sechs Schritte gleich unter dem Hero. Alles darum herum bleibt gleich,
   weil eine Website eine Handschrift haben soll und keine vier.

   Außerdem laufen alle vier jetzt im vollen Rahmen von 90 rem statt in der
   schmalen Fassung. Vorher stand der Hero auf einem anderen Satzspiegel als
   alles darunter, und genau das war als gebrochenes Raster aufgefallen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Merkmalstafel
   Der tragende Abschnitt auf der Flachschleifseite. Die Seite beantwortet
   eine einzige Frage, nämlich ob ein Teil diesen Arbeitsgang braucht, und
   die Antwort steht in vier Zeilen mit jeweils einem Merkmal links und dem,
   was es am eingebauten Teil bewirkt, rechts.

   Eine Tabelle ist hier nicht die bequeme Lösung, sondern die richtige. Der
   Leser vergleicht vier gleichartige Fälle, und genau dafür ist eine Tabelle
   gemacht. Sie ist zugleich das, was diese Seite von ihren drei Geschwistern
   unterscheidet, denn dort tragen Fotos und Listen den mittleren Abschnitt.
   -------------------------------------------------------------------------- */

.merkmale {
  padding-block: var(--abstand-20);
  border-block: 1px solid var(--linie);
  background: var(--bg-gedaempft);
}

.merkmale__inner {
  display: grid;
  gap: var(--abstand-10);
}

.merkmale__kopf h2 {
  font-size: var(--schrift-h1);
}

.merkmale__kopf p {
  max-width: var(--lesebreite);
  margin-block-start: var(--abstand-4);
  color: var(--text-sekundaer);
  line-height: var(--zeilenhoehe-text);
}

.merkmale__tafel {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Ein Drittel für das Merkmal, zwei Drittel für seine Wirkung. Gleich breite
   Spalten ließen links die Hälfte leer stehen, weil dort nur ein Wort steht,
   und drängten rechts den Satz auf vier Zeilen. */
.merkmale__tafel col:first-child {
  width: 30%;
}

.merkmale__tafel :is(th, td) {
  padding: var(--abstand-5) var(--abstand-6) var(--abstand-5) 0;
  border-block-end: 1px solid var(--linie);
  text-align: start;
  vertical-align: baseline;
}

.merkmale__tafel tbody tr:last-child :is(th, td) {
  border-block-end: 0;
}

/* Das Merkmal ist eine Überschrift für seine Zeile und wird deshalb auch wie
   eine gesetzt, in der schmalen Schrift und nicht bloß fett. */
.merkmale__tafel tbody th {
  color: var(--text);
  font-family: var(--font-titel);
  font-size: var(--schrift-h4);
  font-weight: var(--gewicht-titel);
  letter-spacing: var(--titel-laufweite);
  line-height: var(--zeilenhoehe-eng);
}

.merkmale__tafel td {
  color: var(--text-sekundaer);
  line-height: var(--zeilenhoehe-text);
}

/* --------------------------------------------------------------------------
   Zwei Textspalten, eine davon abgesetzt
   Auf der Nachfertigungsseite steht links, was wir nachbauen, und rechts,
   was wir nicht nachbauen können. Beide Spalten sind gleich gebaut, nur der
   Strich über der rechten ist grau statt blau. Das genügt als Unterschied,
   und es ist ehrlicher als ein rotes Kreuz, denn eine Absage ist keine
   Fehlermeldung, sondern eine Auskunft.
   -------------------------------------------------------------------------- */

/* Ein Abschnittskopf über den beiden Spalten. Der Abstand gehört in den
   Behälter und nicht als Rand an die Überschrift, sonst müsste ihn jede
   Seite einzeln setzen. */
.textzeilen__inner {
  display: grid;
  gap: var(--abstand-10);
}

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

/* Der Abschnittskopf steht auf der Startseite mittig über einer Übersicht.
   Über zwei Textspalten, die selbst linksbündig laufen, wäre das ein Bruch
   in der Fluchtlinie. */
.abschnitt__kopf--links {
  text-align: start;
}

.abschnitt__kopf--links h2 {
  font-size: var(--schrift-h1);
}

.textzeilen__spalte--aus {
  border-block-start-color: var(--linie-stark);
}

/* Die Aufzählung in einer solchen Spalte ist eine Liste von Teilen und keine
   Reihenfolge. Der Strich davor hält sie vom Fließtext auseinander, ohne die
   Aufzählungszeichen des Browsers zu übernehmen. */
.textzeilen__aufzaehlung {
  display: grid;
  gap: var(--abstand-3);
  margin-block-start: var(--abstand-5);
  padding: 0;
  list-style: none;
}

.textzeilen__aufzaehlung li {
  padding-inline-start: var(--abstand-5);
  border-inline-start: 2px solid var(--linie);
  color: var(--text-sekundaer);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

.textzeilen__spalte--aus .textzeilen__aufzaehlung li {
  color: var(--text-gedaempft);
}

/* --------------------------------------------------------------------------
   Produktraster zu dritt
   Die Startseite zeigt vier eigene Erzeugnisse. Auf der Nachfertigungsseite
   stehen drei davon in anderer Rolle, nämlich als Beleg dafür, dass ein
   Nachbau nach Muster tatsächlich funktioniert. Die Karte bleibt dieselbe,
   nur die Spaltenzahl ändert sich.
   -------------------------------------------------------------------------- */

.produkte__liste--drei {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --------------------------------------------------------------------------
   Schmale Schirme
   Diese Regeln stehen am Dateiende und damit hinter den allgemeinen
   Umbrüchen weiter oben. Die Modifikatoren darüber würden deren Umbruch
   sonst wieder aufheben, deshalb wird er hier für sie wiederholt.
   -------------------------------------------------------------------------- */

@media (max-width: 68rem) {
  .produkte__liste--drei {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 64rem) {
  .textzeilen__liste--zwei {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 52rem) {
  .merkmale__tafel col:first-child {
    width: 38%;
  }

  .merkmale__tafel :is(th, td) {
    padding-inline-end: var(--abstand-4);
  }
}

@media (max-width: 40rem) {
  .merkmale {
    padding-block: var(--abstand-16);
  }

  /* Zwei Spalten von je gut 9 rem tragen keinen Satz mehr. Merkmal und
     Wirkung stehen deshalb untereinander, jede Zeile als eigener Block mit
     einer Trennlinie darunter. */
  .merkmale__tafel,
  .merkmale__tafel tbody,
  .merkmale__tafel tr,
  .merkmale__tafel :is(th, td) {
    display: block;
    width: auto;
  }

  .merkmale__tafel col:first-child {
    width: auto;
  }

  .merkmale__tafel tr {
    padding-block: var(--abstand-5);
    border-block-end: 1px solid var(--linie);
  }

  .merkmale__tafel tbody tr:last-child {
    border-block-end: 0;
  }

  .merkmale__tafel :is(th, td) {
    padding: 0;
    border-block-end: 0;
  }

  .merkmale__tafel td {
    margin-block-start: var(--abstand-2);
    font-size: var(--schrift-klein);
    line-height: var(--zeilenhoehe-klein);
  }

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

/* ==========================================================================
   Kontaktseite
   Bis hierher führte der Menüpunkt Kontakt auf den Anker der Fußzeile. Dort
   stehen Anschrift und Telefonnummer, aber keine Möglichkeit, eine Zeichnung
   loszuschicken. Die eigene Seite bringt beides zusammen.

   Die Seite hat bewusst keinen dunklen Anfragestreifen am Fuß, wie ihn jede
   Leistungsseite trägt. Ein Handlungsaufruf auf der Seite, die selbst der
   Handlungsaufruf ist, wäre eine Wiederholung. Aus demselben Grund ist sie
   kurz: Kontaktwege, Formular, weiterführende Verweise.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kontaktwege
   Drei Felder unter dem Hero, an derselben Stelle, an der die
   Leistungsseiten ihr Kennwertband tragen. Wer lieber anruft, findet die
   Nummer hier und muss nicht am Formular vorbeiscrollen. Telefon und E-Mail
   sind Verweise und schreiben sich beim Antippen selbst.
   -------------------------------------------------------------------------- */

.kontaktwege {
  border-block-end: 1px solid var(--linie);
  background: var(--bg-gedaempft);
}

.kontaktwege__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding-block: var(--abstand-10);
}

.kontaktwege__feld {
  display: grid;
  align-content: start;
  gap: var(--abstand-2);
  min-width: 0;
  padding-inline: var(--abstand-8);
}

/* Striche zwischen den Feldern, nicht an den Außenkanten — dieselbe Regel
   wie im Kennwertband. */
.kontaktwege__feld + .kontaktwege__feld {
  border-inline-start: 1px solid var(--linie);
}

.kontaktwege__feld:first-child {
  padding-inline-start: 0;
}

.kontaktwege__feld:last-child {
  padding-inline-end: 0;
}

.kontaktwege dt {
  color: var(--text-sekundaer);
  font-family: var(--font-mono);
  font-size: var(--schrift-mini);
  line-height: var(--zeilenhoehe-mini);
}

.kontaktwege dd {
  margin: 0;
  color: var(--text);
  font-family: var(--font-titel);
  font-size: var(--schrift-h3);
  font-weight: var(--gewicht-titel);
  letter-spacing: var(--titel-laufweite);
  line-height: var(--zeilenhoehe-eng);
}

.kontaktwege a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dauer-schnell) var(--kurve);
}

.kontaktwege a:hover {
  color: var(--marke-text);
}

/* Die Anschrift ist kein Verweis und darf deshalb auch nicht wie einer
   aussehen. Sie steht eine Stufe kleiner, weil sie zwei Zeilen braucht. */
.kontaktwege__anschrift {
  font-size: var(--schrift-h4);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Anfrageformular
   Links das Formular, rechts die Spalte mit dem, was uns eine Antwort
   erleichtert. Die Spalte ist keine Dekoration: die häufigste Ursache für
   eine Rückfrage ist eine fehlende Angabe, und sie steht dort, wo sie beim
   Ausfüllen im Blick bleibt.
   -------------------------------------------------------------------------- */

.anfrage {
  padding-block: var(--abstand-20);
  background: var(--bg);
}

.anfrage__inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--abstand-16);
  align-items: start;
}

.anfrage__kopf h2 {
  font-size: var(--schrift-h1);
}

.anfrage__kopf p {
  max-width: var(--lesebreite);
  margin-block-start: var(--abstand-4);
  color: var(--text-sekundaer);
  line-height: var(--zeilenhoehe-text);
}

.anfrage__formular {
  margin-block-start: var(--abstand-10);
}

/* --- Die Beistellspalte --------------------------------------------------- */

.anfrage__spalte {
  padding-block-start: var(--abstand-6);
  border-block-start: 2px solid var(--marke);
}

.anfrage__spalte h2 {
  font-size: var(--schrift-h3);
  text-wrap: balance;
}

.anfrage__punkte {
  display: grid;
  gap: var(--abstand-4);
  margin-block-start: var(--abstand-5);
  padding: 0;
  list-style: none;
}

.anfrage__punkte li {
  color: var(--text-sekundaer);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

.anfrage__punkte b {
  display: block;
  color: var(--text);
  font-family: var(--font-titel);
  font-size: var(--schrift-h4);
  font-weight: var(--gewicht-titel);
  letter-spacing: var(--titel-laufweite);
}

.anfrage__spalte .text-link {
  margin-block-start: var(--abstand-8);
}

/* --------------------------------------------------------------------------
   Felder
   Contact Form 7 setzt um jedes Bedienelement eine eigene Hülle und hängt
   die Fehlermeldung dahinter. Die Struktur der Felder steht deshalb im
   Formular-Template des Plugins und trägt dort diese Klassen; hier stehen
   nur die Regeln dazu.
   -------------------------------------------------------------------------- */

.formular__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abstand-6);
}

.formular__feld {
  display: grid;
  align-content: start;
  gap: var(--abstand-2);
  min-width: 0;
}

.formular__feld--voll {
  grid-column: 1 / -1;
}

.formular__label {
  color: var(--text);
  font-size: var(--schrift-klein);
  font-weight: 500;
  line-height: var(--zeilenhoehe-klein);
}

/* „optional“ steht als Wort an der Beschriftung und nicht als Sternchen an
   den Pflichtfeldern. Ein Stern muss erklärt werden, ein Wort nicht, und
   Vorleseprogramme sagen ihn als Satzzeichen an. */
.formular__zusatz {
  color: var(--text-gedaempft);
  font-family: var(--font-mono);
  font-size: var(--schrift-mini);
  font-weight: 400;
}

.formular__hinweis {
  margin: 0;
  color: var(--text-gedaempft);
  font-size: var(--schrift-mini);
  line-height: var(--zeilenhoehe-mini);
}

/* Die Hülle des Plugins soll die Breite durchreichen und sonst nichts. */
.wpcf7-form-control-wrap {
  display: block;
  min-width: 0;
}

.formular__eingabe,
.formular__auswahl {
  width: 100%;
  min-height: 3rem;
  padding: var(--abstand-3) var(--abstand-4);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-m);
  background: var(--flaeche);
  color: var(--text);
  font-family: inherit;
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
  transition: border-color var(--dauer-schnell) var(--kurve);
}

textarea.formular__eingabe {
  min-height: 12rem;
  resize: vertical;
}

.formular__eingabe::placeholder {
  color: var(--text-gedaempft);
}

.formular__eingabe:hover,
.formular__auswahl:hover {
  border-color: var(--marke);
}

/* Das Auswahlfeld bekommt sein Zeichen als Hintergrundbild, weil sich der
   Pfeil des Betriebssystems nicht einfärben lässt. Der Pfeil ist als
   data-URI eingebettet und braucht deshalb keinen zweiten Abruf. */
.formular__auswahl {
  appearance: none;
  padding-inline-end: var(--abstand-10);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23404652' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--abstand-4) center;
  background-size: 1.25rem;
}

/* --- Datei ---------------------------------------------------------------
   Die Schaltfläche des Browsers lässt sich nicht gestalten, ihre Umgebung
   schon. Das Feld bekommt deshalb dieselbe Fläche wie die übrigen und die
   Schaltfläche darin die Form eines schlichten Knopfes. */
.formular__datei {
  width: 100%;
  padding: var(--abstand-3) var(--abstand-4);
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-m);
  background: var(--bg-gedaempft);
  color: var(--text-sekundaer);
  font-family: inherit;
  font-size: var(--schrift-klein);
}

.formular__datei::file-selector-button {
  margin-inline-end: var(--abstand-4);
  padding: var(--abstand-2) var(--abstand-4);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-m);
  background: var(--flaeche);
  color: var(--text);
  font-family: inherit;
  font-size: var(--schrift-mikro);
  cursor: pointer;
}

.formular__datei::file-selector-button:hover {
  border-color: var(--marke);
  color: var(--marke-text);
}

/* --- Zustimmung ----------------------------------------------------------- */

.formular__zustimmung .wpcf7-list-item {
  margin: 0;
}

.formular__zustimmung label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--abstand-3);
  align-items: start;
  color: var(--text-sekundaer);
  font-size: var(--schrift-mikro);
  line-height: var(--zeilenhoehe-mini);
}

.formular__zustimmung input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--marke);
}

.formular__zustimmung a {
  color: var(--marke-text);
}

/* --- Absenden ------------------------------------------------------------- */

.formular__absenden {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-4);
  align-items: center;
  grid-column: 1 / -1;
  margin-block-start: var(--abstand-2);
}

.formular__absenden .knopf {
  cursor: pointer;
}

/* --- Rückmeldungen des Plugins -------------------------------------------
   Contact Form 7 bringt eigene Farben mit, die neben dieser Palette fremd
   wirken. Meldung und Feldfehler werden deshalb auf die Statusrollen aus
   tokens.css umgestellt. */

.wpcf7 form .wpcf7-response-output {
  margin: var(--abstand-8) 0 0;
  padding: var(--abstand-4) var(--abstand-5);
  border: 1px solid currentcolor;
  border-radius: var(--radius-m);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--ok);
  background: var(--ok-flaeche);
  color: var(--ok);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: var(--achtung);
  background: var(--achtung-flaeche);
  color: var(--achtung);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--fehler);
  background: var(--fehler-flaeche);
  color: var(--fehler);
}

.wpcf7-not-valid-tip {
  margin-block-start: var(--abstand-1);
  color: var(--fehler);
  font-size: var(--schrift-mini);
  line-height: var(--zeilenhoehe-mini);
}

/* Das fehlerhafte Feld wird nicht allein über die Farbe ausgezeichnet: die
   Meldung darunter sagt dasselbe in Worten, und der kräftigere Rahmen ist
   auch ohne Farbunterscheidung zu sehen. */
.formular__eingabe.wpcf7-not-valid,
.formular__auswahl.wpcf7-not-valid,
.formular__datei.wpcf7-not-valid {
  border-color: var(--fehler);
  border-width: 2px;
}

/* --------------------------------------------------------------------------
   Schmale Schirme
   -------------------------------------------------------------------------- */

@media (max-width: 64rem) {
  /* Die Beistellspalte rutscht unter das Formular. Sie steht dort immer noch
     vor dem Absenden, weil sie beim Ausfüllen hilft und nicht danach. */
  .anfrage__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-12);
  }

  .kontaktwege__liste {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--abstand-6);
    padding-block: var(--abstand-8);
  }

  .kontaktwege__feld {
    padding-inline: 0;
  }

  .kontaktwege__feld + .kontaktwege__feld {
    padding-block-start: var(--abstand-6);
    border-inline-start: 0;
    border-block-start: 1px solid var(--linie);
  }
}

@media (max-width: 40rem) {
  .anfrage {
    padding-block: var(--abstand-16);
  }

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

/* ==========================================================================
   Aufdecken beim Scrollen
   Der Hero legt seine Überschrift hinter einer festen Kante frei und lässt
   einmal einen Lichtstreifen über den Stahl laufen. Beides folgt demselben
   Satz: etwas wird aufgedeckt, nicht eingeschaltet. Diese Bewegung setzt der
   Rest der Seite fort.

   Über jeden Block läuft ein Zug, wie ein Werkzeug über eine Fläche. Vor der
   Kante liegt noch nichts, hinter ihr steht der fertige Inhalt. Die Kante ist
   weich, weil sie kein Vorhang ist, sondern die Stelle, an der das Werkzeug
   gerade arbeitet.

   Der Zug läuft genau waagerecht und nicht, wie der Lichtstreifen im Hero,
   leicht schräg. Bei einem schrägen Verlauf geht die Höhe des Blocks in die
   Länge des Verlaufs ein, und die Maske müsste für einen hohen Textblock
   anders bemessen werden als für ein flaches Feld. Waagerecht hängt sie
   allein an der Breite, und dieselbe Regel trägt den langen Fließtext der
   Über-uns-Seite genauso wie ein einzelnes Kennwertfeld.

   Was beim Laden schon im Bild steht, wird nicht versteckt. Das Skript setzt
   die Klasse ausschließlich an Blöcke unterhalb des sichtbaren Bereichs, und
   ohne Skript trägt sie niemand. Ein Inhalt, den erst JavaScript wieder
   sichtbar machen muss, wäre der falsche Weg herum.

   Die Felder der Fertigungsbereiche auf der Startseite bleiben außen vor.
   Sie haben ihre eigene, scrollgebundene Sequenz mit gezogenen Zeichen, und
   zwei Choreografien übereinander wären eine zu viel.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* 320 % Maskenbreite heißt, dass jeweils nur nicht ganz ein Drittel des
     Verlaufs über dem Block steht. Am rechten Anschlag liegt darüber der
     durchsichtige Teil und der Block ist vollständig verdeckt, am linken der
     deckende und er steht ganz da. Die weiche Kante dazwischen ist mit rund
     zwei Dritteln der Blockbreite bewusst breit: eine schmale Kante liest
     sich als Vorhang, eine breite als Bewegung. */
  .aufdecken {
    --zug-takt: 0;
    --zug-maske: linear-gradient(
      to right,
      #000 0 42%,
      rgb(0 0 0 / 0.45) 52%,
      transparent 62%
    );

    opacity: 0;
    -webkit-mask-image: var(--zug-maske);
    mask-image: var(--zug-maske);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 320% 100%;
    mask-size: 320% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }

  /* Die Deckkraft ist vor dem Zug fertig. Dadurch steht der Inhalt hinter der
     Kante bereits in voller Stärke, statt ihr blass hinterherzulaufen, und
     die Bewegung, die man sieht, ist der Zug selbst.

     Der Takt staffelt Geschwister gegeneinander. Eine Reihe Maschinenblätter
     wird dadurch von links nach rechts aufgedeckt, so wie ein Zug über sie
     hinweggeht, und nicht alle vier gleichzeitig. */
  .aufdecken--an {
    opacity: 1;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    transition:
      opacity calc(var(--dauer-ruhig) * 1.6) var(--kurve-weich)
        calc(var(--zug-takt) * 80ms),
      -webkit-mask-position calc(var(--dauer-ruhig) * 2.4) var(--kurve)
        calc(var(--zug-takt) * 80ms),
      mask-position calc(var(--dauer-ruhig) * 2.4) var(--kurve)
        calc(var(--zug-takt) * 80ms);
  }
}
li.produkt a > *, .produkt, .produkt a {text-decoration: none !important;}

/* ==========================================================================
   Teile-Shop auf der Startseite
   Zwei Bereiche für die beiden Traktor-Ersatzteile mit eigener Seite und
   Kaufweg: der Knopf führt auf die Produktseite der Website, der Verweis
   darunter direkt in den Shop. Die Karte ist wie die Produktkarte weiß, weil
   die Aufnahmen freigestellt sind und ihr Weiß mitbringen.
   ========================================================================== */

.teileshop {
  border-block: 1px solid var(--linie);
  background: var(--bg-gedaempft);
}

.teileshop__inner {
  display: grid;
  gap: var(--abstand-12);
}

.teileshop__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abstand-6);
}

.teil {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--abstand-5);
  min-width: 0;
  padding: var(--abstand-6);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  background: var(--flaeche);
}

.teil__bild {
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.teil__bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.teil__copy {
  display: grid;
  align-content: start;
  gap: var(--abstand-3);
}

.teil__titel {
  color: var(--text);
  font-size: var(--schrift-h2);
}

.teil__text {
  max-width: var(--lesebreite);
  color: var(--text-sekundaer);
  line-height: var(--zeilenhoehe-text);
}

.teil__preis {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-klein);
}

.teil__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-4) var(--abstand-6);
  margin-block-start: var(--abstand-3);
}

@media (max-width: 56rem) {
  .teileshop__liste {
    grid-template-columns: minmax(0, 1fr);
  }
}