/* =========================================================
   Lau & Partner — Demo (Wachstumsanker Haus-Stil)
   Display: Playfair Display (aufrecht) · Body: Inter
   CI: #ca1d1e (AA-sicher) · #e81c1d (nur Display/Deko)
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Farben
     Rot ist Signalfarbe, keine Flaechenfarbe: es traegt den Haupt-CTA und sonst
     fast nichts. Betonung in Ueberschriften laeuft ueber Playfair Italic. */
  --rot: #ca1d1e;           /* AA-sicher — CTA, Text, Linien */
  --rot-hell: #e81c1d;      /* nur große Display-Typo / Deko */
  --rot-dark: #a81718;      /* Hover */
  --anthrazit: #212121;
  --dunkel: #221d1a;        /* dunkle Sektion, einmal auf der Seite */

  /* Drei Grundtoene im festen Wechsel, wie bei den Seiten, die ruhig wirken:
     Sand traegt die Seite, Weiss ist das Wechselband dazwischen, sand-tief
     bleibt dem einen warmen CTA-Block vorbehalten. Sand gegen sand-tief allein
     liegt zu dicht beieinander: die Baender lesen dann nicht mehr und die
     ganze Seite wirkt beige verhangen. */
  /* Regel fuer die ganze Seite: Sand und Weiss wechseln sich Sektion fuer
     Sektion ab. Sand-tief und Dunkel sind Akzente, stehen nie zweimal
     hintereinander und tragen immer eine Haarlinie oben und unten, damit sie
     auch neben Sand als eigener Block lesen. */
  --sand: #faf8f5;
  --sand-tief: #f3eee7;
  --karte: #ffffff;
  --creme: #f3eee7;         /* Altlast-Alias auf sand-tief */
  --weiss: #ffffff;         /* nur noch Text auf Dunkel */

  --text: #241e1b;
  --text-mid: #544d44;      /* haelt 7:1 auf Sand UND auf sand-tief */
  --line: #e6dfd6;
  --line-dark: rgba(255, 255, 255, .16);

  /* Typo */
  --f-display: 'Playfair Display', Georgia, serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid Type */
  --t-h1: clamp(2.75rem, 1.6rem + 5.6vw, 6.5rem);
  --t-h2: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
  --t-h3: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  /* Der Vorspann steht deutlich unter der Ueberschrift, nicht knapp darunter:
     20px neben einer 48px-Zeile streiten um Aufmerksamkeit und machen die Seite
     unruhig. 18px halten den Abstand, den ruhige Seiten haben. */
  --t-lead: clamp(1rem, .95rem + .28vw, 1.125rem);
  --t-body: 1.0625rem;
  --t-sm: .9375rem;
  --t-xs: .8125rem;

  /* Rhythmus */
  --nav-h: 5rem;            /* fixe Leiste: der Hero muss den Platz freihalten */
  --sec-y: clamp(4.75rem, 3rem + 6vw, 8.5rem);
  --wrap: 78rem;
  --pad: clamp(1.25rem, .6rem + 3vw, 2.5rem);
  --r: 4px;

  /* z-index-Skala (semantisch) */
  --z-base: 0;
  --z-media: 1;
  --z-scrim: 2;
  --z-content: 3;
  --z-nav: 100;
  --z-menu: 110;
  --z-skip: 200;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

a { color: inherit; }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: var(--z-skip);
  background: var(--rot);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: var(--r);
  text-decoration: none;
  font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- Typo-Bausteine ---------- */
/* Rot sitzt auf der Ordnungsebene, nicht in der Aussage: das Eyebrow ist der
   feste rote Taktgeber vor jeder Sektion. Es haelt 5,3:1 auf Sand und 4,9:1
   auf sand-tief, also AA auch in dieser kleinen Groesse. */
.eyebrow {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rot);
  margin-bottom: 1rem;
}
/* Auf Dunkel traegt das CI-Rot nicht mehr. Ein aufgehellter Ton aus derselben
   Familie haelt den Zusammenhang und kommt auf 6,3:1. */
.eyebrow--light { color: #e8a79c; }

.h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  font-optical-sizing: auto;
  text-wrap: balance;
}
/* Das Schlagwort in der Ueberschrift ist rot und kursiv. Es ist der Anker,
   an dem man beim Scrollen haengen bleibt, und traegt in jeder Sektion die
   eine Aussage, auf die es ankommt. */
.h2 em {
  font-style: normal;
  font-weight: 600;
  color: var(--rot);
}
.h2--light { color: var(--weiss); }
.h2--light em { color: var(--rot-hell); }

.lead {
  font-size: var(--t-lead);
  color: var(--text-mid);
  max-width: 52ch;
  margin-top: 1.25rem;
  text-wrap: pretty;
}

.sec-head { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

/* Sektionskopf: Eyebrow, Ueberschrift, Lead, alle buendig an derselben Kante.
   Vorher stand das Eyebrow in einer eigenen schmalen Spalte links und die
   Ueberschrift begann erst bei einem Drittel der Breite. Das las sich wie ein
   Magazin-Layout, liess aber links eine leere Spalte stehen und nahm jeder
   Sektion die gemeinsame Kante. Die .sec-head__meta- und .sec-head__body-
   Wrapper bleiben im Markup, sind aber nur noch Bloecke. */
.sec-head--split { display: block; }
.sec-head__meta { display: block; }
.sec-head__body { min-width: 0; }
.h2 { max-width: 24ch; }
.h2--breit { max-width: none; }
.sec-head .lead,
.sec-head--split .lead { max-width: 56ch; }


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8125rem 1.5rem;
  border-radius: var(--r);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}
.btn--lg { padding: 1rem 1.875rem; font-size: 1rem; }
.btn--sm { padding: .625rem 1.125rem; font-size: var(--t-xs); }
.btn--block { display: flex; width: 100%; }

.btn--primary {
  background: var(--rot);
  color: #fff;
  border-color: var(--rot);
}
.btn--primary:hover { background: var(--rot-dark); border-color: var(--rot-dark); }
.btn--primary:active { transform: translateY(1px); }

.btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .08);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

/* =========================================================
   NAV
   ========================================================= */
/* Heller Grund von Anfang an: der Hero ist jetzt hell, eine transparente Leiste
   mit weisser Schrift waere darauf nicht lesbar. is-stuck setzt nur noch die
   Trennlinie und den Schatten, nicht mehr die Farben. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  background: var(--sand); /* deckend, kein backdrop-filter: das ruckelt mit Lenis */
  transition: border-color .3s ease, box-shadow .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -20px rgba(0, 0, 0, .5);
}

.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  /* min-height statt gerechneter Polsterung: die Leiste ist damit immer genau
     so hoch wie --nav-h, egal welche Logofassung gerade geladen ist. Alle
     Hero-Abstaende und Sticky-Positionen haengen an diesem Token. */
  min-height: var(--nav-h);
  padding: .5rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Das Original-Logo des Kunden, nicht nachgebaut. Die Hoehe steht fest, die
   Breite folgt. aspect-ratio ist pro Fassung gesetzt, damit der Browser den
   Platz schon vor dem Laden kennt und die Leiste nicht springt. Die Werte sind
   die Seitenverhaeltnisse der beiden Dateien, siehe bau-logo.py. */
.logo { display: flex; align-items: center; text-decoration: none; }
.logo picture { display: block; }
.logo__bild {
  display: block;
  height: 2.5rem;
  width: auto;
  aspect-ratio: 3.985;   /* Fassung ohne Slogan, siehe bau-logo.py */
}
/* Derselbe Umschaltpunkt wie im <source> der Kopfzeile. Ab hier laedt die volle
   Fassung: sie ist hoeher proportioniert, bekommt also mehr Hoehe und das
   andere Verhaeltnis, damit der Browser den Platz vor dem Laden kennt. */
@media (min-width: 48rem) {
  .logo__bild { height: 3.5rem; aspect-ratio: 2.479; }
}

.nav__links { display: none; align-items: center; gap: 2rem; }
.nav__links a {
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--text-mid);
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--text); }

/* CTA in der Nav behält immer Rot/Weiß */
.nav__actions .btn--primary,
.nav.is-stuck .nav__actions .btn--primary { color: #fff; }

/* Kontakt-Icons (Telefon / E-Mail) */
.nav__actions { display: flex; align-items: center; gap: .625rem; }
.nav__ico {
  display: flex; align-items: center; justify-content: center;
  width: 2.375rem; height: 2.375rem;
  border-radius: 50%;
  color: var(--anthrazit);
  border: 1px solid rgba(33, 33, 33, .2);
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.nav__ico svg { width: 1.0625rem; height: 1.0625rem; }
.nav__ico:hover { color: var(--text); border-color: var(--text); background: transparent; }

/* CTA-Button erst ab Desktop — mobil liegt er im Menü */
.nav__cta { display: none; }

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0 8px;
  margin-right: -8px;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--anthrazit);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--sand-tief);
  padding: 6rem var(--pad) 2rem;
  overflow-y: auto;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: .25rem; }
.mobile-menu a {
  font-family: var(--f-display);
  font-size: 1.75rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--anthrazit);
  padding: .625rem 0;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-child {
  font-family: var(--f-body);
  font-size: 1rem;
  border: 0;
  margin-top: 1.5rem;
  color: #fff;
}

/* =========================================================
   HERO — Vollbild-Foto, weiße Schrift, dunkler Verlauf
   ========================================================= */
/* Split-Hero: Foto links randlos, Text rechts auf hellem Grund.
   Kein Scrim und kein Text auf dem Bild, deshalb muss das Foto nur die halbe
   Breite tragen. Mobil gestapelt: Bild zuerst, darunter der Text. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--sand);
}

.hero__media {
  position: relative;
  z-index: var(--z-media);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-top: var(--nav-h); /* mobil sitzt das Bild direkt unter der Leiste */
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Das Motiv ist bereits auf 4:5 vorgeschnitten, cover korrigiert nur noch
     die Abweichung zur tatsaechlichen Spaltenhoehe. */
  object-position: center 45%;
}

.hero__inner {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4rem) var(--pad) clamp(3rem, 2rem + 3vw, 4.5rem);
}

.hero__title {
  font-family: var(--f-display);
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -.015em;
  color: var(--text);
  font-optical-sizing: auto;
  margin-bottom: 1.75rem;
}
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .06em; /* Unterlängen der Kursiven nicht abschneiden */
}
.hero__title .line > span { display: block; }
/* Im Hero traegt die H1 das Rot. Die Zeile darueber ist Ortsangabe, kein
   Sektionslabel: rot wuerde sie mit der Ueberschrift um Aufmerksamkeit
   streiten. Einzige Ausnahme von der roten Eyebrow-Regel. */
.hero .eyebrow { color: var(--text-mid); }

/* Rot, aber aufrecht: die Betonung traegt die Farbe. Kursive Display-Typo
   wirkt schnell dekorativ, und die Seite kommt ohne sie ruhiger daher. */
.hero__title .accent {
  font-style: normal;
  font-weight: 500;
  color: var(--rot);
}

.hero__text {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--text-mid);
  max-width: 44ch;
  margin-bottom: 2.25rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-bottom: 2rem;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  font-size: var(--t-sm);
  color: var(--text-mid);
}
.hero__trust strong { color: var(--text); font-weight: 600; }
.stars {
  color: #f5b301;
  letter-spacing: .1em;
  font-size: 1rem;
}

/* =========================================================
   ZAHLENBAND: eigener Streifen zwischen Hero und Statement
   ========================================================= */
/* Im Hero waren die Zahlen der vierte Block unter der Ueberschrift und haben
   ihn zugestellt. Als schmaler weisser Streifen mit Haarlinien tragen sie sich
   selbst und trennen den Hero zugleich von der Sektion danach. */
.band-sec {
  background: var(--karte);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem) 0;
}
.band__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1.5rem;
  padding-inline: 0;
}
.stat__num {
  font-family: var(--f-display);
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: .4375rem;
}
.stat__unit { font-size: .55em; color: var(--rot); }
.stat__label {
  font-size: var(--t-xs);
  color: var(--text-mid);
  line-height: 1.45;
}

/* =========================================================
   STATEMENT / FORMEL
   ========================================================= */
/* Die Formel traegt allein, ohne Bild daneben. Ein zweites Teamfoto direkt
   unter dem Hero-Teamfoto schlaegt sich mit dem ersten. */
.warum { padding: var(--sec-y) 0; }
/* Linksbuendig am selben Raster wie alle anderen Sektionen. Breiter als vorher:
   aufrecht statt kursiv braucht die Zeile mehr Platz, sonst faellt der Satz auf
   vier Zeilen auseinander. */
.statement { max-width: 54rem; text-align: left; }
.statement__satz {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--text);
  margin: .5rem 0 2rem;
  text-wrap: pretty;
}
/* Nur Farbe, keine Kursive: die Zeile bleibt ruhig, die Betonung traegt allein
   das Rot. Kursiv bleibt der Hero-Headline vorbehalten. */
.statement__satz em { font-style: normal; color: var(--rot); }
.statement__satz:last-child { margin-bottom: 0; }
/* Die Pointe steht in eigener Zeile, auf jeder Breite: sonst laeuft sie in die
   rote Betonung hinein und die Zuspitzung geht unter. Kostet keine Zeile, weil
   der Satz an derselben Stelle ohnehin umbricht. */
