/* =========================================================
   VAN TOL Immobilien — Design System
   Farbwelt: Grün #1D4A4A (Flächen, Ton des Logos) · Bronze #A68A67 (Akzent) · Greige #DED9D1 (Linien)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@300;400;500;600&display=swap');

:root{
  --white:#FFFFFF;
  --offwhite:#F8F8F6;   /* Hinterlegungsfarbe: sehr helles, nahezu neutrales Grau */
  --greige:#DED9D1;
  --taupe:#A79D91;
  --grau:#6E6E6E;   /* neutrales Grau fuer Fussnoten ohne Warmton */
  --anthracite:#292929;
  --green:#1D4A4A;        /* VAN TOL Logo-Grün — derselbe Ton wie im Logo */
  --green-tief:#163A3A;   /* dasselbe Gruen, rund 20 % dunkler — fuer dunkle Baender */
  --green-dark:#153635;
  --black:#292929;   /* kein reines Schwarz mehr — Anthrazit ist die dunkelste Textfarbe */
  --bronze:#A68A67;
  /* Bronze als grosse Flaeche: vier Prozent aufgehellt, damit Anthrazit
     darauf 4,75:1 erreicht und die WCAG-Schwelle sicher haelt. */
  --bronze-flaeche:#AA8F6D;
  --bronze-dark:#8C7454;
  --bronze-tief:#6E5A41;  /* dunkles Bronze fuer grosse Flaechen, Weiss darauf 6,6:1 */
  --bronze-nav:#8A7252;  /* zwei Nuancen dunkler — erreicht 4,56:1 auf Weiss (WCAG AA) */
  --bronze-hell:#C9B49A; /* aufgehellt fuer Schrift auf dunkelgruenem Grund (6,2:1) */

  --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-marke:'Cinzel', Georgia, 'Times New Roman', serif;  /* Anmutung der Wortmarke */
  --font-sans:'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Groesse der Ueberschriften — wie das Zitat auf den Titelbildern */
  --titelgroesse:clamp(1.2rem, 1.95vw, 1.75rem);
  --maxw:1280px;
  --gutter:clamp(20px, 5vw, 64px);
  --radius:2px;
  --transition:200ms ease;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--anthracite);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
/* Formularfelder und Schaltflaechen erben Schrift und Textfarbe — sonst
   setzt der Browser reines Schwarz statt Anthrazit. */
input,select,textarea,button,option{font-family:inherit; color:var(--anthracite);}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}

h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-weight:500;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:var(--titelgroesse); font-weight:400;}
h2{font-size:var(--titelgroesse);}
h3{font-size:clamp(1.25rem, 2vw, 1.6rem);}
p{margin:0 0 1em;}
/* Die Ueberzeile nimmt die Anmutung der Wortmarke auf: Serifenschrift,
   normale Strichstaerke, weite Sperrung — wie „VAN TOL" im Logo. */
.eyebrow{
  font-family:var(--font-marke);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.8125rem;
  /* etwas kraeftiger, naeher an der Strichstaerke der Wortmarke */
  font-weight:600;
  color:var(--bronze-nav);
  margin-bottom:.9em;
  display:block;
}
.lede{font-size:1.15rem; color:var(--anthracite); max-width:60ch;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.95em 1.9em;
  border:1px solid var(--anthracite);
  border-radius:var(--radius);
  font-size:.85rem;
  letter-spacing:.03em;
  font-weight:500;
  background:transparent;
  color:var(--anthracite);
  transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover{background:var(--green); color:var(--white);}
.btn-primary{
  background:var(--green);
  color:var(--white);
  border-color:var(--green);
}
.btn-primary:hover{background:var(--bronze-dark); border-color:var(--bronze-dark);}
.btn-bronze{
  background:var(--bronze);
  border-color:var(--bronze);
  color:var(--white);
}
.btn-bronze:hover{background:var(--bronze-dark); border-color:var(--bronze-dark);}
.btn-ghost{
  border-color:rgba(255,255,255,.6);
  color:var(--white);
}
.btn-ghost:hover{background:var(--white); color:var(--anthracite);}
.btn-block{width:100%; justify-content:center;}
.btn-sm{padding:.65em 1.3em; font-size:.78rem;}

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--green-tief);
  color:var(--offwhite);
  font-size:.78rem;
  letter-spacing:.02em;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:8px;
  padding-bottom:8px;
}
.topbar a{opacity:.9; transition:opacity var(--transition);}
.topbar a:hover{opacity:1; color:var(--bronze);}
.topbar-links{display:flex; gap:22px;}
@media (max-width:640px){
  .topbar .container{gap:10px;}
  .topbar-links:last-child{display:none;}
}

/* ---------- Header / Navigation ---------- */
/* Die Kopfleiste liegt wie eine eigene Ebene ueber der Seite: eine feine
   Trennlinie oben, ein weicher, breit gestreuter Schatten nach unten
   (Referenz RIEDEL). Beim Scrollen wird der Schatten etwas kraeftiger. */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(222,217,209,.9);
  border-bottom:1px solid rgba(222,217,209,.55);
  box-shadow:0 10px 26px -14px rgba(17,17,17,.24), 0 2px 5px rgba(17,17,17,.04);
  transition:box-shadow 260ms ease, background 260ms ease;
}
header.site-header.gescrollt{
  background:rgba(255,255,255,.99);
  box-shadow:0 16px 34px -16px rgba(17,17,17,.32), 0 3px 7px rgba(17,17,17,.06);
}
/* Logo links am Rand, Menuepunkte rechts aussen (Referenz STAUSS). */
.nav-wrap{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  padding:20px var(--gutter);
  /* gleicher Abstand wie zwischen den Menuepunkten selbst, damit die
     Zwischenraeume durchgehend gleich sind */
  column-gap:clamp(16px, 2.9vw, 44px);
}
/* Das Logo sitzt links am Rand und ragt unter die Kopfleiste hinaus:
   nur die gruene Flaeche, kein Rahmen. Der Schriftzug behaelt seine Groesse. */
.logo{
  grid-column:1; grid-row:1;
  justify-self:start;
  display:block;
  line-height:0;          /* keine zusätzliche Zeilenhöhe um das Bild */
  position:relative; z-index:6;
  /* Logokachel und Fusszeile fuehren dasselbe tiefe Gruen wie alle dunklen
     Baender der Seite (--green-tief). */
  background:var(--green-tief);
  /* etwas quadratischer: mehr Luft oben und unten, weniger an den Seiten */
  padding:clamp(24px, 2.6vw, 38px) clamp(16px, 1.8vw, 26px);
  box-shadow:0 14px 26px -16px rgba(17,17,17,.4);
  margin-bottom:clamp(-64px, -4.4vw, -34px);
}
/* Logohöhe nach RIEDEL-Maßstab: die Wortmarke erreicht dort etwa die
   2,8-fache Höhe der Menüschrift. */
/* Schriftzug in Originalgroesse, nur mit gruener Flaeche hinterlegt */
.logo img{height:clamp(35px, 3.2vw, 46px); width:auto; display:block;}
/* etwas groesser und in der Strichstaerke der Wortmarke */
/* Sieben Menuepunkte brauchen engere Abstaende als fuenf. Zweiwortige
   Punkte bleiben einzeilig — sonst wird die Leiste zweizeilig. */
.main-nav{display:flex; gap:clamp(14px, 2.2vw, 34px); font-size:clamp(.875rem, 1.02vw, 1.02rem); font-weight:600; letter-spacing:.02em;}
.main-nav a{white-space:nowrap;}
/* Alle Menuepunkte stehen in einer Leiste — nur so sind die Zwischenraeume
   bei jeder Fensterbreite gleich gross. */
.main-nav{grid-column:2; grid-row:1; justify-self:end;}
.main-nav a{
  position:relative;
  padding:6px 0;
  color:var(--bronze-nav);
  transition:color var(--transition);
}
.main-nav a:hover{color:var(--bronze);}
.main-nav a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--bronze);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--transition);
}
.main-nav a:hover::after,
.main-nav a.active::after{transform:scaleX(1);}
.main-nav a.active{color:var(--bronze);}
.nav-icons{display:flex; gap:16px; align-items:center; font-size:.8rem;}
.nav-icons a{display:flex; align-items:center; gap:6px;}
.burger{display:none; background:none; border:0; font-size:1.4rem; color:var(--anthracite); cursor:pointer;}

/* ---------- Aufklapp-Menü ("Leistungen") ----------
   Wie in der Referenz: die ganze Seite wird abgedunkelt, die Einträge
   stehen linksbündig unter ihrem Hauptmenüpunkt. */
.nav-drop{position:relative; display:flex;}
.nav-drop > a::before{
  content:''; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--bronze);
  opacity:0; transition:opacity var(--transition);
}
.nav-drop.open > a::before{opacity:1;}
.nav-drop.open > a{color:var(--bronze-dark);}

.mega{
  display:none;
  position:fixed; inset:0; z-index:90;
  background:rgba(29,74,74,.78);
  backdrop-filter:blur(2px);
}
.mega.open{display:block;}
.mega-inner{
  position:absolute;
  top:var(--drop-top, 120px);
  left:var(--drop-left, 18vw);
}
.mega-title{
  display:block; font-family:var(--font-serif); font-weight:400;
  font-size:1.2rem; color:var(--bronze);
}
.mega-title::after{
  content:''; display:block; width:44px; height:1px;
  background:var(--bronze); margin-top:12px;
}
.mega-list{
  margin-top:26px;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:13px;
}
.mega-list a{
  color:var(--white); font-size:.84rem; line-height:1.5;
  display:inline-block; position:relative; padding-bottom:2px;
  transition:color var(--transition);
}
.mega-list a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--bronze); transform:scaleX(0); transform-origin:left;
  transition:transform var(--transition);
}
.mega-list a:hover{color:var(--bronze);}
.mega-list a:hover::after{transform:scaleX(1);}

/* Kopfzeile bleibt über der Abdunklung sichtbar */
.topbar{position:relative; z-index:101;}
/* Reiter und WhatsApp-Knopf treten hinter die Abdunklung zurück */
body.mega-open .contact-tab,
body.mega-open .floating-whatsapp{opacity:0; pointer-events:none;}

/* Unterpunkte im mobilen Menü */
.mobile-nav .sub{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:4px 0 10px 18px; border-bottom:1px solid var(--offwhite);
}
.mobile-nav .sub a{font-size:.86rem; color:#6b655f; padding:8px 0; border-bottom:0;}
.mobile-nav .sub a:hover{color:var(--bronze-dark);}

/* unterhalb der vollen Breite etwas weniger Luft, damit nichts gedrängt steht */
@media (max-width:1400px){ .nav-wrap{gap:clamp(33px, 9.5vw, 133px);} }

@media (max-width: 1200px){
  .nav-wrap{grid-template-columns:auto 1fr auto;}
  .logo{grid-column:2; justify-self:start;}
  .logo img{height:37px;}
  .main-nav{display:none;}
  .burger{display:block; grid-column:3;}
}

/* Mobile nav drawer */
.mobile-nav{
  display:none;
  flex-direction:column;
  background:var(--white);
  border-top:1px solid var(--greige);
  padding:10px var(--gutter) 26px;
}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:12px 0; border-bottom:1px solid var(--offwhite); font-size:.95rem;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  /* 100vh minus 15 %, danach noch einmal 10 % hoeher */
  min-height:93.5vh;
  min-height:93.5svh; /* moderne Browser: ohne Adressleisten-Sprung auf Mobil */
  display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
  color:var(--white);
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  /* oben transparent, damit das Bild wirkt – unten kräftig genug für weiße Schrift */
  background:linear-gradient(180deg, rgba(17,17,17,.028) 0%, rgba(17,17,17,.042) 45%, rgba(17,17,17,.21) 74%, rgba(17,17,17,.322) 100%);
}
/* Titelbild: VAN TOL Stadtvilla in der Freiburger Wiehre.
   Kleinere Datei für schmale Bildschirme, große nur ab Tablet aufwärts. */
.hero--titelbild{background-image:url('../img/titelbild-vantol-1400.jpg');}
@media (min-width:900px){
  .hero--titelbild{background-image:url('../img/titelbild-vantol-2400.jpg');}
}
/* Helle Fassade + weiße Schrift: dieses Motiv braucht einen kräftigeren
   Verlauf als der Standard, sonst ist die Headline nicht lesbar. */
.hero--titelbild::before{
  background:linear-gradient(180deg,
    rgba(17,17,17,.126) 0%, rgba(17,17,17,.238) 36%,
    rgba(17,17,17,.49) 66%, rgba(17,17,17,.616) 100%);
}

.hero-content{position:relative; z-index:2; padding:64px var(--gutter) 72px; max-width:900px;}
.hero .eyebrow{color:var(--greige);}
.hero h1{color:var(--white); margin-bottom:.4em;}
.hero .lede{color:var(--greige); max-width:52ch;}
.hero-actions{display:flex; gap:14px; margin-top:1.6em; flex-wrap:wrap;}

.page-hero{
  /* 91vh minus 15 % = 77vh — die Kartenansicht auf der Immobilienseite ist
     davon ausgenommen und behaelt ihre eigene Hoehe. */
  min-height:84.7vh;   /* 10 Prozent hoeher als zuvor */
  min-height:77svh;
  background-size:cover;
  background-position:center;
  position:relative;
  color:var(--white);
  display:flex; align-items:flex-end;
}
.page-hero::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,17,17,.042) 0%, rgba(17,17,17,.063) 42%, rgba(17,17,17,.224) 76%, rgba(17,17,17,.322) 100%);
}
.page-hero .hero-content{padding:56px var(--gutter) 52px;}
.page-hero h1{color:var(--white); margin-bottom:.2em;}

/* Reines Bildband ohne Textauflage (Headline steht darunter im Inhaltsbereich).
   Ohne Text wird auch der Abdunklungs-Verlauf nicht gebraucht. */
.page-hero--plain::before{background:none;}

/* Helle Motive (z. B. der lichte Besprechungsraum auf der Wissensseite)
   brauchen unten mehr Abdunklung, damit Weiss darauf sicher lesbar bleibt. */
.page-hero--hell::before{
  background:linear-gradient(180deg,
    rgba(17,17,17,.07) 0%, rgba(17,17,17,.112) 38%,
    rgba(17,17,17,.364) 74%, rgba(17,17,17,.476) 100%);
}

.breadcrumb{
  font-size:.76rem; letter-spacing:.03em; color:var(--greige);
  position:relative; z-index:2; margin-bottom:12px;
}
.breadcrumb a{opacity:.85;}
.breadcrumb a:hover{color:var(--bronze);}
.breadcrumb--dark{color:#7a746e;}
.breadcrumb--dark a:hover{color:var(--bronze-dark);}

/* Einleitungsblock unterhalb des Headline-Bildes (Referenz WALDE).
   Die Proportionen sind aus der Referenz ausgemessen und als Anteil der
   Inhaltsbreite hinterlegt, damit sie auf jeder Bildschirmbreite stimmen:
   Headline linksbuendig ueber die volle Breite, der Fliesstext beginnt bei
   25,1 % und ist 47,2 % breit (rund 68 Zeichen je Zeile), die
   Ansprechpartner-Karte ist 16,4 % breit und schliesst rechts buendig ab.
   Headline zu Fliesstext verhaelt sich wie 1,9 : 1, Zeilenabstand 1,6. */
.intro-head{max-width:none; margin-bottom:97px;}
/* Gleiche Schriftgroesse und gleicher Rhythmus wie auf der Verkaufsseite,
   damit der Einstiegsblock auf allen Seiten identisch wirkt. */
.intro-head h1,
.intro-head h2{
  font-size:var(--titelgroesse);
  line-height:1.18;
  margin-bottom:0; max-width:none;
}
/* Masse aus der Referenz (Inhaltsbreite 1123 px): Einzug 25,05 %,
   Zeilenlaenge 47,2 % (rund 66 Zeichen), Abstand von der Unterkante der
   Headline zur ersten Textzeile 111 px. */
.intro-text{margin-left:25.05%; max-width:47.2%; margin-top:106px;}
.intro-text .lede{font-size:1rem; max-width:none; line-height:1.6;}
.intro-text .lede + .lede{margin-top:1.5em;}
.intro-text .lede:last-child{margin-bottom:0;}
@media (max-width:1024px){
  .intro-text{margin-left:22%; max-width:56%; margin-top:72px;}
}
@media (max-width:860px){
  .intro-head{margin-bottom:52px;}
  .intro-text{margin-left:0; max-width:34em; margin-top:48px;}
}
@media (max-width:700px){
  .intro-head{margin-bottom:34px;}
  .intro-text{max-width:34em; margin-top:34px;}
}
/* Einstiegsblock als eigener Abschnitt direkt unter dem Titelbild: unten
   kein zusaetzlicher Abstand, der folgende Abschnitt bringt seinen eigenen
   Innenabstand mit. */
.intro-block{padding-bottom:0;}
.intro-block .intro-head{margin-bottom:0;}

/* ---------- Sections ---------- */
section{padding:88px 0;}
section.tight{padding:56px 0;}
.section-offwhite{background:var(--offwhite);}
/* Zwei hinterlegte Abschnitte hintereinander bekommen eine feine Trennlinie,
   damit sie nicht zu einer Flaeche verschmelzen. */
.section-offwhite + .section-offwhite{border-top:1px solid var(--greige);}
.section-anthracite{background:var(--green-tief); color:var(--offwhite);}
.section-anthracite h2, .section-anthracite h3{color:var(--white);}
.section-head{max-width:720px; margin-bottom:52px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------- Five Pillars (Home) ---------- */
.pillars{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:var(--greige);
}
.pillar{
  background:var(--white);
  padding:40px 28px;
  min-height:320px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:background var(--transition);
  position:relative;
}
.pillar:hover{background:var(--offwhite);}
.pillar .num{font-family:var(--font-serif); font-size:.85rem; color:var(--bronze); margin-bottom:auto;}
.pillar h3{margin-bottom:.3em;}
.pillar p{font-size:.88rem; color:var(--anthracite); margin-bottom:1em;}
.pillar .btn{margin-top:auto;}
@media (max-width: 1080px){.pillars{grid-template-columns:repeat(3,1fr);}}
@media (max-width: 680px){.pillars{grid-template-columns:1fr 1fr;}}
@media (max-width: 460px){.pillars{grid-template-columns:1fr;}}

/* ---------- USP strip ---------- */
.usp-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:44px 40px;
}
.usp{border-top:1px solid var(--taupe); padding-top:18px;}
.usp .num{font-family:var(--font-serif); color:var(--bronze); font-size:1.1rem;}
@media (max-width:820px){.usp-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.usp-grid{grid-template-columns:1fr;}}

/* ---------- Cards / Property grid ---------- */
/* ---------- Filterleiste (Referenz RIEDEL) ----------
   Kein Kasten, sondern fünf Spalten mit zentrierter Bronze-Beschriftung
   über einer feinen Bronze-Linie. */
.filter-bar{
  display:grid;
  grid-template-columns:2.26fr 1.11fr 1.41fr 1.09fr 1.07fr;
  gap:30px;
  align-items:start;
  background:none; border:0; padding:0;
  /* Deutlicher Abstand nach oben: Darueber steht der Einstieg mit der
     Ansprechpartnerin — ohne Luft stossen Schaltflaeche und Filterzeile
     aneinander. */
  margin:clamp(52px, 5.4vw, 92px) 0 28px;
}
.filter-col .flabel{
  display:block; text-align:center;
  font-size:.95rem; color:var(--bronze-dark);
  padding-bottom:11px;
  border-bottom:1px solid var(--bronze);
  margin-bottom:21px;
}

/* Checkbox-Gruppen (Objektarten, Interesse) */
.filter-checks{display:flex; flex-wrap:wrap; gap:5px 17px;}
.filter-checks label{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.9rem; line-height:1.25; color:var(--anthracite); cursor:pointer;
  white-space:nowrap;
}
.filter-checks input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  width:14px; height:14px; margin:0; flex-shrink:0;
  border:1px solid var(--taupe); background:var(--white);
  position:relative; cursor:pointer;
  transition:border-color var(--transition), background var(--transition);
}
.filter-checks input[type=checkbox]:hover{border-color:var(--bronze);}
.filter-checks input[type=checkbox]:checked{background:var(--bronze); border-color:var(--bronze);}
.filter-checks input[type=checkbox]:checked::after{
  content:''; position:absolute; left:4px; top:1px;
  width:4px; height:8px;
  border:solid var(--white); border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}

/* Rahmenlose Auswahlfelder (Region, Sortierung) */
.filter-select{position:relative;}
.filter-select select{
  width:100%; appearance:none; -webkit-appearance:none;
  background:transparent; border:0; border-radius:0;
  padding:0 26px 0 0;
  font-size:.9rem; color:var(--anthracite); cursor:pointer;
  text-overflow:ellipsis;
}
.filter-select select:focus{outline:none;}
.filter-select::after{
  content:''; position:absolute; right:5px; top:6px;
  width:8px; height:8px; pointer-events:none;
  border-right:1.5px solid var(--anthracite);
  border-bottom:1.5px solid var(--anthracite);
  transform:rotate(45deg);
}

/* Wohnflächen-Schieberegler mit zwei Griffen */
.range-wrap{position:relative; padding-top:2px;}
.range-track{
  position:relative; height:1px; background:var(--taupe); margin:9px 0 0;
}
.range-track::before, .range-track::after{
  content:''; position:absolute; top:-5px; width:1px; height:11px; background:var(--anthracite);
}
.range-track::before{left:0;}
.range-track::after{right:0;}
.range-fill{position:absolute; top:0; height:1px; background:var(--anthracite);}
.range-wrap input[type=range]{
  position:absolute; left:0; top:4px;
  width:100%; height:12px; margin:0;
  appearance:none; -webkit-appearance:none;
  background:none; pointer-events:none;
}
.range-wrap input[type=range]:focus{outline:none;}
.range-wrap input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:all;
  width:9px; height:14px; border-radius:1px;
  background:var(--anthracite); border:0; cursor:ew-resize;
}
.range-wrap input[type=range]::-moz-range-thumb{
  pointer-events:all;
  width:9px; height:14px; border-radius:1px;
  background:var(--anthracite); border:0; cursor:ew-resize;
}
.range-ticks{
  display:flex; justify-content:space-between;
  margin-top:11px; font-size:.68rem; color:var(--taupe);
}
@media (max-width:1080px){
  .filter-bar{grid-template-columns:1.6fr 1fr 1.4fr; gap:34px 30px;}
}
@media (max-width:700px){
  .filter-bar{grid-template-columns:1fr; gap:30px;}
}

.filter-toggle{display:flex; gap:8px;}
.filter-toggle button{
  flex:1; padding:10px; border:1px solid var(--greige); background:var(--white);
  font-size:.8rem; border-radius:var(--radius);
}
.filter-toggle button.active{background:var(--green); color:var(--white); border-color:var(--green);}

/* Breiterer Container nur für das Objektraster (Referenz RIEDEL:
   die Objektbilder laufen deutlich breiter als Text und Filterleiste) */
.container-wide{
  max-width:1720px; margin:0 auto;
  padding:0 clamp(20px, 4.5vw, 64px);
}

.results-meta{
  text-align:center; margin-bottom:15px;
  font-size:.95rem; line-height:1.35; color:var(--bronze-dark);
}

.property-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:14px;
  row-gap:52px;
}
@media (max-width:980px){.property-grid{grid-template-columns:1fr 1fr; row-gap:46px;}}
@media (max-width:640px){.property-grid{grid-template-columns:1fr; row-gap:40px;}}

/* Objektkachel: kein Rahmen, kein Kasten – das Bild trägt die Kachel */
.property-card{display:block; background:none; border:0;}
.property-card .thumb{
  position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--greige);
}
.property-card .thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 600ms ease;
}
.property-card:hover .thumb img{transform:scale(1.04);}
.property-card .tag{
  position:absolute; top:16px; left:16px; z-index:2;
  background:var(--bronze); color:var(--white);
  font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; padding:5px 10px;
}
/* Nur drei Status sind zugelassen: Neu im Angebot (Bronze),
   Reserviert (Gruen), Verkauft (Anthrazit). */
.property-card .tag--reserviert{background:var(--green);}
.property-card .tag--verkauft{background:var(--anthracite);}
.property-card .body{padding:17px 0 0;}
.property-card .loc{
  display:flex; align-items:center; gap:8px;
  font-size:.9rem; line-height:1.3; color:var(--bronze-dark);
  text-transform:none; letter-spacing:0; margin-bottom:8px;
}
.property-card .loc svg{width:13px; height:16px; fill:var(--bronze); flex-shrink:0;}
.property-card h3{
  font-size:1.22rem; line-height:1.34; font-weight:400;
  margin-bottom:11px;
  min-height:2.68em;   /* zwei Zeilen — hält die Kennzahlen auf einer Grundlinie */
  transition:color var(--transition);
}
.property-card:hover h3{color:var(--bronze-dark);}
.property-card .facts{font-size:.93rem; color:#6b655f;}

/* ---------- Object detail ---------- */
.obj-gallery{display:grid; grid-template-columns:3fr 1fr; gap:6px; margin-bottom:0;}
.obj-gallery .main-img{aspect-ratio:16/10; overflow:hidden; background:var(--greige);}
.obj-gallery .main-img img{width:100%; height:100%; object-fit:cover; cursor:zoom-in;}
.obj-gallery .thumbs{display:flex; flex-direction:column; gap:6px; max-height:520px; overflow:hidden;}
.obj-gallery .thumbs img{aspect-ratio:4/3; object-fit:cover; cursor:pointer; opacity:.8; transition:opacity var(--transition);}
.obj-gallery .thumbs img:hover{opacity:1;}
@media (max-width:780px){.obj-gallery{grid-template-columns:1fr;} .obj-gallery .thumbs{flex-direction:row; max-height:none;} .obj-gallery .thumbs img{flex:1;}}

.obj-layout{display:grid; grid-template-columns:2fr 1fr; gap:60px; align-items:start;}
@media (max-width:900px){.obj-layout{grid-template-columns:1fr;}}

.obj-datatable{width:100%; border-collapse:collapse; font-size:.92rem; margin:1.2em 0;}
.obj-datatable tr{border-bottom:1px solid var(--offwhite);}
.obj-datatable td{padding:10px 0; }
.obj-datatable td:first-child{color:#7a746e; width:45%;}
.obj-datatable td:last-child{font-weight:500;}

.agent-card{
  background:var(--offwhite); border:1px solid var(--greige); padding:26px;
  display:flex; gap:16px; align-items:flex-start; margin-bottom:18px;
}
.agent-card .avatar{width:64px; height:64px; border-radius:50%; overflow:hidden; background:var(--greige); flex-shrink:0;}
.agent-card .avatar img{width:100%; height:100%; object-fit:cover;}
.agent-card h4{margin-bottom:.1em; font-family:var(--font-sans); font-weight:600; font-size:.98rem;}
.agent-card .role{font-size:.78rem; color:#7a746e; margin-bottom:.6em;}
.agent-card .contact-line{font-size:.85rem; margin-bottom:2px;}

.energy-scale{display:flex; height:34px; width:100%; border-radius:3px; overflow:hidden; margin:14px 0 8px;}
.energy-scale span{flex:1; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.75rem; font-weight:600;}

.expose-form{background:var(--offwhite); border:1px solid var(--greige); padding:32px; margin-top:40px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-grid .full{grid-column:1/-1;}
.form-grid label{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:#7a746e; margin-bottom:6px;}
.form-grid input, .form-grid select, .form-grid textarea{
  width:100%; padding:11px 13px; border:1px solid var(--greige); background:var(--white); border-radius:var(--radius); font-size:.88rem;
}
.form-grid textarea{min-height:100px; resize:vertical;}
.form-note{font-size:.78rem; color:#7a746e; margin-top:14px;}
.checkline{display:flex; gap:10px; align-items:flex-start; font-size:.78rem; color:var(--anthracite); margin-top:14px;}
.checkline input{margin-top:3px;}

/* ---------- Life situations / image tiles ---------- */
.tile-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:980px){.tile-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.tile-grid{grid-template-columns:1fr;}}
.tile{
  position:relative; aspect-ratio:3/4; overflow:hidden; background-size:cover; background-position:center;
  display:flex; align-items:flex-end; color:var(--white);
}
.tile::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,17,17,0) 40%, rgba(17,17,17,.78) 100%);}
.tile-label{position:relative; z-index:2; padding:22px; font-family:var(--font-serif); font-size:1.15rem;}
.tile:hover .tile-label{color:var(--bronze);}

/* ---------- Article / guide cards ---------- */
.article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
@media (max-width:980px){.article-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.article-grid{grid-template-columns:1fr;}}
.article-card{border:1px solid var(--greige);}
.article-card .thumb{aspect-ratio:16/10; background-size:cover; background-position:center;}
.article-card .body{padding:22px;}
.article-card .eyebrow{margin-bottom:.6em;}
.article-card h3{font-size:1.05rem;}
.article-card .read-more{font-size:.8rem; color:var(--bronze-dark); font-weight:500; margin-top:.8em; display:inline-block;}

/* ---------- FAQ accordion ---------- */
.faq-item{border-bottom:1px solid var(--greige);}
.faq-q{
  width:100%; text-align:left; background:none; border:0; padding:26px 0;
  display:flex; justify-content:space-between; align-items:center; gap:28px;
  font-family:var(--font-serif); font-size:1.15rem; line-height:1.35;
  color:var(--anthracite); cursor:pointer;
  transition:color var(--transition);
}
.faq-q:hover{color:var(--bronze-dark);}
.faq-q:focus-visible{outline:2px solid var(--bronze); outline-offset:3px;}
.faq-q .icon{font-size:1.3rem; color:var(--bronze); transition:transform var(--transition); font-weight:300;}
.faq-item.open .faq-q .icon{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height var(--transition);}
.faq-a p{padding-bottom:28px; color:var(--anthracite); line-height:1.7; max-width:70ch;}

/* ---------- Steps / process ---------- */
.steps{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:1px; background:var(--greige); margin-top:20px;}
.step{background:var(--white); padding:26px 20px; font-size:.85rem;}
.step .num{font-family:var(--font-serif); color:var(--bronze); display:block; margin-bottom:10px; font-size:1.2rem;}
@media (max-width:980px){.steps{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.steps{grid-template-columns:1fr 1fr;}}

/* ---------- Video stories ---------- */
.video-row{display:flex; gap:14px; overflow-x:auto; padding-bottom:10px;}
.video-tile{
  flex:0 0 220px; aspect-ratio:9/16; background:var(--taupe); position:relative;
  display:flex; align-items:flex-end; overflow:hidden; background-size:cover; background-position:center;
}
.video-tile::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,17,17,.1), rgba(17,17,17,.85));}
.video-tile .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--anthracite);
}
.video-tile .label{position:relative; z-index:2; padding:16px; color:var(--white); font-size:.85rem;}

/* ---------- WhatsApp block ---------- */
.whatsapp-block{
  background:var(--green-tief); color:var(--white);
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:28px;
  padding:40px 44px;
}
.whatsapp-block h3{color:var(--white); margin-bottom:.2em;}
.whatsapp-block p{color:var(--greige); margin-bottom:0;}
@media (max-width:700px){.whatsapp-block{grid-template-columns:1fr; text-align:left;}}

/* ---------- Kontakt-Reiter am rechten Rand (Referenz RIEDEL) ---------- */
.contact-tab{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:150;
  background:var(--bronze); color:var(--white);
  /* Schmaler Reiter: weniger Luft an den Seiten, etwas kleinere Schrift. */
  border:0; padding:18px 6px 21px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  font-family:var(--font-sans);
  font-size:.6375rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  transition:background var(--transition);
}
.contact-tab:hover{background:var(--bronze-dark);}
.contact-tab .lbl{writing-mode:vertical-rl;}
.contact-tab .chev{font-size:.9rem; line-height:1; transform:rotate(90deg);}
@media (max-width:640px){.contact-tab{padding:14px 5px 16px; font-size:.5875rem;}}

/* ---------- Kontakt-Overlay ---------- */
.contact-overlay{
  position:fixed; inset:0; z-index:300;
  /* Neutraler Anthrazit-Schleier statt Gruen (Referenz RIEDEL) — die
     dahinterliegende Seite bleibt als weiche Struktur sichtbar. */
  background:rgba(41,41,41,.93);
  backdrop-filter:blur(7px);
  display:none;
  overflow-y:auto;
  color:var(--white);
}
.contact-overlay.open{display:block;}
body.overlay-open{overflow:hidden;}
/* Reiter und WhatsApp-Button ausblenden, solange das Overlay offen ist */
body.overlay-open .contact-tab,
body.overlay-open .floating-whatsapp{opacity:0; pointer-events:none;}

.contact-close{
  position:absolute; top:26px; right:34px;
  background:none; border:0; color:var(--white);
  font-size:1.8rem; line-height:1; font-weight:300;
  opacity:.9; transition:opacity var(--transition), transform var(--transition);
}
.contact-close:hover{opacity:1; transform:rotate(90deg);}

.contact-overlay-inner{
  max-width:var(--maxw); margin:0 auto;
  padding:54px var(--gutter) 72px;
}
.contact-overlay h2{
  color:var(--white); font-weight:400;
  font-size:var(--titelgroesse);
  margin-bottom:62px;
}
.contact-cols{
  display:grid;
  grid-template-columns:170px 300px minmax(0,1fr);
  gap:0 clamp(36px, 5vw, 78px);
  align-items:start;
}

/* Umschalter links (Referenz RIEDEL) */
.contact-modes{display:flex; flex-direction:column; gap:56px; padding-top:6px;}
.contact-modes .mode{
  display:flex; align-items:center; gap:16px;
  background:none; border:0; cursor:pointer;
  font-family:var(--font-sans); font-size:.8125rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--taupe); transition:color var(--transition);
}
.contact-modes .mode svg{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.5;}
.contact-modes .mode:hover{color:var(--greige);}
.contact-modes .mode.active{color:var(--white);}

