:root {
  --farbe-grund: #0e2f4f;
  --farbe-akzent: #d0201a;
  --farbe-leitung: #1b8fc6;
  --farbe-leitung-hell: #7fd2f5;
  --farbe-tinte: #14181d;
  --farbe-tinte-leise: #4a5866;
  --farbe-papier: #f8fafb;
  --farbe-flaeche: #edf1f4;
  --schrift-ueberschrift: Bahnschrift, "DIN Alternate", "DIN Condensed", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --schrift-fliesstext: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mass-radius: 0px;
  --mass-halter: 76rem;
  --mass-schmal: 40rem;
  --mass-linie: 2px;
  --mass-haarlinie: 1px;
  --mass-winkel-chevron: 45deg;
  --schritt-mini: 0.8rem;
  --schritt-0: 1.0625rem;
  --schritt-1: 1.25rem;
  --schritt-2: 1.5rem;
  --schritt-3: 1.95rem;
  --schritt-4: 2.4rem;
}

/* ============================================================
   FUNDAMENT — Schicht 1 des Bausystems. Trägt KEINE Identität.
   Regel: mobile-first. Basis-Styles gelten fürs Handy; Desktop
   kommt AUSSCHLIESSLICH über @media (min-width: …) dazu.
   Identität (Farben, Schriften, Maße) kommt aus den Tokens:
   --farbe-grund, --farbe-akzent, --farbe-tinte, --farbe-papier,
   --schrift-ueberschrift, --schrift-fliesstext, --mass-radius …
   ============================================================ */

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

/* :where() = Spezifität 0. Damit gewinnt der :root-Block aus tokens.yaml
   IMMER, obwohl bauen.py ihn vor dieses Fundament schreibt. Ohne das
   :where() waren die Kundenfarben wirkungslos (gleiche Spezifität, spätere
   Regel gewinnt) — gefunden am 22.07.2026 im Projekt moennich. */
:where(:root) {
  /* Rückfallwerte — jedes Projekt überschreibt sie über tokens.yaml */
  --farbe-grund: #1d3557;
  --farbe-akzent: #b4633a;
  --farbe-tinte: #1a1a1a;
  --farbe-papier: #fcfcfa;
  --farbe-flaeche: #f0efeb;
  --schrift-ueberschrift: Georgia, "Times New Roman", serif;
  --schrift-fliesstext: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mass-radius: 0px;
  --mass-halter: 72rem;
  --mass-schmal: 44rem;

  /* Typo-Skala: Handy-Basis; Desktop skaliert über die Media-Query unten. */
  --schritt-0: 1rem;        /* Fließtext — nie unter 1rem (Prüfer misst das!) */
  --schritt-1: 1.25rem;
  --schritt-2: 1.563rem;
  --schritt-3: 1.953rem;
  --schritt-4: 2.441rem;
  --raum-1: 0.5rem;
  --raum-2: 1rem;
  --raum-3: 1.5rem;
  --raum-4: 2.5rem;
  --raum-5: 4rem;
}

@media (min-width: 60rem) {
  :where(:root) {
    --schritt-2: 1.777rem;
    --schritt-3: 2.369rem;
    --schritt-4: 3.157rem;
    --raum-4: 3.5rem;
    --raum-5: 6rem;
  }
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--schrift-fliesstext);
  font-size: var(--schritt-0);
  line-height: 1.6;
  color: var(--farbe-tinte);
  background: var(--farbe-papier);
}

h1, h2, h3, h4 {
  font-family: var(--schrift-ueberschrift);
  line-height: 1.15;
  margin: 0 0 var(--raum-2);
  overflow-wrap: break-word;
}
h1 { font-size: var(--schritt-4); }
h2 { font-size: var(--schritt-3); }
h3 { font-size: var(--schritt-2); }
h4 { font-size: var(--schritt-1); }

p, ul, ol { margin: 0 0 var(--raum-2); }

a { color: var(--farbe-akzent); text-underline-offset: 0.15em; }
a:hover { color: var(--farbe-grund); }

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

