/* =============================================================================
   themes/a/theme.css — Variante A „Firstlinie" · Neuß Dachtechnik
   Besitzer: Theme-Agent A · Stand 30.09.2026 (Feinschliff nach KRITIK-a,
   Abnahme-Runde nach NACHKRITIK-a: DESIGN-a.md §11)
   Marken-Vertrag: _bau/DESIGN-a.md

   Unlayered: schlägt jede Regel aus basis.css (die liegt komplett in
   @layer basis) — kein !important nötig.

   DIE IDEE IN DREI SÄTZEN
   1. Signatur = die Firstlinie: der rote Strich aus dem Logo, der am Ende im
      Dachwinkel (33°) hochknickt. Sie ist die EINE Bindung aller Seiten:
      unter der H1 (bis an die Fotokante), als Weg zum Knopf im CTA, als
      Ablauf-Spur, im CTA-Band, im Einwand-Kasten und als Hover-Markierung
      der Leistungsliste. NICHT mehr über jeder Sektions-H2 (30.09.2026,
      KRITIK-a Nr. 2: zweimal pro Sektion wurde sie zur Tapete).
   2. Materialebene = Feinstruktur-Lack, wie am eigenen Kran: der Grund
      (--bg) ist glatt, jede zweite Fläche (--bg-2: Sektion, CTA-Band, Kasten,
      Formular) trägt die matte Feinstruktur (--struktur) — ein ungerichtetes
      Korn wie pulverbeschichteter Stahl. Im Seitenkopf steht das Foto vor
      einer solchen Tafel, die bis an den rechten Rand läuft. Fotos „hängen"
      leicht angehoben (Schatten nach unten). Kein Muster, keine Linien-
      Textur (die gehört B: Stehfalz, und C: Schuppen), kein zweiter Farbton.
   3. Rot nur als Linie, Knopf und Akzent. H1/H2 immer Anthrazit, expanded,
      Satzschreibung (Geschwister-Test Kusch & Wirtz: condensed Versalien).
   4. (30.09.) Rhythmus statt Band-Takt: die Strukturfläche (.sek--flaeche)
      ist das „Handbuch" — ab 75em steht die H2 links in einer eigenen Spalte,
      die Antworten rechts. Seitenende = Anthrazit-Block (CTA-Band + Fuß,
      eigener Farbsatz in tokens.css). Fotos in .split--bild laufen bis an
      den Fensterrand wie das Kranfoto im Start-Hero.

   INHALT
    0 Firstlinie (Maske, Varianten)   7 Sektionen + Strukturflächen
    1 Grundsatz + Typo-Rollen         8 Leistungsliste
    2 Knöpfe, Telefon, Links          9 Bausteine (Fakten, Schritte, FAQ …)
    3 Vorschau-Leiste                10 Formular + Kontaktwege
    4 Kopf + Navigation              11 CTA-Zeile + CTA-Band
    5 Start-Hero                     12 Fuß + Dock
    6 Seitenkopf + Sprungleiste      13 Der orchestrierte Moment
   7b Handbuch (Flächen-Sektionen)  14 Bausteine des Feinschliffs
                                        (split--bild, bildband, kennwerte,
                                        merksatz, weiter-link, cta leicht)
   Breakpoints wie basis.css: 48em · 56em · 64em · 75em (Menü) · 85em.
   ============================================================================= */

:root {
  /* Knick der Firstlinie als Maske (74 × 36, Strich 6, Grundlinie y 33).
     data:-URI ist durch die CSP gedeckt (img-src 'self' data:). */
  --fl-knick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 36'%3E%3Cpath d='M0 33H4L48 4.43L70.32 33' fill='none' stroke='%23000' stroke-width='6' stroke-miterlimit='10'/%3E%3C/svg%3E");
  --gutter: max(1rem, var(--s-3));            /* = Randabstand von .wrap (basis) */
  /* Winkel des Weiter-Links (§14) als Maske: 2er-Strich, rechtwinklig */
  --winkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.4 1.2L6.3 6L1.4 10.8' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  /* Feinstruktur-Korn: fraktales Rauschen in zwei Richtungen — helle Glanzpunkte
     (Weiß, bis 40 % Deckung) und dunkle Poren (Anthrazit, gedeckelt auf 8 %).
     Gemessen: Mittel = --bg-2, Streuung ±5 Graustufen, dunkelstes Pixel 217.
     Der Deckel hält den Kontrast auch auf der dunkelsten Pore (#D6D8DC):
     --muted 4,7:1, --accent-text 5,5:1, --text 10,8:1 (gerechnet, DESIGN-a.md).
     Eine 240-px-Kachel, einmal gerastert, auf jeder --bg-2-Fläche gleich. */
  --struktur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 .14 0 0 0 0 .15 0 0 0 0 .17 1 0 0 0 0'/%3E%3CfeComponentTransfer result='d'%3E%3CfeFuncA type='table' tableValues='.08 .08 .08 .07 .02 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix in='n' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer result='l'%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 .04 .18 .32 .4 .4 .4'/%3E%3C/feComponentTransfer%3E%3CfeMerge%3E%3CfeMergeNode in='d'/%3E%3CfeMergeNode in='l'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)'/%3E%3C/svg%3E");
}
/* Die Strukturfläche: überall, wo --bg-2 als Fläche steht (das CTA-Band
   ist seit 30.09. der Anthrazit-Block und glatt, §11) */
.sek--flaeche, .formular, .hinweis-box,
.sek:not(.sek--flaeche) .kasten,
.site-kopf .nav-sub-liste a:hover {
  background-color: var(--bg-2);
  background-image: var(--struktur);
}

/* =============================================================================
   0. FIRSTLINIE
   Lauf (beliebig lang) + Knick (fest 74 × 36) als EINE Maske auf Dachrot.
   .fl = eigenes Element (Teile), die Pseudo-Elemente unten nutzen dieselbe
   Maske. Zeichnen (Moment, Hover) nur per clip-path — die Form bleibt gleich.
   ============================================================================= */
.fl,
.kasten--einwand::before,
.leistungen-liste > li::before,
.wrap > .schritte::before,
.wrap.stapel > .schritte::before {
  display: block;
  height: var(--fl-h);
  background: var(--accent-fill);
  -webkit-mask: var(--fl-knick) right bottom / 74px 36px no-repeat,
                linear-gradient(#000 0 0) left bottom / calc(100% - 71px) var(--fl-s) no-repeat;
          mask: var(--fl-knick) right bottom / 74px 36px no-repeat,
                linear-gradient(#000 0 0) left bottom / calc(100% - 71px) var(--fl-s) no-repeat;
  pointer-events: none;
}
.fl { flex: none; }
/* Ornament-Fassung (inline SVG aus teile/a/ornamente.php; 'sektion' ist seit
   30.09. leer, 'cta' steht bereit) */
.fl-svg { display: block; height: var(--fl-h); color: var(--accent-fill); overflow: hidden; }
.fl--cta-orn { width: 100%; }

/* =============================================================================
   1. GRUNDSATZ + TYPO-ROLLEN (Mona Sans, Rollen über Breite und Gewicht)
   ============================================================================= */
body { font-kerning: normal; }
::selection { background: color-mix(in oklch, var(--accent-fill) 20%, var(--bg)); color: var(--text); }

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--wght-display);
  font-stretch: var(--wdth-display);
  letter-spacing: var(--track-display);
  line-height: 1.02;
}
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--wght-h2);
  font-stretch: var(--wdth-h2);
  letter-spacing: -0.018em;
  line-height: 1.1;
  max-width: 24ch;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: var(--wght-h3);
  font-stretch: var(--wdth-h3);
  letter-spacing: -0.01em;
  line-height: 1.18;
}
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 46ch; }
.antwort { font-size: var(--fs-lead); line-height: 1.5; font-weight: 460; max-width: 54ch; }
.kicker {
  font-size: var(--fs-klein);
  font-weight: 600;
  font-stretch: var(--wdth-label);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.klein { line-height: 1.45; }
.micro { line-height: 1.45; }
.quelle { line-height: 1.5; }
.quelle a { text-decoration-color: var(--line-strong); }
.quelle a:hover { text-decoration-color: currentColor; }
/* Material-/Technik-Zeile: in A keine Mono, sondern Beschriftungsbreite */
.material {
  font-family: var(--sans);
  font-size: var(--fs-klein);
  font-stretch: var(--wdth-label);
  font-weight: 520;
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: var(--text);
}
.h1-zusatz {
  margin-top: 0.7em;
  max-width: 36ch;
  font-size: var(--fs-lead);
  font-weight: 560;
  font-stretch: 108%;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--text);
}
.prose h2, .prose h3 { margin-top: 1.6em; }
.prose h3 { font-size: var(--fs-h3); font-stretch: var(--wdth-h3); font-weight: 680; }
.prose h3 + .antwort { margin-top: 0.6em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.35em; }
b, strong { font-weight: 660; }
/* Überschriften: mobil nur lange Komposita trennen („Terrassenüberdachung"),
   nie kurze Wörter wie „Dachdecker" (Chrome/Edge; sonst normales hyphens). */
h1, h2, h3 { hyphenate-limit-chars: 12 5 5; }
/* Desktop: H2 nie automatisch trennen (Abnahme 30.09.2026, NACHKRITIK-a neu
   6: „Metall-|fassade", „Terrassen-|überdachung" bei 1440 — text-wrap:
   balance griff zur Trennung, obwohl Platz war). 26ch fassen das längste
   Wort der Seiten („Zwischensparrendämmung", 22 Zeichen). Mobil bleibt
   hyphens: auto aus basis.css. */
@media (min-width: 64em) {
  h2 { -webkit-hyphens: manual; hyphens: manual; max-width: 26ch; }
}
/* Fließtext: nur Wörter ab 10 Zeichen, mindestens 4 davor und danach —
   sonst trennt das Wörterbuch „Titanz-ink" oder „waa-gerecht" (KRITIK-b Nr. 8
   gilt auch für A: dieselben Texte im Register der Startseite). */