/* Portraetspalte mit Bildunterschrift (Referenz Bild 3) */
.contact-portrait{text-align:center;}
.contact-portrait img{
  width:100%; aspect-ratio:1/1; border-radius:50%; object-fit:cover; display:block;
  margin-bottom:26px;
}
.cp-rolle{
  font-size:.8125rem; letter-spacing:.02em; color:var(--taupe);
  line-height:1.45; margin:0 0 6px;
}
.cp-name{
  font-family:var(--font-serif); font-size:1.5rem; line-height:1.25;
  color:var(--white); margin:0 0 6px;
}
.cp-qual{font-size:.875rem; color:var(--greige); margin:0 0 18px;}
.cp-tel{
  display:inline-flex; align-items:center; gap:10px;
  font-size:1rem; color:var(--white);
  transition:color var(--transition);
}
.cp-tel svg{width:18px; height:18px; fill:none; stroke:var(--bronze); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.cp-tel:hover{color:var(--bronze);}

/* Inhaltsspalte */
.contact-panes{padding-top:4px;}
.contact-pane{display:none;}
.contact-pane.active{display:block;}
.contact-pane h3{
  font-size:clamp(1.25rem, 1.7vw, 1.5rem); color:var(--white);
  margin:0 0 14px;
}
.cp-text{
  font-size:1rem; line-height:1.65; color:var(--greige);
  max-width:46ch; margin:0 0 34px;
}

/* Kontaktkanaele im Modus "Anrufen" */
.cp-kanaele{display:flex; flex-direction:column; gap:2px;}
.cp-kanal{
  display:flex; align-items:center; gap:18px;
  padding:18px 22px;
  background:rgba(255,255,255,.045);
  color:var(--white);
  transition:background var(--transition);
}
.cp-kanal:hover{background:rgba(255,255,255,.09); color:var(--white);}
.cp-kanal svg{
  width:22px; height:22px; flex-shrink:0;
  fill:none; stroke:var(--bronze); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.cp-kanal span{display:block; font-size:.8125rem; line-height:1.5; color:var(--taupe);}
.cp-kanal b{display:block; font-size:1rem; font-weight:600; color:var(--white); margin-bottom:2px;}

/* Formular im Modus "Nachricht" (Referenz Bild 3, auf dunklem Grund) */
.cp-form{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; max-width:640px;}
.cp-feld--voll{grid-column:1 / -1;}
.cp-feld label{
  display:block; font-size:.75rem; letter-spacing:.04em;
  color:var(--taupe); margin-bottom:7px;
}
.cp-feld input,
.cp-feld select,
.cp-feld textarea{
  width:100%; box-sizing:border-box;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.22);
  color:var(--white);
  font-family:var(--font-sans); font-size:.9375rem;
  padding:13px 14px;
  transition:border-color var(--transition), background var(--transition);
}
.cp-feld textarea{resize:vertical; min-height:96px;}
.cp-feld select{appearance:none; background-image:none;}
.cp-feld select option{background:var(--anthracite); color:var(--white);}
.cp-feld input::placeholder,
.cp-feld textarea::placeholder{color:rgba(255,255,255,.38);}
.cp-feld input:focus,
.cp-feld select:focus,
.cp-feld textarea:focus{
  outline:none; border-color:var(--bronze); background:rgba(255,255,255,.09);
}
.cp-check{
  grid-column:1 / -1;
  display:flex; align-items:flex-start; gap:12px;
  font-size:.8125rem; line-height:1.5; color:var(--greige);
  margin-top:4px;
}
.cp-check input{
  appearance:none; width:19px; height:19px; flex-shrink:0; margin-top:1px;
  border:1px solid rgba(255,255,255,.35); background:none; cursor:pointer;
  transition:background var(--transition), border-color var(--transition);
}
.cp-check input:checked{background:var(--bronze); border-color:var(--bronze);}
.cp-check a{color:var(--bronze); border-bottom:1px solid rgba(166,138,103,.5);}
.cp-check a:hover{color:var(--white);}
.cp-senden{
  grid-column:1 / -1; justify-self:start;
  display:inline-flex; align-items:center; gap:14px;
  background:var(--bronze); color:var(--white); border:0; cursor:pointer;
  font-family:var(--font-sans); font-size:.9375rem;
  padding:15px 30px; margin-top:10px;
  transition:background var(--transition), gap var(--transition);
}
.cp-senden svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.cp-senden:hover{background:var(--bronze-dark); gap:20px;}

@media (max-width:1180px){
  .contact-cols{grid-template-columns:150px 240px minmax(0,1fr); gap:0 36px;}
}
@media (max-width:940px){
  .contact-cols{grid-template-columns:150px minmax(0,1fr); gap:34px 36px;}
  .contact-modes{grid-column:1; grid-row:1;}
  .contact-portrait{grid-column:2; grid-row:1; width:220px; text-align:left;}
  .contact-panes{grid-column:1 / -1; grid-row:2;}
  .cp-text{max-width:none;}
}
@media (max-width:620px){
  .contact-cols{grid-template-columns:1fr; gap:28px;}
  .contact-modes{flex-direction:row; gap:30px; grid-row:2;}
  .contact-portrait{grid-column:1; grid-row:1; width:160px;}
  .contact-panes{grid-row:3;}
  .cp-form{grid-template-columns:1fr;}
  .cp-kanal{padding:15px 16px; gap:14px;}
}

/* ---------- Team ---------- */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
@media (max-width:980px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.team-grid{grid-template-columns:1fr;}}
.team-card .photo{aspect-ratio:3/4; background-size:cover; background-position:center; margin-bottom:14px;}
.team-card h4{font-family:var(--font-sans); font-weight:600; margin-bottom:.1em; font-size:.98rem;}
.team-card .role{font-size:.8rem; color:#7a746e;}

/* ---------- Contact split ---------- */
.contact-split{display:grid; grid-template-columns:1fr 1fr; gap:0; }
.contact-split .visual{background-size:cover; background-position:center; min-height:520px; position:relative; color:var(--white); display:flex; align-items:flex-end;}
.contact-split .visual::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,17,17,.15), rgba(17,17,17,.7));}
.contact-split .visual .inner{position:relative; z-index:2; padding:48px;}
.contact-split .formside{background:var(--offwhite); padding:48px;}
@media (max-width:900px){.contact-split{grid-template-columns:1fr;} .contact-split .visual{min-height:320px;}}

/* ---------- Standorte ---------- */
.standort-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--greige);}
.standort{background:var(--white); padding:26px 22px;}
.standort h4{font-family:var(--font-sans); font-weight:600; margin-bottom:.2em;}
@media (max-width:900px){.standort-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.standort-grid{grid-template-columns:1fr;}}

/* ---------- Service cards ---------- */
.service-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--greige);}
.service-card{background:var(--white); padding:38px 30px; min-height:220px;}
.service-card .icon{font-size:1.6rem; color:var(--bronze); margin-bottom:16px;}
@media (max-width:900px){.service-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.service-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   Einstiegsblock "Immobilie verkaufen"
   Headline und Fliesstext folgen der WALDE-Referenz: Headline linksbuendig
   ueber die volle Breite, der Fliesstext darunter eingerueckt auf 16,9 % und
   44,4 % breit (rund 64 Zeichen je Zeile, Zeilenabstand 1,6).
   Der Ansprechpartner folgt der RIEDEL-Referenz: Rundportrait, rechtsbuendige
   Angaben ohne Kasten, Kontaktzeilen mit Symbol rechts und darunter der
   Verweis "Kontakt aufnehmen" mit kurzem Bronzestrich.
   Alle Masse sind Anteile der Inhaltsbreite (Referenz: 1200 px).
   ========================================================================== */
.verkauf-intro{
  display:grid;
  grid-template-columns:61.3% 23.2% 15.5%;
  align-items:start;
}
.vi-haupt{grid-column:1;}
.vi-kontakt{grid-column:3;}

.vi-haupt h1,
.vi-haupt h2{
  font-size:var(--titelgroesse);
  line-height:1.18;
  margin:0; max-width:none;
}
/* Ohne Brotkrumenpfad darueber braucht das Portrait den Ausgleich nicht */
.vi-kontakt--ohne-pfad{margin-top:0;}
/* Einzug und Zeilenlaenge auf die Gesamtbreite bezogen: 16,9 % bzw. 44,4 %
   von 61,3 % Spaltenbreite ergeben 27,6 % bzw. 72,4 %. */
.vi-text{margin-left:27.6%; max-width:72.4%; margin-top:50px;}
.vi-text p{font-size:1rem; line-height:1.6; color:var(--anthracite); margin:0;}
.vi-text p + p{margin-top:1.5em;}

/* ---- Ansprechpartner (Referenz RIEDEL) ---- */
/* Das Rundportrait beginnt auf Hoehe der Headline — der Brotkrumenpfad
   darueber wird durch den Versatz ausgeglichen (Referenz RIEDEL). */
.vi-kontakt{text-align:right; margin-top:31px;}
.vk-foto{
  width:100%; aspect-ratio:1/1; border-radius:50%;
  overflow:hidden; background:var(--greige); margin-bottom:35px;
}
.vk-foto img{width:100%; height:100%; object-fit:cover; display:block;}
.vk-name{
  font-size:1rem; font-weight:600; line-height:1.4;
  color:var(--anthracite); margin:0;
}
.vk-rolle{
  font-size:.9375rem; line-height:1.45; color:var(--anthracite); margin:0;
}
.vk-zeile{
  display:flex; align-items:center; justify-content:flex-end; gap:9px;
  font-size:.875rem; line-height:1.4; color:var(--anthracite); margin:0;
  white-space:nowrap;
}
.vk-rolle + .vk-zeile{margin-top:28px;}
.vk-zeile + .vk-zeile{margin-top:6px;}
.vk-zeile a{color:var(--anthracite); transition:color var(--transition);}
.vk-zeile a:hover{color:var(--bronze-dark);}
.vk-zeile svg{
  width:17px; height:17px; flex-shrink:0;
  fill:none; stroke:var(--anthracite); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.vk-cta{
  display:inline-block; margin-top:26px;
  font-size:.875rem; letter-spacing:.11em; text-transform:uppercase;
  line-height:1.42; color:var(--bronze-dark);
  transition:color var(--transition);
}
.vk-cta::after{
  content:""; display:block; width:26px; height:1px;
  background:var(--bronze); margin:11px 0 0 auto;
  transition:width var(--transition);
}
.vk-cta:hover{color:var(--bronze);}
.vk-cta:hover::after{width:52px;}

@media (max-width:1024px){
  /* Unterhalb der Referenzbreite waechst die Kontaktspalte nicht weiter mit */
  .verkauf-intro{grid-template-columns:1fr 8% 176px;}
  .vi-text{margin-left:22%; max-width:78%; margin-top:36px;}
}
@media (max-width:860px){
  .verkauf-intro{grid-template-columns:1fr; gap:46px;}
  .vi-haupt, .vi-kontakt{grid-column:1;}
  .vi-text{margin-left:0; max-width:none; margin-top:28px;}
  .vi-kontakt{
    display:grid; grid-template-columns:152px 1fr; gap:0 26px;
    text-align:left; align-items:center; margin-top:0;
  }
  .vk-foto{grid-row:1 / span 5; margin-bottom:0;}
  .vk-name, .vk-rolle, .vk-zeile, .vk-cta{grid-column:2;}
  .vk-zeile{justify-content:flex-start; flex-direction:row-reverse;}
  .vk-cta::after{margin-left:0;}
}
@media (max-width:520px){
  .vi-kontakt{grid-template-columns:1fr; gap:20px; justify-items:start;}
  .vk-foto{grid-row:auto; width:152px;}
  .vk-name, .vk-rolle, .vk-zeile, .vk-cta{grid-column:1;}
}

/* ---------- Handlungsleisten im Titelbild (Referenz WALDE) ----------
   Zwei gestapelte Leisten unten rechts, ab Tablet ueberlagernd,
   auf schmalen Schirmen als volle Breite unter dem Text. */
.hero-bars{
  position:absolute; right:0; bottom:0; z-index:3;
  width:clamp(360px, 46vw, 620px);
  display:flex; flex-direction:column; gap:2px;
}
.hero-bar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 30px;
  font-size:1.02rem; line-height:1.3;
  transition:background var(--transition), color var(--transition);
}
.hero-bar svg{
  width:24px; height:24px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--transition);
}
.hero-bar:hover svg{transform:translateX(5px);}

.hero-bar--bronze{background:var(--bronze); color:var(--white);}
.hero-bar--bronze:hover{background:var(--bronze-dark);}

.hero-bar--hell{
  background:var(--white); color:var(--anthracite);
  padding-right:0;
}
.hero-bar--hell .hero-bar-icon{
  align-self:stretch; display:flex; align-items:center; justify-content:center;
  width:78px; background:var(--green); color:var(--white);
  transition:background var(--transition);
}
.hero-bar--hell:hover .hero-bar-icon{background:var(--green-dark);}

@media (max-width:900px){
  /* auf schmalen Schirmen untereinander statt ueberlagernd */
  .page-hero--bars{flex-direction:column; justify-content:flex-end; align-items:stretch;}
  .hero-bars{
    position:static; width:auto; max-width:none;
    margin:0 var(--gutter) 32px;
  }
  .hero-bar{padding:20px 24px; font-size:.95rem;}
  .hero-bar--hell{padding-right:0;}
  .hero-bar--hell .hero-bar-icon{width:62px;}
}

/* ---------- Objektkarte als Titelbild (Referenz RIEDEL) ---------- */
/* 56vh entspricht 20 % weniger als die 70vh der uebrigen Titelbilder */
/* Das Kartenband laeuft flach ueber die Breite — Hoehe rund 14 Prozent der
   Fensterbreite, nach unten und oben begrenzt. */
.page-hero--map{
  background:var(--offwhite); overflow:hidden;
  min-height:0; height:clamp(220px, 14vw, 340px);
  transition:height 340ms ease;
}
.page-hero--map.collapsed{height:0;}
.page-hero--map::before{display:none;}

/* Runder Bronze-Knopf, der deutlich sichtbar auf der Karte liegt */
.map-wrap{position:relative;}
.map-toggle{
  position:absolute; z-index:20;
  left:50%; transform:translateX(-50%);
  bottom:30px;
  width:58px; height:58px; border-radius:50%;
  background:var(--bronze); border:2px solid rgba(255,255,255,.9); color:var(--white);
  box-shadow:0 8px 22px rgba(17,17,17,.30);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition), box-shadow var(--transition);
}
.map-toggle:hover{background:var(--bronze-dark); box-shadow:0 10px 26px rgba(17,17,17,.38);}
.map-toggle svg{
  width:24px; height:24px;
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform 340ms ease;
}
/* Eingeklappt liegt keine Karte mehr darunter — dann steht der Knopf im Textfluss */
.map-toggle[aria-expanded="false"]{
  position:static; transform:none; margin:26px auto 4px;
}
.map-toggle[aria-expanded="false"] svg{transform:rotate(180deg);}
/* Leaflet setzt seinen Ebenen z-index 400 bis 800. Ohne eigenen
   Stapelkontext liegen sie ueber der Kopfleiste (z-index 100): das Logo
   verschwindet und die Menuepunkte lassen sich nicht mehr anklicken.
   `isolation:isolate` sperrt die Kartenebenen in ihren eigenen Kontext. */
#objektKarte{
  position:absolute; inset:0; width:100%; height:100%; background:#F0F0F0;
  isolation:isolate; z-index:0;
}
.page-hero--map{isolation:isolate; z-index:0;}
.od-karte{isolation:isolate; z-index:0; position:relative;}
/* OpenStreetMap-Kacheln in die warme, entsaettigte Farbwelt bringen */
#objektKarte .leaflet-tile-pane{
  /* Sehr helles Grau: entsaettigt und leicht abgedunkelt.
     Im Browser gemessen -> Landflaeche #F0F0F0, Strassenrand #D0D0D0,
     Wasser #C8C8C8, Beschriftung #727272. Farbe traegt allein die Bronze. */
  filter:grayscale(1) brightness(.96);
}
.leaflet-container{font-family:var(--font-sans);}
.map-fallback{padding:40px; text-align:center; color:var(--anthracite);}

/* Bronze-Cluster mit weichem Ring */
.vt-cluster{background:none !important; border:0 !important;}
.vt-cluster span{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; border-radius:50%;
  background:var(--bronze); color:var(--white);
  font-size:.9rem; font-weight:500;
  box-shadow:0 0 0 10px rgba(166,138,103,.32), 0 0 0 20px rgba(166,138,103,.16);
  transition:background var(--transition);
}
.vt-cluster:hover span{background:var(--bronze-dark);}

/* Einzelmarke als Tropfenform */
.vt-pin{background:none !important; border:0 !important;}
.vt-pin svg{width:100%; height:100%; filter:drop-shadow(0 3px 6px rgba(17,17,17,.3));}
.vt-pin path{fill:var(--bronze);}
.vt-pin:hover path{fill:var(--bronze-dark);}

/* Objektkarte im Sprechblasen-Fenster */
.leaflet-popup-content-wrapper{border-radius:2px; box-shadow:0 16px 40px rgba(17,17,17,.22);}
.leaflet-popup-content{margin:0; width:236px !important;}
.map-card img{width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--greige);}
.map-card .body{padding:14px 16px 16px;}
.map-card .loc{
  display:block; font-size:.76rem; color:var(--bronze-dark); margin-bottom:5px;
}
.map-card h4{
  font-family:var(--font-serif); font-weight:400; font-size:.98rem;
  line-height:1.3; margin:0 0 8px;
}
.map-card .price{font-size:.84rem; color:var(--anthracite);}

.leaflet-control-zoom a{
  color:var(--anthracite) !important; border-color:var(--greige) !important;
}
.leaflet-control-zoom a:hover{background:var(--offwhite) !important;}
.leaflet-control-attribution{font-size:.62rem; background:rgba(255,255,255,.75) !important;}

@media (max-width:700px){
  .leaflet-popup-content{width:200px !important;}
}

/* ---------- Marktberichte / Newsletter (Referenz RIEDEL) ---------- */
.service-band{padding:74px 0 78px;}
.band-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
  max-width:900px; margin:0 auto;
}
.band-item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  color:var(--bronze-dark);
}
.band-item svg{
  width:46px; height:46px; margin-bottom:22px;
  fill:none; stroke:var(--bronze); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke var(--transition);
}
.band-label{
  font-size:.86rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze-dark); margin-bottom:6px;
}
.band-sub{font-size:.86rem; color:var(--taupe);}
.band-item:hover svg{stroke:var(--bronze-dark);}
.band-item:hover .band-label{color:var(--anthracite);}
@media (max-width:600px){
  .band-grid{grid-template-columns:1fr; gap:44px;}
  .service-band{padding:52px 0 56px;}
}

/* ---------- Ratgeber-Teaser ---------- */
.ratgeber{padding:92px 0 104px;}
.ratgeber-title{
  display:block; text-align:center;
  font-family:var(--font-serif); font-weight:400;
  font-size:1.32rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--bronze-dark); margin-bottom:56px;
}
.ratgeber-slide{display:none; grid-template-columns:1fr 1fr; gap:60px;}
.ratgeber-slide.active{display:grid;}
.ratgeber-slide h3{
  font-size:1.4rem; font-weight:400; line-height:1.3;
  margin-bottom:20px; min-height:2.6em;
}
.ratgeber-slide p{color:var(--anthracite); max-width:46ch; margin-bottom:.6em;}
.weiterlesen{color:var(--taupe); font-size:.95rem;}
.weiterlesen:hover{color:var(--bronze-dark);}

.ratgeber-dots{display:flex; justify-content:center; gap:12px; margin-top:60px;}
.ratgeber-dots button{
  width:34px; height:2px; border:0; padding:0;
  background:var(--greige); transition:background var(--transition);
}
.ratgeber-dots button.active{background:var(--bronze-dark);}

.mehr-erfahren{
  display:block; width:max-content; margin:44px auto 0;
  font-size:.9rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bronze-dark); padding-bottom:9px;
  border-bottom:1px solid var(--bronze);
}
.mehr-erfahren:hover{color:var(--anthracite); border-color:var(--anthracite);}
@media (max-width:760px){
  .ratgeber{padding:60px 0 68px;}
  .ratgeber-slide{grid-template-columns:1fr; gap:38px;}
  .ratgeber-slide h3{min-height:0;}
}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--offwhite); border:1px solid var(--greige);
  padding:56px var(--gutter); text-align:center;
}
.cta-banner .section-head{margin:0 auto 28px;}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--green-tief); color:var(--greige); padding-top:72px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:56px;}
.footer-grid h5{color:var(--white); font-family:var(--font-sans); font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; margin-bottom:18px;}
.footer-grid a, .footer-grid p{font-size:.85rem; color:var(--greige); opacity:.85;}
.footer-grid li{margin-bottom:10px;}
.footer-grid a:hover{opacity:1; color:var(--bronze);}
.footer-logo{margin-bottom:18px; line-height:0;}
.footer-logo img{height:44px; width:auto;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding:22px var(--gutter);
  display:flex; justify-content:space-between; font-size:.76rem; opacity:.7; flex-wrap:wrap; gap:10px;
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr; padding:0 var(--gutter) 40px;}}
@media (max-width:900px){.footer-grid{padding-left:0; padding-right:0;}}
.footer-grid{padding-left:var(--gutter); padding-right:var(--gutter);}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0;}
.center{text-align:center;}
.small{font-size:.82rem; color:#7a746e;}
.divider{border:0; border-top:1px solid var(--greige); margin:56px 0;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
@media (max-width:860px){.grid-2{grid-template-columns:1fr; gap:36px;}}
.badge{
  display:inline-block; background:var(--bronze); color:var(--white); font-size:.7rem;
  letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:2px; margin-bottom:16px;
}

/* ==========================================================================
   Ihr Weg zum erfolgreichen Verkauf — Zeitachse
   Aufbau nach RIEDEL: eine durchgehende, sehr feine Linie in Bronze, darauf
   nummerierte Kreise; die Inhalte stehen wechselseitig links und rechts davon.
   Der Abschluss steht mittig unter der Achse.
   ========================================================================== */
.ablauf-kopf{max-width:720px; margin:0 auto clamp(64px, 7vw, 104px); text-align:center;}
.ablauf-kopf h2{margin:.35em 0 .6em;}
.ablauf-kopf .lede{font-size:1rem; line-height:1.7; max-width:none; margin:0; color:var(--anthracite);}

.zeitachse{--za-luecke:clamp(72px, 8vw, 132px); position:relative; list-style:none; margin:0; padding:0;}

.za-schritt{
  position:relative;
  display:grid; grid-template-columns:1fr 112px 1fr; align-items:start;
  margin-bottom:var(--za-luecke);
}
.za-schritt:last-child{margin-bottom:0;}
/* Die Achse wird je Schritt gezeichnet und ueberbrueckt die Luecke bis zum
   naechsten Kreis. Der Abschluss bekommt keine Linie mehr, damit die Achse
   dort endet und nicht durch den letzten Block laeuft. */
.za-schritt::before,
.za-schritt::after{
  content:""; position:absolute; left:50%; margin-left:-.5px;
  top:8px; bottom:calc(var(--za-luecke) * -1); width:1px;
}
.za-schritt::before{background:var(--bronze); opacity:.5;}
/* Der zweite Strich liegt darueber und waechst beim Scrollen mit:
   --fortschritt wird von initZeitachse() je Schritt auf 0 bis 1 gesetzt. */
.za-schritt::after{
  background:var(--bronze); opacity:1;
  transform-origin:top center; transform:scaleY(var(--fortschritt, 0));
}
.za-schritt:last-child::before,
.za-schritt:last-child::after{display:none;}

.za-nummer{
  grid-column:2; grid-row:1; justify-self:center; margin-top:2px;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--bronze); background:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:.9375rem; color:var(--bronze-dark);
  position:relative; z-index:2;
  transition:background 320ms ease, color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}
/* Erreichter Schritt: der Kreis fuellt sich in Bronze */
.za-schritt.erreicht .za-nummer{
  background:var(--bronze); color:var(--white);
  box-shadow:0 0 0 5px rgba(166,138,103,.16);
  transform:scale(1.06);
}
@media (prefers-reduced-motion: reduce){
  .za-nummer{transition:none;}
  .za-schritt::after{transition:none;}
}

.za-bild{margin:0; overflow:hidden; background:var(--greige);}
.za-bild img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3;}
/* Das Expose wird vollstaendig gezeigt statt beschnitten, damit die
   Titelseite als Dokument erkennbar bleibt. Zwei angedeutete Blaetter
   dahinter machen daraus einen Prospekt statt eines flachen Bildes. */
.za-bild--dokument{
  background:none; border:0;
  /* Platz fuer die angedeuteten Blaetter, die hinter der Titelseite
     hervorschauen — .za-bild schneidet sonst ab. */
  overflow:visible; padding:16px 22px;
  display:flex; align-items:center; justify-content:center;
}
/* ---- Expose als gedrucktes Heft ---------------------------------------
   Referenz: die fotografierte Broschuere im Querformat. Die Titelseite steht
   leicht in den Raum gedreht, rechts schaut der Papierblock als Stapel feiner
   Blaetter hervor, darunter liegt ein weicher Aufliegeschatten. Alles aus CSS —
   das Bild selbst bleibt unveraendert, die Wirkung gilt fuer alle vier Stellen.
   --------------------------------------------------------------------- */
.za-prospekt{
  position:relative; display:block; width:100%;
  perspective:1500px; perspective-origin:62% 46%;
}
/* Aufliegeschatten: breit und weich, leicht nach rechts versetzt */
.za-prospekt::after{
  content:''; position:absolute; z-index:0;
  left:9%; right:-1%; bottom:-7%; height:15%;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(17,17,17,.36) 0%, rgba(17,17,17,.17) 48%, rgba(17,17,17,0) 74%);
  filter:blur(7px);
}
.za-prospekt img{
  position:relative; z-index:1; display:block; width:100%;
  aspect-ratio:auto; height:auto; object-fit:contain;
  background:#fff;
  transform:rotateY(-14deg) rotateX(4deg) rotate(-.6deg);
  transform-origin:18% 50%;
  /* Papierblock an der rechten Kante: helle Blaetter, dazwischen feine
     Schattenlinien — daraus entsteht die Dicke des Heftes. */
  box-shadow:
    1px 0 0 #FFFFFF, 2px 0 0 #EFEBE4, 3px 0 0 #FFFFFF, 4px 0 0 #E8E3DA,
    5px 0 0 #FFFFFF, 6px 0 0 #E2DCD1, 7px 0 0 #FFFFFF, 8px 0 0 #DBD4C8,
    9px 0 0 #FFFFFF, 10px 0 0 #D5CDC0,
    11px 1px 2px rgba(17,17,17,.24),
    0 30px 46px -22px rgba(17,17,17,.5);
}
/* Bundsteg und Lichtstreifen liegen als eigene Ebene ueber der Titelseite und
   folgen derselben Drehung. */
.za-prospekt::before{
  content:''; position:absolute; z-index:2; inset:0;
  transform:rotateY(-14deg) rotateX(4deg) rotate(-.6deg);
  transform-origin:18% 50%;
  background:
    linear-gradient(90deg, rgba(17,17,17,.17) 0%, rgba(17,17,17,.06) 3.5%, rgba(17,17,17,0) 9%),
    linear-gradient(104deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.26) 52%, rgba(255,255,255,0) 68%);
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .za-prospekt img, .za-prospekt::before{transform:none;}
}


/* Das Kreuz auch in der Zeitachse: dort ist die Spalte nur rund 520 px breit,
   deshalb kleinere Schrift, engere Abstaende und schmalere Felder. */
.za-bild--kreuz{background:none; overflow:visible;}
.za-bild--kreuz .qm-flaeche{padding:30px 0; grid-template-rows:minmax(132px,auto) minmax(132px,auto);}
.za-bild--kreuz .qm-feld{padding:12px 14px;}
.za-bild--kreuz .qm-feld--ol,.za-bild--kreuz .qm-feld--or{padding-bottom:16px;}
.za-bild--kreuz .qm-feld--ul,.za-bild--kreuz .qm-feld--ur{padding-top:16px;}
.za-bild--kreuz .qm-kopf{font-size:.8125rem; margin-bottom:8px;}
.za-bild--kreuz .qm-woerter{gap:4px 9px; max-width:none;}
.za-bild--kreuz .qm-woerter span{font-size:.75rem; line-height:1.4;}
.za-bild--kreuz .qm-woerter .stark{font-size:.8125rem;}
.za-bild--kreuz .qm-achse{font-size:.5625rem; letter-spacing:.12em; padding:2px 7px;
  /* Der Abschnitt liegt auf Cremeweiss — sonst blitzt ein weisses Feld auf. */
  background:var(--offwhite);}

.za-text{max-width:420px;}
.za-kennung{
  display:block; font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze-dark); margin-bottom:14px;
}
.za-text h3{font-size:1.3rem; line-height:1.3; margin:0 0 16px;}
.za-text p{font-size:.9375rem; line-height:1.75; color:var(--anthracite); margin:0 0 20px;}

/* Die VAN-TOL-Zusage: eine Zeile, kursiv, mit feiner Bronze-Linie darueber */
.za-zusage{
  position:relative; padding-top:20px; margin:0 0 22px !important;
  font-family:var(--font-serif); font-style:italic;
  font-size:1rem !important; line-height:1.6 !important; color:var(--anthracite) !important;
}
.za-zusage::before{
  content:""; position:absolute; top:0; left:0; width:38px; height:1px; background:var(--bronze);
}
.za-marke{
  font-style:normal; font-family:var(--font-sans); font-weight:600;
  font-size:.6875rem; letter-spacing:.16em; color:var(--green);
  margin-right:10px; vertical-align:1px;
}

.za-link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green); padding-bottom:6px;
  border-bottom:1px solid var(--bronze);
  transition:color var(--transition), gap var(--transition);
}
.za-link svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.za-link:hover{color:var(--bronze-dark); gap:14px;}

/* Wechselseitige Anordnung */
.za-schritt--bild-links .za-bild{grid-column:1; grid-row:1;}
.za-schritt--bild-links .za-text{grid-column:3; grid-row:1;}
.za-schritt--bild-rechts .za-text{grid-column:1; grid-row:1; justify-self:end;}
.za-schritt--bild-rechts .za-bild{grid-column:3; grid-row:1;}

/* Abschluss: mittig unter der Achse */
.za-schritt--abschluss{grid-template-columns:1fr; justify-items:center; text-align:center;}
.za-schritt--abschluss .za-nummer{grid-column:1; margin-bottom:44px;}
.za-schritt--abschluss .za-bild{grid-column:1; width:min(360px, 70%); margin-bottom:34px;}
/* Unser Wappen als Abschluss der Zeitachse: mittig unter der Achse, darunter
   Titel und Text zentriert (Referenz: Bild 1). Das Landeswappen von
   Baden-Wuerttemberg darf gewerblich nicht gefuehrt werden (§ 124 OWiG),
   deshalb steht hier die VAN-TOL-Stadtvilla auf dem Schild. */
.za-bild--wappen{
  background:none; border:0; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.za-schritt--abschluss .za-bild--wappen{width:auto; margin-bottom:40px;}
.za-bild--wappen img{
  width:auto; height:auto; max-height:clamp(126px, 11vw, 152px); aspect-ratio:auto;
  object-fit:contain; box-shadow:none;
}
.za-schritt--abschluss .za-text{grid-column:1; max-width:560px;}
.za-schritt--abschluss .za-zusage::before{left:50%; transform:translateX(-50%);}

/* Sanftes Einblenden beim Scrollen */
.za-schritt .za-bild, .za-schritt .za-text{
  opacity:0; transform:translateY(18px);
  transition:opacity 700ms ease, transform 700ms ease;
}
.za-schritt.sichtbar .za-bild, .za-schritt.sichtbar .za-text{opacity:1; transform:none;}
.za-schritt.sichtbar .za-text{transition-delay:110ms;}
@media (prefers-reduced-motion: reduce){
  .za-schritt .za-bild, .za-schritt .za-text{opacity:1; transform:none; transition:none;}
}

/* Abschluss der Zeitachse: dunkles Band ueber die volle Seitenbreite */
/* Abschlussband in tiefem VAN-TOL-Gruen (Weiss darauf 12,3:1) */

/* Ansprache an Bautraeger: mittige Ueberzeile, darunter hochformatiges Bild
   links und Text rechts. */
/* Weisser Grund, damit sich der Absatz von der Zeitachse darueber
   (Cremeweiss) als eigenes Band abhebt. */
.nv-band{padding:clamp(56px, 6vw, 96px) 0; background:var(--white);}
.nv-kopf{text-align:center; margin-bottom:clamp(30px, 3.4vw, 52px);}
.nv-kopf .eyebrow{margin-bottom:0;}
.nv-raster{
  display:grid; grid-template-columns:minmax(0, .78fr) minmax(0, 1fr);
  gap:clamp(30px, 5vw, 88px); align-items:center;
  max-width:1080px; margin:0 auto;
}
.nv-bild{margin:0;}
.nv-bild img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block;}
.nv-text h2{font-size:clamp(1.25rem, 1.9vw, 1.6rem); line-height:1.3; margin:0 0 22px;}
.nv-text p{font-size:.9375rem; line-height:1.8; color:var(--anthracite); margin:0 0 18px;}
.nv-text .za-link{margin-top:8px;}
@media (max-width:860px){
  .nv-raster{grid-template-columns:1fr; gap:28px;}
  .nv-bild img{aspect-ratio:4/3;}
}

.ablauf-fuss{
  background:var(--green-tief); color:#EDE8E0;
  text-align:center; padding:clamp(48px, 5.5vw, 78px) 0;
}
.ablauf-fuss p{font-size:1.0625rem; line-height:1.6; color:#EDE8E0; margin:0 auto 28px; max-width:62ch;}

@media (max-width:900px){
  .za-schritt{grid-template-columns:1fr 76px 1fr;}
  .za-text{max-width:none;}
  .za-text h3{font-size:1.2rem;}
}
@media (max-width:700px){
  /* Achse wandert an den linken Rand, alles darunter einspaltig */
  .zeitachse{--za-luecke:64px;}
  .za-schritt::before, .za-schritt::after{left:19px; margin-left:0;}
  .za-schritt{grid-template-columns:38px 1fr; column-gap:26px; margin-bottom:64px;}
  .za-schritt .za-nummer{grid-column:1; grid-row:1; margin-top:0; width:38px; height:38px;}
  .za-schritt .za-bild{grid-column:2; grid-row:1; margin-bottom:24px;}
  .za-schritt .za-text{grid-column:2; grid-row:2; justify-self:start;}
  .za-schritt--abschluss{grid-template-columns:38px 1fr; justify-items:start; text-align:left;}
  .za-schritt--abschluss .za-nummer{margin-bottom:0;}
  .za-schritt--abschluss .za-bild{width:100%; margin-bottom:24px;}
  .za-schritt--abschluss .za-zusage::before{left:0; transform:none;}
}

/* ==========================================================================
   Lebenssituationen (Referenz WALDE)
   Headline und Einleitung linksbuendig ueber die volle Inhaltsbreite, darunter
   vier hochformatige Bilder ohne Verlauf; die Bezeichnung steht mit einem
   Symbol darunter statt im Bild. Masse aus der Referenz (Inhaltsbreite 997 px):
   Bild 235 px breit, Abstand 19,5 px (1,96 %), Seitenverhaeltnis 1 : 1,30.
   ========================================================================== */
.lebens-kopf{margin-bottom:148px;}
.lebens-kopf h2{font-size:var(--titelgroesse); line-height:1.25; margin:0 0 32px; max-width:none;}
.lebens-kopf p{font-size:1rem; line-height:1.6; color:var(--anthracite); margin:0 0 .8em; max-width:none;}
.lebens-kopf p:last-child{margin-bottom:0;}

.lebens-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:0 1.96%;}

.lebenslage{display:block; color:var(--anthracite);}
.ll-bild{
  display:block; overflow:hidden; background:var(--greige);
  aspect-ratio:235 / 305;
}
.ll-bild img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 700ms ease;
}
.lebenslage:hover .ll-bild img{transform:scale(1.04);}
.ll-name{
  display:flex; align-items:center; gap:10px;
  margin-top:16px; font-size:1.0625rem; line-height:1.3;
  transition:color var(--transition);
}
.ll-name svg{
  width:23px; height:23px; flex-shrink:0;
  fill:none; stroke:var(--bronze); stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke var(--transition);
}
.lebenslage:hover .ll-name{color:var(--bronze-dark);}
.lebenslage:hover .ll-name svg{stroke:var(--bronze-dark);}