/* --- Layout-Halter -------------------------------------------------- */
.halter {
  width: 100%;
  max-width: var(--mass-halter);
  margin-inline: auto;
  padding-inline: var(--raum-3);
}
.halter.schmal { max-width: var(--mass-schmal); }

.abschnitt { padding-block: var(--raum-4); }
.abschnitt.betont { background: var(--farbe-flaeche); }
.abschnitt.dunkel { background: var(--farbe-grund); color: var(--farbe-papier); }
.abschnitt.dunkel h1, .abschnitt.dunkel h2, .abschnitt.dunkel h3 { color: inherit; }
.abschnitt.dunkel a { color: inherit; }

/* --- Raster: einspaltig auf Handy, Spalten NUR ab min-width --------- */
.raster { display: grid; gap: var(--raum-3); }
@media (min-width: 48rem) {
  .raster.zweier { grid-template-columns: repeat(2, 1fr); }
  .raster.dreier { grid-template-columns: repeat(3, 1fr); }
  .raster.asym-links { grid-template-columns: 2fr 1fr; }
  .raster.asym-rechts { grid-template-columns: 1fr 2fr; }
}
@media (min-width: 60rem) {
  .raster.vierer { grid-template-columns: repeat(4, 1fr); }
}

/* --- Zugänglichkeit -------------------------------------------------- */
.sprunglink {
  position: absolute; left: -999px; top: 0;
  background: var(--farbe-tinte); color: var(--farbe-papier);
  padding: var(--raum-1) var(--raum-2); z-index: 100;
}
.sprunglink:focus { left: 0; }
.nur-vorleser {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--farbe-akzent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   KOMPONENTEN — neutrale Primitive (Schicht 1). Mechanik, keine
   Identität. Der Baumeister komponiert daraus und ergänzt eigene
   Sektionen in design/eigen.css (Schicht 2).
   ============================================================ */

/* --- Kopf / Navigation ----------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--farbe-papier);
  border-bottom: 1px solid var(--farbe-flaeche);
}
.kopf-nav {
  max-width: var(--mass-halter); margin-inline: auto;
  padding: var(--raum-2) var(--raum-3);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--raum-2); flex-wrap: wrap;
}
.kopf-marke { text-decoration: none; color: var(--farbe-tinte); font-weight: 700; }
.kopf-marke img { max-height: 3rem; width: auto; }

.kopf-schalter {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: none; border: 1px solid var(--farbe-tinte);
  border-radius: var(--mass-radius); cursor: pointer;
}
.kopf-schalter-balken,
.kopf-schalter-balken::before,
.kopf-schalter-balken::after {
  content: ""; display: block; position: relative;
  width: 20px; height: 2px; background: var(--farbe-tinte);
}
.kopf-schalter-balken::before { position: absolute; top: -6px; }
.kopf-schalter-balken::after { position: absolute; top: 6px; }

.kopf-menue {
  display: none; width: 100%;
  list-style: none; margin: 0; padding: var(--raum-2) 0 0;
}
.kopf-menue.offen { display: block; }
.kopf-menue a {
  display: block; padding: var(--raum-2);
  min-height: 44px; text-decoration: none; color: var(--farbe-tinte);
}
.kopf-menue a[aria-current="page"] { color: var(--farbe-akzent); font-weight: 700; }

@media (min-width: 48rem) {
  .kopf-schalter { display: none; }
  .kopf-menue { display: flex; width: auto; padding: 0; gap: var(--raum-1); }
  .kopf-menue a { padding: var(--raum-1) var(--raum-2); }
}

/* --- Fußzeile --------------------------------------------------------- */
.fuss { background: var(--farbe-tinte); color: var(--farbe-papier); margin-top: var(--raum-5); }
.fuss a { color: inherit; }
.fuss-innen {
  max-width: var(--mass-halter); margin-inline: auto;
  padding: var(--raum-4) var(--raum-3);
  display: grid; gap: var(--raum-3);
}
.fuss-recht { display: flex; gap: var(--raum-2); flex-wrap: wrap; }
.fuss-recht a { min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 48rem) {
  .fuss-innen { grid-template-columns: repeat(3, 1fr); }
}

/* --- Knöpfe ----------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.6em 1.4em;
  background: var(--farbe-akzent); color: var(--farbe-papier);
  text-decoration: none; border: none; border-radius: var(--mass-radius);
  font-size: var(--schritt-0); font-weight: 700; cursor: pointer;
}
.knopf:hover { background: var(--farbe-grund); color: var(--farbe-papier); }
.knopf.zweit { background: transparent; color: var(--farbe-tinte); border: 2px solid currentColor; }
.knopf.zweit:hover { color: var(--farbe-akzent); background: transparent; }

/* --- Karte (Inhaltskachel) -------------------------------------------- */
.kachel {
  background: var(--farbe-papier); border: 1px solid var(--farbe-flaeche);
  border-radius: var(--mass-radius); padding: var(--raum-3);
}
.abschnitt.betont .kachel { border-color: transparent; }

/* --- Galerie ----------------------------------------------------------- */
.galerie { display: grid; gap: var(--raum-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--mass-radius); }

/* --- Formular ----------------------------------------------------------- */
.formular { display: grid; gap: var(--raum-2); }
.formular label { font-weight: 700; display: block; margin-bottom: 0.25rem; }
.formular input, .formular textarea, .formular select {
  width: 100%; min-height: 48px; padding: 0.6em 0.8em;
  font: inherit; color: inherit;
  background: var(--farbe-papier); border: 1px solid var(--farbe-tinte);
  border-radius: var(--mass-radius);
}
.formular textarea { min-height: 8rem; resize: vertical; }

/* --- Karte/Anfahrt: Zwei-Klick (DSGVO) --------------------------------- */
.karten-consent {
  background: var(--farbe-flaeche); border-radius: var(--mass-radius);
  padding: var(--raum-3); text-align: center;
  display: grid; gap: var(--raum-2); justify-items: center;
}
.karten-consent iframe { width: 100%; min-height: 20rem; border: 0; }

/* --- Platzhalter (Bibliothek, per Jinja-include eingebettet) ------------ */
.platzhalter { color: var(--farbe-grund); background: var(--farbe-flaeche); border-radius: var(--mass-radius); }
.platzhalter svg { width: 100%; height: auto; }

/* ---- individuelle Sektionen (Baumeister) ---- */
/* ============================================================
   EIGEN.CSS — Elektro Mönnich GmbH ("Unter Spannung steht nur,
   was klickbar ist"). Individuelle Sektionen + Signature-Elemente.
   Tokens kommen aus design/tokens.yaml (:root, vom Bausystem vor
   dieser Datei eingebunden) — hier NUR eigene Gestaltung, keine
   Wertesatz-Spiegelung, keine neuen Hex-Werte.
   Mobile-first: Basis = Handy, Desktop NUR via @media (min-width: …).
   ============================================================ */

/* --- Desktop-Sprung der Schriftgrößen (Konzept 1.2 / tokens.yaml) ------- */
@media (min-width: 60rem) {
  :root {
    --schritt-2: 1.6rem;
    --schritt-3: 2.6rem;
    --schritt-4: 4.2rem;
  }
}

/* --- DIN-Beschriftung (gemeinsames Vokabular) ---------------------------
   Bewusst <span> statt <p>: das sind Legenden-Beschriftungen (0.8rem, DIN-
   Versalien), kein Fließtext — der Fließtext-Mindestwert (1rem) gilt für sie
   nicht (siehe design/konzept.md 1.2 + tokens.yaml „schritt.mini"). */
.label {
  display: block;
  font-family: var(--schrift-ueberschrift);
  font-weight: 700;
  font-size: var(--schritt-mini);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-tinte-leise);
  margin: 0 0 var(--raum-1);
}
.abschnitt.dunkel .label { color: var(--farbe-leitung-hell); }

