/* =====================================================================
   Immobilienservice Seidemann – Website
   Design-System nach den ausgelesenen Original-Werten (Onepage-Live-Seite)
   Schriften: selbst gehostet (Poppins + Inter) – kein Google-CDN (DSGVO)
   ===================================================================== */

:root {
  /* Marke – exakt aus der Live-Seite ausgelesen */
  --color-primary: #FFCC00;           /* Markengelb rgb(255,204,0) */
  --color-primary-hover: #E6B800;
  --color-primary-soft: #FFF6D5;
  --color-ink: #232323;               /* Button-/Überschriftfarbe rgb(35,35,35) */

  /* Flächen */
  --color-dark: #000000;              /* Topbar, Stats, Rezensionen, Footer */
  --color-dark-soft: #111214;
  --color-card-dark: #1B1C1E;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F7F7F5;
  --color-text: #232323;
  --color-text-muted: #5B6470;
  --color-border: #E6E4DE;
  --color-white: #FFFFFF;
  --color-card: #FFFFFF;

  /* Layout */
  --max-width: 1600px;
  --content-padding: clamp(1.35rem, 3.2vw, 2.75rem);
  --section-spacing: clamp(3.5rem, 8vw, 7rem);

  /* Typografie – Original: Poppins 700 (H1 64px/H2 48px), Inter (Fließtext) */
  --font-heading: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-xs:  clamp(.78rem, .74rem + .15vw, .85rem);
  --text-sm:  clamp(.85rem, .8rem + .2vw, .95rem);
  --text-base: clamp(1.02rem, .96rem + .28vw, 1.125rem);
  --text-lg:  clamp(1.12rem, 1.04rem + .42vw, 1.3rem);
  --text-xl:  clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  --text-2xl: clamp(1.7rem, 1.3rem + 1.8vw, 3rem);      /* H2 bis 48px */
  --text-3xl: clamp(2.1rem, 1.5rem + 2.8vw, 4rem);      /* H1 bis 64px */

  /* Radius – Original: 8px (Header-CTA), 4px (Inhalts-Buttons) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(20,23,26,.06), 0 1px 2px rgba(20,23,26,.05);
  --shadow-md: 0 6px 22px rgba(20,23,26,.10);
  --shadow-lg: 0 18px 48px rgba(20,23,26,.16);

  --transition-fast: .2s ease;
  --transition-base: .3s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 700; line-height: 1.28; letter-spacing: -.017em; color: var(--color-ink); }
h1 { line-height: 1.26; }
strong { font-weight: 700; }

/* ---------- Layout-Helfer ---------- */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding-inline: var(--content-padding); }
/* overflow: clip statt hidden – hidden würde einen Scroll-Container erzeugen
   und damit position:sticky im Inneren (linke Leistungs-Spalte) aushebeln. */
.section { position: relative; padding-block: var(--section-spacing); overflow: hidden; overflow: clip; }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-dark); color: #EDEFF2; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

