/* ==========================================================================
   Dachdeckerei Brandt, Baunatal — Startseite, zweiter Entwurf (2026-09-10)
   Portfolio-Seite 1 von 4 der erfundenen Agentur „Eberhard Media".

   DIESE DATEI GILT SEIT DEM 2026-09-11 FÜR ALLE SIEBEN SEITEN. Bis dahin
   trug nur die Startseite den zweiten Entwurf; die Unterseiten lagen auf
   `styles-alt.css`, dem ersten. Maxim wollte zuerst nur die Startseite neu
   sehen, dann kam Karriere nach (der einzige Menüpunkt, der die Startseite
   verlässt), dann auf seinen Wunsch der Rest. `styles-alt.css`,
   `script-alt.js` und Big Shoulders sind gelöscht und stehen nur noch in der
   Git-Geschichte. Die Bausteine der Unterseiten stehen weiter unten in
   eigenen Blöcken (Karriere, Unterseiten). Steht auch in README.md.

   DIE WELT      „Höhe": Ein Dach ist der einzige Teil eines Hauses, den der
                 Bauherr nie zu sehen bekommt. Also STEIGT die Seite. Links
                 läuft eine Höhenskala mit, jeder Abschnitt liegt auf seiner
                 Höhe am Bau — Straße, Traufe, Dachfläche, Kehle, Gaube,
                 First, Schornstein. Die Seite zählt nicht 01, 02, 03; sie
                 misst.
   ABGRENZUNG    Bewusst nicht der erste Entwurf dieser Seite (Anthrazit,
                 Video, Big Shoulders in Versalien, Ziegelrot, 4-px-Balken,
                 hochzählende Kennzahlen, Dach-Querschnitt). Nicht die
                 Agenturseite (Schwarz auf Weiß, Archivo schmal im
                 Plakatgrad, eigener Zeiger, Laufband, Zähler). Nicht
                 handwerk-elektro (Weiß/Blau, Karten mit 14 px Rundung,
                 Pillen). Nicht handwerk-maler (Gelbfläche neben Foto).
                 Nicht handwerk-tischlerei (dunkles Braunschwarz, Serife,
                 Bilderband, Lightbox).
   MATERIAL      Zinkweiß (#EDEEEC) als Grund — die Farbe eines bedeckten
                 nordhessischen Himmels, kühl und leicht grünstichig, nicht
                 das warme Papier der Tischlerei und nicht das reine Weiß der
                 Agentur. Blei (#171B1C) als Schrift, Zink (#5C6867) als
                 Nebenton, eine Linienfarbe, und Patina (#0F6B54) als einzige
                 Farbe: Kupferblech nach zwanzig Jahren, das Material des
                 Gewerks. KEIN Ziegelrot — die Fotos tragen Terrakotta
                 ohnehin als einzige starke Farbe, und die Seite soll nicht
                 mit ihnen streiten.
                 Genau EINE dunkle Fläche: der Notdienst. Seine Dringlichkeit
                 kommt aus dem Gewicht, nicht aus einem roten Balken.
   SCHRIFT       Space Grotesk (variabel 300–700) für Überschriften und
                 Bedienung, immer GEMISCHT, nie in Versalien — das ist die
                 schärfste Abkehr vom ersten Entwurf. Ihre Ziffern sind
                 quadratisch geschnitten und passen deshalb zur
                 Maschinenschrift. IBM Plex Sans im Fließtext (bleibt aus dem
                 ersten Entwurf, eine gute deutsche Textschrift). IBM Plex
                 Mono, eine Stärke, für JEDES Maß: Höhen, Quadratmeter,
                 Zeiten, Positionsnummern, Telefonnummern, Feldmarken. Die
                 Maschinenschrift ist die Stimme des Aufmaßes.
   RASTER        12 Spalten, Inhalt bis 1360 px, außen 6vw. Kein Abschnitt
                 wiederholt die Ordnung des vorigen: Aufmaßblatt (Zeilen zum
                 Aufklappen), Wisch (zwei große Bilder), dunkler Block (zwei
                 Spalten), Betrieb (Bild über volle Breite, dann versetzt),
                 Stimmen (drei versetzte Zitate ohne Kasten), Formular.
   BEWEGUNG      Wenig und langsam. Erscheinen von unten (600 ms), Parallaxe
                 auf den vier großen Fotos, der Vorher/Nachher-Wisch am
                 Scroll, die Maßlinie des Helden einmal beim Laden. Keine
                 Zähler, kein Laufband, keine Wort-für-Wort-Staffel.
                 prefers-reduced-motion schaltet alles ab und zeigt den
                 fertigen Zustand.

   ZWEI REGELN, DIE HIER SCHON WEHGETAN HABEN:
   - Ein beobachteter Rahmen trägt NIE einen `clip-path`. Chromium rechnet
     ihn in die Sichtbarkeit für den IntersectionObserver ein; der Rahmen
     käme nie in den Sichtbereich und bliebe für immer unsichtbar. Der Clip
     des Wischs liegt deshalb auf dem BILD.
   - Kein Inline-Stil, kein Inline-Skript: `_headers` setzt
     `style-src 'self'; script-src 'self'`. Werte aus dem Skript kommen über
     `style.setProperty` (--w, --p, --y), deshalb gibt es flag.js als eigene
     Datei.
   ========================================================================== */

/* --- Schriften (selbst gehostet, CSP font-src 'self') ---------------------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("/portfolio/dach/assets/fonts/spacegrotesk-var-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/portfolio/dach/assets/fonts/spacegrotesk-var-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/portfolio/dach/assets/fonts/plex-var-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/portfolio/dach/assets/fonts/plex-var-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/portfolio/dach/assets/fonts/plexmono-500-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/portfolio/dach/assets/fonts/plexmono-500-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Werte ---------------------------------------------------------------- */
:root {
  --zinkweiss: #edeeec;     /* Grund: bedeckter Himmel, kühl und grünstichig */
  --zinkweiss-tief: #e3e5e2;/* zweite Fläche: Angebot und Fuß */
  --blei: #171b1c;          /* Schrift, und die eine dunkle Fläche; 14,9:1 */
  --zink: #5c6867;          /* Nebentext; 5,0:1 auf Zinkweiß */
  --zink-hell: #98a5a3;     /* Nebentext auf Blei; 6,8:1 */
  --linie: #cbd0cd;
  --linie-dunkel: #333c3d;
  --patina: #0f6b54;        /* Kupferblech nach zwanzig Jahren; 5,6:1 */
  --patina-hell: #7fd4b8;   /* dieselbe Farbe auf Blei; 9,9:1 */

  --rand: 6vw;
  --breite: 1360px;
  --luft: clamp(88px, 10vw, 152px);   /* zwischen zwei Abschnitten */
  --kopf-hoehe: 72px;

  --schrift-titel: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --schrift-text: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --schrift-mass: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --kurve: cubic-bezier(0.16, 1, 0.3, 1);
  --kurz: 240ms;
  --mittel: 600ms;
}

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

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