.statement__pointe { display: block; }


/* ---------- Die vier Punkte: Bildfelder, die aufziehen ----------
   Vier Streifen nebeneinander, das aktive zieht auf 5fr auf. Gesteuert ueber
   flex-grow statt grid-template-columns: das laeuft ohne Inline-Styles und
   kippt am Breakpoint von Spalten auf Zeilen, ohne dass JS mitrechnen muss. */
.expand {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: clamp(2.75rem, 2rem + 2.5vw, 4.5rem);
  height: clamp(34rem, 26rem + 24vw, 40rem);
  list-style: none;
  padding: 0;
}
.expand__item {
  position: relative;
  flex: 1 1 0;
  min-height: 4rem;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r);
  cursor: pointer;
  transition: flex-grow .7s cubic-bezier(.22, 1, .36, 1);
}
/* 6 statt 4,5: das offene Feld soll die Reihe klar dominieren, die geschlossenen
   werden zu schmalen Streifen und treten zurueck. */
.expand__item.is-aktiv { flex-grow: 6; }
.expand__item:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }

.expand__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.62);
  transform: scale(1.1);
  transition: filter .7s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
.expand__item.is-aktiv .expand__img { filter: none; transform: none; }

.expand__scrim {
  position: absolute;
  inset: 0;
  /* Gleichmaessiger als vorher: der Text sitzt jetzt in der Mitte der Kachel,
     nicht mehr unten, also muss auch die Mitte tragen. */
  background: linear-gradient(to top,
    rgba(24, 19, 16, .86) 0%,
    rgba(24, 19, 16, .7) 45%,
    rgba(24, 19, 16, .58) 75%,
    rgba(24, 19, 16, .48) 100%);
}

/* Der Begriff quer im geschlossenen Streifen, damit auch zu lesbar ist,
   worum es geht. Erst ab Tablet, davor stehen die Streifen untereinander. */
.expand__label {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  writing-mode: vertical-rl;
  transform: translate(-50%, -50%) rotate(180deg);
  font-family: var(--f-display);
  font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  color: rgba(255, 255, 255, .92);
  transition: opacity .3s ease;
}

.expand__body {
  /* Mittig auf beiden Achsen: der Inhalt waechst beim Oeffnen um die Mitte der
     Kachel, statt am unteren Rand zu kleben. */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: .625rem;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem);
  color: var(--weiss);
}
.expand__no {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
  color: #ff8d8e;
  transition: opacity .3s ease;
}
/* Geschlossen bleibt nur der Begriff stehen: die Ziffer verschwindet, sonst
   passt im schmalen Streifen nichts mehr uebereinander. */
.expand__item:not(.is-aktiv) .expand__no { opacity: 0; }
.expand__item:not(.is-aktiv) .expand__body { padding-block: .95rem; }
.expand__titel {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 3rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-wrap: balance;
  transition: opacity .3s ease;
}
/* Kurze rote Linie zwischen Titel und Satz: bindet die Kachel an die CI und
   trennt den Auftritt vom Fliesstext, ohne eine weitere Farbe einzufuehren. */
.expand__titel::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin: .875rem auto .25rem;
  background: var(--rot-hell);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1) .1s;
}
/* Mobil stehen die geschlossenen Felder als schmale Zeilen untereinander. Dort
   muss der Titel kleiner sein als im offenen Feld, sonst sprengt er den
   Streifen. Auf Desktop ist er in diesem Zustand ohnehin ausgeblendet. */
.expand__item.is-aktiv .expand__titel::after { transform: scaleX(1); }
.expand__item:not(.is-aktiv) .expand__titel { font-size: 1.25rem; }
.expand__item:not(.is-aktiv) .expand__titel::after { display: none; }
/* Der Satz faehrt in der Hoehe auf statt nur einzublenden, damit er im
   geschlossenen Streifen keinen Platz beansprucht und den Begriff wegdrueckt. */
.expand__mehr {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.22, 1, .36, 1);
}
.expand__item.is-aktiv .expand__mehr { grid-template-rows: 1fr; }
.expand__text {
  overflow: hidden;
  min-height: 0;
  max-width: 38ch;
  margin-inline: auto;
  font-size: var(--t-body);
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .35s ease .1s, transform .45s cubic-bezier(.22, 1, .36, 1) .1s;
}
.expand__item.is-aktiv .expand__text { opacity: 1; transform: none; }

/* Ohne JS liegt kein Streifen zu: alle vier gleich hoch, Text sichtbar. */
.expand:not([data-js]) { height: auto; }
.expand:not([data-js]) .expand__item { min-height: 15rem; }
.expand:not([data-js]) .expand__mehr { grid-template-rows: 1fr; }
.expand:not([data-js]) .expand__text { opacity: 1; transform: none; }
.expand:not([data-js]) .expand__no { opacity: 1; }
.expand:not([data-js]) .expand__body { padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.expand:not([data-js]) .expand__img { filter: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .expand__item,
  .expand__img,
  .expand__mehr,
  .expand__text { transition: none; }
}
.warum__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  align-items: center;
}
.warum__media {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--creme);
}
.warum__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* =========================================================
   SIGNATURE — 28-Punkte-Marketingplan
   ========================================================= */
/* Drei Zeilen, mehr nicht. Zugeklappt steht je Phase nur, worum es geht und wie
   viele Punkte drinstecken; die Liste kommt erst auf Klick. Die Sektion war
   vorher ein dunkles Band mit Klapp-Kacheln, dann eine offene Liste ueber rund
   1200px. Beides hat sich auf einer sonst leisen Seite vorgedraengt. */

/* Die Klammer unter der Dreier-Formel. Verhandlungsgeschick ist keiner der drei
   Punkte, sondern das, was in allen dreien steckt, deshalb ein durchlaufendes
   Band statt einer vierten Kachel. */
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 1.25rem;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  /* Die einzige dunkle Flaeche der Startseite. Der Marketingplan steht auf
     --karte, also weiss. Ohne dieses Band traegt die ganze Seite nur Sand und
     Weiss und faellt in sich zusammen. */
  background: var(--dunkel);
  color: var(--weiss);
  border-radius: var(--r);
}
.band__label {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  font-weight: 600;
  white-space: nowrap;
}
.band__label em { color: var(--rot-hell); font-style: italic; }
.band__text { color: rgba(255,255,255,.72); line-height: 1.6; max-width: 62ch; }

.plan { padding: var(--sec-y) 0; background: var(--karte); }
.plan__intro { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.plan__phasen { border-top: 1px solid var(--text); }
.pgruppe { border-bottom: 1px solid var(--text); }
.pgruppe__h { font: inherit; margin: 0; }

/* Ziffer | Titel und Satz | Anzahl | Plusminus. Die Anzahl faellt unter 62rem
   weg: sie steht ohnehin am Ende der aufgeklappten Liste. */
.pgruppe__kopf {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0 clamp(.875rem, .5rem + 1.5vw, 1.75rem);
  width: 100%;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0;
  text-align: left;
  transition: color .25s cubic-bezier(.22, 1, .36, 1);
}
.pgruppe__kopf:hover { color: var(--rot); }
.pgruppe__kopf:focus-visible { outline: 2px solid var(--rot); outline-offset: 4px; }

.pgruppe__no {
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--rot);
}
.pgruppe__text { display: block; min-width: 0; }
.pgruppe__titel {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.pgruppe__satz {
  display: block;
  margin-top: .375rem;
  max-width: 58ch;
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-mid);
  text-wrap: pretty;
}
.pgruppe__anzahl {
  display: none;
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mid);
  white-space: nowrap;
}
/* Dasselbe Plusminus wie in der FAQ: zwei Striche, der senkrechte dreht sich
   beim Oeffnen weg. Ein zweites Zeichen fuer dieselbe Geste waere Willkuer. */
.pgruppe__pm { position: relative; width: 1rem; height: 1rem; align-self: center; justify-self: end; }
.pgruppe__pm::before,
.pgruppe__pm::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--rot);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.pgruppe__pm::before { width: 1rem; height: 2px; }
.pgruppe__pm::after { width: 2px; height: 1rem; }
.pgruppe__kopf[aria-expanded="true"] .pgruppe__pm::after { transform: rotate(90deg); opacity: 0; }

/* 0fr auf 1fr statt max-height in Pixeln: die Punkte sind je nach Breite ein-,
   zwei- oder dreispaltig, ihre Hoehe aendert sich beim Drehen des Geraets also
   erheblich. Ein einmal gemessener Pixelwert waere danach falsch. */
.pgruppe__body {
  display: grid;
  grid-template-rows: 1fr;
  /* overflow gehoert hierher, nicht nur ans Kind: die Punkte sind selbst ein
     Grid mit 1fr-Zeilen. Auf Track-Hoehe 0 gestreckt behaelt es die
     Mindesthoehe einer Zeile und schoesse sonst unten heraus. */
  overflow: hidden;
  transition: grid-template-rows .4s cubic-bezier(.22, 1, .36, 1);
}
.plan__phasen[data-js] .pgruppe__body { grid-template-rows: 0fr; }
.plan__phasen[data-js] .pgruppe__body.is-offen { grid-template-rows: 1fr; }
/* Der Zwischen-Wrapper ist noetig, kein Ballast: das direkte Kind eines
   0fr-Tracks darf selbst kein Grid mit fr-Zeilen sein, sonst schlaegt deren
   Mindesthoehe durch und eine Zeile bleibt zugeklappt sichtbar. */
.pgruppe__inner { min-height: 0; overflow: hidden; }

/* Spaltenweise von oben nach unten, wie ein Register. --zeilen steuert, wie
   viele Zeilen eine Spalte bekommt; daraus ergibt sich die Spaltenzahl von
   selbst und keine Spalte bleibt halb leer. */
.ppunkte {
  --zeilen: 12;
  /* Gleich hohe Zeilen braucht es erst, wenn mehrere Spalten nebeneinander
     stehen und ihre Haarlinien fluchten sollen. Einspaltig blaeht 1fr nur
     jede Zeile auf die Hoehe des laengsten Punktes auf. */
  --zeilenhoehe: auto;
  list-style: none;
  margin: 0;
  padding: 0 0 clamp(1.25rem, 1rem + 1vw, 2rem);
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--zeilen), var(--zeilenhoehe));
  column-gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
}
.ppunkte--kurz { --zeilen: 4; }
.ppunkte li {
  counter-increment: list-item;
  display: flex;
  gap: .875rem;
  align-items: baseline;
  padding: .6875rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--text-mid);
}
.ppunkte li::before {
  content: counter(list-item, decimal-leading-zero);
  font-family: var(--f-display);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-mid);
  opacity: .65;
  flex: 0 0 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .pgruppe__body { transition: none; }
}
/* =========================================================
   LEISTUNGEN
   ========================================================= */
.leistungen { padding: var(--sec-y) 0; background: var(--karte); }

/* Sechs gleich grosse Felder in einem geschlossenen Raster: Haarlinien liegen
   aussen am Container und rechts/unten an jeder Zelle, dadurch keine doppelten
   Linien und jede Zelle gleich breit. Padding rundum ist ueberall identisch,
   damit die Hover-Flaeche das komplette Feld deckt. */
.cards {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.card {
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color .3s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover,
  .card:focus-within { background: rgba(202, 29, 30, .06); }
}
.card__title {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: .625rem;
  color: var(--rot);
}
.card__title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s cubic-bezier(.22, 1, .36, 1);
}
.card:hover .card__title a { border-bottom-color: var(--line); }
.card__text {
  font-size: var(--t-sm);
  color: var(--text-mid);
  line-height: 1.6;
}



/* =========================================================
   HOME STAGING — Vorher/Nachher-Vergleich (Drag-Reveal)
   ========================================================= */
.staging { padding: var(--sec-y) 0; background: var(--creme); border-block: 1px solid var(--line); }
.staging__slider { max-width: 30rem; }

.compare {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .875rem;
}
.compare__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--anthrazit);
  cursor: ew-resize;
  touch-action: pan-y;
  contain: layout paint;
  --pos: 50%;
}
.compare__after,
.compare__before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.compare__before-wrap {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.compare__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  transform: translateX(-50%);
  width: 2px;
  background: rgba(255, 255, 255, .85);
  pointer-events: none;
}
.compare__handle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--karte);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.compare__handle svg { width: 1.125rem; height: 1.125rem; }
.compare__label {
  position: absolute;
  top: .875rem;
  z-index: 2;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(36, 30, 27, .55);
  padding: .3rem .625rem;
  border-radius: 999px;
  pointer-events: none;
}
.compare__label--before { left: .875rem; }
.compare__label--after { right: .875rem; }

.compare__range {
  width: 100%;
  accent-color: var(--text-mid);
  cursor: pointer;
}

/* =========================================================
   TEAM
   ========================================================= */
.team { padding: var(--sec-y) 0; }

/* Vier Karten nebeneinander. Das Foto fuellt die Karte, Name und Rolle stehen
   immer unten drauf. Beim Zeigen tritt das Foto zurueck und der Text kommt vor.
   Die Karte hat eine feste Mindesthoehe statt eines Seitenverhaeltnisses: der
   ausgefahrene Text ist laenger als ein 4:5-Bild hoch waere. */