/* Dunkle Sektion mit Foto-Hintergrund (Leistungen, FAQ/Glossar, CTA) */
.section--photo { position: relative; color: #F2F3F5; isolation: isolate; }
.section--photo::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(8,8,8,.78); }
.section--photo { background-color: #08090B; }
.section--photo > .section__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
/* Sehr hohe Abschnitte: „cover" würde das Foto extrem heranzoomen (auf der
   Startseite bis zum Zweifachen – man sah nur noch einen Türausschnitt).
   js/main.js erkennt das und setzt diese Klasse: Das Bild läuft dann in
   voller Breite mit seinem natürlichen Seitenverhältnis auf dunklem Grund. */
 /* Größe, Lage und der weiche Auslauf werden in js/main.js gesetzt –
    dort ist die tatsächliche Bildhöhe bekannt. */
.section--photo h2, .section--photo h3 { color: #fff; }

.eyebrow {
  font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm);
  letter-spacing: .02em; color: var(--color-primary-hover); margin-bottom: .8rem; display: inline-block;
}
.section--dark .eyebrow, .section--photo .eyebrow { color: var(--color-primary); }
.section-head { max-width: 820px; margin: 0 auto clamp(2.2rem,5vw,3.5rem); text-align: center; }
.section-head--left { text-align: left; margin-inline: 0; max-width: none; }
.section-head--left h2 { max-width: none; }
.section-head--left p  { max-width: 92ch; }
.section-head h2 { font-size: var(--text-2xl); margin-bottom: 1rem; }
.section-head p { color: var(--color-text-muted); font-size: var(--text-lg); }
.section--dark .section-head p, .section--photo .section-head p { color: #C9CDD3; }

/* ---------- Buttons (Original: gelb #FFCC00, Text #232323, 8px/4px) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm);
  line-height: 1.2; padding: .95rem 1.9rem; border-radius: var(--radius-sm);
  min-height: 48px; transition: all var(--transition-base); cursor: pointer; text-align: center;
}
.btn--primary { background: var(--color-primary); color: var(--color-ink); border-radius: var(--radius-sm); }
.btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,204,0,.35); }
.btn--nav { border-radius: var(--radius-md); padding: .95rem 2.2rem; }
.btn--white { background: #fff; color: var(--color-ink); border-radius: var(--radius-sm); }
.btn--white:hover { background: #f0f0ee; transform: translateY(-2px); }
.btn--dark { background: var(--color-ink); color: #fff; border-radius: var(--radius-sm); }
.btn--dark:hover { background: #000; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: currentColor; border: 1.5px solid rgba(255,255,255,.65); border-radius: var(--radius-sm); }
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.btn--outline { background: transparent; color: var(--color-text); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); }
.btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary-hover); }
.btn--lg { padding: 1.1rem 2.3rem; font-size: var(--text-base); }
.btn--sm { padding: .6rem 1.1rem; min-height: 40px; font-size: var(--text-xs); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Gelber Text-Link mit Pfeil (Leistungen) */
.link-arrow { color: var(--color-primary); font-weight: 600; font-family: var(--font-body); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; gap: .4rem; align-items: center; font-size: var(--text-sm); }
.link-arrow:hover { color: #fff; }

/* ---------- Topbar (schwarz) ---------- */
.topbar { background: var(--color-dark); color: #E8E8E8; font-size: var(--text-sm); }
.topbar__inner { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; align-items: center; justify-content: space-between; padding-block: .6rem; }
.topbar a { display: inline-flex; align-items: center; gap: .5rem; color: #E8E8E8; }
.topbar a:hover { color: var(--color-primary); }
.topbar__contact { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; }
.topbar__ico { color: var(--color-primary); flex: none; display: inline-flex; }

/* ---------- Header / Navigation (weiß, zentrierte Nav, gelber CTA 8px) ---------- */
.site-header {
  /* über dem Abdunkler (55), damit das Kreuz zum Schließen anklickbar bleibt,
     aber unter dem Menü-Schubfach (60) */
  position: sticky; top: 0; z-index: 56; background: #fff;
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding-block: 1.15rem; }
.nav__logo { display: flex; align-items: center; flex: none; }
.nav__logo img { height: 82px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: clamp(.7rem, 1.6vw, 1.7rem); margin-inline: auto; }
.nav__menu a { font-family: var(--font-heading); font-weight: 600; font-size: .96rem; color: var(--color-ink); padding: .5rem .1rem; position: relative; }
.nav__menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base); }
.nav__menu a:hover::after, .nav__menu a[aria-current="page"]::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: .8rem; flex: none; }
/* Der gelbe Knopf steht auf breiten Bildschirmen im Kopf; auf schmalen wandert
   er ins Menü-Schubfach (siehe Medienabfrage weiter unten). */
.nav__cta { display: none; }

/* z-index über dem Schubfach (60): sonst liegt das geöffnete Menü über dem
   Symbol und das Kreuz zum Schließen lässt sich nicht antippen. */
.nav__toggle { display: none; width: 46px; height: 46px; border-radius: var(--radius-sm); position: relative; z-index: 61; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { content: ''; position: absolute; left: 11px; width: 24px; height: 2.5px; background: var(--color-ink); border-radius: 2px; transition: all var(--transition-base); }
.nav__toggle span { top: 22px; }
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after { top: 7px; }
.nav__toggle.is-open span { background: transparent; }
.nav__toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.nav__toggle.is-open span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Hero (Vollbild-Foto, ohne künstliches Overlay) ---------- */
.hero { position: relative; min-height: min(86vh, 900px); display: flex; align-items: flex-end; color: #fff; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.55) 100%); }
.hero__inner { padding-block: clamp(3rem, 8vw, 5.5rem); max-width: 900px; }
.hero__kicker { font-weight: 600; font-size: var(--text-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 1.1rem; }
.hero h1 { font-size: var(--text-3xl); color: #fff; hyphens: none; margin-bottom: 1.2rem; }
.hero__lead { font-size: var(--text-lg); color: #EDEEF0; max-width: 700px; margin-bottom: 1.3rem; }
.hero__tagline { font-family: var(--font-heading); font-weight: 600; letter-spacing: .05em; color: #fff; font-size: var(--text-sm); margin-bottom: 1.8rem; text-transform: uppercase; }
.hero__tagline span { color: var(--color-primary); margin-inline: .35rem; }
/* ELK-Signet: an der rechten Kante des Inhaltsrasters, auf Höhe der Buttons */
.hero__elk { position: absolute; left: 0; right: 0; bottom: clamp(4.5rem, 10vw, 7.5rem);
  width: 100%; max-width: var(--max-width); margin-inline: auto;
  padding-inline: var(--content-padding); text-align: right; pointer-events: none; }
.hero__elk img { height: 64px; width: auto; display: inline-block;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); }

/* ---------- Split (Bild + Text, Original-Layout) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; object-fit: cover; }
.split__body h2 { font-size: var(--text-2xl); margin-bottom: 1rem; }
.split__quote { font-style: italic; color: var(--color-text); font-weight: 500; margin-bottom: 1rem; font-size: var(--text-lg); }
.split__body p { color: var(--color-text-muted); margin-bottom: 1.2rem; }

/* Inhaber-Zeile (rundes Foto, Name fett, „Inhaber" gelb, gelbe Trennlinie) */
.owner { display: flex; align-items: center; gap: .9rem; margin: 1.2rem 0 .9rem; }
.owner__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--color-bg-alt); }
.owner__name { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
.owner__role { color: var(--color-primary-hover); font-weight: 600; font-size: var(--text-sm); }
.owner-rule { border: 0; border-top: 2px solid var(--color-primary); margin: .2rem 0 1.3rem; }

/* Checkliste – 2 Spalten, gelbe Haken (wie Original) */
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.6rem; margin-bottom: 1.4rem; }
.check-list li { position: relative; padding-left: 1.8rem; color: var(--color-text); font-size: var(--text-sm); }
.check-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--color-primary-hover); font-weight: 700; font-size: 1.05rem; }
.check-list--single { grid-template-columns: 1fr; }
.signature { margin-top: 1.2rem; max-width: 200px; }

/* ---------- Stats (Original: schwarze Sektion, große weiße Zahlen, gelbe Labels) ---------- */
.stats-band { background: var(--color-dark); padding-block: clamp(3rem, 7vw, 5.5rem); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem; align-items: start; }

/* Zahlen als eigene Kästen – ruhiger und wertiger als frei stehende Ziffern */
.stats--karten { gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; }
.stats--karten .stat {
  text-align: left; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
  transition: background-color .4s ease, border-color .4s ease, transform .4s var(--ease-out-soft);
}
.stats--karten .stat:hover { background: rgba(255,255,255,.085); border-color: rgba(255,204,0,.34); transform: translateY(-4px); }
.stat__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,204,0,.55); color: var(--color-primary); margin-bottom: 1rem; }
.stat__ico svg { width: 22px; height: 22px; }
.stats--karten .stat__num { font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1; }
.stats--karten .stat__label { color: var(--color-primary); font-weight: 600; margin-top: .45rem; }
.stat__text { color: #B7BCC3; font-size: var(--text-sm); line-height: 1.6; margin: .7rem 0 0; }
@media (max-width: 1023px) { .stats--karten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .stats--karten { grid-template-columns: 1fr; } }

/* Nachricht schreiben + Kontaktspalte daneben */
.msg-grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
.msg-side { display: grid; gap: 1rem; align-content: start; }
@media (max-width: 900px) { .msg-grid { grid-template-columns: 1fr; } }

/* Hinweiszeile unter einem Split-Block */
.split__hint { margin-top: 1rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.split__hint a { font-weight: 600; color: var(--color-primary-hover); }
.split__hint a:hover { text-decoration: underline; }
.stat { text-align: center; }
.stat__num { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.6rem, 2rem + 3vw, 4.5rem); color: #fff; line-height: 1; }
.stat__label { color: var(--color-primary); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); margin-top: .6rem; }

/* ---------- Leistungen (dunkle Foto-Sektion, Icon-Kreise, kursiv-fette Titel) ---------- */
.services { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
/* Linke Spalte fährt beim Scrollen mit (nur ab Tablet aufwärts, s. Media-Query) */
.services__intro { position: sticky; top: clamp(6rem, 12vh, 9rem); align-self: start; }
.services__intro h2 { color: #fff; font-size: var(--text-2xl); margin-bottom: 1rem; }
.services__intro p { color: #D4D7DB; }
.services__list { overflow: visible; display: grid; gap: clamp(1.8rem, 3.5vw, 2.8rem); }
.service { max-width: 620px; }
.service__icon { width: 62px; height: 62px; flex: none; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); color: var(--color-primary); display: grid; place-items: center; margin-bottom: .9rem; }
.service__icon svg { width: 26px; height: 26px; }
.service h3 { color: #fff; font-style: italic; font-size: var(--text-xl); margin-bottom: .6rem; }
.service p { color: #D4D7DB; font-size: var(--text-sm); margin-bottom: .8rem; }

/* ---------- Prozess: Zickzack-Timeline mit Mittellinie (Original) ---------- */
.timeline { position: relative; max-width: 1240px; margin: 0 auto; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(35,35,35,.22); transform: translateX(-50%); }
.tl-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.tl-item__num { position: absolute; left: 50%; top: 1.4rem; transform: translateX(-50%); background: #fff; border: 1.5px solid var(--color-ink); border-radius: var(--radius-md); font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; padding: .45rem .8rem; z-index: 2; }
.tl-card { background: var(--color-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.tl-card img { width: 100%; aspect-ratio: 2/1; object-fit: cover; }
.tl-card__body { padding: 1.4rem 1.5rem 1.6rem; }
.tl-card h3 { font-size: var(--text-lg); margin-bottom: .5rem; }
.tl-card p { color: var(--color-text-muted); font-size: var(--text-sm); }
.tl-item:nth-child(odd) .tl-card { grid-column: 1; }
.tl-item:nth-child(even) .tl-card { grid-column: 2; }

/* ---------- Rezensionen (schwarze Sektion, dunkle Karten, gelbe Sterne) ---------- */
.reviews-head { display: grid; grid-template-columns: 1.6fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.reviews-head > div:first-child { max-width: none; }
.reviews-head h2 { max-width: none; }
/* Steht kein Bewertungskasten daneben, nimmt die Überschrift die ganze Breite ein. */
.reviews-head--wide { grid-template-columns: 1fr; }
.reviews-head h2 { color: #fff; font-size: var(--text-2xl); }
.reviews-head p { color: #A9AFB7; font-size: var(--text-sm); margin-top: .7rem; max-width: 92ch; }

/* Bewertungs-Panel rechts: gerahmte Box statt frei stehender Text */
.rating-box { text-align: left; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg); padding: 1.5rem 1.6rem 1.6rem; }
.rating-box__num { font-family: var(--font-heading); font-weight: 700; font-size: 2.75rem; color: #fff; line-height: 1; }
.rating-box__top { display: flex; align-items: center; gap: .9rem; }
.rating-box__stars { color: var(--color-primary); letter-spacing: .18em; font-size: 1.2rem; line-height: 1; }
.rating-box__label { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; color: #C9CDD3; font-size: var(--text-xs); margin: .55rem 0 1.15rem; }
.rating-box .btn { width: 100%; justify-content: center; }
.rating-box__all { display: inline-block; margin-top: .8rem; color: #9BA1A8; font-size: var(--text-xs); text-decoration: underline; text-underline-offset: 3px; }
.rating-box__all:hover { color: var(--color-primary); }

.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; align-items: stretch; }
.review { position: relative; background: var(--color-card-dark); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius-lg); padding: 1.7rem 1.6rem; display: flex; flex-direction: column; overflow: hidden; transition: border-color var(--transition-base), transform var(--transition-base), background var(--transition-base); }
.review::before { content: '”'; position: absolute; top: -.9rem; right: .75rem; font-family: var(--font-heading); font-size: 6rem; line-height: 1; color: rgba(255,204,0,.10); pointer-events: none; }
.review:hover { border-color: rgba(255,204,0,.35); background: #202124; transform: translateY(-3px); }
.review__head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.05rem; position: relative; }
.review__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #2A2C2F; color: #fff; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; flex: none; border: 1px solid rgba(255,255,255,.10); }
.review__stars { color: var(--color-primary); letter-spacing: .15em; font-size: .95rem; line-height: 1; }
.review__name { font-family: var(--font-heading); font-weight: 600; color: #fff; font-size: .98rem; margin-top: .2rem; }
.review__src { color: #9BA1A8; font-size: var(--text-xs); }
.review__text { color: #D2D6DB; font-size: var(--text-sm); line-height: 1.75; text-align: left; position: relative; }
.review__text--kurz { display: block; }

/* ---------- Rezensionen: Live-Daten aus Google (bewertungen.js) ---------- */
.bw-g { display: inline-flex; align-items: center; flex: none; }
.bw-g svg { display: block; }
.bw-verified { display: inline-flex; align-items: center; flex: none; }
.bw-verified svg { display: block; }
.review__rating { display: flex; align-items: center; gap: .4rem; }
.review__src { display: flex; align-items: center; gap: .35rem; }
.review__author .review__src { justify-content: flex-start; }
.review__more { display: inline-block; align-self: flex-start; margin-top: .75rem; margin-bottom: .15rem; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.review__more:hover { color: #fff; }
.review__reply { margin-top: 1.1rem; padding: .85rem 1rem; border-left: 3px solid var(--color-primary); background: rgba(255,255,255,.04); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; text-align: left; }
.review__reply-label { display: block; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xs); color: #fff; margin-bottom: .25rem; }
.review__reply p { color: #B9BEC5; font-size: var(--text-xs); line-height: 1.6; }
.review__foot { margin-top: auto; padding-top: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid rgba(255,255,255,.07); }
.review__date { color: #808790; font-size: var(--text-xs); }

/* Sterne-Abzeichen (Grundstücksentwicklung) */
.rating-badge { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; background: var(--color-primary-soft, #FFF6D1); border: 1px solid var(--color-border); border-radius: 999px; padding: .5rem 1.1rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.rating-badge .stars { color: #E6B800; letter-spacing: .12em; }

/* Karussell ab 4 Bewertungen */
.reviews-slider { position: relative; }
.reviews--slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.5rem; padding-bottom: .25rem; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.reviews--slider::-webkit-scrollbar { display: none; }
.reviews--slider .review { flex: 0 0 calc((100% - 3rem) / 3); scroll-snap-align: start; }
.reviews-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(27,28,30,.94); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2; transition: background var(--transition-base), color var(--transition-base), opacity var(--transition-base); }
.reviews-arrow--prev { left: -16px; }
.reviews-arrow--next { right: -16px; }
.reviews-arrow:hover { background: var(--color-primary); color: var(--color-ink); border-color: var(--color-primary); }
.reviews-arrow:disabled { opacity: 0; pointer-events: none; }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,3.5rem); align-items: stretch; }
.contact-info { display: grid; gap: 1rem; align-content: start; }
.contact-item { display: flex; gap: 1rem; align-items: flex-start; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.1rem 1.3rem; box-shadow: var(--shadow-sm); }
.contact-item__ico { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary-hover); display: grid; place-items: center; flex: none; }
.contact-item__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
.contact-item__value { font-family: var(--font-heading); font-weight: 600; }

/* Sprungziele nicht unter den klebenden Kopf schieben */
section[id], .quickmsg[id] { scroll-margin-top: calc(72px + 1.5rem); }

/* Hinweiskarte unter den Kontaktdaten */
.contact-cta { background: var(--color-card, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm); margin-top: .4rem; }
.contact-cta__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-base); color: var(--color-ink); margin-bottom: .35rem; }
.contact-cta__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; margin-bottom: 1.05rem; }
.contact-cta .btn { width: 100%; justify-content: center; }

/* ---------- Schnellnachricht auf der Startseite ---------- */
.quickmsg { position: relative; background: var(--color-card, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.1rem); box-shadow: var(--shadow-md); }
.quickmsg::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-primary); }
.quickmsg__head { display: flex; align-items: flex-start; gap: .95rem; margin-bottom: 1.35rem; }
.quickmsg__ico { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary-hover); display: grid; place-items: center; flex: none; }
.quickmsg__title { font-size: var(--text-lg); margin: 0 0 .25rem; }
.quickmsg__hint { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin: 0; }
.quickmsg__alt { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; line-height: 1.6; margin: -.15rem 0 0; }
.quickmsg__alt a { color: var(--color-primary-hover); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.quickmsg__alt a:hover { color: var(--color-ink); }
.form__opt { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-xs); }

.map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); min-height: 340px; border: 1px solid var(--color-border); }
.map-embed iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
/* Karte steht auf der Startseite über die volle Breite unter dem Kontaktraster */
.contact-grid + .map-embed { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* ---------- Google-Maps: Zwei-Klick-Lösung (DSGVO) ----------
   Die Karte wird erst nach ausdrücklichem Klick geladen – vorher geht
   keine Verbindung zu Google. Platzhalter unten, iframe kommt per JS. */
.map-consent { display: flex; align-items: center; justify-content: center; text-align: center; padding: 2.25rem 1.25rem; background: var(--color-bg-alt); background-image: linear-gradient(135deg, rgba(255,204,0,.14), rgba(35,35,35,.05)); }
.map-consent__inner { max-width: 470px; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.map-consent__pin { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-ink); box-shadow: var(--shadow-sm); }
.map-consent__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg); color: var(--color-ink); }
.map-consent__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }
.map-consent__text a { color: var(--color-text-muted); text-decoration: underline; }
.map-consent__btn { cursor: pointer; margin-top: .2rem; }
.map-consent__alt { font-size: var(--text-xs); color: var(--color-text-muted); text-decoration: underline; }
.map-consent__alt:hover, .map-consent__text a:hover { color: var(--color-ink); }
/* Hinweis im gelben Fenster, der zurück auf das Nachrichtenfeld zeigt */
.map-consent__note { width: 100%; margin-top: .45rem; padding-top: 1rem; border-top: 1px solid rgba(35,35,35,.13); font-size: var(--text-sm); color: var(--color-ink); }
.map-consent__note a { color: var(--color-primary-hover); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.map-consent__note a:hover { color: var(--color-ink); }

/* ---------- CTA-Band (dunkle Foto-Sektion) ---------- */
.cta-band__inner { max-width: 780px; margin: 0 auto; text-align: center; padding-block: clamp(1rem,2vw,2rem); }
.cta-band__inner h2 { font-size: var(--text-2xl); margin-bottom: 1rem; }
.cta-band__inner p { color: #D4D7DB; margin-bottom: 1.8rem; }
.cta-band__inner .btn-row { justify-content: center; }

/* ---------- FAQ (dunkel, weiße fette Fragen, Pfeil) ---------- */
.faq { max-width: 1200px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid rgba(255,255,255,.16); }
.faq__q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.35rem .2rem; font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg); color: #fff; }
.faq__q:hover { color: var(--color-primary); }
.faq__icon { flex: none; width: 26px; height: 26px; color: #fff; transition: transform var(--transition-base); display: grid; place-items: center; font-size: 1.3rem; }
.faq__item.is-open .faq__icon { transform: rotate(180deg); color: var(--color-primary); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--transition-base); }
.faq__a-inner { padding: 0 .2rem 1.4rem; color: #C9CDD3; font-size: var(--text-sm); max-width: 900px; }

/* Helle FAQ-Variante (Unterseiten) */
.faq--light .faq__item { border-color: var(--color-border); }
.faq--light .faq__q { color: var(--color-ink); }
.faq--light .faq__icon { color: var(--color-ink); }
.faq--light .faq__a-inner { color: var(--color-text-muted); }

/* ---------- Glossar-Teaser (dunkel, zentriert, weißer Button) ---------- */
.glossar-teaser { text-align: center; max-width: 820px; margin: 0 auto clamp(3rem,6vw,4.5rem); }
.glossar-teaser h2 { color: #fff; font-size: var(--text-2xl); margin-bottom: .8rem; }
.glossar-teaser p { color: #D4D7DB; margin-bottom: 1.6rem; }

/* ---------- Footer (schwarz, gelbes Logo rechts, unterstrichene Spaltentitel) ---------- */
.site-footer { background: var(--color-dark); color: #D2D5D9; padding-top: clamp(3rem,6vw,4.5rem); font-size: var(--text-sm); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 2.5rem; padding-bottom: 2.5rem; }
.site-footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: 1.1rem; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.site-footer a { color: #D2D5D9; }
.site-footer a:hover { color: var(--color-primary); }
.footer-brand__name { font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.1rem; margin-bottom: 1.1rem; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .7rem; }
.footer-contact svg { color: var(--color-primary); flex: none; margin-top: .2rem; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: underline; text-underline-offset: 3px; }
.footer-logo img { height: 64px; width: auto; margin-bottom: 1.2rem; }
.footer-legal { display: grid; gap: .6rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center; justify-content: space-between; }

/* ---------- Seiten-Hero (Unterseiten, dunkel) ---------- */
.page-hero { position: relative; background: var(--color-dark-soft); color: #fff; padding-block: clamp(3rem,7vw,5rem); isolation: isolate; overflow: hidden; }
.page-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(5,5,5,.72); }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.page-hero h1 { color: #fff; font-size: var(--text-3xl); margin-bottom: .8rem; max-width: 980px; hyphens: none; }
.page-hero p { color: #DCDEE1; max-width: 680px; font-size: var(--text-lg); }
.breadcrumb { font-size: var(--text-sm); color: #A9AFB8; margin-bottom: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--color-primary); }

/* ---------- Karten (Unterseiten: Leistungen etc.) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.8rem 1.6rem; box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); display: flex; flex-direction: column; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card__icon { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--color-ink); color: var(--color-primary-hover); display: grid; place-items: center; margin-bottom: 1.1rem; }
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: var(--text-lg); margin-bottom: .7rem; }
.card p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: 1.2rem; flex: 1; }
.card__link { font-family: var(--font-heading); font-weight: 600; color: var(--color-primary-hover); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: .4rem; }
.card__link:hover { gap: .7rem; }

/* ---------- Presse-Kacheln (Berichte der Sächsischen Zeitung) ----------
   Wie auf der bisherigen Seite: Der komplette Zeitungsausschnitt ist zu sehen –
   inklusive Überschrift und Bildunterschrift. Darüber liegt unten links der
   Hinweis „Zum Artikel". Drei Spalten, der mittlere Beitrag ist der große. */
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); align-items: start; }
.press-card { background: var(--color-bg-alt, #F4F5F6); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.press-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.press-card--gross { grid-column: 2; grid-row: 1 / span 2; }
.press-card__link { position: relative; display: block; color: inherit; }
.press-card__link img { display: block; width: 100%; height: auto; }
.press-card__link::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,0));
  pointer-events: none;
}
.press-card__more {
  position: absolute; z-index: 1; left: clamp(.9rem, 1.8vw, 1.3rem); bottom: clamp(.8rem, 1.6vw, 1.2rem);
  font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg);
  color: #fff; text-decoration: underline; text-underline-offset: 4px;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.press-card:hover .press-card__more { color: var(--color-primary); }
@media (max-width: 900px) {
  .press-grid { grid-template-columns: repeat(2, 1fr); }
  .press-card--gross { grid-column: auto; grid-row: auto; }
}
@media (max-width: 560px) { .press-grid { grid-template-columns: 1fr; } }

/* ---------- Portalleiste („Auch zu finden auf") ---------- */
.portals { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.6rem; }
.portals__item { display: flex; align-items: center; justify-content: center; width: 172px; min-height: 78px; padding: .8rem 1.2rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
/* Feste Pixelgrenze statt Prozent: max-height: 100% löst sich in einem Raster
   nicht zuverlässig auf – quadratische Logos ragten unten aus der Kachel heraus.
   Die Logodateien sind eng beschnitten, deshalb bestimmt die Breite die Größe. */
.portals__item img { display: block; width: auto; height: auto; max-width: 100%; max-height: 40px; }

/* ---------- Grundstück-Karten ---------- */
.plots { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1.2rem, 2.2vw, 1.8rem); }
@media (min-width: 1180px) { .plots { grid-template-columns: repeat(3, 1fr); } }
.plot-card { position: relative; background: var(--color-card); border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); display: flex; flex-direction: column; }
.plot-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
/* Ohne diese Zeile bliebe eine gefilterte Kachel sichtbar: „display: flex"
   oben ist spezifischer als das display:none, das der Browser [hidden] gibt. */
.plot-card[hidden] { display: none !important; }
.plot-card__media { height: 210px; background: linear-gradient(135deg, #ECE7DD, #D8CFBE); position: relative; overflow: hidden; }
.plot-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-base); }
.plot-card:hover .plot-card__media img { transform: scale(1.06); }
.plot-card__media::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 55%; background: linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,0)); pointer-events: none; }
.plot-card__badge { align-self: start; background: var(--color-primary); color: var(--color-ink); font-family: var(--font-heading); font-weight: 600; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .7rem; border-radius: var(--radius-sm); }
.plot-card__body { padding: clamp(1.3rem,2.6vw,1.7rem); display: flex; flex-direction: column; gap: .65rem; flex: 1; }
.plot-card__body h3 { font-size: var(--text-lg); margin-top: .15rem; }
.plot-card__facts { display: flex; align-items: center; justify-content: space-between; color: var(--color-text-muted); font-size: var(--text-sm); }
.plot-card__price { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary-hover); font-size: var(--text-base); }
.plot-card .btn { margin-top: auto; }

/* Angebotskacheln im Aufbau der bisherigen Live-Seite:
   Titel, Ort mit Pin, Kaufpreis, Fläche */
.plot-card__ort { display: flex; align-items: center; gap: .4rem; color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.plot-card__pin { display: grid; place-items: center; flex: none; width: 18px; height: 18px; color: var(--color-primary-hover); }
.plot-card__pin svg { width: 16px; height: 16px; }
.plot-card__preis { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.plot-card__preis strong { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg); color: var(--color-ink); display: block; margin-top: .1rem; }
.plot-card__facts { list-style: none; display: block; padding: 0; margin: 0; }
.plot-card__facts li { position: relative; padding-left: 1.1rem; color: var(--color-text-muted); font-size: var(--text-sm); }
.plot-card__facts li::before { content: ''; position: absolute; left: 0; top: .52em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }

/* Filter- und Sortierleiste über den Angeboten */
.plot-filter {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 1rem clamp(1rem, 3vw, 2rem);
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1.1rem, 2.6vw, 1.7rem);
  margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
}
.plot-filter__count { margin: 0; font-family: var(--font-heading); font-weight: 600; color: var(--color-ink); }
.plot-filter__controls { display: flex; flex-wrap: wrap; gap: .8rem 1rem; }
.plot-filter__field { display: flex; flex-direction: column; gap: .3rem; min-width: 210px; }
.plot-filter__label { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; }
.plot-filter select {
  font: inherit; color: var(--color-ink); background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: .6rem .8rem; cursor: pointer;
}
.plot-filter select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.plot-empty { margin-top: 1.5rem; color: var(--color-text-muted); }
.plots-note {
  margin-top: clamp(1.8rem, 4vw, 2.6rem); text-align: center;
  font-family: var(--font-heading); font-weight: 600; color: var(--color-text-muted);
}

/* Zwei Info-Karten (Sofortkontakt / Besuchen Sie mich) */
.info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.1rem, 2.5vw, 1.8rem); }
.info-card {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.info-card__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--color-primary); color: var(--color-ink); margin-bottom: 1rem; }
.info-card__ico svg { width: 24px; height: 24px; }
.info-card h3 { font-size: var(--text-xl); margin-bottom: .7rem; }
.info-card__lines { font-family: var(--font-heading); font-weight: 600; color: var(--color-ink); margin-bottom: .7rem; line-height: 1.6; }
.info-card__lines a:hover { color: var(--color-primary-hover); }
.info-card p:last-child { color: var(--color-text-muted); margin: 0; }
.pill { display: inline-block; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .55rem 1.1rem; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); box-shadow: var(--shadow-sm); }

/* ---------- Ratgeber-Karten ---------- */
.articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.6rem; }
.article-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); display: flex; flex-direction: column; }
.article-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.article-card__media { height: 175px; background: linear-gradient(135deg, #2b2f34, #3a4048); position: relative; overflow: hidden; }
.article-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-base); }
.article-card:hover .article-card__media img { transform: scale(1.06); }
.article-card__media::after { content: ''; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0)); pointer-events: none; }
.article-card__tag { position: absolute; z-index: 1; bottom: .7rem; left: .9rem; background: var(--color-primary); color: var(--color-ink); font-family: var(--font-heading); font-weight: 600; font-size: .72rem; padding: .25rem .6rem; border-radius: var(--radius-sm); }
.article-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.article-card__date { color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; }
.article-card__body h3 { font-size: var(--text-lg); line-height: 1.3; }
.article-card__body h3 a:hover { color: var(--color-primary-hover); }
.article-card__body p { color: var(--color-text-muted); font-size: var(--text-sm); flex: 1; }
.article-card .card__link { margin-top: .4rem; }