@media (max-width:1100px){
  .lebens-kopf{margin-bottom:88px;}
  .ll-name{font-size:1rem;}
}
@media (max-width:860px){
  .lebens-grid{grid-template-columns:1fr 1fr; gap:34px 3%;}
  .lebens-kopf{margin-bottom:64px;}
  .lebens-kopf h2{margin-bottom:30px;}
}
@media (max-width:520px){
  .lebens-grid{grid-template-columns:1fr; gap:28px;}
  .ll-bild{aspect-ratio:3/2;}
}

/* ==========================================================================
   Einstieg Kurzbewertung
   Ruhige Flaeche mit Auswahl der Objektart; die Auswahl wird an die
   Bewertungsseite weitergereicht.
   ========================================================================== */
/* Die Farbflaeche zieht sich ueber die volle Seitenbreite (Klasse
   section-offwhite am Abschnitt), der Block selbst traegt nur den Innenabstand. */
.bewertung-panel{
  background:none;
  padding:clamp(20px, 3vw, 46px) 0;
  text-align:center;
}
.bp-eyebrow{
  display:block; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  color:#6f6a64; margin-bottom:20px;
}
.bewertung-panel h2{
  font-size:clamp(1.2rem, 1.75vw, 1.45rem); line-height:1.35;
  margin:0 auto 20px; max-width:none;
}
.bp-text{
  font-size:1rem; line-height:1.6; color:var(--anthracite);
  max-width:660px; margin:0 auto 22px;
}
.bp-claim{
  font-weight:600; color:var(--bronze-dark);
  font-size:1.0625rem; margin:0 0 40px;
}

.bp-arten{
  display:grid; grid-template-columns:repeat(4, minmax(0, 175px));
  gap:13px; justify-content:center; margin-bottom:38px;
}
.bp-art{
  display:flex; flex-direction:column; align-items:center;
  gap:20px; padding:22px 18px 16px;
  background:#EAE8E4; border:1px solid #DFDCD7; border-radius:4px;
  font-family:var(--font-sans); font-size:.9375rem; color:var(--anthracite);
  cursor:pointer; text-align:left;
  transition:background var(--transition), border-color var(--transition), color var(--transition);
}
.bp-art svg{
  width:46px; height:46px; fill:none; stroke:var(--anthracite);
  stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke var(--transition);
}
.bp-art span{align-self:flex-start;}
.bp-art:hover{background:#E2DFD9; border-color:var(--bronze);}
.bp-art[aria-checked="true"]{
  background:var(--white); border-color:var(--bronze); color:var(--green);
}
.bp-art[aria-checked="true"] svg{stroke:var(--bronze);}
.bp-art:focus-visible{outline:2px solid var(--bronze); outline-offset:3px;}

.bp-weiter{
  display:block; width:100%; max-width:472px; margin:0 auto;
  background:var(--bronze-dark); color:var(--white);
  font-family:var(--font-serif); font-size:1rem;
  padding:15px 24px; text-align:center;
  transition:background var(--transition);
}
.bp-weiter:hover{background:#6F5B41; color:var(--white);}
.bp-weiter:focus-visible{outline:2px solid var(--bronze); outline-offset:3px;}

@media (max-width:760px){
  .bp-arten{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:11px;}
  .bp-art{gap:14px; padding:18px 14px 13px;}
  .bp-art svg{width:38px; height:38px;}
}

/* ---- Preisdiagramm in der Zeitachse (Schritt 2) ----
   Zusammenhang von Angebotspreis und Vermarktungsdauer, in der VAN-TOL-
   Farbwelt statt in Ampelfarben: Gruen = empfohlener Startpreis, Bronze und
   Taupe = zu hohe Startpreise, Anthrazit = der teuerste Fehler. */
.za-bild--diagramm{
  background:none; border:0; padding:0;
  display:flex; flex-direction:column; align-items:stretch; justify-content:center;
}
.za-bild--diagramm figcaption{
  font-size:.75rem; line-height:1.45; color:#7d746a;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--greige);
}
.za-bild--diagramm svg{width:100%; height:auto; display:block; aspect-ratio:auto;}
.preisdiagramm text{font-family:var(--font-sans);}
.pd-achse{font-size:17px; fill:var(--anthracite);}
.pd-achse .pd-wert{fill:var(--anthracite); font-weight:600;}
.pd-tage{font-size:16px; fill:#7d746a;}
.pd-ende{
  font-size:19px; font-weight:600;
  paint-order:stroke; stroke:var(--offwhite); stroke-width:5px; stroke-linejoin:round;
}
.pd-titel{font-size:20px; fill:var(--bronze-dark); font-weight:600;}
.pd-kurz{display:none;}
@media (max-width:760px){
  /* Auf schmalen Bildschirmen kurze Beschriftung und groessere Schrift,
     damit das Diagramm lesbar bleibt. */
  .pd-lang{display:none;}
  .pd-kurz{display:block;}
  .pd-achse{font-size:24px;}
  .pd-tage{font-size:22px;}
  .pd-ende{font-size:26px; stroke-width:7px;}
  .pd-titel{font-size:26px;}
}
@media (max-width:700px){
  /* Diagramme ruecken unter die Schrittnummer und nutzen die volle Breite,
     damit Beschriftungen lesbar bleiben. */
  .za-schritt .za-bild--diagramm{grid-column:1 / -1; grid-row:2; margin:14px 0 24px;}
  .za-schritt .za-bild--diagramm ~ .za-text{grid-row:3;}
}

/* ---- Kundendatei-Diagramm in der Zeitachse (Schritt 4) ---- */
.kundendiagramm text{font-family:var(--font-sans);}
.dn-titel{font-size:22px; fill:var(--bronze-dark);}
.dn-mitte{font-size:22px; fill:var(--anthracite);}
.dn-zahl{font-size:24px; fill:var(--anthracite);}
.dn-budget{font-size:21px; font-weight:600; fill:var(--anthracite);}
.dn-legende{font-size:21px; fill:var(--anthracite);}
@media (max-width:760px){
  .dn-titel{font-size:26px;}
  .dn-mitte{font-size:26px;}
  .dn-zahl{font-size:28px;}
  .dn-budget, .dn-legende{font-size:25px;}
}

/* ---- Zeichnung statt Foto (Zeitachse, Schritt 1) ----
   Die Strichzeichnung steht freigestellt auf ruhigem Greige-Grund; ein
   leichter Sepia-Filter holt das kuehle Grau in die warme VAN-TOL-Farbwelt. */
.za-bild--illu{
  background:none; border:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  align-self:stretch;   /* Zeichnung steht mittig zur Textspalte */
}
.za-bild--illu img{
  aspect-ratio:auto; width:42%; height:auto; object-fit:contain;
  filter:sepia(.42) saturate(.6) brightness(1.02);
  mix-blend-mode:multiply;
}
/* Selbst gezeichnete SVG-Illustrationen tragen die Markenfarben bereits —
   sie brauchen keinen Sepiafilter. */
.za-bild--rein img{filter:none; mix-blend-mode:normal; width:64%;}

/* ---- Zitat im Titelbild (Referenz RIEDEL) ----
   Steht unten links, gegenueber der Handlungsleiste. Ein weicher Verlauf von
   links unten sorgt dafuer, dass die weisse Schrift auf dem hellen Foto
   sicher lesbar bleibt. */
.page-hero--bars.page-hero--plain::before{
  background:linear-gradient(103deg,
    rgba(17,17,17,.322) 0%, rgba(17,17,17,.238) 24%,
    rgba(17,17,17,.084) 46%, rgba(17,17,17,0) 62%);
}
/* Das Zitat steht im oberen Drittel der unteren Bildhaelfte und erscheint
   erst, wenn der Besucher zu scrollen beginnt. */
.hero-zitat{
  position:absolute; z-index:3;
  /* buendig mit der Inhaltskante der Seite, nicht mit dem Fensterrand */
  left:calc(max(var(--gutter), (100% - var(--maxw)) / 2) + var(--gutter));
  bottom:clamp(120px, 21vh, 240px);
  max-width:min(680px, 52vw);
  margin:0; color:var(--white);
  text-wrap:balance;
  opacity:0; transform:translateY(26px);
  transition:opacity 900ms ease, transform 900ms ease;
}
.hero-zitat.sichtbar{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .hero-zitat{opacity:1; transform:none; transition:none;}
}
.hero-zitat p{
  font-family:var(--font-serif);
  font-size:clamp(1.2rem, 1.95vw, 1.75rem);
  line-height:1.4; font-weight:300;
  margin:0 0 18px;
  text-shadow:0 1px 18px rgba(17,17,17,.45);
}
.hero-zitat cite{
  display:block; font-style:normal;
  font-family:var(--font-sans); font-size:.875rem;
  letter-spacing:.06em; color:rgba(255,255,255,.88);
  text-shadow:0 1px 14px rgba(17,17,17,.5);
}
@media (max-width:900px){
  .page-hero--bars.page-hero--plain::before{
    background:linear-gradient(180deg, rgba(17,17,17,.035) 0%, rgba(17,17,17,.14) 52%, rgba(17,17,17,.308) 100%);
  }
  .hero-zitat{
    position:static; max-width:none;
    margin:auto var(--gutter) 26px; padding-top:40px;
  }
  .hero-zitat p{font-size:clamp(1.2rem, 5vw, 1.6rem);}
  .hero-zitat p br{display:none;}
}

/* ==========================================================================
   Beratungstermin: Ansprechpartnerin links, Formular rechts
   Aufbau nach der Referenz, Farben und Typografie nach VAN TOL.
   ========================================================================== */
.termin-grid{
  display:grid; grid-template-columns:32% minmax(0,1fr);
  gap:0 clamp(48px, 7vw, 110px);
  align-items:start;
  margin-top:clamp(44px, 5vw, 72px);
}

.termin-person{text-align:center;}
.tp-foto{
  width:100%; max-width:340px; margin:0 auto 26px;
  aspect-ratio:1/1; border-radius:50%; overflow:hidden; background:var(--greige);
}
.tp-foto img{width:100%; height:100%; object-fit:cover; display:block;}
.tp-name{
  font-family:var(--font-serif); font-size:1.35rem; line-height:1.3;
  color:var(--anthracite); margin:0 0 6px;
}
.tp-rolle{font-size:.9375rem; color:var(--anthracite); margin:0 0 16px;}
.tp-tel{
  display:inline-flex; align-items:center; gap:10px;
  font-size:1rem; font-weight:600; color:var(--anthracite);
  transition:color var(--transition);
}
.tp-tel svg{width:18px; height:18px; fill:none; stroke:var(--bronze); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.tp-tel:hover{color:var(--bronze-dark);}

.termin-form{display:grid; grid-template-columns:1fr 1fr; gap:20px 22px;}
.tf-feld--voll{grid-column:1 / -1;}
.tf-feld label{
  display:block; font-size:.8125rem; color:var(--anthracite); margin-bottom:8px;
}
.tf-feld label span{color:#7a746e;}
.tf-feld input,
.tf-feld select,
.tf-feld textarea{
  width:100%; box-sizing:border-box;
  background:var(--white); border:1px solid var(--greige);
  color:var(--anthracite); font-family:var(--font-sans); font-size:.9375rem;
  padding:14px 15px;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.tf-feld textarea{resize:vertical; min-height:118px;}
.tf-feld select{appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292929' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
  padding-right:44px;
}
.tf-feld input:focus,
.tf-feld select:focus,
.tf-feld textarea:focus{
  outline:none; border-color:var(--bronze); box-shadow:0 0 0 3px rgba(166,138,103,.16);
}
.tf-check{
  grid-column:1 / -1; display:flex; align-items:flex-start; gap:13px;
  font-size:.875rem; line-height:1.5; color:var(--anthracite);
}
.tf-check input{
  appearance:none; width:21px; height:21px; flex-shrink:0; margin-top:1px;
  border:1px solid var(--greige); background:var(--white); cursor:pointer;
  transition:background var(--transition), border-color var(--transition);
}
.tf-check input:checked{background:var(--bronze); border-color:var(--bronze);}
.tf-check a{color:var(--bronze-nav); border-bottom:1px solid rgba(166,138,103,.5);}
.tf-check a:hover{color:var(--bronze-dark);}
.tf-senden{
  grid-column:1 / -1; justify-self:start;
  display:inline-flex; align-items:center; gap:14px;
  background:var(--bronze); color:var(--white); border:0; cursor:pointer;
  font-family:var(--font-sans); font-size:.9375rem;
  padding:16px 32px; margin-top:6px;
  transition:background var(--transition), gap var(--transition);
}
.tf-senden svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.tf-senden:hover{background:var(--bronze-dark); gap:20px;}

@media (max-width:900px){
  .termin-grid{grid-template-columns:1fr; gap:46px;}
  .tp-foto{max-width:240px;}
}
@media (max-width:560px){
  .termin-form{grid-template-columns:1fr;}
}

/* ==========================================================================
   Unterlagen zum Download (Leistungsbroschuere, Checkliste)
   Ausgabe erst nach Eingabe der Adresse — das Formular oeffnet sich als
   kompaktes Fenster ueber der Seite.
   ========================================================================== */
.unterlagen-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(36px, 5vw, 72px);
  margin-top:clamp(40px, 4.5vw, 64px);
}
.unterlage{display:grid; grid-template-columns:150px minmax(0,1fr); gap:0 30px; align-items:start;}
.ul-cover img{width:100%; height:auto; display:block; box-shadow:0 10px 26px rgba(17,17,17,.08);}
.ul-text h3{font-size:1.25rem; line-height:1.3; margin:0 0 12px;}
.ul-text p{font-size:.9375rem; line-height:1.7; color:var(--anthracite); margin:0 0 20px;}
.ul-download{
  display:inline-flex; align-items:center; gap:11px;
  background:none; border:0; padding:0 0 5px; cursor:pointer;
  font-family:var(--font-sans); font-size:.8125rem;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--bronze-nav); border-bottom:1px solid var(--bronze);
  transition:color var(--transition), gap var(--transition);
}
.ul-download svg{width:18px; height:18px; fill:none; stroke:var(--bronze); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.ul-download:hover{color:var(--bronze-dark); gap:15px;}
.ul-download:focus-visible{outline:2px solid var(--bronze); outline-offset:4px;}

/* Anforderungsfenster */
.ul-overlay{
  position:fixed; inset:0; z-index:320;
  background:rgba(41,41,41,.62); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px, 4vh, 48px) var(--gutter);
  overflow-y:auto;
}
.ul-overlay[hidden]{display:none;}
.ul-dialog{
  position:relative; background:var(--white);
  width:min(620px, 100%); padding:clamp(30px, 4vw, 52px);
  max-height:100%; overflow-y:auto;
  box-shadow:0 30px 70px -20px rgba(17,17,17,.45);
}
.ul-schliessen{
  position:absolute; top:16px; right:20px;
  background:none; border:0; cursor:pointer;
  font-size:1.4rem; line-height:1; color:var(--anthracite);
  transition:transform var(--transition), color var(--transition);
}
.ul-schliessen:hover{color:var(--bronze-dark); transform:rotate(90deg);}
.ul-dialog h3{font-size:1.5rem; line-height:1.25; margin:.4em 0 12px;}
.ul-hinweis{font-size:.9375rem; line-height:1.65; color:var(--anthracite); margin:0 0 26px;}
.ul-form{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px;}

@media (max-width:1024px){
  .unterlagen-grid{grid-template-columns:1fr; gap:40px;}
}
@media (max-width:520px){
  .unterlage{grid-template-columns:1fr; gap:22px;}
  .ul-cover{max-width:150px;}
  .ul-form{grid-template-columns:1fr;}
}

/* ==========================================================================
   Immobilienwissen: Einleitung, Filterleiste und Beitragsraster
   ========================================================================== */
.wissen-kopf{max-width:820px; margin-bottom:clamp(38px, 4.5vw, 60px);}
.wissen-kopf .lede{font-size:1.0625rem; line-height:1.7; max-width:none; margin:0;}

.wissen-filter{
  display:grid;
  grid-template-columns:minmax(220px, 1.25fr) repeat(3, minmax(0, 1fr)) auto;
  gap:0 18px; align-items:end;
  padding-bottom:clamp(30px, 3.5vw, 46px);
  border-bottom:1px solid var(--greige);
}
.wf-label{
  display:block; font-size:.8125rem; color:var(--anthracite); margin-bottom:8px;
}
.wf-suchfeld{display:flex;}
.wf-suchfeld input{
  flex:1; min-width:0; box-sizing:border-box;
  background:var(--white); border:1px solid var(--greige); border-right:0;
  font-family:var(--font-sans); font-size:.9375rem; color:var(--anthracite);
  padding:13px 15px;
}
.wf-suchfeld input::placeholder{color:#8b857e;}
.wf-suchfeld input:focus{outline:none; border-color:var(--bronze);}
.wf-suchfeld button{
  flex-shrink:0; width:52px; border:0; cursor:pointer;
  background:var(--bronze); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition);
}
.wf-suchfeld button svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round;}
.wf-suchfeld button:hover{background:var(--bronze-dark);}
.wf-feld select{
  width:100%; box-sizing:border-box;
  background:var(--white); border:1px solid var(--greige);
  font-family:var(--font-sans); font-size:.9375rem; color:var(--anthracite);
  padding:13px 40px 13px 15px; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292929' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:18px;
}
.wf-feld select:focus{outline:none; border-color:var(--bronze);}
.wf-knopf{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--bronze); color:var(--white); border:0; cursor:pointer;
  font-family:var(--font-sans); font-size:.9375rem;
  padding:14px 26px;
  transition:background var(--transition), gap var(--transition);
}
.wf-knopf svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.wf-knopf:hover{background:var(--bronze-dark); gap:17px;}

.wissen-treffer{
  font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase;
  color:#7a746e; margin:clamp(26px, 3vw, 40px) 0 22px;
}
.wissen-leer{font-size:1rem; color:var(--anthracite); margin:8px 0 0; max-width:60ch;}
#wissenGrid .article-card{display:flex; flex-direction:column;}
.thumb--cover{
  display:flex; align-items:center; justify-content:center;
  background:var(--offwhite); padding:22px 0;
}
.thumb--cover img{width:auto; height:100%; max-height:170px; display:block; box-shadow:0 8px 22px rgba(17,17,17,.10);}

@media (max-width:1100px){
  .wissen-filter{grid-template-columns:1fr 1fr 1fr; gap:20px 18px;}
  .wf-suche{grid-column:1 / -1;}
  .wf-knopf{grid-column:1 / -1; justify-self:start;}
}
@media (max-width:620px){
  .wissen-filter{grid-template-columns:1fr;}
  .wf-knopf{width:100%; justify-content:center;}
}

/* ---- Unterseiten Immobilienwissen: "Das sollten Sie wissen" ---- */
.wissen-punkte{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(34px, 4vw, 58px) clamp(40px, 5vw, 80px);
  margin-top:clamp(36px, 4vw, 56px);
}
.wissen-punkt{display:grid; grid-template-columns:44px 1fr; gap:0 20px; align-items:start;}
.wp-nummer{
  grid-row:1 / span 2;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--bronze); color:var(--bronze-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:.9375rem;
}
.wissen-punkt h3{font-size:1.125rem; line-height:1.35; margin:6px 0 10px;}
.wissen-punkt p{font-size:.9375rem; line-height:1.75; color:var(--anthracite); margin:0;}
.wissen-hinweis{
  margin:clamp(40px, 4.5vw, 64px) 0 0;
  padding-left:18px; border-left:2px solid var(--bronze);
  font-size:.875rem; line-height:1.7; color:#57534e; max-width:78ch;
}
@media (max-width:860px){
  .wissen-punkte{grid-template-columns:1fr;}
}

/* ==========================================================================
   Startseite: Google-Bewertungen, Highlight-Karussell, zwei Einstiege
   ========================================================================== */

/* ---- Google-Bewertungen (Platzhalter bis zur Schnittstelle) ---- */
.google-leiste{margin-top:clamp(34px, 4vw, 52px);}
.gl-note{
  display:flex; gap:14px; align-items:flex-start;
  max-width:860px; margin:0 auto clamp(30px, 3.5vw, 44px);
  padding:18px 22px; background:var(--white); border:1px solid var(--greige);
}
.gl-note svg{width:22px; height:22px; flex-shrink:0; margin-top:2px; fill:none; stroke:var(--bronze); stroke-width:1.5; stroke-linecap:round;}
.gl-note p{font-size:.875rem; line-height:1.65; color:var(--anthracite); margin:0;}
.google-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px;}
.google-karte{background:var(--white); border:1px solid var(--greige); padding:20px 22px 24px;}
.gk-kopf{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.gk-avatar{width:38px; height:38px; border-radius:50%; background:var(--greige); flex-shrink:0;}
.gk-meta{flex:1; display:flex; flex-direction:column; gap:6px;}
.gk-zeile{display:block; height:9px; border-radius:5px; background:var(--greige);}
.gk-zeile--name{width:68%;}
.gk-zeile--datum{width:44%; height:7px; opacity:.65;}
.gk-logo{font-family:var(--font-serif); font-size:1.05rem; color:var(--taupe);}
.gk-sterne{color:var(--bronze); letter-spacing:2px; font-size:1rem; margin-bottom:14px;}
.gk-text{display:flex; flex-direction:column; gap:9px;}
.gk-text span{display:block; height:8px; border-radius:4px; background:var(--greige);}
.gk-text span:nth-child(2){width:92%;}
.gk-text span:nth-child(3){width:64%;}
.gl-summe{
  text-align:center; font-size:.875rem; color:var(--anthracite);
  margin:clamp(24px, 3vw, 34px) 0 0;
}
.gl-platzhalter{color:var(--taupe); letter-spacing:.06em;}

/* ---- Highlight-Karussell (Referenz RIEDEL) ----
   Der Abschnitt liegt auf der Hinterlegungsfarbe, die Karten stehen als
   weisse Flaechen mit feinem Rand darauf. Kartenbreite und Abstand sind aus
   der Referenz uebernommen: 281 px bei 12 px Abstand, Bild im Format 3:2. */
#highlights{background:var(--offwhite); padding-top:clamp(58px, 6vw, 88px);}
/* In der Referenz ist die Bereichsueberschrift so gross wie die Kartentitel
   darunter (Verhaeltnis 1:1) und weniger stark gesperrt als eine gewoehnliche
   Vorzeile. Hier steht sie allein ueber dem Bereich, traegt also die Rolle
   der Ueberschrift. */
.eyebrow--titel{
  font-size:clamp(1rem, 1.25vw, 1.08rem);
  letter-spacing:.16em;
  color:var(--bronze-nav);
}
.hl-karussell{position:relative;}
.hl-spur{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * 12px) / 4);
  gap:12px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none;
  padding-bottom:4px;
}
/* Kartenoptik nur im Karussell — die Objektliste bleibt bewusst rahmenlos */
.hl-spur .property-card{
  background:var(--white); border:1px solid #EDE9E2;
  display:flex; flex-direction:column;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.hl-spur .property-card:hover{
  border-color:var(--greige); box-shadow:0 10px 26px -14px rgba(17,17,17,.22);
}
.hl-spur .property-card .body{padding:20px 22px 26px; flex:1;}
.hl-spur .property-card h3{font-size:1.08rem; line-height:1.38; margin-bottom:14px; min-height:0; text-wrap:pretty;}
.hl-spur .property-card .loc{font-size:.85rem; margin-bottom:9px;}
.hl-spur .property-card .facts{font-size:.84rem; line-height:1.5;}
.hl-spur::-webkit-scrollbar{display:none;}
.hl-spur > *{scroll-snap-align:start;}
.hl-punkte{display:flex; justify-content:center; gap:14px; margin-top:clamp(30px, 3.4vw, 44px);}
.hl-punkt{
  width:36px; height:2px; border:0; padding:0; cursor:pointer;
  background:var(--greige); transition:background var(--transition);
}
.hl-punkt.an{background:var(--bronze);}
.hl-punkt:focus-visible{outline:2px solid var(--bronze); outline-offset:5px;}
.hl-fuss{text-align:center; margin-top:clamp(28px, 3vw, 40px);}
.hl-alle{
  display:inline-block; padding-bottom:7px;
  font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze-nav); border-bottom:1px solid var(--bronze);
  transition:color var(--transition);
}
.hl-alle:hover{color:var(--bronze-dark);}

/* ---- Werbeband ----
   Eingerueckte Flaeche in Bronze statt eines Fotos. Der Aufbau folgt RIEDEL:
   Symbol, Aussage, Text und Verweis stehen mittig untereinander, der Verweis
   traegt einen kurzen Strich. Ziel ist das Bewertungsformular darunter. */
.werbeband{padding:clamp(56px, 6vw, 92px) 0;}
.wb-flaeche{
  background:var(--bronze); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  /* Breites, flaches Band nach Referenz: rund 82 Prozent der Inhaltsbreite
     (etwa 66 Prozent der Fensterbreite) bei knappem Innenabstand. */
  padding:clamp(32px, 3.4vw, 48px) clamp(26px, 3.6vw, 54px);
  max-width:82%; margin-inline:auto;
}
.wb-inhalt{max-width:none; text-align:center;}
.wb-icon{display:block; width:64px; height:64px; margin:0 auto clamp(22px, 2.4vw, 32px);}
.wb-icon svg{
  width:100%; height:100%; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.wb-titel{
  font-family:var(--font-serif); font-weight:300; color:var(--white);
  font-size:var(--titelgroesse); line-height:1.32;
  margin:0 0 clamp(16px, 1.8vw, 24px); text-wrap:balance;
}
.wb-satz{
  font-size:1rem; line-height:1.7; margin:0 auto clamp(20px, 2.2vw, 30px);
  max-width:52ch; opacity:.95;
}
.wb-hinleitung{
  font-size:1.0625rem; line-height:1.6; margin:0 0 clamp(26px, 2.8vw, 36px);
  color:var(--white);
}
.wb-verweis{
  display:inline-block; color:var(--white);
  font-size:.8125rem; letter-spacing:.18em; text-transform:uppercase;
  transition:letter-spacing var(--transition);
}
.wb-verweis::after{
  content:""; display:block; width:56px; height:1px;
  background:rgba(255,255,255,.85); margin:13px auto 0;
  transition:width var(--transition);
}
.wb-verweis:hover{color:var(--white);}
.wb-verweis:hover::after{width:96px;}
.wb-zusatz{
  text-align:center; font-size:.9375rem; color:var(--anthracite);
  margin:clamp(26px, 3vw, 38px) 0 0;
}
.wb-zusatz a{color:var(--bronze-nav); border-bottom:1px solid var(--bronze); padding-bottom:3px;}
.wb-zusatz a:hover{color:var(--bronze-dark);}

@media (max-width:1200px){
  .hl-spur{grid-auto-columns:calc((100% - 2 * 12px) / 3);}
  .google-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:860px){
  .hl-spur{grid-auto-columns:calc((100% - 12px) / 2);}
  .wb-flaeche{min-height:0; max-width:none; padding:clamp(30px, 6vw, 46px) clamp(24px, 6vw, 40px);}
}
@media (max-width:600px){
  .hl-spur{grid-auto-columns:86%;}
  .google-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   Bewertungsstrecke in drei Schritten (Referenz Stauss & Partner)
   ========================================================================== */
.bs-fortschritt{
  display:grid; grid-template-columns:repeat(3, 1fr);
  list-style:none; margin:clamp(38px, 4vw, 58px) 0 clamp(34px, 4vw, 50px); padding:0;
}
.bs-stufe{position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;}
.bs-stufe::before{
  content:""; position:absolute; top:19px; left:calc(-50% + 24px); right:calc(50% + 24px);
  height:1px; background:var(--greige);
}
.bs-stufe:first-child::before{display:none;}
.bs-zahl{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--greige); background:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:.9375rem; color:#8b857e;
  position:relative; z-index:2;
  transition:background var(--transition), border-color var(--transition), color var(--transition);
}
.bs-name{font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:#8b857e;}
.bs-stufe.is-erledigt .bs-zahl{border-color:var(--bronze); color:var(--bronze-dark);}
.bs-stufe.is-erledigt::before{background:var(--bronze);}
.bs-stufe.is-erledigt .bs-name{color:var(--anthracite);}
.bs-stufe.is-aktiv .bs-zahl{background:var(--bronze); border-color:var(--bronze); color:var(--white);}
.bs-stufe.is-aktiv::before{background:var(--bronze);}
.bs-stufe.is-aktiv .bs-name{color:var(--anthracite); font-weight:600;}

.bs-form{max-width:760px;}
.bs-schritt{display:none; border:0; margin:0; padding:0;}
.bs-schritt.is-aktiv{display:grid; grid-template-columns:1fr 1fr; gap:20px 22px;}
.bs-schritt legend{
  float:left; width:100%; padding:0; margin:0 0 6px;
  font-family:var(--font-serif); font-size:clamp(1.2rem, 1.7vw, 1.45rem);
  line-height:1.35; color:var(--anthracite);
}
.bs-feld--voll{grid-column:1 / -1;}
.bs-feld > label, .bs-label{display:block; font-size:.8125rem; color:var(--anthracite); margin-bottom:8px;}
.bs-feld input, .bs-feld select, .bs-feld textarea{
  width:100%; box-sizing:border-box;
  background:var(--white); border:1px solid var(--greige); color:var(--anthracite);
  font-family:var(--font-sans); font-size:.9375rem; padding:14px 15px;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.bs-feld textarea{resize:vertical;}
.bs-feld select{appearance:none; padding-right:44px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292929' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;}
.bs-feld input:focus, .bs-feld select:focus, .bs-feld textarea:focus{
  outline:none; border-color:var(--bronze); box-shadow:0 0 0 3px rgba(166,138,103,.16);
}
.bs-feld input:invalid.is-geprueft,
.bs-feld select:invalid.is-geprueft{border-color:#9c4a3c;}

/* Objektart als antippbare Kacheln */
.bs-arten{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;}
.bs-art{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:20px 10px 16px; cursor:pointer;
  background:var(--offwhite); border:1px solid var(--greige);
  font-size:.9375rem; color:var(--anthracite);
  transition:border-color var(--transition), background var(--transition);
}
.bs-art input{position:absolute; opacity:0; width:1px; height:1px; margin:0;}
.bs-art svg{width:42px; height:42px; fill:none; stroke:var(--anthracite); stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--transition);}
.bs-art:hover{border-color:var(--bronze);}
.bs-art:has(input:checked){background:var(--white); border-color:var(--bronze); color:var(--green);}
.bs-art:has(input:checked) svg{stroke:var(--bronze);}
.bs-art:has(input:focus-visible){outline:2px solid var(--bronze); outline-offset:3px;}
.bs-arten.is-fehler{outline:1px solid #9c4a3c; outline-offset:6px;}

.bs-hinweis{grid-column:1 / -1; font-size:.8125rem; line-height:1.6; color:#7a746e; margin:0;}
.bs-nav{grid-column:1 / -1; display:flex; gap:14px; margin-top:10px;}
.bs-weiter{
  flex:1; background:var(--bronze); color:var(--white); border:0; cursor:pointer;
  font-family:var(--font-sans); font-size:.9375rem; padding:16px 30px;
  transition:background var(--transition);
}
.bs-weiter:hover{background:var(--bronze-dark);}
.bs-zurueck{
  background:none; border:1px solid var(--greige); color:var(--anthracite); cursor:pointer;
  font-family:var(--font-sans); font-size:.9375rem; padding:16px 28px;
  transition:border-color var(--transition), color var(--transition);
}
.bs-zurueck:hover{border-color:var(--bronze); color:var(--bronze-dark);}

.bs-vertrauen{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(24px, 3vw, 46px);
  margin-top:clamp(52px, 6vw, 84px); padding-top:clamp(34px, 4vw, 50px);
  border-top:1px solid var(--greige);
}
.bs-punkt{font-size:.875rem; line-height:1.7; color:var(--anthracite);}
.bs-punkt b{display:block; font-size:1rem; margin-bottom:6px;}

@media (max-width:760px){
  .bs-schritt.is-aktiv{grid-template-columns:1fr;}
  .bs-arten{grid-template-columns:1fr 1fr;}
  .bs-vertrauen{grid-template-columns:1fr;}
  .bs-name{font-size:.6875rem; letter-spacing:.06em;}
}

/* ---- Folgeangaben je Objektart ----
   Nach der Wahl der Objektart klappt der passende Block auf; die Felder der
   uebrigen Bloecke werden abgeschaltet, damit sie die Pruefung nicht stoeren. */
.bs-detail{
  grid-column:1 / -1;
  display:grid; grid-template-columns:1fr 1fr; gap:20px 22px;
  margin-top:14px; padding-top:clamp(24px, 2.6vw, 34px);
  border-top:1px solid var(--greige);
  animation:bsAufklappen 320ms ease;
}
.bs-detail[hidden]{display:none;}
@keyframes bsAufklappen{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){.bs-detail{animation:none;}}
.bs-detailkopf{
  grid-column:1 / -1; margin:0;
  font-family:var(--font-serif); font-size:1.05rem; color:var(--anthracite);
}
.bs-zusatz{font-size:.75rem; color:#7a746e; letter-spacing:0; text-transform:none;}

/* Auswahlreihen (Art des Hauses, Erschliessung, …) */
.bs-optionen{display:flex; flex-wrap:wrap; gap:10px;}
.bs-option{position:relative; cursor:pointer;}
.bs-option input{position:absolute; opacity:0; width:1px; height:1px; margin:0;}
.bs-option span{
  display:block; padding:11px 18px;
  background:var(--white); border:1px solid var(--greige);
  font-size:.9375rem; color:var(--anthracite);
  transition:border-color var(--transition), background var(--transition), color var(--transition);
}
.bs-option:hover span{border-color:var(--bronze);}
.bs-option input:checked + span{background:var(--bronze); border-color:var(--bronze); color:var(--white);}
.bs-option input:focus-visible + span{outline:2px solid var(--bronze); outline-offset:3px;}

/* Qualitaetsstandard 1 bis 5 */
.bs-stufen{display:flex; gap:8px;}
.bs-stufe-wahl{position:relative; cursor:pointer;}
.bs-stufe-wahl input{position:absolute; opacity:0; width:1px; height:1px; margin:0;}
.bs-stufe-wahl span{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:46px;
  background:var(--white); border:1px solid var(--greige);
  font-family:var(--font-serif); font-size:1rem; color:var(--anthracite);
  transition:border-color var(--transition), background var(--transition), color var(--transition);
}
.bs-stufe-wahl:hover span{border-color:var(--bronze);}
.bs-stufe-wahl input:checked + span{background:var(--bronze); border-color:var(--bronze); color:var(--white);}
.bs-stufe-wahl input:focus-visible + span{outline:2px solid var(--bronze); outline-offset:3px;}

@media (max-width:760px){
  .bs-detail{grid-template-columns:1fr;}
  .bs-stufen{gap:6px;}
  .bs-stufe-wahl span{width:46px; height:44px;}
}

/* ==========================================================================
   Titelbild der Startseite: Handlungsbalken und Suchleiste (Referenz WALDE)
   Der Balken liegt im Bild, die Suchleiste ragt ueber die untere Kante hinaus.
   ========================================================================== */
/* Das Titelbild stapelt Inhalt und Leisten untereinander. Der untere
   Abschnittsabstand entfaellt, damit die Suchleiste ueber die Bildkante ragt. */
.hero--titelbild{flex-direction:column; align-items:stretch; justify-content:flex-end; padding-bottom:0;}
.hero-leisten{
  position:relative; z-index:3; flex:0 0 auto;
  width:min(1020px, 100% - 2 * var(--gutter));
  margin:clamp(30px, 4vw, 56px) var(--gutter) -46px auto;
}
.hero-verkaufen{
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  background:rgba(166,138,103,.94); color:var(--white);
  padding:clamp(24px, 2.6vw, 36px) clamp(24px, 3vw, 44px);
  font-family:var(--font-serif); font-size:clamp(1.1rem, 1.75vw, 1.55rem);
  line-height:1.3;
  transition:background var(--transition), gap var(--transition);
}
.hero-verkaufen svg{width:30px; height:30px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.hero-verkaufen:hover{background:var(--bronze); color:var(--white); gap:38px;}

.hero-suche{
  display:grid; grid-template-columns:1fr 230px 78px;
  background:var(--offwhite);
  margin-top:clamp(30px, 3.4vw, 52px);
  box-shadow:0 18px 40px -22px rgba(17,17,17,.5);
}
.hs-feld{padding:16px 22px 15px; text-align:left;}
.hs-feld--absicht{border-left:1px solid var(--greige);}
.hs-feld label{
  display:block; font-size:.8125rem; color:#6f6a64; margin-bottom:4px;
}
.hs-feld input, .hs-feld select{
  width:100%; box-sizing:border-box;
  background:none; border:0; padding:0;
  font-family:var(--font-sans); font-size:1.0625rem; color:var(--anthracite);
}
.hs-feld input::placeholder{color:#9b958d;}
.hs-feld input:focus, .hs-feld select:focus{outline:none;}
.hs-feld--absicht select{
  appearance:none; padding-right:26px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292929' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right center; background-size:20px;
}
.hs-knopf{
  background:var(--green); color:var(--white); border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition);
}
.hs-knopf svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round;}
.hs-knopf:hover{background:var(--green-dark);}
.hero-suche:focus-within{box-shadow:0 18px 40px -22px rgba(17,17,17,.5), 0 0 0 2px var(--bronze);}

/* Der folgende Abschnitt macht Platz fuer die ueberstehende Suchleiste */
.hero--titelbild + section{padding-top:clamp(88px, 9vw, 130px);}

@media (max-width:900px){
  .hero-leisten{width:calc(100% - 2 * var(--gutter)); margin-inline:var(--gutter);}
  .hero-verkaufen{font-size:1.05rem; padding:20px 22px;}
  .hero-suche{grid-template-columns:1fr 68px; grid-template-rows:auto auto;}
  .hs-feld{grid-column:1;}
  .hs-feld--absicht{border-left:0; border-top:1px solid var(--greige); grid-row:2;}
  .hs-knopf{grid-column:2; grid-row:1 / span 2;}
}

/* ---- Bewertungsformular als Overlay ----
   Gleiche Technik wie das Kontakt-Overlay: die Seite wird abgedunkelt, das
   Formular liegt als eigene Ebene darueber und ist in sich scrollbar. */
.bs-overlay{
  position:fixed; inset:0; z-index:320;
  background:rgba(41,41,41,.62); backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(16px, 4vh, 56px) var(--gutter);
  overflow-y:auto;
}
.bs-overlay[hidden]{display:none;}
.bs-dialog{
  position:relative; background:var(--white);
  width:min(1000px, 100%);
  box-shadow:0 34px 80px -24px rgba(17,17,17,.5);
}
.bs-dialog-inhalt{padding:clamp(30px, 4vw, 60px);}
.bs-schliessen{
  position:absolute; top:18px; right:22px; z-index:2;
  background:none; border:0; cursor:pointer;
  font-size:1.5rem; line-height:1; color:var(--anthracite);
  transition:transform var(--transition), color var(--transition);
}
.bs-schliessen:hover{color:var(--bronze-dark); transform:rotate(90deg);}
.bs-dialog .section-head{margin-bottom:0;}
.bs-dialog .bs-form{max-width:none;}
.bs-dialog .bs-vertrauen{margin-top:clamp(38px, 4vw, 58px);}
@media (max-width:700px){
  .bs-overlay{padding:0;}
  .bs-dialog{width:100%; min-height:100%;}
}

/* ==========================================================================
   Bereiche: "Wir bringen Mensch und Immobilie zusammen" (Referenz WALDE)
   ========================================================================== */
#bereiche{padding-top:clamp(64px, 7vw, 104px);}
/* Masse aus der Referenz (Inhaltsbreite dort 949 px), als Anteil der
   Inhaltsbreite hinterlegt: Ueberschrift, Unterzeile und Kacheln stehen alle
   auf derselben linken Kante; Ueberschrift 3,16 Prozent Schriftgroesse und
   hoechstens 84 Prozent breit, Abstand zur Unterzeile 4,1 Prozent, von dort
   zu den Kacheln 3,2 Prozent. Die Kacheln sind hochformatig (5:6), je 23,7
   Prozent breit mit 1,73 Prozent Abstand. */
.br-ueberschrift{
  font-size:var(--titelgroesse); line-height:1.25;
  margin:0 0 4.1%; max-width:84%;
}
/* Kurzer Fliesstext zwischen Ueberschrift und Kacheln (Referenz WALDE):
   volle Inhaltsbreite, die Bereiche als farbige Verweise hervorgehoben. */
.br-fliesstext{
  font-size:1rem; line-height:1.7; color:var(--anthracite);
  max-width:none; margin:0 0 3.4%;
}
.br-fliesstext a{
  color:var(--bronze-nav); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--transition), color var(--transition);
}
.br-fliesstext a:hover,
.br-fliesstext a:focus-visible{color:var(--bronze-dark); border-bottom-color:currentColor;}
.br-kopf{
  display:flex; align-items:baseline; justify-content:space-between; gap:30px;
  margin:0 0 3.2%;
}
.br-unterzeile{
  font-size:clamp(1.3rem, 2.1vw, 1.9rem); line-height:1.3; margin:0;
  color:var(--anthracite);
}
.br-marke{
  flex-shrink:0; font-size:.875rem; font-weight:600; color:var(--anthracite);
}
.bereiche-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1.73%;
}
.bereich{display:block; color:var(--anthracite);}
.br-bild{
  display:block; aspect-ratio:5/6; overflow:hidden; background:var(--greige);
}
.br-bild img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 620ms ease;}
.bereich:hover .br-bild img{transform:scale(1.05);}
/* Referenz: der Pfeil steht direkt hinter dem Wort, nicht am rechten Rand
   der Kachel; Abstand zum Bild 3,6 Prozent der Inhaltsbreite. */
.br-zeile{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px;
  margin-top:clamp(18px, 2.85vw, 44px); font-size:clamp(1rem, 1.15vw, 1.125rem); line-height:1.35;
  transition:color var(--transition);
}
.br-zeile svg{
  width:20px; height:20px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--transition);
}
.bereich:hover .br-zeile{color:var(--bronze-dark);}
.bereich:hover .br-zeile svg{transform:translateX(5px);}

@media (max-width:900px){
  .br-ueberschrift{max-width:none;}
  .bereiche-grid{grid-template-columns:1fr 1fr; gap:26px 3%;}
}
@media (max-width:520px){
  .bereiche-grid{grid-template-columns:1fr; gap:26px;}
  .br-kopf{flex-direction:column; align-items:flex-start; gap:8px;}
}

/* ==========================================================================
   Einstieg unter dem Titelbild: Anspruch von VAN TOL
   Schrift und Ueberschriftenbild wie auf der uebrigen Seite; uebernommen sind
   nur der Textinhalt und der Wechsel in kursives Bronze bei den beiden
   hervorgehobenen Woertern.
   ========================================================================== */
#anspruch{padding-top:clamp(96px, 10vw, 150px); text-align:center;}
.an-titel{
  font-size:var(--titelgroesse); line-height:1.28; font-weight:400;
  /* Schriftfarbe wie ueberall auf der Seite: Anthrazit #292929 */
  color:var(--anthracite); margin:0 auto clamp(30px, 3.4vw, 48px); max-width:46ch;
  text-wrap:balance;
}
/* Kursiv als Betonung, aber in derselben Schriftfarbe wie die Ueberschrift */
.an-titel em{font-style:normal; color:inherit;}
.an-text{
  font-size:1.0625rem; line-height:1.85; color:var(--anthracite);
  max-width:78ch; margin:0 auto clamp(34px, 4vw, 54px);
}
.an-knopf{
  display:inline-block; position:relative;
  font-family:var(--font-sans); font-size:.8125rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--bronze-nav); text-decoration:none;
  padding:0 0 9px;
  transition:color var(--transition);
}
.an-knopf::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  bottom:0; width:38px; height:1px; background:var(--bronze-hell);
  transition:width var(--transition);
}
.an-knopf:hover{color:var(--bronze-dark); background:none;}
.an-knopf:hover::after{width:100%;}

@media (max-width:700px){
  .an-titel br{display:none;}
  .an-text{font-size:1rem; line-height:1.75;}
}

/* ==========================================================================
   Vorteilsbanner unter dem Einstieg
   Inhalt: vier Zusagen. Gestaltung: dunkelgruenes Band, Symbole und Schrift in
   Bronze, mittig, mit kurzem Strich zwischen Symbol und Bezeichnung.
   ========================================================================== */
.vorteile{
  background:var(--green-tief);
  /* schlankes Band: knapper Innenabstand, ohne Vorzeile */
  padding:clamp(34px, 3.2vw, 48px) 0;
  /* schliesst direkt an den Abschnitt darueber an — kein weisser Streifen */
  margin-top:0;
  text-align:center;
}
.vt-eyebrow{
  display:block; font-family:var(--font-marke);
  font-size:.8125rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bronze-hell); margin-bottom:clamp(38px, 4.4vw, 60px);
}
.vorteile-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(30px, 4vw, 60px);
}
.vorteil{display:flex; flex-direction:column; align-items:center;}
.vt-icon{display:block; width:52px; height:52px;}
.vt-icon svg{
  width:100%; height:100%; fill:none; stroke:var(--bronze);
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
}
.vt-strich{
  display:block; width:54px; height:1px; background:var(--bronze);
  margin:18px 0 16px; opacity:.85;
}
.vt-name{
  font-family:var(--font-serif); font-size:1.0625rem; line-height:1.45;
  color:var(--greige); margin:0;
}