.tausch { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 40rem) { .tausch { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .tausch { grid-template-columns: repeat(4, 1fr); } }
.tausch__karte {
  position: relative;
  min-height: clamp(26rem, 22rem + 8vw, 32rem);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--dunkel);
}
.tausch__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.tausch__bild--leer {
  display: grid;
  place-content: center;
  background: #2b2522;
  color: rgba(255,255,255,.35);
  font-family: var(--f-display);
  font-size: 2rem;
}
.tausch__inhalt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  color: var(--weiss);
  background: linear-gradient(to top, rgba(20,17,15,.88) 0%, rgba(20,17,15,.2) 60%, transparent 100%);
}
.tausch__name {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
}
.tausch__rolle {
  font-size: var(--t-xs);
  color: rgba(255,255,255,.62);
  margin-top: .15rem;
  line-height: 1.45;
}
/* Der Text faehrt aus der Hoehe null heraus, deshalb kleben Name und Rolle
   immer unten und die vier Karten stehen auf einer Linie, egal wie lang der
   Text ist. */
.tausch__mehr {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .45s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.tausch__mehr > * { overflow: hidden; min-height: 0; }
.tausch__zitat {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
}
.tausch__tut { list-style: none; display: grid; gap: .45rem; margin-top: .9rem; padding: 0; }
.tausch__tut li {
  position: relative;
  padding-left: .9rem;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: rgba(255,255,255,.82);
}
.tausch__tut li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .35rem;
  height: 1px;
  background: var(--rot-hell);
}
.tausch__kontakt {
  display: grid;
  gap: .15rem;
  margin-top: .9rem;
  padding-bottom: .9rem;
  font-size: var(--t-xs);
}
.tausch__kontakt a {
  color: rgba(255,255,255,.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.25);
  justify-self: start;
}
.tausch__kontakt a:hover { color: #fff; border-bottom-color: #fff; }
/* Nur wo es eine Maus gibt. Auf Touch waere ein Hover-Zustand eine Falle. */
@media (hover: hover) and (pointer: fine) {
  .tausch__karte:hover .tausch__bild,
  .tausch__karte:focus-within .tausch__bild { opacity: .18; transform: scale(1.04); }
  .tausch__karte:hover .tausch__mehr,
  .tausch__karte:focus-within .tausch__mehr { grid-template-rows: 1fr; opacity: 1; }
}
/* Ohne Hover, also auf Handy und Tablet, gibt es keinen Zustand zum Aufdecken.
   Dort ist es deshalb keine Ueberblend-Karte mehr, sondern eine gewoehnliche:
   Foto oben, darunter Name, Rolle und der ganze Text. Das Foto bleibt voll
   sichtbar, statt als Schatten hinter dem Text zu liegen, und nichts wird
   abgeschnitten, weil die Karte mit ihrem Inhalt waechst. */
@media (hover: none) {
  .tausch__karte { min-height: 0; display: flex; flex-direction: column; }
  .tausch__bild {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 4 / 5;
    opacity: 1;
  }
  .tausch__inhalt {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    background: none;
    padding: 1.1rem 1.1rem 1.25rem;
  }
  /* Im Quelltext steht der Text vor dem Namen, damit er beim Hover von unten
     aufgeht. Ohne Hover liest man von oben, also drehen wir die Reihenfolge. */
  .tausch__name { order: -2; }
  .tausch__rolle { order: -1; }
  .tausch__mehr { order: 0; grid-template-rows: 1fr; opacity: 1; margin-top: .9rem; }
  .tausch__kontakt { padding-bottom: 0; }
}
/* Vier Spalten sind ohne Hover zu schmal: der ganze Text steht ja offen da.
   Auf dem Tablet also zwei, vier erst auf wirklich breiten Touch-Schirmen. */
@media (hover: none) and (min-width: 62rem) { .tausch { grid-template-columns: repeat(2, 1fr); } }
@media (hover: none) and (min-width: 78rem) { .tausch { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .tausch__bild, .tausch__mehr { transition: opacity .2s ease; }
}

/* =========================================================
   LEAD-MAGNET (dunkel)
   ========================================================= */
.magnet {
  background: var(--dunkel);
  padding: var(--sec-y) 0;
}
.magnet__inner { max-width: 44rem; }
.magnet__text {
  font-size: var(--t-lead);
  color: rgba(255, 255, 255, .8);
  margin: 1.5rem 0 2.25rem;
  max-width: 46ch;
}

/* =========================================================
   KONTAKT
   ========================================================= */
.kontakt { padding: var(--sec-y) 0; }
.kontakt__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  align-items: start;
}

.kontakt__data {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.kontakt__data dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: .375rem;
}
.kontakt__data dd {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text-mid);
}
.kontakt__data a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color .2s ease, color .2s ease;
}
.kontakt__data a:hover { border-color: var(--text); }

/* Formular */
.form {
  background: var(--karte);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  margin-bottom: .5rem;
}
.field .opt { color: var(--text-mid); font-weight: 400; }

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: .8125rem 1rem;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: var(--t-body);
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* Eigener Pfeil, damit das Feld dieselbe Hoehe und Kante hat wie die Inputs. */
.field select {
  appearance: none;
  cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23544d44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}
.field select:focus { outline: none; border-color: var(--text-mid); box-shadow: 0 0 0 3px rgba(36, 30, 27, .08); }
.field textarea { resize: vertical; min-height: 7rem; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-mid); opacity: .55; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--text-mid);
  box-shadow: 0 0 0 3px rgba(36, 30, 27, .08);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--rot);
  background: rgba(202, 29, 30, .04);
}

/* Einwilligung: Kaestchen und Text auf einer Grundlinie, Text laeuft nicht
   unter das Kaestchen. Die Trefferflaeche bleibt bei 1.15rem plus Label. */
.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .7rem;
}
.field--check input {
  width: 1.15rem; height: 1.15rem;
  margin-top: .15rem;
  accent-color: var(--rot);
  cursor: pointer;
}
.field--check label {
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--text-mid);
  line-height: 1.55;
  cursor: pointer;
}
.field--check a { color: var(--text); text-decoration-color: rgba(36, 30, 27, .3); text-underline-offset: .2em; }
.field--check a:hover { text-decoration-color: currentColor; }
.field--check input[aria-invalid="true"] { outline: 2px solid var(--rot); outline-offset: 2px; }

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein normales Feld.
   Kein display:none, das ueberspringen viele Bots absichtlich. */
.honigtopf {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form button[disabled] { opacity: .6; cursor: default; }

.form__success {
  margin-top: 1.25rem;
  padding: .875rem 1rem;
  border-left: 2px solid var(--text-mid);
  background: var(--sand-tief);
  font-size: var(--t-sm);
  color: var(--text);
}
/* Versandfehler: gleiche Form wie die Erfolgsmeldung, Kante in Markenrot,
   damit man es nicht fuer eine Bestaetigung haelt. */
.form__fehler,
.funnel__fehler {
  margin-top: 1.25rem;
  padding: .875rem 1rem;
  border-left: 2px solid var(--rot);
  background: var(--sand-tief);
  font-size: var(--t-sm);
  color: var(--text);
  line-height: 1.5;
}
.form__fehler[hidden] { display: none; }
.funnel__fehler { margin: 0 0 1.25rem; }
.form__fehler a,
.funnel__fehler a { color: var(--rot); }
.form__note {
  margin-top: 1rem;
  font-size: var(--t-xs);
  color: var(--text-mid);
  text-align: center;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--dunkel);
  color: rgba(255, 255, 255, .72);
  padding-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  font-size: var(--t-sm);
}
.footer__inner {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
/* Negativfassung, volle Hoehe mit Slogan. Der Slogan ist Teil der Datei,
   deshalb steht darunter keine Claim-Zeile mehr. */
.footer__logo {
  display: block;
  width: auto;
  height: 4.5rem;
  aspect-ratio: 2.479;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.footer__h {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: .875rem;
}
.footer__cols p { margin-bottom: .375rem; line-height: 1.6; }
.footer__cols a {
  text-decoration: none;
  transition: color .2s ease;
}
.footer__cols a:hover { color: #fff; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line-dark);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .55);
}

/* =========================================================
   3 STÄRKEN
   ========================================================= */
/* Nachsatz unter dem Ordner-Zitat: erklaert es, ohne es zu wiederholen. */
.warum__nach {
  font-size: var(--t-body);
  color: var(--text-mid);
  line-height: 1.65;
  max-width: 46ch;
}

.staerken--extra { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }

/* Die vier Punkte sind eine Aufzaehlung, keine Featureliste. Deshalb eine
   nummerierte Strecke mit Haarlinien statt vier Kacheln nebeneinander. */
.staerken {
  display: grid;
  gap: 0;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--line);
}
.staerke {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0 1rem;
  align-items: baseline;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line);
}
.staerke__icon {
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--text-mid);
}
.staerke__icon svg { width: 1.5rem; height: 1.5rem; }
.staerke__icon--num { line-height: 1.2; }

.staerke__title {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: .5rem;
}
.staerke__text {
  grid-column: 2;
  font-size: var(--t-sm);
  color: var(--text-mid);
  line-height: 1.65;
  max-width: 58ch;
}

/* =========================================================
   IMMOBILIEN
   ========================================================= */
/* Objekte bleiben echte Karten, das ist bei einem Listing die richtige Form.
   Neu ist, dass sie sich zum ersten Mal ueberhaupt vom Grund abheben: weisse
   Karte auf Sand statt weisse Karte auf Weiss. */
.objekte { padding: var(--sec-y) 0; background: var(--sand-tief); }
.objekte__grid { display: grid; gap: 1.75rem; }
.objekt {
  display: flex; flex-direction: column;
  background: var(--karte);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1);
}
.objekt:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -32px rgba(36, 30, 27, .45); }
.objekt__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.objekt__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.objekt:hover .objekt__media img { transform: scale(1.03); }
.objekt__badge {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--rot); color: #fff;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
  padding: .4rem .75rem; border-radius: 3px;
}
.objekt__body { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; flex: 1; }
.objekt__title {
  font-family: var(--f-display); font-size: 1.3rem; font-weight: 600;
  line-height: 1.2; letter-spacing: -.01em;
}
.objekt__ort {
  display: flex; align-items: center; gap: .45rem;
  font-size: var(--t-sm); color: var(--text-mid);
}
.objekt__ort svg { width: 1rem; height: 1rem; color: var(--text-mid); flex-shrink: 0; }
.objekt__facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem;
  padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.objekt__facts dt { font-size: var(--t-xs); color: var(--text-mid); margin-bottom: .15rem; }
.objekt__facts dd { font-size: var(--t-sm); font-weight: 600; }
.objekt__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; }
.objekt__price { display: flex; flex-direction: column; }
.objekt__price-label { font-size: var(--t-xs); color: var(--text-mid); }
.objekt__price-val { font-family: var(--f-display); font-size: 1.4rem; font-weight: 700; }

.btn--ghost-dark {
  color: var(--text);
  border-color: rgba(36, 30, 27, .22);
  background: transparent;
}
.btn--ghost-dark:hover { border-color: var(--text); background: rgba(36, 30, 27, .04); }

/* Textlink mit Pfeil: ersetzt gefuellte Buttons ueberall dort, wo der Klick
   nicht der Haupt-CTA der Sektion ist. Nimmt der Seite ein Dutzend rote Flecken. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  padding-bottom: .1875rem;
  border-bottom: 1px solid rgba(36, 30, 27, .25);
  transition: border-color .25s cubic-bezier(.22, 1, .36, 1), gap .25s cubic-bezier(.22, 1, .36, 1);
}
.link-arrow svg { width: .875rem; height: .875rem; flex-shrink: 0; color: var(--rot); }
.link-arrow:hover { border-bottom-color: var(--text); gap: .75rem; }

/* =========================================================
   BEWERTUNG (Wertermittlung)
   ========================================================= */
/* Frueher dunkel. Zwei dunkle Baender auf einer Seite heben sich gegenseitig
   auf, deshalb bleibt nur der Marketingplan dunkel und diese Sektion wird eine
   ruhige Insel auf sand-tief. */