body {
  margin: 0;
  background: var(--zinkweiss);
  color: var(--blei);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; background: var(--linie); }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: var(--patina); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

:focus-visible { outline: 2px solid var(--patina); outline-offset: 3px; }
::selection { background: var(--patina); color: var(--zinkweiss); }

/* Die Maschinenschrift: jedes Maß der Seite. */
.mono {
  font-family: var(--schrift-mass);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* --- Typografie ----------------------------------------------------------- */
h1, h2, h3, .knopf, .pos__titel, .nav__punkte a {
  font-family: var(--schrift-titel);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.06;
}
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); text-wrap: balance; }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); letter-spacing: -0.015em; }

.lead { color: var(--zink); font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); max-width: 46ch; }
.lead + .lead { margin-top: 0.9rem; }

/* Die Ortsangabe über jedem Abschnitt. Sie ersetzt die Kicker-Nummer des
   ersten Entwurfs und steht auch dann da, wenn die Höhenskala am Rand
   fehlt (Telefon, schmales Fenster, kein Skript). */
.ort {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1.4rem;
  padding-left: 1.6em;
  color: var(--patina);
  position: relative;
}
.ort::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.1em;
  height: 1px;
  background: currentColor;
}
.abschnitt--dunkel .ort { color: var(--patina-hell); }

/* --- Raster --------------------------------------------------------------- */
/* Die Gasse links ist die Spur der Höhenskala. Sie ist erst ab 1240 px da —
   darunter gibt es keine Skala, und dann wäre sie eine leere Rinne. */
.mass { width: min(var(--breite), 100% - 2 * var(--rand)); margin-inline: auto; padding-left: var(--gasse, 0px); }
@media (min-width: 1240px) { :root { --gasse: 132px; } }
.abschnitt { padding-block: calc(var(--luft) / 2); }
.abschnitt--flaeche { background: var(--zinkweiss-tief); }
.abschnitt--dunkel { background: var(--blei); color: var(--zinkweiss); }
.abschnitt--dunkel a { color: var(--patina-hell); }

.kopfzeile { margin-bottom: clamp(40px, 5vw, 76px); }
.kopfzeile h2 { max-width: 18ch; }
.kopfzeile .lead { margin-top: 1.2rem; }
.kopfzeile--zwei {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.kopfzeile--zwei .lead { margin-top: 0; }

/* --- Knöpfe und Pfeile ---------------------------------------------------- */
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.6em;
  border: 1px solid transparent;
  border-radius: 0;               /* Rundung 0 auf dieser Seite */
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--kurz) var(--kurve), color var(--kurz) var(--kurve),
              border-color var(--kurz) var(--kurve);
}
.knopf svg { width: 1.05em; height: 1.05em; transition: transform var(--kurz) var(--kurve); }
.knopf:hover svg { transform: translateX(3px); }
.knopf--voll { background: var(--patina); border-color: var(--patina); color: var(--zinkweiss); }
.knopf--voll:hover { background: var(--blei); border-color: var(--blei); }
.knopf--linie { background: none; border-color: var(--blei); color: var(--blei); }
.knopf--linie:hover { background: var(--blei); color: var(--zinkweiss); }
.abschnitt--dunkel .knopf--linie { border-color: var(--zink-hell); color: var(--zinkweiss); }
.abschnitt--dunkel .knopf--linie:hover { background: var(--zinkweiss); color: var(--blei); border-color: var(--zinkweiss); }

.pfeil {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  color: var(--patina);
  text-decoration: none;
  padding-bottom: 0.3em;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  transition: border-color var(--kurz) var(--kurve);
}
.pfeil:hover { border-bottom-color: currentColor; }
.pfeil svg { width: 1.05em; height: 1.05em; transition: transform var(--kurz) var(--kurve); }
.pfeil:hover svg { transform: translateX(4px); }
.pfeil--gross { font-size: clamp(1.05rem, 1.5vw, 1.35rem); margin-top: clamp(32px, 4vw, 56px); }

.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--blei);
  color: var(--zinkweiss);
  padding: 0.8rem 1.4rem;
  text-decoration: none;
}
.sprung:focus { left: 0; }

/* --- Die Höhenskala: die Signatur ----------------------------------------- */
/* Ein Strich in der linken Gasse mit Metermarken; eine Marke läuft mit und
   nennt die Höhe des Abschnitts, der gerade dran ist. Sie ist reine Zugabe —
   dieselbe Angabe steht als `.ort` im Kopf jedes Abschnitts. Deshalb steht
   im HTML `hidden`, und erst script.js nimmt es weg: ohne Skript stünde
   sonst ein toter Strich da.

   Die Ebene ist so breit wie das Fenster, innen sitzt derselbe Satzspiegel
   wie bei `.mass`. So liegt der Strich exakt auf der linken Kante des
   Satzspiegels — und die Gasse oben hält den Text davon frei. Eine feste
   Rechnung mit `left:` ginge auch, hätte aber zwei Orte für dieselbe
   Zahl. */
.skala {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--kopf-hoehe) + 48px);
  bottom: 48px;
  z-index: 40;
  pointer-events: none;
  display: none;
}
.skala__innen {
  position: relative;
  height: 100%;
  width: min(var(--breite), 100% - 2 * var(--rand));
  margin-inline: auto;
}
.skala__kopf {
  position: absolute;
  left: 0;
  top: -2.5rem;
  color: var(--zink);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px 4px 0;
  background: var(--zinkweiss);
}
.skala__saeule { position: absolute; left: 0; top: 0; bottom: 0; width: 108px; }
/* Der Strich und, alle 12,5 %, eine kurze Metermarke daneben. Ein
   wiederholender Verlauf statt neun Elementen. */