/* --- Kopf / Fuß: Anlehnung an die Leitung + DIN-Ton (Markup ist fest,
   siehe bausystem/templates/basis.html.j2) --------------------------- */
.kopf { border-bottom: var(--mass-linie) solid var(--farbe-leitung); }
.kopf-marke img { max-height: 2.5rem; }
.kopf-menue a { font-family: var(--schrift-ueberschrift); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--schritt-mini); }
.kopf-menue a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--farbe-akzent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

.fuss { background: var(--farbe-grund); }
.fuss-block strong { font-family: var(--schrift-ueberschrift); }
.fuss-recht a { text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--schritt-mini); font-family: var(--schrift-ueberschrift); font-weight: 700; }

@media (min-width: 60rem) {
  .kopf-marke img { max-height: 3rem; }
}

/* ============================================================
   SIGNATURE S1 — „Die Leitung" (Leitungsband + Knoten)
   ============================================================ */
.strang { position: relative; }
.strang > .halter { position: relative; z-index: 1; padding-left: 2.25rem; }
.strang::before {
  content: ""; position: absolute; left: 12px; top: 0; bottom: 0;
  width: var(--mass-linie); background: var(--farbe-leitung);
  transform-origin: top; transform: scaleY(1);
}
.strang::after {
  content: ""; position: absolute; left: 8px; top: var(--raum-4);
  width: 10px; height: 10px; background: var(--farbe-leitung);
}
.abschnitt.dunkel.strang::before,
.abschnitt.dunkel.strang::after { background: var(--farbe-leitung-hell); }