@media (max-width:860px){
  .vorteile-grid{grid-template-columns:1fr 1fr; gap:44px 30px;}
}
@media (max-width:460px){
  .vorteile-grid{grid-template-columns:1fr; gap:38px;}
}

/* ---- FAQ: Fragen erst auf Wunsch anzeigen ----
   Standardmaessig ist nur die Ueberschrift zu sehen. Ein schlichter
   Bronze-Pfeil zeigt an, dass sich dahinter etwas oeffnen laesst. */
.section-head--faq{margin-bottom:0;}
.faq-kopf{margin:0;}
.faq-schalter{
  display:flex; align-items:center; gap:18px;
  width:100%; padding:0; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:inherit; line-height:inherit;
  color:var(--anthracite); text-align:left;
  transition:color var(--transition);
}
.faq-schalter:hover{color:var(--bronze-dark);}
.faq-schalter:focus-visible{outline:2px solid var(--bronze); outline-offset:6px;}
.faq-chevron{
  width:26px; height:26px; flex-shrink:0;
  fill:none; stroke:var(--bronze); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform 320ms ease;
}
.faq-schalter[aria-expanded="true"] .faq-chevron{transform:rotate(180deg);}
.faq-liste{margin-top:clamp(26px, 3vw, 40px);}
.faq-liste[hidden]{display:none;}
.faq-liste:not([hidden]){animation:faqAufklappen 320ms ease;}
@keyframes faqAufklappen{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){
  .faq-chevron{transition:none;}
  .faq-liste:not([hidden]){animation:none;}
}

/* ---- Sanftes Einblenden beim Scrollen ----
   Wird von initEinblenden() gesetzt: die Elemente sind zunaechst unsichtbar
   und erscheinen erst, wenn der Besucher zu scrollen beginnt. */
/* Ruhiges Einblenden: kurzer Weg, lange Dauer, weiche Verzoegerungskurve.
   --stufe steuert, wann ein Element an der Reihe ist. Steht dort nichts,
   vergibt initEinblenden() die Stufe nach der Reihenfolge im Blickfeld. */
.einblenden{
  opacity:0; transform:translateY(18px);
  transition:opacity 950ms cubic-bezier(.22,.61,.36,1) var(--stufe, 0ms),
             transform 950ms cubic-bezier(.22,.61,.36,1) var(--stufe, 0ms);
}
.einblenden.sichtbar{opacity:1; transform:none;}
/* Nacheinander statt gleichzeitig: erst die Ueberschrift, dann der Strich,
   dann der Text, zuletzt die Schaltflaeche. */
.an-titel.einblenden{--stufe:0ms;}
.an-strich.einblenden{--stufe:220ms;}
.an-text.einblenden{--stufe:380ms;}
.an-knopf.einblenden{--stufe:620ms;}
/* Gleiches Prinzip fuer den Einstiegsblock jeder Menueseite:
   zuerst die Ueberschrift, dann der Fliesstext. */
.in-titel.einblenden{--stufe:0ms;}
.in-text.einblenden{--stufe:320ms;}

/* Gestaffelte Gruppen: Der Block wird beobachtet, seine Kinder kommen
   nacheinander. Die Klassen setzt initStaffelEinblenden() zur Laufzeit —
   ohne JavaScript bleibt also alles sichtbar. */
.staffel-kind{
  opacity:0; transform:translateY(15px);
  transition:opacity 950ms cubic-bezier(.22,.61,.36,1) var(--stufe, 0ms),
             transform 950ms cubic-bezier(.22,.61,.36,1) var(--stufe, 0ms);
}
.staffel.sichtbar > .staffel-kind{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  .einblenden, .staffel-kind{opacity:1; transform:none; transition:none;}
}

/* Breites Stimmungsbild unter dem Einstiegsblock der Unternehmensseite */
.ueber-bild{
  width:100%; aspect-ratio:21/9;
  background-size:cover; background-position:center;
  background-color:var(--greige);
}
@media (max-width:700px){ .ueber-bild{aspect-ratio:3/2;} }

/* ==========================================================================
   Zitat im Titelbild der Startseite (Position nach RIEDEL-Vorbild)
   Erste Zeile bei rund 53 Prozent der Bildhoehe, der Verweis bei rund 74
   Prozent; das Zitat ist sofort sichtbar und blendet sich beim Laden ein.
   ========================================================================== */
.hero-zitat--start{
  /* Anteil der Bildhoehe statt der Fensterhoehe: die Mitte des Blocks liegt
     wie in der Referenz bei rund 63 Prozent der Titelbildhoehe. */
  bottom:26%;
  max-width:min(760px, 54vw);
  opacity:1; transform:none;
  animation:zitatEin 900ms ease both 260ms;
}
@keyframes zitatEin{
  from{opacity:0; transform:translateY(26px);}
  to{opacity:1; transform:none;}
}
.hz-verweis{
  display:inline-block; margin-top:4px;
  font-family:var(--font-sans); font-size:.875rem;
  letter-spacing:.06em; color:rgba(255,255,255,.92);
  text-decoration:none; padding-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.42);
  text-shadow:0 1px 14px rgba(17,17,17,.5);
  transition:border-color 200ms ease, color 200ms ease;
}
.hz-verweis:hover,
.hz-verweis:focus-visible{color:var(--white); border-bottom-color:var(--white);}
@media (prefers-reduced-motion: reduce){
  .hero-zitat--start{animation:none;}
}
@media (max-width:900px){
  .hero-zitat--start{
    position:absolute; max-width:none;
    left:var(--gutter); right:var(--gutter);
    bottom:clamp(70px, 14vh, 130px); margin:0;
  }
}

/* Zweizeilige Ansprache ueber den Google-Bewertungen: je Satz eine Zeile,
   daher breiter als der Standardkopf. */
#bewertungen .section-head{max-width:none;}
.bw-titel{max-width:none; text-wrap:pretty; font-size:var(--titelgroesse);}
@media (max-width:900px){ .bw-titel br{display:none;} }

/* ==========================================================================
   Persoenliches Wort der Gruenderin
   Masse aus der Referenz: Bild 36,3 Prozent der Blockbreite, Abstand 9,6
   Prozent, Textspalte 54,1 Prozent; Bild im Hochformat 5:7. Schriftgroessen
   ebenfalls als Anteil der Blockbreite (Ueberschrift 2,85 Prozent,
   Fliesstext 1,54 Prozent, Verweis 1,2 Prozent).
   ========================================================================== */
.wort{padding-top:clamp(56px, 6vw, 92px);}
.wort-raster{
  display:grid; grid-template-columns:36.3% 54.1%;
  gap:0 9.6%; align-items:center;
}
/* Seitenverhaeltnis der Originalaufnahme (906:1360 = 2:3), damit das
   Portrait vollstaendig zu sehen ist und nichts beschnitten wird. */
.wort-bild{
  aspect-ratio:2/3; overflow:hidden; background:var(--greige);
}
.wort-bild img{width:100%; height:100%; object-fit:cover; display:block;}
.wort-titel{
  font-size:var(--titelgroesse); line-height:1.28;
  margin:0 0 clamp(20px, 2.2vw, 30px); max-width:none; text-wrap:balance;
}
/* Wie im Anspruchsblock: kursiv als Betonung, aber in der Schriftfarbe der
   Ueberschrift — damit alle Ueberschriften der Seite einheitlich wirken. */
.wort-titel em{font-style:normal; color:inherit;}
.wort-text p{
  font-size:clamp(1rem, 1.2vw, 1.0625rem); line-height:1.7;
  color:var(--anthracite); margin:0 0 1.5em; max-width:none;
}
.wort-name{
  font-family:var(--font-serif); font-weight:600;
  margin-bottom:clamp(26px, 3vw, 40px) !important;
}
.wort-name span{
  display:block; font-weight:400; font-size:.9375rem;
  /* Schriftfarbe wie im gesamten Abschnitt: Anthrazit #292929 */
  color:var(--anthracite); opacity:.72; margin-top:2px;
}
.wort-verweis{
  display:inline-block; font-size:.8125rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--bronze-nav); text-decoration:none;
  padding-bottom:9px; position:relative;
}
.wort-verweis::after{
  content:''; position:absolute; left:0; bottom:0;
  width:38px; height:1px; background:var(--bronze);
  transition:width var(--transition);
}
.wort-verweis:hover::after,
.wort-verweis:focus-visible::after{width:100%;}

@media (max-width:900px){
  .wort-raster{grid-template-columns:1fr; gap:34px;}
  .wort-bild{aspect-ratio:2/3; max-width:400px;}
  .wort-titel{text-wrap:pretty;}
}

/* ==========================================================================
   Suchprofil als breites Bildband
   Aufbau nach Referenz: Aussage und Schaltflaeche links auf dem Foto.
   Farben wie im Vorteilsband: Abdunklung in Anthrazit #292929, Schaltflaeche
   in Bronze.
   ========================================================================== */
.suchprofil{padding:clamp(48px, 5vw, 78px) 0;}
/* Ohne Foto: nur die Flaeche in tiefem Gruen, schmaler als die Inhaltsbreite */
.sp-band{
  background:var(--green-tief);
  max-width:84.5%; margin-inline:auto;
  padding:clamp(34px, 3.6vw, 54px) clamp(26px, 3.6vw, 56px);
}
.sp-inhalt{max-width:min(640px, 100%);}
.sp-inhalt h2{
  /* ausdruecklich die Ueberschriftenschrift der Seite */
  font-family:var(--font-serif);
  color:var(--white); margin:0 0 14px;
  font-size:var(--titelgroesse); line-height:1.28;
  text-wrap:balance;
}
/* Zweite Zeile in derselben Schriftgroesse wie die Ueberschrift, nur in
   hellerem Ton — beide Zeilen lesen sich als eine Aussage. */
.sp-text{
  font-family:var(--font-serif);
  color:var(--greige); margin:0 0 clamp(24px, 2.8vw, 38px);
  font-size:var(--titelgroesse); line-height:1.28;
}
.sp-knopf{
  display:inline-flex; align-items:center; gap:14px;
  padding:17px 30px;
  background:var(--bronze); color:var(--white);
  font-size:.9375rem; font-weight:600; letter-spacing:.02em;
  transition:background var(--transition);
}
.sp-knopf svg{
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--transition);
}
.sp-knopf:hover{background:var(--bronze-dark); color:var(--white);}
.sp-knopf:hover svg{transform:translateX(4px);}
@media (max-width:900px){
  .sp-band{max-width:none;}
  .sp-inhalt{max-width:none;}
}

/* Video-Abschnitt ohne farbigen Grund */
.videos{background:var(--white);}

/* ==========================================================================
   Bewertungsseite: schmales dunkles Band "Gutachten und Bewertungen"
   Nur Symbol und Text, deutlich schmaler als die Inhaltsbreite.
   ========================================================================== */
/* Die Farbflaeche laeuft ueber die gesamte Seitenbreite, der Text bleibt
   mittig in ruhiger Zeilenlaenge. */
.gutachten{
  background:var(--green-tief); color:var(--offwhite);
  padding:clamp(44px, 4.4vw, 64px) 0;
}
.gu-flaeche{
  width:min(100%, 1040px); margin-inline:auto;
  text-align:center;
}
.gu-eyebrow{
  display:block; font-family:var(--font-marke);
  font-size:.8125rem; letter-spacing:.2em; line-height:1.7;
  text-transform:uppercase; color:var(--bronze-hell);
  margin-bottom:clamp(24px, 2.6vw, 34px);
}
.gu-raster{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px, 3vw, 44px);
}
.gu-icon{display:block; width:46px; height:46px; margin:0 auto 16px;}
.gu-icon svg{
  width:100%; height:100%; fill:none; stroke:var(--bronze-hell);
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
.gu-punkt h3{
  font-family:var(--font-sans); font-weight:400;
  font-size:clamp(1rem, 1.3vw, 1.125rem); line-height:1.4;
  color:var(--white); margin:0 0 14px;
}
.gu-punkt p{
  font-size:.9375rem; line-height:1.7;
  color:var(--greige); margin:0;
}
.gu-frage{
  margin:clamp(26px, 2.8vw, 38px) 0 12px;
  font-size:1rem; color:var(--offwhite);
}
.gu-verweis{
  display:inline-block; font-size:.8125rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--bronze-hell); text-decoration:none;
  padding-bottom:9px; position:relative;
}
.gu-verweis::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  bottom:0; width:38px; height:1px; background:var(--bronze);
  transition:width var(--transition);
}
.gu-verweis:hover{color:var(--white);}
.gu-verweis:hover::after{width:100%; background:var(--white);}
@media (max-width:900px){
  .gu-flaeche{width:100%;}
}
@media (max-width:620px){
  .gu-raster{grid-template-columns:1fr;}
}

/* ==========================================================================
   Bewertungsseite: die drei Wertermittlungsverfahren als Karten
   ========================================================================== */
/* Weisser Grund, damit sich die Karten klar abheben */
.verfahren{background:var(--white); padding:clamp(56px, 6vw, 96px) 0;}
.verfahren .section-head.center{max-width:820px; margin-bottom:clamp(34px, 4vw, 54px);}
.vf-raster{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(20px, 2.4vw, 34px);
}
/* Das Bild laeuft bis an die Kartenkanten und ist hochformatiger als zuvor
   (4:3 statt 3:2) — dadurch wirkt es im Verhaeltnis zum Text deutlich
   groesser. Der Text bekommt seinen eigenen Innenabstand. */
/* Karte und Grund sind beide weiss — eine Haarlinie haelt die Karten
   trotzdem als eigene Flaeche erkennbar. */
.vf-karte{
  background:var(--white);
  border:1px solid var(--greige);
  padding:0 0 clamp(26px, 2.4vw, 34px);
}
.vf-bild{
  aspect-ratio:4/3; overflow:hidden; background:var(--greige);
  margin-bottom:clamp(22px, 2.2vw, 30px);
}
.vf-karte h3,
.vf-karte p{padding:0 clamp(20px, 1.8vw, 28px);}
.vf-bild img{width:100%; height:100%; object-fit:cover; display:block;}
.vf-karte h3{
  font-family:var(--font-sans); font-weight:400;
  font-size:clamp(1rem, 1.3vw, 1.125rem); line-height:1.4;
  color:var(--anthracite); margin:0 0 12px;
}
.vf-karte p{
  font-size:.9375rem; line-height:1.7;
  color:var(--anthracite); margin:0;
}
@media (max-width:860px){
  .vf-raster{grid-template-columns:1fr; gap:26px;}
  .vf-bild{aspect-ratio:3/2;}
}

/* Titelbild der Bewertungsseite (eigene VAN-TOL-Aufnahme) */
.page-hero--bewertung{
  background-image:url('../img/titel-bewertung-1600.jpg');
  background-position:center 58%;
}
@media (min-width:900px){
  .page-hero--bewertung{background-image:url('../img/titel-bewertung-2400.jpg');}
}

/* Ueberschriften stehen einheitlich gerade — keine kursiven Auszeichnungen. */
h1 em, h2 em, h3 em, h4 em,
.an-titel em, .wort-titel em, .br-ueberschrift em, .bw-titel em{font-style:normal;}

/* ==========================================================================
   Zwei-Bild-Band ueber die volle Seitenbreite (Referenz: Bildpaar)
   ========================================================================== */
/* volle Seitenbreite, beide Bilder fuellen ihre Flaeche randlos.
   Ohne padding:0 wuerde der Standardabstand fuer Abschnitte (88 px oben und
   unten) als weisser Balken ueber und unter dem Band stehen bleiben. */
.bildband{
  display:grid; grid-template-columns:35% 65%;
  width:100vw; margin-left:calc(50% - 50vw);
  padding:0;
}
.bildband figure{margin:0; overflow:hidden; background:var(--greige);}
.bildband img{width:100%; height:100%; display:block; object-fit:cover;}
.bildband figure:first-child img{object-position:center 18%;}
/* feste Bandhoehe, damit das Paar als breiter Streifen liest */
.bildband{height:clamp(300px, 30vw, 470px);}
@media (max-width:700px){
  .bildband{grid-template-columns:1fr; height:auto;}
  .bildband img{aspect-ratio:3/2;}
}

/* ==========================================================================
   Netzwerk: Partner als Schriftzuege
   Bis freigegebene Logodateien vorliegen, stehen die Namen einheitlich in
   Bronze; der Verband steht in seinem eigenen Blau (#071140, aus der
   Vorlage gemessen).
   ========================================================================== */
/* etwas Luft unter dem Laufband, sonst klebt es am Bildband */
/* Weisser Abstand ueber und unter dem Netzwerkband — das Band steht frei */
/* Dunkelgruenes Band wie die Vorteilszeile — oben und unten gleich viel
   Weissraum, damit es mittig zwischen den Abschnitten sitzt. */
.netzwerk{
  background:var(--green-tief);
  padding:clamp(46px, 4.8vw, 76px) 0;
  /* Oben Weissraum, unten buendig: Das Band stoesst direkt an das
     Bildpaar darunter. */
  margin:clamp(56px, 6vw, 96px) 0 0;
}
.nw-kopf{text-align:center; color:var(--bronze-hell);}
/* Eine Reihe, die von allein weiterlaeuft: die Eintraege stehen doppelt
   nebeneinander, die Bahn wandert um genau eine Haelfte — dadurch schliesst
   sie nahtlos. Beim Ueberfahren haelt sie an. */
.nw-band{
  overflow:hidden; margin-top:clamp(30px, 3.4vw, 46px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.nw-reihe{
  display:flex; align-items:center;
  gap:clamp(40px, 5vw, 88px);
  width:max-content;
  animation:nwLauf 42s linear infinite;
}
.nw-band:hover .nw-reihe{animation-play-state:paused;}
@keyframes nwLauf{
  from{transform:translateX(0);}
  to{transform:translateX(calc(-50% - clamp(40px, 5vw, 88px) / 2));}
}
/* Logos hell auf dem dunklen Grund */
.nw-eintrag--logo img{filter:brightness(0) invert(1); opacity:.86;}
/* Wer wenig Bewegung eingestellt hat, sieht die Reihe ruhig und mittig
   umbrochen — kein Laufband, keine Bildlaufleiste. */
@media (prefers-reduced-motion: reduce){
  .nw-reihe{
    animation:none; width:auto; flex-wrap:wrap; justify-content:center;
    row-gap:clamp(20px, 2.4vw, 34px);
  }
  .nw-band{
    overflow:visible;
    -webkit-mask-image:none; mask-image:none;
  }
}
.nw-eintrag{
  flex:0 0 auto; width:auto; min-width:140px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; min-height:76px;
}
.nw-name{text-align:center; color:#EDE8E0;}
.nw-wort{
  font-family:var(--font-marke); font-size:clamp(.95rem, 1.15vw, 1.08rem);
  letter-spacing:.14em; text-transform:uppercase; line-height:1.25;
  white-space:nowrap;
}
.nw-zusatz{
  font-family:var(--font-sans); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--taupe); line-height:1.4; white-space:nowrap;
}
/* Logos einheitlich hoch, damit die Bahn ruhig bleibt */
.nw-eintrag--logo img{
  height:46px; width:auto; max-width:230px;
  object-fit:contain; display:block;
}

/* ==========================================================================
   Unsere Standorte: Bild links, Angaben rechts (Referenz RIEDEL)
   ========================================================================== */
.standorte-band{padding:clamp(56px, 6vw, 96px) 0;}
.st-kopf{text-align:center;}
.st-raster{
  display:grid; grid-template-columns:55% 1fr;
  gap:0 clamp(40px, 6vw, 96px);
  align-items:center;
  margin-top:clamp(34px, 4vw, 58px);
}
.st-bild{margin:0; overflow:hidden; background:var(--greige);}
.st-bild img{width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:16/11;}
.st-angaben h3{
  font-family:var(--font-sans); font-weight:600;
  font-size:clamp(1.05rem, 1.4vw, 1.2rem); line-height:1.35;
  color:var(--anthracite); margin:0 0 26px;
}
.st-zeilen{
  font-size:1rem; line-height:1.75; color:var(--anthracite);
  margin:0 0 26px;
}
.st-zeilen a{color:var(--bronze-nav); text-decoration:none;}
.st-zeilen a:hover{color:var(--bronze-dark); text-decoration:underline;}
/* Telefonzeilen im Standortblock: kleines Symbol statt des Buchstabens,
   Festnetz und Mobil untereinander. */
.st-icon{display:inline-block; width:14px; margin-right:8px; vertical-align:-2px; line-height:0;}
.st-icon svg{width:14px; height:14px; fill:var(--taupe); display:block;}

.st-vorsatz{color:var(--taupe); margin-right:6px;}
/* Anfahrtskarte im Standortblock: erscheint erst auf Klick auf den Verweis
   »Anfahrtsroute« und nimmt die Breite der Standortangaben ein. */
.st-karte{margin-top:20px; aspect-ratio:4/3;}
@media (min-width:900px){ .st-karte{aspect-ratio:16/10;} }

.st-hinweis{
  font-size:.875rem; line-height:1.6; color:var(--taupe);
  border-left:2px solid var(--greige); padding-left:14px;
  margin:0 0 30px; max-width:34em;
}
.st-verweis{
  display:inline-block; position:relative;
  font-size:.8125rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bronze-nav);
  text-decoration:none; padding-bottom:9px;
}
.st-verweis::after{
  content:''; position:absolute; left:0; bottom:0;
  width:38px; height:1px; background:var(--bronze);
  transition:width var(--transition);
}
.st-verweis:hover{color:var(--bronze-dark);}
.st-verweis:hover::after{width:100%;}
@media (max-width:860px){
  .st-raster{grid-template-columns:1fr; gap:30px;}
}

/* Beispielrechnung im Wechselraster (Wohn-/Geschaeftshaeuser) */
.mfh-rechnung{
  width:100%; border-collapse:collapse;
  margin:0 0 1.6em; font-size:.9375rem;
}
.mfh-rechnung caption{
  caption-side:top; text-align:left;
  font-size:.8125rem; color:var(--taupe); padding-bottom:10px;
}
.mfh-rechnung th, .mfh-rechnung td{
  padding:9px 0; text-align:left; font-weight:400;
  color:var(--anthracite); border-bottom:1px solid var(--greige);
}
.mfh-rechnung td{text-align:right;}
.mfh-rechnung .mfh-summe th, .mfh-rechnung .mfh-summe td{
  font-weight:600; border-bottom:0; padding-top:14px;
}

/* Titelbild Wohn-/Geschaeftshaeuser: Blick ueber Freiburg */
/* Das Titelbild der Wohn- und Geschaeftshaeuser laeuft als flaches, breites
   Band — Hoehe rund ein Drittel der Fensterbreite statt volle Bildschirmhoehe. */

/* Titelbild der Grundstuecksseite: Luftaufnahme eines Baugrundstuecks. */

/* Videotitelbild: das Video liegt hinter dem Verlauf und fuellt die Flaeche.
   Ohne Video (oder bei ausgeschalteter Bewegung) bleibt das Standbild stehen. */
.page-hero--video{background-color:var(--green-tief); overflow:hidden;}
.page-hero--video .hero-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  border:0; pointer-events:none;
}
.page-hero--video::before{z-index:1;}
.page-hero--video > *:not(.hero-video){position:relative; z-index:2;}
@media (prefers-reduced-motion: reduce){
  .page-hero--video .hero-video{display:none;}
  .page-hero--video{
    background-image:url('../video/rundgang-au-altschloessleweg-poster.jpg');
    background-size:cover; background-position:center;
  }
}

.page-hero--grundstuecke{
  background-image:url('../img/grundstueck-luft-900.jpg');
  background-position:center 55%;
}
@media (min-width:900px){
  .page-hero--grundstuecke{background-image:url('../img/grundstueck-luft-1600.jpg');}
}

.page-hero--wohngeschaeft{
  background-image:url('../img/mfh-titel-1600.jpg');
  background-position:center 62%;
  /* Gleiche Hoehe wie das Titelbild der Verkaufsseite: die Grundregel
     .page-hero gibt sie vor, deshalb hier keine eigene Hoehe mehr. */
}
@media (min-width:900px){
  .page-hero--wohngeschaeft{background-image:url('../img/mfh-titel-3200.jpg');}
}

/* ==========================================================================
   Marktlage: Ueberschrift mit Zierstrichen, links Text, rechts Bild + Text
   ========================================================================== */
.marktlage{padding:clamp(56px, 6vw, 96px) 0;}
.ml-titel{
  position:relative; margin:0 0 clamp(30px, 3.6vw, 52px);
  padding-right:clamp(0px, 12vw, 190px);
}
.ml-striche{
  position:absolute; right:0; top:.62em;
  display:none; width:150px; height:1px;
}
@media (min-width:1000px){
  .ml-striche{display:block; background:linear-gradient(90deg,
    var(--bronze) 0 46px, transparent 46px 104px, var(--bronze) 104px 150px);}
}
.ml-raster{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0 clamp(34px, 5vw, 78px);
  align-items:start;
}
/* Fliesstext wie der Einstiegstext oben: gleiche Groesse, gleicher
   Zeilenabstand, linksbuendig statt Blocksatz, keine Silbentrennung. */
