/* ══════════════════════════════════════════════════════════════════════════
   Zimmerei Gerber — Stylesheet

   Schlicht schwarz-weiß, eckig, traditionell (Auftrag 16.10.2026):
   Schwarz wie die Kluft der Zimmerleute, Weiß wie das Hemd darunter. Raster
   aus Balken (2 px) wie ein Fachwerk, eine serifenlose Familie (Helvena,
   seit 22.10.2026) mit Hierarchie über Größe, Gewicht und Sperrung.
   Rund ist nur das Siegel des Betriebs.

   Aufbau (ein Block je Baustein, Reihenfolge = Kaskade):
      1  Basis                 9  Leistungen (Karten, Kacheln)
      2  Hilfen               10  Bildband
      3  Knöpfe               11  Arbeitsweise
      4  Kopfleiste           12  Über uns
      5  Bühne                13  Referenzen
      6  Kurzleiste           14  Einsatzgebiet · 15 FAQ · 16 Kontakt
      7  Bänder, Köpfe        17  Formular · 18 Datenblatt · 19 Fußzeile
      8  Die Zimmerei         20  Rechtstexte · 21 Platzhalter
                              22  Bewegung · 23 Bewegung reduzieren

   Zwei Regeln prüft pruefen.py maschinell: kein border-radius über 0 und
   nur Grautöne (Ausnahme: --offen-* der Platzhalter).

   Regeln aus früheren Portal-Sites:
   • Wer eine Regel hinten anhängt, gibt ihr DIESELBEN Grenzen (@media) wie
     die Regel, die sie ergänzt.
   • In Kommentaren nie Stern und Schrägstrich direkt hintereinander
     schreiben — das beendet den Kommentar, der Rest wird zu CSS und die
     nächste Regel fällt weg (Schwesterseite; hier am 16.10. selbst passiert).

   Umbruch Navigation: 1060 px (auch teile.NAV_UMBRUCH und main.js).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1  Basis ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1.25rem);
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--gr-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }

h1, h2, h3, h4 {
  font-weight: 800;              /* Helvena Extrabold */
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.55em;
  text-wrap: balance;
}
h1 { font-size: var(--gr-h1); }
h2 { font-size: var(--gr-h2); }
h3 { font-size: var(--gr-h3); }

/* Überschriften, die als ETIKETT gesetzt sind (Versalien, gesperrt):
   dieselbe Familie, Halbfett statt Extrabold. */
.fuss__titel, .werdegang__titel { font-weight: 600; }

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

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

address { font-style: normal; }

.ic { width: 1.2em; height: 1.2em; flex: none; }

/* Lange Komposita („Dachsanierung", „Datenschutzerklärung") dürfen auf
   schmalen Telefonen trennen statt überzulaufen. */
h1, h2, h3, .leistung__titel, .frage__titel { hyphens: auto; overflow-wrap: break-word; }

/* ── 2  Hilfen ────────────────────────────────────────────────────────── */
.inhalt {
  width: min(100% - 2 * var(--rand), var(--inhalt-breite));
  margin-inline: auto;
}

.nur-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.sprungmarke {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--weiss);
  color: var(--schwarz);
  font-weight: 600;
  border: var(--balken) solid var(--schwarz);
}
.sprungmarke:focus { top: 1rem; }

/* Kleine Kopfzeile über einer Überschrift: Versalien, gesperrt, Balken davor */
.zeile {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.25rem;
  font-size: var(--gr-etikett);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.2;
}
.zeile::before {
  content: '';
  flex: none;
  width: 2.5rem;
  height: var(--balken);
  background: currentColor;
}
.zeile--dunkel { color: var(--grau-300); }

/* Hervorgehobenes Wort in Überschriften: es liegt auf einem Balken.
   `skip-ink` muss AUS sein. Mit Helvena Extrabold (seit 21.10.2026) reicht
   die Unterlänge des „g" unter den Balken, und `auto` schnitt ihn dort
   auseinander — aus „trägt" wurde ein Balken in zwei Stücken. Betroffen sind
   die drei hervorgehobenen Wörter mit g: trägt, Verbindungen, gebaut.
   Der Abstand liegt jetzt knapp unter der Unterlänge, damit der Balken nicht
   im Buchstaben klebt. */
.hervor {
  text-decoration: underline;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.19em;
  text-decoration-skip-ink: none;
}

.leise { display: block; color: var(--text-leise); }

/* Marke „Beispielbild" auf Archivfotos */
.bildmarke {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  z-index: 2;
  padding: 0.2rem 0.55rem 0.25rem;
  background: var(--weiss);
  color: var(--schwarz);
  border: 1px solid var(--schwarz);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

/* ── 3  Knöpfe ────────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 3.25rem;
  padding: 0.8rem 1.35rem;
  border: var(--balken) solid currentColor;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dauer), color var(--dauer), border-color var(--dauer);
}
.knopf .ic { width: 1.15em; height: 1.15em; transition: transform var(--dauer); }
.knopf:hover .ic { transform: translateX(3px); }

.knopf--hell { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); }
.knopf--hell:hover { background: transparent; color: var(--weiss); }
.knopf--umriss-hell { background: transparent; color: var(--weiss); border-color: var(--weiss); }
.knopf--umriss-hell:hover { background: var(--weiss); color: var(--schwarz); }
.knopf--dunkel { background: var(--schwarz); color: var(--weiss); border-color: var(--schwarz); }
.knopf--dunkel:hover { background: var(--weiss); color: var(--schwarz); }
.knopf--umriss { background: transparent; color: var(--schwarz); border-color: var(--schwarz); }
.knopf--umriss:hover { background: var(--schwarz); color: var(--weiss); }

/* Auf dunklem Grund ist der Fokusrahmen weiß */
.kopf, .buehne, .band--dunkel, .fuss { --fokus: var(--weiss); }

/* ── 4  Kopfleiste ────────────────────────────────────────────────────── */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--schwarz);
  color: var(--weiss);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dauer);
}
.kopf.gescrollt { border-bottom-color: var(--grau-700); }

