/* ============================================================
   Müller Wohnimmobilien — Theme-Stylesheet
   Marken-Korsett: Navy #001A28 · Gold #D9C57E→#BEA95B→#AF9123
   Creme #F0EEE6 · Grau #5E5E5E · Plus Jakarta Sans · Radius 26px
   ============================================================ */

/* ---------- Fonts (lokal, SIL OFL) ---------- */
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/PlusJakartaSans-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/PlusJakartaSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/PlusJakartaSans-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
	--navy: #001A28;
	--navy-soft: #06283A;
	--gold: #BEA95B;
	--gold-hell: #D9C57E;
	--gold-dunkel: #AF9123;
	--gold-grad: linear-gradient(105deg, #D9C57E 0%, #BEA95B 48%, #AF9123 100%);
	--creme: #F0EEE6;
	--creme-hell: #F6F4EC;
	--creme-dunkel: #ECE8DB;
	--grau: #5E5E5E;
	--grau-hell: #9AA3A8;
	--linie: rgba(0, 26, 40, 0.10);
	--weiss: #FFFFFF;
	--gruen: #1E7F4F;

	--radius: 26px;
	--radius-s: 14px;
	--radius-xs: 10px;
	--schatten: 0 10px 34px rgba(0, 26, 40, 0.08);
	--schatten-hover: 0 16px 44px rgba(0, 26, 40, 0.14);

	--font: 'Plus Jakarta Sans', 'Lato', system-ui, sans-serif;
	--maxw: 1200px;
	--sektion-y: clamp(44px, 4.4vw, 68px);
	--uebergang: 0.22s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Natives Scrolling (kein JS-Smoothing, siehe main.js). scroll-behavior gilt nur
   für Anker-Sprünge; scroll-padding sorgt dafür, dass der sticky Header das Ziel
   nicht überdeckt. */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	font-family: var(--font);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.65;
	color: var(--grau);
	background: var(--weiss);
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.15; margin: 0 0 0.5em; font-weight: 800; }
h1 { font-size: clamp(40px, 5vw, 62px); letter-spacing: -0.02em; }
h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.015em; }
h3 { font-size: clamp(19px, 1.6vw, 22px); font-weight: 700; }
p { margin: 0 0 1em; }

.mwi-container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.mwi-sektion { padding: var(--sektion-y) 0; }
.mwi-sektion--creme { background: var(--creme-hell); }
.mwi-sektion--navy { background: var(--navy); }
.mwi-sektion--navy h1, .mwi-sektion--navy h2, .mwi-sektion--navy h3 { color: var(--weiss); }
.mwi-sektion--navy p { color: rgba(255, 255, 255, 0.78); }

/* Akzentwort in Headlines: Gold-Verlauf, kursiv */
.akzent {
	font-style: italic;
	background: var(--gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Kicker über H2: klein, gesperrt, gold, optional mit Linie */
.kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold-dunkel);
	margin-bottom: 14px;
}
.kicker::before { content: ''; width: 26px; height: 2px; background: var(--gold-grad); border-radius: 2px; }
.kicker--zentriert::after { content: ''; width: 26px; height: 2px; background: var(--gold-grad); border-radius: 2px; }
.mwi-sektion--navy .kicker { color: var(--gold-hell); }

.sektion-kopf { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.sektion-kopf--zentriert { margin-left: auto; margin-right: auto; text-align: center; }
.sektion-kopf--zentriert .kicker { justify-content: center; }
.sektion-kopf .sub { font-size: 18px; color: var(--grau); margin: 0; }

/* Skript-Akzent (persönlich, sparsam) */
.skript { font-family: 'Snell Roundhand', 'Zapf Chancery', 'Apple Chancery', cursive; font-weight: 400; color: var(--gold-dunkel); font-size: 1.35em; font-style: italic; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 30px;
	border-radius: var(--radius-s);
	font-family: var(--font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform var(--uebergang), box-shadow var(--uebergang), background-color var(--uebergang), border-color var(--uebergang);
}
.btn svg, .chev svg, .pfeil svg, .kreis-btn svg, .check svg, .google-zeile svg, .chip svg { width: 18px; height: 18px; flex-shrink: 0; }
.kreis-btn svg { width: 19px; height: 19px; }
.check svg { width: 13px; height: 13px; }
.chip svg { width: 14px; height: 14px; }
.btn .pfeil { display: inline-flex; transition: transform var(--uebergang); }
.btn:hover .pfeil { transform: translateX(3px); }

.btn--gold { background: var(--gold-grad); color: var(--navy); box-shadow: 0 8px 24px rgba(175, 145, 35, 0.32); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(175, 145, 35, 0.42); }
.btn--navy { background: var(--navy); color: var(--weiss); }
.btn--navy:hover { background: var(--navy-soft); transform: translateY(-2px); }
.btn--outline { background: var(--weiss); color: var(--navy); border-color: rgba(0, 26, 40, 0.18); }
.btn--outline:hover { border-color: var(--gold); transform: translateY(-2px); }
.btn--hell { background: var(--weiss); color: var(--navy); }
.btn--gross { padding: 19px 38px; font-size: 17px; }
.btn--voll { width: 100%; }

.btn-micro { display: block; margin-top: 10px; font-size: 13.5px; color: var(--grau-hell); }
.mwi-sektion--navy .btn-micro { color: rgba(255, 255, 255, 0.55); }

/* Kreis-Pfeil-Button (Objekt-Karten) */
.kreis-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid rgba(0, 26, 40, 0.16); background: var(--weiss); color: var(--navy);
	transition: var(--uebergang);
}
.kreis-btn:hover { background: var(--navy); color: var(--gold-hell); border-color: var(--navy); }

/* ---------- Karten ---------- */
.karte {
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	box-shadow: var(--schatten);
}
.karte--creme { background: var(--creme-hell); }
.karte--goldrand { border-top: 3px solid; border-image: linear-gradient(105deg, #D9C57E, #BEA95B, #AF9123) 1; border-top-left-radius: 0; border-top-right-radius: 0; }
.karte-hebt { transition: transform var(--uebergang), box-shadow var(--uebergang); }
.karte-hebt:hover { transform: translateY(-4px); box-shadow: var(--schatten-hover); }

/* Icon-Kreis: navy Kreis, goldenes Icon */
.icon-kreis {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--navy); color: var(--gold-hell); flex-shrink: 0;
}
.icon-kreis svg { width: 24px; height: 24px; }
.icon-kreis--gold { background: var(--gold-grad); color: var(--navy); }
.icon-kreis--hell { background: var(--creme); color: var(--gold-dunkel); }

/* Checkmark-Zeile (USPs) */
.check-liste { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 13px; }
.check-liste li { display: flex; gap: 12px; align-items: baseline; font-size: 16.5px; }
.check-liste .check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
	background: var(--gold-grad); color: var(--navy); transform: translateY(4px);
}
.check-liste .check svg { width: 13px; height: 13px; }
.check-liste b { color: var(--navy); font-weight: 700; }
.check-liste .zusatz { color: var(--grau-hell); font-size: 15px; }

/* Google-Trust-Zeile */
.google-zeile { display: inline-flex; align-items: center; gap: 9px; font-size: 15.5px; color: var(--grau); }
.google-zeile .g-logo { width: 22px; height: 22px; }
.google-zeile .sterne { color: #F5B301; letter-spacing: 2px; font-size: 15px; }
.google-zeile b { color: var(--navy); font-size: 17px; }
.google-zeile .sep { color: var(--linie); }

/* Chips */
.chip {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 14px; border-radius: 999px;
	background: var(--creme); color: var(--navy);
	font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.chip--status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-dunkel); }
.chip--dunkel { background: rgba(0, 26, 40, 0.72); color: var(--weiss); letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 13.5px; backdrop-filter: blur(4px); }

/* ============================================================
   HEADER
   ============================================================ */
.mwi-header {
	position: sticky; top: 0; z-index: 90;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--linie);
}
.mwi-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; }
/* 48px statt 40px: darunter wird die zweizeilige Wortmarke unleserlich
   (Design-Guidelines: „Logo eher großzügig platzieren, nicht zu klein").
   flex-shrink:0 ist entscheidend — sonst quetschen Navigation und CTA das Logo
   im Flex-Header zusammen (war vorher auf 74px statt 198px gestaucht). */
.mwi-header__logo { flex-shrink: 0; display: block; }
.mwi-header__logo img { height: 48px; width: auto; max-width: none; }

.mwi-nav { display: flex; align-items: center; gap: 4px; }
.mwi-nav > li { list-style: none; position: relative; }
.mwi-nav ul { margin: 0; padding: 0; }
.mwi-nav__link {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 14px; border-radius: 10px;
	color: var(--navy); font-weight: 600; font-size: 15.5px; text-decoration: none; white-space: nowrap;
	transition: background-color var(--uebergang), color var(--uebergang);
}
.mwi-nav__link:hover, .mwi-nav > li.offen > .mwi-nav__link { background: var(--creme-hell); color: var(--gold-dunkel); }
.mwi-nav__link .chev { transition: transform var(--uebergang); }
.mwi-nav > li.offen > .mwi-nav__link .chev { transform: rotate(180deg); }

/* Mega-Dropdown */
.mwi-drop {
	position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
	min-width: 300px;
	background: var(--weiss); border: 1px solid var(--linie); border-radius: 18px;
	box-shadow: 0 24px 60px rgba(0, 26, 40, 0.16);
	padding: 22px 26px;
	display: grid; gap: 4px;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity var(--uebergang), transform var(--uebergang), visibility var(--uebergang);
}
.mwi-drop--breit { min-width: 560px; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
.mwi-nav > li.offen > .mwi-drop, .mwi-nav > li:focus-within > .mwi-drop {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.mwi-drop__gruppe { grid-column: 1 / -1; font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dunkel); border-bottom: 1px solid var(--linie); padding-bottom: 8px; margin: 6px 0 8px; }
.mwi-drop a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px; margin: 0 -10px; border-radius: 9px; text-decoration: none; color: var(--navy); font-weight: 500; font-size: 15px; white-space: nowrap; transition: background-color var(--uebergang), color var(--uebergang); }
.mwi-drop a:hover { background: var(--creme-hell); color: var(--gold-dunkel); }
.mwi-drop a .pfeil { opacity: 0; transition: var(--uebergang); }
.mwi-drop a:hover .pfeil { opacity: 1; }

.mwi-header__cta { white-space: nowrap; padding: 13px 22px; font-size: 15px; }

/* Burger */
.mwi-burger { display: none; background: none; border: 1px solid var(--linie); border-radius: 12px; padding: 11px 12px; cursor: pointer; color: var(--navy); }
.mwi-burger svg { display: block; width: 22px; height: 22px; }

/* Mobile-Menü */
.mwi-mobilmenu {
	position: fixed; inset: 0; z-index: 100; background: var(--weiss);
	display: none; flex-direction: column; overflow-y: auto;
	padding: 0 clamp(20px, 4vw, 40px) 40px;
}
.mwi-mobilmenu.offen { display: flex; }
.mwi-mobilmenu__kopf { display: flex; align-items: center; justify-content: space-between; min-height: 78px; margin-bottom: 8px; }
.mwi-mobilmenu__kopf img { height: 38px; width: auto; }
.mwi-mobilmenu nav ul { list-style: none; margin: 0; padding: 0; }
.mwi-mobilmenu nav > ul > li { border-bottom: 1px solid var(--linie); }
.mwi-mobilmenu__punkt {
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	padding: 20px 0; background: none; border: none; cursor: pointer; text-align: left;
	font-family: var(--font); font-size: 24px; font-weight: 700; color: var(--navy); text-decoration: none;
}
.mwi-mobilmenu__punkt .chev { transition: transform var(--uebergang); color: var(--grau-hell); }
.mwi-mobilmenu li.offen .mwi-mobilmenu__punkt .chev { transform: rotate(180deg); }
.mwi-mobilmenu__sub { display: none; padding: 0 0 16px; }
.mwi-mobilmenu li.offen .mwi-mobilmenu__sub { display: block; }
.mwi-mobilmenu__sub a { display: block; padding: 9px 0; font-size: 17px; font-weight: 500; color: var(--grau); text-decoration: none; }
.mwi-mobilmenu__sub .mwi-drop__gruppe { margin-top: 14px; }
.mwi-mobilmenu__cta { margin: 26px 0 10px; }
.mwi-mobilmenu__kontakt { list-style: none; margin: 12px 0 0; padding: 0; }
.mwi-mobilmenu__kontakt li { border-bottom: 1px solid var(--linie); }
.mwi-mobilmenu__kontakt a { display: flex; align-items: center; gap: 16px; padding: 15px 0; text-decoration: none; }
.mwi-mobilmenu__kontakt .icon-kreis { width: 44px; height: 44px; background: var(--creme); color: var(--navy); }
.mwi-mobilmenu__kontakt b { display: block; color: var(--navy); font-size: 16px; }
.mwi-mobilmenu__kontakt span { font-size: 14px; color: var(--grau-hell); }

/* ============================================================
   FOOTER (Navy, goldene Topline)
   ============================================================ */
