@charset "UTF-8";
/* =====================================================================
   Immobilienberatung B. Philipp UG — Stilvorlage
   ---------------------------------------------------------------------
   Eine Datei, kein Framework, keine Fremdquelle. Aufbau:

     01  Farb- und Maßwerte
     02  Grundlagen und Typografie
     03  Raster und Abstände
     04  Kopfleiste, Mega-Menü, mobiles Menü
     05  Fußbereich und Aktionsleiste
     06  Flächen, Karten, Listen
     07  Schaltflächen und Verweise
     08  Formulare und Bewertungsassistent
     09  Bilder und Galerie
     10  Bewegung
     11  Druck und Sonderfälle

   Zwei Regeln, die überall gelten: Jede Farbkombination erreicht
   mindestens 4,5:1, und jede Bewegung liegt hinter
   `prefers-reduced-motion: no-preference`.
   ===================================================================== */

/* --- 00  Hausschrift ------------------------------------------------ */

/*
 * Caladea, SIL Open Font License 1.1, auf den Zeichenvorrat dieser Website
 * beschnitten: 9 kB für den geraden, 10 kB für den kursiven Schnitt. Die
 * Lizenz liegt daneben unter `OFL.txt` und muss mit ausgeliefert werden.
 *
 * Warum überhaupt eine mitgelieferte Schrift, wo doch sonst nichts geladen
 * wird: Der Systemstapel zeigte die Überschriften auf einem Mac in Iowan
 * Old Style, unter Windows in Georgia, unter Linux in DejaVu Serif – drei
 * verschiedene Gesichter für dieselbe Marke. 19 kB sind der Preis dafür,
 * dass die Seite überall gleich aussieht. Sie kommen vom eigenen Server,
 * es geht also weiterhin keine Anfrage nach außen.
 */
@font-face {
  font-family: 'Caladea';
  src: url('../schrift/caladea-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caladea';
  src: url('../schrift/caladea-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/*
 * Ersatzschriften mit angeglichenen Maßen.
 *
 * `font-display: swap` heißt: Bis die Schrift da ist, steht der Text in der
 * Ersatzschrift. Wechselt er dann auf eine Schrift mit anderer x-Höhe,
 * springt das Layout – und genau das misst Google als Layoutverschiebung.
 * Die Werte unten sind aus den Schriftdateien gerechnet: Caladea hat eine
 * x-Höhe von 0,467 em, Georgia 0,481, DejaVu Serif 0,520. Skaliert man die
 * Ersatzschrift entsprechend herunter, ist der Wechsel nahezu unsichtbar.
 */
@font-face {
  font-family: 'Caladea Ersatz Georgia';
  src: local('Georgia');
  size-adjust: 97%;
  ascent-override: 92.8%;
  descent-override: 25.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Caladea Ersatz DejaVu';
  src: local('DejaVu Serif');
  size-adjust: 89.9%;
  ascent-override: 100.1%;
  descent-override: 27.8%;
  line-gap-override: 0%;
}

/* --- 01  Farb- und Maßwerte ---------------------------------------- */

:root {
  /* Tannengrün: die Hausfarbe. Dunkle Flächen, Schaltflächen, Überschriften. */
  --tanne-50: #f1f6f4;
  --tanne-100: #dcebe4;
  --tanne-200: #bad7c8;
  --tanne-300: #8dbaa4;
  --tanne-400: #56927c;
  --tanne-500: #35755e;
  --tanne-600: #2a6050;
  --tanne-700: #234f42;
  --tanne-800: #1a3c34;
  --tanne-900: #14302a;

  /* Petrol: die zweite Stimme. Auszeichnungen, Hinweislinien, Abschlussbänder. */
  --petrol-50: #f0f7f8;
  --petrol-100: #dcedf1;
  --petrol-300: #8bbac6;
  --petrol-400: #5896a8;
  --petrol-600: #3a6c7d;
  --petrol-700: #2d5665;
  --petrol-900: #263c46;

  /* Creme: der Grund. Nie reines Weiß – das flimmert auf großen Flächen. */
  --creme-50: #fdfcf8;
  --creme-100: #f8f5f0;
  --creme-200: #f0ebe3;
  --creme-300: #e5e0d8;
  --creme-400: #d3cbbd;

  /* Messing: der dritte Ton. Sparsam – Haarlinien, Zierzeichen, Ziffern.
     Auf hellem Grund nur `-800` als Text (6,8:1); `-700` ist für Linien und
     Flächen gedacht, nicht für Buchstaben. */
  --messing-200: #e6cf9c;
  --messing-300: #d9b877;
  --messing-500: #a8813f;
  --messing-700: #8a6a1e;
  --messing-800: #6f5518;

  /* Die tiefste Fläche. Für den Kopfbereich, damit die Seite eine
     Lichtrichtung bekommt statt einer einzigen dunklen Farbe. */
  --tief: #0e211d;

  /* Anthrazit: Fließtext. */
  --an-400: #8b9093;
  --an-500: #575b5e;
  --an-600: #4b5155;
  --an-700: #383e41;
  --an-800: #272c2e;
  --an-900: #1a1e20;

  /* Hinweis: sparsam, für Fristen und Einschränkungen. */
  --hinweis-50: #fdf6e7;
  --hinweis-300: #e6d3a3;
  --hinweis-700: #7a5c1c;
  --hinweis-800: #5c4413;

  /* Fehler: nur für Formularfehler. */
  --fehler-50: #fdf2f0;
  --fehler-600: #a33a28;
  --fehler-700: #8a3122;

  /* Schrift aus dem Systemvorrat. Keine Webschrift: kein Nachladen, kein
     Textsprung, keine Anfrage an einen fremden Rechner. */
  --serif: 'Caladea', 'Caladea Ersatz Georgia', 'Caladea Ersatz DejaVu', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Maße */
  --breite: 75rem;
  --breite-text: 42rem;
  --abschnitt: clamp(3.5rem, 2rem + 6vw, 7rem);
  --rand: 1.25rem;
  --radius: 0.5rem;
  --radius-gross: 0.875rem;

  --schatten: 0 1px 2px rgb(26 30 32 / 0.05), 0 6px 12px -8px rgb(26 30 32 / 0.14);
  --schatten-hoch: 0 2px 4px rgb(26 30 32 / 0.06), 0 10px 14px -10px rgb(26 30 32 / 0.24);
  --ruhig: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 40em) {
  :root { --rand: 1.5rem; }
}
@media (min-width: 64em) {
  :root { --rand: 2rem; }
}

/* --- 02  Grundlagen und Typografie --------------------------------- */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Verankerungen dürfen nicht unter der Kopfleiste verschwinden. */
  scroll-padding-top: 5.5rem;
}

body.kein-scrollen { overflow: hidden; }

a, button, summary, label, .navknopf, .verweiskarte {
  /* Ohne das wartet iOS nach jedem Tippen kurz auf einen möglichen
     Doppeltipp zum Zoomen – bei einer Website ohne Zoom-Absicht auf
     Schaltflächen reine Verzögerung. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--creme-100);
  color: var(--an-800);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--tanne-900);
  line-height: 1.18;
  text-wrap: balance;
  /* Große Schrift braucht engeren Satz. Was bei 16 Pixeln richtig wirkt,
     wirkt bei 60 Pixeln luftig bis auseinandergefallen. */
  letter-spacing: -0.012em;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

p { text-wrap: pretty; }

/* Deutsche Komposita sind lang. „Mietschuldenfreiheitsbescheinigung“ passt
   auf einem 320 Punkte breiten Gerät in keine Spalte – ohne diese Regel
   schiebt ein einziges Wort die ganze Seite seitlich heraus. Trennung
   zuerst (lang="de" liefert die Trennstellen), Umbruch im Wort als
   Sicherheitsnetz. */
p, li, dd, dt, address, figcaption, summary, label, .fliess { overflow-wrap: break-word; hyphens: auto; }
h1, h2, h3, h4 { overflow-wrap: break-word; }
/* Rasterkinder dürfen schrumpfen; sonst gilt min-width:auto und ein langes
   Wort sprengt die Spalte. */
:where(.raster, .geteilt, .schritte, .fuss__links, .haken, .fragen, .wahlfeld,
        .fakten, .orte, .galerie, .zeiten, .formular, .filter, .abschluss) > * { min-width: 0; }

a { color: inherit; }

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

strong, b { font-weight: 600; }
body { font-synthesis-weight: none; }

/* Doppelter Fokusring: dunkel innen, hell außen. So bleibt er auf jedem
   Untergrund sichtbar – ein einfarbiger Ring verschwindet zuverlässig
   entweder auf Creme oder auf Tannengrün. */
:focus-visible {
  outline: 2px solid var(--tanne-800);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgb(253 252 248 / 0.9);
  border-radius: 3px;
}
.auf-dunkel :focus-visible,
.flaeche--tanne :focus-visible,
.flaeche--petrol :focus-visible,
.fuss :focus-visible {
  outline-color: var(--creme-50);
  box-shadow: 0 0 0 4px rgb(14 33 29 / 0.85);
}

/* Größenstufen. `clamp` statt Haltepunkten: eine Kurve statt Sprüngen. */
.anzeige      { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem); line-height: 1.06; letter-spacing: -0.021em; }
.anzeige--gr  { font-size: clamp(2.375rem, 1.5rem + 3.4vw, 3.875rem); line-height: 1.05; letter-spacing: -0.024em; }
.titel        { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem); line-height: 1.12; letter-spacing: -0.017em; }
.titel--kl    { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.18; letter-spacing: -0.012em; }
.zwischen     { font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem); line-height: 1.3; letter-spacing: -0.006em; }
.lauf         { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); line-height: 1.62; }

