/* =============================================================================
   themes/b/theme.css — Variante B „Stehfalz" · Neuß Dachtechnik
   Besitzer: Theme-Agent B · Stand 30.09.2026 (Feinschliff nach KRITIK-b.md,
   Abnahme-Runde nach NACHKRITIK-b.md)
   Unlayered: schlägt jede Regel aus basis.css (die komplett in @layer basis
   liegt) ohne !important. Marken-Vertrag: _bau/DESIGN-b.md.

   DIE EINE BINDUNGS-TEXTUR: das Stehfalz-Raster
   Senkrechte Doppelnähte (1 px Kupfer 14 % · 2 px Luft · 1 px) in gleichen
   Scharbreiten über die ganze Seite, 4/8/12 Scharen. Jede Sektion malt ihre
   Nähte selbst (::before) und den Walzschimmer (::after), ausgerichtet auf
   dieselbe Fassade (--rw). Der Inhalt sitzt um --inset neben der Naht.
   GRUNDREGEL: Keine Naht kreuzt Schrift.
     - Desktop: die linken sieben Scharen sind die Lesespur, dort blendet eine
       Maske die inneren Nähte aus. Rechts davon läuft die Fassade frei.
     - Breite Bausteine (Split, Galerie, Raster, Register, Stellen, Bild,
       Karte) decken die Nähte nur auf ihrer eigenen Höhe (Deckfläche, §2).
     - Fugen: im Innenabstand oben/unten jeder Sektion laufen ALLE Nähte
       (auch mobil), weich auslaufend vor dem Inhalt.
   TECHNIK: Die Raster-Pseudos haben keinen Hintergrund. Farbe per Innenschatten,
   Form per Maske, Nähte an Kästen als Doppelrand. So bestimmt axe den echten
   Flächenton und prüft jeden Kontrast (statt „incomplete").

   Inhalt: 1 Grund · 2 Raster (+ Deckfläche) · 3 Typo · 4 Knöpfe · 5 Vorschau ·
   6 Kopf/Nav · 7 Hero · 7b Bildliste · 8 Sprungleiste · 9 Bausteine · 9b Feinschliff-Bausteine (Merksatz,
   Kennwerte, Weiter-Weg, Split, Bildpaare, Fotoband, Ablauf) · 10 Register ·
   11 CTA (Zeile, leicht, Traufe aus Kupferblech) · 12 Formular ·
   13 Fuß · 14 Dock · 15 Seiten · 16 Der Moment · 17 Weniger Bewegung
   ============================================================================= */

