/* ==========================================================================
   EIFELD BAU — Stylesheet
   Ein einziges Design-System für alle Seiten.
   Farben und Abstände werden ausschliesslich über die Variablen unten
   gesteuert. Wer eine Farbe ändern will, ändert sie hier einmal.
   ========================================================================== */

:root {
  /* Farben */
  --ink:        #16150f;   /* Schrift, dunkle Flächen */
  --ink-70:     #4a4740;
  --slate:      #33352f;   /* zweite dunkle Fläche, Beton-Ton */
  --gold:       #b8862b;   /* Messing – Schrift auf hell */
  --gold-hell:  #e0b45a;   /* Messing – Schrift/Flächen auf dunkel */
  --gold-tief:  #8f680f;
  --kalk:       #f3f0e9;   /* Seitenhintergrund */
  --kalk-warm:  #e8e2d6;   /* abgesetzte Abschnitte */
  --weiss:      #ffffff;
  --linie:      #d9d3c6;
  --linie-dunkel: rgba(255,255,255,.16);

  /* Typografie */
  --font: "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --fs-display: clamp(2.35rem, 1.5rem + 3.2vw, 4.05rem);
  --fs-h2:      clamp(1.85rem, 1.3rem + 1.9vw, 2.9rem);
  --fs-h3:      clamp(1.12rem, 1rem + .4vw, 1.35rem);
  --fs-body:    clamp(1rem, .96rem + .18vw, 1.09rem);
  --fs-klein:   .875rem;
  --fs-mini:    .78rem;

  /* Raster und Abstand */
  --breite:     1200px;
  --rand:       clamp(20px, 5vw, 48px);
  --block:      clamp(56px, 8vw, 108px);
  --radius:     3px;

  --schatten:   0 18px 48px rgba(22,20,15,.12);
  --schatten-s: 0 6px 18px rgba(22,20,15,.08);
}

/* --------------------------------------------------------------- Basis -- */

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--kalk);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.menue-offen { overflow: hidden; }
body.anfrage-offen { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.14; letter-spacing: -.022em; }
h1 { font-size: var(--fs-display); letter-spacing: -.035em; line-height: 1.03; }
h2 { font-size: var(--fs-h2); letter-spacing: -.028em; }
h3 { font-size: var(--fs-h3); }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------- Bausteine */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.zum-inhalt {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--weiss);
  font-size: var(--fs-klein);
  font-weight: 600;
  transition: top .16s;
}
.zum-inhalt:focus { top: 12px; }

/* Abschnitt-Grundraster: nur EIN Ort, an dem vertikale Abstände entstehen. */
.block { padding-block: var(--block); }
.block--hell  { background: var(--weiss); }
.block--warm  { background: var(--kalk-warm); }
.block--dunkel{ background: var(--ink); color: var(--weiss); }
.block--eng   { padding-block: calc(var(--block) * .58); }
.block--ohne-oben { padding-top: 0; }

/* Textspalte: nie breiter als angenehm lesbar */
.mass { max-width: 62ch; }
.mass--schmal { max-width: 46ch; }

.marke {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--gold-tief);
  font-size: var(--fs-klein);
  font-weight: 600;
  letter-spacing: .01em;
}
.marke::before { content: ""; width: 28px; height: 2px; background: var(--gold); flex: 0 0 auto; }
.marke--hell { color: var(--gold-hell); }
.marke--hell::before { background: var(--gold-hell); }

/* Überschriftenblock – auf jeder Seite identisch aufgebaut */
.kopf { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 52px); }
.kopf p { color: var(--ink-70); }
.block--dunkel .kopf p { color: rgba(255,255,255,.72); }

@media (min-width: 900px) {
  .kopf--zwei {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: end;
    column-gap: clamp(32px, 5vw, 72px);
  }
  .kopf--zwei > :first-child { grid-row: span 2; }
}