/* Ziffern in Tabellen und Datenreihen laufen sonst unterschiedlich breit
   und die Spalten zappeln. */
.zeiten, .objekt__daten, .fakten b, .assistent__zaehler { font-variant-numeric: tabular-nums; }

/* Dachzeile mit vorangestelltem Messingstrich. Der Strich ist das
   wiederkehrende Zeichen der Seite – er taucht am Abschnittsanfang, an der
   Zeitleiste und im Zitat wieder auf. */
.dach {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--petrol-700);
}
.dach::before {
  content: '';
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1px;
  background: var(--messing-500);
}
.auf-dunkel .dach { color: var(--tanne-200); }
.auf-dunkel .dach::before { background: var(--messing-300); }

.gedaempft { color: var(--an-600); }
.auf-dunkel .gedaempft { color: var(--creme-300); }
.klein { font-size: 0.875rem; }
.mini { font-size: 0.8125rem; color: var(--an-500); }
.auf-dunkel .mini { color: var(--tanne-100); }

.text-mitte { text-align: center; }
.nowrap { white-space: nowrap; }
/* Umbruch nur dort, wo genug Platz für zwei volle Zeilen ist. Auf dem
   Telefon soll der Satz frei fließen. */
.nur-breit { display: none; }
@media (min-width: 62em) { .nur-breit { display: inline; } }

/* Fließtext mit begrenztem Maß. 60 bis 75 Zeichen lesen sich am besten. */
.fliess { max-width: var(--breite-text); }
.fliess > * + * { margin-top: 1.125rem; }
.fliess h2 { margin-top: 2.5rem; }
.fliess h3 { margin-top: 2rem; }
.fliess ul, .fliess ol { padding-left: 1.25rem; }
.fliess li + li { margin-top: 0.5rem; }
.fliess a { color: var(--tanne-700); text-underline-offset: 0.2em; }
.fliess a:hover { color: var(--tanne-800); }

/* Sprunglink: sichtbar, sobald er den Fokus hat. */
.sprung {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 100;
  background: var(--tanne-800);
  color: var(--creme-50);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 160ms var(--ruhig);
}
.sprung:focus { transform: translateY(0); }

.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- 03  Raster und Abstände --------------------------------------- */

.bahn {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.bahn--schmal { max-width: 52rem; }

.flaeche { padding-block: var(--abschnitt); }
.flaeche--creme { background: var(--creme-100); }
.flaeche--hell { background: var(--creme-50); }
.flaeche--sand { background: var(--creme-200); }
.flaeche--tanne { background: var(--tanne-900); color: var(--creme-100); }
/* Die tiefste Fläche – für die Aussage-Bänder. */
.flaeche--tief { background: var(--tief); color: var(--creme-100); }
.flaeche--tief h1, .flaeche--tief h2, .flaeche--tief h3, .flaeche--tief blockquote { color: var(--creme-50); }
.flaeche--petrol { background: var(--petrol-900); color: var(--creme-100); }
.flaeche--tanne h1, .flaeche--tanne h2, .flaeche--tanne h3,
.flaeche--petrol h1, .flaeche--petrol h2, .flaeche--petrol h3 { color: var(--creme-50); }
.flaeche--eng { padding-block: calc(var(--abschnitt) * 0.6); }

/* Tiefe auf dunklen Flächen: zwei sehr weiche Lichtkegel. Kein Bild, kein
   Ladegewicht – zwei Verläufe. */
.tiefe { position: relative; isolation: isolate; overflow: hidden; }
.tiefe::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(58rem 34rem at 8% -14%, rgb(86 146 124 / 0.34), transparent 64%),
    radial-gradient(44rem 30rem at 96% 8%, rgb(88 150 168 / 0.20), transparent 62%),
    linear-gradient(178deg, rgb(14 33 29 / 0) 55%, rgb(14 33 29 / 0.55));
}

/* Eine Haarlinie in Messing am oberen Rand dunkler Flächen. Kaum zu sehen,
   aber sie gibt der Kante eine Kontur – ohne sie stoßen zwei Farbflächen
   stumpf aneinander. */
.tiefe::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(217 184 119 / 0.45) 18%, rgb(217 184 119 / 0.45) 82%, transparent);
}

.raster { display: grid; gap: 1.5rem; }
@media (min-width: 40em) { .raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 40em) { .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 48em) { .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68em) { .raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.geteilt { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62em) {
  .geteilt { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; }
  .geteilt--text { grid-template-columns: 1fr 1fr; }
}

.reihe { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.reihe--weit { gap: 1.25rem 2rem; }

.abstand-o { margin-top: 1rem; }
.abstand-o-2 { margin-top: 1.5rem; }
.abstand-o-3 { margin-top: 2.25rem; }
.abstand-o-4 { margin-top: 3rem; }

hr.trenner {
  border: 0;
  border-top: 1px solid var(--creme-300);
  margin-block: 2.5rem;
}
.auf-dunkel hr.trenner { border-color: var(--tanne-700); }

/* --- 04  Kopfleiste, Mega-Menü, mobiles Menü ----------------------- */

/*
 * Die Kopfleiste hat zwei Zustände.
 *
 * Ganz oben steht sie ohne Kante direkt auf dem Kopfbereich – eine Linie
 * quer über ein Bild sieht nach Bausatz aus. Sobald gescrollt wird, legt
 * sie sich als eigene Ebene über den Inhalt: etwas flacher, mit Kante und
 * einem sehr weichen Schatten. Das ist kein Effekt, sondern eine Auskunft:
 * Der Inhalt läuft jetzt darunter durch.
 */
.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(253 252 248 / 0.92);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 260ms var(--ruhig), box-shadow 260ms var(--ruhig), background-color 260ms var(--ruhig);
}
.kopf--gescrollt {
  border-bottom-color: var(--creme-300);
  box-shadow: 0 2px 10px -6px rgb(26 30 32 / 0.35);
}
/*
 * Der flachere Zustand lief frueher ueber min-height + padding-block. Beides
 * sind Layout-Eigenschaften: Der Browser muss waehrend der ganzen Animation
 * neu umbrechen, und weil die Kopfleiste sticky ist (also im Fluss bleibt und
 * Platz reserviert), rutschte der gesamte Inhalt darunter um die Differenz
 * mit. Ein Sprung im Text, waehrend man liest. Jetzt bleibt die Hoehe fest,
 * und das Schrumpfen zeigt sich am Markenzeichen -- transform laeuft auf der
 * Grafikkarte, loest kein Layout aus und bewegt nichts ausserhalb der Leiste.
 */
@media (prefers-reduced-motion: no-preference) {
  .marke { transition: transform 260ms var(--ruhig); transform-origin: left center; }
  .kopf--gescrollt .marke { transform: scale(0.88); }
}
@supports not (backdrop-filter: blur(1px)) {
  .kopf { background: var(--creme-50); }
}

.kopf__reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 4rem;
  padding-block: 0.75rem;
}
@media (min-width: 40em) { .kopf__reihe { gap: 1rem; } }

.marke { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; flex-shrink: 1; }
.marke svg { height: 1.75rem; width: auto; }
@media (min-width: 40em) { .marke svg { height: 2.125rem; } }

.kopf__nav { display: none; }
@media (min-width: 64em) { .kopf__nav { display: block; } }