:where(p, li, dd, figcaption, summary) { hyphenate-limit-chars: 10 4 4; }

/* =============================================================================
   2. KNÖPFE, TELEFON, LINKS
   ============================================================================= */
a:hover { text-decoration-thickness: 2px; }
.btn {
  min-height: 48px;
  padding: 0.72em 1.3em;
  font-weight: var(--wght-knopf);
  font-stretch: var(--wdth-label);
  letter-spacing: 0.005em;
}
.btn .ico { width: 1.15em; height: 1.15em; }
.btn--primaer:hover { background: var(--accent-text); }                /* Weiß darauf 7,84:1 */
.btn--sekundaer { color: var(--text); border-color: var(--field-border); }
.btn--sekundaer:hover { border-color: var(--text); background: var(--bg-2); }
.sek--flaeche .btn--sekundaer:hover { background: var(--bg-3); }
.btn-reihe { gap: 0.75rem; }
/* Telefon als unterstrichener Kontaktweg (CTA-Zeile, Fließtext) */
.tel-link:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: var(--wght-knopf);
  font-stretch: var(--wdth-label);
  color: var(--text);
  text-decoration: none;
  vertical-align: bottom;
}
.cta-tel { min-height: 48px; }
.tel-link:not(.btn) span {
  text-decoration: underline;
  text-decoration-color: var(--accent-fill);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.tel-link:not(.btn):hover span { text-decoration-thickness: 4px; }
.tel-link .ico { width: 1.1em; height: 1.1em; }
/* Kontaktwege im Fließtext: Trefferfläche auf 44 px Höhe erweitern, ohne
   den Zeilenabstand zu ändern (BAUANLEITUNG §1: Kontaktwege >= 44 px). */
main a[href^="tel:"]:not(.btn):not(.kanal), main a[href^="mailto:"]:not(.kanal) { position: relative; }
main a[href^="tel:"]:not(.btn):not(.kanal)::after, main a[href^="mailto:"]:not(.kanal)::after {
  content: "";
  position: absolute;
  inset: calc(50% - 22px) -4px;
}
/* Im Fließtext höchstens eine Zeile hoch (Abnahme-Fix 30.09.2026, A3): Stehen
   Telefon und E-Mail Zeile unter Zeile im selben Absatz (Start #anfrage-start,
   Datenschutz), deckte die 44-px-Fläche des späteren Links den früheren ab —
   6 von 9 Tipps auf die Telefonnummer öffneten die E-Mail. Mit 1lh stoßen die
   Flächen benachbarter Zeilen nur aneinander. Das ist die Inline-Ausnahme von
   WCAG 2.5.8; bei Fließtext mit ≥ 24 px Zeilenhöhe sind es trotzdem ≥ 24 px.
   Kontaktwege in eigener Zeile (CTA-Zeile .btn-reihe) behalten 44 px. Ohne
   lh-Einheit bleibt die Zeile oben stehen (44 px). */
main :is(p, li, dd, td, address, figcaption) :is(a[href^="tel:"]:not(.btn):not(.kanal), a[href^="mailto:"]:not(.kanal))::after {
  inset: calc(50% - 0.5lh) -4px;
}

/* =============================================================================
   3. VORSCHAU-LEISTE (nur Vorschau, Mechanik in basis)
   ============================================================================= */
.vorschau { font-stretch: 105%; }
.vorschau b { font-weight: 660; }
.vorschau-varianten a { min-height: 32px; }

/* =============================================================================
   4. KOPF + NAVIGATION
   ============================================================================= */
.site-kopf { border-bottom: 1px solid var(--line); }
.nav-links a, .nav-sub-knopf { font-weight: 540; font-stretch: 104%; }
.nav a:hover, .nav a[aria-current="page"], .nav .is-active > a {
  text-decoration: underline;
  text-decoration-color: var(--accent-fill);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}
.nav-tel { font-weight: var(--wght-knopf); font-stretch: var(--wdth-label); gap: 0.45em; }
.nav-tel > span:last-child {
  text-decoration: underline;
  text-decoration-color: var(--accent-fill);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.nav-tel:hover > span:last-child { text-decoration-thickness: 4px; }
.nav-tel .ico { width: 1.15em; height: 1.15em; }
.menue-knopf {
  min-width: 44px;
  min-height: 44px;
  border: 2px solid var(--field-border);
  border-radius: var(--radius);
}
.menue-knopf:hover { border-color: var(--text); }
.menue-knopf .ico { width: 1.4rem; height: 1.4rem; }
.nav-sub-knopf .ico { width: 1.1em; height: 1.1em; }

@media (max-width: 74.99em) {
  .kopf-innen { gap: var(--s-2); }
  /* Logo-Link als Tippziel 44 px hoch (Abnahme-Fix 30.09.2026, A4, P2-13:
     vorher 112 × 23 px bei 375) — das Bild bleibt gleich groß, der Kopf
     auch (Menüknopf 44 px). */
  .logo { display: flex; align-items: center; min-height: 44px; }
  .nav-links a { font-size: 1.125rem; font-weight: 580; font-stretch: 108%; min-height: 52px; }
  .nav-sub-liste a { font-size: 1rem; font-weight: 480; font-stretch: 100%; min-height: 44px; }
  .js .nav { border-top: 0; box-shadow: 0 30px 40px -30px var(--tiefe); }
}
@media (max-width: 29.99em) {
  .kopf-innen { gap: var(--s-1); }
  .logo img { width: 7rem; }
  .nav-tel { font-stretch: 100%; gap: 0.35em; }
}
/* unter 375 px (Reflow bis 320): Telefon im Kopf nur als Symbol, 44 × 44 —
   Name und Nummer bleiben für Screenreader (visually-hidden-Muster) */
@media (max-width: 23.4em) {
  .nav-tel { justify-content: center; min-width: 44px; }
  .nav-tel > span:last-child {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .nav-tel .ico { width: 1.4rem; height: 1.4rem; }
}
@media (min-width: 75em) {
  .kopf-innen { gap: var(--s-2); }
  .nav-links a, .nav-sub-knopf { font-stretch: 100%; }
  .nav-sub-liste {
    padding: var(--s-1) 0;
    border: 1px solid var(--line-strong);
    border-top: var(--fl-s) solid var(--accent-fill);
    box-shadow: 0 24px 40px -24px var(--tiefe);
  }
  .nav-sub-liste a { padding: 0.5rem var(--s-3); font-weight: 480; font-stretch: 100%; }
  .nav-sub-liste a:hover { text-decoration: none; }
  .nav-sub-liste li:last-child { border-top: 1px solid var(--line); margin-top: var(--s-1); padding-top: var(--s-1); }
  .nav-sub-liste li:last-child a { font-weight: 600; }
}

/* =============================================================================
   5. START-HERO (Teil a/start-hero) — Foto bis an den rechten Rand
   ============================================================================= */
.shero--start { padding: 0; }
.shero--start .shero-raster { gap: 0; align-items: stretch; }
.shero--start .shero-text { padding: var(--s-4) var(--gutter) var(--s-5); align-self: center; }
.shero--start .shero-text > * + * { margin-top: 0; }
.shero--start .shero-text > .h1-zusatz, .shero--start .shero-text > .kicker + h1 { margin-top: var(--s-2); }
.shero--start h1 { font-size: var(--fs-display); line-height: 0.94; max-width: none; }
.h1-haupt { display: block; }
.h1-nach { display: block; }
.shero--start .h1-nach {
  margin-top: 0.4em;
  max-width: 15em;
  font-size: var(--fs-nach);
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: -0.012em;
  line-height: 1.12;
}
/* Das Kursiv-Echo der Wortmarke — genau hier, sonst nirgends.
   Abnahme 30.09.2026 (NACHKRITIK-a alt 9, Seitengewicht): die echte Kursive
   (mona-sans-italic-latin.woff2, 102 KB, größter Einzelposten der Startseite)
   trug nur dieses eine Wort. Mona Sans Italic ist eine schräggestellte
   Grotesk ohne eigene Formen — dieselbe Roman-Form um 11° geneigt ist im
   Vergleich bei 40 px nicht zu unterscheiden (Vergleichsbild im Scratch,
   theme-a-rest/kursiv.png). Damit braucht A die Kursiv-Datei nicht mehr;
   der Preload in config.php (VARIANTE_FONTS['a']) kann entfallen
   (WUENSCHE-theme-a.md). Ein <em> im Fließtext bekäme weiter die echte
   Kursive (fonts.css), sie lädt dann nur bei Bedarf. */
.h1-nach em {
  display: inline-block;
  font-style: normal;
  font-weight: 830;
  transform: skewX(-11deg);
}
.shero--start .h1-zusatz {
  margin-top: 1.1rem;
  font-size: var(--fs-body);
  font-weight: 600;
  font-stretch: var(--wdth-label);
  letter-spacing: 0.01em;
  color: var(--muted);
}
.fl--hero { width: 100%; max-width: 36rem; margin-block: var(--s-3); }
.shero--start .lead { max-width: 40ch; }
.shero--start .shero-text > .btn-reihe { margin-top: var(--s-3); }
.shero--start .shero-text > .micro { margin-top: 0.6rem; }
.shero--start .shero-text > .hero-belege { margin-top: var(--s-4); }
/* Beleg-Leiste: je Beleg eine Anthrazit-Kante (kein Schild, kein Rahmen) */
.hero-belege {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-3);
  max-width: 36rem;
}
.hero-belege li {
  min-width: 0;
  padding-top: 0.55rem;
  border-top: 2px solid var(--text);
  font-weight: 600;
  line-height: 1.3;
}
/* Spaltenzahl nach der Breite der Textspalte (Container Query), nicht nach
   dem Viewport: zwei Spalten, ein allein stehender letzter Beleg nimmt die
   ganze Zeile; ab 28rem Textspalte drei Spalten nebeneinander. */
.shero--start .shero-text { container-type: inline-size; }
.hero-belege li:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
@container (min-width: 28rem) {
  .hero-belege { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-belege li:last-child:nth-child(odd):not(:first-child) { grid-column: auto; }
}
.shero--start .shero-medium {
  position: relative;
  order: -1;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--bg-2);
}
.shero--start .shero-medium picture,
.shero--start .shero-figur { position: absolute; inset: 0; }
.shero--start .shero-figur picture { position: absolute; inset: 0; }
/* Bildunterschrift ('bild_caption'): kleines Schild unten links am Foto */
.shero--start .shero-caption {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  max-width: min(100%, 34rem);
  margin: 0;
  padding: 0.45rem var(--gutter) 0.45rem 0.75rem;
  background: var(--bg);
  color: var(--muted);
}
/* unten verankert: die beiden Dachdecker auf dem Dach bleiben ganz im Bild */
.shero--start .shero-medium img {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 35% 100%;   /* Kran, Palette und beide Dachdecker im Bild */
  border-radius: 0;
}
.shero--start .shero-medium .ph-foto { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
@media (min-width: 56em) {
  .shero--start .shero-raster {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    padding-left: calc(max(0px, (100% - var(--wrap)) / 2) + var(--gutter));
    min-height: min(calc(100vh - var(--kopf-h)), 48rem);
    min-height: min(calc(100svh - var(--kopf-h)), 48rem);
  }
  .shero--start .shero-text { padding: var(--s-5) var(--s-5) var(--s-5) 0; }
  /* Das Foto hängt am Kopf wie eine Last am Haken: es füllt genau den ersten
     Bildschirm. Ist die Textspalte länger (schmale Desktops), läuft nur der
     Text weiter — Palette und Dachdecker am unteren Bildrand bleiben sichtbar. */
  .shero--start .shero-medium {
    order: 0;
    aspect-ratio: auto;
    align-self: start;
    height: min(calc(100vh - var(--kopf-h)), 48rem);
    height: min(calc(100svh - var(--kopf-h)), 48rem);
    min-height: 30rem;
  }
  /* Firstlinie läuft bis an die Fotokante: der Knick stößt an das Kranbild */
  .fl--hero { width: calc(100% + var(--s-5)); max-width: none; }
  /* „Dach dicht." bleibt eine Zeile: die Textspalte ist 46 % breit, das Wort-
     paar braucht bei 125 % Breite rund 5,9 × Schriftgröße → höchstens 6,1vw. */
  .shero--start h1 .h1-haupt { font-size: min(1em, 6.1vw); }
}
/* Schmale Desktops: die Fotospalte ist hoch und schmal, der Ausschnitt rückt
   nach rechts, damit Palette und beide Dachdecker im Bild bleiben. */
@media (min-width: 56em) and (max-width: 84.99em) {
  .shero--start .shero-medium img { object-position: 58% 100%; }
}
/* Tablet hochkant: 3:2 wäre über 500 px hoch und schöbe die Knöpfe aus dem Bild */
@media (min-width: 48em) and (max-width: 55.99em) {
  .shero--start .shero-medium { aspect-ratio: 16 / 9; }
}
@media (max-width: 47.99em) {
  .shero .btn-reihe .btn { flex: 1 1 auto; }
}
/* Mobil: Knöpfe direkt unter die Firstlinie, damit Termin und Telefon im
   ersten Bildschirm stehen (dann ruht auch das Dock). Der Einleitungssatz
   folgt darunter; im Quelltext bleibt die Reihenfolge unverändert, und die
   Einleitung enthält keine Links (Fokus-Reihenfolge bleibt stimmig). */
@media (max-width: 55.99em) {
  .shero--start .shero-text { display: flex; flex-direction: column; }
  .shero--start .shero-text > .kicker { order: 0; }
  .shero--start .shero-text > h1 { order: 1; }
  .shero--start .shero-text > .fl--hero { order: 2; }
  .shero--start .shero-text > .btn-reihe { order: 3; margin-top: 0; }
  .shero--start .shero-text > .micro { order: 4; }
  .shero--start .shero-text > .lead { order: 5; margin-top: var(--s-4); }
  .shero--start .shero-text > .hero-belege { order: 6; }
}

/* =============================================================================
   6. SEITENKOPF (Teil a/seiten-hero) + BROTKRUMEN + SPRUNGLEISTE
   Stand 30.09.2026 (KRITIK-a Nr. 1, 6, 8, 15):
   - Geteilte H1 wie auf der Startseite: Leistung + Ort als Display (36 → 64),
     der Rest als Nachschlag (22 → 32); H2 misst 24 → 40 → Verhältnis ≥ 1,5.
   - Ab 75em Text 7/12, Foto 5/12: kürzere H1-Zeilen, Knöpfe im ersten
     Bildschirm auch bei 1366 × 768.
   - Die Firstlinie unter der H1 läuft ab 56em bis an die Fotokante, der Knick
     stößt an das Foto — dieselbe Geste wie im Start-Hero, nur ohne Bewegung.
   - Hinter dem Foto eine kräftigere Tafel (--tafel, 11 % Anthrazit + Korn),
     die oben über das Foto ragt und bis an den rechten Bildschirmrand läuft.
   ============================================================================= */
.shero:not(.shero--start) {
  padding-block: var(--s-4) var(--s-5);
  overflow-x: clip;                     /* die Tafel läuft rechts aus dem Bild */
}
/* H1 der Unterseiten: geteilt oder ganz (Teil a/seiten-hero) */
.shero:not(.shero--start) h1 { max-width: 22em; }
.h1--geteilt { font-size: var(--fs-h1); line-height: 1; }
.h1--geteilt .h1-haupt { line-height: 1; text-wrap: balance; }
.shero:not(.shero--start) .h1-nach {
  margin-top: 0.4em;
  max-width: 24em;
  font-size: var(--fs-h1-nach);
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: -0.012em;
  line-height: 1.14;
  text-wrap: balance;
}
.h1--ganz { font-size: var(--fs-h1-ganz); line-height: 1.04; text-wrap: balance; }
.shero:not(.shero--start) .h1-zusatz { margin-top: 0.9rem; }
/* Tafel: hinter dem Foto steht eine Strukturfläche. Sie ragt oben über
   das Foto hinaus und läuft bis an den rechten Bildschirmrand; unten endet
   sie bei 70 % der Medienhöhe, damit eine Bildunterschrift nie halb auf der
   Tafel und halb daneben steht. Das Foto wirkt davor angehoben. */
.shero:not(.shero--start) .shero-medium { position: relative; isolation: isolate; }
.shero:not(.shero--start) .shero-medium::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--s-4));
  bottom: 30%;
  left: 24%;
  width: 100vw;
  background-color: var(--tafel);
  background-image: var(--struktur);
}
.shero-raster { gap: var(--s-5) var(--s-6); }
.shero-text > * + * { margin-top: var(--s-3); }
.shero-text > .kicker + h1 { margin-top: var(--s-2); }
.fl--shero { width: var(--fl-kurz); }
.shero-text > h1 + .fl--shero { margin-top: var(--s-3); }
.shero .brotkrumen + * { margin-top: var(--s-4); }
.shero-medium img { border-radius: var(--radius); }
.shero-medium--foto img {
  aspect-ratio: 5 / 4;
  object-fit: cover;
  box-shadow: 0 2.25rem 2.5rem -2rem var(--tiefe);
}
/* Teamfoto: das Neuß-Schild über dem Tor bleibt im 5:4-Ausschnitt ganz
   (KRITIK-c Nr. 12 gilt auch für A). */
