@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('../../assets/schrift/caladea-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caladea';
  src: url('../../assets/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: #64696c;
  --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 8px 24px -12px rgb(26 30 32 / 0.12);
  --schatten-hoch: 0 2px 4px rgb(26 30 32 / 0.06), 0 16px 40px -16px rgb(26 30 32 / 0.18);
  --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 {
  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: 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; }

/* 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: -100%;
  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;
  transition: top 160ms var(--ruhig);
}
.sprung:focus { top: 0.75rem; }

.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: 60em) { .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 40em) { .raster--3 { grid-template-columns: repeat(2, 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 1px 24px -12px rgb(26 30 32 / 0.35);
}
@media (prefers-reduced-motion: no-preference) {
  .kopf__reihe { transition: min-height 260ms var(--ruhig), padding-block 260ms var(--ruhig); }
  .kopf--gescrollt .kopf__reihe { min-height: 3.5rem; padding-block: 0.5rem; }
}
@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; }
.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); }
.mobilmenu a {
  display: block;
  padding: 0.75rem 0.25rem;
  min-height: 2.75rem;
  text-decoration: none;
  color: var(--an-800);
  border-radius: var(--radius);
}
.mobilmenu a:hover { background: var(--creme-200); }
.mobilmenu a[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 { 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__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); }
/* Ein Messingstrich, der beim Zeigen von links einläuft. */
.verweiskarte::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: -1px;
  width: 0;
  height: 2px;
  background: var(--messing-500);
  border-radius: 2px;
  transition: width 320ms var(--ruhig);
}
.verweiskarte:hover::before { width: 2.5rem; }
.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: 68em) { .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);
  transition: border-color 260ms var(--ruhig), transform 260ms var(--ruhig), box-shadow 260ms var(--ruhig);
}
.schritte li:hover { border-color: var(--tanne-400); transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.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: 68em) {
  .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 b { display: block; font-family: var(--serif); 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-left: 3px solid var(--hinweis-300);
  border-radius: 0 var(--radius) var(--radius) 0;
  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; }

/* 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.5rem;
  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%);
}

/*
 * 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.28;
  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--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; }

/* Textverweis mit wanderndem Unterstrich. */
.pfeil {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--tanne-700);
  text-decoration: none;
}
.pfeil::after {
  content: '→';
  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-left: 3px solid var(--tanne-500); color: var(--tanne-900); }
.formhinweis--fehler { background: var(--fehler-50); border-left: 3px 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: 16.6%; background: var(--tanne-600); border-radius: 999px; transition: width 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; }
.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; } }

/* 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%; }

/* Platzhalter, solange ein Foto fehlt: gestaltet, nie ein defektes Bild. */
.platzhalter {
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background:
    linear-gradient(135deg, var(--creme-200), var(--creme-300));
  color: var(--an-500);
  font-size: 0.8125rem;
  text-align: center;
}

/*
 * 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 {
  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);
  font-size: 1.125rem;
  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);
}
.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__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. */
  .einstieg > * { animation: heben 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; }

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

@keyframes heben {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes setzen {
  from { transform: scale(1.04); }
  to { transform: scale(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; }
}

@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, .abschluss, .galerie { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .flaeche { padding-block: 1rem; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.75em; }
}