/* Dettlaff Heizung Sanitär (Beispielseite von Hebel), Richtung D1 Schild (24.10.2026).
   Die Seite spricht wie das Schild am Betrieb: schmale Versalien für Titel und Knöpfe, die Nummer gross
   als Schrift, flache Blöcke, Anliegen als Zeilen. Kupfer ist der Anruf, Petrol trägt Titel, Anfrage,
   Linien und Fuss, Graphit ist Text, Kalk ist Grund. Grosse Flächen sind Fotos und der helle Grund. */

@font-face { font-family: 'Barlow'; src: url('/schriften/barlow-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/schriften/barlow-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/schriften/barlow-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/schriften/barlow-condensed-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/schriften/barlow-condensed-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --kupfer: #a3561f;        /* Anruf, Nummer, Hover-Linien; 4,7:1 auf Kalk, 5,1:1 auf Grund */
  --kupfer-hell: #b5652b;   /* nur Schrift ab 24 px */
  --kupfer-dunkel: #8a4718; /* Hover der Kupferflächen, Schrift im Beispiel-Hinweis */
  --kupfer-licht: #f3c9a6;  /* Fokus und Gewerke auf Petrol, 6:1 */
  --petrol: #1d4e59;
  --petrol-dunkel: #153c45;
  --graphit: #22282b;
  --grund: #f8fafa;         /* neutrales, leicht kühles Weiss */
  --kalk: #eaf0ef;          /* ruhige Abschnitte: Ablauf, Kontakt, Fotos-Unterlage */
  --weiss: #ffffff;
  --fehler: #a8261b;
  --fokus: var(--petrol);

  --titel: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --text: 'Barlow', Arial, sans-serif;

  --t-klein: 15px;
  --t-text: 18px;
  --t-gross: 20px;
  --t-knopf: 19px;
  --t-h3: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  --t-h2: clamp(2.5rem, 1.7rem + 2.6vw, 4rem);
  --t-h1: clamp(2.75rem, 1.9rem + 2.4vw, 4.25rem);
  --t-nummer: clamp(2.75rem, 2.2rem + 1.6vw, 3.5rem);
  --t-zahl: clamp(5rem, 3rem + 6vw, 8rem);

  --rand: clamp(16px, 4vw, 40px);
  --breite: 1280px;
  --abstand: clamp(56px, 2rem + 6vw, 128px);
  --leiste-h: 36px;
  --kopf-h: 72px;
  --anruf-h: 60px;
  --radius: 6px;
  --radius-foto: 8px;
  --linie: 2px;

  --ein: cubic-bezier(0.22, 1, 0.36, 1);
  --zeit-ui: 200ms;
}
@media (min-width: 1024px) {
  :root { --kopf-h: 84px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--graphit);
  font-family: var(--text);
  font-size: var(--t-text);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: clip;
}
/* Erst mit clip auf html schneidet body selbst ab; sonst geht body-clip an den Viewport und zählt nicht */
html { overflow-x: clip; }
img { max-width: 100%; display: block; }
svg { flex: none; }
/* Links im Text wie Textlinks: Unterstrich 3 px Kupfer */
a { color: var(--petrol); text-decoration-color: var(--kupfer); text-decoration-thickness: 3px; text-underline-offset: 0.25em; }
a:hover { text-decoration-color: var(--kupfer-dunkel); }
/* Links im Fliesstext sind Textlinks: Barlow 600; Links mit eigener Klasse regeln das selbst */
a:not([class]) { font-weight: 600; }
::selection { background: var(--petrol); color: var(--weiss); }
input, textarea { caret-color: var(--petrol); }
h1, h2, h3 { margin: 0; color: var(--petrol); text-wrap: balance; }
h1, h2 { font-family: var(--titel); text-transform: uppercase; line-height: 1; letter-spacing: 0.005em; hyphens: auto; overflow-wrap: break-word; }
h1 { font-size: var(--t-h1); font-weight: 800; }
h2 { font-size: var(--t-h2); font-weight: 800; }
h3 { font-family: var(--text); font-size: var(--t-h3); font-weight: 600; line-height: 1.2; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 2px; }

.rahmen { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sprung { position: absolute; left: 12px; top: -80px; z-index: 60; background: var(--weiss); color: var(--petrol); padding: 12px 18px; border-radius: var(--radius); font-weight: 600; }
.sprung:focus { top: 12px; }

/* Maske für Versalien-Titel: die Zeile steigt von unten auf. Polster oben hält die Umlautpunkte sichtbar. */
.zeile, .maske { display: block; overflow: hidden; padding-block: 0.1em 0.04em; margin-block: -0.1em -0.04em; }
.zeile > span, .maske > span { display: block; }

/* ---------- Knöpfe ---------- */
.pfeil { width: 22px; height: 22px; transition: transform var(--zeit-ui) var(--ein); }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 8px 24px;
  border: 0; border-radius: var(--radius);
  font: 700 var(--t-knopf)/1.1 var(--titel); text-transform: uppercase; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--zeit-ui) ease-out, transform 150ms ease-out;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.knopf:hover .pfeil { transform: translateX(4px); }
.knopf:active { transform: scale(0.98); }
.knopf-anfrage { background: var(--petrol); color: var(--weiss); }
.knopf-anfrage:hover { background: var(--petrol-dunkel); }
.knopf-anruf { background: var(--kupfer); color: var(--weiss); }
.knopf-anruf:hover { background: var(--kupfer-dunkel); }
.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* Nummer als Schrift: der Anruf, gross und unterstrichen */
.nummer {
  display: inline-block; font: 700 var(--t-nummer)/1.05 var(--titel); letter-spacing: 0.01em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--kupfer); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em;
  transition: color var(--zeit-ui) ease-out;
}
.nummer:hover { color: var(--kupfer-dunkel); text-decoration-color: var(--kupfer-dunkel); }

