/* Feldbrecht Immobilien · Runde 2 · 29.09.2026
   Grundordnung: Musterleiste, Kopf (einzige klebende Leiste), Vollbild mit Textfläche,
   Angebote, Leistungen, Signatur „Sechs Orte“, Wertschätzung, Über uns, Kontakt, Fuß.
   Farben: Kalkweiß (Grund), Tannengrün hell (zweite Fläche), Tannengrün tief (Fuß).
   Schriften: Libre Caslon Display nur ab etwa 34 px (H1, H2, große Zahlen),
   Hanken Grotesk für alles andere.
   Radien (R106): Bilder, Flächen und Karten 0; Knöpfe 4 px; Eingabefelder 3 px;
   Musterleiste 2 px wie überall. Keine Verläufe, kein Milchglas (R105, R107). */

@font-face {
  font-family: "Libre Caslon Display";
  src: url("schriften/libre-caslon-display-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("schriften/hanken-grotesk-variabel.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: optional;
}

:root {
  --kalk: #F2F1EB;          /* Grund */
  --kalk-hell: #FBFBF7;     /* Karten und Textfläche */
  --flaeche: #E5EBE6;       /* zweite Fläche, Tannengrün stark aufgehellt */
  --linie: #CFD3C9;
  --tanne: #1E3A2F;         /* Text und Hauptknopf, 10,9:1 auf Kalk */
  --tanne-tief: #12261E;    /* Fuß, Ergebniskarte */
  --moos: #4F6158;          /* Nebentext, 5,8:1 auf Kalk, 5,4:1 auf Fläche */
  --messing: #C8A24A;       /* Zeichen, Kartenpunkt */
  --messing-hell: #D9BA6A;  /* Zahl auf Tannengrün tief, 8,5:1 */
  --messing-tief: #7C5B14;  /* Akzent auf hell, 5,5:1 */
  --kalk-gedaempft: #B9C4BD;/* Nebentext auf Tannengrün tief, 8,9:1 */

  --serif: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;

  --rand: clamp(1rem, 4vw, 3rem);
  --breite: 78rem;          /* ein Inhaltsrahmen, 1248 px */
  --kopf-h: 4.5rem;
  --abstand: clamp(3rem, 5vw, 4.25rem);
  --r-knopf: 4px;
  --r-feld: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--kalk); color: var(--tanne);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--tanne); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--messing-tief); }
:focus-visible { outline: 3px solid var(--messing-tief); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h2, h3 { hyphens: auto; overflow-wrap: break-word; }
p { margin: 0 0 .9em; }
p:last-child { margin-bottom: 0; }
figure { margin: 0; }
dl, dd { margin: 0; }
[id] { scroll-margin-top: calc(var(--kopf-h) + .5rem); }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.rahmen { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand); }

.sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 80;
  background: var(--tanne-tief); color: var(--kalk); padding: .75rem 1rem;
}
.sprung:focus { top: .5rem; color: var(--kalk); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .6rem 1.35rem; border: 0; border-radius: var(--r-knopf);
  background: var(--tanne); color: var(--kalk-hell); cursor: pointer;
  font: 600 1rem/1.2 var(--sans); text-decoration: none; text-align: center;
}
.knopf:hover { background: var(--tanne-tief); color: #fff; }
.knopf-rand { background: transparent; color: var(--tanne); box-shadow: inset 0 0 0 1.5px var(--tanne); }
.knopf-rand:hover { background: var(--tanne); color: var(--kalk-hell); }
.knopf-hell { background: var(--kalk-hell); color: var(--tanne-tief); }
.knopf-hell:hover { background: var(--messing-hell); color: var(--tanne-tief); }

/* ---------- Musterleiste (R109), am Rechner nicht klebend ---------- */
.nw-musterleiste {
  background: var(--tanne-tief); color: #fff; font-family: var(--sans);
  font-size: .875rem; line-height: 1.4;
}
.nw-musterleiste .mitte {
  max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand);
  display: flex; flex-wrap: wrap; gap: 0 1.5rem; align-items: center; justify-content: space-between;
}
.nw-musterleiste .nw-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; }
.nw-musterleiste a {
  color: #fff; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .7rem; border-radius: 2px;
}
.nw-musterleiste a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.nw-musterleiste a.nw-cta { background: var(--kalk); color: var(--tanne-tief); text-decoration: none; font-weight: 700; }
.nw-musterleiste a.nw-cta:hover { background: var(--messing-hell); }
.nw-musterleiste .nw-linktext { display: inline; }
.nw-musterleiste .nw-ki { color: var(--messing-hell); font-weight: 700; }
.nw-musterleiste .nw-lang { display: none; }
@media (min-width: 80em) { .nw-musterleiste .nw-lang { display: inline; } }
@media (max-width: 59.99em) { .nw-musterleiste .nw-mittel { display: none; } }
@media (max-width: 47.99em) {
  .nw-musterleiste { font-size: .8125rem; }
  .nw-musterleiste .mitte { gap: 0 .4rem; }
  .nw-musterleiste a { padding: 0 .5rem; }
}
@media print { .nw-musterleiste { display: none; } }

/* ---------- Kopf: eine Zeile, höchstens 72 px, klebt ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--kalk-hell); border-bottom: 1px solid var(--linie);
}
.kopf-innen { display: flex; align-items: center; gap: 1rem; height: var(--kopf-h); }
.marke { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; margin-right: auto; text-decoration: none; }
.marke:hover { color: var(--tanne); }
.tafel-f {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none;
  background: var(--messing); color: var(--tanne-tief); border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--messing), inset 0 0 0 3.5px var(--tanne-tief);
  font-family: var(--serif); font-size: 1.4rem; line-height: 1; padding-top: .1rem;
}
.marke-text { display: grid; line-height: 1.1; }
.marke-name { font-family: var(--serif); font-size: 1.6rem; }
/* Livegang-Prüfung 30.09.2026: 14 statt 13 px (Schrift am Handy nicht unter 14 px) */
.marke-zusatz { font-size: .875rem; color: var(--moos); letter-spacing: .01em; }

.menue { display: none; }
.menue a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem;
  text-decoration: none; font-weight: 500; font-size: 1rem;
}
.menue a:hover { color: var(--tanne); text-decoration: underline; }

.kopf-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-width: 44px; min-height: 44px; text-decoration: none; font-weight: 600; white-space: nowrap;
}
.kopf-tel svg { width: 1.2rem; height: 1.2rem; color: var(--messing-tief); }
.kopf-tel-nr { display: none; }
.kopf-knopf { display: none; min-height: 44px; padding-block: .4rem; }

.menue-klapp { position: relative; }
.menue-klapp summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; min-width: 44px; padding: 0 .6rem; border-radius: var(--r-knopf);
  box-shadow: inset 0 0 0 1.5px var(--linie); font-weight: 600;
}
.menue-klapp summary::-webkit-details-marker { display: none; }
.menue-klapp summary svg { width: 1.35rem; height: 1.35rem; }
.menue-klapp-wort { display: none; }
.menue-klapp-liste {
  position: absolute; right: 0; top: calc(100% + .6rem); z-index: 60;
  display: grid; min-width: 15rem; padding: .5rem;
  background: var(--kalk-hell); border: 1px solid var(--linie);
  box-shadow: 0 12px 30px rgba(18, 38, 30, .12);
}
.menue-klapp-liste a:not(.knopf) {
  display: flex; align-items: center; min-height: 48px; padding: 0 .8rem;
  text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--linie);
}
.menue-klapp-liste .knopf { margin-top: .6rem; }