.bewertung {
  background: var(--sand-tief);
  border-block: 1px solid var(--line);
  padding: var(--sec-y) 0;
}
.bewertung__inner { display: grid; gap: 2.5rem; align-items: center; }
.bewertung__lead {
  font-size: var(--t-lead); color: var(--text-mid);
  max-width: 52ch; margin-top: 1.25rem; line-height: 1.65;
  text-wrap: pretty;
}
.bewertung__cta { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

/* Sprengnetter-Siegel: Beleg fuer die Wertermittlung. Steht dort, wo es um den
   Wert geht, nicht im Hero. Das Siegel ist ein fremdes Markenzeichen, deshalb
   unveraendert und ohne Filter. */
.siegel { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.siegel img { width: 4.5rem; height: 4.5rem; flex: none; }
.siegel p { font-size: var(--t-sm); color: var(--text-mid); line-height: 1.5; max-width: 34ch; }
.siegel strong { color: var(--text); font-weight: 600; }
.siegel--gross img { width: 7.5rem; height: 7.5rem; }

/* Startseite: statt eines Buttons steht der Funnel hier schon offen. Die weisse
   Karte hebt ihn vom warmen Grund der Sektion ab und macht klar, dass man
   direkt loslegen kann. Die Frageschritte selbst teilen sich die .funnel__*-
   Stile mit dem Overlay. */
/* Unter 62rem ersetzt ein Knopf den offenen Funnel, siehe Kommentar in
   index.astro. Der Umschalter steht in beiden Richtungen im Breakpoint-Block. */
.funnel-fest { display: none; }
.bewertung__mobil-cta { justify-self: start; }

.funnel-fest {
  background: var(--karte);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  box-shadow: 0 24px 50px -38px rgba(36, 30, 27, .55);
}
/* Im Overlay traegt der Fortschrittsbalken 2rem Abstand, in der Karte reicht
   weniger, sonst steht die erste Frage zu tief. */
.funnel-fest .funnel__progress { margin-bottom: 1.5rem; }
.funnel-fest .funnel__tiles { margin-top: 1.25rem; }
.funnel-fest .funnel__nav { margin-top: 1.5rem; }
.btn--xl { padding: 1.15rem 2.25rem; font-size: 1.0625rem; }
.bewertung__note { font-size: var(--t-sm); color: var(--text-mid); }

/* =========================================================
   RATGEBER: 10 Schritte zum Notar, Kopf klebt, Schritte laufen durch
   ========================================================= */
.ratgeber { padding: var(--sec-y) 0; background: var(--sand); }

/* align-items: start wuerde die linke Spalte auf Inhaltshoehe schrumpfen, dann
   hat position: sticky keinen Weg zum Kleben. */
.notar__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); align-items: stretch; }

/* Der Kopf steht links und bleibt stehen, solange die Schritte laufen. Die
   grosse Ziffer ist das, was sich bewegt: sie ersetzt das Bild, das an dieser
   Stelle auf anderen Seiten stehen wuerde. */
.notar__zaehler {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  font-family: var(--f-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.notar__nr {
  font-size: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem);
  font-weight: 600;
  letter-spacing: -.04em;
  color: var(--rot);
}
.notar__von {
  font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem);
  color: var(--text-mid);
}

.notar__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .25rem;
}
.nstep {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-left: 2px solid var(--line);
  transition: border-color .4s ease-out, opacity .4s ease-out;
}
.nstep__no {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: .375rem;
  transition: color .4s ease-out;
}
.nstep__h {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin-bottom: .375rem;
}
.nstep__text { color: var(--text-mid); font-size: var(--t-sm); line-height: 1.6; max-width: 46ch; }

/* Aufklappbarer Volltext je Schritt. Der Anriss bleibt sichtbar und traegt weiter
   die Uebersicht, der ausfuehrliche Text aus der Broschuere kommt erst auf Klick.
   Geschlossen aendert sich an der Hoehe der Sektion dadurch nichts. */
.nstep__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: color .2s ease;
}
.nstep__q:hover { color: var(--rot); }
.nstep__pm { position: relative; flex-shrink: 0; width: .875rem; height: .875rem; }
.nstep__pm::before, .nstep__pm::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--rot); transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.nstep__pm::before { width: .875rem; height: 2px; }
.nstep__pm::after { width: 2px; height: .875rem; }
.nstep.is-open .nstep__pm::after { transform: rotate(90deg); opacity: 0; }
.nstep__a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.nstep__inner { padding-top: .75rem; }
.nstep__inner p { color: var(--text-mid); font-size: var(--t-sm); line-height: 1.65; max-width: 60ch; }
.nstep__inner p + p { margin-top: .75rem; }

/* Ohne die Scroll-Schaltung (mobil, reduced motion) traegt jeder Schritt die
   rote Kante: ein einzelner hervorgehobener Schritt saehe dort aus wie ein Fehler. */
.nstep { border-left-color: var(--rot); }
.nstep__no { color: var(--rot); }

/* Handy: die zehn Schritte laufen waagrecht als Schnappband, nicht als Liste.
   Untereinander waren das 2,2 Bildschirmhoehen, durch die man nur durchscrollt,
   und die Aussage der Sektion ist ohnehin die Menge und die Reihenfolge, nicht
   der einzelne Satz. Nebenbei bekommt die grosse Ziffer links wieder eine
   Aufgabe: sie zaehlt beim Wischen mit, so wie am Desktop beim Scrollen.
   Ausnahmsweise eine max-width-Abfrage: die Alternative waere, im 62rem-Block
   ein Dutzend Eigenschaften einzeln zurueckzusetzen. */
@media (max-width: 61.999rem) {
  .notar__steps {
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Randlos anlaufen und rechts angeschnitten weiterlaufen, sonst sieht das
       Band nach Ende aus und niemand wischt. */
    margin-inline: calc(var(--pad) * -1);
    padding: 0 var(--pad) .75rem;
    scroll-padding-inline: var(--pad);
  }
  .notar__steps::-webkit-scrollbar { height: 4px; }
  .notar__steps::-webkit-scrollbar-thumb { background: rgba(36, 30, 27, .18); border-radius: 2px; }
  .nstep {
    scroll-snap-align: start;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-left: 2px solid var(--rot);
    border-radius: var(--r);
    background: var(--karte);
  }
  .nstep__text { max-width: none; }
  .nstep.is-open .nstep__a { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .notar__zaehler { margin-bottom: 1.25rem; }
}

/* =========================================================
   REZENSIONEN (Slider)
   ========================================================= */
.reviews { padding: var(--sec-y) 0; }

.slider { max-width: 52rem; margin-inline: auto; }
.slider__viewport { overflow: hidden; }
.slider__track { display: flex; list-style: none; padding: 0; transition: transform .5s cubic-bezier(.4,0,.2,1); }
/* Weisse Karten auf Sand: dieselbe Form wie die Objekt-Kacheln weiter unten,
   damit die Seite eine Kartensprache spricht statt zwei. Radius und Linie
   kommen aus den Tokens, kein Sonderweg fuer diese eine Sektion. */

/* Laufende Rezensionsstrecke.
   Animiert wird ausschliesslich transform, damit die Strecke auf dem Compositor
   laeuft und pro Frame kein Layout anfaellt. Bewusst ohne Verlaufsmaske ueber der
   Bewegung: eine Maske zwingt den ganzen Teilbaum in eine eigene Ebene und ist
   genau die Art Deko, die auf schwachen Geraeten ruckelt. */
.reviews__lauf {
  overflow: hidden;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.reviews__track {
  display: flex;
  width: max-content;
  list-style: none;
  padding: 0;
  animation: reviews-lauf 80s linear infinite;
}
.reviews__lauf:hover .reviews__track,
.reviews__lauf:focus-within .reviews__track,
.reviews__lauf.is-pausiert .reviews__track { animation-play-state: paused; }

.reviews__track .review {
  flex: 0 0 min(30rem, 82vw);
  /* Der Abstand haengt an der Karte, nicht als gap am Track. Mit gap waere die
     Gesamtbreite 2n*Karte + (2n-1)*Abstand, dann laege der Umlauf bei -50 %
     um einen halben Abstand daneben und die Naht waere sichtbar. */
  margin-inline-end: clamp(1rem, .75rem + 1vw, 1.5rem);
}

@keyframes reviews-lauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.reviews__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}
.reviews__pause {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .8rem;
  font-size: var(--t-xs);
  color: var(--text-mid);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color .2s ease, border-color .2s ease;
}
.reviews__pause:hover { color: var(--text); border-color: var(--text-mid); }
.reviews__pause-ico {
  width: .5rem;
  height: .7rem;
  border-inline: .17rem solid currentColor;
}
.reviews__pause[aria-pressed="true"] .reviews__pause-ico {
  width: 0;
  height: 0;
  border: .35rem solid transparent;
  border-inline-start-width: .55rem;
  border-inline-start-color: currentColor;
  border-inline-end-width: 0;
}
.review {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  background: var(--karte);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.review__stars { color: #e0a63c; letter-spacing: 3px; font-size: 1.05rem; }
.review__text {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}
/* Der Name sitzt immer unten, egal wie lang die Bewertung ist. */
.review__author {
  margin-top: auto;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-mid);
}
.slider__controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.75rem; }
.slider__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid rgba(36,30,27,.18); background: var(--karte); color: var(--text);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.slider__arrow:hover { border-color: var(--text); }
.slider__arrow svg { width: 1.25rem; height: 1.25rem; }
.slider__dots { display: flex; gap: .5rem; }
.slider__dot {
  width: .5rem; height: .5rem; border-radius: 50%; padding: 0;
  background: rgba(36,30,27,.2); border: 0; transition: background-color .2s ease, transform .2s ease;
}
.slider__dot[aria-selected="true"] { background: var(--rot); transform: scale(1.3); }
.reviews__source { font-size: var(--t-xs); color: var(--text-mid); }

/* Ohne Bewegung: Duplikat weg, Strecke von Hand schiebbar, Knopf ueberfluessig. */
@media (prefers-reduced-motion: reduce) {
  .reviews__track { animation: none; }
  .reviews__lauf { overflow-x: auto; }
  .reviews__track > [aria-hidden="true"] { display: none; }
  .reviews__pause { display: none; }
}

/* =========================================================
   FAQ
   ========================================================= */
/* Weiss zwischen den Objekten auf Sand und dem Kontakt auf Sand. Der Wechsel
   haelt die letzten drei Sektionen auseinander, sonst laufen sie als eine
   einzige Flaeche von rund 2800px durch. */
.faq-sec { padding: var(--sec-y) 0; background: var(--karte); }
.faq-sec__grid { display: grid; gap: 2.5rem; align-items: start; }
.faq-sec__head .btn { margin-top: 1.5rem; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: 100%; padding: 1.4rem 0;
  font-family: var(--f-display); font-size: 1.15rem; font-weight: 600;
  line-height: 1.3; text-align: left; color: var(--text);
  transition: color .2s ease;
}
.faq__q:hover { color: var(--text-mid); }
.faq__pm { position: relative; flex-shrink: 0; width: 1rem; height: 1rem; }
.faq__pm::before, .faq__pm::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--rot); transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.faq__pm::before { width: 1rem; height: 2px; }
.faq__pm::after { width: 2px; height: 1rem; }
.faq__item.is-open .faq__pm::after { transform: rotate(90deg); opacity: 0; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq__a p { padding-bottom: 1.4rem; color: var(--text-mid); font-size: var(--t-sm); line-height: 1.65; max-width: 60ch; }

/* =========================================================
   WERT-FUNNEL (Overlay)
   ========================================================= */
.funnel { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.funnel[hidden] { display: none; }
.funnel__backdrop { position: absolute; inset: 0; background: rgba(20, 16, 14, .72); backdrop-filter: blur(3px); }
.funnel__dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 40rem; max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: 6px; padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
}
.funnel__close {
  position: absolute; top: .9rem; right: .9rem;
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  color: var(--text-mid); transition: background-color .2s ease, color .2s ease;
}
.funnel__close:hover { background: var(--sand-tief); color: var(--text); }
.funnel__close svg { width: 1.15rem; height: 1.15rem; }
.funnel__progress { height: 3px; background: var(--line); border-radius: 2px; margin-bottom: 2rem; overflow: hidden; }
.funnel__progress span { display: block; height: 100%; width: 100%; background: var(--rot); transform: scaleX(0); transform-origin: left center; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.funnel__count { font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mid); margin-bottom: .75rem; }
.funnel__title { font-family: var(--f-display); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); font-weight: 600; line-height: 1.2; }
.funnel__sub { color: var(--text-mid); font-size: var(--t-sm); margin-top: .6rem; line-height: 1.6; }

.funnel__tiles { display: grid; gap: .75rem; margin-top: 1.75rem; }
.ftile {
  padding: 1rem 1.25rem; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  font-size: var(--t-body); font-weight: 500; color: var(--text);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.ftile:hover { border-color: var(--text-mid); }
.ftile.is-sel { border-color: var(--rot); background: rgba(202, 29, 30, .06); color: var(--text); }

.ffield { margin-top: 1.75rem; }
.ffield label { display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mid); margin-bottom: .5rem; }
.ffield input, .ffield select {
  width: 100%; padding: .85rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  font-size: var(--t-body); transition: border-color .2s ease, box-shadow .2s ease;
}
.ffield input:focus, .ffield select:focus { outline: none; border-color: var(--text-mid); box-shadow: 0 0 0 3px rgba(36, 30, 27, .08); }
.ffield input.is-error, .ffield select.is-error { border-color: var(--rot); box-shadow: 0 0 0 3px rgba(202, 29, 30, .18); }
.ffield__suffix { position: relative; }
.ffield__suffix input { padding-right: 3rem; }
.ffield__suffix span { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-mid); font-size: var(--t-sm); }
.funnel__lead { display: grid; gap: 0; }
.funnel__hint { font-size: var(--t-xs); color: var(--text-mid); margin-top: 1.25rem; line-height: 1.5; }

.funnel__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.funnel__back { font-size: var(--t-sm); font-weight: 500; color: var(--text-mid); transition: color .2s ease; }
.funnel__back:hover { color: var(--text); }
.funnel__back[hidden] { visibility: hidden; display: block; }