.shero-medium--foto img[src*="/team-"] { object-position: 50% 0; }
.shero-medium--kasten .kasten { background: var(--bg); border: 1px solid var(--line-strong); box-shadow: 0 2.25rem 2.5rem -2rem var(--tiefe); }
.shero-text > .material { margin-top: var(--s-2); color: var(--muted); }
@media (min-width: 56em) {
  .shero:not(.shero--start) .shero-raster:has(> .shero-medium) { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
  /* Foto mittig zur Textspalte: die Linie unter der H1 liegt dort immer
     innerhalb der Fotohöhe, der Knick stößt also an das Foto (gemessen auf
     allen Leistungsseiten). Die Tafel füllt die Fläche oben rechts. */
  .shero:not(.shero--start) .shero-raster { align-items: center; }
  /* Firstlinie bis an die Fotokante: Textspalte + Spaltenabstand */
  .shero-raster:has(> .shero-medium) .fl--shero { width: calc(100% + var(--s-6)); max-width: none; }
}
@media (min-width: 75em) {
  .shero:not(.shero--start) .shero-raster:has(> .shero-medium) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
/* Knöpfe direkt unter die Firstlinie (H1 mit Nachschlag und Zusatz ist
   schon das Versprechen), die längere Einleitung folgt darunter. So stehen
   Termin und Telefon im ersten Bildschirm: 375 × 812 mit Vorschau-Leiste und
   1366 × 768 (KRITIK-a Nr. 6; vorher bis 826 px bei 1366 × 768). Im Quelltext
   bleibt die Reihenfolge, und keine Seiten-Einleitung enthält einen Link
   (geprüft 30.09.2026) — die Fokus-Reihenfolge bleibt stimmig. */
.shero:not(.shero--start) .shero-text { display: flex; flex-direction: column; }
.shero:not(.shero--start) .shero-text > * { order: 1; }
.shero:not(.shero--start) .shero-text > :is(.btn-reihe, .micro) { order: 2; }
.shero:not(.shero--start) .shero-text > .lead { order: 3; margin-top: var(--s-4); }
.shero:not(.shero--start) .shero-text > .material { order: 4; }
.shero:not(.shero--start) .shero-text > .fl--shero + .btn-reihe,
.shero:not(.shero--start) .shero-text > .fl--shero + .lead + .btn-reihe { margin-top: var(--s-3); }
.shero:not(.shero--start) .shero-text > .brotkrumen + * { margin-top: var(--s-3); }
.brotkrumen ol { gap: 0.25rem 0.55rem; }
.brotkrumen a { color: var(--muted); text-decoration-color: var(--line-strong); }
.brotkrumen a:hover { color: var(--text); text-decoration-color: var(--accent-fill); }
.brotkrumen [aria-current="page"] { font-weight: 560; }

/* Sprungleiste: ein Register, keine Chips */
.sprungleiste {
  margin-top: var(--s-5);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-3);
}
.sprungleiste-titel { font-weight: 600; font-stretch: var(--wdth-label); letter-spacing: 0.02em; }
.sprungleiste ul { margin: 0; gap: 0 var(--s-3); }
.sprungleiste a {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-weight: 540;
  font-stretch: 104%;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}
.sprungleiste a:hover { text-decoration-color: var(--accent-fill); text-decoration-thickness: 2px; }
.shero--start + .wrap .sprungleiste { margin-top: 0; }
.shero .sprungleiste { margin-top: var(--s-5); }
/* Nach Seitenkopf + Sprungleiste lagen rund 250 px Leere vor der ersten
   Sektion (KRITIK-a Nr. 15) — halbiert. */
.shero + .sek:not(.sek--flaeche), .shero--start + .wrap + .sek:not(.sek--flaeche) { padding-top: var(--s-6); }

/* =============================================================================
   7. SEKTIONEN + STRUKTURFLÄCHEN (Materialebene: Flächen siehe oben, --struktur)
   ============================================================================= */
/* Fotos in .split--bild laufen bis an den Fensterrand (§14): die Sektion
   schneidet nur waagerecht ab (clip, kein Scroll-Container → sticky bleibt). */
.sek { overflow-x: clip; }
/* Zwei glatte Sektionen hintereinander (die Flächen sind seit 30.09. nach
   Inhalt vergeben, nicht im Takt): statt der gestrichenen Firstlinie über der
   H2 trennt eine Haarlinie über die Inhaltsbreite — die Register-Linie der
   Variante. Der Abstand davor bleibt, danach etwas knapper. */
/* Abnahme 30.09.2026 (NACHKRITIK-a neu 3): dasselbe für zwei Strukturflächen
   hintereinander. Vorher verschmolzen sie zu einer Fläche mit 288 px leerer
   Körnung zwischen zwei Themen (Start: Betrieb → Kran, Dachsanierung:
   Dämmpflicht → Solarpflicht, Referenzen: Herkunft → Stimmen). Jetzt
   derselbe Takt wie bei glatt + glatt: Abstand · Haarlinie · knapperer
   Abstand. Nur wenn die zweite Sektion mit einem .wrap beginnt (ein
   Bildband am Anfang braucht keine Linie). */
.sek:not(.sek--flaeche) + .sek:not(.sek--flaeche):has(> .wrap:first-child),
.sek--flaeche + .sek--flaeche:has(> .wrap:first-child) { padding-top: 0; }
.sek:not(.sek--flaeche) + .sek:not(.sek--flaeche) > .wrap:first-child,
.sek--flaeche + .sek--flaeche > .wrap:first-child {
  padding-top: var(--s-6);
  background: linear-gradient(var(--line-strong) 0 0) 50% 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
/* Zwei .wrap in einer Sektion (Abnahme-Fix 30.09.2026, A1): ein .stapel oder
   .split als zweiter Block hatte 0 px Abstand zum ersten. Die Bildunterschrift
   klebte an der 2-px-Kante der Kennwerte (Ausbildung, 375: Kontrast 2,28 : 1),
   Bildunterschriften an der Galerie (Referenzen), die Quelle an den Kennwerten
   (Ausbildung, 1440), die H2 am Foto (Karriere). Jetzt derselbe Abstand wie
   vor Kennwerten; nach einem Wrap, der nur die H2 trägt, der Abstand H2 → Inhalt.
   Wraps mit CTA-Zeile oder Weiter-Link bringen ihren Abstand selbst mit. */
.sek > .wrap + .wrap:is(.stapel, .split) { margin-top: var(--s-5); }
.sek > .wrap:has(> h2:last-child) + .wrap { margin-top: var(--s-4); }
:where(.sek > .wrap:not(.split)) > * + * { margin-top: var(--s-3); }
:where(.sek .wrap, .sek .stapel) > h2 + * { margin-top: var(--s-4); }
:where(.sek .wrap, .sek .stapel) > h2 + :is(p, .lead, .antwort) { margin-top: var(--s-3); }
.btn-reihe + p { margin-top: var(--s-2); }
/* :not(.merksatz) (Abnahme 30.09.2026, NACHKRITIK-a neu 1): diese Regel hat
   die Spezifität 0,2,1 und schlug die 28ch des Merksatzes (0,1,0) — der lief
   dadurch 1256 px breit in 34 px und las sich wie eine zweite H2. */
:where(.sek .wrap, .sek .stapel, .cta-band .wrap) > p:not(.lead):not(.antwort):not(.merksatz) { max-width: var(--wrap-text); }
.stapel > h3:not(:first-child) { margin-top: var(--s-5); }
.sek .wrap > h2 + .lead, .sek .stapel > h2 + p { margin-top: var(--s-3); }
.sek .wrap > .lead + * { margin-top: var(--s-5); }
.split { gap: var(--s-5) var(--s-6); }
/* Foto oben an der Überschrift, nicht mittig (KRITIK-a Nr. 15). Abnahme
   30.09.2026: align-items am Raster reichte nicht — basis.css setzt
   .split-medium { align-self: center }, und das schlägt align-items. Das Foto
   hing dadurch bis 274 px unter der H2 (Terrasse, Job-Seiten). */
@media (min-width: 56em) {
  .split:has(> .split-medium) { align-items: start; }
  .split > .split-medium { align-self: start; }
}
/* Fotos in Sektionen: leicht angehoben, wie am Haken */
.split-medium img, .referenz img, .team img { border-radius: var(--radius); }
.split-medium img { box-shadow: 0 2rem 2.25rem -1.9rem var(--tiefe); }
.referenz figcaption, .galerie-bild figcaption, .team figcaption {
  margin-top: 0.7rem;
  font-size: var(--fs-klein);
  font-stretch: 104%;
  line-height: 1.45;
  color: var(--muted);
  max-width: 62ch;
}
.referenz figcaption b, .team figcaption b { color: var(--text); font-weight: 640; }
/* Bildunterschrift am großen Foto neben dem Text (Abnahme-Fix 30.09.2026, A1,
   P2-3): in --text statt --muted. Der Schatten des gehobenen Fotos reicht
   bis in die Textzeile, auf der Strukturfläche kommt das Korn dazu —
   --muted fiel dort auf 3,91 : 1 (Job, 1440). Der Schatten bleibt (Signatur
   „am Haken"); gemessen blieb jede Schatten-Variante mit --muted knapp an
   4,5 (4,44–4,57), --text hält > 10 : 1. Kacheln (Galerie, Team, Referenz-
   Raster) behalten --muted: dort liegt kein Schatten. Die Hervorhebung
   in der Unterschrift trägt weiter das Gewicht (b 640). */
.split-medium:is(.referenz, .team) > figcaption,
.split-medium > :is(.referenz, .team) > figcaption { color: var(--text); }
.raster { gap: var(--s-4) var(--s-4); }
.raster--2 > .referenz img { aspect-ratio: 16 / 10; object-fit: cover; }

/* =============================================================================
   7b. HANDBUCH — die Strukturfläche als Nachschlage-Seite (ab 75em)
   KRITIK-a Nr. 3: Wissen, Pflichten, Förderung und FAQ liefen links auf 66ch,
   rechts blieben 40 % leer. Auf der Strukturfläche (.sek--flaeche, nach
   Inhalt vergeben: Recht, Förderung, Wissen, FAQ) steht die H2 jetzt in einer
   eigenen linken Spalte (5/12) und bleibt beim Lesen stehen (sticky), die
   Antworten laufen rechts (7/12 ≈ 66ch). Gilt nur für reine Text-Wraps:
   Sektionen, die irgendwo Split, Raster (z. B. Vorher/Nachher), Galerie,
   Register, Stellen, Formular oder Ablauf enthalten, behalten die volle
   Breite — Fotos werden nicht in die schmale Spalte gedrückt. Die volle CTA-Zeile geht über beide
   Spalten (unterhalb der Antworten). Mobil und Tablet: unverändert einspaltig.
   Technik: die H2 überspannt 60 Rasterzeilen bei row-gap 0 (leere Zeilen
   haben die Höhe 0), die Abstände laufen weiter über margin-top.
   ============================================================================= */
@media (min-width: 75em) {
  .sek--flaeche > .wrap:not(.split):has(> h2):not(:has(.split, .raster, .galerie, .leistungen-liste, .stellen, .formular, .schritte, .team)) {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s-6);
    row-gap: 0;
    align-items: start;
  }
  .sek--flaeche > .wrap:not(.split):has(> h2):not(:has(.split, .raster, .galerie, .leistungen-liste, .stellen, .formular, .schritte, .team)) > * { grid-column: 2; }
  .sek--flaeche > .wrap:not(.split):has(> h2):not(:has(.split, .raster, .galerie, .leistungen-liste, .stellen, .formular, .schritte, .team)) > :is(.kicker, .cta-zeile) { grid-column: 1 / -1; }
  .sek--flaeche > .wrap:not(.split):has(> h2):not(:has(.split, .raster, .galerie, .leistungen-liste, .stellen, .formular, .schritte, .team)) > h2 {
    grid-column: 1;
    grid-row: 1 / span 60;
    position: sticky;
    top: var(--s-4);
    max-width: 14em;
    margin: 0;
  }
  .sek--flaeche > .wrap:not(.split):has(> .kicker + h2):not(:has(.split, .raster, .galerie, .leistungen-liste, .stellen, .formular, .schritte, .team)) > h2 { grid-row: 2 / span 60; }
  .sek--flaeche > .wrap:not(.split):has(> h2):not(:has(.split, .raster, .galerie, .leistungen-liste, .stellen, .formular, .schritte, .team)) > h2 + * { margin-top: 0; }
  .sek--flaeche > .wrap:not(.split):has(> h2):not(:has(.split, .raster, .galerie, .leistungen-liste, .stellen, .formular, .schritte, .team)) > .kicker + h2 { margin-top: var(--s-3); }
  .sek--flaeche > .wrap:not(.split):has(> h2):not(:has(.split, .raster, .galerie, .leistungen-liste, .stellen, .formular, .schritte, .team)) > .kicker + h2 + * { margin-top: var(--s-3); }
  /* Abnahme 30.09.2026 (NACHKRITIK-a neu 1 + 6): in der Spalte steht die H2
     in 34 statt 40 px (bei 5/12 ≈ 480 px trennte „Neuein-|decken"), der
     Merksatz rechts in der kleinen Stufe (19 → 24 px) — er konkurriert sonst
     direkt neben der H2 mit ihr. */
  .sek--flaeche > .wrap:not(.split):has(> h2):not(:has(.split, .raster, .galerie, .leistungen-liste, .stellen, .formular, .schritte, .team)) > h2 { font-size: var(--fs-h2-spalte); }
  .sek--flaeche > .wrap:not(.split):has(> h2):not(:has(.split, .raster, .galerie, .leistungen-liste, .stellen, .formular, .schritte, .team)) > .merksatz {
    max-width: 34ch;
    font-size: var(--fs-merk-klein);
  }
}

/* =============================================================================
   8. LEISTUNGSLISTE (Teil a/leistungsliste) — das Register
   Haarlinie über jedem Eintrag; Hover/Fokus: die Firstlinie zieht sich über
   die Linie und knickt hoch.
   ============================================================================= */
.leistungen-liste {
  gap: var(--s-4) var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
@media (min-width: 48em) {
  .leistungen-liste:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75em) {
  .leistungen-liste--bilder:has(> li:nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.leistungen-liste > li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-strong);
}
.leistungen-liste li > * + * { margin-top: 0; }
.leistungen-liste > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * var(--fl-h) + 3px);      /* Lauf liegt mittig auf der Haarlinie */
  width: 11rem;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.38s var(--ease-signatur);
}
.leistungen-liste > li:hover::before,
.leistungen-liste > li:has(a:focus-visible)::before { clip-path: inset(0 0 0 0); }
.leistungen-liste h2, .leistungen-liste h3 {
  font-size: var(--fs-h3);
  font-stretch: var(--wdth-display);
  font-weight: 720;
  letter-spacing: -0.018em;
  line-height: 1.1;
  max-width: none;
}
.leistungen-liste h2 a, .leistungen-liste h3 a { color: var(--text); text-decoration: none; }
.leistungen-liste h2 a::after, .leistungen-liste h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.leistungen-liste a:focus-visible { outline: none; }
.leistungen-liste > li:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 8px; }
.leistungen-liste p { color: var(--muted); max-width: 46ch; }
.leistungen-liste .material { color: var(--text); }
.leistungen-liste picture, .leistungen-liste .ph-foto { margin-bottom: 0.4rem; }
/* 16:10 statt 3:2 (Abnahme 30.09.2026): die Vorschaubilder sind 4:3 bis
   5:3 — im 3:2-Rahmen wurde kupfergaube (5:3) bei 1024 auf 497 px gezeichnet
   und brauchte die 800er-Datei; im 16:10-Rahmen reichen 480 (bild-sizes.php). */