.skala__strich {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 9px;
  background:
    linear-gradient(var(--linie), var(--linie)) left / 1px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--linie) 0 1px, transparent 1px 12.5%);
}
.skala__fuellung {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: calc(var(--p, 0) * 100%);
  background: var(--patina);
  transition: height 700ms var(--kurve);
}
.skala__marke {
  position: absolute;
  left: 0;
  /* 2 %/98 % statt 0/100: sonst stieße die Marke am oberen Ende in die
     Überschrift der Skala und am unteren aus ihr heraus. */
  top: calc(2% + var(--p, 0) * 96%);
  display: grid;
  gap: 0.15rem;
  /* Der Strich kreuzt randlose Fotos und den dunklen Notdienst-Block. Die
     Marke bekommt deshalb ihr eigenes helles Schildchen — so wie eine
     Bemaßung in einer Werkzeichnung, die über allem liegt, was darunter
     gezeichnet ist. Ein Textschatten reichte nicht: über einem hellen Foto
     verschwindet dunkler Text auch mit Schein. */
  padding: 6px 10px 6px 16px;
  background: var(--zinkweiss);
  transform: translateY(-50%);
  transition: top 700ms var(--kurve);
  white-space: nowrap;
}
.skala__marke::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--patina);
}
.skala__marke b { display: block; color: var(--blei); font-size: 0.8125rem; }
.skala__marke i {
  display: block;
  font-style: normal;
  color: var(--zink);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (min-width: 1240px) { .skala { display: block; } }

/* --- Kopf ----------------------------------------------------------------- */
/* KEIN `backdrop-filter` hier, und das ist kein Versehen: ein Element mit
   backdrop-filter (oder filter, transform, will-change: transform) wird zum
   Bezugsrahmen für `position: fixed` in seinem Inneren. Das Vollbildmenü ist
   ein Kind dieses Kopfes — mit Weichzeichner klebte sein `inset: 0` an der
   72 px hohen Kopfzeile statt am Fenster, und das Menü stand abgeschnitten
   und durchsichtig über der Seite. Der Kopf deckt deshalb voll; auf einem
   Grund, der ohnehin Zinkweiß ist, sieht man den Unterschied nicht.
   (Zweiter Grund: Playwright-Firefox rendert backdrop-filter gar nicht.) */
.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--zinkweiss);
  border-bottom: 1px solid transparent;
  transition: border-color var(--kurz) var(--kurve);
}
.kopf.ist-klein { border-bottom-color: var(--linie); }
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--kopf-hoehe);
}
.marke { text-decoration: none; color: inherit; line-height: 1.05; }
.marke b {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}
.marke small { display: block; margin-top: 0.25rem; color: var(--zink); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav__punkte { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 1.9rem); }
.nav__punkte a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--blei);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--kurz) var(--kurve), color var(--kurz) var(--kurve);
}
.nav__punkte a:hover { color: var(--patina); border-bottom-color: var(--patina); }
.nav__fuss { display: none; }

.kopf__rechts { display: flex; align-items: center; gap: 1rem; }
.kopf__tel { color: var(--blei); text-decoration: none; font-size: 0.875rem; border-bottom: 1px solid var(--linie); padding-bottom: 2px; }
.kopf__tel:hover { border-bottom-color: var(--blei); }
.kopf__rechts .knopf { padding: 0.65em 1.1em; font-size: 0.8125rem; }

.burger { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: var(--blei); cursor: pointer; padding: 0; }
.burger i { display: block; width: 24px; height: 2px; margin: 5px auto; background: currentColor; transition: transform var(--kurz) var(--kurve), opacity var(--kurz) var(--kurve); }
.menu-offen .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-offen .burger i:nth-child(2) { opacity: 0; }
.menu-offen .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- 0,00 m · Held -------------------------------------------------------- */
.held { padding-top: clamp(40px, 5vw, 76px); }
.held__satz { padding-bottom: clamp(32px, 4vw, 52px); }
.held__titel {
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 19ch;
  text-wrap: balance;
}
/* „zwölf Meter" in der Maschinenschrift: das Maß ist der Haken des Satzes. */
.held__titel em {
  font-family: var(--schrift-mass);
  font-style: normal;
  font-weight: 500;
  font-size: 0.78em;
  letter-spacing: -0.01em;
  color: var(--patina);
}

/* Die Maßlinie: zeichnet sich einmal wie eine Bemaßung in einer
   Werkzeichnung. Der einzige bewegte Moment des Helden. */
.masslinie { display: flex; align-items: center; gap: 0.9rem; margin-top: clamp(24px, 3vw, 40px); max-width: 30rem; }
.masslinie__balken { position: relative; flex: 1 1 auto; height: 9px; }
.masslinie__balken::before,
.masslinie__balken::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--blei); }
.masslinie__balken::before { left: 0; }
.masslinie__balken::after { right: 0; }
.masslinie__balken i {
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  width: 100%;
  background: var(--blei);
  transform: scaleX(var(--m, 1));
  transform-origin: left center;
}
.js .masslinie[data-masslinie] { --m: 0; }
.js .masslinie.ist-gemessen { --m: 1; transition: none; }
.js .masslinie.ist-gemessen .masslinie__balken i { transition: transform 1200ms var(--kurve); }
.masslinie__wert { color: var(--patina); font-size: 0.875rem; }

.fakten { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: clamp(24px, 2.8vw, 34px); color: var(--zink); }
.fakten li { position: relative; padding-left: 1.1rem; }
.fakten li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; background: var(--patina); }
.held .knoepfe { margin-top: clamp(28px, 3.5vw, 40px); }

/* Das Dach über die volle Breite. Kein Schleier, kein Text darauf — der
   Satz steht darüber, das Foto muss nichts tragen. */
.held__dach { overflow: hidden; }
.held__medien { position: relative; height: clamp(320px, 58svh, 620px); }
.held__medien img,
.held__medien video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.held__video { opacity: 0; transition: opacity 800ms var(--kurve); }
.held__video.ist-da { opacity: 1; }