.hauptnav { display: flex; align-items: center; gap: 0.25rem; list-style: none; }
.hauptnav > li { position: relative; }

.navknopf,
.navlink {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: none;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--an-800);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ruhig), color 160ms var(--ruhig);
}
.navknopf, .navlink { position: relative; white-space: nowrap; }
/* Laptopbreite (1024–1199 px): Menü, Telefon und Hauptknopf passen nur
   knapp nebeneinander. Engere Abstände und die Telefonnummer nur noch als
   Symbol (für Screenreader bleibt sie lesbar) halten die Leiste einzeilig. */
@media (min-width: 64em) and (max-width: 74.99em) {
  .navknopf, .navlink { padding-inline: 0.5rem; }
  .telknopf__zahl {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
.navknopf::after, .navlink::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.3rem;
  height: 1.5px;
  border-radius: 2px;
  background: var(--messing-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--ruhig);
}
.navknopf:hover, .navlink:hover { color: var(--tanne-900); }
.navknopf:hover::after, .navlink:hover::after,
.navknopf[aria-expanded='true']::after { transform: scaleX(1); }
.navknopf[aria-expanded='true'] { color: var(--tanne-900); }
.navlink[aria-current='page'] { color: var(--tanne-900); font-weight: 600; }
.navlink[aria-current='page']::after { transform: scaleX(1); background: var(--tanne-700); }

.navknopf__pfeil { width: 0.7em; height: 0.7em; transition: transform 200ms var(--ruhig); }
.navknopf[aria-expanded='true'] .navknopf__pfeil { transform: rotate(180deg); }

/* Mega-Menü. Ohne Verzögerung beim Öffnen: eine Klappe, die 300 ms
   überlegt, fühlt sich kaputt an. */
.mega {
  position: absolute;
  left: 0;
  top: calc(100% + 0.5rem);
  z-index: 50;
  width: max-content;
  min-width: 24rem;
  max-width: min(46rem, calc(100vw - 4rem));
  padding: 1rem;
  background: var(--creme-50);
  border: 1px solid var(--creme-300);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoch);
}
.mega[hidden] { display: none; }
/* Unsichtbare Brücke über die Lücke zwischen Knopf und Klappe (0.5rem oben,
   siehe `top: calc(100% + 0.5rem)`). Ohne sie verlässt die Maus beim
   Herunterfahren `.hauptnav > li` kurz, `mouseleave` feuert und die Klappe
   schließt sich, bevor man sie erreicht. */
.mega::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.5rem;
}
@media (prefers-reduced-motion: no-preference) {
  .mega { animation: mega-auf 200ms var(--ruhig) both; }
  @keyframes mega-auf {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
  }
}
.mega__liste { display: grid; gap: 0.25rem; list-style: none; }
@media (min-width: 48em) { .mega__liste--2 { grid-template-columns: repeat(2, minmax(14rem, 1fr)); } }

.mega__eintrag {
  display: block;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color 140ms var(--ruhig);
}
.mega__eintrag:hover { background: var(--creme-200); }
.mega__eintrag b { display: block; font-weight: 600; color: var(--tanne-900); font-size: 0.9375rem; }
.mega__eintrag span { display: block; margin-top: 0.15rem; font-size: 0.8125rem; color: var(--an-600); line-height: 1.5; }

.mega__fuss {
  margin-top: 0.75rem;
  padding: 0.875rem;
  border-top: 1px solid var(--creme-300);
  font-size: 0.875rem;
  color: var(--an-600);
}
.mega__fuss a { color: var(--tanne-700); font-weight: 500; }

.kopf__aktionen { display: flex; align-items: center; gap: 0.25rem; flex: 0 0 auto; }
@media (min-width: 40em) { .kopf__aktionen { gap: 0.625rem; } }

.telknopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  justify-content: center;
  padding-inline: 0.5rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tanne-800);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.telknopf:hover { background: var(--creme-200); }
@media (min-width: 40em) { .telknopf { padding-inline: 0.75rem; } }
.telknopf__zahl { display: none; }
@media (min-width: 25rem) { .telknopf__zahl { display: inline; } }

/* Zwei Klassen, damit die Regel gegen `.knopf { display: inline-flex }`
   weiter unten in dieser Datei gewinnt. Mit nur `.kopf__cta` hätte die
   spätere Regel gleiche Spezifität – und die Schaltfläche stünde auch auf
   einem 320 Punkte breiten Gerät in der Leiste. */
.kopf__reihe .kopf__cta { display: none; }
@media (min-width: 40em) { .kopf__reihe .kopf__cta { display: inline-flex; } }

.menuknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--creme-300);
  border-radius: var(--radius);
  background: var(--creme-50);
  color: var(--tanne-900);
  cursor: pointer;
}
.menuknopf:hover { background: var(--creme-200); }
@media (min-width: 64em) { .menuknopf { display: none; } }

/* Mobiles Menü: fällt unter die Kopfleiste, scrollt in sich. */
.mobilmenu {
  display: block;
  border-top: 1px solid var(--creme-300);
  background: var(--creme-50);
  max-height: calc(100dvh - 4.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobilmenu[hidden] { display: none; }
@media (min-width: 64em) { .mobilmenu { display: none !important; } }
.mobilmenu__inhalt { padding-block: 0.75rem 1.5rem; }
.mobilmenu__gruppe + .mobilmenu__gruppe { margin-top: 0.5rem; border-top: 1px solid var(--creme-200); padding-top: 0.5rem; }
.mobilmenu__titel { display: block; padding: 0.625rem 0.25rem 0.25rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--petrol-700); }
/* `:not(.knopf)`: Die beiden Schaltflächen am Ende des Menüs behalten ihre
   eigenen Farben und ihre Zentrierung. Ohne den Ausschluss gewann diese
   Regel (Spezifität 0,1,1 gegen 0,1,0) und setzte dunkle Schrift auf den
   grünen Hauptknopf – Kontrast 1,2:1. */
.mobilmenu a:not(.knopf) {
  display: block;
  padding: 0.75rem 0.25rem;
  min-height: 2.75rem;
  text-decoration: none;
  color: var(--an-800);
  border-radius: var(--radius);
}
.mobilmenu a:not(.knopf):hover { background: var(--creme-200); }
.mobilmenu a:not(.knopf)[aria-current='page'] { color: var(--tanne-800); font-weight: 600; }
.mobilmenu__aktionen { display: grid; gap: 0.625rem; margin-top: 1.25rem; }

/* --- 05  Fußbereich und Aktionsleiste ------------------------------ */

.fuss { position: relative; background: var(--tanne-900); color: var(--creme-200); }
.fuss::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(217 184 119 / 0.4) 20%, rgb(217 184 119 / 0.4) 80%, transparent);
}
.fuss h2, .fuss .fuss__titel { font-family: var(--sans); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tanne-200); margin-bottom: 0.875rem; }
.fuss a { color: var(--creme-200); text-underline-offset: 0.2em; }
.fuss a:hover { color: var(--creme-50); }
.fuss ul { list-style: none; }
.fuss li + li { margin-top: 0.5rem; }
.fuss__marke svg { height: 2.25rem; width: auto; }
@media (min-width: 40em) { .fuss__marke svg { height: 2.75rem; } }

.fuss__zeile { display: flex; align-items: flex-start; gap: 0.625rem; }
.fuss__symbol { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; color: var(--tanne-300); transition: color 180ms var(--ruhig); }
/* Ein Link, der zur Flex-Zeile wird, zieht die von .fuss a geerbte
   Unterstreichung sonst als durchgehenden Strich über das ganze Icon statt
   nur unter den Text -- hier stattdessen nur die Icon-Farbe als Reaktion. */
a.fuss__zeile { text-decoration: none; }
a.fuss__zeile:hover .fuss__symbol { color: var(--creme-50); }

.fuss__spalten { display: grid; gap: 2.5rem; }
@media (min-width: 48em) { .fuss__spalten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72em) { .fuss__spalten { grid-template-columns: 1.15fr 1.5fr 1fr; gap: 3rem; } }
.fuss__links { display: grid; gap: 2rem 2.5rem; grid-template-columns: 1fr; }
/* Zwei Spalten erst, wenn ein langes Wort wie „Immobilienbewertung“ hineinpasst. */
@media (min-width: 26em) { .fuss__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fuss a { overflow-wrap: break-word; hyphens: auto; }

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--tanne-700);
  font-size: 0.8125rem;
  color: var(--tanne-100);
}
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.fuss__unten li + li { margin-top: 0; }

