/* styles.css – Layout & Komponenten, Ingenieurbüro René Gansmüller.
   Stil nach der Referenz-Analyse (docs/REFERENZ-ANALYSE.md, 28.09.2026):
   heller Grund, eine Grotesk, harte Schatten ohne Unschärfe in Textfarbe
   (Stufen 3/5/8/12), abgesetzte Flächen mit großem Radius, Akzent selten.
   Bewegung nur bei Hover und Fokus. Alle Werte aus tokens.css. */

/* ---------------------------------------------------------------------------
   Layout-Raster: drei Breiten statt einer.
     (ohne Klasse)   lesbare Textbreite
     .breakout       breiter: Karten, Bilder, Register
     .full           randlos
   --spur ist der Abstand der .breakout-Kante zum Fensterrand. Header und
   Hero nutzen dieselbe Formel, damit alle linken Kanten fluchten.
   Gemessen mit: node scripts/layout-check.mjs <datei.html>
--------------------------------------------------------------------------- */
.layout {
  --spur: max(var(--gutter), (100% - var(--breakout-max)) / 2);
  display: grid;
  grid-template-columns:
    [full-start] var(--spur)
    [breakout-start] minmax(0, 1fr)
    [content-start] min(100% - var(--spur) * 2, var(--maxw-content)) [content-end]
    minmax(0, 1fr) [breakout-end]
    var(--spur) [full-end];
}
.layout > *         { grid-column: content; }
.layout > .breakout { grid-column: breakout; }
.layout > .full     { grid-column: full; }

/* ---------------------------------------------------------------------------
   Grundlagen
--------------------------------------------------------------------------- */
body { color: var(--color-text-muted); font-weight: var(--weight-body); }
h1, h2, h3 { color: var(--color-text); }
h1, h2 {
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 {
  font-size: var(--step-1);
  font-weight: var(--weight-heading);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
}
p, li, dd { text-wrap: pretty; }
strong { color: var(--color-text); font-weight: var(--weight-heading); }
main:focus { outline: none; }
a, button, label, summary { -webkit-tap-highlight-color: transparent; }

/* Label-Stimme: Versal, 600, leicht gesperrt (Knöpfe, Kicker, Feldnamen). */
.label {
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  line-height: 1.4;
}
.kicker {
  margin-bottom: 1rem;
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--color-primary-strong);
}
.lead { margin-top: 1.25rem; font-size: var(--step-1); line-height: 1.45; max-width: 44ch; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprunglink {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  padding: 0.75rem 1rem;
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: var(--weight-label);
  transition: top var(--dur-schnell) var(--ease-out);
}
.sprunglink:focus { top: 0.5rem; }

.link {
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-schnell) var(--ease-out);
}
@media (hover: hover) { .link:hover { color: var(--color-text); } }

/* ---------------------------------------------------------------------------
   Knöpfe
   Primär: eckig, gefüllt (CI-Blau), harter Schatten, hebt sich bei Hover.
   Kontur: 2-px-Rahmen, füllt sich bei Hover dunkel. Die Maßlinie (freigegeben
   an Station 2) bleibt als Pfeil im Knopf und fährt bei Hover aus.
   Kontrast: bg auf primary-strong 5,7:1 · bg auf text 13,7:1.
--------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-height: 3.25rem;
  padding: 0.7rem 1.5rem;
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.2;
  text-align: left;
  color: var(--color-bg);
  background: var(--color-primary-strong);
  border: 2px solid var(--color-text);
  border-radius: 0;
  box-shadow: var(--schatten-2);
  cursor: pointer;
  transition: transform var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out),
              background-color var(--dur-schnell) var(--ease-out),
              color var(--dur-schnell) var(--ease-out);
}
@media (hover: hover) {
  .btn:hover { transform: translate(0, -4px); box-shadow: var(--schatten-3); }
}
.btn:active { transform: translate(3px, 3px); box-shadow: var(--schatten-1); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

.btn--kontur {
  color: var(--color-text);
  background: transparent;
  box-shadow: none;
}
@media (hover: hover) {
  .btn--kontur:hover { transform: none; box-shadow: none; background: var(--color-text); color: var(--color-bg); }
}
.btn--kontur:active { transform: translateY(1px); box-shadow: none; }
.btn--klein { min-height: 2.75rem; padding: 0.5rem 1.1rem; }
.btn--breit { width: 100%; }

/* Maßlinie: Endstrich links, Linie, Pfeilspitze rechts. */
.mass {
  position: relative;
  flex: none;
  width: 1.75rem;
  height: 0.8rem;
  border-left: 2px solid currentColor;
}
.mass::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  transform-origin: left center;
  transition: transform var(--dur-normal) var(--ease-out);
}
.mass::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  margin-top: -0.225rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-normal) var(--ease-out);
}
@media (hover: hover) {
  .btn:hover .mass::before, .textlink:hover .mass::before { transform: scaleX(1.35); }
  .btn:hover .mass::after, .textlink:hover .mass::after { transform: translateX(0.6rem) rotate(45deg); }
}

/* Textlink mit kleiner Maßlinie (Zeilen, Partnerzeile). */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-text);
  transition: color var(--dur-schnell) var(--ease-out), border-color var(--dur-schnell) var(--ease-out);
}
.textlink .mass { width: 1.4rem; height: 0.7rem; }
@media (hover: hover) { .textlink:hover { color: var(--color-primary-strong); border-bottom-color: var(--color-primary-strong); } }

.aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 1.25rem; }

/* Mikro-Claim unter jedem CTA zum Formular: überall gleich */
.cta-mit-claim { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.cta-claim { font-size: 0.875rem; line-height: 1.3; color: var(--color-text-muted); }
.cta-mit-claim--dunkel .cta-claim { color: var(--color-text-muted-on-dark); }

/* ---------------------------------------------------------------------------
   Karten und Flächen
--------------------------------------------------------------------------- */
.karte {
  background: var(--color-karte);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-karte);
  transition: box-shadow var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out),
              transform var(--dur-normal) var(--ease-out);
}
@media (hover: hover) {
  .karte:hover { border-color: var(--color-text); box-shadow: var(--schatten-3); transform: translate(-2px, -2px); }
}

/* Abgesetzte Fläche: 16 px vom Rand eingerückt, großer Radius (Referenz). */
.panel {
  /* Innen dieselbe Spur wie die Seite: Panel-Rand (16 px) abziehen, damit
     Karten im Panel mit den Sektionen außerhalb fluchten. */
  --spur: max(var(--space-s), var(--gutter) - var(--space-s), (100% - var(--breakout-max)) / 2);
  margin-inline: var(--space-s);
  background: var(--color-surface);
  border-radius: var(--radius-panel);
}

/* Demo-Hinweis (CLAUDE.md §11): sichtbar, direkt über dem Inhalt, kein Band.
   Malve der Bildmarke als Fläche, Text in --color-text (9,3:1). */
/* Als Zeile mit Linie links statt als Kasten (Überarbeitung 2); die Malve
   der Bildmarke bleibt als Kennfarbe der Linie. */
.demo-hinweis {
  padding: 0.15rem 0 0.15rem 0.9rem;
  color: var(--color-text);
  border-left: 3px solid var(--color-accent-linie);
  font-size: var(--step--1);
  line-height: 1.5;
  max-width: 68ch;
}
.demo-hinweis strong { margin-right: 0.25em; }