/* Hinweis: Auf die im Konzept skizzierte scroll-getriggerte Zeichen-Animation
   (IntersectionObserver, scaleY 0→1) wird verzichtet — Voll-Seiten-Screenshots
   (Prüfer, Vorschau) scrollen nicht wirklich, dadurch bliebe die Leitung in
   jeder Sektion unterhalb des ersten Viewports dauerhaft unsichtbar. Die
   Leitung steht daher immer gezeichnet; „nichts blinkt/pulsiert" bleibt gewahrt. */

@media (min-width: 60rem) {
  .strang::before, .strang::after {
    left: max(var(--raum-3), calc((100vw - var(--mass-halter)) / 2 - 1.25rem));
  }
  .strang > .halter { padding-left: var(--raum-3); }
}

/* Roter Knoten — nur an Handlungsstellen. */
.knoten-rot {
  position: absolute; width: 10px; height: 10px; background: var(--farbe-akzent);
  left: 0.25rem; top: 50%; transform: translateY(-50%);
}
.handlung-haupt h2 { position: relative; padding-left: 1.5rem; }
.knoten-uebergang { position: absolute; left: 12px; bottom: 0; top: auto; }
@media (min-width: 60rem) {
  .knoten-uebergang { left: max(var(--raum-3), calc((100vw - var(--mass-halter)) / 2 - 1.25rem)); }
}

/* ============================================================
   HERO „Anschluss"
   ============================================================ */
.hero-anschluss { position: relative; overflow: hidden; }
.hero-anschluss .vorzeile {
  display: block;
  font-family: var(--schrift-ueberschrift); font-weight: 700; font-size: var(--schritt-mini);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--farbe-leitung-hell);
  margin-bottom: var(--raum-2);
}
.hero-anschluss h1 { max-width: 18ch; letter-spacing: -0.015em; }
.hero-anschluss-untertext { max-width: 40ch; font-size: var(--schritt-1); }
.hero-anschluss-aktionen { display: flex; flex-direction: column; gap: var(--raum-2); margin-top: var(--raum-3); }
.hero-anschluss-aktionen .knopf { width: 100%; }
.hero-anschluss .knopf:not(.zweit) { background: var(--farbe-papier); color: var(--farbe-grund); }
.hero-anschluss .knopf:not(.zweit):hover { background: var(--farbe-leitung-hell); color: var(--farbe-grund); }
.hero-anschluss .knopf.zweit { color: var(--farbe-papier); }
.hero-anschluss .knopf.zweit:hover { color: var(--farbe-leitung-hell); }
.hero-anschluss-belege {
  margin-top: var(--raum-4); display: flex; flex-wrap: wrap; gap: 0.5em;
  font-family: var(--schrift-ueberschrift); font-weight: 700; font-size: var(--schritt-mini);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--farbe-leitung-hell);
}