.ml-raster p{
  font-size:1rem; line-height:1.6; color:var(--anthracite);
  margin:0 0 1.5em; text-align:left; hyphens:manual;
}
.ml-raster p:last-child{margin-bottom:0;}
.ml-bild{margin:0 0 clamp(22px, 2.4vw, 32px); overflow:hidden; background:var(--greige);}
.ml-bild img{width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/3;}
@media (max-width:820px){
  .ml-raster{grid-template-columns:1fr; gap:28px;}
  .ml-titel{padding-right:0;}
}

/* ==========================================================================
   Direktkontakt: rundes Bild links, Aussage und Schaltflaeche rechts
   Aufbau nach Referenz, Farben und Typografie nach VAN TOL.
   ========================================================================== */
.direktkontakt{background:var(--offwhite); padding:0;}
.dk-raster{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(26px, 4vw, 64px); align-items:center;
  padding-top:clamp(28px, 3vw, 44px); padding-bottom:clamp(28px, 3vw, 44px);
}
.dk-bild{
  margin:0; width:clamp(110px, 12vw, 168px); aspect-ratio:1/1;
  border-radius:50%; overflow:hidden; background:var(--greige); flex-shrink:0;
}
.dk-bild img{width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block;}
.dk-vorzeile{
  display:flex; align-items:center; gap:10px;
  font-size:.875rem; letter-spacing:.02em; color:var(--taupe);
  margin-bottom:10px;
}
.dk-punkt{
  width:9px; height:9px; border-radius:50%;
  background:#25D366; flex-shrink:0;
}
.dk-aussage{
  font-family:var(--font-serif); font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  line-height:1.4; color:var(--anthracite); margin:0 0 clamp(18px, 2vw, 26px);
  max-width:52ch;
}
.dk-knopf{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 26px; border:1px solid var(--anthracite);
  background:var(--white); color:var(--anthracite);
  font-family:var(--font-serif); font-size:1rem;
  transition:background var(--transition), color var(--transition);
}
.dk-knopf svg{
  width:22px; height:22px; fill:none; stroke:currentColor;
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
.dk-knopf:hover{background:var(--anthracite); color:var(--white);}
@media (max-width:640px){
  .dk-raster{grid-template-columns:1fr; justify-items:start; gap:20px;}
}

/* Bildband 25 Prozent hoeher */
.bildband{height:clamp(375px, 37.5vw, 588px);}


/* Marktabschnitt mit Ansprechpartnerin rechts */
.ml-aussen{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(150px, 15%, 210px);
  gap:0 clamp(30px, 4vw, 66px); align-items:start;
}
.ml-kontakt{text-align:center;}
.mk-foto{
  width:100%; max-width:150px; margin:0 auto 18px;
  aspect-ratio:1/1; border-radius:50%; overflow:hidden; background:var(--greige);
}
.mk-foto img{width:100%; height:100%; object-fit:cover; display:block;}
.mk-name{font-weight:600; color:var(--anthracite); margin:0 0 4px; font-size:.9375rem;}
.mk-rolle{font-size:.8125rem; line-height:1.5; color:var(--taupe); margin:0 0 18px;}
.mk-zeile{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:.875rem; margin:0 0 8px;
}
.mk-zeile a{color:var(--bronze-nav); text-decoration:none;}
.mk-zeile a:hover{color:var(--bronze-dark); text-decoration:underline;}
.mk-zeile svg{
  width:16px; height:16px; flex-shrink:0;
  fill:none; stroke:var(--taupe); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
@media (max-width:900px){
  .ml-aussen{grid-template-columns:1fr; gap:34px;}
  .ml-kontakt{display:flex; align-items:center; gap:20px; text-align:left;}
  .mk-foto{margin:0; width:110px; flex-shrink:0;}
  .mk-zeile{justify-content:flex-start;}
}

/* Aussage als ruhiges Band ohne Bild */
/* Zitatband nach Referenz: hinterlegter Kasten im Raster statt vollflaechigem
   Band, Text in der Grotesk, mittelgrau, weite Zeilenlaenge. */
.zitatband{background:none; padding:clamp(30px, 3.4vw, 54px) 0;}
.zitatband .container{
  background:var(--offwhite);
  padding-top:clamp(40px, 4.4vw, 70px);
  padding-bottom:clamp(40px, 4.4vw, 70px);
}
.zitatband blockquote{
  margin:0 auto; max-width:1120px; text-align:center;
}
.zitatband p{
  font-family:var(--font-sans); font-size:clamp(1.3rem, 2.3vw, 2.05rem);
  line-height:1.4; color:var(--grau); margin:0; text-wrap:balance;
}

/* ==========================================================================
   Objektseite (Aufbau nach den Referenzen)
   Galerie, Einfuehrung, Datentabellen, Ausstattung, Lage, Energieausweis,
   Expose-Formular — rechts eine mitlaufende Kontaktspalte.
   ========================================================================== */
/* Die Objektseite laeuft breiter als der Rest: die Ueberschrift steht damit
   weiter links, wie in der Referenz. */
#objektRoot .container{max-width:1620px;}
.od-kopf{padding-bottom:clamp(22px, 2.4vw, 34px);}
.od-kopf h1{margin:0;}

/* Galerie: breite Buehne links, schmaler Vorschaustreifen rechts.
   Das Hauptbild waechst beim Scrollen leicht mit (--zoom). */
/* Die Galerie laeuft rund 30 Prozent schmaler als der Inhalt darunter und
   steht mittig — in der Vollansicht fuellt das Bild dann den Bildschirm. */
.od-galerie{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(120px, 13%, 170px);
  grid-template-rows:auto auto;
  gap:clamp(10px, 1vw, 16px);
  max-width:70%; margin-inline:auto;
}
@media (max-width:1000px){
  .od-galerie{max-width:none;}
}
.od-galerie figure{margin:0; overflow:hidden; background:var(--greige);}
.od-buehne{position:relative; overflow:hidden; background:var(--greige);}
.od-gross{width:100%; height:100%;}
.od-gross img{
  width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9;
  transform:scale(var(--zoom, 1)); transform-origin:center;
  transition:transform 120ms linear;
}
.od-pfeil, .od-vollbild{
  position:absolute; z-index:2; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:0; background:rgba(255,255,255,.86); color:var(--anthracite);
  transition:background var(--transition);
}
.od-pfeil{
  top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
}
.od-pfeil--zurueck{left:clamp(10px, 1.4vw, 20px);}
.od-pfeil--vor{right:clamp(10px, 1.4vw, 20px);}
.od-vollbild{
  right:clamp(10px, 1.4vw, 20px); bottom:clamp(10px, 1.4vw, 20px);
  width:46px; height:46px; border-radius:50%;
}
.od-pfeil:hover, .od-vollbild:hover{background:var(--white);}
.od-pfeil svg, .od-vollbild svg{
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}

.od-streifen{
  grid-column:2; grid-row:1;
  display:flex; flex-direction:column; gap:clamp(8px, .9vw, 14px);
  max-height:100%; overflow-y:auto; padding-right:2px;
  scrollbar-width:thin;
}
.od-vorschau{
  flex:0 0 auto; border:0; padding:0; cursor:pointer;
  background:var(--greige); line-height:0;
  outline:2px solid transparent; outline-offset:-2px;
  transition:outline-color var(--transition), opacity var(--transition);
}
.od-vorschau img{width:100%; display:block; aspect-ratio:16/10; object-fit:cover;}
.od-vorschau:hover{opacity:.85;}
.od-vorschau.ist-aktiv{outline-color:var(--bronze);}
.od-bildtext{
  grid-column:1; grid-row:2;
  margin:6px 0 0; font-size:.9375rem; color:var(--bronze-nav);
}

/* Vollbildebene */
/* Vollansicht: das Bild nutzt den ganzen Bildschirm, ohne Rand ringsum. */
.od-lupe{
  position:fixed; inset:0; z-index:2000;
  background:rgba(17,17,17,.96);
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.od-lupe[hidden]{display:none;}
.od-lupe img{width:100%; height:100%; object-fit:contain; display:block;}
.od-lupe-zu{
  position:absolute; top:22px; right:26px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  background:rgba(17,17,17,.55); border:0; color:var(--white);
  font-size:1.5rem; line-height:1; cursor:pointer;
  transition:background var(--transition);
}
.od-lupe-zu:hover{background:rgba(17,17,17,.85);}

.od-raster{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(255px, 27%, 330px);
  gap:0 clamp(30px, 4vw, 62px);
  align-items:stretch;
  padding-top:clamp(46px, 5vw, 80px);
}
/* Die Kontaktspalte laeuft beim Scrollen mit; dafuer muss sie so hoch sein
   wie der Inhalt daneben, sonst greift position:sticky nicht. */
.od-inhalt{align-self:start;}
.od-inhalt > section{padding:0 0 clamp(40px, 4.4vw, 68px);}
.od-inhalt h2{margin:0 0 clamp(18px, 2vw, 26px);}
.od-inhalt h3{
  font-family:var(--font-sans); font-weight:400;
  font-size:1rem; color:var(--bronze-nav);
  margin:clamp(26px, 3vw, 40px) 0 0;
  padding-bottom:10px; border-bottom:1px solid var(--bronze);
}
.od-inhalt p{font-size:1rem; line-height:1.75; color:var(--anthracite);}

/* Einstieg nach Referenz: Ueberschrift und Anschrift stehen links aussen,
   Eckdaten und Text ruecken ein. */
.od-einfuehrung{
  display:grid; grid-template-columns:20% minmax(0,1fr);
  gap:0 clamp(20px, 3vw, 46px); align-items:start;
}
.od-einfuehrung h2{
  grid-column:1 / -1; max-width:32ch; text-wrap:balance;
  margin-bottom:clamp(16px, 1.6vw, 23px);
}
.od-adresse{
  grid-column:1; font-size:.9375rem; line-height:1.6;
  color:var(--taupe); margin:0; overflow-wrap:normal; hyphens:none;
}
.od-mitte{grid-column:2;}
/* Die Eckdaten setzen nach Referenz erst unterhalb der Anschrift an. */
.od-eckdaten{
  display:flex; flex-wrap:wrap; gap:0;
  margin:clamp(36px, 4.45vw, 64px) 0 clamp(30px, 3.4vw, 46px);
}
.od-eckdaten div{
  padding:0 clamp(18px, 2.2vw, 32px);
  border-left:1px solid var(--greige);
}
.od-eckdaten div:first-child{padding-left:0; border-left:0;}
.od-eckdaten strong{
  display:block; font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.15rem, 1.7vw, 1.4rem); color:var(--anthracite);
  line-height:1.15; margin-bottom:3px;
}
.od-eckdaten span{display:block; font-size:.8125rem; line-height:1.2; color:var(--taupe);}

.od-tabelle, .od-kurz{width:100%; border-collapse:collapse; margin:0 0 clamp(20px, 2.2vw, 30px);}
.od-tabelle th, .od-tabelle td, .od-kurz th, .od-kurz td{
  text-align:left; font-weight:400; font-size:.9375rem; line-height:1.5;
  color:var(--anthracite); padding:11px 0;
  border-bottom:1px solid var(--greige); vertical-align:top;
}
.od-tabelle th{width:42%; padding-right:20px;}
.od-kurz th{width:42%; font-weight:600; border-bottom:0;}
.od-kurz td{border-bottom:0;}

/* Ausstattung: zwei Spalten, Merkmal links, Haken rechts, feine Linie
   darunter (Aufbau nach Referenz, Farben nach VAN TOL). */
.od-liste{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr;
  gap:0 clamp(28px, 4vw, 68px);
}
.od-liste li{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:12px 0; border-bottom:1px solid var(--bronze);
  font-size:.9375rem; line-height:1.5; color:var(--anthracite);
}
.od-haken{
  width:20px; height:20px; flex-shrink:0;
  fill:none; stroke:var(--bronze-nav); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
@media (max-width:700px){
  .od-liste{grid-template-columns:1fr;}
}

.od-karte{
  position:relative; width:100%; aspect-ratio:16/9;
  margin-top:clamp(20px, 2.4vw, 32px); background:var(--greige);
}
.od-karte iframe{width:100%; height:100%; border:0; display:block;}
/* Verweis in die vollstaendige Google-Karte, unten rechts auf der Kachel */
.od-karte-verweis{
  position:absolute; right:12px; bottom:12px; z-index:2;
  background:#fff; padding:8px 14px;
  font-family:var(--font-marke); font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--green);
  box-shadow:0 2px 10px rgba(17,17,17,.16);
}
.od-karte-verweis:hover{color:var(--bronze-dark);}
.od-karte--leer{
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.od-karte--leer p{margin:0; padding:0 24px; font-size:.875rem; color:var(--taupe);}

.od-skala{position:relative; margin:0 0 clamp(26px, 3vw, 38px); padding-top:22px;}
.od-farben{display:flex; height:16px; overflow:hidden;}
.od-farben span{
  flex:1; display:flex; align-items:center; justify-content:center;
  font-size:.625rem; color:rgba(255,255,255,.92); letter-spacing:.04em;
}
.od-achse{display:flex; justify-content:space-between; margin-top:8px; font-size:.75rem; color:var(--taupe);}
.od-zeiger{
  position:absolute; top:0; width:1px; height:20px;
  background:var(--anthracite);
}

.od-form .form-grid{margin-bottom:6px;}
.od-pflicht{color:var(--taupe); margin:14px 0 20px;}

/* Mitlaufende Kontaktspalte — ohne Trennstrich, ruhig nach Referenz */
.od-seitenspalte{position:relative; padding-left:clamp(24px, 3vw, 48px);}
.od-haftet{position:sticky; top:132px;}
/* Objekttyp, Baujahr und Preis stehen nebeneinander wie in der Referenz */
.od-kennzahlen{
  display:flex; justify-content:space-between; gap:clamp(10px, 1.4vw, 20px);
  padding-bottom:0;
  margin-bottom:0;
}
.od-kennzahlen > div{min-width:0;}
.od-kennzahlen span{display:block; font-size:.6875rem; color:var(--taupe); letter-spacing:.03em; white-space:nowrap;}
.od-kennzahlen strong{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(.875rem, 1vw, 1rem); color:var(--anthracite);
  white-space:nowrap;
}
.od-expose{
  display:block; text-align:center;
  background:var(--bronze); color:var(--white);
  padding:14px 18px; font-size:.8125rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  transition:background var(--transition);
}
.od-expose:hover{background:var(--bronze-dark); color:var(--white);}
/* Kontaktblock nach Referenz: alles rechtsbuendig, Symbole in einer
   eigenen Spalte rechts neben der Angabe, kein Trennstrich. */
.od-person{
  --symbolspalte:28px;
  text-align:right; margin-top:clamp(34px, 3.6vw, 48px);
}
/* Auf breiten Schirmen steht das Portraet bei jedem Objekt gleich weit unter
   den Eckdaten. Frueher wurde der Abstand je Objekt gemessen — dadurch sass
   der Ansprechpartner je nach Laenge der Ueberschrift unterschiedlich hoch. */
@media (min-width:1001px){
  .od-person{margin-top:clamp(96px, 9vw, 144px);}
}
.od-foto{
  width:144px; max-width:100%; margin:0 0 30px auto;
  aspect-ratio:1/1; border-radius:50%; overflow:hidden; background:var(--greige);
}
.od-foto img{width:100%; height:100%; object-fit:cover; display:block;}
.od-name{
  font-weight:600; font-size:.9375rem; line-height:1.2; color:var(--anthracite);
  margin:0; padding-right:var(--symbolspalte);
}
.od-rolle{
  font-size:.8125rem; line-height:1.54; color:var(--taupe);
  margin:0 0 17px; padding-right:var(--symbolspalte);
}
.od-zeile{
  display:flex; align-items:center; justify-content:flex-end; gap:15px;
  font-size:.8125rem; line-height:1.5; margin:0 0 1px;
}
.od-zeile:last-child{margin-bottom:0;}
.od-zeile a{color:var(--bronze-nav); text-decoration:none;}
.od-zeile a:hover{color:var(--bronze-dark); text-decoration:underline;}
.od-zeile svg{
  order:1; width:13px; height:13px; flex:0 0 13px; fill:none; stroke:var(--taupe);
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
.od-anbieter{
  text-align:right; font-size:.8125rem; line-height:1.5;
  color:var(--taupe); margin:clamp(22px, 2.4vw, 32px) 0 0;
  padding-right:var(--symbolspalte);
}

/* Weitere Angebote als dunkles Band */
.od-weitere{
  background:#3A3A3A; color:var(--white);
  padding:clamp(34px, 3.6vw, 52px) clamp(20px, 4vw, 60px);
  text-align:center; margin-top:clamp(40px, 4.4vw, 70px);
}
.od-weitere h2{color:var(--white); margin:0 0 clamp(20px, 2.2vw, 30px); font-family:var(--font-sans); font-weight:400;}
.od-weitere-raster{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px, 1.2vw, 18px);
}
.od-weiteres{position:relative; display:block; overflow:hidden;}
.od-weiteres img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9; transition:transform 620ms ease;}
.od-weiteres:hover img{transform:scale(1.04);}
.od-weiteres-name{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 18px 14px; font-size:.875rem; color:var(--white);
  background:linear-gradient(180deg, rgba(17,17,17,0), rgba(17,17,17,.78));
  text-align:left;
}
/* Angebotsband als eigener Abschnitt auf einer Leistungsseite: gleiche
   Optik wie auf der Objektseite, nur ohne den dortigen Abstand nach oben
   und mit der Rasterbreite der uebrigen Seite. */
.od-weitere--seite{margin-top:0; padding-top:clamp(44px, 4.6vw, 72px); padding-bottom:clamp(44px, 4.6vw, 72px);}
.od-weitere--seite .od-weitere-raster,
.od-weitere--seite h2{max-width:var(--maxw); margin-left:auto; margin-right:auto;}
.od-weitere--seite h2{font-size:clamp(1.3rem, 2vw, 1.75rem);}


/* Angebotsband auf den Leistungsseiten: deutlich groessere Bilder, der dunkle
   Rand ringsum bleibt. Hoehe ueber das Seitenverhaeltnis, Breite ueber eine
   schmalere Innenkante. */
.od-weitere--seite{padding-left:clamp(24px, 2.6vw, 40px); padding-right:clamp(24px, 2.6vw, 40px);}
.od-weitere--seite .od-weitere-raster{gap:clamp(14px, 1.4vw, 22px); max-width:1560px;}
.od-weitere--seite .od-weiteres img{aspect-ratio:3/2;}
.od-weitere--seite .od-weiteres-name{padding:46px 22px 18px; font-size:.9375rem;}
@media (max-width:720px){
  .od-weitere--seite .od-weitere-raster{grid-template-columns:1fr;}
  .od-weitere--seite .od-weiteres img{aspect-ratio:4/3;}
}

.od-mehr{
  display:inline-block; margin-top:clamp(20px, 2.2vw, 30px);
  font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--white);
}
.od-mehr span{color:var(--bronze); margin-right:8px;}
.od-mehr:hover{color:var(--bronze);}

@media (max-width:960px){
  .od-raster{grid-template-columns:1fr; gap:44px;}
  .od-seitenspalte{border-left:0; padding-left:0;}
  .od-einfuehrung{grid-template-columns:1fr;}
  .od-adresse{grid-column:1; margin-bottom:26px;}
  .od-mitte{grid-column:1;}
  .od-eckdaten{margin-top:clamp(18px, 2.6vw, 26px);}
  .od-haftet{position:static;}
  .od-galerie{grid-template-columns:1fr;}
  .od-streifen{
    grid-column:1; grid-row:2;
    flex-direction:row; max-height:none; overflow-x:auto; overflow-y:hidden;
  }
  .od-vorschau{flex:0 0 34%;}
  .od-bildtext{grid-row:3;}
}
@media (max-width:620px){
  .od-weitere-raster{grid-template-columns:1fr;}
  /* Auf schmalen Fenstern zwei ruhige Spalten statt umbrechender Flexzeile */
  .od-eckdaten{display:grid; grid-template-columns:1fr 1fr; row-gap:20px;}
  .od-eckdaten div{padding:0 0 0 16px;}
  .od-eckdaten div:nth-child(odd){padding-left:0; border-left:0;}
  .od-eckdaten div:nth-child(even){border-left:1px solid var(--greige);}
}

/* ==========================================================================
   Expose-Formular auf der Objektseite (Aufbau nach Referenz, Farben VAN TOL)
   Felder als ruhige Flaechen mit Bronzelinie unten, Beschriftung im Feld.
   ========================================================================== */
/* Das Formular laeuft ueber die volle Rasterbreite — quer und ohne
   Kontaktspalte daneben. */
.od-formular{
  grid-column:1 / -1;
  background:var(--offwhite);
  padding:clamp(34px, 4vw, 56px) clamp(28px, 4vw, 64px) !important;
  margin-top:clamp(24px, 3vw, 44px);
}
.od-formular > p{max-width:70ch;}
.of-feld--voll{grid-column:auto;}
.of-feld--breit{grid-column:span 2;}
.of-raster{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px, 1.4vw, 20px);
  margin:clamp(22px, 2.6vw, 34px) 0 clamp(18px, 2vw, 26px);
}
.of-feld{display:block; position:relative;}
.of-feld--voll{grid-column:1 / -1;}
.of-versteckt{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.of-marke{
  position:absolute; top:8px; left:16px; z-index:1;
  font-size:.75rem; color:var(--taupe); pointer-events:none;
}
.od-form .of-feld input,
.od-form .of-feld select,
.od-form .of-feld textarea{
  width:100%; border:0; border-bottom:1px solid var(--bronze);
  background:#EFE9E1; color:var(--anthracite);
  padding:16px 16px 14px; font-size:.9375rem; line-height:1.4;
  border-radius:0; appearance:none;
  transition:background var(--transition);
}
.od-form .of-feld textarea{min-height:120px; padding-top:28px; resize:vertical;}
.od-form .of-feld input::placeholder,
.od-form .of-feld textarea::placeholder{color:var(--taupe);}
.od-form .of-feld select{color:var(--taupe);}
.od-form .of-feld select:valid{color:var(--anthracite);}
.od-form .of-feld input:focus,
.od-form .of-feld select:focus,
.od-form .of-feld textarea:focus{
  background:#F5F1EB; outline:2px solid var(--bronze); outline-offset:-2px;
}
/* Pfeil der Auswahlfelder */
.of-feld:has(select)::after{
  content:''; position:absolute; right:18px; top:50%;
  width:9px; height:9px; margin-top:-6px; pointer-events:none;
  border-right:1px solid var(--bronze-nav); border-bottom:1px solid var(--bronze-nav);
  transform:rotate(45deg);
}
.of-fuss{display:flex; justify-content:flex-end; margin-top:clamp(14px, 1.6vw, 22px);}
.of-fuss .btn{background:var(--bronze); border-color:var(--bronze); color:var(--white);}
.of-fuss .btn:hover{background:var(--bronze-dark); border-color:var(--bronze-dark);}
@media (max-width:1000px){
  .of-raster{grid-template-columns:repeat(2, minmax(0,1fr));}
  .of-feld--breit{grid-column:span 2;}
}
@media (max-width:640px){
  .of-raster{grid-template-columns:1fr;}
  .of-feld--breit{grid-column:auto;}
  .of-fuss{justify-content:stretch;}
  .of-fuss .btn{width:100%;}
}

/* Die Kontaktspalte bleibt auch auf niedrigen Fenstern vollstaendig sichtbar */
.od-haftet{max-height:calc(100vh - 150px); overflow-y:auto; scrollbar-width:thin;}

/* ==========================================================================
   Finanzierungsrechner auf der Objektseite
   Aufbau nach Referenz: Regler links, Ergebniskarten rechts.
   Farben und Typografie aus dem VAN TOL Designsystem.
   ========================================================================== */
.od-finanzierung{
  grid-column:1 / -1;
  background:var(--offwhite);
  padding:clamp(34px, 4vw, 56px) clamp(28px, 4vw, 64px) !important;
  margin-top:clamp(24px, 3vw, 44px);
}
.od-finanzierung h2{margin:0 0 clamp(22px, 2.6vw, 36px);}

.fi-raster{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:clamp(30px, 4vw, 68px);
  align-items:start;
}

/* --- Regler ------------------------------------------------------------- */
.fi-feld{margin-bottom:clamp(26px, 3vw, 40px);}
.fi-kopf{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:14px;
}
.fi-kopf label{
  font-size:.9375rem; font-weight:600; color:var(--anthracite);
  letter-spacing:.01em;
}
.fi-wert{display:flex; align-items:baseline; gap:10px;}
.fi-wert strong{
  font-family:var(--font-marke, inherit);
  font-size:1.125rem; font-weight:600; color:var(--anthracite);
  font-variant-numeric:tabular-nums;
}
.fi-wert span{font-size:.8125rem; color:var(--grau); font-variant-numeric:tabular-nums;}

.fi-feld input[type="range"]{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:22px; margin:0;
  background:transparent; cursor:pointer;
}
.fi-feld input[type="range"]:focus{outline:none;}
.fi-feld input[type="range"]:focus-visible{outline:2px solid var(--bronze-dark); outline-offset:6px;}

/* Spur: bis zum Griff Bronze, danach ruhiges Greige (--anteil setzt das JS) */
.fi-feld input[type="range"]::-webkit-slider-runnable-track{
  height:3px; border:0; border-radius:0;
  background:linear-gradient(90deg,
    var(--bronze-nav) 0, var(--bronze-nav) var(--anteil, 20%),
    var(--greige) var(--anteil, 20%), var(--greige) 100%);
}
.fi-feld input[type="range"]::-moz-range-track{
  height:3px; border:0; border-radius:0; background:var(--greige);
}
.fi-feld input[type="range"]::-moz-range-progress{
  height:3px; border:0; background:var(--bronze-nav);
}
.fi-feld input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; margin-top:-8.5px;
  border-radius:50%; border:0;
  background:var(--bronze-nav);
  box-shadow:0 2px 8px -2px rgba(110,90,65,.45);
  transition:transform 180ms ease, background 180ms ease;
}
.fi-feld input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; border:0;
  background:var(--bronze-nav);
  box-shadow:0 2px 8px -2px rgba(110,90,65,.45);
}
.fi-feld input[type="range"]:hover::-webkit-slider-thumb,
.fi-feld input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.12);}

.fi-fussnote{
  font-size:.75rem !important; line-height:1.7 !important;
  color:var(--grau) !important; margin:0 0 12px; max-width:62ch;
}
.fi-fussnote:last-child{margin-bottom:0;}

/* --- Ergebniskarten ----------------------------------------------------- */
.fi-ergebnis{display:flex; flex-direction:column; gap:clamp(14px, 1.6vw, 22px);}
.fi-karte{
  background:var(--white);
  border:1px solid var(--greige);
  padding:clamp(22px, 2.4vw, 32px) clamp(22px, 2.6vw, 34px);
}
.fi-karte:last-child{
  background:var(--bronze-tief); border-color:var(--bronze-tief); color:var(--white);
}
.fi-marke{
  display:block;
  font-family:var(--font-marke, inherit);
  font-size:.6875rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--grau); margin-bottom:10px;
}
.fi-karte:last-child .fi-marke{color:#F0E7DA;}
.fi-summe{
  margin:0 !important;
  font-size:clamp(1.6rem, 2.5vw, 2.15rem) !important;
  font-weight:400; line-height:1.15 !important;
  color:var(--anthracite) !important;
  font-variant-numeric:tabular-nums;
}
.fi-karte:last-child .fi-summe{color:var(--white) !important;}

.fi-teile{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:clamp(18px, 2vw, 26px);
  padding-top:clamp(16px, 1.8vw, 22px);
  border-top:1px solid rgba(255,255,255,.22);
}
.fi-teile span{
  display:block; font-size:.6875rem; letter-spacing:.05em;
  color:#F0E7DA; margin-bottom:5px;
}
.fi-teile strong{
  font-size:.9375rem; font-weight:600; color:var(--white);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.fi-darlehen{
  margin:clamp(14px, 1.6vw, 20px) 0 0 !important;
  font-size:.8125rem !important; line-height:1.6 !important;
  color:#F0E7DA !important;
  display:flex; justify-content:space-between; gap:14px;
}
.fi-darlehen strong{color:var(--white); font-variant-numeric:tabular-nums;}

@media (max-width:1000px){
  .fi-raster{grid-template-columns:1fr; gap:clamp(26px, 3vw, 38px);}
  .fi-ergebnis{order:-1;}
}
@media (max-width:520px){
  .fi-teile{grid-template-columns:1fr; gap:10px; text-align:left;}
  .fi-teile > div{display:flex; justify-content:space-between; align-items:baseline;}
  .fi-teile span{margin-bottom:0;}
}

/* Vorspann der Objektbeschreibung — etwas groesser als der Fliesstext */
.od-lead{
  font-size:1.0625rem !important; line-height:1.7 !important;
  color:var(--anthracite); margin:0 0 clamp(18px, 2vw, 26px) !important;
}

/* Wertermittlung: Rechenschritte und Faktor-Hinweis (Wohn-/Geschaeftshaeuser) */
.mfh-einstieg-text{max-width:78ch;}
.mfh-schritte{list-style:none; margin:0 0 1.4em; padding:0;}
.mfh-schritte li{
  position:relative; padding-left:22px; margin-bottom:10px;
  font-size:1rem; line-height:1.7; color:var(--anthracite);
}
.mfh-schritte li::before{
  content:'\203A'; position:absolute; left:0; top:-1px;
  color:var(--bronze); font-size:1.05rem;
}
.mfh-hinweis{font-size:.875rem !important; color:var(--taupe);}
.mfh-faktor{
  display:block; font-size:.75rem; color:var(--taupe); margin-top:2px;
}

/* Stand-Angabe unter der Seitenueberschrift */
.in-stand{
  font-size:.8125rem; letter-spacing:.02em; color:var(--taupe);
  margin:10px 0 0;
}

/* Schlussabsaetze der Marktlage: volle Textbreite unter den beiden Spalten */
.ml-schluss{grid-column:1 / -1; margin-top:clamp(30px, 3.4vw, 46px); columns:2; column-gap:clamp(34px, 5vw, 78px);}
.ml-schluss p{break-inside:avoid;}
.ml-schluss p{
  font-size:1rem; line-height:1.6; color:var(--anthracite);
  margin:0 0 1.5em; text-align:left; hyphens:manual;
}
.ml-schluss p:last-child{margin-bottom:0;}


/* Textvariante des dunklen Bandes: zwei Spalten Fliesstext statt Punkten */
.gutachten--text{padding:clamp(56px, 5.6vw, 84px) 0;}
.gutachten--text .gu-flaeche{width:min(100%, 1120px);}
.gutachten--text .gu-eyebrow{line-height:2;}
.gutachten--text .gu-raster{gap:clamp(28px, 3.6vw, 56px); text-align:left;}
.gutachten--text .gu-punkt p{margin:0 0 1.3em;}
.gutachten--text .gu-punkt p:last-child{margin-bottom:0;}
.gutachten--text .gu-frage{
  margin-top:clamp(34px, 3.6vw, 48px);
  font-size:clamp(1.05rem, 1.5vw, 1.25rem);
}


/* Kaeufergruppen: hinterlegte Flaeche in Greige — Farbe aus dem Designsystem */

/* Leistungsliste mit Haken: links die Punkte, rechts ein Bild. */
.lst-band{padding:clamp(52px, 5.6vw, 92px) 0; background:var(--white);}
.lst-raster{
  display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  gap:clamp(30px, 4.4vw, 72px); align-items:start;
}
.lst-text h2{font-size:clamp(1.35rem, 2.2vw, 1.95rem); line-height:1.25; margin:0 0 clamp(22px, 2.4vw, 34px);}
.lst-punkte{list-style:none; margin:0; padding:0;}
.lst-punkte li{
  position:relative; padding-left:34px; margin-bottom:14px;
  font-size:.9375rem; line-height:1.6; color:var(--anthracite);
}
.lst-punkte li::before{
  content:'\2713'; position:absolute; left:0; top:.12em;
  width:18px; height:18px; border-radius:50%;
  border:1px solid var(--bronze); color:var(--bronze);
  font-size:.6875rem; line-height:16px; text-align:center;
}
.lst-bild{margin:0;}
.lst-bild img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block;}
@media (max-width:820px){
  .lst-raster{grid-template-columns:1fr; gap:28px;}
  .lst-bild{order:-1;}
}

.kaeufergruppe{padding:clamp(56px, 6vw, 96px) 0;}
/* Format nach Referenz: Das Bild fuellt seine Haelfte vollstaendig aus —
   randlos und ueber die ganze Hoehe. Der Text sitzt in der Flaeche daneben. */
.kg-flaeche{background:var(--greige); padding:0;}
.kg-flaeche .grid-2{
  gap:0; align-items:stretch;
  grid-template-columns:1.22fr .78fr;   /* querformatiger: Text bekommt mehr Breite */
}
.kg-text{
  padding:clamp(26px, 2.4vw, 36px) clamp(24px, 3.2vw, 48px);
  display:flex; flex-direction:column; justify-content:center;
}
.kg-text .btn{align-self:flex-start;}
.kg-flaeche .eyebrow{color:var(--bronze-dark);}
.kg-flaeche .btn{border-color:var(--anthracite); color:var(--anthracite);}
.kg-flaeche .btn:hover{background:var(--anthracite); color:var(--white);}
.kg-bild{
  background-size:cover; background-position:center;
  min-height:clamp(260px, 30vw, 460px);
}
@media (max-width:860px){
  .kg-flaeche .grid-2{grid-template-columns:1fr;}
  .kg-bild{min-height:280px;}
  .kg-text{padding:clamp(28px, 6vw, 44px) clamp(22px, 5vw, 36px);}
}
@media (max-width:820px){
  .gutachten--text .gu-raster{grid-template-columns:1fr;}
  .ml-schluss{columns:1;}
}

/* Der Balken steht zwischen Einstiegstext und Marktteil — er braucht oben
   Luft, weil der Einstiegsblock selbst ohne Fussabstand endet. */
#diskret{margin-top:clamp(70px, 7.8vw, 130px);}

/* Objektbeschreibung: der laengere Teil klappt ueber einen dezenten Pfeil auf */
.od-rest[hidden]{display:none;}
.od-auf{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-sans); font-size:.8125rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--bronze-nav);
  transition:color var(--transition);
}
.od-auf:hover{color:var(--bronze-dark);}
.od-auf:focus-visible{outline:2px solid var(--bronze); outline-offset:4px;}
.od-auf svg{
  width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  transition:transform 260ms ease;
}
.od-auf[aria-expanded="true"] svg{transform:rotate(180deg);}
@media (prefers-reduced-motion: reduce){
  .od-auf svg{transition:none;}
}

/* Wertermittlung in der Standortvorlage — hier ohne Kontaktspalte, deshalb
   laeuft das Raster ueber die volle Inhaltsbreite. */