.kopf__zeile {
  width: min(100% - 2 * var(--rand), var(--inhalt-breite));
  margin-inline: auto;
  min-height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--weiss);
  text-decoration: none;
  margin-right: auto;
}
.marke__siegel { width: 3.5rem; height: 3.5rem; }
.marke__text { display: flex; flex-direction: column; line-height: 1; }
.marke__name { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.005em; }
.marke__zusatz {
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--grau-300);
}

.hauptnav__liste {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hauptnav__link {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--weiss);
}
.hauptnav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--balken);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dauer);
}
.hauptnav__link:hover::after,
.hauptnav__link.ist-aktiv::after { transform: scaleX(1); }
.hauptnav__nur-mobil { display: none; }

.kopf__knopf { min-height: 2.875rem; padding-block: 0.55rem; }

.menuknopf {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.875rem;
  padding: 0.5rem 0.85rem;
  background: transparent;
  color: var(--weiss);
  border: 1px solid var(--grau-400);
  font: 600 1rem/1 var(--schrift);
  cursor: pointer;
}
.menuknopf__linien { position: relative; width: 1.25rem; height: 0.875rem; }
.menuknopf__linien,
.menuknopf__linien::before,
.menuknopf__linien::after,
.menuknopf__linien span {
  display: block;
}
.menuknopf__linien::before,
.menuknopf__linien::after,
.menuknopf__linien span {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: var(--balken);
  background: currentColor;
  transition: transform var(--dauer), opacity var(--dauer);
}
.menuknopf__linien::before { top: 0; }
.menuknopf__linien span { top: calc(50% - 1px); }
.menuknopf__linien::after { bottom: 0; }
.kopf.ist-offen .menuknopf__linien::before { transform: translateY(6px) rotate(45deg); }
.kopf.ist-offen .menuknopf__linien::after { transform: translateY(-6px) rotate(-45deg); }
.kopf.ist-offen .menuknopf__linien span { opacity: 0; }

@media (max-width: 1060px) {
  .menuknopf { display: inline-flex; }
  .kopf__knopf { display: none; }
  .hauptnav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--schwarz);
    border-top: 1px solid var(--grau-700);
    border-bottom: var(--balken) solid var(--weiss);
    display: none;
    max-height: calc(100dvh - var(--kopf-hoehe));
    overflow-y: auto;
  }
  .kopf.ist-offen .hauptnav { display: block; }
  .hauptnav__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(100% - 2 * var(--rand), var(--inhalt-breite));
    margin-inline: auto;
    padding: 0.5rem 0 1.5rem;
  }
  .hauptnav__liste > li { border-bottom: 1px solid var(--grau-700); }
  .hauptnav__link { display: block; padding: 1rem 0; font-size: 1.375rem; }
  .hauptnav__link::after { display: none; }
  .hauptnav__link.ist-aktiv { text-decoration: underline; text-decoration-thickness: var(--balken); }
  .hauptnav__nur-mobil { display: block; border-bottom: 0 !important; padding-top: 1.25rem; }
  .hauptnav__nur-mobil .knopf { width: 100%; }
  html.menue-offen { overflow: hidden; }

  /* Ohne JavaScript: kein Menüknopf, die Liste steht offen unter der Leiste */
  .kein-js .menuknopf { display: none; }
  .kein-js .hauptnav { display: block; position: static; border-bottom: 0; }
  .kein-js .kopf { position: relative; }
  .kein-js .kopf__zeile { flex-wrap: wrap; }
  .kein-js .hauptnav { flex-basis: 100%; }
}
@media (max-width: 420px) {
  .marke__siegel { width: 3rem; height: 3rem; }
  .marke__name { font-size: 1.1875rem; }
  .marke__zusatz { font-size: 0.625rem; letter-spacing: 0.16em; }
  /* Nur optisch verstecken, NIE display:none — sonst hat der Knopf keinen
     Namen mehr (Lighthouse button-name, kostet Agentic Browsing; gemessen
     16.10.2026 bei 412 px). */
  .menuknopf__text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .menuknopf { padding-inline: 0.7rem; }
}

/* ── 5  Bühne ─────────────────────────────────────────────────────────── */
.buehne {
  position: relative;
  background: var(--schwarz);
  color: var(--weiss);
  padding-top: clamp(2.5rem, 2rem + 4vw, 6rem);
  overflow: hidden;
}
/* Feines Raster wie Bleistiftlinien auf dem Abbundplatz — nur Schmuck */
.buehne::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%;
  pointer-events: none;
}

.buehne__raster {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: end;
}

