/* ==========================================================================
   Brot & Butter Immobilien — Über uns / Team
   Warm editorial "bakery ledger" — Design-Tokens der Mainseite
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Farben */
  --mehl: #f5f0e6;
  --mehl-hell: #faf7f0;
  --roest: #1b1610;
  --glut: #2a2117;
  --butter: #eab13e;
  --butter-tief: #d99c1f;
  --kruste: #96652f;
  --kruste-hell: #b8854a;
  --stein: #a39e94;
  --stein-dunkel: #7a766d;
  --tinte: var(--roest);
  --papier: var(--mehl);
  --hairline: #1b161024;
  --hairline-invers: #f5f0e629;
  --tinte-sekundaer: #1b1610a3;
  --mehl-sekundaer: #f5f0e6ad;

  /* Schrift */
  --font-erzaehlen: 'Fraunces', georgia, serif;
  --font-erklaeren: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-beziffern: 'Fragment Mono', ui-monospace, monospace;

  /* Typo-Skala */
  --text-riesig: clamp(2.75rem, 1.2rem + 7.4vw, 7.5rem);
  --text-display: clamp(2.25rem, 1.2rem + 4.6vw, 5rem);
  --text-statement: clamp(1.65rem, 1.1rem + 2.4vw, 3.25rem);
  --text-lead: clamp(1.125rem, 1rem + .6vw, 1.45rem);
  --text-body: clamp(1rem, .95rem + .25vw, 1.125rem);
  --text-mono: .8125rem;
  --text-mono-klein: .6875rem;

  /* Raum — Inhalt nutzt die Fläche voller: schmalere Seitenränder auf
     Desktop (Mobil unverändert) + etwas mehr maximale Inhaltsbreite */
  --breite-max: 96rem;
  --rand-seite: clamp(1.25rem, 3vw, 3rem);
  --raum-sektion: clamp(6rem, 10vw, 11rem);
  --raum-block: clamp(2.5rem, 5vw, 5rem);

  /* Motion */
  --dauer-kurz: .22s;
  --dauer-mittel: .48s;
  --ease-zeichnen: cubic-bezier(.65, 0, .35, 1);
  --ease-stempel: cubic-bezier(.18, 1.4, .4, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mehl);
  color: var(--tinte);
  font-family: var(--font-erklaeren);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--butter); color: var(--roest); }

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, p, figure { margin: 0; }

/* ---------- Stimmen ---------- */
.stimme-erzaehlen {
  font-family: var(--font-erzaehlen);
  font-weight: 560;
  letter-spacing: -.015em;
  line-height: 1.04;
  font-variation-settings: 'SOFT' 40, 'WONK' 0;
}

.kursiv {
  font-style: italic;
  font-weight: 480;
  font-variation-settings: 'SOFT' 70, 'WONK' 0;
}

.stimme-beziffern {
  font-family: var(--font-beziffern);
  font-weight: 400;
  font-size: var(--text-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.akzent-kruste { color: var(--kruste); }
.akzent-butter { color: var(--butter); }

/* Kicker */
.kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-beziffern);
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-sekundaer);
}

.kicker::after {
  content: '';
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  opacity: .45;
}

[data-thema="dunkel"] .kicker { color: var(--mehl-sekundaer); }

/* ---------- Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--breite-max);
  padding-inline: var(--rand-seite);
  margin-inline: auto;
}

.sektion { padding-block: var(--raum-sektion); }

[data-thema="dunkel"] {
  background: var(--roest);
  color: var(--mehl);
}

.sektions-titel {
  font-size: var(--text-display);
  margin-top: 1.4rem;
  max-width: 22ch;
}

/* ---------- Buttons ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--butter);
  color: var(--roest);
  border: 1px solid #1b161040;
  padding: .95rem 1.6rem;
  font-family: var(--font-erklaeren);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background var(--dauer-kurz) ease,
    transform var(--dauer-kurz) var(--ease-stempel);
}

.cta:hover { background: var(--butter-tief); }
.cta:active { transform: scale(.985); }

.cta--gross { padding: 1.1rem 2rem; font-size: 1.1rem; }

.nav-cta { padding: .55rem 1.05rem; font-size: .875rem; }

/* Stempel */
.stempel {
  display: inline-block;
  font-family: var(--font-beziffern);
  font-size: var(--text-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--butter);
  color: var(--roest);
  padding: .35rem .7rem;
  transform: rotate(-3.5deg);
  box-shadow: 0 1px #1b161033;
}

/* ---------- Navbar ---------- */
.nav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 50;
  padding: 1.1rem var(--rand-seite);
  color: var(--tinte);
  transition:
    padding var(--dauer-mittel) ease,
    background var(--dauer-mittel) ease,
    box-shadow var(--dauer-mittel) ease,
    color var(--dauer-mittel) ease;
}

/* Innere Nav-Leiste: exakt gleiche Inhaltsbreite wie .shell (max-Breite
   minus Seitenränder, zentriert) — die linke Logo-Kante fluchtet dadurch
   auf jeder Viewport-Breite mit der linken Kante von Überschriften/Text. */
.nav-shell {
  width: 100%;
  max-width: calc(var(--breite-max) - 2 * var(--rand-seite));
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.nav.geschrumpft {
  padding-block: .6rem;
  background: color-mix(in srgb, var(--mehl) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--hairline);
}

html[data-nav="dunkel"] .nav { color: var(--mehl); }

html[data-nav="dunkel"] .nav.geschrumpft {
  background: color-mix(in srgb, var(--roest) 86%, transparent);
  box-shadow: 0 1px 0 var(--hairline-invers);
}

/* Wortmarke */
.marke {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: currentColor;
}

/* Original-SVG-Wordmark der Mainseite: erstes B #A6A6A6 (fill im SVG),
   Rest fill:currentColor — erbt Nav-Farbe (--tinte, auf dunklen Sektionen --mehl) */
.marke-logo {
  display: block;
  height: clamp(2.1rem, 3.6vw, 2.75rem);
  width: auto;
}

/* Nav rechts */
.nav-rechts {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2.5vw, 2rem);
}

/* Auf Desktop nimmt das Menü selbst nicht am Layout teil — die Links
   sitzen direkt im .nav-rechts-Flex wie zuvor. */
.nav-menue { display: contents; }

/* Burger nur auf Mobil sichtbar */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
}

.nav-burger-strich {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dauer-kurz) ease, opacity var(--dauer-kurz) ease;
}

.nav--offen .nav-burger-strich:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--offen .nav-burger-strich:nth-child(2) { opacity: 0; }
.nav--offen .nav-burger-strich:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-link {
  font-family: var(--font-beziffern);
  font-size: var(--text-mono-klein);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .75;
  transition: opacity var(--dauer-kurz) ease;
}

.nav-link:hover { opacity: 1; }

.nav-link--aktiv {
  opacity: 1;
  border-bottom: 1px solid currentColor;
  padding-bottom: .15em;
}

/* Mobil & Tablet: Links wandern in ein Burger-Aufklappmenü; Logo + CTA +
   Burger bleiben in der Leiste (wichtig für Ad-Traffic, der fast nur mobil
   ist). Breakpoint 1050px: erst darüber passt die volle 7-Link-Leiste plus
   CTA ohne Überlauf/Zeilenumbruch in den Viewport. */
@media (max-width: 1050px) {
  .nav-burger { display: inline-flex; }

  .nav-menue {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.15rem;
    padding: 1.35rem var(--rand-seite) 1.6rem;
    background: var(--mehl);
    color: var(--tinte);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 18px 32px #1b16102e;
  }

  .nav--offen .nav-menue { display: flex; }

  html[data-nav="dunkel"] .nav-menue {
    background: var(--roest);
    color: var(--mehl);
    border-bottom-color: var(--hairline-invers);
  }

  /* Offenes Menü: Leiste selbst bekommt festen Grund, damit das Panel
     nicht unter einer transparenten Nav "schwebt" */
  .nav.nav--offen {
    background: color-mix(in srgb, var(--mehl) 96%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  html[data-nav="dunkel"] .nav.nav--offen {
    background: color-mix(in srgb, var(--roest) 94%, transparent);
  }

  .nav-menue .nav-link {
    display: block;
    opacity: .9;
    font-size: .9rem;
  }

  .nav-menue .nav-link--aktiv { opacity: 1; }

  .nav-cta { padding: .5rem .85rem; font-size: .8rem; white-space: nowrap; }
}

/* Sehr schmale Viewports (<=420px, z.B. 360er-Androids, 320er iPhone SE):
   Logo + CTA + Burger kompakter, sonst läuft die Leiste über und der
   Burger wird abgeschnitten — Menü wäre auf Ad-Traffic nicht erreichbar. */
@media (max-width: 420px) {
  .marke-logo { height: 1.7rem; }
  .nav-cta { padding: .45rem .65rem; font-size: .72rem; }
  .nav-rechts { gap: .5rem; }
}

/* Extraschmal (<=350px, z.B. iPhone SE 1. Gen / 320er): noch eine Stufe
   kompakter, damit der Burger auch dort komplett im Viewport bleibt. */
@media (max-width: 350px) {
  .marke-logo { height: 1.45rem; }
  .nav-cta { padding: .4rem .5rem; font-size: .66rem; }
  .nav-rechts { gap: .4rem; }
}

/* ---------- Hero ---------- */
.sektion--hero {
  padding-top: calc(var(--raum-sektion) + 4.5rem);
}

.hero-spread {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-top: 1.6rem;
}

.hero-titel { font-size: var(--text-riesig); }

.hero-lauftext {
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  max-width: 34rem;
  display: grid;
  gap: 1.1rem;
  color: var(--tinte-sekundaer);
}

.hero-ziel {
  font-size: var(--text-lead);
  font-weight: 600;
  color: var(--tinte);
  border-left: 2px solid var(--butter);
  padding-left: 1rem;
}

/* Bilder */
.bild-rahmen {
  border: 1px solid var(--hairline);
  background: var(--mehl-hell);
  overflow: hidden;
}

[data-thema="dunkel"] .bild-rahmen {
  border-color: var(--hairline-invers);
  background: var(--glut);
}

.bild-rahmen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-zeichnen);
}

.bild-rahmen:hover img { transform: scale(1.04); }

.bild-legende {
  margin-top: .75rem;
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  color: var(--tinte-sekundaer);
}

[data-thema="dunkel"] .bild-legende { color: var(--mehl-sekundaer); }

.hero-bild .bild-rahmen { aspect-ratio: 4 / 5; }

@media (max-width: 900px) {
  .hero-spread { grid-template-columns: minmax(0, 1fr); }
  .hero-bild .bild-rahmen { aspect-ratio: 4 / 3; }
}

/* ---------- Office ---------- */
.office-text {
  margin-top: var(--raum-block);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}

.office-zitat {
  font-size: var(--text-statement);
  font-style: italic;
  font-weight: 480;
  font-variation-settings: 'SOFT' 70, 'WONK' 0;
  max-width: 24ch;
}

.zitat-quelle {
  display: block;
  margin-top: .6em;
  font-family: var(--font-beziffern);
  font-style: normal;
  font-size: var(--text-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mehl-sekundaer);
}

.office-text > p:last-child {
  color: var(--mehl-sekundaer);
  max-width: 32rem;
}

.office-bild { margin-top: var(--raum-block); }

.office-bild .bild-rahmen { aspect-ratio: 21 / 9; }

/* Kachel-Reihe */
.kachel-reihe {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.kachel {
  border: 1px solid var(--hairline-invers);
  background: var(--glut);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  transition:
    transform var(--dauer-kurz) ease,
    box-shadow var(--dauer-kurz) ease;
}

.kachel:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px #00000059;
}

.kachel-stern {
  color: var(--butter);
  font-size: 1.25rem;
  line-height: 1;
}

.kachel-titel {
  margin-top: 1rem;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
}

.kachel-text {
  margin-top: 1rem;
  color: var(--mehl-sekundaer);
  max-width: 30rem;
}