.zeiten { display: grid; gap: 0.35rem; font-size: 0.875rem; }
.zeiten div { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; justify-content: space-between; }
.zeiten dt { color: var(--tanne-100); }
.zeiten dd { color: var(--creme-100); text-align: right; }

/* Aktionsleiste unten – nur auf schmalen Geräten. */
.aktionsleiste {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  background: rgb(20 48 42 / 0.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--tanne-700);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 40em) { .aktionsleiste { display: none; } }
.aktionsleiste__innen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; padding: 0.625rem var(--rand); }
.aktionsleiste a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.aktionsleiste .a-tel { background: var(--creme-50); color: var(--tanne-900); }
.aktionsleiste .a-cta { background: transparent; color: var(--creme-50); border: 1px solid var(--tanne-300); }
/* Platz, damit die Leiste nichts verdeckt. */
body { padding-bottom: 4.25rem; }
@media (min-width: 40em) { body { padding-bottom: 0; } }

/* --- 06  Flächen, Karten, Listen ----------------------------------- */

/*
 * Karten leben von der Kante, nicht vom Schatten.
 *
 * Ein kräftiger Schlagschatten war die Mode der 2010er-Jahre und lässt
 * heute jede Oberfläche billig wirken. Was stattdessen trägt: eine präzise
 * 1-Pixel-Kante, großzügiger Innenabstand und eine Reaktion beim Zeigen,
 * die man eher spürt als sieht.
 */
.karte {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--creme-50);
  border: 1px solid var(--creme-300);
  border-radius: var(--radius-gross);
  transition: border-color 260ms var(--ruhig), transform 260ms var(--ruhig), box-shadow 260ms var(--ruhig);
}
@media (min-width: 40em) { .karte { padding: 1.75rem; } }
.karte h3 { font-size: 1.25rem; }
.karte p { margin-top: 0.625rem; color: var(--an-600); font-size: 0.9375rem; }
.karte__fuss { margin-top: auto; padding-top: 1.25rem; }

.auf-dunkel .karte,
.flaeche--tanne .karte,
.flaeche--petrol .karte {
  background: rgb(253 252 248 / 0.06);
  border-color: rgb(220 235 228 / 0.18);
  box-shadow: none;
  color: var(--creme-100);
}
.auf-dunkel .karte h3 { color: var(--creme-50); }
.auf-dunkel .karte p { color: var(--creme-300); }

/* Verweiskarte: die ganze Fläche ist anklickbar, der Fokus liegt trotzdem
   nur auf dem Verweis. */
.verweiskarte { position: relative; }
.verweiskarte:hover { border-color: var(--tanne-400); transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
/* Beim Antippen/Klicken kurz Richtung Ausgangslage zurück – man soll den
   Druck spüren, nicht nur das Loslassen sehen. */
.verweiskarte:active { transform: translateY(-1px); box-shadow: var(--schatten); }
/* Ein Messingstrich, der beim Zeigen von links einläuft. */
.verweiskarte::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: -1px;
  width: 2.5rem;
  height: 2px;
  background: var(--messing-500);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ruhig);
}
.verweiskarte:hover::before { transform: scaleX(1); }
.auf-dunkel .verweiskarte:hover { border-color: rgb(217 184 119 / 0.55); }
.verweiskarte a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.verweiskarte a { text-decoration: none; }
.verweiskarte:focus-within { outline: 3px solid var(--tanne-700); outline-offset: 2px; }
.verweiskarte:focus-within a:focus-visible { outline: none; }

/* Merkmalsliste mit Häkchen. Das Zeichen ist dekorativ und ausgeblendet. */
.haken { list-style: none; display: grid; gap: 0.75rem; }
.haken li { position: relative; padding-left: 1.75rem; }
.haken li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.7rem; height: 0.38rem;
  border-left: 2px solid var(--tanne-500);
  border-bottom: 2px solid var(--tanne-500);
  transform: rotate(-45deg);
}
.auf-dunkel .haken li::before { border-color: var(--tanne-300); }

/* Nummerierte Schritte. */
.schritte { list-style: none; counter-reset: schritt; display: grid; gap: 1rem; }
@media (min-width: 48em) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .schritte--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 80em) { .schritte--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/*
 * Die Schritte sind eine Zeitleiste, kein Kartenraster.
 *
 * Fünf gleich aussehende Kästen sagen „fünf Dinge“. Eine Linie, die durch
 * sie hindurchläuft, sagt „nacheinander“ – und genau das ist die Aussage:
 * Der Ablauf hat eine Richtung, und man weiß immer, wo man steht.
 */
.schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 1.5rem 1.375rem 1.375rem;
  background: var(--creme-50);
  border: 1px solid var(--creme-300);
  border-radius: var(--radius-gross);
}
/* Kein Hover-Heben hier: Ein Schritt ist keine Verweiskarte, es gibt nichts
   anzuklicken. Ein Kasten, der beim Zeigen abhebt, verspricht eine
   Interaktion, die er nicht einlöst – siehe Vorbemerkung oben. */
.schritte li::before {
  content: counter(schritt);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--creme-50);
  border: 1px solid var(--messing-500);
  color: var(--messing-800);
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-variant-numeric: lining-nums;
}
/* Die Verbindungslinie. Nur dort, wo die Schritte tatsächlich
   nebeneinanderstehen – untereinander bräuchte sie eine andere Richtung
   und würde ins Leere laufen. */
@media (min-width: 80em) {
  .schritte--5 li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(1.5rem + 1.125rem);
    left: calc(100% + 1px);
    width: 1rem;
    height: 1px;
    background: var(--creme-400);
  }
}
.schritte h3 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 600; }
.schritte p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--an-600); }

/* Zahlenreihe („Trust-Elemente“) – nur belegbare Angaben. */
/* Spaltenzahl aus dem verfügbaren Platz, nicht aus der Fensterbreite: Diese
   Liste steht mal über die ganze Breite und mal in der halben Spalte des
   Kopfbereichs. Vier feste Spalten würden dort „Jahrzehnten“ mitten im Wort
   umbrechen. */
.fakten { display: grid; gap: 1.25rem 1.75rem; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.fakten li { padding-left: 1.125rem; border-left: 2px solid var(--tanne-400); }
.auf-dunkel .fakten li { border-left-color: var(--tanne-300); }
.fakten__symbol { height: 1.125rem; width: auto; margin-bottom: 0.625rem; color: var(--tanne-500); }
.auf-dunkel .fakten__symbol { color: var(--messing-300); }
.fakten b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.375rem; line-height: 1.25; color: var(--tanne-900); hyphens: none; }
.auf-dunkel .fakten b { color: var(--creme-50); }
.fakten span { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--an-600); }
.auf-dunkel .fakten span { color: var(--creme-300); }

/*
 * Bewertungskarte.
 *
 * Die Zahl ist die Hauptsache, die Sterne sind Beiwerk – deshalb steht sie
 * groß in der Hausschrift und die Sterne klein darunter. Für Bildschirmleser
 * sind die Sterne ausgeblendet: „★★★★★“ vorgelesen ergibt „Stern Stern Stern
 * Stern Stern“ und sagt nichts. Die Zeile darunter enthält dieselbe Auskunft
 * in Worten.
 */
.bewertung { text-align: center; align-items: center; text-decoration: none; padding-block: 1.75rem; }
/* Eine einzelne Karte über die volle Breite sieht verloren aus. */
.raster--1 { grid-template-columns: minmax(0, 22rem); justify-content: start; }
.bewertung__wert {
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--tanne-900);
  font-variant-numeric: lining-nums;
}
.bewertung__wert small { font-size: 0.9375rem; font-family: var(--sans); color: var(--an-600); }
.bewertung__sterne { display: block; margin-top: 0.5rem; font-size: 1.0625rem; letter-spacing: 0.14em; color: var(--messing-700); }
.bewertung__quelle { display: block; margin-top: 0.75rem; font-weight: 600; font-size: 0.9375rem; color: var(--an-800); }
.bewertung__stand { display: block; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--an-500); }
.auf-dunkel .bewertung__wert { color: var(--creme-50); }
.auf-dunkel .bewertung__sterne { color: var(--messing-300); }
.auf-dunkel .bewertung__quelle { color: var(--creme-100); }
.auf-dunkel .bewertung__stand { color: var(--tanne-100); }

/* Hinweisfeld. */
.hinweis {
  padding: 1.125rem 1.25rem;
  background: var(--hinweis-50);
  border: 1px solid var(--hinweis-300);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--hinweis-800);
}
.hinweis strong { color: var(--hinweis-800); }