/* ---------------------------------------------------------------------------
   Header: fix, hell, 2-px-Unterkante in Textfarbe
--------------------------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-text);
}
.kopf__innen {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-height: calc(var(--header-h) - 2px);
  padding-inline: max(var(--gutter), (100% - var(--breakout-max)) / 2);
}
.kopf__logo { display: inline-flex; flex-shrink: 0; align-items: center; min-height: 44px; }
.kopf__logo img { height: 44px; width: auto; }
.kopf__nav {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
  overscroll-behavior: contain;
}
.kopf__nav a {
  white-space: nowrap;
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
  transition: color 150ms var(--ease-out);
}
@media (hover: hover) { .kopf__nav a:hover { color: var(--color-primary-strong); } }
.kopf__nav .btn { display: none; }
.kopf__tel {
  gap: 0.5rem;
  white-space: nowrap;
  font-weight: var(--weight-label);
  color: var(--color-text);
  transition: color 150ms var(--ease-out);
}
@media (hover: hover) { .kopf__tel:hover { color: var(--color-primary-strong); } }
.icon { flex: none; width: 1.15rem; height: 1.15rem; }
.kopf .btn { min-height: 2.75rem; padding: 0.45rem 1.1rem; box-shadow: var(--schatten-1); }
@media (hover: hover) { .kopf .btn:hover { box-shadow: var(--schatten-2); transform: translateY(-2px); } }
.cta-text--kurzfassung { display: none; }
.kopf--kurzfassung .cta-text--voll { display: none; }
.kopf--kurzfassung .cta-text--kurzfassung { display: inline; }
.kurz { display: none; }

.kopf__menue {
  display: none;
  align-items: center;
  gap: 0.55rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.7rem;
  background: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-text);
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-schnell) var(--ease-out), color var(--dur-schnell) var(--ease-out);
}
@media (hover: hover) { .kopf__menue:hover { background: var(--color-text); color: var(--color-bg); } }
.kopf__menue-zeichen { position: relative; width: 1.1rem; height: 0.7rem; }
.kopf__menue-zeichen::before, .kopf__menue-zeichen::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-normal) var(--ease-out), top var(--dur-normal) var(--ease-out);
}
.kopf__menue-zeichen::before { top: 0; }
.kopf__menue-zeichen::after { top: calc(100% - 2px); }
.kopf--offen .kopf__menue-zeichen::before { top: calc(50% - 1px); transform: rotate(45deg); }
.kopf--offen .kopf__menue-zeichen::after { top: calc(50% - 1px); transform: rotate(-45deg); }

html:has(body.is-locked) { overflow: hidden; }

@media (max-width: 1280px) {
  .kopf .kopf__tel { display: none; }
}
@media (max-width: 1100px) {
  .kopf__innen { gap: var(--space-xs); }
  .kopf__logo { margin-right: auto; }
  .kopf__logo img { height: 36px; }
  .lang { display: none !important; }
  .kurz { display: inline; }
  .kopf .btn .mass { display: none; }
  .js .kopf__menue { display: inline-flex; }
  .js .kopf__nav { display: none; }
  html:not(.js) .kopf__innen { flex-wrap: wrap; padding-bottom: 0.25rem; }
  html:not(.js) .kopf__nav { order: 3; width: 100%; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; }
  .js .kopf--offen .kopf__nav {
    display: flex;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 19;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: var(--space-m) var(--gutter);
    background: var(--color-bg);
    overflow-y: auto;
  }
  .js .kopf--offen .kopf__nav a:not(.btn) {
    min-height: 3.5rem;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--step-1-5);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-display);
    text-transform: none;
  }
  .js .kopf--offen .kopf__nav .btn { display: inline-flex; margin-top: var(--space-m); align-self: flex-start; }
}
@media (max-width: 420px) {
  .kopf__logo img { height: 28px; }
  .kopf .btn { padding: 0.4rem 0.7rem; letter-spacing: 0.02em; }
  .kopf__menue { padding: 0 0.55rem; }
  .kopf__menue-text { display: none; }
}
@media (max-width: 400px) {
  .kopf .btn { max-width: 6.8rem; line-height: 1.15; }
}

/* ---------------------------------------------------------------------------
   Abschnitte: Sektionen polstern sich selbst, innen keine Außenabstände an
   den Rändern (erstes und letztes Kind ohne margin).
--------------------------------------------------------------------------- */
.abschnitt { padding-block: clamp(var(--space-l), 7vw, 7rem); }
.abschnitt > :first-child, .panel > :first-child { margin-top: 0; }
.abschnitt > :last-child, .panel > :last-child { margin-bottom: 0; }
.panel.abschnitt { padding-block: clamp(var(--space-l), 7vw, 7rem); }
.abschnitt-kopf { display: grid; justify-items: start; }
/* Zwei Panels untereinander bekommen Luft; zwischen Panel und weißer
   Sektion polstert nur die Sektion. */
.panel + .panel { margin-top: var(--space-s); }

/* ---------------------------------------------------------------------------
   1 · Hero: Zweispalter, links Text, rechts Plankopf-Karte mit 12/12-Schatten
--------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(2rem, 6vh, 5.5rem) clamp(var(--space-l), 7vh, 6rem);
  /* Die hinausgeschobene Karte des Stapels darf keinen Seitenscroll erzeugen */
  overflow-x: clip;
}
/* Desktop mit ausreichender Höhe: der Hero füllt den ersten Bildschirm
   allein, das Bauherren-Band folgt direkt beim Scrollen. Passt der Inhalt
   nicht, wächst der Hero einfach weiter. */
@media (min-width: 1024px) and (min-height: 700px) {
  .hero {
    display: grid;
    align-content: center;
    min-height: calc(100svh - var(--header-h));
    padding-block: clamp(1.5rem, 5vh, 4rem);
  }
}
.hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 32.75rem);
  align-items: center;
  gap: var(--space-l) clamp(var(--space-m), 4vw, 4.5rem);
}
.hero__text { display: grid; justify-items: start; }
/* Marke oben mit Luft darunter, damit der Claim allein als Blickfang steht */
.hero__marke {
  display: grid;
  justify-items: start;
  gap: 0.9rem;
  margin-bottom: clamp(2rem, 6vh, 3.75rem);
}
.plakette {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem;
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  color: var(--color-text);
  background: var(--color-karte);
  border: 2px solid var(--color-text);
  border-radius: 999px;
  box-shadow: var(--schatten-2);
}
.plakette::before { content: ""; width: 0.55rem; height: 0.55rem; background: var(--color-primary-strong); }
/* Langer Claim (Leistung, Region): kleiner als die übrigen H1, damit er in
   drei Zeilen steht und nicht die ganze erste Bildschirmhöhe füllt. */
.hero h1 { max-width: 33ch; font-size: clamp(1.75rem, 1.25rem + 1.8vw, 3rem); line-height: 1.08; text-wrap: balance; }
/* Akzentwort mit Balken darunter (Referenz: 4 px). */
.akzent {
  color: var(--color-primary-strong);
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 0.07em no-repeat;
  padding-bottom: 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero__zeile { margin-top: 1.5rem; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.55; max-width: 52ch; color: var(--color-text-muted); }
.hero .aktionen { margin-top: 2.25rem; }
.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(var(--space-m), 5vw, 5rem);
  width: 100%;
  margin-top: clamp(2.25rem, 5vh, 3.25rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
}
.kennzahlen div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.35rem; }
.kennzahlen dd {
  font-size: var(--step-kennzahl);
  font-weight: var(--weight-display);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-primary-strong);
}
/* Zähler: feste Breite je Stellenzahl, damit beim Hochzählen nichts wackelt */
.zaehler { display: inline-block; font-variant-numeric: tabular-nums; text-align: left; }
.zaehler--2 { min-width: 2ch; }
.zaehler--3 { min-width: 3ch; }
.kennzahlen dt {
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  max-width: 38ch;
}

/* Referenz-Stapel: Karten im Stil eines Plankopfs, übereinander in einer
   Rasterzelle (gleiche Höhe von selbst). data-pos 0 liegt vorn, 1 und 2
   schauen versetzt und leicht gedreht dahinter hervor, alle weiteren warten
   unsichtbar. Fotos höchstens in nativer Größe: max-height über --bild-h,
   Breite automatisch, nie hochskaliert. */
.stapel {
  --bild-h: 11.625rem; /* 186 px = Höhe des flachsten Fotos */
  --stapel-dauer: 0.55s;
  justify-self: end;
  width: min(100%, 32rem);
  display: grid;
  gap: 1.25rem;
}
.stapel__karten {
  display: grid;
  padding: 0 0.75rem 1.25rem 0;
  touch-action: pan-y;
}
.stapel__karte {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  transform-origin: 50% 60%;
  transition:
    transform var(--stapel-dauer) cubic-bezier(0.22, 0.8, 0.24, 1),
    opacity var(--stapel-dauer) var(--ease-out),
    box-shadow var(--dur-normal) var(--ease-out);
}
.stapel__karte[data-pos="0"] { z-index: 3; }
.stapel__karte:not([data-pos="0"]) { box-shadow: none; }
.stapel__karte[data-pos="1"] { z-index: 2; transform: translate(0.5rem, 0.7rem) rotate(2.2deg); }
.stapel__karte[data-pos="2"] { z-index: 1; transform: translate(-0.35rem, 1.2rem) rotate(-2.6deg); }
/* Ab der vierten Karte: deckungsgleich hinter der dritten, also verdeckt */
.stapel__karte:where(:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"])) {
  z-index: 0;
  transform: translate(-0.35rem, 1.2rem) rotate(-2.6deg);
}
/* Hintere Karten nur als Kante: Inhalt gedämpft, damit vorn ruhig bleibt */
.stapel__karte:not([data-pos="0"]) > * { opacity: 0.35; }
.stapel__karte > * { transition: opacity var(--stapel-dauer) var(--ease-out); }
/* Phase 1 des Weiterblätterns: die vordere Karte gleitet seitlich hinaus,
   danach reiht sie sich hinten ein (main.js, initStapel). */