@media (max-width: 860px) {
  .office-text { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .office-bild .bild-rahmen { aspect-ratio: 16 / 10; }
  .kachel-reihe { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Team ---------- */
.team-grid {
  margin-top: var(--raum-block);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.team-karte {
  background: var(--mehl-hell);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  transition:
    transform var(--dauer-kurz) ease,
    box-shadow var(--dauer-kurz) ease;
}

.team-karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px #1b16101a;
}

.team-foto {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  background: var(--mehl);
}

.team-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%; /* oben verankern — Kopf bleibt bei 2:3-Fotos im Bild */
  transform-origin: 50% 15%; /* Hover-Zoom schneidet den Kopf nicht mehr an */
  transition: transform .8s var(--ease-zeichnen);
}

.team-karte:hover .team-foto img { transform: scale(1.05); }

.team-info { padding: 1.25rem; }

.team-nr {
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  color: var(--kruste);
}

.team-name {
  margin-top: .5rem;
  font-family: var(--font-erklaeren);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
}

.team-rolle {
  margin-top: .35rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--tinte-sekundaer);
}

@media (max-width: 960px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Karriere-CTA ---------- */
.cta-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta-shell .kicker::before {
  content: '';
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  opacity: .45;
}

.cta-titel {
  margin-top: 1.4rem;
  font-size: var(--text-display);
  max-width: 16ch;
}

.cta-aktion {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Karriere ---------- */
.karriere-titel {
  margin-top: 1.4rem;
  max-width: 18ch;
  text-wrap: balance;
  /* etwas kleiner als --text-riesig, damit "Immobilienmarkt" auch auf
     schmalen Screens (390px) nicht überläuft */
  font-size: clamp(2.25rem, .9rem + 6.2vw, 6.75rem);
}

.karriere-intro {
  margin-top: clamp(1.8rem, 3.5vw, 2.75rem);
  max-width: 46rem;
}

.karriere-intro p {
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--tinte-sekundaer);
  text-wrap: pretty;
}

.sektion--stellen {
  padding-top: 0;
}

.stellen-kopf { max-width: 46rem; }

.stellen-text {
  margin-top: 1.4rem;
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--tinte-sekundaer);
  text-wrap: pretty;
}

.stellen-grid {
  margin-top: var(--raum-block);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.stelle-karte {
  display: flex;
  flex-direction: column;
  background: var(--mehl-hell);
  border: 1px solid var(--hairline);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.stelle-titel {
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem);
  line-height: 1.12;
  text-wrap: balance;
}

.stelle-fokus { color: var(--kruste); }

.stelle-meta {
  margin: 1.4rem 0 0;
  padding: 1.1rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: grid;
  gap: .8rem;
}

.stelle-meta dt {
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  color: var(--tinte-sekundaer);
}

.stelle-meta dd {
  margin: .2rem 0 0;
  font-weight: 600;
}

.stelle-text {
  flex: 1;
  margin-top: 1.3rem;
  display: grid;
  gap: .9rem;
}

.stelle-text p {
  font-size: .975rem;
  line-height: 1.62;
  color: var(--tinte-sekundaer);
  text-wrap: pretty;
}

.stelle-cta {
  margin-top: 1.6rem;
  align-self: flex-start;
}

.karriere-ab-text {
  margin-top: 1.4rem;
  max-width: 42rem;
  color: var(--mehl-sekundaer);
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .stellen-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Footer ---------- */
.fuss {
  background: var(--roest);
  color: var(--mehl);
  border-top: 1px solid var(--hairline-invers);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}

.fuss-oben {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--hairline-invers);
}

.fuss-marke { display: inline-flex; flex-shrink: 0; }

.fuss-logo { max-height: 3.75rem; width: auto; }

.fuss-menue {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  justify-content: center;
}

.fuss-menue a {
  font-size: 1rem;
  opacity: .85;
  border-bottom: 1px solid transparent;
  transition: opacity var(--dauer-kurz) ease, border-color var(--dauer-kurz) ease;
}

.fuss-menue a:hover {
  opacity: 1;
  border-bottom-color: var(--butter);
}

.fuss-social {
  display: inline-flex;
  flex-shrink: 0;
  opacity: .85;
  transition: opacity var(--dauer-kurz) ease, color var(--dauer-kurz) ease;
}

.fuss-social:hover { opacity: 1; color: var(--butter); }

.fuss-social svg { width: 1.6rem; height: 1.6rem; }

.fuss-unten {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  color: var(--mehl-sekundaer);
}

.fuss-unten .stimme-beziffern { font-size: var(--text-mono-klein); letter-spacing: .14em; }

.fuss-firma { color: var(--mehl-sekundaer); }

.fuss-rechtliches {
  display: flex;
  gap: 2rem;
}

.fuss-rechtliches a {
  font-size: .9rem;
  opacity: .8;
  border-bottom: 1px solid transparent;
  transition: opacity var(--dauer-kurz) ease, border-color var(--dauer-kurz) ease;
}

.fuss-rechtliches a:hover {
  opacity: 1;
  border-bottom-color: var(--butter);
}

.powered {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  opacity: .8;
  transition: opacity var(--dauer-kurz) ease;
}

.powered:hover { opacity: 1; }

.powered img { max-height: 1.75rem; width: auto; }

@media (max-width: 700px) {
  .fuss-oben { flex-direction: column; text-align: center; }
  .fuss-unten { flex-direction: column; align-items: center; text-align: center; }
}

/* ---------- Sticky-CTA-Pille ---------- */
.klebe-cta {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 55;
  border-radius: 999px;
  background: var(--butter);
  color: var(--roest);
  font-family: var(--font-erklaeren);
  font-size: .95rem;
  font-weight: 600;
  padding: .8rem 1.3rem;
  box-shadow: 0 10px 30px #1b161038;
  opacity: 0;
  transform: translateY(12px) scale(.96);
  pointer-events: none;
  transition:
    opacity var(--dauer-mittel) ease,
    transform var(--dauer-mittel) var(--ease-stempel),
    background var(--dauer-kurz) ease;
}

.klebe-cta.sichtbar {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.klebe-cta:hover { background: var(--butter-tief); }

/* ---------- Papierkorn ---------- */
.papierkorn {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

@media (hover: none), (pointer: coarse) {
  .papierkorn { display: none; }
}

/* ---------- Scroll-Reveals ----------
   Versteckter Startzustand nur, wenn JS wirklich läuft:
   js/main.js setzt html.js unmittelbar vor dem Reveal-Setup.
   Fällt das Script aus (deaktiviert, blockiert, Ladefehler, Exception davor),
   bleibt der gesamte Inhalt sichtbar. */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s var(--ease-zeichnen),
    transform .7s var(--ease-zeichnen);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

/* Bild-Figuren kippen mit echter Perspektive ins Bild (3D-Reveal) */
html.js .reveal--bild {
  transform: perspective(1100px) rotateX(7deg) translateY(36px);
  transform-origin: center bottom;
}

html.js .reveal.sichtbar {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal,
  .reveal--bild,
  html.js .reveal,
  html.js .reveal--bild {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bild-rahmen img,
  .team-foto img,
  .team-karte,
  .kachel,
  .klebe-cta {
    transition: none;
  }

  .bild-rahmen:hover img,
  .team-karte:hover .team-foto img {
    transform: none;
  }

  .papierkorn { display: none; }
}

/* ==========================================================================
   Erweiterungen — Projekte & Partner
   (nur neue Layouts; Tokens/Basis siehe oben — identisch mit Über-uns)
   ========================================================================== */

/* ---------- Projekt-Übersicht ---------- */
.uebersicht-kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.uebersicht-kopf .kicker::before {
  content: '';
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  opacity: .45;
}

.uebersicht-titel {
  margin-top: 1.4rem;
  font-size: var(--text-display);
  max-width: 18ch;
}

.projekt-grid {
  width: 100%;
  margin-top: var(--raum-block);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  text-align: left;
}

.projekt-kachel {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--mehl-hell);
  aspect-ratio: 4 / 5;
}

.projekt-kachel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-zeichnen);
}

.projekt-kachel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #1b1610a6, transparent 45%);
}

.projekt-kachel:hover img { transform: scale(1.05); }

.projekt-schild {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  display: block;
  background: var(--mehl-hell);
  border: 1px solid var(--hairline);
  padding: .8rem 1.05rem;
  min-width: min(12rem, 70%);
  transition: transform var(--dauer-kurz) var(--ease-stempel);
}

.projekt-kachel:hover .projekt-schild { transform: translateY(-3px); }

.projekt-schild-ort {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
}

.projekt-schild-typ {
  display: block;
  margin-top: .3rem;
  font-family: var(--font-beziffern);
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-sekundaer);
}

@media (max-width: 960px) {
  .projekt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .projekt-grid { grid-template-columns: minmax(0, 1fr); }
  .projekt-kachel { aspect-ratio: 4 / 3; }
}

/* ---------- Standort-Detail: Hero ---------- */
.projekt-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(26rem, 78vh, 46rem);
  padding-top: calc(var(--raum-sektion) + 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  background-size: cover;
  background-position: center;
}

.projekt-hero .shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  text-align: center;
}

.projekt-hero-typ {
  font-family: var(--font-beziffern);
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mehl-sekundaer);
}

.projekt-hero-titel {
  font-size: var(--text-riesig);
  color: var(--mehl);
}

/* ---------- Standort-Detail: Eckdaten ---------- */
.eckdaten-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.kicker + .eckdaten-grid { margin-top: var(--raum-block); }

.eckdaten-karte {
  background: var(--mehl-hell);
  border: 1px solid var(--hairline);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  transition:
    transform var(--dauer-kurz) ease,
    box-shadow var(--dauer-kurz) ease;
}

.eckdaten-karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px #1b16101a;
}

.eckdaten-label {
  font-family: var(--font-beziffern);
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kruste);
}

.eckdaten-wert {
  margin: .55rem 0 0;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.45;
}

@media (max-width: 960px) {
  .eckdaten-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .eckdaten-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Standort-Detail: Renovierungsmaßnahmen ---------- */
.reno-liste {
  margin-top: var(--raum-block);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.reno-liste--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 46rem;
}

.reno-karte {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  border: 1px solid var(--hairline-invers);
  background: var(--glut);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition:
    transform var(--dauer-kurz) ease,
    box-shadow var(--dauer-kurz) ease;
}

.reno-karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px #00000059;
}

.reno-icon {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--butter);
  color: var(--roest);
  display: grid;
  place-items: center;
}

.reno-icon svg {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
}

.reno-text { color: var(--mehl-sekundaer); }

@media (max-width: 860px) {
  .reno-liste { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Standort-Detail: Eindrücke (Vergleich + Galerie) ---------- */
.eindruecke-grid {
  margin-top: var(--raum-block);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}

@media (max-width: 860px) {
  .eindruecke-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Standorte ohne echtes Vorher-Foto: nur die Galerie, zentriert statt
   auf volle Breite gezogen */
.eindruecke-grid--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 52rem;
}

/* Vorher/Nachher-Vergleich */
.vergleich {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--mehl-hell);
  aspect-ratio: 4 / 3;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}

.vergleich:focus-visible {
  outline: 2px solid var(--butter);
  outline-offset: 2px;
}

.vergleich img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.vergleich-vorher { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.vergleich-griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--mehl);
  box-shadow: 0 0 14px #1b161080;
}

.vergleich-knauf {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--mehl-hell);
  border: 1px solid var(--hairline);
  color: var(--roest);
  display: grid;
  place-items: center;
  font-family: var(--font-beziffern);
  font-size: 1rem;
}

.vergleich-marke {
  position: absolute;
  bottom: .75rem;
  z-index: 1;
  font-family: var(--font-beziffern);
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--mehl-hell);
  border: 1px solid var(--hairline);
  padding: .28rem .6rem;
}

.vergleich-marke--vorher { left: .75rem; }
.vergleich-marke--nachher { right: .75rem; }

/* Galerie-Slider */
.galerie {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--mehl-hell);
  aspect-ratio: 4 / 3;
}

.galerie-spur {
  display: flex;
  height: 100%;
  transition: transform .55s var(--ease-zeichnen);
}

.galerie-spur img {
  flex: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galerie-knopf {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--mehl-hell);
  color: var(--roest);
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dauer-kurz) ease;
}

.galerie-knopf:hover { background: var(--butter); }

.galerie-knopf--zurueck { left: .75rem; }
.galerie-knopf--vor { right: .75rem; }

.galerie-zaehler {
  position: absolute;
  bottom: .75rem;
  right: .75rem;
  background: var(--mehl-hell);
  border: 1px solid var(--hairline);
  padding: .28rem .6rem;
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
}

/* Zurück-Link */
.zurueck {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-beziffern);
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
  border-bottom: 1px solid transparent;
  transition: opacity var(--dauer-kurz) ease, border-color var(--dauer-kurz) ease;
}

.zurueck:hover {
  opacity: 1;
  border-bottom-color: var(--butter);
}

/* ---------- Partner ---------- */
.hero-aktion { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* Typo-Feinschliff: Hero-Lauftext als Lead — klarere Hierarchie zur
   Headline, keine Ein-Wort-Schlusszeilen (text-wrap: pretty) */
.partner-hero .hero-lauftext { max-width: 32rem; }

.partner-hero .hero-lauftext p {
  font-size: var(--text-lead);
  line-height: 1.55;
  text-wrap: pretty;
}

.band {
  position: relative;
  background-size: cover;
  background-position: center;
  padding-block: clamp(7rem, 14vw, 12rem);
}

.band .shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.band-titel {
  font-size: var(--text-display);
  max-width: 20ch;
}

.band-zeile { display: block; text-wrap: balance; }

.band-sub {
  margin-top: 1.6rem;
  color: var(--butter);
  font-size: var(--text-mono);
  letter-spacing: .18em;
}

/* Mobil: Band-Zeilen so skalieren, dass jede Zeile ("Schnelle
   Entscheidungen.") ohne Ein-Wort-Umbruch auf eine Zeile passt */
@media (max-width: 560px) {
  .band-titel { font-size: clamp(1.55rem, .55rem + 4.6vw, 2.2rem); }
  .band-sub { margin-top: 1.25rem; }
}

/* Gründe-Sektionen: Kopf zentriert (wie Band & Karriere-CTA — cleaner),
   Titel ausbalanciert statt Waisen-"vertrauen" in der letzten Zeile */
.gruende-kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gruende-kopf .kicker::before {
  content: '';
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  opacity: .45;
}

.gruende-titel {
  font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  max-width: 26ch;
  text-wrap: balance;
}

.gruende-grid {
  margin-top: var(--raum-block);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.grund-karte {
  background: var(--mehl-hell);
  border: 1px solid var(--hairline);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition:
    transform var(--dauer-kurz) ease,
    box-shadow var(--dauer-kurz) ease;
}

.grund-karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px #1b16101a;
}

.grund-nr {
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  color: var(--kruste);
}

.grund-titel {
  margin-top: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
  text-wrap: balance;
}

.grund-text {
  margin-top: .75rem;
  color: var(--tinte-sekundaer);
  line-height: 1.65;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .gruende-grid { grid-template-columns: minmax(0, 1fr); }
}

.zwischen-cta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}

.zwischen-frage {
  font-size: var(--text-statement);
  line-height: 1.2;
  max-width: 26ch;
  text-wrap: balance;
}

/* Reduced Motion für neue Komponenten */
@media (prefers-reduced-motion: reduce) {
  .projekt-kachel img,
  .projekt-schild,
  .eckdaten-karte,
  .reno-karte,
  .grund-karte,
  .galerie-spur,
  .galerie-knopf,
  .zurueck {
    transition: none;
  }

  .projekt-kachel:hover img { transform: none; }
}

/* ==========================================================================
   Startseite — Brot-&-Butter-Story in 13 Kapiteln
   (Scrollytelling, Line-Art-Zeichnungen, Zähler, Scroll-Progress-Effekte)
   ========================================================================== */

/* ---------- Gemeinsames ---------- */
.sektions-lauftext {
  margin-top: 1.4rem;
  max-width: 42rem;
  color: var(--tinte-sekundaer);
}

.sektions-lauftext--invers { color: var(--mehl-sekundaer); }

/* Linien-Zeichnungen: pathLength="1"-Striche zeichnen sich beim Reveal.
   Ohne JS (kein html.js) bleibt alles voll sichtbar. */
html.js .reveal .zeichnen {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--ease-zeichnen);
  transition-delay: var(--zd, 0s);
}

html.js .reveal.sichtbar .zeichnen { stroke-dashoffset: 0; }

/* ---------- 01 · Hero (Typo/CTAs — Bühne siehe "Hero Konzept 10" unten) ---------- */
.start-hero-titel { font-size: var(--text-riesig); }

.start-hero-zeile { display: block; }

.start-hero-zeile2 {
  display: block;
  margin-top: .35em;
  font-size: .42em;
  line-height: 1.15;
}

.start-hero-claim {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 34rem;
  font-size: var(--text-lead);
  color: var(--tinte-sekundaer);
}

.start-hero-ctas {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
  align-items: center;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
}

.cta-geist {
  font-family: var(--font-beziffern);
  font-size: var(--text-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: .2em;
  opacity: .8;
  transition: opacity var(--dauer-kurz) ease;
}

.cta-geist:hover { opacity: 1; }

/* Parallax-Bühne: bewegt SVG + Callouts gemeinsam (keine Linien-Drift) */
.laib-buehne { position: relative; }

.laib-svg { width: 100%; height: auto; }

/* Brot-Details (Ritzlinien, Poren) — blenden beim Morph zum Haus aus */
.laib-ritze {
  fill: none;
  stroke: #96652f;
  stroke-width: 2;
  stroke-linecap: round;
}

.laib-poren circle {
  fill: none;
  stroke: #96652f59;
  stroke-width: 1.5;
}

html.js .reveal .laib-poren circle {
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: 1.2s;
}

html.js .reveal.sichtbar .laib-poren circle { opacity: 1; }

/* Leader-Lines zu den Callouts (Kapitel 02) */
.callout-linie {
  fill: none;
  stroke: #96652f;
  stroke-width: 1.5;
  opacity: .7;
}

/* ---------- 02 · Der Einkauf ---------- */
/* Titel + Text stehen ZUSAMMEN in der linken Spalte (kein Freiraum
   dazwischen); beide Spalten sind vertikal mittig ausbalanciert */
.einkauf-spread {
  margin-top: clamp(1.4rem, 3vw, 2.75rem);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.einkauf-text { display: grid; gap: 1.25rem; }

.einkauf-text > .sektions-titel { margin-top: 0; }

.einkauf-text > p:first-of-type {
  color: var(--tinte-sekundaer);
  max-width: 34rem;
}

.these {
  font-size: var(--text-statement);
  font-style: italic;
  border-left: 3px solid var(--butter);
  padding-left: 1.1rem;
  max-width: 22ch;
}

.einkauf-laib { margin: 0; }

/* Nummerierte Marker AUF dem Laib + Callout-Chips, die per Leader-Line
   auf die Krustenpunkte zeigen (absolut über der Bühne verankert) */
.laib-marker circle {
  fill: var(--mehl-hell);
  stroke: var(--kruste);
  stroke-width: 1.5;
}

.laib-marker text {
  font-family: var(--font-beziffern);
  font-size: 12px;
  fill: var(--roest);
  text-anchor: middle;
  dominant-baseline: central;
}

html.js .reveal .laib-marker {
  opacity: 0;
  transform: scale(.5);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .45s ease, transform .45s var(--ease-stempel);
  transition-delay: calc(1s + var(--i) * .16s);
}

html.js .reveal.sichtbar .laib-marker { opacity: 1; transform: scale(1); }

.laib-callouts {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}

.laib-callout {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-beziffern);
  font-size: var(--text-mono-klein);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-sekundaer);
  border: 1px solid var(--hairline);
  background: var(--mehl-hell);
  padding: .45rem .7rem;
  box-shadow: 0 6px 18px #1b16100f;
}