/* ---------- 1. Grund ---------- */
html {
  font-synthesis: weight small-caps;   /* keine schräg verzerrte Ersatz-Kursive */
  font-synthesis-style: none;
}
body {
  background-color: var(--bg);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  --grund: var(--bg);
  --naht: linear-gradient(90deg, var(--naht-farbe) 0 1px, transparent 1px 3px, var(--naht-farbe) 3px 4px, transparent 4px);
  --naht-maske: linear-gradient(90deg, #000 0 1px, transparent 1px 3px, #000 3px 4px, transparent 4px);
  --naht-stark: linear-gradient(90deg, var(--accent-fill) 0 1px, transparent 1px 3px, var(--accent-fill) 3px 4px, transparent 4px);
  /* MATERIAL — Walzschimmer je Schar: Licht an der linken Falzkante, das zur
     Mitte hin ausläuft; die Schar wirkt leicht gewölbt wie gewalztes Titanzink.
     Als Alpha-Maske über weißem Innenschatten (siehe Abschnitt 2). Nur auf der
     freien Fassade, nie hinter Fließtext. Stärke knapp: Blech, keine Lichtsäulen. */
  --schimmer-maske: linear-gradient(90deg, transparent 0 4px, rgb(0 0 0 / .4) 4px, rgb(0 0 0 / .1) 24%, transparent 46%);
  /* Walzschatten (Feinschliff 27.09.2026): Auf Zink hell (L 97 %) war das weiße
     Licht allein unsichtbar, die freie Fassade las sich als leere Streifen
     (KRITIK-b Nr. 2). Jetzt dunkelt jede Schar zur rechten Falzkante hin leicht
     ab — erst dadurch wirkt sie gewölbt. Stärke über --walz-tiefe. */
  --walz-maske: linear-gradient(90deg, transparent 0 4px, rgb(0 0 0 / .05) 18%, rgb(0 0 0 / .45) 70%, #000 calc(100% - 3px), transparent calc(100% - 1px));
  --walz-tiefe: color-mix(in oklch, var(--text) 5%, transparent);
  --falz-quer: linear-gradient(180deg, var(--line-strong) 0 1px, transparent 1px 3px, var(--line-strong) 3px 4px, transparent 4px);
}
::selection { background: color-mix(in oklch, var(--accent-fill) 24%, transparent); color: var(--text); }
em, i, cite { font-style: normal; font-weight: 600; }   /* keine Kursiv-Datei: Betonung über Gewicht */
b, strong { font-weight: 680; }
hr { border: 0; height: 4px; background: var(--falz-quer); margin-block: var(--s-4); }

/* ---------- 2. Das Stehfalz-Raster ---------- */
/* Inhalt folgt der Fassade: Innenabstand = (Blockbreite − Fassade) / 2 + Inset.
   100 % im Innenabstand bezieht sich auf den Block (volle Breite). */
.wrap {
  max-width: none;
  padding-inline: calc((100% - var(--rw)) / 2 + var(--inset));
}

main, .site-kopf, .shero, .sek, .cta-band, .site-fuss {
  position: relative;
  isolation: isolate;
  --spur-n: var(--scharen);   /* bis zu welcher Naht innen ausgeblendet wird */
  --fuge: 0px;                /* Höhe der Fuge oben/unten, in der ALLE Nähte laufen */
  --fuge-o: var(--fuge);      /* oben / unten getrennt: gleiche Flächen hintereinander */
  --fuge-u: var(--fuge);      /* rücken enger zusammen (s. u.) */
}
/* Fugen: Innenabstand oben und unten jeder Sektion. Dort ist keine Schrift,
   also zeigt sich die ganze Fassade — auch mobil, wo der Text die volle Breite
   hat. So läuft das Raster über die ganze Seitenhöhe, ohne Absätze zu kreuzen. */
.sek, .cta-band { --fuge: var(--s-7); }
.sek--flach { --fuge: var(--s-5); }
/* Gleiche Flächen hintereinander (Zink hell | Zink hell, Zink gewalzt | Zink
   gewalzt): die Fuge dazwischen ein Drittel kürzer (Abnahme-Runde 30.09.2026,
   NACHKRITIK-b „270–300 px nur Fugen-Nähte", Seiten zu lang). Beim Flächen-
   wechsel bleibt die volle Fuge: Dort markiert sie den neuen Abschnitt. */
.sek:not(.sek--flaeche) + .sek:not(.sek--flaeche),
.sek--flaeche + .sek--flaeche { --fuge-o: calc(var(--fuge) * .67); }
.sek:not(.sek--flaeche):has(+ .sek:not(.sek--flaeche)),
.sek--flaeche:has(+ .sek--flaeche) { --fuge-u: calc(var(--fuge) * .67); }
.shero, .site-fuss { --fuge: var(--s-4); }   /* kleinster Innenabstand dort */
.shero, .sek, .cta-band, .site-fuss { background-color: var(--grund); }
/* ::before = die Nähte (Linien), ::after = der Walzschimmer (Material).
   Beide auf dieselbe Fassade ausgerichtet. Die Nähte laufen zusätzlich durch
   die Fugen; der Schimmer bleibt auf der freien Fassade (sonst stünde an jeder
   Sektionsgrenze ein Zaun aus Lichtstreifen).
   TECHNIK: kein background-image/-color an diesen Pseudo-Elementen. Die Farbe
   kommt aus einem Innenschatten, die Form allein aus Masken. Sonst meldet axe
   jeden Text der Sektion als "Hintergrund unbestimmbar" und prüft den Kontrast
   nicht; so misst es den echten Flächenton darunter. */
main::before, .site-kopf::before, .shero::before, .sek::before, .cta-band::before, .site-fuss::before,
main::after, .site-kopf::after, .shero::after, .sek::after, .cta-band::after, .site-fuss::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline: calc((100% - var(--rw)) / 2 - 2px);
  pointer-events: none;
  box-shadow: inset 0 0 0 100vmax var(--naht-farbe);
  --maske-schar: calc((100% - 4px) / var(--scharen)) 100%;
  --maske-spur: linear-gradient(90deg, #000 0 4px, transparent 4px calc((100% - 4px) * var(--spur-n) / var(--scharen)), #000 0);
  --maske-fuge: linear-gradient(180deg, #000 0, #000 calc(var(--fuge-o) * .3), transparent calc(var(--fuge-o) * .8), transparent calc(100% - var(--fuge-u) * .8), #000 calc(100% - var(--fuge-u) * .3), #000 100%);
  /* Naht-Muster geschnitten mit (freie Fassade vereinigt mit Fugen) */
  -webkit-mask-image: var(--naht-maske), var(--maske-spur), var(--maske-fuge);
          mask-image: var(--naht-maske), var(--maske-spur), var(--maske-fuge);
  -webkit-mask-size: var(--maske-schar), 100% 100%, 100% 100%;
          mask-size: var(--maske-schar), 100% 100%, 100% 100%;
  -webkit-mask-repeat: repeat-x, no-repeat, no-repeat;
          mask-repeat: repeat-x, no-repeat, no-repeat;
  -webkit-mask-composite: source-in, source-over;
          mask-composite: intersect, add;
}
main::after, .site-kopf::after, .shero::after, .sek::after, .cta-band::after, .site-fuss::after {
  z-index: -2;
  box-shadow: inset 0 0 0 100vmax var(--walz-tiefe);
  /* Walz-Verlauf je Schar (hell an der linken Falzkante, dunkler zur rechten),
     geschnitten mit der freien Fassade */
  -webkit-mask-image: var(--walz-maske), var(--maske-spur);
          mask-image: var(--walz-maske), var(--maske-spur);
  -webkit-mask-size: var(--maske-schar), 100% 100%;
          mask-size: var(--maske-schar), 100% 100%;
  -webkit-mask-repeat: repeat-x, no-repeat;
          mask-repeat: repeat-x, no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.sek--flaeche { --grund: var(--bg-2); }

/* Desktop: Lesespur = linke sieben Scharen, rechts läuft die Fassade frei.
   DECKFLÄCHE (Abnahme-Runde 30.09.2026, NACHKRITIK-b Nr. 2): Breite Bausteine
   (Bilder, Raster, Register, Stellen, Karte, Kennwert-Reihe, waagerechter
   Ablauf) tragen den Flächenton ihrer Sektion und decken Nähte und Walz-
   schatten nur auf ihrer EIGENEN Höhe ab. Darüber und darunter (Kopf der
   Sektion, Merksatz, CTA-Zeile, Quelle) läuft die freie Fassade weiter.
   Vorher zeigte jede Sektion mit einem breiten Baustein auf ganzer Höhe nur die
   äußeren Nähte (Dachdämmung „Welche Förderung" 1.900 px leer, Start 6.000 px).
   Raster und Galerie decken nur ihre Kacheln: In den Spaltenfugen (auf den
   Nähten, §9b) und neben einem mitlaufenden Foto zeigt sich die Fassade.
   Die Deckfläche liegt in @layer b-deckflaeche UNTER basis: jede eigene Fläche
   eines Bausteins (gelber Foto-Platzhalter, Kasten, Tafel, Hover) gewinnt. */
@layer b-deckflaeche {   /* unter basis (Reihenfolge in tokens.css): eigene Lage/Fläche gewinnt */
  @media (min-width: 64em) {
    /* Die Deckfläche ist ein Pseudo-Element hinter dem Baustein (z -1 im
       Stapel der Sektion, über deren Nähten): Eine eigene Fläche des Bausteins
       (gelber Foto-Platzhalter, Kasten) liegt darüber, und axe misst den
       Kontrast gegen den Flächenton der Sektion — derselbe Ton. Als echte
       Hintergrundfarbe am Baustein meldete axe jede Überschrift ganz oben
       darin als „teilweise verdeckt" (Glyphen ragen über die Box), als
       background am Pseudo jeden Text als „Pseudo-Element". position
       liegt in dieser Ebene: sticky aus basis (Split-Foto) bleibt. */
    .sek :is(.split > *, .galerie > *, .raster > *, .b-musterkarte, .stellen, figure, .karte, .team,
        .kennwerte:has(> :nth-child(4)) > .kennwert, .schritte) {
      position: relative;
    }
    .sek :is(.split > *, .galerie > *, .raster > *, .b-musterkarte, .stellen, figure, .karte, .team,
        .kennwerte:has(> :nth-child(4)) > .kennwert, .schritte)::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      box-shadow: inset 0 0 0 100vmax var(--grund);   /* Farbe per Innenschatten wie die Nähte (§2, TECHNIK): axe liest ihn nicht */
      pointer-events: none;
    }
    /* Register und Stellen reichen bis an die Fassadenkante: 2 px Luft, damit
       beide Linien der äußeren Naht sichtbar bleiben */
    .sek :is(.b-musterkarte, .stellen)::before { inset: 0 2px; }
    /* Spalte, die mit einem kleinen Foto beginnt (Kontakt: kran-detail,
       ≤ 26rem in 604 px Spalte; Abnahme 30.09.2026, P3-11): Die Deckfläche
       der ganzen Spalte legte neben dem Foto eine leere, glatte Fläche von
       ≈ 190 × 370 px. Jetzt deckt das Foto nur sich selbst (figure, oben),
       die Bausteine darunter decken ihre Höhe plus die Fuge darüber (--s-3,
       .stapel-Abstand). Neben dem Foto läuft die Fassade weiter. */
    .sek .split > .stapel:has(> figure.referenz:first-child)::before { content: none; }
    .sek .split > .stapel:has(> figure.referenz:first-child) > :not(figure) { position: relative; }
    .sek .split > .stapel:has(> figure.referenz:first-child) > :not(figure)::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: calc(-1 * var(--s-3)) 0 0;
      box-shadow: inset 0 0 0 100vmax var(--grund);
      pointer-events: none;
    }
  }
}
@media (min-width: 64em) {
  main, .shero, .sek { --spur-n: 7; }
  /* Lesespur-Breite innerhalb von .wrap: 7 Scharen minus Inset beidseits.
     % = Inhaltsbreite von .wrap (nur für direkte Kinder gültig). */
  .sek > .wrap:not(.split) > :is(h2, h3, p, ol, dl, .prose, .faq, .tabelle, .hinweis-box, .kanaele,
      .btn-reihe, .warnung, .recht, .checkliste, .schritte, .fakten, .kasten, .formular, .sprungleiste, .cta-zeile),
  .sek > .wrap:not(.split) > ul:not(.stellen),
  .sek > .wrap:not(.split) > .stapel > :is(h2, h3, p, ol, dl, .prose, .faq, .tabelle, .hinweis-box, .kanaele,
      .btn-reihe, .warnung, .checkliste, .schritte, .fakten, .kasten),
  main > .wrap > .sprungleiste,
  .shero .b-sprung > .sprungleiste {
    max-width: calc(7 * (100% + 2 * var(--inset)) / var(--scharen) - 2 * var(--inset));
  }

  /* DIE FASSADE ALS BÜHNE (Feinschliff 27.09.2026, KRITIK-b Nr. 2)
     In reinen Textsektionen stand rechts neben der Lesespur 40 % leere Fläche.
     Jetzt hängen dort Tafeln: Kennwerte (bis drei) und der Merksatz werden als
     Blechschild auf die Scharen 8–12 gesetzt (float, auf der Höhe, an der sie im
     Quelltext stehen; die Lesespur läuft links daneben weiter). Die Tafel deckt
     die Nähte darunter ab, darüber und darunter läuft die Fassade weiter.
     Quelltext- und Vorlesereihenfolge bleiben unverändert.
     Nicht in Sektionen mit breiten Bausteinen (dort ist rechts schon Bild) und
     nicht, wenn der Merksatz direkt vor dem waagerechten Ablauf steht. */
  .sek > .wrap:not(.split) { display: flow-root; }
  .sek:not(:has(.split, .galerie, .raster, .b-musterkarte, .stellen, figure, .karte, .team)) > .wrap:not(.split) >
    :is(.kennwerte:not(:has(> :nth-child(4))), .merksatz:not(:has(+ .schritte))) {
    float: right;
    clear: right;
    width: calc(5 * (100% + 2 * var(--inset)) / var(--scharen) - 2 * var(--inset));
    max-width: none;
    margin-bottom: var(--s-3);
  }
  /* vier und mehr Kennwerte: eine Reihe über alle zwölf Scharen, je drei
     Scharen breit, die Spalten-Fugen liegen auf den Nähten 3, 6 und 9 */
  .sek > .wrap:not(.split) > .kennwerte:has(> :nth-child(4)) {
    clear: both;
    max-width: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: calc(2 * var(--inset));
  }
}
/* Bildunterschriften auf der freien Fassade (Seitenkopf: Scharen 8–12, Foto-
   band in <main>): eigene Fläche, sonst kreuzten die Nähte die Schrift. Im
   Seitenkopf als Streifen in Bildbreite direkt unter dem Foto (wie ein Rand
   am Abzug), beim Fotoband nur die Textfläche. */
.shero-medium figcaption { background-color: var(--grund); }
.shero-medium picture + figcaption { margin-top: 0; padding-block: 0.6rem 0.2rem; }
.bildband > figcaption { background-color: var(--grund); background-clip: content-box; }
/* Abstand im Fluss, wo .wrap kein .stapel ist (Spezifität 0: jede Bausteinregel gewinnt) */
:where(.sek > .wrap:not(.split, .stapel)) > * + * { margin-top: var(--s-3); }
.kicker + h2, .kicker + h1 { margin-top: var(--s-2); }
/* Kontaktwege im Fließtext: größere Trefferfläche ohne Einfluss auf die Zeile */
main :is(p, li, dd, address) a:is([href^="tel:"], [href^="mailto:"]):not(.btn, .kanal, .dock-btn, .tel-link) { padding-block: 0.22em; }
/* Telefon im Fließtext: Symbol und Nummer bleiben zusammen */
.tel-link:not(.btn) { display: inline-flex; align-items: center; gap: 0.35em; vertical-align: bottom; min-height: 24px; }
.tel-link:not(.btn) .ico { width: 1.05em; height: 1.05em; }
/* Tafeln: eigene Fläche (Sicherung, falls eine Naht doch darunter läuft) */
.sek .kasten { background-color: var(--grund); }

/* ---------- 3. Typografie ---------- */
h1, h2, h3, h4 {
  color: var(--text);
  /* Trennen nur, wo ein Wort sonst nicht passt („Terrassenüberdachung"),
     nicht „Dachde-cker" in einer Überschrift mit Platz */
  hyphenate-limit-chars: 12 5 5;
}
h1 { line-height: 1.02; }
h2 {
  letter-spacing: var(--track-h2);
  line-height: 1.05;
  max-width: 21ch;
}
h3 { letter-spacing: -0.01em; line-height: 1.2; }
.sek h2 + * { margin-top: var(--s-3); }
.b-nach {
  display: block;
  margin-top: 0.1em;
  font-weight: var(--wght-nach);
  letter-spacing: -0.02em;
  color: var(--accent-text);
}
.h1-zusatz {
  margin-top: var(--s-3);
  max-width: 34em;
  font-size: var(--fs-h3);
  font-weight: 560;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--text);
}
.lead { font-size: var(--fs-lead); line-height: 1.5; font-weight: var(--wght-body); color: var(--text); }
.antwort { font-size: var(--fs-lead); line-height: 1.5; font-weight: 470; }
.prose { max-width: var(--wrap-text); }
.prose h3, .recht h3 { margin-top: 1.5em; }
.prose h3 + p, .recht h3 + p { margin-top: 0.5em; }
main :is(p, li, dd, figcaption, td, address, caption) a {
  color: var(--accent-text);
  text-decoration-color: color-mix(in oklch, var(--accent-text) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
main :is(p, li, dd, figcaption, td, address, caption) a:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
.kicker {
  display: flex;
  align-items: center;
  gap: 0.65em;
  color: var(--accent-text);
  font-weight: var(--wght-label);
  letter-spacing: 0.02em;
}
.kicker::before, .fakt dt::before, .b-belege li::before, .checkliste li::before {
  content: "";
  flex: none;
  width: 4px;
  height: 0.95em;
  background: var(--naht-stark) no-repeat;
  background-size: 4px 100%;
}
/* Martian Mono NUR für echte Daten: Material, Spezifikation, Belege, Quellen, Nummern */
.material, .quelle, .stellen-fakten dt, .tabelle th, .tabelle caption, .b-muster-kopf,
.referenz figcaption b, .galerie-bild figcaption b {
  font-family: var(--mono);
  font-stretch: var(--wdth-caption);
  font-weight: var(--wght-caption);
  letter-spacing: 0.01em;
}
.material { font-size: var(--fs-klein); line-height: 1.6; color: var(--muted); }
.quelle { font-size: var(--fs-klein); line-height: 1.6; color: var(--muted); max-width: var(--wrap-text); }
.quelle a { color: var(--muted); text-decoration-color: color-mix(in oklch, var(--muted) 55%, transparent); }
.quelle a:hover { color: var(--accent-text); }
.micro { color: var(--muted); }
.klein { font-size: var(--fs-klein); }

/* ---------- 4. Knöpfe und Telefon ---------- */
.btn {
  min-height: 48px;
  padding: 0.7em 1.3em;
  border-width: 1.5px;
  font-weight: 650;
  letter-spacing: 0.005em;
}
.btn--primaer {
  background: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: inset 0 -3px 0 var(--accent-hover);   /* Kantung: die gefalzte Unterkante */
}
.btn--primaer:hover { background: var(--accent-hover); }
.btn--primaer:active { box-shadow: inset 0 2px 0 color-mix(in oklch, var(--text) 30%, transparent); }
.btn--sekundaer { background: var(--grund); color: var(--text); border-color: var(--field-border); }
.btn--sekundaer:hover { background: var(--grund); border-color: var(--accent-fill); color: var(--accent-text); }
.btn--sekundaer .ico, .tel-link .ico, .nav-tel .ico, .kanal .ico, .dock-btn--zweit .ico { color: var(--accent-fill); }
/* Telefon neben dem Termin-Knopf: als Link, nicht als zweite Kiste */
.btn--sekundaer.tel-link {
  padding-inline: 0.35em;
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.32em;
  font-variant-numeric: tabular-nums;
}
.btn--sekundaer.tel-link:hover { text-decoration-color: var(--accent-fill); color: var(--text); }
.btn-reihe { gap: var(--s-2) var(--s-3); }

/* ---------- 5. Vorschau-Leiste ---------- */
.vorschau { font-size: var(--fs-klein); }
.vorschau-varianten a { min-height: 32px; }
.vorschau-varianten a[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--accent-fill); }

/* ---------- 6. Kopf und Navigation ---------- */
.site-kopf {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav-links a { font-weight: 520; }
.nav a[aria-current="page"], .nav .is-active > a { text-decoration-color: var(--accent-fill); }
.nav a:hover { text-decoration-color: var(--accent-fill); text-decoration-thickness: 2px; }
.nav-tel { font-weight: 650; font-variant-numeric: tabular-nums; }
.nav-cta { min-height: 44px; padding: 0.55em 1.05em; }
@media (min-width: 75em) {
  .nav-sub-liste {
    padding: 0.4rem 0;
    border: 1px solid color-mix(in oklch, var(--text) 14%, transparent);
    border-top: 2px solid var(--accent-fill);          /* Kupferkante */
    box-shadow: 0 22px 44px -24px color-mix(in oklch, var(--text) 40%, transparent);
  }
  .nav-sub-liste a { min-height: 40px; align-items: center; }
  .nav-sub-liste a:hover { background: var(--tint-weak); text-decoration: none; color: var(--accent-text); }
  .nav-sub-liste li:last-child { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--line); }
}
@media (max-width: 74.99em) {
  .nav-links > li { border-bottom-color: color-mix(in oklch, var(--text) 10%, transparent); }
  .nav-links a { min-height: 48px; font-size: 1.0625rem; }
  .nav-sub-liste a { min-height: 44px; font-size: 1rem; color: var(--muted); }
  .js .nav { border-top: 2px solid var(--accent-fill); }
  .menue-knopf { border: 1px solid var(--field-border); border-radius: var(--radius); min-height: 44px; }
}
@media (max-width: 47.99em) {
  .kopf-innen { gap: var(--s-2); }
  .nav-tel { font-size: 0.9375rem; }
}
/* Unter 375 px (Reflow bis 320, WCAG 1.4.10; Abnahme 30.09.2026, P3-1):
   Mit ausgeschriebener Nummer (133 px) stand der Menüknopf bei 320 px bei
   336,8 px, die Seite lief 17 px quer. Jetzt ist das Telefon im Kopf nur das
   Symbol auf 44 × 44. „Anrufen: 02165 …" bleibt im zugänglichen Namen
   (visually-hidden-Muster wie Theme A); ausgeschrieben steht die Nummer
   weiter im Fuß. Ab 375 px unverändert. */
@media (max-width: 23.4em) {
  .nav-tel { justify-content: center; min-width: 44px; min-height: 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; }
}

/* ---------- 7. Hero (Start + Unterseiten) ---------- */
/* Beide Köpfe: Textblock oben (Brotkrumen, Kicker, H1), dann Lead und Knöpfe,
   dann das Medium (Quelltext = mobile Reihenfolge; so stehen die Knöpfe bei
   375 px im ersten Bildschirm, Feinschliff 27.09.2026). Desktop: Text auf den
   Scharen 1–7, Medium auf 8–12, oben bündig mit dem Kopf. */
.shero { padding-block: 0; }
.b-fassade {
  display: grid;
  grid-template-columns: repeat(var(--scharen), minmax(0, 1fr));
  gap: 0;
  align-items: start;
  padding-inline: calc((100% - var(--rw)) / 2);   /* Inhaltsbreite = Fassade, Spalten = Scharen */
}
.b-fassade > * { grid-column: 1 / -1; min-width: 0; }
.b-fassade > .shero-text { padding-inline: var(--inset); }
.shero-text > * + * { margin-top: var(--s-3); }
.shero .brotkrumen + * { margin-top: var(--s-4); }
.shero h1 { max-width: 19ch; }
.shero .lead { max-width: 36em; }
.shero .btn-reihe { margin-top: var(--s-4); }
.shero .lead + .btn-reihe { margin-top: var(--s-4); }
.shero .micro { margin-top: var(--s-1); }
.b-hero-kopf { padding-top: var(--s-5); }
.b-hero-fuss { padding-block: var(--s-4) var(--s-5); }
.b-hero-fuss > :first-child { margin-top: 0; }
.shero:not(:has(.b-hero-fuss)) .b-hero-kopf { padding-bottom: var(--s-5); }
.shero:not(.shero--medium, .shero--start) .b-hero-fuss { padding-top: var(--s-3); }
.b-hero-belege { margin-top: var(--s-3); }

.shero-medium { margin-top: var(--s-4); }
.shero-medium img { border-radius: 0; }
.shero-medium > .kasten, .shero-medium > .ph-foto, .shero-medium > figure:not(.shero-figur) { margin-inline: var(--inset); }
.shero-caption { padding-inline: var(--inset); margin-top: 0.6rem; line-height: 1.5; }
@media (max-width: 47.99em) {
  /* 375 px: Knöpfe mit Luft im ersten Bildschirm, auch mit Vorschau-Leiste
     und dreizeiliger Unterseiten-H1 (gemessen: Unterkante ≤ 790 px) */
  .b-hero-kopf { padding-top: var(--s-4); }
  .shero .brotkrumen + * { margin-top: var(--s-3); }
  .shero .btn-reihe, .shero .lead + .btn-reihe { margin-top: var(--s-3); }
}
@media (max-width: 63.99em) {
  /* mobil/Tablet: das Medium schließt den Kopf nach den Knöpfen ab */
  .b-hero-fuss:has(+ .shero-medium) { padding-bottom: 0; }
  .b-hero-fuss + .shero-medium { margin-top: var(--s-4); margin-bottom: var(--s-5); }
  .b-hero-fuss + .shero-medium:has(+ .b-hero-beleg-zeile) { margin-bottom: 0; }
}
.b-hero-beleg-zeile { padding-bottom: var(--s-5); }

/* Foto im Unterseiten-Kopf: die kleine, ruhige Fassung der Signatur — nur
   zarte helle Doppellinien auf den Scharkanten, keine Streifen, keine Bewegung
   (die geschnittenen Scharen gehören allein dem Start-Hero). Die Linien liegen
   auf dem <picture>, nicht auf der Bildunterschrift. */
/* Rahmen = <picture> (Höhe bzw. 4:3), das Bild füllt ihn per cover. So kann ein
   Motiv mit Anschnitt (Bildliste, §7b) breiter als der Rahmen liegen, ohne das
   Format zu ändern. Mobil 70vw hoch wie der Start-Hero (vorher 62vw: dort
   passte gaube-kupfer-rot fast ganz hinein, samt Fremdobjekt am rechten Rand). */
.b-scharbild { position: relative; --n: var(--scharen); }
.b-scharbild picture {
  display: block;
  position: relative;
  overflow: hidden;
  height: clamp(15rem, 70vw, 22rem);
  box-shadow: var(--schatten-bild);
}
.b-scharbild img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: var(--fokus, 50% 50%);
  box-shadow: none;
  border-radius: 0;
}
/* Kopf-Foto als fertige <figure> mit Unterschrift (Karriere, Über uns): dasselbe
   Bauteil, aber im eigenen Format des Fotos und bündig auf den Scharen */
.shero-medium.b-scharbild > figure { margin-inline: 0; }
.shero-medium.b-scharbild.b-scharbild--figur picture { height: auto; aspect-ratio: auto; }   /* schlägt Höhe/4:3 unten */
.b-scharbild.b-scharbild--figur img { height: auto; }
.b-scharbild--figur figcaption { padding-inline: var(--inset); font-size: var(--fs-klein); color: var(--muted); line-height: 1.5; }
.b-scharbild picture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --naht-licht: rgb(255 255 255 / .42);
  background-image: linear-gradient(90deg, var(--naht-licht) 0 1px, transparent 1px 3px, var(--naht-licht) 3px 4px, transparent 4px);
  background-size: calc(100% / var(--n)) 100%;
  background-position: -2px 0;
}
@media (min-width: 48em) {
  .b-scharbild picture { height: clamp(20rem, 46vw, 28rem); }
}