.stapel__karte.ist-weg {
  z-index: 4;
  transform: translate(68%, -0.5rem) rotate(9deg);
  transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0.4);
  transition-duration: calc(var(--stapel-dauer) * 0.6);
}
.stapel__karte.ist-weg--hinten { z-index: 0; }
.stapel--js .stapel__karte[data-pos="0"] { cursor: pointer; }
@media (hover: hover) {
  .stapel--js .stapel__karten:hover .stapel__karte[data-pos="0"]:not(.ist-weg) { transform: translate(-3px, -3px); box-shadow: 15px 15px 0 0 var(--color-text); }
  .stapel--js .stapel__karten:hover .stapel__karte[data-pos="1"]:not(.ist-weg) { transform: translate(0.9rem, 0.8rem) rotate(3.6deg); }
  .stapel--js .stapel__karten:hover .stapel__karte[data-pos="2"]:not(.ist-weg) { transform: translate(-0.7rem, 1.3rem) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .stapel__karte, .stapel__karte > * { transition: none; }
}
/* Schmale Fenster: die Karten sind hoch, schon 2,6° Drehung schieben die
   Ecken über den Fensterrand. Kleinere Drehung, gleicher Stapel-Eindruck. */
@media (max-width: 700px) {
  .stapel__karten { padding-right: 0.5rem; }
  .stapel__karte[data-pos="1"] { transform: translate(0.2rem, 0.6rem) rotate(0.7deg); }
  .stapel__karte[data-pos="2"],
  .stapel__karte:where(:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"])) { transform: translate(-0.2rem, 1rem) rotate(-0.8deg); }
}

.stapel__steuerung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.stapel__steuerung[hidden] { display: none; }
.stapel__knopf {
  display: inline-grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  color: var(--color-text);
  background: var(--color-karte);
  border: 2px solid var(--color-text);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-schnell) var(--ease-out), color var(--dur-schnell) var(--ease-out), transform var(--dur-schnell) var(--ease-out);
}
.stapel__knopf:active { transform: scale(0.94); }
@media (hover: hover) { .stapel__knopf:hover { background: var(--color-text); color: var(--color-bg); } }
.stapel__zaehler {
  min-width: 4.5ch;
  text-align: center;
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* Karte: Schriftfeld einer Bauzeichnung */
.plankopf {
  background: var(--color-karte);
  border: 2px solid var(--color-text);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-4);
  overflow: hidden;
}
.plankopf__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 1.25rem;
  border-bottom: 2px solid var(--color-text);
}
.plankopf__kopf img { height: 28px; width: auto; }
.plankopf__kopf a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  transition: color var(--dur-schnell) var(--ease-out);
}
@media (hover: hover) { .plankopf__kopf a:hover { color: var(--color-text); } }
/* Die Bildfläche nimmt auf, was eine Karte an Höhe übrig hat (alle Karten
   im Stapel sind gleich hoch), statt eines Lochs über dem Schriftfeld. */
.plankopf__objekt {
  flex: 1 0 auto;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.9rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--color-text);
}
/* Passepartout: das Foto sitzt auf einer ruhigen Fläche, statt aufgeblasen zu werden */
.plankopf__bild {
  display: grid;
  place-items: center;
  min-height: calc(var(--bild-h, 11.625rem) + 1.5rem);
  padding: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.plankopf__bild img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--bild-h, 11.625rem);
  border: 1px solid var(--color-text);
}
.plankopf__objekt figcaption { display: grid; gap: 0.3rem; }
.plankopf__objekt figcaption strong { font-size: var(--step-0); line-height: 1.3; }
.schriftfeld { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.schriftfeld > div { padding: 0.75rem 1.25rem 0.8rem; border-bottom: 1px solid var(--color-text); }
.schriftfeld > div:nth-child(odd):not(.schriftfeld__breit) { border-right: 1px solid var(--color-text); }
.schriftfeld__breit { grid-column: 1 / -1; }
.schriftfeld > div:last-child { border-bottom: 0; }
.schriftfeld dt {
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.schriftfeld dd { margin-top: 0.2rem; font-weight: var(--weight-heading); color: var(--color-text); line-height: 1.35; }

/* ---------------------------------------------------------------------------
   2 · Für wen: Kundenprofile in zwei Gruppen, darunter der Projektrahmen
   Gruppe 1 hell, vier Profile im Raster; Gruppe 2 dunkel, zwei Profile
   übereinander. Jede Profilkarte ist ein Link in den Funnel.
--------------------------------------------------------------------------- */
.fuer-wen__kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--space-m) var(--space-l); }
.fuer-wen__kopf p { font-size: var(--step-1); line-height: 1.45; max-width: 48ch; padding-top: 0.35rem; }
/* Für wen (Überarbeitung 3): zwei Wege nebeneinander, großer Gruppenkopf,
   darunter die Rollen als Tabs. Die gewählte Rolle zeigt darunter Beschreibung
   und CTA. Alle Texte liegen übereinander im selben Rasterfeld, deshalb
   springt beim Umschalten nichts (Höhe = längster Text). Ohne JS stehen alle
   Beschreibungen untereinander. */
.wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 0 clamp(var(--space-m), 5vw, 5rem); margin-top: var(--space-m); }
/* Subgrid: Titel, Satz, Rollen und Texte beider Wege stehen auf gleicher Höhe */
.weg { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.weg__titel { align-self: start; font-size: var(--step-1-5); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: 1.1; max-width: 22ch; }
.weg__satz { margin-top: 0.6rem; max-width: 46ch; color: var(--color-text-muted); }
.rollen { display: grid; align-content: start; margin-top: 1.5rem; border-top: 1px solid var(--color-border); }
.rolle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0.75rem 0.25rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  font-family: inherit;
  font-size: var(--step-1);
  font-weight: var(--weight-heading);
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-align: left;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--dur-schnell) var(--ease-out);
}
.rolle::after {
  content: "";
  flex: none;
  width: 0;
  height: 2px;
  background: var(--color-primary-strong);
  transition: width var(--dur-normal) var(--ease-out);
}
.rolle[aria-selected="true"] { color: var(--color-primary-strong); }
.rolle[aria-selected="true"]::after { width: 2rem; }
@media (hover: hover) { .rolle:hover { color: var(--color-primary-strong); } }
.rolle:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.rollen-texte { display: grid; gap: var(--space-m); margin-top: 1.5rem; }
.rollen-text { display: grid; justify-items: start; gap: 0.6rem; }
.rollen-text__rolle { font-size: var(--step--1); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-primary-strong); }
.rollen-text__satz { font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; max-width: 42ch; color: var(--color-text); }
.wege-cta { display: flex; justify-content: center; margin-top: var(--space-l); }
.wege-cta .cta-mit-claim { align-items: center; }
.rollen-text:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
/* mit JS: alle Texte im selben Feld, nur der gewählte sichtbar */
.wege--js .rollen-texte > .rollen-text { grid-area: 1 / 1; visibility: hidden; }
.wege--js .rollen-texte > .rollen-text--aktiv { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .wege--js .rollen-texte > .rollen-text { opacity: 0; transition: opacity var(--dur-normal) var(--ease-out), visibility var(--dur-normal); }
  .wege--js .rollen-texte > .rollen-text--aktiv { opacity: 1; }
}

/* Projektrahmen: Passt gut / Passt weniger, sachlich nebeneinander */
.rahmen {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--space-m);
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 2px solid var(--color-text);
}
.rahmen__titel { font-size: var(--step-1-5); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: 1.05; }
.rahmen__spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
.rahmen__spalte .label { margin-bottom: 0.75rem; }
.rahmen__spalte ul { list-style: none; display: grid; gap: 1rem; }
.rahmen__spalte li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.75rem; max-width: 56ch; }
.rahmen__zeichen { width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; }
.rahmen__spalte--passt .label { color: var(--color-erfolg); }
.rahmen__spalte--passt .rahmen__zeichen { color: var(--color-erfolg); }
.rahmen__spalte--weniger .label { color: var(--color-fehler); }
.rahmen__spalte--weniger .rahmen__zeichen { color: var(--color-fehler); }