@media (min-width: 701px) {
  .laib-callouts {
    position: absolute;
    inset: 0;
    margin: 0;
    display: block;
    pointer-events: none;
  }

  .laib-callout {
    position: absolute;
    white-space: nowrap;
    pointer-events: auto;
  }

  .laib-callout--bl { transform: translate(0, -100%); }
  .laib-callout--br { transform: translate(-100%, -100%); }
  .laib-callout--tr { transform: translate(-100%, 0); }

  html.js .reveal .laib-callout {
    opacity: 0;
    transition: opacity .55s ease;
    transition-delay: calc(1.55s + var(--i, 0) * .18s);
  }

  html.js .reveal.sichtbar .laib-callout { opacity: 1; }
}

@media (max-width: 700px) {
  .laib-callout { position: static; transform: none; white-space: normal; }
  .callout-linie { display: none; }
}

.callout-marke {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--kruste);
  background: var(--mehl-hell);
  color: var(--roest);
  display: grid;
  place-items: center;
  font-size: .75rem;
}

.einkauf-daten {
  margin-top: var(--raum-block);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* Karte: stilisierter Kartenausschnitt Rheinschiene/Südbaden — Landflächen
   mit sanftem Verlauf, Rhein, A5, Schwarzwald-Kontur, Ortsnamen direkt im
   SVG (Halo via paint-order) */
.karte-figur { margin: 0; }

.karte-rahmen {
  border: 1px solid var(--hairline);
  background: var(--mehl-hell);
  padding: clamp(1rem, 2vw, 1.5rem);
}

.karte-svg {
  width: 100%;
  height: auto;
  max-width: 27rem;
  display: block;
  margin-inline: auto;
}

.karte-land { fill: url(#karteLand); }

.karte-nachbar {
  fill: #ece6d8;
  stroke: none;
}

.karte-wald { fill: url(#karteWald); }

.karte-kontur {
  fill: none;
  stroke: #96652f26;
  stroke-width: 1.25;
}

.karte-gitter line {
  stroke: #1b16100d;
  stroke-width: 1;
}

.karte-fluss-band {
  fill: none;
  stroke: #c6d4d8;
  stroke-width: 9;
  stroke-linecap: round;
}

.karte-fluss {
  fill: none;
  stroke: #93aeb6;
  stroke-width: 3;
  stroke-linecap: round;
}

.karte-wasser-label {
  font-family: var(--font-beziffern);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  fill: #7d99a3;
}

.karte-autobahn-band {
  fill: none;
  stroke: #dfa94d;
  stroke-width: 5;
  stroke-linecap: round;
}

.karte-autobahn-mitte {
  fill: none;
  stroke: var(--mehl-hell);
  stroke-width: 1;
  stroke-dasharray: 9 7;
}

.karte-schild rect {
  fill: var(--kruste);
  stroke: var(--mehl-hell);
  stroke-width: 1;
}

.karte-schild text {
  font-family: var(--font-beziffern);
  font-size: 11px;
  fill: var(--mehl-hell);
  text-anchor: middle;
}

.karte-strasse {
  fill: none;
  stroke: #b8854a;
  stroke-width: 1.5;
  opacity: .5;
}

.karte-stadt circle { fill: var(--stein-dunkel); }

.karte-stadt text {
  font-family: var(--font-beziffern);
  font-size: 11px;
  letter-spacing: .06em;
  fill: var(--stein-dunkel);
}

.karte-regionlabel {
  font-family: var(--font-beziffern);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  fill: #96652f73;
}

.karte-regionlabel--wald { letter-spacing: .42em; }

.karte-kartusche text {
  font-family: var(--font-beziffern);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  fill: var(--kruste);
}

.karte-massstab line {
  stroke: var(--stein-dunkel);
  stroke-width: 1.25;
}

.karte-massstab text {
  font-family: var(--font-beziffern);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: var(--stein-dunkel);
}

.karte-kompass path {
  fill: none;
  stroke: var(--stein-dunkel);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.karte-kompass text {
  font-family: var(--font-beziffern);
  font-size: 12px;
  fill: var(--stein-dunkel);
}

.karte-rand {
  fill: none;
  stroke: #1b161033;
  stroke-width: 1.5;
}

/* Map-Pins (Tropfenform); HQ-Pin in Kruste mit quadratischem Loch */
.karte-pin {
  fill: var(--butter);
  stroke: var(--roest);
  stroke-width: 1.5;
}

.karte-pin-loch {
  fill: var(--mehl-hell);
  stroke: var(--roest);
  stroke-width: 1;
}

.karte-punkt--hq .karte-pin { fill: var(--kruste); }

/* Ortsnamen am Pin — mit hellem Halo, damit sie auf jeder Fläche lesbar
   bleiben (wie Beschriftungen auf einer echten Karte) */
.karte-name {
  font-family: var(--font-beziffern);
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  fill: var(--roest);
  paint-order: stroke;
  stroke: var(--mehl-hell);
  stroke-width: 3.5;
  stroke-linejoin: round;
}

.karte-name--sub {
  font-size: 11px;
  letter-spacing: .1em;
  fill: var(--kruste);
}

.karte-punkt--hq .karte-name { font-weight: 700; }

/* Hover über die separate scale-Property — kollidiert nicht mit dem
   Reveal-Transform */
.karte-punkt {
  scale: 1;
  transition: scale .2s ease;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.karte-punkt:hover { scale: 1.12; }

/* Pins droppen beim Reveal nacheinander ein */
html.js .reveal .karte-punkt {
  opacity: 0;
  transform: translateY(-16px) scale(.4);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition:
    opacity .45s ease,
    transform .5s var(--ease-stempel),
    scale .2s ease;
  transition-delay: calc(.5s + var(--i) * .12s), calc(.5s + var(--i) * .12s), 0s;
}

html.js .reveal.sichtbar .karte-punkt {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Balken-Vergleich: schraffierte Differenz statt leerer Fläche */
.balken { margin: 0; display: grid; gap: 1rem; }

.balken-zeile { display: grid; gap: .4rem; }

.balken-label {
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  color: var(--tinte-sekundaer);
}

.balken-spur {
  position: relative;
  height: 2.75rem;
  border: 1px solid var(--hairline);
  background: var(--mehl-hell);
  overflow: hidden;
}

.balken-fuellung {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 100%);
}

.balken-fuellung--markt { background: var(--kruste); }
.balken-fuellung--einkauf { background: var(--butter); }

html.js .reveal .balken-fuellung,
html.js .balken.reveal .balken-fuellung {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ease-zeichnen);
  transition-delay: var(--bd, 0s);
}

html.js .reveal.sichtbar .balken-fuellung,
html.js .balken.reveal.sichtbar .balken-fuellung { transform: scaleX(1); }

.balken-diff {
  position: absolute;
  inset: 0 0 0 var(--w, 72%);
  left: 72%;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    45deg,
    transparent 0 5px,
    #96652f40 5px 7px
  );
  border-left: 2px dashed var(--kruste);
}

.balken-diff .stimme-beziffern {
  font-size: var(--text-mono-klein);
  letter-spacing: .1em;
  color: var(--kruste);
  background: var(--mehl-hell);
  padding: .2rem .45rem;
  white-space: nowrap;
}

html.js .balken.reveal .balken-diff {
  opacity: 0;
  transition: opacity .6s ease 1.35s;
}

html.js .balken.reveal.sichtbar .balken-diff { opacity: 1; }

.balken-caption {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--tinte-sekundaer);
  max-width: 34rem;
}

@media (max-width: 900px) {
  .einkauf-spread,
  .einkauf-daten { grid-template-columns: minmax(0, 1fr); }
}

/* Unterhalb ~1366px ist die schraffierte Diff-Zone schmaler als das
   nowrap-Label ("Dein Einkaufsvorteil", ~172px) — zentriert würde es von
   overflow:hidden der Spur gekappt. Deshalb: als Chip rechtsbündig in der
   Spur verankern; er darf über die Butter-Füllung ragen, bleibt aber immer
   komplett innerhalb der Spur und damit ungeschnitten. */
@media (max-width: 1366px) {
  .balken-diff .stimme-beziffern {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
  }
}

@media (max-width: 520px) {
  .balken-diff .stimme-beziffern {
    font-size: .62rem;
    right: .4rem;
  }
}

/* ---------- 03 · Die Aufteilung (Scrollytelling) ----------
   Hell-goldener Laib → 10 Scheiben → die Scheiben fliegen in ein Haus mit
   10 benannten Wohneinheiten. Am Ende ist KEIN Brot mehr sichtbar.
   Kompakte Typo oben, damit die Grafik die Bühne dominiert. */
.schnitt-lauf { position: relative; }

html.js .schnitt-lauf { height: 300vh; }

.schnitt-buehne {
  display: flex;
  align-items: center;
  padding-block: clamp(4.5rem, 9vh, 6.5rem) clamp(1.5rem, 3vh, 2.5rem);
}

html.js .schnitt-buehne {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
}

/* Kompakter Sektionstitel — die Verwandlung ist hier der Held */
.schnitt-buehne .sektions-titel {
  margin-top: 1rem;
  font-size: clamp(1.9rem, 1.15rem + 2.7vw, 3.4rem);
  max-width: none;
}

.schnitt-text {
  margin-top: .9rem;
  max-width: 56rem;
  color: var(--mehl-sekundaer);
}

.schnitt-figur { margin: clamp(1rem, 2.5vh, 2rem) 0 0; }

.schnitt-svg {
  width: 100%;
  height: auto;
  max-height: 62vh;
  display: block;
  margin-inline: auto;
}

.schnitt-mess line { stroke: var(--mehl-sekundaer); stroke-width: 1.5; }

.schnitt-mess text {
  font-family: var(--font-beziffern);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  fill: var(--mehl-sekundaer);
}

.schnitt-haus { opacity: 0; }

.haus-schale line,
.haus-schale rect,
.haus-schale path {
  fill: none;
  stroke: var(--mehl);
  stroke-width: 2;
}

/* Dach: gleiche Linienführung wie die Haus-Schale, saubere Ecken */
.haus-dach { stroke-linejoin: round; }

/* Die 10 Wohneinheiten: goldene Blöcke mit WE-Label — Ziel der Scheiben */
.haus-einheit { opacity: 0; }

.haus-einheit rect { fill: var(--butter); }

.haus-einheit text {
  font-family: var(--font-beziffern);
  font-size: 17px;
  letter-spacing: .08em;
  fill: var(--roest);
  text-anchor: middle;
}

/* Brot in weißlich-goldenem Ton (Verlauf) mit Kruste als Kontur */
.scheibe-flaeche {
  fill: url(#brotGold);
  stroke: var(--kruste-hell);
  stroke-width: 2.5;
}

/* Krumen-Rand: Innenpfad in Krustenton gibt dem Laib Tiefe */
.scheibe-krume {
  fill: none;
  stroke: #b8854a73;
  stroke-width: 2.5;
}

/* Schnittkanten entstehen ERST mit dem Schnitt (JS setzt opacity) */
.scheibe-kante { stroke: #96652f73; stroke-width: 1.5; opacity: 0; }

html:not(.js) .scheibe-kante { opacity: 1; }

.scheibe-pore { fill: none; stroke: #96652f40; stroke-width: 1.5; }

/* Krümel, die beim Schneiden fallen */
.schnitt-kruemel circle { fill: #f0e3c2d9; }

.schnitt-we {
  font-family: var(--font-beziffern);
  font-size: 14px;
  letter-spacing: .08em;
  fill: var(--butter);
  text-anchor: middle;
  opacity: 0;
}

/* Ohne JS: geschnittener Laib mit Labels sichtbar, Haus bleibt weg —
   ein stimmiges Standbild statt zweier überlagerter Motive */
html:not(.js) .schnitt-we { opacity: 1; }
html:not(.js) .schnitt-haus { opacity: 0; }

.schnitt-payoff {
  list-style: none;
  margin: clamp(.9rem, 2vh, 1.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}

.schnitt-payoff li {
  font-family: var(--font-erzaehlen);
  font-size: clamp(1.05rem, .95rem + .9vw, 1.55rem);
  font-style: italic;
  line-height: 1.3;
}

.schnitt-payoff li:last-child { color: var(--butter); }

html.js .schnitt-payoff li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-zeichnen), transform .6s var(--ease-zeichnen);
}

html.js .schnitt-payoff li.sichtbar { opacity: 1; transform: none; }

/* ---------- 04 · Die Veredelung ---------- */
.butter-spread {
  margin-top: var(--raum-block);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.butter-figur { margin: 0; }

.butter-wisch {
  --wisch: 100%;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--mehl-hell);
}

/* Mit JS startet der Wisch bei 0 % — erst das VORHER klar zeigen.
   Ohne JS bleibt der No-JS-Fallback (100 % = Nachher sichtbar). */
html.js .butter-wisch { --wisch: 0%; }

.butter-wisch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.butter-nachher { clip-path: inset(0 calc(100% - var(--wisch)) 0 0); }

.butter-marke {
  position: absolute;
  bottom: .75rem;
  z-index: 1;
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  background: var(--mehl-hell);
  border: 1px solid var(--hairline);
  padding: .28rem .6rem;
}

.butter-marke--vorher { right: .75rem; }
.butter-marke--nachher { left: .75rem; }

/* Labels folgen dem Wisch: Nachher erst ab ~35 %, Vorher weicht am Ende */
html.js .butter-marke { transition: opacity .4s ease; }
html.js .butter-marke--nachher { opacity: 0; }
html.js .butter-wisch.zeigt-nachher .butter-marke--nachher { opacity: 1; }
html.js .butter-wisch.fertig .butter-marke--vorher { opacity: 0; }

.butter-messer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--wisch);
  width: 2px;
  margin-left: -1px;
  background: var(--mehl);
  box-shadow: 0 0 14px #1b161080;
}

/* Butter-Glanz: weicher gelber Streifen an der Wischkante */
.butter-messer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30px;
  width: 30px;
  background: linear-gradient(to right, transparent, #eab13e4d);
  pointer-events: none;
}

.butter-messer svg {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%) rotate(8deg);
  width: 1.75rem;
  height: 4rem;
  filter: drop-shadow(0 4px 8px #1b161052);
}

html:not(.js) .butter-messer { display: none; }

.massnahmen-titel {
  font-size: var(--text-mono);
  letter-spacing: .14em;
  color: var(--kruste);
}

.massnahmen-liste {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
}

.massnahme {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-block: .75rem;
  border-bottom: 1px solid var(--hairline);
  font-size: .975rem;
}

.massnahme:first-child { border-top: 1px solid var(--hairline); }

.massnahme-haken {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--butter);
  color: var(--roest);
  display: grid;
  place-items: center;
}

.massnahme-haken svg { width: .9rem; height: .9rem; display: block; }

@media (max-width: 900px) {
  .butter-spread { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 05 · Die Übergabe ---------- */
.scheibe-spread {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.scheibe-spread .sektions-titel { margin-top: 0; }

.scheibe-abschluss {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  font-size: var(--text-statement);
  line-height: 1.25;
}

.scheibe-abschluss .abschluss-zeile {
  display: block;
}

.scheibe-abschluss .abschluss-zeile:last-child {
  font-style: italic;
  color: var(--kruste);
}

.produkt-karte {
  background: var(--mehl-hell);
  border: 1px solid var(--hairline);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 26rem;
  justify-self: end;
  width: 100%;
  box-shadow: 0 24px 60px #1b161014;
}

.produkt-label {
  display: inline-block;
  font-size: var(--text-mono);
  letter-spacing: .14em;
  background: var(--butter);
  padding: .35rem .7rem;
  transform: rotate(-2.5deg);
}

.produkt-svg {
  width: min(15rem, 70%);
  height: auto;
  margin: 1.5rem auto 0;
  display: block;
}

.produkt-poren circle { fill: none; stroke: #96652f66; stroke-width: 1.5; }

/* Realistischer 2-Zimmer-Grundriss: Wände solide, Möblierung fein */
.plan-wand {
  fill: none;
  stroke: var(--kruste);
  stroke-width: 2.25;
  stroke-linecap: square;
}

.plan-wand--aussen { stroke-width: 3.25; }

.plan-tuer {
  fill: none;
  stroke: var(--kruste-hell);
  stroke-width: 1.25;
}

/* Fenster: heller "Schnitt" in der Wand + dünne Fensterlinie */
.plan-fenster-gap { stroke: #faf7f0; stroke-width: 6; }

.plan-fenster { stroke: var(--kruste-hell); stroke-width: 1.5; }

.plan-moebel rect,
.plan-moebel circle {
  fill: none;
  stroke: #96652fb3;
  stroke-width: 1.25;
}

.plan-label {
  font-family: var(--font-beziffern);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  fill: var(--tinte-sekundaer);
}

.plan-titel {
  font-family: var(--font-beziffern);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: var(--tinte-sekundaer);
}

/* Zeichnen-Choreografie: erst Wände (stroke-dash), dann Fenster,
   Möblierung + Labels als Fade — wie ein Architekt, der live zeichnet */
html.js .reveal .plan-fenster-gruppe,
html.js .reveal .plan-moebel,
html.js .reveal .plan-labels,
html.js .reveal .plan-titel {
  opacity: 0;
  transition: opacity .6s ease;
}

html.js .reveal .plan-fenster-gruppe { transition-delay: 1.05s; }
html.js .reveal .plan-moebel { transition-delay: 1.9s; }
html.js .reveal .plan-labels { transition-delay: 2.1s; }
html.js .reveal .plan-titel { transition-delay: 2.25s; }

html.js .reveal.sichtbar .plan-fenster-gruppe,
html.js .reveal.sichtbar .plan-moebel,
html.js .reveal.sichtbar .plan-labels,
html.js .reveal.sichtbar .plan-titel { opacity: 1; }

/* 3D-Tilt der Produktkarte (JS setzt transform; schnelle Transition,
   damit der Reveal-Übergang nicht nachzieht) */
html.js .produkt-karte.tilt-aktiv {
  transition: transform .18s ease, opacity .7s var(--ease-zeichnen);
  will-change: transform;
}

.produkt-daten {
  margin: 1.75rem 0 0;
  display: grid;
  gap: 0;
}

.produkt-daten > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: .6rem;
  border-top: 1px solid var(--hairline);
}

.produkt-daten dt {
  font-family: var(--font-beziffern);
  font-size: var(--text-mono-klein);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kruste);
}

.produkt-daten dd { margin: 0; font-weight: 600; text-align: right; }

@media (max-width: 900px) {
  .scheibe-spread { grid-template-columns: minmax(0, 1fr); }
  .produkt-karte { justify-self: start; }
}

/* ---------- 06 · Wohnungstypen ---------- */
.typen-grid {
  margin-top: var(--raum-block);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.typ-karte {
  display: flex;
  flex-direction: column;
  background: var(--mehl-hell);
  border: 1px solid var(--hairline);
  transition: transform var(--dauer-kurz) ease, box-shadow var(--dauer-kurz) ease;
}

.typ-karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px #1b16101a;
}

.typ-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
}

.typ-kategorie {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
}

.typ-stempel { font-size: .625rem; padding: .28rem .55rem; }

html.js .reveal .typ-stempel {
  opacity: 0;
  transform: rotate(4deg) scale(1.4);
  transition: opacity .4s ease .5s, transform .4s var(--ease-stempel) .5s;
}

html.js .reveal.sichtbar .typ-stempel {
  opacity: 1;
  transform: rotate(-3.5deg) scale(1);
}

.typ-bild {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}

.typ-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-zeichnen);
}

.typ-karte:hover .typ-bild img { transform: scale(1.04); }

/* Freisteller-Variante (Option 3): transparentes PNG-Cutout — das ganze
   Gebäude bleibt sichtbar (contain statt Cover-Crop), dahinter ein warmer
   Mehl-Fond mit sanftem Boden-Schatten, damit der Freisteller wie ein
   bewusster Objekt-Shot wirkt. Gleiche Bildhöhe/Rahmen wie die
   Cover-Karten (aspect-ratio + border-bottom erbt .typ-bild). */
.typ-bild--freisteller {
  background:
    radial-gradient(90% 55% at 50% 96%, #96652f1f, #96652f00 70%),
    linear-gradient(180deg, var(--mehl-hell), var(--mehl));
}

.typ-bild--freisteller img {
  object-fit: contain;
  padding: 1.15rem 1.1rem .95rem;
}

.typ-kennzahlen {
  margin: 1.1rem 1.25rem 0;
  display: grid;
}

.typ-kennzahlen > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: .45rem;
  border-top: 1px solid var(--hairline);
  font-size: .9rem;
}

.typ-kennzahlen dt { color: var(--tinte-sekundaer); }

.typ-kennzahlen dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.typ-merkmale {
  list-style: none;
  margin: 1rem 1.25rem 1.25rem;
  padding: 0;
  display: grid;
  gap: .45rem;
}

.typ-merkmal {
  display: flex;
  gap: .6rem;
  font-size: .875rem;
  color: var(--tinte-sekundaer);
  line-height: 1.45;
}

.typ-merkmal::before {
  content: '+';
  color: var(--kruste);
  font-weight: 700;
  flex: none;
}

.typ-cta {
  /* margin-top: auto richtet die CTAs aller drei Karten bündig an der
     Kartenunterkante aus (.typ-karte ist flex-column) */
  margin: 1.5rem 1.25rem 1.25rem;
  margin-top: auto;
  justify-content: center;
}

.disclaimer {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 52rem;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--tinte-sekundaer);
  border-top: 1px solid var(--hairline);
  padding-top: 1.25rem;
}

@media (max-width: 1060px) {
  .typen-grid { grid-template-columns: minmax(0, 1fr); max-width: 30rem; }
}

/* Objektfoto-Platzhalter (dezent, on-brand) */
.objekt-platzhalter {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, #96652f14, transparent 60%),
    var(--mehl);
}

.objekt-platzhalter svg {
  width: 55%;
  height: auto;
  opacity: .8;
}

.objekt-platzhalter .stimme-beziffern {
  position: absolute;
  right: .75rem;
  bottom: .6rem;
  font-size: .625rem;
  letter-spacing: .16em;
  color: var(--tinte-sekundaer);
}

/* ---------- 07 · Warum direkt vom Entwickler ----------
   Headline zentriert mit gesetztem Umbruch ("Kein" beginnt Zeile 2) */
#warum .kicker { justify-content: center; }

#warum .kicker::before {
  content: '';
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  opacity: .45;
}

#warum .sektions-titel {
  text-align: center;
  margin-inline: auto;
  max-width: none;
}

/* ---------- 08 · Voraussetzungen (dunkel) ----------
   Die drei Boxen sind der Kern der Sektion ("passt du zu uns?") —
   goldene Kante, Icon-Stempel, Tiefe und deutlicher Hover, damit sie
   beim Scrollen nicht untergehen. */
.kriterien-grid {
  margin-top: var(--raum-block);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.kriterium {
  position: relative;
  border: 1px solid #eab13e3d;
  border-top: 3px solid var(--butter);
  background: linear-gradient(168deg, #382b1a, var(--glut) 62%);
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 24px 60px #00000052;
  transition:
    transform .3s var(--ease-stempel),
    box-shadow .3s ease,
    border-color .3s ease;
}

.kriterium:hover {
  transform: translateY(-8px);
  border-color: #eab13e8f;
  box-shadow:
    0 32px 70px #00000073,
    0 10px 42px #eab13e26;
}

.kriterium-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  background: var(--butter);
  color: var(--roest);
  box-shadow: 0 8px 22px #eab13e38;
}

.kriterium-icon svg { width: 1.6rem; height: 1.6rem; }

/* Icon stempelt sich beim Reveal ein */
html.js .reveal .kriterium-icon {
  opacity: 0;
  transform: rotate(4deg) scale(1.35);
  transition: opacity .4s ease .3s, transform .45s var(--ease-stempel) .3s;
}

html.js .reveal.sichtbar .kriterium-icon {
  opacity: 1;
  transform: none;
}

.kriterium-titel {
  margin-top: 1.35rem;
  font-size: clamp(1.35rem, 1.15rem + .5vw, 1.6rem);
  font-weight: 600;
  line-height: 1.25;
}

.kriterium-text { margin-top: .75rem; color: var(--mehl-sekundaer); }

@media (max-width: 900px) {
  .kriterien-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 09 · Dein Weg ---------- */
.weg-spread {
  margin-top: var(--raum-block);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.weg {
  position: relative;
  padding-left: clamp(2.75rem, 6vw, 4rem);
  max-width: 46rem;
}

/* Fortschritts-Brot rechts: füllt sich Segment für Segment mit dem
   Timeline-Fortschritt (sticky begleitet die Schritte) */
.weg-figur { margin: 0; }

.weg-sticky { position: sticky; top: 22vh; }

.weg-brot { width: 100%; height: auto; display: block; }

.weg-brot-umriss {
  fill: none;
  stroke: var(--kruste);
  stroke-width: 3;
  stroke-linecap: round;
}

.weg-segment {
  fill: var(--butter);
  opacity: 0;
  transform: translateY(16px);
  transform-box: fill-box;
  transition: opacity .5s ease, transform .55s var(--ease-zeichnen);
}

.weg-segment:nth-child(even) { fill: var(--butter-tief); }

.weg-segment.gefuellt { opacity: .85; transform: none; }

/* Ohne JS: Brot voll gefüllt (kein leerer Umriss) */
html:not(.js) .weg-segment { opacity: .85; transform: none; }

.weg-figur-caption {
  margin-top: 1.1rem;
  text-align: center;
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  color: var(--tinte-sekundaer);
}

@media (max-width: 900px) {
  .weg-spread { grid-template-columns: minmax(0, 1fr); }
  .weg-figur { display: none; }
}

.weg-linie {
  position: absolute;
  left: clamp(.85rem, 2vw, 1.25rem);
  top: .5rem;
  bottom: .5rem;
  width: 4px;
  height: calc(100% - 1rem);
}

.weg-linie line {
  stroke: var(--butter);
  stroke-width: 4;
  stroke-linecap: round;
}

html.js .weg-linie line {
  stroke-dasharray: 1;
  stroke-dashoffset: var(--weg, 1);
}

.weg-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

.weg-schritt { position: relative; }

.weg-nr {
  position: absolute;
  left: calc(-1 * clamp(2.75rem, 6vw, 4rem) + clamp(.85rem, 2vw, 1.25rem) + 2px);
  top: 0;
  transform: translateX(-50%);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: var(--mehl);
  border: 1px solid var(--kruste);
  color: var(--kruste);
  display: grid;
  place-items: center;
  font-family: var(--font-beziffern);
  font-size: .8rem;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}

/* Die Weg-Linie "aktiviert" jeden Schritt, den sie passiert */
.weg-schritt.aktiv .weg-nr {
  background: var(--butter);
  border-color: var(--butter-tief);
  color: var(--roest);
}

.weg-schritt-titel {
  font-family: var(--font-erklaeren);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
}

.weg-schritt-text {
  margin-top: .4rem;
  color: var(--tinte-sekundaer);
  max-width: 34rem;
}

/* ---------- 10 · Team (4 Geschäftsführer) ---------- */
.team-grid--gf { margin-top: var(--raum-block); }

/* Foto-Reveal mit sanftem Zoom (scale-Property → Hover bleibt intakt) */
html.js .reveal .team-foto img {
  scale: 1.08;
  transition: scale 1.1s var(--ease-zeichnen) .1s;
}

html.js .reveal.sichtbar .team-foto img { scale: 1; }

/* ---------- 11 · FAQ (zentriertes Layout) ---------- */
#faq .kicker { justify-content: center; }

#faq .kicker::before {
  content: '';
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  opacity: .45;
}

#faq .sektions-titel {
  text-align: center;
  margin-inline: auto;
}

.faq-liste {
  margin-top: var(--raum-block);
  max-width: 52rem;
  margin-inline: auto;
  border-bottom: 1px solid var(--hairline);
}

.faq-eintrag { border-top: 1px solid var(--hairline); }

.faq-eintrag summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: 1.25rem;
}

.faq-eintrag summary::-webkit-details-marker { display: none; }

.faq-eintrag summary:hover .faq-frage { color: var(--kruste); }

.faq-nr {
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  color: var(--kruste);
}

.faq-frage {
  font-family: var(--font-erklaeren);
  font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  font-weight: 600;
  line-height: 1.35;
  transition: color var(--dauer-kurz) ease;
}

.faq-plus {
  align-self: center;
  font-family: var(--font-beziffern);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--kruste);
  transition: transform .35s var(--ease-stempel);
}