@media (min-width: 30em) { .menue-klapp-wort { display: inline; } }
@media (min-width: 48em) { .kopf-tel-nr { display: inline; } .kopf-knopf-immer { display: inline-flex; } }
@media (min-width: 72em) {
  .menue { display: flex; gap: .1rem; margin-right: .5rem; }
  .menue-klapp { display: none; }
  .kopf-knopf { display: inline-flex; }
}
@media (max-width: 23.99em) {
  .marke-zusatz { display: none; }
  .marke-name { font-size: 1.4rem; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--abstand); }
.flaeche { background: var(--flaeche); }
.kopfzeile { display: grid; gap: .6rem; margin-bottom: 2rem; }
.kopfzeile h2, .inhaberin-text h2, .wert-eingabe h2, .kontakt-daten h2, .verkauft-titel {
  font-family: var(--serif); font-size: clamp(2.125rem, 1.35rem + 1.7vw, 2.875rem); line-height: 1.08;
}
.kopfzeile p { color: var(--moos); max-width: 40rem; }
.kopfzeile .unterzeile, .inhaberin-text .unterzeile { color: var(--messing-tief); font-weight: 600; margin: 0; }
@media (min-width: 64em) {
  .kopfzeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: 3rem; }
  .kopfzeile > p:last-child { justify-self: end; text-align: right; }
  .kopfzeile-eng { grid-template-columns: minmax(0, 1fr); }
  .kopfzeile-eng > p:last-child { justify-self: start; text-align: left; }
}