/* Zitat. */
blockquote.zitat {
  position: relative;
  padding-left: 2.75rem;
  font-family: var(--serif);
  font-size: clamp(1.3125rem, 1.1rem + 0.85vw, 1.75rem);
  line-height: 1.42;
  letter-spacing: -0.008em;
  color: var(--tanne-900);
  /* Hängende Interpunktion: Das Anführungszeichen steht im Rand, damit die
     erste Textzeile mit den übrigen bündig beginnt. */
  hanging-punctuation: first;
}
blockquote.zitat::before {
  content: '„';
  position: absolute;
  left: 0;
  top: -0.22em;
  font-family: var(--serif);
  font-size: 3.25em;
  line-height: 1;
  color: var(--messing-500);
}
@supports (hanging-punctuation: first) {
  blockquote.zitat { padding-left: 2.75rem; }
}
.auf-dunkel blockquote.zitat { color: var(--creme-50); }
.auf-dunkel blockquote.zitat::before { color: var(--messing-300); }
blockquote.zitat footer { margin-top: 1rem; font-family: var(--sans); font-size: 0.875rem; color: var(--an-600); }
.auf-dunkel blockquote.zitat footer { color: var(--creme-300); }

/* Häufige Fragen: echtes <details>, kein nachgebauter Aufklapper. */
.fragen { display: grid; gap: 0.75rem; }
.frage {
  background: var(--creme-50);
  border: 1px solid var(--creme-300);
  border-radius: var(--radius-gross);
  overflow: hidden;
}
.frage > summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.125rem 1.25rem;
  min-height: 2.75rem;
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--tanne-900);
  cursor: pointer;
  list-style: none;
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 0.625rem; height: 0.625rem;
  margin-top: 0.45rem;
  border-right: 2px solid var(--tanne-600);
  border-bottom: 2px solid var(--tanne-600);
  transform: rotate(45deg);
  transition: transform 200ms var(--ruhig);
}
.frage[open] > summary::after { transform: rotate(-135deg); }
.frage > summary:hover { background: var(--creme-100); }
.frage__inhalt { padding: 0 1.25rem 1.25rem; color: var(--an-600); }
.frage__inhalt > * + * { margin-top: 0.75rem; }

/* Der Pfeil dreht sich schon weich – der Inhalt klappte bisher hart auf,
   weil natives <details> das so vorgibt. ::details-content erlaubt
   inzwischen eine echte Übergangsanimation, ganz ohne die Markup-Struktur
   anzufassen; wo der Browser das (noch) nicht kann, bleibt einfach das
   bewährte harte Auf/Zu – kein Bruch, nur eine fehlende Zugabe. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    html { interpolate-size: allow-keywords; }
    .frage::details-content {
      transition: content-visibility 280ms allow-discrete, block-size 280ms var(--ruhig), opacity 280ms var(--ruhig);
      block-size: 0;
      opacity: 0;
      overflow: clip;
    }
    .frage[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
}

/* Brotkrumen. */
.krumen { font-size: 0.8125rem; color: var(--an-500); padding-block: 1rem 0; }
.krumen ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; }
.krumen li::after { content: '›'; margin-left: 0.4rem; color: var(--an-400); }
.krumen li:last-child::after { content: ''; }
.krumen a { color: var(--an-600); }

/* Marken der Orte. */
.orte { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.orte a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.4rem 0.875rem;
  border: 1px solid var(--creme-400);
  border-radius: 999px;
  background: var(--creme-50);
  font-size: 0.875rem;
  text-decoration: none;
  transition: border-color 160ms var(--ruhig), background-color 160ms var(--ruhig);
}
.orte a:hover { border-color: var(--tanne-400); background: var(--tanne-50); }
/* Die aktive Marke muss man sehen – sonst weiß niemand, welche Auswahl
   gerade greift. */
.orte a[aria-current] {
  border-color: var(--tanne-800);
  background: var(--tanne-800);
  color: var(--creme-50);
  font-weight: 600;
}
.orte a[aria-current]:hover { background: var(--tanne-900); border-color: var(--tanne-900); }

/* Leerer Zustand – ehrlich statt erfunden. */
/* Ein gestrichelter Rahmen sagt „hier fehlt etwas“. Gemeint ist aber:
   „hier ist gerade nichts, und das hat einen Grund“. Also eine ruhige
   Fläche mit einem Messingstrich darüber. */
.leer {
  position: relative;
  padding: 3rem 1.5rem 2.75rem;
  text-align: center;
  border: 1px solid var(--creme-300);
  border-radius: var(--radius-gross);
  background: linear-gradient(180deg, var(--creme-50), var(--creme-100));
}
.leer::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 3.5rem;
  height: 2px;
  background: var(--messing-500);
  border-radius: 2px;
  transform: translateX(-50%);
}

/* Angebotsliste von ImmobilienScout24. Der Rahmen ersetzt nach dem Klick
   den Hinweisblock; die Höhe muss ohne Kenntnis des Inhalts auskommen,
   weil ein fremder iframe seine Höhe nicht mitteilt. */
.portalrahmen {
  display: block;
  width: 100%;
  min-height: min(75vh, 56rem);
  border: 0;
  border-radius: var(--radius-gross);
  background: var(--creme-50);
}

/*
 * Aussage: ein Abschnitt, der nur aus einem Satz besteht.
 *
 * Der Rhythmus einer Seite entsteht nicht aus Abständen, sondern aus
 * Wechseln. Sechs Abschnitte im Muster „Dachzeile, Überschrift, Text,
 * Kartenraster“ hintereinander lesen sich wie eine Vorlage – gleichgültig,
 * wie gut die einzelnen Abschnitte sind. Diese Fläche bricht die Reihe:
 * viel Luft, ein Satz, sonst nichts.
 */
.aussage {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.aussage p {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: -0.016em;
  text-wrap: balance;
}
.aussage cite {
  display: block;
  margin-top: 1.75rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--an-600);
}
.auf-dunkel .aussage cite { color: var(--tanne-200); }

/* Zweispaltig mit stehender Überschrift: Die Überschrift bleibt am oberen
   Rand, während der Text daneben läuft. Für lange Abschnitte, in denen man
   sonst vergisst, worum es ging. */
.klebrig { display: grid; gap: 2rem; }
@media (min-width: 62em) {
  .klebrig { grid-template-columns: 20rem 1fr; gap: 4rem; align-items: start; }
  .klebrig__kopf { position: sticky; top: 7rem; }
}

/* Zierlinie zwischen zwei Abschnitten derselben Farbe. */
.zierlinie {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--creme-300) 12%, var(--creme-300) 88%, transparent);
  margin: 0;
}

/* --- 07  Schaltflächen und Verweise -------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0.8125rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ruhig), color 180ms var(--ruhig),
              border-color 180ms var(--ruhig), transform 180ms var(--ruhig), box-shadow 180ms var(--ruhig);
}
.knopf:active { transform: translateY(1px); }
.knopf__pfeil { flex: 0 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .knopf__pfeil { transition: transform 240ms var(--ruhig); }
  .knopf:hover .knopf__pfeil { transform: translateX(3px); }
}

.knopf--haupt { background: var(--tanne-800); color: var(--creme-50); }
.knopf--haupt:hover { background: var(--tanne-900); box-shadow: 0 6px 20px -8px rgb(20 48 42 / 0.55); }

.knopf--zweit { background: var(--creme-50); color: var(--tanne-900); border-color: var(--creme-400); }
.knopf--zweit:hover { background: var(--creme-200); border-color: var(--tanne-400); }

.knopf--geist { background: transparent; color: currentColor; border-color: currentColor; }
.knopf--geist:hover { background: rgb(253 252 248 / 0.12); }

.auf-dunkel .knopf--haupt { background: var(--creme-50); color: var(--tanne-900); }
.auf-dunkel .knopf--haupt:hover { background: var(--creme-200); }

.knopf--breit { width: 100%; }
.knopf--klein { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.9375rem; }
@media (pointer: coarse) { .knopf--klein { min-height: 2.75rem; } }

/* Textverweis mit wanderndem Unterstrich. */
.pfeil {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--tanne-700);
  text-decoration: none;
}
/* Derselbe Pfeil wie im Hauptknopf (.knopf__pfeil), als Maske: Er nimmt die
   Textfarbe an und läuft beim Hover mit. */
