/* ==========================================================================
   Zimmerei Ronny Rauh — Stylesheet
   Entwurf 1 · keine externen Requests (DSGVO), keine Frameworks
   Farb- und Typo-Tokens sind die einzige Quelle der Wahrheit.
   ========================================================================== */

/* ---------- 1 · Tokens ---------------------------------------------------- */
:root {
  /* Palette: Kalk und Holz als Materialebene, Grün als Signal.
     Das Grün stammt aus dem Blatt im Firmenlogo (#01a94a). Für Text und
     Flächen ist es zu hell (2.90:1), deshalb --signal als abgedunkelte
     Variante. Alle Textpaare >= 4.5:1, alle Bedienelemente >= 3:1. */
  --ink:        #17130f;   /* Tiefdunkel, warm */
  --ink-2:      #2b241d;
  --ink-3:      #3d332a;
  --stone:      #6b6157;   /* Sekundärtext auf hell — 5.66:1 auf --chalk */
  --stone-2:    #9a9084;   /* nur Rahmen/Dunkelflächen — für Text zu schwach */
  --hair:       #dfd6c6;   /* Haarlinien */
  --paper:      #f1ebe0;   /* Sekundärfläche */
  --chalk:      #faf7f1;   /* Grundfläche */
  --white:      #fffdf9;
  --timber:     #a9743e;   /* Holzton — 4.70:1 auf --ink */
  --timber-2:   #c9a271;
  --brand:      #01a94a;   /* Logo-Grün, nur dekorativ (Markierung) */
  --signal:     #0b7a38;   /* Signal / CTA — 5.10:1 auf --chalk, 5.45:1 mit Weiß */
  --signal-2:   #075c29;   /* Hover — 8.17:1 mit Weiß */
  --error:      #a8321a;   /* Fehler bleibt rot, nie grün */
  --error-2:    #8f2a15;

  --ff-sans:  "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui,
              -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ff-text:  "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui,
              -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ff-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
              Georgia, "Times New Roman", serif;
  --ff-mono:  ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas,
              "SF Mono", Menlo, monospace;

  --fs-display: clamp(2.55rem, 6.2vw, 4.4rem);
  --fs-h2:      clamp(1.85rem, 3.7vw, 3.05rem);
  --fs-h3:      clamp(1.2rem, 1.05vw + 0.95rem, 1.6rem);
  --fs-h4:      clamp(1.06rem, 0.4vw + 0.95rem, 1.22rem);
  --fs-lead:    clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem);
  --fs-body:    clamp(1rem, 0.25vw + 0.94rem, 1.075rem);
  --fs-small:   0.9375rem;
  --fs-mono:    0.75rem;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --shell:  1320px;
  --gutter: clamp(20px, 4.2vw, 56px);
  --band-y: clamp(64px, 8.5vw, 132px);

  --r-sm: 2px;
  --r-md: 4px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .42s;

  /* Materialrauschen — hält Flächen davon ab, wie flache Vorlagen zu wirken */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 2 · Reset / Basis --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;   /* Kopfzeile im gescrollten Zustand + Luft */
}

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font: 400 var(--fs-body)/1.62 var(--ff-text);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, ol, ul, dl, dd, blockquote, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; }

/* Muss !important sein: mehrere Bausteine setzen display, [hidden] würde sonst verlieren */
[hidden] { display: none !important; }

::selection { background: var(--brand); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Überschrift nur für die Dokumentstruktur und Screenreader */
.vh-titel {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: var(--sp-3); left: var(--sp-3);
  z-index: 200;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--chalk);
  font: 600 var(--fs-small)/1 var(--ff-sans);
  text-decoration: none;
  border-radius: var(--r-md);
  transform: translateY(-160%);
  transition: transform .18s var(--ease);
}
.skip-link:focus-visible { transform: none; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- 3 · Typografie ------------------------------------------------ */
.h2, .h3, .h4, .hero__title {
  font-family: var(--ff-sans);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.06;
  text-wrap: balance;
}

.h2 { font-size: var(--fs-h2); line-height: 1.08; }
.h3 { font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -0.014em; }
.h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.01em; }

.eyebrow {
  font: 500 var(--fs-mono)/1.3 var(--ff-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--sp-4);
}
.eyebrow--num { color: var(--stone); }
.eyebrow--num::before {
  content: "";
  display: inline-block;
  width: 26px; height: 1px;
  margin-right: 10px;
  vertical-align: 4px;
  background: currentColor;
}
.eyebrow--invert { color: var(--timber-2); }

/* ---------- 4 · Buttons -------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-br: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 20px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-br);
  border-radius: var(--r-pill);
  font: 600 var(--fs-small)/1 var(--ff-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background .24s var(--ease), color .24s var(--ease),
              border-color .24s var(--ease), transform .18s var(--ease);
}
.btn .ico { transition: transform .3s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn--solid { --btn-bg: var(--signal); --btn-fg: var(--white); --btn-br: var(--signal); }
.btn--solid:hover { --btn-bg: var(--signal-2); --btn-br: var(--signal-2); }

.btn--line { --btn-br: var(--stone-2); }
.btn--line:hover { --btn-br: var(--ink); --btn-bg: var(--paper); }

.btn--ghost { --btn-br: transparent; --btn-bg: var(--paper); }
.btn--ghost:hover { --btn-br: var(--hair); }

.btn--invert { --btn-bg: var(--chalk); --btn-fg: var(--ink); --btn-br: var(--chalk); }
.btn--invert:hover { --btn-bg: var(--timber-2); --btn-br: var(--timber-2); }

.btn--sm  { min-height: 40px; padding: 9px 16px; }
.btn--lg  { min-height: 54px; padding: 15px 26px; font-size: 1rem; }
.btn--block { width: 100%; justify-content: center; }

/* ---------- 5 · Kopf ----------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 241, .88);                        /* Rückfall */
  background: color-mix(in srgb, var(--chalk) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-head[data-scrolled] {
  border-bottom-color: var(--hair);
  background: rgba(250, 247, 241, .96);
  background: color-mix(in srgb, var(--chalk) 95%, transparent);
}
.site-head__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 88px;
  transition: min-height .3s var(--ease);
}
.site-head[data-scrolled] .site-head__inner { min-height: 76px; }

/* Wortbildmarke des Betriebs. Höhe steuert die Größe, Breite folgt dem
   Seitenverhältnis 520:165 — width/height im HTML verhindert Layoutsprünge. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  margin-right: auto;
}
.brand img {
  display: block;
  height: 64px;
  width: auto;
  transition: height .3s var(--ease);
}
.site-head[data-scrolled] .brand img { height: 54px; }

.nav__list { display: flex; gap: clamp(14px, 1.8vw, 30px); }
.nav__list a {
  position: relative;
  display: block;
  padding: 6px 0;
  font: 500 var(--fs-small)/1 var(--ff-sans);
  text-decoration: none;
  color: var(--ink-2);
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--ease);
}
.nav__list a:hover::after,
.nav__list a[aria-current="true"]::after { transform: scaleX(1); }
.nav__list a[aria-current="true"] { color: var(--ink); }
.nav__foot { display: none; }

.site-head__actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Ein Knopf im Kopf darf nie mitten im Wort umbrechen. „Zur Start-/seite" über
   zwei Zeilen war der sichtbare Teil des Fehlers auf den Rechtsseiten. Nur hier
   gesetzt, damit breite Formularknöpfe weiter umbrechen dürfen. */