.mwi-footer { background: var(--navy); color: rgba(255, 255, 255, 0.72); border-top: 3px solid; border-image: linear-gradient(105deg, #D9C57E, #BEA95B, #AF9123) 1; font-size: 15px; }
.mwi-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; transition: color var(--uebergang); }
.mwi-footer a:hover { color: var(--gold-hell); }
.mwi-footer__grid { display: grid; grid-template-columns: 1.35fr 0.8fr 0.9fr 1.1fr; gap: clamp(32px, 5vw, 64px); padding: clamp(48px, 7vw, 80px) 0 44px; }
.mwi-footer__logo img { height: 50px; width: auto; margin-bottom: 18px; }
.mwi-footer__titel { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-hell); margin-bottom: 16px; }
.mwi-footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mwi-footer__badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 16px; border: 1px solid rgba(217, 197, 126, 0.4); border-radius: var(--radius-xs); color: var(--gold-hell); font-size: 13px; font-weight: 600; }
.mwi-footer__nap b { color: var(--weiss); }
.mwi-footer__zeiten { margin-top: 16px; padding: 14px 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius-xs); font-size: 13.5px; line-height: 1.8; }
.mwi-footer__zeiten b { display: block; color: var(--gold-hell); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 4px; }
.mwi-footer__trust { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 20px 0; text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em; }
.mwi-footer__trust b { color: var(--gold-hell); font-weight: 600; }
.mwi-footer__unten { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 22px 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255, 255, 255, 0.45); }
.mwi-footer__social { display: flex; gap: 10px; }
.mwi-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); transition: var(--uebergang); }
.mwi-footer__social a:hover { border-color: var(--gold); color: var(--gold-hell); transform: translateY(-2px); }
.mwi-footer__social svg { width: 18px; height: 18px; }

/* ============================================================
   OBJEKT-KARTE (Listen, Teaser)
   ============================================================ */
.objekt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.objekt-karte { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; }
.objekt-karte__bild { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.objekt-karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(.4, 0, .2, 1); }
.objekt-karte:hover .objekt-karte__bild img { transform: scale(1.04); }
.objekt-karte__ort { position: absolute; left: 14px; bottom: 14px; }
.objekt-karte__body { padding: 20px 22px 16px; background: var(--weiss); flex: 1; }
.objekt-karte__art { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grau-hell); margin-bottom: 8px; }
.objekt-karte__titel { font-size: 19px; font-weight: 700; color: var(--navy); line-height: 1.3; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.objekt-karte__daten { display: flex; border-top: 1px solid var(--linie); padding-top: 14px; }
.objekt-karte__daten > div { flex: 1; padding-right: 12px; }
.objekt-karte__daten > div + div { border-left: 1px solid var(--linie); padding-left: 14px; }
.objekt-karte__daten .label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grau-hell); }
.objekt-karte__daten .wert { font-size: 16px; font-weight: 700; color: var(--navy); }
.objekt-karte__fuss { display: flex; align-items: center; justify-content: space-between; padding: 15px 22px; background: var(--creme-hell); border-top: 1px solid var(--linie); }
.objekt-karte__fuss .label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grau-hell); }
.objekt-karte__preis { font-size: 21px; font-weight: 800; color: var(--navy); }
.objekt-karte__preis .einheit { font-size: 14px; font-weight: 600; color: var(--grau); }

/* ============================================================
   STATS-BAND
   ============================================================ */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); padding: 26px 10px; }
.stats-band > div { text-align: center; padding: 6px 18px; }
.stats-band > div + div { border-left: 1px solid var(--linie); }
.stats-band .zahl { font-size: clamp(28px, 3vw, 38px); font-weight: 800; color: var(--navy); line-height: 1.1; }
.stats-band .zahl .plus { color: var(--gold-dunkel); }
.stats-band .label { font-size: 13.5px; color: var(--grau); margin-top: 4px; }

/* ============================================================
   REZENSIONS-KARTE
   ============================================================ */
.review-karte { padding: 26px 26px 24px; }
.review-karte__kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.review-karte__avatar { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 19px; flex-shrink: 0; }
.review-karte__kopf .g-logo { margin-left: auto; width: 22px; height: 22px; }
.review-karte__name { font-weight: 700; color: var(--navy); font-size: 16px; line-height: 1.25; }
.review-karte__datum { font-size: 13.5px; color: var(--grau-hell); }
.review-karte__sterne { color: #F5B301; letter-spacing: 3px; font-size: 15px; margin-bottom: 10px; display: inline-flex; align-items: center; gap: 8px; }
.review-karte__sterne .verified { color: #4285F4; font-size: 14px; letter-spacing: 0; }
.review-karte__text { font-size: 15.5px; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Avatar-Farben = echte Google-Palette */
.avatar-blau { background: #4285F4; } .avatar-rot { background: #EA4335; }
.avatar-gelb { background: #F4B400; } .avatar-gruen { background: #0F9D58; }
.avatar-lila { background: #7B1FA2; } .avatar-cyan { background: #00838F; }

/* Carousel-Steuerung */
/* flex-shrink: 0 ist hier Pflicht. Safari auf dem iPhone staucht die Navigation
   sonst auf etwa die halbe Breite, obwohl ihr Inhalt mehr braucht. Die Knöpfe
   laufen dann aus ihrem Kasten heraus und überlappen den Google-Link daneben.
   Chromium macht das nicht, weshalb der Fehler in den Entwicklertools unsichtbar
   war und nur auf dem echten Gerät auftrat. So bleibt die Navigation auf ihrer
   natürlichen Breite und der Link bricht sauber in die nächste Zeile um. */
.carousel-nav { display: flex; align-items: center; gap: 16px; margin-top: 26px; flex-shrink: 0; }
/* Die zusätzliche width ist kein Duplikat: Safari rechnet die flex-basis nicht in
   die Inhaltsbreite der Navigation ein und hielt sie dadurch für rund 116 statt
   248 Pixel breit. Der Google-Link brach deshalb nicht um und die Knöpfe liefen
   darüber. Mit echter Breite stimmt die Messung in beiden Engines. */
.carousel-nav .balken { flex: 0 0 120px; width: 120px; height: 3px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.carousel-nav .balken i { display: block; height: 100%; width: 33%; background: var(--gold-grad); border-radius: 3px; transition: transform 0.4s ease; }

/* ============================================================
   FLOATING CTA (nach Scroll)
   ============================================================ */
.float-cta {
	position: fixed; right: 22px; bottom: 22px; z-index: 80;
	display: flex; align-items: center; gap: 14px;
	background: var(--weiss); border: 1px solid var(--linie); border-radius: 18px;
	box-shadow: 0 18px 50px rgba(0, 26, 40, 0.22);
	padding: 12px 14px 12px 18px;
	text-decoration: none;
	opacity: 0; transform: translateY(14px); pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.float-cta.sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.float-cta__label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grau-hell); }
.float-cta__text { font-size: 15.5px; font-weight: 700; color: var(--navy); }
.float-cta__text .akzent { font-weight: 700; }
.float-cta .kreis-btn { background: var(--gold-grad); border: none; color: var(--navy); }

/* ============================================================
   FORMULARE
   ============================================================ */
.feld label { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 7px; }
.feld label .optional { color: var(--grau-hell); font-weight: 500; }
.feld input, .feld select, .feld textarea {
	width: 100%; padding: 14px 16px;
	border: 1px solid var(--linie); border-radius: var(--radius-xs);
	background: var(--creme-hell); font-family: var(--font); font-size: 15.5px; color: var(--navy);
	transition: border-color var(--uebergang), background-color var(--uebergang), box-shadow var(--uebergang);
}
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--gold); background: var(--weiss); box-shadow: 0 0 0 3px rgba(190, 169, 91, 0.18); }
.feld { margin-bottom: 18px; }
.feld--checkbox { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; }
.feld--checkbox input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--gold-dunkel); }
.formular-reassurance { text-align: center; font-size: 14px; color: var(--grau-hell); margin-top: 12px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
	.mwi-nav { display: none; }
	.mwi-header__cta { display: none; }
	.mwi-burger { display: block; }
	.objekt-grid { grid-template-columns: repeat(2, 1fr); }
	.mwi-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
	body { font-size: 16px; }
	.objekt-grid { grid-template-columns: 1fr; }
	.stats-band { grid-template-columns: 1fr 1fr; row-gap: 18px; }
	.stats-band > div:nth-child(3) { border-left: none; }
	.mwi-footer__grid { grid-template-columns: 1fr; gap: 36px; }
	.float-cta__text { max-width: 180px; }
	.float-cta { right: 14px; bottom: 14px; left: 14px; justify-content: space-between; }
}

/* ============================================================
   STARTSEITE
   ============================================================ */

/* Platzhalter-Kennzeichnung (wartet auf echte Daten von Nico) */
.ist-platzhalter { position: relative; }
.zahl.ist-platzhalter, .faq__karte.ist-platzhalter { opacity: .82; }
.faq__karte.ist-platzhalter { border-style: dashed; }

/* HERO */
.hero { padding: clamp(40px, 6vw, 76px) 0 clamp(30px, 4vw, 48px); }
/* Bildspalte bewusst breit, damit das Teamfoto groß wird. Es wird in exakt seinem
   Zuschnitt-Verhältnis angezeigt (team-hero.jpg, 1400x1124), damit links und rechts
   niemand angeschnitten wird. */
.hero__grid { display: grid; grid-template-columns: 0.96fr 1.04fr; gap: clamp(28px, 3.5vw, 44px); align-items: center; }
.hero__text { display: flex; flex-direction: column; justify-content: center; }
.hero__trust { text-decoration: none; margin-bottom: 22px; align-self: flex-start; }
.hero__trust:hover b { color: var(--gold-dunkel); }
/* Auf die Spaltenbreite abgestimmt: so passt "Ihr Immobilienmakler" auf eine Zeile,
   statt "Ihr" allein umzubrechen. */
.hero h1 { font-size: clamp(34px, 3.6vw, 49px); margin-bottom: 16px; }
.hero__sub { font-size: 18px; max-width: 42ch; margin-bottom: 26px; }
.hero__bild img { width: 100%; border-radius: var(--radius); box-shadow: var(--schatten); aspect-ratio: 3 / 2; object-fit: cover; }

/* WARUM */
.warum { display: grid; grid-template-columns: 0.97fr 1.03fr; gap: clamp(28px, 3.5vw, 48px); align-items: start; }
/* 1:1 = Original-Seitenverhältnis des Fotos, dadurch ist das ganze Bild sichtbar
   statt nur eines inneren Ausschnitts. */
.warum__bild img { width: 100%; border-radius: var(--radius); box-shadow: var(--schatten); aspect-ratio: 3 / 2; object-fit: cover; }
.warum__liste { display: grid; gap: 26px; }
.warum__punkt { display: flex; gap: 18px; align-items: flex-start; }
.warum__punkt b { display: block; color: var(--navy); font-size: 17.5px; margin-bottom: 5px; }
.warum__punkt p { margin: 0; font-size: 15.5px; }

/* PORTALE */
/* Portale: Label oben, darunter ein endlos laufendes Band.
   Spart gegenüber der früheren umbrechenden Textzeile deutlich Höhe. */
.portale { padding: 22px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.portale__label { display: block; text-align: center; font-size: 14px; color: var(--grau-hell); margin-bottom: 12px; }
.portale__band { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.portale__spur { display: flex; width: max-content; gap: clamp(28px, 5vw, 56px); padding-right: clamp(28px, 5vw, 56px);
	animation: portale-lauf 26s linear infinite; }
.portale__band:hover .portale__spur { animation-play-state: paused; }
.portale b { flex: none; font-size: 17px; font-weight: 700; color: var(--grau-hell); letter-spacing: .02em; opacity: .75; transition: var(--uebergang); }
.portale b:hover { opacity: 1; color: var(--navy); }
/* Verschiebung um genau die Hälfte: dort beginnt die zweite, identische Liste,
   der Sprung zurück auf 0 ist dadurch unsichtbar. */
@keyframes portale-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.portale__spur { animation: none; justify-content: center; width: 100%; flex-wrap: wrap; }
	.portale__spur b[aria-hidden] { display: none; }
}

/* REZENSIONEN */
.rev { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin-bottom: 38px; }
.rev__kopf h2 { margin-bottom: 14px; }
.rev__kopf p { color: var(--grau); margin: 0; }
.rev__zitat { display: grid; grid-template-columns: auto 1fr; gap: 28px; padding: 28px 30px; align-items: center; }
.rev__zitat-wert { text-align: center; padding-right: 28px; border-right: 1px solid var(--linie); }
.rev__zitat-wert .zahl { font-size: 52px; font-weight: 800; color: var(--navy); line-height: 1; }
.rev__zitat-wert .sterne { color: #F5B301; letter-spacing: 2px; margin: 6px 0 8px; }
.rev__zitat-anzahl { font-size: 13px; color: var(--grau); display: flex; align-items: center; gap: 5px; justify-content: center; }
.rev__zitat-anzahl svg { width: 16px; height: 16px; }
.rev__zitat blockquote { margin: 0; }
.rev__zitat blockquote p { font-size: 16.5px; color: var(--navy); margin-bottom: 16px; }
.rev__zitat footer { display: flex; align-items: center; gap: 13px; }
.rev__zitat footer img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 2px solid var(--gold-hell); }
.rev__zitat footer b { display: block; color: var(--navy); font-size: 15px; }
.rev__zitat footer span span { font-size: 13.5px; color: var(--grau-hell); }
.rev__karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rev__fuss { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rev__alle { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-dunkel); font-weight: 700; font-size: 15.5px; text-decoration: none; }
.rev__alle:hover { text-decoration: underline; }
.rev__alle svg { width: 17px; height: 17px; }

/* LEISTUNGEN-SPLIT */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.5vw, 48px); }
.split__label { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); margin-bottom: 18px; }
.split__label span { flex: 1; height: 1px; background: var(--linie); order: 2; }
.split__label::before { content: ''; width: 22px; height: 2px; background: var(--gold-grad); border-radius: 2px; }
.split__karten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.split__karte { padding: 26px 24px 22px; text-decoration: none; display: flex; flex-direction: column; }
.split__karte h3 { font-size: 19px; margin: 16px 0 8px; }
.split__karte p { font-size: 15px; margin-bottom: 18px; flex: 1; }
.split__link { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-dunkel); font-weight: 700; font-size: 14.5px; }
.split__link svg { width: 16px; height: 16px; transition: transform var(--uebergang); }
.split__karte:hover .split__link svg { transform: translateX(3px); }
.split__spalte--kaeufer .split__karte { background: var(--creme-hell); }