.buehne__text { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.buehne__kopf { margin-bottom: 1.75rem; }

.buehne__titel {
  font-size: var(--gr-hero);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}
.buehne__name {
  display: block;
  margin-bottom: 0.55em;
  font-size: clamp(1.3125rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
/* Zeilenmaske: jede Zeile gleitet beim Laden aus ihrer Maske (§22) */
.buehne__zeile {
  display: block;
  overflow: hidden;
  /* Platz unter der Grundlinie für Unterlängen und den Balken unter „trägt" */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
.buehne__zeile > span { display: inline-block; }

.buehne__absatz {
  max-width: 34em;
  margin-bottom: 2.25rem;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  line-height: 1.6;
  color: var(--grau-300);
}
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.buehne__foto { position: relative; align-self: end; }
.buehne__rahmen { position: relative; }
/* Versetzter Rahmen hinter dem Foto — wie ein Passepartout */
.buehne__rahmen::before {
  content: '';
  position: absolute;
  inset: -1rem 1rem 1rem -1rem;
  border: 1px solid var(--grau-400);
  pointer-events: none;
}
.buehne__bild { position: relative; }
.buehne__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.buehne__unterschrift {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 2;
  padding: 0.55rem 0.9rem;
  background: var(--schwarz);
  color: var(--grau-300);
  font-size: var(--gr-klein);
  line-height: 1.35;
}
.buehne__person { color: var(--weiss); font-weight: 600; }

/* Titelmontage (seit 22.10.2026): Moritz Gerber freigestellt vor einem
   Holzrahmen, Ränder laufen ins Transparente aus. Auf Wunsch des Auftrag-
   gebers OHNE helle Fläche und Rahmen direkt auf Schwarz (WebP mit Trans-
   parenz). Die Figur steht unten und läuft bis an den rechten Fensterrand
   (Rand = halber Abstand zwischen Fenster und Inhaltsbreite). Keine Über-
   lappung mit dem Text: Links im Bild steht heller Holzrahmen. */
/* Nur breit: :has() zählt zwei Klassen und schlüge sonst die einspaltige
   Regel für Telefone (gemessen 22.10.2026: Bühne blieb bei 390 px zweispaltig). */
@media (min-width: 861px) {
  .buehne__raster:has(.buehne__foto--montage) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.buehne__foto--montage {
  margin-right: calc((min(100vw - 2 * var(--rand), var(--inhalt-breite)) - 100vw) / 2);
}
.buehne__foto--montage .buehne__rahmen::before { display: none; }
.buehne__foto--montage .buehne__bild img { aspect-ratio: auto; object-fit: contain; }
.buehne__foto--montage .buehne__unterschrift {
  right: calc((100vw - min(100vw - 2 * var(--rand), var(--inhalt-breite))) / 2);
  background: transparent;
  padding: 0 0 1rem;
}
@media (max-width: 860px) {
  /* Darunter: ganze Breite, quadratischer Ausschnitt, links bei 28 %
     verankert — die Figur reicht von 14,5 % (Hand) bis 69 % der Bildbreite. */
  /* Zwei Klassen: Die älteren .buehne__foto-Regeln (Porträt) stehen weiter
     hinten und gewännen sonst bei gleicher Spezifität. */
  .buehne__foto.buehne__foto--montage { width: min(100% + 2 * var(--rand), 34rem); justify-self: end;
                                        margin-inline: 0 calc(-1 * var(--rand)); }
  .buehne__foto--montage .buehne__bild img { aspect-ratio: 1 / 1; object-fit: cover;
                                             object-position: 28% 100%; }
  .buehne__foto--montage .buehne__unterschrift { right: var(--rand); }
}

@media (max-width: 860px) {
  .buehne__raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .buehne__text { padding-bottom: 3rem; }
  .buehne__foto { width: min(100%, 30rem); justify-self: end; margin-right: calc(-1 * var(--rand)); }
  .buehne__rahmen::before { inset: -0.75rem 0.75rem 0.75rem -0.75rem; }
}
@media (max-width: 520px) {
  .buehne__foto { width: calc(100% + var(--rand)); }
  .buehne__knoepfe .knopf { flex: 1 1 100%; }
  /* „Meisterbetrieb · Dachstuhl · Holzbau" in EINER Zeile: in Versalien
     bei 12 px und 0,12 em 283 px breit (Aufnahme 22.10.2026), verfügbar bei
     390 px Fenster 350 px — ohne den Strich davor (mit ihm 337 px, das
     bräche bei 360 px). Noch schmaler bricht sie hinter einem Punkt. */
  .buehne__kopf { font-size: 0.75rem; letter-spacing: 0.12em; }
  .buehne__kopf::before { display: none; }
}

/* ── 6  Kurzleiste ────────────────────────────────────────────────────── */
.kurzleiste {
  background: var(--weiss);
  border-bottom: var(--balken) solid var(--schwarz);
}
.kurzleiste__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block: 0;
  padding: 0;
  list-style: none;
}
.kurzleiste__feld {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.4rem 1.25rem 1.5rem;
  border-left: 1px solid var(--linie);
}
.kurzleiste__feld:first-child { border-left: 0; padding-left: 0; }
.kurzleiste__ic { width: 1.6rem; height: 1.6rem; margin-top: 0.1rem; }
.kurzleiste__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.kurzleiste__titel {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-leise);
  line-height: 1.2;
}
.kurzleiste__wert { font-size: 1.0625rem; line-height: 1.35; overflow-wrap: anywhere; }
.kurzleiste__wert a { text-decoration: none; }
.kurzleiste__wert a:hover { text-decoration: underline; }

@media (max-width: 1000px) {
  .kurzleiste__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kurzleiste__feld:nth-child(odd) { border-left: 0; padding-left: 0; }
  .kurzleiste__feld:nth-child(n + 3) { border-top: 1px solid var(--linie); }
}
@media (max-width: 520px) {
  .kurzleiste__liste { grid-template-columns: minmax(0, 1fr); }
  .kurzleiste__feld { border-left: 0; padding-left: 0; }
  .kurzleiste__feld:nth-child(n + 2) { border-top: 1px solid var(--linie); }
}

/* ── 7  Bänder und Abschnittsköpfe ────────────────────────────────────── */
.band { padding-block: var(--band-abstand); }
.band--dunkel { background: var(--schwarz); color: var(--weiss); --text-leise: var(--grau-300); --linie: var(--grau-700); }
.band--grau { background: var(--grau-50); }

.abschnittskopf { max-width: 48rem; margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
.abschnitt__titel { font-size: var(--gr-h2); letter-spacing: -0.015em; }
.abschnittskopf__text {
  max-width: 36em;
  margin: 0;
  font-size: 1.1875rem;
  color: var(--text-leise);
}

/* ── 8  Die Zimmerei ──────────────────────────────────────────────────── */
.vorstellung__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
}
.vorstellung__absatz { max-width: 34em; }
.vorstellung__absatz:last-of-type { margin-bottom: 2.5rem; }

.merkmale {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--balken) solid var(--schwarz);
}
.merkmal {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.25rem 1rem 0 0;
}
.merkmal + .merkmal { padding-left: 1rem; border-left: 1px solid var(--linie); }
.merkmal__ic { width: 2rem; height: 2rem; margin-bottom: 0.5rem; }
.merkmal__titel { font-weight: 600; line-height: 1.25; }
.merkmal__text { font-size: var(--gr-klein); color: var(--text-leise); line-height: 1.45; }

/* Die Zeichnung als Tafel */
.tafel {
  border: var(--balken) solid var(--schwarz);
  background: var(--weiss);
}
.tafel__svg {
  width: 100%;
  height: auto;
  padding: clamp(0.75rem, 2.5vw, 1.75rem) clamp(0.5rem, 2vw, 1.5rem) 0;
  overflow: visible;
}
.tafel__svg .z { fill: none; stroke: var(--schwarz); stroke-width: 1.6; stroke-linejoin: miter; }
.tafel__svg .z--fein { stroke-width: 1; }
.tafel__svg .z--holz { fill: var(--weiss); }   /* verdeckt, was dahinter liegt */
.tafel__wort {
  font-family: var(--schrift);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  fill: var(--schwarz);
}
.tafel__unterschrift {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 0.5rem;
  padding: 0.9rem clamp(1rem, 2.5vw, 1.5rem) 1rem;
  border-top: 1px solid var(--schwarz);
  font-size: var(--gr-klein);
  color: var(--text-leise);
  line-height: 1.4;
}
.tafel__titel {
  color: var(--schwarz);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--gr-etikett);
  letter-spacing: 0.12em;
}
/* „Noch einmal aufbauen" — nur mit JavaScript und ohne „Bewegung
   reduzieren" sichtbar (main.js nimmt hidden weg). */
.tafel__nochmal {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--schwarz);
  font: 600 var(--gr-etikett)/1.2 var(--schrift);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.tafel__nochmal[hidden] { display: none; }
.tafel__nochmal-ic { width: 1rem; height: 1rem; transition: transform var(--dauer) ease; }
.tafel__nochmal:hover .tafel__nochmal-ic { transform: translateX(3px); }

@media (max-width: 960px) {
  .vorstellung__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .merkmale { grid-template-columns: minmax(0, 1fr); }
  .merkmal { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem;
             padding: 1rem 0; border-bottom: 1px solid var(--linie); }
  .merkmal + .merkmal { padding-left: 0; border-left: 0; }
  .merkmal__ic { margin: 0; width: 1.6rem; height: 1.6rem; align-self: center; }
  .merkmal__text { flex-basis: 100%; }
}

/* ── 9  Leistungen: Karten und Kacheln ───────────────────────────────── */
/* [Auftrag 22.10.2026] Schwarze Karten mit je einer Zeichnung (grafiken.py),
   keine Ziffern; darunter die Zusatzleistungen als helle Kacheln — sie
   ordnen sich unter: kleiner, hell, Symbol statt Zeichnung.
   Akzent ist WEISS: Die Gestaltung hat keine Buntfarbe (pruefen.py §12). Auf
   den Karten ist weiß das eine Bauteil, um das es geht, und die Leiste oben,
   die beim Überfahren ganz durchläuft. */
.leistungen__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--karten-abstand);
  margin: 0;
  padding: 0;
  list-style: none;
}
.leistungen { --karten-abstand: clamp(0.75rem, 0.45rem + 0.9vw, 1.25rem); }
/* Drei Zeilen je Karte im gemeinsamen Raster (subgrid): Zeichnung, Titel und
   Text beginnen in einer Kartenreihe auf gleicher Höhe, auch wenn ein Titel
   zwei Zeilen braucht („Dachsanierung und Dämmung"). */