/* --- 4,20 m · Das Aufmaßblatt --------------------------------------------- */
.aufmass { border-top: 1px solid var(--linie); }
.pos { border-bottom: 1px solid var(--linie); }
.pos__auf > summary { list-style: none; cursor: pointer; }
.pos__auf > summary::-webkit-details-marker { display: none; }
.pos__zeile {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto 2.5rem;
  align-items: center;
  gap: 1rem clamp(1rem, 2.5vw, 2.5rem);
  padding-block: clamp(20px, 2.4vw, 30px);
  transition: color var(--kurz) var(--kurve);
}
.pos__auf > summary:hover .pos__titel { color: var(--patina); }
.pos__nr { color: var(--zink); }
.pos__titel {
  font-size: clamp(1.35rem, 2.4vw, 2.05rem);
  font-weight: 500;
  transition: color var(--kurz) var(--kurve);
}
.pos__mass { color: var(--zink); text-align: right; }
/* Das Zeichen ist ein Plus, das beim Öffnen zum Minus wird — kein Pfeil und
   kein Icon aus einem Satz. */
.pos__zeichen { position: relative; justify-self: end; width: 18px; height: 18px; }
.pos__zeichen::before,
.pos__zeichen::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--blei); transition: transform var(--kurz) var(--kurve), opacity var(--kurz) var(--kurve); }
.pos__zeichen::before { width: 18px; height: 1px; margin: -1px 0 0 -9px; }
.pos__zeichen::after { width: 1px; height: 18px; margin: -9px 0 0 0; }
.pos__auf[open] .pos__zeichen::after { transform: scaleY(0); }
.pos__inhalt {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  padding-block: 0 clamp(24px, 3vw, 40px);
  padding-left: calc(6.5rem + clamp(1rem, 2.5vw, 2.5rem));
}
.pos__text p { color: var(--zink); max-width: 44ch; }
.pos__daten { margin-top: 1.4rem; display: grid; gap: 0.5rem; }
.pos__daten > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.8rem; border-top: 1px solid var(--linie); padding-top: 0.45rem; }
.pos__daten dt { color: var(--zink); }
.pos__daten dd { margin: 0; }
.pos__text .pfeil { margin-top: 1.6rem; }
.pos__bild { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.js .pos__auf[open] .pos__inhalt { animation: auf 420ms var(--kurve); }
@keyframes auf { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }

/* --- 6,40 m · Der Wisch --------------------------------------------------- */
.wisch { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: end; }
.wisch--versetzt { margin-top: clamp(56px, 7vw, 104px); grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); }
.wisch--versetzt .wisch__bilder { order: 2; }
.wisch--versetzt .wisch__text { order: 1; }
.wisch__bilder { position: relative; overflow: hidden; --w: 0.5; cursor: ew-resize; touch-action: pan-y; user-select: none; }
.wisch__bilder img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Der Clip liegt auf dem BILD, nie auf dem beobachteten Rahmen. */
.wisch__vorher { position: absolute; inset: 0; height: 100%; clip-path: inset(0 calc((1 - var(--w)) * 100%) 0 0); }
.wisch__kante { position: absolute; top: 0; bottom: 0; left: calc(var(--w) * 100%); width: 2px; background: var(--patina-hell); pointer-events: none; z-index: 2; }
/* Der Griff sagt, dass sich die Kante ziehen lässt — seit dem 2026-09-10 ist
   das nötig, weil sie nicht mehr am Scroll läuft. Rundung 0 wie überall hier;
   die beiden Dreiecke sind zwei Ränder, kein Bild. */
.wisch__kante i { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; translate: -50% -50%; background: var(--patina); }
.wisch__kante i::before, .wisch__kante i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; translate: 0 -50%; }
.wisch__kante i::before { left: 9px; border-right: 6px solid var(--zinkweiss); }
.wisch__kante i::after { right: 9px; border-left: 6px solid var(--zinkweiss); }
/* Der Regler ist nur für die Tastatur da: unsichtbar, ohne Zeigereingaben,
   aber fokussierbar. Ohne Skript nimmt er niemandem etwas weg. */
.wisch__regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 3; appearance: none; -webkit-appearance: none; background: transparent; pointer-events: none; }
.wisch__regler::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.wisch__regler::-moz-range-thumb { width: 44px; height: 100%; border: 0; background: transparent; }
.wisch__regler:focus-visible { opacity: 1; outline: 2px solid var(--patina); outline-offset: -2px; background: transparent; }
/* Kante und Marken gehören zum Bild. Ohne diese Zeile schwebten sie vor dem
   Erscheinen als grüner Strich über leerem Grund. */
.hat-io.js .zeig--bild:not(.ist-da) .wisch__kante,
.hat-io.js .zeig--bild:not(.ist-da) .wisch__marke { opacity: 0; }
.wisch__marke { position: absolute; bottom: 0.9rem; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); letter-spacing: 0.1em; text-transform: uppercase; }
.wisch__marke--v { left: 1rem; }
.wisch__marke--n { right: 1rem; }
.wisch__text h3 { margin-bottom: 0.8rem; }
.wisch__text p { color: var(--zink); }
.wisch__daten { display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid var(--linie); color: var(--blei); }