.faq-eintrag[open] .faq-plus { transform: rotate(45deg); }

.faq-antwort {
  padding: 0 0 1.5rem;
  max-width: 44rem;
  color: var(--tinte-sekundaer);
}

.faq-eintrag[open] .faq-antwort {
  animation: faqAuf .4s var(--ease-zeichnen);
}

@keyframes faqAuf {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .faq-eintrag summary { grid-template-columns: minmax(0, 1fr) auto; }
  .faq-nr { display: none; }
}

/* ---------- 12 · Abschluss ---------- */
.abschluss-titel {
  margin-top: 1.4rem;
  font-size: var(--text-display);
  max-width: 14ch;
  text-wrap: balance;
}

.abschluss-text {
  margin-top: 1.4rem;
  max-width: 38rem;
  color: var(--mehl-sekundaer);
}

.abschluss-hinweis {
  margin-top: 1.5rem;
  font-size: var(--text-mono-klein);
  letter-spacing: .16em;
  color: var(--butter);
}

/* Sticky-CTA am Seitenende ausblenden (Kollision mit Abschluss-CTA/Footer) */
.klebe-cta.versteckt {
  opacity: 0 !important;
  transform: translateY(12px) scale(.96) !important;
  pointer-events: none !important;
}

/* ---------- Zähler ---------- */
.zaehler { font-variant-numeric: tabular-nums; }

