/* ==========================================================================
   PULSWERK · pulswerk.css
   Gestaltung „Schnitt“ (Richtung C, von Jimmy am 06.10.2026 gewählt)

   Prinzip: die 45°-Kante aus dem Logo. Der Rahmen der Wortmarke hat oben rechts
   eine abgeschrägte Ecke, daneben sitzt ein gelbes Dreieck. Daraus folgen:
     · Schnittkanten an Bildflächen, Knöpfen und einzelnen Abschnitten,
       immer von links oben nach rechts unten (Ecke oben rechts oder unten links),
     · gelbe Diagonalbänder und Dreiecke als Akzent, nie als Fläche,
     · Bildflächen groß, als Duoton Anthrazit/Petrol,
     · IBM Plex Sans in Gemischtschreibung mit Gewichtskontrast, IBM Plex Mono
       für Nummern, Kennzeilen und kleine Beschriftungen.

   Diese Datei enthält ALLE wiederverwendbaren Bausteine der Website.
   Seitenspezifisches gehört nach css/seiten/<name>.css.
   Regeln und Beispiel-Markup: /GESTALTUNGSREGELN.md im Projektordner.
   Klassen sind deutsch und folgen dem Muster block__teil--variante.

   Bruchpunkte (Media Queries können keine Variablen lesen):
     S  bis 699 px      Handy
     M  700–1099 px     Tablet, kleines Notebook
     L  ab 1100 px      Desktop, Mega-Menü
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Schriften (lokal, siehe schriften/LIZENZ.txt)
   -------------------------------------------------------------------------- */
@font-face { font-family: "IBM Plex Sans"; src: url("/schriften/ibm-plex-sans-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/schriften/ibm-plex-sans-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/schriften/ibm-plex-sans-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/schriften/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("/schriften/ibm-plex-sans-condensed-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("/schriften/ibm-plex-sans-condensed-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }


/* --------------------------------------------------------------------------
   2. Tokens
   Markenfarben aus dem Brand Kit (05.10.2026). Abgeleitete Töne sind als
   solche markiert und nur für Zustände/Linien gedacht.
   -------------------------------------------------------------------------- */
:root {
  /* Marke */
  --gelb: #F5E600;            /* Signalgelb: Knöpfe, Bänder, Dreiecke, Markierungen. Nie flächig. */
  --gelb-hover: #FFF14D;      /* abgeleitet: Hover auf gelben Knöpfen */
  --anthrazit: #17191C;       /* Schrift auf Gelb, Text auf hell */
  --petrol: #006B70;          /* Ergänzung: Duoton, ein Abschnitt je Seite, Hinweise */
  --petrol-tief: #005357;     /* abgeleitet: Hover auf Petrol */
  --weiss: #FFFFFF;

  /* Dunkle Grundwelt */
  --grund: #111418;           /* Seitenhintergrund */
  --flaeche: #1C2229;         /* Flächen, Panels */
  --flaeche-hoch: #232A32;    /* abgeleitet: Hover auf Flächen */
  --linie: #2C343D;           /* Haarlinien */
  --linie-stark: #4A5560;     /* abgeleitet: sichtbare Trenner, Linienknöpfe */
  --rand-feld: #66727F;       /* abgeleitet: Formularrahmen, ≥ 3:1 zu Grund und Fläche */
  --text: #F4F6F8;
  --text-gedaempft: #B8C2CC;

  /* Helle Abschnitte (sparsam) */
  --hell: #F4F6F8;
  --hell-text: #17191C;
  --hell-gedaempft: #586270;
  --hell-linie: #D3D9DF;      /* abgeleitet */

  /* Zustände */
  --fehler: #FF8A7A;          /* auf dunkel, 7:1 auf Fläche */
  --fehler-hell: #B42318;     /* auf hell */

  /* Duoton der Bildflächen und Bildplätze (Anthrazit → Petrol) */
  --duoton: linear-gradient(135deg, #17191C 0%, #142C30 48%, #0B4F53 76%, #006B70 100%);
  --schraffur: repeating-linear-gradient(45deg, rgba(244, 246, 248, .05) 0 1px, transparent 1px 22px);

  /* Schrift */
  --schrift-text: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  --schrift-display: "IBM Plex Sans Condensed", "IBM Plex Sans", "Arial Narrow", Arial, Helvetica, sans-serif;   /* Überschriften h1/h2: die schmale Schwester, 700 (Jimmy-Brief 07.10.2026) */
  --schrift-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Maße */
  --breite: 1360px;                         /* größte Inhaltsbreite */
  --rand: clamp(16px, 4vw, 56px);           /* Seitenrand */
  --abstand: clamp(72px, 9vw, 136px);       /* Abschnitt oben/unten */
  --luecke: clamp(20px, 2.6vw, 40px);       /* Rasterabstand */
  --kopf-hoehe: 64px;
  --ecke: 12px;                             /* Schnitt an Knöpfen */
  --ecke-gross: clamp(32px, 4vw, 56px);     /* Schnitt an Rahmen (.rahmen-ecke) */
  --ecke-bild: clamp(18px, 2.2vw, 30px);    /* kleiner Schnitt an jeder Abbildung */
  --ecke-abschnitt: clamp(44px, 7vw, 120px);/* Schnitt an Abschnitten (.abschnitt--schnitt, .abschluss) */
  --schnitt: clamp(72px, 15vw, 260px);      /* großer Schnitt unten links (Einstieg, Seitenkopf) */
  --uebergang: 200ms cubic-bezier(.2, .7, .2, 1);

  /* Kontextfarben: jeder Abschnitt setzt sie neu, Bausteine benutzen nur diese */
  --c-grund: var(--grund);
  --c-text: var(--text);
  --c-gedaempft: var(--text-gedaempft);
  --c-linie: var(--linie);
  --c-linie-stark: var(--linie-stark);
  --c-flaeche: var(--flaeche);
  --c-link: var(--gelb);
  --c-marke: var(--gelb);       /* Dreieck an der Kennung, Nummern, kleine Markierungen */
  --c-fokus: var(--gelb);
  --c-feld: var(--grund);            /* Hintergrund von Eingabefeldern */
  --c-rand-feld: var(--rand-feld);   /* Rahmen von Eingabefeldern, ≥ 3:1 */
  --c-platzhalter: #8994A0;
  --c-fehler: var(--fehler);
  --c-auswahl-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F5E600' d='M4.2 7.6 12 15.4l7.8-7.8L22 9.8l-10 10-10-10z'/%3E%3C/svg%3E");

  color-scheme: dark;
}
@media (min-width: 1100px) {
  :root { --kopf-hoehe: 76px; }
}


/* --------------------------------------------------------------------------
   3. Grundlagen
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 17px/1.6 var(--schrift-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--schrift-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}
/* Nur h1 und h2 tragen die schmale Display-Schrift; h3/h4 bleiben in der Textschrift */
h3, h4 { font-family: var(--schrift-text); letter-spacing: -.01em; }
@media (max-width: 699px) {
  /* Auf dem Handy dürfen nur lange Wörter (Beschichtungsvorbereitung) automatisch getrennt werden: ab 15
     Buchstaben, mindestens 8 davor und 6 danach. Kürzere Wörter wie „Laserreinigung“ bleiben ganz, auch wenn
     text-wrap: balance die Zeile verkürzt (gemessen: „Laser-/reinigung“, „Reini-/gungsaufgabe“, „Oberflä-/chen…“).
     Ein Wort mit &shy; trennt der Browser nur dort (Regel in GESTALTUNGSREGELN.md, Abschnitt 3). */
  h1, h2, h3, h4 { hyphens: auto; hyphenate-limit-chars: 15 8 6; }
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--c-fokus);
  outline-offset: 3px;
}

::selection { background: var(--gelb); color: var(--anthrazit); }

address { font-style: normal; }

button, input, select, textarea { font: inherit; color: inherit; }


/* --------------------------------------------------------------------------
   4. Hilfsklassen
   -------------------------------------------------------------------------- */

/* Nur für Screenreader */
.unsichtbar {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* „Zum Inhalt springen“ */
.springen {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--gelb);
  color: var(--anthrazit);
  font: 600 15px/1 var(--schrift-text);
  text-decoration: none;
}
.springen:focus { top: 12px; }

/* Inhaltsbreite mit Seitenrand */
.innen {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

.gelb { color: var(--gelb); }
.gedaempft { color: var(--c-gedaempft); }
.hell { color: var(--c-text); }

/* Gewichtskontrast in Überschriften: <h2 class="titel">Fett <span class="leicht">und leicht</span></h2> */
.leicht { font-weight: 400; color: var(--c-gedaempft); }
.fett { font-weight: 700; color: var(--c-text); }

/* Mono-Schrift für Nummern und Kennzeichen im Fließtext */
.mono { font-family: var(--schrift-mono); font-weight: 500; letter-spacing: 0; }


/* --------------------------------------------------------------------------
   5. Abschnitte und Kontexte
   <section class="abschnitt [abschnitt--flaeche|--hell|--petrol] [--eng] [--linie] [--schnitt]">
   -------------------------------------------------------------------------- */
.abschnitt {
  position: relative;
  padding-block: var(--abstand);
  background: var(--c-grund);
  color: var(--c-text);
}
.abschnitt--eng { padding-block: calc(var(--abstand) * .55); }
.abschnitt--ohne-oben { padding-top: 0; }
.abschnitt--linie { border-top: 1px solid var(--c-linie); }

.abschnitt--flaeche {
  --c-grund: var(--flaeche);
  --c-flaeche: var(--grund);
}

.abschnitt--hell {
  --c-grund: var(--hell);
  --c-text: var(--hell-text);
  --c-gedaempft: var(--hell-gedaempft);
  --c-linie: var(--hell-linie);
  --c-linie-stark: #9AA4AE;
  --c-flaeche: var(--weiss);
  --c-link: var(--petrol);
  --c-marke: var(--petrol);
  --c-fokus: var(--anthrazit);
  --c-feld: var(--weiss);
  --c-rand-feld: #7A8592;            /* abgeleitet: 3,5:1 zu Weiß und zum hellen Grund */
  --c-platzhalter: #6B7581;
  --c-fehler: var(--fehler-hell);
  --c-auswahl-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23006B70' d='M4.2 7.6 12 15.4l7.8-7.8L22 9.8l-10 10-10-10z'/%3E%3C/svg%3E");
  color-scheme: light;
}

.abschnitt--petrol {
  --c-grund: var(--petrol);
  --c-text: var(--weiss);
  --c-gedaempft: rgba(255, 255, 255, .86);
  --c-linie: rgba(255, 255, 255, .26);
  --c-linie-stark: rgba(255, 255, 255, .55);
  --c-flaeche: rgba(0, 0, 0, .18);
  --c-link: var(--weiss);
  --c-marke: var(--gelb);
  --c-fokus: var(--gelb);
}

/* Abschnitt mit dem Logo-Schnitt oben rechts und gelbem Eckdreieck (Proportion 80/112
   wie im Logo). Die Ecke zeigt den Seitengrund oder die Farbe eines hellen/Petrol-Abschnitts
   davor (siehe unten). Sparsam: höchstens zweimal je Seite, .abschluss bringt ihn schon mit. */
.abschnitt--schnitt {
  isolation: isolate;
  background: linear-gradient(225deg, var(--vorher, transparent) 0 calc(var(--ecke-abschnitt) * .7071 - .5px), var(--c-grund) calc(var(--ecke-abschnitt) * .7071 + .5px));
}
.abschnitt--schnitt::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--ecke-abschnitt) * .714);
  height: calc(var(--ecke-abschnitt) * .714);
  background: var(--gelb);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  pointer-events: none;
}

/* Die Ecke von .abschnitt--schnitt und .abschluss ist durchsichtig (dunkler Seitengrund).
   Steht davor ein heller oder Petrol-Abschnitt, übernimmt die Ecke dessen Farbe. */
.abschnitt--hell + :is(.abschnitt--schnitt, .abschluss) { --vorher: var(--hell); }
.abschnitt--petrol + :is(.abschnitt--schnitt, .abschluss) { --vorher: var(--petrol); }

/* Kopf eines Abschnitts: Kennung, Titel, Einleitung */
.abschnitt__kopf {
  display: grid;
  gap: 0;
  margin-bottom: clamp(36px, 5vw, 72px);
}
.abschnitt__kopf > * { min-width: 0; }
.abschnitt__kopf .einleitung { margin-top: clamp(18px, 2vw, 26px); }
@media (min-width: 1100px) {
  /* Titel links, Einleitung rechts unten bündig */
  .abschnitt__kopf--geteilt {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(40px, 5vw, 80px);
    align-items: end;
  }
  .abschnitt__kopf--geteilt > .kennung { grid-column: 1 / -1; }
  .abschnitt__kopf--geteilt .einleitung { margin-top: 0; }
  /* rechts eine Abbildung statt nur Einleitung: Titel oben bündig, sonst entsteht links eine Leerfläche */
  .abschnitt__kopf--oben { align-items: start; }
}


/* --------------------------------------------------------------------------
   6. Typografie-Bausteine
   Gemischtschreibung, Gewichtskontrast statt Versalien. Mono für Kennzeilen.
   -------------------------------------------------------------------------- */

/* Kennung: kleine Mono-Zeile über der Überschrift, davor das Dreieck aus dem Logo */
.kennung {
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 18px;
  font: 500 13px/1.35 var(--schrift-mono);
  letter-spacing: .02em;
  color: var(--c-gedaempft);
}
.kennung::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--c-marke);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
@media (min-width: 700px) {
  .kennung { font-size: 14px; }
}

/* Titel (auch auf <p> oder <span> vollständig: Familie, Gewicht, Umbruch) */
.titel {
  font-family: var(--schrift-display);
  font-weight: 700;
  text-wrap: balance;
  font-size: clamp(34px, 2.8vw + 18px, 66px);
  line-height: 1;
  letter-spacing: -.008em;
}
.titel--gross { font-size: clamp(40px, 4.4vw + 17px, 88px); line-height: .96; letter-spacing: -.012em; }
.titel--mittel { font-size: clamp(29px, 1.6vw + 19px, 48px); line-height: 1.04; letter-spacing: -.006em; }
.titel--klein { font-family: var(--schrift-text); font-size: clamp(22px, .7vw + 17px, 28px); line-height: 1.16; letter-spacing: -.01em; }

/* Einleitung unter Titeln */
.einleitung {
  max-width: 60ch;
  font-size: clamp(18px, .3vw + 16px, 20px);
  line-height: 1.55;
  color: var(--c-gedaempft);
}