/* Textlink: nur Zweitaktionen */
.textlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 8px;
  font-weight: 600; color: var(--petrol);
  text-decoration: underline; text-decoration-color: var(--kupfer); text-decoration-thickness: 3px; text-underline-offset: 0.3em;
}
.textlink .pfeil { width: 18px; height: 18px; }
.textlink:hover { color: var(--petrol-dunkel); }
.textlink:hover .pfeil { transform: translateX(4px); }

/* ---------- Kopfleiste und Kopf ---------- */
.leiste { background: var(--petrol); color: var(--weiss); font-size: 13px; font-weight: 500; line-height: 1.2; }
.leiste-innen { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: var(--leiste-h); }
.leiste .lang { display: none; }
/* Kennzeichnung steht in jeder Breite; am Handy zweizeilig an Stelle der Zeiten */
.leiste-beispiel { text-align: right; }
.leiste-beispiel > span { display: block; }
.leiste-zeiten { display: none; }
@media (min-width: 720px) {
  .leiste { font-size: 14px; }
  .leiste .lang { display: inline; }
  .leiste .kurz { display: none; }
  .leiste-beispiel > span { display: inline; }
}
@media (min-width: 1100px) {
  .leiste-zeiten { display: inline; }
}

.kopf { position: relative; z-index: 40; background: var(--grund); }
.kopf::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--linie);
  background: var(--petrol); opacity: 0; transition: opacity var(--zeit-ui) ease-out;
}
.kopf.ist-gescrollt::after { opacity: 1; }
.kopf-innen { display: flex; align-items: center; gap: 28px; min-height: var(--kopf-h); }
.marke { display: flex; flex-direction: column; margin-right: auto; padding-block: 10px; text-decoration: none; line-height: 1; }
.marke-name { font: 800 34px/0.9 var(--titel); text-transform: uppercase; letter-spacing: 0.01em; color: var(--petrol); }
.marke-zeile { margin-top: 5px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--kupfer); }
.navi { display: none; gap: 4px; }
.navi a { padding: 10px 10px; font-size: 17px; font-weight: 600; color: var(--petrol); text-decoration: none; }
.navi a:hover { text-decoration: underline; text-decoration-color: var(--kupfer); text-decoration-thickness: 3px; text-underline-offset: 0.35em; }
.kopf-nummer { display: none; font-size: 48px; }
.kopf-anfrage { display: none; min-height: 52px; padding-inline: 20px; font-size: 18px; }

