/* =============================================================================
   themes/c/theme.css · Variante C „Schieferbuch" · Neuß Dachtechnik
   Besitzer: Theme-Agent C · Stand 30.09.2026 · Marken-Vertrag: _bau/DESIGN-c.md

   Unlayered: jede Regel hier schlägt basis.css (komplett in @layer basis),
   ohne !important. Mechanik (Menü, Dock, Formular-Logik) bleibt bei basis.css;
   hier steht das Erscheinungsbild.

   Die Idee in einem Satz: Die Seite ist das Referenzbuch eines Dachdeckers —
   Kreideweiß als Papier, Zinkgrau als zweite Fläche, Schiefer als Tinte,
   Marine als einzige Akzentfarbe, und EIN Motiv in fünf Maßstäben:
     1. Deckbild   die Schuppendeckung als feine Linien-Textur auf jeder
                   Zinkfläche, aus einer Ecke einlaufend (die Bindungs-Textur)
     2. Unterlage  im Start-Hero liegt das Foto auf einer Zinkplatte mit Deckbild
     3. Bildecke   genau eine Ecke je großem Foto im Schuppen-Bogen, zur Schrift hin
     4. Zeichen    ein Streifen Deckung als Kapiteltrenner, wo die Seite ihn
                   ruft (Stand 30.09.: Start, Dachsanierung, Flachdach je 1×;
                   ornamente.php 'trenner'); kein Zeichen mehr über jeder H2
                   und in keiner CTA-Zeile (KRITIK-c Nr. 7)
     5. Moment     das Start-Hero-Bild wird Reihe für Reihe gedeckt (theme.js)
   Feinschliff 30.09.2026 (KRITIK-c): Satzspiegel mit Titelspalte (5b),
   Fotos bis an den Fensterrand (6), Bausteine .split--bild .bildband
   .kennwerte .merksatz .weiter-link .cta-leicht (7b), Stellen als Register.
   Abnahme-Runde 30.09.2026 (NACHKRITIK-c): Galerie-Deckel 30rem je Bild,
   Belege und Kennwerte nach eigener Blockbreite, lange H1 66 px, Musterplatte
   im Register, Deckbild in Titelspalten-Zink unten links, Trenner-Abstände.
   Keine Dauer-Animation, keine zweite Akzentfarbe, keine Kursiv-Datei.

   Inhalt: 0 Motive · 1 Grundsatz · 2 Kopf/Navigation · 3 Seitenköpfe ·
   4 Start-Hero + Moment · 5 Sektionen/Flächen · 5b Satzspiegel · 6 Bilder ·
   7 Bausteine · 7b Feinschliff-Bausteine · 8 CTA · 9 Formular ·
   10 Fuß/Dock/Vorschau · 11 Recht/404 · 12 Bewegung
   ============================================================================= */

/* ---------- 0. Motive (SVG als data:-URI, CSP: img-src 'self' data:) ---------- */
:root {
  /* Bildecke im Schuppen-Bogen: der Rücken läuft tangential aus der Kante und
     endet spitz in der Nachbarkante — anders als ein runder Eckradius. */
  --schuppe-ul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' width='100' height='110'%3E%3Cpath d='M0 0C0 60 48 92 100 110H0Z'/%3E%3C/svg%3E");
  --schuppe-ur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' width='100' height='110'%3E%3Cpath d='M100 0C100 60 52 92 0 110H100Z'/%3E%3C/svg%3E");
  --schuppe-or: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' width='100' height='110'%3E%3Cpath d='M100 110C100 50 52 18 0 0H100Z'/%3E%3C/svg%3E");
  /* Deckbild: altdeutsche Schuppendeckung als Linien, 40 × 48 px je Rapport */
  --deckbild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='48' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M40 0C40 13 29 22 0 24M20 24C20 37 9 46 -20 48M60 24C60 37 49 46 20 48'/%3E%3C/svg%3E");
  /* Unterkante einer Deckreihe (Hero-Moment) */
  --reihe-kante: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100C100 33 52 50 0 60Z'/%3E%3C/svg%3E");
  --winkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23233F78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --grund: var(--bg);   /* Füllung der Schuppen-Zeichen = Fläche darunter */
  --pad: max(1rem, var(--s-3));   /* Randabstand von .wrap (basis) */
  /* Anschnitt bis an den Fensterrand ohne 100vw (das zählt die Scrollleiste
     mit und erzeugt waagerechten Überlauf): Sektion und Seitenkopf sind
     Container; --rand = Abstand vom Inhaltsrand der .wrap bis zum Fensterrand.
     Nicht registriert → cqw wird erst am nutzenden Element aufgelöst. */
  --rand: calc((100cqw - min(100cqw, var(--wrap))) / 2 + var(--pad));
}
.sek, .shero { container-type: inline-size; }

/* ---------- 1. Grundsatz ---------- */
html { font-synthesis-style: none; }   /* keine schräg gerechnete Ersatz-Kursive */
body { font-kerning: normal; }
::selection { background: color-mix(in oklch, var(--accent-fill) 22%, transparent); color: var(--text); }
em, i, cite { font-style: normal; font-weight: 600; }   /* Betonung über Gewicht */
b, strong { font-weight: 620; }
h1, h2, h3, h4 { font-family: var(--disp); font-optical-sizing: auto; color: var(--text); }
h1 { line-height: 1.02; }
/* basis trennt h1–h3 ab 10 Zeichen (KRITIK-a Nr. 5, gegen Überlauf mobil). In
   der großen Newsreader-H1 wirkte „Schorn-stein" wie ein Fehler: erst Wörter
   ab 14 Zeichen trennen („Terrassenüberdachung" passt sonst nicht). */