/* Lesetext: begrenzte Zeilenlänge, gestaltete Listen und Zwischentitel */
.fliesstext { max-width: 68ch; }
.fliesstext > * + h2,
.fliesstext > * + h3 { margin-top: 1.7em; }
.fliesstext > .kennung + h2,
.fliesstext > .kennung + h3 { margin-top: 0; }
.fliesstext h2 { font-size: clamp(28px, 1.3vw + 19px, 40px); line-height: 1.04; margin-bottom: .5em; letter-spacing: -.006em; }
.fliesstext h3 { font-size: clamp(20px, .5vw + 17px, 24px); line-height: 1.2; margin-bottom: .45em; letter-spacing: -.01em; }
.fliesstext a {
  color: var(--c-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.fliesstext a:hover { text-decoration-thickness: 2px; }
/* Knöpfe im Fließtext behalten ihre eigene Schrift (sonst gelb auf gelb, Fund 08.10.2026 Kostenseite) */
.fliesstext a.knopf { color: var(--k-text); text-decoration: none; }
.fliesstext ul,
.liste {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}
.fliesstext ul > li,
.liste > li {
  position: relative;
  padding-left: 22px;
  margin-bottom: .45em;
}
.fliesstext ul > li::before,
.liste > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 8px;
  height: 8px;
  background: var(--c-marke);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.fliesstext strong { color: var(--c-text); font-weight: 600; }


/* --------------------------------------------------------------------------
   7. Knöpfe und Links
   -------------------------------------------------------------------------- */

/* Pfeil als Maske: übernimmt die Textfarbe, liegt nicht in der Schrift (→ fehlt in Plex Latin) */
.pfeil {
  display: inline-block;
  flex: none;
  width: .95em;
  height: .95em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10.9h15.6l-5.7-5.7L13.5 3.6 22 12l-8.5 8.4-1.6-1.6 5.7-5.7H2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10.9h15.6l-5.7-5.7L13.5 3.6 22 12l-8.5 8.4-1.6-1.6 5.7-5.7H2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Knopf. Die 45°-Ecke oben rechts entsteht im Hintergrund (Verlauf mit harter Kante),
   nicht mit clip-path: So bleibt der Fokusrahmen vollständig sichtbar. */
.knopf {
  --k-fuellung: transparent;
  --k-text: var(--c-text);
  --k-rand: var(--c-linie-stark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: var(--k-fuellung);
  box-shadow: inset 0 0 0 1.5px var(--k-rand);
  color: var(--k-text);
  font: 600 16px/1.2 var(--schrift-text);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover .pfeil { }

/* Primär: Signalgelb mit Schrägecke wie im Logo */
.knopf--gelb,
.knopf--petrol,
.knopf--anthrazit {
  --k-rand: transparent;
  background: linear-gradient(225deg, transparent 0 calc(var(--ecke) * .7071 - .5px), var(--k-fuellung) calc(var(--ecke) * .7071 + .5px));
}
.knopf--gelb { --k-fuellung: var(--gelb); --k-text: var(--anthrazit); }
.knopf--gelb:hover { --k-fuellung: var(--gelb-hover); }
.knopf--gelb:focus-visible { outline-color: var(--c-text); }

/* Sekundär: Linie */
.knopf--linie:hover { --k-rand: var(--c-text); }

/* Petrol (auf hellen Abschnitten) */
.knopf--petrol { --k-fuellung: var(--petrol); --k-text: var(--weiss); }
.knopf--petrol:hover { --k-fuellung: var(--petrol-tief); }

/* Anthrazit (nur auf gelben Flächen) */
.knopf--anthrazit { --k-fuellung: var(--anthrazit); --k-text: var(--weiss); }

.knopf--klein { --ecke: 10px; min-height: 44px; padding: 0 16px; font-size: 15px; }
.knopf--gross { --ecke: 16px; min-height: 58px; padding: 0 28px; font-size: 17px; }
@media (max-width: 359px) {
  .knopf--gross { padding: 0 16px; font-size: 16px; }
}
.knopf--breit { width: 100%; }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: center;
}

/* Textlink mit Pfeil, z. B. „Mehr zu Kosten & Ablauf“ */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--c-marke);
  color: var(--c-text);
  font: 600 16px/1.25 var(--schrift-text);
  text-decoration: none;
}
.textlink .pfeil { color: var(--c-marke); }
.textlink:hover .pfeil { }

/* Kleine Kennzeichnung „Pilot“ an Titeln und Links */
.marke-pilot {
  display: inline-block;
  padding: 4px 7px 3px;
  background: var(--petrol);
  color: var(--weiss);
  font: 500 11.5px/1.15 var(--schrift-mono);
  letter-spacing: .03em;
  vertical-align: middle;
  white-space: nowrap;
}
.abschnitt--petrol .marke-pilot,
.hinweisband--pilot .marke-pilot { background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: inherit; }


/* --------------------------------------------------------------------------
   8. Bilder, Bildplätze, Abbildungsnummern, Rahmen mit Ecke
   Bildplätze erzeugt bauen.py aus <bild …></bild> (siehe GESTALTUNGSREGELN.md).
   Fotos erscheinen als Duoton Anthrazit/Petrol (SVG-Filter #pw-duoton im Fuß).
   Wo die echte Farbe zählt (Vorher-nachher), klasse="bild--farbe" setzen.
   -------------------------------------------------------------------------- */
.bild {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--anthrazit);
  filter: url("#pw-duoton");
}
.bild--farbe,
.vergleich .bild,
.upload__bild { filter: none; }

/* Bildweiche aus bauen.py: <picture> erzeugt keine eigene Box, das <img> bleibt Kind des Bildrahmens.
   nur="desktop": ab 900 px das Foto, darunter nur ein 1-Pixel-GIF, das hier verschwindet. */
picture.bild-weiche { display: contents; }
@media (max-width: 899px) {
  picture.bild-weiche--desktop,
  .bildplatz--nur-desktop,
  figure:has(> picture.bild-weiche--desktop),
  figure:has(> .bildplatz--nur-desktop) { display: none !important; }
}

/* Bild füllt den Elternblock vollständig (Eltern bestimmen die Größe) */
.bild--fuellen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
  object-fit: cover;
}

/* Bildplatz: noch kein Foto vorhanden. Duoton-Fläche mit feiner 45°-Schraffur. */
.bildplatz {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--text-gedaempft);
  background-color: var(--anthrazit);
  background-image: var(--schraffur), var(--duoton);
}
.bildplatz__beschriftung {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  display: grid;
  gap: 4px;
  max-width: min(440px, calc(100% - 28px));
  padding: 9px 12px 10px;
  background: rgba(17, 20, 24, .84);
  pointer-events: none;
}
.bildplatz__beschriftung > * { min-width: 0; }   /* Rasterkinder dürfen schmaler als ihr Inhalt werden (Vergleich bei 1024 px) */
.bildplatz__datei {
  display: block;
  color: var(--text);
  font: 500 12px/1.4 var(--schrift-mono);
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.bildplatz__motiv {
  font: 400 13px/1.45 var(--schrift-text);
  color: var(--text-gedaempft);
  hyphens: auto;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 559px) {
  .bildplatz__beschriftung { left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 7px 10px 8px; }
  .bildplatz__motiv { font-size: 12px; -webkit-line-clamp: 2; }
}

/* Abbildung mit Nummer („Abb. 03 · Symbolbild“). Jede Abbildung hat oben rechts
   einen kleinen Schnitt. */
.abb { position: relative; margin: 0; min-width: 0; }
.abb > .bild,
.abb > picture > .bild,
.abb > .bildplatz {
  clip-path: polygon(0 0, calc(100% - var(--ecke-bild)) 0, 100% var(--ecke-bild), 100% 100%, 0 100%);
}
.abb__nr {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 8px 4px;
  background: rgba(17, 20, 24, .84);
  color: var(--text);
  font: 500 12px/1.2 var(--schrift-mono);
  letter-spacing: .02em;
  pointer-events: none;
}
.abb__text {
  display: flex;
  gap: .9em;
  padding-top: 12px;
  margin-top: 0;
  border-top: 1px solid var(--c-linie);
  color: var(--c-gedaempft);
  font-size: 14px;
  line-height: 1.5;
}
.abb__text b {
  flex: none;
  color: var(--c-text);
  font: 500 12.5px/1.6 var(--schrift-mono);
  letter-spacing: .02em;
}
.abb > .bild + .abb__text,
.abb > picture + .abb__text,
.abb > .bildplatz + .abb__text { margin-top: 12px; }

/* Rahmen mit Schnitt und gelbem Dreieck (Formensprache des Logos).
   Schnitt am ersten Kind, Dreieck als ::after. Sparsam: ein- bis zweimal je Seite. */
.rahmen-ecke {
  position: relative;
  --e: var(--ecke-gross);
}
.rahmen-ecke > :first-child {
  clip-path: polygon(0 0, calc(100% - var(--e)) 0, 100% var(--e), 100% 100%, 0 100%);
}
.rahmen-ecke::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: calc(var(--e) * .714);
  height: calc(var(--e) * .714);
  background: var(--gelb);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  pointer-events: none;
}
.rahmen-ecke--ohne-dreieck::after { display: none; }


/* --------------------------------------------------------------------------
   9. Kopf und Navigation
   Desktop (L): Leiste mit Mega-Menü „Leistungen“.
   Mobil (S, M): Menü-Knopf, Navigation als Vollbild-Ebene mit Akkordeon.
   Ohne JavaScript: Mega-Menü öffnet über :hover/:focus-within, mobil steht die
   Navigation als Liste unter dem Logo.
   -------------------------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(17, 20, 24, .97);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--kopf-hoehe);
}
.kopf__logo { flex: none; display: block; margin-right: auto; }
.kopf__logo img { width: 112px; height: auto; }
@media (min-width: 380px) { .kopf__logo img { width: 126px; } }
@media (min-width: 1100px) { .kopf__logo img { width: 150px; } }

.kopf__anfrage { flex: none; }
@media (max-width: 1099px) {
  .kopf__anfrage { --ecke: 10px; min-height: 40px; padding: 0 14px; font-size: 14.5px; }
}
@media (max-width: 479px) {
  /* „Projekt“ nur sichtbar ausblenden, der Linkname bleibt „Projekt anfragen“ */
  .kopf__anfrage-lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 339px) {
  .kopf__anfrage { padding: 0 11px; }
}

/* Menü-Knopf (nur S/M) */
.kopf__menue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: inset 0 0 0 1px var(--linie-stark);
  color: var(--text);
  font: 600 14.5px/1 var(--schrift-text);
  cursor: pointer;
}
.kopf__menue:hover { box-shadow: inset 0 0 0 1px var(--text); }
.kopf__menue[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--gelb); }
.kopf__menue-symbol {
  position: relative;
  width: 18px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.kopf__menue-symbol::before,
.kopf__menue-symbol::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: 2px;
  background: currentColor;
}
.kopf__menue[aria-expanded="true"] .kopf__menue-symbol { border-color: transparent; }
.kopf__menue[aria-expanded="true"] .kopf__menue-symbol::before { transform: rotate(45deg); }
.kopf__menue[aria-expanded="true"] .kopf__menue-symbol::after { transform: rotate(-45deg); }
html:not(.js) .kopf__menue { display: none; }
@media (max-width: 379px) {
  .kopf__menue { padding: 0 11px; }
  .kopf__menue-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Hauptmenü: gemeinsame Teile */
.hauptmenue { list-style: none; margin: 0; padding: 0; }
.hauptmenue__link {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font: 600 15px/1.2 var(--schrift-text);
  text-decoration: none;
}
.hauptmenue__auf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
}
.hauptmenue__auf::before,
.mega__auf::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.2 7.6 12 15.4l7.8-7.8L22 9.8l-10 10-10-10z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.2 7.6 12 15.4l7.8-7.8L22 9.8l-10 10-10-10z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hauptmenue__auf[aria-expanded="true"]::before,
.mega__auf[aria-expanded="true"]::before { transform: rotate(180deg); }
html:not(.js) .hauptmenue__auf,
html:not(.js) .mega__auf { display: none; }

/* Mega-Menü: Inhalt. Die Bereiche tragen ihre Nummer 01–07 wie auf der Startseite. */
.mega__innen { display: grid; counter-reset: bereich; }
.mega__gruppe { min-width: 0; counter-increment: bereich; }
.mega__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mega__bereich {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--text);
  font: 600 18px/1.25 var(--schrift-text);
  letter-spacing: -.005em;
  text-decoration: none;
}
.mega__bereich::before {
  content: none; /* Nummerierung aus (Jimmy 06.10.) */
  flex: none;
  min-width: 1.6em;
  color: var(--gelb);
  font: 500 12.5px/1 var(--schrift-mono);
  letter-spacing: 0;
}
.mega__bereich:hover { color: var(--gelb); }
.mega__auf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--text-gedaempft);
  cursor: pointer;
}
.mega__liste,
.mega__unterliste { list-style: none; margin: 0; padding: 0; }
.mega__liste { display: grid; gap: 1px; }
.mega__liste a {
  display: inline-block;
  padding: 4px 0;
  color: var(--text-gedaempft);
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
}
.mega__liste a:hover,
.mega__liste a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mega__unterliste {
  margin: 2px 0 4px 1px;
  padding-left: 14px;
  border-left: 1px solid var(--linie-stark);
}
.mega__unterliste a { font-size: 14px; }
.mega__pilot { margin-left: 4px; }
.mega__extra { display: grid; align-content: start; gap: 16px; }
.mega__haeufig { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mega__haeufig a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--text);
  font: 600 18px/1.3 var(--schrift-text);
  text-decoration: none;
}
.mega__haeufig a:hover { color: var(--gelb); }
.mega__haeufig .pfeil { width: .8em; height: .8em; color: var(--gelb); }
.mega__nr { flex: none; min-width: 3.3em; color: var(--gelb); font: 500 12.5px/1 var(--schrift-mono); }
.mega__alle { justify-self: start; }