/* ---------- 1 · Erster Bildschirm ---------- */
.start { position: relative; background: var(--flaeche); }
.start-bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 78% 50%; }
.start-tafel { padding: 1.75rem 0 2.25rem; }
.start h1 {
  font-family: var(--serif); font-size: clamp(2.25rem, 1.35rem + 2.6vw, 3.5rem); line-height: 1.06;
  hyphens: manual; overflow-wrap: break-word; margin-bottom: 1rem; max-width: 16ch;
}
.start-satz { font-size: 1.125rem; max-width: 34rem; }
.start-wege { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.4rem; }
.start-tel { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.start-tel strong { margin-left: .3rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.start-weiter {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: .9rem;
  color: var(--moos); font-size: .9375rem; text-decoration: none;
}
/* Livegang-Prüfung 30.09.2026: Der gedrehte Pfeil ragte 3 px über den Link hinaus (Prüfskript: Text läuft aus dem Kasten). Rand rechts schafft Platz. */
.start-weiter::after { content: ""; width: .5rem; height: .5rem; margin-right: .2rem; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg) translateY(-2px); }
.start-weiter:hover { color: var(--tanne); }

/* Livegang-Prüfung 30.09.2026: Bei 768 bis 1023 px deckte die 36 rem breite Textfläche das Haus fast ganz zu (Foto quadratisch zugeschnitten, unscharf hochgezogen).
   Darum liegt die Textfläche erst ab 1024 px über dem Foto; davor steht das Foto ungeschnitten (16:9) oben und der Text darunter. */
@media (min-width: 48em) and (max-width: 63.99em) {
  .start-bild { aspect-ratio: 16 / 9; object-position: 50% 50%; }
}
@media (min-width: 64em) {
  .start { height: clamp(32rem, calc(100svh - 12.5rem), 48rem); overflow: hidden; }
  .start-bild { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 62% 55%; }
  .start-rahmen { position: relative; height: 100%; display: flex; align-items: flex-end; padding-bottom: clamp(1.75rem, 4vh, 3rem); }
  .start-tafel {
    width: min(36rem, 100%); padding: 2.25rem 2.5rem 1.6rem;
    background: var(--kalk-hell);
  }
}

/* ---------- 2 · Angebote ---------- */
.angebote { display: grid; gap: 1.5rem; }
.angebot { background: var(--kalk-hell); display: grid; align-content: start; }
.angebot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.angebot-text { padding: 1.1rem 1.25rem 1.2rem; display: grid; gap: .15rem; }
.angebot-ort { color: var(--messing-tief); font-weight: 600; font-size: .9375rem; margin: 0; }
.angebot h3 { font-size: 1.25rem; font-weight: 650; line-height: 1.25; }
.angebot-daten { margin: .15rem 0 0; color: var(--moos); font-size: .9375rem; }
.angebot-preis { margin: .35rem 0 0; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.angebot-energie { margin: .1rem 0 0; color: var(--moos); font-size: .875rem; }
.angebot-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; justify-self: start; }
@media (max-width: 47.99em) { .angebot:not(.angebot-gross) img { aspect-ratio: 16 / 9; } }

@media (min-width: 48em) and (max-width: 63.99em) {
  .angebote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .angebot-gross { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .angebot-gross img { height: 100%; }
}
@media (min-width: 64em) {
  #angebote { padding-top: 2.5rem; }
  .angebote { grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); grid-template-rows: auto auto; }
  .angebot-gross { grid-row: 1 / span 2; grid-template-rows: minmax(0, 1fr) auto; }
  .angebot-gross img { height: 100%; aspect-ratio: auto; min-height: 22rem; }
  .angebot-gross h3 { font-size: 1.5rem; }
  .angebot:not(.angebot-gross) { grid-template-columns: minmax(0, 10fr) minmax(0, 13fr); }
  .angebot:not(.angebot-gross) img { height: 100%; aspect-ratio: auto; min-height: 14rem; }
  .angebot:not(.angebot-gross) .angebot-text { padding: 1rem 1.25rem; align-content: center; }
  .angebot-gross .angebot-text { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; padding: 1.25rem 1.5rem 1.35rem; }
  .angebot-gross .angebot-text > * { grid-column: 1; }
  .angebot-gross .angebot-preis { grid-column: 2; grid-row: 2 / span 2; align-self: start; font-size: 1.6rem; margin: 0; }
  .angebot-gross .angebot-link { grid-column: 2; grid-row: 4; justify-self: end; }
}

/* Suchauftrag: eine kompakte Karte */
.suche {
  margin-top: 1.75rem; padding: 1.35rem 1.25rem; border: 1.5px solid var(--linie);
  display: grid; gap: 1rem;
}
.suche h3 { font-size: 1.2rem; font-weight: 650; margin-bottom: .25rem; }
.suche-text p { color: var(--moos); font-size: .9688rem; }
.suche-felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; align-items: end; }
.suche-felder .feld-mail, .suche-felder .knopf { grid-column: 1 / -1; }
.suche-antwort { grid-column: 1 / -1; display: grid; gap: .75rem; justify-items: start; background: var(--kalk-hell); padding: 1rem 1.1rem; }
/* Livegang-Prüfung 30.09.2026: Bei 1024 bis 1279 px war neben dem Text zu wenig Platz für vier Felder (die Auswahlfelder zeigten „alle Or“, „Hau“, „200.“);
   auch bei 1280 bis 1920 px fehlte „€“ bei „200.000 €“ und „Grundstück“ wurde abgeschnitten.
   Jetzt: Text über den Feldern (1024 bis 1279 px), ab 1280 px daneben; Auswahlfelder mit Mindestbreite für ihre längste Option, nur das E-Mail-Feld gibt nach. */