/* ---------------------------------------------------------------------------
   3 · Leistungen: zwei große Kacheln randlos (Referenz: Fotokacheln mit
   dunklem Verlauf unten, Nummer, großer Titel), darunter die Aufgaben als
   Schlagworte und zwei kleine Kacheln.
   Bild: <img class="kachel__bild"> als erstes Kind der Kachel. Solange keine
   Datei vorliegt, trägt die dunkle Fläche mit dem Hinweis „Bildplatz“.
--------------------------------------------------------------------------- */
.leistung-bildhinweis { margin-top: var(--space-l); }
.kacheln, .leistung-details { --kachel-innen: clamp(1.5rem, 4vw, 3.5rem); }
.kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin-top: 1rem;
  background: var(--color-bg);
}
.kachel {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(26rem, 40vw, 38rem);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 80% at 85% 10%, oklch(0.32 0.04 245), transparent 60%),
    var(--color-bg-dark);
  color: var(--color-text-on-dark);
}
.kachel::before {
  /* Kennung oben rechts: „Symbolbild“ mit Foto, „Bildplatz“ ohne */
  content: "Bildplatz";
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  z-index: 1;
  padding: 0.15rem 0.45rem;
  font-size: 0.875rem;
  color: var(--color-text-on-dark);
  background: oklch(0.18 0.03 245 / 0.55);
  border-radius: var(--radius-karte);
}
.kachel:has(.kachel__bild)::before { content: "Symbolbild"; }
.kachel__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.kachel__bild--oben { object-position: center 20%; }
.kachel::after {
  /* dunkler Verlauf unten, damit der Text auf jedem Foto lesbar bleibt */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, oklch(0.18 0.03 245 / 0.94) 0%, oklch(0.18 0.03 245 / 0.7) 45%, oklch(0.18 0.03 245 / 0.15) 85%);
}
.kachel__inhalt {
  display: grid;
  justify-items: start;
  gap: 0.9rem;
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--kachel-innen);
  max-width: 44rem;
}
.kachel__nr { font-size: var(--step--1); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); color: var(--color-text-muted-on-dark); font-variant-numeric: tabular-nums; }
.kachel__kicker { font-size: var(--step--1); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-primary-on-dark); margin-bottom: -0.4rem; }
.kachel h3 { font-size: var(--step-2); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: 1; color: var(--color-text-on-dark); }
.kachel p:not(.kachel__nr):not(.kachel__kicker) { font-size: var(--step-0); line-height: 1.5; max-width: 46ch; color: var(--color-text-on-dark); }
.kachel .btn { margin-top: 0.5rem; }
@media (hover: hover) {
  .kachel:hover .kachel__bild { transform: scale(1.04); }
  .kachel:hover h3 { color: var(--color-primary-on-dark); }
}
.kachel h3 { transition: color var(--dur-normal) var(--ease-out); }

/* Unter den Kacheln (Überarbeitung 3): zwei Spalten, bündig mit den
   Kacheln darüber. Links „Mit Planung“, rechts die Aufgaben der
   Bauüberwachung (vier Punkte). Darunter 03/04 nebeneinander. */
.leistung-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
.leistung-details__spalte {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.9rem;
  padding: var(--space-m) var(--kachel-innen) 0;
  max-width: 44rem;
}
/* Alle Kacheln und die Spalten darunter: derselbe Innenabstand zur linken
   Bildkante (Überarbeitung 3), unabhängig von der Seitenspur. */
.leistung-details__spalte > p:not(.label) { max-width: 46ch; }
.leistung-details .label { color: var(--color-primary-strong); }
.haken-liste { list-style: none; display: grid; gap: 0.45rem; }
.haken-liste li { position: relative; padding-left: 1.5rem; line-height: 1.45; }
.haken-liste li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.4rem;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--color-erfolg);
  border-bottom: 2px solid var(--color-erfolg);
  transform: rotate(-45deg);
}
.leistung-details__zusatz { font-size: 0.9375rem; color: var(--color-text-muted); }

/* 03/04: kleinere Bildkacheln, deutlich abgesetzt (Nebenbereiche) */
.weitere-hinweis { margin-top: clamp(var(--space-l), 8vw, 7rem); }
.kacheln--klein { margin-top: 0.75rem; }
.kachel--klein { min-height: clamp(18rem, 24vw, 23rem); }
.kachel--klein h3 { font-size: var(--step-1-5); }
.kachel--klein .kachel__inhalt { gap: 0.6rem; padding-block: clamp(1.25rem, 3vw, 2.25rem); }
.textlink--hell { color: var(--color-text-on-dark); border-bottom-color: var(--color-text-on-dark); }
@media (hover: hover) { .textlink--hell:hover { color: var(--color-primary-on-dark); border-bottom-color: var(--color-primary-on-dark); } }

/* ---------------------------------------------------------------------------
   4 + 5 · Referenzen: Bauherren-Raster, Denkmal-Fotos, Register
--------------------------------------------------------------------------- */
/* Kopf: links Überschrift, rechts eine ruhige Fläche mit allen Auftraggebern
   in Originalfarben. Höhen optisch abgeglichen wie im Band (in em). */
.referenzen-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
  align-items: center;
  gap: var(--space-m) var(--space-l);
}
.auftraggeber {
  padding: 1.25rem 1.5rem 1.5rem;
  background: var(--color-karte);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-karte);
}
.auftraggeber__titel { color: var(--color-text-muted); }
/* Linien als 1-px-Fugen des Rasters: bleiben bei 3 und 2 Spalten sauber */
.auftraggeber__liste {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 1px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  font-size: var(--step-1);
  background: var(--color-border);
}
.auftraggeber__liste li {
  display: grid;
  place-items: center;
  min-height: 5.25rem;
  padding: 0.75rem;
  background: var(--color-karte);
  transition: background var(--dur-schnell) var(--ease-out);
}
@media (hover: hover) { .auftraggeber__liste li:hover { background: var(--color-surface); } }
.logo-farbe { display: block; width: auto; max-width: 100%; height: 1.5em; }
.logo-farbe--howoge { height: 1.65em; }
.logo-farbe--argentum { height: 1.3em; }
.logo-farbe--baubecon { height: 1.5em; }
.logo-farbe--gcv { height: 2em; }
.logo-farbe--kaufland { height: 2.5em; }
.auftraggeber .wortmarke { color: var(--color-text); font-size: max(0.875rem, 0.78em); line-height: 1.1; text-align: center; white-space: normal; }
@media (max-width: 1100px) {
  .referenzen-kopf { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .auftraggeber { padding-inline: 1rem; }
  .auftraggeber__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: var(--step-0); }
  .auftraggeber__liste li { min-height: 4.5rem; }
}

.denkmal {
  display: grid;
  grid-template-columns: minmax(0, 34rem) auto;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-l);
  margin-top: var(--space-l);
}
.denkmal__text { display: grid; gap: 1rem; }
.denkmal__text h3, .register-kopf h3, .bereiche h3 { font-size: var(--step-1-5); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: 1.05; }
.denkmal__fotos { display: flex; align-items: flex-end; gap: var(--space-m); }
/* Referenzfotos ohne Karte: Foto in nativer Größe, Bildunterschrift darunter */
.ref-foto { display: grid; width: fit-content; max-width: 100%; }
.ref-foto picture { display: block; }
.ref-foto img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-karte); transition: transform var(--dur-normal) var(--ease-out); }
@media (hover: hover) { .ref-foto:hover img { transform: translateY(-3px); } }
.ref-foto figcaption { display: grid; gap: 0.15rem; padding-top: 0.7rem; border-top: 1px solid var(--color-border); margin-top: 0.7rem; font-size: var(--step--1); line-height: 1.35; max-width: 26rem; }
.ref-foto figcaption strong { font-size: var(--step-0); }