/* ---- Desktop (L) ---- */
@media (min-width: 1100px) {
  .kopf__innen { gap: 28px; }
  .kopf__menue { display: none; }
  .kopf__logo { margin-right: 0; }
  .kopf__nav { margin-left: auto; }

  .hauptmenue { display: flex; align-items: center; gap: 2px; }
  .hauptmenue__punkt { position: static; display: flex; align-items: center; }
  .hauptmenue__link {
    position: relative;
    height: var(--kopf-hoehe);
    padding: 0 11px;
  }
  .hauptmenue__link::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: calc(50% - 15px);
    height: 2px;
    background: var(--gelb);
    transform: scaleX(0);
    transform-origin: left;
  }
  .hauptmenue__link:hover::after,
  .hauptmenue__link[aria-current]::after,
  .hauptmenue__punkt--mega.ist-offen .hauptmenue__link::after { }
  .hauptmenue__auf { width: 26px; height: 40px; margin-left: -10px; margin-right: 2px; }

  .mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--flaeche);
    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;   /* beim Ausblenden nicht mehr erreichbar, sonst öffnet es sich wieder */
  }
  /* gelbes Eckdreieck oben rechts: das Menü als Fläche mit Logo-Ecke */
  .mega::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: var(--gelb);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
  .mega.ist-offen,
  html:not(.js) .hauptmenue__punkt--mega:hover .mega,
  html:not(.js) .hauptmenue__punkt--mega:focus-within .mega {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .mega__innen {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px var(--luecke);
    padding-block: 38px 46px;
  }
  .mega__gruppe { padding-top: 14px; border-top: 1px solid var(--linie-stark); }
  /* schmales Aufklappmenü (Branchen, Einsatzorte): hängt unter dem eigenen Punkt, nicht über die volle Breite */
  .hauptmenue__punkt--schmal { position: relative; }
  .mega--schmal { left: 0; right: auto; width: max-content; min-width: 280px; max-width: 420px; }
  .mega--schmal::after { width: 26px; height: 26px; }
  .mega__innen--schmal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 18px 28px 20px 24px; }
  .mega--schmal .mega__liste { padding-left: 0; gap: 2px; }
  .mega--schmal .mega__liste a { display: block; padding: 6px 0; font-size: 16px; color: var(--text); }
  .mega--schmal .mega__liste a:hover,
  .mega--schmal .mega__liste a[aria-current="page"] { color: var(--gelb); text-decoration: none; }
  .mega__kopf { min-height: 0; margin-bottom: 8px; }
  .mega__liste { padding-left: 32px; }   /* bündig unter dem Bereichsnamen: 20 px Nummer + 12 px Abstand */
  .mega__auf { display: none; }
  .mega__extra { padding-top: 14px; border-top: 2px solid var(--gelb); }
}

/* ---- Mobil und Tablet (S, M) ---- */
@media (max-width: 1099px) {
  html.js .kopf__nav {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--kopf-hoehe);
    bottom: 0;
    z-index: 49;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px var(--rand) 40px;
    background: var(--grund);
    border-top: 1px solid var(--linie);
    display: none;
  }
  html.js .kopf.ist-offen .kopf__nav { display: block; }
  html.menue-offen { overflow: hidden; }

  /* ohne JS: Navigation als Liste unter dem Logo, Kopf nicht klebend */
  html:not(.js) .kopf { position: relative; }
  html:not(.js) .kopf__innen { flex-wrap: wrap; padding-block: 12px; }
  html:not(.js) .kopf__nav { order: 3; flex-basis: 100%; padding: 8px 0 16px; }

  .hauptmenue > li { border-bottom: 1px solid var(--linie); }
  .hauptmenue__punkt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .hauptmenue__link { min-height: 60px; font-size: 22px; letter-spacing: -.01em; }
  .hauptmenue__link[aria-current] { color: var(--gelb); }
  .hauptmenue__auf { width: 52px; height: 52px; }
  .hauptmenue__auf::before { width: 16px; height: 16px; }

  .mega { grid-column: 1 / -1; display: none; }
  .mega.ist-offen,
  html:not(.js) .mega { display: block; }
  .mega__innen { padding: 0 0 18px 0; }
  .mega__gruppe { border-top: 1px solid var(--linie); }
  .mega__bereich { display: flex; flex-wrap: nowrap; padding: 13px 0; font-size: 18px; }
  .mega__bereich::before { min-width: 2.2em; }
  .mega__liste { display: none; margin: 0 0 12px 6px; padding: 0 0 4px 16px; border-left: 2px solid var(--gelb); }
  .mega__gruppe.ist-offen .mega__liste,
  html:not(.js) .mega__liste { display: grid; }
  .mega__liste a { padding: 7px 0; font-size: 16px; }
  .mega__liste--direkt { display: grid; margin: 0 0 14px 6px; padding: 0 0 4px 16px; border-left: 2px solid var(--gelb); }
  .mega__innen--schmal { padding: 4px 0 6px; }
  .mega__extra { padding: 18px 0 4px; border-top: 1px solid var(--linie); }

  .kopf__panelfuss { padding-top: 24px; display: grid; gap: 12px; }
}
@media (min-width: 1100px) {
  .kopf__panelfuss { display: none; }
}


/* --------------------------------------------------------------------------
   10. Brotkrumen (setzt bauen.py aus dem Kopfkommentar)
   -------------------------------------------------------------------------- */
.brotkrumen {
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}
.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 auto; /* zentriert wie .innen; margin:0 hatte die Zentrierung überschrieben (Jimmy 06.10. 17:05) */
  padding-block: 12px;
  list-style: none;
  font: 500 12.5px/1.5 var(--schrift-mono);
  letter-spacing: .01em;
}
.brotkrumen li { min-width: 0; color: var(--text-gedaempft); }
.brotkrumen li + li::before {
  content: "/";
  margin: 0 10px;
  color: var(--linie-stark);
}
.brotkrumen a { color: var(--text-gedaempft); text-decoration: none; }
.brotkrumen a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--gelb); text-underline-offset: 4px; }
.brotkrumen [aria-current="page"] { color: var(--text); }


/* --------------------------------------------------------------------------
   11. Hinweisbänder und Entwurfskennzeichnung
   Bänder für status vorlage/pilot setzt bauen.py automatisch.
   [data-nur-entwurf] ist in der Vorschau sichtbar markiert und fehlt mit --live.
   -------------------------------------------------------------------------- */
.hinweisband {
  position: relative;
  padding-block: 12px;
  font: 400 14px/1.45 var(--schrift-text);
}
.hinweisband__innen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
/* zwei Klassen: schlägt Regeln wie .fliesstext strong, wenn ein Band im Fließtext steht */
.hinweisband .hinweisband__titel {
  color: inherit;
  font: 500 13px/1.4 var(--schrift-mono);
  letter-spacing: .02em;
}
.hinweisband__text { opacity: .92; }
.hinweisband--vorlage {
  padding-top: 20px;
  background: var(--flaeche);
  color: var(--gelb);
  border-bottom: 1px solid var(--linie);
}
.hinweisband--vorlage::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: repeating-linear-gradient(135deg, var(--gelb) 0 10px, var(--anthrazit) 10px 20px);
}
.hinweisband--vorlage .hinweisband__text { color: var(--text-gedaempft); }
.hinweisband--pilot { background: var(--petrol); color: var(--weiss); }
.hinweisband--block { padding: 14px 20px; }   /* innerhalb einer Seite statt über die volle Breite */
.hinweisband--entwurf {
  background: var(--flaeche);
  color: var(--gelb);
  border-top: 1.5px dashed var(--gelb);
  border-bottom: 1.5px dashed var(--gelb);
}
.hinweisband--entwurf .hinweisband__text { color: var(--text-gedaempft); }

[data-nur-entwurf] {
  outline: 1.5px dashed var(--gelb);
  outline-offset: 3px;
}
section[data-nur-entwurf] { outline-offset: -8px; }   /* volle Breite: Linie nach innen, sonst unsichtbar */
[data-nur-entwurf]:not([data-nur-entwurf=""]) { position: relative; }
[data-nur-entwurf]:not([data-nur-entwurf=""])::before {
  content: "Entwurf · " attr(data-nur-entwurf);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  max-width: calc(100% - 16px);
  padding: 7px 10px 6px;
  background: var(--gelb);
  color: var(--anthrazit);
  font: 500 12px/1.3 var(--schrift-mono);
  letter-spacing: .01em;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   12. Seitenkopf für Unterseiten
   Text links, große Bildfläche rechts bis an den Bildschirmrand. Unten links
   schneidet die 45°-Kante eine Ecke ab, darin das gelbe Diagonalband (wie der
   Einstieg der Startseite, nur kleiner). Mobil: Text oben, Bild randabfallend darunter.
   -------------------------------------------------------------------------- */
.seitenkopf {
  --schnitt: clamp(64px, 11vw, 190px);
  display: grid;
  grid-template-columns:
    [voll-start] minmax(var(--rand), 1fr)
    [inhalt-start] minmax(0, calc(var(--breite) * .54))
    [mitte] minmax(0, calc(var(--breite) * .46))
    [inhalt-end] minmax(var(--rand), 1fr)
    [voll-end];
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}
.seitenkopf__text {
  grid-column: inhalt-start / mitte;
  align-self: center;
  min-width: 0;
  padding: clamp(48px, 6vw, 104px) clamp(28px, 4vw, 72px) clamp(44px, 5vw, 88px) 0;
}
.seitenkopf__titel { font-size: clamp(38px, 3.4vw + 20px, 76px); line-height: .98; letter-spacing: -.01em; }
.seitenkopf__titel--lang { font-size: clamp(32px, 2.5vw + 16px, 58px); line-height: 1.02; }   /* bauen.py setzt die Klasse ab 47 Zeichen */
/* Unterzeile zur H1: Textschrift, gedämpft, deutlich kleiner als die H1 und größer als die Einleitung */
.seitenkopf__unterzeile {
  max-width: 30ch;
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  color: var(--text);
  font: 600 clamp(19px, .6vw + 16px, 25px)/1.3 var(--schrift-text);
  letter-spacing: -.01em;
}
.seitenkopf__einleitung {
  max-width: 54ch;
  margin-top: clamp(18px, 2vw, 28px);
  font-size: clamp(18px, .3vw + 16px, 20px);
  line-height: 1.55;
  color: var(--text-gedaempft);
}
/* Kurzes gelbes Band in Schnittrichtung */
.seitenkopf__linie {
  display: block;
  width: 64px;
  height: 8px;
  margin-top: clamp(22px, 2.4vw, 32px);
  background: var(--gelb);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);
}
.seitenkopf .knopfreihe { margin-top: clamp(24px, 2.6vw, 36px); }
.seitenkopf__bild {
  grid-column: mitte / voll-end;
  position: relative;
  min-height: clamp(380px, 40vw, 660px);
}
.seitenkopf__bild > .bild,
.seitenkopf__bild > picture > .bild,
.seitenkopf__bild > .bildplatz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--schnitt) 100%, 0 calc(100% - var(--schnitt)));
}
.seitenkopf__bild::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: var(--schnitt);
  height: var(--schnitt);
  background: var(--gelb);
  clip-path: polygon(0 15%, 85% 100%, 70% 100%, 0 30%);
  pointer-events: none;
}
.seitenkopf__bild .bildplatz__beschriftung { left: auto; right: 14px; max-width: min(400px, calc(100% - var(--schnitt) - 28px)); }
@media (max-width: 899px) {
  .seitenkopf { grid-template-columns: [voll-start] var(--rand) [inhalt-start mitte] minmax(0, 1fr) [inhalt-end] var(--rand) [voll-end]; }
  .seitenkopf__text { grid-column: inhalt-start / inhalt-end; padding: 36px 0 36px; }
  .seitenkopf__bild { grid-column: voll-start / voll-end; min-height: 0; aspect-ratio: 4 / 3; }
}


/* --------------------------------------------------------------------------
   13. Faktenleiste
   <ul class="fakten"><li class="fakten__punkt"><strong class="fakten__titel">…</strong>
   <span class="fakten__text">…</span></li></ul>
   Spalten mit senkrechten Haarlinien, Titel mit dem Dreieck aus dem Logo.
   -------------------------------------------------------------------------- */
.fakten {
  --fk-abstand: clamp(20px, 2.4vw, 36px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.fakten__punkt {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 20px var(--fk-abstand) 22px 0;
  border-top: 1px solid var(--c-linie);
}
.fakten__titel {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
  font: 600 17px/1.3 var(--schrift-text);
}
.fakten__titel::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--c-marke);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.fakten__text { color: var(--c-gedaempft); font-size: 15px; line-height: 1.55; }
/* Fakt als Link, z. B. Startseite „Köln und NRW“ → /einsatzorte/nrw/ (Unterstrich wie .textlink) */
.fakten__link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--c-marke);
  color: inherit;
  text-decoration: none;
}
.fakten__link .pfeil { color: var(--c-marke); }
.fakten__link:hover .pfeil { }
@media (min-width: 760px) {
  /* senkrechte Linien zwischen den Spalten; die erste Linie jeder Zeile liegt im unsichtbaren Rand */
  .fakten {
    margin-left: calc(-1 * var(--fk-abstand));
    overflow: hidden;
    background: linear-gradient(var(--c-linie), var(--c-linie)) right top / calc(100% - var(--fk-abstand)) 1px no-repeat;
  }
  .fakten__punkt { margin-left: -1px; padding: 22px var(--fk-abstand) 26px; border-top: 0; border-left: 1px solid var(--c-linie); }
}


/* --------------------------------------------------------------------------
   14. Text mit Randspalte
   <div class="randspalte"><div class="randspalte__haupt fliesstext">…</div>
   <aside class="randspalte__rand">…</aside></div>
   -------------------------------------------------------------------------- */
.randspalte {
  display: grid;
  gap: clamp(40px, 5vw, 80px);
}
.randspalte__haupt, .randspalte__rand { min-width: 0; }
@media (min-width: 1000px) {
  .randspalte { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); align-items: start; }
  .randspalte--links { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
  .randspalte--links .randspalte__rand { order: -1; }
  .randspalte__rand--klebend { position: sticky; top: calc(var(--kopf-hoehe) + 24px); }
}
/* Randkasten: Fläche mit Logo-Ecke (Schnitt + kleines Dreieck) */
.randkasten {
  --e: 28px;
  position: relative;
  padding: 24px 24px 26px;
  background: linear-gradient(225deg, transparent 0 calc(var(--e) * .7071 - .5px), var(--c-flaeche) calc(var(--e) * .7071 + .5px));
}
.randkasten::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--e) * .714);
  height: calc(var(--e) * .714);
  background: var(--c-marke);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.randkasten + .randkasten { margin-top: 20px; }
.randkasten__titel {
  margin-bottom: 12px;
  padding-right: 24px;
  font: 600 19px/1.25 var(--schrift-text);
  color: var(--c-text);
}
.randkasten p, .randkasten li { font-size: 16px; }


/* --------------------------------------------------------------------------
   15. Bild und Text im Wechsel
   <div class="wechsel"><div class="wechsel__zeile"><figure class="wechsel__bild abb">…
   </figure><div class="wechsel__text">…</div></div>…</div>
   Jede zweite Zeile spiegelt sich automatisch.
   -------------------------------------------------------------------------- */
.wechsel { display: grid; gap: clamp(56px, 8vw, 120px); }
.wechsel__zeile { display: grid; gap: clamp(22px, 3vw, 40px); align-items: center; }
.wechsel__bild, .wechsel__text { min-width: 0; }
.wechsel__bild { --ecke-bild: clamp(24px, 3vw, 44px); }
.wechsel__text .titel--klein { margin-bottom: 14px; }
.wechsel__text > .kennung { margin-bottom: 14px; }
@media (min-width: 900px) {
  .wechsel__zeile { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--luecke) clamp(40px, 5vw, 80px); }
  .wechsel__zeile:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .wechsel__zeile:nth-child(even) .wechsel__bild { order: 2; }
}