.objekt-grid__aktionen { display: flex; justify-content: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.objekt-grid__aktionen .btn { border-radius: 999px; }

/* NOTAR-TESTIMONIALS */
.notar { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.notar__karte { overflow: hidden; }
.notar__bild { aspect-ratio: 16 / 9; background: var(--creme); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--grau-hell); text-align: center; }
/* Das Padding gilt nur für den Platzhalter (Icon und Hinweistext mittig).
   Ein echtes Foto soll die Fläche randlos füllen, sonst steht ein heller
   Streifen zwischen Bild und Kartenkante. */
.notar__bild.ist-platzhalter { padding: 20px; }
.notar__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.notar__bild svg { width: 32px; height: 32px; opacity: .5; }
.notar__bild span { font-size: 14px; font-weight: 700; }
.notar__bild small { font-size: 12.5px; }
.notar__inhalt { padding: 24px 26px 26px; }
.notar__inhalt .chip { margin-bottom: 14px; }
.notar__inhalt b { display: block; font-size: 19px; color: var(--navy); margin-bottom: 6px; }
.notar__inhalt p { font-size: 15.5px; margin: 10px 0 18px; }
/* Auf der Startseite ist die Notarkarte ein Link auf den Referenz-Beitrag,
   dort steht die ausführliche Story. Auf der Beitragsseite selbst bleibt sie
   ein normales Element ohne Link. */
a.notar__karte { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
a.notar__karte .notar__inhalt { flex: 1; display: flex; flex-direction: column; }
.notar__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; color: var(--gold-dunkel); font-weight: 700; font-size: 14.5px; }
.notar__link svg { width: 16px; height: 16px; transition: transform .3s ease; }
a.notar__karte:hover .notar__link svg { transform: translateX(4px); }
.notar__fuss { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 13px; color: var(--grau-hell); }
.notar__fuss b { display: inline; font-size: 13px; color: var(--navy); }

/* FAQ */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

/* Aufklappbare Frage. Der Pfeil dreht sich beim Öffnen. */
.faq__karte { padding: 0; overflow: hidden; }
.faq__frage { display: flex; align-items: center; gap: 14px; padding: 20px 22px; cursor: pointer;
	list-style: none; user-select: none; transition: background var(--uebergang); }
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage:hover { background: var(--creme-hell); }
.faq__karte[open] .faq__frage { background: var(--creme-hell); }
.faq__frage h3 { flex: 1; font-size: 17.5px; margin: 0; line-height: 1.35; }
.faq__nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
	border-radius: 10px; background: var(--creme); color: var(--grau); font-size: 12.5px; font-weight: 700; }
.faq__pfeil { flex: none; display: inline-flex; color: var(--gold-dunkel); transition: transform var(--uebergang); }
.faq__pfeil svg { width: 18px; height: 18px; }
.faq__karte[open] .faq__pfeil { transform: rotate(180deg); }
/* Oben derselbe Abstand wie unter dem Chip: sonst klebt er am Frage-Kopf,
   während darunter Luft ist. */
.faq__antwort { padding: 14px 22px 20px; }
.faq__chip { display: inline-block; padding: 5px 13px; border-radius: 999px; background: var(--creme-hell);
	font-size: 12.5px; color: var(--grau); margin-bottom: 14px; }
.faq__chip b { color: var(--gold-dunkel); }
.faq__antwort p { font-size: 15.5px; margin: 0 0 14px; }
.faq__link { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-dunkel); font-weight: 700;
	font-size: 14.5px; text-decoration: none; }
.faq__link svg { width: 16px; height: 16px; transition: transform var(--uebergang); }
.faq__link:hover svg { transform: translateX(3px); }

/* BEWERTUNGS-TOOL */
.bewertung { padding: clamp(34px, 4vw, 54px) clamp(24px, 4vw, 54px); }
.bewertung__stepper { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; padding: 14px 20px; background: var(--creme-hell); border-radius: 999px; width: fit-content; margin-inline: auto; }
.bewertung__stepper span { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--grau); }
.bewertung__stepper i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--weiss); border: 1px solid var(--linie); font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--grau); }
.bewertung__stepper .aktiv { color: var(--gold-dunkel); font-weight: 700; }
.bewertung__stepper .aktiv i { background: var(--gold-grad); border-color: transparent; color: var(--navy); }
.bewertung__stepper > svg { width: 16px; height: 16px; color: var(--grau-hell); }
.bewertung__karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 26px; }
.bewertung__karte { padding: 26px 24px; text-decoration: none; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.bewertung__karte b { font-size: 19px; color: var(--navy); margin-top: 8px; }
.bewertung__karte > span:not(.icon-kreis):not(.bewertung__cta) { font-size: 14.5px; color: var(--grau); }
/* margin-top:auto schiebt den CTA zuverlässig an den unteren Kartenrand, unabhängig
   davon, wie viele Zeilen der Sub-Text braucht. */
.bewertung__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linie); color: var(--gold-dunkel); font-weight: 700; font-size: 14.5px; }
.bewertung__cta svg { width: 16px; height: 16px; }
.bewertung__trust { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 34px); flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--linie); }
.bewertung__trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--grau); }
.bewertung__trust svg { width: 16px; height: 16px; color: var(--gold-dunkel); }

/* KÜRZLICH VERKAUFT */
.verkauft { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.verkauft__karte { overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.verkauft__bild { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.verkauft__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.verkauft__karte:hover .verkauft__bild img { transform: scale(1.04); }
.verkauft__bild .chip { position: absolute; left: 14px; top: 14px; background: var(--navy); color: var(--gold-hell); }
.verkauft__bild .chip::before { background: var(--gold-hell); }
.verkauft__bild--leer { display: flex; align-items: center; justify-content: center; background: var(--creme); }
.verkauft__bild--leer svg { width: 40px; height: 40px; color: var(--grau-hell); opacity: .5; }
.verkauft__body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.verkauft__body h3 { font-size: 18px; margin-bottom: 8px; }
.verkauft__body p { font-size: 14.5px; color: var(--grau-hell); margin: 0; }
.verkauft__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; color: var(--gold-dunkel); font-weight: 700; font-size: 14.5px; }
.verkauft__link svg { width: 16px; height: 16px; }
.verkauft__alle { text-align: center; margin-top: 26px; }

/* Beleg-Zeile unter dem Bewertungs-Tool */
.bewertung__beleg { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 32px); flex-wrap: wrap; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--linie); }
.bewertung__beleg .google-zeile { text-decoration: none; }
.bewertung__beleg-trenner { width: 1px; height: 30px; background: var(--linie); }
.bewertung__zaehler { font-size: 15px; color: var(--grau); }
.bewertung__zaehler b { color: var(--navy); font-size: 19px; font-weight: 800; }
.bewertung__zaehler small { display: block; font-size: 12.5px; color: var(--grau-hell); }

/* STANDORT */
.standort { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: start; margin-bottom: 42px; }
.standort__bild img { width: 100%; border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--schatten); }
.standort__bild-platzhalter { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 4 / 3; border: 2px dashed var(--linie); border-radius: var(--radius); background: var(--weiss); color: var(--grau-hell); text-align: center; padding: 24px; }
.standort__bild-platzhalter svg { width: 34px; height: 34px; opacity: .5; }
.standort__bild-platzhalter b { color: var(--grau); font-size: 15px; }
.standort__bild-platzhalter span { font-size: 13.5px; }
.standort__karte { padding: 28px 30px; }
.standort__nap { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 18px; font-size: 15.5px; }
.standort__nap svg { width: 20px; height: 20px; color: var(--gold-dunkel); flex-shrink: 0; margin-top: 2px; }
.standort__nap b { color: var(--navy); }
.standort__zeiten { padding: 16px 18px; background: var(--creme-hell); border-radius: var(--radius-xs); margin-bottom: 18px; font-size: 14.5px; }
.standort__zeiten-kopf { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dunkel); margin-bottom: 10px; }
.standort__zeiten-kopf svg { width: 15px; height: 15px; }
.standort__zeiten > div { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; }
.standort__zeiten b { color: var(--navy); }
.standort__kanaele { display: grid; gap: 10px; margin-bottom: 20px; }
.standort__kanaele a { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border: 1px solid var(--linie); border-radius: var(--radius-xs); text-decoration: none; color: var(--navy); font-weight: 600; font-size: 15px; transition: var(--uebergang); }
.standort__kanaele a:hover { border-color: var(--gold); background: var(--creme-hell); }
.standort__kanaele .icon-kreis { width: 38px; height: 38px; }
.standort__kanaele .standort__wa .icon-kreis { background: rgba(37,211,102,.12); color: #128C4B; }
.standort__versprechen { text-align: center; font-size: 13.5px; color: var(--grau-hell); margin: 12px 0 0; }

.einzugsgebiet h3 { font-size: clamp(22px, 2.2vw, 28px); margin: 8px 0 10px; }
.einzugsgebiet > p { color: var(--grau); margin-bottom: 18px; }
.einzugsgebiet__liste summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px 22px; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); font-weight: 700; font-size: 15px; color: var(--navy); list-style: none; }
.einzugsgebiet__liste summary::-webkit-details-marker { display: none; }
.einzugsgebiet__liste summary svg { width: 17px; height: 17px; transition: transform var(--uebergang); }
.einzugsgebiet__liste[open] summary svg { transform: rotate(180deg); }
.einzugsgebiet__liste > div { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.einzugsgebiet__liste > div span { padding: 7px 15px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 999px; font-size: 14px; color: var(--grau); }

/* KONTAKTFORMULAR — Aufbau wie Referenz: Foto als eigene Karte im natürlichen
   Hochformat, darunter SEPARAT die Personen-Karte. Kein Vollhöhen-Stretch, dadurch
   wird das Porträt nicht in die Länge gezogen. */
.kontaktform { display: grid; grid-template-columns: 340px 1fr; gap: clamp(20px, 2.5vw, 30px); padding: clamp(20px, 2.5vw, 30px); align-items: start; }
.kontaktform__links { display: grid; gap: 14px; }
.kontaktform__foto { border-radius: var(--radius-s); overflow: hidden; background: var(--creme); aspect-ratio: 2 / 3; }
.kontaktform__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.kontaktform__person { padding: 18px 22px; box-shadow: none; }
.kontaktform__person b { display: block; color: var(--navy); font-size: 18px; }
.kontaktform__person > span { font-size: 14.5px; color: var(--grau); }
.kontaktform__status { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: rgba(30,127,79,.10); color: var(--gruen); font-size: 13px; font-weight: 700; }
.kontaktform__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); }
.kontaktform__form { padding: clamp(14px, 2vw, 22px) clamp(10px, 1.5vw, 18px); }
.kontaktform__form h2 { margin-bottom: 12px; }
.kontaktform__form > p { color: var(--grau); margin-bottom: 22px; }
.kontaktform__tabs { display: flex; gap: 6px; padding: 6px; background: var(--creme-hell); border-radius: var(--radius-xs); margin-bottom: 24px; }
.kontaktform__tabs button, .kontaktform__tabs a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 10px; border: none; border-radius: 9px; background: none; font-family: var(--font); font-size: 14.5px; font-weight: 600; color: var(--grau); cursor: pointer; text-decoration: none; transition: var(--uebergang); }
.kontaktform__tabs .aktiv { background: var(--weiss); color: var(--navy); box-shadow: 0 2px 8px rgba(0,26,40,.08); }
.kontaktform__tabs svg { width: 17px; height: 17px; }