/* Menü am Handy und bis 1199 px: ein Aufklapper ohne Skriptpflicht */
.menue { position: static; }
.menue summary {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 4px 8px 12px;
  font: 700 20px/1 var(--titel); text-transform: uppercase; letter-spacing: 0.06em; color: var(--petrol);
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.menue summary::-webkit-details-marker { display: none; }
.menue-zeichen { position: relative; width: 22px; height: 14px; }
.menue-zeichen::before, .menue-zeichen::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: transform var(--zeit-ui) var(--ein), top var(--zeit-ui) var(--ein);
}
.menue-zeichen::before { top: 2px; }
.menue-zeichen::after { top: 10px; }
.menue[open] .menue-zeichen::before { top: 6px; transform: rotate(45deg); }
.menue[open] .menue-zeichen::after { top: 6px; transform: rotate(-45deg); }
.menue-feld {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 45;
  background: var(--grund); border-top: var(--linie) solid var(--petrol); border-bottom: var(--linie) solid var(--petrol);
}
.menue-feld ul { list-style: none; margin: 0 auto; padding: 8px var(--rand) 16px; max-width: calc(var(--breite) + 2 * var(--rand)); }
.menue-feld a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px;
  border-bottom: var(--linie) solid var(--petrol);
  font-size: var(--t-gross); font-weight: 600; color: var(--petrol); text-decoration: none;
}
.menue-feld a:hover { border-bottom-color: var(--kupfer); }
.menue-feld a:hover .pfeil { transform: translateX(4px); }

@media (min-width: 1024px) {
  .kopf { position: sticky; top: 0; }
  html { scroll-padding-top: calc(var(--kopf-h) + 16px); }
  .kopf-nummer, .kopf-anfrage { display: inline-flex; }
  .kopf-nummer { display: inline-block; }
}
@media (min-width: 1200px) {
  .navi { display: flex; }
  .menue { display: none; }
}

/* ---------- Anrufleiste: am Handy auf jeder Scrollposition ---------- */
.anrufleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: calc(var(--anruf-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 16px env(safe-area-inset-bottom, 0px);
  background: var(--kupfer); color: var(--weiss);
  font: 700 22px/1 var(--titel); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none;
  transition: background-color var(--zeit-ui) ease-out;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.anrufleiste:hover { background: var(--kupfer-dunkel); }
.anrufleiste:active { background: var(--kupfer-dunkel); }
.anrufleiste:focus-visible { outline: 3px solid var(--weiss); outline-offset: -8px; }
.anrufleiste svg { width: 22px; height: 22px; }
@media (max-width: 1023px) {
  body { padding-bottom: calc(var(--anruf-h) + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: calc(var(--anruf-h) + 16px); }
}
@media (min-width: 1024px) {
  .anrufleiste { display: none; }
}

/* ---------- Fotos ---------- */
.foto { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-foto); background: var(--kalk); }
.foto img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.beispiel {
  position: absolute; right: 10px; bottom: 10px;
  font-size: 13px; font-weight: 600; line-height: 1;
  padding: 5px 8px; border-radius: 4px;
  background: var(--graphit); color: var(--weiss);
}
/* Etikett unten rechts unter dem Foto, nicht darauf; der Rahmen um das Bild schneidet den Zoom ab */
.foto-unter { display: flex; flex-direction: column; overflow: visible; background: none; }
.foto-unter .foto-bild { flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: inherit; background: var(--kalk); }
.foto-unter .beispiel { position: static; align-self: flex-end; padding: 6px 0 0; border-radius: 0; background: none; color: var(--graphit); }

/* ---------- Held ---------- */
.held { padding-block: 4px 40px; }
.held-raster { display: grid; gap: 20px; }
.held-foto { order: -1; }
.held-foto .foto-bild { aspect-ratio: 16 / 9; }
.held-satz { margin-top: 14px; max-width: 30em; }
.held-nummer { margin-top: 18px; }
.held-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 20px; }
@media (max-width: 599px) {
  .held-reihe { gap: 12px; margin-top: 18px; }
  .held-reihe .knopf { width: 100%; justify-content: space-between; }
}
@media (min-width: 1024px) {
  .held { padding-block: 0; }
  .held-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; align-items: center; }
  /* Foto läuft rechts bis an den Rand, Ecken bleiben 8 px rund; unten bleibt Platz für die Anlass-Zeilen im ersten Bildschirm */
  .held-foto {
    order: 0; aspect-ratio: auto; height: clamp(460px, calc(100svh - var(--leiste-h) - var(--kopf-h) - 174px), 760px);
    margin-inline: 0 calc(-1 * max(var(--rand), (100vw - var(--breite)) / 2));
  }
  .held-foto .foto-bild { aspect-ratio: auto; }
  /* Das Foto läuft rechts aus dem Raster; das Etikett fluchtet mit seiner linken Kante */
  .held-foto .beispiel { align-self: flex-start; }
  .held-satz { margin-top: 18px; }
  .held-nummer { margin-top: 22px; }
  .held-reihe { margin-top: 24px; }
}