.leistung {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding: clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem);
  background: var(--schwarz);
  color: var(--weiss);
}
.leistung__buehne {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  padding: 0.75rem 0 clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
  border-bottom: 1px solid var(--grau-700);
}
/* Akzentleiste auf der Trennlinie: kurz in Ruhe, beim Überfahren ganz.
   Liegt IN der Karte — an der Außenkante sah sie auf weißem Grund wie eine
   ausgeschnittene Ecke aus (Aufnahme 22.10.2026). */
.leistung__buehne::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--weiss);
  transform: scaleX(0.14);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.leistung__bild { width: 100%; height: auto; aspect-ratio: 160 / 100; max-height: 10.5rem; }
.leistung__bild .lb {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5px;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: stroke 0.35s ease;
}
.lb--holz { fill: var(--schwarz); stroke: var(--grau-300); }
.lb--linie { fill: none; stroke: var(--grau-400); }
.lb--akzent { fill: var(--schwarz); stroke: var(--weiss); }
.leistung__bild .lb--akzent { stroke-width: 1.75px; }
.lb--offen { fill: none; }
.leistung__titel { margin: 0 0 0.6rem; color: var(--weiss); font-size: var(--gr-h3); }
.leistung__text { margin: 0; color: var(--grau-300); font-size: 1rem; line-height: 1.55; }

@media (hover: hover) {
  .leistung:hover .leistung__buehne::after { transform: scaleX(1); }
  .leistung:hover .lb--holz { stroke: var(--grau-100); }
  .leistung:hover .lb--linie { stroke: var(--grau-300); }
}

/* Zusatzleistungen: kompakte Kacheln, Symbol im schwarzen Feld */
.weitere { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.weitere__titel {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.25rem;
  font-size: var(--gr-etikett);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.2;
}
.weitere__titel::after { content: ''; flex: 1; height: 1px; background: var(--linie); }
.weitere__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--karten-abstand);
  margin: 0;
  padding: 0;
  list-style: none;
}
.weitere__eintrag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0.25rem 0.9rem;
  padding: 1.1rem 1.15rem 1.2rem;
  background: var(--weiss);
  border: 1px solid var(--grau-200);
  transition: border-color var(--dauer) ease;
}
.weitere__marke {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--schwarz);
  color: var(--weiss);
}
.weitere__ic { width: 1.5rem; height: 1.5rem; }
.weitere__name { font-weight: 600; line-height: 1.25; }
.weitere__text { font-size: 0.875rem; color: var(--text-leise); line-height: 1.45; }
@media (hover: hover) {
  .weitere__eintrag:hover { border-color: var(--schwarz); }
}