/* --- 7,90 m · Notdienst, der eine dunkle Block ---------------------------- */
.notdienst { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.notdienst__nummer {
  display: inline-block;
  margin-top: 1.6rem;
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--zinkweiss);
  text-decoration: none;
  border-bottom: 2px solid var(--patina-hell);
  padding-bottom: 0.1em;
  transition: color var(--kurz) var(--kurve);
}
.notdienst__nummer:hover { color: var(--patina-hell); }
.abschnitt--dunkel .lead { color: var(--zink-hell); margin-top: 1.6rem; }
.kosten { margin-top: clamp(28px, 3.5vw, 40px); display: grid; gap: 0; }
.kosten > div { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 0.65rem; border-top: 1px solid var(--linie-dunkel); }
.kosten > div:last-child { border-bottom: 1px solid var(--linie-dunkel); }
.kosten dt { color: var(--zink-hell); }
.kosten dd { margin: 0; color: var(--zinkweiss); }
.kosten__hinweis { margin-top: 0.9rem; font-size: 0.875rem; color: var(--zink-hell); max-width: 44ch; }
.notdienst__bild { overflow: hidden; }
.notdienst__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* --- 9,30 m · Betrieb ----------------------------------------------------- */
.team__bild { margin-block: clamp(32px, 4vw, 56px); overflow: hidden; }
.team__bild img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }
.betrieb { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.betrieb__foto img { width: 100%; }
.betrieb__text p { color: var(--zink); max-width: 48ch; }
.betrieb__text p + p { margin-top: 1rem; }
.betrieb__signatur { margin-top: 1.8rem !important; padding-top: 1rem; border-top: 1px solid var(--linie); }
.betrieb__signatur b { display: block; font-family: var(--schrift-titel); font-weight: 600; font-size: 1.1rem; color: var(--blei); letter-spacing: -0.02em; }
.betrieb__signatur .mono { display: block; margin-top: 0.25rem; color: var(--zink); }
.ruf { margin-top: clamp(28px, 3.5vw, 44px); padding-top: 1.4rem; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; }
.ruf p { color: var(--zink); max-width: 34ch; }
.ruf b { color: var(--blei); font-family: var(--schrift-titel); font-weight: 600; }

/* --- 11,20 m · Stimmen ---------------------------------------------------- */
/* Kein Kasten, kein Raster: drei Zitate, jedes an einer anderen Stelle im
   Satzspiegel. Die Maschinenzeile nennt, wer spricht. */
.stimmen { display: grid; gap: clamp(40px, 4.5vw, 64px); }
/* In rem, nicht in ch: `ch` misst hier an der Textschrift des <blockquote>,
   nicht an der viel größeren Zitatschrift darin — die Spalte wäre halb so
   breit wie gewollt. */
.stimme { max-width: 27rem; }
.stimme--zwei { justify-self: center; }
.stimme--drei { justify-self: end; }
.stimme__wer { color: var(--patina); margin-bottom: 1rem; }
.stimme__satz {
  font-family: var(--schrift-titel);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.1vw, 1.85rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.google { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--zink); }
.google b { color: var(--blei); }
.google__sterne { display: inline-flex; gap: 2px; color: var(--patina); }
.google__sterne svg { width: 14px; height: 14px; fill: currentColor; }

/* --- 12,00 m · Angebot ---------------------------------------------------- */
.anfrage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.feld { display: block; margin-bottom: 1.75rem; }
.feld > label, legend { display: block; color: var(--zink); margin-bottom: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0; }
.felder--zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }

.feld input[type="text"],
.feld input[type="tel"] {
  width: 100%;
  font: inherit;
  color: var(--blei);
  background: var(--zinkweiss);
  border: 1px solid var(--linie);
  border-radius: 0;
  padding: 0.75rem 0.9rem;
  transition: border-color var(--kurz) var(--kurve);
}
.feld input::placeholder { color: color-mix(in srgb, var(--zink) 70%, transparent); }
.feld input:focus { outline: 0; border-color: var(--patina); box-shadow: inset 0 -2px 0 var(--patina); }
.feld input[type="file"] { font: inherit; font-size: 0.9375rem; color: var(--zink); width: 100%; }
.feld input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 0.875rem;
  color: var(--blei);
  background: var(--zinkweiss);
  border: 1px solid var(--linie);
  border-radius: 0;
  padding: 0.5rem 1rem;
  margin-right: 1rem;
  cursor: pointer;
}
.feld input[type="file"]::file-selector-button:hover { border-color: var(--patina); color: var(--patina); }
.hinweis { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--zink); }

/* Die Auswahl: Textmarken mit Haarlinie darunter — keine Pillen (die hat
   handwerk-elektro) und keine Karten. */
.wahl { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl label { cursor: pointer; }
.wahl span {
  display: inline-block;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--linie);
  transition: color var(--kurz) var(--kurve), border-color var(--kurz) var(--kurve);
}
.wahl label:hover span { color: var(--patina); }
.wahl input:checked + span { color: var(--patina); border-bottom: 2px solid var(--patina); padding-bottom: calc(0.3rem - 1px); }
.wahl input:focus-visible + span { outline: 2px solid var(--patina); outline-offset: 4px; }

.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.5rem; }
.formular__fuss small { color: var(--zink); }
.formular__antwort { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--patina); max-width: 48ch; }
.formular__antwort:empty { display: none; }
.formular__antwort b { display: block; font-family: var(--schrift-titel); font-weight: 600; margin-bottom: 0.35rem; }
.formular.sendet .knopf--voll { opacity: 0.6; pointer-events: none; }

.anfrage__info { display: grid; gap: clamp(1.5rem, 2.5vw, 2.25rem); }
.block { border-top: 1px solid var(--linie); padding-top: 1rem; }
.block h3 { color: var(--zink); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.7rem; font-size: 0.75rem; }
.block address { font-style: normal; line-height: 1.7; }
.block .pfeil { margin-top: 1rem; }
.zeiten { display: grid; gap: 0.35rem; }
.zeiten > div { display: flex; justify-content: space-between; gap: 1rem; }
.zeiten dt { color: var(--zink); }
.zeiten dd { margin: 0; }
.gebiet { color: var(--zink); font-size: 0.9375rem; }

/* --- Karriere (seit 2026-09-11 im zweiten Entwurf) -------------------------
   Dieselben Bausteine wie die Startseite, dazu drei eigene: die Gründe als
   Zeilen mit einem Maß rechts (wie das Aufmaßblatt, nur ohne Aufklappen),
   die Stellen als Positionen mit Maschinenzeilen, und der Werkhof neben dem
   Formular. Keine Karten, keine Kästen — Haarlinien. */
/* Der Held der Karriereseite hat keine Maßlinie; ohne sie säße der Vorspann
   unmittelbar unter der Überschrift. */
.held__titel + .lead { margin-top: clamp(20px, 2.6vw, 34px); }
.warum { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.gruende { border-top: 1px solid var(--linie); }
.grund { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 2rem; align-items: baseline; padding-block: clamp(18px, 2.2vw, 28px); border-bottom: 1px solid var(--linie); }
.grund h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 500; }
.grund__mass { color: var(--patina); text-align: right; }
.grund p { grid-column: 1 / -1; color: var(--zink); max-width: 52ch; }
.warum__bild img { width: 100%; }
.warum__bild figcaption { margin-top: 0.7rem; color: var(--zink); }

