/* 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);
}

/* --- 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;
}

: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);
  }

  /* 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);
}

.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__kopf h2 {
  font-size: var(--schrift-h2);
}

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

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

.teileliste__punkt {
  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);
}

.teileliste__text {
  max-width: 46ch;
  margin-block-start: var(--abstand-2);
  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 {
  max-width: 30ch;
  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 von echten
   Drehteilen stimmt es nicht mehr: die Tafel nahm ein Viertel der Breite ein,
   die Bilder bekamen den Rest, und alle Abschnitte darunter standen auf einem
   anderen Satzspiegel als Hero und Anfragestreifen.

   Der Aufbau ist deshalb ein anderer. Die Kennwerte liegen jetzt als ein
   einzelnes Band quer unter dem Hero, alle Abschnitte laufen im selben
   Rahmen wie Hero und Fußbereich, und in der Mitte der Seite stehen die drei
   Werkstücke auf der Fläche, auf der sie fotografiert wurden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kennwertband
   Dieselben Angaben, die vorher in der Spalte standen, quer über die Breite.
   Als Band steht es dort, wo es gebraucht wird, nämlich gleich unter der
   Überschrift, und es gibt der Seite in der ersten Zeile das Raster vor, an
   dem sich alles darunter ausrichtet.
   -------------------------------------------------------------------------- */

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

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

.kennwerte__feld {
  display: grid;
  align-content: start;
  gap: var(--abstand-2);
  padding-inline: var(--abstand-6);
}

/* Striche 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__kopf {
  max-width: var(--lesebreite);
}

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

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

.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. */
.vitrine__bild img {
  width: 100%;
  height: auto;
}

.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 {
  max-width: 42ch;
  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.
   -------------------------------------------------------------------------- */

.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 Späne und
   die Lichter, links bleibt die Fläche, auf der der Text steht. */
.trenner__bildfeld img {
  width: 100%;
  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.74) 34%,
    oklch(0.16 0.020 var(--blau-hue) / 0.20) 72%,
    transparent 100%
  );
}

.trenner__inner {
  position: relative;
  padding-block: var(--abstand-20);
}

.trenner__copy {
  max-width: 30ch;
}

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

.trenner p {
  max-width: 46ch;
  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
   Der Fließtext der Seite, ohne die Spalte, die vorher daneben mitlief. Die
   Überschrift steht links neben ihrem eigenen Absatz statt darüber. Dadurch
   füllt der Abschnitt dieselbe Breite wie alles andere, ohne dass die Zeile
   länger wird als die Lesebreite, und man sieht am Rand, wovon der nächste
   Block handelt, bevor man ihn liest.
   -------------------------------------------------------------------------- */

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

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

.textzeilen__zeile:first-child {
  border-block-start: 2px solid var(--marke);
}

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

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

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

/* Auf der breiten Fassung stehen sechs Einträge in drei Spalten statt in
   zwei — bei 90 rem Rahmen wären zwei Spalten je 40 rem breit und der kurze
   Satz darin verlöre sich. */
.teileliste__liste--drei {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--abstand-10);
}

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

@media (max-width: 76rem) {
  .kennwerte__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--abstand-8);
  }

  /* Bei drei Spalten stimmt der Nachbarselektor nicht mehr: das erste Feld
     jeder Zeile darf keinen Strich vor sich haben. */
  .kennwerte__feld:nth-child(3n + 1) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

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

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

  .teileliste__liste--drei {
    grid-template-columns: repeat(2, 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);
  }

  .trenner__copy,
  .trenner p {
    max-width: 40ch;
  }
}

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

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

@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);
  }

  .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;
  }

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

  .trenner {
    min-height: 0;
  }

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