.leistungen-liste img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }
.leistungen-liste .ph-foto { aspect-ratio: 16 / 10; }
/* Register mit Fotos (Abnahme 30.09.2026, NACHKRITIK-a neu 8):
   - ab 48em immer zwei Spalten, ab 75em drei (auch mit weniger als vier
     Einträgen, z. B. „Passt oft dazu").
   - Bleibt der letzte Foto-Eintrag allein in seiner Reihe (10 Leistungen in
     3 Spalten: Terrasse), steht er über zwei Spalten: Foto links genau so
     breit wie die Fotos darüber, Text rechts — keine Reihe mit zwei Dritteln
     Leerfläche.
   - Einträge ohne Foto ('platzhalter' => false; das Teil stellt sie hinter
     die Fotokacheln) folgen den Fotos; nach dem Zwei-Spalten-Eintrag in
     einer eigenen Reihe. */
@media (min-width: 48em) {
  .leistungen-liste.leistungen-liste--bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75em) {
  .leistungen-liste.leistungen-liste--bilder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Der allein stehende letzte Foto-Eintrag: das Teil setzt .rest-2 (ungerade
   Zahl Fotos → allein in der Zweierreihe) und .rest-3 (3n+1 Fotos → allein
   in der Dreierreihe). Er läuft über zwei Spalten, innen wieder zwei Spalten
   mit dem Abstand des Registers: das Foto ist so breit wie die Fotos
   darüber, der Text steht rechts daneben. */
@media (min-width: 48em) and (max-width: 74.99em) {
  .leistungen-liste--bilder > li.rest-2 { grid-column: span 2; }
}
@media (min-width: 75em) {
  .leistungen-liste--bilder > li.rest-3 { grid-column: span 2; }
  /* Text-Einträge nach dem Zwei-Spalten-Eintrag: neue Reihe (Start: 7 Fotos
     + 3 ohne). Nach zwei Fotos in einer Reihe füllt der erste Text-Eintrag
     die dritte Spalte (Passt oft dazu: 2 Fotos + 1 ohne) — keine Waise. */
  .leistungen-liste--bilder > li.rest-3 + li.ohne-bild { grid-column-start: 1; }
}
@media (min-width: 48em) and (max-width: 74.99em) {
  .leistungen-liste--bilder > li.rest-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: var(--s-6); }
  .leistungen-liste--bilder > li.rest-2 > :is(picture, .ph-foto, .bild-fehlt) { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
  .leistungen-liste--bilder > li.rest-2 > :not(picture):not(.ph-foto):not(.bild-fehlt) { grid-column: 2; }
}
@media (min-width: 75em) {
  .leistungen-liste--bilder > li.rest-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: var(--s-6); }
  .leistungen-liste--bilder > li.rest-3 > :is(picture, .ph-foto, .bild-fehlt) { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
  .leistungen-liste--bilder > li.rest-3 > :not(picture):not(.ph-foto):not(.bild-fehlt) { grid-column: 2; }
}
/* Mobil mit Bildern: Vorschaubild links, Text rechts — das Register mit
   zehn Fotos lief gestapelt über rund fünf Bildschirme (gemessen 30.09.). */
@media (max-width: 47.99em) {
  .leistungen-liste--bilder > li {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    column-gap: var(--s-2);
    align-items: start;
  }
  .leistungen-liste--bilder > li > :is(picture, .ph-foto, .bild-fehlt) { grid-column: 1; grid-row: 1 / span 4; margin-bottom: 0; }
  .leistungen-liste--bilder > li > :not(picture):not(.ph-foto):not(.bild-fehlt) { grid-column: 2; }
  .leistungen-liste--bilder > li.ohne-bild > :not(picture):not(.ph-foto):not(.bild-fehlt) { grid-column: 1 / -1; }   /* ohne Foto: Text über die ganze Zeile */
  .leistungen-liste--bilder img { aspect-ratio: 1; }
  .leistungen-liste--bilder .ph-foto { aspect-ratio: 1; padding: 0.4rem; gap: 0.2rem; }
  .leistungen-liste--bilder .ph-foto figcaption span { display: none; }   /* nur „Foto folgt", das Motiv steht daneben als Name */
  .leistungen-liste--bilder p:not(.material) { font-size: var(--fs-klein); line-height: 1.45; }
}

/* =============================================================================
   9. BAUSTEINE
   ============================================================================= */
/* Checkliste */
.checkliste { gap: 0.7em; }
.checkliste-ico { color: var(--accent-text); stroke-width: 2.25; }

/* Fakten (dl-Beleg-Liste) */
.fakten { gap: 0; }
.fakt {
  display: grid;
  gap: 0.3rem;
  padding-block: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-strong);
}
.fakt:first-child { border-top: 1px solid var(--line-strong); }
.fakt dt {
  font-size: var(--fs-lead);
  font-weight: 680;
  font-stretch: var(--wdth-h3);
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--text);
}
.fakt dd { margin: 0; }
.fakt dd > * + * { margin-top: 0.35rem; }