@media (max-width: 980px) {
	/* minmax(0,1fr) statt 1fr: sonst kann die Spalte nicht unter die Mindestbreite
	   ihres Inhalts schrumpfen und die Seite läuft horizontal über. */
	.hero__grid, .warum, .rev, .split, .split__karten, .standort, .kontaktform, .notar,
	.rev__karten, .bewertung__karten, .faq, .rev__zitat, .verkauft { grid-template-columns: minmax(0, 1fr); }
	/* Sobald der Hero einspaltig wird, steht der Text vorn und das Bild darunter.
	   Vorher stand hier order: -1, wodurch das Foto den CTA unter die Falz drückte. */
	.hero__bild { order: 2; }
	.bewertung__beleg-trenner { display: none; }
	.kontaktform { grid-template-columns: minmax(0, 1fr); }
	.kontaktform__foto { aspect-ratio: 4 / 3; }
	.kontaktform__foto img { object-position: 50% 22%; }
	.warum__bild img { aspect-ratio: 3 / 2; }
	.kontaktform__foto { aspect-ratio: 4 / 3; max-height: 420px; }
	.rev__zitat-wert { border-right: none; border-bottom: 1px solid var(--linie); padding: 0 0 20px; }
	/* Elemente, die sonst eine Mindestbreite erzwingen */
	.kontaktform__tabs { flex-wrap: wrap; }
	.kontaktform__tabs button, .kontaktform__tabs a { flex: 1 1 30%; }
	.standort__zeiten > div { flex-wrap: wrap; }
}

/* ============================================================
   VERKÄUFER-SEITE
   ============================================================ */
/* Das Hero-Bild soll etwa so hoch stehen wie der Textblock daneben, ein
   flaches 3:2 wirkte daneben verloren. Zuschnitt nur oben/unten, seitlich nichts. */
.verkaufen-hero .hero__bild img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 32%; }
@media (min-width: 981px) {
	.verkaufen-hero .hero__grid { grid-template-columns: 1.02fr 0.98fr; align-items: center; }
	.verkaufen-hero .hero__bild img { max-height: 580px; width: 100%; }
}
@media (max-width: 980px) { .verkaufen-hero .hero__bild img { aspect-ratio: 3 / 4; } }

/* Vermieten-Hero: Das Beratungsfoto ist Querformat 3:2. Vorher zwang die
   generische Regel es in ein 4:5-Hochformat mit tiefem Bildausschnitt und
   schnitt die Personen unten ab. Im eigenen Seitenverhältnis bleibt alles im
   Bild, die Höhe bleibt neben dem Textblock angemessen. */
.vermieten-hero .hero__bild img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 40%; }
@media (min-width: 981px) {
	.vermieten-hero .hero__grid { grid-template-columns: 1fr 1fr; align-items: center; }
	.vermieten-hero .hero__bild img { max-height: 470px; width: 100%; }
}

/* Ablauf: horizontaler Scroll mit EINER Karte im Fokus.
   Die Sektion ist hoch, der innere Block klebt (sticky). Beim vertikalen Scrollen
   verschiebt JS die Spur horizontal: die aktive Karte steht mittig, die vorherige
   wandert nach links und blendet aus, die nächste kommt von rechts herein.
   Im Hintergrund verbindet eine durchgehende Linie alle Karten zu einem Weg. */
.ablauf-scroll { position: relative; }
.ablauf-scroll__sticky { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 4vw, 60px) 0; overflow: hidden; }
.ablauf-scroll__viewport { overflow: hidden; }
/* Kartenbreite als Variable, damit CSS die Zentrierung selbst rechnen kann.
   JS muss dadurch keine Breiten messen (das war fehleranfällig). */
.ablauf-scroll__spur { --kb: min(56vw, 660px); --rand: calc((100vw - var(--kb)) / 2);
	position: relative; display: flex; align-items: center; gap: clamp(40px, 6vw, 90px); will-change: transform;
	/* width: max-content, damit die Spur so breit wird wie ihr Inhalt. Sonst
	   bleibt sie auf Viewport-Breite und der Weg endet nach dem ersten Bild. */
	width: max-content; padding-inline: var(--rand); }

/* Der Weg: läuft von der Mitte der ersten bis zur Mitte der letzten Karte */
.ablauf-scroll__weg { position: absolute; top: 50%; height: 2px; z-index: 0;
	left: calc(var(--rand) + var(--kb) / 2); right: calc(var(--rand) + var(--kb) / 2);
	background: repeating-linear-gradient(90deg, var(--gold) 0 14px, transparent 14px 26px); opacity: .5; }

/* Große Karten: eine füllt den Fokus, Nachbarn ragen angeschnitten herein */
.ablauf-scroll .ablauf__karte { position: relative; z-index: 1; flex: 0 0 var(--kb); padding: clamp(30px, 3.4vw, 48px); }
.ablauf-scroll .ablauf__karte-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.ablauf-scroll .ablauf__karte .icon-kreis { width: 66px; height: 66px; margin: 0; }
.ablauf-scroll .ablauf__karte .icon-kreis svg { width: 30px; height: 30px; }
.ablauf-scroll .ablauf__nr { position: static; font-size: clamp(44px, 5vw, 68px); }
.ablauf-scroll .ablauf__nr small { font-size: .38em; color: var(--grau-hell); font-weight: 700; }
.ablauf-scroll .ablauf__karte b { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 14px; }
.ablauf-scroll .ablauf__karte p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; }
/* Nicht fokussierte Karten treten zurück (JS setzt --fokus je Karte: 1 = aktiv) */
.hscroll-aktiv .ablauf__karte { opacity: calc(.15 + var(--fokus, 1) * .85); transform: scale(calc(.94 + var(--fokus, 1) * .06)); transition: opacity .15s linear, transform .15s linear; }

.ablauf-scroll__fortschritt { margin-top: clamp(24px, 3vw, 40px); }
.ablauf-scroll__fortschritt .balken { display: block; height: 3px; border-radius: 3px; background: rgba(0, 26, 40, .12); overflow: hidden; }
.ablauf-scroll__fortschritt i { display: block; height: 100%; width: 16%; background: var(--gold-grad); border-radius: 3px; }

/* Ohne JS, auf Touch und bei reduzierter Bewegung: natives horizontales Wischen */
.ablauf-scroll:not(.hscroll-aktiv) .ablauf-scroll__sticky { position: static; min-height: 0; }
.ablauf-scroll:not(.hscroll-aktiv) .ablauf-scroll__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ablauf-scroll:not(.hscroll-aktiv) .ablauf-scroll__viewport::-webkit-scrollbar { display: none; }
/* Fallback ohne JS oder bei reduzierter Bewegung: natives Wischen.
   Nur die beiden Maße neu setzen, Kartenbreite und Weg-Linie folgen automatisch */
.ablauf-scroll:not(.hscroll-aktiv) .ablauf-scroll__spur { --kb: min(84vw, 420px); --rand: clamp(20px, 5vw, 40px); gap: 18px; }
.ablauf-scroll:not(.hscroll-aktiv) .ablauf__karte { scroll-snap-align: center; }
.ablauf-scroll:not(.hscroll-aktiv) .ablauf-scroll__fortschritt { display: none; }

/* Touch-Ziele: auf dem Handy müssen anklickbare Elemente mindestens 44px
   hoch sein, sonst trifft man sie mit dem Daumen nicht zuverlässig. Betrifft
   die Google-Zeile und den Rezensions-Link, die sonst nur 26 bis 28px messen.
   Links im Fließtext bleiben unangetastet, dort gilt die Zeilenhöhe. */
@media (hover: none) and (pointer: coarse) {
	a.google-zeile, .rev__alle { min-height: 44px; padding-block: 8px; }
}

/* Ablauf-Karten (Grundstil, auch außerhalb des Scrollers nutzbar) */
.ablauf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ablauf__karte { position: relative; padding: 28px 26px 24px; }
.ablauf__nr { position: absolute; top: 20px; right: 24px; font-size: 44px; font-weight: 800; color: var(--creme-dunkel); line-height: 1; }
.ablauf__karte .icon-kreis { margin-bottom: 16px; }
.ablauf__karte b { display: block; font-size: 19px; color: var(--navy); margin-bottom: 8px; }
.ablauf__karte p { font-size: 15px; margin: 0; }

/* Werthebel Wohnfläche */
.werthebel { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
.werthebel__text h2 { margin-bottom: 14px; }
.werthebel__text > p { margin-bottom: 22px; }
.werthebel__zahl { padding: 38px 34px; text-align: center; background: var(--navy); border: none; }
.werthebel__zahl span { display: block; font-size: 14px; color: rgba(255,255,255,.7); }
.werthebel__zahl b { display: block; margin: 10px 0 12px; font-size: clamp(38px, 4.5vw, 54px); font-weight: 800; line-height: 1;
	background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Persönlich-Block */
.persoenlich { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.persoenlich__bild img { width: 100%; border-radius: var(--radius); box-shadow: var(--schatten); aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 18%; }
.persoenlich__text .skript { display: block; font-size: 34px; margin-bottom: 10px; }
.persoenlich__text h2 { margin-bottom: 14px; }
.persoenlich__kanaele { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.persoenlich__kanaele .btn svg { width: 18px; height: 18px; }

/* Zwischen-Sektionen ohne eigene Hintergrundfläche brauchen symmetrischen Abstand,
   sonst kleben sie am nächsten farbigen Block (Feedback Nico). */
.sektion-zwischen { padding-top: var(--sektion-y); padding-bottom: var(--sektion-y); }

/* Quer-CTA */
.quer-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 26px 32px; background: var(--creme-hell); }
.quer-cta b { display: block; font-size: 19px; color: var(--navy); }
.quer-cta span { font-size: 15px; color: var(--grau); }

@media (max-width: 980px) {
	.ablauf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.werthebel, .persoenlich { grid-template-columns: minmax(0, 1fr); }
	.persoenlich__bild { max-width: 320px; }
}
@media (max-width: 620px) {
	.ablauf { grid-template-columns: minmax(0, 1fr); }
	.quer-cta { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   METHODE / WERTE / TEAM (Bewertung, Vermietung, Über uns, Kontakt)
   ============================================================ */
.methode { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.methode__karte { padding: 28px 26px; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.methode__karte .icon-kreis { margin-bottom: 16px; }
.methode__karte b { font-size: 19px; color: var(--navy); margin-bottom: 8px; }
.methode__karte p { font-size: 15px; margin: 0 0 12px; flex: 1; }
.methode__beleg { display: flex; justify-content: center; gap: clamp(16px, 3vw, 34px); flex-wrap: wrap; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--linie); }
.methode__beleg span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--grau); }
.methode__beleg svg { width: 17px; height: 17px; color: var(--gold-dunkel); }
.methode__beleg b { color: var(--navy); }

.ueber__banner img { width: 100%; border-radius: var(--radius); box-shadow: var(--schatten); aspect-ratio: 3 / 2; object-fit: cover; }

.manifest { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.manifest__text p { font-size: 17px; }
.manifest__text b { color: var(--navy); }

.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.team__karte { overflow: hidden; }
.team__bild { aspect-ratio: 2 / 3; overflow: hidden; background: var(--creme); }
.team__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.team__body { padding: 22px 24px 24px; }
.team__body b { display: block; font-size: 19px; color: var(--navy); }
.team__rolle { display: block; font-size: 14px; color: var(--gold-dunkel); font-weight: 700; margin-bottom: 10px; }
.team__body p { font-size: 15px; margin: 0; }

/* ============================================================
   BEWERTUNGSSEITE IM FOKUS-MODUS (wenig Auswege, klarer Funnel-Weg)
   ============================================================ */
.mwi-header--fokus .mwi-header__inner { justify-content: space-between; }
.mwi-header__tel { display: inline-flex; align-items: center; gap: 9px; color: var(--navy); font-weight: 700; font-size: 15.5px; text-decoration: none; }
.mwi-header__tel svg { width: 18px; height: 18px; color: var(--gold-dunkel); }
.mwi-header__tel:hover { color: var(--gold-dunkel); }
.mwi-footer--fokus { padding: 26px 0; }
.mwi-footer__fokus-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255,255,255,.55); }

.bewertung-fokus__karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-bottom: 30px; }
.bewertung-fokus__karte { padding: 30px 26px 26px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.bewertung-fokus__karte b { font-size: 21px; color: var(--navy); margin-top: 8px; }
.bewertung-fokus__sub { font-size: 14.5px; color: var(--grau); flex: 1; margin-bottom: 18px; }
.bewertung-fokus__abschluss { text-align: center; margin-top: 34px; }
.bewertung-fokus__abschluss .btn-micro { margin-top: 12px; }
.bewertung-fokus__abschluss a[href^="tel"] { color: var(--gold-dunkel); font-weight: 700; }

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

/* ============================================================
   IMMOBILIENPREISE
   ============================================================ */
.preise__kopf h1 { max-width: 20ch; }
.preise__werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.preise__wert { padding: 26px 24px; text-align: center; }
.preise__wert-label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grau-hell); }
.preise__wert b { display: block; margin: 10px 0 6px; font-size: clamp(26px, 3vw, 36px); font-weight: 800; color: var(--navy); }
.preise__wert.ist-platzhalter b { color: var(--grau-hell); }
.preise__wert-zusatz { font-size: 13.5px; color: var(--grau); }
/* Ortsvergleich auf der Preis-Übersichtsseite */
.preise__orte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.preise__ort { display: flex; flex-direction: column; padding: 26px 24px; text-decoration: none; }
.preise__ort-name { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grau-hell); }
.preise__ort-zeilen { margin: 16px 0 4px; }
.preise__ort-zeilen div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.preise__ort-zeilen div:last-child { border-bottom: 0; }
.preise__ort-zeilen span { font-size: 13.5px; color: var(--grau); }
.preise__ort-zeilen b { font-size: 19px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.preise__ort-zeilen i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--grau-hell); }
.preise__ort-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; color: var(--gold-dunkel); font-weight: 700; font-size: 14.5px; }
.preise__ort-link svg { width: 16px; height: 16px; }
@media (max-width: 820px) { .preise__orte { grid-template-columns: 1fr; } }