@media (max-width: 1100px) {
  .weitere__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .leistungen__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .leistungen__raster { grid-template-columns: minmax(0, 1fr); }
  .leistung__bild { max-height: 9rem; }
  .weitere__liste { grid-template-columns: minmax(0, 1fr); }
}

/* ── 10  Bildband ─────────────────────────────────────────────────────── */
.bildband {
  position: relative;
  background: var(--schwarz);
  color: var(--weiss);
}
.bildband__bild img {
  width: 100%;
  height: clamp(20rem, 12rem + 26vw, 38rem);
  object-fit: cover;
}
.bildband__text {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(4rem, 8vw, 8rem) var(--rand) clamp(1.75rem, 4vw, 3.5rem);
  background: linear-gradient(to top, rgb(0 0 0 / 0.88) 0%, rgb(0 0 0 / 0.7) 60%, rgb(0 0 0 / 0) 100%);
}
@media (max-width: 640px) {
  /* Zwei Zeilen Spruch reichen höher ins Foto — Schleier dort dichter
     (gemessen 390 px: schlechtester Bildpunkt vorher 2,49:1). */
  .bildband__text { background: linear-gradient(to top, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.8) 70%, rgb(0 0 0 / 0) 100%); }
}
.bildband__spruch,
.bildband__satz {
  width: min(100%, var(--inhalt-breite));
  margin-inline: auto;
}
.bildband__spruch {
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.bildband__satz { font-size: 1.125rem; color: var(--grau-300); }
.bildband .bildmarke { left: auto; right: 0.75rem; }

/* ── 11  Arbeitsweise ─────────────────────────────────────────────────── */
.schritte {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.schritt {
  padding-top: 1.5rem;
  border-top: var(--balken) solid var(--weiss);
}
.schritt__nr {
  display: block;
  margin-bottom: 1.75rem;
  font-size: clamp(3rem, 2.4rem + 1.8vw, 4.25rem);
  font-weight: 400;
  line-height: 0.9;
}
.schritt__titel { margin-bottom: 0.6rem; font-size: 1.375rem; }
.schritt__text { margin: 0; color: var(--grau-300); }

@media (max-width: 1000px) {
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .schritte { grid-template-columns: minmax(0, 1fr); }
  .schritt { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; }
  .schritt__nr { grid-row: span 2; margin: 0; font-size: 3rem; }
}

/* ── 12  Über uns ─────────────────────────────────────────────────────── */
.ueber__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
}
.ueber__zeichen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  border: var(--balken) solid var(--schwarz);
  outline: 1px solid var(--schwarz);
  outline-offset: -0.75rem;
}
.ueber__siegel { width: min(100%, 22rem); height: auto; }
.ueber__zeichen-text {
  max-width: 26em;
  text-align: center;
  font-size: var(--gr-klein);
  color: var(--text-leise);
  line-height: 1.45;
}
.ueber__zeichen-titel {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--schwarz);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--gr-etikett);
  letter-spacing: 0.12em;
}
.ueber__text .leise {
  margin-top: 0.35rem;
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25;
}
.ueber__absatz { max-width: 34em; }
/* Zwei Klassen: .datenblatt (§18) steht weiter hinten und setzt margin: 0 */
.datenblatt.ueber__daten { margin: 2rem 0 2.25rem; }

@media (max-width: 960px) {
  .ueber__raster { grid-template-columns: minmax(0, 1fr); }
  .ueber__zeichen { order: 2; }
}

/* Zitat aus dem Fragebogen — Balken links, Antiqua groß */
.zitat {
  margin: 1.75rem 0 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: var(--balken) solid var(--schwarz);
}
.zitat p {
  margin: 0 0 0.4rem;
  font-size: clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.zitat__wer {
  font-size: var(--gr-etikett);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-leise);
}

/* Werdegang: Zeitleiste über die ganze Breite unter „Über uns" */
.werdegang { margin-top: clamp(3rem, 2.5rem + 2.5vw, 5rem); }
.werdegang__titel {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.werdegang__liste {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--balken) solid var(--schwarz);
}
.station {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.25rem 0 0;
}
/* Markierung auf dem Balken: kleines Quadrat, eckig wie alles */
.station::before {
  content: '';
  position: absolute;
  top: calc(-0.4rem - 1px);
  left: 0;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--schwarz);
}
.station__zeit {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1.1;
}
.station__text { font-size: var(--gr-klein); color: var(--text-leise); line-height: 1.45; }

@media (max-width: 1000px) {
  .werdegang__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.5rem; }
}
@media (max-width: 640px) {
  .werdegang__liste { grid-template-columns: minmax(0, 1fr); border-top: 0;
                      border-left: var(--balken) solid var(--schwarz); row-gap: 0; }
  .station { padding: 0 0 1.4rem 1.4rem; }
  .station::before { top: 0.35rem; left: calc(-0.4rem - 1px); }
}

/* ── 13  Referenzen ───────────────────────────────────────────────────── */
.referenzen__hinweis {
  max-width: 44em;
  margin: calc(-1 * clamp(1.5rem, 1rem + 1.5vw, 3rem)) 0 clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding-left: 1rem;
  border-left: var(--balken) solid var(--schwarz);
  font-size: var(--gr-klein);
  color: var(--text-leise);
}
.galerie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.galerie__figur { position: relative; }
.galerie__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.galerie__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-top: 0.85rem;
  border-top: var(--balken) solid var(--schwarz);
  margin-top: 0.85rem;
}
.galerie__art {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-leise);
}
.galerie__titel { font-size: 1.25rem; font-weight: 600; line-height: 1.25; }