/* ---------- 7b. Bildliste: Ausschnitt je Motiv ----------
   Fokuspunkt und Anschnitt je Foto, gewählt über den Dateinamen (src des
   <img>, gesetzt von bild()). Gilt in jeder Rolle, die object-position über
   --fokus liest (Seitenkopf, Split, Bildpaar, Galerie, Fotoband). Kein Markup,
   kein Inline-Style (CSP). Neue Motive hier eintragen, mit Grund.
   gaube-kupfer-rot  rechts am Bildrand ein dunkles Fremdobjekt (Nachbardach):
                     Fokus links-unten; wo der Rahmen das volle Bildformat zeigt
                     (Seitenkopf mobil/Tablet, Split), schneidet ein Anschnitt die
                     rechten 11 % ab. Start-Hero: unter 64em derselbe Anschnitt
                     (§7, seit 30.09.2026), ab 64em Ausschnitt 78 %.
   ueberdachung      Hochformat 3:4 im 4:3-Rahmen: Fokus auf das Dach der
                     Konstruktion statt auf den Kellerabgang (NACHKRITIK-b).
   gaube-vorher      16:9 im 4:3-Rahmen (Bildpaar Dachgauben, Galerie
   gaube-nachher     Referenzen): Oben links steht eine Fahne vor dem Dach
                     (bis 25 % der Bildbreite). Fokus rechts zeigt 25–100 %,
                     die Fahne fällt weg. Das Nachher-Bild bekommt denselben
                     Ausschnitt, damit das Paar dieselben zwei Fenster zeigt
                     (Abnahme 30.09.2026, P3-15). */