.pfeil::after {
  content: '';
  flex: none;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 240ms var(--ruhig);
}
/* Unterstrich, der von links einläuft. Kein `text-decoration`, weil das
   nicht animierbar ist. */
.pfeil {
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 300ms var(--ruhig), color 200ms var(--ruhig);
}
.pfeil:hover { background-size: calc(100% - 1.1em) 1px; }
.pfeil:hover { color: var(--tanne-900); }
.pfeil:hover::after { transform: translateX(3px); }
.auf-dunkel .pfeil { color: var(--tanne-200); }
.auf-dunkel .pfeil:hover { color: var(--creme-50); }

/* Abschlussband. */
.abschluss { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56em) { .abschluss { grid-template-columns: 1.4fr 1fr; gap: 3rem; } }
.abschluss__wege { display: grid; gap: 0.75rem; }
@media (min-width: 30em) { .abschluss__wege { grid-auto-flow: column; grid-auto-columns: max-content; } }
@media (min-width: 56em) { .abschluss__wege { grid-auto-flow: row; justify-content: stretch; } }

/* --- 08  Formulare und Bewertungsassistent ------------------------- */

.formular { display: grid; gap: 1.25rem; }
.feld { display: grid; gap: 0.375rem; }
.feld > label { font-size: 0.9375rem; font-weight: 600; color: var(--an-800); }
.feld > label i { font-style: normal; font-weight: 400; color: var(--an-500); }
.feld__hinweis { font-size: 0.8125rem; color: var(--an-500); line-height: 1.5; }

.feld input[type='text'],
.feld input[type='email'],
.feld input[type='tel'],
.feld input[type='number'],
.feld input[type='search'],
.feld select,
.feld textarea {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--creme-400);
  border-radius: var(--radius);
  background: var(--creme-50);
  color: var(--an-900);
  font: inherit;
  font-size: 1rem; /* nie kleiner: iOS zoomt sonst beim Antippen */
  transition: border-color 160ms var(--ruhig), box-shadow 160ms var(--ruhig);
}
.feld textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.feld select { appearance: none; padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--an-600) 50%), linear-gradient(135deg, var(--an-600) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 1.25rem, calc(100% - 0.75rem) 1.25rem;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--tanne-600);
  box-shadow: 0 0 0 3px rgb(35 79 66 / 0.12);
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--an-500); }
.feld [aria-invalid='true'] { border-color: var(--fehler-600); }
.feld__fehler { font-size: 0.8125rem; font-weight: 600; color: var(--fehler-700); }

.wahlfeld { display: grid; gap: 0.625rem; }
.wahl {
  position: relative;
  display: block;
  padding: 1rem 1rem 1rem 2.875rem;
  border: 1px solid var(--creme-400);
  border-radius: var(--radius);
  background: var(--creme-50);
  cursor: pointer;
  transition: border-color 160ms var(--ruhig), background-color 160ms var(--ruhig);
}
.wahl:hover { border-color: var(--tanne-400); }
.wahl input { position: absolute; left: 1rem; top: 1.15rem; width: 1.1rem; height: 1.1rem; accent-color: var(--tanne-700); }
.wahl b { display: block; font-weight: 600; font-size: 0.9375rem; color: var(--an-900); }
.wahl span { display: block; margin-top: 0.15rem; font-size: 0.8125rem; color: var(--an-600); line-height: 1.5; }
.wahl:has(input:checked) { border-color: var(--tanne-600); background: var(--tanne-50); }
.wahl:has(input:focus-visible) { outline: 3px solid var(--tanne-700); outline-offset: 2px; }

.zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 1rem;
  background: var(--creme-100);
  border-radius: var(--radius);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--an-700);
}
.zustimmung input { margin-top: 0.25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--tanne-700); }

/* Honigtopf: für Augen und Bildschirmleser weg, für Maschinen sichtbar. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formhinweis {
  padding: 1rem 1.125rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.formhinweis--ok { background: var(--tanne-50); border: 1px solid var(--tanne-300); color: var(--tanne-900); }
.formhinweis--fehler { background: var(--fehler-50); border: 1px solid var(--fehler-600); color: var(--fehler-700); }
.formhinweis[hidden] { display: none; }

/* Bewertungsassistent */
.assistent { background: var(--creme-50); border: 1px solid var(--creme-300); border-radius: var(--radius-gross); box-shadow: var(--schatten); overflow: hidden; }
.assistent__kopf { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--creme-300); background: var(--creme-100); }
.assistent__leiste { height: 0.375rem; background: var(--creme-300); border-radius: 999px; overflow: hidden; margin-top: 0.75rem; }
.assistent__fortschritt { height: 100%; width: 100%; transform: scaleX(0.166); transform-origin: left; background: var(--tanne-600); border-radius: 999px; transition: transform 320ms var(--ruhig); }
.assistent__zaehler { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--petrol-700); }
.assistent__schritt { padding: 1.5rem; }
@media (min-width: 40em) { .assistent__schritt { padding: 2rem; } }
.assistent__schritt[hidden] { display: none; }
/* Ohne Skript stehen alle Schritte untereinander; Blättern gibt es dann nicht. */
form:not([data-assistent-aktiv]) .assistent__nav [type="button"] { display: none; }
.assistent__nav { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; margin-top: 1.75rem; }
.assistent__nav .knopf { flex: 1 1 auto; }
@media (min-width: 30em) { .assistent__nav .knopf { flex: 0 0 auto; } }

/* Rückschau vor dem Absenden – Schritt 1–5 in Kurzform. */
.rueckschau { padding: 1.25rem; margin-bottom: 1.5rem; background: var(--creme-100); border: 1px solid var(--creme-300); border-radius: var(--radius); }
.rueckschau__titel { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--an-600); }
.rueckschau__liste { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 1rem; margin-top: 0.875rem; font-size: 0.9375rem; }
.rueckschau__liste dt { color: var(--an-500); }
.rueckschau__liste dd { color: var(--an-800); font-weight: 600; }
.rueckschau__aendern { font-size: 0.8125rem; }

/* Filterleiste */
.filter { display: grid; gap: 1rem; padding: 1.25rem; background: var(--creme-50); border: 1px solid var(--creme-300); border-radius: var(--radius-gross); }
@media (min-width: 48em) { .filter { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; } }

/* --- 09  Bilder und Galerie ---------------------------------------- */

.bild {
  overflow: hidden;
  border-radius: var(--radius-gross);
  background: var(--creme-200);
}
.bild img { width: 100%; height: auto; object-fit: cover; }
.bild--hoch { aspect-ratio: 3 / 4; }
.bild--breit { aspect-ratio: 16 / 10; }
.bild--quadrat { aspect-ratio: 1 / 1; }
.bild--hoch img, .bild--breit img, .bild--quadrat img { height: 100%; }
.bild > .platzhalter { width: 100%; height: 100%; }

/* Kopfbereich der Unterseiten: gleiche linke Kante wie Logo und Abschnitte,
   die Zeilenlänge begrenzen die Kinder statt eines schmalen, mittigen Rahmens. */
.bahn.einstieg > :where(h1, p) { max-width: 46rem; }

/* Platzhalter, solange ein Foto fehlt: gestaltet, nie ein defektes Bild.
   Die Initialen tragen dieselbe Serife und denselben Messingstrich wie der
   Rest der Seite – ein Monogramm statt einer Entschuldigung. Der Name steht
   ohnehin in der Überschrift darunter, darum sind die Initialen dekorativ. */
.platzhalter {
  position: relative;
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, var(--tanne-800), var(--tanne-900));
}
.platzhalter span {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.9rem + 1.5vw, 3rem);
  color: var(--creme-100);
  letter-spacing: 0.02em;
}
.platzhalter::after {
  content: '';
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  width: 2.25rem;
  height: 2px;
  background: var(--messing-500);
  border-radius: 2px;
  transform: translateX(-50%);
}

/*
 * Bildrahmen mit versetzter Kante.
 *
 * Ein Foto in einem abgerundeten Rechteck ist die Voreinstellung jedes
 * Baukastens. Die versetzte Linie dahinter kostet nichts, gibt dem Bild
 * aber eine zweite Ebene – und nimmt die Messinglinie der Dachzeilen auf,
 * sodass die Seite ein durchgehendes Zeichen hat statt vieler Einfälle.
 */
/* Die versetzte Linie gehört ans Bild, nicht an die Bildunterschrift –
   sonst umfasst sie beides und wirkt wie eine verrutschte Klammer. */