@media (max-width: 900px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .galerie { grid-template-columns: minmax(0, 1fr); }
}

/* ── 14  Einsatzgebiet ────────────────────────────────────────────────── */
.region__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem clamp(2.5rem, 6vw, 6rem);
}
/* Seit 22.10.2026 nur Namen [Auftrag: keine Kilometer] — als Schilder, die
   umbrechen; der Betriebssitz schwarz mit Ortszeichen. */
.orte {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ort {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  background: var(--weiss);
  border: 1px solid var(--grau-200);
  font-weight: 600;
  line-height: 1.25;
}
.ort--sitz { background: var(--schwarz); border-color: var(--schwarz); color: var(--weiss); }
.ort__ic { width: 1.1em; height: 1.1em; }

@media (max-width: 960px) {
  .region__raster { grid-template-columns: minmax(0, 1fr); }
}

/* ── 15  FAQ ──────────────────────────────────────────────────────────── */
.faq__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 2rem clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.faq__kopf { position: sticky; top: calc(var(--kopf-hoehe) + 2rem); }
.faq__liste { border-bottom: var(--balken) solid var(--schwarz); }
.frage { border-top: var(--balken) solid var(--schwarz); }
.frage + .frage { border-top-width: 1px; }
.frage__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
}
.frage__kopf::-webkit-details-marker { display: none; }
.frage__titel { margin: 0; font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); line-height: 1.3; }
.frage__zeichen {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--schwarz);
  transition: background-color var(--dauer), color var(--dauer);
}
.frage__zeichen::before,
.frage__zeichen::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 0.9rem;
  height: var(--balken);
  margin: -1px 0 0 -0.45rem;
  background: currentColor;
  transition: transform var(--dauer);
}
.frage__zeichen::after { transform: rotate(90deg); }
.frage[open] .frage__zeichen { background: var(--schwarz); color: var(--weiss); }
.frage[open] .frage__zeichen::after { transform: rotate(0deg); }
.frage__kopf:hover .frage__titel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.frage__antwort { max-width: 40em; margin: 0; padding: 0 3.5rem 1.6rem 0; color: var(--text-leise); }

@media (max-width: 960px) {
  .faq__raster { grid-template-columns: minmax(0, 1fr); }
  .faq__kopf { position: static; }
}
@media (max-width: 520px) {
  .frage__antwort { padding-right: 0; }
}

/* ── 16  Kontakt ──────────────────────────────────────────────────────── */
.kontakt__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 3rem clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.kontakt__raster--einspaltig { grid-template-columns: minmax(0, 1fr); max-width: 48rem; }
.kontakt__absatz { max-width: 32em; color: var(--grau-300); font-size: 1.1875rem; }
.datenblatt.kontakt__daten { margin-top: 2.25rem; }
.kontakt__formular {
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: var(--weiss);
  color: var(--schwarz);
  --fokus: var(--schwarz);
  --text-leise: var(--grau-600);
  --linie: var(--grau-200);
}

@media (max-width: 960px) {
  .kontakt__raster { grid-template-columns: minmax(0, 1fr); }
}

/* ── 17  Formular ─────────────────────────────────────────────────────── */
.kform__felder { margin: 0; padding: 0; border: 0; min-width: 0; }
.kform__felder:disabled { opacity: 0.6; }
.kform__felder:disabled * { cursor: not-allowed; }
.kform__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.kform__feld { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; }
.kform__feld label {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}
.kform__optional { font-weight: 400; font-size: 0.875rem; color: var(--text-leise); }
.kform input[type='text'], .kform input[type='tel'], .kform input[type='email'],
.kform select, .kform textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  font: 400 1.0625rem/1.4 var(--schrift);
  color: var(--schwarz);
  background: var(--weiss);
  border: 1px solid var(--schwarz);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.kform select {
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--schwarz) 50%),
                    linear-gradient(135deg, var(--schwarz) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.85rem) 50%;
  background-size: 0.4rem 0.4rem;
  background-repeat: no-repeat;
}
.kform textarea { min-height: 9rem; resize: vertical; }
.kform input[type='file'] { font: inherit; font-size: var(--gr-klein); }
.kform input[type='file']::file-selector-button {
  margin-right: 0.85rem;
  padding: 0.55rem 0.9rem;
  font: 600 0.9375rem/1.2 var(--schrift);
  color: var(--schwarz);
  background: var(--weiss);
  border: 1px solid var(--schwarz);
  border-radius: 0;
}
.kform__feld--check { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
.kform__feld--check label { font-weight: 400; font-size: var(--gr-klein); }
.kform input[type='checkbox'] {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.1rem 0 0;
  border-radius: 0;
  accent-color: var(--schwarz);
}
.kform .knopf { width: 100%; margin-top: 0.5rem; }
.kform input:focus-visible, .kform select:focus-visible, .kform textarea:focus-visible {
  outline: 3px solid var(--schwarz);
  outline-offset: 2px;
}

/* Versand (seit 22.10.2026, main.js §5). Honigtopf: NICHT display:none und
   nicht hidden — beides lesen Bots als „ignorieren". Aus dem Sichtfeld
   geschoben, tabindex="-1" und aria-hidden im Markup. */
.honigtopf {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.kform__hinweis { margin: 0; color: var(--text-leise); font-size: var(--gr-klein); line-height: 1.5; }
/* Fehler ohne Rot (nur Grautöne, pruefen.py §12): fett, schwarzer Balken
   davor, das Feld bekommt einen doppelt starken Rahmen. Erkennbar ist der
   Fehler am Text, nicht an der Farbe. */
.kform__fehler {
  margin: 0;
  padding-left: 0.6rem;
  border-left: 3px solid var(--schwarz);
  color: var(--schwarz);
  font-size: var(--gr-klein);
  font-weight: 600;
  line-height: 1.45;
}
.kform__fehler:empty { display: none; }
.kform__fehler--form { margin-bottom: 1rem; padding: 0.85rem 1rem; background: var(--grau-50); }
.kform__feld--check { flex-wrap: wrap; }
.kform__feld--check .kform__fehler { flex-basis: calc(100% - 2.125rem); margin-left: 2.125rem; }
.kform input[aria-invalid="true"]:not([type="checkbox"]),
.kform textarea[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--schwarz); background-color: var(--grau-50); }
.kform input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--schwarz); outline-offset: 2px; }
.kform[aria-busy="true"] { cursor: progress; }