h1 { hyphenate-limit-chars: 14 6 6; }
h2 { line-height: 1.06; letter-spacing: -0.018em; max-width: 24ch; }
h3 { line-height: 1.2; letter-spacing: -0.006em; }
h2 b, h3 b, h2 strong, h3 strong { font-weight: 560; }
a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 1px; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 54ch; color: var(--text); }
.klein { font-size: var(--fs-klein); }
.micro { font-size: var(--fs-klein); font-weight: 500; font-stretch: var(--wdth-label); color: var(--muted); }
.kicker {
  font-family: var(--sans);
  font-size: var(--fs-klein);
  font-weight: 620;
  font-stretch: var(--wdth-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.quelle { font-size: var(--fs-klein); font-stretch: 94%; color: var(--muted); line-height: 1.5; max-width: var(--wrap-text); }
.quelle a { color: inherit; text-decoration-color: var(--line-strong); }
.quelle a:hover { text-decoration-color: currentColor; }
.material {
  font-family: var(--sans);
  font-size: var(--fs-klein);
  font-weight: 500;
  font-stretch: 86%;
  letter-spacing: 0.02em;
  color: var(--muted);
}
/* Antwort zuerst: der erste Satz unter einer Frage spricht mit der Buchstimme */
.antwort {
  font-family: var(--disp);
  font-size: var(--fs-antwort);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: -0.004em;
  max-width: 50ch;
  color: var(--text);
}
mark.ph[title] { cursor: help; }
/* Kontaktwege im Fließtext: Klickfläche = eine volle Zeile (inline-block, so
   hoch wie die Zeilenhöhe, ≥ 24 px im Fließtext), ohne Polster und ohne
   negative Ränder. Abnahme 30.09.2026 (P4-2): Das frühere Polster von 0,8em
   mit Gegenrand ragte in die Nachbarzeile; stand dort der zweite Kontaktweg
   (Fuß, Anfrage-Start, Datenschutz), traf ein Tipp auf die Nummer die E-Mail.
   Kontaktwege in eigenen Zeilen bekommen 44 px über den Fuß-Block darunter. */
:where(p, li, dd) > a:is([href^="tel:"], [href^="mailto:"]):not(.btn):not(.kanal) { display: inline-block; }
/* Telefon mit Symbol im Satz: Symbol und Nummer bleiben eine Zeile (basis setzt svg auf block) */
:where(p, li, dd) > a.tel-link[href^="tel:"]:not(.btn):not(.kanal) { display: inline-flex; align-items: baseline; gap: 0.3em; }
:where(p, li, dd) > a.tel-link[href^="tel:"]:not(.btn):not(.kanal) .ico { align-self: center; width: 1.05em; height: 1.05em; color: var(--accent-fill); }
code, kbd, samp {
  font-family: var(--mono);
  font-size: 0.95em;
  font-stretch: 92%;
  padding: 0.05em 0.3em;
  border-radius: var(--radius-sm);
  background: var(--tint);
  overflow-wrap: anywhere;
}
.tel-link, .nav-tel, .kanal, .tabelle, .stellen-fakten { font-variant-numeric: tabular-nums; }

/* Knöpfe: ruhig, 3 px Radius, kein Hub-Effekt */
.btn {
  min-height: 48px;
  padding: 0.75em 1.35em;
  border-width: 1.5px;
  font-size: 1rem;
  font-weight: 620;
  font-stretch: var(--wdth-knopf);
  letter-spacing: 0.005em;
  transition: background-color var(--dauer) var(--ease-signatur), border-color var(--dauer) var(--ease-signatur),
              color var(--dauer) var(--ease-signatur), box-shadow var(--dauer) var(--ease-signatur);
}
.btn--primaer { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.btn--primaer:hover { background: color-mix(in oklch, var(--accent-fill) 80%, var(--text)); box-shadow: 0 0 0 5px var(--tint); }
.btn--sekundaer { background: transparent; color: var(--text); border-color: var(--field-border); }
.btn--sekundaer:hover { border-color: var(--accent-fill); background: var(--tint-weak); }
.btn--sekundaer .ico { color: var(--accent-fill); }
.btn-reihe { gap: 0.75rem 1rem; }

/* ---------- 2. Kopf und Navigation ---------- */
.site-kopf { border-bottom: 1px solid var(--line); }
/* Logo-Link mobil nur 23 px hoch (Bild 5 : 1) → Trefferfläche 44 px, ohne
   den Kopf höher zu machen (Menüknopf misst ohnehin 44 px). */
.logo { display: flex; align-items: center; min-height: 44px; }
.kopf-innen { gap: var(--s-3); }
.nav-links a, .nav-sub-knopf { font-size: 1rem; font-weight: 520; font-stretch: 90%; }
.nav a:hover { text-decoration-color: var(--accent-fill); text-decoration-thickness: 1px; }
.nav-tel { font-size: 1rem; font-weight: 620; font-stretch: 94%; gap: 0.45em; }
.nav-tel .ico { color: var(--accent-fill); width: 1.2em; height: 1.2em; }
.nav-tel > span { border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
.nav-tel:hover > span { border-bottom-color: var(--accent-fill); }
.nav-cta { font-size: 0.9375rem; }
.menue-knopf {
  width: 44px; height: 44px;
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius);
}
.menue-knopf:hover { border-color: var(--accent-fill); }

@media (max-width: 47.99em) {
  .kopf-innen { gap: 0.625rem; }
  .logo img { width: clamp(7rem, 4.6rem + 11vw, 9rem); }
  .nav-tel { font-size: 0.9375rem; }
}
@media (min-width: 75em) {
  .nav-links { gap: var(--s-3); }
  .nav-sub-knopf { min-width: 32px; }
  .nav-sub-liste {
    min-width: 18rem;
    padding: 0.5rem 0;
    border-color: var(--line-strong);
    border-radius: var(--radius);
    box-shadow: 0 22px 44px -20px color-mix(in oklch, var(--text) 38%, transparent);
  }
  .nav-sub-liste a { font-size: 1rem; font-weight: 480; font-stretch: 94%; padding: 0.55rem var(--s-3); min-height: 44px; }
  .nav-sub-liste a:hover { background: var(--tint-weak); color: var(--accent-text); }
}
@media (min-width: 75em) and (max-width: 84.99em) {
  .nav-links { gap: 1.1rem; }
  .kopf-innen { gap: 1.1rem; }
}
/* Mobiles Menü: liest sich wie das Inhaltsverzeichnis des Buchs */
@media (max-width: 74.99em) {
  .js .nav { padding-top: var(--s-1); border-top-color: var(--line); }
  .nav-links > li { border-bottom-color: var(--line); }
  .nav-links > li > a {
    min-height: 54px;
    font-family: var(--disp);
    font-size: 1.375rem;
    font-weight: 440;
    font-stretch: 100%;
    letter-spacing: -0.005em;
  }
  .nav-sub-knopf { min-width: 48px; min-height: 48px; }
  .nav-sub-liste a { min-height: 44px; font-size: 1rem; font-weight: 480; }
}

/* ---------- 3. Seitenköpfe (Teil seiten-hero) ---------- */
.shero { padding-block: var(--s-3) var(--s-5); }
.shero + .sek, .shero + .wrap + .sek { padding-top: var(--s-6); }
/* Kopf ohne Foto (Kontakt, Recht, 404, Bewerbung): ein Titelblatt in Zinkgrau
   mit dem Deckbild — füllt die leere Hälfte mit Material statt mit Nichts. */
.shero:not(.shero--medium):not(.shero--start) {
  position: relative; isolation: isolate;
  --grund: var(--bg-2);
  background-color: var(--bg-2);
  padding-block: var(--s-5);
}
.shero:not(.shero--medium):not(.shero--start)::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  box-shadow: inset 0 0 0 200vmax color-mix(in oklch, var(--accent-fill) 19%, transparent);
  -webkit-mask: var(--deckbild) 0 0 / 40px 48px repeat, radial-gradient(ellipse 60% 120% at 100% 50%, #000 0%, rgb(0 0 0 / 0.55) 36%, transparent 72%);
  -webkit-mask-composite: source-in;
  mask: var(--deckbild) 0 0 / 40px 48px repeat, radial-gradient(ellipse 60% 120% at 100% 50%, #000 0%, rgb(0 0 0 / 0.55) 36%, transparent 72%);
  mask-composite: intersect;
}
.shero:not(.shero--medium):not(.shero--start) .shero-text { max-width: 58rem; }
.shero:not(.shero--medium):not(.shero--start) h1 { max-width: 20ch; }
.shero-raster { gap: var(--s-5); align-items: start; }
.shero-text { max-width: 46rem; }
.shero-text > * + * { margin-top: var(--s-3); }
.shero-text > .kicker + h1 { margin-top: var(--s-2); }
.shero h1 { font-size: var(--fs-h1); font-weight: var(--wght-display); letter-spacing: var(--track-display); }
.h1-zusatz {
  display: block;
  margin-top: 0.4em;
  max-width: 30ch;
  font-family: var(--disp);
  font-size: var(--fs-nach);
  font-weight: var(--wght-nach);
  line-height: 1.2;
  letter-spacing: -0.006em;
  color: var(--accent-text);
}
.shero .btn-reihe { margin-top: var(--s-4); }
.shero .micro { margin-top: 0.6rem; }
.brotkrumen ol { font-size: var(--fs-klein); font-stretch: 92%; }
.brotkrumen a { color: var(--muted); text-decoration-color: var(--line-strong); }
.brotkrumen a:hover { color: var(--accent-text); }
@media (min-width: 56em) {
  .shero--medium .shero-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: var(--s-6); align-items: center; }
  .shero--medium.shero--lang .shero-raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
/* Lange H1 (ab 59 Zeichen, Klasse aus teile/c/seiten-hero.php): 40 → 66 px.
   Seit der Abnahme-Runde 30.09. 66 statt 62 px: H1 : H2 = 1,50 auch auf den
   sechs langen Seiten (vorher 1,41, NACHKRITIK-c Nr. 6); die Knöpfe stehen
   bei 1440 × 900 weiter im ersten Bildschirm (gemessen). */
.shero--lang h1 { font-size: clamp(2.5rem, 2rem + 2.36vw, 4.125rem); }
/* Foto im Seitenkopf (KRITIK-c Nr. 4/12): mobil über die volle Breite, ab 56em
   bis an den rechten Fensterrand, Rahmen 5 : 4 statt 1 : 1 (weniger Anschnitt).
   Schuppen-Ecke unten links, zur Schrift hin. Bildunterschrift bleibt im
   Satzspiegel. Motiv-Fokus per --fokus; das Teamfoto oben ausgerichtet, damit
   das Neuß-Schild ganz bleibt. */
.shero:not(.shero--start) .shero-medium picture img { aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--fokus, 50% 50%); }
.shero-medium img[src*="/team-"] { --fokus: 50% 14%; }
.shero--foto .shero-medium { margin-inline: calc(-1 * var(--pad)); }
.shero--foto .shero-medium :is(figcaption, .shero-caption) { padding-inline: var(--pad); }
@media (min-width: 56em) {
  .shero:not(.shero--start) .shero-medium picture img { aspect-ratio: 5 / 4; }
  .shero--foto .shero-medium { margin-inline: 0 calc(-1 * var(--rand)); }
  .shero--foto .shero-medium :is(figcaption, .shero-caption) { padding-inline: 0 var(--rand); }
}
.shero-medium .referenz figcaption { margin-top: 0.75rem; }
.shero-medium .kasten h2 {
  max-width: none;
  font-family: var(--sans);
  font-size: var(--fs-klein);
  font-weight: 620;
  font-stretch: var(--wdth-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Sprungleiste: eine Zeile wie das Inhaltsverzeichnis, keine Chips */
.sprungleiste {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 var(--s-3);
  margin-top: var(--s-3);
  padding-block: 0.25rem;
  border-block: 1px solid var(--line);
}
.sprungleiste-titel {
  font-size: var(--fs-klein);
  font-weight: 620;
  font-stretch: var(--wdth-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.sprungleiste ul { margin: 0; gap: 0 var(--s-3); }
.sprungleiste a {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-weight: 520;
  font-stretch: 92%;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.35em;
}
.sprungleiste a:hover { color: var(--accent-text); text-decoration-color: var(--accent-fill); }
@media (max-width: 47.99em) {
  .sprungleiste { display: block; padding-block: var(--s-1); }
  .sprungleiste ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-2); }
  /* Lange Einträge trennen statt aus der Spalte laufen (Abnahme P4-10:
     „Datenschutzbeauftragte" reichte bei 320 px bis 345 px). */
  .sprungleiste a { display: flex; hyphens: auto; overflow-wrap: anywhere; }
}

/* ---------- 4. Start-Hero und der EINE Moment ---------- */
.shero--start { padding-block: var(--s-3) var(--s-6); }
.shero--start .shero-raster {
  --innen: min(100% - 2 * var(--pad), var(--wrap) - 2 * var(--pad));
  max-width: none;
  padding-inline: 0;
  grid-template-columns: [voll-start] var(--pad) [text-start] minmax(0, 1fr) [text-end] var(--pad) [voll-end];
  row-gap: var(--s-4);
  column-gap: 0;
  align-items: start;
}
.shero--start .shero-kopf,
.shero--start .shero-folge { grid-column: text; max-width: 40rem; }
.shero--start h1 {
  font-size: var(--fs-display);
  font-weight: var(--wght-display);
  line-height: 0.98;
  letter-spacing: -0.024em;
}
.shero--start .h1-zusatz { margin-top: 0.55em; max-width: 26ch; }
.shero--start .lead { max-width: 40ch; }
.shero--start .btn-reihe { margin-top: var(--s-3); }
.belege {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: var(--s-2) 0 0;
  border-top: 1px solid var(--line-strong);
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem;
  font-size: var(--fs-klein);
  font-weight: 540;
  font-stretch: var(--wdth-label);
  color: var(--muted);
}
.belege li { display: inline-flex; align-items: baseline; gap: 0.55rem; }
.belege li::before { content: ""; flex: none; width: 0.8rem; height: 1.5px; background: var(--accent-fill); transform: translateY(-0.3em); }

/* Bild: Vollbreite mobil, rechts bis an den Fensterrand ab 64em */
.shero--start .shero-medium {
  --fokus: 42% 45%;
  grid-column: voll;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;   /* mobil: Bild UND Terminknopf im ersten Bildschirm (375 × 812) */
  background: var(--bg-2);
  -webkit-mask: var(--schuppe-ul) left -2px bottom -2px / var(--schuppe-w) auto no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: var(--schuppe-ul) left -2px bottom -2px / var(--schuppe-w) auto no-repeat, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.shero--start .shero-medium picture { position: absolute; inset: 0; }
.shero--start .shero-medium img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus); }
.shero--start .shero-medium .ph-foto { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
@media (min-width: 48em) and (max-width: 63.99em) {
  .shero--start .shero-medium { aspect-ratio: 16 / 10; }
}
/* Mobil: H1, Bild UND beide Hero-Knöpfe im ersten Bildschirm (375 × 812),
   auch mit der Vorschau-Leiste (gemessen 30.09.2026). */
@media (max-width: 47.99em) {
  .shero--start { padding-top: var(--s-2); }
  .shero--start .shero-raster { row-gap: var(--s-2); }
  .shero--start .shero-medium { aspect-ratio: 16 / 10; }
  .shero--start .h1-zusatz { font-size: 1.1875rem; margin-top: 0.45em; }
  .shero--start .lead { font-size: 1.0625rem; line-height: 1.45; }
  .shero--start .btn-reihe { margin-top: var(--s-2); }
}
.shero-caption {
  margin-top: var(--s-2);
  font-size: var(--fs-klein);
  font-stretch: 92%;
  color: var(--muted);
  max-width: 60ch;
}
/* Unterlage (Materialebene): Das Foto liegt wie eine Platte auf der Deckung.
   Darunter eine Zinkplatte mit dem Deckbild, nach unten (ab 64em auch nach
   links) versetzt; durch die angeschnittene Schuppen-Ecke sieht man die
   Deckung. Statisch, kein Effekt. Die zwei Pseudo-Elemente sind Rasterelemente
   derselben Fläche wie das Bild; deshalb stehen alle Hero-Teile auf festen Zeilen
   (sonst schöbe die automatische Platzierung das Bild eine Zeile tiefer). */
.shero--start.shero--medium .shero-kopf { grid-row: 1; }
.shero--start.shero--medium .shero-medium { grid-row: 2; z-index: 1; }
.shero--start.shero--medium .shero-folge { grid-row: 3; margin-top: var(--s-2); }
.shero--start.shero--medium .shero-raster::before,
.shero--start.shero--medium .shero-raster::after {
  content: "";
  z-index: 0;
  grid-column: voll;
  grid-row: 2;
  align-self: stretch;
  margin: 45% 0 calc(-1 * var(--s-3));
  pointer-events: none;
}
.shero--start.shero--medium .shero-raster::before { background: var(--bg-2); }
.shero--start.shero--medium .shero-raster::after {
  box-shadow: inset 0 0 0 200vmax color-mix(in oklch, var(--accent-fill) 24%, transparent);
  -webkit-mask: var(--deckbild) 0 0 / 40px 48px repeat, radial-gradient(ellipse 60% 85% at 0% 100%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 80%);
  -webkit-mask-composite: source-in;
  mask: var(--deckbild) 0 0 / 40px 48px repeat, radial-gradient(ellipse 60% 85% at 0% 100%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 80%);
  mask-composite: intersect;
}
@media (min-width: 64em) {
  .shero--start { padding-top: var(--s-4); }
  .shero--start .shero-raster {
    grid-template-columns:
      [voll-start] minmax(var(--pad), 1fr)
      [text-start] minmax(0, calc(var(--innen) * 0.485))
      [text-end] minmax(0, calc(var(--innen) * 0.05))
      [bild-start] minmax(0, calc(var(--innen) * 0.465))
      minmax(var(--pad), 1fr) [voll-end];
    grid-template-rows: auto 1fr;
    row-gap: var(--s-3);
  }
  .shero--start .shero-kopf { grid-row: 1; }
  .shero--start .shero-folge { grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
  .shero--start .shero-folge > .belege { margin-top: auto; padding-top: var(--s-2); width: 100%; }
  .shero--start .shero-folge > :nth-last-child(2) { margin-bottom: var(--s-4); }
  .shero--start .shero-medium {
    grid-column: bild-start / voll-end;
    grid-row: 1 / span 2;
    align-self: stretch;
    aspect-ratio: auto;
    min-height: min(78vh, 50rem);   /* Fallback; svh im @supports darunter */
  }
  @supports (height: 1svh) {
    .shero--start .shero-medium { min-height: min(78svh, 50rem); }
  }
  .shero--start.shero--medium .shero-medium { grid-row: 1 / span 2; }
  .shero--start.shero--medium .shero-folge { grid-row: 2; margin-top: 0; }
  .shero--start.shero--medium .shero-raster::before,
  .shero--start.shero--medium .shero-raster::after {
    grid-column: bild-start / voll-end;
    grid-row: 1 / span 2;
    margin: var(--s-6) 0 calc(-1 * var(--s-3)) calc(-1 * var(--s-3));
  }
}

/* Der Moment: Abdeckung (Lattung) → Reihen von der Traufe zum First → fertig.
   Nur mit JS und ohne Wunsch nach weniger Bewegung. Das echte Bild liegt die
   ganze Zeit darunter.
   Notbremse (KRITIK-c Nr. 16): kommt theme.js nicht an, blendet die Abdeckung
   ab 1,2 s selbst aus (fertig bei 1,5 s). theme.js übernimmt nur vor 1,15 s.
   Ende ohne Rückblende (KRITIK-c Nr. 1): .deck-gedeckt (oberste Reihe liegt,
   die Abdeckung ist vollständig verdeckt) und .deck-sofort nehmen sie OHNE
   Übergang weg; der 0,3-s-Übergang bleibt nur für den Weg ohne Reihen. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-deck]::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background-color: var(--bg-2);
    background-image: repeating-linear-gradient(to top, var(--line-strong) 0 1px, transparent 1px calc(100% / 6));
    animation: deck-notbremse 0.3s linear 1.2s forwards;
  }
  .js [data-deck].deck-bereit::after { animation: none; }
  .js [data-deck].deck-fertig::after { opacity: 0; visibility: hidden; transition: opacity 0.3s linear, visibility 0s linear 0.3s; }
  .js [data-deck]:is(.deck-gedeckt, .deck-sofort)::after { opacity: 0; visibility: hidden; transition: none; }
}
@keyframes deck-notbremse { to { opacity: 0; visibility: hidden; } }
.deck-reihen { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.deck-reihe {
  --i: 0;
  --tx: 0%;
  position: absolute; left: 0; right: 0;
  top: calc(var(--i) * 100% / 6);
  height: calc(100% / 6 * 1.55);
  z-index: calc(10 - var(--i));
  opacity: 0;
  /* Schatten der Schuppen-Unterkante + Schieferton beim Legen (KRITIK-c Nr. 10):
     jede Reihe liest sich als eigene Plattenreihe, erst beim „Setzen" wird
     sie zum Foto. */
  filter: drop-shadow(0 3px 3px color-mix(in oklch, var(--text) 42%, transparent)) brightness(0.8) saturate(0.6);
}
.deck-reihe.r1 { --i: 1; --tx: 4.545%; }
.deck-reihe.r2 { --i: 2; }
.deck-reihe.r3 { --i: 3; --tx: 4.545%; }
.deck-reihe.r4 { --i: 4; }
.deck-reihe.r5 { --i: 5; --tx: 4.545%; }
.deck-reihe > i {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% / 1.55 + 1px) no-repeat,
    var(--reihe-kante) var(--tx) 100% / 8.3333% calc(100% * 0.55 / 1.55) repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% / 1.55 + 1px) no-repeat,
    var(--reihe-kante) var(--tx) 100% / 8.3333% calc(100% * 0.55 / 1.55) repeat-x;
}
/* Stoßfugen: 1-px-Kreidelinie an jeder Schuppengrenze, nur beim Legen */
.deck-reihe > i::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, color-mix(in oklch, var(--bg) 70%, transparent) 0 1px, transparent 1px) var(--tx) 0 / 8.3333% 100% repeat-x;
}
.shero--start .shero-medium .deck-reihe img {   /* schlägt „.shero--start .shero-medium img" (height:100%) */
  position: absolute; left: 0;
  top: calc(-100% * var(--i) / 1.55);
  width: 100%;
  height: calc(100% * 6 / 1.55);
  max-width: none;
  object-fit: cover;
  object-position: var(--fokus);
}
.deck-laeuft .deck-reihe {
  animation: deck-lege 0.42s var(--ease-signatur) forwards, deck-setzt 0.26s linear forwards;
  animation-delay: calc((5 - var(--i)) * 120ms), 1.02s;
}
.deck-laeuft .deck-reihe > i::after { animation: deck-fuge 0.26s linear 1.02s forwards; }
@keyframes deck-lege { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes deck-setzt { to { filter: drop-shadow(0 0 0 transparent) brightness(1) saturate(1); } }
@keyframes deck-fuge { to { opacity: 0; } }

/* ---------- 5. Sektionen und Flächen ---------- */
.sek { padding-block: var(--s-7); }
.sek--flach { padding-block: var(--s-5); }
/* Fluss innerhalb einer Sektion (basis kennt nur .stapel) */
:where(.sek > .wrap:not(.split, .raster, .stapel)) > * + * { margin-top: var(--s-3); }
:where(.sek) :where(.wrap, .stapel) > p { max-width: var(--wrap-text); }
.sek h2 + .lead, .sek h2 + .antwort, .sek h2 + p { margin-top: var(--s-2); }
.sek .lead + .leistungen-liste, .sek .lead + .galerie, .sek .lead + .raster,
.sek h2 + .leistungen-liste, .sek h2 + .schritte, .sek h2 + .faq, .sek h2 + .stellen,
.sek h2 + .galerie, .sek h2 + .raster, .sek h2 + .tabelle, .sek .antwort + .tabelle { margin-top: var(--s-4); }
.stapel > h3, .prose > h3, .recht > h3 { margin-top: var(--s-4); }
.stapel > .prose + .prose, .stapel > .stapel + .stapel { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.split { gap: var(--s-5) var(--s-6); }
@media (min-width: 56em) {
  /* Großes Foto neben langem Text bleibt beim Lesen im Blick (kein Effekt, nur Lage) */
  .split > .split-medium { align-self: start; position: sticky; top: var(--s-4); }
}
.raster { gap: var(--s-4) var(--s-3); }

/* Zinkfläche mit Deckbild: die EINE Bindungs-Textur. Aus der oberen rechten
   Ecke einlaufend, zur Schrift hin ausgeblendet — Material, kein Muster. */
.sek--flaeche, .site-fuss { position: relative; isolation: isolate; background-color: var(--bg-2); --grund: var(--bg-2); }
.sek--flaeche::before, .site-fuss::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  /* Farbe per Innenschatten statt background: axe-core wertet einen Pseudo-
     Hintergrund als „Kontrast unbestimmbar" für ALLE Texte der Fläche. Die
     Linien (19 % Marine auf Zinkgrau) halten selbst unter Text 4,9:1 für --muted. */
  box-shadow: inset 0 0 0 200vmax color-mix(in oklch, var(--accent-fill) 19%, transparent);
  -webkit-mask: var(--deckbild) 0 0 / 40px 48px repeat, radial-gradient(ellipse 58% 80% at 100% 0%, #000 0%, rgb(0 0 0 / 0.55) 34%, transparent 70%);
  -webkit-mask-composite: source-in;
  mask: var(--deckbild) 0 0 / 40px 48px repeat, radial-gradient(ellipse 58% 80% at 100% 0%, #000 0%, rgb(0 0 0 / 0.55) 34%, transparent 70%);
  mask-composite: intersect;
}

/* Flächen nach Bedeutung (KRITIK-c Nr. 5): Zink steht für Anhang/Beleg, nicht
   im Takt. Zwei Zinkflächen hintereinander sind EIN Kapitel: eine Haarlinie
   in Satzbreite trennt, das Deckbild läuft nur in der ersten ein. */
.sek--flaeche + .sek--flaeche {
  padding-top: var(--s-6);
  background-image: linear-gradient(var(--line-strong), var(--line-strong));
  background-size: min(100% - 2 * var(--pad), var(--wrap) - 2 * var(--pad)) 1px;
  background-position: 50% 0;
  background-repeat: no-repeat;
}
.sek--flaeche + .sek--flaeche::before { content: none; }
/* Zinkfläche mit Titelspalte (5b): rechts oben steht dort der Satzspiegel mit
   Tabellen — das Deckbild lief hinter die ersten Zeilen (NACHKRITIK-c,
   niedrig). Es läuft dann aus der unteren linken Ecke ein, unter der
   mitlaufenden H2, wo die Titelspalte leer ist. Gleiche Bedingung wie 5b,
   nur auf die Sektion gehoben (:has() lässt sich nicht verschachteln). */
@media (min-width: 64em) {
  .sek--flaeche:has(> .wrap:not(.split, .raster) > h2:first-child + *):not(:has(:is(.galerie, .raster, .split, .leistungen-liste, .stellen, .formular, .kanaele, .karte, .bildband, figure)))::before {
    -webkit-mask: var(--deckbild) 0 0 / 40px 48px repeat, radial-gradient(ellipse 34% 75% at 0% 100%, #000 0%, rgb(0 0 0 / 0.55) 34%, transparent 70%);
    -webkit-mask-composite: source-in;
    mask: var(--deckbild) 0 0 / 40px 48px repeat, radial-gradient(ellipse 34% 75% at 0% 100%, #000 0%, rgb(0 0 0 / 0.55) 34%, transparent 70%);
    mask-composite: intersect;
  }
}

/* Schuppen-Zeichen (ornamente.php): Linie in Marine, Füllung = Fläche */
.orn { display: block; height: auto; overflow: visible; color: var(--accent-fill); }
.orn path { fill: var(--grund); stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
/* Kapiteltrenner: ein Streifen Deckung, zentriert wie ein Dinkus im Buch.
   Steht zwischen zwei Sektionen; die Nachbarn rücken dafür etwas zusammen. */
.orn--trenner { width: clamp(5.5rem, 4.8rem + 3vw, 6.8rem); margin-inline: auto; color: var(--accent-fill); }
.orn--trenner path { stroke-width: 1.25; }
.sek:has(+ .orn--trenner) { padding-bottom: var(--s-6); }
.orn--trenner + .sek { padding-top: var(--s-6); }
/* Nie direkt auf einer Linie oder Zinkkante (NACHKRITIK-c, niedrig): unter der
   Sprungleiste hing er wie eine Fransenkante, auf Dachsanierung saß die untere
   Schuppenreihe ohne Abstand auf der Zinkfläche. Zink behält sein Polster. */
:is(.wrap, .sek--flaeche) + .orn--trenner { margin-top: var(--s-5); }
.orn--trenner:has(+ .sek--flaeche) { margin-bottom: var(--s-5); }
.sek--flaeche:has(+ .orn--trenner) { padding-bottom: var(--s-7); }
.orn--trenner + .sek--flaeche { padding-top: var(--s-7); }
/* Zweiter Satzblock in derselben Sektion (z. B. Hinweis-Kasten nach einem
   Text-Foto-Split, Schiefer & Denkmal): Luft statt 8 px unter der Bildunterschrift. */
.sek > .wrap + .wrap { margin-top: var(--s-5); }

/* ---------- 5b. Satzspiegel mit Titelspalte (KRITIK-c Nr. 4) ----------
   Textsektionen ab 64em wie im Fachbuch (und wie in der gewählten Tile):
   die H2 steht links in einer Titelspalte (4 : 7) und bleibt beim Lesen im
   Blick, Antwort-Satz, Fließtext, Liste, Kennwerte, FAQ und Weiter-Weg laufen
   rechts im Satzspiegel. Gilt nur für Sektionen, deren .wrap mit der H2
   beginnt und nirgends breite Bausteine (Galerie, Raster, Split, Register,
   Stellen, Formular, Fotos — auch verschachtelt, z. B. Vorher/Nachher-Paare)
   enthält: die brauchen die volle Breite.
   Gilt für .wrap und .wrap.stapel.
   Die H2 überspannt die Zeilen der rechten Spalte (span 60, Zeilenabstand 0:
   leere implizite Zeilen haben keine Höhe). Mobil und bis 64em: eine Spalte. */
@media (min-width: 64em) {
  .sek > .wrap:not(.split, .raster):has(> h2:first-child + *):not(:has(:is(.galerie, .raster, .split, .leistungen-liste, .stellen, .formular, .kanaele, .karte, .bildband, figure))) {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: var(--s-6);
    row-gap: 0;
    align-items: start;
  }
  .sek > .wrap:not(.split, .raster):has(> h2:first-child + *):not(:has(:is(.galerie, .raster, .split, .leistungen-liste, .stellen, .formular, .kanaele, .karte, .bildband, figure))) > h2 {
    grid-column: 1;
    grid-row: 1 / span 60;
    position: sticky;
    top: var(--s-4);
    max-width: 16ch;
  }
  .sek > .wrap:not(.split, .raster):has(> h2:first-child + *):not(:has(:is(.galerie, .raster, .split, .leistungen-liste, .stellen, .formular, .kanaele, .karte, .bildband, figure))) > :not(h2) { grid-column: 2; }
  .sek > .wrap:not(.split, .raster):has(> h2:first-child + *):not(:has(:is(.galerie, .raster, .split, .leistungen-liste, .stellen, .formular, .kanaele, .karte, .bildband, figure))) > h2 + * { margin-top: 0; }
  .sek > .wrap:not(.split, .raster):has(> h2:first-child + *):not(:has(:is(.galerie, .raster, .split, .leistungen-liste, .stellen, .formular, .kanaele, .karte, .bildband, figure))) > .antwort:nth-child(2) { margin-top: 0.1em; }
}

/* ---------- 6. Bilder ---------- */
/* Große Fotos: genau EINE Ecke im Schuppen-Bogen (zur Schrift hin).
   Galerie-Kacheln und Vorher/Nachher-Paare bleiben rechteckig: sie sind
   Belege, kein Bühnenbild. Maske 2 px über die Kante (wie die Schlusstafel):
   Mit 1 px blieb bei Bildbreiten mit Nachkommastelle eine 1-px-Restlinie an
   der Außenkante stehen (Schiefer & Denkmal, 1440, 30.09.2026). */
.shero:not(.shero--start) .shero-medium picture,
.split-medium picture,
.team picture {
  display: block;
  -webkit-mask: var(--schuppe-ul) left -2px bottom -2px / var(--schuppe-w) auto no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: var(--schuppe-ul) left -2px bottom -2px / var(--schuppe-w) auto no-repeat, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* Die Ecke zeigt immer zur Schrift: steht das Bild links (normale Reihenfolge
   mit Bild zuerst, oder umgekehrt mit Bild zuletzt), sitzt sie unten rechts. */
@media (min-width: 56em) {
  .split:not(.split--umgekehrt) > .split-medium:first-child picture,
  .split--umgekehrt > .split-medium:last-child picture {
    -webkit-mask: var(--schuppe-ur) right -2px bottom -2px / var(--schuppe-w) auto no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: var(--schuppe-ur) right -2px bottom -2px / var(--schuppe-w) auto no-repeat, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
}
/* Große Fotos neben Text laufen ab 64em bis an den Fensterrand (KRITIK-c
   Nr. 4, wie das Start-Hero): Bild rechts → Anschnitt rechts, Bild links →
   links. Nur Fotos (figure) direkt im Split einer Sektion, nie in Kästen.
   Die Bildunterschrift bleibt im Satzspiegel (Polster auf der Anschnittseite). */
@media (min-width: 64em) {
  :is(.sek > .wrap.split, .sek > .wrap > .split):not(.split--umgekehrt) > figure.split-medium:last-child,
  :is(.sek > .wrap.split, .sek > .wrap > .split).split--umgekehrt > figure.split-medium:first-child {
    margin-right: calc(-1 * var(--rand));
  }
  :is(.sek > .wrap.split, .sek > .wrap > .split):not(.split--umgekehrt) > figure.split-medium:last-child > figcaption,
  :is(.sek > .wrap.split, .sek > .wrap > .split).split--umgekehrt > figure.split-medium:first-child > figcaption { padding-right: var(--rand); }
  :is(.sek > .wrap.split, .sek > .wrap > .split):not(.split--umgekehrt) > figure.split-medium:first-child,
  :is(.sek > .wrap.split, .sek > .wrap > .split).split--umgekehrt > figure.split-medium:last-child {
    margin-left: calc(-1 * var(--rand));
  }
  :is(.sek > .wrap.split, .sek > .wrap > .split):not(.split--umgekehrt) > figure.split-medium:first-child > figcaption,
  :is(.sek > .wrap.split, .sek > .wrap > .split).split--umgekehrt > figure.split-medium:last-child > figcaption { padding-left: var(--rand); }
}
.split-medium img, .team img, .referenz img, .galerie-bild img { background: var(--bg-2); }
figure.referenz figcaption, .galerie-bild figcaption, .team figcaption {
  overflow-wrap: break-word;
  margin-top: 0.7rem;
  max-width: 60ch;
  font-size: var(--fs-klein);
  font-weight: 460;
  font-stretch: 92%;
  line-height: 1.45;
  color: var(--muted);
}
figure.referenz figcaption b, .galerie-bild figcaption b, .team figcaption b { font-weight: 640; color: var(--text); }
/* Kurze Platzhalter in Bildunterschriften („Ort und Jahr") nicht mitten im
   Kasten umbrechen (NACHKRITIK-c, niedrig). Erst ab 48em: mobil sind die
   Galerie-Spalten 163 px schmal, dort darf ein längerer Platzhalter umbrechen. */
@media (min-width: 48em) {
  :is(figure.referenz, .galerie-bild, .team, .split-medium, .shero-figur) figcaption mark.ph { white-space: nowrap; }
}
/* Vorher/Nachher und Bildpaare: gleiches Format, damit der Vergleich ehrlich ist */
.raster--2 > .referenz img { aspect-ratio: 16 / 10; object-fit: cover; }
/* Galerie (KRITIK-c Nr. 2): auto-fit statt auto-fill — keine leere Spur mehr,
   und ab 48em nach Bildzahl: 2 und 4 Bilder zweispaltig, 3, 5 und mehr
   dreispaltig. So bleibt jedes Foto groß genug, um etwas zu belegen (ab 1440
   px 390–600 px statt 285 px). Zwei Bilder (meist Vorher/Nachher) im
   gleichen 16 : 10-Format. */
.galerie { gap: var(--s-4) var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
@media (min-width: 48em) {
  .galerie:has(> :nth-child(2):last-child),
  .galerie:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galerie:has(> :nth-child(3):last-child),
  .galerie:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Zweispaltige Galerien (2 und 4 Bilder) höchstens 30rem je Bild (NACHKRITIK-c,
   hoch): Die meisten Galerie-Fotos stammen aus Quellen von 419–631 px
   (BILDER.md „grenzwertig"); mit 598 px gezeigt wurden sie sichtbar weich.
   So bleibt jedes Bild groß genug, um etwas zu belegen, aber nicht breiter,
   als die Quelle trägt. Die Tafel steht bündig unter der H2; der freie Rand
   rechts gehört dem Satzspiegel (auf Zink: dem Deckbild). sizes dazu:
   bild_sizes_fuer('galerie-2') = 30rem ab 64em (teile/c/bild-sizes.php). */
@media (min-width: 64em) {
  .galerie:has(> :nth-child(2):last-child),
  .galerie:has(> :nth-child(4):last-child) { max-width: calc(60rem + var(--s-3)); }
}
.galerie-bild { margin: 0; }
.galerie-bild img { aspect-ratio: 4 / 3; object-fit: cover; }
.galerie:has(> :nth-child(2):last-child) .galerie-bild img { aspect-ratio: 16 / 10; }
@media (max-width: 47.99em) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-2); }
  .galerie-bild figcaption { hyphens: auto; overflow-wrap: break-word; }
}
.ph-foto { border-radius: var(--radius); }

/* ---------- 7. Bausteine ---------- */
/* Register (dl): Begriff links, Beleg rechts — wie im Anhang eines Fachbuchs */
/* Zweispaltig nur, wenn das Register selbst breit genug ist (Container-Query,
   nicht Viewport): Neben dem Teamfoto der Startseite war die Begriffsspalte
   zwischen 900 und 1240 px nur 128–164 px breit, „Gebäudeenergieberater"
   (167 px) lief in den Beleg daneben (NACHKRITIK-c, mittel). Jetzt: ab 30rem
   Registerbreite Begriff links (mind. 11rem), darunter gestapelt. Dazu
   min-width:0 + Silbentrennung als zweite Sicherung (Baustandard). */
.fakten { container: fakten / inline-size; gap: 0; border-bottom: 1px solid var(--line); }
.fakt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem var(--s-3); padding-block: var(--s-2); border-top: 1px solid var(--line); }
.fakt > dt, .fakt > dd { min-width: 0; }
.fakt dt { font-size: 1rem; font-weight: 620; font-stretch: 92%; color: var(--text); hyphens: auto; overflow-wrap: break-word; hyphenate-limit-chars: 10 4 4; }
.fakt dd { margin: 0; }
.fakt dd > * + * { margin-top: 0.35em; }
@container fakten (min-width: 30rem) {
  .fakt { grid-template-columns: minmax(11rem, 34%) minmax(0, 1fr); }
}
.stellen-fakten > div { border-top-color: var(--line); }
.stellen-fakten dt { font-weight: 560; font-stretch: 90%; }
/* Im Seitenkopf der Stellen ist die Beleg-Spalte bei 900 px nur 158 px breit:
   „Dachdeckerhandwerk" lief 27 px über (gemessen 30.09.). Trennen statt sprengen. */
.stellen-fakten :is(dt, dd) { min-width: 0; hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: break-word; }
.stellen-fakten:last-child > div:last-child { border-bottom: 1px solid var(--line); }

.checkliste { gap: 0.7em; }
.checkliste-ico { color: var(--accent-fill); }

/* Ablauf: echte Reihenfolge, deshalb Ziffern — groß, leicht, in Marine */
.schritte { list-style: none; padding: 0; counter-reset: schritt; max-width: 54rem; }
.schritt {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: var(--s-3);
  padding-block: var(--s-3);
  border-top: 1px solid var(--line);
}
.schritt:last-child { border-bottom: 1px solid var(--line); }
.schritt + .schritt { margin-top: 0; }
.schritt::before {
  content: counter(schritt);
  grid-column: 1; grid-row: 1 / span 6;
  font-family: var(--disp);
  font-size: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  font-weight: 300;
  line-height: 0.9;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--accent-text);
}
.schritt > * { grid-column: 2; min-width: 0; }   /* Raster mit Fließtext (BAUANLEITUNG §1) */
.schritt > * + * { margin-top: 0.4em; }
.schritt h3 { font-size: var(--fs-h3); }
.schritt p { color: var(--muted); max-width: 58ch; }
.split .schritt { grid-template-columns: 2.5rem minmax(0, 1fr); }

/* FAQ */
.faq { max-width: 58rem; }
.faq details { border-top-color: var(--line); }
.faq details:last-child { border-bottom-color: var(--line); }
.faq summary {
  min-height: 52px;
  padding-block: var(--s-2);
  gap: var(--s-3);
  font-family: var(--disp);
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
  font-weight: 460;
  line-height: 1.3;
  color: var(--text);
}
.faq-frage { font: inherit; letter-spacing: inherit; color: inherit; max-width: 46ch; }
.faq summary:hover { color: var(--accent-text); }
.faq-ico { width: 1.5rem; height: 1.5rem; color: var(--accent-fill); }
.faq-antwort { padding-bottom: var(--s-4); }
.faq-antwort > p:not([class]) { max-width: 62ch; }

/* Kästen */
.kasten { padding: var(--s-4); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.sek--flaeche .kasten:not(.kasten--einwand), .sek--flaeche .stelle { border-color: transparent; }
.kasten h3 { font-size: var(--fs-h3); }
.kasten > * + * { margin-top: var(--s-2); }
/* Der größte Einwand: ein eingelegtes Blatt mit Marine-Kante oben */
.kasten--einwand {
  max-width: 62rem;
  border: 0;
  border-top: 4px solid var(--accent-fill);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--bg-2);
}
.sek--flaeche .kasten--einwand { background: var(--bg); }
.kasten--einwand h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.5rem); }
.hinweis-box {
  max-width: 62rem;
  padding: var(--s-3);
  border-left: 3px solid var(--accent-fill);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-2);
}
.sek--flaeche .hinweis-box { background: var(--bg); }
.hinweis-box h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); }

/* Tabellen */
.tabelle { font-size: 1rem; }
.tabelle caption {
  caption-side: top;
  padding-bottom: 0.75rem;
  text-align: left;
  font-size: var(--fs-klein);
  font-weight: 620;
  font-stretch: var(--wdth-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tabelle th { font-weight: 620; font-stretch: 92%; border-bottom: 1.5px solid var(--text); vertical-align: bottom; }
.tabelle td { border-bottom-color: var(--line); }
.tabelle td:first-child { font-weight: 600; }
@media (max-width: 47.99em) {
  .tabelle th, .tabelle td { padding: 0.55rem 0.5rem 0.55rem 0; }   /* Trennung/Umbruch: basis (hyphens + break-word) */
  .tabelle :is(th, td):first-child { min-width: 6.75em; }   /* Kopfspalte behält ihre Flucht */
}
/* 320 px (Abnahme P4-10): Die feste Kopfspalte machte die Förder-Tabelle auf
   Dachfenster 318 px breit bei 288 px Satzspiegel. Darunter entscheidet die
   Mindestbreite des Inhalts; Wörter unter 10 Zeichen bleiben ganz (basis). */
@media (max-width: 22.49em) {
  .tabelle :is(th, td):first-child { min-width: 0; }
}

/* Fließtext */
.prose { max-width: var(--wrap-text); }
.prose ul, .recht ul, .faq-antwort ul { padding-left: 1.15em; }
.prose li::marker, .recht li::marker, .faq-antwort li::marker { color: var(--accent-fill); }
.prose li + li, .recht li + li, .faq-antwort li + li { margin-top: 0.35em; }
.prose h3 { font-size: var(--fs-h3); }

/* Leistungsregister (Teil leistungsliste) */
.leistungen-liste {
  display: block;
  max-width: 70rem;
  border-bottom: 1px solid var(--line);
}
.leistungen-liste > li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5rem;
  grid-template-areas: "name pfeil" "text text";
  gap: 0.4rem var(--s-2);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}
.leistungen-liste li > * + * { margin-top: 0; }
.leistungen-liste h2, .leistungen-liste h3 {
  grid-area: name;
  font-size: clamp(1.3rem, 1.1rem + 0.85vw, 1.95rem);
  font-weight: 440;
  line-height: 1.14;
  letter-spacing: -0.01em;
}
.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; }
.ll-text { grid-area: text; }
.ll-text p { color: var(--muted); max-width: 54ch; }
.ll-text .material { margin-top: 0.4rem; }
.ll-pfeil {
  grid-area: pfeil;
  align-self: center;
  width: 1.5rem; height: 1.5rem;
  color: var(--accent-fill);
  transition: transform var(--dauer) var(--ease-signatur);
}
.leistungen-liste > li:hover { background: linear-gradient(90deg, transparent, var(--tint-weak) 70%); }
.leistungen-liste > li:hover :is(h2, h3) a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.leistungen-liste > li:hover .ll-pfeil { transform: translateX(4px); }
.ll-bild { grid-area: bild; }
.ll-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.ll-bild .ph-foto { aspect-ratio: 4 / 3; padding: 0.4rem; gap: 0.2rem; border-width: 1.5px; }
.ll-bild .ph-foto-ico { width: 1.5rem; height: 1.5rem; }
.ll-bild .ph-foto figcaption { font-size: var(--fs-klein); line-height: 1.25; hyphens: auto; overflow-wrap: anywhere; }
.ll-bild .ph-foto figcaption b { font-size: var(--fs-klein); }
.leistungen-liste--bilder > li {
  grid-template-columns: 7.5rem minmax(0, 1fr) 1.5rem;
  grid-template-areas: "bild name pfeil" "bild text text";
  align-items: start;
}
/* Mobil (Abnahme P4-4): Bild und Name teilen sich die erste Zeile, die
   Beschreibung läuft darunter über die volle Breite. Neben dem Bild war sie
   bei 375 px nur 207 px breit (6 Zeilen à ~21 Zeichen). */
@media (max-width: 47.99em) {
  .leistungen-liste--bilder > li {
    grid-template-areas: "bild name pfeil" "text text text";
    align-items: center;
  }
  .leistungen-liste--bilder .ll-text { align-self: start; }
  /* Register-Text eine Stufe unter dem Fließtext (16 statt 17 px), wie der
     Eintrag in einem Verzeichnis: rund 40 Zeichen je Zeile bei 375 px. */
  .leistungen-liste .ll-text p:not(.material) { font-size: 1rem; }
}
.leistungen-liste--bilder .ll-bild .ph-foto figcaption span { display: none; }   /* Motiv steht als Name daneben */
/* Musterplatte statt „Foto folgt" ('platzhalter' => false, Startseite): ein
   Stück Zink mit dem Deckbild — Material, kein vorgetäuschtes Foto. Hält die
   Namen im Register auf einer Flucht (NACHKRITIK-c, mittel). */
.ll-bild--muster {
  position: relative; isolation: isolate;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  background-color: var(--bg-2);
}
.ll-bild--muster::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 200vmax color-mix(in oklch, var(--accent-fill) 22%, transparent);
  -webkit-mask: var(--deckbild) 0 0 / 20px 24px repeat;
  mask: var(--deckbild) 0 0 / 20px 24px repeat;
}
@media (min-width: 56em) {
  .leistungen-liste > li {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr) 1.5rem;
    grid-template-areas: "name text pfeil";
    column-gap: var(--s-5);
    align-items: baseline;
  }
  .leistungen-liste--bilder > li {
    grid-template-columns: 10rem minmax(0, 0.9fr) minmax(0, 1.1fr) 1.5rem;
    grid-template-areas: "bild name text pfeil";
    align-items: center;
  }
}