/* ---------- Reduced Motion: Startseite ----------
   Jeder Effekt hat hier seinen vollen Endzustand — kein Inhalt geht
   verloren, nichts bewegt sich. */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal .zeichnen,
  html.js .reveal .laib-marker,
  html.js .reveal .karte-punkt,
  html.js .reveal .balken-fuellung,
  html.js .balken.reveal .balken-fuellung,
  html.js .balken.reveal .balken-diff,
  html.js .reveal .typ-stempel,
  html.js .reveal .kriterium-icon,
  html.js .reveal .laib-callout,
  html.js .reveal .laib-poren circle,
  html.js .reveal .plan-fenster-gruppe,
  html.js .reveal .plan-moebel,
  html.js .reveal .plan-labels,
  html.js .reveal .plan-titel {
    opacity: 1;
    stroke-dashoffset: 0;
    transition: none;
  }

  /* Anker-Transforms der Callout-Chips bleiben erhalten — nur die
     Marker/Nummern verlieren ihre Animations-Transforms */
  html.js .reveal .laib-marker,
  html.js .reveal .karte-punkt,
  html.js .reveal .typ-stempel,
  html.js .reveal .kriterium-icon {
    transform: none;
  }

  html.js .reveal .typ-stempel { transform: rotate(-3.5deg); }

  html.js .schnitt-lauf { height: auto; }
  html.js .schnitt-buehne { position: static; min-height: 0; }

  html.js .schnitt-payoff li {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scheibe-kante { opacity: 1; }

  .butter-messer { display: none; }
  .butter-wisch { --wisch: 100% !important; }
  html.js .butter-marke { transition: none; }
  html.js .butter-marke--nachher { opacity: 1; }

  html.js .weg-linie line { stroke-dashoffset: 0 !important; }

  .weg-nr { transition: none; }

  .weg-segment {
    opacity: .85 !important;
    transform: none !important;
    transition: none;
  }

  html.js .reveal .team-foto img {
    scale: 1;
    transition: none;
  }

  .karte-punkt { transition: none; scale: 1 !important; }

  html.js .produkt-karte.tilt-aktiv {
    transition: none;
    transform: none !important;
  }

  .faq-eintrag[open] .faq-antwort { animation: none; }
  .faq-plus { transition: none; }

  .typ-karte,
  .kriterium,
  .typ-bild img {
    transition: none;
  }

  .typ-karte:hover .typ-bild img { transform: none; }
}

/* ==========================================================================
   FEINSCHLIFF — Henry-Feedback 03.07.2026
   (Edgar-Foto, Team-Gruppenbild, Team-Überschrift, Partner-CTA, Schnitt-Größe)
   ========================================================================== */

/* --- Edgar Steininger: Quellfoto ist weiter gefasst (viel Luft über dem Kopf),
   dadurch wirkte er kleiner. KEIN Zoom (wie von Henry gewünscht) — stattdessen
   den Bildausschnitt nach unten holen (object-position tief), sodass oben kein
   Freiraum bleibt und er den Rahmen füllt wie die anderen. Greift auf
   Team-Seite UND Startseite. --- */
.team-foto img[src$="a3023de8-9aad-4c00-af5e-e6c16a5629de.avif"] {
  object-position: 50% 85%;
}

/* --- Team-Gruppenbild (Über-uns-Hero): Original ist Querformat 3:2. Der alte
   4:5-Hochkant-Rahmen schnitt die Leute an den Seiten ab. Rahmen aufs echte
   3:2 stellen → ganze Gruppe sichtbar; Bildspalte breiter ("weiter nach links
   öffnen") und Zeile vertikal zentriert → weniger Freiraum unter dem Text. --- */
.hero-spread--team .bild-rahmen { aspect-ratio: 3 / 2; }

@media (min-width: 901px) {
  .hero-spread--team {
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    align-items: center;
  }
}

/* --- Team-Überschrift "Das 'Brot&Butter Immobilien' Team": eine Zeile, mittig
   (Kicker ebenfalls mittig, symmetrische Linien wie in Kapitel 07). --- */
.kicker--mitte { justify-content: center; }

.kicker--mitte::before {
  content: '';
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  opacity: .45;
}

.ueber-team-titel {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

/* Auf Desktop garantiert eine Zeile — dafür etwas kleiner setzen, damit der
   lange Titel nicht rechts aus dem Raster läuft. */
@media (min-width: 901px) {
  .ueber-team-titel {
    white-space: nowrap;
    font-size: clamp(1.9rem, 0.4rem + 3.6vw, 3.3rem);
  }
}

/* --- Partner-Seite, Zwischen-CTAs: die kürzere Handwerker-Frage stand als
   kurze Zeile mit riesiger Lücke zum Button rechts. Frage füllt jetzt die
   Zeile (bricht sauber um), der Button bleibt rechts mit nur dem normalen
   Abstand daneben. --- */
.zwischen-cta { justify-content: flex-start; }

.zwischen-frage {
  flex: 1 1 22rem;
  max-width: 48ch;
}

/* Kapitel 03 (Schnitt/Haus) wird über eine engere viewBox im Template größer
   gezogen (kein Breiten-Hack → keine horizontale Überlauf-Gefahr). */

/* Payoff unter der 03-Animation: zentriert und über die volle Breite (die
   drei Aussagesätze stehen jetzt als eigenständige, mittige Statements). */
.schnitt-payoff {
  text-align: center;
  justify-items: center;
  max-width: none;
}

.schnitt-payoff li {
  max-width: 46rem;
  text-wrap: balance;
}

/* Navbar-Logo fluchtet jetzt über .nav-shell exakt mit der Inhalts-Kante
   (siehe Navbar-Sektion) — der frühere margin-Nudge entfällt. */

/* Feinere Nebenstraße auf der Karte (dezenter als die Hauptstraßen). */
.karte-strasse--fein { opacity: .32; stroke-width: 1.2; }

/* ---------- News ---------- */
.news-titel {
  margin-top: 1.4rem;
  max-width: 16ch;
  text-wrap: balance;
  font-size: clamp(2.25rem, .9rem + 6.2vw, 6.75rem);
}

.news-intro {
  margin-top: clamp(1.8rem, 3.5vw, 2.75rem);
  max-width: 46rem;
}

.news-intro p {
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--tinte-sekundaer);
  text-wrap: pretty;
}

/* Nur die Beitragsliste rückt an den Hero heran — der News-Hero selbst
   behält sein .sektion--hero-Padding (sonst rutscht der Titel unter die
   Navbar). */
.sektion--news:not(.sektion--hero) { padding-top: 0; }

.news-liste {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.news-karte {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--mehl-hell);
  border: 1px solid var(--hairline);
  transition:
    transform var(--dauer-kurz) ease,
    box-shadow var(--dauer-kurz) ease;
}

.news-karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px #1b16101a;
}

/* Jede zweite Karte spiegelt Bild und Text — lockert die Liste auf */
.news-karte:nth-child(even) .news-bild { order: 2; }

.news-bild {
  position: relative;
  min-height: 15rem;
  overflow: hidden;
}

.news-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Presse-Clippings / Screenshots: einpassen statt beschneiden */
.news-bild--einpassen { background: #fff; }

.news-bild--einpassen img {
  object-fit: contain;
  padding: clamp(.75rem, 1.5vw, 1.25rem);
}

.news-inhalt {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
}

.news-datum {
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-sekundaer);
}

.news-beitrag-titel {
  margin-top: 1.1rem;
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem);
  line-height: 1.12;
  text-wrap: balance;
}

.news-text {
  flex: 1;
  margin-top: 1.1rem;
  display: grid;
  gap: .9rem;
}

.news-text p {
  font-size: .975rem;
  line-height: 1.62;
  color: var(--tinte-sekundaer);
  text-wrap: pretty;
}

.news-cta { margin-top: 1.6rem; }

@media (max-width: 860px) {
  .news-karte { grid-template-columns: minmax(0, 1fr); }
  .news-karte:nth-child(even) .news-bild { order: 0; }
  .news-bild { min-height: 12rem; aspect-ratio: 16 / 9; }
}

/* ---------- Qualifizierung (Käufer-Funnel) ---------- */
.quali-titel {
  margin-top: 1.4rem;
  max-width: 22ch;
  text-wrap: balance;
  font-size: clamp(2rem, .9rem + 5vw, 5.5rem);
}

.sektion--quali-form { padding-top: 0; }

.quali-form {
  border: 1px solid var(--hairline);
  background: var(--mehl-hell);
}

.quali-form iframe {
  display: block;
  width: 100%;
  min-height: clamp(620px, 78vh, 780px);
  border: 0;
}

.quali-hinweis {
  margin-top: 1rem;
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-sekundaer);
}


/* Zentrierte Heroes: News (Titel + Intro) und Qualifizierung (Titel) */
.sektion--news .kicker,
.sektion--news .news-titel,
.sektion--news .news-intro,
.sektion--quali .kicker,
.sektion--quali .quali-titel {
  text-align: center;
}
.sektion--news .news-titel,
.sektion--news .news-intro,
.sektion--quali .quali-titel {
  margin-inline: auto;
}

/* ==========================================================================
   Objekte-Seite (3 Beispielobjekte), Kalender-Seiten (Analyse /
   Terminbuchung) und Ankaufsprofil — im Stil der Mainseite
   ========================================================================== */

/* ---------- Objekte: 3 Beispielobjekte ---------- */
.sektion--objekt { padding-block: calc(var(--raum-sektion) * .55); }

.objekt-spread {
  margin-top: var(--raum-block);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.objekt-figur {
  margin: 0;
  position: sticky;
  top: 6.5rem;
}

.objekt-figur img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--hairline);
  background: var(--mehl-hell);
}

.objekt-spread--spiegel .objekt-figur { order: 2; }

.objekt-titel {
  font-size: var(--text-statement);
  max-width: 26ch;
  text-wrap: balance;
}

.objekt-absaetze {
  margin-top: 1.4rem;
  display: grid;
  gap: 1rem;
  color: var(--tinte-sekundaer);
  text-wrap: pretty;
}

.objekt-absaetze strong { color: var(--tinte); }

.objekt-text .massnahmen-titel { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.objekt-nachsatz {
  margin-top: 1.4rem;
  color: var(--tinte-sekundaer);
  text-wrap: pretty;
}

.objekt-nachsatz strong { color: var(--tinte); }

.objekt-eckdaten { margin-top: clamp(2.5rem, 5vw, 4rem); }

.eckdaten-grid--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.objekt-eckdaten .kicker + .eckdaten-grid { margin-top: 1.5rem; }

@media (max-width: 900px) {
  .objekt-spread { grid-template-columns: minmax(0, 1fr); }
  .objekt-spread--spiegel .objekt-figur { order: 0; }
  .objekt-figur { position: static; }
  .eckdaten-grid--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .eckdaten-grid--drei { grid-template-columns: minmax(0, 1fr); }
}

/* Butter-Markierung — Pendant zur Brush-Underline des Originals */
.unterstrichen {
  background: linear-gradient(transparent 62%, #eab13e8c 62%);
  padding-inline: .08em;
}

/* Warum B-Lage? */
.blage-text {
  margin-top: var(--raum-block);
  max-width: 46rem;
  display: grid;
  gap: 1.1rem;
  color: var(--tinte-sekundaer);
  text-wrap: pretty;
}

.blage-text strong,
.blage-schluss strong { color: var(--tinte); }

.blage-lead {
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--tinte);
}

.blage-schluss {
  margin-top: 1.1rem;
  max-width: 46rem;
  color: var(--tinte-sekundaer);
  text-wrap: pretty;
}

/* ---------- Kalender-Seiten (Calendly-Inline-Widget) ---------- */
.kalender-form {
  border: 1px solid var(--hairline);
  background: var(--mehl-hell);
}

.kalender-form .calendly-inline-widget {
  width: 100%;
  min-height: 700px;
}

.kalender-form iframe { display: block; }

/* ==========================================================================
   Aufzeichnung — fokussierte Webinar-Funnel-Seite (base-fokus.html)
   Zentrierte, ruhige Editorial-Komposition:
   Eyebrow → Headline → Subline → Video (16:9) → CTA.
   Minimaler Header (nur Logo), kein Sticky-CTA — alles unter .seite-aufzeichnung.
   ========================================================================== */

/* Minimaler Header: Logo linksbündig, keine Nav-Rechts-Leiste */
.nav-shell--fokus { justify-content: flex-start; }

.seite-aufzeichnung .sektion--aufzeichnung { text-align: center; }

/* Eyebrow: eigenes Fragment-Mono-Label im .kicker-Stil, mittig mit
   symmetrischen Haarlinien. Bewusst NICHT die .kicker-Klasse, da diese auf
   allen Unterseiten global ausgeblendet wird (main .kicker { display:none }). */
.seite-aufzeichnung .auf-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--font-beziffern);
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-sekundaer);
}
.seite-aufzeichnung .auf-eyebrow::before,
.seite-aufzeichnung .auf-eyebrow::after {
  content: '';
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  opacity: .45;
}

.seite-aufzeichnung .auf-titel {
  margin-top: 1.4rem;
  margin-inline: auto;
  max-width: 18ch;
  text-wrap: balance;
  /* wie die Quali-Hero-Headline skaliert (auf 390 px erprobt, kein H-Overflow) */
  font-size: clamp(2rem, .9rem + 5vw, 5.5rem);
}

.seite-aufzeichnung .auf-subline {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
  max-width: 44rem;
  font-size: var(--text-lead);
  color: var(--tinte-sekundaer);
}

/* 16:9-Video, weich gerahmt auf warmem Mehl-Fond, zentriert */
.seite-aufzeichnung .auf-video {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 880px;
}

.seite-aufzeichnung .auf-video-rahmen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--mehl-hell);
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 60px #1b161026, 0 4px 16px #1b16101a;
}

.seite-aufzeichnung .auf-video-rahmen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.seite-aufzeichnung .auf-aktion {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}

.seite-aufzeichnung .auf-hinweis {
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-sekundaer);
}

/* ---------- Ankaufsprofil: Hero-Stats ---------- */
.ak-hero-aktion { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

.ak-stats {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 22rem));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.ak-stat {
  background: var(--mehl-hell);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--butter);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.ak-stat dt {
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem);
  line-height: 1;
}

.ak-stat dd { margin: .8rem 0 0; }

.ak-stat-label {
  font-family: var(--font-beziffern);
  font-size: var(--text-mono-klein);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kruste);
}

.ak-stat-text {
  margin-top: .5rem;
  font-size: .95rem;
  color: var(--tinte-sekundaer);
}

@media (max-width: 640px) {
  .ak-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ankaufsprofil: Wer wir sind + Objekt-Laufband ---------- */
.ak-wer-text { display: grid; gap: 1rem; }

.ak-band {
  margin-top: var(--raum-block);
  overflow: hidden;
}

.ak-band-spur {
  display: flex;
  width: max-content;
  animation: ak-lauf 90s linear infinite;
}

.ak-band-kachel {
  flex: none;
  height: clamp(6rem, 12vw, 9.5rem);
  margin-right: clamp(.75rem, 1.5vw, 1.25rem);
  border: 1px solid var(--hairline-invers);
  background: var(--mehl-hell);
  overflow: hidden;
}

.ak-band-kachel img {
  height: 100%;
  width: auto;
  display: block;
}

.ak-band-legende {
  display: block;
  margin-top: 1.5rem;
  color: var(--mehl-sekundaer);
}

@keyframes ak-lauf {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ak-band-spur { animation: none; }
}

/* ---------- Ankaufsprofil: Kriterien ---------- */
.ak-kriterien-spread {
  margin-top: var(--raum-block);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.ak-kriterien-figur {
  margin: 0;
  position: sticky;
  top: 6.5rem;
}

.ak-kriterien-figur img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--hairline);
  background: var(--mehl-hell);
}