.stellen { border-top: 1px solid var(--linie); }
.stelle { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 15rem) auto; gap: 1rem clamp(1rem, 2.5vw, 2.5rem); align-items: start; padding-block: clamp(24px, 2.8vw, 36px); border-bottom: 1px solid var(--linie); }
.stelle__nr { color: var(--zink); padding-top: 0.55em; }
.stelle h3 { font-size: clamp(1.35rem, 2.4vw, 2.05rem); font-weight: 500; }
.stelle__text p { margin-top: 0.7rem; color: var(--zink); max-width: 46ch; }
.stelle__daten { display: grid; gap: 0.35rem; padding-top: 0.55em; }
.stelle__daten > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.8rem; }
.stelle__daten dt { color: var(--zink); }
.stelle__daten dd { margin: 0; }
.stelle .knopf { justify-self: end; }

.werkhof { overflow: hidden; }
.werkhof img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.block address + p { margin-top: 0.7rem; }

@media (max-width: 1080px) {
  .warum { grid-template-columns: 1fr; }
  .warum__bild { max-width: 340px; }
  .stelle { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); }
  .stelle__nr { grid-column: 1 / -1; padding-top: 0; }
  .stelle .knopf { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .grund { grid-template-columns: 1fr; }
  .grund__mass { text-align: left; }
  .stelle { grid-template-columns: 1fr; }
}

/* --- Unterseiten (seit 2026-09-11 im zweiten Entwurf) ----------------------
   Leistungen, Referenzen und die Pflichtseiten waren bis zum 2026-09-11 der
   erste Entwurf (styles-alt.css, inzwischen gelöscht). Sie nehmen die
   Bausteine der Startseite und bringen nur mit, was dort fehlt: die
   Sprungliste und die Leistungsbänder, die Projekte der Referenzen, den
   Satzspiegel der Rechtstexte und die 404. Keine Karten, keine Kästen —
   Haarlinien, und jedes Maß in der Maschinenschrift. */

/* Der Menüpunkt der Seite, auf der man steht. */
.nav__punkte a[aria-current="page"] { color: var(--patina); border-bottom-color: var(--patina); }

/* Leistungen: die Sprungliste im Kopf nennt jede Leistung mit ihrer Höhe. */
.sprungliste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid var(--linie); }
.sprungliste a {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: 1px solid var(--linie);
  color: var(--blei);
  text-decoration: none;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: color var(--kurz) var(--kurve), border-color var(--kurz) var(--kurve);
}
.sprungliste a .mono { color: var(--patina); }
.sprungliste a:hover { color: var(--patina); border-bottom-color: var(--patina); }

/* Ein Band je Leistung: Foto und fünf Zeilen nebeneinander, von Band zu Band
   gespiegelt, darunter der Ablauf mit dem Knopf. Reparatur & Notdienst liegt
   auf der einen dunklen Fläche, wie der Notdienst der Startseite. */
.leistung-band { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
.leistung-band--gespiegelt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.leistung-band--gespiegelt .leistung-band__bild { order: 2; }
.leistung-band__bild { overflow: hidden; }
.leistung-band__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.leistung-band__zeilen { border-top: 1px solid var(--linie); }
.leistung-band__zeilen li { padding-block: clamp(14px, 1.6vw, 20px); border-bottom: 1px solid var(--linie); }
.leistung-band__zeilen h3 { font-size: clamp(1.05rem, 1.35vw, 1.25rem); letter-spacing: -0.01em; }
.leistung-band__zeilen p { margin-top: 0.35rem; color: var(--zink); font-size: 0.96875rem; max-width: 46ch; }
.leistung-band__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; margin-top: clamp(28px, 3.5vw, 44px); padding-top: 1.2rem; border-top: 1px solid var(--linie); }
.leistung-band__fuss p { color: var(--zink); max-width: 60ch; }
.leistung-band__fuss p .mono { display: block; margin-bottom: 0.3rem; color: var(--patina); letter-spacing: 0.08em; text-transform: uppercase; }
.leistung-band__fuss .notdienst__nummer { margin-top: 0; }
.abschnitt--dunkel .leistung-band__zeilen,
.abschnitt--dunkel .leistung-band__zeilen li,
.abschnitt--dunkel .leistung-band__fuss { border-color: var(--linie-dunkel); }
.abschnitt--dunkel .leistung-band__zeilen p,
.abschnitt--dunkel .leistung-band__fuss p { color: var(--zink-hell); }
.abschnitt--dunkel .leistung-band__fuss p .mono { color: var(--patina-hell); }

/* Referenzen: sechs Projekte, jedes auf seiner Höhe. Zwei sind der Wisch der
   Startseite (.wisch, von Hand gezogen), die vier anderen ein Foto mit
   derselben Unterschrift; die Seiten wechseln von Projekt zu Projekt. */
.abschnitt--projekt { padding-block: clamp(32px, 4.5vw, 64px); }
.abschnitt--projekt .wisch { margin-top: 0; }
.projekt { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: end; }
.projekt--versetzt { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); }
.projekt--versetzt .projekt__bild { order: 2; }
.projekt__bild { overflow: hidden; }
.projekt__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* `.wisch__text p` färbt jeden Absatz Zink — die Ortsangabe bleibt Patina. */
.projekt__text .ort { color: var(--patina); margin-bottom: 1rem; }
.projekt__text h2 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); letter-spacing: -0.015em; margin-bottom: 0.8rem; }
.projekt__text > p:not(.ort) { color: var(--zink); }
.projekt__daten { display: grid; gap: 0.35rem; margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid var(--linie); }
.projekt__daten > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.8rem; }
.projekt__daten dt { color: var(--zink); }
.projekt__daten dd { margin: 0; }