.site-head__actions .btn { white-space: nowrap; }

.head-tel {
  display: inline-flex;
  align-items: center;
  min-height: 24px;    /* 15px Schrift auf Zeilenhöhe 1 ergab 17px — zu klein */
  gap: 8px;
  text-decoration: none;
  font: 600 var(--fs-small)/1 var(--ff-sans);
  color: var(--ink);
  white-space: nowrap;
}
.head-tel .ico { color: var(--signal); }
.head-tel:hover .head-tel__num { text-decoration: underline; text-underline-offset: 3px; }

.burger {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 12px;
  background: none;
  border: 1px solid var(--stone-2);
  border-radius: var(--r-pill);
  cursor: pointer;
  min-height: 44px;
}
.burger__box { display: grid; gap: 5px; width: 18px; }
.burger__box span {
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s;
}
.burger__label {
  font: 600 var(--fs-mono)/1 var(--ff-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.burger[aria-expanded="true"] .burger__box span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- 6 · Hero ---------------------------------------------------- */
.hero { position: relative; padding-top: clamp(36px, 6vw, 84px); }

.hero__grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: end;
  padding-bottom: clamp(40px, 6vw, 80px);
}

.hero__title {
  font-size: var(--fs-display);
  letter-spacing: -0.034em;
  line-height: 0.99;
  margin-bottom: var(--sp-5);
}
.hero__title em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--timber);
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 44ch;
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.hero__hint {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--stone);
}

.hero__media { position: relative; }

/* Bildplätze ---------------------------------------------------------- */
.shot {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 90% at 18% 8%, #cbb08a 0%, transparent 58%),
    linear-gradient(155deg, #8d6438 0%, #5d4126 46%, #38271a 100%);
  color: var(--timber-2);
  isolation: isolate;
}
.shot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 140px;
  opacity: .17;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.shot--hero  { aspect-ratio: 4 / 3; }
.shot--wide  { aspect-ratio: 3 / 2; }
.shot--tall  { aspect-ratio: 4 / 5; }
.shot--dark {
  background:
    radial-gradient(110% 80% at 80% 4%, #6f512f 0%, transparent 60%),
    linear-gradient(200deg, #3a2b1d 0%, #221a12 100%);
}

/* Das Bild füllt die Fläche vollständig; der Farbverlauf darunter bleibt als
   Grundton sichtbar, solange das Foto noch lädt. */
.shot > picture,
.shot > img {
  grid-area: 1 / 1;
  justify-self: stretch;
  align-self: stretch;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.shot picture img,
.shot > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.shot:hover picture img,
.shot:hover > img { transform: scale(1.03); }

.shot__chip {
  position: absolute;
  z-index: 1;
  top: 12px; right: 12px;
  padding: 5px 10px;
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  color: var(--timber-2);
  font: 500 0.6875rem/1 var(--ff-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
}

.shot__cap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 40px 18px 16px;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 84%, transparent), transparent);
  color: var(--chalk);
  font: 400 0.8125rem/1.4 var(--ff-text);
}

/* Merkmale-Leiste ----------------------------------------------------- */
/* Die Haarlinien entstehen als 1px-Gap über der --hair-Fläche. Ab 600px zieht
   ein negativer Außenabstand das Raster um genau die Item-Polsterung nach
   außen, damit der erste Text mit der Shell-Kante fluchtet. */
.marks { border-block: 1px solid var(--hair); background: var(--paper); }
.marks__inner {
  display: grid;
  gap: 1px;
  background: var(--hair);
}
.marks__item {
  background: var(--paper);
  padding: 18px 0;
  font-size: var(--fs-small);
  color: var(--stone);
}
.marks__item span {
  display: block;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 3px;
}

/* ---------- 7 · Bänder -------------------------------------------------- */
.band { padding-block: var(--band-y); }
.band--paper { background: var(--paper); }
.band--dark {
  background: var(--ink);
  color: var(--paper);
  position: relative;
}
.band--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 140px;
  opacity: .05;
  pointer-events: none;
}
.band--dark .h2, .band--dark .h3 { color: var(--white); }

.band__head { max-width: 62ch; margin-bottom: clamp(40px, 5vw, 76px); }
.band__head--narrow { max-width: 46ch; }
.band__intro {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  line-height: 1.52;
  color: var(--stone);
  text-wrap: pretty;
}

/* ---------- 8 · Leistungen ---------------------------------------------- */
.leistungen { border-top: 1px solid var(--hair); }

.leistung {
  display: grid;
  gap: var(--sp-3) var(--sp-6);
  padding-block: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid var(--hair);
  transition: background .4s var(--ease);
}
.leistung:hover { background: color-mix(in srgb, var(--paper) 70%, transparent); }

.leistung__text p {
  color: var(--stone);
  max-width: 58ch;
  text-wrap: pretty;
}
/* Schlagworte gehören unter ihren Absatz, nicht in eine eigene weit
   entfernte Spalte — sonst klafft in der Zeilenmitte ein Loch. */
.leistung__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-4);
}
.leistung__tags span {
  padding: 5px 11px;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.05em;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ---------- 9 · Statement ----------------------------------------------- */
.statement {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(64px, 9vw, 140px);
  position: relative;
  overflow: hidden;
}
.statement::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 140px;
  opacity: .06;
  pointer-events: none;
}
.statement__grid { display: grid; gap: clamp(32px, 4vw, 56px); position: relative; }

.statement__quote p {
  font-family: var(--ff-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--white);
  text-wrap: balance;
}
.statement__quote p::before { content: "„"; color: var(--timber); }
.statement__quote p::after  { content: "“"; color: var(--timber); }

.statement__side { display: grid; gap: var(--sp-6); align-content: start; }
.statement__side p { color: var(--timber-2); max-width: 44ch; text-wrap: pretty; }
.statement__ill {
  width: min(100%, 240px);
  aspect-ratio: 200 / 150;
  color: var(--timber);
  opacity: .5;
}

/* ---------- 10 · Projekte ----------------------------------------------- */
.projekte { display: grid; gap: clamp(48px, 6vw, 104px); }

.projekt { display: grid; gap: clamp(24px, 3vw, 52px); align-items: start; }
.projekt__media { position: relative; }

.projekt__kicker {
  font: 500 var(--fs-mono)/1.3 var(--ff-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--sp-3);
}
.projekt__body .h3 { margin-bottom: var(--sp-5); }

.projekt__dl { display: grid; }
.projekt__dl dt {
  font: 600 var(--fs-mono)/1 var(--ff-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hair);
  margin-bottom: var(--sp-3);
}
.projekt__dl dd { margin: 0 0 var(--sp-5); color: var(--stone); max-width: 58ch; text-wrap: pretty; }
.projekt__dl dd:last-child { margin-bottom: 0; }

.projekte__mehr {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--hair);
}
.projekte__mehr p {
  font-size: var(--fs-small);
  color: var(--stone);
  max-width: 46ch;
}

/* ---------- 11 · Ablauf ------------------------------------------------- */
/* Gleiches Prinzip wie die Merkmale-Leiste: 20px Polsterung, 20px negativer
   Außenabstand — so fluchtet der erste Schritt mit der Überschrift darüber. */
.ablauf {
  display: grid;
  gap: 1px;
  background: var(--hair);
  margin-inline: -20px;
}
.schritt {
  background: var(--chalk);
  padding: clamp(24px, 2.6vw, 36px) 20px;
}
/* Der Ablauf behält seine Reihenfolge — aber als Sprache („Schritt 2"),
   nicht als dekorative Ziffer. */