/* ---------- Formulare ---------- */
.form-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--shadow-md); }
.form { display: flex; flex-direction: column; gap: 1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__field { display: flex; flex-direction: column; gap: .4rem; }
.form__field label { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); }
.form input, .form textarea, .form select { font-family: var(--font-body); font-size: var(--text-base); padding: .8rem .9rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; color: var(--color-text); width: 100%; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(255,204,0,.2); }
.form textarea { resize: vertical; }
/* Kein Flexbox: sonst wird jeder Textabschnitt um den Link herum zu einem
   eigenen Flex-Item und der Satz bricht an den falschen Stellen um. */
.form__check { display: block; position: relative; padding-left: 1.75rem; font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }
.form__check input { position: absolute; left: 0; top: .3em; width: auto; margin: 0; flex: none; }
.form__check a { color: var(--color-primary-hover); text-decoration: underline; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Interaktiver Anfrage-Dialog (js/anfrage.js) ---------- */
.aw { --aw-line: var(--color-border); --aw-fg: var(--color-text); --aw-muted: var(--color-text-muted);
      --aw-tile: #fff; --aw-tile-line: var(--color-border); --aw-tile-hover: var(--color-primary-soft);
      --aw-ico-bg: var(--color-primary-soft); --aw-ico-fg: var(--color-primary-hover);
      --aw-chip: #fff; --aw-rail: rgba(35,35,35,.12);
      color: var(--aw-fg); text-align: left;
      scroll-margin-top: calc(72px + 1rem); }

/* --- Kopf: Fortschritt in Abschnitten, dazu eine kurze Standortangabe --- */
.aw__head { margin-bottom: 1.6rem; }
.aw__steps { display: flex; gap: .4rem; }
.aw__seg { flex: 1 1 0; height: 5px; padding: 0; border: 0; border-radius: 999px;
           background: var(--aw-rail); position: relative; overflow: hidden; }
.aw__seg::after { content: ''; position: absolute; inset: 0; width: 0; border-radius: 999px;
                  background: var(--color-primary); transition: width .45s cubic-bezier(.4,0,.2,1); }
.aw__seg.is-done::after, .aw__seg.is-now::after { width: 100%; }
.aw__seg.is-now { box-shadow: 0 0 0 3px rgba(255,204,0,.22); }
.aw__seg.is-link { cursor: pointer; }
.aw__seg.is-link:hover::after { background: var(--color-primary-hover); }
.aw__seg:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.aw__meta { margin-top: .75rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: .05em;
            text-transform: uppercase; color: var(--aw-muted); }
.aw__meta b { color: var(--color-primary-hover); font-weight: 600; }

/* --- Bühne + weicher Wechsel zwischen den Schritten --- */
.aw__panel { animation: aw-in .34s cubic-bezier(.2,.7,.3,1) both; }
@keyframes aw-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.aw__title { font-size: var(--text-xl); margin-bottom: .5rem; }
.aw__hint { font-size: var(--text-sm); color: var(--aw-muted); line-height: 1.65; margin-bottom: 1.4rem; }
.aw__hint a { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 3px; }

/* --- Bereits gegebene Antworten als anklickbare Marken --- */
.aw__crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.2rem; }
.aw__crumb { display: inline-flex; align-items: center; gap: .4rem; padding: .34rem .75rem;
             border: 1px solid var(--aw-line); border-radius: 999px; background: var(--aw-chip);
             font-size: var(--text-xs); line-height: 1.4; }