img[src^="/assets/img/gaube-kupfer-rot-"] { --fokus: 30% 62%; }
img[src^="/assets/img/ueberdachung-"] { --fokus: 50% 22%; }
img:is([src^="/assets/img/gaube-vorher-"], [src^="/assets/img/gaube-nachher-"]) { --fokus: 100% 50%; }
:is(.b-scharbild, .split-medium) picture:has(> img[src^="/assets/img/gaube-kupfer-rot-"]) {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--schatten-bild);
}
:is(.b-scharbild, .split-medium) img[src^="/assets/img/gaube-kupfer-rot-"] {
  width: calc(100% / .89);
  max-width: none;
  box-shadow: none;
  border-radius: 0;
}

/* Start-Hero */
.shero--start h1 {
  font-size: var(--fs-display);
  line-height: 0.98;
  max-width: 16ch;
}
.shero--start .h1-zusatz { margin-top: var(--s-3); }
.b-belege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
}
.b-belege li { display: flex; align-items: center; gap: 0.6em; }

/* Das Bild aus Scharen (der EINE Moment, §16) */
.b-scharen {
  --n: 4;
  position: relative;
  overflow: hidden;
  /* mobil so hoch, dass das 16:10-Bild seitlich knapp beschnitten wird und das
     dunkle Fremdobjekt am rechten Bildrand wegfällt (KRITIK-b Nr. 3) */
  height: clamp(15rem, 70vw, 22rem);
  background-color: var(--grund);
  background-image: var(--naht);
  background-size: calc(100% / var(--n)) 100%;
  background-position: -2px 0;
}
.b-schar {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc((var(--n) - 1 - var(--i)) * 100% / var(--n) + 2px) 0 calc(var(--i) * 100% / var(--n) + 2px));
}
.b-schar picture { display: block; height: 100%; }
.b-schar img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
/* jede Schar mit gefalzter Kante: Licht links, Schatten rechts */
.b-schar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, transparent 2px, rgb(255 255 255 / .28) 2px 3px, transparent 3px calc(100% - 3px), rgb(0 0 0 / .22) calc(100% - 3px) calc(100% - 2px), transparent calc(100% - 2px));
  background-size: calc(100% / var(--n)) 100%;
}
.b-schar:nth-child(1) { --i: 0; } .b-schar:nth-child(2) { --i: 1; } .b-schar:nth-child(3) { --i: 2; }
.b-schar:nth-child(4) { --i: 3; } .b-schar:nth-child(5) { --i: 4; } .b-schar:nth-child(6) { --i: 5; }
.b-schar:nth-child(7) { --i: 6; } .b-schar:nth-child(8) { --i: 7; }
.b-schar:nth-child(n+5) { display: none; }
@media (min-width: 48em) {
  .b-scharen { --n: 8; height: clamp(20rem, 46vw, 28rem); }
  .b-schar:nth-child(n+5) { display: block; }
}
/* Anschnitt gaube-kupfer-rot im Moment (Abnahme 30.09.2026, P3-3): Das dunkle
   Fremdobjekt beginnt bei 91,5 % der Bildbreite. Unter 64em wird der Rahmen ab
   etwa 500 px breiter als 1,4 : 1, dann schnitt „cover" rechts zu wenig ab; ab
   1,6 : 1 (≈ 563 px) stand das ganze Bild samt Objekt im Moment (768 px:
   deutlich sichtbar). Wie im Seitenkopf (§7b) liegt das
   Bild 1/0,89-fach breit und links bündig; die rechten 11 % schneiden
   .b-scharen (overflow) und der clip-path der letzten Schar ab. Rechnerisch
   bleiben so bei JEDEM Seitenverhältnis mindestens 11 % rechts verborgen.
   Nähte und Streifen bleiben deckungsgleich: clip-path rechnet weiter in der
   Box der Schar, jede Kopie liegt identisch. Ab 64em (9 : 10, Ausschnitt 78 %)
   ist das Objekt ohnehin außerhalb, dort bleibt der Ausschnitt unverändert. */
@media (max-width: 63.99em) {
  .b-schar img[src^="/assets/img/gaube-kupfer-rot-"] { width: calc(100% / .89); max-width: none; }
}

@media (min-width: 64em) {
  .b-fassade { grid-template-rows: auto auto 1fr; }
  .b-hero-kopf { grid-column: 1 / span 7; grid-row: 1; padding-top: var(--s-6); }
  .b-hero-fuss { grid-column: 1 / span 7; grid-row: 2; padding-bottom: var(--s-6); }
  .b-hero-fuss:has(~ .b-hero-beleg-zeile) { padding-bottom: 0; }
  .b-hero-beleg-zeile { grid-column: 1 / span 7; grid-row: 3; padding-bottom: var(--s-6); }
  .shero--medium .shero-medium {
    grid-column: 8 / -1;
    grid-row: 1 / 4;
    margin-block: var(--s-6) var(--s-5);
    align-self: start;
  }
  .shero--medium .shero-medium:not(.b-scharbild) { align-self: center; margin-block: var(--s-5); }
  /* Seitenkopf-Foto: fester 4:3-Rahmen (≈ 540 × 405 px bei 1440) statt der
     ganzen Kopfhöhe. Bei langen H1 wurde das Foto sonst bis 900 px hoch und
     1,4- bis 1,9-fach hochgezogen. 4:3 füllt auch ein 16:10-Bild mit höchstens
     648 px Breite — das reicht selbst mit dem festen sizes-Wert „45vw", den
     mehrere Seiten noch an preload_bild() geben (800er Datei bei 1440). */
  .shero--medium .b-scharbild { --n: 5; }
  .shero--medium .b-scharbild picture { height: auto; aspect-ratio: 4 / 3; }
  /* Start: das Bild steht auf den Scharen 8–12, oben bündig mit der H1, als
     9:10-Rahmen (≈ 540 × 600 px bei 1440). Vorher lief es über die ganze
     Hero-Höhe (≈ 810 px) und die 691-px-Quelle wurde 1,9-fach gezeichnet;
     jetzt 1,4-fach (KRITIK-b Nr. 3). Darunter läuft die Fassade weiter. */
  .b-scharen-rahmen {
    grid-column: 8 / -1;
    grid-row: 1 / 4;
    align-self: start;
    margin: var(--s-6) 0 var(--s-5);
  }
  .b-scharen {
    --n: 5;
    height: auto;
    aspect-ratio: 9 / 10;
  }
  /* Unterseiten: Kopf etwas knapper, damit die Knöpfe trotz H1 in 68 px bei
     1440 × 900 möglichst im ersten Bildschirm stehen (Bild bündig mit oben) */
  .shero:not(.shero--start) .b-hero-kopf { padding-top: var(--s-5); }
  .shero:not(.shero--start) .brotkrumen + * { margin-top: var(--s-3); }
  .shero:not(.shero--start) .b-hero-fuss { padding-top: var(--s-3); }
  .shero:not(.shero--start) .lead + .btn-reihe { margin-top: var(--s-3); }
  .shero--medium .shero-medium.b-scharbild { margin-top: var(--s-5); }
  .b-schar img { object-position: 78% 60%; }
  .b-schar:nth-child(n+6) { display: none; }
}

/* Niedrige Desktop-Fenster (1280 × 800, 1024 × 768): Unterseiten-Kopf straffer,
   damit die Hero-Knöpfe über der Falz liegen (NACHKRITIK-b, niedrig; vorher
   Unterkante 832–897 px bei 1280 × 800). H1 höchstens 60 px, Abstände eine
   Stufe kleiner. Start-Hero und hohe Fenster bleiben unverändert. */