.schritt__num {
  font: 500 var(--fs-mono)/1 var(--ff-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--sp-5);
}
.schritt .h4 { margin-bottom: var(--sp-3); }
.schritt p { color: var(--stone); font-size: var(--fs-small); text-wrap: pretty; }

/* ---------- 12 · Betrieb ------------------------------------------------ */
.betrieb { display: grid; gap: clamp(36px, 5vw, 72px); position: relative; }
.betrieb__text { display: grid; gap: var(--sp-5); align-content: start; }
.betrieb__text .h2 { margin-bottom: var(--sp-2); }
.betrieb__text > p { color: var(--timber-2); max-width: 56ch; text-wrap: pretty; }

.ausbildung {
  margin-top: var(--sp-4);
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid color-mix(in srgb, var(--timber) 42%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--timber) 8%, transparent);
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}
.ausbildung p:not(.eyebrow) { color: var(--timber-2); max-width: 50ch; }
.ausbildung .eyebrow { margin-bottom: 0; }

/* ---------- 13 · FAQ ---------------------------------------------------- */
.faq-wrap { display: grid; gap: clamp(24px, 3vw, 56px); }
.faq { border-top: 1px solid var(--hair); }

.fq { border-bottom: 1px solid var(--hair); }
.fq summary {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: clamp(18px, 2vw, 26px);
  cursor: pointer;
  list-style: none;
  font-family: var(--ff-sans);
  font-weight: 650;
  font-size: var(--fs-h4);
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.fq summary::-webkit-details-marker { display: none; }
.fq summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 13px; height: 13px;
  align-self: center;
  background:
    linear-gradient(var(--signal), var(--signal)) center/100% 1.5px no-repeat,
    linear-gradient(var(--signal), var(--signal)) center/1.5px 100% no-repeat;
  transition: background-size .3s var(--ease);
}
/* Plus wird zu Minus: nur der senkrechte Balken verschwindet, keine Drehung */
.fq[open] summary::after { background-size: 100% 1.5px, 0 100%; }
.fq summary:hover { color: var(--signal); }
.fq summary > span { text-wrap: pretty; }

.fq__body { padding-bottom: clamp(20px, 2vw, 28px); padding-right: clamp(0px, 6vw, 88px); }
.fq__body p { color: var(--stone); max-width: 68ch; text-wrap: pretty; }
.fq[open] .fq__body { animation: fqIn .34s var(--ease) both; }
@keyframes fqIn { from { opacity: 0; transform: translateY(-5px); } }

/* ---------- 14 · Kontakt ------------------------------------------------ */
.kontakt-band { background: var(--chalk); }
.kontakt { display: grid; gap: clamp(36px, 5vw, 72px); align-items: start; }

.kontakt__intro > p { color: var(--stone); max-width: 46ch; margin-top: var(--sp-5); text-wrap: pretty; }
.kontakt__intro .h2 { margin-bottom: 0; }

.kontakt__daten { margin-top: var(--sp-7); border-top: 1px solid var(--hair); }
.kontakt__daten li {
  display: grid;
  gap: 2px var(--sp-5);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--hair);
  font-size: var(--fs-small);
}
.kontakt__label {
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--stone);
}
.kontakt__daten a { text-decoration: none; font-weight: 600; }
.kontakt__daten a:hover { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }

/* Formular ------------------------------------------------------------- */
.formkarte {
  position: relative;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: clamp(22px, 3vw, 40px);
  box-shadow: 0 1px 0 var(--hair), 0 22px 48px -34px rgba(23, 19, 15, .34);
}

.form { display: grid; gap: var(--sp-5); }
.form__hint { font-size: var(--fs-small); color: var(--stone); }
.form__hint abbr { color: var(--signal); text-decoration: none; }

.field { display: grid; gap: 7px; }
.field label {
  font: 600 var(--fs-small)/1.3 var(--ff-sans);
  letter-spacing: -0.005em;
}
.field label span[aria-hidden] { color: var(--signal); }
.field__opt {
  font: 400 var(--fs-mono)/1 var(--ff-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);            /* 5.66:1 — stone-2 wäre mit 2.9:1 zu schwach */
  margin-left: 6px;
}

.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--chalk);
  border: 1px solid var(--stone-2);  /* 3.09:1 zur Karte — WCAG 1.4.11 */
  border-radius: var(--r-md);
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none;
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 49%, var(--ink-3) 50%),
                    linear-gradient(-45deg, transparent 49%, var(--ink-3) 50%);
  background-size: 7px 7px, 7px 7px;
  background-position: calc(100% - 22px) 21px, calc(100% - 15px) 21px;
  background-repeat: no-repeat;
}
.field input::placeholder, .field textarea::placeholder { color: var(--stone); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  background: var(--white);
  border-color: var(--ink);
  outline: 2px solid var(--signal);
  outline-offset: 1px;
}

.field__note { font-size: 0.8125rem; color: var(--stone); }
.field__err {
  display: flex;
  gap: 7px;
  font: 500 0.8125rem/1.4 var(--ff-text);
  color: var(--error-2);
}
/* Gezeichnetes Warndreieck statt Zeichen — Screenreader lesen sonst „Multiplikation" vor */
.field__err::before {
  content: "";
  flex: none;
  width: 13px; height: 13px;
  margin-top: 2px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.field[data-invalid] input,
.field[data-invalid] select,
.field[data-invalid] textarea { border-color: var(--error); background: color-mix(in srgb, var(--error) 5%, var(--white)); }

.field-row { display: grid; gap: var(--sp-5); }

.field--check {
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding-top: var(--sp-2);
}
.field--check input {
  width: 24px; height: 24px;                    /* Mindestmaß nach WCAG 2.5.8 */
  min-height: 0;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--signal);
  cursor: pointer;
}
.field--check label {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--stone);
}
.field--check label a { color: var(--ink); text-underline-offset: 2px; }
.field--check .field__err { grid-column: 1 / -1; }
.field[data-invalid].field--check input { outline: 2px solid var(--error); outline-offset: 2px; }

/* Zusatzfragen je Vorhaben — als abgesetzter Block, damit erkennbar ist,
   dass hier etwas Neues erschienen ist. */
.zusatz {
  margin: 0;
  padding: var(--sp-5);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  background: var(--chalk);
}
.zusatz legend {
  padding: 0 var(--sp-3);
  margin-left: calc(var(--sp-3) * -1);
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
}
.zusatz__grid { display: grid; gap: var(--sp-4); }
.zusatz--eilig { border-color: color-mix(in srgb, var(--error) 45%, var(--hair)); }
.zusatz--eilig legend { color: var(--error-2); }
.zusatz__hinweis {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.field--check-klein label { font-size: 0.8125rem; }

/* Fotovorschau — die Dateien bleiben im Browser */
.fotoliste { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.fotoliste li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--sp-3);
  align-items: center;
  font-size: 0.8125rem;
  color: var(--stone);
}
.fotoliste img {
  width: 48px; height: 48px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--paper);
}
/* 16px ist hier kein Geschmacksurteil: Safari auf iOS zoomt beim Antippen in
   die Seite hinein, sobald ein Formularfeld kleiner als 16px schreibt, und
   zoomt nicht von allein zurück. Alle anderen Felder liegen schon auf 1rem —
   dieses eine fiel mit --fs-small (15px) heraus. */