@media (min-width: 64em) {
  .suche { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 1.4rem 1.75rem; }
  .suche-felder { grid-template-columns: minmax(8.1rem, 1.1fr) minmax(8.5rem, 1fr) minmax(7.6rem, 1fr) minmax(0, 1.6fr) auto; }
  .suche-felder .feld-mail, .suche-felder .knopf { grid-column: auto; }
  .suche-antwort { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (min-width: 80em) {
  .suche { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2.5rem; }
}
/* Livegang-Prüfung 30.09.2026: bei 320 px je Feld eine Zeile, sonst sind „Wermsdorf“ und „Grundstück“ zu breit für die halbe Zeile */
@media (max-width: 23.99em) { .suche-felder { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Formularfelder ---------- */
.feld { display: grid; gap: .3rem; min-width: 0; }
.feld label, .feld legend { font-size: .9375rem; font-weight: 600; }
.feld input:not([type=radio]):not([type=range]), .feld select, .feld textarea {
  width: 100%; min-height: 48px; padding: .55rem .75rem; border-radius: var(--r-feld);
  border: 1.5px solid #9AA59E; background: #fff; color: var(--tanne);
  font: 400 1rem/1.4 var(--sans);
}
.feld textarea { resize: vertical; min-height: 5.5rem; }
/* Livegang-Prüfung 30.09.2026: zu lange Werte in Auswahlfeldern enden mit „…“ statt mit einem halben Buchstaben */
.feld select { text-overflow: ellipsis; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--messing-tief); outline-offset: 1px; }
.feld [aria-invalid="true"] { border-color: #A32A1B; }
.fehler { color: #9B2617; font-size: .875rem; margin: 0; }
.optional { font-weight: 400; color: var(--moos); }
.klein { font-size: .875rem; color: var(--moos); }

/* ---------- 3 · Leistungen ---------- */
.leistungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2.5rem; }
.leistungen li { border-top: 1.5px solid var(--tanne); padding: 1.1rem 0 1.4rem; display: grid; align-content: start; gap: .35rem; }
.leistungen h3 { font-size: 1.2rem; font-weight: 650; line-height: 1.3; }
.leistungen p { margin: 0; color: var(--moos); }
.leistungen .preis { color: var(--tanne); font-weight: 700; font-size: 1.125rem; margin-top: .2rem; }
@media (min-width: 40em) { .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .leistungen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 3rem; } }

/* ---------- 4 · Signatur: sechs Orte ---------- */
.orte-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.orte { border-top: 1.5px solid var(--tanne); }
.orte-spalten { display: none; }
.ort { border-bottom: 1px solid var(--linie); }
.ort summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .1rem .9rem; padding: .8rem 3rem .85rem 0; min-height: 48px;
}
.ort summary::-webkit-details-marker { display: none; }
.ort-name { flex: 1 0 100%; font-weight: 700; font-size: 1.3rem; line-height: 1.3; }
.ort-wert { color: var(--moos); font-size: .9375rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 47.99em) { .ort summary { gap: .1rem .45rem; } .ort-wert:not(:nth-last-child(2))::after { content: " ·"; } }
.ort-auf {
  position: absolute; right: .35rem; top: 50%; width: 2rem; height: 2rem; margin-top: -1rem;
  border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linie);
}
.ort-auf::before, .ort-auf::after { content: ""; position: absolute; left: 50%; top: 50%; width: .8rem; height: 1.5px; margin: -.75px 0 0 -.4rem; background: var(--tanne); }
.ort-auf::after { transform: rotate(90deg); }
.ort[open] .ort-auf::after { transform: none; }
.ort summary:hover .ort-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ort[open] summary .ort-name { color: var(--messing-tief); }
.ort-mehr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; padding: .25rem 0 1.25rem; }
.ort-mehr img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ort-mehr p { font-size: .9688rem; margin-bottom: .4rem; }
.ort-zuletzt { color: var(--moos); }
.ort-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.orte-fuss { margin-top: 1rem; font-size: .875rem; color: var(--moos); }