.beleg-riegel { display: none; }

@media (min-width: 60rem) {
  .hero-anschluss-innen {
    display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--raum-4);
    padding-block: var(--raum-5);
  }
  .hero-anschluss-titel { grid-column: 1; }
  .hero-anschluss h1 { max-width: 15ch; }
  .hero-anschluss-neben { grid-column: 2; margin-top: 5rem; }
  .hero-anschluss-belege { grid-column: 1 / -1; }
  .hero-anschluss-aktionen { flex-direction: row; }
  .hero-anschluss-aktionen .knopf { width: auto; }

  .beleg-riegel { display: block; margin-top: -5.25rem; position: relative; z-index: 2; }
  .beleg-riegel-innen {
    background: var(--farbe-papier); display: grid; grid-template-columns: repeat(3, 1fr);
    padding: var(--raum-3) var(--raum-4);
  }
  .beleg-riegel .beleg {
    padding-inline: var(--raum-3); border-left: var(--mass-haarlinie) solid var(--farbe-flaeche);
  }
  .beleg-riegel .beleg:first-child { border-left: none; padding-left: 0; }
  .beleg-riegel .beleg strong {
    display: block; font-family: var(--schrift-ueberschrift); font-size: var(--schritt-4); color: var(--farbe-grund);
    line-height: 1;
  }
  .beleg-riegel .beleg span {
    display: block; font-family: var(--schrift-ueberschrift); font-weight: 700; font-size: var(--schritt-mini);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-tinte-leise); margin-top: 0.4em;
  }
}

/* ============================================================
   SIGNATURE S2 — „Das Leistungsverzeichnis"
   ============================================================ */
.verzeichnis {
  list-style: none; margin: var(--raum-3) 0 0; padding: 0; counter-reset: pos;
}
.verzeichnis li {
  position: relative; counter-increment: pos;
  border-bottom: var(--mass-haarlinie) solid var(--farbe-flaeche);
}
.verzeichnis li a {
  display: flex; flex-direction: column; justify-content: center; gap: 0.15em;
  min-height: 56px; padding: 0.75rem 0 0.75rem 2.75rem; text-decoration: none; color: inherit; position: relative;
}
.verzeichnis li::before {
  content: counter(pos, decimal-leading-zero);
  position: absolute; left: 0; top: 0.9rem;
  font-family: var(--schrift-ueberschrift); font-weight: 700; color: var(--farbe-leitung);
}
.verzeichnis li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--farbe-akzent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.2s ease-out;
}
.verzeichnis li:hover::after, .verzeichnis li:focus-within::after { transform: scaleX(1); }
.verzeichnis li:hover::before, .verzeichnis li:focus-within::before { color: var(--farbe-grund); }
.verzeichnis-titel { font-family: var(--schrift-ueberschrift); font-weight: 700; font-size: var(--schritt-1); }
.verzeichnis-text { color: var(--farbe-tinte-leise); }
.verzeichnis-abschluss { margin-top: var(--raum-3); padding-left: 2.25rem; }
.verzeichnis-abschluss a { font-weight: 700; }

@media (min-width: 60rem) {
  .verzeichnis-halter { display: grid; grid-template-columns: 1fr 2fr; column-gap: var(--raum-5); align-items: start; }
  .verzeichnis-intro { position: sticky; top: 6rem; }
  .verzeichnis { column-count: 2; column-gap: 4.5rem; margin-top: 0; }
  .verzeichnis li { break-inside: avoid; margin-left: 4.5rem; }
  .verzeichnis li a { padding-left: 0; }
  .verzeichnis li::before { left: -4.5rem; top: 1.1rem; font-size: var(--schritt-2); }
  .verzeichnis-abschluss { padding-left: 0; }
}

/* ============================================================
   „Für wen wir arbeiten"
   ============================================================ */