/* Ohne JavaScript schickt das Formular nichts ab: Hinweis statt Knopf. */
.kform__ohne-js { display: none; margin: 0 0 1.25rem; padding: 0.85rem 1rem;
  background: var(--grau-50); font-size: var(--gr-klein); }
.kein-js .kform__ohne-js { display: block; }
.kein-js .kform [type="submit"] { display: none; }

/* Erfolg: schwarze Tafel im weißen Formularfeld, Haken im weißen Quadrat. */
.kform__ende {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--schwarz);
  color: var(--weiss);
}
.kform__ende:focus:not(:focus-visible) { outline: none; }
.kform__ende-zeichen {
  display: block;
  width: 2.75rem; height: 2.75rem;
  padding: 0.55rem;
  background: var(--weiss);
  color: var(--schwarz);
  stroke-width: 2.4;
}
.kform__ende-titel { margin: 1rem 0 0.5rem; color: var(--weiss); font-size: var(--gr-h3); line-height: 1.2; }
.kform__ende p { margin: 0; color: var(--grau-300); }

@media (max-width: 560px) {
  .kform__reihe { grid-template-columns: minmax(0, 1fr); }
}

/* ── 18  Datenblatt ───────────────────────────────────────────────────── */
/* Die Beschriftungsspalte richtet sich nach der längsten Beschriftung
   („Handwerkskammer" in Kapitälchen): Raster auf der Liste, die Zeilen
   übernehmen es als subgrid — so stehen alle Werte bündig untereinander. */
.datenblatt {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 1.5rem;
  margin: 0;
  border-top: 1px solid var(--linie);
}
.datenzeile {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 0.25rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--linie);
}
.datenzeile dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-leise);
  line-height: 1.6;
}
.datenzeile dd { margin: 0; overflow-wrap: anywhere; }
.datenzeile dd a { text-decoration-thickness: 1px; }
.datenblatt--dunkel { --linie: var(--grau-700); --text-leise: var(--grau-300); }
.nap { line-height: 1.5; }

@media (max-width: 520px) {
  .datenblatt { grid-template-columns: minmax(0, 1fr); }
  .datenzeile dt { line-height: 1.3; }
}

/* ── 19  Fußzeile ─────────────────────────────────────────────────────── */
.fuss {
  background: var(--schwarz);
  color: var(--grau-300);
  border-top: 1px solid var(--grau-700);
  font-size: var(--gr-klein);
  --linie: var(--grau-700);
  --text-leise: var(--grau-300);
}
.fuss a { color: var(--grau-300); text-decoration: none; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; }
.fuss__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.25fr);
  gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(3.5rem, 3rem + 3vw, 6rem) clamp(2.5rem, 2rem + 2vw, 4rem);
}
.fuss__siegel { width: 7.5rem; height: 7.5rem; margin-bottom: 1.25rem; }
.fuss__name { margin: 0 0 0.25rem; color: var(--weiss); font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.fuss__satz { margin: 0; }
/* Gewicht steht oben bei den Etikett-Überschriften. */
.fuss__titel {
  margin: 0 0 1rem;
  color: var(--weiss);
  font-size: var(--gr-etikett);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.fuss__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.fuss .nap { margin-bottom: 1rem; }
.datenblatt--fuss { column-gap: 1rem; }
.datenblatt--fuss .datenzeile { padding: 0.55rem 0; }
.datenblatt--fuss dt { font-size: 0.6875rem; }
.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--grau-700);
}
.fuss__unten-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
.fuss__recht { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.fuss__recht a { text-decoration: underline; text-decoration-thickness: 1px; }
/* „Cookie-Einstellungen" (nur mit GA4): ein Knopf, gesetzt wie die Verweise. */
.fuss__einstellungen {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.fuss__einstellungen:hover { text-decoration-thickness: 2px; }
.kein-js .fuss__einstellungen { display: none; }
.fuss__agentur { margin: 0; }
.fuss__agentur a { text-decoration: underline; }

@media (max-width: 1000px) {
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .fuss__raster { grid-template-columns: minmax(0, 1fr); }
}

/* ── 20  Rechtstexte (Impressum, Datenschutz, 404) ────────────────────── */
.seite .band--erste { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
.rechtstext { max-width: 48rem; }
.rechtstext h1 { font-size: var(--gr-h1); margin-bottom: 1.5rem; }
.rechtstext h2 {
  margin: 3rem 0 1rem;
  padding-top: 1.25rem;
  border-top: var(--balken) solid var(--schwarz);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
}
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext li { margin-bottom: 0.4rem; }
.rechtstext .datenblatt { margin-bottom: 1.25rem; }

/* ── 21  Platzhalter (Aufbauphase) ────────────────────────────────────── */
.marke-platzhalter {
  display: inline-block;
  padding: 0.05rem 0.4rem 0.12rem;
  background: var(--offen-grund);
  color: var(--offen-text);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
  vertical-align: 0.05em;
}
.offen-text { color: inherit; }
.offen-strich { color: var(--text-leise); }
.hinweis {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--offen-rand);
  background: var(--offen-kasten);
  color: var(--schwarz);
}
.hinweis p { margin: 0.5rem 0 0; font-size: var(--gr-klein); }
.fuss__stand {
  margin: 0;
  padding: 0.6rem var(--rand);
  background: var(--offen-grund);
  color: var(--offen-text);
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ── 22  Bewegung ─────────────────────────────────────────────────────── */
/* Ruhezustand = sichtbar. main.js versteckt nur, was beim Laden UNTERHALB
   des Fensters liegt (.wartet), und nimmt die Klasse beim Hereinscrollen
   wieder weg. Ohne JavaScript ist alles da. Nur transform und opacity →
   kein Layoutsprung. */
[data-einblenden] {
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--verzug, 0s),
              transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--verzug, 0s);
}
[data-einblenden].wartet { opacity: 0; transform: translateY(18px); }

/* Bühne beim Laden: Zeilen gleiten aus ihrer Maske, Kopfzeile und Knöpfe
   folgen, der versetzte Rahmen rückt ein. */
@keyframes zg-hoch { from { transform: translateY(104%); } }
@keyframes zg-auf { from { opacity: 0; transform: translateY(12px); } }
@keyframes zg-rahmen { from { transform: translate(1rem, -1rem); opacity: 0; } }
.buehne__zeile > span { animation: zg-hoch 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.08s + var(--i, 0) * 0.09s); }
.buehne__kopf, .buehne__knoepfe { animation: zg-auf 0.7s ease both 0.35s; }
.buehne__rahmen::before { animation: zg-rahmen 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both 0.25s; }