.ak-kriterien-liste {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.ak-krit-titel {
  color: var(--mehl);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.ak-krit-titel + .reno-text { margin-top: .5rem; }

@media (max-width: 900px) {
  .ak-kriterien-spread { grid-template-columns: minmax(0, 1fr); }
  .ak-kriterien-figur { position: static; }
}

/* ---------- Ankaufsprofil: Referenzen (Vorher/Nachher) ---------- */
.ak-ref {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline);
}

.ak-ref-titel {
  font-size: var(--text-statement);
  max-width: 26ch;
  text-wrap: balance;
}

.ak-ref-intro {
  margin-top: 1rem;
  max-width: 46rem;
  color: var(--tinte-sekundaer);
  text-wrap: pretty;
}

.ak-ref-spread {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.ak-ref-paar {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.ak-ref-paar figure { margin: 0; }

.ak-ref-paar img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--hairline);
  background: var(--mehl-hell);
}

@media (max-width: 900px) {
  .ak-ref-spread { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ankaufsprofil: Werte + Formular ---------- */
.ak-werte-titel {
  margin-top: calc(var(--raum-block) * 1.4);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
}

.ak-werte-grid {
  margin-top: var(--raum-block);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 900px) {
  .ak-werte-grid { grid-template-columns: minmax(0, 1fr); }
}

.ak-form { margin-top: var(--raum-block); }


/* Zentrierte Titel/Kicker auf den Einzelseiten objekte, analyse, terminbuchung */
.seite-objekte main .kicker,
.seite-objekte main h1, .seite-objekte main h2, .seite-objekte main h3,
.seite-analyse main .kicker,
.seite-analyse main h1, .seite-analyse main h2,
.seite-terminbuchung main .kicker,
.seite-terminbuchung main h1, .seite-terminbuchung main h2 {
  text-align: center;
}

/* ==========================================================================
   Ankaufsprofil — Ausrichtung
   Sektions-Ebene (Kicker, Titel, Lauftexte, Hero-Aktion) mittig,
   Box-/Karten-Inhalte konsequent linksbündig.
   ========================================================================== */

/* Kicker mittig: die Flex-Zeile bekommt wie .kicker--mitte eine Linie
   links UND rechts und wird zentriert (text-align reicht bei Flex nicht). */
.seite-ankaufsprofil main .kicker { justify-content: center; }

.seite-ankaufsprofil main .kicker::before {
  content: '';
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  opacity: .45;
}

/* Titel + Sektions-Texte mittig. Die Blöcke tragen eine max-width,
   deshalb zusätzlich margin-inline: auto, damit der Block selbst
   mittig steht (nicht nur der Text im linksbündigen Block). */
.seite-ankaufsprofil main h1,
.seite-ankaufsprofil main .sektions-titel,
.seite-ankaufsprofil main .ak-ref-titel,
.seite-ankaufsprofil main .ak-werte-titel,
.seite-ankaufsprofil main .karriere-intro,
.seite-ankaufsprofil main .sektions-lauftext,
.seite-ankaufsprofil main .ak-ref-intro,
.seite-ankaufsprofil main .ak-band-legende,
.seite-ankaufsprofil main .quali-hinweis {
  text-align: center;
  margin-inline: auto;
}

/* Hero: CTA-Button und die beiden Stat-Boxen (10+/50+) als Gruppe mittig. */
.seite-ankaufsprofil .ak-hero-aktion {
  display: flex;
  justify-content: center;
}

.seite-ankaufsprofil .ak-stats { justify-content: center; }

/* Zwischen-CTA (Kriterien): Frage + Button gestapelt und mittig,
   gleiche Zentrier-Logik wie Hero- und Abschluss-CTA. */
.seite-ankaufsprofil .zwischen-cta {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.seite-ankaufsprofil .zwischen-frage { flex: 0 0 auto; }

/* Box-/Karten-Inhalte bleiben linksbündig — nichts davon zentrieren. */
.seite-ankaufsprofil .ak-stat,
.seite-ankaufsprofil .reno-karte,
.seite-ankaufsprofil .grund-karte,
.seite-ankaufsprofil .kriterium {
  text-align: left;
}


/* Ankaufsprofil-Nachschliff: dunkle Geschäftsmodell-Karten lesbar + Kicker-Umbruchzeilen mittig */
.seite-ankaufsprofil [data-thema="dunkel"] .grund-karte {
  color: var(--tinte);
}
.seite-ankaufsprofil main .kicker {
  text-align: center;
}
/* objekte: zentrierte H1 wirklich mittig (max-width-Box zentrieren) */
.seite-objekte main h1 {
  margin-inline: auto;
}

/* ==========================================================================
   Feinschliff 04.07. — Kicker nur auf der Mainpage, Objekt-Titel 2-zeilig
   ========================================================================== */

/* Kapitel-Kicker sind ein Mainpage-Stilmittel (nummerierte Kapitel).
   Auf allen Unterseiten verschwinden die kleinen Labels über den Titeln —
   nur index.html (.seite-index) und verkaufen.html (.seite-verkaufen)
   behalten sie. Footer-/Nav-Bereiche sind nicht betroffen (nur main). */
body:not(.seite-index):not(.seite-verkaufen) main .kicker { display: none; }

/* objekte: Die Options-Titel sollen bei ALLEN drei Optionen in maximal
   2 Zeilen stehen und einheitlich wirken. Maßstab ist der längste Titel
   (Option 3, 69 Zeichen): kleinere, feste Statement-Größe + breitere
   Box, balance verteilt die zwei Zeilen gleichmäßig. Die Box wird
   zentriert (Titel sind auf dieser Seite mittig gesetzt). */
.seite-objekte .objekt-titel {
  font-size: clamp(1rem, 1.85vw, 1.66rem);
  line-height: 1.28;
  max-width: 40ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* Einspaltiges Layout: Titelspalte = Viewport minus Randpolster —
   die Schrift skaliert mit, damit Option 3 auch bei 390/320 px in
   zwei Zeilen bleibt. */
@media (max-width: 900px) {
  .seite-objekte .objekt-titel {
    font-size: clamp(.78rem, 4.42vw - .11rem, 1.48rem);
  }
}

/* ==========================================================================
   Hero Konzept 10 — Explosionsaxonometrie: Laib → Schnitt → Werkplan → Haus
   Vollständig unter .hero10 genamespaced (nur Startseite: index.html /
   verkaufen.html). Typo/CTAs der Copy kommen aus den Site-Klassen
   (.start-hero-titel, .start-hero-claim, .cta, .cta-geist) — hier stehen
   nur Bühne, Skins, Phasen-Zustände und das End-Layout (Split).
   ========================================================================== */
.hero10 {
  /* gebackene Texturen (Data-URIs) — nur im Hero gebraucht */
  --crustnoise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.22 0.34' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.33 0 0 0 0 0.20 0 0 0 0 0.06 0 0 0 0.9 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0.10 0.30 0.42'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  --flournoise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.93 0 0 0 0 0.78 0 0 0 0.8 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0.16 0.34'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
  --papergrain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.13 0 0 0 0 0.10 0 0 0 0 0.06 0 0 0 0.6 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0.028 0.055'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)'/%3E%3C/svg%3E");
  --crumbnoise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.58 0 0 0 0 0.40 0 0 0 0 0.18 0 0 0 0.9 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0.07 0.20 0.30'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23c)'/%3E%3C/svg%3E");
  /* linke Copy-/HUD-Kante = linke Shell-Kante (fluchtet mit Sektion 02) */
  --hero10-rand: max(var(--rand-seite), calc((100vw - var(--breite-max)) / 2 + var(--rand-seite)));

  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background:
    radial-gradient(1200px 760px at 50% 36%, var(--mehl-hell) 0%, rgba(250, 247, 240, 0) 72%),
    var(--mehl);
}

/* Blueprint-Rasterfläche — nur während der Werkplanungs-Phase sichtbar */
.hero10 .bgplan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease;
  will-change: opacity; /* Raster aus dem Warm-up bleibt erhalten */
  background:
    repeating-linear-gradient(90deg, rgba(150, 101, 47, .055) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(150, 101, 47, .055) 0 1px, transparent 1px 72px);
}

.hero10.dims .bgplan { opacity: 1; }
.hero10.done .bgplan { opacity: 0; }

/* End-Hintergrund (nur .done): Lichtführung → Werkplan-Raster → Butter-
   Wasserzeichen → Zirkelschläge → Bodenlinie → Papierkorn. Unten weich
   ausmaskiert, damit der Übergang in Sektion 02 nahtlos bleibt. */
.hero10 .bgdone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 2.2s ease .35s;
  will-change: opacity; /* Raster aus dem Warm-up bleibt erhalten */
  -webkit-mask-image: linear-gradient(180deg, #000 0 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 90%, transparent 100%);
}

.hero10 .bgdone i { font-style: normal; display: block; }
.hero10.done .bgdone { opacity: 1; }

.hero10 .bgdone::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 600px at 15% 28%, rgba(250, 247, 240, .9), rgba(250, 247, 240, 0) 70%),
    radial-gradient(900px 680px at 72% 44%, rgba(234, 177, 62, .15), rgba(234, 177, 62, 0) 68%),
    radial-gradient(52% 30% at 74% 100%, rgba(150, 101, 47, .08), transparent 74%),
    linear-gradient(180deg, rgba(250, 247, 240, .55) 0%, rgba(250, 247, 240, 0) 24%, rgba(234, 177, 62, 0) 62%, rgba(150, 101, 47, .06) 100%);
}

.hero10 .bgdone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--papergrain);
}

.hero10 .bgdone .lines {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(150, 101, 47, .026) 0 1px, transparent 1px 27px),
    repeating-linear-gradient(0deg, rgba(150, 101, 47, .026) 0 1px, transparent 1px 27px),
    repeating-linear-gradient(90deg, rgba(150, 101, 47, .068) 0 1px, transparent 1px 108px),
    repeating-linear-gradient(0deg, rgba(150, 101, 47, .068) 0 1px, transparent 1px 108px);
  -webkit-mask-image: radial-gradient(72% 64% at 34% 42%, transparent 0 30%, rgba(0, 0, 0, .6) 62%, #000 100%);
  mask-image: radial-gradient(72% 64% at 34% 42%, transparent 0 30%, rgba(0, 0, 0, .6) 62%, #000 100%);
}

.hero10 .bgdone .plan {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 32%, rgba(0, 0, 0, .85) 54%, #000 72%);
  mask-image: linear-gradient(90deg, transparent 0 32%, rgba(0, 0, 0, .85) 54%, #000 72%);
}

.hero10 .bgdone .arc {
  position: absolute;
  left: 72%;
  top: 45%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hero10 .bgdone .a1 {
  width: min(86vh, 53vw);
  height: min(86vh, 53vw);
  border: 1px solid rgba(150, 101, 47, .17);
}

.hero10 .bgdone .a2 {
  width: min(110vh, 68vw);
  height: min(110vh, 68vw);
  border: 1px dashed rgba(150, 101, 47, .11);
}

.hero10 .bgdone .wm {
  position: absolute;
  left: 72.5%;
  top: 45%;
  width: min(76vh, 46vw);
  height: min(76vh, 46vw);
  transform: translate(-50%, -52%) rotate(-6deg);
  border-radius: 27%;
  background: linear-gradient(160deg, rgba(234, 177, 62, .13) 0%, rgba(234, 177, 62, .03) 100%);
  box-shadow: inset 0 0 0 1px rgba(217, 156, 31, .18);
}

.hero10 .bgdone .wm::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 24%;
  border: 1px solid rgba(217, 156, 31, .11);
}

.hero10 .bgdone .floor {
  position: absolute;
  left: 40%;
  right: 3%;
  top: 86%;
  height: 12vh;
}

.hero10 .bgdone .floor::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: -4vh;
  height: 10vh;
  background: radial-gradient(50% 52% at 52% 52%, rgba(120, 74, 24, .10), transparent 72%);
}

.hero10 .bgdone .floor::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(150, 101, 47, 0) 0%, rgba(150, 101, 47, .30) 20% 80%, rgba(150, 101, 47, 0) 100%);
}

@media (max-width: 860px) {
  .hero10 .bgdone::before {
    background:
      radial-gradient(480px 400px at 50% 92%, rgba(250, 247, 240, .85), rgba(250, 247, 240, 0) 70%),
      radial-gradient(640px 520px at 50% 22%, rgba(234, 177, 62, .14), rgba(234, 177, 62, 0) 68%),
      linear-gradient(180deg, rgba(250, 247, 240, .5) 0%, rgba(250, 247, 240, 0) 20%, rgba(234, 177, 62, 0) 56%, rgba(150, 101, 47, .05) 100%);
  }

  .hero10 .bgdone .lines {
    -webkit-mask-image: radial-gradient(120% 46% at 50% 20%, #000 0 44%, rgba(0, 0, 0, .5) 66%, transparent 100%);
    mask-image: radial-gradient(120% 46% at 50% 20%, #000 0 44%, rgba(0, 0, 0, .5) 66%, transparent 100%);
  }

  .hero10 .bgdone .plan {
    -webkit-mask-image: linear-gradient(180deg, #000 0 40%, transparent 60%);
    mask-image: linear-gradient(180deg, #000 0 40%, transparent 60%);
  }

  .hero10 .bgdone .arc { left: 50%; top: 26%; }
  .hero10 .bgdone .a1 { width: min(52vh, 112vw); height: min(52vh, 112vw); }
  .hero10 .bgdone .a2 { width: min(66vh, 142vw); height: min(66vh, 142vw); }
  .hero10 .bgdone .wm { left: 50%; top: 27%; width: min(44vh, 88vw); height: min(44vh, 88vw); }
  .hero10 .bgdone .floor { left: 10%; right: 10%; top: 38.6%; height: 7vh; }

  .hero10 .bgdone .floor::before {
    top: -2.6vh;
    height: 6.2vh;
    background: radial-gradient(50% 52% at 50% 52%, rgba(120, 74, 24, .085), transparent 72%);
  }

  .hero10 .bgdone .floor::after { opacity: .55; }
}

.hero10 .vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(140% 120% at 50% 45%, rgba(27, 22, 16, 0) 60%, rgba(27, 22, 16, .07) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 88%, transparent 100%);
}

/* ---------- HUD (sitzt unter der fixen Navbar) ---------- */
.hero10 .hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5.4rem var(--hero10-rand) 0;
  font-size: 11px;
  letter-spacing: .14em;
  opacity: .55;
  z-index: 6;
}

.hero10 .hud span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero10 .caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6.5vh;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .18em;
  color: var(--kruste);
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 6;
}

.hero10 .caption.an { opacity: .9; }
.hero10.done .caption { opacity: 0; }

.hero10 .replay {
  position: absolute;
  right: 26px;
  bottom: 22px;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--roest);
  opacity: 0;
  cursor: pointer;
  z-index: 7;
  pointer-events: none;
  transition: opacity .5s ease;
}

.hero10.done .replay { opacity: .45; pointer-events: auto; }
.hero10.done .replay:hover { opacity: .95; }

/* ---------- 3D-Bühne ---------- */
.hero10 .stagewrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.hero10 .shift {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 680px;
  height: 680px;
  margin: -340px 0 0 -340px;
  transition: transform 1.5s cubic-bezier(.6, .03, .13, 1);
  will-change: transform; /* Split-Fahrt am Ende compositor-only */
}

.hero10 .scaler {
  width: 680px;
  height: 680px;
  transform-origin: 50% 50%;
}

.hero10 .stage {
  width: 680px;
  height: 680px;
  position: relative;
  opacity: 0;
  transform: translateY(40px) scale(.975);
  transition: opacity 1.2s ease, transform 1.5s cubic-bezier(.22, .75, .2, 1);
  /* Layer vorab promoten: Einblendung + Auffahrt starten ohne Raster-Jank */
  will-change: opacity, transform;
}

.hero10.in .stage { opacity: 1; transform: none; }

.hero10 .scene {
  position: absolute;
  inset: 0;
  perspective: 1650px;
  perspective-origin: 50% 40%;
}

.hero10 .world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 62%;
  transform: rotateX(-7deg) rotateY(12deg);
  transition: transform 1.9s cubic-bezier(.55, .05, .12, 1);
  will-change: transform; /* Iso-Drehung läuft auf dem Compositor */
}

.hero10 .world.iso { transform: rotateX(-26deg) rotateY(36deg); }

.hero10.done .world.iso { animation: hero10sway 10s ease-in-out infinite alternate; }

@keyframes hero10sway {
  from { transform: rotateX(-26deg) rotateY(34.6deg); }
  to { transform: rotateX(-24.4deg) rotateY(37.4deg); }
}