/* Knöpfe */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-klein);
  font-weight: 700;
  letter-spacing: .005em;
  text-align: center;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.knopf--gold   { background: var(--gold); color: #17140c; }
.knopf--gold:hover { background: var(--gold-hell); }
.knopf--dunkel { background: var(--ink); color: var(--weiss); }
.knopf--dunkel:hover { background: var(--slate); }
.knopf--rahmen { border-color: var(--linie); background: transparent; color: var(--ink); }
.knopf--rahmen:hover { border-color: var(--ink); }
.block--dunkel .knopf--rahmen,
.kopfbild .knopf--rahmen { border-color: rgba(255,255,255,.45); color: var(--weiss); }
.block--dunkel .knopf--rahmen:hover,
.kopfbild .knopf--rahmen:hover { background: rgba(255,255,255,.12); border-color: var(--weiss); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }

/* Auswahl beim Klick auf „Projekt anfragen“ */
.anfrage-dialog {
  width: min(920px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.anfrage-dialog::backdrop {
  background: rgba(15, 14, 10, .76);
  backdrop-filter: blur(3px);
}
.anfrage-dialog-inhalt {
  position: relative;
  max-height: calc(100dvh - 32px);
  padding: clamp(24px, 4vw, 46px);
  overflow: auto;
  overscroll-behavior: contain;
  border-top: 4px solid var(--gold);
  background: var(--kalk);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .3);
}
.anfrage-dialog-schliessen {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--linie);
  background: var(--weiss);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
}
.anfrage-dialog-inhalt > h2 { max-width: 18ch; padding-right: 46px; }
.anfrage-dialog-text { margin-top: 10px; color: var(--ink-70); }
.anfrage-dialog-wege { display: grid; gap: 14px; margin-top: clamp(24px, 4vw, 34px); }
.anfrage-dialog-weg {
  display: flex;
  min-height: 230px;
  flex-direction: column;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--linie);
  background: var(--weiss);
  box-shadow: var(--schatten-s);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.anfrage-dialog-weg:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--schatten);
}
.anfrage-dialog-meta {
  margin-bottom: 16px;
  color: var(--gold-tief);
  font-size: var(--fs-klein);
  font-weight: 700;
}
.anfrage-dialog-weg > strong { font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem); }
.anfrage-dialog-weg > span:not(.anfrage-dialog-meta) {
  margin-top: 9px;
  color: var(--ink-70);
  font-size: var(--fs-klein);
}
.anfrage-dialog-weg > b { margin-top: auto; padding-top: 24px; font-size: var(--fs-klein); }
.anfrage-dialog-weg > b i { color: var(--gold-tief); font-style: normal; }
@media (min-width: 700px) {
  .anfrage-dialog-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .anfrage-dialog {
    width: 100%;
    max-height: calc(100dvh - 16px);
    margin: auto 0 0;
  }
  .anfrage-dialog-inhalt {
    max-height: calc(100dvh - 16px);
    padding-top: 30px;
  }
  .anfrage-dialog-weg { min-height: 190px; }
}
@media (prefers-reduced-motion: no-preference) {
  .anfrage-dialog[open] .anfrage-dialog-inhalt { animation: anfrage-einblenden .2s ease-out; }
  @keyframes anfrage-einblenden {
    from { opacity: 0; transform: translateY(18px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* Textlink mit Richtungspfeil – der Pfeil steht hier für „weiter", nicht als Deko */
.weiter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gold);
  font-size: var(--fs-klein);
  font-weight: 700;
  transition: gap .18s;
}
.weiter::after { content: "→"; color: var(--gold-tief); }
.weiter:hover { gap: 14px; }
.block--dunkel .weiter::after { color: var(--gold-hell); }
.block--dunkel .weiter { border-color: var(--gold-hell); }

/* Signatur des Auftritts: die „Schwelle" – eine feine Messinglinie,
   die den Übergang markiert. Sie ersetzt Kästen und Schatten. */
.schwelle { border-left: 3px solid var(--gold); padding-left: clamp(18px, 2.4vw, 30px); }

/* -------------------------------------------------------------- Hinweis */

.startphase {
  background: var(--ink);
  color: var(--weiss);
  font-size: var(--fs-klein);
}
.startphase > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding-block: 11px;
}
.startphase b { color: var(--gold-hell); font-weight: 700; }
.startphase span { color: rgba(255,255,255,.78); }

/* --------------------------------------------------------------- Header */

.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(243,240,233,.94);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: blur(14px);
}
.kopfzeile > div {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  min-height: 74px;
}

.logo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.logo img { width: 38px; height: auto; }
.logo span { display: grid; line-height: 1.12; }
.logo b { font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }
.logo small { color: var(--ink-70); font-size: var(--fs-mini); letter-spacing: .01em; }

.hauptnav { display: none; margin-left: auto; gap: clamp(14px, 2vw, 26px); }
.hauptnav a {
  position: relative;
  padding-block: 6px;
  font-size: var(--fs-klein);
  font-weight: 600;
}
.hauptnav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--gold);
  transition: right .22s;
}
.hauptnav a:hover::after,
.hauptnav a[aria-current="page"]::after { right: 0; }
.hauptnav a[aria-current="page"] { color: var(--gold-tief); }