.field input[type="file"] {
  padding: 10px 12px;
  font-size: 1rem;
  cursor: pointer;
}

/* Bestätigung nach dem Absenden.
   Eigener Name statt .vorgang — das interne Board nutzt .vorgang für seine
   Karten, und intern.css lädt nach style.css. */
.vorgangsnr {
  display: grid;
  gap: 4px;
  padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--signal);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--signal) 6%, var(--white));
}
.vorgangsnr__label {
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--stone);
}
.vorgangsnr strong {
  font: 700 clamp(1.25rem, 2.4vw, 1.6rem)/1.1 var(--ff-mono);
  letter-spacing: 0.04em;
  color: var(--signal-2);
}

.ablaufliste { display: grid; gap: var(--sp-4); counter-reset: schritt; }
.ablaufliste li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-small);
  color: var(--stone);
}
.ablaufliste li > p { min-width: 0; }
.ablaufliste li::before {
  counter-increment: schritt;
  content: counter(schritt);
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--signal);
  color: var(--white);
  font: 600 0.75rem/1 var(--ff-mono);
}
.ablaufliste strong { display: block; color: var(--ink); font-weight: 650; }

.zusammenfassung { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.zusammenfassung summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
  font: 600 var(--fs-small)/1.4 var(--ff-sans);
}
.zusammenfassung summary::-webkit-details-marker { display: none; }
.zusammenfassung summary::after {
  content: "";
  margin-left: auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--signal);
  border-bottom: 2px solid var(--signal);
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.zusammenfassung[open] summary::after { transform: rotate(225deg); }
.zusammenfassung dl { display: grid; gap: var(--sp-3); padding-bottom: var(--sp-4); }
.zusammenfassung dt {
  font: 500 0.6875rem/1.4 var(--ff-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--stone);
}
.zusammenfassung dd { margin: 0 0 var(--sp-2); font-size: var(--fs-small); }
.zusammenfassung dd:last-of-type { margin-bottom: 0; }

.formkarte__ok-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status:empty { display: none; }
.form__status { font-size: var(--fs-small); color: var(--error-2); }

button[data-submit][aria-busy="true"] { opacity: .72; pointer-events: none; }

.formkarte__ok { display: grid; gap: var(--sp-4); justify-items: start; }
.formkarte__ok p:not(.eyebrow) { color: var(--stone); max-width: 44ch; }

/* ---------- 15 · Fuß ---------------------------------------------------- */
.site-foot {
  background: var(--ink);
  color: var(--timber-2);
  padding-top: clamp(48px, 6vw, 88px);
  position: relative;
}
.site-foot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 140px;
  opacity: .05;
  pointer-events: none;
}
.site-foot__inner {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(40px, 5vw, 72px);
  position: relative;
}
.site-foot a { color: inherit; text-decoration: none; }
.site-foot a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.foot-logo {
  height: clamp(58px, 7vw, 82px);
  width: auto;
  margin-bottom: var(--sp-5);
}
.site-foot__brand p { font-size: var(--fs-small); line-height: 1.7; }
.site-foot__brand p + p { margin-top: var(--sp-3); }

.site-foot__nav { display: grid; gap: var(--sp-6); }
.foot-head {
  font: 500 var(--fs-mono)/1 var(--ff-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--stone-2);
  margin-bottom: var(--sp-4);
}
.site-foot__nav ul { display: grid; gap: 9px; }
.site-foot__nav li { font-size: var(--fs-small); }

/* Die Verweise waren 20px hoch. Regelkonform waren sie damit schon: bei 9px
   Abstand liegen die Mittelpunkte 29px auseinander, womit die Abstandsausnahme
   von WCAG 2.5.8 greift. 24px sind trotzdem angenehmer zu treffen, und der
   Abstand bleibt mit dann 33px Raster weit über der Schwelle. */
.site-foot__nav ul a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.site-foot__base {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
  border-top: 1px solid color-mix(in srgb, var(--timber) 26%, transparent);
  position: relative;
}
.site-foot__base p { font-size: 0.8125rem; color: var(--stone-2); }

/* ---------- 16 · Ansprechpartner & Team --------------------------------- */
/* Markierung für erfundene Demo-Inhalte. Bleibt sichtbar, bis echte Angaben
   vorliegen — siehe README, Abschnitt „Was erfunden ist". */
.demo-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px dashed color-mix(in srgb, var(--stone) 65%, transparent);
  border-radius: var(--r-pill);
  font: 500 var(--fs-mono)/1.5 var(--ff-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--stone);
}
.demo-mark::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.demo-mark--invert {
  color: var(--timber-2);
  border-color: color-mix(in srgb, var(--timber) 50%, transparent);
}

.person {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid color-mix(in srgb, var(--timber) 26%, transparent);
}
.person__body { display: grid; gap: var(--sp-4); align-content: start; }
.person__body .h3 { margin-bottom: 0; }
.person__rolle {
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--timber-2);
}
.person__zitat {
  margin: 0;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--timber);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.45;
  color: var(--white);
  max-width: 44ch;
}
.person__daten { display: grid; gap: var(--sp-5); align-content: start; justify-items: start; }
.person__kontakt { display: grid; gap: var(--sp-3); }
.person__kontakt li {
  display: grid;
  gap: 1px;
  font-size: var(--fs-small);
}
.person__kontakt span {
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--stone-2);
}
.person__kontakt a { color: var(--white); text-decoration: none; font-weight: 600; }
.person__kontakt a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Porträtplatz: bewusst kein Stockfoto. Einem genannten Menschen das Gesicht
   einer fremden Person zu geben, wäre etwas anderes als ein Baustellenbild. */
.portrait {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 90% at 30% 10%, #6f512f 0%, transparent 60%),
    linear-gradient(200deg, #40301f 0%, #241b13 100%);
}
.portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 140px;
  opacity: .14;
  mix-blend-mode: overlay;
}
.portrait__mono {
  font: 700 clamp(3rem, 7vw, 4.75rem)/1 var(--ff-sans);
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--timber-2) 70%, transparent);
}
.portrait__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 30px 16px 14px;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 85%, transparent), transparent);
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--timber-2);
}

.team-block {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid color-mix(in srgb, var(--timber) 26%, transparent);
}
.team-block__intro {
  margin-top: var(--sp-3);
  max-width: 52ch;
  color: var(--timber-2);
  text-wrap: pretty;
}

.team { display: grid; gap: 1px; margin-top: var(--sp-6); background: color-mix(in srgb, var(--timber) 26%, transparent); }
.team__rolle {
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--timber-2);
  margin-bottom: 6px;
}
.team li {
  background: var(--ink);
  padding: var(--sp-5) 0;
  font-size: var(--fs-small);
  color: var(--timber-2);
}
.team strong {
  display: block;
  font: 700 1.0625rem/1.35 var(--ff-sans);
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 4px;
}

/* ---------- 17 · Referenzseite ------------------------------------------ */
.seiten-kopf { padding-block: clamp(48px, 6vw, 96px) clamp(32px, 4vw, 56px); }
.seiten-kopf__grid { display: grid; gap: clamp(24px, 3vw, 48px); align-items: end; }
.seiten-kopf h1 {
  font-family: var(--ff-sans);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.03;
  text-wrap: balance;
}
.seiten-kopf h1 em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--timber);
}
.seiten-kopf__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--stone);
  max-width: 46ch;
  text-wrap: pretty;
}