.preise__quelle-hinweis { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 14px 18px; background: var(--creme-hell); border-radius: var(--radius-xs); font-size: 14.5px; color: var(--grau); }
.preise__quelle-hinweis svg { width: 18px; height: 18px; color: var(--gold-dunkel); flex-shrink: 0; margin-top: 2px; }
.preise__quelle-hinweis b { color: var(--navy); }
.preise__quelle-hinweis a { color: var(--gold-dunkel); }
.preise__quelle-hinweis span { line-height: 1.7; }
.preise__text > p { font-size: 17px; max-width: 68ch; }
.preise__faktoren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 26px 0; }
.preise__faktor { padding: 24px 26px; }
.preise__faktor b { display: block; color: var(--navy); font-size: 17px; margin-bottom: 8px; }
.preise__faktor p { font-size: 15px; margin: 0; }
.preise__hinweis { display: flex; gap: 10px; align-items: flex-start; padding: 16px 20px; background: var(--weiss); border-left: 3px solid var(--gold); border-radius: var(--radius-xs); font-size: 15.5px; }
.preise__hinweis svg { width: 18px; height: 18px; color: var(--gold-dunkel); flex-shrink: 0; margin-top: 3px; }

/* ============================================================
   BLOG / ARTIKEL
   ============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.blog-karte { overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.blog-karte__bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--creme); display: flex; align-items: center; justify-content: center; }
.blog-karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.blog-karte:hover .blog-karte__bild img { transform: scale(1.04); }
.blog-karte__leer svg { width: 40px; height: 40px; color: var(--grau-hell); opacity: .45; }
.blog-karte__body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.blog-karte__meta { font-size: 13px; color: var(--grau-hell); margin-bottom: 10px; }
.blog-karte__body h2, .blog-karte__body h3 { font-size: 19px; line-height: 1.35; margin-bottom: 10px; }
.blog-karte__body p { font-size: 15px; flex: 1; }
.blog-karte .split__link { margin-top: 8px; }
.blog-pagination { margin-top: 40px; text-align: center; }
.blog-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; margin: 0 4px; border: 1px solid var(--linie); border-radius: var(--radius-xs); text-decoration: none; color: var(--navy); }
.blog-pagination .current { background: var(--navy); color: var(--weiss); border-color: var(--navy); }

.artikel { padding-top: 26px; }
.artikel__kopf { max-width: 780px; margin-inline: auto; text-align: center; }
.artikel__kopf .chip { margin-bottom: 16px; }
.artikel__kopf h1 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 22px; }
.artikel__meta { display: inline-flex; align-items: center; gap: 14px; text-align: left; font-size: 14px; color: var(--grau); }
.artikel__meta img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--gold-hell); }
.artikel__meta b { color: var(--navy); }
.artikel__bild { max-width: 900px; margin: 34px auto 0; }
.artikel__bild img { width: 100%; border-radius: var(--radius); }
.artikel__body { max-width: 720px; margin: 40px auto 0; font-size: 17.5px; line-height: 1.75; }
.artikel__body h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 1.6em 0 .5em; }
.artikel__body h3 { font-size: 20px; margin: 1.4em 0 .4em; }
.artikel__body ul, .artikel__body ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.artikel__body li { margin-bottom: .5em; }
.artikel__body blockquote { margin: 1.6em 0; padding: 20px 26px; background: var(--creme-hell); border-left: 3px solid var(--gold); border-radius: var(--radius-xs); font-size: 17px; color: var(--navy); }
.artikel__body blockquote p:last-child { margin-bottom: 0; }
.artikel__body a { color: var(--gold-dunkel); }
.artikel__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 34px; max-width: 900px; margin: 0 auto; }
.artikel__cta b { display: block; font-size: 22px; color: var(--navy); margin: 4px 0 4px; }
.artikel__cta span { font-size: 15px; color: var(--grau); }

@media (max-width: 980px) {
	.manifest { grid-template-columns: minmax(0, 1fr); }
	.team, .blog-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.preise__werte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 620px) {
	.team, .blog-grid, .preise__werte, .preise__faktoren { grid-template-columns: minmax(0, 1fr); }
	.artikel__cta { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   OBJEKT-ÜBERSICHT MIT FILTER
   ============================================================ */
.uebersicht__kopf { padding-bottom: 26px; }
.uebersicht__kopf h1 { max-width: 18ch; margin-bottom: 18px; }
.uebersicht__intro { max-width: 62ch; }
.uebersicht__intro p { font-size: 17px; }
.uebersicht__offmarket { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; background: var(--creme-hell); border-radius: var(--radius-xs); border-left: 3px solid var(--gold); }
.uebersicht__offmarket svg { width: 19px; height: 19px; color: var(--gold-dunkel); flex-shrink: 0; margin-top: 2px; }
.uebersicht__offmarket b { color: var(--navy); }

/* Filter */
.filter { margin-bottom: 34px; }
.filter__leiste { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--linie); }
.filter__toggle { padding: 12px 22px; }
.filter__toggle svg { width: 18px; height: 18px; }
.filter__zaehler { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--gold-grad); color: var(--navy); font-size: 12.5px; font-weight: 800; }
.filter__ergebnis { color: var(--grau); font-size: 15px; }
.filter__ergebnis b { color: var(--navy); font-size: 17px; }
.filter__sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--grau-hell); }
.filter__sort svg { width: 18px; height: 18px; }
.filter__sort select { padding: 10px 14px; border: 1px solid var(--linie); border-radius: var(--radius-xs); background: var(--weiss); font-family: var(--font); font-size: 14.5px; color: var(--navy); cursor: pointer; }
.filter__panel { padding: 24px 0 4px; }
.filter__felder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 18px; }
.filter__aktionen { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.filter__reset { color: var(--grau-hell); font-size: 14.5px; text-decoration: none; }
.filter__reset:hover { color: var(--gold-dunkel); text-decoration: underline; }

.uebersicht__leer { text-align: center; padding: 48px 32px; }
.uebersicht__leer .icon-kreis { margin-bottom: 16px; }
.uebersicht__leer b { display: block; font-size: 20px; color: var(--navy); margin-bottom: 8px; }
.uebersicht__leer p { max-width: 52ch; margin: 0 auto 22px; }
.uebersicht__leer-aktionen { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Suchauftrag */
.suchauftrag { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 44px); padding: clamp(26px, 3.5vw, 44px); }
.suchauftrag__text h2 { margin-bottom: 14px; }
.suchauftrag__schritte { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 18px; }
.suchauftrag__schritte li { display: flex; gap: 16px; align-items: flex-start; }
.suchauftrag__schritte > li > span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-grad); color: var(--navy); font-weight: 800; font-size: 15px; flex-shrink: 0; }
.suchauftrag__schritte b { display: block; color: var(--navy); font-size: 16.5px; margin-bottom: 3px; }
.suchauftrag__schritte p { margin: 0; font-size: 15px; }
.suchauftrag__form { background: var(--creme-hell); border-radius: var(--radius-s); padding: clamp(22px, 2.5vw, 30px); }

/* Querlinks */
.querlinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.querlinks__spalte a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linie); color: var(--navy); text-decoration: none; font-size: 15px; transition: var(--uebergang); }
.querlinks__spalte a:hover { color: var(--gold-dunkel); padding-left: 4px; }
.querlinks__spalte a svg { width: 16px; height: 16px; opacity: .4; }
.querlinks__spalte a.ist-hier { color: var(--grau-hell); pointer-events: none; }
.querlinks__spalte a.ist-hier .chip { font-size: 10.5px; padding: 4px 10px; }

@media (max-width: 980px) {
	.filter__felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.suchauftrag { grid-template-columns: minmax(0, 1fr); }
	.querlinks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 620px) {
	.filter__felder { grid-template-columns: minmax(0, 1fr); }
	.filter__sort { margin-left: 0; width: 100%; }
	.filter__sort select { flex: 1; }
	.querlinks { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   EXPOSÉ-DETAILSEITE
   ============================================================ */
.expose { padding-top: 26px; padding-bottom: 0; }
.expose > section, .expose > .expose__body { margin-bottom: 44px; }

.expose__breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--grau-hell); padding: 8px 0 20px; }
.expose__breadcrumb a { color: var(--grau); text-decoration: none; }
.expose__breadcrumb a:hover { color: var(--gold-dunkel); }
.expose__breadcrumb svg { width: 15px; height: 15px; transform: rotate(-90deg); opacity: .5; }

.expose__kopf { margin-bottom: 26px; }
.expose__kopf .chip { margin-bottom: 16px; }
.expose__kopf h1 { max-width: 1000px; font-size: clamp(32px, 3.7vw, 48px); margin-bottom: 12px; }
.expose__ort { display: flex; align-items: center; gap: 8px; color: var(--grau); font-size: 16px; margin: 0; }
.expose__ort svg { width: 18px; height: 18px; color: var(--gold-dunkel); }

/* Galerie */
.expose__galerie { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; margin-bottom: 40px; }
.expose__galerie figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.expose__galerie-haupt { aspect-ratio: 3 / 2; }
.expose__galerie-haupt img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.expose__galerie figure:hover img { transform: scale(1.03); }
/* Nur ein Bild vorhanden: volle Breite statt schmaler Spalte. */
.expose__galerie--einzeln { grid-template-columns: 1fr; }
.expose__galerie--einzeln .expose__galerie-haupt { aspect-ratio: 21 / 9; }
.expose__galerie-neben { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.expose__galerie-neben figure { aspect-ratio: auto; }
.expose__galerie-neben img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.expose__galerie figcaption { position: absolute; left: 14px; bottom: 14px; margin: 0; }
.expose__alle-bilder { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: none; border-radius: 12px; background: var(--weiss); color: var(--navy); font-family: var(--font); font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: var(--schatten); transition: var(--uebergang); }
.expose__alle-bilder:hover { background: var(--navy); color: var(--gold-hell); }
.expose__alle-bilder svg { width: 17px; height: 17px; }

/* Eckdaten-Leiste */
/* Beschriftung steht über dem Icon und bekommt die volle Zellenbreite, der Wert
   sitzt direkt rechts neben dem Icon. Vorher teilten sich Icon und Beschriftung
   eine Zeile, dadurch stieß „Wohnfläche" an die Trennlinie und „Energieklasse"
   lief auf dem Handy aus der Box heraus. */
.expose__eckdaten { display: flex; flex-wrap: wrap; padding: 22px 10px; }
.expose__eckdaten > div { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 8px; padding: 8px 22px; }
.expose__eckdaten > div + div { border-left: 1px solid var(--linie); }
.expose__eckdaten-zeile { display: flex; align-items: center; gap: 13px; min-width: 0; }
.expose__eckdaten .icon-kreis { width: 44px; height: 44px; flex: 0 0 44px; }
.expose__eckdaten .label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--grau-hell); overflow-wrap: anywhere; }
.expose__eckdaten .wert { display: block; font-size: 19px; font-weight: 800; color: var(--navy); white-space: nowrap; }

/* Zwei-Spalten-Layout */
/* WICHTIG: kein align-items:start — die Aside-Spalte muss auf volle Zeilenhöhe
   strecken, sonst hat position:sticky im Kompass keinen Laufweg. */
.expose__body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; }
.expose__haupt > section { margin-bottom: 44px; }
.expose__haupt h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 22px; }
.expose__text { color: var(--grau); font-size: 16.5px; }
.expose__text p { margin-bottom: 1.1em; }
.expose__text[data-mwi-mehr] { max-height: 340px; overflow: hidden; position: relative; transition: max-height 0.4s ease; }
.expose__text[data-mwi-mehr].offen { max-height: 3000px; }
.expose__text[data-mwi-mehr]:not(.offen)::after { content: ''; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(transparent, var(--weiss)); }
.expose__mehr-btn { margin-top: 8px; background: none; border: none; color: var(--gold-dunkel); font-family: var(--font); font-weight: 700; font-size: 15px; cursor: pointer; padding: 0; }
.expose__mehr-btn:hover { text-decoration: underline; }