.register-block { margin-top: clamp(var(--space-l), 7vw, 7rem); }
.register-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem var(--space-m); margin-bottom: 1rem; }
.register-kopf .label { color: var(--color-text-muted); }
.register-karte { overflow: hidden; border-color: var(--color-text); border-width: 2px; }
@media (hover: hover) { .register-karte:hover { transform: none; box-shadow: none; } }
.register {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  line-height: 1.45;
}
.register caption { text-align: left; }
.register th, .register td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; }
.register thead th {
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-text);
  white-space: nowrap;
}
.register .spalte-betrag, .register .betrag { text-align: right; }
.register tbody th[scope="rowgroup"] {
  background: var(--color-surface);
  border-top: 1px solid var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding-block: 0.9rem;
  font-weight: var(--weight-body);
}
.register tbody:first-of-type th[scope="rowgroup"] { border-top: 0; }
.gruppe__bauherr { display: inline; margin-right: 1rem; font-size: var(--step-1); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); color: var(--color-text); }
.gruppe__leistung { display: inline; font-size: var(--step--1); color: var(--color-text-muted); }
.register tbody tr:not(.gruppe) td { border-bottom: 1px solid var(--color-border); transition: background-color var(--dur-schnell) var(--ease-out); }
@media (hover: hover) { .register tbody tr:not(.gruppe):hover td { background: var(--color-hover); } }
.register .objekt { font-size: var(--step-0); font-weight: var(--weight-heading); color: var(--color-text); }
.register .betrag { font-weight: var(--weight-heading); color: var(--color-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.register .ort { white-space: nowrap; }
.gruppe__zahl { display: inline; margin-right: 1rem; font-size: var(--step--1); font-weight: var(--weight-label); color: var(--color-primary-strong); white-space: nowrap; }
/* Eingeklappt (nur mit JS): ab der 7. Objektzeile ausgeblendet, weicher
   Auslauf über der letzten sichtbaren Zeile. Ohne JS bleibt alles offen. */
.register-karte { position: relative; }
.register-karte.ist-eingeklappt::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5rem;
  background: linear-gradient(color-mix(in oklch, var(--color-karte) 0%, transparent), var(--color-karte));
  pointer-events: none;
}
.register-knopf { margin-top: 1.25rem; }
.referenzen-cta { margin-top: var(--space-l); }

/* Projektbereiche: eine unauffällige Zeile unter dem Register */
.bereiche {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-top: var(--space-m);
}
.bereiche > .demo-hinweis { flex-basis: 100%; }
.bereiche__titel { font-size: var(--step--1); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
.bereiche__liste { list-style: none; display: flex; flex-wrap: wrap; column-gap: 0.6rem; }
.bereiche__liste li { color: var(--color-text); }
.bereiche__liste li + li::before { content: "·"; margin-right: 0.6rem; color: var(--color-text-muted); }

/* ---------------------------------------------------------------------------
   6 · Über mich: Panel, Porträt-Karte, Text, Steckbrief-Karte
--------------------------------------------------------------------------- */
.ueber {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 40rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-l);
}
.portraet-spalte { display: grid; gap: 1rem; justify-items: start; }
.portraet-spalte .demo-hinweis { max-width: 15rem; }
/* Porträt auf Malve (Rechteck der Bildmarke), eckig, harter Schatten. Kein
   runder Avatar. Datei 210 × 220, Anzeige 200 px: nicht hochskaliert. */
.portraet {
  width: 200px;
  max-width: 100%;
  padding-top: 1.25rem;
  background: var(--color-accent);
  border-radius: var(--radius-karte);
  overflow: hidden;
}
.portraet img { display: block; width: 100%; height: auto; }
.ueber__text { display: grid; gap: 1.1rem; }
.ueber__text h2 { margin-bottom: 0.4rem; }
.ueber__text p { font-size: var(--step-0); }
/* Steckbrief ohne Karte: Linie oben, Haarlinien zwischen den Zeilen */
.steckbrief { border-top: 2px solid var(--color-text); }
.steckbrief div { padding: 0.9rem 0 1rem; border-bottom: 1px solid var(--color-border); }
.steckbrief div:last-child { border-bottom: 0; }
.steckbrief dt {
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.steckbrief dd { margin-top: 0.15rem; font-weight: var(--weight-heading); color: var(--color-text); }
.steckbrief dd a {
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  min-height: 44px;
}
@media (hover: hover) { .steckbrief dd a:hover { color: var(--color-text); } }
.telefonzeile { display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
.steckbrief address { font-style: normal; }
.steckbrief .steckbrief__karte { display: flex; align-items: center; width: fit-content; min-height: 44px; font-weight: var(--weight-label); }

/* ---------------------------------------------------------------------------
   Bauherren-Band unter dem Hero (Marquee, reines CSS)
   Läuft langsam (rund 20 bis 25 px/s) und nur ohne Wunsch nach reduzierter
   Bewegung; hält bei Hover an. Vier gleiche Listen (drei davon aria-hidden),
   die Spur wandert um genau eine Liste: so bleibt das Band auch auf 1920 px
   und breiter lückenlos gefüllt.
--------------------------------------------------------------------------- */
.marquee-band { padding-block: var(--space-s) clamp(var(--space-m), 4vw, var(--space-l)); }
.marquee-kopf { display: grid; gap: 0.75rem; }
.demo-hinweis--klein { font-size: 0.875rem; line-height: 1.45; max-width: none; justify-self: start; }
.marquee-titel { color: var(--color-text-muted); font-weight: var(--weight-label); line-height: 1.4; }

/* Filter-Definitionen: nimmt keinen Platz ein */
.svg-filter { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo-mono-farbe { flood-color: var(--color-text-muted); }

.marquee {
  --marquee-abstand: clamp(3.5rem, 7vw, 7rem);
  margin-top: 1rem;
  overflow: hidden;
  border-block: 2px solid var(--color-text);
  background: var(--color-karte);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__spur { display: flex; width: max-content; }
/* Abstand zwischen zwei Listen = Abstand innerhalb einer Liste, sonst ruckelt die Naht */
.marquee__liste {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--marquee-abstand);
  padding: 1.25rem calc(var(--marquee-abstand) / 2);
  margin: 0;
  font-size: var(--step-1);
}
.marquee__eintrag { display: flex; align-items: center; min-height: 3.5rem; flex: none; }

/* Logos: im Ruhezustand einfarbig in --color-text-muted, bei Hover Originalfarben.
   Höhen optisch abgeglichen (in em der Wortmarke): breite Schriftzüge flacher,
   das quadratische Kaufland-Zeichen höher, die volle HOWOGE-Fläche kleiner. */
.marquee__logo {
  width: auto;
  height: 1.5em;
  filter: url(#logo-mono);
}
.marquee__logo--howoge { height: 1.3em; filter: url(#logo-mono-negativ); }
.marquee__logo--argentum { height: 1.45em; }
.marquee__logo--baubecon { height: 1.6em; }
.marquee__logo--gcv { height: 2.1em; }
.marquee__logo--kaufland { height: 2.35em; }
.wortmarke {
  font-size: 0.92em;
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  white-space: nowrap;
  color: var(--color-text-muted);
  transition: color var(--dur-normal) var(--ease-out);
}
@media (hover: hover) {
  .marquee__eintrag:hover .marquee__logo { filter: none; }
  .marquee__eintrag:hover .wortmarke { color: var(--color-text); }
}
@keyframes marquee-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__spur { animation: marquee-lauf 70s linear infinite; }
  /* Mit JS: Bewegung per requestAnimationFrame (sanftes Abbremsen bei
     Hover statt hartem Stopp), die CSS-Animation ist dann aus. */
  .marquee--js .marquee__spur { animation: none; will-change: transform; }
}
/* Schmale Fenster: kürzere Liste, deshalb kürzere Dauer für dasselbe ruhige Tempo */
@media (prefers-reduced-motion: no-preference) and (max-width: 600px) {
  .marquee__spur { animation-duration: 50s; }
}
/* Reduzierte Bewegung: keine Schleife, eine statische, umbrechende Reihe. */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__spur { width: auto; }
  .marquee__liste { flex-wrap: wrap; justify-content: center; row-gap: 1rem; width: 100%; }
  .marquee__liste--kopie { display: none; }
}

/* ---------------------------------------------------------------------------
   7 · Ablauf als Zeitstrahl
   Grundform (mobil und ohne JS): senkrechte Linie, jede Station eine Zeile
   (Ziffer, Titel, Ergebnis), Beschreibung aufklappbar. Ab 900 px baut main.js
   daraus Tabs mit einem Detailfeld (.zeitstrahl--tabs).
--------------------------------------------------------------------------- */
.ablauf__inhalt { margin-top: var(--space-l); display: grid; gap: 1.25rem; }
.zeitstrahl { display: grid; gap: var(--space-m); }
.zs-gruppen { display: grid; gap: 1.25rem; }
.zs-gruppe__titel { color: var(--color-primary-strong); margin-bottom: 0.25rem; }
.zs-liste { list-style: none; position: relative; display: grid; }
/* Senkrechte Linie durch die Ziffern */
.zs-liste::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  margin-left: -1px;
  background: var(--color-border);
}
/* Phasen: „Bevor es losgeht“ zurückhaltend (heller Linienabschnitt,
   ringförmige Punkte), „Am Bau“ in CI-Blau (gefüllte Punkte, getönte Fläche). */
.zs-gruppe--vor .zs-liste::before { background: var(--color-border); }
.zs-gruppe--bau .zs-liste::before { background: var(--color-primary); }
.zs-gruppe--vor .zs-nr { border-color: var(--color-text-muted); color: var(--color-text-muted); }
.zs-gruppe--bau .zs-nr { background: var(--color-primary-strong); border-color: var(--color-primary-strong); color: var(--color-bg); }
.zs-gruppe--bau .zs-gruppe__titel { color: var(--color-primary-strong); }
.zs-gruppe--vor .zs-gruppe__titel { color: var(--color-text-muted); }
@media (max-width: 899px) {
  .zs-gruppe--bau { margin-inline: -0.75rem; padding: 0.75rem 0.75rem 0.25rem; background: var(--color-surface); border-radius: var(--radius-karte); }
}
.zs-station { position: relative; }
.zs-kopf {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem;
  align-items: start;
  gap: 0 1rem;
  padding: 0.75rem 0;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-karte);
  transition: background-color var(--dur-schnell) var(--ease-out);
}
.zs-kopf::-webkit-details-marker { display: none; }
/* Aufklapp-Zeichen rechts */
.zs-kopf::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.55rem;
  border-right: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
  transform: rotate(45deg);
  transition: transform var(--dur-normal) var(--ease-out);
}
.zs-details[open] > .zs-kopf::after { transform: rotate(-135deg); margin-top: 0.8rem; }
@media (hover: hover) { .zs-kopf:hover { background: var(--color-surface); } }
.zs-kopf:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.zs-nr {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-weight: var(--weight-display);
  font-size: var(--step-0);
  color: var(--color-primary-strong);
  background: var(--color-karte);
  border: 2px solid var(--color-primary-strong);
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
.zs-kopftext { display: grid; gap: 0.2rem; }
.zs-titel { font-size: var(--step-1); line-height: 1.2; }
.zs-ergebnis { font-size: var(--step--1); line-height: 1.45; color: var(--color-text); }
.zs-ergebnis__label {
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-primary-strong);
  margin-right: 0.25rem;
}
.zs-beschreibung { margin: 0 0 0.75rem calc(2.5rem + 1rem); max-width: 60ch; }

.zs-abschluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

/* Mobil kompakt: Ziel unter 1.100 px Sektionshöhe auf 390 px */
@media (max-width: 899px) {
  .ablauf .ablauf__inhalt { margin-top: var(--space-m); gap: 1rem; }
  .zs-gruppen { gap: 0.75rem; }
  .zs-kopf { grid-template-columns: 2.25rem minmax(0, 1fr) 1rem; gap: 0 0.75rem; padding: 0.45rem 0; }
  .zs-nr { width: 2.25rem; height: 2.25rem; font-size: var(--step--1); }
  .zs-liste::before { left: 1.125rem; }
  .zs-titel { font-size: 1.0625rem; }
  .zs-ergebnis { line-height: 1.4; }
  .zs-beschreibung { margin-left: calc(2.25rem + 0.75rem); }
  .zs-abschluss { gap: 0.5rem 2rem; }
}

/* Tabs (ab 900 px, nur mit JS) */
.zs-tabs { display: none; }
@media (min-width: 900px) {
  .zeitstrahl--tabs .zs-gruppen { display: none; }
  .zeitstrahl--tabs .zs-tabs { display: grid; gap: var(--space-l); }
  .zeitstrahl--tabs { grid-template-columns: minmax(0, 1fr); }
  /* Zwei Phasen als getönte Flächen hinter den Stationen, Label oben.
     Die Linie läuft in der zweiten Zeile: gestrichelt bis zwischen 03 und 04,
     danach durchgezogen. Die Füllung zeigt den Fortschritt. */
  .zs-tabliste {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: 3rem auto;
    gap: 0 0.5rem;
    isolation: isolate;
  }
  /* Feste Spalten: die Phasenflächen belegen beide Zeilen, ohne feste
     Plätze würden die Tabs in neue Spalten ausweichen. */
  .zs-tab:nth-of-type(1) { grid-column: 1; }
  .zs-tab:nth-of-type(2) { grid-column: 2; }
  .zs-tab:nth-of-type(3) { grid-column: 3; }
  .zs-tab:nth-of-type(4) { grid-column: 4; }
  .zs-tab:nth-of-type(5) { grid-column: 5; }
  .zs-tab:nth-of-type(6) { grid-column: 6; }
  .zs-tab:nth-of-type(7) { grid-column: 7; }
  .zs-phase {
    grid-row: 1 / span 2;
    z-index: -1;
    position: relative;
    padding: 0.4rem 1rem 0;
    border-radius: var(--radius-karte);
  }
  /* Spannweite: feine Klammer unter dem Label über dem Linienabschnitt */
  .zs-phase::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 2.1rem;
    height: 0.45rem;
    border: 1px solid currentColor;
    border-bottom: 0;
    opacity: 0.6;
  }
  .zs-phase--vor { grid-column: 1 / span 3; color: var(--color-text-muted); }
  .zs-phase--bau { grid-column: 4 / span 4; color: var(--color-primary-strong); background: var(--color-surface); }
  .zs-phase .label { color: currentColor; }
  .zs-linie {
    grid-row: 2;
    grid-column: 1 / -1;
    align-self: start;
    position: relative;
    height: 2px;
    margin: calc(1.5rem - 1px) calc(100% / 14) 0;
    background:
      linear-gradient(var(--color-band-hell), var(--color-band-hell)) right / 58.34% 100% no-repeat,
      linear-gradient(var(--color-border), var(--color-border)) left / 41.66% 100% no-repeat;
  }
  .zs-linie span {
    position: absolute;
    inset: -1px 0;
    background: var(--color-primary-strong);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform var(--dur-normal) var(--ease-out);
  }
  [data-aktiv="2"] .zs-linie span { transform: scaleX(0.1667); }
  [data-aktiv="3"] .zs-linie span { transform: scaleX(0.3333); }
  [data-aktiv="4"] .zs-linie span { transform: scaleX(0.5); }
  [data-aktiv="5"] .zs-linie span { transform: scaleX(0.6667); }
  [data-aktiv="6"] .zs-linie span { transform: scaleX(0.8333); }
  [data-aktiv="7"] .zs-linie span { transform: scaleX(1); }
  .zs-tab {
    grid-row: 2;
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0 0.25rem 1rem;
    background: transparent;
    border: 0;
    color: var(--color-text);
    font-size: var(--step--1);
    font-weight: var(--weight-heading);
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
  }
  .zs-tab .zs-nr { width: 3rem; height: 3rem; font-size: var(--step-1); transition: background-color var(--dur-schnell) var(--ease-out), color var(--dur-schnell) var(--ease-out), transform var(--dur-normal) var(--ease-out); }
  /* Phase 1: Ring; Phase 2: gefüllt. Gewählt: dunkles CI-Blau. */
  .zs-tab:not(.zs-tab--bau) .zs-nr { background: var(--color-bg); border-color: var(--color-text-muted); color: var(--color-text-muted); }
  .zs-tab--bau .zs-nr { background: var(--color-band-hell); border-color: var(--color-band-hell); color: var(--color-text); }
  .zs-tab--erreicht:not(.zs-tab--bau) .zs-nr { border-color: var(--color-primary-strong); color: var(--color-primary-strong); }
  .zs-tab[aria-selected="true"] .zs-nr { background: var(--color-primary-strong); border-color: var(--color-primary-strong); color: var(--color-bg); box-shadow: none; transform: scale(1.08); }
  .zs-tab[aria-selected="true"] { color: var(--color-primary-strong); }
  @media (hover: hover) { .zs-tab:hover .zs-nr { transform: scale(1.08); } .zs-tab:hover { color: var(--color-primary-strong); } }
  .zs-tab:focus-visible { outline: none; }
  .zs-tab:focus-visible .zs-nr { outline: 3px solid var(--color-focus); outline-offset: 3px; }

  .zs-unten { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: var(--space-m) var(--space-l); }
  .zs-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-m);
    row-gap: 0.75rem;
    /* Haarlinie trennt Zeitstrahl und Detailfeld (Überarbeitung 5) */
    padding: var(--space-m) 0 0;
    border-top: 1px solid var(--color-border);
  }
  .zs-panel:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
  .zs-panel__nr { font-size: clamp(3rem, 2rem + 3vw, 5.5rem); font-weight: var(--weight-display); line-height: 1; letter-spacing: var(--tracking-display); color: var(--color-primary-strong); }
  .zs-panel__phase {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--step--1);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .zs-panel__phase::before { content: ""; width: 0.6rem; height: 0.6rem; border: 2px solid currentColor; border-radius: 50%; }
  .zs-panel--bau .zs-panel__phase { color: var(--color-primary-strong); }
  .zs-panel--bau .zs-panel__phase::before { background: currentColor; }
  .zs-panel__nr { grid-row: 1 / span 4; }
  .zs-panel h3 { font-size: var(--step-1-5); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: 1.05; }
  .zs-panel__ergebnis { padding: 0.2rem 0 0.2rem 1rem; border-left: 3px solid var(--color-primary-strong); color: var(--color-text); font-size: var(--step-1); font-weight: var(--weight-heading); line-height: 1.35; max-width: 44ch; }
  .zs-panel__ergebnis .zs-ergebnis__label { display: block; margin-bottom: 0.2rem; font-size: var(--step--1); }
  .zeitstrahl--tabs .zs-abschluss { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .zs-unten { grid-template-columns: minmax(0, 1fr); }
  .zeitstrahl--tabs .zs-abschluss { flex-direction: row; }
}