.bildrahmen > .bild { position: relative; z-index: 1; }
.bildrahmen > .bild::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -0.875rem;
  bottom: -0.875rem;
  width: 58%;
  height: 58%;
  border-right: 1px solid rgb(217 184 119 / 0.55);
  border-bottom: 1px solid rgb(217 184 119 / 0.55);
  border-bottom-right-radius: var(--radius-gross);
}
/* `overflow: hidden` an `.bild` würde die Linie abschneiden – deshalb hier
   ausdrücklich sichtbar. Die Rundung übernimmt das Bild selbst. */
.bildrahmen > .bild { overflow: visible; }
.bildrahmen > .bild picture, .bildrahmen > .bild img { border-radius: var(--radius-gross); overflow: hidden; }
@media (min-width: 62em) {
  .bildrahmen > .bild::after { right: -1.25rem; bottom: -1.25rem; }
}
/* Abstand, damit die versetzte Linie nicht durch die Bildunterschrift läuft. */
.bildrahmen .bildzeile { margin-top: 1.75rem; }
@media (min-width: 62em) { .bildrahmen .bildzeile { margin-top: 2.25rem; } }

/* Bildunterschrift: hängt am Bild, nicht am Absatzfluss. */
.bildzeile {
  display: block;
  margin-top: 0.875rem;
  max-width: 34rem;
  padding-left: 0.875rem;
  border-left: 1px solid var(--messing-500);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--an-500);
}
.auf-dunkel .bildzeile { color: var(--tanne-100); border-left-color: var(--messing-300); }

/* Zahlenband unter dem Kopfbereich, über die ganze Breite. */
.zahlenband {
  margin-top: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid rgb(217 184 119 / 0.28);
}

.galerie { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48em) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.galerie__gross { grid-column: span 2; }
@media (min-width: 48em) { .galerie__gross { grid-column: span 2; grid-row: span 2; } }
.galerie button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Leuchtkasten */
.leuchtkasten { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100%; height: 100%; }
.leuchtkasten::backdrop { background: rgb(20 30 32 / 0.9); }
.leuchtkasten__innen { display: grid; grid-template-rows: auto 1fr auto; height: 100%; padding: 1rem; gap: 0.75rem; }
.leuchtkasten__bild { display: grid; place-items: center; min-height: 0; }
.leuchtkasten__bild img { max-height: 100%; width: auto; max-width: 100%; border-radius: var(--radius); }
.leuchtkasten__leiste { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--creme-100); font-size: 0.875rem; }
.leuchtkasten button {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem; min-height: 2.75rem;
  border: 1px solid rgb(253 252 248 / 0.3);
  border-radius: var(--radius);
  background: rgb(20 30 32 / 0.6);
  color: var(--creme-50);
  cursor: pointer;
}
.leuchtkasten button:hover { background: rgb(20 30 32 / 0.85); }

/* Objektkarte */
.objekt { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.objekt__bild { position: relative; }
.objekt__zustand {
  position: absolute; left: 0.75rem; top: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--creme-50);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--tanne-900);
}
/* Vermarktungsstand auf der Karte: rechts oben, damit er sich nicht mit
   dem Zustand links oben überschneidet. */
.objekt__status {
  position: absolute; right: 0.75rem; top: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--tanne-900);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--creme-50);
}
.objekt__status--reserviert { background: var(--messing-300); color: var(--tanne-900); }

/* Objektseite: die vier wichtigsten Angaben gleich im Kopfbereich. */
.objekt__eckdaten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 1.75rem 0 0; }
@media (min-width: 30em) { .objekt__eckdaten { grid-template-columns: repeat(auto-fit, minmax(7.5rem, max-content)); gap: 1rem 2.25rem; } }
.objekt__eckdaten div { display: grid; gap: 0.2rem; }
.objekt__eckdaten dt { font-size: 0.8125rem; color: var(--tanne-200); }
.objekt__eckdaten dd { margin: 0; font-family: var(--serif); font-size: 1.375rem; line-height: 1.2; color: var(--creme-50); font-variant-numeric: lining-nums tabular-nums; }
.objekt__band {
  display: inline-flex; margin: 0 0 1rem; padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--messing-300);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--tanne-900);
}
.objekt__band--verkauft, .objekt__band--vermietet { background: var(--creme-50); }
.objekt__ansprechperson { margin-top: 1rem; font-size: 0.9375rem; }
.objekt__galerie img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.objekt__galerie button:focus-visible { outline: 3px solid var(--messing-500); outline-offset: 2px; }
.objekt__werkzeuge { margin-top: 1.5rem; }

/* Kaufnebenkosten auf Objektseiten (Kauf und Grundstück) */
.rechner__raster { display: grid; gap: 1.75rem; margin-top: 1.75rem; }
@media (min-width: 48em) { .rechner__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; align-items: start; } }
.rechner__ergebnis {
  padding: 0.5rem 1.25rem 1rem;
  background: var(--creme-100);
  border: 1px solid var(--creme-300);
  border-radius: var(--radius-gross);
}
@media (min-width: 30em) { .rechner__ergebnis { padding: 0.75rem 1.75rem 1.25rem; } }
.rechner__liste { margin: 0; }
.rechner__liste > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--creme-300);
}
.rechner__liste dt { font-size: 0.9375rem; color: var(--an-700); }
.rechner__liste dd { margin: 0; text-align: right; white-space: nowrap; font-weight: 600; color: var(--an-900); font-variant-numeric: lining-nums tabular-nums; }
.rechner__summe dt, .rechner__summe dd { font-weight: 700; color: var(--an-900); }
.rechner__gesamt { border-bottom: 0 !important; }
.rechner__gesamt dt { font-weight: 600; color: var(--tanne-900); }
.rechner__gesamt dd { font-family: var(--serif); font-size: 1.375rem; font-weight: 400; color: var(--tanne-900); }
.rechner__finanz { margin-top: 0.5rem; border-top: 2px solid var(--tanne-200); }
.rechner--ohne-zins .rechner__finanz .rechner__gesamt dd { font-family: var(--sans); font-size: 0.875rem; color: var(--an-500); white-space: normal; }