/* ---------- Anlass-Zeilen: das Anliegen in eigenen Worten, ein Klick wählt es im Formular vor ---------- */
.anlass { padding-block: 8px 0; }
.anlass-frage { font-size: var(--t-gross); font-weight: 600; color: var(--graphit); }
.anlass-liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.anlass-zeile {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding-block: 10px;
  font-size: var(--t-gross); font-weight: 600; line-height: 1.25; color: var(--petrol); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.anlass-linie {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--linie);
  background: var(--petrol); transform-origin: 0 50%;
  transition: background-color var(--zeit-ui) ease-out;
}
.anlass-zeile:hover .anlass-linie { background: var(--kupfer); }
.anlass-zeile:hover .pfeil { transform: translateX(4px); }
.anlass-zeile:active .anlass-text { transform: translateX(2px); }
.anlass-zeile .pfeil { color: var(--petrol); }
@media (min-width: 600px) and (max-width: 1023px) {
  .anlass-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 1024px) {
  .anlass { padding-block: 22px 0; }
  .anlass-liste { display: flex; flex-wrap: wrap; column-gap: 24px; margin: 0; }
  .anlass-liste li { flex: 1 1 auto; }
  .anlass-zeile { font-size: 18px; gap: 12px; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--abstand); }
.abschnitt-kopf { display: grid; gap: 18px; max-width: 44rem; margin-bottom: clamp(32px, 4vw, 56px); }
.abschnitt-kopf p { font-size: var(--t-text); color: var(--graphit); max-width: 34em; }

/* Leistungen im Wechsel links und rechts. Foto 4:3 überall: in 3:2 schnitt der Rahmen am Handy den
   Heizkörper oben und unten an. Ab 900 px ist das Foto die schmalere Spalte, das hält jede Reihe flach. */
.leistungen { padding-top: clamp(56px, 2rem + 4vw, 96px); }
.leistung { display: grid; gap: 20px; align-items: center; }
.leistung + .leistung { margin-top: clamp(48px, 5vw, 72px); }
.leistung-foto { aspect-ratio: 4 / 3; }
.leistung-text { display: grid; gap: 14px; justify-items: start; }
.leistung-text > p { max-width: 30em; }
.punkte { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.punkte li { position: relative; padding-left: 28px; }
.punkte li::before { content: ''; position: absolute; left: 0; top: 0.78em; width: 16px; height: var(--linie); background: var(--petrol); }
@media (min-width: 900px) {
  .leistung { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); }
  .leistung-gespiegelt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .leistung-gespiegelt .leistung-foto { order: 2; }
  /* Text rückt an das Foto, damit der Spalt in jeder Reihe gleich ist und nicht nur links vom Foto */
  .leistung-gespiegelt .leistung-text { justify-self: end; width: min(100%, 30em); }
}

/* Ablauf: echte Abfolge, darum Ziffern; die Linie füllt sich beim Scrollen. Sie läuft in Petrol von
   Ziffer zu Ziffer, mit gleicher Luft davor und danach (--luft, Kalk-Fläche hinter jeder Ziffer), und
   endet an der letzten. Die Schiene ist dieselbe Linie gestrichelt, also nur Petrol: die Füllung endet
   immer auf ihr. Ohne Skript und bei reduzierter Bewegung steht die Füllung ganz. */