.seiten-kopf__demo { margin-top: var(--sp-4); }

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-block: var(--sp-5);
  border-block: 1px solid var(--hair);
}
.filter__label {
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--stone);
  margin-right: var(--sp-3);
}
.filter__btn {
  min-height: 40px;
  padding: 8px 16px;
  background: none;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  font: 500 var(--fs-small)/1 var(--ff-sans);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.filter__btn:hover { border-color: var(--ink-3); background: var(--paper); }
.filter__btn[aria-pressed="true"] {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--white);
}
.filter__zahl { margin-left: auto; font-size: var(--fs-small); color: var(--stone); }

.refs {
  display: grid;
  gap: clamp(28px, 3.4vw, 52px);
  padding-block: clamp(36px, 4.5vw, 72px);
}
.ref { display: grid; gap: var(--sp-5); align-content: start; }
.ref__tag {
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
}
.ref__body { display: grid; gap: var(--sp-3); }
.ref__body .h4 { margin-top: 2px; }
.ref__body > p { color: var(--stone); text-wrap: pretty; }
.ref__meta {
  display: grid;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hair);
}
.ref__meta > div { display: grid; gap: 2px; }
.ref__meta dt {
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}
.ref__meta dd { margin: 0; font-size: var(--fs-small); font-weight: 600; }

/* Erstes Projekt größer: gibt der Seite einen Einstieg statt einer Tapete */
.ref--gross .ref__body > p { font-size: var(--fs-lead); line-height: 1.5; }

.refs__leer {
  padding: var(--sp-7) 0;
  color: var(--stone);
  border-top: 1px solid var(--hair);
}

.bildband { position: relative; }
/* max-height bremst den vollflächigen Band auf breiten Monitoren — sonst wird
   aus 21:9 auf einem Ultrawide ein 1400px hoher Streifen aus einer 1024px
   breiten Vorlage. */
.bildband .shot {
  border-radius: 0;
  aspect-ratio: 21 / 9;
  max-height: min(70vh, 620px);
}
.bildband__text {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(28px, 5vw, 64px) 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 88%, transparent), transparent);
  color: var(--chalk);
}
.bildband__text p {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.85rem);
  line-height: 1.3;
  max-width: 34ch;
  color: var(--white);
}

.abschluss { background: var(--paper); padding-block: clamp(48px, 6vw, 96px); }
.abschluss__grid { display: grid; gap: clamp(24px, 3vw, 48px); align-items: center; }
.abschluss p { color: var(--stone); max-width: 48ch; margin-top: var(--sp-4); text-wrap: pretty; }
.abschluss__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- 18 · Bewegung ----------------------------------------------- */
/* Startzustand nur mit aktivem JavaScript — ohne JS bleibt alles sichtbar. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal[data-visible] { opacity: 1; transform: none; }

/* ---------- 19 · Breakpoints -------------------------------------------- */

/* >= 600px — Formularfelder nebeneinander, Merkmale zweispaltig */
@media (min-width: 600px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .zusatz__grid { grid-template-columns: 1fr 1fr; }
  .zusatz .field--check { grid-column: 1 / -1; }
  .marks__inner { grid-template-columns: 1fr 1fr; margin-inline: -20px; }
  .marks__item { padding: 18px 20px; }
  .ablauf { grid-template-columns: 1fr 1fr; }
  .kontakt__daten li { grid-template-columns: 150px 1fr; align-items: baseline; }
  .team { grid-template-columns: 1fr 1fr; margin-inline: -20px; }
  .team li { padding-inline: 20px; }
  .ref__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .person__kontakt { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
  .site-foot__nav { grid-template-columns: repeat(3, auto); justify-content: start; gap: clamp(32px, 6vw, 88px); }
  .site-foot__base { grid-template-columns: auto 1fr; justify-content: space-between; }
  .site-foot__base p:last-child { text-align: right; }
}

/* >= 860px — Zweispalter für Hero, Projekte, Betrieb, Kontakt */
@media (min-width: 860px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .hero__body { padding-bottom: var(--sp-4); }
  /* Bildspalte füllt die Höhe der Textspalte, statt eine Lücke oben zu lassen */
  .hero__media { align-self: stretch; display: grid; }
  .shot--hero { aspect-ratio: auto; block-size: 100%; min-block-size: 460px; }

  .marks__inner { grid-template-columns: repeat(4, 1fr); }

  .leistung { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-items: start; }

  .statement__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .statement__grid .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }

  .projekt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .projekt--flip .projekt__media { order: 2; }

  .ablauf { grid-template-columns: repeat(4, 1fr); }

  /* align-items: start ist Voraussetzung für sticky im Grid —
     gestreckte Items füllen die Zeile und haben keinen Weg zum Kleben. */
  .betrieb { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); align-items: start; }
  .betrieb__media { position: sticky; top: 118px; }

  .faq-wrap { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); align-items: start; }
  .band__head--narrow { margin-bottom: 0; position: sticky; top: 118px; }

  .kontakt { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .kontakt__intro { position: sticky; top: 118px; }

  .person { grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 0.62fr); align-items: start; }
  .person__kontakt { grid-template-columns: 1fr; }
  .team { grid-template-columns: repeat(4, 1fr); }

  .seiten-kopf__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .refs { grid-template-columns: 1fr 1fr; }
  .ref--gross { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(32px, 4vw, 64px); }
  .abschluss__grid { grid-template-columns: minmax(0, 1fr) auto; }

  .site-foot__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

/* >= 1600px — Widescreen.
   Das Raster ist hier NICHT hart gedeckelt, sondern wächst mit: 62vw zwischen
   1480 und 2280px. Auf einem 3440er-Ultrawide sind das rund 2130px statt einer
   schmalen Spalte in der Bildmitte.

   Alle Werte setzen die vorherige Stufe stetig fort — die untere Grenze jeder
   clamp() entspricht dem Wert, den die Stufe davor an dieser Breite liefert.
   Sonst würde Schrift oder Abstand am Breakpoint springen oder schrumpfen. */
@media (min-width: 1600px) {
  :root {
    --shell:      clamp(1480px, 70vw, 2520px);
    --gutter:     clamp(56px, 4.2vw, 80px);
    --fs-display: clamp(4.4rem, 3.6vw, 6.4rem);
    --fs-h2:      clamp(3.05rem, 2.4vw, 4.1rem);
    --fs-h3:      clamp(1.6rem, 1.05vw, 2rem);
    --fs-lead:    clamp(1.3rem, 0.85vw, 1.5rem);
    --fs-body:    clamp(1.075rem, 0.66vw, 1.2rem);
    --band-y:     clamp(132px, 6.5vw, 190px);
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: clamp(64px, 5vw, 128px);
  }
  .leistung { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
  .refs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq-wrap { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); }
}

/* >= 2400px — Ultrawide. Ab hier ändert sich die Struktur, nicht nur die
   Breite: vier Referenzspalten, und die Textmaße dürfen etwas mitgehen,
   damit neben den Absätzen keine leeren Bahnen entstehen. */
@media (min-width: 2400px) {
  /* Bildspalte übernimmt die zusätzliche Breite, nicht die Textspalte */
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); }
  .refs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .leistung { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); }
  .hero__lead { max-width: 50ch; }
  .band__head { max-width: 70ch; }
  .leistung__text p { max-width: 72ch; }
  .projekt__dl dd { max-width: 68ch; }
  .betrieb__text > p { max-width: 66ch; }
  /* Ein 1000px breites Formular wirkt nicht sorgfältiger, nur unentschlossen */
  .formkarte { max-width: 860px; }
}