@media (min-width: 64em) and (max-height: 820px) {
  .shero:not(.shero--start) h1 { font-size: min(var(--fs-h1), 3.75rem); }
  .shero:not(.shero--start) .b-hero-kopf { padding-top: var(--s-4); }
  .shero:not(.shero--start) .brotkrumen + * { margin-top: var(--s-2); }
  .shero:not(.shero--start) .kicker + h1 { margin-top: var(--s-1); }
  .shero:not(.shero--start) .h1-zusatz { margin-top: var(--s-2); }
  .shero:not(.shero--start) .b-hero-fuss { padding-top: var(--s-2); }
  .shero:not(.shero--start) .lead + .btn-reihe { margin-top: var(--s-2); }
  .shero--medium .shero-medium.b-scharbild { margin-top: var(--s-4); }
}

/* ---------- 8. Sprungleiste ---------- */
.b-sprung { padding-bottom: var(--s-4); }
.sprungleiste { margin-top: 0; }
main > .wrap > .sprungleiste { padding-block: var(--s-3) var(--s-2); }
.sprungleiste-titel { font-weight: var(--wght-label); letter-spacing: 0.02em; }
.sprungleiste ul { gap: 0 var(--s-3); margin-top: 0.15rem; }
.sprungleiste a {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--text);
  font-weight: 540;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
}
.sprungleiste a:hover { color: var(--accent-text); text-decoration-color: var(--accent-fill); }

/* ---------- 9. Bausteine ---------- */
.sek { padding-block: var(--fuge-o) var(--fuge-u); }   /* = Fuge (§2): s-7, flach s-5, gleiche Flächen ⅔ */
.stapel > * + * { margin-top: var(--s-3); }

/* Liste mit Doppelnaht statt Häkchen */
.checkliste { gap: 0.7em; }
.checkliste li { grid-template-columns: 4px minmax(0, 1fr); gap: 0.9em; }
.checkliste li::before { margin-top: 0.34em; }
.checkliste-ico { display: none; }

/* Belege (dl) */
.fakten { gap: 0; }
.fakt { padding-block: var(--s-2); border-top: 1px solid var(--line); }
.fakt:last-child { border-bottom: 1px solid var(--line); }
.fakt dt {
  display: flex;
  align-items: center;
  gap: 0.65em;
  font-size: var(--fs-body);
  font-weight: 680;
  color: var(--text);
}
.fakt dd { margin: 0.3rem 0 0 calc(4px + 0.65em); }
.fakt dd > * + * { margin-top: 0.35rem; }

/* Stellen-Datenblatt */
.stellen-fakten > div { grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr); border-top-color: var(--line); padding-block: 0.6rem; }
.stellen-fakten dt { font-size: var(--fs-klein); color: var(--muted); padding-top: 0.12em; }
.stellen-fakten dd { font-weight: 520; min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* schmales Datenblatt: Bezeichnung über dem Wert statt zwei gequetschter Spalten */
@container (max-width: 25rem) {
  .stellen-fakten > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}

/* Ablauf: Nummern in Martian Mono (echte Reihenfolge) */
.schritte { list-style: none; padding: 0; counter-reset: b-schritt; }
.schritt {
  counter-increment: b-schritt;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  column-gap: var(--s-2);
  padding-block: var(--s-2) var(--s-3);
  border-top: 1px solid var(--line);
}
.schritt + .schritt { margin-top: 0; }
.schritt::before {
  content: counter(b-schritt, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 6;
  font-family: var(--mono);
  font-stretch: var(--wdth-nummer);
  font-weight: 330;
  font-size: var(--fs-h3);
  line-height: 1.1;
  color: var(--accent-text);
}
.schritt > * { grid-column: 2; }
.schritt > * + * { margin-top: 0.35em; }
.schritt h3 { font-size: var(--fs-lead); font-weight: 680; }

/* FAQ */
.faq details { border-top-color: color-mix(in oklch, var(--text) 14%, transparent); }
.faq details:last-child { border-bottom-color: color-mix(in oklch, var(--text) 14%, transparent); }
.faq summary { min-height: 56px; font-size: var(--fs-lead); font-weight: 620; line-height: 1.35; }
.faq summary:hover { color: var(--accent-text); }
.faq-ico { width: 1.4rem; height: 1.4rem; color: var(--accent-fill); }
.faq details[open] > summary { color: var(--accent-text); }

/* Kasten = Blechtafel mit Kupfernaht an der linken Kante */
.kasten {
  position: relative;
  padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 3px);
  border: 1px solid color-mix(in oklch, var(--text) 13%, transparent);
  border-radius: var(--radius);
}
/* Kupfernaht links als Doppelrand (1 px, 2 px Luft, 1 px): kein Hintergrundbild,
   damit axe den Kontrast im Kasten messen kann */
.kasten { border-left: 4px double var(--accent-fill); }
.kasten h2, .kasten h3 { max-width: 24ch; }
.kasten h2:not(.klein) { font-size: clamp(1.375rem, 1.155rem + 0.939vw, 2rem); }   /* 22 → 32 px, unter der Sektions-H2 (44) */
.kasten h2.klein, .kasten h3.klein {
  font-family: var(--sans);
  font-size: var(--fs-klein);
  font-weight: var(--wght-label);
  letter-spacing: 0.02em;
  color: var(--muted);
}
@media (max-width: 47.99em) {
  .kasten { padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 3px); }
}
.kasten--einwand { border-color: color-mix(in oklch, var(--text) 13%, transparent); border-left-color: var(--accent-fill); }
.sek .kasten--einwand { background-color: var(--bg-2); }
.sek--flaeche .kasten--einwand { background-color: var(--bg); }
.sek--flaeche .kasten:not(.kasten--einwand) { background-color: var(--bg); }

/* Hinweis mit Stand: ein Blechschild — heller als die Umgebung, Kupfernaht links */
.sek .hinweis-box, .hinweis-box {
  padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 4px);
  border: 1px solid color-mix(in oklch, var(--text) 9%, transparent);
  border-left: 4px double var(--accent-fill);
  background: var(--bg-hell);
}
.sek--flaeche .hinweis-box { background-color: var(--bg); }

/* Tabelle als Datenblatt */
.tabelle { border-collapse: collapse; }
.tabelle caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.6rem;
  font-size: var(--fs-klein);
  color: var(--muted);
}
.tabelle th {
  font-size: var(--fs-klein);
  font-weight: 520;
  color: var(--muted);
  border-bottom: 1.5px solid var(--line-strong);
}
.tabelle td { border-bottom-color: color-mix(in oklch, var(--text) 12%, transparent); }
.tabelle td:first-child { font-weight: 600; }
@media (max-width: 47.99em) {
  /* Trennen nur lange Wörter (≥ 10 Zeichen, je Teil ≥ 4): „Titanzink",
     „Material", „Edelstahl" bleiben ganz, „Dachflächenfenster" darf trennen
     (KRITIK-b Nr. 8). Gilt ebenso für Fließtext in schmalen Spalten. */
  .tabelle th, .tabelle td { padding: 0.55rem 0.4rem; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: break-word; }
  .tabelle :is(th[scope="row"], td:first-child) { -webkit-hyphens: manual; hyphens: manual; }
  main :is(p, li, dd, figcaption) { hyphenate-limit-chars: 10 4 4; }
}
/* Unter 375 px (Reflow bis 320; Abnahme 30.09.2026, gefunden beim Nachmessen
   von P3-1): Die Dachfenster-Tabelle hat drei Spalten mit festen Einheiten
   („Uw 1,4 W/(m²·K)", „Anlage 7 Nr. 2b" mit geschützten Leerzeichen) und
   brauchte bei 320 px 310 statt 288 px, die Seite lief 6 px quer. Jetzt
   stehen die äußeren Zellen bündig auf der Textkante (wie Fließtext) und die
   Zellen in 15 px; Kopf und Beschriftung bleiben 14 px. Ab 375 px unverändert. */
@media (max-width: 23.4em) {
  .tabelle :is(th, td):first-child { padding-left: 0; }
  .tabelle :is(th, td):last-child { padding-right: 0; }
  .tabelle td { font-size: 0.9375rem; }
}

/* Bilder: gekantet, mit leichter Tiefe */
.referenz img, .team img, .galerie-bild img, .split-medium img { border-radius: var(--radius); box-shadow: var(--schatten-bild); }
.referenz figcaption, .galerie-bild figcaption, .team figcaption { margin-top: 0.7rem; line-height: 1.5; }
.referenz figcaption b, .galerie-bild figcaption b { font-size: 1em; font-weight: 560; color: var(--accent-text); }   /* nie unter 14 px */
.galerie { gap: var(--s-4) var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }   /* auto-fit: keine leere Spur */
.galerie-bild img { aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--fokus, 50% 50%); }
.raster { gap: var(--s-4) var(--s-3); }
/* Ab 64em hängen Galerie und Raster auf den Scharen (Abnahme-Runde 30.09.2026):
   Spaltenfuge = 2 × inset, also genau über einer Naht. Galerie: zwei oder drei
   Bilder je vier Scharen, ab vier Bildern je drei. Zwei Bilder strecken sich
   nicht mehr über je sechs Scharen (vordach-holz, 505-px-Quelle, wurde 612 px
   breit gezeichnet, NACHKRITIK-b); das freie Drittel zeigt die Fassade. */