/* Impressum und Datenschutz: eine Textspalte im Satzspiegel, keine Skala. */
.recht__titel { font-size: clamp(2.4rem, 5.6vw, 4.6rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; overflow-wrap: anywhere; } /* „Datenschutz&shy;erklärung" trägt eine weiche Trennstelle; anywhere ist das Netz für ein Wort, das trotzdem nicht passt — bei 38 px Schrift und 351 px Breite lief der Titel sonst aus dem Bild (2026-09-12) */
.recht__text { max-width: 46rem; }
.recht__hinweis { margin-bottom: clamp(20px, 2.5vw, 32px); padding-top: 1rem; border-top: 1px solid var(--patina); }
.recht__hinweis b { color: var(--blei); font-weight: 500; }
.recht__text h2 { margin-top: 2.4rem; margin-bottom: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--linie); font-size: clamp(1.2rem, 1.7vw, 1.5rem); letter-spacing: -0.015em; }
.recht__text p, .recht__text li { color: var(--zink); }
.recht__text ul { display: grid; gap: 0.8rem; }
.recht__text li b { color: var(--blei); font-weight: 600; }
.recht__text code { font-family: var(--schrift-mass); font-size: 0.875em; }

/* 404: die Zahl als Maß, in der Maschinenschrift. */
.fehler { padding-block: clamp(64px, 10vw, 140px); }
.fehler__zahl { margin-bottom: clamp(16px, 2vw, 28px); font-family: var(--schrift-mass); font-weight: 500; font-size: clamp(4.5rem, 14vw, 10rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--patina); }
.fehler .knoepfe { margin-top: clamp(28px, 3.5vw, 40px); }

@media (max-width: 1080px) {
  .leistung-band, .leistung-band--gespiegelt, .projekt, .projekt--versetzt { grid-template-columns: 1fr; }
  .leistung-band--gespiegelt .leistung-band__bild, .projekt--versetzt .projekt__bild { order: 0; }
  .sprungliste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sprungliste { grid-template-columns: 1fr 1fr; }
}

/* --- Fuß ------------------------------------------------------------------ */
.fuss { background: var(--zinkweiss-tief); border-top: 1px solid var(--linie); padding-block: clamp(48px, 6vw, 80px) clamp(28px, 3.5vw, 40px); }
.fuss__raster { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem); }
.fuss__claim { margin-top: 1rem; color: var(--zink); font-size: 0.9375rem; max-width: 34ch; }
.fuss h4 { color: var(--zink); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.9rem; font-weight: 500; font-size: 0.75rem; font-family: var(--schrift-mass); }
.fuss address { font-style: normal; font-size: 0.9375rem; line-height: 1.75; }
.fuss__liste { display: grid; gap: 0.45rem; font-size: 0.9375rem; }
.fuss a { color: var(--blei); text-decoration-color: var(--linie); }
.fuss a:hover { color: var(--patina); text-decoration-color: currentColor; }
.fuss__gebiet { color: var(--zink); font-size: 0.9375rem; }
.fuss__unten { margin-top: clamp(36px, 4.5vw, 60px); padding-top: 1.2rem; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; color: var(--zink); }

/* --- Die Leiste auf dem Telefon ------------------------------------------- */
.leiste { display: none; }

/* --- Erscheinen beim Scrollen --------------------------------------------- */
.hat-io.js .zeig { opacity: 0; translate: 0 16px; }
.hat-io.js .zeig.ist-da { opacity: 1; translate: 0 0; transition: opacity var(--mittel) var(--kurve), translate var(--mittel) var(--kurve); }
.hat-io.js .zeig--2.ist-da { transition-delay: 90ms; }
.hat-io.js .zeig--3.ist-da { transition-delay: 180ms; }
.hat-io.js .zeig--4.ist-da { transition-delay: 270ms; }
.hat-io.js .zeig--bild img,
.hat-io.js .zeig--bild video { opacity: 0; scale: 1.03; }
.hat-io.js .zeig--bild.ist-da img,
.hat-io.js .zeig--bild.ist-da video { opacity: 1; scale: 1; transition: opacity 900ms var(--kurve), scale 900ms var(--kurve); }
/* Das Video blendet sich selbst ein, sobald die Datei da ist; das Erscheinen
   darf ihm nicht dazwischenfunken. */
.hat-io.js .zeig--bild.ist-da .held__video { opacity: 0; }
.hat-io.js .zeig--bild.ist-da .held__video.ist-da { opacity: 1; }
.parallax { will-change: transform; }
.js .parallax img { transform: translate3d(0, var(--y, 0px), 0) scale(1.08); }

/* --- Tablet und Telefon --------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --rand: 5vw; }
  .kopfzeile--zwei { grid-template-columns: 1fr; align-items: start; }
  .kopfzeile--zwei .lead { margin-top: 0.4rem; }
  .pos__inhalt { grid-template-columns: 1fr; padding-left: 0; }
  .wisch, .wisch--versetzt { grid-template-columns: 1fr; }
  .wisch--versetzt .wisch__bilder { order: 0; }
  .wisch--versetzt .wisch__text { order: 1; }
  .notdienst { grid-template-columns: 1fr; }
  .betrieb { grid-template-columns: 1fr; }
  .betrieb__foto { max-width: 340px; }
  .anfrage { grid-template-columns: 1fr; }
  .fuss__raster { grid-template-columns: 1fr 1fr; }
  .stimme, .stimme--zwei, .stimme--drei { justify-self: start; max-width: 30rem; }
}

@media (max-width: 860px) {
  .burger { display: block; }
  .kopf__tel, .kopf__rechts .knopf { display: none; }
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2.5rem;
    padding: 0 var(--rand);
    background: var(--zinkweiss);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--kurz) var(--kurve), visibility var(--kurz);
  }
  .menu-offen .nav { opacity: 1; visibility: visible; }
  .nav__punkte { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .nav__punkte a { font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 500; letter-spacing: -0.03em; }
  .nav__fuss { display: grid; gap: 0.8rem; width: 100%; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
  .nav__fuss a { font-size: 1rem; color: var(--blei); text-decoration: none; border-bottom: 1px solid var(--linie); padding-bottom: 0.4rem; }
  .kopf { z-index: 80; }
  .burger { position: relative; z-index: 90; }
  .menu-offen { overflow: hidden; }

  .pos__zeile { grid-template-columns: minmax(0, 1fr) 1.6rem; grid-template-areas: "nr zeichen" "titel zeichen" "mass zeichen"; gap: 0.3rem 1rem; }
  .pos__nr { grid-area: nr; }
  .pos__titel { grid-area: titel; }
  .pos__mass { grid-area: mass; text-align: left; }
  .pos__zeichen { grid-area: zeichen; align-self: center; }
  .felder--zwei { grid-template-columns: 1fr; }
  .fuss__raster { grid-template-columns: 1fr; }

  /* Die Leiste: ein Dachdecker wird angerufen, nicht angeschrieben. */
  .leiste {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    background: var(--zinkweiss);
    border-top: 1px solid var(--linie);
  }
  .leiste .knopf { justify-content: center; border-radius: 0; }
  .leiste .knopf--linie { border-color: transparent; }
  .cookie:not([hidden]) ~ .leiste { display: none; } /* solange das Cookie-Banner offen ist, gibt es die Leiste nicht — es lag ohnehin darüber */
  body { padding-bottom: 56px; }
}