.aw__crumb-key { color: var(--aw-muted); }
.aw__crumb-val { font-weight: 600; }
.aw__crumb-edit { background: none; border: 0; padding: 0 0 0 .1rem; cursor: pointer; font: inherit;
                  font-size: var(--text-xs); color: var(--color-primary-hover);
                  text-decoration: underline; text-underline-offset: 2px; }
.aw__crumb-edit:hover { color: var(--aw-fg); }

/* --- Auswahlkacheln --- */
.aw__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: .9rem; }
/* Vier Antworten stehen als ruhiges 2x2-Feld statt als 3+1-Umbruch */
@media (min-width: 620px) { .aw__options--4 { grid-template-columns: repeat(2, 1fr); } }
.aw__opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .85rem;
           width: 100%; padding: 1.2rem 1.15rem 1.3rem; text-align: left; cursor: pointer;
           background: var(--aw-tile); border: 1.5px solid var(--aw-tile-line);
           border-radius: var(--radius-md); color: inherit;
           transition: border-color var(--transition-fast), background var(--transition-fast),
                       transform var(--transition-fast), box-shadow var(--transition-fast); }
.aw__opt:hover { border-color: var(--color-primary); background: var(--aw-tile-hover); transform: translateY(-3px); }
.aw__opt:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.aw__opt[aria-checked="true"] { border-color: var(--color-primary); background: var(--aw-tile-hover);
                                box-shadow: 0 0 0 3px rgba(255,204,0,.25); }
.aw__opt-ico { width: 46px; height: 46px; border-radius: var(--radius-sm); flex: none; display: grid;
               place-items: center; background: var(--aw-ico-bg); color: var(--aw-ico-fg);
               transition: background var(--transition-fast), color var(--transition-fast); }
.aw__opt[aria-checked="true"] .aw__opt-ico { background: var(--color-primary); color: var(--color-ink); }
.aw__opt-txt { display: block; font-family: var(--font-heading); font-weight: 600;
               font-size: var(--text-base); line-height: 1.3; }
.aw__opt-sub { display: block; margin-top: .35rem; font-family: var(--font-body); font-weight: 400;
               font-size: var(--text-xs); line-height: 1.6; color: var(--aw-muted); }
.aw__opt-mark { position: absolute; top: .8rem; right: .8rem; width: 24px; height: 24px; border-radius: 50%;
                display: inline-flex; align-items: center; justify-content: center;
                background: var(--color-primary); color: var(--color-ink);
                opacity: 0; transform: scale(.6); transition: all var(--transition-fast); }