/* --------------------------------------------------------------------------
   16. Merkmalsliste „Materialien · Objekte · Rückstände“
   Datenblatt: Spalten mit Haarlinien, Spaltentitel mit Mono-Index.
   -------------------------------------------------------------------------- */
.merkmale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  border-top: 1px solid var(--c-linie-stark);
  counter-reset: merkmal;
}
.merkmale__spalte {
  min-width: 0;
  padding: 22px 0 8px;
  counter-increment: merkmal;
}
@media (min-width: 800px) {
  .merkmale__spalte { padding: 24px clamp(18px, 2.4vw, 36px) 12px; border-left: 1px solid var(--c-linie); }
  .merkmale__spalte:first-child { border-left: 0; padding-left: 0; }
}
.merkmale__titel {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  font: 600 20px/1.25 var(--schrift-text);
  letter-spacing: -.005em;
}
.merkmale__titel::before {
  content: none; /* Nummerierung aus (Jimmy 06.10.) */
  flex: none;
  color: var(--c-marke);
  font: 500 13px/1 var(--schrift-mono);
}
.merkmale__liste { margin: 0; padding: 0; list-style: none; }
.merkmale__liste li {
  padding: 10px 0;
  border-bottom: 1px solid var(--c-linie);
  font-size: 16px;
  line-height: 1.45;
}
.merkmale__liste li:last-child { border-bottom: 0; }


/* --------------------------------------------------------------------------
   17. Schrittfolge / Ablauf
   <ol class="ablauf" role="list"><li class="ablauf__schritt"><span class="ablauf__nr"
   aria-hidden="true">01</span><h3 class="ablauf__titel">…</h3><p class="ablauf__text">…</p>
   <p class="ablauf__ergebnis">…</p></li></ol>
   Desktop: Spalten an einer Linie, zwischen den Schritten ein gelber Schnitt.
   Handy: Zeitleiste.
   -------------------------------------------------------------------------- */
.ablauf {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ablauf__schritt {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}
.ablauf__nr {
  font: 500 clamp(40px, 2.4vw + 22px, 64px)/.9 var(--schrift-mono);
  color: var(--c-marke);
  letter-spacing: -.04em;
}
.ablauf__titel { font-size: clamp(21px, .6vw + 17px, 26px); line-height: 1.15; letter-spacing: -.012em; }
.ablauf__text { color: var(--c-gedaempft); font-size: 16px; line-height: 1.55; margin: 0; }
.ablauf__ergebnis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin: 6px 0 0;
  padding: 5px 9px 4px;
  box-shadow: inset 0 0 0 1px var(--c-linie-stark);
  color: var(--c-text);
  font: 500 12.5px/1.3 var(--schrift-mono);
  letter-spacing: .01em;
}
@media (min-width: 900px) {
  .ablauf { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--luecke); }
  .ablauf__schritt { padding-top: 30px; border-top: 1px solid var(--c-linie-stark); }
  .ablauf__schritt::before {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;
    width: 100%;
    height: 3px;
    background: var(--c-marke);
    transform: scaleX(.16);
    transform-origin: left;
  }
  .ablauf__schritt:hover::before { }
  /* gelber Schnitt zwischen zwei Schritten, in Logo-Richtung */
  .ablauf__schritt::after {
    content: "";
    position: absolute;
    right: calc(var(--luecke) * -.5 - 7px);
    top: -8px;
    width: 14px;
    height: 16px;
    background: var(--c-marke);
    clip-path: polygon(0 0, 30% 0, 100% 100%, 70% 100%);
  }
  .ablauf__schritt:last-child::after { display: none; }
}
@media (max-width: 899px) {
  .ablauf { gap: 0; }
  .ablauf__schritt {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 16px;
    padding: 0 0 32px;
  }
  .ablauf__schritt > * { grid-column: 2; }
  .ablauf__nr { grid-column: 1; grid-row: 1 / span 4; font-size: 34px; padding-top: 2px; }
  .ablauf__schritt::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 44px;
    bottom: 10px;
    width: 1px;
    background: var(--c-linie-stark);
  }
  .ablauf__schritt:last-child { padding-bottom: 0; }
  .ablauf__schritt:last-child::before { display: none; }
}


/* --------------------------------------------------------------------------
   18. Kostenfaktoren
   Faktoren als Rechnung: A + B + C … = Aufwand. Keine Preise.
   -------------------------------------------------------------------------- */
.kostenfaktoren__liste {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kostenfaktoren__faktor {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 20px 0;
  border-top: 1px solid var(--c-linie);
}
.kostenfaktoren__name {
  font: 600 clamp(21px, .8vw + 16px, 27px)/1.15 var(--schrift-text);
  letter-spacing: -.012em;
  color: var(--c-text);
}
.kostenfaktoren__text { color: var(--c-gedaempft); font-size: 15px; line-height: 1.55; }
.kostenfaktoren__plus {
  font: 500 26px/1 var(--schrift-mono);
  color: var(--c-marke);
}
.kostenfaktoren__summe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin: 0;
  padding: 22px 0;
  border-top: 3px solid var(--c-marke);
  border-bottom: 1px solid var(--c-linie);
}
.kostenfaktoren__gleich {
  font: 500 clamp(30px, 1.6vw + 18px, 44px)/1 var(--schrift-mono);
  color: var(--c-marke);
}
.kostenfaktoren__ergebnis {
  font: 700 clamp(28px, 1.6vw + 17px, 44px)/1.05 var(--schrift-text);
  letter-spacing: -.022em;
}
.kostenfaktoren__dazu { color: var(--c-gedaempft); font-size: 16px; }
.kostenfaktoren__dazu strong { color: var(--c-text); font-weight: 600; }
@media (max-width: 999px) {
  .kostenfaktoren__faktor {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 10px;
  }
  .kostenfaktoren__faktor > * { grid-column: 2; }
  .kostenfaktoren__plus { grid-column: 1; grid-row: 1; font-size: 24px; }
}
@media (min-width: 1000px) {
  .kostenfaktoren__liste {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0 clamp(36px, 3vw, 52px);
  }
  .kostenfaktoren__faktor { padding: 26px 0 30px; }
  .kostenfaktoren__plus {
    position: absolute;
    left: calc(clamp(36px, 3vw, 52px) * -.5);
    top: 24px;
    transform: translateX(-50%);
  }
  .kostenfaktoren__faktor:first-child .kostenfaktoren__plus { display: none; }
  /* Ab sechs Faktoren: drei Spalten je Zeile, das Plus am Zeilenanfang entfällt.
     Besser höchstens fünf Faktoren und den Rest als .kostenfaktoren__dazu oder Faktenleiste. */
  .kostenfaktoren__liste:has(> :nth-child(6)) { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kostenfaktoren__liste:has(> :nth-child(6)) > :nth-child(3n+1) .kostenfaktoren__plus { display: none; }
}


/* --------------------------------------------------------------------------
   19. Grenzen-Hinweis
   Klar abgesetzt mit Warnstreifen. Für „Wo der Laser nicht passt“.
   -------------------------------------------------------------------------- */
.grenzen {
  position: relative;
  padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 44px) clamp(24px, 3vw, 40px) calc(clamp(22px, 3vw, 44px) + 12px);
  background: var(--c-flaeche);
  color: var(--c-text);
}
.grenzen::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: repeating-linear-gradient(135deg, var(--gelb) 0 8px, var(--anthrazit) 8px 16px);
}
.grenzen__titel { font-size: clamp(21px, .7vw + 17px, 27px); line-height: 1.2; margin-bottom: 14px; letter-spacing: -.012em; }
.grenzen ul { margin: 0; padding: 0; list-style: none; }
.grenzen li { position: relative; padding: 9px 0 9px 26px; border-top: 1px solid var(--c-linie); }
.grenzen li:first-child { border-top: 0; }
.grenzen li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(9px + .75em);
  width: 12px;
  height: 2px;
  background: var(--c-text);
}


/* --------------------------------------------------------------------------
   20. FAQ-Akkordeon (natives <details>, funktioniert ohne JS)
   <div class="faq"><details class="faq__eintrag" name="faq"><summary class="faq__frage">…
   </summary><div class="faq__antwort"><p>…</p></div></details></div>
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--c-linie-stark); }
.faq__eintrag { border-bottom: 1px solid var(--c-linie); }
.faq__frage {
  position: relative;
  display: block;
  padding: 22px 56px 22px 0;
  font: 600 clamp(18px, .3vw + 16.5px, 20px)/1.4 var(--schrift-text);
  cursor: pointer;
  list-style: none;
}
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage::before,
.faq__frage::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--c-marke);
}
.faq__frage::after { transform: rotate(90deg); }
.faq__eintrag[open] > .faq__frage::after { transform: rotate(0deg); }
.faq__frage:hover { color: var(--c-link); }
.abschnitt--hell .faq__frage:hover { color: var(--petrol); }
.faq__antwort {
  max-width: 70ch;
  padding: 0 0 24px;
  color: var(--c-gedaempft);
}
/* FAQ-Abschnitt: Kopf links (klebt beim Scrollen), Akkordeon rechts. Standard für alle Seiten.
   <div class="innen fragen__raster"><div class="fragen__kopf"><p class="kennung">Fragen</p><h2 …>…</h2>
   <p class="fragen__hinweis">…</p></div><div class="faq">…</div></div> */
.fragen__raster { display: grid; gap: clamp(28px, 4vw, 64px); }
.fragen__raster > * { min-width: 0; }
@media (min-width: 1000px) {
  .fragen__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .fragen__kopf { position: sticky; top: calc(var(--kopf-hoehe) + 32px); }
}
.fragen__hinweis { margin-top: 20px; color: var(--c-gedaempft); }
.fragen__hinweis a { color: var(--c-link); text-underline-offset: 3px; }


/* --------------------------------------------------------------------------
   21. Bildmosaik der Leistungsbereiche (Leistungsübersicht)
   Sieben Felder, das erste (Rost & Oxide) am größten. Jedes Feld trägt seine
   Nummer 01–07 in Mono, Bildflächen als Duoton mit Schnitt. Anwendungslinks
   erscheinen bei Hover/Fokus, mobil immer sichtbar.
   Der Titel-Link deckt das ganze Feld ab (Klick aufs Bild = Bereichsseite).
   -------------------------------------------------------------------------- */
.mosaik {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mosaik;
}
.mosaik__feld {
  --e: clamp(22px, 2.4vw, 36px);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  min-height: 420px;
  overflow: hidden;
  background: var(--anthrazit);
  clip-path: polygon(0 0, calc(100% - var(--e)) 0, 100% var(--e), 100% 100%, 0 100%);
  counter-increment: mosaik;
}
.mosaik__feld--gross { --e: clamp(40px, 4.6vw, 76px); }
.mosaik__feld > .bild,
.mosaik__feld > picture > .bild,
.mosaik__feld > .bildplatz {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}
.mosaik__feld::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(17, 20, 24, .95) 0%, rgba(17, 20, 24, .74) 34%, rgba(17, 20, 24, .12) 70%, rgba(17, 20, 24, 0) 100%);
  pointer-events: none;
}
.mosaik__feld:hover > .bild { }
.mosaik__feld .bildplatz__beschriftung { left: 14px; bottom: auto; top: 50px; max-width: min(380px, calc(100% - 28px - var(--e))); }
.mosaik__feld .bildplatz__motiv { -webkit-line-clamp: 2; }
.mosaik__feld .abb__nr { top: 14px; left: 14px; }
.mosaik__inhalt {
  min-width: 0;
  padding: clamp(18px, 2vw, 30px);
  border-bottom: 3px solid transparent;
}
.mosaik__feld:hover .mosaik__inhalt,
.mosaik__feld:focus-within .mosaik__inhalt { border-bottom-color: var(--gelb); }
.mosaik__titel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: clamp(26px, 1.1vw + 18px, 38px);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.mosaik__titel::before {
  content: none; /* Nummerierung aus (Jimmy 06.10.) */
  flex-basis: 100%;
  color: var(--gelb);
  font: 500 13px/1 var(--schrift-mono);
  letter-spacing: 0;
}
.mosaik__titel a { color: var(--text); text-decoration: none; }
.mosaik__titel a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.mosaik__titel a:focus-visible { outline: none; }
.mosaik__feld:has(.mosaik__titel a:focus-visible) { outline: 3px solid var(--gelb); outline-offset: -3px; }
.mosaik__titel .marke-pilot { position: relative; z-index: 1; }
.mosaik__text {
  max-width: 44ch;
  margin: 10px 0 0;
  color: var(--text-gedaempft);
  font-size: 15px;
  line-height: 1.5;
}
.mosaik__mehr { display: grid; }
.mosaik__mehr-innen { min-height: 0; overflow: hidden; }
.mosaik__links {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 14px 0 2px;
  list-style: none;
}
.mosaik__links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--text);
  font: 600 15px/1.25 var(--schrift-text);
  text-decoration: underline;
  text-decoration-color: rgba(245, 230, 0, .75);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
.mosaik__links a:hover { color: var(--gelb); }
.mosaik__unter { color: var(--text-gedaempft); font: 500 12px/1.3 var(--schrift-mono); }

/* Großes Feld */
.mosaik__feld--gross .mosaik__titel { font-size: clamp(34px, 2.6vw + 17px, 64px); line-height: 1.02; letter-spacing: -.026em; }
.mosaik__feld--gross .mosaik__text { font-size: 17px; }

/* Desktop: asymmetrisches Raster, Links erscheinen bei Hover/Fokus */
@media (min-width: 1100px) {
  .mosaik {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, clamp(280px, 22vw, 340px)) clamp(340px, 26vw, 400px);
  }
  .mosaik__feld { min-height: 0; }
  .mosaik__feld:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
  .mosaik__feld:nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
  .mosaik__feld:nth-child(3) { grid-column: 8 / 13; grid-row: 2; }
  .mosaik__feld:nth-child(n+4) { grid-column: span 3; grid-row: 3; }
  .mosaik__feld:nth-child(n+4) .mosaik__titel { font-size: clamp(22px, .8vw + 14px, 28px); }
  .mosaik__feld:nth-child(n+4) .mosaik__text { font-size: 14px; }
  .mosaik__feld:nth-child(n+4) .bildplatz__beschriftung { display: none; }
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .mosaik__mehr {
    grid-template-rows: 0fr;
  }
  .mosaik__links { opacity: 0; }
  .mosaik__feld:hover .mosaik__mehr,
  .mosaik__feld:focus-within .mosaik__mehr { grid-template-rows: 1fr; }
  .mosaik__feld:hover .mosaik__links,
  .mosaik__feld:focus-within .mosaik__links { opacity: 1; }
  /* Bildplatz-Beschriftung macht den Anwendungslinks Platz */
  .mosaik__feld:hover .bildplatz__beschriftung,
  .mosaik__feld:focus-within .bildplatz__beschriftung { opacity: 0; }
}