.kopf-cta { display: none; }

.menue-knopf {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: transparent;
  font-size: var(--fs-klein);
  font-weight: 700;
  cursor: pointer;
}
.menue-knopf i { display: grid; gap: 4px; width: 18px; }
.menue-knopf i b { display: block; height: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.menue-knopf[aria-expanded="true"] i b:first-child { transform: translateY(3px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] i b:last-child  { transform: translateY(-3px) rotate(-45deg); }

@media (min-width: 900px) {
  .hauptnav { display: flex; }
  .kopf-cta { display: inline-flex; }
  .menue-knopf { display: none; }
}

/* Schublade (mobil) */
.schublade-hg {
  position: fixed; inset: 0; z-index: 70;
  border: 0; padding: 0;
  background: rgba(18,17,12,.55);
  opacity: 0; visibility: hidden;
  transition: opacity .22s, visibility .22s;
}
.schublade-hg.offen { opacity: 1; visibility: visible; }

.schublade {
  position: fixed;
  top: 0; right: 0; bottom: 0; z-index: 80;
  width: min(360px, 88vw);
  display: flex; flex-direction: column;
  padding: 22px var(--rand) 26px;
  background: var(--kalk);
  box-shadow: var(--schatten);
  transform: translateX(102%);
  transition: transform .26s ease;
  overflow-y: auto;
}
.schublade.offen { transform: none; }
.schublade-kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.schublade-kopf b { font-size: 1rem; }
.schublade-kopf small { display: block; color: var(--ink-70); font-size: var(--fs-mini); }
.schliessen {
  width: 42px; height: 42px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: transparent; font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.schublade nav { display: grid; }
.schublade nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 1.05rem; font-weight: 600;
}
.schublade nav a[aria-current="page"] { color: var(--gold-tief); }
.schublade nav a::after { content: "→"; color: var(--gold); }
.schublade .knopf { margin-top: 24px; width: 100%; }
.schublade-fuss { margin-top: auto; padding-top: 24px; color: var(--ink-70); font-size: var(--fs-mini); }
.schublade-fuss a { text-decoration: underline; }
.schublade-fuss div { display: flex; gap: 16px; margin-top: 8px; }

/* ---------------------------------------------------------------- Hero  */
/* Geteilter Aufbau: links der Text, rechts das hochformatige Bild.
   Das Bild zeigt den Übergang von der Baustelle in den fertigen Raum –
   deshalb steht es hier ungeschnitten und nicht als Hintergrundfläche. */

.hero { background: var(--kalk); border-bottom: 1px solid var(--linie); }
.hero > div {
  display: grid;
  gap: clamp(30px, 5vw, 60px);
  padding-block: clamp(44px, 6vw, 84px);
}
.hero-text > * + * { margin-top: 22px; }
.hero-text p { color: var(--ink-70); max-width: 52ch; }
.hero .knopfreihe { margin-top: 30px; }

.hero-punkte {
  display: grid;
  gap: 10px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--linie);
  font-size: var(--fs-klein);
}
.hero-punkte li { display: flex; gap: 10px; align-items: baseline; }
.hero-punkte li::before { content: "—"; color: var(--gold); flex: 0 0 auto; }

.hero-bild { position: relative; }
.hero-bild img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.hero-bild figcaption {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 3px solid var(--gold);
  color: var(--ink-70);
  font-size: var(--fs-mini);
}

@media (min-width: 900px) {
  .hero > div { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; }
  .hero-bild img { aspect-ratio: 3 / 4; }
}

/* Kopfbild der Unterseiten – auf allen Seiten identisch */
.kopfbild { position: relative; color: var(--weiss); background: var(--ink); overflow: hidden; }
.kopfbild > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kopfbild::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(14,13,9,.93) 12%, rgba(14,13,9,.72) 52%, rgba(14,13,9,.34));
}
.kopfbild > div { position: relative; z-index: 2; padding-block: clamp(52px, 8vw, 104px); }
.kopfbild p { color: rgba(255,255,255,.78); max-width: 54ch; margin-top: 18px; }
.kopfbild .knopfreihe { margin-top: 30px; }

/* -------------------------------------------------------------- Raster  */