.aw__opt[aria-checked="true"] .aw__opt-mark { opacity: 1; transform: scale(1); }
.aw__opt-label { font-weight: 400; color: var(--aw-muted); }

/* --- Steuerleiste --- */
.aw__nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.7rem; }
.aw__spacer { flex: 1 1 auto; }
.aw__back { background: none; border: 0; padding: .5rem 0; cursor: pointer; font: inherit; font-weight: 600;
            font-family: var(--font-heading); font-size: var(--text-sm); color: var(--aw-muted); }
.aw__back:hover { color: var(--color-primary-hover); }
.aw__next { margin-left: auto; }
/* Solange nichts gewählt ist, tritt der Weiter-Knopf als ruhiger Umriss auf –
   ein ausgegrauter gelber Knopf sieht sonst aus, als wäre er kaputt. */
.aw__next.is-off, .aw__next.is-off:hover, .aw__next.is-off:focus {
  background: transparent; border: 1.5px solid var(--aw-line); color: var(--aw-muted);
  opacity: 1; cursor: not-allowed; transform: none; box-shadow: none; }

/* --- Vertrauenszeile am Fuß des Dialogs --- */
.aw__trust { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.5rem; padding-top: 1.15rem;
             border-top: 1px solid var(--aw-line); font-size: var(--text-xs); color: var(--aw-muted); }
.aw__trust span { display: inline-flex; align-items: center; gap: .45rem; }
.aw__trust svg { color: var(--color-primary-hover); flex: none; }

.aw__form { margin-top: 0; }
.aw__error { margin-top: 1rem; font-size: var(--text-sm); color: #B3261E; }
.aw__error a { color: inherit; text-decoration: underline; }

/* --- Abschluss --- */
.aw__done { text-align: center; padding: 1rem 0 .5rem; }
.aw__done-ico { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px;
                border-radius: 50%; background: var(--color-primary); color: var(--color-ink); margin-bottom: 1.1rem; }
.aw__done .aw__hint { margin-bottom: 0; }
.aw__steps-list { list-style: none; counter-reset: awn; display: grid; gap: .85rem; text-align: left;
                  max-width: 540px; margin: 1.6rem auto 0; padding-top: 1.4rem; border-top: 1px solid var(--aw-line); }
.aw__steps-list li { counter-increment: awn; position: relative; padding-left: 2.6rem;
                     font-size: var(--text-sm); line-height: 1.6; color: var(--aw-muted); }
.aw__steps-list li::before { content: counter(awn); position: absolute; left: 0; top: -.05rem;
                             width: 1.85rem; height: 1.85rem; border-radius: 50%;
                             background: var(--aw-ico-bg); color: var(--aw-ico-fg);
                             font-family: var(--font-heading); font-weight: 700; font-size: var(--text-xs);
                             display: grid; place-items: center; }

/* --- Variante auf dunklem Foto-Hintergrund --- */
.aw--dark { --aw-line: rgba(255,255,255,.20); --aw-fg: #F2F3F5; --aw-muted: #C6CBD1;
            --aw-tile: rgba(255,255,255,.055); --aw-tile-line: rgba(255,255,255,.17);
            --aw-tile-hover: rgba(255,204,0,.13);
            --aw-ico-bg: rgba(255,204,0,.16); --aw-ico-fg: var(--color-primary);
            --aw-chip: rgba(255,255,255,.06); --aw-rail: rgba(255,255,255,.18);
            max-width: 1000px; margin: 0 auto; padding: clamp(1.4rem, 3.5vw, 2.6rem);
            border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-lg);
            background: rgba(0,0,0,.42); backdrop-filter: blur(3px); }