.funnel__done { text-align: center; }
.funnel__check {
  display: flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; margin: 0 auto 1.25rem;
  border-radius: 50%; background: var(--rot); color: #fff; font-size: 1.5rem;
}
.funnel__summary { margin-top: 1.75rem; padding: 1.25rem; background: var(--creme); border-radius: var(--r); text-align: left; }
.funnel__summary h3 { font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mid); margin-bottom: .75rem; }
.funnel__summary dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: var(--t-sm); }
.funnel__summary dt { color: var(--text-mid); }
.funnel__summary dd { font-weight: 600; text-align: right; }
.funnel__done .btn { margin-top: 1.5rem; }

/* =========================================================
   TEASER AUF DER STARTSEITE
   Die vollstaendigen Sektionen liegen auf den Unterseiten, hier
   steht nur so viel, dass man weiterklicken will.
   ========================================================= */
/* Kein eigenes Farbband und kein voller Sektionsabstand nach oben: der Block
   liest sich als Fortsetzung der Leistungen, nicht als neuer Anlauf. */
.staging-teaser {
  padding: clamp(3rem, 2rem + 3vw, 5rem) 0 var(--sec-y);
}
.staging-teaser__grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: center; }
.staging-teaser__text {
  font-size: var(--t-body);
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 46ch;
  margin-bottom: 2rem;
}
.staging-teaser__media .compare { max-width: 30rem; margin-inline: auto; }

.team-teaser { padding: var(--sec-y) 0; }
.team-teaser__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.tmini {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.tmini img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r);
  background: #e8e2da;
  margin-bottom: .875rem;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.tmini:hover img { transform: scale(1.03); }
/* Sichtbarer Platzhalter, solange kein Foto vorliegt: Initialen auf Sand,
   gleiche Kachelform wie die Portraits, damit das Raster nicht kippt. */
.tmini__platzhalter {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  background: #e8e2da;
  color: var(--text-mid);
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  letter-spacing: .06em;
  margin-bottom: .875rem;
}
.tmini__name { font-weight: 600; font-size: var(--t-sm); }
.tmini__role { font-size: var(--t-xs); color: var(--text-mid); margin-top: .15rem; }
.tmini:hover .tmini__name { color: var(--text-mid); }
.team-teaser__mehr { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
/* =========================================================
   UNTERSEITEN
   Kein Split-Hero wie auf der Startseite: die Unterseiten
   starten mit einem ruhigen Textkopf, damit die Startseite
   ihren Auftritt behaelt.
   ========================================================= */
.seitenkopf {
  padding: calc(var(--nav-h) + clamp(3rem, 2rem + 4vw, 6rem)) 0 clamp(2.5rem, 2rem + 2vw, 4rem);
  background: var(--weiss);
}
.seitenkopf__title {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--text);
  margin-top: .75rem;
  max-width: 18ch;
  text-wrap: balance;
}
.seitenkopf__title em { font-style: normal; color: var(--rot); }
.seitenkopf__lead {
  font-size: var(--t-lead);
  color: var(--text-mid);
  line-height: 1.6;
  max-width: 54ch;
  margin-top: 1.5rem;
}

/* ---------- Ueber uns: Hero ----------
   Eine Sektion statt zwei. Der Satz steht gross und allein, darunter randlos das
   Gruppenbild, darunter erst der Text. Alles auf Sand: die Seite trennt ueber
   Weissraum, nicht ueber einen Farbwechsel, und genau der Wechsel Weiss/Sand hat
   den Kopf vorher wie einen abgebrochenen Block wirken lassen. */
.uhero { background: var(--sand); }
.uhero__kopf {
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem));
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.uhero__title {
  font-family: var(--f-display);
  /* Ein ganzer Satz, keine drei Woerter: kleiner und breiter als die Hero-H1 der
     Startseite, sonst laeuft die Zeile ueber den halben Bildschirm. */
  font-size: clamp(1.875rem, 1.25rem + 2.6vw, 3.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--text);
  max-width: 24ch;
  /* balance statt pretty: pretty laesst "erledigen." als einzelnes Wort auf der
     letzten Zeile stehen, weil "aussergewoehnlich" die Zeile davor sprengt.
     balance verteilt die vier Zeilen gleichmaessig. */
  text-wrap: balance;
}
.uhero__title em { font-style: normal; color: var(--rot); }

/* Mobil laeuft das Bild randlos ueber die volle Breite, zwischen Satz und Text.
   Ab Desktop wird daraus die rechte Haelfte des Splits. */
.uhero__media { margin: 0; }
.uhero__media img {
  display: block;
  width: 100%;
  height: auto;
}

.uhero__body { padding: clamp(2.5rem, 2rem + 2vw, 4rem) var(--pad) var(--sec-y); }
.uhero__text {
  font-size: var(--t-body);
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 54ch;
}
.uhero__text + .uhero__text { margin-top: 1.25rem; }

/* ---------- Buero vor Ort ---------- */
.buero {
  padding: var(--sec-y) 0;
  background: var(--sand);
}
.buero__grid { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; }
.buero__fig img { width: 100%; height: auto; border-radius: var(--r); display: block; }
.buero__text {
  font-size: var(--t-body);
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 50ch;
  margin-top: 1.25rem;
}
.buero__adresse {
  font-size: var(--t-body);
  line-height: 1.7;
  margin: 1.75rem 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--line);
}
.buero__adresse a { color: var(--text); text-decoration: none; font-weight: 600; }
.buero__adresse a:hover { text-decoration: underline; }

/* ---------- Leistungsseite ---------- */
/* Sprungmarken im Seitenkopf: bei sechs Abschnitten spart das viel Scrollen,
   gerade auf dem Handy. */
.sprung {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2rem;
}
.sprung a {
  font-size: var(--t-xs);
  font-weight: 500;
  text-decoration: none;
  color: var(--text-mid);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .5rem 1rem;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.sprung a:hover { color: var(--text); border-color: var(--text); }

/* Drei Kontraststufen im Wechsel: sand, weiss, dunkel. Ohne die dunkle
   Stufe laufen sechs Abschnitte hintereinander ineinander. */
.leistung { padding: var(--sec-y) 0; }
.leistung--hell {
  background: var(--karte);
}
.leistung--dunkel { background: var(--dunkel); color: rgba(255, 255, 255, .82); }
.leistung--dunkel .haken li { color: rgba(255, 255, 255, .78); }
.leistung--dunkel .haken li::before { border-color: rgba(255, 255, 255, .55); }
.leistung--dunkel .leistung__text { color: rgba(255, 255, 255, .72); }
.lead--light { color: rgba(255, 255, 255, .8); }

/* Gedreht: Beiwerk links, Text rechts. Auf dem Handy bleibt der Text oben,
   sonst startet die Sektion mit einer Liste ohne Ueberschrift. */
.leistung--gedreht .leistung__body { order: -1; }
/* Die schmale Spalte steht mittig zur langen, nicht oben angeheftet.
   Mit align-items: start klebte die Hakenliste auf Hoehe des Eyebrows,
   waehrend der Text daneben dreimal so weit runterlief. Das las sich wie
   ein Fehler, nicht wie Absicht. Auf einer Spalte, also mobil, aendert
   die Zeile nichts: dort ist jede Zeile ohnehin so hoch wie ihr Inhalt. */
.leistung__grid { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; }
.leistung__text {
  font-size: var(--t-body);
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 54ch;
  margin-top: 1.25rem;
}
.leistung__links {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1.75rem;
}
.leistung__links a {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text);
  text-decoration-color: rgba(36, 30, 27, .3);
  text-underline-offset: .25em;
}
.leistung__links a:hover { text-decoration-color: currentColor; }
/* Muss NACH .leistung__links a stehen. Beide Regeln haben dieselbe Spezifitaet,
   also entscheidet die Reihenfolge. Stand die helle Fassung vorher weiter oben,
   gewann var(--text) und der Link auf der dunklen Wertermittlungs-Sektion war
   fast schwarz auf fast schwarz: man sah ihn erst beim Drueberfahren. */
.leistung__links--light a { color: rgba(255, 255, 255, .92); text-decoration-color: rgba(255, 255, 255, .45); }
.leistung__links--light a:hover { color: var(--weiss); text-decoration-color: currentColor; }
.leistung__body .btn { margin-top: 1.75rem; }

/* Haken-Liste: das Konkrete neben dem Fliesstext, ohne Icon-Zoo. */
.haken { list-style: none; display: grid; gap: .875rem; }
.haken li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--t-sm);
  color: var(--text-mid);
  line-height: 1.55;
}
.haken li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: .55rem; height: .3rem;
  border-left: 2px solid var(--text-mid);
  border-bottom: 2px solid var(--text-mid);
  transform: rotate(-45deg);
}

.compare__bu {
  font-size: var(--t-xs);
  color: var(--text-mid);
  text-align: center;
}

/* Abgrenzung zum KI-Staging: als ruhiger Kasten, nicht als Warnschild. */
/* Fussnote unter der Home-Staging-Strecke. Sie stand vorher als eigener Kasten
   da und wog damit schwerer als die Bilder, um die es geht. Jetzt eine Zeile,
   leicht zurueckgenommen, direkt unter dem Regler. */
.staging__notiz {
  margin: 1.25rem auto 0;
  text-align: center;
  font-size: var(--t-xs);
  color: var(--text-mid);
  opacity: .75;
}

/* Grosse Zahl statt Hakenliste: gibt der Vermietungs-Sektion eine eigene Form. */
.grosszahl {
  padding: clamp(2rem, 1.5rem + 2vw, 3rem);
  background: var(--karte);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.grosszahl__wert {
  font-family: var(--f-display);
  font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.grosszahl__unit { font-size: .5em; vertical-align: .35em; }
.grosszahl__label {
  font-size: var(--t-sm);
  color: var(--text-mid);
  line-height: 1.5;
  margin-top: 1rem;
  max-width: 22ch;
}

/* Preis als eigenes Element: die 400 Euro sind der Punkt, an dem sich im
   Gespraech alles entscheidet, also stehen sie auch so da. */
.preisbox {
  padding: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  border: 1px solid rgba(255, 255, 255, .18);
  border-left: 2px solid rgba(255, 255, 255, .45);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .04);
}
.preisbox__wert {
  font-family: var(--f-display);
  font-size: clamp(3rem, 2rem + 3.5vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--weiss);
  font-variant-numeric: tabular-nums;
}
.preisbox__zusatz {
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .6);
  margin-top: .5rem;
}
.preisbox__hinweis {
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .78);
  line-height: 1.6;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

/* Breite Kachel ueber die ganze letzte Zeile des Leistungsrasters. Sie traegt
   das Partnernetzwerk, das keine der sechs Standardleistungen ist, sondern das,
   was danach noch dazukommt. */
.card--breit {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  background: var(--sand-tief);
}
.card--breit .card__text { max-width: 62ch; }

/* Zentrierter Sektionskopf: bricht den immer gleichen linksbuendigen Rhythmus. */
.sec-head--mitte {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}
.sec-head--mitte .lead { margin-inline: auto; }
/* Zentrierter Kopf: die 24ch-Bremse der H2 wuerde sonst links haengen. */
.sec-head--mitte .h2 { max-width: none; }



/* Drohnenband: dunkel und randlos ueber die volle Breite, horizontal
   scrollbar statt Raster. Die Luftbilder wirken auf dunklem Grund deutlich
   besser und die Sektion sieht anders aus als alle anderen. */
.luft {
  padding: var(--sec-y) 0;
  background: var(--dunkel);
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
}
.luft__band {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--pad);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.luft__band figure {
  flex: 0 0 min(78vw, 26rem);
  scroll-snap-align: center;
}
.luft__band img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
  display: block;
  background: #2f2723;
}
.luft__band figcaption {
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .6);
  margin-top: .625rem;
}
.luft__band::-webkit-scrollbar { height: 6px; }
.luft__band::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 3px; }

/* Ab Desktop und nur mit echter Maus wird aus dem Schnappband eine Reihe
   Streifen: der, auf den man zeigt, zieht auf, die anderen weichen zurueck.
   Die Bildunterschrift kommt erst mit dem Aufziehen, sonst stuenden sechs
   Zeilen gleichzeitig im Bild. Animiert wird nur flex-grow und ein Transform,
   beides ohne Layout-Neuberechnung im Frame. */
@media (min-width: 62rem) and (hover: hover) and (pointer: fine) {
  .luft__band {
    overflow: visible;
    scroll-snap-type: none;
    gap: .4rem;
    height: clamp(22rem, 12rem + 16vw, 30rem);
    max-width: var(--wrap);
    margin-inline: auto;
  }
  .luft__band figure {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--r);
    scroll-snap-align: none;
    transition: flex-grow .55s cubic-bezier(.22,1,.36,1);
  }
  .luft__band figure:hover,
  .luft__band figure:focus-visible { flex-grow: 4.5; }
  .luft__band figure:focus-visible { outline: 2px solid var(--rot-hell); outline-offset: 2px; }
  .luft__band img {
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    /* Leichter Zoom im Ruhezustand, damit der schmale Streifen einen Ausschnitt
       zeigt und nicht das ganze Bild auf Briefmarkenbreite quetscht. */
    transform: scale(1.08);
    transition: transform .6s cubic-bezier(.22,1,.36,1);
  }
  .luft__band figure:hover img,
  .luft__band figure:focus-visible img { transform: none; }
  .luft__band figcaption {
    position: absolute;
    inset: auto 0 0 0;
    margin: 0;
    padding: 3.5rem 1.15rem 1.1rem;
    background: linear-gradient(to top, rgba(20,17,15,.9) 0%, rgba(20,17,15,.4) 55%, transparent 100%);
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(.4rem);
    transition: opacity .35s ease, transform .35s ease;
  }
  .luft__band figure:hover figcaption,
  .luft__band figure:focus-visible figcaption { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .luft__band figure, .luft__band img, .luft__band figcaption { transition: none; }
}