/* Variante .mosaik--offen (Leistungsübersicht): Anwendungslinks auch auf dem Desktop immer sichtbar,
   die Zeilen wachsen mit dem Inhalt. Bildplatz-Etiketten nur im großen Feld. */
@media (min-width: 1100px) {
  .mosaik--offen { grid-template-rows: none; grid-auto-rows: minmax(clamp(280px, 22vw, 340px), auto); }
  .mosaik--offen .mosaik__feld:not(:first-child) .bildplatz__beschriftung { display: none; }
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .mosaik--offen .mosaik__mehr { grid-template-rows: 1fr; }
  .mosaik--offen .mosaik__links { opacity: 1; }
}

/* Tablet: zwei Spalten, erstes Feld über die volle Breite */
@media (min-width: 700px) and (max-width: 1099px) {
  .mosaik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaik__feld { min-height: 440px; }
  .mosaik__feld:nth-child(1) { grid-column: 1 / -1; min-height: 520px; }
  .mosaik__feld:last-child:nth-child(even) { grid-column: 1 / -1; min-height: 360px; }
}

/* Handy: eine Spalte, große Bildflächen */
@media (max-width: 699px) {
  .mosaik { grid-template-columns: minmax(0, 1fr); }
  .mosaik__feld { min-height: clamp(400px, 112vw, 520px); }
  .mosaik__feld .bildplatz__beschriftung { display: none; }
}


/* --------------------------------------------------------------------------
   22. Bereichswähler (Startseite, auch für Übersichten geeignet)
   Links die Bereiche als große typografische Liste mit Mono-Nummern, rechts EINE
   Bildfläche, die bei Hover/Fokus wechselt (nur mit Maus ab 1000 px).
   Touch, Tablet, Handy: jeder Bereich mit eigener Bildfläche untereinander.
   Ohne JS: erster Bereich sichtbar, Hover/Fokus wechselt per CSS.
   Mit JS (pulswerk.js): .waehler.mit-js, aktiver Eintrag .ist-aktiv.
   -------------------------------------------------------------------------- */
.waehler { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-linie-stark); counter-reset: bereich; }
.waehler__eintrag { padding-block: 24px 32px; border-bottom: 1px solid var(--c-linie); }
.waehler__titel { counter-increment: bereich; font-weight: 600; font-size: clamp(24px, 1.6vw + 16px, 36px); line-height: 1.12; letter-spacing: -.018em; }
.waehler__titel a { display: flex; align-items: baseline; gap: 14px; color: var(--c-text); text-decoration: none; }
.waehler__nr { flex: none; min-width: 2.2em; color: var(--c-marke); font: 500 13px/1 var(--schrift-mono); letter-spacing: 0; }
.waehler__name { min-width: 0; }
.waehler__name .marke-pilot { margin-left: 10px; position: relative; top: -.15em; }
.waehler__titel a:hover .waehler__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--gelb); }
.waehler__inhalt { display: grid; gap: 18px; margin-top: 18px; }
.waehler__bild { --s: 28px; position: relative; min-width: 0; margin: 0; }
.waehler__bild > .bild,
.waehler__bild > picture > .bild,
.waehler__bild > .bildplatz { clip-path: polygon(0 0, calc(100% - var(--s)) 0, 100% var(--s), 100% 100%, 0 100%); }
.waehler__text { min-width: 0; }
.waehler__kurz { margin: 0; font-size: 17px; color: var(--c-text); }
.waehler__mehr {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--gelb);
  color: var(--c-text);
  font-weight: 600;
  text-decoration: none;
}
.waehler__mehr .pfeil { color: var(--gelb); }
.waehler__mehr:hover { color: var(--gelb); }
.waehler__mehr:hover .pfeil { }
.waehler__links { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-linie); counter-reset: anwendung; }
.waehler__links li { border-bottom: 1px solid var(--c-linie); counter-increment: anwendung; }
.waehler__links a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 11px 2px;
  color: var(--c-text);
  font-weight: 600;
  text-decoration: none;
  hyphens: auto;
  hyphenate-limit-chars: 18 8 6;
  overflow-wrap: break-word;
}
/* Katalognummer: Bereich.Anwendung, z. B. 01.1 Rostentfernung (wie „Direkt zu“) */
.waehler__links a::before {
  content: none; /* Nummerierung aus (Jimmy 06.10.) */
  flex: none;
  min-width: 3.4em;
  color: var(--c-gedaempft);
  font: 500 12.5px/1 var(--schrift-mono);
}
.waehler__links a .pfeil { margin-left: auto; color: var(--c-gedaempft); }
.waehler__links a:hover { color: var(--gelb); }
.waehler__links a:hover .pfeil { color: var(--gelb); }

/* Mittlere Breite (und Touch): Text links, Bild rechts, je Bereich eine Zeile */
@media (min-width: 760px) {
  .waehler__eintrag { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); }
  .waehler__titel { grid-column: 1; grid-row: 1; }
  .waehler__inhalt { display: contents; }
  .waehler__bild { grid-column: 2; grid-row: 1 / span 3; --s: 44px; }
  .waehler__text { grid-column: 1; grid-row: 2; margin-top: 16px; }
  .waehler__links { grid-column: 1; grid-row: 3; margin-top: 20px; align-self: start; }
}

/* Großer Bildschirm mit Maus: Wähler mit EINER Bildfläche */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .waehler {
    --spalt: clamp(40px, 5vw, 80px);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: repeat(7, auto) 1fr;
    column-gap: var(--spalt);
    border-top: 0;
    container-type: inline-size;
  }
  .waehler__eintrag { display: contents; }
  .waehler__titel {
    grid-column: 1;
    position: relative;
    margin-right: calc(-1 * var(--spalt));
    padding-right: var(--spalt);
    border-top: 1px solid var(--c-linie);
    /* an die Listenbreite gekoppelt: der längste Titel bleibt einzeilig */
    font-size: clamp(22px, 2.75cqi, 38px);
  }
  .waehler__eintrag:last-child .waehler__titel { border-bottom: 1px solid var(--c-linie); }
  .waehler__eintrag:nth-child(1) .waehler__titel { grid-row: 1; }
  .waehler__eintrag:nth-child(2) .waehler__titel { grid-row: 2; }
  .waehler__eintrag:nth-child(3) .waehler__titel { grid-row: 3; }
  .waehler__eintrag:nth-child(4) .waehler__titel { grid-row: 4; }
  .waehler__eintrag:nth-child(5) .waehler__titel { grid-row: 5; }
  .waehler__eintrag:nth-child(6) .waehler__titel { grid-row: 6; }
  .waehler__eintrag:nth-child(7) .waehler__titel { grid-row: 7; }
  .waehler__eintrag:nth-child(8) .waehler__titel { grid-row: 8; }
  .waehler__titel a { padding-block: 16px 18px; color: rgba(184, 194, 204, .6); }
  .waehler__titel .waehler__nr { color: var(--c-gedaempft); }
  .waehler__titel a:hover .waehler__name { text-decoration: none; }
  .waehler__name .marke-pilot { top: -.25em; }
  /* gelbe Verbindung vom gewählten Titel zur Bildfläche */
  .waehler__titel::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: calc(var(--spalt) - 24px);
    height: 2px;
    background: var(--gelb);
    transform: scaleX(0);
    transform-origin: left center;
  }

  .waehler__inhalt {
    display: grid;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px 40px;
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
  }
  .waehler__bild, .waehler__text, .waehler__links { grid-column: auto; grid-row: auto; margin-top: 0; }
  .waehler__bild { grid-column: 1 / -1; --s: clamp(44px, 5vw, 76px); }
  .waehler__bild::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: calc(var(--s) * .714);
    height: calc(var(--s) * .714);
    background: var(--gelb);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
  .waehler__kurz { font-size: 18px; }

  /* Ohne JS: erster Bereich sichtbar, Hover/Fokus wechselt */
  .waehler:not(.mit-js) .waehler__eintrag:first-child .waehler__inhalt,
  .waehler:not(.mit-js) .waehler__eintrag:is(:hover, :focus-within) .waehler__inhalt,
  .waehler.mit-js .waehler__eintrag.ist-aktiv .waehler__inhalt { opacity: 1; pointer-events: auto; z-index: 1; }
  .waehler:not(.mit-js):has(.waehler__eintrag:is(:hover, :focus-within)) .waehler__eintrag:first-child:not(:hover, :focus-within) .waehler__inhalt { opacity: 0; pointer-events: none; z-index: 0; }

  .waehler:not(.mit-js) .waehler__eintrag:first-child .waehler__titel a,
  .waehler:not(.mit-js) .waehler__eintrag:is(:hover, :focus-within) .waehler__titel a,
  .waehler.mit-js .waehler__eintrag.ist-aktiv .waehler__titel a { color: var(--c-text); }
  .waehler:not(.mit-js) .waehler__eintrag:first-child .waehler__nr,
  .waehler:not(.mit-js) .waehler__eintrag:is(:hover, :focus-within) .waehler__nr,
  .waehler.mit-js .waehler__eintrag.ist-aktiv .waehler__nr { color: var(--gelb); }
  .waehler:not(.mit-js) .waehler__eintrag:first-child .waehler__titel::after,
  .waehler:not(.mit-js) .waehler__eintrag:is(:hover, :focus-within) .waehler__titel::after,
  .waehler.mit-js .waehler__eintrag.ist-aktiv .waehler__titel::after { }
  .waehler:not(.mit-js):has(.waehler__eintrag:is(:hover, :focus-within)) .waehler__eintrag:first-child:not(:hover, :focus-within) .waehler__titel a { color: rgba(184, 194, 204, .6); }
  .waehler:not(.mit-js):has(.waehler__eintrag:is(:hover, :focus-within)) .waehler__eintrag:first-child:not(:hover, :focus-within) .waehler__nr { color: var(--c-gedaempft); }
  .waehler:not(.mit-js):has(.waehler__eintrag:is(:hover, :focus-within)) .waehler__eintrag:first-child:not(:hover, :focus-within) .waehler__titel::after { }
}


/* Breiter Desktop: Text und Anwendungslinks unter der Bildfläche nebeneinander */
@media (min-width: 1240px) and (hover: hover) and (pointer: fine) {
  .waehler__inhalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Handy: flachere Bildflächen, damit die sieben Bereiche nicht zu lang werden */
@media (max-width: 759px) {
  .waehler__bild > .bild,
  .waehler__bild > picture > .bild,
  .waehler__bild > .bildplatz { aspect-ratio: 16 / 9 !important; object-fit: cover; }
}


/* --------------------------------------------------------------------------
   23. Band „Direkt zu“: Zeile mit großen Textlinks und Mono-Nummern
   <nav class="haeufig"><h3 class="kennung haeufig__titel">…</h3><ul class="haeufig__liste">
   <li><a class="haeufig__link" href="…"><span class="haeufig__nr" aria-hidden="true">01.1</span>
   Rostentfernung <span class="pfeil" aria-hidden="true"></span></a></li></ul></nav>
   -------------------------------------------------------------------------- */
.haeufig {
  display: grid;
  gap: 0;
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 2px solid var(--gelb);
}
.haeufig__titel {
  margin: 0;
  padding: 18px 0 12px;
}
.haeufig__liste {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.haeufig__liste li { min-width: 0; border-top: 1px solid var(--c-linie); }
.haeufig__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 18px 0;
  color: var(--c-text);
  font: 600 clamp(21px, .8vw + 16px, 28px)/1.15 var(--schrift-text);
  letter-spacing: -.015em;
  text-decoration: none;
}
.haeufig__nr {
  flex: none;
  min-width: 3.4em;
  color: var(--c-marke);
  font: 500 13px/1 var(--schrift-mono);
  letter-spacing: 0;
}
.haeufig__link .pfeil { width: .72em; height: .72em; margin-left: auto; color: var(--c-marke); }
.haeufig__link:hover { color: var(--c-link); }
.haeufig__link:hover .pfeil { }
@media (min-width: 1100px) {
  .haeufig { grid-template-columns: minmax(150px, 1fr) minmax(0, 5fr); align-items: stretch; }
  .haeufig__titel { padding: 26px 24px 0 0; }
  .haeufig__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .haeufig__liste li { border-top: 0; border-left: 1px solid var(--c-linie); }
  .haeufig__link {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-height: 148px;
    padding: 26px clamp(16px, 1.6vw, 28px) 22px;
  }
  .haeufig__link .pfeil { margin-left: 0; }
}


/* --------------------------------------------------------------------------
   24. Vorher-nachher-Vergleich (Schieberegler)
   Mit JS: zwei Ebenen übereinander, Regler verschiebt die Teilung.
   Ohne JS: beide Bilder nebeneinander. Fotos hier in echter Farbe.
   -------------------------------------------------------------------------- */
.vergleich { margin: 0; display: grid; gap: var(--luecke); }
.vergleich__buehne {
  --teilung: 50%;
  --e: clamp(28px, 3vw, 48px);
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--anthrazit);
  user-select: none;
  clip-path: polygon(0 0, calc(100% - var(--e)) 0, 100% var(--e), 100% 100%, 0 100%);
}
.vergleich__ebene { position: absolute; inset: 0; }
.vergleich__ebene > .bild,
.vergleich__ebene > picture > .bild,
.vergleich__ebene > .bildplatz { width: 100%; height: 100%; aspect-ratio: auto !important; }
.vergleich__ebene--nachher { clip-path: inset(0 0 0 var(--teilung)); }
.vergleich__ebene--vorher .bildplatz { background-image: var(--schraffur), linear-gradient(135deg, #17191C 0%, #20262D 60%, #2A323B 100%); }
.vergleich__ebene .bildplatz__beschriftung { bottom: auto; top: 14px; max-width: calc(50% - 40px); }
@media (max-width: 699px) {
  .vergleich__ebene .bildplatz__motiv { display: none; }
}
.vergleich__ebene--nachher .bildplatz__beschriftung { left: auto; right: 14px; text-align: right; justify-items: end; }
.vergleich__marke {
  position: absolute;
  bottom: 14px;
  z-index: 2;
  padding: 6px 9px 5px;
  background: rgba(17, 20, 24, .86);
  color: var(--text);
  font: 500 12.5px/1 var(--schrift-mono);
  letter-spacing: .02em;
}
.vergleich__ebene--vorher .vergleich__marke { left: 14px; }
.vergleich__ebene--nachher .vergleich__marke { right: 14px; }
.vergleich__griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--teilung);
  z-index: 3;
  width: 3px;
  margin-left: -1.5px;
  background: var(--gelb);
  pointer-events: none;
}
.vergleich__griff::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2317191C' d='M9 6 3 12l6 6V6zm6 0v12l6-6-6-6z'/%3E%3C/svg%3E") center / 22px no-repeat,
    var(--gelb);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.vergleich__regler {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
/* Fokus als Rahmen innen: die Bühne ist beschnitten, ein Außenrahmen wäre an der Ecke abgeschnitten */
.vergleich__buehne:has(.vergleich__regler:focus-visible)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  box-shadow: inset 0 0 0 3px var(--c-fokus);
  pointer-events: none;
}
html:not(.js) .vergleich__buehne { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; aspect-ratio: auto; }
html:not(.js) .vergleich__ebene { position: relative; aspect-ratio: 4 / 3; clip-path: none; }
html:not(.js) .vergleich__regler,
html:not(.js) .vergleich__griff { display: none; }