/* Schritte (echte Reihenfolge → Nummern) */
.schritte { list-style: none; padding: 0; counter-reset: schritt; display: grid; gap: var(--s-4); }
.schritt {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0.35rem;
  align-content: start;
}
.schritt + .schritt { margin-top: 0; }
.schritt::before {
  content: counter(schritt);
  grid-row: 1 / span 4;
  font-size: var(--fs-h2);
  font-stretch: var(--wdth-display);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: lining-nums proportional-nums;
}
.schritt > * { grid-column: 2; }
.schritt > * + * { margin-top: 0; }
.schritt h3 { font-size: var(--fs-lead); font-stretch: 104%; font-weight: 680; line-height: 1.25; }
.schritt p { color: var(--muted); }
/* Volle Breite: waagerecht, die Firstlinie als Spur, der Knick über dem
   letzten Schritt (der First = die Abnahme). Erst ab 75em: darunter brachen
   fünf Spalten „Unternehmererklärung" hart um (KRITIK-a Nr. 5). */
.wrap > .schritte::before, .wrap.stapel > .schritte::before { content: none; }
@media (min-width: 48em) and (max-width: 74.99em) {
  .wrap > .schritte, .wrap.stapel > .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
}
@media (min-width: 75em) {
  .wrap > .schritte, .wrap.stapel > .schritte {
    position: relative;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: var(--s-4);
    padding-top: calc(var(--fl-h) + var(--s-3));
  }
  .wrap > .schritte::before, .wrap.stapel > .schritte::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
  }
  .wrap > .schritte > .schritt, .wrap.stapel > .schritte > .schritt { grid-template-columns: minmax(0, 1fr); }
  .wrap > .schritte .schritt::before, .wrap.stapel > .schritte .schritt::before { grid-row: auto; margin-bottom: 0.6rem; }
  .wrap > .schritte .schritt > *, .wrap.stapel > .schritte .schritt > * { grid-column: 1; }
}