.ablauf { background: var(--kalk); }
.ablauf-schiene { position: relative; --luft: 12px; }
.ablauf-linie {
  position: absolute; left: 17px; top: 8px; bottom: 8px; width: var(--linie);
  background: linear-gradient(var(--petrol) 50%, transparent 0) 0 0 / 100% 8px; /* taste-skill-ignore: harte Stopps, Strichmuster, kein Verlauf */
}
.ablauf-fuellung { position: absolute; inset: 0; background: var(--petrol); transform-origin: 50% 0; }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; counter-reset: schritt; }
.schritt { position: relative; padding-left: 64px; display: grid; gap: 10px; align-content: start; counter-increment: schritt; }
.schritt::before {
  content: counter(schritt); position: absolute; left: 0; top: calc(-1 * var(--luft)); width: 36px;
  padding-block: calc(var(--luft) - 2px) calc(var(--luft) + 2px); /* Ziffer hat oben mehr Weissraum als unten */
  background: var(--kalk); text-align: center;
  font: 700 48px/1 var(--titel); color: var(--petrol); font-variant-numeric: lining-nums;
}
/* Unter der letzten Ziffer führt die Linie nirgends hin, die Kalk-Fläche deckt den Rest. */
.schritt:last-child::after { content: ''; position: absolute; left: 0; top: calc(48px + var(--luft)); bottom: 0; width: 36px; background: var(--kalk); }
.schritt p { max-width: 30em; }
@media (min-width: 900px) {
  .ablauf-schiene { --spalt: clamp(32px, 4vw, 64px); --luft: 16px; }
  /* endet an der linken Kante der dritten Spalte, also hinter der Kalk-Fläche der "3" */
  .ablauf-linie {
    left: 0; right: calc((100% - 2 * var(--spalt)) / 3); top: 32px; bottom: auto; width: auto; height: var(--linie);
    background: linear-gradient(90deg, var(--petrol) 50%, transparent 0) 0 0 / 8px 100%; /* taste-skill-ignore: harte Stopps, Strichmuster, kein Verlauf */
  }
  .ablauf-fuellung { transform-origin: 0 50%; }
  .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalt); }
  .schritt { padding-left: 0; padding-top: 84px; }
  .schritt::before { top: 0; left: calc(-1 * var(--luft)); width: auto; padding: 0 var(--luft); font-size: 64px; }
  .schritt:last-child::after { content: none; }
}

/* Betrieb */
.betrieb-raster { display: grid; gap: 40px; align-items: center; }
.betrieb-text { display: grid; gap: 18px; }
.betrieb-text > h2 { margin-bottom: 6px; }
.betrieb-satz { font-size: var(--t-text); }
.betrieb-text > p { max-width: 32em; }
.betrieb-foto { aspect-ratio: 4 / 3; }
.fakten { margin: 10px 0 0; display: grid; gap: 0; border-top: var(--linie) solid var(--petrol); }
.fakten > div { display: grid; gap: 2px; padding-block: 14px; border-bottom: var(--linie) solid var(--petrol); }
.fakten dt { font-weight: 600; color: var(--petrol); font-size: var(--t-klein); }
.fakten dd { margin: 0; }
.fakten a { display: inline-block; padding-block: 11px; margin-block: -11px; font-weight: 600; }
@media (min-width: 600px) {
  .fakten > div { grid-template-columns: 9rem minmax(0, 1fr); gap: 16px; align-items: baseline; }
  .formular-erfolg .fakten > div { grid-template-columns: 13rem minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .betrieb-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); }
  .betrieb-foto { aspect-ratio: 3 / 2; }
}

[hidden] { display: none !important; }

/* Anfrage und Kontakt */
.kontakt { background: var(--kalk); }
.kontakt-raster { display: grid; gap: 48px; align-items: start; }
.kontakt-info { display: grid; gap: 20px; justify-items: start; }
.kontakt-info > h2 { margin-bottom: 4px; }
.kontakt-info > p { font-size: var(--t-text); max-width: 30em; }
.kontakt-info .fakten { width: 100%; }
@media (min-width: 1024px) {
  .kontakt-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); }
  .kontakt-info { position: sticky; top: calc(var(--kopf-h) + 32px); }
}