.kundengruppen-raster { position: relative; display: grid; gap: var(--raum-4); }
.kundengruppen-block { padding-left: var(--raum-2); border-left: var(--mass-linie) solid var(--farbe-leitung); }
.kundengruppen-privat { border-left-color: var(--farbe-grund); }
.kundengruppen-block ul { list-style: none; margin: var(--raum-2) 0 0; padding: 0; }
.kundengruppen-block li {
  padding: var(--raum-2) 0; border-bottom: var(--mass-haarlinie) solid var(--farbe-papier);
  font-size: var(--schritt-1);
}
.kundengruppen-fussnote {
  display: block;
  margin-top: var(--raum-3); font-family: var(--schrift-ueberschrift); font-weight: 700;
  font-size: var(--schritt-mini); letter-spacing: 0.04em; text-transform: uppercase; color: var(--farbe-tinte-leise);
}
.kundengruppen-knick { display: none; }

@media (min-width: 60rem) {
  .kundengruppen-raster { grid-template-columns: 1fr 1fr; column-gap: var(--raum-5); }
  .kundengruppen-privat { margin-top: 4rem; }
  .kundengruppen-block h2 { font-size: var(--schritt-3); }
  .kundengruppen-knick {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%;
    color: var(--farbe-leitung); z-index: 0; pointer-events: none;
  }
}

/* ============================================================
   Vertrauensband
   ============================================================ */
.vertrauensband { position: relative; }
.vertrauensband-innen { position: relative; }
.leitsatz { font-family: var(--schrift-ueberschrift); font-weight: 700; font-size: var(--schritt-3); max-width: 20ch; }
.vertrauensband-belege { margin-top: var(--raum-4); display: grid; gap: var(--raum-2); }
.beleg-zeile {
  padding-top: var(--raum-2); border-top: var(--mass-haarlinie) solid rgba(248, 250, 251, 0.25);
  display: flex; align-items: baseline; gap: 0.6em;
}
.beleg-zeile strong { font-family: var(--schrift-ueberschrift); font-size: var(--schritt-2); }
.beleg-zeile span {
  font-family: var(--schrift-ueberschrift); font-weight: 700; font-size: var(--schritt-mini);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-leitung-hell);
}

@media (min-width: 60rem) {
  .vertrauensband-innen { display: grid; grid-template-columns: 2fr 1fr; column-gap: var(--raum-5); }
  .leitsatz { font-size: calc(var(--schritt-4) * 0.9); max-width: 16ch; }
  .vertrauensband-belege { align-content: start; }
}

/* ============================================================
   Handlung (genau eine Aufforderung je Seite)
   ============================================================ */
.handlung-nummer { margin: var(--raum-2) 0 var(--raum-4); }
.handlung-nummer a {
  font-family: var(--schrift-ueberschrift); font-weight: 700; font-size: var(--schritt-4);
  color: var(--farbe-akzent); text-decoration: none;
}
.handlung-zeiten { font-size: var(--schritt-1); }

@media (min-width: 60rem) {
  .handlung-innen { display: grid; grid-template-columns: 2fr 1fr; column-gap: var(--raum-5); align-items: start; }
  .handlung-nummer a { font-size: calc(var(--schritt-4) * 1.15); }
}

/* ============================================================
   Leistungen-Seite
   ============================================================ */
.leistungen-kopf-innen > .leistungen-kopf-text { max-width: var(--mass-schmal); }
.positionsregister { margin-top: var(--raum-3); overflow-x: auto; }
.positionsregister ol {
  list-style: none; display: flex; gap: 0; margin: 0; padding: 0; border-top: var(--mass-haarlinie) solid var(--farbe-flaeche);
}
.positionsregister a {
  display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  font-family: var(--schrift-ueberschrift); font-weight: 700; text-decoration: none; color: var(--farbe-tinte-leise);
  border-right: var(--mass-haarlinie) solid var(--farbe-flaeche);
}