.aw--dark .aw__title { color: #fff; }
.aw--dark .aw__opt[aria-checked="true"] .aw__opt-ico { background: var(--color-primary); color: var(--color-ink); }
.aw--dark .aw__hint a, .aw--dark .aw__crumb-edit, .aw--dark .aw__back:hover,
.aw--dark .aw__meta b, .aw--dark .aw__trust svg { color: var(--color-primary); }
.aw--dark .aw__crumb-edit:hover { color: #fff; }
.aw--dark .form__field label { color: #fff; }
.aw--dark .form__check { color: #D4D7DB; }
.aw--dark .form__check a { color: var(--color-primary); }
.aw--dark .aw__error { color: #FFC9C4; }

/* ---------- Glossar (Volltext-Seite) ---------- */
.glossary { max-width: 900px; margin: 0 auto; }
.gloss { padding: 1.05rem 0; border-bottom: 1px solid var(--color-border); }
.gloss dt { font-family: var(--font-heading); font-weight: 700; margin-bottom: .3rem; font-size: var(--text-lg); }
.gloss dd { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Prose / Artikel ---------- */
.prose { max-width: 1080px; margin: 0 auto; }
.prose h2 { font-size: var(--text-xl); margin: 2rem 0 .8rem; }
.prose h3 { font-size: var(--text-lg); margin: 1.5rem 0 .6rem; }
.prose p { color: var(--color-text); margin-bottom: 1rem; }
.prose ul { margin: 0 0 1rem 1.2rem; list-style: disc; }
.prose ul li { margin-bottom: .4rem; }
.prose a { color: var(--color-primary-hover); text-decoration: underline; }

.article-body h2 { font-size: var(--text-xl); margin: 2.2rem 0 .9rem; }
.article-body h3 { font-size: var(--text-lg); margin: 1.6rem 0 .6rem; }
.article-body p { color: var(--color-text); margin-bottom: 1rem; }
.article-body ul, .article-body ol { margin: 0 0 1.1rem 1.25rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: .45rem; }
.article-body a { color: var(--color-primary-hover); text-decoration: underline; }
/* Der Rollbalken erschien früher auch dann kurz, wenn die Tabelle eigentlich
   passt: „white-space: nowrap" in der Kopfzeile erzwang eine Mindestbreite,
   und beim Laden der Schriften änderte sich die Spaltenbreite noch einmal.
   Jetzt darf die Kopfzeile umbrechen – auf dem Bildschirm passt die Tabelle
   damit ohne Rollen, auf dem Handy bleibt das Rollen möglich. */
.table-wrap { margin: 0 0 1.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
@media (max-width: 780px) {
  .table-wrap { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
}
.article-body table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--text-sm); background: var(--color-card); }
.article-body td, .article-body th { overflow-wrap: anywhere; }
.article-body th { background: var(--color-ink); color: #fff; font-family: var(--font-heading); font-weight: 600; text-align: left; padding: .8rem .9rem; white-space: normal; hyphens: auto; }
.article-body td { padding: .7rem .9rem; border-top: 1px solid var(--color-border); vertical-align: top; color: var(--color-text); }
.article-body tbody tr:nth-child(even) { background: var(--color-bg-alt); }

/* ---------- Betreiber-Hinweis ---------- */
.owner-notice { background: var(--color-primary-soft); border: 1px solid var(--color-primary); border-radius: var(--radius-md); padding: 1rem 1.2rem; margin-bottom: 1.8rem; font-size: var(--text-sm); color: #5a4a00; }

/* ---------- Teaser (hell, Unterseiten) ---------- */
.teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--color-primary-soft); border: 1px solid rgba(255,204,0,.5); border-radius: var(--radius-lg); padding: clamp(1.6rem,4vw,2.6rem); }
.teaser h2 { font-size: var(--text-xl); margin-bottom: .4rem; }
.teaser p { color: var(--color-text-muted); }

/* =====================================================================
   BEWEGUNG – Einblenden beim Scrollen, Parallaxe, Auftakte
   Kurven und Zeiten sind bewusst ruhig gewählt: sichtbar, aber nie
   aufdringlich. Alles respektiert „prefers-reduced-motion".
   ===================================================================== */
:root {
  --ease-out-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-out-back: cubic-bezier(.2, .8, .3, 1.02);
  --reveal-duration: .85s;
}

/* ---------- Einblenden beim Scrollen ---------- */
/* Startzustand nur setzen, wenn JavaScript läuft – sonst bleibt alles sichtbar. */
.js [data-reveal],
.js .animate-on-scroll {
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--ease-out-soft),
    transform var(--reveal-duration) var(--ease-out-soft),
    clip-path var(--reveal-duration) var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0ms);
  /* Bewusst kein will-change: auf Seiten wie dem Glossar mit sehr vielen
     Elementen würde das unnötig viele Compositing-Ebenen erzeugen. */
}

.js [data-reveal="up"],
.js .animate-on-scroll        { transform: translate3d(0, 34px, 0); }
.js [data-reveal="down"]      { transform: translate3d(0, -28px, 0); }
.js [data-reveal="left"]      { transform: translate3d(-40px, 0, 0); }
.js [data-reveal="right"]     { transform: translate3d(40px, 0, 0); }
.js [data-reveal="zoom"]      { transform: scale(.94); }
.js [data-reveal="rise"]      { transform: translate3d(0, 60px, 0) scale(.985); }
.js [data-reveal="fade"]      { transform: none; }
.js [data-reveal="mask"]      { transform: translate3d(0, 26px, 0); clip-path: inset(0 0 100% 0); }

.js [data-reveal].is-revealed,
.js .animate-on-scroll.visible {
  opacity: 1;
  transform: none;
}
/* Nur der Masken-Effekt beschneidet – und auch nur, solange er läuft.
   Vorher lag der Beschnitt auf ALLEN eingeblendeten Elementen; dadurch
   wurden Schlagschatten und das Anheben beim Überfahren (z. B. bei den
   runden Leistungs-Symbolen) an der Elementkante abgeschnitten. */
.js [data-reveal="mask"].is-revealed { clip-path: inset(0 0 0 0); }

/* Überschriften dürfen minimal länger brauchen – wirkt hochwertiger. */
.js [data-reveal="rise"] { --reveal-duration: 1.05s; }
.js [data-reveal="mask"] { --reveal-duration: 1.1s; }

/* ---------- Parallaxe ---------- */
/* Der Hintergrund braucht Reserve nach oben und unten, damit beim
   Verschieben keine Kanten auftauchen. */
.has-parallax { overflow: hidden; overflow: clip; }
.hero__bg.is-parallax,
.section__bg.is-parallax,
.page-hero__bg.is-parallax {
  top: -14%; bottom: -14%; height: auto;
  will-change: transform;
}

/* ---------- Hero-Auftakt beim Laden ---------- */
.js .hero__kicker,
.js .hero h1,
.js .hero__lead,
.js .hero__tagline,
.js .hero__usp,
.js .hero .btn-row,
.js .hero__elk,
.js .page-hero .breadcrumb,
.js .page-hero h1,
.js .page-hero > .container > p,
.js .page-hero__inner > * {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .9s var(--ease-out-soft), transform .9s var(--ease-out-soft);
}
.js .hero.is-ready .hero__kicker,
.js .hero.is-ready h1,
.js .hero.is-ready .hero__lead,
.js .hero.is-ready .hero__tagline,
.js .hero.is-ready .hero__usp,
.js .hero.is-ready .btn-row,
.js .hero.is-ready .hero__elk,
.js .page-hero.is-ready .breadcrumb,
.js .page-hero.is-ready h1,
.js .page-hero.is-ready > .container > p,
.js .page-hero.is-ready .page-hero__inner > * {
  opacity: 1;
  transform: none;
}
.js .hero .hero__kicker      { transition-delay: .10s; }
.js .hero h1                 { transition-delay: .20s; }
.js .hero .hero__lead        { transition-delay: .32s; }
.js .hero .hero__tagline     { transition-delay: .42s; }
.js .hero .hero__usp         { transition-delay: .50s; }
.js .hero .btn-row           { transition-delay: .60s; }
.js .hero .hero__elk         { transition-delay: .70s; }
.js .page-hero .breadcrumb   { transition-delay: .06s; }
.js .page-hero h1            { transition-delay: .16s; }
.js .page-hero > .container > p { transition-delay: .28s; }

/* Das Hero-Foto selbst zieht beim Laden ganz leicht zusammen. */
.js .hero__bg, .js .page-hero__bg { transform-origin: center; }
.js .hero .hero__bg { animation: heroSettle 2.4s var(--ease-out-soft) both; }
@keyframes heroSettle {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
/* Läuft Parallaxe, übernimmt JavaScript die Transformation. */
.js .hero .hero__bg.is-parallax { animation: none; }

/* ---------- Bilder: sanfter Zoom beim Erscheinen und beim Überfahren ---------- */
.tl-card { overflow: hidden; }
.js .tl-card img,
.js .plot-card__media img,
.js .article-card__media img {
  transform: scale(1.09);
  transition: transform 1.25s var(--ease-out-soft);
}
.js .tl-card.is-revealed img,
.js .is-revealed .tl-card img,
.js .plot-card.is-revealed .plot-card__media img,
.js .is-revealed .plot-card__media img,
.js .article-card.is-revealed .article-card__media img,
.js .is-revealed .article-card__media img { transform: scale(1); }

/* Beim Überfahren zieht das Bild schneller an, beim Verlassen läuft es
   ruhig zurück – das wirkt hochwertiger als ein hartes Zurückspringen. */
.tl-card:hover img,
.plot-card:hover .plot-card__media img,
.article-card:hover .article-card__media img {
  transform: scale(1.055);
  transition-duration: .55s;
}

.split__media { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.split__media img { transition: transform 1.2s var(--ease-out-soft); }
.split__media:hover img { transform: scale(1.035); }

/* Bildunterschrift oben links im Foto (wie auf der Live-Seite) */
.media-label { position: absolute; top: clamp(1rem, 2.5vw, 1.9rem); left: clamp(1rem, 2.5vw, 1.9rem); pointer-events: none; }
.media-label__title { display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.15rem, .9rem + .8vw, 1.7rem); color: #fff; line-height: 1.2;
  text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.media-label__sub { display: block; margin-top: .15rem; color: rgba(255,255,255,.92);
  font-size: var(--text-sm); text-shadow: 0 1px 10px rgba(0,0,0,.5); }

/* ---------- Zeitstrahl: Linie zeichnet sich auf ---------- */
.js .timeline::before { transform: translateX(-50%) scaleY(0); transform-origin: top; transition: transform 1.6s var(--ease-out-soft); }
.js .timeline.is-drawn::before { transform: translateX(-50%) scaleY(1); }

/* ---------- Weniger Bewegung: alles ruhig stellen ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .animate-on-scroll,
  .js .hero__kicker, .js .hero h1, .js .hero__lead, .js .hero__tagline,
  .js .hero__usp, .js .hero .btn-row, .js .hero__elk,
  .js .page-hero .breadcrumb, .js .page-hero h1, .js .page-hero > .container > p {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
  .js .hero .hero__bg { animation: none; }
  .js .tl-card img, .js .press-card img,
  .js .plot-card__media img, .js .rat-card__media img { transform: none !important; }
  .js .timeline::before { transform: translateX(-50%) scaleY(1) !important; }
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}


/* =====================================================================
   FEINSCHLIFF – Tiefe, Kontrast und Mikro-Interaktionen
   ===================================================================== */

/* ---------- Kopfzeile: wird beim Scrollen kompakter ---------- */
.site-header { transition: box-shadow .35s ease, background-color .35s ease, backdrop-filter .35s ease; }
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(20,23,26,.10); border-bottom-color: transparent; }
.site-header .nav { transition: padding-block .35s var(--ease-out-soft); }
.site-header .nav__logo img { transition: height .35s var(--ease-out-soft); }
@media (min-width: 1024px) {
  .site-header.is-compact .nav { padding-block: .6rem; }
  .site-header.is-compact .nav__logo img { height: 66px; }
}
/* Der gelbe Knopf bekommt einen leichten Schimmer beim Überfahren. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.42) 50%, transparent 80%);
  transform: translateX(-130%); transition: transform .75s var(--ease-out-soft);
}
.btn:hover::after { transform: translateX(130%); }
@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } }

/* ---------- Foto-Sektionen: mehr Tiefe statt flachem Schleier ---------- */
/* Vorher lag ein gleichmäßiges Schwarz über dem Bild – das wirkt stumpf.
   Jetzt: dunkler Verlauf plus Vignette, dadurch bleibt das Motiv sichtbar
   und der Text steht trotzdem klar davor. */
.section--photo::before {
  background:
    linear-gradient(90deg,  rgba(0,0,0,.40) 0%, rgba(0,0,0,.10) 48%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.58) 22%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.76) 100%);
}
.section--photo > .section__bg { filter: saturate(.9) contrast(1.03); }
.page-hero::after {
  background:
    linear-gradient(90deg,  rgba(0,0,0,.38) 0%, rgba(0,0,0,.08) 55%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,.72) 100%);
}
.page-hero__bg { filter: saturate(.9); }

/* ---------- Hero: mehr Raum für die Überschrift, satterer Verlauf ---------- */
.hero__inner { max-width: 1180px; }
.hero__lead { max-width: 1080px; }
.hero::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.14) 38%, rgba(0,0,0,.20) 62%, rgba(0,0,0,.72) 100%),
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.12) 55%, transparent 100%);
}
.hero h1 { text-wrap: balance; letter-spacing: -.015em; text-shadow: 0 2px 26px rgba(0,0,0,.35); }
.hero__lead { text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.hero__kicker { text-shadow: 0 1px 12px rgba(0,0,0,.5); }

/* ---------- Überschriften: ruhigerer Umbruch ---------- */
h1, h2 { text-wrap: balance; }
.section-head p, .split__body p, .services__intro p { text-wrap: pretty; }

/* ---------- Karten: weichere, tiefere Schatten ---------- */
:root {
  --shadow-sm: 0 1px 2px rgba(20,23,26,.05), 0 2px 8px rgba(20,23,26,.05);
  --shadow-md: 0 2px 6px rgba(20,23,26,.05), 0 12px 32px rgba(20,23,26,.09);
  --shadow-lg: 0 4px 12px rgba(20,23,26,.06), 0 26px 60px rgba(20,23,26,.14);
}
.tl-card { transition: transform .45s var(--ease-out-soft), box-shadow .45s var(--ease-out-soft); }
.tl-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tl-item__num { transition: transform .35s var(--ease-out-back), background-color .35s ease, color .35s ease, border-color .35s ease; }
.tl-item:hover .tl-item__num { background: var(--color-primary); border-color: var(--color-primary); transform: translateX(-50%) scale(1.08); }
.contact-item { transition: transform .35s var(--ease-out-soft), box-shadow .35s var(--ease-out-soft), border-color .35s ease; }
.contact-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(255,204,0,.55); }

/* ---------- Leistungen: Symbolkreise reagieren ---------- */
.service__icon { transition: border-color .4s ease, background-color .4s ease, transform .4s var(--ease-out-back), box-shadow .4s ease; }
.service:hover .service__icon {
  border-color: var(--color-primary); background: rgba(255,204,0,.12);
  transform: translateY(-3px); box-shadow: 0 10px 30px rgba(255,204,0,.18);
}
.service h3 { transition: color .3s ease; }
.service:hover h3 { color: var(--color-primary); }

/* ---------- Pfeil-Links: Unterstrich wächst mit ---------- */
.link-arrow { position: relative; display: inline-flex; align-items: center; gap: .35rem; transition: gap .3s var(--ease-out-soft), color .3s ease; }
.link-arrow::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out-soft);
}
.link-arrow:hover::after { transform: scaleX(1); }
.card__link { transition: gap .3s var(--ease-out-soft), color .3s ease; }

/* ---------- Statistik-Band: dezenter Lichtschein ---------- */
.stats-band { position: relative; overflow: hidden; }
.stats-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 50% 0%, rgba(255,204,0,.10) 0%, transparent 70%);
}
.stats-band .container { position: relative; }
.stat__num { transition: transform .4s var(--ease-out-back); }
.stat:hover .stat__num { transform: translateY(-3px); }