.hero10 .origin {
  position: absolute;
  left: 50%;
  top: 78%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

/* Ebenen: Explosion mit sanftem Overshoot, Montage mit festem "Setzen" */
.hero10 .layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transition: transform 1.3s cubic-bezier(.3, 1.16, .35, 1);
  will-change: transform;
}

.hero10.assemble .layer { transition: transform 1.15s cubic-bezier(.72, .02, .16, 1); }

.hero10 .f {
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
  overflow: hidden;
  transition:
    transform 1s cubic-bezier(.6, .04, .16, 1),
    width 1s cubic-bezier(.6, .04, .16, 1),
    height 1s cubic-bezier(.6, .04, .16, 1),
    border-radius 1s ease;
  will-change: transform;
}

.hero10 .s {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
  border-radius: inherit;
}

/* Skin-Sichtbarkeit je Phase */
.hero10 .stage[data-skin="bread"] .s-bread { opacity: 1; }
.hero10 .stage[data-skin="blue"] .s-blue { opacity: 1; }
.hero10 .stage[data-skin="built"] .s-built { opacity: 1; }

/* ---------- Brot-Skins ---------- */
.hero10 .s-bread.side-f {
  background:
    var(--flournoise),
    var(--crustnoise),
    radial-gradient(130% 120% at 30% -14%, rgba(255, 226, 168, .6) 0%, rgba(255, 226, 168, 0) 54%),
    radial-gradient(34% 70% at 18% 46%, rgba(120, 74, 24, .20), transparent 74%),
    radial-gradient(30% 64% at 58% 60%, rgba(255, 222, 160, .16), transparent 72%),
    radial-gradient(26% 56% at 84% 38%, rgba(112, 68, 22, .16), transparent 72%),
    radial-gradient(90% 130% at 88% 118%, rgba(56, 30, 6, .34) 0%, transparent 58%),
    linear-gradient(180deg, #e5b878 0%, #cd9a55 30%, #aa7434 62%, #8a5a24 86%, #77491a 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 235, 196, .55),
    inset 0 -7px 16px rgba(66, 38, 10, .4),
    inset 0 0 0 1px rgba(104, 64, 20, .2);
}

.hero10 .s-bread.side-d {
  background:
    var(--flournoise),
    var(--crustnoise),
    radial-gradient(130% 120% at 32% -14%, rgba(255, 226, 168, .26) 0%, rgba(255, 226, 168, 0) 54%),
    radial-gradient(32% 66% at 26% 52%, rgba(96, 58, 18, .22), transparent 74%),
    radial-gradient(28% 60% at 68% 40%, rgba(255, 218, 152, .10), transparent 72%),
    radial-gradient(90% 130% at 12% 118%, rgba(48, 26, 6, .4) 0%, transparent 58%),
    linear-gradient(180deg, #c08a44 0%, #a06a30 44%, #82521f 78%, #6d4315 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 235, 196, .28),
    inset 0 -7px 16px rgba(52, 30, 8, .45),
    inset 0 0 0 1px rgba(92, 56, 18, .22);
}

.hero10 .s-bread.crumb {
  background:
    radial-gradient(21px 14px at 24% 30%, rgba(139, 89, 36, .44) 0 42%, rgba(139, 89, 36, .16) 58%, transparent 74%),
    radial-gradient(23px 16px at 25.5% 32.5%, transparent 0 52%, rgba(255, 246, 222, .55) 62%, transparent 76%),
    radial-gradient(16px 12px at 63% 62%, rgba(139, 89, 36, .40) 0 42%, rgba(139, 89, 36, .14) 58%, transparent 74%),
    radial-gradient(18px 13px at 64.5% 64.5%, transparent 0 52%, rgba(255, 246, 222, .5) 62%, transparent 76%),
    radial-gradient(14px 10px at 79% 26%, rgba(139, 89, 36, .38) 0 42%, transparent 72%),
    radial-gradient(16px 12px at 80% 28%, transparent 0 52%, rgba(255, 246, 222, .45) 62%, transparent 76%),
    radial-gradient(13px 9px at 41% 76%, rgba(139, 89, 36, .36) 0 42%, transparent 72%),
    radial-gradient(15px 11px at 42.5% 78%, transparent 0 52%, rgba(255, 246, 222, .4) 62%, transparent 76%),
    radial-gradient(10px 8px at 14% 56%, rgba(139, 89, 36, .32) 0 45%, transparent 72%),
    radial-gradient(11px 8px at 88% 66%, rgba(139, 89, 36, .32) 0 45%, transparent 72%),
    radial-gradient(9px 7px at 50% 20%, rgba(139, 89, 36, .30) 0 45%, transparent 72%),
    radial-gradient(8px 6px at 33% 50%, rgba(139, 89, 36, .28) 0 45%, transparent 72%),
    radial-gradient(10px 7px at 70% 42%, rgba(139, 89, 36, .28) 0 45%, transparent 72%),
    radial-gradient(7px 5px at 57% 86%, rgba(139, 89, 36, .26) 0 45%, transparent 72%),
    radial-gradient(8px 6px at 17% 80%, rgba(139, 89, 36, .26) 0 45%, transparent 72%),
    radial-gradient(6px 5px at 91% 44%, rgba(139, 89, 36, .24) 0 45%, transparent 72%),
    radial-gradient(6px 5px at 46% 42%, rgba(139, 89, 36, .24) 0 45%, transparent 72%),
    radial-gradient(5px 4px at 68% 78%, rgba(139, 89, 36, .22) 0 45%, transparent 72%),
    radial-gradient(5px 4px at 10% 34%, rgba(139, 89, 36, .22) 0 45%, transparent 72%),
    var(--crumbnoise),
    radial-gradient(115% 115% at 36% 28%, #fcf4e0 0%, #f5e8ca 55%, #ecdcb6 88%, #e6d3a8 100%);
  box-shadow:
    inset 0 0 0 2px #7d4e1c,
    inset 0 0 0 4.5px #a9743a,
    inset 0 0 0 7px rgba(200, 150, 86, .55),
    inset 0 0 0 10px rgba(222, 182, 122, .30),
    inset 0 0 20px rgba(150, 101, 47, .16);
}

/* Ungeschnittener Laib: Ebene-3-Top liest sich als Kruste */
.hero10:not(.postcut) .li3 .s-bread.crumb {
  background:
    var(--flournoise),
    var(--crustnoise),
    radial-gradient(86% 74% at 40% 30%, #ecc084 0%, #d8a763 30%, #b57e3e 58%, #91622a 79%, #774b1c 93%, #6a4016 100%);
  box-shadow: inset 0 0 44px rgba(56, 32, 8, .4), inset 0 0 0 1px rgba(104, 64, 20, .25);
}

/* Poren-Muster pro Scheibe variieren */
.hero10 .li1 .s-bread.crumb,
.hero10 .li3 .s-bread.crumb { transform: scaleX(-1); }
.hero10 .li2 .s-bread.crumb { transform: scale(-1, -1); }

.hero10 .s-bread.crust-top {
  background:
    var(--flournoise),
    var(--crustnoise),
    radial-gradient(110% 96% at 42% 32%, #e2b273 0%, #c28c4c 46%, #a06c30 76%, #8a5c26 100%);
  box-shadow: inset 0 0 16px rgba(80, 48, 14, .24), inset 0 0 0 1px rgba(104, 64, 20, .22);
}

/* ---------- Kuppel: gestaffelte 3D-Krusten-Ringe ---------- */
.hero10 .domeplate {
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
  opacity: 0;
  transition: opacity .9s ease;
  transition-delay: 440ms;
  will-change: opacity;
}

.hero10 .stage[data-skin="bread"] .domeplate { opacity: 1; }

.hero10 .domecrown::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(34% 30% at 36% 27%, rgba(255, 248, 222, .5) 0%, rgba(255, 248, 222, .16) 54%, transparent 76%),
    radial-gradient(15% 12% at 64% 20%, rgba(253, 247, 233, .34), transparent 72%),
    radial-gradient(11% 9% at 26% 58%, rgba(253, 247, 233, .24), transparent 72%);
  filter: blur(.8px);
}

.hero10 .domecut {
  position: absolute;
  height: 18px;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(22deg);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(88, 52, 14, .16) 10%,
    rgba(74, 42, 10, .62) 22%,
    rgba(253, 242, 212, .95) 36% 60%,
    rgba(246, 224, 178, .7) 72%,
    rgba(208, 166, 106, .45) 82%,
    rgba(88, 52, 14, .14) 92%,
    transparent 100%);
  filter: blur(.4px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}

.hero10 .s-bread.under {
  background:
    var(--crustnoise),
    linear-gradient(135deg, #8a5a26, #6e4517);
}

.hero10 .s-bread.cap-top {
  background:
    var(--crustnoise),
    radial-gradient(92% 84% at 42% 34%, #c08a4a 0%, #a9743a 55%, #8a5a26 82%, #74481a 100%);
  box-shadow: inset 0 0 0 1px rgba(104, 64, 20, .35), inset 0 0 18px rgba(66, 38, 10, .3);
}

.hero10 .s-bread.cap-dome {
  background:
    var(--crustnoise),
    radial-gradient(96% 88% at 42% 33%, #d9a765 0%, #bb854a 45%, #9c6b2e 78%, #8a5c26 100%);
  box-shadow: inset 0 0 14px rgba(80, 48, 14, .22);
}

.hero10 .s-bread.cap-under {
  background:
    var(--crustnoise),
    linear-gradient(135deg, #7d5222, #5f3c12);
}

/* ---------- Schnitt-Effekt (Butterklinge) ---------- */
.hero10 .cut {
  position: absolute;
  left: 50%;
  top: 238px;
  width: 500px;
  height: 306px;
  margin-left: -250px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.hero10 .cutline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  display: block;
  background: linear-gradient(90deg, transparent 0%, rgba(234, 177, 62, 0) 6%, var(--butter) 28%, #fff3d6 50%, var(--butter) 72%, rgba(234, 177, 62, 0) 94%, transparent 100%);
  box-shadow: 0 0 16px rgba(234, 177, 62, .8), 0 0 4px rgba(255, 240, 200, .9);
  transform: translateY(0);
  transition: transform .85s cubic-bezier(.7, .05, .3, 1);
}

.hero10.cutting .cut { opacity: 1; transition: opacity .22s ease; }
.hero10.cutting .cutline { transform: translateY(304px); }
.hero10.postcut .cut { opacity: 0; }

/* ---------- Blueprint-Skins ---------- */
.hero10 .s-blue {
  background:
    repeating-linear-gradient(90deg, rgba(150, 101, 47, .13) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(150, 101, 47, .13) 0 1px, transparent 1px 26px),
    rgba(250, 247, 240, .16);
  box-shadow: inset 0 0 0 1px rgba(150, 101, 47, .55);
}

/* ---------- Gebaut-Skins ---------- */
.hero10 .s-built.fac-f {
  background: linear-gradient(180deg, #f8f2e4 0%, #efe6d0 100%);
  box-shadow: inset 0 -2px 0 rgba(27, 22, 16, .14), inset 0 7px 9px -7px rgba(27, 22, 16, .22);
}

.hero10 .s-built.fac-d {
  background: linear-gradient(180deg, #e9deca 0%, #ddcfb2 100%);
  box-shadow: inset 0 -2px 0 rgba(27, 22, 16, .18), inset 0 7px 9px -7px rgba(27, 22, 16, .26);
}

.hero10 .s-built .win {
  position: absolute;
  top: 18%;
  bottom: 22%;
  width: 40px;
  margin-left: -20px;
  border-radius: 2px;
  background: linear-gradient(118deg, #3d2e1a 0%, #241b10 48%, #191208 100%);
  box-shadow:
    inset 0 1px 0 rgba(250, 247, 240, .3),
    inset 0 0 0 1.5px rgba(250, 247, 240, .55),
    inset 0 -2.5px 0 rgba(217, 156, 31, .5),
    0 2px 3px rgba(27, 22, 16, .16);
}

.hero10 .s-built .win::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: rgba(250, 247, 240, .4);
}

.hero10 .s-built .door {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 44px;
  margin-left: -22px;
  top: 24%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--butter) 0%, var(--butter-tief) 100%);
  box-shadow: inset 0 0 0 1px rgba(27, 22, 16, .18), inset 0 2px 0 rgba(255, 240, 200, .5);
}

.hero10 .s-built.slab {
  background:
    linear-gradient(90deg, transparent calc(34% - 1px), rgba(27, 22, 16, .30) calc(34% - 1px) 34%, transparent 34%),
    linear-gradient(90deg, transparent calc(67% - 1px), rgba(27, 22, 16, .30) calc(67% - 1px) 67%, transparent 67%),
    linear-gradient(0deg, transparent calc(52% - 1px), rgba(27, 22, 16, .26) calc(52% - 1px) 52%, transparent 52%),
    linear-gradient(135deg, #f7f2e5 0%, #efe8d5 100%);
  box-shadow: inset 0 0 0 1px rgba(27, 22, 16, .28), inset 0 0 0 7px rgba(27, 22, 16, .06);
}

.hero10 .s-built.roof-side {
  background: linear-gradient(180deg, #2c2115, #1b1610);
  box-shadow: inset 0 1px 0 rgba(234, 177, 62, .6);
}

.hero10 .s-built.roof-top {
  background:
    radial-gradient(70% 60% at 58% 38%, rgba(250, 247, 240, .14), transparent 72%),
    linear-gradient(135deg, #443320, #241b10);
  box-shadow: inset 0 0 0 1px rgba(234, 177, 62, .6), inset 0 0 0 9px rgba(234, 177, 62, .14);
}

.hero10 .s-built.under { background: #241b10; }

.hero10 .s-built.cap-slab {
  background: linear-gradient(135deg, #f2ecda, #e7ddc6);
  box-shadow: inset 0 0 0 1px rgba(27, 22, 16, .16);
}

.hero10 .s-built.cap-roof { background: #241b10; }
.hero10 .s-built.cap-bunder { background: #241b10; }

/* ---------- Bemaßung ---------- */
.hero10 .dimw {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.hero10 .dim {
  position: absolute;
  right: 0;
  top: -9px;
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  transform-origin: 100% 50%;
  transform: rotateY(-36deg) rotateX(26deg);
  opacity: 0;
  transition: opacity .55s ease;
}

.hero10.dims .dim { opacity: 1; }

.hero10 .dim .dt {
  font-family: var(--font-beziffern);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--kruste);
  background: rgba(250, 247, 240, .85);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 2.5px 7px;
  white-space: nowrap;
}

.hero10 .dim .dl {
  position: relative;
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, rgba(150, 101, 47, .05), rgba(150, 101, 47, .65));
}

.hero10 .dim .dl::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  width: 1px;
  height: 9px;
  background: rgba(150, 101, 47, .7);
}

.hero10 .dim .dl::before {
  content: "";
  position: absolute;
  left: 14px;
  top: -4px;
  width: 1px;
  height: 9px;
  background: rgba(150, 101, 47, .35);
}

.hero10 .dim.center {
  right: auto;
  left: 0;
  top: -9px;
  transform: rotateY(-36deg) rotateX(26deg) translateX(-50%);
  transform-origin: 0 50%;
  flex-direction: column;
  gap: 5px;
}

.hero10 .dim.center .dl { width: 150px; background: rgba(150, 101, 47, .5); }
.hero10 .dim.center .dl::after { right: 0; }
.hero10 .dim.center .dl::before { left: 0; }

/* ---------- Boden ---------- */
.hero10 .gplate {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  height: 430px;
  border-radius: 14px;
  transform: translate(-50%, -50%) translate3d(0, 3px, 0) rotateX(90deg);
  background:
    repeating-linear-gradient(90deg, rgba(150, 101, 47, .10) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(150, 101, 47, .10) 0 1px, transparent 1px 44px);
  box-shadow: inset 0 0 0 1px rgba(150, 101, 47, .3);
  opacity: 0;
  transition: opacity 1s ease;
}

.hero10 .gplate::after {
  content: "";
  position: absolute;
  inset: 26px;
  border: 1px dashed rgba(150, 101, 47, .4);
  border-radius: 8px;
}

.hero10.dims .gplate { opacity: .85; }
.hero10.done .gplate { opacity: .30; }

.hero10 .gshadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 430px;
  height: 300px;
  transform: translate(-50%, -50%) translate3d(0, 2px, 0) rotateX(90deg);
  background: radial-gradient(50% 50% at 50% 50%, rgba(27, 22, 16, .24), rgba(27, 22, 16, 0) 70%);
  transition: opacity 1s ease, transform 1.2s ease;
}

.hero10.dims .gshadow { opacity: .4; }

.hero10.done .gshadow {
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(0, 2px, 0) rotateX(90deg) scale(1.06);
}

/* ---------- Copy (Site-Typo, erscheint nach der Animation) ---------- */
.hero10 .copy {
  position: absolute;
  left: var(--hero10-rand);
  top: 50%;
  transform: translateY(-50%);
  max-width: min(680px, 48vw);
  z-index: 5;
}

html.js .hero10 .copy > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.3, .6, .2, 1);
}

html.js .hero10:not(.done) .copy { pointer-events: none; }

html.js .hero10.done .copy > * { opacity: 1; transform: none; }
html.js .hero10.done .copy > *:nth-child(1) { transition-delay: .30s; }
html.js .hero10.done .copy > *:nth-child(2) { transition-delay: .50s; }
html.js .hero10.done .copy > *:nth-child(3) { transition-delay: .66s; }

/* ---------- Endlayout: Split ---------- */
.hero10.done .shift { transform: translateX(23.5vw) translateY(-3.5vh) scale(1.34); }

/* mittlere Viewports: kleiner + weiter rechts — nichts läuft in die Copy;
   Headline eine Stufe kleiner, damit "Brot & Butter" einzeilig bleibt und
   nicht in den HUD hochwächst */
@media (min-width: 861px) and (max-width: 1259px) {
  .hero10.done .shift { transform: translateX(27vw) translateY(-3vh) scale(1.1); }
  .hero10 .start-hero-titel { font-size: clamp(2.6rem, .4rem + 6vw, 4.9rem); }
}

/* kurze Desktop-Viewports (Laptops mit ~600–740px Fensterhöhe):
   Copy leicht nach unten versetzen + Headline eine Stufe kleiner, damit
   "Brot & Butter" nicht unter die Navbar/das Logo rutscht und der
   HUD-Kicker "01 — DAS PRODUKT" (Bottom ~104px) frei bleibt */
@media (min-width: 861px) and (max-height: 740px) {
  .hero10 .copy { top: calc(50% + 2.2rem); }
  .hero10 .start-hero-titel { font-size: clamp(2.6rem, 5vw, 4rem); }
}

@media (max-width: 860px) {
  .hero10 { min-height: 600px; }

  .hero10 .hud {
    padding: 4.6rem var(--rand-seite) 0;
    font-size: 9.5px;
  }

  .hero10 .hud span:last-child { display: none; }

  .hero10 .copy {
    left: var(--rand-seite);
    right: var(--rand-seite);
    top: auto;
    bottom: 5.5vh;
    transform: none;
    max-width: none;
  }

  .hero10:not(.done) .shift { transform: translateX(5vw); }
  .hero10.done .shift { transform: translateY(-25vh) scale(.88); }

  .hero10 .dim { gap: 6px; }
  .hero10 .dim .dl { width: 30px; }
  .hero10 .dim .dl::before { left: 8px; }
  .hero10 .dim .dt { font-size: 9px; padding: 2px 5px; }

  .hero10 .start-hero-claim { margin-top: .9rem; line-height: 1.5; }
  .hero10 .start-hero-ctas { margin-top: 1.15rem; gap: .75rem 1rem; }
  .hero10 .start-hero-ctas .cta--gross { padding: .85rem 1.3rem; font-size: .95rem; }
  .hero10 .replay { display: none; }
}

/* breite Phones / schmale Tablets: stärker verkleinern (Copy braucht Platz) */
@media (min-width: 481px) and (max-width: 640px) {
  .hero10.done .shift { transform: translateY(-26vh) scale(.76); }
}

/* schmale, hohe Phones: Gebäude darf präsenter sein */
@media (max-width: 480px) and (min-height: 740px) {
  .hero10.done .shift { transform: translateY(-21.5vh) scale(1.08); }
}

/* Sofortmodus (Reduced Motion / Seek): eingefrorener Endzustand */
.hero10.instant,
.hero10.instant *,
.hero10.instant *::before,
.hero10.instant *::after {
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.js .hero10 .copy > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero10.done .world.iso { animation: none; }
}


/* Hero10: HUD-Zusatz "Explosionsaxonometrie · M 1:100" am Ende (done) ausblenden */
.hero10 .hud span { transition: opacity .5s ease; }
.hero10.done .hud span:nth-child(2) { opacity: 0; }

/* Footer: Menü (Weitere Objekte / Offene Stellen) SEITEN-mittig statt zwischen Logo und Icon */
.fuss-oben > .fuss-marke,
.fuss-oben > .fuss-social { flex: 1 1 0; }
.fuss-oben > .fuss-social { display: flex; justify-content: flex-end; }

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
/* Ruhiges Rechtstext-Layout im Site-Stil: Fraunces-Abschnittstitel,
   Schibsted-Fließtext in angenehmer Lesebreite (~46rem wie Karriere-Intro). */
.rechts-titel {
  margin-top: 1.4rem;
  font-size: clamp(2.5rem, 1rem + 6.5vw, 6.5rem);
}

.sektion--rechtstext { padding-top: clamp(2.5rem, 5vw, 4rem); }

.rechts-inhalt {
  max-width: 46rem;
  text-wrap: pretty;
}

.rechts-inhalt > * + * { margin-top: 1.1rem; }

.rechts-inhalt p {
  color: var(--tinte-sekundaer);
  line-height: 1.7;
}

/* Abschnittstitel (h2) — Fraunces, mit Luft nach oben wie ein neues Kapitel */
.rechts-h2 {
  font-size: var(--text-statement);
  max-width: 24ch;
  text-wrap: balance;
}

.rechts-inhalt > * + .rechts-h2 { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* Zwischenüberschriften (h3/h4) — Schibsted, kräftig */
.rechts-h3 {
  font-size: var(--text-lead);
  font-weight: 700;
  line-height: 1.3;
}

.rechts-inhalt > * + .rechts-h3 { margin-top: 2.4rem; }

.rechts-h4 {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.4;
}

.rechts-inhalt > * + .rechts-h4 { margin-top: 1.9rem; }

/* Adressblöcke (Firma, Geschäftsführer, verantwortliche Stelle) */
.rechts-inhalt .rechts-adresse {
  color: var(--tinte);
  border-left: 2px solid var(--butter);
  padding-left: 1rem;
}

/* Aufzählungen (z. B. Recht auf Einschränkung der Verarbeitung) */
.rechts-liste {
  margin: 1.1rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: .65rem;
  color: var(--tinte-sekundaer);
  line-height: 1.7;
}

.rechts-liste li::marker { color: var(--kruste); }

/* Links im Rechtstext: Krusten-Farbe + Unterstreichung; lange URLs
   (Datenschutz-Verweise) dürfen umbrechen statt zu überlaufen */
.rechts-inhalt a {
  color: var(--kruste);
  text-decoration: underline;
  text-decoration-color: #96652f66;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: color var(--dauer-kurz) ease;
}

.rechts-inhalt a:hover { color: var(--kruste-hell); }


/* Rechtsseiten: lange Komposita dürfen umbrechen — aber sauber: bevorzugt
   an der <wbr>-Gelegenheit nach "/" (setzt der Generator in Überschriften),
   sonst per deutscher Silbentrennung (lang="de" am <html>); break-word nur
   als letzte Notbremse gegen H-Overflow — NIE mitten im Wort ohne Trennung */
.seite-impressum main h1, .seite-impressum main h2, .seite-impressum main h3,
.seite-datenschutz main h1, .seite-datenschutz main h2, .seite-datenschutz main h3 {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* Auf schmalen Screens (<~476px) die Rechts-H2 leicht mitskalieren, damit
   "Verbraucherstreitbeilegung/" komplett auf Zeile 1 passt und der Umbruch
   am Schrägstrich (<wbr>) greift — ab ~476px gewinnt --text-statement,
   Desktop bleibt unverändert */
.seite-impressum .rechts-h2, .seite-datenschutz .rechts-h2 {
  font-size: min(var(--text-statement), 6.1vw);
}

/* Rechtsseiten (Impressum/Datenschutz): keine Call-to-Action-Buttons —
   weder der Navbar-CTA noch die Sticky-Pille; Nav-Links/Burger/Footer
   bleiben unverändert, alle anderen Seiten behalten ihre CTAs */
.seite-impressum .nav-cta, .seite-datenschutz .nav-cta,
.seite-impressum .klebe-cta, .seite-datenschutz .klebe-cta {
  display: none;
}

/* ==========================================================================
   SEKTION 06 — Typ-Karten-Kopf (Henry-Feedback 07.07.2026)
   a) Der kleine "Beispielrechnung"-Stempel steht als dezenter Eyebrow OBEN,
      der Option-Titel darunter als Karten-Überschrift (Reihenfolge kommt
      aus dem Generator; der Kopf stapelt hier nur als Spalte).
   b) Die Titel "Option 1/2/3: …" bleiben EINZEILIG — sie brechen NIE um:
      white-space: nowrap + Schriftgröße, die im 3-Spalten-Layout
      (1061px … ~1420px) sanft mitskaliert; auf sehr schmalen Phones
      (<=430px) skaliert sie exakt mit der Kartenbreite.
   ========================================================================== */
.typ-kopf {
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
}

/* Eyebrow: der rotierte Stempel bekommt oben eine Winzigkeit Luft, damit
   die Drehung nicht an der Kopf-Oberkante klebt */
.typ-kopf .typ-stempel { margin-top: .1rem; }

.typ-kategorie {
  white-space: nowrap;
  /* 3-Spalten-Layout: bei schmalen Karten leicht kleiner (min 1rem) */
  font-size: clamp(1rem, .35rem + .9vw, 1.15rem);
}

/* Einspaltig (<=1060px): Karte max. 30rem — volle Titelgröße passt */
@media (max-width: 1060px) {
  .typ-kategorie { font-size: 1.15rem; }
}

/* Sehr schmale Phones: Titel skaliert mit der Kartenbreite
   (Karte = 100vw − 2×Seitenrand − 2×Kopf-Padding ≈ 100vw − 84px) */
@media (max-width: 430px) {
  .typ-kategorie { font-size: min(1.15rem, calc((100vw - 84px) / 16)); }
}


/* Zweiter Nav-CTA "Immobilie verkaufen" — sekundärer Outline-Button neben
   dem gefüllten "Kapitalanlage kaufen"; passt sich Hell/Dunkel-Nav an. */
.nav-cta--sekundaer {
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
}
.nav-cta--sekundaer:hover {
  background: var(--butter);
  color: var(--roest);
  border-color: var(--butter);
}
/* Auf Desktop steckt "Immobilie verkaufen" als Button in der Leiste; die
   Menü-Variante ist versteckt. Ab Burger-Breakpoint (<=1050px) umgekehrt:
   Bar-Button raus (Platz), stattdessen als Eintrag im Aufklappmenü. */
.nav-menue-verkaufen { display: none; }
@media (max-width: 1050px) {
  .nav-cta--sekundaer { display: none; }
  .nav-menue-verkaufen { display: block; }
}

/* ==========================================================================
   Qualifizierung – Mobiler Feinschliff (nur Phone-Portrait, <=640px)
   Behebt: (1) zu grosse Abstaende Navbar->Titel und Titel->Typeform,
           (2) zu hohes Typeform-iframe (620px-Boden -> Weissflaeche).
   Desktop bleibt unveraendert; hier greifen ausschliesslich Mobil-Werte.
   ========================================================================== */
/* ---------- Qualifizierung: Desktop-Hero behutsam straffen (nur >=641px) ----------
   Henry-Feedback (woertlich): "Der Titel nimmt mit dem Padding viel Platz ein.
   Aber muss nicht viel sein." -> Gedrosselt wird ausschliesslich der vom Titel
   beanspruchte VERTIKALE Raum (Padding um die H1), NICHT die Schriftgroesse und
   bewusst NICHT die margin-top -> minimalstmoeglicher Eingriff, weiterhin
   editorial-luftig statt mobil-aggressiv (119px ueber / 99px unter dem Titel bei
   1440px; Typeform beginnt ab ~477px klar im ersten Viewport).

   Proportional an --raum-sektion gekoppelt (Faktor .72 oben / .68 unten), damit
   das Padding ueber ALLE Breiten fluide + vorhersehbar mitskaliert, ohne
   handgetunte Stuetzpunkte: 1024 ~146px, 1440 ~176px, 1920 ~199px (raum bei 11rem
   gedeckelt -> bleibt luftig statt zu explodieren). 4.5rem (fixe Navbar) bleibt
   als Sockel voll erhalten -> der Freiraum unter der Navbar ist stets raum*.72
   (>= ~69px bei 641px bis ~127px Ultrawide); der Titel rutscht bei KEINER Breite
   unter die Navbar, auch bei 3-zeiligem Titel nicht (der waechst nur nach unten,
   die Oberkante bleibt fix am padding-top).

   Scope-Schutz: min-width:641px ist disjunkt zum Mobil-Block (<=640px, direkt
   darunter) -> dieser bleibt voellig unberuehrt und gewinnt reihenfolge-
   unabhaengig. An der 640/641-Kante gibt es einen kleinen, bewusst in Kauf
   genommenen Sprung (Freiraum ~14 -> ~69px), der den Titel nur nach unten bewegt
   (weg von der Navbar) und praxisfern ist (exakte Tablet-Breite, nur beim
   Live-Resize sichtbar). KEIN Eingriff in globale .sektion / .sektion--hero /
   --raum-sektion (site-weit, 19 Seiten); iframe-Hoehe unveraendert. */
@media (min-width: 641px) {
  .sektion--quali.sektion--hero {
    padding-top: calc(var(--raum-sektion) * .72 + 4.5rem); /* 216 -> ~176px @1440 */
    padding-bottom: calc(var(--raum-sektion) * .68);       /* 144 -> ~98px  @1440 */
  }
}

@media (max-width: 640px) {
  /* (1a) Hero: nur noch Navbar-Freiraum (4.5rem) + kleines Atmen,
     kein zusaetzliches --raum-sektion oben. Titel bleibt unter der
     fixen Navbar. Beide Klassen -> hoehere Spezifitaet als Desktop-Regel. */
  .sektion--quali.sektion--hero {
    padding-top: calc(4.5rem + 0.9rem);
    padding-bottom: 1.25rem;   /* kleiner Abstand Titel -> Typeform */
  }
  .sektion--quali .quali-titel { margin-top: 0.9rem; }

  /* (1b) Formsektion enger anbinden (padding-top bleibt 0 aus Basisregel). */
  .sektion--quali-form { padding-bottom: 2rem; }

  /* (2) iframe-Hoehe am nutzbaren Viewport statt festem 620px-Boden.
     svh = mobile Browser-Leisten beruecksichtigt. Niedriger Floor (420px)
     verhindert Weissflaeche auf 390x844; Deckel schuetzt grosse Phones. */
  .quali-form iframe {
    min-height: clamp(420px, calc(100svh - 17rem), 640px);
  }
}