/* ---------------------------------------------------------------------------
   8 · Anfrage: Panel, links Kontaktzeilen, rechts Formular-Karte (12/12)
--------------------------------------------------------------------------- */
.anfrage__raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--space-l);
}
.anfrage__intro > p:not(.kicker) { margin-top: 1.25rem; font-size: var(--step-1); line-height: 1.45; max-width: 44ch; }
.kontaktzeilen { list-style: none; display: grid; gap: 1.25rem; margin-top: var(--space-m); }
.kontaktzeilen li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: start; gap: 0.9rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.kontaktzeilen li:last-child { border-bottom: 0; }
.kontaktzeilen .icon-feld { display: grid; place-items: start center; padding-top: 0.15rem; color: var(--color-primary-strong); }
.kontaktzeilen .icon-feld .icon { width: 1.5rem; height: 1.5rem; }
.kontaktzeilen .label { display: block; color: var(--color-text); }
.kontaktzeilen a, .kontaktzeilen span:not(.label):not(.icon-feld) { color: var(--color-text); font-size: var(--step-0); }
.kontaktzeilen a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur-schnell) var(--ease-out); }
@media (hover: hover) { .kontaktzeilen a:hover { color: var(--color-primary-strong); } }
.kontaktzeilen div { display: flex; flex-direction: column; align-items: flex-start; }
.anfrage__form-spalte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }

.funnel {
  scroll-margin-top: calc(var(--header-h) + 1rem);
  background: var(--color-karte);
  border: 2px solid var(--color-text);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-4);
  overflow: hidden;
}
.funnel__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 2.25rem) 1rem;
}
.funnel__titel { font-size: var(--step-1-5); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: 1.05; color: var(--color-text); }
.schrittanzeige { color: var(--color-text-muted); }
.funnel__balken { height: 4px; background: var(--color-border); }
.funnel__balken span {
  display: block;
  height: 100%;
  background: var(--color-primary-strong);
  transform-origin: left center;
  /* Anteil am tatsächlich gegangenen Weg, gesetzt von main.js */
  transform: scaleX(var(--fortschritt, 0.25));
  transition: transform var(--dur-normal) var(--ease-out);
}
.funnel__koerper { padding: clamp(1.25rem, 3vw, 2.25rem); }
.funnel form, .zusatz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.funnel fieldset { border: 0; min-width: 0; display: grid; gap: 1rem; }
.funnel fieldset:focus { outline: none; }
.funnel legend, .feldgruppe__titel {
  float: left;
  width: 100%;
  margin-bottom: 1rem;
  font-size: var(--step-1);
  font-weight: var(--weight-heading);
  line-height: 1.25;
  color: var(--color-text);
}
.funnel legend + * { clear: both; }
.pflicht { color: var(--color-primary-strong); font-weight: var(--weight-heading); }

.optionen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 0.6rem;
}
.option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-karte);
  background: var(--color-karte);
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color var(--dur-schnell) var(--ease-out), border-color var(--dur-schnell) var(--ease-out), box-shadow var(--dur-schnell) var(--ease-out);
}
@media (hover: hover) { .option:hover { border-color: var(--color-text); box-shadow: var(--schatten-1); } }
.option:active { transform: translateY(1px); }
.option input {
  /* Gezeichneter Auswahlkreis (20 px sichtbar) auf 44 × 44 px Trefferfläche. */
  appearance: none;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -0.55rem -0.35rem -0.55rem -0.75rem;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 8.5px, var(--color-text-muted) 9px 10.5px, transparent 11px);
  cursor: pointer;
}
.option input:checked { background: radial-gradient(circle, var(--color-primary-strong) 0 5px, transparent 5.5px 8.5px, var(--color-primary-strong) 9px 10.5px, transparent 11px); }
.option input:focus-visible { outline: none; }
.option:has(input:checked) { border-color: var(--color-primary-strong); box-shadow: inset 0 0 0 1px var(--color-primary-strong); background: var(--color-hover); font-weight: 650; }
.option:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.feld-hinweis {
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--color-primary-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--step--1);
  line-height: 1.5;
}
.feld-fehler {
  display: flex;
  gap: 0.5rem;
  color: var(--color-fehler);
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  line-height: 1.4;
}
.feld-fehler::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; background: var(--color-fehler); color: var(--color-bg); font-size: 0.75rem; font-weight: var(--weight-display); }

.feld { display: grid; gap: 0.4rem; }
.feld label { min-height: 0; font-weight: var(--weight-label); color: var(--color-text); }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"] {
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-karte);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--dur-schnell) var(--ease-out);
}
@media (hover: hover) { .feld input:hover { border-color: var(--color-text-muted); } }
.feld input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-text); }
.feld input::placeholder { color: var(--color-text-muted); opacity: 1; }
.feld input[aria-invalid="true"] { border-color: var(--color-fehler); box-shadow: inset 0 0 0 1px var(--color-fehler); }
.feld input[type="file"] { width: 100%; max-width: 100%; min-height: 44px; padding: 0.5rem 0; color: var(--color-text); }
.felder-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1rem; }

.einwilligung { display: grid; gap: 0.35rem; }
.einwilligung label { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--step--1); line-height: 1.5; cursor: pointer; }
.einwilligung input {
  /* Gezeichnetes Kästchen (20 px) auf 44 × 44 px Trefferfläche. */
  appearance: none;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -0.7rem -0.5rem -0.5rem -0.75rem;
  border: 0;
  background:
    linear-gradient(var(--color-karte), var(--color-karte)) center / 17px 17px no-repeat,
    linear-gradient(var(--color-text-muted), var(--color-text-muted)) center / 20px 20px no-repeat;
  cursor: pointer;
}
.einwilligung input:checked {
  background:
    linear-gradient(var(--color-primary-strong), var(--color-primary-strong)) center / 11px 11px no-repeat,
    linear-gradient(var(--color-karte), var(--color-karte)) center / 16px 16px no-repeat,
    linear-gradient(var(--color-primary-strong), var(--color-primary-strong)) center / 20px 20px no-repeat;
}
.einwilligung input[aria-invalid="true"] {
  background:
    linear-gradient(var(--color-karte), var(--color-karte)) center / 16px 16px no-repeat,
    linear-gradient(var(--color-fehler), var(--color-fehler)) center / 20px 20px no-repeat;
}
.einwilligung input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -8px; }
@media (forced-colors: active) {
  .option input, .einwilligung input { appearance: auto; width: 1.25rem; height: 1.25rem; margin: 0; }
}

.funnel__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.funnel__vor { display: flex; flex: 1; justify-content: flex-end; gap: 1rem; }
[data-schritt="kontakt"] .funnel__vor .btn { width: 100%; }