/* ---------- Rezensionen: weiche Ränder, Auto-Lauf, Ziehen ---------- */
.reviews-slider { position: relative; }
.reviews--slider {
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  scroll-snap-type: none;          /* stört den weichen Auto-Lauf */
  padding-inline: 2px;
}
.reviews--slider.is-grabbing { cursor: grabbing; scroll-behavior: auto; }
.reviews--slider .review { transition: opacity .5s ease, border-color .35s ease, transform .35s var(--ease-out-soft), background-color .35s ease; }
/* Die Bewertungen laufen automatisch durch – Pfeile braucht es dafür nicht. */
.reviews-arrow { display: none !important; }

/* ---------- FAQ: Antwort gleitet weicher auf ---------- */
.faq__a { transition: max-height .5s var(--ease-out-soft); }
.faq__q { transition: color .3s ease, padding-left .35s var(--ease-out-soft); }
.faq__q:hover { padding-left: .55rem; }
.faq__item { transition: border-color .3s ease; }
.faq__item.is-open { border-color: rgba(255,204,0,.55); }
.faq--light .faq__item.is-open { border-color: var(--color-primary); }
.faq__a-inner { transition: opacity .4s ease .1s; opacity: 0; }
.faq__item.is-open .faq__a-inner { opacity: 1; }

/* ---------- Glossar-Teaser & CTA: Rahmen wie im Original ---------- */
.section--photo .glossar-teaser,
.section--photo .cta-band__inner { position: relative; }

/* ---------- Rahmenblock (Glossar + FAQ, wie im Original) ---------- */
.panel {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4.5vw, 4rem) clamp(1.2rem, 3vw, 3rem);
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
.panel .glossar-teaser { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---------- Rezensionen auf Foto-Grund (wie im Original) ---------- */
/* Kräftiger abgedunkelt als die übrigen Foto-Sektionen, damit die
   dunklen Bewertungskarten klar davor stehen. */
.section--photo.section--reviews::before {
  background:
    linear-gradient(90deg,  rgba(0,0,0,.45) 0%, rgba(0,0,0,.20) 50%, rgba(0,0,0,.10) 100%),
    linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.72) 30%, rgba(0,0,0,.70) 65%, rgba(0,0,0,.86) 100%);
}
.section--photo.section--reviews > .section__bg { filter: saturate(.55) brightness(.9); }
.section--reviews .reviews-head p { color: #B7BCC3; }
.section--reviews .review {
  background: rgba(16,17,19,.86);
  border-color: rgba(255,255,255,.10);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.section--reviews .review:hover { background: rgba(26,27,30,.94); }
.section--reviews .rating-box { background: rgba(255,255,255,.06); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* ---------- Fokus sichtbar halten (Barrierefreiheit) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}


/* =====================================================================
   ERWEITERUNGEN – Bildshow, verlinktes Hausbild, Farbübergänge,
   Fortschrittsbalken im Zeitstrahl, Agentur-Hinweis im Footer
   ===================================================================== */

/* ---------- Hero: wechselnde Bilder mit langsamer Kamerafahrt ---------- */
/* Die Bilder liegen in images/hero-slides/. Zum Austauschen einfach die
   Dateien dort ersetzen bzw. im HTML weitere .hero__slide ergänzen. */
.hero__bg--show { overflow: hidden; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.8s var(--ease-out-soft);
}
.hero__slide.is-active { opacity: 1; }
/* Mit JavaScript kommt die ruhige Kamerafahrt dazu: das aktive Bild
   zieht über seine Standzeit ganz langsam heran. */
.js .hero__slide { transition: opacity 1.8s var(--ease-out-soft), transform 9s linear; }
.js .hero__slide.is-active { transform: scale(1.11); }
/* Ohne JavaScript bleibt das erste Bild einfach stehen. */
html:not(.js) .hero__slide:first-child { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .hero__slide { transition: opacity .4s linear; transform: none !important; }
}

/* ---------- Hausbild verlinkt: deutlich größer beim Überfahren ---------- */
.split__media--link { display: block; cursor: pointer; }
.split__media--link img { transition: transform .85s var(--ease-out-soft); }
.split__media--link:hover img,
.split__media--link:focus-visible img { transform: scale(1.09); }
/* Hinweis, dass das Bild zum Haus führt – erscheint beim Überfahren */
.media-cta {
  position: absolute; right: clamp(.9rem, 2vw, 1.5rem); bottom: clamp(.9rem, 2vw, 1.5rem);
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.94); color: var(--color-ink);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm);
  padding: .7rem 1.15rem; border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease-out-soft), transform .45s var(--ease-out-soft), background-color .3s ease;
  pointer-events: none;
}
.split__media--link:hover .media-cta,
.split__media--link:focus-visible .media-cta { opacity: 1; transform: translateY(0); }
.split__media--link:hover .media-cta { background: var(--color-primary); }
.media-cta svg { width: 15px; height: 15px; flex: none; }
/* Auf Touch-Geräten gibt es kein Überfahren – dort dauerhaft zeigen. */
@media (hover: none) {
  .media-cta { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .split__media--link:hover img { transform: none; }
}

/* ---------- Farbübergang: aus dem schwarzen Band ins Foto ---------- */
/* Die Sektion beginnt oben in genau demselben Schwarz wie das Band
   darüber und blendet erst danach ins Bild auf. */
.section--photo::before {
  background:
    linear-gradient(90deg,  rgba(0,0,0,.40) 0%, rgba(0,0,0,.10) 48%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,1)   0%,
      rgba(0,0,0,.97) 3%,
      rgba(0,0,0,.80) 9%,
      rgba(0,0,0,.60) 20%,
      rgba(0,0,0,.55) 62%,
      rgba(0,0,0,.72) 88%,
      rgba(0,0,0,.90) 100%);
}

/* ---------- Zahlen + Leistungen: ein durchgehender Foto-Block ---------- */
/* Das Foto liegt bereits hinter den Zahlen. Oben beginnt der Block in
   reinem Schwarz, blendet hinter den Zahlen ins Bild auf, zeigt es in der
   Mitte am kräftigsten und verwäscht nach unten wieder ins Dunkle. */
.section--leistungen { padding-top: 0; }
.section--photo.section--leistungen::before {
  background:
    linear-gradient(90deg,  rgba(0,0,0,.34) 0%, rgba(0,0,0,.08) 52%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,1)    0%,
      rgba(0,0,0,.96)  4%,
      rgba(0,0,0,.80) 12%,
      rgba(0,0,0,.62) 21%,
      rgba(0,0,0,.52) 36%,
      rgba(0,0,0,.55) 58%,
      rgba(0,0,0,.70) 78%,
      rgba(0,0,0,.84) 91%,
      rgba(0,0,0,.93) 100%);
}
/* Das Zahlenband bringt auf dem Foto keinen eigenen Untergrund mit. */
.stats-band--onphoto { background: transparent; position: relative; z-index: 1; }
.stats-band--onphoto::before { display: none; }
.stats-band--onphoto .stat__label { color: var(--color-primary); }

/* ---------- Zeitstrahl: Balken läuft beim Scrollen mit ---------- */
.timeline__progress {
  position: absolute; left: 50%; top: 0; width: 4px;
  transform: translateX(-50%);
  height: var(--tl-progress, 0px);
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  border-radius: 4px;
  z-index: 1;
  box-shadow: 0 0 18px rgba(255,204,0,.45);
  transition: height .12s linear;
  pointer-events: none;
}
/* Der Kopf des Balkens – ein kleiner Punkt, der mitwandert */
.timeline__progress::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-primary);
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px rgba(255,204,0,.22), 0 2px 10px rgba(0,0,0,.25);
}
/* Erreichte Schritte bekommen eine gelbe Ziffer */
.tl-item.is-reached .tl-item__num {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
@media (prefers-reduced-motion: reduce) { .timeline__progress { transition: none; } }

/* ---------- Agentur-Hinweis im Footer ---------- */
.footer-bottom { gap: 1rem 2rem; }
.footer-credit {
  display: inline-flex; align-items: center; gap: .85rem;
  color: #9BA1A8; font-size: var(--text-xs); letter-spacing: .04em;
  text-transform: uppercase; line-height: 1.2;
  transition: color var(--transition-fast);
}
.footer-credit:hover, .footer-credit:focus-visible { color: var(--color-primary); }
.footer-credit img {
  height: 78px; width: auto; flex: none;
  opacity: 1; transition: opacity var(--transition-fast), transform var(--transition-base);
}
.footer-credit:hover img { opacity: 1; transform: scale(1.05); }
.footer-partner { display: block; margin-top: .55rem; font-size: var(--text-xs); color: rgba(255,255,255,.42); }
.footer-partner a { color: inherit; }
.footer-partner a:hover { color: var(--color-primary); }
.footer-credit__text { display: block; white-space: nowrap; }
@media (max-width: 520px) {
  .footer-bottom { justify-content: flex-start; }
  .footer-credit { gap: .55rem; }
  .footer-credit img { height: 64px; }
}


/* =====================================================================
   BAUSTEINE DER SEITE „GRUNDSTÜCKSENTWICKLUNG"
   (an die Live-Seite angeglichen)
   ===================================================================== */

/* ---------- Hero auf Unterseiten: etwas flacher als auf der Startseite ---------- */
.hero--sub { min-height: min(74vh, 760px); }
.breadcrumb--hero { color: rgba(255,255,255,.78); margin-bottom: 1.1rem; }
.breadcrumb--hero a:hover { color: var(--color-primary); }
.js .hero--sub .breadcrumb { opacity: 0; transform: translate3d(0,26px,0);
  transition: opacity .9s var(--ease-out-soft), transform .9s var(--ease-out-soft); }
.js .hero--sub.is-ready .breadcrumb { opacity: 1; transform: none; transition-delay: .04s; }

/* ---------- Split-Varianten ---------- */
.split--top { align-items: start; }
.split--text-first .split__media { border-radius: var(--radius-lg); }

/* Logo-Spalte (ELK) */
.split--logo { align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.split__logo { display: flex; align-items: center; justify-content: center; padding-inline: clamp(0rem, 2vw, 2rem); }
.split__logo img { width: 100%; max-width: 560px; height: auto; }

/* Weiße Karte neben dem Foto (Abschluss-Abschnitt) */
.split--card { align-items: stretch; grid-template-columns: 1.1fr .9fr; }
.split__card {
  background: var(--color-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: clamp(1.8rem, 4vw, 3.2rem);
  align-self: center;
}
.split__card h2 { font-size: var(--text-2xl); margin-bottom: 1rem; }
.split__card p { color: var(--color-text-muted); margin-bottom: 1rem; }
.split__card .btn-row { margin-top: 1.6rem; }
.split__card .btn { padding-inline: 1.45rem; }
.split--card .split__media { align-self: stretch; }
.split--card .split__media img { height: 100%; object-fit: cover; }

/* ---------- Leistungskarten mit Rahmen (auf dem Foto) ---------- */
.services__list--boxed { gap: clamp(1rem, 2vw, 1.4rem); }
.services__list--3 { grid-template-columns: repeat(3, 1fr); }
.services__list--3 .check-list { margin-top: .9rem; }
.services__list--3 .check-list li { color: #D4D7DB; font-size: var(--text-sm); }
@media (max-width: 1023px) { .services__list--3 { grid-template-columns: 1fr; } }

/* Vorteilsliste im Hero */
.hero__usp { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem .9rem; margin: 0 0 1.6rem; padding: 0; }
.hero__usp li {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-sm); padding: .5rem .9rem;
  font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); color: #fff;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.hero__usp li::before { content: '✓'; color: var(--color-primary); font-weight: 700; }
.service--boxed {
  max-width: none;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 2.5vw, 1.9rem);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: background-color .4s ease, border-color .4s ease, transform .4s var(--ease-out-soft);
}
.service--boxed:hover { background: rgba(255,255,255,.09); border-color: rgba(255,204,0,.35); transform: translateY(-3px); }
.service--boxed .service__icon { width: 46px; height: 46px; margin-bottom: .8rem; }
.service--boxed .service__icon svg { width: 20px; height: 20px; }
.service--boxed h3 { font-style: normal; font-size: var(--text-lg); margin-bottom: .45rem; }
.service--boxed p { margin-bottom: 0; }

/* Abschluss-Satz unter einem Split – läuft über die ganze Breite */
.split-outro {
  font-style: italic; font-weight: 500; font-size: var(--text-lg);
  color: var(--color-ink); max-width: none;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 2px solid var(--color-primary);
}

/* Visitenkarte auf der Kontaktseite */
.vcard { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.6rem; }
.vcard__foto { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: var(--shadow-md); }
.vcard__name { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-xl); margin: 0; }
.vcard__rolle { color: var(--color-primary-hover); font-weight: 600; margin: .15rem 0 0; }
.contact-info__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg); margin: 0 0 1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--color-primary); }