.galerie { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
.galerie img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
  background: #e8e2da;
  display: block;
}
.galerie figcaption {
  font-size: var(--t-xs);
  color: var(--text-mid);
  margin-top: .5rem;
}

/* ---------- Objektseite ---------- */
/* Die Seite startet ohne Seitenkopf direkt mit dieser Sektion, deshalb traegt
   sie den Abstand unter der festen Navigationsleiste selbst. */
.objekte--seite {
  padding-top: calc(var(--nav-h) + clamp(3rem, 2rem + 4vw, 6rem));
  background: var(--sand);
}

/* Objektfilter. Sitzt als eigene Zeile ueber dem Raster und traegt rechts die
   Trefferzahl, damit eine Auswahl ohne Ergebnis nicht wie ein Fehler aussieht.
   Die Felder erben die Formularoptik, nur weiss statt sand, weil die Sektion
   selbst schon auf Sand liegt. */
.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.25rem;
  margin-bottom: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.filter__feld { flex: 0 1 15rem; min-width: 11rem; margin-bottom: 0; }
.filter__feld select { background-color: var(--karte); }
.filter__zahl {
  margin-inline-start: auto;
  padding-bottom: .9rem;
  font-size: var(--t-sm);
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}
.objekte__leer {
  margin-top: 2rem;
  max-width: 46ch;
  color: var(--text-mid);
  line-height: 1.65;
}
.referenzen {
  padding: var(--sec-y) 0;
  background: var(--karte);
  border-block: 1px solid var(--line);
}
/* Offene Referenzkachel: sichtbar unfertig, damit im Termin klar ist, dass hier
   spaeter echte Objekte stehen und nichts erfunden wurde. */
.objekt--offen { border-style: dashed; }
.objekt--offen:hover { transform: none; box-shadow: none; }
.objekt__media--leer {
  position: relative;
  aspect-ratio: 3 / 2;
  background: repeating-linear-gradient(135deg, #efe9e1 0 12px, #e9e2d9 12px 24px);
}
.objekt__badge--grau { background: #8a827b; }
.objekt--offen .objekt__title { color: var(--text-mid); }
.objekt--offen .objekt__ort { font-style: italic; }

/* ---------- Ratgeber ---------- */
.artikel-liste { padding: 0 0 var(--sec-y); }
.artikel-grid { display: grid; gap: 1.5rem; }
.artikel-karte {
  /* Kein Innenabstand mehr auf der Karte selbst: das Vorschaubild sitzt buendig
     an den Kanten, der Text bekommt seinen Abstand ueber .artikel-karte__body. */
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--karte);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Das Bild ist reine Zugabe: der Link darum ist aus der Tabreihenfolge und vor
   Screenreadern versteckt, weil die Ueberschrift darunter schon zum Beitrag
   fuehrt. Zwei gleiche Links hintereinander sind sonst nur Ballast. */
.artikel-karte__bild {
  display: block;
  overflow: hidden;
  background: var(--sand-tief);
}
.artikel-karte__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.artikel-karte:hover .artikel-karte__bild img { transform: scale(1.04); }
.artikel-karte__body { padding: 1.75rem 2rem 2rem; display: flex; flex-direction: column; flex: 1; }
.artikel-karte__thema {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: .75rem;
}
.artikel-karte__titel {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: .75rem;
}
.artikel-karte__titel a { color: inherit; text-decoration: none; }
.artikel-karte__titel a:hover { color: var(--text-mid); }
.artikel-karte__text { font-size: var(--t-sm); color: var(--text-mid); line-height: 1.6; }
.artikel-karte__meta { font-size: var(--t-xs); color: var(--text-mid); margin-top: auto; padding-top: 1.25rem; }
.artikel-karte--offen {
  border-top-color: var(--line);
  border-style: dashed;
  background: transparent;
}
.artikel-karte--offen .artikel-karte__thema { color: var(--text-mid); }
.artikel-karte--offen .artikel-karte__titel { color: var(--text-mid); }

/* ---------- Beitrag (Artikelseite) ---------- */
/* Eine Lesespalte, keine Sidebar: der Text ist der ganze Zweck der Seite. */
.beitrag__wrap { max-width: 44rem; }
.beitrag__kopf {
  padding: calc(var(--nav-h) + clamp(3rem, 2rem + 4vw, 6rem)) 0 clamp(2rem, 1.5rem + 2vw, 3rem);
}
.beitrag__kopf .eyebrow a { color: inherit; text-decoration: none; }
.beitrag__kopf .eyebrow a:hover { text-decoration: underline; }
.beitrag__titel {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.012em;
  margin-top: .75rem;
  text-wrap: balance;
}
.beitrag__vorspann {
  font-size: var(--t-lead);
  color: var(--text-mid);
  line-height: 1.6;
  margin-top: 1.5rem;
}
.beitrag__meta {
  font-size: var(--t-xs);
  color: var(--text-mid);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.beitrag__text { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.beitrag__text h2 {
  font-family: var(--f-display);
  font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  margin: clamp(2.25rem, 2rem + 1.5vw, 3rem) 0 .875rem;
}
.beitrag__text h2:first-child { margin-top: 0; }
/* Die Rechtstexte enthalten ausgeschriebene URLs, die als ein einziges Wort
   gelten. Ohne diese Regel schieben sie die Datenschutzseite am Handy seitlich
   aus dem Bild (gemessen: 519px bei 375px Viewport). */
.beitrag__text a { overflow-wrap: break-word; }
.beitrag__text p {
  font-size: var(--t-body);
  color: var(--text-mid);
  line-height: 1.75;
}
.beitrag__text p + p { margin-top: 1.125rem; }
.beitrag__text h3 {
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.4;
  margin: 1.75rem 0 .5rem;
}
.beitrag__text h4 {
  font-size: var(--t-body);
  font-weight: 500;
  font-style: italic;
  margin: 1.25rem 0 .375rem;
}
.beitrag__text ul { margin: 1rem 0; padding-left: 1.25rem; list-style: disc; color: var(--text-mid); line-height: 1.75; }
.beitrag__text ul + p { margin-top: 1.125rem; }

.beitrag__cta {
  padding: 2rem;
  background: var(--creme);
  border-radius: var(--r);
}
.beitrag__cta-text {
  font-size: var(--t-body);
  line-height: 1.65;
  margin-bottom: 1.5rem;
  max-width: 48ch;
}
.beitrag__zurueck {
  margin: 2.5rem 0 var(--sec-y);
  font-size: var(--t-sm);
}
.beitrag__zurueck a { color: var(--text-mid); }
.beitrag__zurueck a:hover { color: var(--text); }

/* =========================================================
   BREAKPOINTS (mobile-first)
   ========================================================= */
@media (min-width: 40rem) {
  .band__grid { grid-template-columns: repeat(4, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  /* Zwei Spalten: 12 Punkte laufen als 6+6 auf, die vier der letzten Phase als 2+2. */
  .ppunkte { --zeilen: 6; --zeilenhoehe: 1fr; }
  .pgruppe__kopf { grid-template-columns: auto 1fr auto auto; }
  .pgruppe__anzahl { display: block; }
  .ppunkte--kurz { --zeilen: 2; }
  /* Vier Koepfe: zwei Spalten ab Tablet, vier ab Desktop. Drei wuerden
     eine Karte allein in die zweite Reihe stellen. */
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
  .objekte__grid { grid-template-columns: repeat(2, 1fr); }
  .team-teaser__grid { grid-template-columns: repeat(4, 1fr); }
  .artikel-grid { grid-template-columns: repeat(3, 1fr); }

  /* Die Aufzaehlung bekommt mehr Raum fuer die Ziffer, sobald Platz da ist. */
  .staerke { grid-template-columns: 4.5rem 1fr; gap: 0 1.5rem; }
  .staerke__icon { font-size: 1.75rem; }

  /* Ab hier stehen die vier Punkte nebeneinander: geschlossen bleibt ein
     schmaler Streifen mit dem Begriff quer, das aktive Feld zieht auf. */
  .expand {
    flex-direction: row;
    height: clamp(28rem, 19rem + 22vw, 36rem);
  }
  .expand__item { min-width: 5rem; min-height: 0; }
  .expand__label { display: block; }
  .expand__item.is-aktiv .expand__label { opacity: 0; }
  .expand__item:not(.is-aktiv) .expand__titel,
  .expand__item:not(.is-aktiv) .expand__no { opacity: 0; }
  .expand:not([data-js]) { flex-direction: column; }
  .expand:not([data-js]) .expand__label { display: none; }
}

@media (min-width: 62rem) {
  /* Ueber-uns-Hero als Split, gespiegelt zur Startseite: Text links am selben
     Raster wie alle .wrap-Sektionen, Bild rechts randlos bis zum Viewport.
     Randlos ueber die volle Breite war hier falsch, das Motiv ist ein enger
     Ausschnitt auf drei Gesichter und wird als breiter Streifen zur Tapete.
     Das Bild behaelt sein 4:3 und wird nicht auf Spaltenhoehe gezogen: dafuer
     muesste man seitlich beschneiden, und da stehen die aeusseren beiden. */
  .uhero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: start;
    column-gap: clamp(2rem, 1rem + 3vw, 4rem);
    /* Knapper als die uebliche Sektionshoehe: der Hero soll auf einen Bildschirm
       passen, sonst haengt die Textspalte unten ueber der Kante. */
    padding-top: calc(var(--nav-h) + clamp(2.5rem, 1.5rem + 3vw, 4.5rem));
    padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
  }
  .uhero__kopf, .uhero__body {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: max(var(--pad), calc((100vw - var(--wrap)) / 2));
    padding-right: 0;
  }
  /* Oben buendig: Satz und Bildkante starten auf derselben Linie. Deshalb
     align-content: start und keine vertikale Zentrierung des Bildes. */
  .uhero__kopf { grid-area: 1 / 1 / 2 / 2; padding-top: 0; padding-bottom: 1.75rem; }
  .uhero__body { grid-area: 2 / 1 / 3 / 2; padding-top: 0; padding-bottom: 0; }
  .uhero__media { grid-area: 1 / 2 / 3 / 3; align-self: start; }
  .uhero__title { max-width: 20ch; }
  .uhero__text { max-width: 46ch; }

  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .burger { display: none; }
  .mobile-menu { display: none !important; }

  /* Split-Hero: zwei Haelften. Das Bild geht links randlos bis zum Viewport,
     der Text laeuft rechts am selben Raster wie alle .wrap-Sektionen aus.
     100svh: der Hero besetzt den ganzen ersten Bildschirm, der Zahlenstreifen
     darunter bleibt bis zum ersten Scrollen unsichtbar. */
  .hero {
    /* minmax(0,...), sonst drueckt die breite Display-Zeile der h1 die Bildspalte
       schmaler und das Verhaeltnis haengt an der Textlaenge. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: 100svh;
  }
  .hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--nav-h);
    padding-left: clamp(2rem, 1rem + 3vw, 4.5rem);
    padding-right: max(var(--pad), calc((100vw - var(--wrap)) / 2));
  }
  .hero__media { aspect-ratio: auto; height: 100%; margin-top: 0; }

  /* Eigene Groesse fuer den Split-Hero: die Textspalte ist ab 1280px konstant
     rund 550px breit, "Leidenschaft." braucht bei der globalen --t-h1 aber 624px
     und wuerde von .line { overflow: hidden } abgeschnitten. */
  .hero__title { font-size: clamp(3rem, 1rem + 4vw, 5.375rem); }

  .warum__grid { grid-template-columns: 1fr 1fr; }
  .kontakt__grid { grid-template-columns: 1fr 1fr; }
  /* Drei statt vier Spalten: mit Verkauf und Vermietung sind es sechs Karten,
     2x3 laeuft sauber auf und die Karten tragen mehr Text als vier enge. */
  .cards { grid-template-columns: repeat(3, 1fr); }
  /* Drei Spalten: 12 als 4+4+4. Die kurze Phase bleibt zweispaltig, sonst
     haengt ein einzelner Punkt allein in der dritten Spalte. */
  .ppunkte { --zeilen: 4; }
  .ppunkte--kurz { --zeilen: 2; }
  .footer__inner { grid-template-columns: 1fr 2fr; align-items: start; }
  .objekte__grid { grid-template-columns: repeat(3, 1fr); }
  .bewertung__inner { grid-template-columns: 1.4fr 1fr; gap: 4rem; }
  /* sticky gehoert auf das Kind, nicht auf das Grid-Item: das Item ist der Weg,
     das Kind klebt. Nachlauf unter dem letzten Schritt, damit die linke Spalte
     lange genug steht, bis Schritt 10 oben angekommen ist. */
  .notar__grid { grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 2rem + 4vw, 5.5rem); }
  .notar__stick { position: sticky; top: calc(var(--nav-h) + 2rem); }
  .notar__steps { gap: 1.5rem; padding-bottom: clamp(18rem, 26vh, 24rem); }
  .nstep { min-height: 9rem; border-left-color: var(--line); opacity: .45; }
  .nstep__no { color: var(--text-mid); }
  .nstep.is-on { border-left-color: var(--rot); opacity: 1; }
  .nstep.is-open { border-left-color: var(--rot); opacity: 1; }
  .nstep.is-on .nstep__no { color: var(--rot); }
  /* Mit dem offenen Funnel rechts braucht die Spalte mehr Platz als ein Button.
     Feste Mindesthoehe plus zentrierte Spalten: die Karte waechst und schrumpft
     je Schritt um ihre eigene Mitte, statt alles darunter zu verschieben. */
  .bewertung__inner--funnel {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 34rem;
  }
  .funnel-fest { display: block; }
  .bewertung__mobil-cta { display: none; }
  .staging-teaser__grid { grid-template-columns: 1fr 1fr; }
  .buero__grid { grid-template-columns: 1fr 1.1fr; }
  .team__kopf .lead { max-width: 34ch; }
  .leistung__grid { grid-template-columns: 1.35fr 1fr; gap: clamp(3rem, 2rem + 4vw, 6rem); }
  /* Gedreht: Beiwerk zurueck nach links, Text nach rechts. */
  .leistung--gedreht .leistung__grid { grid-template-columns: 1fr 1.35fr; }
  .leistung--gedreht .leistung__body { order: 0; }
  .leistung__grid--preis { grid-template-columns: 1.25fr 1fr; }
  .galerie { grid-template-columns: repeat(3, 1fr); }
  .staging__slider { max-width: 44rem; }
  .faq-sec__grid { grid-template-columns: 1fr 1.3fr; gap: 4.5rem; }
  .funnel__tiles { grid-template-columns: 1fr 1fr; }
  .funnel__lead { grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
  .funnel__lead .ffield:first-child { grid-column: 1 / -1; }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Ohne Motion schaltet das Schritt-JS ab, dann wird nie ein Schritt aktiv.
     Ohne diese Zeile blieben alle zehn dauerhaft auf 45% Deckkraft stehen,
     also unlesbar fuer genau die, die das nicht wegscrollen koennen. */
  .nstep { opacity: 1; border-left-color: var(--line); }
  .nstep__no { color: var(--text-mid); }
}

/* ===================================================================
   VIRTUELLE BESICHTIGUNG: Rundgang mit Klick-Start
   Das Poster ist ein echtes Standbild aus dem Rundgang, kein Platzhalter.
   Erst der Klick setzt das iframe ein, vorher geht nichts an vr-easy raus.
   Keine neue Flaeche, keine neue Farbe: der Block liegt auf --karte wie
   die Sektion, Rot traegt nur den Play-Knopf und den Fokus-Ring.
   =================================================================== */
.rundgang { margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.rundgang__rahmen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--sand-tief);
}
.rundgang__rahmen iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Der Starter ist ein Button, damit Tastatur und Screenreader ihn finden. */
.rundgang__start {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none;
  cursor: pointer; text-align: left;
}
.rundgang__start:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
.rundgang__bild {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.rundgang__start:hover .rundgang__bild { transform: scale(1.02); }

/* Der Verlauf sitzt nur unten, damit das Bild oben unangetastet bleibt. */
.rundgang__start::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 16, 14, .68) 0%, rgba(20, 16, 14, .16) 38%, rgba(20, 16, 14, 0) 62%);
}
.rundgang__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(3.5rem, 3rem + 2vw, 4.75rem);
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--rot);
  color: #fff;
  box-shadow: 0 6px 24px rgba(20, 16, 14, .3);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .25s ease;
  z-index: 1;
}
.rundgang__play svg { width: 44%; height: 44%; margin-left: 6%; }
.rundgang__start:hover .rundgang__play { transform: translate(-50%, -50%) scale(1.06); background: var(--rot-dark); }

.rundgang__text {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: flex; flex-direction: column; gap: .15rem;
  padding: clamp(1rem, .75rem + 1.5vw, 1.75rem);
  color: #fff;
}
.rundgang__label {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.rundgang__objekt {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  line-height: 1.25;
}

.rundgang__hinweis {
  margin-top: .875rem;
  font-size: var(--t-xs);
  color: var(--text-mid);
  line-height: 1.6;
}
.rundgang__hinweis a { color: var(--text); text-decoration-color: rgba(36, 30, 27, .3); text-underline-offset: .25em; }
.rundgang__hinweis a:hover { text-decoration-color: currentColor; }

/* Vier Kacheln: auf dem Handy ein Schnappband, ab Tablet eine Reihe. */
.rundgang__weitere {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: .75rem;
  margin-top: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
}
.rundgang__kachel {
  position: relative;
  scroll-snap-align: start;
  padding: 0; border: 0; background: none;
  cursor: pointer; text-align: left;
  border-radius: 3px; overflow: hidden;
}
.rundgang__kachel img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.rundgang__kachel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 16, 14, .72) 0%, rgba(20, 16, 14, .1) 55%, rgba(20, 16, 14, 0) 75%);
}
/* Beschriftung als eigener Block, nicht zwei absolut gesetzte Zeilen:
   sonst laufen Ort und Beschreibung ineinander, sobald der Text umbricht. */