.raster { display: grid; gap: clamp(14px, 2vw, 22px); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* Leistungskarte */
.leistung {
  display: flex; flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.leistung img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.leistung > div { display: flex; flex-direction: column; gap: 8px; padding: 22px; flex: 1; }
.leistung p { color: var(--ink-70); font-size: var(--fs-klein); }
.leistung .weiter { margin-top: auto; padding-top: 14px; align-self: flex-start; }
a.leistung:hover { border-color: var(--gold); transform: translateY(-3px); }

/* Einfache Textkarte ohne Bild */
.karte {
  padding: clamp(22px, 3vw, 30px);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.karte h3 { margin-bottom: 8px; }
.karte p { color: var(--ink-70); font-size: var(--fs-klein); }
.block--warm .karte { background: var(--weiss); }
.block--dunkel .karte { background: var(--slate); border-color: var(--linie-dunkel); }
.block--dunkel .karte p { color: rgba(255,255,255,.74); }

/* Nummerierte Schritte – nur dort verwendet, wo es wirklich eine Reihenfolge gibt */
.schritte { display: grid; gap: 2px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.schritte li { display: grid; gap: 12px; padding: clamp(22px, 3vw, 32px); background: var(--weiss); }
.schritte .nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-tief);
  font-size: var(--fs-klein); font-weight: 700;
}
.schritte h3 { font-size: 1.18rem; }
.schritte p { color: var(--ink-70); font-size: var(--fs-klein); }
.schritte .dauer { color: var(--gold-tief); font-size: var(--fs-mini); font-weight: 700; }
@media (min-width: 760px) {
  .schritte li { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; column-gap: clamp(20px, 3vw, 40px); }
  .schritte li > .nr { grid-row: span 2; }
  .schritte .dauer { grid-column: 2; }
}

/* Leistungsdetail mit Liste */
.detail { display: grid; gap: clamp(20px, 3vw, 40px); padding-block: clamp(30px, 4vw, 48px); border-top: 1px solid var(--linie); }
.detail:first-of-type { border-top: 0; padding-top: 0; }
.detail img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.detail h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.detail > div > p { margin-top: 12px; color: var(--ink-70); }
.detail ul { display: grid; gap: 9px; margin-top: 20px; font-size: var(--fs-klein); }
.detail ul li { display: flex; gap: 10px; align-items: baseline; }
.detail ul li::before { content: "✓"; color: var(--gold); font-weight: 700; flex: 0 0 auto; }
.detail .hinweis { margin-top: 18px; padding-left: 14px; border-left: 3px solid var(--linie); color: var(--ink-70); font-size: var(--fs-mini); }
@media (min-width: 860px) {
  .detail { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .detail:nth-of-type(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .detail:nth-of-type(even) > figure { order: 2; }
}

/* Orte */
.orte { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.orte a { display: flex; align-items: baseline; gap: 14px; padding: 18px clamp(18px, 2.5vw, 26px); background: var(--weiss); transition: background .18s; }
.orte a:hover { background: var(--kalk); }
.orte .plz { color: var(--gold-tief); font-size: var(--fs-mini); font-weight: 700; min-width: 46px; }
.orte b { font-size: 1.02rem; }
.orte span { margin-left: auto; color: var(--ink-70); font-size: var(--fs-mini); text-align: right; }
@media (min-width: 720px) { .orte { grid-template-columns: 1fr 1fr; } }

/* Fragen / Aufklappen */
.fragen { display: grid; gap: 1px; background: var(--linie); border-block: 1px solid var(--linie); }
.fragen details { background: var(--weiss); }
.fragen summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px clamp(16px, 2.4vw, 26px);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; color: var(--gold-tief); font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.fragen details[open] summary::after { content: "–"; }
.fragen details[open] summary { color: var(--gold-tief); }
.fragen p { padding: 0 clamp(16px, 2.4vw, 26px) 22px; color: var(--ink-70); font-size: var(--fs-klein); max-width: 72ch; }

/* Referenzen */
.referenz { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.referenz img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.referenz > div { display: grid; gap: 8px; padding: 22px; }
.referenz .meta { color: var(--gold-tief); font-size: var(--fs-mini); font-weight: 700; }
.referenz p { color: var(--ink-70); font-size: var(--fs-klein); }

.leerstand { display: grid; gap: clamp(22px, 3vw, 40px); align-items: center; }
.leerstand img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.leerstand h2 { margin-bottom: 14px; }
.leerstand p { color: var(--ink-70); }
.leerstand .knopfreihe { margin-top: 24px; }
@media (min-width: 860px) { .leerstand { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }

/* Zahlen-/Faktenband */
.fakten { display: grid; gap: 1px; background: var(--linie); border-block: 1px solid var(--linie); }
.fakten > div { display: grid; gap: 4px; padding: 22px clamp(18px, 2.4vw, 26px); background: var(--weiss); }
.fakten b { font-size: 1.05rem; }
.fakten span { color: var(--ink-70); font-size: var(--fs-klein); }
@media (min-width: 720px) { .fakten { grid-template-columns: repeat(3, 1fr); } }

/* Abschluss-Aufruf */
.aufruf { background: var(--ink); color: var(--weiss); }
.aufruf > div { display: grid; gap: 26px; padding-block: clamp(48px, 6vw, 84px); align-items: center; }
.aufruf p { color: rgba(255,255,255,.75); max-width: 52ch; margin-top: 14px; }
@media (min-width: 880px) {
  .aufruf > div { grid-template-columns: minmax(0, 1.3fr) auto; column-gap: 48px; }
}

/* --------------------------------------------------------------- Formular */

.anfrage { display: grid; gap: clamp(30px, 4vw, 60px); }
@media (min-width: 940px) { .anfrage { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: start; } }

.anfrage-info h2 { margin-bottom: 16px; }
.anfrage-info > p { color: var(--ink-70); }
.anfrage-info ol { display: grid; gap: 18px; margin-top: 30px; padding: 0; list-style: none; counter-reset: s; }
.anfrage-info li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; counter-increment: s; }
.anfrage-info li::before {
  content: counter(s);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--gold); border-radius: 50%;
  color: var(--gold-tief); font-size: var(--fs-mini); font-weight: 700;
}
.anfrage-info li b { display: block; }
.anfrage-info li small { color: var(--ink-70); font-size: var(--fs-mini); }
.direktkontakt { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--linie); display: grid; gap: 10px; }
.direktkontakt a { font-weight: 700; }
.direktkontakt span { color: var(--ink-70); font-size: var(--fs-mini); }

form.anfrage-form {
  padding: clamp(22px, 3vw, 38px);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.feldraster { display: grid; gap: 18px; }
@media (min-width: 620px) { .feldraster { grid-template-columns: 1fr 1fr; } .feld--breit { grid-column: 1 / -1; } }

.feld { display: grid; gap: 7px; }
.feld > span { font-size: var(--fs-klein); font-weight: 600; }
.feld em { color: var(--ink-70); font-style: normal; font-weight: 400; }
.feld input, .feld select, .feld textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--kalk);
  transition: border-color .18s, background .18s;
}
.feld textarea { resize: vertical; min-height: 130px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { background: var(--weiss); border-color: var(--gold); }
.feld input:user-invalid, .feld textarea:user-invalid { border-color: #a8321f; }
.feld .tipp { color: var(--ink-70); font-size: var(--fs-mini); font-weight: 400; line-height: 1.5; }

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

.zustimmung { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; font-size: var(--fs-klein); }
.zustimmung input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--gold); }
.zustimmung a { text-decoration: underline; }
form.anfrage-form .knopf { width: 100%; margin-top: 24px; }
.form-notiz { margin-top: 14px; color: var(--ink-70); font-size: var(--fs-mini); }

/* -------------------------------- Projekt-Check / Kunden-Vorab-Aufmaß */
.anfragewahl{padding-block:clamp(48px,7vw,92px)}.anfragewahl-kopf{margin-bottom:clamp(28px,4vw,48px)}.anfragewahl-kopf h1{font-size:clamp(2.15rem,1.5rem + 2.5vw,3.7rem);max-width:18ch}.anfragewahl-kopf>p:last-child{margin-top:18px;color:var(--ink-70)}
.anfragewahl-raster{display:grid;gap:18px}.anfrageweg{display:flex;flex-direction:column;min-width:0;padding:clamp(24px,3vw,38px);border:1px solid var(--linie);background:var(--weiss);box-shadow:var(--schatten-s)}.anfrageweg-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.anfrageweg-kopf span{display:grid;width:36px;height:36px;place-items:center;border:1px solid var(--gold);border-radius:50%;color:var(--gold-tief);font-size:var(--fs-mini);font-weight:700}.anfrageweg-kopf p{color:var(--ink-70);font-size:var(--fs-klein);font-weight:600}.anfrageweg h2{font-size:clamp(1.55rem,1.3rem + .8vw,2rem)}.anfrageweg>p{min-height:3.3em;margin-top:12px;color:var(--ink-70);font-size:var(--fs-klein)}.anfrageweg ul{display:grid;gap:9px;margin:24px 0}.anfrageweg li{position:relative;padding-left:21px;font-size:var(--fs-klein)}.anfrageweg li:before{position:absolute;left:0;content:"✓";color:var(--gold-tief);font-weight:700}.anfrageweg-passend{display:grid;gap:3px;margin:auto 0 24px;padding-top:18px;border-top:1px solid var(--linie)}.anfrageweg-passend b{font-size:var(--fs-klein)}.anfrageweg-passend span{color:var(--ink-70);font-size:var(--fs-mini)}.anfrageweg .knopf{width:100%}.anfragewahl-fuss{display:grid;gap:4px;margin-top:20px;padding:18px 20px;border-left:3px solid var(--gold);background:var(--kalk-warm);font-size:var(--fs-klein)}.anfragewahl-fuss span{color:var(--ink-70)}
@media(min-width:820px){.anfragewahl-raster{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}}
.check-einstieg{padding-block:clamp(40px,6vw,72px);background:var(--ink);color:var(--weiss)}
.check-einstieg h1{max-width:15ch;font-size:clamp(2.2rem,1.55rem + 2.6vw,3.7rem)}
.check-einstieg .mass>p:last-child{max-width:65ch;margin-top:18px;color:rgba(255,255,255,.74)}
.check-einstieg-fakten{display:grid;gap:1px;margin-top:34px;background:var(--linie-dunkel)}
.check-einstieg-fakten li{display:grid;gap:3px;padding:16px 18px;background:#211f19}
.check-einstieg-fakten b{color:var(--gold-hell);font-size:var(--fs-klein)}
.check-einstieg-fakten span{color:rgba(255,255,255,.68);font-size:var(--fs-mini)}
@media(min-width:760px){.check-einstieg-fakten{grid-template-columns:repeat(3,1fr)}}
.check-arbeitsbereich{padding-block:clamp(34px,6vw,76px)}
.projektcheck-raster{display:grid;gap:24px;align-items:start}
@media(min-width:1000px){.projektcheck-raster{grid-template-columns:minmax(0,1fr) 300px}.check-seitenleiste{position:sticky;top:92px}}
.projektcheck-form{min-width:0;padding:clamp(20px,3vw,38px);border:1px solid var(--linie);background:var(--weiss);box-shadow:var(--schatten-s)}
.check-fortschritt{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--linie)}
.check-fortschritt-kopf{display:flex;justify-content:space-between;gap:16px;margin-bottom:10px;font-size:var(--fs-klein)}
.check-fortschritt-kopf span{color:var(--ink-70)}.check-progressbar{height:5px;background:var(--kalk-warm)}.check-progressbar i{display:block;height:100%;width:20%;background:var(--gold);transition:width .2s}
.check-fortschritt ol{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:13px}.check-fortschritt li{display:flex;align-items:center;gap:6px;color:#827d72;font-size:.72rem}.check-fortschritt li span{display:grid;width:22px;height:22px;place-items:center;border:1px solid var(--linie);border-radius:50%;font-weight:700}.check-fortschritt li.aktiv,.check-fortschritt li.erledigt{color:var(--ink)}.check-fortschritt li.aktiv span{border-color:var(--gold);background:var(--gold)}.check-fortschritt li.erledigt span{border-color:var(--ink);background:var(--ink);color:#fff}.check-fortschritt li b{font-weight:600}
@media(max-width:650px){.check-fortschritt li b{display:none}}
.check-schritt{min-width:0;margin:0;padding:0;border:0}.check-schritt legend{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:8px;font-size:clamp(1.35rem,1.1rem + .7vw,1.75rem);font-weight:700}.check-schritt legend span{color:var(--gold);font-size:.85rem}.check-hinweis{margin-bottom:26px;color:var(--ink-70);font-size:var(--fs-klein)}
.feldgruppe{margin-top:30px}.feldgruppe>h2{margin-bottom:14px;font-size:1rem}.auswahlraster{display:grid;gap:10px}.auswahlkarte{position:relative;display:flex;gap:11px;padding:13px;border:1px solid var(--linie);background:var(--kalk);cursor:pointer}.auswahlkarte:has(input:checked){border-color:var(--gold);background:#fbf4e4}.auswahlkarte input{width:19px;height:19px;flex:0 0 auto;accent-color:var(--gold)}.auswahlkarte b,.auswahlkarte small{display:block}.auswahlkarte b{font-size:.86rem}.auswahlkarte small{margin-top:2px;color:var(--ink-70);font-size:.73rem;line-height:1.4}@media(min-width:650px){.auswahlraster{grid-template-columns:1fr 1fr}}
.check-fehler{margin-bottom:20px;padding:13px 15px;border-left:3px solid #a8321f;background:#fbeeeb;color:#8d2818;font-size:var(--fs-klein);font-weight:600}
.aufmass-hinweis,.unterlagen-info{display:grid;gap:5px;margin:20px 0;padding:16px 18px;border-left:3px solid var(--gold);background:#faf4e7;font-size:var(--fs-klein)}.aufmass-hinweis span,.unterlagen-info p{color:var(--ink-70)}
.raumliste{display:grid;gap:16px}.raum-vorab-karte{padding:clamp(16px,2.5vw,24px);border:1px solid var(--linie);background:var(--kalk)}.raum-vorab-karte>header{display:flex;justify-content:space-between;gap:18px;margin-bottom:20px;padding-bottom:13px;border-bottom:1px solid var(--linie)}.raum-vorab-karte>header span{color:var(--gold-tief);font-size:var(--fs-mini);font-weight:700}.raum-vorab-karte>header h2{margin-top:2px;font-size:1.05rem}.raum-vorab-karte>header button,.check-loeschen{padding:0;border:0;background:none;color:#8d2818;font-size:var(--fs-mini);font-weight:700}.aufmass-eingaben{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}@media(min-width:720px){.aufmass-eingaben{grid-template-columns:repeat(3,minmax(0,1fr))}}
.raum-ergebnis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:16px;background:var(--linie)}.raum-ergebnis div{padding:11px;background:#fff}.raum-ergebnis span,.raum-ergebnis b{display:block}.raum-ergebnis span{color:var(--ink-70);font-size:.68rem}.raum-ergebnis b{margin-top:3px;font-size:.83rem}.raum-ergebnis i{font-style:normal}.raum-warnung{margin-top:12px;color:#8d5b0c;font-size:var(--fs-mini);font-weight:600}.raum-notizen{margin-top:16px}.raum-hinzufuegen{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:17px}.raum-hinzufuegen span{color:var(--ink-70);font-size:var(--fs-mini)}
.check-navigation{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:32px;padding-top:22px;border-top:1px solid var(--linie)}.check-navigation .knopf{min-height:46px}.check-navigation [data-next],.check-navigation [data-submit]{margin-left:auto}
.check-seitenleiste{display:grid;gap:16px}.check-livekarte,.check-sicherheitskarte{padding:22px;border:1px solid var(--linie);background:var(--weiss)}.check-livekarte dl{display:grid;gap:0;margin:0}.check-livekarte dl div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--linie)}.check-livekarte dt{color:var(--ink-70);font-size:var(--fs-klein)}.check-livekarte dd{margin:0;font-weight:700}.check-livekarte>small{display:block;margin-top:15px;color:var(--ink-70);font-size:.7rem;line-height:1.5}.check-sicherheitskarte{background:var(--ink);color:#fff}.check-sicherheitskarte ul{display:grid;gap:8px;margin-top:13px}.check-sicherheitskarte li{position:relative;padding-left:16px;color:rgba(255,255,255,.72);font-size:var(--fs-mini)}.check-sicherheitskarte li:before{position:absolute;left:0;content:"✓";color:var(--gold-hell)}
.check-zusammenfassung{margin:20px 0 28px;border:1px solid var(--linie);background:var(--kalk)}.zusammenfassung-kopf{padding:18px;border-bottom:1px solid var(--linie)}.zusammenfassung-kopf h2{font-size:1.1rem}.zusammenfassung-kopf p{margin-top:4px;color:var(--ink-70);font-size:var(--fs-mini)}.zusammenfassung-fakten{padding:8px 18px}.zusammenfassung-fakten>div,.zusammenfassung-raeume>div{display:grid;gap:4px;padding:9px 0;border-bottom:1px solid var(--linie);font-size:var(--fs-klein)}.zusammenfassung-fakten span,.zusammenfassung-raeume span{color:var(--ink-70);font-size:var(--fs-mini)}.check-zusammenfassung>h3{padding:15px 18px 4px;font-size:.95rem}.zusammenfassung-raeume{padding:0 18px 12px}.zusammenfassung-total{padding:15px 18px;background:var(--ink);color:#fff;font-size:var(--fs-klein);font-weight:700}.kontaktfelder{margin-top:26px}
@media print{.check-einstieg,.check-seitenleiste,.check-navigation{display:none!important}.projektcheck-form{border:0;box-shadow:none}.check-schritt{display:block!important;margin-bottom:24px}}

/* -------------------------------------------------------------- Rechtstext */

.rechtstext { max-width: 74ch; }
.rechtstext h2 { margin-top: 44px; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { margin-top: 26px; font-size: 1.05rem; }
.rechtstext p, .rechtstext ul { margin-top: 12px; color: var(--ink-70); font-size: var(--fs-klein); }
.rechtstext ul { display: grid; gap: 7px; padding-left: 20px; list-style: disc; }
.rechtstext a { text-decoration: underline; }
.rechtstext dl { display: grid; gap: 10px; margin-top: 16px; font-size: var(--fs-klein); }
@media (min-width: 620px) { .rechtstext dl { grid-template-columns: 210px minmax(0, 1fr); column-gap: 24px; } }
.rechtstext dt { font-weight: 600; }
.rechtstext dd { margin: 0; color: var(--ink-70); }

.offen {
  display: inline-block;
  padding: 2px 8px;
  background: #fdf1cf;
  border: 1px dashed var(--gold-tief);
  border-radius: 2px;
  color: var(--gold-tief);
  font-size: var(--fs-mini);
  font-weight: 700;
}
.warnung {
  display: grid; gap: 6px;
  margin-bottom: 30px;
  padding: 18px 20px;
  border-left: 3px solid #a8321f;
  background: #fbeeeb;
  font-size: var(--fs-klein);
}
.warnung b { color: #8d2818; }

/* ------------------------------------------------------------- Bestätigung */

.bestaetigung { display: grid; gap: 18px; justify-items: start; max-width: 54ch; padding-block: clamp(60px, 9vw, 120px); }
.bestaetigung img { width: 54px; }
.bestaetigung p { color: var(--ink-70); }
.bestaetigung .grossezahl { color: var(--gold); font-size: clamp(3.6rem, 12vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; }

/* ---------------------------------------------------------------- Footer */

.fusszeile { background: var(--ink); color: var(--weiss); padding-block: clamp(44px, 6vw, 72px) 0; }
.fuss-raster { display: grid; gap: 34px; }
@media (min-width: 760px) { .fuss-raster { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; } }
.fusszeile .logo b { color: var(--weiss); }
.fusszeile .logo small { color: rgba(255,255,255,.6); }
.fuss-raster > div > p { margin-top: 16px; color: rgba(255,255,255,.66); font-size: var(--fs-klein); max-width: 34ch; }
.fusszeile h2 { margin-bottom: 14px; font-size: var(--fs-klein); font-weight: 700; color: var(--gold-hell); letter-spacing: 0; }
.fusszeile nav { display: grid; gap: 9px; }
.fusszeile nav a, .fuss-kontakt a { color: rgba(255,255,255,.8); font-size: var(--fs-klein); }
.fusszeile nav a:hover, .fuss-kontakt a:hover { color: var(--weiss); }
.fuss-kontakt { display: grid; gap: 9px; font-size: var(--fs-klein); color: rgba(255,255,255,.8); }
.fuss-unten {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
  margin-top: clamp(34px, 5vw, 54px);
  padding-block: 22px;
  border-top: 1px solid var(--linie-dunkel);
  color: rgba(255,255,255,.6);
  font-size: var(--fs-mini);
}
.fuss-unten nav { display: flex; gap: 20px; margin-left: auto; }
.fuss-unten nav a { font-size: var(--fs-mini); }

/* Aktionsleiste am unteren Rand (nur mobil) */
.aktionsleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--linie);
  border-top: 1px solid var(--linie);
}
.aktionsleiste a {
  display: flex; align-items: center; justify-content: center;
  min-height: 54px;
  background: var(--weiss);
  font-size: var(--fs-klein); font-weight: 700;
}
.aktionsleiste a.haupt { background: var(--gold); color: #17140c; }
@media (min-width: 900px) { .aktionsleiste { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 56px; } }

/* -------------------------------------------------------------- Drucken */

@media print {
  .kopfzeile, .schublade, .schublade-hg, .aktionsleiste, .aufruf, .startphase { display: none !important; }
  body { background: #fff; color: #000; }
  .kopfbild::after { display: none; }
  .kopfbild > img { display: none; }
  .kopfbild { color: #000; background: #fff; }
}