/* Angaben zum Vergleich: Material, Rückstand, Reinigungsziel, Ergebnis */
.vergleich__daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0 var(--luecke);
  margin: 0;
}
.vergleich__daten > div { padding: 14px 0 16px; border-top: 1px solid var(--c-linie); min-width: 0; }
.vergleich__daten dt {
  margin-bottom: 6px;
  color: var(--c-gedaempft);
  font: 500 12.5px/1.3 var(--schrift-mono);
  letter-spacing: .02em;
}
.vergleich__daten dd { margin: 0; font-size: 17px; line-height: 1.45; }
.vergleich__leer { color: var(--c-gedaempft); font-style: italic; }


/* --------------------------------------------------------------------------
   25. Zielgruppen / Branchen-Einstieg
   Bild links, Gruppen als große Liste rechts.
   -------------------------------------------------------------------------- */
.gruppen {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
}
.gruppen__bild, .gruppen__inhalt { min-width: 0; }
.gruppen__liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-linie-stark); counter-reset: gruppe; }
.gruppen__eintrag {
  display: grid;
  gap: 10px;
  padding: clamp(22px, 2.4vw, 32px) 0;
  border-bottom: 1px solid var(--c-linie);
  counter-increment: gruppe;
}
.gruppen__titel { display: flex; align-items: baseline; gap: 14px; font-size: clamp(23px, 1vw + 17px, 32px); line-height: 1.12; letter-spacing: -.016em; }
/* Gruppentitel als Link (Branchenübersicht): keine Unterstreichung, gelber Strich beim Zeigen */
.gruppen__titel a { color: inherit; text-decoration: none; }
.gruppen__titel a:hover,
.gruppen__titel a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--gelb); }
.gruppen__titel a .pfeil { margin-left: 10px; color: var(--gelb); }
.gruppen__titel::before {
  content: none; /* Nummerierung aus (Jimmy 06.10.) */
  flex: none;
  min-width: 2em;
  color: var(--c-marke);
  font: 500 13px/1 var(--schrift-mono);
  letter-spacing: 0;
}
.gruppen__text { max-width: 56ch; color: var(--c-gedaempft); margin: 0; padding-left: 40px; }   /* 26 px Nummer + 14 px Abstand */
.gruppen__zusatz { margin-top: 24px; color: var(--c-gedaempft); font-size: 16px; }
.gruppen__zusatz a { color: var(--c-link); text-underline-offset: 3px; }
.gruppen__text a { color: var(--c-link); text-underline-offset: 3px; }   /* „Passt dazu“-Links auf Ortsseiten */
@media (max-width: 699px) {
  .gruppen__text { padding-left: 0; }
}
@media (min-width: 1000px) {
  .gruppen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .gruppen__bild { position: sticky; top: calc(var(--kopf-hoehe) + 32px); }
}


/* --------------------------------------------------------------------------
   26. Verwandte Leistungen: Register mit großen Namen statt Kartenraster
   -------------------------------------------------------------------------- */
.verwandt__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 0 var(--luecke);
  margin: 0;
  padding: 0;
  list-style: none;
}
.verwandt__liste li { min-width: 0; border-top: 1px solid var(--c-linie); }
.verwandt__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px 16px;
  padding: 18px 0 20px;
  color: var(--c-text);
  text-decoration: none;
}
.verwandt__bereich {
  grid-column: 1 / -1;
  color: var(--c-gedaempft);
  font: 500 12.5px/1.3 var(--schrift-mono);
  letter-spacing: .01em;
}
.verwandt__name {
  min-width: 0;
  font: 600 clamp(21px, .7vw + 17px, 27px)/1.15 var(--schrift-text);
  letter-spacing: -.014em;
  hyphens: auto;             /* Beschichtungsvorbereitung passt sonst nicht in die Spalte */
  hyphenate-limit-chars: 18 8 6;   /* „Brand & Verunreinigungen“: kurze Wörter rutschen ganz in die nächste Zeile */
  overflow-wrap: break-word;
}
.verwandt__link .pfeil { color: var(--c-marke); margin-bottom: 5px; }
.verwandt__link:hover .verwandt__name { color: var(--c-link); }
.verwandt__link:hover .pfeil { }


/* --------------------------------------------------------------------------
   27. Anfrage-Abschluss (Schluss jeder Seite)
   Fläche mit dem Logo-Schnitt oben rechts und großem gelbem Eckdreieck: der
   größte Gelb-Moment der Seite. Die Ecke übernimmt die Farbe eines hellen oder
   Petrol-Abschnitts davor (Abschnitt 5), sonst zeigt sie den dunklen Seitengrund.
   -------------------------------------------------------------------------- */
.abschluss {
  --c-grund: var(--flaeche);
  --c-flaeche: var(--grund);
  --e: clamp(56px, 9vw, 168px);
  isolation: isolate;
  background: linear-gradient(225deg, var(--vorher, transparent) 0 calc(var(--e) * .7071 - .5px), var(--c-grund) calc(var(--e) * .7071 + .5px));
}
.abschluss::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--e) * .714);
  height: calc(var(--e) * .714);
  background: var(--gelb);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  pointer-events: none;
}
.abschluss__innen {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  align-items: end;
}
.abschluss__innen > * { min-width: 0; }
@media (min-width: 1000px) {
  .abschluss__innen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .abschluss__aktion { justify-self: end; }
  .abschluss--formular .abschluss__innen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .abschluss--formular .abschluss__aktion { justify-self: stretch; }
}
.abschluss__kontakt {
  display: grid;
  gap: 4px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--c-linie);
  color: var(--c-gedaempft);
  font-size: 16px;
}
.abschluss__kontakt strong { color: var(--c-text); font-weight: 600; }


/* --------------------------------------------------------------------------
   28. Formular
   Alle Farben aus dem Kontext (--c-feld, --c-rand-feld, --c-fehler …): funktioniert auf
   dunklen Abschnitten, in .abschluss und auf .abschnitt--hell.
   -------------------------------------------------------------------------- */
.formular-rahmen {
  --e: clamp(28px, 3vw, 44px);
  padding: clamp(22px, 3vw, 44px);
  background: linear-gradient(225deg, transparent 0 calc(var(--e) * .7071 - .5px), var(--c-flaeche) calc(var(--e) * .7071 + .5px));
}
.rahmen-ecke > .formular-rahmen { clip-path: none; }
.formular-rahmen--schmal { max-width: 760px; }
.formular { display: grid; gap: 22px; }
.formular__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px var(--luecke);
  container: formular / inline-size;   /* Felder richten sich nach der Breite des Formulars, nicht des Bildschirms */
}
.feld { display: grid; gap: 8px; min-width: 0; grid-column: span 2; }
/* Halbe Breite erst ab 580 px Formularbreite. Schmaler wird das Auswahlfeld so eng, dass der längste Bereichsname
   („Brand & Verunreinigungen“, 200 px bei 17 px) abgeschnitten wird; gemessen bei 1024 und 1100 px Bildschirmbreite. */
@container formular (min-width: 580px) {
  .feld--halb { grid-column: span 1; }
}
.feld__label {
  font: 600 15px/1.35 var(--schrift-text);
  color: var(--c-text);
}
.feld__pflicht { color: var(--c-marke); margin-left: 2px; }
.feld__optional { color: var(--c-gedaempft); font-weight: 400; font-size: 14px; }
.feld__eingabe {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid var(--c-rand-feld);
  border-radius: 0;
  background: var(--c-feld);
  color: var(--c-text);
  font-size: 17px;
  line-height: 1.4;
}
.feld__eingabe::placeholder { color: var(--c-platzhalter); }
.feld__eingabe:hover { border-color: var(--c-gedaempft); }
.feld__eingabe:focus { outline: none; border-color: var(--c-fokus); box-shadow: 0 0 0 1px var(--c-fokus); }
textarea.feld__eingabe { min-height: 140px; resize: vertical; }
.feld__auswahl {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background: var(--c-auswahl-pfeil) right 16px center / 14px no-repeat, var(--c-feld);
}
/* Sehr schmales Formular (Bildschirm 320 px, Formular 244 px): 16 px Schrift (iOS zoomt erst darunter) und ein engerer
   Pfeil, damit der längste Bereichsname ganz sichtbar bleibt */
@container formular (max-width: 270px) {
  .feld__auswahl { padding-left: 12px; padding-right: 36px; font-size: 16px; background-position: right 12px center; background-size: 12px; }
}
.feld__hinweis { margin: 0; color: var(--c-gedaempft); font-size: 14px; line-height: 1.45; }
.feld__fehler {
  display: flex;
  gap: 8px;
  margin: 0;
  color: var(--c-fehler);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.feld__fehler::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; background: var(--c-fehler); color: var(--c-feld); font: 500 12px/1 var(--schrift-mono); }
.feld__fehler[hidden] { display: none; }
.feld__eingabe[aria-invalid="true"] { border-color: var(--c-fehler); }

/* Auswahl als Kacheln (Radio), optional statt <select> */
.wahl { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; }
.wahl legend { margin-bottom: 8px; padding: 0; }
.wahl__option { position: relative; }
.wahl__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl__option span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--c-rand-feld);
  font-size: 15px;
}
.wahl__option input:checked + span { border-color: var(--c-marke); background: color-mix(in srgb, var(--c-marke) 12%, transparent); }
.wahl__option input:focus-visible + span { outline: 3px solid var(--c-fokus); outline-offset: 2px; }

/* Datei-Upload mit Vorschau */
.upload__zone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 28px 18px;
  border: 1.5px dashed var(--c-rand-feld);
  background: var(--c-feld);
  text-align: center;
}
.upload__zone:hover,
.upload__zone.ist-aktiv { border-color: var(--c-marke); background: color-mix(in srgb, var(--c-feld), var(--c-text) 4%); }
.upload__zone:focus-within { border-color: var(--c-fokus); box-shadow: 0 0 0 1px var(--c-fokus); }
.upload__eingabe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.upload__symbol {
  width: 34px;
  height: 34px;
  background: var(--c-marke);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3 7.2 5H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.2L15 3H9zm3 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3 7.2 5H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.2L15 3H9zm3 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.upload__text { font-size: 16px; color: var(--c-text); }
.upload__text strong { color: var(--c-marke); font-weight: 600; }
.upload__vorschau {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.upload__vorschau:empty { display: none; }
.upload__datei {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 6px;
  background: var(--c-feld);
  border: 1px solid var(--c-linie);
}
.upload__bild { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--flaeche); }
.upload__name { font: 500 11.5px/1.35 var(--schrift-mono); color: var(--c-gedaempft); overflow-wrap: anywhere; }
.upload__entfernen {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: rgba(17, 20, 24, .88);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.upload__entfernen:hover { background: var(--gelb); color: var(--anthrazit); }

.formular__datenschutz { margin: 0; color: var(--c-gedaempft); font-size: 14px; line-height: 1.5; }
.formular__datenschutz a { color: var(--c-link); text-underline-offset: 3px; }
.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
@media (max-width: 559px) {
  .formular__fuss .knopf { flex: 1 1 100%; }   /* lange Knopftexte („Rostentfernung mit Fotos anfragen“) */
}
.formular__pflichthinweis { margin: 0; color: var(--c-gedaempft); font-size: 14px; }

/* Rückmeldung nach dem Absenden */
.formular__meldung {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-left: 4px solid var(--c-marke);
  background: var(--c-feld);
  font-size: 16px;
}
.formular__meldung[hidden] { display: none; }
.formular__meldung strong { font: 600 17px/1.35 var(--schrift-text); }
.formular__meldung--fehler { border-left-color: var(--c-fehler); }
.formular__meldung ul { margin: 0; padding-left: 18px; }
.formular__meldung a { color: var(--c-text); }


/* --------------------------------------------------------------------------
   29. Tabellen
   <div class="tabelle-rahmen"><table class="tabelle">…</table></div>
   -------------------------------------------------------------------------- */
.tabelle-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.45;
}
.tabelle caption {
  padding-bottom: 12px;
  text-align: left;
  color: var(--c-gedaempft);
  font: 500 12.5px/1.3 var(--schrift-mono);
  letter-spacing: .02em;
}
.tabelle th,
.tabelle td {
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--c-linie);
  text-align: left;
  vertical-align: top;
}
.tabelle thead th {
  border-bottom: 2px solid var(--c-marke);
  color: var(--c-text);
  font: 600 14.5px/1.3 var(--schrift-text);
}
.tabelle tbody th { font-weight: 600; color: var(--c-text); }
.tabelle td { color: var(--c-gedaempft); }
.tabelle a { color: var(--c-link); text-underline-offset: 3px; }
/* Preise (Kostenseite, aus daten/saetze.json): Beträge in Mono, nicht umbrechen, hell */
.tabelle__zahl { white-space: nowrap; font-family: var(--schrift-mono); color: var(--c-text) !important; }
.tabelle--preise tbody th { width: 46%; }


/* --------------------------------------------------------------------------
   30. Bildnachweis-Zeile
   -------------------------------------------------------------------------- */
.bildnachweis {
  margin: 0;
  color: var(--c-gedaempft);
  font-size: 13px;
  line-height: 1.5;
}
.bildnachweis b {
  margin-right: .6em;
  color: var(--c-text);
  font: 500 12px/1.5 var(--schrift-mono);
  letter-spacing: .02em;
}


/* --------------------------------------------------------------------------
   31. Fuß
   Markenblock mit der Bildmarke „Schichtabtrag“ (Signalgelb, ergänzendes Symbol)
   und der Wortmarke. Die SVG-Datei hat einen Schutzraum; die Ränder werden über
   negative Abstände ausgeglichen (Inhalt 256 × 192 von 352 × 320).
   -------------------------------------------------------------------------- */