/* FAQ */
.faq { max-width: 52rem; }
.faq-antwort > * { max-width: var(--wrap-text); }
.faq details { border-top: 1px solid var(--line-strong); }
.faq details:last-child { border-bottom: 1px solid var(--line-strong); }
.faq-frage { font: inherit; letter-spacing: inherit; margin: 0; }
.faq summary {
  padding-block: var(--s-3);
  font-size: var(--fs-lead);
  font-weight: 640;
  font-stretch: var(--wdth-label);
  line-height: 1.3;
}
.faq summary:hover .faq-frage { text-decoration: underline; text-decoration-color: var(--accent-fill); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.faq-ico { width: 1.5rem; height: 1.5rem; color: var(--accent-text); stroke-width: 2; }
.faq-antwort { padding-bottom: var(--s-4); }

/* Kasten + Einwand-Kasten */
.kasten {
  padding: var(--s-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sek:not(.sek--flaeche) .kasten { border-color: transparent; }
.kasten > * + * { margin-top: var(--s-2); }
.kasten h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); max-width: 26ch; }
.kasten h2.klein { font-size: var(--fs-klein); font-weight: 640; font-stretch: var(--wdth-label); letter-spacing: 0.04em; color: var(--muted); }
.kasten h3 { font-size: var(--fs-h3); }
.kasten p, .kasten li { max-width: var(--wrap-text); }
.kasten--einwand {
  position: relative;
  max-width: 62rem;
  padding: calc(var(--s-4) + var(--fl-h) + var(--s-2)) var(--s-5) var(--s-5);
  border: 0;
  box-shadow: 0 2rem 2.5rem -2.2rem var(--tiefe);
}
.kasten--einwand::before {
  content: "";
  position: absolute;
  top: var(--s-4);
  left: var(--s-5);
  width: 5.5rem;
}
@media (max-width: 47.99em) {
  .kasten--einwand { padding-inline: var(--s-3); }
  .kasten--einwand::before { left: var(--s-3); }
}

/* Hinweis-Box (Förder-/Rechtshinweis mit Stand): Anthrazit-Kante statt Rot */
.hinweis-box {
  max-width: min(100%, 72ch);   /* KRITIK-a Nr. 11: vorher 62rem ≈ 120 Zeichen */
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--text);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.sek--flaeche .hinweis-box { background: var(--bg); }  /* glatte Fläche auf Struktur */
.hinweis-box h3 { font-size: var(--fs-lead); font-stretch: var(--wdth-h3); font-weight: 680; }

/* Tabelle (max. 3 Spalten) */
.tabelle { max-width: 62rem; font-variant-numeric: lining-nums proportional-nums; }   /* ohne Strich-Null (s. Kennwerte §14) */
.tabelle caption {
  caption-side: top;
  padding-bottom: 0.6rem;
  text-align: left;
  font-size: var(--fs-klein);
  font-weight: 600;
  font-stretch: var(--wdth-label);
  letter-spacing: 0.02em;
  color: var(--muted);
}
.tabelle th, .tabelle td { padding: 0.8rem 1.25rem 0.8rem 0; border-bottom: 1px solid var(--line-strong); }
.tabelle thead th {
  border-bottom: 2px solid var(--text);
  font-size: var(--fs-klein);
  font-weight: 640;
  font-stretch: var(--wdth-label);
  letter-spacing: 0.02em;
}
.tabelle tbody th, .tabelle td:first-child { font-weight: 620; }
/* Erste Spalte ab 48em ohne Trennung, auch ohne die weichen Trennstriche
   im Quelltext (Abnahme 30.09.2026, NACHKRITIK-a neu 7): in der halben
   Spalte (Split, Handbuch, 576 px) brach „Steg-/doppel-/platten" dreizeilig,
   weil die automatische Tabellenbreite der ersten Spalte nur ~100 px ließ.
   Ohne Trennstellen ist das längste Wort ihre Mindestbreite. */
@media (min-width: 48em) {
  .tabelle tbody th, .tabelle td:first-child { -webkit-hyphens: none; hyphens: none; }
}
/* Mobil: die letzte Spalte hat rechts keinen Innenabstand (Abnahme-Fix
   30.09.2026, A2, P2-5). Unter 375 px (Reflow bis 320) darf zusätzlich der
   Kopf trennen. Vorher war die Lohn-Tabelle (Job) bei 320 px 315 px breit in
   einer 284-px-Spalte: „Junggeselle/Junggesellin," setzt die erste Spalte auf
   ~200 px, der ungetrennte Kopf „Stundenlohn" die zweite auf 106 px. Jetzt
   „Stun-denlohn", Tabelle 284 px. Erst ab 23,4em und nicht schon ab 48em:
   Mit trennbarem Kopf verteilt die automatische Tabellenbreite anders und
   trennte bei 375 Köpfe, die ganz passten („Ausbil-dungsjahr"). Die erste
   Spalte bleibt ohne Trennung, auch ihr Kopf. */
@media (max-width: 47.99em) {
  .tabelle th, .tabelle td { padding-right: 0.75rem; hyphens: auto; overflow-wrap: break-word; }
  .tabelle thead th, .tabelle td:first-child, .tabelle tbody th { hyphens: manual; overflow-wrap: normal; }
  .tabelle tr > :last-child { padding-right: 0; }
}
@media (max-width: 23.4em) {
  .tabelle thead th:not(:first-child) { -webkit-hyphens: auto; hyphens: auto; }
}

/* Galerie + Referenzen */
/* auto-fit: keine leere Spur neben 2–3 Bildern (KRITIK-a Nr. 7, KRITIK-c Nr. 2) */
/* Spaltenabstand s-3 statt s-2, Mindestbreite 16,5 statt 17rem (Abnahme
   30.09.2026, Bildgrößen): drei Kacheln sind bei 1440 genau 400 px breit —
   ein 16:10-Foto im 4:3-Rahmen braucht dann 480 px und die 480er-Datei
   reicht (vorher 407 → 489 px, 800er nötig). Spaltenzahl unverändert:
   ab ~1185 px vier, darunter drei, unter ~890 px zwei. */
.galerie { gap: var(--s-4) var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); }
.galerie-bild img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 47.99em) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-1); }
}

/* Stellen — als Register wie die Leistungen, keine Karten (30.09.2026):
   Haarlinie über jeder Stelle, ab 56em Titel links, Angaben rechts.
   Gilt auch für .stellen--zeilen (job-seite.php); die ganze Zeile ist dort
   klickbar (basis), auf Start/Karriere nur der Titel (weitere Links darin). */
.stellen { gap: 0; grid-template-columns: minmax(0, 1fr); }
.stelle {
  position: relative;
  padding: var(--s-3) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
}
.stelle:last-child { border-bottom: 1px solid var(--line-strong); }
.stellen .stelle > * + * { margin-top: 0.5rem; }
.stelle h3 { font-size: var(--fs-h3); font-stretch: var(--wdth-display); font-weight: 720; letter-spacing: -0.016em; line-height: 1.15; }
.stelle h3 a { color: var(--text); text-decoration-color: var(--accent-fill); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.stelle h3 a:hover { text-decoration-thickness: 4px; }
.stelle .klein { font-weight: 600; font-stretch: var(--wdth-label); color: var(--muted); }
@media (min-width: 56em) {
  .stellen .stelle {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s-6);
    align-items: baseline;
  }
  .stellen .stelle > * { grid-column: 2; }
  .stellen .stelle > h3 { grid-column: 1; grid-row: 1 / span 12; }
  .stellen .stelle > h3 + * { margin-top: 0; }
}
.stellen-fakten { margin-top: var(--s-2); }
.stellen-fakten > div { padding-block: 0.6rem; border-top-color: var(--line-strong); }
.stellen-fakten dt { font-stretch: var(--wdth-label); font-weight: 560; }
.stellen-fakten dd { font-weight: 500; }
.stellen-schluss { margin-top: var(--s-3); }

/* Platzhalter-Fotos: Blech-Radius */
.ph-foto { border-radius: var(--radius); }

/* Recht */
.recht h2 { font-size: var(--fs-h3); font-stretch: var(--wdth-h3); font-weight: 700; max-width: none; margin-top: 2em; }
.recht h3 { font-size: var(--fs-lead); font-stretch: var(--wdth-h3); font-weight: 660; margin-top: 1.5em; }
.recht ul, .recht ol { padding-left: 1.2em; }
.warnung { border-left-width: 3px; }

/* =============================================================================
   10. FORMULAR + KONTAKTWEGE
   ============================================================================= */