.rundgang__kachel-text {
  position: absolute; left: .75rem; right: .75rem; bottom: .6rem;
  z-index: 1;
  display: flex; flex-direction: column; gap: .1rem;
  color: #fff;
}
.rundgang__kachel-ort { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.rundgang__kachel-was { font-size: var(--t-xs); color: rgba(255, 255, 255, .78); line-height: 1.35; }
.rundgang__kachel:hover img { transform: scale(1.04); }
.rundgang__kachel:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
/* Der gerade gezeigte Rundgang tritt zurueck, sonst sucht man ihn doppelt. */
.rundgang__kachel[aria-current="true"] img { opacity: .45; }
.rundgang__kachel[aria-current="true"] { cursor: default; }

@media (min-width: 48rem) {
  .rundgang__weitere { grid-auto-flow: initial; grid-template-columns: repeat(4, 1fr); overflow-x: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .rundgang__bild,
  .rundgang__kachel img,
  .rundgang__play { transition: none; }
  .rundgang__start:hover .rundgang__bild,
  .rundgang__kachel:hover img { transform: none; }
}

/* ===================================================================
   hidden-Attribut durchsetzen: MUSS ganz am Ende stehen
   Der Browser bringt zwar [hidden] { display: none } mit, das steht aber im
   Browser-Stylesheet und verliert gegen jede Regel von uns. Konkret hat
   .objekt { display: flex } gewonnen: der Objektfilter setzte hidden brav, die
   Zaehlung stimmte, und trotzdem blieb jede Karte stehen. Dieselbe Falle
   lauert bei allem, was per JS auf hidden geschaltet wird und eine eigene
   display-Regel hat.
   Die Spezifitaet ist bewusst niedrig (0,1,0), damit .funnel__back[hidden]
   (0,2,0) weiter gewinnt: der Zurueck-Knopf im Funnel soll im Layout bleiben
   und nur unsichtbar werden, sonst springt die Fusszeile des Overlays.
   =================================================================== */
[hidden] { display: none; }

/* Zwischenueberschrift in einer Fussspalte, wenn dort zwei Gruppen stehen. */
.footer__h--spalt { margin-top: 1.25rem; }

/* =========================================================
   VERGLEICHS-RASTER
   Die Startseite zeigt die Home-Staging-Vergleiche als Schnappband mit
   Pfeilen. Auf der eigenen Home-Staging-Seite waere dasselbe Band eine
   Wiederholung: dort liegen sie als Raster nebeneinander, damit man die
   Menge sieht und nicht durch sie hindurchwischen muss.
   ========================================================= */
.vgl-raster {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}
.vgl-raster .compare { flex: initial; }
@media (min-width: 46rem) { .vgl-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 76rem) { .vgl-raster--drei { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================
   FALLGESCHICHTE
   Zwei Bilder nebeneinander, die ihre Aussage selbst tragen: die
   Beschriftung ist im Bild, sie stammt vom Kunden. Deshalb hier bewusst
   keine zusaetzliche Bildunterschrift darunter.
   ========================================================= */
.fall { padding: var(--sec-y) 0; background: var(--dunkel); color: rgba(255,255,255,.82); }
.fall .h2, .fall .eyebrow { color: #fff; }
.fall__paar {
  display: grid; gap: clamp(1rem, .5rem + 2vw, 2rem); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
@media (min-width: 52rem) { .fall__paar { grid-template-columns: 1fr 1fr; align-items: start; } }
.fall__fig { margin: 0; }
.fall__fig img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r); background: var(--anthrazit);
}
.fall__note {
  margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  color: rgba(255,255,255,.66); font-size: var(--t-sm); line-height: 1.65; max-width: 62ch;
}

/* =========================================================
   OBJEKTKARTEN (Referenzen, Ortsseiten)
   ========================================================= */
.okarten { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
@media (min-width: 44rem) { .okarten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .okarten { grid-template-columns: repeat(3, 1fr); } }
.okarte {
  display: flex; flex-direction: column;
  background: var(--karte); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; transition: border-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.okarte:hover { border-color: var(--rot); transform: translateY(-3px); }
.okarte__bild { position: relative; aspect-ratio: 4 / 3; background: var(--anthrazit); overflow: hidden; }
.okarte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Platzhalter fuer Objekte, von denen noch kein Foto vorliegt. Bewusst als
   Flaeche mit Ortskuerzel statt als Fremdbild: ein Stockfoto waere an dieser
   Stelle eine Behauptung. */
.okarte__leer {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--anthrazit), #2b2522);
  color: rgba(255,255,255,.42);
  font-family: var(--f-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); letter-spacing: .04em;
}
.okarte__ort {
  position: absolute; left: .75rem; bottom: .75rem; z-index: 1;
  background: rgba(20,16,14,.78); color: #fff;
  padding: .3rem .7rem; border-radius: 3px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.okarte__body { padding: clamp(1rem, .75rem + 1vw, 1.4rem); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.okarte__titel { font-family: var(--f-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.okarte__daten { margin-top: auto; display: flex; flex-wrap: wrap; gap: .3rem .9rem; color: var(--text-mid); font-size: var(--t-xs); }
.okarte__daten span { display: inline-flex; gap: .3rem; }
.okarte__daten b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* =========================================================
   PERSON
   Portraet und Zitat auf Leistungsseiten, die eine Person tragen soll.
   Bewusst anders aufgebaut als .leistung: das Bild ist hier der Einstieg,
   nicht die Beigabe, und das Zitat steht ueber dem Namen.
   ========================================================= */
.person { padding: var(--sec-y) 0; background: var(--karte); }
.person__grid { display: grid; gap: clamp(1.75rem, 1.25rem + 2.5vw, 3.5rem); align-items: center; }
@media (min-width: 52rem) { .person__grid { grid-template-columns: .8fr 1.2fr; } }
.person__fig { margin: 0; }
.person__fig img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r); background: var(--anthrazit);
  aspect-ratio: 4 / 5; object-fit: cover;
}
.person__zitat {
  margin: 0 0 1.25rem;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 600; line-height: 1.32; letter-spacing: -.01em;
  max-width: 30ch;
}
.person__name { font-weight: 600; font-size: 1.0625rem; }
.person__rolle {
  color: var(--rot); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.25rem;
}
.person__text { color: var(--text-mid); font-size: var(--t-sm); line-height: 1.7; max-width: 56ch; }
.person__haken { margin-top: 1.25rem; }
.person__kontakt { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--t-sm); }
.person__kontakt a { color: var(--text-mid); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .25em; }
.person__kontakt a:hover { color: var(--rot); text-decoration-color: currentColor; }

/* =========================================================
   RUHEPUNKT
   Ein grosses randloses Bild mit einem Satz darueber. Gedacht fuer Seiten mit
   schwerem Thema, auf denen zwischen zwei Textblöcken einmal Luft gehoert.
   ========================================================= */
.ruhe { position: relative; }
.ruhe__bild { position: relative; height: clamp(18rem, 12rem + 26vw, 34rem); overflow: hidden; background: var(--anthrazit); }
.ruhe__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ruhe__bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,16,14,.15) 0%, rgba(20,16,14,.72) 100%);
}
.ruhe__satz {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 0 var(--pad) clamp(1.75rem, 1.25rem + 2vw, 3rem);
}
.ruhe__satz p {
  max-width: 34ch; margin: 0 auto;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.875rem);
  font-weight: 600; line-height: 1.32; letter-spacing: -.01em;
  color: #fff; text-align: center;
}
.ruhe__satz em { font-style: normal; color: var(--rot); }

/* =========================================================
   AUFKLAPPMENUE „LEISTUNGEN"
   Die zwoelf neuen Unterseiten hingen vorher nur in der Fusszeile. Wer nicht
   bis unten scrollt, hat sie nicht gefunden, auch die Bewertungsseite nicht.
   Oeffnet bei Hover, bei Tastaturfokus und auf Klick.
   ========================================================= */
.nav__gruppe { position: relative; display: flex; align-items: center; }
.nav__knopf {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--t-sm); font-weight: 500; color: var(--text-mid);
  cursor: pointer; transition: color .2s ease;
}
.nav__knopf:hover, .nav__gruppe:hover .nav__knopf,
.nav__knopf[aria-expanded="true"] { color: var(--text); }
.nav__pfeil { width: .875rem; height: .875rem; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.nav__knopf[aria-expanded="true"] .nav__pfeil { transform: rotate(180deg); }

.nav__klapp {
  position: absolute; top: calc(100% + .75rem); left: 50%;
  transform: translateX(-50%) translateY(-.4rem);
  min-width: 15rem; padding: .6rem;
  display: flex; flex-direction: column; gap: .05rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 18px 44px rgba(20, 16, 14, .14);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1), visibility .22s;
  z-index: 40;
}
.nav__gruppe:hover .nav__klapp,
.nav__gruppe:focus-within .nav__klapp,
.nav__klapp.is-offen {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__klapp a {
  padding: .5rem .7rem; border-radius: 3px;
  font-size: var(--t-sm); color: var(--text-mid); white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.nav__klapp a:hover, .nav__klapp a:focus-visible { background: var(--karte); color: var(--rot); }
.nav__klapp-alle {
  font-weight: 600; color: var(--text) !important;
  border-bottom: 1px solid var(--line); border-radius: 3px 3px 0 0 !important; margin-bottom: .25rem;
}
.nav__klapp-titel {
  margin: .6rem .7rem .2rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mid); opacity: .7;
}
/* Am Handy liegen dieselben Eintraege eingerueckt im Schubladenmenue. */
.mobile-menu__unter {
  padding-left: 1.5rem !important;
  font-size: var(--t-sm) !important;
  color: var(--text-mid) !important;
}

/* =========================================================
   LANGE WOERTER IN GROSSEN UEBERSCHRIFTEN
   „Immobilienmakler" und „Immobilienbewertung" haben keinen Umbruchpunkt. Bei
   375px waere „Immobilienmakler" in voller H1-Groesse 382px breit, verfuegbar
   sind 333px: das Wort kann nicht umbrechen und schiebt die ganze Seite auf
   424px. Deshalb deckeln die grossen Ueberschriften ihre Schriftgroesse
   zusaetzlich an der Viewportbreite. Ab etwa 470px greift wieder --t-h1, der
   Desktop-Auftritt bleibt damit unveraendert.
   ========================================================= */
/* Der Hero steht ab 1024px in einer schmalen Spalte, die NICHT mit dem Fenster
   mitwaechst: bei 1440px ist sie 565px breit, bei 1920px sogar nur 552px. Eine
   Deckelung ueber vw greift dort also ins Leere. Deshalb haengt die Schriftgroesse
   an der Spaltenbreite (cqw), nicht am Viewport.
   Faktor: „Immobilienmakler" braucht rund das 8,2-fache der Schriftgroesse an
   Breite, 100/8.2 ergibt 12.2cqw. Mit Puffer 11.8cqw. */
.hero__inner { container-type: inline-size; }
.hero__title { font-size: min(var(--t-h1), 10.4vw, 11.8cqw); }

/* Die Seitenkoepfe laufen ueber die volle Breite, dort reicht die Viewport-Deckelung. */
.seitenkopf__title { font-size: min(var(--t-h1), 10.4vw); }

/* =========================================================
   HOME STAGING: zwei Stufen
   Zwei gleich gewichtete Kacheln. Die rote Leiste faehrt beim Hover von
   links ein, sonst bleibt die Kachel ruhig.
   ========================================================= */
.stufen { display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
@media (min-width: 52rem) { .stufen { grid-template-columns: repeat(2, 1fr); } }
.stufe {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .875rem;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--r);
}
.stufe::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--rot); transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) and (pointer: fine) { .stufe:hover::before { transform: scaleX(1); } }
.stufe__nr { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rot); }
.stufe__titel { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.stufe__wer { color: var(--text); font-size: var(--t-sm); line-height: 1.55; font-weight: 500; }
.stufe__fuss { margin-top: auto; padding-top: .875rem; border-top: 1px solid var(--line); color: var(--text-mid); font-size: var(--t-sm); line-height: 1.55; }

/* =========================================================
   HOME STAGING: Objektkarte oeffnet alle Paare
   Der Knopf traegt den Klick, seine Flaeche spannt per ::after ueber die
   ganze Karte. So bleibt es ein echter Knopf statt eines klickbaren <li>.
   ========================================================= */
.okarte--klick { position: relative; cursor: pointer; }
.okarte__knopf {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--rot); font-weight: 600; text-align: left;
  border-bottom: 1px solid transparent; transition: border-color .25s ease;
}
.okarte__knopf b { color: inherit; }
.okarte__knopf::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.okarte--klick:hover .okarte__knopf { border-bottom-color: currentColor; }
.okarte__knopf:focus-visible { outline: none; }
.okarte--klick:has(.okarte__knopf:focus-visible) { outline: 2px solid var(--rot); outline-offset: 3px; }