.fuss {
  --c-linie: var(--linie);
  background: #0C0E11;
  color: var(--text);
  border-top: 1px solid var(--linie);
}
.fuss__innen {
  display: grid;
  gap: 44px var(--luecke);
  padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px);
}
@media (min-width: 700px) {
  .fuss__innen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__marke { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .fuss__innen { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.4fr)); }
  .fuss__marke { grid-column: auto; }
}
.fuss__marke { display: grid; align-content: start; justify-items: start; gap: 22px; min-width: 0; }
.fuss__bildmarke { display: block; }
.fuss__bildmarke img {
  --bm: 132px;               /* Breite der Datei; sichtbarer Inhalt ≈ 73 % davon (96 × 72 px) */
  width: var(--bm);
  max-width: none;
  height: auto;
  margin: calc(var(--bm) * -.1818) calc(var(--bm) * -.1364) calc(var(--bm) * -.1818 + 10px);
}
.fuss__logo img { width: 230px; height: auto; }
.fuss__claim { max-width: 34ch; margin: 0; color: var(--text-gedaempft); font-size: 16px; }
.fuss__spalte { min-width: 0; }
/* Zwei Gruppen in einer Spalte (Orientierung + Einsatzorte). bauen.py --live entfernt eine Gruppe, deren Liste leer ist. */
.fuss__stapel { display: grid; align-content: start; gap: 36px; }
.fuss__gruppe { min-width: 0; }
.fuss__titel {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linie);
  color: var(--text-gedaempft);
  font: 500 12.5px/1.3 var(--schrift-mono);
  letter-spacing: .02em;
}
.fuss__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.fuss__liste a,
.fuss__kontakt a {
  display: inline-block;
  padding: 4px 0;
  color: var(--text);
  font-size: 16px;
  text-decoration: none;
}
.fuss__liste a:hover,
.fuss__kontakt a:hover { color: var(--gelb); }
.fuss__kontakt { display: grid; gap: 10px; font-size: 16px; color: var(--text); }
.fuss__kontakt p { margin: 0; }
.fuss__klein { color: var(--text-gedaempft); font-size: 15px; }
.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: 20px 28px;
  border-top: 1px solid var(--linie);
  color: var(--text-gedaempft);
  font: 500 12.5px/1.5 var(--schrift-mono);
}
.fuss__unten p { margin: 0; }
.fuss__recht { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.fuss__recht a { color: var(--text-gedaempft); text-decoration: none; }
.fuss__recht a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--gelb); }
.fuss .bildnachweis { flex-basis: 100%; }
/* Filterdefinition für das Duoton der Fotos: nimmt keinen Platz ein */
.duoton-filter { position: absolute; width: 0; height: 0; overflow: hidden; }


/* --------------------------------------------------------------------------
   32. Bewegung reduzieren
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   33. Druck: nur Inhalt, keine Navigation
   -------------------------------------------------------------------------- */
@media print {
  .kopf, .springen, .hinweisband, .fuss__unten, .knopf { display: none !important; }
  body, .abschnitt { background: #fff !important; color: #000 !important; }
}


/* --------------------------------------------------------------------------
   34. Kompatibilität: Vorschau-404 aus vorschau-veroeffentlichen.sh
   (alte Klassen einstieg/einstieg__text, damit die Hinweisseite sauber aussieht)
   -------------------------------------------------------------------------- */
.kopf > .innen:not(.kopf__innen) { display: flex; align-items: center; min-height: var(--kopf-hoehe); }
main.einstieg { display: block; padding-block: clamp(64px, 10vw, 140px); }
main.einstieg h1 { line-height: 1.04; }
main.einstieg .einstieg__text { max-width: 54ch; margin-bottom: 32px; color: var(--text-gedaempft); font-size: 19px; }


/* --------------------------------------------------------------------------
   34a. Nachträge 06.10.2026 (Prüfrunde), vor den Abstands-Hilfen
   Erzeugte Bereichs- und Anwendungsseiten (werkzeuge/seiten-erzeugen.py),
   Bereichswähler als Akkordeon, Platzhalter, Kontraste und Trefferflächen.
   -------------------------------------------------------------------------- */

/* Überblick unter dem Seitenkopf: größerer Lesetext ohne eigene Überschrift */
.lead-text { max-width: 64ch; font-size: clamp(19px, .55vw + 15.5px, 23px); line-height: 1.5; color: var(--c-text); }
.lead-text > p + p { margin-top: .8em; }

/* Fließtext ab 900 px in zwei Spalten, sobald es mindestens zwei Absätze sind */
@media (min-width: 900px) {
  .textspalten:has(> p + p) { max-width: none; columns: 2; column-gap: clamp(32px, 5vw, 80px); }
  .textspalten > p { break-inside: avoid; }
}

/* Nummerierte Absatzfolge: Ablauf, Muster, Freigabe aus dem Briefing-Text */
.absatzfolge { margin: 0; padding: 0; list-style: none; counter-reset: absatz; border-top: 1px solid var(--c-linie); }
.absatzfolge > li {
  counter-increment: absatz;
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr);
  gap: 0 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-linie);
  color: var(--c-text);
}
.absatzfolge > li::before { content: none; /* Nummerierung aus (Jimmy 06.10.) */ color: var(--c-marke); font: 500 13px/1.9 var(--schrift-mono); }
.absatzfolge a { color: var(--c-link); text-underline-offset: 3px; }
@media (min-width: 900px) {
  .absatzfolge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); border-top: 0; }
  .absatzfolge > li { border-top: 1px solid var(--c-linie); border-bottom: 0; }
}

/* Platzhalter, die vor dem Livegang ersetzt werden müssen (bauen.py --live bricht sonst ab) */
html[data-entwurf] [data-platzhalter] { outline: 1.5px dashed var(--gelb); outline-offset: 2px; }   /* nur interne Vorschau mit --mit-entwurf */

/* Linienknopf: Rahmen mit mindestens 3:1 zum Grund (dunkel #66727F, hell #7A8592) */
.knopf--linie { --k-rand: var(--c-rand-feld); }
.knopf--linie:hover { --k-rand: var(--c-text); }

/* Brotkrumen und Rechtslinks im Fuß: Trefferfläche 32 px hoch, ohne die Zeile zu verschieben */
.brotkrumen a,
.fuss__recht a { display: inline-block; padding-block: 8px; margin-block: -8px; }

/* Startseite: „Direkt zu“ im Abschnittskopf wie in Entwurf C, Grenzhinweis unter dem Wähler */
.haeufig--kopf { margin-top: 0; margin-bottom: clamp(36px, 4.5vw, 64px); }
.anwendungen__grenze { max-width: 68ch; margin: clamp(28px, 3vw, 40px) 0 0; color: var(--c-gedaempft); }

/* Bereichswähler als Akkordeon (pulswerk.js Abschnitt 6) */
.waehler__auf { display: none; }
.waehler--akkordeon .waehler__titel { display: flex; align-items: center; gap: 12px; }
.waehler--akkordeon .waehler__titel > a { flex: 1 1 auto; min-width: 0; }
.waehler--akkordeon .waehler__auf {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--c-text);
  box-shadow: inset 0 0 0 1.5px var(--c-rand-feld);
  cursor: pointer;
}
.waehler--akkordeon .waehler__auf::before {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
.waehler--akkordeon .waehler__auf[aria-expanded="true"]::before { transform: translateY(3px) rotate(225deg); }
.waehler--akkordeon .waehler__auf:hover { color: var(--gelb); box-shadow: inset 0 0 0 1.5px var(--c-text); }
.waehler--akkordeon .waehler__auf:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }
.waehler--akkordeon .waehler__eintrag:not(.ist-offen) { padding-block: 14px; }
.waehler--akkordeon .waehler__eintrag:not(.ist-offen) .waehler__titel { grid-column: 1 / -1; }
.waehler--akkordeon .waehler__eintrag:not(.ist-offen) .waehler__inhalt { display: none; }
@media (prefers-reduced-motion: reduce) { .waehler--akkordeon .waehler__auf::before { } }

/* Gegenüberstellung: zwei Fälle nebeneinander, kompakt statt einer weiteren Bildzeile */
.gegenueber {
  display: grid;
  gap: 0;
  margin-top: clamp(48px, 6vw, 88px);
  border-top: 2px solid var(--gelb);
}
.gegenueber__titel { margin: 0; padding: 20px 0 8px; }
.gegenueber__seite { min-width: 0; padding: 18px 0 22px; border-top: 1px solid var(--c-linie); }
.gegenueber__seite p { max-width: 60ch; }
.gegenueber__kennung { margin: 0 0 8px; color: var(--c-marke); font: 500 13px/1.4 var(--schrift-mono); letter-spacing: 0; }
@media (min-width: 760px) {
  .gegenueber { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); }
  .gegenueber__titel { grid-column: 1 / -1; }
}

/* Schema groß neben dem erklärenden Text */
.schema-zeile { display: grid; gap: 22px; margin-top: clamp(48px, 6vw, 88px); }
.schema-zeile__bild, .schema-zeile__text { min-width: 0; margin: 0; }
@media (min-width: 1000px) {
  .schema-zeile { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 80px); align-items: center; }
}
.schema-zeile__text > * + * { margin-top: 12px; }
.schema-zeile__text > p + p { margin-top: 16px; }


/* --------------------------------------------------------------------------
   Magazin und Glossar (07.10.2026, Jimmy: Aufbau wie das MSE-Magazin, Gestaltung „Schnitt“)
   Filterleiste mit Chips + Suche, Kartenraster, Artikel mit klebendem Inhaltsverzeichnis.
   -------------------------------------------------------------------------- */
.filter { display: grid; gap: 16px; margin-top: clamp(28px, 3vw, 44px); }
.filter__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 14px;
  border: 1px solid var(--c-linie-stark);
  background: transparent;
  color: var(--c-text);
  font: 500 13px/1.2 var(--schrift-mono);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.chip:hover,
.chip:focus-visible { border-color: var(--gelb); color: var(--c-text); }
.chip--aktiv,
.chip[aria-pressed="true"] { background: var(--gelb); border-color: var(--gelb); color: var(--anthrazit); }
.chip--link { font-family: var(--schrift-text); font-weight: 600; font-size: 14px; }
.chip:disabled { border-color: var(--c-linie); color: var(--text-gedaempft); opacity: .5; cursor: default; }
.suche { position: relative; flex: 1 1 260px; max-width: 460px; }
.suche__feld {
  width: 100%;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--c-linie-stark);
  background: var(--flaeche);
  color: var(--text);
  font: 400 16px/1.4 var(--schrift-text);
}
.suche__feld::placeholder { color: var(--text-gedaempft); }
.suche__feld:focus { outline: 2px solid var(--gelb); outline-offset: 2px; border-color: var(--gelb); }
.filter__zaehler { color: var(--c-gedaempft); font: 500 13px/1.4 var(--schrift-mono); }
.filter__zaehler b { color: var(--c-text); font-weight: 500; }
.abc { display: flex; flex-wrap: wrap; gap: 2px; }
.abc__buchstabe {
  min-width: 34px;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  background: var(--flaeche);
  color: var(--text);
  font: 500 13px/1 var(--schrift-mono);
  cursor: pointer;
}
.abc__buchstabe:hover,
.abc__buchstabe:focus-visible { color: var(--gelb); }
.abc__buchstabe[aria-pressed="true"] { background: var(--gelb); color: var(--anthrazit); }
.abc__buchstabe:disabled { color: var(--text-gedaempft); opacity: .45; cursor: default; }

.karten { display: grid; gap: var(--luecke); margin-top: clamp(28px, 3vw, 44px); list-style: none; padding: 0; }
@media (min-width: 640px) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 28px);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  clip-path: polygon(0 0, calc(100% - var(--ecke-bild)) 0, 100% var(--ecke-bild), 100% 100%, 0 100%);
}
.karte[hidden] { display: none; }
.karte__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; }
.karte__kategorie { color: var(--gelb); font: 500 12.5px/1.3 var(--schrift-mono); letter-spacing: .02em; }
.karte__datum { color: var(--text-gedaempft); font: 500 12.5px/1.3 var(--schrift-mono); }
.karte__titel { font: 700 clamp(19px, .5vw + 16px, 22px)/1.25 var(--schrift-text); letter-spacing: -.01em; color: var(--text); }
.karte__titel a { color: inherit; text-decoration: none; }
.karte__titel a::after { content: ""; position: absolute; inset: 0; }   /* ganze Karte klickbar */
.karte:hover .karte__titel a,
.karte:focus-within .karte__titel a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--gelb); }
.karte__text { margin: 0; flex: 1; color: var(--text-gedaempft); font-size: 15px; line-height: 1.55; }
.karte__fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--text-gedaempft); font: 500 12.5px/1.3 var(--schrift-mono); }
.karte__fuss .pfeil { color: var(--gelb); }
/* Glossarkarte: Begriff + Bereichsmarke, Definition, optional Link */
.karte--begriff { gap: 10px; }
.karte--begriff .karte__titel { font-size: clamp(18px, .4vw + 16px, 20px); }
.karte--begriff .karte__text { color: var(--text); font-size: 15.5px; }
.karte--begriff .karte__mehr { font-size: 14px; }
.karte__leer { display: none; padding: 24px 0; color: var(--c-gedaempft); }
.karten--leer + .karte__leer { display: block; }
/* Seitenwahl des Glossars (nur mit JS): Zurück, Seitenknöpfe, Weiter, Stand; Anfahrt über scroll-padding des Dokuments */
.seitenwahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: clamp(28px, 3vw, 44px); padding-top: 20px; border-top: 1px solid var(--c-linie); }
.seitenwahl[hidden] { display: none; }
.seitenwahl__liste { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.seitenwahl__seite,
.seitenwahl__schritt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--c-linie-stark);
  background: transparent;
  color: var(--c-text);
  font: 500 13px/1 var(--schrift-mono);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.seitenwahl__schritt { padding: 0 16px; }
.seitenwahl__seite:hover,
.seitenwahl__seite:focus-visible,
.seitenwahl__schritt:hover,
.seitenwahl__schritt:focus-visible { border-color: var(--gelb); }
.seitenwahl__seite[aria-current="page"] { background: var(--gelb); border-color: var(--gelb); color: var(--anthrazit); cursor: default; }
.seitenwahl__schritt:disabled { border-color: var(--c-linie); color: var(--text-gedaempft); opacity: .5; cursor: default; }
.seitenwahl__luecke { min-width: 24px; color: var(--c-gedaempft); font: 500 13px/1 var(--schrift-mono); text-align: center; }
.seitenwahl__stand { margin: 0 0 0 auto; color: var(--c-gedaempft); font: 500 13px/1.4 var(--schrift-mono); }
@media (max-width: 599px) {   /* Handy: Zurück · Stand · Weiter in einer Zeile, Seitenknöpfe darunter */
  .seitenwahl { justify-content: space-between; }
  .seitenwahl__schritt[data-schritt="zurueck"] { order: 1; }
  .seitenwahl__stand { order: 2; margin: 0; }
  .seitenwahl__schritt[data-schritt="weiter"] { order: 3; }
  .seitenwahl__liste { order: 4; flex-basis: 100%; }
}