.orte-karte { display: none; }
.orte-karte svg { width: 100%; height: auto; display: block; }
.orte-karte figcaption { font-size: .875rem; color: var(--moos); margin-top: .5rem; text-align: center; }
.k-wald { fill: #D8E2D8; }
.k-fluss { fill: none; stroke: #9DB8C4; stroke-width: 3; stroke-linecap: round; }
.k-umkreis { fill: none; stroke: var(--linie); stroke-width: 1.2; stroke-dasharray: 4 5; }
.k-orte circle { fill: var(--kalk-hell); stroke: var(--tanne); stroke-width: 2; transition: fill .2s, r .2s; }
.k-orte text { font: 600 13px var(--sans); fill: var(--tanne); }
.k-orte g[data-ort="muegeln"] circle { fill: var(--tanne); }
.k-orte g.ist-offen circle { fill: var(--messing); stroke: var(--tanne-tief); }
.k-orte g.ist-offen text { fill: var(--messing-tief); }
.k-massstab line { stroke: var(--moos); stroke-width: 1.5; }
.k-massstab text { font: 12px var(--sans); fill: var(--moos); }

@media (min-width: 48em) {
  .ort summary { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; padding-right: 3.25rem; align-items: center; }
  .ort-name { flex: none; }
  .ort-einheit { display: none; }
  .ort-wert { color: var(--tanne); font-size: 1.0625rem; }
  .orte-spalten {
    display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1rem; padding: .6rem 3.25rem .6rem 0; font-size: .8125rem; color: var(--moos); font-weight: 600;
    border-bottom: 1px solid var(--linie);
  }
  .ort-mehr { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.5rem; padding-left: 0; }
}
@media (min-width: 64em) {
  .orte-raster { grid-template-columns: minmax(0, 8.5fr) minmax(0, 3.5fr); gap: 3.5rem; align-items: start; }
  .orte-karte { display: block; padding-top: 1rem; }
  .ort-name { font-family: var(--serif); font-weight: 400; font-size: 2.25rem; line-height: 1.1; }
  .ort summary { padding-block: .7rem; }
}

/* ---------- 5 · Wertschätzung ---------- */
.wert-raster { display: grid; gap: 1.75rem; }
.wert-eingabe > p { color: var(--moos); margin: .75rem 0 1.5rem; max-width: 34rem; }
.rechner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem 1rem; }
/* Livegang-Prüfung 30.09.2026: am Handy ist „Einfamilienhaus“ im Feld „Art“ bei gleich breiten Spalten abgeschnitten (320 px) bzw. „Doppelhaushälfte“ und „Bauernhaus oder Hof“;
   Ort ist kürzer und bekommt weniger Breite. Zwei Spalten bleiben, damit das Ergebnis beim Bedienen im Blickfeld bleibt. */
@media (max-width: 47.99em) { .rechner { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); } }
.feld-breit { grid-column: 1 / -1; }
.feld-flaeche label { display: flex; justify-content: space-between; align-items: baseline; }
.feld-flaeche output { font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; min-height: 44px; accent-color: var(--tanne); margin: 0; }
.zustand { border: 0; padding: 0; margin: 0; }
.zustand legend { padding: 0; margin-bottom: .3rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: var(--r-feld);
  box-shadow: inset 0 0 0 1.5px #9AA59E; background: #fff; font-size: .9688rem; cursor: pointer;
}
.chips input:checked + span { background: var(--tanne); color: var(--kalk-hell); box-shadow: none; font-weight: 600; }
.chips input:focus-visible + span { outline: 3px solid var(--messing-tief); outline-offset: 2px; }

.ergebnis { background: var(--tanne-tief); color: var(--kalk-hell); padding: 1.6rem 1.5rem 1.4rem; display: grid; gap: .5rem; align-content: start; }
.ergebnis-was { color: var(--kalk-gedaempft); margin: 0; }
.ergebnis-wert { font-family: var(--serif); font-size: clamp(2.125rem, 1.4rem + 2vw, 3rem); line-height: 1.1; color: var(--messing-hell); margin: 0; font-variant-numeric: lining-nums; }
.ergebnis-klein { font-size: .9375rem; color: var(--kalk-gedaempft); margin: .25rem 0 .75rem; }
.ergebnis .knopf { justify-self: start; }
/* Livegang-Prüfung 30.09.2026: 14 statt 13 px, es ist die ehrliche Rückmeldung „nichts wird gesendet“ */
.ergebnis-hinweis { font-size: .875rem; color: var(--kalk-gedaempft); margin: .4rem 0 0; }
@media (min-width: 64em) {
  .wert-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: center; }
  .rechner { gap: 1.25rem 1.25rem; }
  .ergebnis { padding: 2.25rem 2.25rem 2rem; }
}