.marktlage--wert .mfh-schritte li{font-size:1rem; line-height:1.6;}
.marktlage--wert .mfh-rechnung{margin-top:clamp(20px, 2.4vw, 32px);}
.marktlage--wert .ml-bild img{aspect-ratio:4/3;}

/* Beispielrechnung: die Schrift steht in Bronze, keine hinterlegte Flaeche.
   Verwendet wird der dunklere Navigationston — er haelt auf Weiss 4,56:1. */
.mfh-panel{margin-top:clamp(20px, 2.4vw, 32px);}
.mfh-panel .mfh-rechnung{margin:0 0 clamp(18px, 2vw, 26px);}
.mfh-panel .mfh-rechnung th,
.mfh-panel .mfh-rechnung td{color:var(--bronze-nav);}
.mfh-panel .mfh-rechnung caption{color:var(--bronze-nav); opacity:.85;}
.mfh-panel .mfh-faktor{color:var(--bronze-nav); opacity:.8;}
.mfh-panel .mfh-summe th,
.mfh-panel .mfh-summe td{border-bottom:0; color:var(--bronze-nav);}

/* ==========================================================================
   Suchprofil-Strecke — schlicht, ohne Bild, in den VAN-TOL-Farben
   ========================================================================== */
.sp-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(17,17,17,.62);
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(16px, 4vh, 56px) clamp(12px, 4vw, 40px);
  overflow-y:auto;
}
.sp-overlay[hidden]{display:none;}
.sp-dialog{
  position:relative; width:min(100%, 880px);
  background:var(--white);
  display:flex; flex-direction:column;
  box-shadow:0 30px 70px -30px rgba(17,17,17,.55);
}
.sp-fortschritt{height:3px; background:var(--greige);}
.sp-fortschritt span{
  display:block; height:100%; background:var(--bronze);
  transition:width 320ms ease;
}
.sp-koerper{padding:clamp(30px, 4vw, 56px) clamp(22px, 4vw, 56px) clamp(20px, 2.6vw, 32px);}
.sp-titel{margin:0 0 clamp(22px, 2.6vw, 34px); text-align:center;}

.sp-schritt{display:none; border:0; margin:0; padding:0;}
.sp-schritt.is-aktiv{display:block;}
.sp-legende{
  display:block; width:100%; padding:0;
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.15rem, 1.7vw, 1.4rem); line-height:1.3;
  color:var(--anthracite); text-align:center; margin-bottom:8px;
}
.sp-unter{
  font-size:.9375rem; line-height:1.6; color:var(--grau);
  text-align:center; margin:0 auto clamp(22px, 2.6vw, 32px); max-width:56ch;
}

/* Kacheln */
.sp-kacheln{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
.sp-kacheln--drei{grid-template-columns:repeat(3, minmax(0,1fr)); max-width:520px; margin-inline:auto;}
.sp-kachel{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:74px; padding:16px 14px; text-align:center;
  border:1px solid var(--greige); background:var(--offwhite);
  font-size:.9375rem; line-height:1.35; color:var(--anthracite);
  cursor:pointer; transition:border-color var(--transition), background var(--transition);
}
.sp-kachel input{position:absolute; opacity:0; width:1px; height:1px; margin:0;}
.sp-kachel:hover{border-color:var(--bronze);}
.sp-kachel:has(input:checked){
  background:var(--white); border-color:var(--bronze);
  box-shadow:inset 0 0 0 1px var(--bronze);
}
.sp-kachel:has(input:focus-visible){outline:2px solid var(--bronze); outline-offset:3px;}
.sp-kacheln.ist-fehler{outline:1px solid #9c4a3c; outline-offset:8px;}

/* Felder */
.sp-schritt.is-aktiv:has(.sp-feld){display:grid; grid-template-columns:1fr 1fr; gap:18px 20px;}
.sp-schritt .sp-legende,
.sp-schritt .sp-unter,
.sp-schritt .sp-kacheln,
.sp-schritt .sp-fussnote{grid-column:1 / -1;}
.sp-feld--voll{grid-column:1 / -1;}
.sp-feld label{display:block; font-size:.8125rem; color:var(--anthracite); margin-bottom:8px;}
.sp-stern{color:var(--bronze-nav);}
.sp-feld input[type="text"],
.sp-feld input[type="email"],
.sp-feld input[type="tel"]{
  width:100%; padding:13px 14px; font:inherit; font-size:.9375rem;
  color:var(--anthracite); background:var(--offwhite);
  border:1px solid var(--greige); border-radius:0;
}
.sp-feld input:focus{outline:none; border-color:var(--bronze); background:var(--white);}
.sp-feld input.ist-geprueft:invalid{border-color:#9c4a3c;}

/* Umkreisregler */
.sp-feld input[type="range"]{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:22px; margin:0; background:transparent; cursor:pointer;
}
.sp-feld input[type="range"]:focus{outline:none;}
.sp-feld input[type="range"]:focus-visible{outline:2px solid var(--bronze); outline-offset:6px;}
.sp-feld input[type="range"]::-webkit-slider-runnable-track{
  height:3px; border:0;
  background:linear-gradient(90deg,
    var(--bronze) 0, var(--bronze) var(--anteil, 20%),
    var(--greige) var(--anteil, 20%), var(--greige) 100%);
}
.sp-feld input[type="range"]::-moz-range-track{height:3px; background:var(--greige);}
.sp-feld input[type="range"]::-moz-range-progress{height:3px; background:var(--bronze);}
.sp-feld input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; margin-top:-8.5px; border:0; border-radius:50%;
  background:var(--anthracite); box-shadow:0 2px 8px -2px rgba(17,17,17,.45);
}
.sp-feld input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border:0; border-radius:50%;
  background:var(--anthracite); box-shadow:0 2px 8px -2px rgba(17,17,17,.45);
}
.sp-reglerwert{font-size:.8125rem; line-height:1.6; color:var(--grau); margin:10px 0 0;}
.sp-reglerwert strong{color:var(--anthracite); font-weight:600;}

.sp-fussnote{font-size:.8125rem; line-height:1.7; color:var(--grau); margin:18px 0 0;}
.sp-einwilligung{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.8125rem; line-height:1.6; color:var(--grau);
}
.sp-einwilligung input{margin-top:3px; accent-color:var(--bronze); flex:0 0 auto;}
.sp-einwilligung a{color:var(--bronze-nav); text-decoration:underline;}

.sp-danke{text-align:center; padding:clamp(20px, 3vw, 40px) 0;}
.sp-danke-titel{
  font-family:var(--font-serif); font-size:clamp(1.2rem, 1.8vw, 1.5rem);
  color:var(--green); margin:0 0 12px;
}
.sp-danke p{font-size:.9375rem; line-height:1.7; color:var(--anthracite); margin:0 auto; max-width:52ch;}

/* Fussleiste */
.sp-leiste{
  display:grid; grid-template-columns:44px 1fr auto; align-items:center;
  grid-template-areas:
    "zurueck .       weiter"
    "zusagen zusagen zusagen";
  column-gap:clamp(14px, 2vw, 26px); row-gap:clamp(14px, 1.8vw, 22px);
  padding:clamp(16px, 2vw, 24px) clamp(22px, 4vw, 56px);
  border-top:1px solid var(--greige); background:var(--offwhite);
}
.sp-leiste .sp-zurueck{grid-area:zurueck;}
.sp-leiste .sp-weiter{grid-area:weiter;}
.sp-leiste .sp-zusagen{grid-area:zusagen;}
.sp-zurueck{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--greige); cursor:pointer;
  transition:border-color var(--transition);
}
.sp-zurueck[hidden]{display:none;}
.sp-zurueck:hover{border-color:var(--bronze);}
.sp-zurueck svg{width:18px; height:18px; fill:none; stroke:var(--anthracite); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.sp-zusagen{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px clamp(16px, 2.4vw, 30px);
  justify-content:center;
  font-size:.75rem; color:var(--grau);
}
.sp-zusagen li{position:relative; padding-left:18px;}
.sp-zusagen li::before{
  content:''; position:absolute; left:0; top:.42em;
  width:9px; height:5px; border-left:1.4px solid var(--bronze); border-bottom:1.4px solid var(--bronze);
  transform:rotate(-45deg);
}
.sp-weiter{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--bronze); color:var(--white); border:0; cursor:pointer;
  padding:14px 24px; font-family:var(--font-sans); font-size:.8125rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  transition:background var(--transition);
}
.sp-weiter:hover{background:var(--bronze-dark);}
.sp-weiter[hidden]{display:none;}
.sp-weiter svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

@media (max-width:700px){
  .sp-kacheln, .sp-kacheln--drei{grid-template-columns:1fr 1fr;}
  .sp-schritt.is-aktiv:has(.sp-feld){grid-template-columns:1fr;}
  .sp-leiste{
    grid-template-columns:44px 1fr;
    grid-template-areas:"zurueck weiter" "zusagen zusagen";
  }
  .sp-weiter{width:100%; justify-content:center;}
}

/* Stand-Angabe im Einstieg der Verkaufsvorlage */
.vi-haupt .in-stand{margin:12px 0 0;}

/* ==========================================================================
   Neubauvertrieb: redaktionelles Mosaik nach Magazin-Vorbild
   Versetzte Bilder, grosse Ziffern im Hintergrund, knappe Bildtexte.
   ========================================================================== */
.neubau-mosaik{padding:clamp(60px, 6.5vw, 110px) 0;}
/* Vier Blickrichtungen der Markt- und Standortanalyse: zwei gekreuzte Linien
   teilen die Flaeche, jedes Feld traegt seine Begriffe. Die Begriffe ruecken
   an das Kreuz heran, damit eine Mitte entsteht statt vier Textblocks. */
.ma-abschnitt{padding:clamp(48px, 5vw, 88px) 0;}
.ma-kopf{text-align:center; max-width:62ch; margin:0 auto clamp(26px, 3vw, 44px);}
.ma-kopf h2{margin-bottom:14px;}
.ma-kopf p{font-size:.9375rem; line-height:1.75; color:var(--anthracite); margin:0;}

.qm-flaeche{
  position:relative; max-width:1020px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  grid-template-rows:minmax(190px, auto) minmax(190px, auto);
  padding:44px 0;
}
.qm-flaeche::before,.qm-flaeche::after{content:''; position:absolute; background:var(--bronze); opacity:.55;}
.qm-flaeche::before{left:50%; top:0; bottom:0; width:1px; transform:translateX(-.5px);}
.qm-flaeche::after{top:50%; left:0; right:0; height:1px; transform:translateY(-.5px);}

.qm-feld{padding:24px 32px; display:flex; flex-direction:column;}
.qm-feld--ol,.qm-feld--or{justify-content:flex-end; padding-bottom:28px;}
.qm-feld--ul,.qm-feld--ur{justify-content:flex-start; padding-top:28px;}
.qm-feld--ol,.qm-feld--ul{text-align:right; align-items:flex-end;}
.qm-feld--or,.qm-feld--ur{text-align:left; align-items:flex-start;}

.qm-kopf{
  display:block; font-family:var(--font-serif); font-weight:500;
  font-size:.9375rem; color:var(--green); margin-bottom:14px;
}
.qm-woerter{display:flex; flex-wrap:wrap; gap:7px 14px; max-width:410px;}
.qm-feld--ol .qm-woerter,.qm-feld--ul .qm-woerter{justify-content:flex-end;}
.qm-woerter span{font-size:.9375rem; line-height:1.45; color:var(--anthracite);}
.qm-woerter .stark{font-weight:600; font-size:1.0625rem;}
.qm-woerter .mittel{font-weight:400; color:var(--bronze-dark);}
.qm-woerter .leise{font-weight:300; color:var(--taupe);}

.qm-achse{
  position:absolute; font-family:var(--font-sans); font-weight:600;
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bronze-dark); background:var(--white); padding:3px 10px;
}
.qm-achse--oben{top:0; left:50%; transform:translate(-50%,-50%);}
.qm-achse--unten{bottom:0; left:50%; transform:translate(-50%,50%);}
.qm-achse--links{left:0; top:50%; transform:translate(-6px,-50%);}
.qm-achse--rechts{right:0; top:50%; transform:translate(6px,-50%);}

@media (max-width:760px){
  .qm-flaeche{grid-template-columns:1fr; grid-template-rows:repeat(4,auto); padding:0;}
  .qm-flaeche::before,.qm-flaeche::after{display:none;}
  .qm-feld{text-align:left !important; align-items:flex-start !important;
           padding:22px 0 !important; border-top:1px solid var(--greige);}
  .qm-feld .qm-woerter{justify-content:flex-start !important;}
  .qm-achse{display:none;}
}


/* Das Kreuz steht jetzt in der Kachel der Markt- und Standortanalyse und
   damit in einer schmaleren Spalte: kleinere Schrift, engere Felder. */
.nm-bild--kreuz{background:none;}
.nm-bild--kreuz .qm-flaeche{padding:34px 0; grid-template-rows:minmax(150px,auto) minmax(150px,auto);}
.nm-bild--kreuz .qm-feld{padding:16px 20px;}
.nm-bild--kreuz .qm-feld--ol,.nm-bild--kreuz .qm-feld--or{padding-bottom:20px;}
.nm-bild--kreuz .qm-feld--ul,.nm-bild--kreuz .qm-feld--ur{padding-top:20px;}
.nm-bild--kreuz .qm-kopf{font-size:.875rem; margin-bottom:10px;}
.nm-bild--kreuz .qm-woerter{gap:5px 11px; max-width:none;}
.nm-bild--kreuz .qm-woerter span{font-size:.8125rem; line-height:1.4;}
.nm-bild--kreuz .qm-woerter .stark{font-size:.9375rem;}
.nm-bild--kreuz .qm-achse{font-size:.625rem; letter-spacing:.14em; padding:3px 8px;}


/* Ueberschriftzeile des Einzelvertriebs steht mittig ueber den drei Bereichen. */
.nm-kopf--mitte{text-align:center;}
.nm-kopf--mitte .eyebrow{margin-bottom:0;}

.nm-kopf{margin-bottom:clamp(40px, 4.6vw, 76px);}

.nm-raster{
  display:grid; grid-template-columns:repeat(12, 1fr);
  column-gap:clamp(16px, 2vw, 30px);
  row-gap:clamp(44px, 5vw, 86px);
}
.nm-eintrag{
  grid-column:1 / -1;
  display:grid; column-gap:clamp(18px, 2.4vw, 38px);
  align-items:start;
}
.nm-eintrag--textlinks{grid-template-columns:4fr 8fr;}
.nm-eintrag--bildlinks{grid-template-columns:8fr 4fr;}
/* Schwarzweisse Portraits im Mosaik */
.nm-bild--sw img{filter:grayscale(1);}

.nm-eintrag--halb{grid-column:span 6; grid-template-columns:1fr; row-gap:clamp(16px, 1.8vw, 26px); align-self:start;}
.nm-eintrag--versetzt{margin-top:clamp(0px, 4vw, 74px);}

.nm-bild{margin:0; position:relative; overflow:visible;}
.nm-bild img{width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover;}
.nm-bild--gross img{aspect-ratio:16/9;}
.nm-bild--hoch img{aspect-ratio:4/5;}

/* ---- Personenbilder im Mosaik --------------------------------------------
   Portraits brauchen Hochformat. Die Regeln stehen bewusst NACH --gross und
   --hoch und tragen zwei Klassen, damit sie deren Seitenverhaeltnis sicher
   ueberschreiben. Die Breite ist begrenzt, sonst wuerde ein Hochformat in der
   breiten Mosaikspalte die ganze Seite sprengen. */
.nm-bild.nm-bild--portraet img{aspect-ratio:3/4;}
.nm-bild.nm-bild--stehend img{aspect-ratio:4/5;}
.nm-bild--portraet,
.nm-bild--stehend{width:min(100%, 420px);}
.nm-eintrag--bildlinks .nm-bild--stehend{margin-right:auto;}
.nm-eintrag--textlinks .nm-bild--portraet{margin-left:0;}
/* Traegt der breite Mosaikplatz ein Hochformat, rueckt der Text nach:
   sonst klafft zwischen Bild und Text eine leere Spalte. */
.nm-eintrag--bildlinks:has(.nm-bild--stehend),
.nm-eintrag--bildlinks:has(.nm-bild--portraet){grid-template-columns:5fr 7fr;}
.nm-eintrag--textlinks:has(.nm-bild--portraet){grid-template-columns:7fr 5fr;}

/* Zwei Bilder uebereinander: Beim Zeigen (oder bei Tastaturfokus) blendet das
   zweite Motiv derselben Person ueber das Titelbild. Beide in Farbe.
   Ohne Zeigegeraet bleibt das Titelbild stehen — nichts geht verloren. */
.nm-bild--wechsel{position:relative;}
.nm-bild--wechsel .nm-zweit{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 700ms ease;
}
.nm-eintrag:hover .nm-bild--wechsel .nm-zweit,
.nm-eintrag:focus-within .nm-bild--wechsel .nm-zweit{opacity:1;}
/* Die Ziffer bleibt ueber beiden Bildern */
.nm-bild--wechsel .nm-nummer{z-index:2;}
@media (prefers-reduced-motion: reduce){
  .nm-bild--wechsel .nm-zweit{transition:none;}
}

/* Bildtext: Marke in Bronze, darunter zwei knappe Zeilen */
.nm-text{text-align:right; position:relative;}
.nm-text--links{text-align:left;}
.nm-marke{
  display:block; font-family:var(--font-marke);
  font-size:.8125rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bronze-nav); line-height:1.5; margin-bottom:12px;
}
.nm-text p{
  font-size:.9375rem; line-height:1.7; color:var(--anthracite);
  margin:0; max-width:34ch;
}
.nm-text--links p{margin-right:auto;}
.nm-text:not(.nm-text--links) p{margin-left:auto;}

/* Grosse Ziffern — ruhig im Hintergrund, nie als Text vorgelesen */
.nm-nummer{
  display:block; font-family:var(--font-serif); font-weight:400;
  font-size:clamp(3.6rem, 8.5vw, 8rem); line-height:.82;
  color:var(--greige); letter-spacing:-.02em;
  margin-top:clamp(18px, 2.2vw, 34px);
  user-select:none;
}
.nm-text--links .nm-nummer{margin:0 0 6px;}
.nm-nummer--hell{
  position:absolute; right:clamp(12px, 2vw, 30px); bottom:clamp(-10px, -1vw, 0px);
  margin:0; color:var(--white); opacity:.9;
  text-shadow:0 2px 24px rgba(17,17,17,.35);
}
.nm-bild--hoch .nm-nummer--hell{left:clamp(12px, 2vw, 26px); right:auto;}

@media (max-width:900px){
  .nm-eintrag--textlinks,
  .nm-eintrag--bildlinks{grid-template-columns:1fr; row-gap:22px;}
  .nm-eintrag--textlinks .nm-text{order:2; text-align:left;}
  .nm-eintrag--textlinks .nm-text p{margin-left:0;}
  .nm-eintrag--halb{grid-column:1 / -1;}
  .nm-eintrag--versetzt{margin-top:0;}
  .nm-text{text-align:left;}
  .nm-text p{margin-left:0;}
}

/* Das Neubau-Titelbild ist an der Stelle des Zitats sehr hell (Laub in der
   Sonne). Ein kraeftigerer Verlauf von links unten sichert die Lesbarkeit. */
.page-hero--neubau{background-position:84% 55%;}
.page-hero--neubau.page-hero--plain::before{
  background:
    linear-gradient(103deg,
      rgba(17,17,17,.406) 0%, rgba(17,17,17,.308) 26%,
      rgba(17,17,17,.14) 50%, rgba(17,17,17,0) 70%),
    linear-gradient(0deg, rgba(17,17,17,.238) 0%, rgba(17,17,17,0) 50%);
}

/* Das Titelbild der Unternehmensseite ist sehr hell (weisse Fassade, Himmel).
   Deshalb ein etwas kraeftigerer Verlauf in der unteren linken Ecke, wo das
   Zitat steht — gerade so viel, dass die Schrift sicher lesbar bleibt. */
.page-hero--unternehmen.page-hero--plain::before{
  background:
    linear-gradient(103deg,
      rgba(17,17,17,.42) 0%, rgba(17,17,17,.322) 28%,
      rgba(17,17,17,.154) 52%, rgba(17,17,17,0) 72%),
    linear-gradient(0deg, rgba(17,17,17,.266) 0%, rgba(17,17,17,0) 52%);
}

/* Dunkles Band mit drei Punkten statt zwei */
.gu-raster--drei{grid-template-columns:repeat(3, minmax(0,1fr));}
.gutachten--drei .gu-flaeche{width:min(100%, 1120px);}
@media (max-width:860px){
  .gu-raster--drei{grid-template-columns:1fr;}
}

/* Statt die Bilder abzudunkeln, traegt die weisse Schrift auf den Titelbildern
   einen weichen Schatten — das haelt die Aufnahme hell und die Schrift lesbar. */
.hero-zitat p, .hero-zitat cite,
.page-hero h1, .page-hero .lede, .page-hero .breadcrumb,
.hero h1, .hero .lede{
  text-shadow:0 1px 3px rgba(17,17,17,.42), 0 4px 22px rgba(17,17,17,.38);
}

/* Einstieg auf der Startseite: die beiden Zeilen steigen nacheinander aus
   einer Maske auf, darunter waechst eine feine Bronzelinie. */
.an-titel.einblenden{transform:none;}
.an-zeile{display:block; overflow:hidden;}
.an-zeile > span{
  display:block;
  transform:translateY(112%);
  transition:transform 900ms cubic-bezier(.22,.61,.36,1);
}
.an-titel.sichtbar .an-zeile > span{transform:none;}
.an-titel.sichtbar .an-zeile:nth-child(2) > span{transition-delay:130ms;}
.an-strich{
  display:block; width:0; height:1px; background:var(--bronze);
  margin:clamp(22px, 2.4vw, 32px) auto 0;
  opacity:1 !important; transform:none !important;
  transition:width 820ms cubic-bezier(.22,.61,.36,1) 340ms;
}
.an-strich.sichtbar{width:clamp(48px, 5vw, 74px);}
@media (prefers-reduced-motion: reduce){
  .an-zeile > span{transform:none; transition:none;}
  .an-strich{transition:none; width:clamp(48px, 5vw, 74px);}
}
@media (max-width:700px){
  .an-titel br{display:none;}
}

/* ==========================================================================
   Teamvorstellung: Text links im Raster, Bild rechts bis zum Seitenrand,
   nach links weich ausgeblendet (Aufbau nach Referenz).
   ========================================================================== */
.team-vorstellung{padding:clamp(56px, 6vw, 104px) 0; overflow:hidden;}
.tv-raster{
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
  align-items:center;
  gap:clamp(20px, 2.6vw, 48px);
  padding-left:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
.tv-text{max-width:46ch;}
.tv-marke{
  display:block; font-family:var(--font-marke);
  font-size:clamp(1rem, 1.3vw, 1.2rem); letter-spacing:.22em;
  text-transform:uppercase; color:var(--green);
  margin-bottom:clamp(24px, 2.6vw, 36px);
}
.tv-text p{
  font-size:1rem; line-height:1.75; color:var(--anthracite);
  margin:0 0 1.5em;
}
.tv-text p:last-child{margin-bottom:0;}

.tv-bild{position:relative; margin:0;}
.tv-bild img{
  width:100%; height:100%; display:block;
  aspect-ratio:16/11; object-fit:cover;
  /* Die Vorlage ist ein Hochformat — der Ausschnitt sitzt oben, damit das
     Gesicht im Bild bleibt. Schwarzweiss wie in der Referenz. */
  object-position:50% 14%;
  filter:grayscale(1) contrast(1.04);
}
/* Der Verlauf loest die linke Bildkante in die Seite auf — dadurch wirkt das
   Bild nicht wie ein eingesetzter Kasten, sondern wie Teil der Flaeche. */
.tv-bild::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,
    var(--white) 0%, rgba(255,255,255,.92) 12%,
    rgba(255,255,255,.45) 30%, rgba(255,255,255,0) 52%);
}
@media (max-width:900px){
  .tv-raster{
    grid-template-columns:1fr; gap:30px;
    padding-left:var(--gutter); padding-right:var(--gutter);
  }
  .tv-text{max-width:none;}
  .tv-bild img{aspect-ratio:16/10;}
  .tv-bild::after{
    background:linear-gradient(180deg,
      var(--white) 0%, rgba(255,255,255,.7) 10%, rgba(255,255,255,0) 34%);
  }
}

/* Einstieg im Aufbau des Willkommensblocks — auch ausserhalb der Startseite */
.einstieg-mitte{padding:clamp(56px, 6vw, 104px) 0 clamp(30px, 3.4vw, 48px);}
/* Versalvariante der Einstiegsueberschrift — Wortmarkenschrift, Gruen */
.an-titel--versal{
  font-family:var(--font-marke); font-weight:400;
  font-size:clamp(1.15rem, 2vw, 1.8rem); line-height:1.34;
  letter-spacing:.06em; text-transform:uppercase; color:var(--green);
  max-width:30ch;
}
.einstieg-mitte .an-titel,
.einstieg-mitte .an-text,
.einstieg-mitte .an-knopf{text-align:center;}
.einstieg-mitte .an-text{margin-bottom:1.6em;}
.einstieg-mitte .an-text--zwei{margin-bottom:clamp(34px, 4vw, 54px);}
.einstieg-mitte .an-knopf{display:block; width:max-content; margin-inline:auto;}

/* Ueberschrift und Vorspann stehen jetzt im Inhalt statt im Titelbild.
   Masse wie auf der Verkaufsseite: gleiche Spaltenbreite (61,3 Prozent),
   gleicher Abstand vom Brotkrumenpfad, gleiche Zeilenfuehrung. */
.em-pfad{color:#7a746e; margin-bottom:clamp(30px, 3.4vw, 52px);}
.em-titel{
  font-size:var(--titelgroesse); font-weight:400; line-height:1.18;
  color:var(--anthracite); margin:0; max-width:61.3%;
}
.em-lede{
  font-size:1rem; line-height:1.7; color:var(--grau);
  margin:14px 0 clamp(48px, 5.4vw, 88px); max-width:61.3%;
}
@media (max-width:900px){
  .em-titel, .em-lede{max-width:none;}
}

/* ==========================================================================
   Unsere Werte: Wertekreis (Kern, vier Werte im Ring, Eigenschaften aussen)
   ========================================================================== */
.werte{background:var(--offwhite); padding:clamp(60px, 6.4vw, 108px) 0;}
.werte-marke{
  display:block; text-align:center;
  font-family:var(--font-marke); font-size:clamp(.8125rem, 1vw, .9375rem);
  letter-spacing:.24em; text-transform:uppercase; color:var(--bronze-nav);
  margin-bottom:clamp(18px, 1.8vw, 24px);
}
/* Einleitende Ueberschrift des Werteteils — Wortmarkenschrift in Versalien */
.werte-titel{
  text-align:center; font-family:var(--font-marke); font-weight:400;
  font-size:clamp(1.15rem, 2vw, 1.8rem); line-height:1.32;
  letter-spacing:.06em; text-transform:uppercase; color:var(--green);
  max-width:26ch; margin:0 auto clamp(20px, 2.2vw, 30px);
  text-wrap:balance;
}
.werte-lede{
  text-align:center; font-size:1.0625rem; line-height:1.75; color:var(--anthracite);
  max-width:58ch; margin:0 auto clamp(40px, 4.4vw, 70px);
}

/* ---- Unser Fundament: ein Umlaufsystem ------------------------------------
   Die Haltung steht als goldene Kugel im Zentrum, die vier Werte laufen auf
   geneigten Bahnen darum. Jede Bahn wird zweimal gezeichnet — einmal ganz
   hinter der Kugel, einmal als vorderer Halbbogen darueber. Erst dadurch
   entsteht der Eindruck, dass die Linien um die Kugel herumlaufen.

   Die Beschriftungen haengen an ihren Planeten: Die waagerechte Unterlinie
   endet genau auf Hoehe des Punktes, der Text beginnt knapp ausserhalb des
   Bildes. Die Zahlen unten sind Anteile der Bildbreite (viewBox 320 x 240).
   -------------------------------------------------------------------------- */
.fundament{max-width:1180px; margin:0 auto clamp(30px, 3.4vw, 48px);}
.fu-buehne{
  --sys:clamp(340px, 44vw, 600px);
  --luft:22px;
  position:relative;
  min-height:calc(.75 * var(--sys) + 70px);
  padding-top:56px;
}
.fu-system{
  position:absolute; left:50%; top:56px; transform:translateX(-50%);
  width:var(--sys); margin:0;
}
.fu-system svg{width:100%; height:auto; display:block; overflow:visible;}

/* Bahnen: hinten zurueckhaltend, vorn kraeftiger — das traegt die Tiefe. */
.fu-bahn{fill:none; vector-effect:non-scaling-stroke;}
.fu-bahn--hinten{stroke:var(--bronze); stroke-width:.85; opacity:.32;}
.fu-bahn--vorn{stroke:var(--bronze-dark); stroke-width:1.25; opacity:.92;}
.fu-kugel{fill:var(--bronze);}

.fu-punkt{
  fill:var(--bronze-dark);
  transform-box:fill-box; transform-origin:center;
  transition:fill 320ms ease, opacity 320ms ease, transform 320ms ease;
}
.fundament:has(.fu-wert:hover) .fu-punkt{opacity:.22;}
.fundament:has(.fu-wert--1:hover) .fu-punkt--1,
.fundament:has(.fu-wert--2:hover) .fu-punkt--2,
.fundament:has(.fu-wert--3:hover) .fu-punkt--3,
.fundament:has(.fu-wert--4:hover) .fu-punkt--4{
  opacity:1; fill:var(--green); transform:scale(1.5);
}
@media (prefers-reduced-motion: reduce){
  .fu-punkt{transition:none;}
}

/* Das Wort sitzt mittig auf der flaechigen Bronzekugel (gemessen 4,6:1) */
.fu-kern{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  font-family:var(--font-marke);
  font-size:clamp(.68rem, 1.1vw, .92rem); letter-spacing:.18em;
  text-transform:uppercase; color:#0E2626; pointer-events:none;
  white-space:nowrap;
}

/* ---- Die vier Werte, jeweils neben ihrem Planeten ---- */
.fu-liste{list-style:none; margin:0; padding:0;}
.fu-wert{
  position:absolute; transform:translateY(-100%);
  padding-bottom:9px; border-bottom:1px solid var(--bronze);
  transition:border-color 320ms ease;
}
.fu-wert:hover{border-color:var(--bronze-dark);}
/* Rechts vom Bild: Der Kasten beginnt am Planeten, die Linie laeuft von dort
   nach aussen. Das Polster schiebt den Text hinter den Bildrand. */
.fu-wert--1{left:calc(50% + .3591 * var(--sys)); right:0; text-align:left;
  top:calc(56px + .0738 * var(--sys));
  padding-left:calc(.1409 * var(--sys) + var(--luft));}
.fu-wert--2{left:calc(50% + .2288 * var(--sys)); right:0; text-align:left;
  top:calc(56px + .2222 * var(--sys));
  padding-left:calc(.2712 * var(--sys) + var(--luft));}
/* Links vom Bild: spiegelbildlich */
.fu-wert--3{left:0; right:calc(50% + .1541 * var(--sys)); text-align:right;
  top:calc(56px + .4778 * var(--sys));
  padding-right:calc(.3459 * var(--sys) + var(--luft));}
.fu-wert--4{left:0; right:calc(50% + .2922 * var(--sys)); text-align:right;
  top:calc(56px + .6200 * var(--sys));
  padding-right:calc(.2078 * var(--sys) + var(--luft));}

.fu-wert h3{
  font-family:var(--font-marke); font-weight:400;
  font-size:clamp(.75rem, .95vw, .875rem); letter-spacing:.16em;
  text-transform:uppercase; color:var(--green); margin:0 0 7px;
}
.fu-nummer{
  font-family:var(--font-serif); color:var(--bronze);
  letter-spacing:.04em; margin-right:10px;
  transition:color 320ms ease;
}
.fu-wert:hover .fu-nummer{color:var(--bronze-dark);}
.fu-wert p{
  font-size:.875rem; line-height:1.6; color:var(--anthracite);
  margin:0;
}

.fu-eigenschaften{
  text-align:center; font-size:.8125rem; line-height:2; color:var(--bronze-nav);
  max-width:56ch; margin:0 auto;
}
.werte-schluss{
  text-align:center; max-width:64ch; margin:clamp(30px, 3.4vw, 48px) auto 0;
  font-size:1rem; line-height:1.75; color:var(--grau);
}

@media (max-width:900px){
  /* Schmale Fenster tragen die Beschriftungen nicht am Bild — Kugel oben,
     Werte darunter als Liste. */
  .fu-buehne{padding-top:0; min-height:0;}
  .fu-system{position:static; transform:none; width:min(100%, 420px); margin:0 auto clamp(26px, 5vw, 40px);}
  .fu-liste{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px, 3vw, 26px);}
  .fu-wert{
    position:static; transform:none; text-align:left;
    padding:clamp(12px, 2.4vw, 18px) 0 0;
    border-bottom:0; border-top:1px solid var(--greige);
  }
  .fu-wert--1, .fu-wert--2, .fu-wert--3, .fu-wert--4{
    padding-left:0; padding-right:0; text-align:left;
  }
}
@media (max-width:560px){
  .fu-liste{grid-template-columns:1fr;}
}


/* ==========================================================================
   Rundum-Service: fuenf Boegen im Kreis, Tafel mit den Einzelleistungen
   ========================================================================== */
.rundum{padding:clamp(60px, 6.4vw, 104px) 0;}
/* Kreis links, die Tafel des gewaehlten Bereichs steht direkt daneben */
/* Drei Spalten: Der Kreis steht fest in der Mitte, links und rechts liegt
   je eine Textspalte gleicher Breite. Gefuellt wird immer nur eine davon —
   dadurch bleibt der Kreis beim Wechsel exakt an derselben Stelle. */
.rs-raster{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  gap:32px;
  align-items:start;
  max-width:1500px; margin:0 auto;
}
/* Der Kreis steht fest in der Mitte, links und rechts liegt je eine
   Textspalte gleicher Breite. Gefuellt wird immer nur eine davon — dadurch
   bleibt der Kreis beim Wechsel exakt an derselben Stelle. */
.rs-saeule{grid-column:2; grid-row:1; min-width:min(100%, 770px);}
.rs-tafeln{grid-column:3; grid-row:1;}
.rs-raster[data-seite="links"] .rs-tafeln{grid-column:1; grid-row:1;}
.rs-tafeln{padding-top:clamp(40px, 8.5vw, 150px); padding-left:0;}
/* Der Text setzt auf der Hoehe seines Wortes am Ring an. Die Zuschlaege sind
   die gemessenen Abstaende der Woerter zum obersten Wort bei einem Ring von
   330 px: 01 oben, 02/06 +205, 03/05 +337, 04 +593. Nebeneinander steht das
   Raster erst ab 1500 px, dort ist der Ring immer 330 px breit. */
.rs-raster[data-lage="oben"] .rs-tafeln{padding-top:calc(clamp(40px, 8.5vw, 150px) + 205px);}
.rs-raster[data-lage="unten"] .rs-tafeln{padding-top:calc(clamp(40px, 8.5vw, 150px) + 337px);}
.rs-raster[data-lage="fuss"] .rs-tafeln{padding-top:calc(clamp(40px, 8.5vw, 150px) + 593px);}
.rs-raster[data-seite="links"] .rs-tafeln{padding-left:0; padding-right:0;}