@media (min-width: 64em) {
  :is(.wrap, .wrap > .stapel) > .galerie { column-gap: calc(2 * var(--inset)); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :is(.wrap, .wrap > .stapel) > .galerie:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .raster { column-gap: calc(2 * var(--inset)); }
}

/* Stellen als Registerzeilen (Feinschliff 27.09.2026, KRITIK-b Nr. 7): dasselbe
   Bauteil wie die Musterkarte der Leistungen statt eines 3er-Kartenrasters.
   Titel links (Scharen 1–4), ein Satz und Eckdaten rechts; das Datenblatt
   (stellen-fakten) steht auf den Scharen 9–12. Die ganze Zeile ist über den
   gestreckten Namenslink klickbar, weitere Links darin liegen darüber. */
.stellen {
  display: block;
  margin-inline: calc(-1 * var(--inset));
  border-bottom: 1px solid color-mix(in oklch, var(--text) 14%, transparent);
}
.stellen .stelle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--scharen), minmax(0, 1fr));
  row-gap: 0.4rem;
  align-items: start;
  padding: var(--s-3) 0;
  border: 0;
  border-top: 1px solid color-mix(in oklch, var(--text) 14%, transparent);
  border-radius: 0;
  background: none;
  transition: background-color var(--dauer) var(--ease-signatur);
}
.stellen .stelle:last-child { border-bottom: 0; }
.stellen .stelle > * { grid-column: 1 / -1; padding-inline: var(--inset); margin: 0; min-width: 0; }
.stelle h3 { font-size: var(--fs-h3); font-weight: 660; line-height: 1.2; }
.stelle h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
.stelle h3 a::after { content: ""; position: absolute; inset: 0; }
.stelle h3 a:focus-visible { outline: none; }
.stelle p a { position: relative; z-index: 1; }   /* „Direkt bewerben" über der gestreckten Zeile */
/* Zeile ohne Eckdaten (Initiativbewerbung): dort steht ein Satz, keine Daten →
   Schibsted statt Martian Mono (DESIGN-b §3, NACHKRITIK-b). Siehe unten. */
.stelle .klein {
  font-family: var(--mono);
  font-stretch: var(--wdth-caption);
  font-weight: var(--wght-caption);
  letter-spacing: 0.01em;
  color: var(--muted);
}
.stelle:has(> h3 a[href*="stelle=initiativ"]) .klein {
  font-family: var(--sans);
  font-stretch: var(--wdth-body);
  font-weight: 520;
  letter-spacing: 0;
}
.stelle:hover { background-color: var(--tint-weak); }
.stelle:hover h3 a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.stelle:focus-within { outline: 3px solid var(--focus); outline-offset: -3px; }
.stellen-fakten { container-type: inline-size; }
@media (min-width: 48em) {
  .stellen .stelle > h3 { grid-column: 1 / span 4; grid-row: 1 / span 4; }
  .stellen .stelle > :not(h3) { grid-column: 5 / -1; }
}
@media (min-width: 64em) {
  /* letzte Zeile 1fr: das hohe Datenblatt dehnt nur sie, nicht die Abstände links */
  .stellen .stelle:has(.stellen-fakten) { grid-template-rows: repeat(4, auto) 1fr; }
  .stellen .stelle:has(.stellen-fakten) > :not(h3, .stellen-fakten) { grid-column: 5 / span 4; }
  .stellen .stelle > .stellen-fakten { grid-column: 9 / -1; grid-row: 1 / -1; }
}

/* Platzhalter-Foto */
.ph-foto { border-radius: var(--radius); }
/* Große Foto-Platzhalter auf der Fassade (Split, Seitenkopf) in halber Höhe:
   ehrlich sichtbar, aber sie ziehen den Blick nicht mehr stärker als Kupfer
   (Abnahme-Runde 30.09.2026, NACHKRITIK-b: Terrasse, Über uns). Reicht der
   Text nicht hinein, wächst der Kasten mit (aspect-ratio ist nur Vorgabe). */
:is(.split-medium, .shero-medium) > .ph-foto--43 { aspect-ratio: 8 / 3; }
:is(.split-medium, .shero-medium) > .ph-foto--32 { aspect-ratio: 3 / 1; }
:is(.split-medium, .shero-medium) > .ph-foto--11 { aspect-ratio: 2 / 1; }
:is(.split-medium, .shero-medium) > .ph-foto--45 { aspect-ratio: 8 / 5; }

/* Recht */
.recht h2 { font-size: clamp(1.375rem, 1.199rem + 0.751vw, 1.875rem); max-width: none; }
.warnung { border-left-width: 4px; }

/* ---------- 9b. Bausteine des Feinschliffs (27.09.2026) ----------
   Mechanik in basis.css 11b, hier die Gestalt der Variante. Signatur sparsam:
   Die Doppelnaht erscheint als Kante (Merksatz, Tafel) oder als Querfalz
   (Kennwert), nie zusätzlich als Ornament über einer Sektion.
   TXT = reine Textsektion (keine breiten Bausteine), siehe §2. */

/* Merksatz: der Kern der Sektion, groß und schwer, mit Kupfernaht links.
   Ab 64em in Textsektionen als Blechschild auf der freien Fassade (§2). */
.merksatz {
  padding: 0 0 0 var(--s-3);
  border-left: 4px double var(--accent-fill);
  font-size: var(--fs-h3);
  font-weight: 620;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.sek > .wrap:not(.split) > p.merksatz { max-width: 30ch; }

/* Kennwerte: das Datenblatt. Wert in Martian Mono, schmal und leicht wie die
   Schrittnummern, aber groß; darüber der Querfalz (Doppellinie). */
.kennwerte { gap: var(--s-4) var(--s-4); }
.kennwert {
  container-type: inline-size;   /* der Wert passt sich der Spaltenbreite an */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  padding-top: var(--s-2);
  border-top: 4px double var(--line-strong);
}
.kennwert dt {
  font-family: var(--mono);
  font-stretch: var(--wdth-nummer);
  font-weight: 360;
  /* 28 → 44 px, in schmalen Spalten kleiner: der längste Wert ohne
     Umbruchstelle („0,040 W/(m·K)", 13 Zeichen, gemessen 0,667 em je Zeichen)
     passt so in jede Spalte ab 13 rem (Container-Einheit) */
  font-size: clamp(1.5rem, 1.398rem + 1.502vw, 2.75rem);
  font-size: clamp(1.5rem, min(1.398rem + 1.502vw, 11cqi), 2.75rem);
  overflow-wrap: anywhere;   /* Notnagel, falls ein Wert doch länger ist */
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.kennwert dt mark.ph { font-family: var(--sans); font-size: 0.6em; letter-spacing: 0; }
.kennwert dd { color: var(--text); }
.kennwert dd p:not(.quelle) { max-width: 40ch; }

@media (min-width: 64em) {
  /* Tafel-Fassung (float auf den Scharen 8–12, §2): Blechschild */
  .sek:not(:has(.split, .galerie, .raster, .b-musterkarte, .stellen, figure, .karte, .team)) > .wrap:not(.split) > :is(p.merksatz:not(:has(+ .schritte)), .kennwerte:not(:has(> :nth-child(4)))) {
    max-width: none;
    padding: var(--s-3) var(--s-4) var(--s-4) calc(var(--s-4) - 4px);
    border: 1px solid color-mix(in oklch, var(--text) 10%, transparent);
    border-left: 4px double var(--accent-fill);
    background-color: var(--bg-hell);
    box-shadow: 0 18px 30px -26px color-mix(in oklch, var(--text) 40%, transparent);
  }
  .sek--flaeche:not(:has(.split, .galerie, .raster, .b-musterkarte, .stellen, figure, .karte, .team)) > .wrap:not(.split) > :is(p.merksatz:not(:has(+ .schritte)), .kennwerte:not(:has(> :nth-child(4)))) {
    background-color: var(--bg);
  }
  /* Kennwerte in der Tafel: untereinander, getrennt durch Haarlinien */
  .sek:not(:has(.split, .galerie, .raster, .b-musterkarte, .stellen, figure, .karte, .team)) > .wrap:not(.split) > .kennwerte:not(:has(> :nth-child(4))) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }
  .sek:not(:has(.split, .galerie, .raster, .b-musterkarte, .stellen, figure, .karte, .team)) > .wrap:not(.split) > .kennwerte:not(:has(> :nth-child(4))) > .kennwert {
    padding-top: var(--s-3);
    border-top: 1px solid var(--line-strong);
  }
  .sek:not(:has(.split, .galerie, .raster, .b-musterkarte, .stellen, figure, .karte, .team)) > .wrap:not(.split) > .kennwerte:not(:has(> :nth-child(4))) > .kennwert:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

/* Leichter Weiter-Weg und cta 'leicht': ein Link in Kupfer, kein Kasten */
.weiter-link a {
  color: var(--accent-text);
  font-weight: 620;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
}
.weiter-link a:hover { text-decoration-color: var(--accent-fill); text-decoration-thickness: 2px; }
/* Winkel am letzten Wort (Abnahme 30.09.2026, P3-9; Muster aus Theme A):
   basis setzt den Link als inline-flex mit dem Winkel als Flex-Element. Brach
   der Linktext um, nahm der Textblock die volle Breite und der Winkel hing
   mittig rechts neben dem Absatz. 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 in der Linkfarbe steht: Er
   klebt immer am letzten Wort. Trefferfläche: padding-block hebt die Höhe je
   Zeile auf ≥ 44 px (Vertrag §7), ohne den Zeilenabstand zu ändern. */
.weiter-link a:not(.tel-link) {
  display: inline;
  min-height: 0;
  padding-block: 0.8em;
  --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");
}
.weiter-link a:not(.tel-link)::after {
  content: "\2060";
  display: inline;
  padding-left: 0.95em;
  border: 0;
  transform: none;
  background-color: currentColor;
  -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 { font-size: var(--fs-body); color: var(--text); }
.cta-leicht .tel-link { color: var(--text); font-weight: 620; font-variant-numeric: tabular-nums; }

/* Split auf dem Raster: ab 64em je sechs Scharen, die Fuge zwischen Text und
   Bild liegt genau auf Naht 6. Das Foto startet oben bündig mit dem Text. */
@media (min-width: 64em) {
  .split, .split--bild,
  .split--bild:not(.split--umgekehrt):has(> .split-medium:first-child),
  .split--bild.split--umgekehrt:has(> .split-medium:last-child) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: calc(2 * var(--inset));
    row-gap: var(--s-4);
  }
  .split > * { grid-row: 1; grid-column: 1 / span 6; }
  .split > * + * { grid-column: 7 / -1; }
  .split.split--umgekehrt > :first-child { grid-column: 7 / -1; }
  .split.split--umgekehrt > * + * { grid-column: 1 / span 6; }
  .split > :nth-child(n+3) { grid-row: auto; grid-column: 1 / -1; }
  .split > .split-medium { align-self: start; }
}
.split-medium figcaption, .shero-caption, .bildband > figcaption { font-size: var(--fs-klein); color: var(--muted); }
/* kleines Zweitfoto in der Textspalte eines Splits (z. B. kran-detail auf
   Über uns, von der Seite mit sizes 30vw bestellt): bleibt klein */
.split .stapel > figure.referenz { max-width: 26rem; }

/* Zwei Fotos nebeneinander (Dach | Blech, Vorher | Nachher): gleiches Format,
   damit die Paare auf einer Kante stehen */
.raster--2 > .referenz img { aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--fokus, 50% 50%); }

/* Fotoband: kein randloses Foto, sondern die Fassade selbst — genau so breit
   wie die zwölf Scharen, mit den hellen Doppelnähten darüber (wie im
   Seitenkopf). Die Bildunterschrift steht auf der Textkante. */
.bildband {
  width: auto;
  margin-inline: calc((100% - var(--rw)) / 2);
}
.bildband picture { position: relative; display: block; --n: var(--scharen); }
.bildband picture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgb(255 255 255 / .5) 0 1px, transparent 1px 3px, rgb(255 255 255 / .5) 3px 4px, transparent 4px);
  background-size: calc(100% / var(--n)) 100%;
  background-position: -2px 0;
}
.bildband img { display: block; box-shadow: var(--schatten-bild); }
/* Mobil zeigt das Band das ganze Foto statt eines Ausschnitts: basis erzwingt
   13rem Höhe, beim Panorama zink-ornament (3,2 : 1) blieb bei 375 px nur die
   Mitte der Sonne, und das Bild wurde dafür 1,4-fach hochgezogen (sizes kennt
   das Format nicht). 7rem hält jedes Band über 3,2 : 1 in voller Breite. */