/* Stellen als Register wie die Leistungen (KRITIK-c Nr. 8): kein 3er-
   Kartenraster. Titel in Newsreader links, Eckdaten rechts; hat eine Zeile
   nur den einen Link im Titel, ist sie als Ganzes klickbar und trägt rechts
   den Winkel. Gilt auch für .stellen--zeilen (job-seite.php). */
.stellen { display: block; max-width: 70rem; border-bottom: 1px solid var(--line); }
.stelle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem var(--s-5);
  padding: var(--s-3) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.sek--flaeche .stelle { background: none; border-color: var(--line-strong); }
.stellen--zeilen .stelle:last-child { border-bottom: 0; }
.stelle > * + * { margin-top: 0; }
.stelle h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.85vw, 1.95rem);
  font-weight: 440;
  line-height: 1.14;
  letter-spacing: -0.01em;
}
.stelle h3 a { display: inline; min-height: 0; color: var(--text); text-decoration: none; }
.stelle > p:not(.klein) { color: var(--muted); max-width: 54ch; }
.stelle .klein { color: var(--muted); font-stretch: 94%; }
.stelle .stellen-fakten { margin-top: var(--s-1); }
.stelle > p > a { font-weight: 600; }
.stelle:not(:has(dl, p a)) { padding-right: 2.5rem; }
.stelle:not(:has(dl, p a)) h3 a::after { content: ""; position: absolute; inset: 0; }
.stelle:not(:has(dl, p a))::after {
  content: "";
  position: absolute; right: 0.5rem; top: 50%;
  width: 0.6rem; height: 0.6rem;
  border-top: 2px solid var(--accent-fill);
  border-right: 2px solid var(--accent-fill);
  transform: translateY(-50%) rotate(45deg);
  transition: transform var(--dauer) var(--ease-signatur);
  pointer-events: none;
}
.stelle:not(:has(dl, p a)):hover { background: linear-gradient(90deg, transparent, var(--tint-weak) 70%); }
.stelle:not(:has(dl, p a)):hover h3 a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.stelle:not(:has(dl, p a)):hover::after { transform: translate(4px, -50%) rotate(45deg); }
@media (min-width: 56em) {
  .stelle { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr); row-gap: 0; align-items: baseline; }
  .stelle > h3 { grid-column: 1; grid-row: 1 / span 9; }
  .stelle > :not(h3) { grid-column: 2; }
  .stelle > :not(h3) + :not(h3) { margin-top: 0.4rem; }
}
.stellen-schluss { color: var(--muted); }
.stellen-schluss a { font-weight: 600; }