/* Tablet: das Hero-Bild darf nicht den halben Bildschirm füllen */
@media (min-width: 600px) and (max-width: 859px) {
  .shot--hero { aspect-ratio: 3 / 2; }
}

/* >= 1120px — großzügigere Achsen */
@media (min-width: 1120px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: clamp(48px, 6vw, 96px); }
  .leistung { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
  .projekt { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(40px, 5vw, 80px); }
}

/* Mobile Navigation — unter 860px als Panel */
@media (max-width: 859px) {
  .burger { display: inline-flex; }
  .head-cta { display: none; }

  /* WICHTIG: backdrop-filter macht .site-head zum Containing-Block für
     position: fixed. Das mobile Panel wäre dann auf die Kopfzeilenhöhe
     eingeklemmt statt bildschirmfüllend. Auf Mobilgeräten daher deckende
     Fläche statt Blur — das ist auch billiger zu rendern. */
  .site-head,
  .site-head[data-scrolled] {
    backdrop-filter: none;
    background: var(--chalk);
  }

  /* Marke und Burger müssen über dem Panel liegen (z-index 90),
     sonst deckt das offene Menü seinen eigenen Schließen-Knopf ab. */
  .brand,
  .site-head__actions { position: relative; z-index: 95; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: var(--sp-6);
    padding: clamp(88px, 16vw, 132px) var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
    background: var(--chalk);
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s var(--ease), visibility .3s;
  }
  .nav[data-open] { visibility: visible; opacity: 1; }

  .nav__list {
    flex-direction: column;
    gap: 0;
    align-content: start;
    border-top: 1px solid var(--hair);
    overflow-y: auto;
  }
  .nav__list li { border-bottom: 1px solid var(--hair); }
  .nav__list a {
    padding: 18px 0;
    font-family: var(--ff-sans);
    font-size: clamp(1.5rem, 7vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.026em;
  }
  .nav__list a::after { display: none; }

  .nav__foot { display: grid; gap: var(--sp-3); }
  .nav__foot .btn { justify-content: center; min-height: 54px; }

  body[data-nav-open] { overflow: hidden; }
}

@media (max-width: 599px) {
  .fq summary { gap: var(--sp-3); }
  .formkarte { padding-inline: clamp(16px, 4.5vw, 24px); }
}

/* Enge Telefone: Kopfzeile darf nicht umbrechen — Nummer wird zum Icon-Button,
   der Menütext entfällt. Beide behalten ihren Namen über aria-label. */
@media (max-width: 520px) {
  .head-tel {
    width: 44px; height: 44px;
    justify-content: center;
    border: 1px solid var(--stone-2);
    border-radius: var(--r-pill);
  }
  .head-tel .ico { width: 1.35em; height: 1.35em; }
  .burger { padding: 9px 12px; }
  .burger__box { width: 20px; }

  /* Text bleibt als zugänglicher Name erhalten, verschwindet nur optisch */
  .head-tel__num,
  .burger__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Rechtsseiten: im Kopf stehen statt Menü und Rufnummer zwei Textknöpfe.
   Wortmarke + beide Knöpfe passen auf schmalen Telefonen nicht in eine Zeile —
   gemessen 88px Überlauf bei 320px, bei 414px noch 14px, ab 480px sauber.
   „Zur Startseite" entfällt darunter: die Wortmarke links verlinkt bereits
   dorthin und sagt das im alt-Text. „Referenzen" bleibt stehen, weil dieser
   Weg sonst nur im Fuß auftaucht. Schwelle wie bei .head-tel, damit die
   Kopfzeile an einer Stelle umschaltet. */
@media (max-width: 520px) {
  .site-head__actions .head-start { display: none; }
}

@media (max-width: 859px) {
  .site-head__inner,
  .site-head[data-scrolled] .site-head__inner { min-height: 74px; }
  .brand img,
  .site-head[data-scrolled] .brand img { height: 52px; }
}

@media (max-width: 380px) {
  .brand img,
  .site-head[data-scrolled] .brand img { height: 46px; }
}

/* ---------- 20 · Statusseite für Bauherren ------------------------------ */
.statusseite { padding-block: clamp(40px, 5.5vw, 88px) clamp(56px, 7vw, 112px); }

.status-suche { max-width: 52ch; }
.status-suche__text { margin-top: var(--sp-4); color: var(--stone); text-wrap: pretty; }
.status-suche__form {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  margin-top: var(--sp-6);
  max-width: 30ch;
}
.status-suche__form .field { width: 100%; }
.status-suche__form input {
  font: 600 1.1rem/1 var(--ff-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.status-suche__demo { margin-top: var(--sp-5); }

.status-karte { max-width: 74ch; }
.status-karte__kopf {
  display: grid;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--hair);
}
.status-karte__nr { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--stone); }
.status-karte__nr strong { font-family: var(--ff-mono); letter-spacing: 0.05em; color: var(--ink); }

.status-marke {
  justify-self: start;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  font: 600 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink-2);
}
.status-marke[data-stand="angebot"]     { background: color-mix(in srgb, var(--timber) 22%, var(--white)); color: var(--ink); }
.status-marke[data-stand="beauftragt"],
.status-marke[data-stand="ausfuehrung"] { background: var(--signal); color: var(--white); }
.status-marke[data-stand="abgenommen"]  { background: var(--signal-2); color: var(--white); }
.status-marke[data-stand="abgelehnt"]   { background: var(--hair); color: var(--stone); }

/* Der aktuelle Stand steht vor dem Zeitstrahl — die eine Information,
   für die die Seite überhaupt aufgerufen wird. */
.status-jetzt {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border-left: 3px solid var(--signal);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--signal) 6%, var(--white));
}
.status-jetzt__label {
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--stone);
}
.status-jetzt__text {
  margin-top: 6px;
  font-size: var(--fs-lead);
  line-height: 1.4;
  font-weight: 600;
  text-wrap: pretty;
}
.status-jetzt__naechstes { margin-top: var(--sp-3); color: var(--stone); text-wrap: pretty; }

.zeitstrahl { margin-top: var(--sp-7); display: grid; }
.stufe {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  position: relative;
}
/* Verbindungslinie zwischen den Punkten */
.stufe:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: 0;
  width: 2px;
  background: var(--hair);
}
.stufe[data-zustand="erledigt"]:not(:last-child)::before { background: var(--signal); }

.stufe__punkt {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--hair);
  background: var(--chalk);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}
.stufe__punkt svg { width: 15px; height: 15px; color: var(--white); }
.stufe[data-zustand="erledigt"] .stufe__punkt { background: var(--signal); border-color: var(--signal); }
.stufe[data-zustand="aktiv"] .stufe__punkt {
  border-color: var(--signal);
  border-width: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 16%, transparent);
}

.stufe__body { min-width: 0; padding-top: 3px; }
.stufe__titel { font: 650 1.0625rem/1.35 var(--ff-sans); letter-spacing: -0.01em; }
.stufe__datum {
  margin-top: 2px;
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.07em;
  color: var(--signal);
}
.stufe__datum--geplant { color: var(--stone); }
.stufe__text { margin-top: 5px; font-size: var(--fs-small); color: var(--stone); }
.stufe[data-zustand="offen"] .stufe__titel { color: var(--stone); }