.funnel__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.funnel__chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  padding: 0.35rem 0.5rem 0.35rem 0.9rem;
  border: 1.5px solid var(--color-primary-strong);
  border-radius: var(--radius-karte);
  background: var(--color-hover);
  color: var(--color-text);
  font-size: var(--step--1);
  justify-self: start;
}
.chip-weg {
  min-height: 44px;
  padding: 0 0.6rem;
  background: transparent;
  border: 0;
  color: var(--color-primary-strong);
  font-weight: var(--weight-label);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
@media (hover: hover) { .chip-weg:hover { color: var(--color-text); } }

/* Bauvolumen selbst eintragen: erscheint erst bei Auswahl */
.feld--betrag { max-width: 20rem; }
.betrag { position: relative; }
.feld .betrag input[type="text"] { width: 100%; padding-right: 2.5rem; font-variant-numeric: tabular-nums; }
.betrag__einheit {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  font-weight: var(--weight-label);
  color: var(--color-text-muted);
  pointer-events: none;
}

.funnel__fuss {
  padding: 0.8rem clamp(1.25rem, 3vw, 2.25rem);
  border-top: 1px solid var(--color-border);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.danke { display: grid; gap: 1.25rem; }
.danke h3 { font-size: var(--step-1-5); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: 1.1; }
.danke h3:focus { outline: none; }
.zusatz { margin-top: 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.zusatz .optionen { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); }
.zusatz__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.zusatz-danke { font-weight: var(--weight-label); color: var(--color-text); }
.zusatz-danke:focus { outline: none; }

/* Ohne JS: alle drei Schritte untereinander, nur „Anfrage absenden“. */
html:not(.js) [data-weiter], html:not(.js) [data-zurueck],
html:not(.js) [data-schrittanzeige], html:not(.js) .funnel__balken { display: none; }

/* ---------------------------------------------------------------------------
   9 · Footer: einzige dunkle Fläche
--------------------------------------------------------------------------- */
.fuss { padding-block: var(--space-l) var(--space-m); background: var(--color-bg-dark); color: var(--color-text-muted-on-dark); }
.fuss__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-m) var(--space-l);
}
.fuss__marke { display: grid; gap: 1rem; justify-items: start; }
.fuss__marke img { height: 40px; width: auto; }
.fuss .label { color: var(--color-text-on-dark); margin-bottom: 1rem; }
.fuss ul { list-style: none; display: grid; gap: 0.1rem; }
.fuss a { color: var(--color-text-muted-on-dark); transition: color var(--dur-schnell) var(--ease-out); }
@media (hover: hover) { .fuss a:hover { color: var(--color-text-on-dark); } }
.fuss address { font-style: normal; display: grid; gap: 0.1rem; }
.fuss address p, .fuss address a { display: inline-flex; align-items: center; gap: 0.6rem; }
.fuss address .icon { color: var(--color-primary-on-dark); }
.fuss .btn--kontur { color: var(--color-text-on-dark); border-color: var(--color-text-on-dark); }
@media (hover: hover) { .fuss .btn--kontur:hover { background: var(--color-text-on-dark); color: var(--color-bg-dark); } }
.fuss .btn:focus-visible, .fuss a:focus-visible { outline-color: var(--color-focus-on-dark); }
.fuss__recht {
  grid-column: 1 / -1;
  display: flex;
  gap: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in oklch, var(--color-text-on-dark) 20%, transparent);
  font-size: var(--step--1);
}

/* ---------------------------------------------------------------------------
   Rechtsseiten (Impressum, Datenschutz)
--------------------------------------------------------------------------- */

/* Niedrige Desktop-Fenster (1280 × 720, 1366 × 768): Abstände straffen,
   Fotos im Stapel etwas kleiner (nie größer als nativ). */
@media (min-width: 1024px) and (min-height: 700px) and (max-height: 820px) {
  .hero { padding-block: 1rem; }
  .hero__marke { margin-bottom: 1.75rem; }
  .hero__zeile { margin-top: 1rem; }
  .hero .aktionen { margin-top: 1.5rem; }
  .kennzahlen { margin-top: 1.75rem; padding-top: 1.25rem; }
  .stapel { --bild-h: 8.5rem; }
  .plankopf__objekt { padding-block: 0.75rem; }
  .schriftfeld > div { padding-block: 0.55rem 0.6rem; }
}
@media (min-width: 1024px) and (min-height: 700px) and (max-height: 760px) {
  .hero { padding-block: 0.25rem; }
  .hero h1 { font-size: 2.5rem; }
  .kennzahlen dd { font-size: 2rem; }
  .stapel { --bild-h: 7rem; }
  .plankopf__kopf { padding-block: 0.1rem; }
}

.rechtsseite .panel { min-height: 55vh; align-content: center; }
.rechtsseite h1 { margin-bottom: var(--space-m); }
.rechtsseite .textlink { margin-top: var(--space-m); }

/* ---------------------------------------------------------------------------
   Responsive: Desktop und Mobil parallel
--------------------------------------------------------------------------- */
@media (max-width: 1250px) {
  .denkmal { grid-template-columns: minmax(0, 1fr); }
  .ueber { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
  .steckbrief { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steckbrief div:nth-child(odd) { border-right: 1px solid var(--color-border); padding-right: 1.25rem; }
  .steckbrief div:nth-child(even) { padding-left: 1.25rem; }
  .steckbrief div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 1100px) {
  .hero__raster { grid-template-columns: minmax(0, 1fr); }
  .stapel { justify-self: start; }
  .anfrage__raster { grid-template-columns: minmax(0, 1fr); }
  .fuer-wen__kopf { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .wege { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--space-l); }
  .weg { grid-row: auto; grid-template-rows: none; }
  .rahmen, .rahmen__spalten { grid-template-columns: minmax(0, 1fr); }
  .kacheln { grid-template-columns: minmax(0, 1fr); }
  .leistung-details { grid-template-columns: minmax(0, 1fr); }
  .kachel.kachel--klein { min-height: 16rem; }
  .leistung-details { gap: 0; }
  .kachel { min-height: 24rem; }
  .fuss__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fuss__marke { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .denkmal__fotos { flex-direction: column; align-items: flex-start; }
  .panel { margin-inline: 0.5rem; border-radius: calc(var(--radius-panel) / 2); }
}
@media (max-width: 700px) {
  .kachel { min-height: 21rem; }
  .btn { letter-spacing: 0.02em; }
  .hero .aktionen { flex-direction: column; align-items: stretch; width: 100%; }
  .hero .aktionen .btn { justify-content: space-between; }
  .ueber { grid-template-columns: minmax(0, 1fr); }
  .steckbrief { grid-template-columns: minmax(0, 1fr); }
  .steckbrief div, .steckbrief div:nth-child(odd), .steckbrief div:nth-child(even) { border-right: 0; padding-inline: 0; border-bottom: 1px solid var(--color-border); }
  .steckbrief div:last-child { border-bottom: 0; }
  .felder-zwei { grid-template-columns: minmax(0, 1fr); }
  .funnel__nav { flex-direction: column-reverse; align-items: stretch; }
  .funnel__vor .btn { flex: 1; justify-content: space-between; }
  .fuss__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* Register verdichtet: Objekt fett und Betrag rechts, darunter Ort ·
     Umfang in kleiner Schrift. Keine Wiederhol-Labels. */
  .register, .register tbody, .register tr, .register td, .register th { display: block; width: 100%; }
  .register thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .register tbody tr:not(.gruppe) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "objekt objekt betrag" "ort umfang umfang";
    gap: 0.2rem 0.5rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--color-border);
  }
  .register tbody tr:not(.gruppe) td { width: auto; padding: 0; border-bottom: 0; }
  .register td.objekt { grid-area: objekt; }
  .register td.betrag { grid-area: betrag; }
  .register td.ort { grid-area: ort; font-size: 0.875rem; }
  .register td.ort::after { content: " ·"; }
  .register td.umfang { grid-area: umfang; font-size: 0.875rem; }
  @media (hover: hover) { .register tbody tr:not(.gruppe):hover { background: var(--color-hover); } }
  .gruppe__bauherr, .gruppe__leistung { display: block; }
  .gruppe__leistung { margin-top: 0.25rem; }
}
@media (max-width: 400px) {
  .rahmen__titel { font-size: var(--step-1); }
  .btn { gap: 0.6rem; padding-inline: 0.9rem; }
  .plankopf__kopf, .schriftfeld > div { padding-inline: 0.9rem; }
}

/* Ablauf mit Tabs: der Abschluss steht neben dem Detailfeld, die Kopie unter
   der Liste gilt nur mobil. */
@media (min-width: 900px) {
  .zeitstrahl--tabs > .zs-abschluss--liste { display: none; }
}
@media (max-width: 899px) {
  .zs-tabs .zs-abschluss { display: none; }
}