/* Team, Kontaktwege, Karte */
.team { margin: 0; }
.kanaele { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--s-1); }
.kanal {
  min-height: 64px;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border-color: var(--line-strong);
  border-radius: var(--radius);
}
.kanal .ico { width: 1.5rem; height: 1.5rem; color: var(--accent-fill); }
.kanal b { font-weight: 620; font-stretch: 94%; }
.kanal:hover { border-color: var(--accent-fill); background: color-mix(in oklch, var(--accent-fill) 4%, var(--bg)); }
.karte .klein { max-width: 60ch; color: var(--muted); }
.karte iframe { border-radius: var(--radius); }

/* ---------- 7b. Bausteine des Feinschliffs (BAUANLEITUNG §5, 30.09.2026) ----------
   Mechanik in basis.css 11b, hier die Gestalt in der Buchsprache. */

/* Kennwerte: die Zahl als große, leichte Newsreader-Ziffer in Marine (wie die
   Schritt-Ziffern), darunter Erklärung und Quelle — eine Tabelle im Anhang. */
/* Anordnung nach der Breite des Blocks selbst, nicht nach dem Viewport
   (Flex mit Schwellen-Basis, kein Media Query; NACHKRITIK-c, niedrig):
   - in einem .split (neben dem Einwand-Kasten, Text neben Foto) und unter
     34rem Blockbreite (mobil) stehen die Werte untereinander, jede Zahl in
     voller Größe;
   - drei Werte in einem Block unter 54rem (Satzspiegel rechts, 717 px bei
     1440) als 2 + 1: der dritte über die volle Breite — kein verwaister Wert
     mehr neben einer leeren Zelle. Der dritte, weil dort die langen Werte
     stehen („0,035 W/(m·K)" auf Dachgauben brach bei 1024 px sonst um);
   - sonst nebeneinander, mindestens 15rem je Wert. */