/* Zeichnung: Aufbau wie auf der Baustelle (seiten.AUFBAU). Jedes Bauteil
   ist ein <g class="bau bau--ART" style="--t:Start">. main.js setzt .baut,
   sobald die Tafel ins Bild kommt (vorher .wartet-zeichnung), und für
   „Noch einmal aufbauen" kurz ab und wieder an. Die Animationen laufen mit
   fill-mode both: In der Wartezeit vor dem Start gilt schon der Anfang
   (unsichtbar, angehoben, liegend), danach das Ende = der Ruhezustand. */
.tafel.wartet-zeichnung .bau { opacity: 0; }
.tafel .bau { transform-box: view-box; transform-origin: var(--ox, 0) var(--oy, 0); }

@keyframes bau-ziehen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bau-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes bau-senken {
  0%   { opacity: 0; transform: translateY(-90px); }
  20%  { opacity: 1; }
  68%  { transform: translateY(3px); }
  84%  { transform: translateY(-1.5px); }
  100% { opacity: 1; transform: none; }
}
@keyframes bau-richten {
  0%   { opacity: 0; transform: rotate(var(--r)); }
  14%  { opacity: 1; transform: rotate(var(--r)); }
  86%  { transform: rotate(calc(var(--r) * -0.025)); }
  100% { opacity: 1; transform: none; }
}
@keyframes bau-setzen {
  0%   { opacity: 0; transform: translateY(-14px); }
  60%  { opacity: 1; transform: translateY(1px); }
  100% { opacity: 1; transform: none; }
}
@keyframes bau-wort {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bau-baum {
  0%   { opacity: 0; transform: scale(0.2, 0); }
  45%  { opacity: 1; transform: scale(1); }
  62%  { transform: rotate(5deg); }
  78%  { transform: rotate(-3deg); }
  90%  { transform: rotate(1deg); }
  100% { opacity: 1; transform: none; }
}
.tafel.baut .bau--ziehen .z {
  stroke-dasharray: 1;
  animation: bau-ziehen 0.75s cubic-bezier(0.4, 0, 0.2, 1) var(--t) both;
}
.tafel.baut .bau--ziehen { animation: bau-auf 0.01s var(--t) both; }
.tafel.baut .bau--senken { animation: bau-senken 0.75s cubic-bezier(0.3, 0.6, 0.35, 1) var(--t) both; }
.tafel.baut .bau--richten { animation: bau-richten 0.95s cubic-bezier(0.45, 0, 0.25, 1) var(--t) both; }
.tafel.baut .bau--setzen { animation: bau-setzen 0.35s cubic-bezier(0.3, 0.6, 0.35, 1) var(--t) both; }
.tafel.baut .bau--wort { animation: bau-wort 0.45s ease var(--t) both; }
.tafel.baut .bau--wort .z { stroke-dasharray: 1; animation: bau-ziehen 0.45s ease var(--t) both; }
.tafel.baut .bau--baum { animation: bau-baum 1.3s cubic-bezier(0.3, 0.6, 0.35, 1) var(--t) both; }

/* ── 23  Bewegung reduzieren ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  [data-einblenden].wartet { opacity: 1; transform: none; }
  .tafel.wartet-zeichnung .bau { opacity: 1; }
}

/* ── 24  Einwilligung: Cookie-Banner für Google Analytics (22.10.2026) ── */
/* Nur mit fakten.ga4_aktiv() im Markup. Schwarze Tafel unten links, eckig;
   „Ablehnen" und „Annehmen" sind derselbe Knopf (knopf--hell). Über der
   Kopfleiste (z-index 50), unter der Sprungmarke (100). */
.einwilligung {
  position: fixed;
  left: var(--rand);
  bottom: var(--rand);
  z-index: 60;
  width: min(27rem, calc(100% - 2 * var(--rand)));
  max-height: calc(100dvh - 2 * var(--rand));
  overflow-y: auto;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--grau-700);
  background: var(--schwarz);
  color: var(--weiss);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.3);
  --fokus: var(--weiss);
}
.einwilligung[hidden] { display: none; }
.einwilligung__titel { margin: 0 0 0.6rem; font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.einwilligung__text { margin: 0; color: var(--grau-300); font-size: var(--gr-klein); line-height: 1.55; }
.einwilligung__text a { color: var(--weiss); }
.einwilligung__stand { margin: 0.75rem 0 0; font-size: var(--gr-klein); font-weight: 600; }
.einwilligung__knoepfe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.einwilligung__knoepfe .knopf { min-width: 0; padding-inline: 1rem; justify-content: center; }
@media (max-width: 21rem) {
  .einwilligung__knoepfe { grid-template-columns: minmax(0, 1fr); }
}