/* Ausstattung */
.expose__ausstattung { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.expose__aus-karte { padding: 24px 26px; }
.expose__aus-kicker { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dunkel); margin-bottom: 14px; }
.expose__aus-kicker svg { width: 16px; height: 16px; }
.expose__aus-karte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.expose__aus-karte li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--navy); }
.expose__aus-karte .check { width: 22px; height: 22px; flex-shrink: 0; }

/* Daten & Fakten */
.expose__fakten { margin-bottom: 18px; overflow: hidden; }
.expose__fakten-kopf { display: flex; align-items: center; gap: 12px; padding: 18px 24px; background: var(--creme-hell); border-bottom: 1px solid var(--linie); font-weight: 700; color: var(--navy); font-size: 16px; }
.expose__fakten-kopf .icon-kreis { width: 38px; height: 38px; }
.expose__fakten-kopf svg { width: 19px; height: 19px; }
.expose__fakten-grid { display: grid; grid-template-columns: 1fr 1fr; }
.expose__fakten-grid > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 24px; border-bottom: 1px solid var(--linie); }
.expose__fakten-grid > div:nth-child(odd) { border-right: 1px solid var(--linie); }
.expose__fakten-grid .label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau-hell); }
.expose__fakten-grid .wert { font-weight: 700; color: var(--navy); font-size: 15.5px; text-align: right; }

/* Energie-Skala */
.energie-skala { position: relative; padding: 40px 24px 22px; }
.energie-skala__balken { display: flex; border-radius: 8px; overflow: hidden; }
.energie-skala__balken span { flex: 1; text-align: center; font-size: 11px; font-weight: 700; color: rgba(0,0,0,.55); padding: 7px 0; }
.energie-skala__marker { position: absolute; top: 8px; transform: translateX(-50%); transition: left 0.8s cubic-bezier(.4,0,.2,1); }
.energie-skala__marker span { display: inline-block; background: var(--navy); color: #fff; font-weight: 800; font-size: 13px; padding: 4px 12px; border-radius: 8px; position: relative; }
.energie-skala__marker span::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--navy); border-bottom: 0; }
.energie-skala:not(.animiert) .energie-skala__marker { left: 0 !important; opacity: 0; }
.energie-skala.animiert .energie-skala__marker { opacity: 1; }

.expose__grundriss-hinweis { display: flex; align-items: center; gap: 18px; padding: 24px 26px; }
.expose__grundriss-hinweis b { display: block; color: var(--navy); }
.expose__grundriss-hinweis span { color: var(--grau); font-size: 15px; }
.expose__lage-hinweis { display: flex; align-items: center; gap: 8px; color: var(--grau-hell); font-size: 14px; margin-top: 14px; }
.expose__lage-hinweis svg { width: 16px; height: 16px; }

/* Sticky Kompass */
.expose__kompass-wrap { position: relative; height: 100%; }
.expose__kompass { position: sticky; top: 100px; padding: 26px 26px 28px; }
.expose__kompass-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dunkel); margin-bottom: 12px; }
.expose__kompass-preis { font-size: 34px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.expose__kompass-preis span { font-size: 16px; font-weight: 600; color: var(--grau); }
.expose__kompass-sub { color: var(--grau); font-size: 14px; margin-bottom: 18px; }
.expose__kompass-daten { margin: 0 0 20px; padding: 18px 0 4px; border-top: 1px solid var(--linie); }
.expose__kompass-daten > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.expose__kompass-daten dt { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau-hell); margin: 0; }
.expose__kompass-daten dd { margin: 0; font-weight: 700; color: var(--navy); font-size: 15px; text-align: right; }
.expose__kompass-ap { display: flex; align-items: center; gap: 14px; margin: 18px 0 20px; }
.expose__kompass-ap img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 2px solid var(--gold-hell); }
.expose__kompass-ap b { display: block; color: var(--navy); font-size: 15.5px; }
.expose__reveal { display: block; background: none; border: none; padding: 2px 0; color: var(--gold-dunkel); font-family: var(--font); font-size: 13.5px; cursor: pointer; text-align: left; }
.expose__reveal:hover { text-decoration: underline; }
.expose__kompass .btn { margin-top: 10px; }
.expose__pdf svg { width: 17px; height: 17px; }
.expose__pdf-hinweis { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--grau-hell); }

/* Anfrage-Formular */
.expose__anfrage { margin-top: 20px; }
.expose__anfrage-karte { display: grid; grid-template-columns: 340px 1fr; overflow: hidden; }
/* Bild und Namensblock als eine gestapelte Einheit, identisch zum
   Kontaktformular auf der Startseite. Der Namensblock lag vorher als Overlay
   auf dem Foto und hat die abgebildete Person verdeckt. */
.expose__anfrage-foto { position: static; display: flex; flex-direction: column;
	align-content: start; gap: 12px; padding: clamp(20px, 2.2vw, 26px); background: var(--creme); }
.expose__anfrage-foto > img { width: 100%; height: auto; aspect-ratio: 4 / 5;
	object-fit: cover; object-position: 50% 15%; border-radius: var(--radius-s); }
.expose__anfrage-kontakt { position: static; inset: auto; width: 100%; margin: 0;
	background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-s);
	box-shadow: none; padding: 18px 22px; }
.expose__anfrage-kontakt .kicker { margin-bottom: 6px; }
.expose__anfrage-kontakt b { display: block; color: var(--navy); font-size: 17px; }
.expose__anfrage-kontakt span { color: var(--grau); font-size: 14px; }
.expose__anfrage-form { padding: 40px clamp(28px, 4vw, 48px); }
.expose__anfrage-form h2 { margin: 6px 0 12px; }
.expose__anfrage-form > p { color: var(--grau); font-size: 15.5px; margin-bottom: 24px; }
.expose__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.expose__form-erfolg { text-align: center; padding: 20px; }
.expose__form-erfolg .icon-kreis { margin: 0 auto 14px; }
.expose__form-erfolg b { display: block; font-size: 20px; color: var(--navy); margin-bottom: 8px; }
.expose__form-erfolg span { color: var(--grau); font-size: 15px; }

/* Lightbox */
.mwi-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0, 12, 20, 0.92); display: none; align-items: center; justify-content: center; }
.mwi-lightbox.offen { display: flex; }
.mwi-lightbox img { max-width: 90vw; max-height: 82vh; border-radius: 10px; }
.mwi-lightbox__zu, .mwi-lightbox__nav { position: absolute; background: rgba(255,255,255,.12); border: none; color: #fff; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.mwi-lightbox__zu:hover, .mwi-lightbox__nav:hover { background: rgba(255,255,255,.28); }
.mwi-lightbox__zu { top: 22px; right: 22px; }
.mwi-lightbox__zu svg { width: 22px; height: 22px; }
.mwi-lightbox__nav svg { width: 24px; height: 24px; }
.mwi-lightbox__prev { left: 22px; top: 50%; transform: translateY(-50%); }
.mwi-lightbox__next { right: 22px; top: 50%; transform: translateY(-50%); }
.mwi-lightbox__zaehler { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; letter-spacing: .05em; }
/* Abschlusskarte hinter dem letzten Bild, wenn es mehr Aufnahmen gibt als wir
   öffentlich zeigen. Bewusst im Look der Objektkarten, damit sie wie ein
   nächster Schritt wirkt und nicht wie eine Fehlermeldung. */
.mwi-lightbox__cta { max-width: min(90vw, 460px); background: #fff; border-radius: var(--radius); padding: clamp(28px, 5vw, 40px); text-align: center; }
.mwi-lightbox__cta b { display: block; font-size: clamp(21px, 3vw, 26px); color: var(--navy); margin-bottom: 10px; }
.mwi-lightbox__cta p { font-size: 15.5px; color: var(--grau); margin: 0 0 22px; }
.mwi-lightbox__cta .btn { width: 100%; justify-content: center; }

/* Scroll-Reveal */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.6s cubic-bezier(.2,.6,.2,1), transform 0.6s cubic-bezier(.2,.6,.2,1); will-change: opacity, transform; }
[data-reveal].sichtbar { opacity: 1; transform: none; }

@media (max-width: 980px) {
	.expose__body { grid-template-columns: 1fr; }
	.expose__kompass { position: static; }
	.expose__kompass-wrap { order: -1; }
	.expose__galerie { grid-template-columns: 1fr; }
	.expose__galerie-neben { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
	.expose__anfrage-karte { grid-template-columns: 1fr; }
	/* Einspaltig: das Foto braucht kein volles Hochformat mehr, sonst schiebt
	   es das Formular zu weit nach unten. Der Namensblock bleibt darunter. */
	.expose__anfrage-foto > img { aspect-ratio: 3 / 2; max-height: 300px; }
}
@media (max-width: 620px) {
	/* Enger, damit Icon und Wert nebeneinander in die halbe Breite passen und
	   ein Wert wie „73,7 m²" nicht umbricht. */
	.expose__eckdaten { padding: 18px 4px; }
	.expose__eckdaten > div { min-width: 45%; padding: 8px 12px; gap: 6px; }
	.expose__eckdaten > div:nth-child(odd) { border-left: none; }
	.expose__eckdaten-zeile { gap: 10px; }
	.expose__eckdaten .icon-kreis { width: 38px; height: 38px; flex: 0 0 38px; }
	.expose__eckdaten .icon-kreis svg { width: 18px; height: 18px; }
	.expose__eckdaten .wert { font-size: 17.5px; }
	.expose__eckdaten .label { font-size: 10.5px; letter-spacing: 0.1em; }
	.expose__ausstattung, .expose__fakten-grid, .expose__form-grid { grid-template-columns: 1fr; }
	.expose__fakten-grid > div:nth-child(odd) { border-right: none; }
	.energie-skala__balken span { font-size: 9px; }
}

/* Reduced Motion: alles sofort sichtbar, keine Transforms */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.energie-skala .energie-skala__marker { opacity: 1 !important; }
}

/* ==========================================================================
   MOBILE-FIRST-KORREKTUREN (Stand 20.07.2026)
   ==========================================================================
   Vergleich mit der Referenz auf 390px zeigte: unsere Startseite war mobil
   21.498px lang, die Referenz 16.869px. Ursachen waren durchgehend starre
   Desktop-Maße (Sektionsabstand 64px, H2 30px) und im Hero die Reihenfolge
   Bild-vor-Text, wodurch der CTA unter die Falz rutschte.

   Alles hier steht bewusst am Dateiende und ausschließlich in max-width-
   Abfragen: Das Desktop-Layout bleibt unberührt.
   ========================================================================== */

@media (max-width: 820px) {

	/* --- Hero: erst die Botschaft, dann das Bild -------------------------
	   Wie in der Referenz. Damit stehen Headline, USPs und der CTA-Button im
	   ersten Bildschirm, statt hinter einem halbseitigen Foto zu verschwinden. */
	.hero__grid { display: flex; flex-direction: column; gap: 26px; }
	.hero__text { order: 1; }
	.hero__bild { order: 2; }

	.hero { padding: 26px 0 34px; }
	.hero h1 { font-size: 31px; line-height: 1.14; margin-bottom: 14px; }
	.hero__sub { font-size: 16.5px; line-height: 1.55; margin-bottom: 20px; max-width: none; }
	.hero__trust { margin-bottom: 14px; }

	/* --- Vertikaler Rhythmus ---------------------------------------------
	   Referenz liegt bei 30 bis 56px, wir hatten überall starre 64px. */
	:root { --sektion-y: 46px; }
	.sektion-kopf { margin-bottom: 26px; }
	.sektion-kopf .sub { font-size: 16.5px; line-height: 1.55; }

	/* --- Typografie kompakter --------------------------------------------- */
	h1 { font-size: 31px; }
	h2 { font-size: 26px; line-height: 1.2; }
	h3 { font-size: 21px; }

	/* --- Sektionsköpfe zentriert, wie in der Referenz ---------------------- */
	.sektion-kopf { text-align: center; margin-left: auto; margin-right: auto; }
	.sektion-kopf .kicker { justify-content: center; }

	/* --- Listen und Karten enger ------------------------------------------ */
	.check-liste { gap: 11px; margin-bottom: 22px; }
	.check-liste li { font-size: 15.5px; }
	.check-liste .zusatz { font-size: 14.5px; }

	/* --- Buttons: volle Breite, damit sie als Handlungsanker wirken --------
	   Seitliches Padding runter und Schrift leicht kleiner, sonst bricht die
	   Beschriftung auf zwei Zeilen. Die Referenz hält den CTA einzeilig. */
	.hero .btn--gross, .sektion-kopf + .btn, .btn--voll { width: 100%; }
	.hero .btn--gross { justify-content: center; padding: 17px 20px; font-size: 16px; }
}

/* --------------------------------------------------------------------------
   Gepinnter Ablauf auch auf dem Handy
   --------------------------------------------------------------------------
   Der Effekt läuft dort jetzt ebenfalls (siehe main.js). Auf schmalen Schirmen
   braucht die Karte fast die volle Breite, sonst wird sie unlesbar klein;
   der Nachbar ragt nur noch angeschnitten herein.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
	.ablauf-scroll__spur { --kb: min(80vw, 420px); gap: 20px; }
	.ablauf-scroll__sticky { min-height: 100svh; padding: 20px 0; }
	.ablauf-scroll .ablauf__karte { padding: 22px 20px; }
	.ablauf-scroll .ablauf__karte-kopf { margin-bottom: 14px; }
	.ablauf-scroll .ablauf__karte .icon-kreis { width: 48px; height: 48px; }
	.ablauf-scroll .ablauf__karte .icon-kreis svg { width: 22px; height: 22px; }
	.ablauf-scroll .ablauf__nr { font-size: 34px; }
	.ablauf-scroll .ablauf__karte b { font-size: 20px; margin-bottom: 8px; }
	.ablauf-scroll .ablauf__karte p { font-size: 15px; }
	.ablauf-scroll__fortschritt { margin-top: 18px; }
}

@media (max-width: 620px) {
	.hero h1, h1 { font-size: 29px; }
	h2 { font-size: 25px; }
	:root { --sektion-y: 42px; }
}

/* --------------------------------------------------------------------------
   Mobil: die Zusatz-Sektionen kompakt halten
   --------------------------------------------------------------------------
   FAQ, Bewertungstool, "Kürzlich verkauft" und der Notar-Block existieren auf
   der Referenz-Startseite nicht, sie kamen aus Nicos Feedback. Sie bleiben
   (SEO und Wunsch), werden mobil aber gestrafft, sonst wächst die Seite gegen-
   über der Referenz um mehrere Bildschirme.
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {

	/* FAQ: sechs volle Karten waren mobil über 330px hoch. Der Chip ist reine
	   Zierde, der Antworttext wird angerissen. Der Link führt zur ganzen
	   Antwort, der volle Text bleibt für Suchmaschinen im Dokument. */
	.faq { gap: 10px; }
	.faq__frage { padding: 16px 18px; gap: 12px; }
	.faq__frage h3 { font-size: 16.5px; }
	.faq__nr { width: 28px; height: 28px; font-size: 12px; }
	.faq__antwort { padding: 14px 18px 16px; }

	/* "Kürzlich verkauft" und Notar-Block */
	.verkauft, .notar { gap: 14px; }
	.verkauft__body, .notar__inhalt { padding: 16px 18px; }

	/* Bewertungstool */
	.bewertung__karten { gap: 12px; }
	.bewertung__stepper { margin-bottom: 18px; }

	/* Objektkarten etwas enger, das Bild bleibt unangetastet */
	.objekt-karte__body { padding: 16px 18px 12px; }
	.objekt-karte__titel { font-size: 17.5px; margin-bottom: 12px; }
	.objekt-karte__fuss { padding: 12px 18px; }
	.objekt-grid { gap: 16px; }

	/* Leistungs- und Rezensionskarten.
	   Nicht .split__spalte anfassen: das ist der Spalten-Wrapper ohne eigenes
	   Padding, eine Regel darauf vergrößert die Sektion statt sie zu straffen. */
	.split__karten { gap: 12px; }
	.split__karte { padding: 20px 18px 18px; }
	.split__karte h3 { font-size: 17.5px; margin: 12px 0 6px; }
	.split__karte p { font-size: 14.5px; margin-bottom: 14px; }
	.rev__karten .karte { padding: 20px 18px; }
}