.leistungen-liste { margin-top: var(--raum-3); }
.leistungen-posten {
  padding-block: var(--raum-3); border-bottom: var(--mass-haarlinie) solid var(--farbe-flaeche);
  position: relative;
}
.abschnitt.dunkel .leistungen-posten { border-bottom-color: rgba(248, 250, 251, 0.2); }
.posten-nr {
  font-family: var(--schrift-ueberschrift); font-weight: 700; font-size: var(--schritt-2); color: var(--farbe-leitung);
  margin: 0 0 0.25em;
}
.abschnitt.dunkel .posten-nr { color: var(--farbe-leitung-hell); }
.posten-label {
  display: block;
  font-family: var(--schrift-ueberschrift); font-weight: 700; font-size: var(--schritt-mini);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-tinte-leise); margin: 0 0 0.25em;
}
.posten-stichpunkte { list-style: none; margin: var(--raum-2) 0 0; padding: 0; }
.posten-stichpunkte li { padding-left: 1.25em; position: relative; margin-bottom: 0.4em; }
.posten-stichpunkte li::before { content: "›"; position: absolute; left: 0; color: var(--farbe-leitung); font-weight: 700; }

@media (min-width: 60rem) {
  .leistungen-kopf-innen { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--raum-4); }
  .positionsregister {
    position: sticky; top: 6rem; margin-top: 0; align-self: flex-start;
  }
  .positionsregister ol { flex-direction: column; border-top: none; }
  .positionsregister a {
    justify-content: flex-start; min-width: 3rem; font-size: var(--schritt-mini); border-right: none;
    border-bottom: var(--mass-haarlinie) solid var(--farbe-flaeche);
  }
  .leistungen-posten { display: grid; grid-template-columns: 1fr 2fr; column-gap: var(--raum-3); }
  .posten-nr { font-size: var(--schritt-3); }
}

/* ============================================================
   Über uns
   ============================================================ */
.ueberuns-auftakt-titel h1 { max-width: 16ch; }
@media (min-width: 60rem) {
  .ueberuns-auftakt-innen { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--raum-5); }
}

/* Zeitstrahl */
.zeitstrahl-liste { list-style: none; margin: 0; padding-left: 2.25rem; position: relative; }
.zeitstrahl-liste::before {
  content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: var(--mass-linie);
  background: var(--farbe-leitung);
}
.zeitstrahl-liste li { position: relative; padding-bottom: var(--raum-3); }
.zeitstrahl-liste li::before {
  content: ""; position: absolute; left: -1.75rem; top: 0.3rem; width: 10px; height: 10px; background: var(--farbe-leitung);
}
.zeitstrahl-jahr { display: block; font-family: var(--schrift-ueberschrift); font-weight: 700; color: var(--farbe-grund); margin-bottom: 0.2em; }

@media (min-width: 60rem) {
  .zeitstrahl-liste {
    display: block; position: relative; padding-left: 0; height: 14rem; margin-top: var(--raum-4);
  }
  .zeitstrahl-liste::before { left: 0; right: 0; top: 50%; bottom: auto; height: var(--mass-linie); width: auto; }
  .zeitstrahl-liste li {
    position: absolute; width: 28%; padding-bottom: 0;
  }
  .zeitstrahl-liste li::before { left: 0.5rem; }
  .zeitstrahl-liste li:nth-child(1) { left: 0; top: calc(50% + 1.5rem); }
  .zeitstrahl-liste li:nth-child(1)::before { top: -1.5rem; }
  .zeitstrahl-liste li:nth-child(2) { left: 36%; bottom: calc(50% + 1.5rem); top: auto; }
  .zeitstrahl-liste li:nth-child(2)::before { top: auto; bottom: -1.5rem; }
  .zeitstrahl-liste li:nth-child(3) { left: 72%; top: calc(50% + 1.5rem); }
  .zeitstrahl-liste li:nth-child(3)::before { top: -1.5rem; }
}

/* Ausbildung */
.ausbildung-ziffer {
  font-family: var(--schrift-ueberschrift); font-weight: 700; font-size: calc(var(--schritt-4) * 1.6);
  color: var(--farbe-leitung); line-height: 1; margin: var(--raum-2) 0 0;
}
@media (min-width: 60rem) {
  .ausbildung-innen { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--raum-5); align-items: start; }
}