.formular { padding: var(--s-4); border-radius: var(--radius); }
@media (max-width: 47.99em) { .formular { padding: var(--s-3) var(--s-2); } }
.sek--flaeche .formular { background: var(--bg); }  /* glatte Fläche auf Struktur */
.feld > label, .feld > legend {
  font-size: var(--fs-klein);
  font-weight: 620;
  font-stretch: var(--wdth-label);
  letter-spacing: 0.01em;
}
.feld > label .klein, .feld > legend .klein { font-weight: 420; font-stretch: 100%; letter-spacing: 0; color: var(--muted); }
.ist-pflicht > label .klein { color: var(--text); font-weight: 600; }
.feld input:not([type="radio"]):not([type="checkbox"]), .feld select, .feld textarea {
  border-width: 2px;
  border-radius: var(--radius);
}
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline-offset: 2px; border-color: var(--text); }
.feld [aria-invalid="true"]:not([type="radio"]) { background: color-mix(in oklch, var(--err) 5%, var(--bg)); }
.wahl label { font-size: var(--fs-body); }
.formular > .btn[type="submit"] { justify-self: start; margin-top: var(--s-1); }
/* „Kein Pfeil" (DESIGN-a §7): das Pfeil-Symbol aus anfrage.php/footer.php
   steht in A nicht (KRITIK-a Nr. 13), dekorativ und aria-hidden. */
.formular .btn--primaer .ico, .dock-btn:not(.dock-btn--zweit) .ico { display: none; }
.formular > .micro { margin-top: calc(-1 * var(--s-2)); }
@media (max-width: 37.49em) { .formular > .btn[type="submit"] { justify-self: stretch; } }
.fehler-box { border-radius: var(--radius); background: color-mix(in oklch, var(--err) 6%, var(--bg)); }  /* deckend: kein Korn durch die Meldung */
.fehler-box h2 { font-size: var(--fs-lead); font-stretch: var(--wdth-h3); font-weight: 700; letter-spacing: 0; max-width: none; }
.fehler-box li + li { margin-top: 0.25rem; }
.hinweis { border-radius: var(--radius); }
.hinweis--ok { border-width: 2px; background: color-mix(in oklch, var(--ok) 7%, var(--bg)); }
.kanaele { gap: var(--s-2); }
.kanal {
  flex: 1 1 15rem;
  min-height: 56px;
  padding: 0.7rem 1.1rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
}
.kanal:hover { border-color: var(--text); background: var(--bg-2); }
.sek--flaeche .kanal:hover { background: var(--bg-3); }
.kanal .ico { color: var(--accent-text); width: 1.4rem; height: 1.4rem; }
.kanal b { font-weight: 640; font-stretch: var(--wdth-label); }
.karte-laden { justify-self: start; }
address b { font-weight: 660; }

/* =============================================================================
   11. CTA-ZEILE + CTA-BAND (Teil a/cta)
   Zeile: Satz · Firstlinie als Weg · Knopf, alles auf einer Grundlinie.
   Band (30.09.2026): der Anthrazit-Block am Seitenende (KRITIK-a Nr. 2, 12).
   Farben kommen aus dem zweiten Farbsatz in tokens.css (.cta-band,
   .site-fuss): dort sind --bg, --text, --muted … dunkel/hell neu belegt.
   ============================================================================= */
.cta-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding-top: 0;
  border-top: 0;
}
.cta-zeile > * + * { margin-top: 0; }
.cta-aktion { display: contents; }
.cta-kopf > * + * { margin-top: 0.4rem; }
.cta-titel {
  font-size: var(--fs-lead);
  font-weight: 620;
  font-stretch: 108%;
  line-height: 1.3;
  max-width: 34ch;
}
.cta-kopf > p:not(.cta-titel) { color: var(--muted); max-width: 46ch; }
.fl--cta { width: 100%; }
.cta-zeile .btn-reihe { gap: 0.5rem 1.5rem; }
.cta-zeile .micro { margin-top: -0.2rem; }
@media (max-width: 47.99em) {
  .cta-zeile .btn--primaer { flex: 1 1 100%; }   /* nur Telefon-Breite: Knopf über die ganze Zeile */
}
@media (min-width: 56em) {
  .cta-zeile {
    grid-template-columns: minmax(0, 30rem) minmax(4rem, 1fr) auto;
    column-gap: var(--s-3);
    row-gap: 0.4rem;
    align-items: end;
  }
  .cta-zeile > .cta-kopf { grid-column: 1; grid-row: 1; }
  .cta-zeile > .fl--cta { grid-column: 2; grid-row: 1; margin-bottom: 6px; }
  .cta-zeile .btn-reihe { grid-column: 3; grid-row: 1; flex-wrap: nowrap; }
  .cta-zeile .micro { grid-column: 3; grid-row: 2; margin-top: 0; width: 0; min-width: 100%; }
  .cta-zeile--kurz > .fl--cta { grid-column: 1 / 3; }
}

.cta-band {
  padding-block: var(--s-7);
  background: var(--bg);               /* Anthrazit (Farbsatz .cta-band) */
  color: var(--text);                  /* color erbt berechnet — hier neu setzen */
}
.cta-band .wrap { display: grid; gap: var(--s-3) var(--s-6); }
/* Primärknopf auf Anthrazit: Hover dunkler statt --accent-text (das ist im
   dunklen Satz hell). Weiß darauf ≥ 7:1. */