@media (max-width: 520px) {
  .held__titel { font-size: clamp(2rem, 9vw, 2.6rem); }
  .stimme__satz { font-size: 1.2rem; }
}

/* --- Ruhe ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .hat-io.js .zeig { opacity: 1 !important; translate: none !important; }
  .hat-io.js .zeig--bild img, .hat-io.js .zeig--bild video { opacity: 1 !important; scale: none !important; }
  .js .parallax img { transform: none !important; }
  .js .masslinie[data-masslinie] { --m: 1; }
}

/* --- Druck ---------------------------------------------------------------- */
@media print {
  .kopf, .skala, .leiste, .burger { display: none; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .abschnitt--dunkel { background: #fff; color: #000; }
  .abschnitt--dunkel .lead, .kosten dt { color: #333; }
  .kosten dd, .notdienst__nummer { color: #000; }
  .pos__auf > summary + * { display: block !important; }
}

/* --- Cookie-Banner (seit 2026-09-11) ---------------------------------------
   Das Markup baut cookies.js — dieselbe Datei auf allen fünf Handwerk-Seiten.
   Hier nur das Aussehen, in der Sprache dieser Seite: Zinkweiß mit einer
   Bleikante, Rundung 0, kein Schatten, Space Grotesk im Titel, Patina für
   Knöpfe und Schalter, das Kleingedruckte in der Maschinenschrift.
   „Alle akzeptieren" und „Nur notwendige" sind gleich stark — Ablehnen darf
   nicht mühsamer sein als Zustimmen. Unten links, auf dem Telefon unten über
   die volle Breite. `[hidden]` braucht bei `.cookie__details` eine eigene
   Regel, weil `display: grid` die des Browsers schlägt. */
.cookie { position: fixed; z-index: 300; left: var(--rand); bottom: 1.25rem; width: min(31rem, calc(100% - 2 * var(--rand))); background: var(--zinkweiss); color: var(--blei); border: 1px solid var(--blei); font-family: var(--schrift-text); opacity: 0; translate: 0 1rem; transition: opacity .35s var(--kurve), translate .35s var(--kurve); }
.cookie--da { opacity: 1; translate: 0 0; }
/* Die Absatzabstände der Seite gelten hier nicht — das Raster setzt sie. */
.cookie p { margin: 0; }
.cookie__innen { display: grid; gap: .9rem; padding: 1.4rem 1.5rem 1.2rem; max-height: calc(100svh - 2.5rem); overflow-y: auto; }
.cookie__titel { font-family: var(--schrift-titel); font-weight: 500; font-size: 1.35rem; line-height: 1.1; letter-spacing: -.02em; }
.cookie__text { font-size: .9rem; line-height: 1.55; color: var(--zink); }
.cookie__text a { color: var(--patina); }
.cookie__details { display: grid; border-top: 1px solid var(--linie); }
.cookie__details[hidden] { display: none; }
.cookie__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding-block: .8rem; border-bottom: 1px solid var(--linie); }
label.cookie__zeile { cursor: pointer; }
.cookie__art b { display: block; font-family: var(--schrift-titel); font-weight: 600; font-size: .95rem; }
.cookie__art span { display: block; margin-top: .15rem; font-size: .8rem; line-height: 1.45; color: var(--zink); }
.cookie__immer { font-family: var(--schrift-mass); font-weight: 500; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--patina); }
.cookie__schalter { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 2.6rem; height: 1.4rem; margin: 0; border: 1px solid var(--blei); background: var(--zinkweiss); cursor: pointer; transition: background-color var(--kurz) var(--kurve), border-color var(--kurz) var(--kurve); }
.cookie__schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.4rem - 8px); height: calc(1.4rem - 8px); background: var(--zink); transition: translate var(--kurz) var(--kurve), background-color var(--kurz) var(--kurve); }
.cookie__schalter:checked { background: var(--patina); border-color: var(--patina); }
.cookie__schalter:checked::after { translate: 1.2rem 0; background: var(--zinkweiss); }
.cookie__schalter:focus-visible, .cookie__knopf:focus-visible, .cookie__text a:focus-visible { outline: 2px solid var(--patina); outline-offset: 3px; }
.cookie__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.cookie__knopf { flex: 1 1 9rem; padding: .85em 1em; border: 1px solid var(--patina); background: var(--patina); color: var(--zinkweiss); font-family: var(--schrift-titel); font-weight: 600; font-size: .9rem; cursor: pointer; transition: background-color var(--kurz) var(--kurve), border-color var(--kurz) var(--kurve); }
.cookie__knopf:hover { background: var(--blei); border-color: var(--blei); }
.cookie__knopf--leise { flex: 0 0 auto; background: transparent; border-color: transparent; color: var(--patina); text-decoration: underline; text-underline-offset: .22em; }
.cookie__knopf--leise:hover { background: transparent; border-color: transparent; color: var(--blei); }
.cookie--offen .cookie__knopf--leise { flex: 1 1 100%; border-color: var(--patina); text-decoration: none; }
.cookie__prototyp { font-family: var(--schrift-mass); font-weight: 500; font-size: .68rem; line-height: 1.55; color: var(--zink); }
@media (max-width: 600px) {
  .cookie { left: 0; right: 0; bottom: 0; width: auto; border-width: 1px 0 0; }
  .cookie__innen { padding: 1.2rem var(--rand) 1rem; max-height: 85svh; }
}
.cookie-link { appearance: none; padding: 0; border: 0; background: none; font: inherit; color: var(--blei); text-decoration: underline; text-decoration-color: var(--linie); text-decoration-thickness: 1px; text-underline-offset: .22em; cursor: pointer; }
.cookie-link:hover { color: var(--patina); text-decoration-color: currentColor; }