/* ---- Vorstufe und Nachstufe ---- */
/* Ueberschrift, darunter der Winkel ueber die volle Breite der Ueberschrift */
.rs-vorstufe{
  max-width:min(100%, 640px); margin:0 auto; text-align:center;
}
.rs-vorstufe-text{
  display:block; margin:0;
  font-family:var(--serif, Georgia, serif); font-weight:400;
  font-size:clamp(1.3rem, 2.1vw, 1.85rem); line-height:1.25;
  color:var(--anthracite); text-wrap:balance;
}
.rs-pfeil{
  display:block; width:100%; height:clamp(48px, 5.6vw, 84px); margin:18px 0 0;
  fill:none; stroke:var(--bronze); stroke-width:1; opacity:.55;
}
.rs-nachstufe{
  margin:clamp(136px, 12.5vw, 184px) 0 0; text-align:center;
  font-family:var(--font-sans); font-size:clamp(.7rem, 1vw, .875rem);
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bronze-nav);
}
.rs-nachstufe-wort{color:var(--taupe); margin-right:14px;}

/* ---- Der Ring ---- */
.rs-kreis{
  /* --leiter ist die Grundlaenge der Anschlusslinie zwischen Wort und Ring.
     Beruehrpunkt der sechs Boegen bei Radius 0,4 der Kreisbreite:
     -30 Grad -> x 0,8464 / y 0,30 | 30 Grad -> x 0,8464 / y 0,70 */
  --kreis:min(100%, 330px);
  --leiter:clamp(64px, 6.6vw, 104px);
  position:relative; width:var(--kreis); aspect-ratio:1/1;
  /* Platz oben fuer die Vorstufe, das Wort "Unterlagen" und den Strich */
  margin:clamp(126px, 11.5vw, 170px) auto 0;
}
.rs-kreis svg{width:100%; height:100%; display:block; overflow:visible;}
.rs-bogen{
  fill:none; stroke:var(--greige); stroke-width:17;
  stroke-dasharray:72 430.65;
  transform-box:fill-box; transform-origin:center;
  transition:stroke 300ms ease, stroke-width 300ms ease;
}
.rs-strich{stroke:var(--bronze); stroke-width:1; opacity:.45;}
.rs-kern{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  pointer-events:none;
}
.rs-kern-text{
  display:block; max-width:62%; margin:0 auto;
  font-family:var(--font-marke); line-height:1.55;
  font-size:clamp(.72rem, 1.2vw, .93rem); letter-spacing:.16em;
  text-transform:uppercase; color:var(--green);
}
.rs-kern-text::after{
  content:''; display:block; width:52px; height:1px;
  margin:12px auto 0; background:var(--bronze); opacity:.6;
}

/* ---- Die sechs Beschriftungen ---- */
.rs-marke{
  position:absolute;
  background:none; border:0; cursor:pointer;
  padding:0 0 9px; border-bottom:1px solid var(--bronze);
  font-family:var(--font-sans); font-size:clamp(.7rem, 1vw, .875rem);
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bronze-nav); white-space:nowrap;
  transform:translateY(-100%);
  transition:color var(--transition), border-color var(--transition);
}
.rs-nr{
  display:block; margin-bottom:5px;
  font-size:.625rem; font-weight:500; letter-spacing:.16em; color:var(--taupe);
  transition:color var(--transition);
}
/* Oben und unten laeuft ein senkrechter Strich aus dem SVG zum Wort */
.rs-marke--1{
  left:50%; top:-35%;
  transform:translate(-50%, -100%);
  border-bottom:0; padding-bottom:0;
}
.rs-marke--2{left:84.64%; top:30%; padding-left:var(--leiter);}
.rs-marke--3{left:84.64%; top:70%; padding-left:var(--leiter);}
.rs-marke--4{
  left:50%; top:135%;
  transform:translate(-50%, 0);
  border-bottom:0; padding-bottom:0;
}
.rs-marke--5{right:84.64%; top:70%; padding-right:var(--leiter); text-align:right;}
.rs-marke--6{right:84.64%; top:30%; padding-right:var(--leiter); text-align:right;}

/* Alle sechs Woerter halten denselben Abstand zum Ring — sonst schoebe sich
   das laengste ("Entruempelung", "Renovierung") auf den Ring, sobald seine
   Tafel auf derselben Seite steht. */
.rs-marke:hover{color:var(--bronze-dark); border-color:var(--bronze-dark);}
.rs-marke:hover .rs-nr{color:var(--bronze-dark);}
.rs-marke:focus-visible{outline:2px solid var(--bronze); outline-offset:4px;}
.rs-marke[aria-current="true"]{color:var(--green); border-color:var(--green);}
.rs-marke[aria-current="true"] .rs-nr{color:var(--bronze-nav);}

/* Der Bogen des gewaehlten Bereichs wird dunkel, die uebrigen bleiben hell */
.rs-kreis[data-aktiv="1"] .rs-bogen[data-nr="1"],
.rs-kreis[data-aktiv="2"] .rs-bogen[data-nr="2"],
.rs-kreis[data-aktiv="3"] .rs-bogen[data-nr="3"],
.rs-kreis[data-aktiv="4"] .rs-bogen[data-nr="4"],
.rs-kreis[data-aktiv="5"] .rs-bogen[data-nr="5"],
.rs-kreis[data-aktiv="6"] .rs-bogen[data-nr="6"]{
  stroke:var(--green); stroke-width:21;
}

@media (max-width:1500px){
  .rs-raster,
  .rs-raster[data-seite="links"]{grid-template-columns:1fr; gap:clamp(28px, 5vw, 44px);}
  .rs-tafeln,
  .rs-raster[data-lage="oben"] .rs-tafeln,
  .rs-raster[data-lage="unten"] .rs-tafeln,
  .rs-raster[data-lage="fuss"] .rs-tafeln,
  .rs-raster[data-seite="links"] .rs-tafeln{padding-left:0; padding-right:0; padding-top:0;}
  .rs-saeule,
  .rs-tafeln,
  .rs-raster[data-seite="links"] .rs-saeule,
  .rs-raster[data-seite="links"] .rs-tafeln{grid-column:1; grid-row:auto;}
  .rs-raster[data-seite="links"] .rs-tafel h3,
  .rs-raster[data-seite="links"] .rs-tafel p{text-align:left;}
  .rs-raster[data-seite="links"] .rs-tafel h3::after{left:0; right:auto;}
  .rs-raster[data-seite="links"] .rs-tafel p{margin-left:0;}
  /* Untereinander: Die Tafel steht mittig unter dem Kreis, nicht am Rand.
     Doppelte Klasse, weil die allgemeine Regel .rs-tafeln{max-width:none}
     weiter unten steht und sonst gewinnt. */
  .rs-raster .rs-tafeln.rs-tafeln{max-width:640px; margin:0 auto;}
}

/* Die Nummer ueber der Tafel greift die Nummer am Ring auf */
.rs-tafel-nr{
  display:block; margin-bottom:10px;
  font-family:var(--font-sans); font-size:.625rem; font-weight:500;
  letter-spacing:.16em; color:var(--taupe);
}

/* ---- Die Tafel mit den Einzelleistungen ---- */
.rs-tafeln{max-width:none; margin:0;}
.rs-tafel[hidden]{display:none;}
.rs-tafel h3{
  font-family:var(--serif, Georgia, serif); font-weight:400;
  font-size:clamp(1rem, 1.3vw, 1.18rem); letter-spacing:0;
  line-height:1.3; text-transform:none; color:var(--green);
  text-align:left; margin:0 0 clamp(16px, 1.8vw, 22px);
  padding-bottom:15px; position:relative; text-wrap:balance;
}
.rs-tafel h3::after{
  content:''; position:absolute; left:0;
  bottom:0; width:40px; height:1px; background:var(--bronze);
}
.rs-tafel p{
  margin:0; font-size:.8125rem; line-height:1.72; color:var(--anthracite);
  max-width:46ch;
}

@media (max-width:760px){
  /* Auf schmalen Fenstern stehen die Bereiche als Reihe unter dem Kreis —
     am Kreisrand wuerden sie ueber den Bildschirmrand hinauslaufen. */
  .rs-kreis{width:min(100%, 320px); margin:clamp(20px, 5vw, 30px) auto clamp(24px, 5vw, 36px);}
  .rs-nachstufe{margin-top:clamp(18px, 4vw, 26px);}
  .rs-pfeil{height:36px;}
  .rs-kreis .rs-marke{
    position:static; transform:none; display:inline-block;
    padding:0 0 6px; text-align:center;
  }
  .rs-marken-reihe{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:10px clamp(14px, 4vw, 24px);
    margin:0 auto clamp(26px, 5vw, 40px);
  }
  .rs-strich{display:none;}
}
.rs-marken-reihe{display:contents;}

/* Klappmenue mit zwei Gruppen nebeneinander */
.mega-list--zwei{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:13px clamp(34px, 4vw, 64px); align-items:start;
}
/* Gruppenzeile im Mega-Panel: heller Bronzeton, damit sie sich vom
   dunklen, durchscheinenden Grund abhebt (gemessen 5,8:1). */
.mega-gruppe{
  display:block; font-family:var(--font-marke); font-weight:500;
  font-size:.75rem; letter-spacing:.15em; text-transform:uppercase;
  color:#EFE1CB; margin-bottom:6px;
}
.mega-list--zwei > .mega-gruppe:nth-of-type(1){grid-column:1; grid-row:1;}
.mega-list--zwei > .mega-gruppe:nth-of-type(2){grid-column:2; grid-row:1;}
/* Die Verweise fuellen ihre Spalte in der Reihenfolge des Quelltextes —
   Zeilen ausdruecklich gesetzt, sonst rutscht die zweite Spalte nach unten. */
.mega-list--zwei > a:nth-of-type(1){grid-column:1; grid-row:2;}
.mega-list--zwei > a:nth-of-type(2){grid-column:1; grid-row:3;}
.mega-list--zwei > a:nth-of-type(3){grid-column:1; grid-row:4;}
.mega-list--zwei > a:nth-of-type(4){grid-column:1; grid-row:5;}
.mega-list--zwei > a:nth-of-type(5){grid-column:1; grid-row:6;}
.mega-list--zwei > a:nth-of-type(6){grid-column:1; grid-row:7;}
.mega-list--zwei > a:nth-of-type(7){grid-column:2; grid-row:2;}
.mega-list--zwei > a:nth-of-type(8){grid-column:2; grid-row:3;}
.mega-list--zwei > a:nth-of-type(9){grid-column:2; grid-row:4;}
/* Im mobilen Menue stehen die Gruppen untereinander */
.mobile-nav .sub .mega-gruppe{
  margin:14px 0 6px; color:var(--bronze-nav);
}
.mobile-nav .sub .mega-gruppe:first-child{margin-top:0;}


/* ==========================================================================
   Ratgeberstrecke auf der Wissensseite
   Ueberschrift mittig, darunter ein dreispaltiges Raster aus Beitraegen.
   Aufbau nach Referenz — Bild oben, Serifenzeile, kurzer Text, Verweis.
   ========================================================================== */
.ratgeber{padding:clamp(56px, 6vw, 100px) 0;}

.rg-kopf{
  text-align:center; max-width:70ch; margin:0 auto clamp(38px, 4.4vw, 66px);
}
.rg-kopf .eyebrow{display:block; margin-bottom:clamp(12px, 1.4vw, 18px);}
.rg-kopf h2{
  margin:0 0 clamp(16px, 1.8vw, 24px);
  text-wrap:balance;
}
.rg-kopf .lede{
  margin:0 auto; max-width:64ch;
  font-size:1.0625rem; line-height:1.75; color:var(--anthracite);
}

.rg-raster{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:clamp(24px, 3vw, 54px);
  row-gap:clamp(44px, 4.6vw, 78px);
}

.rg-karte{display:flex; flex-direction:column;}
.rg-bild{
  display:block; margin:0 0 clamp(18px, 2vw, 26px);
  overflow:hidden; background:var(--greige);
}
.rg-bild img{
  width:100%; height:auto; display:block;
  aspect-ratio:16/10; object-fit:cover;
  transition:transform 700ms ease;
}
.rg-karte:hover .rg-bild img{transform:scale(1.03);}

.rg-titel{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.05rem, 1.3vw, 1.22rem); line-height:1.35;
  color:var(--anthracite); margin:0 0 clamp(12px, 1.4vw, 18px);
}
.rg-text{
  font-size:.9375rem; line-height:1.7; color:var(--grau);
  margin:0 0 clamp(18px, 2vw, 26px);
}
/* Der Verweis sitzt immer buendig am unteren Rand der Karte */
.rg-verweis{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-marke); font-size:.6875rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-nav);
  transition:color var(--transition), gap var(--transition);
}
.rg-verweis svg{
  width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5;
}
.rg-verweis:hover{color:var(--bronze-dark); gap:13px;}

@media (max-width:1000px){
  .rg-raster{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:640px){
  .rg-raster{grid-template-columns:1fr; row-gap:clamp(34px, 7vw, 50px);}
}


/* ==========================================================================
   Mosaik in Magazinanmutung (nur Unternehmensseite)
   Grosse, fein konturierte Ziffern, zurueckhaltende Bildtexte, Querformate.
   Vorbild: doppelseitige Magazinstrecke — die Ziffer ist Bildmarke, nicht
   Beschriftung, und darf ueber die Bildkante laufen.
   ========================================================================== */
.neubau-mosaik--magazin .nm-raster{row-gap:clamp(34px, 4vw, 68px);}

/* Ziffer: nur Kontur, gross, in Bronze. Faellt text-stroke aus, bleibt sie
   in einem hellen Bronzeton lesbar. */
.neubau-mosaik--magazin .nm-nummer{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(3.2rem, 6.6vw, 6.4rem); line-height:.9;
  letter-spacing:.02em;
  color:#D9C7AC;
}
@supports (-webkit-text-stroke: 1px black){
  .neubau-mosaik--magazin .nm-nummer{
    color:transparent; -webkit-text-stroke:1px var(--bronze);
  }
  .neubau-mosaik--magazin .nm-nummer--hell{-webkit-text-stroke-color:#F0E7DA;}
}

/* Bildtext: schmale Spalte, ruhige Farbe, Ueberzeile in Bronze */
.neubau-mosaik--magazin .nm-marke{
  font-size:.6875rem; letter-spacing:.2em; color:var(--bronze-nav);
  margin-bottom:10px;
}
.neubau-mosaik--magazin .nm-text p{
  font-size:.9375rem; line-height:1.75; color:var(--grau);
  max-width:34ch;
}
.neubau-mosaik--magazin .nm-text{align-self:end;}
.neubau-mosaik--magazin .nm-text--links p{margin-left:0;}

/* Querformate fuer Raum- und Objektbilder */
.nm-bild--quer img{aspect-ratio:3/2;}
.nm-eintrag--breit{
  grid-column:1 / -1;
  grid-template-columns:8fr 4fr;
  align-items:end;
}
.nm-eintrag--breit .nm-bild--quer img{aspect-ratio:21/9;}

@media (max-width:900px){
  .nm-eintrag--breit{grid-column:1 / -1; grid-template-columns:1fr; row-gap:22px;}
  .neubau-mosaik--magazin .nm-text p{max-width:none;}
}


/* ==========================================================================
   Unsere Rolle: Fundament, drei Saeulen, Dach
   Ein Bauwerk als Sinnbild — das Fundament ist unser Partnernetzwerk, die
   Saeulen tragen, das Dach steht fuer die Beziehung. Die vier Beschriftungen
   haengen an feinen Linien, die aus dem Bauwerk herauslaufen.
   Die Zahlen unten sind Anteile der Bildbreite (viewBox 560 x 620).
   ========================================================================== */
.haus{padding:clamp(56px, 6vw, 104px) 0;}
.haus-buehne{
  --haus:clamp(280px, 40vw, 480px);
  --rand:48px;
  position:relative; max-width:900px; margin:0 auto;
  min-height:calc(.7679 * var(--haus) + 2 * var(--rand));
  padding:var(--rand) 0;
}
.haus-bild{
  position:absolute; left:50%; top:var(--rand); transform:translateX(-50%);
  width:var(--haus); margin:0;
}
.haus-bild svg{width:100%; height:auto; display:block; overflow:visible;}

/* Strichzeichnung statt Flaeche — ruhiger und naeher an unserer Bildsprache */
.ha-form{
  fill:none; stroke:var(--bronze); stroke-width:1.2;
  vector-effect:non-scaling-stroke;
}
.ha-strich{stroke:var(--bronze); stroke-width:1; vector-effect:non-scaling-stroke;}

/* Die drei Saeulen tragen ihre Bezeichnung im Sockelbereich
   (y 314 von 560 Breiteneinheiten; Saeulenmitten bei 169, 280 und 391) */
.ha-saeule{
  /* Bezugsgroesse ist die Bildbreite, nicht die Bildhoehe — sonst rutschen
     die Bezeichnungen in die Saeulen hinein. */
  position:absolute; top:calc(.5607 * var(--haus)); transform:translate(-50%, -50%);
  font-family:var(--font-sans); font-size:clamp(.56rem, .8vw, .75rem);
  font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bronze-nav); white-space:nowrap;
}
.ha-saeule--1{left:30.18%;}
.ha-saeule--2{left:50%;}
.ha-saeule--3{left:69.82%;}

/* Beschriftungen an den Enden der senkrechten Linien */
.ha-marke{
  position:absolute; left:50%;
  font-family:var(--font-sans); font-size:clamp(.68rem, .84vw, .8125rem);
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze-nav); line-height:1.6; text-align:center;
  white-space:nowrap;
}
.ha-marke--oben{
  top:calc(var(--rand) + .0286 * var(--haus));
  transform:translate(-50%, -100%); margin-top:-10px;
}
.ha-marke--unten{
  top:calc(var(--rand) + .7107 * var(--haus));
  transform:translateX(-50%); margin-top:8px;
}

@media (max-width:640px){
  .haus-buehne{--haus:min(86vw, 340px); --rand:38px;}
  .ha-marke{font-size:.5625rem; letter-spacing:.08em; white-space:normal; width:80%;}
  .ha-saeule{font-size:.5rem; letter-spacing:.05em;}
}


/* ==========================================================================
   Abschlussband zweigeteilt: links die Zusage mit Schaltflaeche, rechts der
   erlaeuternde Text. Ein feiner senkrechter Strich trennt beide Haelften.
   ========================================================================== */

/* Abschlussband mit Ueberschrift in der linken Spalte: Ueberzeile, Titel und
   Knopf stehen untereinander, der Satz rechts daneben. */
.eyebrow--hell{color:#DED9D1 !important;}
.ablauf-fuss .af-links h2{margin:0 0 22px; color:#FFFFFF;}
.ablauf-fuss .af-links .btn{margin-top:4px;}

.ablauf-fuss .af-raster{
  display:grid; grid-template-columns:minmax(0, .92fr) 1px minmax(0, 1.08fr);
  gap:clamp(28px, 3.6vw, 62px);
  align-items:center; text-align:left;
}
/* Der Strich ist die mittlere Rasterspalte — dadurch sitzt er exakt mittig
   und waechst mit der Hoehe des Blocks. */
.ablauf-fuss .af-raster::before{
  content:''; grid-column:2; grid-row:1;
  width:1px; align-self:stretch;
  background:rgba(237,232,224,.28);
}
.ablauf-fuss .af-links{grid-column:1;}
.ablauf-fuss .af-rechts{grid-column:3;}
.ablauf-fuss .af-links p{
  margin:0 0 clamp(20px, 2.4vw, 30px); max-width:34ch;
  font-size:clamp(1rem, 1.25vw, 1.1875rem); line-height:1.55;
}
.ablauf-fuss .af-rechts p{
  margin:0; max-width:56ch;
  font-size:.9375rem; line-height:1.8; color:#DCD6CC;
}
/* Die Kennzahlen nur leicht hervorheben — kein harter Fettdruck */
.ablauf-fuss .af-rechts b{font-weight:600; color:#FFFFFF;}

@media (max-width:860px){
  .ablauf-fuss .af-raster{grid-template-columns:1fr; gap:clamp(24px, 5vw, 36px);}
  .ablauf-fuss .af-raster::before{
    grid-column:1; grid-row:2; width:auto; height:1px; align-self:auto;
  }
  .ablauf-fuss .af-links{grid-column:1; grid-row:1;}
  .ablauf-fuss .af-rechts{grid-column:1; grid-row:3;}
  .ablauf-fuss .af-links p{max-width:none;}
}


/* Verweis unter der Lebenssituationen-Strecke — rechtsbuendig unter den Bildern */
.lebens-mehr{
  margin:clamp(26px, 3vw, 40px) 0 0; text-align:right;
}
.lebens-mehr a{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-marke); font-size:.75rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-nav);
  padding-bottom:8px; border-bottom:1px solid var(--bronze);
  transition:color var(--transition), gap var(--transition);
}
.lebens-mehr a svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5;}
.lebens-mehr a:hover{color:var(--bronze-dark); gap:14px;}
.lebens-kopf .eyebrow{display:block; margin-bottom:clamp(10px, 1.2vw, 16px);}
@media (max-width:640px){
  .lebens-mehr{text-align:left;}
}


/* ==========================================================================
   Wissensseite "Immobilie geerbt"
   Baut vollstaendig auf dem bestehenden System auf: dieselben Farbtoken,
   Schriften, Abstaende und Rasterbreiten wie die Leistungsseiten. Neu sind
   nur die Anordnungen, die dieser Inhalt braucht.
   ========================================================================== */

/* ---- gemeinsamer Abschnittskopf ---- */
.erb-kopf{
  max-width:64ch; margin:0 0 clamp(38px, 4.4vw, 62px);
}
.erb-kopf .eyebrow{display:block; margin-bottom:clamp(12px, 1.4vw, 18px);}
.erb-kopf h2{margin:0 0 clamp(14px, 1.6vw, 20px); text-wrap:balance;}
.erb-kopf .lede{margin:0; color:var(--grau); font-size:1.0625rem; line-height:1.75;}

/* Unter dem Einstieg (Text links, Ansprechpartnerin rechts) braucht es Luft,
   sonst stossen Kontaktspalte und naechster Abschnitt aneinander. */
.intro-block{padding-bottom:clamp(36px, 4vw, 60px);}

.erb-lede{font-size:1.0625rem; line-height:1.75;}
.erb-knoepfe{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:clamp(24px, 2.8vw, 36px) !important;
}
/* Heller Umriss-Knopf auf hellem Grund */
.btn-ghost--dunkel{border-color:var(--bronze); color:var(--bronze-nav);}
.btn-ghost--dunkel:hover{background:var(--bronze); color:var(--white);}

/* ---- Informationsfelder (2 und 11) ---- */
.erb-felder{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1px; background:var(--greige);
  border:1px solid var(--greige);
}
.erb-felder--vier{grid-template-columns:repeat(4, minmax(0,1fr));}
.erb-feld{
  background:var(--white);
  padding:clamp(26px, 3vw, 42px) clamp(22px, 2.6vw, 38px);
}
.erb-ziffer{
  display:block; font-family:var(--font-serif);
  font-size:.875rem; letter-spacing:.1em; color:var(--bronze);
  margin-bottom:clamp(14px, 1.6vw, 20px);
}
.erb-feld h3{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.05rem, 1.3vw, 1.22rem); line-height:1.35;
  color:var(--anthracite); margin:0 0 12px;
}
.erb-feld p{margin:0; font-size:.9375rem; line-height:1.75; color:var(--grau);}

/* ---- Hinweiskasten (3 und 14) ---- */
.erb-hinweis{
  max-width:900px; margin:0 auto;
  border-left:2px solid var(--bronze);
  background:var(--offwhite);
  padding:clamp(30px, 3.6vw, 52px) clamp(26px, 3.4vw, 54px);
}
/* Grosse Fassung im Zuschnitt des Zitatbandes: ruhiges Band ueber die volle
   Inhaltsbreite, Text mittig — die goldene Kante links bleibt. */
.erb-hinweis.erb-hinweis--gross{
  max-width:none;
  /* Flaches, breites Band statt hohem Kasten: wenig Luft oben und unten,
     viel Luft an den Seiten. */
  padding:clamp(28px, 3vw, 46px) clamp(34px, 6vw, 120px);
  text-align:center;
}
.erb-hinweis.erb-hinweis--gross .erb-hinweis-marke{margin-bottom:clamp(10px, 1.2vw, 15px); text-align:center;}
.erb-hinweis.erb-hinweis--gross h2{
  font-size:clamp(1.35rem, 2.2vw, 1.85rem);
  margin:0 auto clamp(14px, 1.5vw, 20px); max-width:34ch;
  text-align:center; text-wrap:balance;
}
.erb-hinweis.erb-hinweis--gross p{
  max-width:88ch; margin-left:auto; margin-right:auto;
  font-size:1rem; line-height:1.8;
}
.erb-hinweis.erb-hinweis--gross .erb-hinweis-fuss{
  max-width:82ch; margin:clamp(16px, 1.8vw, 24px) auto 0;
  padding-top:clamp(14px, 1.6vw, 20px);
}
.erb-hinweis-marke{
  display:block; font-family:var(--font-marke);
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze-nav); margin-bottom:clamp(14px, 1.6vw, 20px);
}
.erb-hinweis h2{
  margin:0 0 clamp(14px, 1.6vw, 20px);
  font-size:clamp(1.3rem, 2vw, 1.75rem);
}
.erb-hinweis p{margin:0 0 14px; line-height:1.8; color:var(--anthracite);}
.erb-hinweis p:last-child{margin-bottom:0;}
.erb-hinweis-fuss{
  font-size:.875rem !important; color:var(--grau) !important;
  padding-top:16px; border-top:1px solid var(--greige);
}
.erb-aktuell{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(24px, 3vw, 48px); margin-bottom:20px;
}
.erb-aktuell h3{
  font-family:var(--font-marke); font-weight:400;
  font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); margin:0 0 10px;
}
.erb-aktuell b{color:var(--anthracite); font-weight:600;}

/* ---- Fahrplan (4) ---- */
.erb-weg{
  list-style:none; margin:0; padding:0;
  max-width:900px;
}
.erb-etappe{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(22px, 3vw, 46px);
  padding:clamp(26px, 3vw, 42px) 0;
  border-top:1px solid var(--greige);
}
.erb-etappe--letzte{border-bottom:1px solid var(--greige);}
.erb-nr{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.9rem, 3.4vw, 3rem); line-height:1;
  color:#D9C7AC;
}
@supports (-webkit-text-stroke: 1px black){
  .erb-nr{color:transparent; -webkit-text-stroke:1px var(--bronze);}
}
.erb-etappe-text h3{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.1rem, 1.5vw, 1.35rem); line-height:1.3;
  color:var(--anthracite); margin:0 0 12px;
}
.erb-etappe-text p{margin:0 0 12px; line-height:1.8; color:var(--grau);}
.erb-etappe-text p:last-child{margin-bottom:0;}
.erb-merke{
  border-left:2px solid var(--bronze); padding-left:18px;
  color:var(--anthracite) !important; font-size:.9375rem;
}

/* ---- Aufzaehlungen ---- */
.erb-liste{
  list-style:none; margin:14px 0 0; padding:0;
  columns:2; column-gap:clamp(20px, 2.6vw, 40px);
}
.erb-liste--zwei{columns:2;}
.erb-liste--fragen{columns:1;}
.erb-liste li{
  position:relative; padding-left:18px; margin-bottom:9px;
  break-inside:avoid; font-size:.9375rem; line-height:1.65; color:var(--grau);
}
.erb-liste li::before{
  content:''; position:absolute; left:0; top:.66em;
  width:7px; height:1px; background:var(--bronze);
}

/* ---- Drei Wege (5) ---- */
.erb-wege{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(24px, 3vw, 52px);
}
.erb-weg-karte{
  display:flex; flex-direction:column;
  padding-top:clamp(22px, 2.4vw, 32px);
  border-top:2px solid var(--bronze);
}
.erb-weg-marke{
  display:block; font-family:var(--font-marke);
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze-nav); margin-bottom:12px;
}
.erb-weg-karte h3{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.15rem, 1.5vw, 1.4rem); line-height:1.3;
  color:var(--anthracite); margin:0 0 14px;
}
.erb-weg-karte p{margin:0 0 12px; font-size:.9375rem; line-height:1.75; color:var(--grau);}
.erb-weg-karte .erb-liste{columns:1;}
.erb-rechnung{margin:6px 0 14px;}
.erb-rechnung-zeile{
  font-family:var(--font-serif); font-size:1.05rem;
  color:var(--anthracite) !important; margin:0 !important;
}
.erb-rechnung-minus{
  font-size:.75rem !important; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze-nav) !important; margin:6px 0 0 !important;
}
.erb-statement-klein{
  margin-top:auto !important; padding-top:16px;
  border-top:1px solid var(--greige);
  font-family:var(--font-serif); font-style:italic;
  color:var(--anthracite) !important;
}
.erb-verweis{
  margin-top:auto; padding-top:18px;
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-marke); font-size:.6875rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-nav);
  transition:color var(--transition), gap var(--transition);
}
.erb-verweis svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5;}
.erb-verweis:hover{color:var(--bronze-dark); gap:14px;}

/* ---- Freibetraege (6) ---- */
.erb-tabelle-rahmen{
  max-width:780px; background:var(--white);
  border:1px solid var(--greige);
  padding:clamp(28px, 3.2vw, 48px);
}
.erb-tabelle-titel{
  font-family:var(--font-marke); font-weight:400;
  font-size:.8125rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--green); margin:0 0 clamp(18px, 2vw, 26px);
}
.erb-tabelle{width:100%; border-collapse:collapse;}
.erb-tabelle th, .erb-tabelle td{
  padding:15px 0; border-bottom:1px solid var(--greige);
  font-size:.9375rem; line-height:1.5; text-align:left;
}
.erb-tabelle th{font-weight:400; color:var(--anthracite);}
.erb-tabelle td{
  text-align:right; white-space:nowrap;
  font-family:var(--font-serif); font-size:1.05rem; color:var(--green);
}
.erb-tabelle tr:last-child th, .erb-tabelle tr:last-child td{border-bottom:0;}
.erb-tabelle-fuss{
  margin:clamp(18px, 2vw, 26px) 0 0;
  font-size:.8125rem; line-height:1.75; color:var(--grau);
}

/* ---- Zweispalter (7, 8/9) ---- */
.erb-zwei{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(28px, 4vw, 72px);
}
.erb-saeule h3, .erb-frage h2{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.15rem, 1.5vw, 1.4rem); line-height:1.3;
  color:var(--anthracite); margin:0 0 14px;
}
.erb-saeule p, .erb-frage p{margin:0 0 12px; line-height:1.8; color:var(--grau);}
.erb-antwort{
  font-family:var(--font-serif); font-size:clamp(1.3rem, 2vw, 1.7rem);
  color:var(--green) !important; margin:0 0 14px !important;
}
.erb-fussnote{
  font-size:.8125rem; line-height:1.75; color:var(--grau);
  margin:clamp(20px, 2.4vw, 32px) 0 0;
}
.erb-fussnote--mitte{text-align:center; max-width:62ch; margin-inline:auto;}

/* ---- Zehnjahresfrist (10) und Renovieren (12) ---- */
.erb-frist{
  display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:clamp(30px, 4vw, 72px); align-items:start;
}
.erb-frist--schmal{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);}
.erb-frist-text .eyebrow{display:block; margin-bottom:14px;}
.erb-frist-text h2{margin:0 0 14px;}
.erb-frist-text .lede{color:var(--grau); margin:0 0 18px;}
.erb-frist-text p{line-height:1.8; color:var(--grau);}
.erb-beispiel{
  margin:0; background:var(--offwhite);
  padding:clamp(26px, 3vw, 42px);
}
.erb-beispiel figcaption{
  font-family:var(--font-marke); font-size:.6875rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-nav);
  margin-bottom:clamp(18px, 2vw, 26px);
}
.erb-achse{list-style:none; margin:0; padding:0;}
.erb-achse li{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:18px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--greige);
}
.erb-jahr{
  font-family:var(--font-serif); font-size:1.15rem; color:var(--green);
}
.erb-ereignis{font-size:.9375rem; color:var(--grau);}
.erb-ergebnis{
  margin:clamp(18px, 2vw, 26px) 0 0; font-size:.9375rem; line-height:1.75;
  color:var(--anthracite);
}
.erb-ergebnis b{color:var(--green);}
.erb-liste-titel{
  font-family:var(--font-marke); font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-nav);
  margin:0;
}
.erb-statement{
  max-width:52ch; margin:clamp(34px, 4vw, 58px) 0 0;
  font-family:var(--font-serif); font-size:clamp(1.15rem, 1.7vw, 1.45rem);
  line-height:1.45; color:var(--green);
}

/* ---- Akkordeon (13, 15) ---- */
.erb-akkordeon{max-width:900px; border-top:1px solid var(--greige);}
.erb-akkordeon--breit{max-width:1000px;}
.erb-akkordeon .faq-a ul{padding-bottom:28px;}

/* ---- Marktwert (16) ---- */
/* Bild und Text stehen im Inhaltsraster, nicht randlos — und das Bild ist
   etwas schmaler als der Text, damit es den Abschnitt nicht dominiert. */
.erb-marktwert{
  display:grid; grid-template-columns:minmax(0, .88fr) minmax(0, 1fr);
  align-items:center; gap:clamp(28px, 3.6vw, 62px);
  max-width:var(--inhalt, 1280px);
  margin:0 auto;
  padding:0 var(--gutter);
}
.erb-marktwert-bild img{width:100%; height:auto; object-fit:cover; display:block; aspect-ratio:4/3;}
.erb-marktwert-text{padding:0;}
.erb-marktwert-text .eyebrow{display:block; margin-bottom:14px;}
.erb-marktwert-text h2{margin:0 0 18px; text-wrap:balance;}
.erb-marktwert-text p{margin:0 0 14px; line-height:1.8; color:var(--grau); max-width:52ch;}
.erb-marktwert-text .btn{margin-top:clamp(14px, 1.8vw, 24px);}

/* ---- Leistungen (17) ---- */
.erb-leistungen{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1px; background:var(--greige); border:1px solid var(--greige);
}
.erb-leistung{background:var(--white); padding:clamp(24px, 2.8vw, 38px);}
.erb-leistung h3{
  font-family:var(--font-marke); font-weight:400;
  font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); margin:0 0 12px;
}
.erb-leistung p{margin:0; font-size:.9375rem; line-height:1.75; color:var(--grau);}

/* ---- Abschluss (18) ---- */
.erb-abschluss{text-align:center;}
.erb-abschluss h2{max-width:22ch; margin-inline:auto; color:var(--white);}
.erb-abschluss .lede{max-width:62ch; margin-inline:auto; color:#DCD6CC;}
.erb-gross{
  font-family:var(--font-serif); font-size:clamp(1.4rem, 2.4vw, 2rem);
  color:var(--bronze-hell); margin:clamp(26px, 3vw, 40px) 0;
}
.erb-abschluss .hero-actions{justify-content:center; margin-top:clamp(26px, 3vw, 40px);}
.erb-signatur{
  margin:clamp(34px, 4vw, 56px) 0 0;
  font-family:var(--font-marke); font-size:.8125rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-hell);
}
.erb-signatur span{
  display:block; margin-top:10px; font-family:var(--font-sans);
  font-size:.8125rem; letter-spacing:.02em; text-transform:none; color:#BFB8AC;
}