/* --------------------------------------------------------------------------
   Objektseite auf dem Handy
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
	/* Der "Alle Bilder"-Knopf sitzt rechts unten, die Bildbeschriftung links
	   unten. Auf schmalen Schirmen ist dafür kein Platz nebeneinander, deshalb
	   tritt die Beschriftung genau in diesem einen Bild zurück. In der Lightbox
	   wird sie weiterhin angezeigt. */
	.expose__galerie-neben .hat-alle-knopf figcaption { display: none; }
	.expose__alle-bilder { left: 10px; right: 10px; bottom: 10px; justify-content: center; padding: 9px 10px; font-size: 12.5px; }
	.expose__alle-bilder svg { width: 15px; height: 15px; }
	/* Die Vorschaubilder sind hier nur rund 170px breit. In Desktop-Größe
	   verdeckt die Beschriftung fast das ganze Bild, deshalb kleiner. */
	.expose__galerie-neben figcaption { left: 8px; right: 8px; bottom: 8px; padding: 4px 9px;
		font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

	/* Das Porträt ist hochkant (2:3). Auf schmalen Schirmen etwas höher zeigen,
	   damit vom Gesicht genug zu sehen ist. */
	.expose__anfrage-foto > img { aspect-ratio: 4 / 5; max-height: 380px; object-position: 50% 12%; }

	/* Nachrichtenfeld: der vorausgefüllte Text braucht mehr als drei Zeilen,
	   sonst ist er beim Öffnen angeschnitten. */
	.expose__anfrage-form textarea { min-height: 132px; }
}

/* --------------------------------------------------------------------------
   Lokale Makler-Landingpages (/immobilienmakler-[ort]/)
   -------------------------------------------------------------------------- */
.ort__intro { max-width: 70ch; }
.ort__intro p { font-size: 17px; line-height: 1.72; margin: 0 0 18px; }
.ort__quelle { font-size: 14px; color: var(--grau-hell); border-left: 2px solid var(--gold-hell);
	padding-left: 14px; margin: 0 0 26px; }
.ort__lagen { display: flex; flex-wrap: wrap; gap: 10px; }
.ort__lagen span, .ort__lagen a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
	border-radius: 999px; background: var(--weiss); border: 1px solid var(--linie);
	font-size: 15px; font-weight: 600; color: var(--navy); }
.ort__lagen svg { width: 15px; height: 15px; color: var(--gold-dunkel); }
.ort__lagen a { text-decoration: none; transition: var(--uebergang); }
.ort__lagen a:hover { border-color: var(--gold); color: var(--gold-dunkel); }
.warum__liste--breit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }

@media (max-width: 980px) {
	.warum__liste--breit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
	.ort__intro p { font-size: 16px; line-height: 1.65; }
	.ort__lagen { gap: 8px; }
	.ort__lagen span { padding: 8px 13px; font-size: 14px; }
}

/* Ratgeber: Themenfilter über der Beitragsliste */
.ratgeber__filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(24px, 3vw, 36px); }
.ratgeber__kat { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
	border: 1px solid var(--linie); background: var(--weiss); color: var(--navy); font-size: 15px;
	font-weight: 600; text-decoration: none; transition: var(--uebergang); }
.ratgeber__kat span { font-size: 12.5px; color: var(--grau-hell); font-weight: 700; }
.ratgeber__kat:hover { border-color: var(--gold); color: var(--gold-dunkel); }
.ratgeber__kat.ist-aktiv { background: var(--navy); border-color: var(--navy); color: var(--weiss); }
.ratgeber__kat.ist-aktiv span { color: var(--gold-hell); }
.blog-karte__meta b { color: var(--gold-dunkel); font-weight: 700; }

@media (max-width: 820px) {
	.ratgeber__filter { gap: 8px; margin-bottom: 22px; }
	.ratgeber__kat { padding: 8px 14px; font-size: 14px; }
}

/* Suchformular auf der Ergebnisseite */
.suche-form { display: flex; gap: 10px; max-width: 520px; margin: 22px auto 0; }
.suche-form input { flex: 1; padding: 14px 18px; border: 1px solid var(--linie); border-radius: 999px;
	font-family: var(--font); font-size: 16px; background: var(--weiss); color: var(--navy); }