.kennwerte { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); }
.kennwerte > .kennwert { flex: 1 1 max(15rem, calc((34rem - 100%) * 999)); }
.split .kennwerte > .kennwert { flex-basis: 100%; }
.kennwerte:has(> :nth-child(3):last-child) > .kennwert:last-child { flex-basis: max(15rem, calc((54rem - 100%) * 999)); }
* + .kennwerte { margin-top: var(--s-4); }
.kennwerte + * { margin-top: var(--s-4); }
/* Die Zahl passt sich der Breite ihrer Spalte an (Container-Einheit): lange
   Werte wie „λ ≤ 0,040 W/(m·K)" hängen per U+00A0 zusammen und sprengten bei
   1280 px die Seite (Gate 30.09.2026, scrollX 65). Seit der Abnahme-Runde
   17,5cqi statt 14cqi: Ab 253 px Spaltenbreite (vier Werte nebeneinander,
   Startseite 1440) ist die Zahl nicht mehr kleiner als die H2 (44 px). Der
   λ-Wert (Schiefer) steht neben dem Einwand-Kasten in einem .split und damit
   immer untereinander in voller Breite (höchstens 568 px Block). */
.kennwert { container-type: inline-size; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; padding-top: var(--s-3); border-top: 1px solid var(--line-strong); }
.kennwert dt {
  font-family: var(--disp);
  font-size: min(var(--fs-wert), 17.5cqi);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--accent-text);
}
.kennwert dd { font-size: 1rem; line-height: 1.5; max-width: 36ch; }
.kennwert dd .quelle { font-size: var(--fs-klein); }