.status-hilfe {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hair);
}
.status-hilfe__titel { font-weight: 650; }
.status-hilfe p + p { margin-top: var(--sp-2); color: var(--stone); }
.status-hilfe__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

@media (min-width: 600px) {
  .status-karte__kopf { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .status-marke { justify-self: end; }
  .status-suche__form { grid-template-columns: 1fr auto; align-items: end; max-width: 46ch; }
}

/* ---------- 21 · Angebot für den Bauherrn ------------------------------- */
/* Angebotskarte auf der Statusseite */
.ang-karte {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--timber) 45%, var(--hair));
  border-left: 3px solid var(--timber);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--timber) 7%, var(--white));
}
.ang-karte[data-stand="zusage"] {
  border-color: color-mix(in srgb, var(--signal) 45%, var(--hair));
  border-left-color: var(--signal);
  background: color-mix(in srgb, var(--signal) 6%, var(--white));
}
.ang-karte[data-stand="absage"] { border-left-color: var(--stone-2); background: var(--paper); }
.ang-karte__label {
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--stone);
}
.ang-karte__summe { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline; }
.ang-karte__summe strong {
  font: 700 clamp(1.35rem, 2.6vw, 1.75rem)/1.1 var(--ff-mono);
  letter-spacing: 0.02em;
}
.ang-karte__summe span { font-size: var(--fs-small); color: var(--stone); }
.ang-karte__zeile { font-size: var(--fs-small); color: var(--ink-2); text-wrap: pretty; }
.ang-karte__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Angebotsdokument */
.angebotseite { background: var(--stone-2); }
.ang-fehler {
  max-width: 60ch;
  margin: clamp(48px, 8vw, 120px) auto;
  padding: var(--sp-6);
  background: var(--white);
  border-radius: var(--r-md);
  border-left: 3px solid var(--error);
  color: var(--ink-2);
  text-wrap: pretty;
}

.ang-blatt {
  max-width: 860px;
  margin: var(--sp-6) auto 0;
  padding: clamp(24px, 5vw, 56px);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 24px 70px -34px rgba(0, 0, 0, .55);
}
.ang-kopf {
  display: grid;
  gap: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 2px solid var(--ink);
}
.ang-kopf__logo { height: 52px; width: auto; }
.ang-kopf__absender p { font-size: 0.8125rem; line-height: 1.5; color: var(--stone); }
.ang-kopf__absender strong { color: var(--ink); }

.ang-zeile { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
.ang-klein {
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 4px;
}
.ang-empfaenger p { line-height: 1.55; }
.ang-meta { display: grid; gap: 4px; }
.ang-meta > div { display: flex; gap: var(--sp-3); justify-content: space-between; }
.ang-meta dt { font-size: 0.8125rem; color: var(--stone); }
.ang-meta dd { margin: 0; font: 600 0.8125rem/1.5 var(--ff-mono); letter-spacing: 0.03em; }

.ang-titel {
  margin-top: var(--sp-7);
  font: 700 clamp(1.5rem, 3.4vw, 2.1rem)/1.15 var(--ff-sans);
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.ang-anrede { margin-top: var(--sp-5); }
.ang-einleitung { margin-top: var(--sp-3); color: var(--ink-2); text-wrap: pretty; max-width: 68ch; }

.ang-tabelle-huelle { margin-top: var(--sp-6); overflow-x: auto; }
.ang-tabelle { width: 100%; min-width: 560px; border-collapse: collapse; }
.ang-tabelle th {
  text-align: left;
  padding: 0 10px 8px 0;
  font: 600 0.6875rem/1.4 var(--ff-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--stone);
  border-bottom: 1.5px solid var(--ink);
}
.ang-tabelle td {
  padding: 11px 10px 11px 0;
  vertical-align: top;
  font-size: 0.9375rem;
  line-height: 1.45;
  border-bottom: 1px solid var(--hair);
}
.ang-rechts { text-align: right; white-space: nowrap; }
.ang-tabelle td.ang-rechts { font-family: var(--ff-mono); font-size: 0.875rem; }
.ang-fett { font-weight: 700; }
.ang-pos { width: 42px; font: 600 0.8125rem var(--ff-mono); color: var(--stone); }

.ang-summen { display: grid; gap: 6px; margin: var(--sp-5) 0 0 auto; max-width: 360px; }
.ang-summen > div { display: flex; justify-content: space-between; gap: var(--sp-4); }
.ang-summen dt { font-size: var(--fs-small); color: var(--stone); }
.ang-summen dd { margin: 0; font: 600 0.9375rem/1.4 var(--ff-mono); }
.ang-summen__gesamt { padding-top: 8px; border-top: 2px solid var(--ink); }
.ang-summen__gesamt dt { font-size: 1rem; font-weight: 700; color: var(--ink); }
.ang-summen__gesamt dd { font-size: 1.2rem; font-weight: 700; }

.ang-abschnitt { margin-top: var(--sp-7); }
.ang-abschnitt h2 {
  font: 600 0.75rem/1.4 var(--ff-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--signal);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: var(--sp-4);
}
.ang-abschnitt p { color: var(--ink-2); max-width: 74ch; text-wrap: pretty; }
.ang-liste { display: grid; gap: var(--sp-2); padding-left: 1.15em; list-style: disc; max-width: 74ch; }
.ang-liste li { color: var(--ink-2); font-size: var(--fs-small); }
.ang-hinweis { margin-top: var(--sp-3); font-size: 0.8125rem; color: var(--stone); }
.ang-gruss { margin-top: var(--sp-7); line-height: 1.7; }

/* Entscheidung — bewusst außerhalb des Blatts, damit klar ist:
   das ist eine Handlung, kein Teil des Dokuments. */
.ang-entscheidung {
  max-width: 860px;
  margin: 0 auto var(--sp-9);
  padding: clamp(24px, 5vw, 56px);
  background: var(--ink);
  color: var(--paper);
}
.ang-entscheidung__innen { display: grid; gap: var(--sp-4); }
.ang-entscheidung .h3 { color: var(--white); }
.ang-entscheidung p { color: var(--timber-2); max-width: 64ch; text-wrap: pretty; }
.ang-entscheidung__knoepfe { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.ang-entscheidung .btn--line { --btn-br: color-mix(in srgb, var(--timber) 55%, transparent); --btn-fg: var(--paper); }
.ang-entscheidung .btn--line:hover { --btn-bg: color-mix(in srgb, var(--timber) 20%, transparent); }

.ang-bestaetigung {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px dashed color-mix(in srgb, var(--timber) 55%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--timber) 10%, transparent);
}
.ang-bestaetigung__frage { color: var(--white) !important; font-weight: 600; }

.ang-ergebnis {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--signal) 22%, transparent);
  color: var(--white) !important;
  font-weight: 600;
}
.ang-ergebnis[data-art="nein"] { background: color-mix(in srgb, var(--stone) 30%, transparent); }
.ang-ergebnis[data-art="alt"] { background: color-mix(in srgb, var(--error) 24%, transparent); }

.ang-druck {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--timber-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ang-entscheidung a { color: var(--timber-2); text-underline-offset: 3px; }

@media (min-width: 640px) {
  .ang-kopf { grid-template-columns: auto 1fr; align-items: start; }
  .ang-kopf__absender { text-align: right; }
  .ang-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: start; }
}