/* ---------- 6 · Über uns ---------- */
.inhaberin { display: grid; gap: 1.5rem; }
.inhaberin-bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 22%; }
.inhaberin-text .unterzeile { margin: .5rem 0 1rem; }
.zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; border-top: 1px solid var(--linie); padding-top: 1.1rem; }
.zahlen div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .2rem; }
.zahlen dd { font-family: var(--serif); font-size: 2.25rem; line-height: 1; }
.zahlen dt { font-size: .875rem; color: var(--moos); line-height: 1.35; }
.verkauft-titel { margin: var(--abstand) 0 1.5rem; }
.verkauft { display: grid; gap: 2rem; }
.verkauft img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.verkauft figcaption { padding-top: .9rem; }
.verkauft-was { font-size: 1rem; }
.verkauft blockquote { margin: .75rem 0 0; padding: 0; }
.verkauft blockquote p { font-size: 1.125rem; line-height: 1.5; margin-bottom: .35rem; }
.verkauft blockquote footer { font-size: .875rem; color: var(--moos); }
@media (min-width: 48em) {
  .inhaberin { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: center; }
  .inhaberin-bild { aspect-ratio: 4 / 5; }
  .verkauft { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
}
@media (min-width: 64em) {
  .inhaberin { grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: 4rem; }
  .inhaberin-text { max-width: 40rem; }
}

/* ---------- 7 · Kontakt ---------- */
.kontakt-raster { display: grid; gap: 2rem; }
.kontakt-daten > p { color: var(--moos); margin: .75rem 0 1.25rem; }
.angaben { display: grid; gap: 0; }
.angaben div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--linie); }
.angaben dt { font-weight: 600; font-size: .9375rem; }
.angaben dd { overflow-wrap: anywhere; }
.angaben a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -.6rem; }
.anfrage { background: var(--kalk-hell); padding: 1.5rem 1.25rem; display: grid; gap: 1rem; align-content: start; }
.anfrage h3 { font-size: 1.25rem; font-weight: 650; }
.anfrage .knopf { justify-self: start; }
.feld-paar { display: grid; gap: 1rem; }
.antwort { background: var(--flaeche); padding: .9rem 1rem; font-size: .9688rem; }
@media (min-width: 40em) { .feld-paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 64em) {
  .kontakt-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .anfrage { padding: 2rem 2.25rem; }
}
@media (max-width: 29.99em) { .angaben div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ---------- Fuß ---------- */
.fuss { background: var(--tanne-tief); color: var(--kalk-gedaempft); padding-block: 2.5rem 2.75rem; font-size: .9375rem; }
.fuss a { color: var(--kalk-hell); }
.fuss a:hover { color: var(--messing-hell); }
.fuss-innen { display: grid; gap: 1.5rem; }
.fuss-marke { display: flex; gap: .9rem; align-items: flex-start; }
.fuss-marke strong { color: var(--kalk-hell); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 44px; }
.musterhinweis { font-size: .875rem; max-width: 60rem; margin: 0; }
@media (min-width: 64em) {
  .fuss-innen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: start; }
  .fuss-links { justify-content: flex-end; }
  .musterhinweis { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 1.25rem; }
}

/* ---------- Rechtliches (Impressum, Datenschutz) ---------- */
.recht { max-width: 46rem; margin: 0 auto; padding: 2.5rem var(--rand) 4rem; }
.recht h1 { font-family: var(--serif); font-size: clamp(2.2rem, 8vw, 3.25rem); line-height: 1.1; margin-bottom: 1.25rem; hyphens: manual; overflow-wrap: break-word; }
.recht h2 { font-family: var(--sans); font-weight: 650; font-size: 1.2rem; margin: 2rem 0 .5rem; }
.recht .hinweis-kasten { background: var(--flaeche); padding: 1rem 1.2rem; font-size: 1rem; }
.zurueck { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}