.objekt__text { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.objekt__daten { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.75rem; font-size: 0.875rem; color: var(--an-600); }
.objekt .objekt__preis { margin-top: auto; padding-top: 1rem; font-family: var(--serif); font-size: 1.25rem; color: var(--tanne-900); }

/* Statische Karte (kein fremder Dienst) */
.karteflaeche {
  position: relative;
  border-radius: var(--radius-gross);
  overflow: hidden;
  border: 1px solid var(--creme-300);
  background: var(--creme-200);
  min-height: 14rem;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
}

/* --- 10  Bewegung --------------------------------------------------- */

/* Grundsatz: Ohne Bewegung ist alles sichtbar. Die Animationen sind ein
   Zusatz, nie die Voraussetzung dafür, dass man etwas lesen kann. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .zeigen {
      animation: heben 620ms var(--ruhig) both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    .zeigen-folge > * {
      animation: heben 560ms var(--ruhig) both;
      animation-timeline: view();
      animation-range: entry 6% cover 24%;
    }
    .zeigen-folge > *:nth-child(2) { animation-delay: 60ms; }
    .zeigen-folge > *:nth-child(3) { animation-delay: 120ms; }
    .zeigen-folge > *:nth-child(4) { animation-delay: 180ms; }
    .zeigen-folge > *:nth-child(5) { animation-delay: 240ms; }
    .zeigen-folge > *:nth-child(6) { animation-delay: 300ms; }
    .setzen { animation: setzen 1400ms var(--ruhig) both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }

  /* Für Browser ohne scroll-gesteuerte Animationen übernimmt ein kleiner
     Beobachter in site.js und setzt `.ist-sichtbar`. */
  .js-zeigen:not(.ist-sichtbar) { opacity: 0; transform: translateY(14px); }
  .js-zeigen { transition: opacity 600ms var(--ruhig), transform 600ms var(--ruhig); }
  .js-zeigen.ist-sichtbar { opacity: 1; transform: none; }

  /* Einstiegsbewegung ohne Scrollbezug – nur der Kopfbereich. */
  /* Sichtbar von Anfang an, nur die Lage gleitet: Unsichtbarer Text würde
     die größte Textstelle erst nach der Animation zählen lassen. */
  .einstieg > * { animation: heben-sanft 700ms var(--ruhig) both; }
  .einstieg > *:nth-child(2) { animation-delay: 90ms; }
  .einstieg > *:nth-child(3) { animation-delay: 180ms; }
  .einstieg > *:nth-child(4) { animation-delay: 270ms; }
  .einstieg > *:nth-child(5) { animation-delay: 360ms; }

  /*
   * Erster Besuch der Startseite: Statt der einfachen Reihe oben setzt
   * sich die Überschrift wortweise zusammen, und "Hattingen" - das
   * eigentliche Versprechen - bekommt zum Schluss den Messingstrich, den
   * sonst nur die Dachzeile trägt (siehe .dach::before). `html.eintritt`
   * setzt ein blockierendes Skript im Kopf der Seite, einmal pro
   * Sitzung; danach greift wieder die einfache Fassung oben.
   */
  html.eintritt .einstieg > * { animation: none; }
  html.eintritt .einstieg .dach {
    opacity: 0;
    animation: wort-kommt 500ms var(--ruhig) both;
    animation-delay: 150ms;
  }
  html.eintritt .einstieg h1 .wort {
    display: inline-block;
    opacity: 0;
    animation: wort-kommt 520ms var(--ruhig) both;
  }
  html.eintritt .einstieg h1 .wort:nth-child(1) { animation-delay: 320ms; }
  html.eintritt .einstieg h1 .wort:nth-child(2) { animation-delay: 390ms; }
  html.eintritt .einstieg h1 .wort:nth-child(3) { animation-delay: 460ms; }
  html.eintritt .einstieg h1 .wort:nth-child(4) { animation-delay: 530ms; }
  html.eintritt .einstieg h1 .wort--ziel {
    position: relative;
    animation: wort-kommt-ziel 620ms var(--ruhig) both;
    animation-delay: 620ms;
  }
  html.eintritt .einstieg h1 .wort--ziel::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0.06em;
    height: 2px;
    background: var(--messing-500);
    transform: scaleX(0);
    transform-origin: left;
    animation: strich-einlaufen-breit 420ms var(--ruhig) both;
    animation-delay: 1180ms;
  }
  html.eintritt .einstieg .lauf {
    animation: heben-sanft 620ms var(--ruhig) both;
    animation-delay: 700ms;
  }
  html.eintritt .einstieg .reihe {
    animation: heben-sanft 620ms var(--ruhig) both;
    animation-delay: 820ms;
  }

  .heben-hover { transition: transform 240ms var(--ruhig), box-shadow 240ms var(--ruhig); }
  .heben-hover:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }

  /* Ein Objektfoto lädt zum genaueren Hinsehen ein – der Rahmen der Karte
     (.objekt hat bereits overflow:hidden) schneidet die Vergrößerung sauber
     ab, ohne dass die Karte selbst ihre Höhe ändert. */
  .objekt__bild img { transition: transform 420ms var(--ruhig); }
  .verweiskarte:hover .objekt__bild img { transform: scale(1.06); }

  /* Signatur-Moment: die selbstgezeichnete Hattingen-Skyline im Kopf geht
     beim ersten Laden auf wie ein Horizont – das Motiv liefert den Effekt,
     nicht umgekehrt. Nur die Kopfzeile, nicht die Fußzeile: dort kommt die
     Marke erst nach viel Scrollen an, ein "Aufgehen" ergäbe dort keinen
     Sinn mehr, weil die Seite längst da ist. clip-path clip auf dem SVG
     selbst, kein zusätzliches overflow:hidden nötig (und keins auf dem
     Link, das sonst dessen eigenen Fokusring anschneiden könnte). */
  html.eintritt .kopf .marke svg { animation: horizont-aufgehen 900ms var(--ruhig) both; }
}

@keyframes heben {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes heben-sanft {
  from { transform: translateY(12px); }
  to { transform: none; }
}
@keyframes setzen {
  from { transform: scale(1.04); }
  to { transform: scale(1); }
}
@keyframes horizont-aufgehen {
  from { clip-path: inset(100% 0 0 0); opacity: 0; }
  55% { opacity: 1; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes wort-kommt {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes wort-kommt-ziel {
  from { opacity: 0; transform: translateY(26px) scale(0.92); }
  to { opacity: 1; transform: none; }
}
@keyframes strich-einlaufen-breit {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- 11  Druck und Sonderfälle -------------------------------------- */

@media (forced-colors: active) {
  .knopf, .karte, .frage, .wahl { border: 1px solid ButtonBorder; }
  .haken li::before { border-color: CanvasText; }
  /* Die Maske bekommt im erzwungenen Farbmodus sonst keine Füllung. */
  .pfeil::after { forced-color-adjust: none; background: LinkText; }
}

/* ----- Angebote filtern und sortieren (/immobilien/) ----------------- */
.angebote-steuerung {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between;
  margin-top: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--creme-300);
}
.angebote-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  min-height: 2.5rem; padding: 0.4rem 1rem;
  border: 1px solid var(--creme-400); border-radius: 999px;
  background: var(--creme-50); color: var(--an-800);
  font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chip:hover { border-color: var(--tanne-400); background: var(--creme-100); }
.chip--an { background: var(--tanne-900); border-color: var(--tanne-900); color: var(--creme-50); }
.chip:focus-visible { outline: 3px solid var(--messing-500); outline-offset: 2px; }
.angebote-sort { display: flex; align-items: center; gap: 0.5rem; }
.angebote-sort label { font-size: 0.875rem; font-weight: 600; color: var(--an-600); }
.angebote-sort select {
  min-height: 2.5rem; padding: 0.4rem 2rem 0.4rem 0.75rem;
  border: 1px solid var(--creme-400); border-radius: var(--radius);
  background: var(--creme-50); color: var(--an-900); font: inherit; font-size: 0.9375rem; cursor: pointer;
}
.angebote-sort select:focus-visible { outline: 3px solid var(--messing-500); outline-offset: 2px; }
.angebote-leer {
  margin-top: 2rem; padding: 2rem 1.5rem; text-align: center;
  background: var(--creme-100); border: 1px solid var(--creme-300); border-radius: var(--radius-gross);
  color: var(--an-700);
}
.angebote-leer .knopf { margin-top: 1rem; }
.karte[hidden] { display: none; }

@media print {
  /* Zuerst jede Bewegung stilllegen. Sonst druckt ein Browser die noch nicht
     eingeblendeten Abschnitte als leere Flächen – der klassische Fehler bei
     scroll-gesteuerten Animationen. */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .kopf, .aktionsleiste, .mobilmenu, .sprung, .krumen, .fuss, .abschluss__wege,
  .objekt__werkzeuge, .rechner__eingaben, .rechner--ohne-zins .rechner__finanz,
  .angebote-steuerung, .angebote-leer, main .knopf { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .flaeche { padding-block: 0.45cm; background: none !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.75em; }

  /* Dunkle Flächen druckt kein Browser mit Hintergrund: Ohne diese Regel
     stünde helle Schrift auf weißem Papier. */
  .auf-dunkel, .auf-dunkel * { color: #1a1e20 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
  .flaeche--tanne::before, .flaeche--tanne::after, .tiefe::before, .tiefe::after { display: none !important; }

  /* Kopf und Fuß des gedruckten Exposés: wer anbietet und wie man anruft. */
  @page { margin: 1.6cm 1.5cm; }
  main::before {
    content: 'Immobilienberatung B. Philipp UG  ·  Telefon 02324 9877906  ·  www.immo-philipp.de';
    display: block; margin-bottom: 0.75rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid #8b9093;
    font-family: var(--sans); font-size: 9pt; font-weight: 600; letter-spacing: 0.02em;
  }
  h1, h2, h3 { break-after: avoid; }
  figure, .rechner__ergebnis, .objekt__ansprechperson, .objekt__eckdaten { break-inside: avoid; }
  /* Exposé-Kopf zweispaltig wie auf einem gedruckten Blatt: Text links,
     Titelbild rechts. Dann passen Eckdaten und Bild auf die erste Seite. */
  .objekt__kopf { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0.8cm; align-items: start; }
  .objekt__kopf img { width: 100%; height: auto; max-height: 8cm; object-fit: cover; }
  .objekt__eckdaten { grid-template-columns: repeat(2, max-content) !important; gap: 0.3cm 0.9cm !important; }
  main dl[style] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.25cm 0.6cm !important; }
  .bildrahmen, .bild { box-shadow: none !important; border: 0 !important; }
  html { font-size: 13px; }
  .rechner .bahn { break-inside: avoid; }
  .rechner .gedaempft { display: none; }
  .objekt__kopf h1 { font-size: 21pt !important; line-height: 1.15; overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4cm; }
  .galerie__gross { grid-column: auto; }
  .rechner__ergebnis { background: none; border-color: #8b9093; }
}