/* Betrieb-Zitat */
.betrieb-zitat-text { margin: 0 0 var(--raum-2); padding-left: var(--raum-2); border-left: var(--mass-linie) solid var(--farbe-grund); }
.betrieb-zitat-text p { font-family: var(--schrift-ueberschrift); font-size: var(--schritt-2); margin: 0; }
.betrieb-zitat-name {
  display: block;
  font-family: var(--schrift-ueberschrift); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: var(--schritt-mini); color: var(--farbe-tinte-leise);
}
@media (min-width: 60rem) {
  .betrieb-zitat-text { max-width: 66%; }
  .betrieb-zitat-text p { font-size: var(--schritt-3); }
  .betrieb-zitat-name { text-align: right; border-top: var(--mass-haarlinie) solid var(--farbe-flaeche); padding-top: var(--raum-2); }
}

/* ============================================================
   Kontakt — Typenschild
   ============================================================ */
.kb-titel { margin-bottom: var(--raum-3); }
.kb-label { display: none; }
.kb-nummer { position: relative; }
.kb-nummer a {
  font-family: var(--schrift-ueberschrift); font-weight: 700; font-size: var(--schritt-4);
  color: var(--farbe-akzent); text-decoration: none;
}
/* Zweiter Knoten (mobil): Leitung trifft H1 (blau, generisch über .strang) und
   trifft hier zusätzlich die Telefonnummer als Handlung (rot). Desktop hat
   bereits seinen eigenen roten Knoten über „Sprechen" — dort entfällt dieser. */
.kb-nummer .knoten-rot { left: -1.75rem; top: 0.85em; transform: none; }
.kb-zeiten, .kb-email, .kb-fax { font-size: var(--schritt-1); padding-top: var(--raum-2); border-top: var(--mass-haarlinie) solid var(--farbe-flaeche); margin-top: var(--raum-2); }
.kb-adresse { font-style: normal; margin-top: var(--raum-2); }
.kb-anfahrt { margin-top: var(--raum-4); color: var(--farbe-tinte-leise); }

@media (min-width: 60rem) {
  /* Desktop zeichnet die Leitung bereits selbst (waagerecht, ::before unten) —
     der generische mobile Strang (senkrecht + Knoten bei H1/Nummer) entfällt hier. */
  .kontakt-blatt.strang::before,
  .kontakt-blatt.strang::after { content: none; }
  .kontakt-blatt.strang > .halter { padding-left: 0; }

  .kontakt-blatt-raster {
    display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--raum-4); position: relative;
    padding-top: var(--raum-4);
  }
  .kontakt-blatt-raster::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--mass-linie); background: var(--farbe-leitung);
  }
  .kb-titel { grid-column: 1 / -1; }
  .kb-label {
    display: block; position: relative; padding-top: var(--raum-2);
  }
  .kb-label-sprechen::before {
    content: ""; position: absolute; left: 0; top: calc(-1 * var(--raum-2) - 5px); width: 10px; height: 10px; background: var(--farbe-akzent);
  }
  .kb-nummer .knoten-rot { display: none; }
  .kb-label-sprechen, .kb-nummer, .kb-fax { grid-column: 1; }
  .kb-label-schreiben, .kb-email { grid-column: 2; }
  .kb-label-vorbeikommen, .kb-adresse, .kb-zeiten, .kb-route { grid-column: 3; }
  .kb-label-sprechen, .kb-label-schreiben, .kb-label-vorbeikommen { grid-row: 2; }
  .kb-nummer, .kb-email, .kb-adresse { grid-row: 3; border-top: none; margin-top: 0; }
  .kb-fax, .kb-zeiten { grid-row: 4; border-top: none; margin-top: 0; font-size: var(--schritt-0); }
  .kb-route { grid-row: 5; }
  .kb-anfahrt { grid-column: 1 / -1; grid-row: 6; }
  .kontakt-blatt-raster > :not(.kb-label-sprechen):not(.kb-label-schreiben):not(.kb-label-vorbeikommen) { border-left: var(--mass-haarlinie) solid var(--farbe-flaeche); padding-left: var(--raum-3); }
  .kb-titel, .kb-anfahrt { border-left: none; padding-left: 0; }
}