@media print {
  .angebotseite { background: #fff; }
  .ang-entscheidung, .site-foot, .demo-mark { display: none !important; }
  .ang-blatt { max-width: none; margin: 0; padding: 0; box-shadow: none; }
  .ang-tabelle { min-width: 0; }
  .ang-abschnitt { break-inside: avoid; }
  .ang-abschnitt h2 { color: #000; }
  @page { size: A4; margin: 16mm; }
}

/* ---------- 22 · Zugang über Magic Link --------------------------------- */
.zugangseite { background: var(--ink); }
.zugang {
  display: grid;
  gap: var(--sp-5);
  align-content: center;
  justify-items: center;
  min-height: 100vh;
  padding: var(--sp-6) var(--gutter);
}
.zugang__karte {
  width: 100%;
  max-width: 48ch;
  padding: clamp(24px, 5vw, 48px);
  background: var(--chalk);
  border-radius: 6px;
  box-shadow: 0 28px 70px -34px rgba(0, 0, 0, .6);
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}
.zugang__logo { height: 46px; width: auto; margin-bottom: var(--sp-2); }
/* Die drei Zustände sind selbst Rasterkinder und brauchen eigene Abstände */
.zugang__pruefen,
.zugang__gut,
.zugang__schlecht {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  width: 100%;
}
.zugang__text { color: var(--stone); text-wrap: pretty; }
.zugang__klein { font-size: 0.8125rem; color: var(--stone-2); text-wrap: pretty; }
.zugang__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.zugang__laden { display: flex; align-items: center; gap: var(--sp-3); color: var(--stone); }
.zugang__punkt {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--signal);
  animation: zpuls 1.1s ease-in-out infinite;
}
@keyframes zpuls { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.eyebrow--fehler { color: var(--error-2); }
.zugang__fuss { font-size: 0.8125rem; color: var(--stone-2); }
.zugang__fuss a { color: var(--timber-2); text-underline-offset: 3px; }

/* Zweiter Schritt: Bestätigung der Kontaktangabe */
.zugang__form { display: grid; gap: var(--sp-4); width: 100%; }
.zugang__form .field { width: 100%; }
.zugang__form input { font-size: 1rem; }
.zugang__hinweisfeld {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--timber) 12%, var(--white));
  border-left: 3px solid var(--timber);
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.zugang__hinweisfeld strong { font-family: var(--ff-mono); letter-spacing: 0.03em; }
.zugang__warum {
  font-size: 0.8125rem;
  color: var(--stone);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hair);
  text-wrap: pretty;
}

/* Hinweis, wenn ohne Link zugegriffen wird (nur Vorführung) */
.demo-zugang { margin-bottom: var(--sp-5); }
.demo-zugang--blatt { max-width: 860px; margin: var(--sp-6) auto 0; padding-inline: clamp(24px, 5vw, 56px); }

/* Vergleichshinweis im Angebot — nützt dem Bauherrn und ist deshalb
   abgesetzt vom Leistungsverzeichnis. */
.ang-abschnitt--vergleich {
  padding: var(--sp-5);
  background: var(--paper);
  border-radius: var(--r-md);
}
.ang-abschnitt--vergleich h2 { border-bottom-color: var(--stone-2); }
.ang-vergleich { white-space: pre-line; }

/* Auftragserteilung auf Papier — am Bildschirm überflüssig, weil es dort
   den Annehmen-Knopf gibt. */
.ang-papier { display: none; }
@media print {
  .ang-papier {
    display: block;
    margin-top: 18mm;
    padding-top: 6mm;
    border-top: 1.5px solid #000;
    break-inside: avoid;
  }
  .ang-papier h2 {
    font: 600 9pt/1.4 var(--ff-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 4mm;
  }
  .ang-papier__text { font-size: 9.5pt; max-width: 68ch; }
  .ang-papier__felder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4mm 10mm;
    margin-top: 10mm;
  }
  .ang-papier__felder dt { font-size: 7.5pt; color: #555; margin-bottom: 8mm; }
  .ang-papier__linie { display: block; border-bottom: 1px solid #000; min-height: 1px; }
  .ang-papier__wahl { margin-top: 8mm; font-size: 9pt; }
  .ang-papier__linie--kurz { display: inline-block; width: 60mm; margin-left: 3mm; vertical-align: bottom; }
  .ang-papier__kontakt { margin-top: 8mm; font-size: 8.5pt; }
}

/* ---------- 23 · Rechtstexte (Impressum, Datenschutz) ------------------- */
.legal { padding-block: clamp(48px, 6.5vw, 104px); }
.legal__head { max-width: 56ch; }
.legal__head .h2 { margin-bottom: var(--sp-4); }
.legal__head > p { color: var(--stone); }

.hinweis {
  display: grid;
  gap: var(--sp-2);
  max-width: 76ch;
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--error) 40%, var(--hair));
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--error) 5%, var(--white));
}
.hinweis strong { font-family: var(--ff-sans); letter-spacing: -0.01em; }
.hinweis p { font-size: var(--fs-small); color: var(--ink-2); }

.legal__body {
  max-width: 76ch;
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  gap: clamp(28px, 3vw, 44px);
}
.legal__body section { display: grid; gap: var(--sp-4); }
.legal__body h2 {
  font: 700 var(--fs-h3)/1.24 var(--ff-sans);
  letter-spacing: -0.016em;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hair);
}
.legal__body h3 { font: 650 1.0625rem/1.4 var(--ff-sans); letter-spacing: -0.008em; }
.legal__body p, .legal__body li { color: var(--ink-2); }
.legal__body ul { display: grid; gap: var(--sp-2); padding-left: 1.15em; list-style: disc; }
.legal__body ul li { padding-left: 4px; }
.legal__body a { text-underline-offset: 3px; }
.legal__body a:hover { color: var(--signal); }

.legal__dl { display: grid; gap: var(--sp-3); }
.legal__dl > div { display: grid; gap: 2px; }
.legal__dl dt {
  font: 500 var(--fs-mono)/1.4 var(--ff-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--stone);
}
.legal__dl dd { margin: 0; }

/* Rufnummer und Mailadresse stehen hier allein in ihrer Zeile, sind also keine
   Verweise „im Satz" und fallen nicht unter die Ausnahme von WCAG 2.5.8. Mit
   der Zeilenhöhe des Fließtextes kamen sie auf 21px — zu klein zum Antippen.
   inline-flex, weil min-height an einem reinen Inline-Element nicht greift.
   Der Verweis auf die Handwerksordnung bleibt absichtlich außen vor: er steht
   mitten im Satz, darf umbrechen und fällt unter die Ausnahme. */
.legal__dl dd > a[href^="tel:"],
.legal__dl dd > a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.todo {
  display: inline-block;
  margin-inline: 2px;
  padding: 2px 8px;
  border: 1px dashed var(--error);
  border-radius: var(--r-sm);
  font: 500 var(--fs-mono)/1.5 var(--ff-mono);
  letter-spacing: 0.06em;
  color: var(--error-2);
  background: color-mix(in srgb, var(--error) 6%, transparent);
}

@media (min-width: 600px) {
  .legal__dl { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
}

/* ---------- 24 · Präferenzen -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --stone: #4a423a; --hair: #b8ac98; --stone-2: #6b6157; }
}

@media print {
  .site-head, .nav, .burger, .formkarte, .shot { display: none !important; }
  body { background: #fff; color: #000; }
  .band, .statement, .site-foot { background: #fff !important; color: #000 !important; padding-block: 16px; }
}