/* Formular: ohne Karte, Felder als weisse Flächen mit Petrol-Linie unten */
.formular { display: grid; gap: 24px; }
/* Kurze Hinweise ohne einzelnes Wort in der letzten Zeile */
.hinweis-beispiel { background: var(--weiss); color: var(--kupfer-dunkel); border-radius: var(--radius); padding: 12px 16px; font-size: var(--t-klein); font-weight: 600; text-wrap: pretty; }
.wahl { border: 0; margin: 0; padding: 0; min-width: 0; }
.wahl legend, .feld label { display: block; font-weight: 600; margin-bottom: 10px; padding: 0; color: var(--graphit); }
.feld label .frei { font-weight: 400; color: var(--graphit); }
/* Auswahl als Zeilen wie die Anlass-Zeilen: Linie 2 px Petrol, keine Kästchen */
.wahl-felder { display: grid; column-gap: 32px; }
.wahl-felder label {
  display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding-block: 8px; border-bottom: var(--linie) solid var(--petrol);
  color: var(--petrol); font-weight: 600; line-height: 1.25; cursor: pointer;
  transition: border-color var(--zeit-ui) ease-out;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* Eigener Kreis statt Browser-Radio, damit der Fokusring rund mitläuft; der Punkt ist die Inhaltsfläche */
.wahl-felder input {
  flex: none; width: 24px; height: 24px; margin: 0; padding: 4px; appearance: none; -webkit-appearance: none;
  border: var(--linie) solid var(--petrol); border-radius: 50%; background: transparent; background-clip: content-box; cursor: pointer;
  transition: background-color var(--zeit-ui) ease-out;
}
.wahl-felder input:checked { background-color: var(--petrol); }
.wahl-felder label:hover { border-bottom-color: var(--kupfer); }
.wahl-felder input:focus-visible { outline: 3px solid var(--kupfer); outline-offset: 3px; }
/* Liegt der Tastaturfokus in der Gruppe, färbt nur er die Linie. Sonst färbte ein ruhender Mauszeiger
   eine zweite Zeile, und die Linie unter "Heizung" sah aus wie der Fokus auf "Sanitär und Bad". */
.wahl-felder label:has(input:focus-visible) { border-bottom-color: var(--kupfer); }
.wahl-felder:has(input:focus-visible) label:not(:has(input:focus-visible)):hover { border-bottom-color: var(--petrol); }
@media (min-width: 600px) {
  .wahl-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wahl-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.feld input, .feld textarea {
  width: 100%; min-height: 56px; padding: 14px 16px;
  font: inherit; color: var(--graphit);
  background: var(--weiss); border: 0; border-bottom: var(--linie) solid var(--petrol); border-radius: var(--radius) var(--radius) 0 0;
  transition: border-color var(--zeit-ui) ease-out;
}
.feld textarea { min-height: 112px; resize: vertical; }
.feld input::placeholder, .feld textarea::placeholder { color: #66707a; }
/* Der Fokusrahmen liegt innen auf der Linie; aussen ergab er mit der Fehlerlinie unten einen Doppelrand */
.feld input:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--petrol); outline-offset: -3px; }
.feld [aria-invalid='true']:focus-visible { outline-color: var(--fehler); }
/* Fotofeld wie die übrigen Felder; der Auswahlknopf ist eine Zweitaktion und sieht aus wie ein Textlink */
.feld input[type='file'] { padding: 6px 16px; cursor: pointer; }
.feld input[type='file']::file-selector-button {
  min-height: 44px; margin: 0 16px 0 0; padding: 0;
  font-family: inherit; font-size: var(--t-text); font-weight: 600; line-height: 1.2; color: var(--petrol);
  background: none; border: 0; border-radius: 0; cursor: pointer;
  text-decoration: underline 3px var(--kupfer); text-underline-offset: 0.3em;
}
.feld input[type='file']:hover::file-selector-button { text-decoration-color: var(--kupfer-dunkel); }
/* Unten sind die Felder eckig, die Fehlerlinie wird nur dicker und rot */
.feld [aria-invalid='true'] { border-bottom-width: 3px; border-bottom-color: var(--fehler); }
.feld-paar { display: grid; gap: 22px; }
@media (min-width: 600px) { .feld-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feld-fehler { color: var(--fehler); font-size: var(--t-klein); font-weight: 600; margin-top: 6px; }
.feld-fehler:empty { display: none; }
/* Nur unten eine Linie: oben lag sie 28 px parallel zur Linie des Telefonfelds */
/* Die Linie gehört zur Kopfzeile; aufgeklappt trägt jedes Feld seine eigene, sonst liefe unten eine zweite mit */
.freiwillig summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding-block: 10px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--petrol); border-bottom: var(--linie) solid var(--petrol);
}
.freiwillig summary::-webkit-details-marker { display: none; }
.freiwillig summary .pfeil { transform: rotate(90deg); }
.freiwillig[open] summary .pfeil { transform: rotate(-90deg); }
.freiwillig .feld-paar { margin: 22px 0; }
.einwilligung { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
/* Eigenes Kästchen wie die Kreise der Auswahl; bei Fehler wird der Rand 3 px rot wie die Linie der Felder */
.einwilligung input {
  flex: none; width: 26px; height: 26px; margin: 1px 0 0; appearance: none; -webkit-appearance: none;
  background: var(--weiss) center / 20px no-repeat; border: var(--linie) solid var(--petrol); border-radius: 4px; cursor: pointer;
  transition: background-color var(--zeit-ui) ease-out, border-color var(--zeit-ui) ease-out;
}
.einwilligung input:checked {
  background-color: var(--petrol);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E");
}
.einwilligung input[aria-invalid='true'] { border-width: 3px; border-color: var(--fehler); }
.einwilligung input:focus-visible { outline: 3px solid var(--kupfer); outline-offset: 3px; }
.einwilligung + .feld-fehler { margin-top: -14px; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: Honigtopf, keine Linie */
.hinweis-beispiel-knopf { margin-bottom: -14px; }
.knopf-senden { justify-self: start; min-width: 18rem; justify-content: space-between; }
.knopf-senden[disabled] { opacity: 0.7; cursor: progress; }
@media (max-width: 599px) { .knopf-senden { justify-self: stretch; min-width: 0; } }
.formular-meldung:empty { display: none; }
.formular-meldung { font-weight: 600; }
.formular-meldung.ist-fehler { color: var(--fehler); }
/* Eigene Fläche, damit die Bestätigung nicht am Abschnitt darüber hängt */
.formular-erfolg { display: grid; gap: 14px; background: var(--weiss); border-radius: var(--radius); padding: 24px 20px 28px; }
.formular-erfolg .hinweis-beispiel { padding: 0; }
.formular-erfolg .knopf { justify-self: start; margin-top: 6px; }
/* Am Handy steht die Anrufleiste direkt darunter; ein zweiter Knopf mit demselben Text wäre doppelt */
@media (max-width: 1023px) { .nur-breit { display: none; } }
/* Der Fokus springt nur zum Vorlesen hierher; ein Rahmen sähe aus wie ein Kasten */
.formular-erfolg:focus { outline: none; }
.formular-erfolg h3 { font-size: var(--t-h3); }
.formular-erfolg p { text-wrap: pretty; }

/* ---------- Fuss ---------- */
.fuss { background: var(--petrol); color: var(--weiss); padding-block: 56px 32px; --fokus: var(--kupfer-licht); }
/* Kupfer #A3561F hebt sich vom Petrol kaum ab, im Fuss trägt Kupfer-Licht den Unterstrich */
.fuss a { color: var(--weiss); text-decoration-color: var(--kupfer-licht); }
.fuss a:hover { color: var(--kupfer-licht); text-decoration-color: var(--kupfer-licht); }
.fuss-raster { display: grid; gap: 24px; }
.fuss-marke { display: grid; gap: 14px; align-content: start; }
.fuss-name { display: flex; flex-direction: column; line-height: 1; }
.fuss-name .marke-name { color: var(--weiss); font-size: 40px; }
.fuss-name .marke-zeile { color: var(--kupfer-licht); }
.fuss-navi { display: flex; flex-wrap: wrap; column-gap: 24px; }
.fuss-navi a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* Abstand statt Trennlinie: eine halbtransparente Linie wäre eine Farbe ausserhalb der Tabelle */
.fuss-unten { display: grid; gap: 16px; margin-top: 48px; font-size: var(--t-klein); color: var(--kalk); }
@media (min-width: 900px) {
  .fuss-raster { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); }
  .fuss-navi { flex-direction: column; align-items: flex-start; }
}

/* ---------- Nebenseiten ---------- */
.schlicht { max-width: calc(46rem + 2 * var(--rand)); margin-inline: auto; padding: clamp(48px, 8vw, 96px) var(--rand) var(--abstand); }
.schlicht h1 { margin-bottom: 24px; }
.schlicht h2 { font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.125rem); margin: 44px 0 10px; }
.schlicht p + p { margin-top: 14px; }
.schlicht .nachweis-liste { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.schlicht .knopfreihe { margin-top: 40px; }
.hinweis-beispiel-band { background: var(--weiss); color: var(--kupfer-dunkel); border-radius: var(--radius); padding: 14px 18px; font-weight: 600; }
.luecke { background: var(--weiss); color: var(--kupfer-dunkel); border-radius: 3px; padding: 0 4px; }

/* ---------- Bewegung ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
/* Nur der erste Bildschirm startet versteckt, und nur wenn Bewegung erlaubt ist; fällt das Skript aus,
   zeigt der Notnagel im Kopf alles nach 2,5 s. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.ohne-bewegung) .held-titel .zeile > span { transform: translateY(110%); }
  .js:not(.ohne-bewegung) .held [data-auf] { opacity: 0; }
  .js:not(.ohne-bewegung) .anlass-linie { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}