/* Merksatz: der Kern einer Sektion in der Buchstimme — Newsreader, größer,
   über einer kurzen Marine-Linie. Kein Zitat, keine Anführungszeichen. */
.merksatz {
  position: relative;
  max-width: 32ch;
  padding: var(--s-2) 0 0;
  border: 0;
  font-family: var(--disp);
  font-size: var(--fs-merk);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.008em;
  color: var(--text);
}
.merksatz::before { content: ""; position: absolute; top: 0; left: 0; width: 2.75rem; border-top: 2px solid var(--accent-fill); }
* + .merksatz { margin-top: var(--s-4); }
.merksatz + * { margin-top: var(--s-4); }
.kasten .merksatz, .split .merksatz { max-width: 34ch; }

/* Weiter-Weg: eine ruhige Link-Zeile; der Winkel kommt aus basis.css. */
.weiter-link { font-size: 1rem; color: var(--muted); }
.weiter-link a { font-weight: 600; font-stretch: 94%; color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.weiter-link a:hover { text-decoration-color: currentColor; }
/* Leichter CTA ('art' => 'leicht'): Satz in der Buchstimme, dann der Link */
.cta-leicht { font-family: var(--disp); font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem); color: var(--text); }
.cta-leicht a, .cta-leicht-oder { font-family: var(--sans); font-size: 1rem; }
.cta-leicht a.tel-link { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* Bildband: eine Tafel über die volle Breite, ohne Schuppen-Ecke (kein Text
   daneben, zu dem sie zeigen könnte). */
.bildband img { background: var(--bg-2); }
.bildband > figcaption { padding-top: 0.75rem; font-stretch: 92%; line-height: 1.45; }
.sek > .bildband:not(:first-child) { margin-top: var(--s-6); }
.sek > .bildband:not(:last-child) { margin-bottom: var(--s-6); }

/* Text neben großem Foto: das Foto folgt beim Lesen (basis: sticky ab 56em) */
.split--bild { column-gap: var(--s-6); }
.split--bild > .stapel > h2 + * { margin-top: var(--s-2); }

/* Material-Zeile aus material_html(): Stichworte als Einheiten */
.material .material-teil { margin-right: 0.15em; }

/* ---------- 8. CTA ---------- */
/* Weiter-Zeile: leichte Fußnote unter jeder Sektion. Satz links mit kleiner
   Schuppe, rechts Knopf, Telefon ohne Rahmen, Microcopy. Keine Tafel. */
.cta-zeile {
  /* Flex mit Umbruch statt fester Spalten: in schmalen Spalten (Satzspiegel,
     Text neben Foto) rutschen die Knöpfe unter den Satz, statt ihn auf
     100 px zusammenzudrücken. Die Ausrichtung folgt der eigenen Breite. */
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.cta-weg { flex: 1 1 20rem; min-width: 0; }
.cta-tat { flex: 0 1 auto; min-width: 0; }
.cta-zeile > * + * { margin-top: 0; }
.cta-weg > * + * { margin-top: 0.35rem; }
.cta-titel {
  font-family: var(--disp);
  font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
  font-weight: 420;
  line-height: 1.28;
  letter-spacing: -0.006em;
  max-width: 38ch;
  text-wrap: balance;
  color: var(--text);
}
.cta-text { color: var(--muted); max-width: 54ch; margin-top: 0.35rem; }
.cta-tat { display: grid; gap: 0.35rem; justify-items: start; }
@container (min-width: 50rem) {
  .cta-zeile:not(.cta-zeile--knapp) .cta-tat { justify-items: end; text-align: right; }
}
.cta-zeile .btn--sekundaer { border-color: transparent; background: transparent; padding-inline: 0.4rem; }
.cta-zeile .btn--sekundaer > span { border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
.cta-zeile .btn--sekundaer:hover { background: transparent; }
.cta-zeile .btn--sekundaer:hover > span { border-bottom-color: var(--accent-fill); }
.cta-zeile.cta-zeile--knapp { display: block; }

/* Schlusstafel: Schiefer mit Kreide-Schrift, eine Ecke im Schuppen-Bogen */
.cta-band { padding-block: var(--s-6); background: transparent; }
.sek--flaeche + .cta-band { padding-top: var(--s-6); }
.cta-tafel {
  --grund: var(--text);
  position: relative;
  padding: var(--s-6) var(--s-5) var(--s-5);
  /* Ecke oben rechts ohne Radius: sonst ließ die Maske dort 1 px stehen (KRITIK-c Nr. 15) */
  border-radius: var(--radius) 0 var(--radius) var(--radius);
  background: var(--text);
  /* Schiefer-Glanz zur unteren Ecke: Innenschatten statt Verlauf (axe misst so den echten Grund) */
  box-shadow: inset -14rem -12rem 18rem -8rem color-mix(in oklch, var(--accent-fill) 26%, transparent);
  color: var(--bg);
  -webkit-mask: var(--schuppe-or) right -2px top -2px / clamp(4.5rem, 14%, 10rem) auto no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: var(--schuppe-or) right -2px top -2px / clamp(4.5rem, 14%, 10rem) auto no-repeat, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.cta-tafel > * + * { margin-top: var(--s-3); }
.cta-tafel h2 { color: var(--bg); font-size: clamp(2rem, 1.5rem + 2.1vw, 3.375rem); max-width: 18ch; }
.cta-tafel .cta-text { color: color-mix(in oklch, var(--bg) 86%, var(--text)); max-width: 56ch; font-size: var(--fs-lead); line-height: 1.5; }
.cta-tafel .cta-tat { display: grid; gap: 0.6rem; justify-items: start; margin-top: var(--s-4); }
.cta-tafel .btn--primaer { background: var(--bg); color: var(--text); border-color: var(--bg); }
.cta-tafel .btn--primaer:hover { background: color-mix(in oklch, var(--bg) 88%, var(--accent-fill)); box-shadow: 0 0 0 5px color-mix(in oklch, var(--bg) 18%, transparent); }
.cta-tafel .btn--sekundaer { color: var(--bg); border-color: color-mix(in oklch, var(--bg) 55%, transparent); }
.cta-tafel .btn--sekundaer .ico { color: var(--bg); }
.cta-tafel .btn--sekundaer:hover { border-color: var(--bg); background: color-mix(in oklch, var(--bg) 8%, transparent); }
.cta-tafel .micro { color: color-mix(in oklch, var(--bg) 80%, var(--text)); }
.cta-tafel a:not(.btn) { color: var(--bg); }
.cta-tafel :focus-visible { outline-color: var(--bg); }

/* ---------- 9. Formular ---------- */
.formular { gap: var(--s-3); padding: var(--s-4); background: var(--bg-2); border-radius: var(--radius); }
.sek--flaeche .formular { background: var(--bg); }
.feld > label, .feld > legend { font-size: 1rem; font-weight: 620; font-stretch: 94%; color: var(--text); line-height: 1.35; }
.feld > label .klein, .feld > legend .klein { font-weight: 440; color: var(--muted); }
.feld.ist-pflicht > label .klein { color: var(--accent-text); font-weight: 620; }
.feld input:not([type="radio"]):not([type="checkbox"]),
.feld select,
.feld textarea {
  min-height: 50px;
  padding: 0.7rem 0.9rem;
  background-color: var(--bg);
  border-color: var(--field-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dauer) var(--ease-signatur);
}
.feld select { appearance: none; padding-right: 2.75rem; background-image: var(--winkel); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 20px; }
.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 input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--accent-fill); }
.feld [aria-invalid="true"]:not([type="radio"]) { border-color: var(--err); border-width: 2px; background-color: color-mix(in oklch, var(--err) 5%, var(--bg)); }
.wahl { gap: 0 var(--s-3); }
.wahl label { font-weight: 500; }
.wahl input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent-fill); }
.feld-hinweis { font-stretch: 94%; }
.feld-fehler { font-weight: 620; line-height: 1.4; }
.fehler-box { border-radius: var(--radius); background: color-mix(in oklch, var(--err) 6%, var(--bg)); }
.fehler-box h2 { font-size: var(--fs-h3); color: var(--err); max-width: none; }
.fehler-box li + li { margin-top: 0.25rem; }
.fehler-box a { font-weight: 560; }
.hinweis { border-radius: var(--radius); }
.hinweis--ok { background: color-mix(in oklch, var(--ok) 7%, var(--bg)); border-width: 1.5px; }
.hinweis h2, .hinweis h3 { font-size: var(--fs-h3); }
.formular .btn--primaer { justify-self: start; }
.formular-note { max-width: 60ch; }