/* Artikel: Kopf mit Marke, Datum, Lesezeit; zweispaltig mit klebendem Inhaltsverzeichnis */
.artikel__kopf { max-width: 60rem; }
.artikel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 18px; color: var(--c-gedaempft); font: 500 13px/1.4 var(--schrift-mono); }
.artikel__meta .badge { color: var(--gelb); }
.artikel__kopf .titel { max-width: 22ch; }
.artikel__teaser { max-width: 62ch; margin-top: clamp(16px, 2vw, 24px); font-size: clamp(18px, .3vw + 16px, 20px); line-height: 1.55; color: var(--c-gedaempft); }
.autor { display: flex; align-items: center; gap: 14px; margin-top: clamp(22px, 2.6vw, 34px); padding-top: 18px; border-top: 1px solid var(--c-linie); }
.autor__kuerzel {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--gelb);
  color: var(--anthrazit);
  font: 700 15px/1 var(--schrift-mono);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.autor__name { color: var(--c-text); font-weight: 600; font-size: 15px; }
.autor__rolle { color: var(--c-gedaempft); font: 500 12.5px/1.4 var(--schrift-mono); }
.artikel { display: grid; gap: clamp(28px, 4vw, 56px); }
.artikel > * { min-width: 0; }
.artikel__nav { align-self: start; }
.artikel__nav .kennung { margin-bottom: 10px; }
.artikel__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-linie); }
.artikel__liste li { border-bottom: 1px solid var(--c-linie); }
.artikel__liste a { display: block; padding: 9px 0 9px 14px; border-left: 2px solid transparent; color: var(--c-gedaempft); font-size: 14px; line-height: 1.4; text-decoration: none; }
.artikel__liste a:hover,
.artikel__liste a:focus-visible,
.artikel__liste a[aria-current="true"] { border-left-color: var(--gelb); color: var(--c-text); }
.artikel__text { max-width: 68ch; }
.artikel__text h2 { scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }
@media (min-width: 1000px) {
  .artikel { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); }
  .artikel__nav { position: sticky; top: calc(var(--kopf-hoehe) + 24px); }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hinweis-box { padding: 18px 22px; border-left: 3px solid var(--gelb); background: var(--c-flaeche, var(--flaeche)); color: var(--c-gedaempft); font-size: 14.5px; line-height: 1.55; }
.hinweis-box strong { color: var(--c-text); }

/* --------------------------------------------------------------------------
   Sprungnavigation für lange Seiten (Rostentfernung, Korrekturbrief 07.10.2026)
   <nav class="sprung"><div class="innen sprung__innen"><p class="sprung__titel">…</p>
   <ul class="sprung__liste"><li><a class="sprung__link" href="#…">…</a></li></ul></div></nav>
   Desktop: klebt unter dem Kopf. Handy: eine waagerecht scrollbare Zeile, nicht klebend.
   -------------------------------------------------------------------------- */
.sprung {
  background: var(--grund);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.sprung__innen { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.sprung__titel {
  flex: none;
  margin: 0;
  color: var(--text-gedaempft);
  font: 500 12.5px/1 var(--schrift-mono);
  letter-spacing: .02em;
}
.sprung__liste {
  display: flex;
  gap: 0 clamp(18px, 2.4vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.sprung__liste::-webkit-scrollbar { display: none; }
.sprung__liste li { flex: none; }
.sprung__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  color: var(--text);
  font: 600 14px/1 var(--schrift-text);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.sprung__link::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--gelb);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.sprung__link:hover,
.sprung__link:focus-visible { border-bottom-color: var(--gelb); }
@media (min-width: 900px) {
  .sprung { position: sticky; top: var(--kopf-hoehe); z-index: 40; }
  main:has(.sprung) section[id],
  main:has(.sprung) [id].abschnitt { scroll-margin-top: 52px; }
}
@media (max-width: 899px) {
  .sprung__titel { display: none; }
  .sprung__innen { padding-right: 0; }
}

/* Bild und Text im Wechsel: Zeile mit dem Bild rechts */
@media (min-width: 900px) {
  .wechsel__zeile--umgekehrt > .wechsel__bild { order: 2; }
}

/* Anfrage-Abschluss: die H2 steht in einer halben Spalte, deshalb kleiner als .titel (sonst 3–4 Zeilen, Sie-Form 07.10.2026) */
.abschluss__text > .titel { font-size: clamp(32px, 1.9vw + 18px, 52px); line-height: 1.02; }

/* Grenzen-Liste: fette Kernaussage, dann der Satz dazu */
.liste--grenzen > li { padding-top: 12px; padding-bottom: 12px; }
.liste--grenzen strong { color: var(--c-text); }

/* --------------------------------------------------------------------------
   Schema: Zeichnung als Inline-SVG (Rost / Oxidschicht / Zunder auf der Rostentfernung)
   Klassen an den SVG-Elementen, damit Farben zur Marke passen und mit dem Text skalieren.
   -------------------------------------------------------------------------- */
.schema { margin: 0; min-width: 0; }
.schema__felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px clamp(16px, 2vw, 28px); }
.schema__feld { min-width: 0; }
.schema__feld svg { display: block; width: 100%; height: auto; }
.schema__etikett { margin: 14px 0 6px; font: 700 clamp(20px, .6vw + 16px, 24px)/1.1 var(--schrift-display); color: var(--c-text); }
.schema__notizen { margin: 0; padding: 0; list-style: none; color: var(--c-gedaempft); font: 500 12.5px/1.6 var(--schrift-mono); }
.schema__notizen li { padding: 3px 0; border-top: 1px solid var(--c-linie); }
.schema__notizen li:first-child { color: var(--c-text); }
.schema__metall { fill: #9AA6B0; }
.schema__rost { fill: #A8512A; }
.schema__rost-dunkel { fill: #6E3217; }
.schema__oxid { fill: #46525B; }
.schema__oxid-licht { fill: #6B7983; }
.schema__zunder { fill: #2B3034; }
.schema__zunder-los { fill: #3A4046; }
.schema__riss { fill: none; stroke: #0F1214; stroke-width: 2; stroke-linecap: round; }
.schema > .abb__text { margin-top: 18px; }
@media (max-width: 559px) {
  .schema__felder { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .schema__feld { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); column-gap: 16px; align-items: start; }
  .schema__feld svg { grid-row: 1 / 3; }
  .schema__etikett { margin-top: 0; }
}
.schema-zeile--oben { margin-top: 0; }
@media (min-width: 1000px) {
  .schema-zeile--oben { align-items: center; }
}

/* --------------------------------------------------------------------------
   35. Abstands-Hilfen (stehen bewusst am Ende, damit sie Bausteinen überlegen sind)
   Statt Inline-Styles: <p class="kennung luft-oben--gross">
   -------------------------------------------------------------------------- */
.luft-oben { margin-top: clamp(18px, 2vw, 28px); }
.luft-oben--gross { margin-top: clamp(28px, 3.2vw, 48px); }


/* === Nummerierung aus — Jimmy 06.10.2026 16:50: „aus der gesamten Seite nicht nummerieren“, Ausnahme Ablauf.
   Schnellfix per Überschreibung; die saubere Fassung kommt mit nummerierung-entfernen.py. === */
.waehler__nr, .mega__nr, .haeufig__nr, .abb__nr, .mosaik__feld .abb__nr { display: none !important; }


/* Bildnachweise im Impressum (bauen.py setzt die Liste ein) */
.bildnachweise { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.45; }
.bildnachweise li { padding: 0 0 10px; border-bottom: 1px solid var(--c-linie); overflow-wrap: anywhere; }
.bildnachweise__seiten { display: block; margin-top: 2px; color: var(--c-gedaempft); font-size: 13.5px; }


/* --------------------------------------------------------------------------
   Fuß: alle Städte mit eigener Seite (Band über dem unteren Streifen, erzeugt von einsatzorte-erzeugen.py;
   Jimmy 09.10.2026 „im Footer … müssen die Städte auf jeden Fall rein“)
   -------------------------------------------------------------------------- */
.fuss__orte { padding-bottom: clamp(32px, 4vw, 48px); }
.fuss__ortsliste {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2 150px;
  column-gap: var(--luecke);
}
@media (min-width: 700px) { .fuss__ortsliste { columns: 4; } }
@media (min-width: 1100px) { .fuss__ortsliste { columns: 6; } }
.fuss__ortsliste li { break-inside: avoid; }
.fuss__ortsliste a { display: inline-block; padding: 4px 0; color: var(--text); font-size: 15px; text-decoration: none; }
.fuss__ortsliste a:hover { color: var(--gelb); }

/* Breites Menü „Einsatzorte“ (Städte nach Region, erzeugt von einsatzorte-erzeugen.py, seit 09.10.2026) */
.mega__bereich--region { cursor: default; }
.mega__bereich--region:hover { color: var(--text); }
.mega__hinweis { margin: 0; color: var(--text-gedaempft); font-size: 14px; line-height: 1.45; }
@media (min-width: 1100px) {
  .mega__innen--orte { grid-auto-flow: row dense; }
  .mega__innen--orte .mega__gruppe--orte-lang { grid-row: span 2; }
  .mega__innen--orte .mega__gruppe--orte-lang .mega__liste { columns: 2; column-gap: 24px; display: block; }
  .mega__innen--orte .mega__gruppe--orte-lang .mega__liste li { break-inside: avoid; }
  .mega__stapel { display: grid; align-content: start; gap: 22px; }
  .mega__innen--orte .mega__extra { grid-column: span 2; }
}
@media (max-width: 1099px) {
  .mega__stapel { display: contents; }
}

/* --------------------------------------------------------------------------
   Vorteile-Banner (Startseite unter dem Einstieg, Stadtseiten unter dem Kopf; Jimmy 09.10.2026:
   „mehr Werbung … E-Commerce“): vier Vorteile mit Liniensymbol, wie die Vorteilsleiste eines Shops.
   -------------------------------------------------------------------------- */
.vorteile-band { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.vorteile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0 var(--luecke);
  margin: 0;
  padding: clamp(22px, 2.6vw, 34px) 0;
  list-style: none;
}
.vorteile__punkt {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 14px;
  align-content: start;
  padding: 12px 0;
}
.vorteile__symbol {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  padding: 7px;
  border: 1.5px solid var(--gelb);
  fill: none;
  stroke: var(--gelb);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vorteile__titel { color: var(--text); font: 700 18px/1.3 var(--schrift-text); letter-spacing: -.005em; }
.vorteile__text { margin-top: 3px; color: var(--text-gedaempft); font-size: 15px; line-height: 1.5; }
.vorteile__text a { color: var(--text); text-decoration-color: var(--gelb); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Leistungen als Produktkarten (Stadtseiten): Foto, Etikett, Name, Nutzen, „Leistung ansehen“.
   Desktop Raster, Handy waagerecht wischen (scroll-snap) wie eine Produktreihe im Shop.
   -------------------------------------------------------------------------- */
.lkacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: var(--luecke);
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}
.lkacheln__eintrag { min-width: 0; }
.lkachel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.lkachel:hover,
.lkachel:focus-visible { border-color: var(--gelb); transform: translateY(-3px); outline: none; }
.lkachel__foto { position: relative; display: block; overflow: hidden; }
.lkachel__bild { transition: transform .3s; }
.lkachel:hover .lkachel__bild { transform: scale(1.04); }
.lkachel__marke {
  position: absolute;
  left: 0;
  top: 14px;
  padding: 5px 10px 5px 12px;
  background: var(--gelb);
  color: var(--anthrazit);
  font: 500 12px/1 var(--schrift-mono);
  letter-spacing: .02em;
}
.lkachel__inhalt { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.lkachel__name { font: 700 clamp(19px, .4vw + 17px, 22px)/1.2 var(--schrift-display); letter-spacing: -.005em; }
.lkachel__text { flex: 1; color: var(--text-gedaempft); font-size: 15px; line-height: 1.5; }
.lkachel__mehr { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--gelb); font: 600 15px/1.3 var(--schrift-text); }
@media (max-width: 699px) {
  .lkacheln {
    grid-auto-flow: column;
    grid-auto-columns: 76%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--rand) * -1);
    padding: 0 var(--rand) 10px;
    scroll-padding-inline: var(--rand);
  }
  .lkacheln__eintrag { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .lkachel, .lkachel__bild { transition: none; }
  .lkachel:hover, .lkachel:hover .lkachel__bild { transform: none; }
}
/* Startseite: Banner auf dem Seitengrund, damit der Schnitt des nächsten Abschnitts passt */
.vorteile-band--start { background: var(--grund); border-bottom: 0; }
.vorteile-band--start .vorteile { border-top: 1px solid var(--linie); }
/* Produktkarte: Foto immer in echter Farbe, ohne Duoton (Jimmy 09.10.2026: „Farbfilter raus … gelb umrandet reicht“) */
.lkachel__bild { filter: none; }
/* Anfragekarte am Ende der Produktreihe */
.lkachel--anfrage { position: relative; justify-content: flex-end; border-color: var(--gelb); }
.lkachel--anfrage::after { content: ""; position: absolute; top: 0; right: 0; width: 28px; height: 28px; background: var(--gelb); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.lkachel--anfrage .lkachel__inhalt { flex: 0; padding: 22px; }
.lkachel--anfrage .lkachel__name { font-size: clamp(22px, .6vw + 18px, 26px); }
/* Bereichskarten (Startseite): Karte mit eigenem Titel-Link, Leistungslinks und „Bereich ansehen“ */
.lkacheln--bereiche { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.lkachel--bereich { position: relative; }
.lkachel--bereich:hover,
.lkachel--bereich:focus-within { border-color: var(--gelb); transform: translateY(-3px); }
.lkachel--bereich:hover .lkachel__bild { transform: scale(1.04); }
.lkachel__name a { color: inherit; text-decoration: none; }
.lkachel__name a:hover { color: var(--gelb); }
.lkachel__links { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.lkachel__links a {
  display: inline-block;
  padding: 5px 9px 6px;
  border: 1px solid var(--linie-stark);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.2;
  text-decoration: none;
}
.lkachel__links a:hover { border-color: var(--gelb); color: var(--gelb); }
.lkachel--bereich .lkachel__mehr { text-decoration: none; }
.lkachel--bereich .lkachel__mehr:hover { text-decoration: underline; text-underline-offset: 4px; }
.abschnitt--flaeche .lkachel { background: var(--grund); }
/* Branchenkarten: typische Aufgaben als kurze Liste */
.lkacheln--branchen { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.lkachel__aufgaben { display: grid; gap: 6px; margin: 6px 0 4px; padding: 0; list-style: none; }
.lkachel__aufgaben li { position: relative; padding-left: 18px; color: var(--text); font-size: 15px; line-height: 1.45; }
.lkachel__aufgaben li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--gelb); clip-path: polygon(0 0, 100% 0, 100% 100%); }