.cta-band .btn--primaer:hover { background: color-mix(in oklch, var(--accent-fill) 80%, #000); }
.cta-band a:not(.btn) { color: var(--text); text-decoration-color: var(--accent-fill); }
.cta-band .wrap > * + * { margin-top: 0; }
.fl--band { width: 100%; }
/* 32 → 48 px (Abnahme-Fix 30.09.2026, A4, P2-11): vorher bis 56 px, so groß
   wie eine ungeteilte H1 (.h1--ganz 34 → 56). Jetzt bei jeder Breite kleiner
   als .h1--ganz und größer als die H2 (24 → 40). */
.cta-band h2 { font-size: clamp(2rem, 1.5rem + 1.9vw, 3rem); font-stretch: var(--wdth-display); font-weight: 760; max-width: 18ch; color: var(--text); }
.cta-band .cta-kopf > * + * { margin-top: var(--s-2); }
.cta-band .cta-kopf > p { font-size: var(--fs-lead); max-width: 46ch; color: var(--muted); }
.cta-band .cta-aktion { display: grid; gap: 0.6rem; align-content: end; }
@media (min-width: 56em) {
  .cta-band .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .fl--band { grid-column: 1 / -1; margin-bottom: var(--s-2); }
}

/* =============================================================================
   12. FUSS + DOCK
   ============================================================================= */
/* Fuß im Anthrazit-Block (Farbsatz .site-fuss in tokens.css), schließt an
   das CTA-Band an; die Haarlinie trennt beide nur leise. */
.site-fuss { background: var(--bg); color: var(--text); border-top: 1px solid var(--line); }
.fuss-spalte h3 {
  font-size: var(--fs-klein);
  font-weight: 640;
  font-stretch: var(--wdth-label);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.fuss-spalte a { color: var(--text); text-decoration: none; }
.fuss-spalte a:hover { text-decoration: underline; text-decoration-color: var(--accent-fill); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.fuss-spalte address { line-height: 1.6; }
.fuss-spalte address a { font-weight: 600; }
.fuss-spalte .klein a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; }
.fuss-unten a { text-decoration-color: var(--line-strong); }
.fuss-unten { position: relative; border-top: 0; }
.fuss-unten::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
@media (max-width: 63.99em) {
  .dock {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);   /* Termin ist das Ziel: breiter */
    border-top-color: var(--line-strong);
    box-shadow: 0 -12px 24px -18px var(--tiefe);
  }
  .dock-btn { font-weight: var(--wght-knopf); font-stretch: 104%; white-space: nowrap; gap: 0.45rem; }
  .dock-btn .ico { width: 1.1em; height: 1.1em; }
  .dock-btn--zweit { border-width: 2px; }
}

/* =============================================================================
   13. DER ORCHESTRIERTE MOMENT (nur Start-Hero, ≤ 1,4 s, einmal)
   Foto hebt sich einmal an wie eine Last am Haken, die Firstlinie zieht von
   links bis an die Fotokante und knickt hoch. Endzustand = dieser CSS-
   Standard: ohne JS (html.js-aus) und bei reduced-motion läuft nichts.
   Mit JS hält der Startzustand höchstens 2,4 s (Sicherung, falls theme.js
   fehlt); theme.js startet den Moment, sobald das Kranfoto geladen und der
   Hero im Bild ist (html.fl-los), oder bricht ihn ab (html.fl-fertig).
   ============================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js .shero--start .shero-medium picture { animation: fl-heben 1.05s linear 2.4s both; }
  .js .shero--start .fl--hero { animation: fl-ziehen 0.9s var(--ease-signatur) 2.65s both; }
  .js.fl-los .shero--start .shero-medium picture { animation-name: fl-heben-los; animation-delay: 0s; }
  .js.fl-los .shero--start .fl--hero { animation-name: fl-ziehen-los; animation-delay: 0.25s; }
  .js.fl-fertig .shero--start .shero-medium picture,
  .js.fl-fertig .shero--start .fl--hero { animation: none; }
}
/* wie eine Last am Haken: zieht an, bremst ab, setzt minimal über, ruht.
   30.09.2026 (KRITIK-a Nr. 8): das Foto hebt sich IM Ausschnitt (der Rahmen
   hat overflow: hidden) — Verschiebung und Vergrößerung sind gekoppelt
   (|translateY| ≤ (scale − 1) / 2 der Bildhöhe), deshalb öffnet sich zu
   keinem Zeitpunkt ein grauer Spalt zwischen Kopf und Foto. Vorher lief das
   Bild 56 px tiefer los und legte oben die Fläche frei. */
@keyframes fl-heben {
  0%   { transform: translateY(5%) scale(1.1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  74%  { transform: translateY(-0.5%) scale(1.012); animation-timing-function: cubic-bezier(.4, 0, .4, 1); }
  100% { transform: none; }
}
@keyframes fl-heben-los {
  0%   { transform: translateY(5%) scale(1.1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  74%  { transform: translateY(-0.5%) scale(1.012); animation-timing-function: cubic-bezier(.4, 0, .4, 1); }
  100% { transform: none; }
}
@keyframes fl-ziehen     { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fl-ziehen-los { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* =============================================================================
   14. BAUSTEINE DES FEINSCHLIFFS (BAUANLEITUNG §5, Mechanik in basis.css 11b)
   Signatur sparsam: keiner dieser Bausteine trägt die Firstlinie. Sie binden
   über Anthrazit-Kanten, Schriftbreite und Fotos bis an den Rand.
   ============================================================================= */

/* --- .split--bild: Text | großes Foto, das Foto läuft bis an den Fensterrand
   wie das Kranfoto im Start-Hero (randlos, ohne Schatten, ohne Radius).
   Nur das Bild bricht aus, die Bildunterschrift bleibt in der Spalte.
   --rand = Abstand Inhaltskante → Fensterrand (100vw zählt die Scrollleiste
   mit; der Überstand von einer halben Leistenbreite wird von .sek
   abgeschnitten: overflow-x: clip, §7). */
.split--bild { --rand: calc((100vw - min(100vw, var(--wrap))) / 2 + var(--gutter)); }
.split--bild > .split-medium img { box-shadow: none; border-radius: 0; }
.split--bild > .split-medium > picture { display: block; max-width: none; }   /* basis: max-width 100 % */
@media (max-width: 55.99em) {
  /* gestapelt: Foto über die volle Breite, Text im Gutter */
  .split--bild > .split-medium > picture { width: auto; margin-inline: calc(-1 * var(--gutter)); }
}
@media (min-width: 56em) {
  .split--bild { column-gap: var(--s-6); }
  /* Foto rechts (Standard): nach rechts hinaus */
  .split--bild:not(.split--umgekehrt):not(:has(> .split-medium:first-child)) > .split-medium > picture,
  .split--bild.split--umgekehrt:has(> .split-medium:first-child) > .split-medium > picture {
    width: auto; margin-right: calc(-1 * var(--rand));
  }
  /* Foto links (Figure zuerst oder --umgekehrt): nach links hinaus */
  .split--bild:not(.split--umgekehrt):has(> .split-medium:first-child) > .split-medium > picture,
  .split--bild.split--umgekehrt:has(> .split-medium:last-child) > .split-medium > picture {
    width: auto; margin-left: calc(-1 * var(--rand));
  }
  .split--bild > .split-medium figcaption { max-width: 46ch; }
  /* Foto hängt oben an der H2, ohne sticky (Abnahme 30.09.2026, NACHKRITIK-a
     alt 15). basis.css hält das Foto neben langem Text im Blick (sticky);
     sobald die Sektion durchgescrollt ist, sitzt es dann aber unten im Raster
     — in Ganzseiten-Ansichten und nach jedem Scrollen stand es 160–400 px
     unter der H2 (gemessen: Dachsanierung 201, Dachdämmung 215, Über uns
     163, Start 375 px), oben rechts blieb ein Loch. In A hängt das Foto fest
     an der Oberkante wie das Kranfoto im Start-Hero. */
  .split--bild > .split-medium { position: static; }
}
.split--bild .stapel > h2 + * { margin-top: var(--s-3); }

/* --- .bildband: ein Foto über die volle Breite, flach wie das Hero-Foto. */
.bildband img { border-radius: 0; }
/* Mobil: basis hält das Band mindestens 13rem hoch. Ein Panorama wie
   zink-ornament (3,2 : 1) wurde bei 375 px dadurch auf 661 px Breite
   gezogen und nur zur Hälfte gezeigt (480er-Datei 1,4-fach hochgezogen).
   Die Mindesthöhe folgt jetzt der Breite: 36vw (135 px bei 375). */
@media (max-width: 47.99em) { .bildband img { min-height: min(13rem, 36vw); } }
.bildband > figcaption { font-stretch: 104%; line-height: 1.45; }
main > .bildband { margin-block: 0; }

/* --- .kennwerte: Messwerte am Bau. Wert in Mona Sans (Breite 110 %, schwer),
   je Wert eine 2-px-Anthrazit-Kante oben — dieselbe Kante wie die Belege im
   Start-Hero. Kein Kasten, keine Pille, kein Rot (DESIGN-a §8: keine
   Zahl-Pills). Die Größe folgt der Breite des Werts (Container-Einheit),
   damit „31.12.1983" oder „0,035 W/(m·K)" nie mitten im Wert umbrechen. */
.kennwerte { gap: var(--s-4) var(--s-5); }
.kennwert {
  container-type: inline-size;
  gap: 0.5rem;
  padding-top: var(--s-2);
  border-top: 2px solid var(--text);
}
.kennwert dt {
  font-family: var(--disp);
  font-size: min(var(--fs-wert), 14cqi);
  font-weight: 780;
  font-stretch: 110%;
  letter-spacing: -0.02em;
  line-height: 1.04;
  /* proportionale Ziffern: die Tabellenziffern von Mona Sans haben eine
     durchgestrichene Null („0,24", „5.000 €" wirkten wie Code-Schrift;
     NACHKRITIK-a neu 5). Ein Einzelwert braucht keine Spaltenausrichtung. */
  font-variant-numeric: lining-nums proportional-nums;
  color: var(--text);
}
.kennwert dd { font-size: var(--fs-body); line-height: 1.5; }
.kennwert dd p { max-width: 36ch; }
.kennwert .quelle { color: var(--muted); font-size: var(--fs-klein); }
* + .kennwerte, .kennwerte + * { margin-top: var(--s-5); }

/* --- .merksatz: der Kern einer Sektion in einem Satz — als Nachschlag-
   Stimme der H1 (Breite 118 %, Gewicht 700), deutlich größer als der
   Fließtext, Anthrazit, ohne Rand. Größenkontrast statt Ornament. */
/* Abnahme 30.09.2026 (NACHKRITIK-a neu 1): Grenze 28ch greift wieder (Regel
   §7 nimmt den Merksatz aus), Größe 19 → 30 px statt 22 → 34 — die H2 bleibt
   bei jeder Breite mindestens 1,25-mal so groß. Mobil etwas leichter (660),
   damit fünf Zeilen nicht wie ein Überschriften-Block stehen. */
.merksatz {
  max-width: 28ch;
  padding: 0;
  border: 0;
  font-size: var(--fs-merk);
  font-weight: 660;
  font-stretch: 118%;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--text);
  text-wrap: balance;
}
@media (min-width: 48em) { .merksatz { font-weight: 700; letter-spacing: -0.014em; line-height: 1.16; } }
:is(.wrap, .stapel, .kasten) > * + .merksatz { margin-top: var(--s-5); }
:is(.wrap, .stapel, .kasten) > .merksatz + * { margin-top: var(--s-5); }
/* Kleine Stufe in schmalen Spalten: Kasten, Split, Stapel im Stapel und die
   Handbuch-Spalte (§7b) — dort steht die H2 links daneben. */
.kasten .merksatz, .split .merksatz, .stapel .stapel .merksatz {
  max-width: 34ch;
  font-size: var(--fs-merk-klein);
}
.kasten .merksatz + *, .kasten * + .merksatz, .split .merksatz + *, .split * + .merksatz { margin-top: var(--s-3); }
/* Merksatz direkt nach einem Kasten (Dachreparatur: Einwand-Kasten mit der
   einzigen H2 der Sektion in 36 px): kleine Stufe, sonst 36 : 30 = 1,2. */
:is(.wrap, .stapel) > .kasten + .merksatz { max-width: 34ch; font-size: var(--fs-merk-klein); }

/* --- .weiter-link und teil('cta', ['art' => 'leicht']): der leichte Weg.
   Anthrazit mit 2-px-Unterstreichung in Rot (dieselbe Linie wie Telefon und
   Navigation), der Winkel in --accent-text. Keine Firstlinie, kein Knopf. */
.weiter-link { margin-top: var(--s-4); line-height: 1.5; }
.weiter-link a {
  color: var(--text);
  font-weight: var(--wght-knopf);
  font-stretch: var(--wdth-label);
  text-decoration: underline;
  text-decoration-color: var(--accent-fill);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.weiter-link a:hover { text-decoration-thickness: 4px; }
/* Winkel am Textende (Abnahme 30.09.2026, NACHKRITIK-a neu 4): basis setzt
   den Link als inline-flex, der Winkel war ein Flex-Element — brach der
   Linktext um, nahm der Textblock die volle Breite und der Winkel stand rund
   140 px rechts neben dem Zeilenende. Jetzt ist der Link eine normale Zeile
   und der Winkel ein Inline-Stück aus einem Wortverbinder (U+2060, kein
   Umbruch davor) plus Innenabstand, in dem er als Maske auf --accent-text
   steht: er klebt immer am letzten Wort und wird nicht mit unterstrichen.
   Trefferfläche: padding-block vergrößert die Klickfläche (≈ 2,1em ≥ 24 px),
   ohne den Zeilenabstand zu ändern. */
.weiter-link a:not(.tel-link) {
  display: inline;
  min-height: 0;
  padding-block: 0.45em;
}
.weiter-link a:not(.tel-link)::after {
  content: "\2060";
  display: inline;
  padding-left: 0.95em;
  border: 0;
  transform: none;
  background-color: var(--accent-text);
  -webkit-mask: var(--winkel) right 58% / 0.42em 0.62em no-repeat;
          mask: var(--winkel) right 58% / 0.42em 0.62em no-repeat;
}
.cta-leicht { color: var(--text); font-weight: 520; }
.cta-leicht .tel-link { vertical-align: baseline; }
.cta-leicht-oder { color: var(--muted); font-weight: 400; }
:is(.wrap, .stapel) > .weiter-link:last-child { margin-top: var(--s-5); }


@media print {
  .fl, .fl-svg { display: none; }
  .sek--flaeche, .cta-band, .shero { background: none; }
}