/* ---------- 10. Fuß, Dock, Vorschau ---------- */
.site-fuss { padding-block: var(--s-6) var(--s-4); }
.site-fuss::before {
  -webkit-mask: var(--deckbild) 0 0 / 40px 48px repeat, radial-gradient(ellipse 55% 95% at 100% 100%, #000 0%, rgb(0 0 0 / 0.5) 36%, transparent 72%);
  -webkit-mask-composite: source-in;
  mask: var(--deckbild) 0 0 / 40px 48px repeat, radial-gradient(ellipse 55% 95% at 100% 100%, #000 0%, rgb(0 0 0 / 0.5) 36%, transparent 72%);
  mask-composite: intersect;
}
.fuss-raster { gap: var(--s-4) var(--s-5); }
.fuss-spalte h3 {
  font-family: var(--sans);
  font-size: var(--fs-klein);
  font-weight: 620;
  font-stretch: var(--wdth-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.fuss-spalte address { line-height: 1.55; }
.fuss-spalte address b { font-family: var(--disp); font-size: 1.2rem; font-weight: 520; }
/* Telefon und E-Mail im Fuß: je eine eigene Zeile mit 44 px Trefferfläche
   (wie .kanal), nebeneinander statt übereinander gestülpt (Abnahme P4-2).
   Der Zeilenumbruch nach dem Link ist dann überflüssig: ein <br> allein
   zwischen zwei Blöcken erzeugte eine leere Zeile. */
.fuss-spalte address > a:is([href^="tel:"], [href^="mailto:"]) {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  overflow-wrap: anywhere;
}
.fuss-spalte address > a:is([href^="tel:"], [href^="mailto:"]) + br { display: none; }
.fuss-spalte a { color: var(--text); text-decoration-color: var(--line-strong); }
.fuss-spalte li a { text-decoration: none; }
.fuss-spalte a:hover { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent-fill); }
.fuss-unten { position: relative; border-top: 0; }
.fuss-unten::before {   /* .wrap.fuss-unten: eine Randlinie liefe durch das Innenpolster */
  content: "";
  position: absolute; top: 0;
  left: max(1rem, var(--s-3)); right: max(1rem, var(--s-3));
  border-top: 1px solid var(--line-strong);
}
.fuss-unten p { margin: 0; }

.dock {
  background: color-mix(in oklch, var(--bg) 96%, transparent);
  border-top-color: var(--line-strong);
  box-shadow: 0 -10px 28px -18px color-mix(in oklch, var(--text) 45%, transparent);
}
.dock-btn { font-size: 0.9375rem; font-weight: 620; font-stretch: var(--wdth-knopf); white-space: nowrap; gap: 0.4rem; border-radius: var(--radius); }
.dock-btn--zweit .ico { color: var(--accent-fill); }

.vorschau { font-size: var(--fs-klein); padding-block: 0.35rem; }
.vorschau p { margin: 0; }
.vorschau-varianten a { min-height: 30px; }

/* ---------- 11. Recht, 404 ---------- */
.recht h2 { font-size: var(--fs-h3); font-weight: 520; max-width: none; margin-top: 1.9em; }
.recht h3 { font-size: 1.2rem; }
.recht > .warnung:first-child + h2 { margin-top: var(--s-4); }
.warnung { max-width: var(--wrap-text); border-radius: 0 var(--radius) var(--radius) 0; }
.seite-fehler .shero h1 { max-width: 16ch; }

/* ---------- 12. Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .deck-reihen { display: none; }
  .ll-pfeil { transition: none; }
}