.bildband img { min-height: 7rem; }
.bildband > figcaption {
  max-width: none;
  padding-inline: var(--inset);
  padding-top: 0.7rem;
  line-height: 1.5;
}

/* Ablauf waagerecht (ab 75em, wie in der Tile): jeder Schritt eine Schar mit
   Kupfernaht links, Nummer in Mono darüber. Der Ablauf deckt die Nähte auf
   seiner Höhe (Deckfläche §2), darüber und darunter läuft die Fassade. */
@media (min-width: 75em) {
  .sek > .wrap:not(.split) > .schritte {
    clear: both;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
    gap: var(--s-4) calc(2 * var(--inset));
    max-width: none;
  }
  .sek > .wrap:not(.split) > .schritte:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sek > .wrap:not(.split) > .schritte > .schritt {
    display: block;
    padding: 0 0 0 calc(var(--s-2) + 4px);
    border-top: 0;
    border-left: 4px double var(--accent-fill);
  }
  .sek > .wrap:not(.split) > .schritte > .schritt::before { display: block; margin-bottom: 0.55rem; }
  .sek > .wrap:not(.split) > .schritte > .schritt > * + * { margin-top: 0.45em; }
}

/* ---------- 10. Register: die Musterkarte ---------- */
.b-musterkarte {
  margin-top: var(--s-4);
  margin-inline: calc(-1 * var(--inset));
}
.b-muster-kopf { display: none; }
.leistungen-liste {
  display: block;
  counter-reset: b-leistung;
  border-bottom: 1px solid color-mix(in oklch, var(--text) 14%, transparent);
}
.leistungen-liste > li {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--scharen), minmax(0, 1fr));
  row-gap: 0.35rem;
  align-items: start;
  padding-block: var(--s-3);
  border-top: 1px solid color-mix(in oklch, var(--text) 14%, transparent);
  transition: background-color var(--dauer) var(--ease-signatur);
}
.leistungen-liste > li > * { grid-column: 1 / -1; padding-inline: var(--inset); margin: 0; min-width: 0; }
.leistungen-liste li > * + * { margin-top: 0; }
.leistungen-liste :is(h2, h3) { font-size: var(--fs-h3); font-weight: 660; line-height: 1.2; }
.leistungen-liste :is(h2, h3) a { color: var(--text); text-decoration: none; }
.leistungen-liste :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.leistungen-liste :is(h2, h3) a:focus-visible { outline: none; }
.leistungen-liste > li:focus-within { outline: 3px solid var(--focus); outline-offset: -3px; }
.leistungen-liste > li:hover { background-color: var(--tint-weak); }
.leistungen-liste > li:hover :is(h2, h3) a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.leistungen-liste p:not(.material) { color: var(--muted); max-width: 44em; }
.b-probe { overflow: hidden; }
.b-probe picture { display: block; }
.b-probe img, .b-probe .ph-foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.b-probe .ph-foto { padding: 0.5rem; gap: 0.2rem; }
.b-probe .ph-foto-ico { width: 1.5rem; height: 1.5rem; }
.b-probe .ph-foto figcaption span { display: none; }
/* Materialprobe ohne Foto ('platzhalter' => false, Abnahme-Runde 30.09.2026):
   ein Stück Titanzink mit Doppelnaht, zwei Scharen mit Walzschatten — wie die
   Fassade, nur klein. Rein dekorativ (aria-hidden), kein Text darauf. Statt
   des gelben „Foto folgt", das im Register stärker zog als jedes Kupfer. */