.hsdialog {
  width: min(72rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem);
  margin: auto; padding: 0; border: 0; border-radius: var(--r);
  background: var(--sand); color: var(--text); overflow: auto; overscroll-behavior: contain;
}
.hsdialog::backdrop { background: rgba(20, 16, 14, .72); }
html:has(.hsdialog[open]) { overflow: hidden; }
.hsdialog__kopf {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: clamp(1rem, .8rem + 1vw, 1.5rem) clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  background: var(--sand); border-bottom: 1px solid var(--line);
}
.hsdialog__inner > .vgl-raster { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.hsdialog__titel { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.25; }
.hsdialog__zu {
  flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line); border-radius: 50%; background: var(--karte); color: var(--text); cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.hsdialog__zu svg { width: 1.1rem; height: 1.1rem; }
.hsdialog__zu:hover { border-color: var(--rot); color: var(--rot); }

.ratgeber--beitrag { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.beitrag__abschluss { padding: 0 0 clamp(2.5rem, 2rem + 2vw, 4rem); }
.field__hinweis { font-size: var(--t-xs); color: var(--text-mid); line-height: 1.55; }
.field__hinweis a { color: var(--text); text-decoration-color: rgba(36, 30, 27, .3); text-underline-offset: .2em; }
.field__hinweis a:hover { text-decoration-color: currentColor; }

/* Karten aus FlowFact: der Titel-Link spannt ueber die ganze Karte. */
.objekt--link { position: relative; }
.objekt--link .objekt__title a { color: inherit; text-decoration: none; }
.objekt--link .objekt__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.objekt--link .objekt__title a:focus-visible { outline: none; }
.objekt--link:has(.objekt__title a:focus-visible) { outline: 2px solid var(--rot); outline-offset: 3px; }
.objekt--link .link-arrow { pointer-events: none; }

/* =========================================================
   EXPOSE: eine Seite je Objekt aus FlowFact
   ========================================================= */
.expose { padding: calc(var(--sec-y) * .55 + 4.5rem) 0 var(--sec-y); }
.expose__zurueck { margin-bottom: 1.25rem; font-size: var(--t-sm); }
.expose__zurueck a { color: var(--text-mid); text-decoration: none; }
.expose__zurueck a::before { content: "\2190\00a0"; }
.expose__zurueck a:hover { color: var(--text); }
.expose__kopf { max-width: 52rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.expose__titel {
  font-family: var(--f-display); font-weight: 600; letter-spacing: -.015em; line-height: 1.12;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); margin-top: .75rem; text-wrap: balance;
}
.expose__ort { margin-top: .75rem; color: var(--text-mid); }

.expose__galerie { display: grid; gap: .5rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
@media (min-width: 48rem) {
  .expose__galerie { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); height: clamp(22rem, 16rem + 18vw, 34rem); }
  .expose__bild--gross { grid-row: span 2; }
}
.expose__bild {
  position: relative; display: block; padding: 0; border: 0; cursor: zoom-in; overflow: hidden;
  background: var(--anthrazit); border-radius: var(--r); aspect-ratio: 3 / 2;
}
@media (min-width: 48rem) { .expose__bild { aspect-ratio: auto; } }
@media (max-width: 47.999rem) { .expose__bild:not(.expose__bild--gross) { display: none; } }
.expose__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.expose__bild:hover img { transform: scale(1.03); }
.expose__mehr {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(20, 16, 14, .55); color: #fff; font-family: var(--f-display); font-size: 1.75rem;
}
@media (max-width: 47.999rem) {
  .expose__bild--gross::after {
    content: "Alle Bilder ansehen"; position: absolute; right: .75rem; bottom: .75rem;
    background: rgba(20, 16, 14, .78); color: #fff; padding: .35rem .7rem; border-radius: 3px; font-size: var(--t-xs); font-weight: 600;
  }
}

.expose__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: start; }
@media (min-width: 62rem) { .expose__raster { grid-template-columns: minmax(0, 1fr) 20rem; } }
.expose__fakten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.expose__fakt { padding: 1rem 1.1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--karte); }
.expose__fakt dt { font-size: var(--t-xs); color: var(--text-mid); margin-bottom: .2rem; }
.expose__fakt dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.expose__fakt--preis dd { font-family: var(--f-display); font-size: 1.4rem; font-weight: 700; }
.expose__merkmale { margin-top: 1.75rem; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }
.expose__text { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); max-width: 44rem; }
.expose__text h2 { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 600; margin-bottom: .875rem; }
.expose__text p { color: var(--text-mid); line-height: 1.7; }
.expose__text p + p { margin-top: .875rem; }
.expose__grundrisse { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }
.expose__grundriss { padding: .75rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: zoom-in; text-align: left; font: inherit; }
.expose__grundriss img { width: 100%; height: 11rem; object-fit: contain; display: block; }
.expose__grundriss span { display: block; margin-top: .5rem; font-size: var(--t-xs); color: var(--text-mid); }
.expose__energie { display: grid; gap: .15rem 1.5rem; grid-template-columns: minmax(0, 1fr); font-size: var(--t-sm); }
.expose__energie dd { margin-bottom: .5rem; }
@media (min-width: 36rem) { .expose__energie { grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 1.5rem; } .expose__energie dd { margin-bottom: 0; } }
.expose__energie div { display: contents; }
.expose__energie dt { color: var(--text-mid); }
.expose__energie dd { font-weight: 600; }
.expose__courtage { margin-top: 2.5rem; max-width: 44rem; font-size: var(--t-xs); color: var(--text-mid); line-height: 1.6; }

@media (min-width: 62rem) { .expose__seite { position: sticky; top: 6.5rem; } }
.expose__karte {
  display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem;
  background: var(--karte); border: 1px solid var(--line); border-radius: var(--r);
}
.expose__name { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 600; margin-bottom: .25rem; }
.expose__rundgang {
  display: block; margin-top: .5rem; padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text); font-weight: 600; text-decoration: none; transition: border-color .25s ease;
}
.expose__rundgang span { display: block; margin-top: .2rem; font-size: var(--t-xs); font-weight: 400; color: var(--text-mid); }
.expose__rundgang:hover { border-color: var(--rot); }
.expose__nr { font-size: var(--t-xs); color: var(--text-mid); margin-top: .25rem; }
.expose__gruppe + .expose__gruppe { margin-top: 1.75rem; }
.expose__gruppe h3 { font-size: var(--t-body); font-weight: 600; margin-bottom: .625rem; }
@media (min-width: 36rem) { .expose__gruppe .expose__energie { grid-template-columns: 15rem minmax(0, 1fr); } }
.hsdialog.hsdialog--anfrage { width: min(46rem, calc(100% - 2rem)); }
.anfrage__inhalt { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.anfrage__intro { color: var(--text-mid); line-height: 1.6; margin-bottom: 1.5rem; }
.anfrage__inhalt .form { border: 0; padding: 0; background: none; }
.anfrage__inhalt .field select[aria-invalid="true"] { border-color: var(--rot); }
.anfrage__inhalt .field__hinweis { margin-bottom: 1.25rem; }
.anfrage__inhalt .field select, .anfrage__inhalt .field input { min-height: 3.5rem; }
.expose__anfrage-mobil { margin-top: 1.25rem; }
@media (min-width: 62rem) { .expose__anfrage-mobil { display: none; } }
@media (min-width: 36rem) {
  .form__reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0 1rem; }
  .form__reihe--adresse { grid-template-columns: 2fr 1fr 1.5fr; }
}

.lightbox {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(14, 11, 10, .94); color: #fff;
}
.lightbox[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.lightbox::backdrop { background: transparent; }
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .875rem; min-width: 0; padding: 3.5rem 0 1.5rem; height: 100%; justify-content: center; }
.lightbox__fig img { max-width: 100%; max-height: calc(100dvh - 7rem); object-fit: contain; }
.lightbox__fig figcaption { font-size: var(--t-sm); color: rgba(255, 255, 255, .75); text-align: center; padding: 0 1rem; }
.lightbox__zu, .lightbox__pfeil {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); color: #fff;
}
.lightbox__zu { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
.lightbox__pfeil { margin: 0 clamp(.25rem, 1vw, 1.5rem); }
.lightbox__zu svg, .lightbox__pfeil svg { width: 1.25rem; height: 1.25rem; }
.lightbox__zu:hover, .lightbox__pfeil:hover { border-color: #fff; background: rgba(255, 255, 255, .14); }

.beitrag__vergleiche { margin: 0 0 clamp(2rem, 1.5rem + 1.5vw, 3rem); grid-template-columns: 1fr !important; }