/* ---- Rechtlicher Hinweis ---- */
.erb-rechtliches{padding:clamp(34px, 4vw, 56px) 0;}
.erb-rechtliches p{
  max-width:78ch; margin:0 auto; text-align:center;
  font-size:.8125rem; line-height:1.8; color:var(--grau);
}

/* ---- Schmale Fenster ---- */
@media (max-width:900px){
  .erb-felder, .erb-felder--vier{grid-template-columns:1fr;}
  .erb-wege, .erb-leistungen{grid-template-columns:1fr;}
  .erb-zwei, .erb-frist, .erb-frist--schmal, .erb-aktuell{grid-template-columns:1fr;}
  .erb-marktwert{grid-template-columns:1fr; gap:clamp(22px, 4vw, 34px);}
  .erb-marktwert-bild img{aspect-ratio:3/2;}
  .erb-etappe{grid-template-columns:1fr; gap:12px;}
  .erb-liste, .erb-liste--zwei{columns:1;}
  .erb-knoepfe .btn{width:100%; text-align:center;}
  .erb-abschluss .hero-actions .btn{width:100%;}
}


/* --------------------------------------------------------------------------
   Breites Bildband mit Ueberschrift und Fliesstext darunter.
   Verwendet auf der Erbseite fuer den Abschnitt zu Erbengemeinschaften.
   -------------------------------------------------------------------------- */
.erb-bildband{
  margin:0 0 clamp(26px, 3vw, 42px);
  overflow:hidden; background:var(--greige);
}
.erb-bildband img{
  width:100%; height:auto; display:block;
  aspect-ratio:21/9; object-fit:cover; object-position:center;
}
.erb-bildtext{max-width:none;}
.erb-bildtext h2{margin:0 0 clamp(14px, 1.6vw, 20px);}
.erb-bildtext p{
  font-size:1.0625rem; line-height:1.85; color:var(--anthracite); margin:0; max-width:none;
}
@media (max-width:700px){
  .erb-bildband img{aspect-ratio:16/10;}
}


/* --------------------------------------------------------------------------
   Zeitachse ohne Bilder: dieselbe Achse wie auf der Verkaufsseite, die Texte
   stehen abwechselnd links und rechts vom nummerierten Kreis.
   Verwendet auf der Erbseite fuer die Begleitleistungen.
   -------------------------------------------------------------------------- */
.zeitachse--text{--za-luecke:clamp(52px, 5vw, 78px);}
.za-schritt--text .za-text{grid-row:1; max-width:420px;}
.za-schritt--text .za-text h3{font-size:1.2rem; margin:0 0 12px;}
.za-schritt--text .za-text p{margin:0 0 18px;}
.za-schritt--text .za-text p:last-child{margin-bottom:0;}
.za-schritt--text.za-schritt--rechts .za-text{grid-column:3;}
.za-schritt--text.za-schritt--links  .za-text{grid-column:1; justify-self:end; text-align:right;}
.za-schritt--text.za-schritt--links .za-kennung{display:block;}
/* Auf der linken Seite laufen Zusage und Verweis rechtsbuendig mit. */
.za-schritt--text.za-schritt--links .za-zusage::before{left:auto; right:0;}
.za-schritt--text.za-schritt--links .za-link{align-self:flex-end;}
.za-schritt--text .za-text{display:flex; flex-direction:column; align-items:flex-start;}
.za-schritt--text.za-schritt--links .za-text{align-items:flex-end;}
.za-schritt--text .za-zusage{align-self:stretch; padding-top:26px;}

/* Statt eines Fotos steht auf der Gegenseite ein feines Zeichen in Bronze. */
.za-bild--zeichen{
  grid-row:1; margin:0; background:none; border:0;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:6px;
}
.za-bild--zeichen svg{
  width:clamp(58px, 6vw, 82px); height:auto;
  fill:none; stroke:var(--bronze); stroke-width:1.15;
  stroke-linecap:round; stroke-linejoin:round; opacity:.9;
}
.za-schritt--text.za-schritt--rechts .za-bild--zeichen{grid-column:1;}
.za-schritt--text.za-schritt--links  .za-bild--zeichen{grid-column:3;}

@media (max-width:700px){
  .za-schritt--text.za-schritt--rechts .za-text,
  .za-schritt--text.za-schritt--links  .za-text{
    grid-column:2; grid-row:2; justify-self:start; text-align:left; max-width:none;
  }
  .za-schritt--text.za-schritt--rechts .za-bild--zeichen,
  .za-schritt--text.za-schritt--links  .za-bild--zeichen{
    grid-column:2; grid-row:1; justify-content:flex-start; margin-bottom:14px;
  }
}


/* ==========================================================================
   Fahrplan der Erbseite als gefuehrter Ablauf
   Links ein Ring mit sechs Punkten, in der Mitte ein wechselndes Zeichen,
   rechts der Text des aktuellen Schritts. Der Bronzeknopf fuehrt weiter.
   ========================================================================== */
.fp-buehne{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(30px, 5vw, 78px); align-items:center;
  margin-top:clamp(30px, 4vw, 56px);
}
.fp-kreis{position:relative; width:min(100%, 310px); aspect-ratio:1; margin:0 auto;}
.fp-ring{width:100%; height:100%; display:block; overflow:visible;}
.fp-bahn{fill:none; stroke:var(--bronze); stroke-width:1; opacity:.3;}
.fp-fortschritt{fill:none; stroke:var(--bronze); stroke-width:1.7; stroke-linecap:round;}
.fp-punkt{
  fill:var(--white); stroke:var(--bronze); stroke-width:1; cursor:pointer;
  transform-box:fill-box; transform-origin:center;
  transition:fill 280ms ease, transform 280ms ease;
}
.fp-punkt.erreicht{fill:var(--bronze);}
.fp-punkt.aktiv{fill:var(--bronze); transform:scale(1.35);}
.fp-marke{
  font-family:var(--font-sans); font-size:11px; letter-spacing:.12em;
  fill:var(--grau); cursor:pointer; transition:fill 280ms ease;
}
.fp-marke.aktiv{fill:var(--bronze-dark);}
.fp-symbolfeld{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;}
.fp-symbol{
  grid-area:1 / 1; width:clamp(52px, 5.8vw, 72px); height:auto;
  fill:none; stroke:var(--bronze); stroke-width:.95;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:scale(.88);
  transition:opacity 340ms ease, transform 340ms ease;
}
.fp-symbol.aktiv{opacity:1; transform:none;}

.fp-inhalt{min-width:0;}
.fp-tafel[hidden]{display:none;}
.fp-kennung{
  font-family:var(--font-serif); font-size:clamp(1.2rem, 1.8vw, 1.55rem);
  line-height:1.3; margin:0 0 12px; color:var(--anthracite);
}
.fp-kennung-nr{color:var(--bronze-dark); margin-right:.5em;}
.fp-unter{font-weight:600; font-size:.9375rem; line-height:1.6; color:var(--green); margin:0 0 14px;}
.fp-text{font-size:.9375rem; line-height:1.8; color:var(--grau); margin:0 0 18px; max-width:54ch;}
.fp-tafel .erb-liste{margin-top:0;}

.fp-steuerung{
  display:flex; align-items:center; justify-content:flex-end; gap:16px;
  margin-top:clamp(22px, 3vw, 34px);
}
.fp-zurueck{
  width:44px; height:44px; flex:none; border:1px solid var(--bronze);
  background:none; border-radius:50%; display:grid; place-items:center;
  cursor:pointer; color:var(--bronze-dark);
  transition:background 240ms ease, color 240ms ease;
}
.fp-zurueck svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.fp-zurueck:hover{background:var(--bronze); color:var(--white);}
.fp-zurueck[hidden], .fp-weiter[hidden], .fp-abschluss[hidden]{display:none;}
.fp-weiter, .fp-abschluss{display:inline-flex; align-items:center; gap:12px;}
.fp-weiter svg, .fp-abschluss svg{
  width:17px; height:17px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
@media (max-width:860px){
  .fp-buehne{grid-template-columns:1fr; gap:clamp(24px, 5vw, 40px);}
  .fp-kreis{width:min(100%, 240px);}
  .fp-steuerung{justify-content:flex-start; flex-wrap:wrap;}
}

/* ==========================================================================
   Drei Wege als Ring (Aufbau wie der Rundum-Service, nur mit drei Feldern)
   ========================================================================== */
.erb-kopf--mitte{text-align:center; margin-left:auto; margin-right:auto;}
.we-raster{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px, 3.6vw, 62px); align-items:center;
  margin-top:clamp(46px, 5vw, 76px);
}
.we-kreis{
  --kreis:min(100%, 268px);
  --leiter:clamp(18px, 2vw, 30px);
  position:relative; width:var(--kreis); aspect-ratio:1; margin:0 auto;
}
.we-ring{width:100%; height:100%; display:block;}
.we-bogen{
  fill:none; stroke:var(--bronze); stroke-width:17;
  stroke-dasharray:151.55 351.1;
  transform-box:fill-box; transform-origin:center;
  opacity:.3; cursor:pointer;
  transition:stroke 300ms ease, stroke-width 300ms ease, opacity 300ms ease;
}
.we-kreis[data-aktiv="1"] .we-bogen[data-nr="1"],
.we-kreis[data-aktiv="2"] .we-bogen[data-nr="2"],
.we-kreis[data-aktiv="3"] .we-bogen[data-nr="3"]{opacity:1; stroke:var(--green); stroke-width:21;}
.we-kern{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  font-family:var(--font-marke); line-height:1.5;
  font-size:clamp(.75rem, 1.2vw, .95rem); letter-spacing:.16em;
  text-transform:uppercase; color:var(--green); pointer-events:none;
}
.we-marke{
  position:absolute; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-sans); font-size:clamp(.6875rem, .9vw, .8125rem);
  font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--grau); white-space:nowrap; transition:color 260ms ease;
}
.we-marke:hover, .we-marke[aria-current]{color:var(--green);}
.we-marke--1{left:50%; top:0; transform:translate(-50%, calc(-100% - 15px));}
.we-marke--1::after{content:''; position:absolute; left:50%; bottom:-13px; width:1px; height:11px; background:var(--bronze);}
.we-marke--2{
  left:81.5%; top:68.2%; transform:translateY(-50%);
  padding-left:calc(var(--leiter) + 10px);
}
.we-marke--2::before{content:''; position:absolute; left:6px; top:50%; width:var(--leiter); height:1px; background:var(--bronze);}
.we-marke--3{
  right:81.5%; top:68.2%; transform:translateY(-50%);
  padding-right:calc(var(--leiter) + 10px); text-align:right;
}
.we-marke--3::before{content:''; position:absolute; right:6px; top:50%; width:var(--leiter); height:1px; background:var(--bronze);}

.we-tafeln{min-width:0;}
.we-tafel[hidden]{display:none;}
.we-tafel h3{
  font-family:var(--font-marke); font-weight:400;
  font-size:clamp(.8125rem, 1vw, .9375rem); letter-spacing:.16em;
  text-transform:uppercase; color:var(--green);
  margin:0 0 clamp(18px, 2vw, 26px); padding-bottom:13px; position:relative;
}
.we-tafel h3::after{content:''; position:absolute; left:0; bottom:0; width:40px; height:1px; background:var(--bronze);}
.we-tafel > p{font-size:.9375rem; line-height:1.75; color:var(--grau); max-width:48ch;}
@media (max-width:900px){
  .we-raster{grid-template-columns:1fr; gap:clamp(46px, 6vw, 64px);}
  .we-kreis{--kreis:min(100%, 250px);}
}

/* ==========================================================================
   Aufklappbare Restfragen im FAQ
   ========================================================================== */
.faq-mehr[hidden]{display:none;}
.faq-mehr-schalter{
  display:flex; align-items:center; gap:10px;
  margin:clamp(22px, 2.6vw, 34px) auto 0;
  background:none; border:0; border-bottom:1px solid var(--bronze);
  padding:9px 2px; cursor:pointer;
  font-family:var(--font-sans); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--green);
  transition:color 240ms ease;
}
.faq-mehr-schalter:hover{color:var(--bronze-dark);}
.faq-mehr-schalter svg{
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; transition:transform 260ms ease;
}
.faq-mehr-schalter[aria-expanded="true"] svg{transform:rotate(180deg);}


/* Wechselnde Tafeln (Fahrplan, Wege-Ring) blenden beim Wechsel weich auf. */
@media (prefers-reduced-motion: no-preference){
  .fp-tafel:not([hidden]),
  .we-tafel:not([hidden]){animation:tafelAuf 620ms cubic-bezier(.22,.61,.36,1) both;}
}
@keyframes tafelAuf{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:none;}
}


/* "Aktuell"-Spalten innerhalb des Gut-zu-wissen-Bandes: zwei Spalten,
   linksbuendig, mittig begrenzt; darunter der Stand-Vermerk. */
.erb-hinweis.erb-hinweis--gross .erb-aktuell--band{
  max-width:88ch; margin:clamp(22px, 2.4vw, 32px) auto 0;
  text-align:left;
}
.erb-aktuell--band p{font-size:.9375rem;}
.erb-hinweis-stand{
  font-size:.75rem !important; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grau) !important; margin:14px auto 0 !important; text-align:center;
}
.erb-hinweis-stand--links{margin:14px 0 0 !important; text-align:left;}
@media (max-width:700px){
  .erb-hinweis.erb-hinweis--gross .erb-aktuell--band{grid-template-columns:1fr;}
}


/* --------------------------------------------------------------------------
   Erbseite: engerer, gleichmaessiger Sektionsrhythmus. Die Abschnitte folgen
   dichter aufeinander als im Standardraster (88 px), damit zwischen den
   Bloecken keine Leerfelder entstehen.
   -------------------------------------------------------------------------- */
.seite-erbe section{padding:clamp(48px, 5vw, 68px) 0;}
.seite-erbe .intro-block{padding-top:clamp(40px, 4.5vw, 64px);}
.seite-erbe .ablauf-kopf{margin-bottom:clamp(44px, 5vw, 68px);}
.seite-erbe .erb-kopf{margin-bottom:clamp(30px, 3.4vw, 48px);}
.seite-erbe .section-head{margin-bottom:clamp(30px, 3.4vw, 48px);}
/* Das FAQ folgt sonst zu dicht auf die Unterlagen. */
.seite-erbe #faq{padding-top:clamp(76px, 8vw, 112px);}


/* --------------------------------------------------------------------------
   Unterlagen-Abschnitt der Erbseite als dunkles Band im Ton der uebrigen
   gruenen Baender (Referenz: Abschlussband der Verkaufsseite). Das Akkordeon
   laeuft mit feinen hellen Linien auf dem dunklen Grund.
   -------------------------------------------------------------------------- */
.erb-unterlagen{background:var(--green-tief); color:#EDE8E0;}
.eyebrow--hell{color:var(--bronze-hell);}
.erb-unterlagen .erb-kopf h2{color:#FFFFFF;}
.erb-unterlagen .erb-akkordeon{border-top:1px solid rgba(237,232,224,.25);}
.erb-unterlagen .faq-item{border-bottom:1px solid rgba(237,232,224,.25);}
.erb-unterlagen .faq-q{color:#FFFFFF;}
.erb-unterlagen .faq-q .icon{color:var(--bronze-hell);}
.erb-unterlagen .faq-q:hover{color:var(--bronze-hell);}
.erb-unterlagen .erb-liste li{color:#DED9D1;}
.erb-unterlagen .erb-liste li::before{background:var(--bronze-hell);}
.erb-unterlagen .erb-fussnote,
.erb-unterlagen .erb-fussnote--mitte{color:#C9C2B8;}


/* Die Unterlagen-Knoepfe im schlichten Bandstil (Buttons statt Links). */
button.band-item{background:none; border:0; padding:0; cursor:pointer; font:inherit;}
button.band-item:hover .band-label{color:var(--anthracite);}
button.band-item:hover svg{stroke:var(--bronze-dark);}
.service-band .section-head{margin-bottom:clamp(38px, 4.4vw, 60px);}


/* Unterlagen-Band der Erbseite: Kopf mittig, darunter zwei Spalten,
   getrennt durch einen feinen hellen Strich. */
.erb-unterlagen .section-head.center h2{color:#FFFFFF;}
.eu-raster{
  display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  gap:clamp(30px, 4vw, 70px); align-items:start;
  max-width:1120px; margin:0 auto;
}
.eu-raster::before{
  content:''; grid-column:2; grid-row:1;
  width:1px; align-self:stretch; background:rgba(237,232,224,.28);
}
.eu-spalte:first-child{grid-column:1; grid-row:1;}
.eu-spalte:last-child{grid-column:3; grid-row:1;}
.eu-spalte h3{
  font-family:var(--font-marke); font-weight:400;
  font-size:clamp(.8125rem, 1vw, .9375rem); letter-spacing:.16em;
  text-transform:uppercase; color:var(--bronze-hell);
  margin:0 0 clamp(18px, 2vw, 26px); padding-bottom:13px; position:relative;
}
.eu-spalte h3::after{content:''; position:absolute; left:0; bottom:0; width:40px; height:1px; background:var(--bronze-hell);}
.erb-unterlagen .erb-fussnote--mitte{margin-top:clamp(28px, 3.2vw, 44px);}
@media (max-width:800px){
  .eu-raster{grid-template-columns:1fr; gap:34px;}
  .eu-raster::before{display:none;}
  .eu-spalte:first-child, .eu-spalte:last-child{grid-column:1; grid-row:auto;}
}

/* Die Unterlagen-Knoepfe der Verkaufsseite exakt im Bandstil der Startseite:
   die .ul-download-Regeln (kleine Zeichen, Unterstreichung, Versalien)
   gelten dort nicht. */
.band-item.ul-download{
  display:flex; flex-direction:column; align-items:center;
  border-bottom:0; padding:0; gap:0;
  letter-spacing:normal; text-transform:none; font-size:inherit;
}
.band-item.ul-download svg{
  width:46px; height:46px; margin-bottom:22px;
  stroke:var(--bronze); stroke-width:1.4;
}
.band-item.ul-download:hover{gap:0; color:var(--bronze-nav);}
.band-item.ul-download:hover svg{stroke:var(--bronze-dark);}


/* --------------------------------------------------------------------------
   Standortkarte auf der Unternehmensseite: dieselbe Optik wie die Objektkarte
   auf der Angebotsseite (Positron-Kacheln, entsaettigt, Bronze-Nadeln).
   -------------------------------------------------------------------------- */
.standort-karte{
  position:relative;
  height:clamp(460px, 58vh, 680px);
  border:1px solid var(--greige);
  overflow:hidden;
}
/* Auf Bildschirmgroesse: die Karte legt sich ueber die ganze Seite */
.standort-karte.karte-vollbild{
  position:fixed; inset:0; z-index:300;
  height:100%; width:100%; border:0;
}
body.karte-offen{overflow:hidden;}

.karte-gross{
  position:absolute; top:14px; right:14px; z-index:410;
  width:42px; height:42px; padding:0;
  display:grid; place-items:center;
  background:#FFFFFF; border:0; border-radius:2px; cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(17,17,17,.34);
  color:var(--bronze-dark);
  transition:background 220ms ease, color 220ms ease;
}
.karte-gross svg{
  width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.karte-gross .kg-zu{display:none;}
.karte-gross[aria-pressed="true"] .kg-auf{display:none;}
.karte-gross[aria-pressed="true"] .kg-zu{display:block;}
.karte-gross:hover{background:var(--bronze); color:#FFFFFF;}
.karte-gross:focus-visible{outline:2px solid var(--bronze); outline-offset:3px;}
#standortKarte{
  position:absolute; inset:0; width:100%; height:100%; background:#F0F0F0;
  isolation:isolate; z-index:0;
}
#standortKarte .leaflet-tile-pane{filter:grayscale(1) brightness(.96);}

/* Ortsname neben der Nadel — bei Buendeln alle Namen untereinander */
.vt-marke{
  background:#FFFFFF !important;
  border:0 !important;
  box-shadow:0 6px 18px -8px rgba(17,17,17,.34) !important;
  border-radius:2px !important;
  padding:8px 13px !important;
  font-family:var(--font-sans); color:var(--anthracite) !important;
  white-space:nowrap;
}
.vt-marke::before{display:none !important;}
.vm-ort{
  display:block; font-size:.8125rem; font-weight:600;
  line-height:1.55; letter-spacing:.01em; color:var(--anthracite);
}
.vm-gruppe{
  display:block; font-size:.625rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-nav);
  margin-bottom:5px; padding-bottom:5px;
  border-bottom:1px solid var(--greige);
}

/* Sprechblase eines Ortes */
.map-ort{display:block; padding:16px 18px 18px; text-align:left;}
.map-ort .mo-gruppe{
  display:block; font-family:var(--font-sans); font-size:.6875rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-nav);
  margin-bottom:7px;
}
.map-ort h4{
  font-family:var(--font-serif); font-size:1.05rem; line-height:1.3;
  color:var(--anthracite); margin:0 0 10px;
}
.map-ort .mo-mehr{
  font-family:var(--font-sans); font-size:.75rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--green);
  border-bottom:1px solid var(--bronze); padding-bottom:3px;
}
.map-ort:hover .mo-mehr{color:var(--bronze-dark);}

.sk-fern{
  margin:clamp(20px, 2.4vw, 30px) 0 0;
  font-size:.9375rem; line-height:1.7; color:var(--grau);
}
.sk-fern b{font-weight:600; color:var(--anthracite);}

/* Hinweis auf der Angebotsseite, wenn zum gesuchten Ort nichts vorliegt */
.ort-hinweis{
  max-width:70ch; margin:0 0 clamp(20px, 2.4vw, 30px);
  font-size:.9375rem; line-height:1.7; color:var(--grau);
  padding-left:14px; border-left:2px solid var(--bronze);
}


/* --------------------------------------------------------------------------
   Standort-Unterseite
   -------------------------------------------------------------------------- */
.st-hero{min-height:clamp(280px, 42vh, 460px);}
.st-leer{
  max-width:62ch; font-size:.9375rem; line-height:1.8; color:var(--grau);
  padding-left:14px; border-left:2px solid var(--bronze);
}
.st-leer a{color:var(--green); border-bottom:1px solid var(--bronze); padding-bottom:2px;}
.st-leer a:hover{color:var(--bronze-dark);}

.st-nachbarn{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1px; background:var(--greige); border:1px solid var(--greige);
}
.st-nachbar{
  display:block; background:var(--white);
  padding:clamp(20px, 2.4vw, 30px);
  transition:background 240ms ease;
}
.st-nachbar:hover{background:var(--offwhite);}
.stn-gruppe{
  display:block; font-family:var(--font-sans); font-size:.625rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-nav);
  margin-bottom:8px;
}
.stn-name{
  display:block; font-family:var(--font-serif);
  font-size:1.05rem; line-height:1.3; color:var(--anthracite);
}
.st-nachbar:hover .stn-name{color:var(--green);}
@media (max-width:820px){ .st-nachbarn{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:520px){ .st-nachbarn{grid-template-columns:1fr;} }


/* ---- "Ihr Immobilienmakler in <Ort>" auf der Standortseite ---- */
.st-makler .stm-titel{
  /* Gleiche Groesse wie die uebrigen Abschnittsueberschriften der Seite */
  font-size:var(--titelgroesse); line-height:1.2;
  margin:0 0 clamp(30px, 3.6vw, 52px); color:var(--anthracite);
}
/* Der Ortsname steht wie der uebrige Titel — kein Gold, keine Kursive. */
.st-makler .stm-titel em{font-style:normal; color:inherit;}
.stm-raster{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px, 4vw, 72px); align-items:start;
}
.stm-links p, .stm-rechts p{
  font-size:.9375rem; line-height:1.85; color:var(--anthracite);
  margin:0 0 1.4em; text-align:justify; hyphens:auto;
}
.stm-links p:last-child, .stm-rechts p:last-child{margin-bottom:0;}
.stm-bild{margin:0 0 clamp(22px, 2.6vw, 34px); overflow:hidden; background:var(--greige);}
.stm-bild img{width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover;}
@media (max-width:820px){
  .stm-raster{grid-template-columns:1fr; gap:clamp(24px, 4vw, 36px);}
  .stm-links p, .stm-rechts p{text-align:left;}
}

/* ---------------------------------------------------------------------------
   Standortseite: Restaurantempfehlung
   Aufbau wie der Abschnitt "Unsere Standorte": mittige Zeile darueber, dann
   Bild links (55 Prozent) und die Angaben rechts. Klassen .st-raster /
   .st-bild / .st-angaben werden von dort mitbenutzt.
   ------------------------------------------------------------------------- */
.st-gastro .stg-titel{
  margin:.15em 0 .6em; font-size:clamp(1.35rem, 2.1vw, 1.85rem);
  line-height:1.24; color:var(--anthracite); text-wrap:balance;
}
.st-gastro .stg-titel[hidden]{display:none;}
.st-gastro .stg-text{margin:0; max-width:46ch; line-height:1.78;}
.st-gastro .stg-note{
  margin:24px 0 0; max-width:44ch;
  font-size:.875rem; line-height:1.65; color:var(--taupe);
  border-left:2px solid var(--greige); padding-left:14px;
}
.st-gastro .stg-lokal{
  margin:24px 0 0; max-width:44ch;
  border-left:2px solid var(--bronze); padding-left:14px; line-height:1.7;
}
.st-gastro .stg-lokal strong{
  display:block; font-family:var(--serif, Georgia, serif);
  font-size:1.08rem; font-weight:600; margin-bottom:.2em;
}
}

/* ---------------------------------------------------------------------------
   AGB und rechtliche Hinweise
   Reine Lesetypografie: ein Textblock, schmales Satzmass, klare Zwischen-
   ueberschriften. Der noch offene AGB-Teil ist als Kasten markiert.
   ------------------------------------------------------------------------- */
.seite-recht .intro-block .breadcrumb{margin-bottom:18px;}
.seite-recht .intro-block h1{max-width:22ch;}
.seite-recht .intro-block .erb-lede{max-width:60ch; margin-top:18px;}
.recht-block{padding:clamp(40px,4.6vw,72px) 0 clamp(56px,6vw,96px);}
.recht-block h2{
  font-size:clamp(1.25rem,1.9vw,1.55rem); line-height:1.25;
  margin:clamp(38px,4vw,58px) 0 .6em; color:var(--green);
}
.recht-block h2:first-of-type{margin-top:0;}
.recht-block p{max-width:62ch; line-height:1.8; color:var(--anthracite);}
.recht-block .rb-lede{margin-bottom:clamp(24px,2.6vw,34px);}
.rb-platzhalter{
  background:var(--offwhite,#F7F6F3);
  border-left:3px solid var(--bronze);
  padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,34px);
}
.rb-platzhalter h2{margin-top:0;}
.rb-platzhalter p{margin-bottom:0;}
.rb-liste{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:clamp(24px,3vw,40px);
}
.rb-punkt h3{
  font-family:var(--font-marke); font-weight:400;
  font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze-nav); margin:0 0 12px; padding-bottom:10px;
  border-bottom:1px solid var(--greige);
}
.rb-punkt p{margin:0; font-size:.9375rem; max-width:46ch;}
/* Die Rechtsseite hat kein Titelbild — der Einstieg braucht deshalb selbst
   Abstand zur Kopfleiste. */
.intro-block--ohne-bild{padding-top:clamp(48px, 6vw, 92px);}

/* ---------------------------------------------------------------------------
   Objektseite: Video
   Der Rahmen ist immer im Querformat. Hochkant gedrehte Aufnahmen stehen
   mittig darin; dahinter liegt dasselbe Bild unscharf und abgedunkelt, damit
   die freien Seiten nicht als schwarze Balken wirken. Querformatige
   Aufnahmen fuellen den Rahmen von selbst.
   ------------------------------------------------------------------------- */
.od-video{margin-top:clamp(34px, 4vw, 56px);}
.od-video h3{
  font-family:var(--font-marke); font-weight:400;
  font-size:clamp(.8125rem, 1vw, .9375rem); letter-spacing:.16em;
  text-transform:uppercase; color:var(--green);
  margin:0 0 clamp(16px, 1.8vw, 22px);
}
.ov-rahmen{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:16/9; background:#111; isolation:isolate;
}
.ov-grund{
  position:absolute; inset:-8%; z-index:0;
  background-size:cover; background-position:center;
  filter:blur(28px) brightness(.55) saturate(.9);
  transform:scale(1.06);
}
.ov-film{
  position:relative; z-index:1; display:block;
  height:100%; width:auto; max-width:100%; margin:0 auto;
  background:#111;
}
.ov-zeile{
  margin:12px 0 0; font-size:.8125rem; line-height:1.6; color:var(--taupe);
}
@media (max-width:640px){
  /* Auf dem Telefon darf die Aufnahme die volle Breite nutzen; ein
     Querformat-Rahmen waere dort unnoetig klein. */
  .ov-rahmen{aspect-ratio:auto; max-height:78vh;}
  .ov-grund{display:none;}
  .ov-film{height:auto; width:100%; max-height:78vh;}
}

/* ---------------------------------------------------------------------------
   Rundum-Ring mit acht Abschnitten (Grundstuecksentwicklung)
   Gleiches Bauteil wie der Rundum-Service, nur feiner unterteilt. Der Bogen
   eines Achtels misst 502,65 / 8 = 62,83; sichtbar bleiben davon 51, die
   Luecke zwischen zwei Boegen ist damit so gross wie beim Sechser-Ring.
   Die Wortpositionen liegen auf Radius 0,4: 45 Grad -> x/y 0,7828 | 0,2172,
   0 Grad -> x 0,90. Die schraegen Woerter bekommen den Unterschied der beiden
   x-Werte (11,72 % der Ringbreite) als zusaetzliche Leiterlaenge, damit alle
   Woerter dieselbe Fluchtlinie halten.
   ------------------------------------------------------------------------- */
.rundum--hell{background:var(--white);}

.rs-kreis--acht .rs-bogen{stroke-dasharray:51 451.65;}
.rs-kreis--acht[data-aktiv="7"] .rs-bogen[data-nr="7"],
.rs-kreis--acht[data-aktiv="8"] .rs-bogen[data-nr="8"]{stroke:var(--green); stroke-width:21;}

.rs-kreis--acht .rs-marke--2{
  left:78.28%; right:auto; top:21.72%; text-align:left;
  transform:translateY(-100%); border-bottom:1px solid var(--bronze);
  padding:0 0 9px; padding-left:calc(var(--leiter) + var(--kreis) * .1172);
}
.rs-kreis--acht .rs-marke--3{
  left:90%; right:auto; top:50%; text-align:left;
  transform:translateY(-100%); border-bottom:1px solid var(--bronze);
  padding:0 0 9px; padding-left:var(--leiter);
}
.rs-kreis--acht .rs-marke--4{
  left:78.28%; right:auto; top:78.28%; text-align:left;
  transform:translateY(-100%); border-bottom:1px solid var(--bronze);
  padding:0 0 9px; padding-left:calc(var(--leiter) + var(--kreis) * .1172);
}
.rs-kreis--acht .rs-marke--5{
  left:50%; right:auto; top:135%; text-align:center;
  transform:translate(-50%, 0); border-bottom:0; padding:0;
}
.rs-kreis--acht .rs-marke--6{
  right:78.28%; left:auto; top:78.28%; text-align:right;
  transform:translateY(-100%); border-bottom:1px solid var(--bronze);
  padding:0 0 9px; padding-right:calc(var(--leiter) + var(--kreis) * .1172);
}
.rs-kreis--acht .rs-marke--7{
  right:90%; left:auto; top:50%; text-align:right;
  transform:translateY(-100%); border-bottom:1px solid var(--bronze);
  padding:0 0 9px; padding-right:var(--leiter);
}
.rs-kreis--acht .rs-marke--8{
  right:78.28%; left:auto; top:21.72%; text-align:right;
  transform:translateY(-100%); border-bottom:1px solid var(--bronze);
  padding:0 0 9px; padding-right:calc(var(--leiter) + var(--kreis) * .1172);
}

/* Die Tafel setzt auf der Hoehe ihres Wortes an. Abstaende zum obersten Wort
   bei einem Ring von 330 px: 01 oben, 02/08 +178, 03/07 +272, 04/06 +365,
   05 +593. */
.rs-raster--acht[data-lage="oben"] .rs-tafeln{padding-top:calc(clamp(40px, 8.5vw, 150px) + 178px);}
.rs-raster--acht[data-lage="mitte"] .rs-tafeln{padding-top:calc(clamp(40px, 8.5vw, 150px) + 272px);}
.rs-raster--acht[data-lage="unten"] .rs-tafeln{padding-top:calc(clamp(40px, 8.5vw, 150px) + 365px);}
.rs-raster--acht[data-lage="fuss"] .rs-tafeln{padding-top:calc(clamp(40px, 8.5vw, 150px) + 593px);}

@media (max-width:1500px){
  /* Untereinander: der Ring oben, die Tafel mittig darunter */
  .rs-raster--acht[data-lage="oben"] .rs-tafeln,
  .rs-raster--acht[data-lage="mitte"] .rs-tafeln,
  .rs-raster--acht[data-lage="unten"] .rs-tafeln,
  .rs-raster--acht[data-lage="fuss"] .rs-tafeln{padding-top:0;}
}

@media (max-width:760px){
  /* Auf schmalen Fenstern stehen die acht Bereiche als Reihe unter dem Kreis */
  .rs-kreis--acht .rs-marke{
    position:static; left:auto; right:auto; top:auto;
    transform:none; display:inline-block;
    padding:0 0 6px; text-align:center;
    border-bottom:1px solid var(--bronze);
  }
}

/* ---------------------------------------------------------------------------
   Gruener Balken auf der Grundstuecksseite: Leitsatz ueber den Spalten,
   zwei Nachsaetze darunter. Der erste Nachsatz ist die Positionierung und
   steht deshalb heller und etwas groesser als der zweite.
   ------------------------------------------------------------------------- */
.gutachten--text .gu-leitsatz{
  font-family:var(--font-serif);
  font-size:clamp(1.25rem, 2vw, 1.75rem); line-height:1.35;
  color:var(--white); text-wrap:balance;
  max-width:30ch; margin:0 auto clamp(30px, 3.2vw, 46px);
}
.gutachten--text .gu-nachsatz{
  max-width:66ch; margin:clamp(26px, 2.8vw, 38px) auto 0;
  font-size:.9375rem; line-height:1.7; color:var(--greige); text-align:left;
}
.gutachten--text .gu-nachsatz--stark{
  color:var(--offwhite); font-size:1rem; text-align:center;
  max-width:66ch;
  padding-top:clamp(26px, 2.8vw, 38px);
  border-top:1px solid rgba(255,255,255,.16);
}
@media (max-width:620px){
  .gutachten--text .gu-leitsatz{max-width:none;}
  .gutachten--text .gu-nachsatz,
  .gutachten--text .gu-nachsatz--stark{text-align:left;}
}