/* ---------- Merkmalsraster mit Trennlinien (baureifer Bauplatz) ---------- */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.5rem, 3vw, 2.5rem); align-self: start; }
.feature {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.05rem .2rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--text-base);
  color: var(--color-ink); line-height: 1.35;
}
.feature:nth-last-child(-n+2) { border-bottom: 0; }
.feature__ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--color-primary-hover); }
.feature__ico svg { width: 24px; height: 24px; }

/* ---------- Portalleiste als eigenes schwarzes Band ---------- */
.portals-band { background: var(--color-dark); padding-block: clamp(1.8rem, 4vw, 2.8rem); }

/* ---------- Hausbeispiele von ELK ---------- */
.house-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.house-card {
  display: block; background: #DCE9F5; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-out-soft), box-shadow .4s var(--ease-out-soft);
}
.house-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.house-card__head { padding: 1.1rem 1.2rem .8rem; }
.house-card__title { display: block; font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg); color: var(--color-ink); line-height: 1.25; }
.house-card__sub { display: block; color: #4C5764; font-size: var(--text-sm); margin-top: .1rem; }
.house-card__media { overflow: hidden; aspect-ratio: 900 / 810; }
.house-card__media img { width: 100%; height: 100%; object-fit: cover; }
.js .house-card__media img { transform: scale(1.08); transition: transform 1.25s var(--ease-out-soft); }
.js .house-card.is-revealed .house-card__media img,
.js .is-revealed .house-card__media img { transform: scale(1); }
.house-card:hover .house-card__media img { transform: scale(1.06); transition-duration: .55s; }

/* ---------- Bewertungen neben dem Bewertungskasten ---------- */
.reviews-split { display: grid; grid-template-columns: minmax(260px, .8fr) 2.2fr; gap: clamp(1.2rem, 2.5vw, 1.8rem); align-items: stretch; }
.reviews-split .rating-box { display: flex; flex-direction: column; justify-content: center; }
.reviews-split .reviews { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Helle Bewertungskarten auf dunklem Foto (wie im Original) */
.reviews--light .review {
  background: #fff; border-color: rgba(0,0,0,.06); box-shadow: var(--shadow-md);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.reviews--light .review:hover { background: #fff; border-color: rgba(255,204,0,.6); }
.reviews--light .review::before { color: rgba(35,35,35,.07); }
.reviews--light .review__text { color: var(--color-text); }
.reviews--light .review__name { color: var(--color-ink); }
.reviews--light .review__src { color: #6B7480; }
.reviews--light .review__avatar { background: var(--color-bg-alt); color: var(--color-ink); border-color: var(--color-border); }
.reviews--light .review__stars { color: #E6B800; }
.reviews--light .review__foot { border-top-color: rgba(0,0,0,.08); }
.reviews--light .review__author { display: flex; align-items: center; gap: .85rem; margin-top: 1.1rem; }

/* ---------- Responsive für die neuen Bausteine ---------- */
@media (max-width: 1023px) {
  .house-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-split { grid-template-columns: 1fr; }
  .split--logo, .split--card { grid-template-columns: 1fr; }
  .split__logo { padding-block: 1rem; }
  .split__logo img { max-width: 420px; }
}
@media (max-width: 639px) {
  .house-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-border); }
  .feature:last-child { border-bottom: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .split, .services, .contact-grid, .reviews-head { grid-template-columns: 1fr; }
  .reviews-head { gap: 1.5rem; }
  .rating-box { max-width: 430px; }
  .services__intro { position: static; }
  .split__media { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hero__elk { display: none; }
  .timeline::before { left: 12px; }
  /* Der Fortschrittsbalken folgt der Linie an den linken Rand */
  .timeline__progress { left: 12px; }
  .tl-item { grid-template-columns: 1fr; padding-left: 2.6rem; }
  .tl-item__num { left: 12px; transform: translateX(-50%); }
  .tl-item:nth-child(odd) .tl-card, .tl-item:nth-child(even) .tl-card { grid-column: 1; }

}

/* Die Kopfzeile braucht für sieben Menüpunkte, Logo und Knopf mindestens
   rund 1280px – mit dem größeren Logo etwas mehr als vorher. Darunter
   wandert das Menü ins Schubfach. Zwischen 1280 und 1600 rücken Logo und
   Menü etwas enger zusammen, damit die Zeile dort bequem passt. */
@media (min-width: 1280px) and (max-width: 1599px) {
  .nav__logo img { height: 68px; }
  .nav__menu { gap: .85rem; }
  .nav__menu a { font-size: .88rem; }
  .btn--nav { padding: .8rem 1.35rem; font-size: .9rem; }
}
/* Menüpunkte nie umbrechen – sonst wächst die Kopfzeile in die Höhe. */
.nav__menu a { white-space: nowrap; }
@media (max-width: 1279px) { .nav__menu a { white-space: normal; } }

@media (max-width: 1279px) {
  .nav__toggle { display: block; }
  .nav__menu { position: fixed; inset: 0 0 0 auto; width: min(320px, 82vw); z-index: 60; background: #fff; flex-direction: column; align-items: flex-start; gap: .3rem; padding: 5rem 1.6rem 2rem; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--transition-base); overflow-y: auto; margin-inline: 0; }
  .nav__menu.is-open { transform: translateX(0); }
  .nav__menu a { width: 100%; padding: .8rem .2rem; border-bottom: 1px solid var(--color-border); font-size: 1.05rem; }
  .nav__menu a::after { display: none; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 55; opacity: 0; visibility: hidden; transition: opacity var(--transition-base); }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
}

/* Unter 640px reicht die Kopfzeile nicht mehr für Logo, gelben Knopf und
   Menü-Symbol nebeneinander – der Knopf schob das Symbol aus dem Bild.
   Deshalb steht er dort als hervorgehobener Eintrag im Menü-Schubfach. */
@media (max-width: 639px) {
  .btn--nav { display: none; }
  .nav__menu .nav__cta { display: block; width: 100%; margin-top: 1.1rem; padding: .95rem 1.1rem;
                         border-bottom: 0; border-radius: var(--radius-md);
                         background: var(--color-primary); color: var(--color-ink);
                         text-align: center; font-weight: 700; }
  .nav__menu .nav__cta:hover { background: var(--color-primary-hover); }
}
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .stats { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .check-list { grid-template-columns: 1fr; }
  .hero { min-height: 78vh; }
  .btn { width: 100%; }
  .btn-row .btn { flex: 1 1 auto; }
  .topbar__inner { justify-content: center; }
  .nav__actions .btn { width: auto; }
  .form__row { grid-template-columns: 1fr; }
  .reviews--slider .review { flex-basis: 86%; }
  .reviews-arrow--prev { left: 2px; }
  .reviews-arrow--next { right: 2px; }
  .rating-box { max-width: none; padding: 1.3rem 1.3rem 1.4rem; }
  .rating-box__label { justify-content: flex-start; }
  .review__more { width: auto; }
  .review { padding: 1.5rem 1.3rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .reviews--slider .review { flex-basis: calc((100% - 1.5rem) / 2); }
  .reviews-arrow--prev { left: -8px; }
  .reviews-arrow--next { right: -8px; }
}