.suche-form input:focus { outline: none; border-color: var(--gold); }
@media (max-width: 620px) {
	.suche-form { flex-direction: column; }
	.suche-form .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Lesbarkeit (Ergebnis der Abnahme vom 20.07.2026)
   --------------------------------------------------------------------------
   29 Textstellen lagen unter dem WCAG-AA-Schwellenwert, graue Hilfstexte bei
   2,57 statt 4,5. Das ist keine Formalie: Nicos Zielgruppe sind Eigentümer,
   häufig über 50, und genau die lesen hellgraues Kleingedrucktes schlecht.
   Die Farben bleiben in der Markenwelt, sie werden nur so weit abgedunkelt,
   dass der Kontrast stimmt.
   -------------------------------------------------------------------------- */
:root {
	--grau-hell: #6B6B6B;      /* vorher heller, jetzt 4,5:1 auf Weiß */
	--gold-dunkel: #8A7020;    /* goldene Links und Akzente auf hellem Grund */
}
.sterne, .review-karte__sterne { color: #C8890A; }  /* Sterne waren bei 1,85:1 */
.kontaktform__status { color: var(--navy); }        /* war der schlechteste Wert mit 1,30:1 */
.btn-micro, .zusatz, .optional, .formular-reassurance,
.standort__versprechen, .review-karte__datum { color: #5E5E5E; }
.objekt-karte__art, .objekt-karte__daten .label, .expose__fakten .label { color: #5E5E5E; }

/* Sprunglink: nur sichtbar, wenn er den Tastaturfokus hat.
   Tastaturnutzer mussten sich vorher durch die ganze Navigation tabben. */
.sprunglink { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 14px 22px;
	background: var(--navy); color: var(--weiss); font-weight: 700; text-decoration: none;
	border-radius: 0 0 var(--radius-s) 0; }
.sprunglink:focus { left: 0; }

/* Für Screenreader, optisch nicht vorhanden. Schließt Lücken in der
   Überschriften-Gliederung, ohne das Layout zu verändern. */
.nur-fuer-screenreader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   Rückruf-Angebot (Bewertung 20.07.2026)
   --------------------------------------------------------------------------
   Bewusst auf navy, damit sich der Block vom Wechsel weiß/creme abhebt und als
   eigenständiges Angebot gelesen wird, nicht als weitere Sektion.
   -------------------------------------------------------------------------- */
.rueckruf__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.rueckruf__text h2 { margin-bottom: 14px; }
.rueckruf__text p { color: rgba(255, 255, 255, 0.78); font-size: 17px; line-height: 1.65; margin-bottom: 22px; max-width: 46ch; }
.rueckruf__punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rueckruf__punkte li { display: flex; align-items: center; gap: 11px; color: rgba(255, 255, 255, 0.9); font-size: 15.5px; }
.rueckruf__punkte svg { width: 15px; height: 15px; flex: none; color: var(--gold-hell); }
.rueckruf__karte { padding: clamp(26px, 3vw, 38px); }
.rueckruf__karte .feld + .feld { margin-top: 16px; }
.rueckruf__karte .btn { margin-top: 20px; }
/* Die Karte steht auf navy, ist selbst aber hell. Die Regel
   .mwi-sektion--navy p färbt sonst auch diesen Text weiß, er wäre unsichtbar. */
.rueckruf__karte p, .rueckruf__karte label { color: var(--grau); }
.rueckruf__karte .formular-reassurance { text-align: center; margin-top: 14px; }
.rueckruf__karte .formular-reassurance a { color: var(--gold-dunkel); font-weight: 700; }

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

/* --------------------------------------------------------------------------
   Feinschliff nach der Bewertung vom 20.07.2026
   -------------------------------------------------------------------------- */

/* H1-Umbruch nur am Desktop erzwingen. Mobil bricht der Text ohnehin. */
.nur-desktop { display: none; }
@media (min-width: 981px) { .nur-desktop { display: inline; } }

/* Hero: Bild NICHT strecken.
   Ein früherer Versuch, Bild und Text auf gleiche Unterkante zu bringen, nutzte
   height:100% mit object-fit:cover. Das hat das Querformat in einen fast
   quadratischen Rahmen gezwängt und 36 Prozent des Bildes abgeschnitten, links
   und rechts. Genau das war schon einmal beanstandet worden.
   Richtige Lösung: Das Bild behält sein Seitenverhältnis, beide Spalten werden
   vertikal zentriert. Der verbleibende Weißraum verteilt sich dann gleichmäßig
   oben und unten und liest sich als Absicht, nicht als Fehler. */
@media (min-width: 981px) {
	.hero__grid { align-items: center; }
	.hero__bild img { height: auto; object-fit: contain; }
}

/* Vertikaler Rhythmus: Kernsektionen bekommen mehr Luft, sekundäre weniger.
   Vorher hatten alle 13 Sektionen denselben Abstand, wodurch beim Scrollen kein
   Gefühl für Wichtigkeit entstand. */
/* Bewusst KEINE Variation der Sektionsabstände mehr.
   Ein früherer Versuch, über unterschiedliche Abstände Hierarchie zu erzeugen,
   ging in die falsche Richtung: Die Referenz wirkt gerade deshalb ruhig, weil
   alle Abschnitte denselben Rhythmus haben. Gleichmaß schlägt Betonung. */

/* Lesbarkeit im Ratgeber: 700px ergaben rund 75 Zeichen pro Zeile und lagen
   damit am oberen Rand des Komfortbereichs. 640px sind rund 68 Zeichen. */
.artikel__text { max-width: 640px; }
.artikel__text p, .artikel__text li { font-size: 17.5px; line-height: 1.72; }

/* Kartenlinks als erkennbarer Klickpunkt ausbilden, ohne die ruhige Karte
   in einen Button zu verwandeln. */
.split__karte .split__link, .faq__link {
	border: 1px solid var(--linie); border-radius: 999px; padding: 9px 16px;
	transition: var(--uebergang);
}
.split__karte:hover .split__link, .faq__karte[open] .faq__link:hover {
	border-color: var(--gold); background: var(--creme-hell);
}

/* Spam-Falle: für Menschen unsichtbar, Bots füllen sie aus und werden verworfen.
   Bewusst nicht display:none, das erkennen manche Bots. */
.mwi-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Fehlermeldung, wenn der Versand scheitert. Muss auffallen. */
.formular-fehler { margin-top: 14px; padding: 12px 16px; border-radius: var(--radius-s);
	background: #FDECEC; color: #8A1F1F; font-size: 15px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Korrekturen nach Nicos Durchgang (20.07.2026)
   -------------------------------------------------------------------------- */

/* "Warum Müller": Das Bild wirkte neben der fünfteiligen Liste zu klein.
   Es bekommt mehr Breite, die Liste wird etwas kompakter gesetzt. */
@media (min-width: 981px) {
	.warum { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
	.warum__bild img { aspect-ratio: 4 / 3; }
	.warum__liste { gap: 20px; }
	.warum__punkt p { font-size: 15.5px; line-height: 1.6; }
	.warum__punkt b { font-size: 17px; }
	.warum__punkt .icon-kreis { width: 46px; height: 46px; }
}

/* Kontaktformular: Foto kleiner und der Name als eigener Block darunter,
   überlappend wie auf der Referenz. Vorher füllte das Foto die ganze Spalte
   und der Name stand als schlichte Zeile darunter. */
.kontaktform__links { position: relative; }
.kontaktform__foto { aspect-ratio: 4 / 5; max-width: 300px; }
.kontaktform__person {
	position: relative;
	margin: -46px 0 0 auto;
	width: calc(100% - 46px);
	max-width: 290px;
	background: var(--weiss);
	border-radius: var(--radius-s);
	box-shadow: var(--schatten);
	padding: 16px 20px;
	z-index: 2;
}

@media (max-width: 980px) {
	/* Mobil steht das Foto oben, der Namensblock schiebt sich darunter.
	   Beide mittig, damit die Karte nicht am Rand klebt. */
	.kontaktform__foto { aspect-ratio: 4 / 3; max-width: 100%; max-height: 340px; }
	.kontaktform__person { margin: -40px auto 0; width: calc(100% - 40px); max-width: none; }
}

/* ==========================================================================
   Angleichung an die Referenz (Nicos Durchgang, 20.07.2026)
   ==========================================================================
   Drei Befunde aus dem direkten Vergleich:
   1. Unsere Abstände waren mit 120 bis 156px doppelt bis dreimal so groß wie
      die 30 bis 56px der Referenz. Die Seite wurde dadurch unnötig lang.
   2. In der Warum-Sektion saß das Bild 90px tiefer als die Liste, weil beide
      Spalten vertikal zentriert waren. Die Referenz setzt sie oben bündig.
   3. Beim Kontaktformular bilden Bild und Namensblock auf der Referenz eine
      gestapelte Einheit gleicher Breite. Bei uns überlappte der Block seitlich
      versetzt, was unruhig wirkte.
   ========================================================================== */

/* --- Sektionsköpfe kompakter, wie in der Referenz --- */
.sektion-kopf { margin-bottom: clamp(24px, 2.6vw, 36px); }
.sektion-kopf .sub { font-size: 17px; }

/* --- Hero: Bild füllt die Spalte aus --- */
@media (min-width: 981px) {
	.hero { padding: clamp(28px, 3vw, 44px) 0 clamp(24px, 2.6vw, 36px); }
	/* Bildspalte breiter als die Textspalte, wie in der Referenz. Das Bild wirkt
	   dadurch präsenter, ohne dass es beschnitten werden muss. */
	.hero__grid { grid-template-columns: 0.88fr 1.12fr; align-items: center; gap: clamp(32px, 3.6vw, 56px); }
	/* Das Bild darf die volle Spaltenbreite nutzen. Es behält sein
	   Seitenverhältnis, wird also weiterhin nicht beschnitten. */
	.hero__bild img { width: 100%; height: auto; object-fit: contain; }
}

/* --- Warum-Sektion: oben bündig und kompakter --- */
@media (min-width: 981px) {
	.warum { grid-template-columns: 1.05fr 0.95fr; align-items: start; gap: clamp(32px, 3.6vw, 56px); }
	.warum__bild img { aspect-ratio: 3 / 2; }
	.warum__liste { gap: 18px; }
	.warum__punkt p { font-size: 15px; line-height: 1.55; margin: 0; }
	.warum__punkt b { font-size: 16.5px; margin-bottom: 3px; display: block; }
	.warum__punkt .icon-kreis { width: 42px; height: 42px; }
	.warum__punkt .icon-kreis svg { width: 19px; height: 19px; }
}

/* --- Kontaktformular: Bild und Namensblock als eine Einheit --- */
.kontaktform__links { position: static; display: flex; flex-direction: column; gap: 12px; }
.kontaktform__foto { aspect-ratio: 4 / 5; max-width: none; width: 100%; }
.kontaktform__person {
	position: static;
	margin: 0;
	width: 100%;
	max-width: none;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: var(--radius-s);
	box-shadow: none;
	padding: 18px 22px;
}

@media (max-width: 980px) {
	.kontaktform__foto { aspect-ratio: 3 / 2; max-height: 300px; }
	.kontaktform__person { margin: 0; width: 100%; }
}

/* --- Hero-Bild: Hochformat-Teamfoto ---------------------------------------
   Das Motiv ist 1200x1800. In voller Höhe würde es den Hero sprengen, deshalb
   ein 4:5-Rahmen. Der Zuschnitt nimmt ausschließlich oben Hintergrund weg
   (object-position unterhalb der Mitte), die drei Personen bleiben vollständig
   im Bild. Seitlich wird nichts beschnitten, das war die Vorgabe. */
.hero__bild img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 72%; }
@media (min-width: 981px) {
	.hero__grid { grid-template-columns: 1.06fr 0.94fr; align-items: center; }
	.hero__bild img { max-height: 560px; width: 100%; }
}
@media (max-width: 980px) {
	/* Mobil KEIN flacherer Rahmen: ein 5:4-Ausschnitt hat Giulia oben
	   angeschnitten. Stattdessen etwas hochformatiger als am Desktop, damit
	   alle drei Gesichter mit Luft nach oben im Bild bleiben. */
	.hero__bild img { aspect-ratio: 3 / 4; object-position: 50% 78%; }
}

/* Vorher/Nachher-Vergleich mit ziehbarem Regler */
.vn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.vn-grid--solo { grid-template-columns: minmax(0, 620px); justify-content: center; }
.vn { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); background: var(--creme); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.vn__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* Das Vorher liegt oben und wird von links bis zur Reglerposition freigegeben. */
.vn__vorher { clip-path: inset(0 calc(100% - var(--vn, 50%)) 0 0); }
.vn__label { position: absolute; top: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: rgba(0, 26, 40, .72); color: #fff; pointer-events: none; }
.vn__label--vorher { left: 14px; }
.vn__label--nachher { right: 14px; }
.vn__linie { position: absolute; top: 0; bottom: 0; left: var(--vn, 50%); width: 2px; background: rgba(255, 255, 255, .92); transform: translateX(-1px); z-index: 3; pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 26, 40, .15); }
.vn__griff { position: absolute; top: 50%; left: var(--vn, 50%); transform: translate(-50%, -50%); z-index: 4; width: 46px; height: 46px; border-radius: 50%; border: none; background: #fff; color: var(--navy); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 26, 40, .28); cursor: ew-resize; }
.vn__griff svg { width: 22px; height: 22px; }
.vn__griff:focus-visible { outline: 3px solid var(--gold-dunkel); outline-offset: 3px; }
.vn-body { padding: 18px 4px 0; }
.vn-body h3 { font-size: 19px; margin-bottom: 6px; }
.vn-body p { font-size: 14.5px; color: var(--grau); margin: 0; }
@media (max-width: 820px) { .vn-grid { grid-template-columns: 1fr; gap: 28px; } }
.vn-hinweis { margin: 22px auto 0; max-width: 640px; text-align: center; font-size: 13px; color: var(--grau-hell); }
@media (prefers-reduced-motion: reduce) { .vn { scroll-behavior: auto; } }

/* Ablauf als sticky-Stapel (Fallback: saubere Schrittliste) */
.reise__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.reise__schritt { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 16px 18px; border-radius: var(--radius-xs); }
.reise__nr { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--linie); font-size: 14px; font-weight: 800; color: var(--gold-dunkel); font-variant-numeric: tabular-nums; }
.reise__schritt-text b { display: block; font-size: 18px; }
.reise__schritt-text p { margin: 4px 0 0; font-size: 14.5px; color: var(--grau); }
.reise__karten { display: none; }
/* Animierte Variante ab Desktop (JS setzt .reise--animiert) */
.reise--animiert .reise__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; flex: 1 1 auto; min-height: 0; }
/* Kein 100vh-Zentrieren mehr. Der Inhalt wird direkt unter der Überschrift
   angeheftet (Abstand wie im Rest der Seite), statt in der Bildschirmmitte zu
   schweben, was einen riesigen Abstand zur Überschrift erzeugt hat. */
/* JS heftet den ganzen Block an und setzt top + height passend zur Header-Höhe,
   sodass Überschrift und Schritte zusammen den Bildschirm füllen. */
.reise--animiert .reise__sticky { position: sticky; display: flex; flex-direction: column; padding-block: clamp(14px, 2.4vh, 30px); gap: clamp(14px, 2.4vh, 26px); }
/* .mwi-container hat margin:0 auto. Als Flex-Kind schrumpft es dadurch auf die
   Inhaltsbreite (die Karte ist absolut positioniert, also fast 0) und wird
   zentriert. Volle Breite erzwingen, dann greift die auto-Marge nicht mehr. */
.reise--animiert .reise__sticky > .mwi-container { width: 100%; }
.reise--animiert .reise__kopf { margin-bottom: 0; flex: 0 0 auto; }
.reise--animiert .reise__liste { align-content: center; }
.reise--animiert .reise__schritt { opacity: .5; transition: opacity .35s ease, background .35s ease, box-shadow .35s ease; }
.reise--animiert .reise__schritt.ist-aktiv { opacity: 1; background: #fff; box-shadow: 0 10px 30px rgba(0, 26, 40, .06); }
.reise--animiert .reise__nr { transition: background .35s, color .35s, border-color .35s; }
.reise--animiert .reise__schritt.ist-aktiv .reise__nr { background: var(--gold-grad); border-color: transparent; color: var(--navy); }
.reise--animiert .reise__schritt-text p { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; transition: max-height .4s ease, opacity .3s ease, margin .3s ease; }
.reise--animiert .reise__schritt.ist-aktiv .reise__schritt-text p { max-height: 150px; opacity: 1; margin-top: 4px; }
.reise--animiert .reise__karten { display: block; position: relative; height: 100%; min-height: clamp(280px, 38vh, 360px); }
/* Karte ist so hoch wie ihr Inhalt und sitzt mittig in der Spalte. Vorher füllte
   sie die ganze Höhe und wirkte mit dem Inhalt nur in der Mitte leer. */
.reise--animiert .reise__karte { position: absolute; top: 50%; left: 0; right: 0; display: flex; flex-direction: column; gap: 12px; padding: clamp(28px, 2.6vw, 40px); background: #fff; border-radius: var(--radius); box-shadow: var(--schatten); will-change: transform, opacity; }

/* Fortschrittsbalken: zeigt, bei welchem Schritt man ist. */
.reise__fortschritt { display: none; }
.reise--animiert .reise__fortschritt { display: flex; gap: 8px; flex: 0 0 auto; max-width: 520px; }
.reise__balken { flex: 1; height: 5px; border-radius: 5px; background: var(--linie); transition: background .45s ease; }
.reise__balken.ist-aktiv { background: var(--gold-grad); }
.reise--animiert .reise__karte .chip { align-self: flex-start; }
.reise--animiert .reise__karte h3 { font-size: clamp(22px, 2.4vw, 30px); margin: 0; }
.reise--animiert .reise__karte > p { margin: 0; font-size: 16px; color: var(--grau); max-width: 42ch; }

/* Ablauf-Stapel auch auf dem Handy: einspaltig, Karten volle Breite,
   Schrittliste ausgeblendet (die Info steht in der Karte). */
@media (max-width: 820px) {
	/* Einspaltiges Grid mit nur einem relativ positionierten Kind kollabiert auf
	   dem Handy auf Breite 0. Als Block nimmt der Bereich die volle Breite. */
	.reise--animiert .reise__grid { display: block; }
	.reise--animiert .reise__liste { display: none; }
	.reise--animiert .reise__karten { width: 100%; height: 100%; min-height: 280px; }
	.reise--animiert .reise__karte { padding: clamp(24px, 6vw, 34px); }
	/* Platz unten lassen, damit der schwebende CTA-Button die Karte nicht überdeckt. */
	.reise--animiert .reise__sticky { padding-bottom: clamp(92px, 15vh, 130px); }
	.reise--animiert .reise__fortschritt { max-width: none; }
}