.b-zinkprobe {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  background-color: var(--bg-2);
  background-image:
    linear-gradient(90deg, transparent calc(50% - 2px), var(--line-strong) calc(50% - 2px) calc(50% - 1px), transparent calc(50% - 1px) calc(50% + 1px), var(--line-strong) calc(50% + 1px) calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(90deg, transparent 6%, color-mix(in oklch, var(--text) 6%, transparent) 96%, transparent 96%);
  background-size: 100% 100%, 50% 100%;
  background-repeat: no-repeat, repeat-x;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--text) 9%, transparent);
}
/* mobil: Probe links in Schar 1, Text rechts */
.b-musterkarte--bilder .leistungen-liste > li > .b-probe { grid-column: 1; grid-row: 1 / span 3; padding-inline: calc(var(--inset) - 2px) 2px; }
.b-musterkarte--bilder .leistungen-liste > li > :where(:not(.b-probe)) { grid-column: 2 / -1; }
@media (min-width: 48em) {
  .leistungen-liste > li > :is(h2, h3) { grid-column: 1 / span 3; grid-row: 1 / span 2; }
  .leistungen-liste > li > :not(:is(h2, h3, .b-probe)) { grid-column: 4 / -1; }
  .b-musterkarte--bilder .leistungen-liste > li > .b-probe { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .b-musterkarte--bilder .leistungen-liste > li > :is(h2, h3) { grid-column: 3 / span 2; }
  .b-musterkarte--bilder .leistungen-liste > li > :not(:is(h2, h3, .b-probe)) { grid-column: 5 / -1; }
}
/* Tablet mit Proben (48–64em; Abnahme 30.09.2026, P3-10): Der Titel hatte nur
   zwei von acht Scharen (188 px bei 768) und trennte drei- bis vierzeilig
   („Dachsa-/nierung und/Neueinde-/ckung", „Dachdämmun/g und"). Jetzt steht er
   wie mobil über Text und Material, alle drei auf den Scharen 3–8 neben der
   Probe. Ab 64em wieder die drei Spalten mit Spaltenkopf. */
@media (min-width: 48em) and (max-width: 63.99em) {
  .b-musterkarte--bilder .leistungen-liste > li > .b-probe { grid-row: 1 / span 3; }
  .b-musterkarte--bilder .leistungen-liste > li > :is(h2, h3),
  .b-musterkarte--bilder .leistungen-liste > li > :not(:is(h2, h3, .b-probe)) { grid-column: 3 / -1; grid-row: auto; }
}
@media (min-width: 64em) {
  .b-muster-kopf {
    display: grid;
    grid-template-columns: repeat(var(--scharen), minmax(0, 1fr));
    padding-bottom: 0.6rem;
    font-size: var(--fs-klein);
    color: var(--muted);
  }
  .b-muster-kopf span { padding-inline: var(--inset); }
  .b-muster-kopf span:nth-child(1) { grid-column: 1 / span 4; }
  .b-muster-kopf span:nth-child(2) { grid-column: 5 / span 5; }
  .b-muster-kopf span:nth-child(3) { grid-column: 10 / -1; }
  .leistungen-liste > li > :is(h2, h3) { grid-column: 1 / span 4; grid-row: 1; }
  .leistungen-liste > li > p:not(.material) { grid-column: 5 / span 5; grid-row: 1; }
  .leistungen-liste > li > .material { grid-column: 10 / -1; grid-row: 1; }
  .b-musterkarte--ohne-material .leistungen-liste > li > p { grid-column: 5 / -1; }
  .b-musterkarte--bilder .b-muster-kopf span:nth-child(1) { grid-column: 3 / span 3; }
  .b-musterkarte--bilder .b-muster-kopf span:nth-child(2) { grid-column: 6 / span 4; }
  .b-musterkarte--bilder .leistungen-liste > li > .b-probe { grid-column: 1 / span 2; grid-row: 1; }
  .b-musterkarte--bilder .leistungen-liste > li > :is(h2, h3) { grid-column: 3 / span 3; grid-row: 1; }
  .b-musterkarte--bilder .leistungen-liste > li > p:not(.material) { grid-column: 6 / span 4; grid-row: 1; }
  .b-musterkarte--bilder .leistungen-liste > li > .material { grid-column: 10 / -1; grid-row: 1; }
}

/* ---------- 11. Weiter-Weg: CTA-Leiste und Traufe ---------- */
/* Die Zeile kommt nach JEDER Sektion: keine Tafel, sondern ein Weiter-Weg.
   Querfalz (Doppellinie) oben, das Falzprofil als Werkzeichen, ein Satz, darunter
   Knopf + Nummer + Microcopy — auf der Textkante des Satzes. Desktop bleibt sie
   in der Lesespur, rechts läuft die Fassade weiter. */
.cta-zeile {
  --cta-ico: 2.75rem;
  display: grid;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 4px double var(--line-strong);   /* der Querfalz */
}
.cta-zeile > * + * { margin-top: 0; }
.cta-kopf { display: grid; grid-template-columns: var(--cta-ico) minmax(0, 1fr); column-gap: var(--s-2); align-items: start; }
.cta-kopf > .b-falzprofil { grid-row: 1 / span 2; margin-top: 0.32em; width: var(--cta-ico); height: 1rem; color: var(--accent-fill); }
.cta-kopf > :not(svg) { grid-column: 2; }
.cta-kopf > p + p { margin-top: 0.35rem; }
.cta-titel { font-size: var(--fs-lead); font-weight: 640; line-height: 1.35; letter-spacing: -0.005em; }
.cta-kopf > p:not(.cta-titel) { color: var(--muted); }
.cta-zeile .cta-aktion { padding-left: calc(var(--cta-ico) + var(--s-2)); }
.cta-aktion .micro { margin-top: 0.45rem; }
/* ohne Satz: Werkzeichen und Knöpfe in einer Zeile */
.cta-zeile--kurz { grid-template-columns: var(--cta-ico) minmax(0, 1fr); column-gap: var(--s-2); align-items: start; }
.cta-zeile--kurz .cta-kopf { display: block; padding-top: 0.95rem; }
.cta-zeile--kurz .cta-aktion { padding-left: 0; }
@media (min-width: 56em) and (max-width: 63.99em) {
  .cta-zeile:not(.cta-zeile--kurz) { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .cta-zeile:not(.cta-zeile--kurz) .cta-aktion { padding-left: 0; }
}

/* Das Band am Seitenende ist die Traufe: die einzige Kupferfläche der Seite,
   seit dem Feinschliff 27.09.2026 echtes Kupferblech (--traufe = --accent-fill)
   statt der Pfirsich-Fläche, die sich als Hautton las (KRITIK-b Nr. 6). Oben
   die Traufkante als Doppelnaht in dunklem Kupfer, darunter ein Walzschatten
   nach rechts (nur dunkler, nie heller: Weiß bleibt überall >= 5,05:1).
   Schrift Weiß, Knopf invertiert (Zink hell, Schrift --accent-text 7,15:1),
   Fokusring Weiß. Die Nähte laufen hell in den Fugen: Kupfer-Stehfalz. */
.cta-band {
  --grund: var(--traufe);
  --naht-farbe: rgb(255 255 255 / .22);
  --walz-tiefe: var(--traufe-kante);
  --focus: var(--on-accent);
  padding-block: var(--s-7);
  border-top: 4px double var(--traufe-kante);   /* die Traufkante */
  background-clip: padding-box;
  color: var(--on-accent);
}
/* Walzschatten quer über das ganze Blech (statt der Schar-Streifen) */
.cta-band::after {
  inset-inline: 0;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, rgb(0 0 0 / .85));
          mask-image: linear-gradient(100deg, transparent 35%, rgb(0 0 0 / .85));
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
          mask-composite: add;
}
.cta-band .wrap { display: grid; gap: var(--s-4); }
.cta-band .wrap > * + * { margin-top: 0; }
.cta-band .cta-kopf { display: block; }
.cta-band .cta-kopf > * + * { margin-top: var(--s-3); }
.cta-band .b-falzprofil { display: block; width: 3.25rem; height: 1.2rem; color: var(--on-accent); }
.cta-band h2 { font-size: var(--fs-h2); max-width: 18ch; color: var(--on-accent); }
.cta-band :is(p, .micro) { color: var(--on-accent); }
.cta-band .cta-kopf > p { max-width: 36em; color: var(--on-accent); }
.cta-band p a:not(.btn) { color: var(--on-accent); text-decoration-color: rgb(255 255 255 / .6); }
.cta-band .btn--primaer {
  background: var(--traufe-knopf);
  color: var(--accent-text);
  box-shadow: inset 0 -3px 0 color-mix(in oklab, var(--traufe-kante) 35%, var(--traufe-knopf));
}
.cta-band .btn--primaer:hover { background: #fff; color: var(--accent-hover); }
.cta-band .btn--sekundaer.tel-link { background: transparent; color: var(--on-accent); text-decoration-color: rgb(255 255 255 / .55); }
.cta-band .btn--sekundaer.tel-link:hover { color: var(--on-accent); text-decoration-color: var(--on-accent); }
.cta-band .btn--sekundaer .ico { color: var(--on-accent); }
@media (min-width: 64em) {
  .cta-band .wrap { grid-template-columns: calc(7 * (100% + 2 * var(--inset)) / var(--scharen) - 2 * var(--inset)) minmax(0, 1fr); column-gap: calc(2 * var(--inset)); align-items: end; }
}

/* ---------- 12. Formular ---------- */
.formular { gap: var(--s-3); }
.feld > label, .feld > legend { font-weight: var(--wght-label); }
.feld > label .klein, .feld > legend .klein { font-weight: 420; color: var(--muted); }
.feld.ist-pflicht > label .klein { color: var(--accent-text); font-weight: 600; }
.feld input:not([type="radio"]):not([type="checkbox"]), .feld select, .feld textarea {
  background-color: color-mix(in oklab, var(--bg) 35%, white);
  border-width: 1px;
  border-color: var(--field-border);
}
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
.feld [aria-invalid="true"]:not([type="radio"]) { border-width: 2px; background-color: color-mix(in oklab, var(--err) 4%, white); }
.feld-fehler { line-height: 1.45; }
.formular .btn[type="submit"] { justify-self: start; min-height: 52px; font-size: var(--fs-lead); padding-inline: 1.4em; }
.formular .btn .ico { width: 1.1em; height: 1.1em; }
.fehler-box {
  background: color-mix(in oklab, var(--err) 5%, var(--bg-hell));   /* --err darauf 5,8:1 */
  border-width: 0 0 0 4px;
  border-radius: 0;
  padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 2px);
}
.fehler-box:focus { outline: 3px solid var(--err); outline-offset: 3px; }
.fehler-box h2 { max-width: none; font-size: var(--fs-lead); }
.hinweis { border-radius: var(--radius); }
.hinweis--ok { border-width: 0 0 0 4px; border-radius: 0; }
.hinweis:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.kanaele { gap: var(--s-2); }
.kanal {
  min-height: 56px;
  padding: 0.65rem 1.1rem;
  border-color: color-mix(in oklch, var(--text) 16%, transparent);
  background-color: var(--grund);
}
.kanal:hover { border-color: var(--accent-fill); }
.kanal:hover b { color: var(--accent-text); }
.kanal .ico { width: 1.4rem; height: 1.4rem; }
.karte iframe { box-shadow: var(--schatten-bild); }

/* ---------- 13. Fuß ---------- */
.site-fuss {
  --grund: var(--bg);
  padding-block: var(--s-6) var(--s-4);
  border-top: 1px solid var(--line);
}
.fuss-spalte h3 {
  font-size: var(--fs-klein);
  font-weight: var(--wght-label);
  letter-spacing: 0.02em;
  color: var(--muted);
}
.fuss-spalte a { color: var(--text); text-decoration: none; }
.fuss-spalte a:hover { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent-fill); text-underline-offset: 0.25em; }
.fuss-spalte address { line-height: 1.6; }
.fuss-spalte address b { font-weight: 680; }
.fuss-spalte .klein a { color: var(--accent-text); text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--accent-text) 45%, transparent); }
.fuss-unten { border-top-color: var(--line); }
.fuss-unten a { text-decoration-color: color-mix(in oklch, var(--muted) 50%, transparent); }

/* ---------- 14. Dock (mobil) ---------- */
@media (max-width: 63.99em) {
  .dock { background: var(--bg); border-top: 1px solid var(--line-strong); }
  .dock-btn { font-weight: 650; font-size: 0.9375rem; gap: 0.45rem; padding-inline: 0.4rem; white-space: nowrap; }
  .dock-btn .ico { width: 1.15em; height: 1.15em; }
  .dock-btn:not(.dock-btn--zweit) { box-shadow: inset 0 -3px 0 var(--accent-hover); }
  .dock-btn--zweit { background: var(--bg); border-color: var(--field-border); }
}

/* ---------- 15. Seiten ---------- */
.seite-recht .shero h1, .seite-fehler .shero h1 { max-width: 16ch; }

/* ---------- 16. Der EINE Moment: Scharen fahren ein ----------
   Endzustand ist der CSS-Standard. Nur mit JS (html.js, gesetzt vor dem ersten
   Bild) UND ohne „weniger Bewegung" stehen die Scharen anfangs unten:
   - theme.js hält sie (.b-wartet), bis das Bild geladen und der Hero sichtbar
     ist, dann .b-montiert → einmal einfahren, Stagger 70 ms, danach Ruhe.
   - Notnagel ohne theme.js: dieselbe Animation startet nach 2,4 s von selbst. */
/* Die Scharen kommen von oben (Feinschliff 27.09.2026): so erscheint zuerst die
   Bildunterkante mit Kupfertraufe und Ziegel, nicht der graue Himmel (KRITIK-b Nr. 3). */
@keyframes b-einfahren { from { transform: translateY(-101%); } to { transform: none; } }
@keyframes b-einfahren-los { from { transform: translateY(-101%); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .b-scharen .b-schar {
    animation: b-einfahren var(--dur-montage) var(--ease-signatur) both;
    animation-delay: calc(2.4s + var(--i) * var(--stagger));
  }
  .js .b-scharen.b-wartet .b-schar { animation: none; transform: translateY(-101%); }
  .js .b-scharen.b-montiert .b-schar {
    animation: b-einfahren-los var(--dur-montage) var(--ease-signatur) both;
    animation-delay: calc(90ms + var(--i) * var(--stagger));
  }
  .js .b-scharen.b-fertig .b-schar { animation: none; transform: none; }
}

/* ---------- 17. Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .b-schar { animation: none; transform: none; }
}