/* ═══════════════════════════════════════════════════════════
   ERDMANN IMMOBILIEN — Unterseiten
   Baut auf style.css auf (Tokens, Header, Menü, Footer, Buttons)
   ═══════════════════════════════════════════════════════════ */

/* ── Seiten-Hero ────────────────────────────────────────── */
.phero {
  position: relative; min-height: 78vh; display: flex; flex-direction: column;
  justify-content: flex-end;
  /* Oben: Platz für die jetzt zweizeilige, dauerhaft sichtbare Kopfleiste
     plus die gewohnte Innenluft (--gut) — vorher stand hier 150px fest,
     das war für die alte einzeilige Leiste bemessen (D-ERD-21). */
  padding: calc(var(--header-h) + var(--gut)) clamp(20px, 5vw, 96px) clamp(48px, 7vh, 92px);
  overflow: hidden; background: var(--green-deep);
}
.phero__media { position: absolute; inset: 0; z-index: 0; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.phero__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(23,54,38,.82) 0%, rgba(23,54,38,.45) 42%, rgba(23,54,38,.96) 100%);
}
.phero__content { position: relative; z-index: 2; max-width: 1180px; }
.phero__kicker {
  display: flex; align-items: center; gap: 16px; margin-bottom: 26px;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--green-text);
}
.phero__kicker::before {
  content: ""; width: clamp(28px, 5vw, 68px); height: 1px; background: var(--green); flex: none;
}
.phero__title {
  font-family: var(--serif); font-weight: 300; line-height: .94;
  font-size: clamp(42px, 8.2vw, 128px); letter-spacing: -.02em; color: var(--paper);
}
.phero__title em { color: var(--green-text); }
.phero__sub {
  margin-top: 30px; max-width: 62ch; font-size: clamp(16px, 1.65vw, 21px);
  line-height: 1.62; color: rgba(242, 239, 231, .74);
}
.phero__sub strong { color: var(--paper); font-weight: 600; }
.phero__meta {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px;
}
.phero__chip {
  padding: 10px 20px; border: 1px solid var(--line-light); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(242, 239, 231, .8);
}
.phero__chip--green { border-color: rgba(97, 179, 70, .5); color: var(--green-text); }

/* ── Breadcrumb ─────────────────────────────────────────── */
.crumbs {
  position: relative; z-index: 2; margin-bottom: 30px;
  font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(242, 239, 231, .5);
}
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; }
.crumbs li { display: flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: "/"; color: rgba(242, 239, 231, .28); }
.crumbs a { transition: color .3s var(--ease-out); }
.crumbs a:hover { color: var(--green-text); }
.crumbs [aria-current] { color: var(--paper); }

/* ── Generische Sektion ─────────────────────────────────── */
.psec { padding: clamp(72px, 11vh, 148px) clamp(20px, 5vw, 96px); }
.psec--tight { padding-top: clamp(48px, 7vh, 88px); }
.psec__head { max-width: 1180px; margin: 0 auto clamp(44px, 6vh, 76px); }
.psec__inner { max-width: 1180px; margin: 0 auto; }
.psec .title { max-width: 18ch; }

/* Farbschema pro Sektion — nicht über die Body-Klasse, damit beim
   Übergang zwischen hellen und dunklen Sektionen nichts aufblitzt. */
[data-bg="light"] { color: var(--ink-warm); }
[data-bg="dark"] { color: var(--paper); }

/* Der Abschnitt bringt seinen Grund selbst mit. Vorher trug nur die
   Schriftfarbe die Umschaltung, der Grund kam von der Body-Klasse,
   die beim Scrollen umgehängt wird — dazwischen stand dunkle Schrift
   eine Sekunde lang auf dunklem Grund (gemessen 1,07:1). Die
   Startseite macht es seit jeher so; die Unterseiten ziehen nach. */
.psec[data-bg="light"] { background: var(--paper); }
.psec[data-bg="dark"] { background: var(--green-deep); }

/* Signalgrün als Schrift: auf hellem Grund die abgedunkelte Fassung.
   Eine Regel für die ganze Datei statt Ausnahmen an 14 Stellen. */
[data-bg="light"] { --green-text: var(--green-ink); }

/* ── Lead: Sticky-Label + Fließtext ─────────────────────── */
.lead {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr; gap: clamp(28px, 5vw, 84px);
}
.lead__aside { position: sticky; top: 130px; align-self: start; }
.lead__body > * + * { margin-top: 1.35em; }
.lead__body p { font-size: clamp(16px, 1.5vw, 19.5px); line-height: 1.72; opacity: .84; }
.lead__body p.lead__first {
  font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 2.5vw, 33px);
  line-height: 1.38; letter-spacing: -.01em; opacity: 1;
}
/* h2 steht mit drin, seit die drei Leistungsseiten ohne eigene
   Abschnittsueberschrift ihre Zwischenueberschrift von h3 auf h2
   gehoben haben (Pruefstand SEO-06: Sprung von H1 auf H3). Fuer
   einen Screenreader war die Gliederung dort ein Inhaltsverzeichnis
   mit fehlendem Kapitel. Optisch aendert sich nichts. */
.lead__body h2,
.lead__body h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.25; letter-spacing: -.01em; margin-top: 1.9em;
}
.lead__body strong { font-weight: 700; }
.lead__body a:not(.btn) {
  color: inherit; border-bottom: 1px solid var(--green-text);
  transition: color .3s var(--ease-out);
}
.lead__body a:not(.btn):hover { color: var(--green-text); }

/* ── Checkliste ─────────────────────────────────────────── */
.checks { margin-top: 1.6em; display: grid; gap: 2px; }
.checks li {
  position: relative; padding: 17px 0 17px 40px; line-height: 1.6;
  border-top: 1px solid var(--line-dark); font-size: 15.5px;
}
.checks li:last-child { border-bottom: 1px solid var(--line-dark); }
.checks li::before {
  content: ""; position: absolute; left: 4px; top: 25px;
  /* Der Haken ist das einzige Zeichen dafür, dass der Punkt erfüllt
     ist — er zählt als Bedienelement, nicht als Zierde, und braucht
     deshalb denselben Kontrast wie Schrift. */
  width: 15px; height: 8px; border-left: 1.5px solid var(--green-text);
  border-bottom: 1.5px solid var(--green-text); transform: rotate(-45deg);
}
.checks strong { display: block; margin-bottom: 3px; }
[data-bg="dark"] .checks li { border-color: var(--line-light); }

/* ── Karten-Raster ──────────────────────────────────────── */
.cards {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 2px;
  border: 1px solid;
}
.card {
  padding: clamp(30px, 3.4vw, 46px);
  transition: background-color .5s var(--ease-out);
}
[data-bg="light"] .cards { border-color: var(--line-dark); background: var(--line-dark); }
[data-bg="light"] .card { background: var(--paper); }
[data-bg="light"] .card:hover { background: var(--paper-dim); }
[data-bg="dark"] .cards { border-color: var(--line-light); background: var(--line-light); }
[data-bg="dark"] .card { background: var(--green-deep); }
[data-bg="dark"] .card:hover { background: var(--green-deep-dim); }
.card__num {
  font-family: var(--serif); font-size: 13px; letter-spacing: .2em;
  color: var(--green-text); margin-bottom: 22px;
}
.card__title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2vw, 26px);
  line-height: 1.24; letter-spacing: -.01em; margin-bottom: 14px;
  /* Ortsnamen wie "Mariaposching/Loham" und "Leiblfing/Schwimmbach" sind
     laenger als die Kachel breit ist und wurden vorher abgeschnitten.
     Der Schraegstrich ist keine Umbruchstelle, deshalb overflow-wrap. */
  overflow-wrap: break-word; hyphens: auto;
}
.card__text { font-size: 15.5px; line-height: 1.68; opacity: .76; }
.card__meta {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-dark);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-text);
}
[data-bg="dark"] .card__meta { border-color: var(--line-light); }

/* ── Zahlen-Reihe ───────────────────────────────────────── */
.figures {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(26px, 3vw, 48px);
}
.figure__num {
  font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5.6vw, 78px);
  line-height: 1; letter-spacing: -.03em;
}
.figure__num em { color: var(--green-text); }
.figure__cap {
  margin-top: 14px; font-size: 14px; line-height: 1.55; opacity: .68;
  max-width: 24ch;
}

/* ── Ablauf-Schritte ────────────────────────────────────── */
.steps { max-width: 1180px; margin: 0 auto; counter-reset: step; }
.step {
  position: relative; display: grid; grid-template-columns: clamp(84px, 12vw, 190px) 1fr;
  gap: clamp(20px, 4vw, 56px); padding: clamp(32px, 4.5vh, 52px) 0;
  border-top: 1px solid var(--line-dark);
}
.step:last-child { border-bottom: 1px solid var(--line-dark); }
[data-bg="dark"] .step, [data-bg="dark"] .step:last-child { border-color: var(--line-light); }
.step__num {
  font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 4vw, 58px);
  line-height: 1; color: var(--green-text); letter-spacing: -.02em;
}
.step__title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.24; letter-spacing: -.01em; margin-bottom: 14px;
}
.step__text { font-size: 15.5px; line-height: 1.7; opacity: .78; max-width: 62ch; }
.step__note {
  display: inline-block; margin-top: 16px; padding: 7px 15px; border-radius: 999px;
  background: rgba(97, 179, 70, .13); color: var(--green-text);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}

/* ── Zertifikate ────────────────────────────────────────── */
.certs {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(20px, 2.4vw, 34px);
}
.cert {
  position: relative; padding: clamp(30px, 3.2vw, 44px);
  border: 1px solid var(--line-light); border-radius: 20px;
  background: linear-gradient(160deg, rgba(97,179,70,.07), rgba(97,179,70,0) 62%);
}
[data-bg="light"] .cert { border-color: var(--line-dark); }
.cert__mark {
  width: 42px; margin-bottom: 26px; opacity: .9;
}
.cert__title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.26; margin-bottom: 12px;
}
.cert__text { font-size: 14.5px; line-height: 1.66; opacity: .74; }
.cert__badge {
  position: absolute; top: 26px; right: 26px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green-text);
}

/* ── Zitat ──────────────────────────────────────────────── */
.pquote {
  max-width: 1000px; margin: 0 auto; text-align: center;
}
.pquote blockquote {
  font-family: var(--serif); font-weight: 300; font-size: clamp(23px, 3.4vw, 46px);
  line-height: 1.28; letter-spacing: -.015em;
}
.pquote blockquote em { color: var(--green-text); }
.pquote figcaption {
  margin-top: 30px; font-size: 12.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; opacity: .58;
}

/* ── Split: Bild + Text ─────────────────────────────────── */
.split {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 84px); align-items: center;
}
.split--flip .split__media { order: 2; }
.split__media { border-radius: 22px; overflow: hidden; }
.split__media img { width: 100%; height: clamp(320px, 46vw, 580px); object-fit: cover; }
.split__body > * + * { margin-top: 1.3em; }
.split__body p { font-size: clamp(15.5px, 1.45vw, 18px); line-height: 1.72; opacity: .82; }

/* ── Vergleichstabelle ──────────────────────────────────── */
.ptable-wrap { max-width: 1180px; margin: 0 auto; overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 15px; }
.ptable th, .ptable td {
  padding: 20px 22px; text-align: left; border-bottom: 1px solid var(--line-dark);
  vertical-align: top; line-height: 1.6;
}
[data-bg="dark"] .ptable th, [data-bg="dark"] .ptable td { border-color: var(--line-light); }
.ptable thead th {
  font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--green-text);
}
.ptable tbody th { font-weight: 600; width: 30%; }
.ptable td { opacity: .8; }

/* ── Verwandte Leistungen ───────────────────────────────── */
.related {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px;
  border: 1px solid;
}
.rcard {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: clamp(28px, 3.2vw, 42px); min-height: 220px;
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out);
}
[data-bg="dark"] .related { background: var(--line-light); border-color: var(--line-light); }
[data-bg="dark"] .rcard { background: var(--green-deep); }
[data-bg="light"] .related { background: var(--line-dark); border-color: var(--line-dark); }
[data-bg="light"] .rcard { background: var(--paper); }
.rcard:hover { background: var(--green); color: var(--ink-warm); }
.rcard__label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  opacity: .55;
}
.rcard__title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.2; letter-spacing: -.01em;
}
.rcard__arrow {
  font-size: 22px; transition: transform .5s var(--ease-out);
}
.rcard:hover .rcard__arrow { transform: translateX(10px); }
.rcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }

/* ── Info-Box / Hinweis ─────────────────────────────────── */
.note {
  max-width: 1180px; margin: 0 auto; padding: clamp(28px, 3.4vw, 46px);
  border-left: 2px solid var(--green); background: rgba(97, 179, 70, .07);
  border-radius: 0 18px 18px 0;
}
.note__label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-text); margin-bottom: 14px;
}
.note p { font-size: clamp(15.5px, 1.5vw, 18.5px); line-height: 1.68; opacity: .88; }
.note p + p { margin-top: .9em; }

/* ── Regionen ───────────────────────────────────────────── */
.regions {
  max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px;
}
.regions li {
  padding: 13px 24px; border: 1px solid var(--line-dark); border-radius: 999px;
  font-size: 14px; font-weight: 500; transition: all .4s var(--ease-out);
}
[data-bg="dark"] .regions li { border-color: var(--line-light); }
.regions li:hover { border-color: var(--green-text); color: var(--green-text); }

/* ── Abstand zwischen zwei Bloecken im selben Abschnitt ─────
   Als Klasse und nicht als style="…": die Content-Security-Policy
   in _headers laesst inline-Stile nur ueber eine Liste von
   Pruefsummen zu. Ein neues style-Attribut waere im Betrieb
   blockiert — der Abstand fiele lautlos weg. */
.abstand-oben { margin-top: clamp(34px, 5vh, 72px); }

/* ── Bildband ───────────────────────────────────────────────
   Zwei oder drei Bilder nebeneinander, mit Bildunterschrift.
   Gebaut fuer die Leistungsseiten: die trugen bis zum
   17.08.2026 ausser dem Kopfbild kein einziges Bild, vier von
   sechs gar keines. Feste Seitenverhaeltnisse, damit beim
   Nachladen nichts springt (CLS). */
.bildband {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.bildband--zwei { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.bildband figure { margin: 0; }
/* height: auto ist hier Pflicht, nicht Kosmetik. Die HTML-Attribute
   width="1200" height="800" sind Praesentationshinweise und setzen
   echte CSS-Hoehen. Steht dann eine Breite aus dem Stylesheet daneben,
   sind BEIDE Achsen belegt — und aspect-ratio wird stillschweigend
   ignoriert. Das Bild stand daraufhin 800 px hoch in einer 375 px
   breiten Spalte, also als schmaler senkrechter Ausschnitt. */
.bildband img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 18px; display: block;
}
.bildband--breit img { aspect-ratio: 3 / 2; }
.bildband figcaption {
  margin-top: 14px; font-size: 14px; line-height: 1.6; opacity: .7;
  max-width: 34ch;
}
.bildband strong {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green-text); margin-bottom: 6px;
}

/* Bild in der schmalen Nebenspalte eines .lead-Blocks. Sitzt ueber
   dem Hinweistext und wandert am Handy mit ihm nach oben. */
.lead__bild { margin: 0 0 22px; }
.lead__bild img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 18px; display: block;
}
.lead__bild figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.6; opacity: .62; }

/* Bildunterschrift unter einem .split-Bild — dieselbe Stimme
   wie im Bildband, damit gleiche Dinge gleich aussehen. */
.split__media figure { margin: 0; }
.split__cap {
  margin-top: 14px; font-size: 14px; line-height: 1.6; opacity: .7; max-width: 40ch;
}

/* ── Gegenueberstellung ─────────────────────────────────────
   Zwei Spalten: links der uebliche Weg, rechts der Weg mit
   Sachverstaendigem. Kein .ptable, weil eine Tabelle mit
   620 px Mindestbreite am Handy waagerecht geschoben werden
   muss — und genau dieser Block ist das Verkaufsargument.
   Er darf nicht der sein, den man wegwischt. */
.gegen {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.gegen__spalte {
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line-dark); border-radius: 20px;
}
[data-bg="dark"] .gegen__spalte { border-color: var(--line-light); }
.gegen__spalte--erdmann {
  border-color: rgba(97, 179, 70, .45);
  background: linear-gradient(160deg, rgba(97,179,70,.09), rgba(97,179,70,0) 64%);
}
.gegen__label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  opacity: .6; margin-bottom: 12px;
}
.gegen__spalte--erdmann .gegen__label { color: var(--green-text); opacity: 1; }
.gegen__titel {
  font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.24; margin-bottom: 22px;
}
.gegen__liste { list-style: none; display: grid; gap: 16px; }
.gegen__liste li {
  position: relative; padding-left: 30px;
  font-size: 15.5px; line-height: 1.66; opacity: .82;
}
/* Zwei verschiedene Zeichen statt zweimal Haken: der linke Block
   ist kein Mangel, sondern der Normalfall — er bekommt einen
   neutralen Strich, kein rotes Kreuz. */
.gegen__liste li::before {
  content: "–"; position: absolute; left: 0; top: -.05em;
  font-size: 18px; opacity: .5;
}
.gegen__spalte--erdmann .gegen__liste li::before {
  content: "✓"; color: var(--green-text); opacity: 1; font-size: 15px; top: .05em;
}
.gegen__fuss {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-dark);
  font-size: 14px; line-height: 1.6; opacity: .68;
}
[data-bg="dark"] .gegen__fuss { border-color: var(--line-light); }

/* ── Belege: kleine Merkmalsreihe ───────────────────────────
   Die Qualifikation in Kurzform, dort wo sie zur Leistung
   gehoert. Ausfuehrlich steht sie weiter auf /ueber-uns/. */
.belege {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}
.beleg { padding-top: 20px; border-top: 1px solid var(--line-dark); }
[data-bg="dark"] .beleg { border-color: var(--line-light); }
.beleg__titel {
  font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.26; margin-bottom: 10px;
}
.beleg__text { font-size: 14.5px; line-height: 1.62; opacity: .74; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .lead { grid-template-columns: 1fr; }
  .lead__aside { position: static; }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .step { grid-template-columns: 1fr; gap: 14px; }
  /* padding-top kommt jetzt aus derselben Formel wie oben — --gut
     schrumpft auf schmalen Schirmen automatisch mit, eine eigene
     Zahl ist hier nicht mehr nötig. */
  .phero { min-height: 68vh; }
}

/* ── Reduced Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rcard, .card, .regions li { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   EXPOSÉ-SEITEN (/immobilien/*)

   Diese Regeln ersetzen die style="…"-Attribute, mit denen die
   Seiten gebaut wurden. Grund: Die Content-Security-Policy in
   _headers erlaubt inline-Stile nur über eine Liste von
   Prüfsummen. Neue Attribute stehen dort nicht drin und werden
   im Betrieb blockiert — die Seite käme ohne Sperrleiste und
   ohne Platzhalter heraus, also genau ohne die zwei Teile, die
   den rechtlichen Zweck tragen.
   ═══════════════════════════════════════════════════════════ */

/* Steht als erstes Element im Textfluss vor der fest positionierten
   Kopfleiste — margin-top hält den Pflichthinweis selbst darunter frei
   (D-ERD-21). .phero bekommt in diesem Fall weiter unten seinen
   normalen Innenabstand zurück, sonst addieren sich beide Abstände. */
.expose-sperre { background: var(--clay); color: var(--ink-warm); margin-top: var(--header-h); }
body:has(.expose-sperre) .phero { padding-top: clamp(48px, 7vh, 92px); }
.expose-sperre__inner {
  max-width: 1180px; margin: 0 auto;
  padding: 16px clamp(20px, 5vw, 96px);
  font-family: var(--sans); font-size: var(--fs-small); line-height: 1.6;
}

/* Der Platzhalter lag bisher in der Bildebene — also hinter der
   Überschrift und unter dem Abdunkler. Er war damit praktisch
   unlesbar. Jetzt sitzt er unten rechts in der Bühne, über dem
   Abdunkler, und kollidiert mit keiner Schrift. */
.expose-platzhalter {
  background: var(--green-deep-dim);
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: clamp(20px, 4vh, 44px) clamp(20px, 5vw, 64px);
  text-align: right;
  /* Muss ueber den Abdunkler (.phero__veil, z-index 1). Sonst legt der
     sich mit 82 % Deckkraft darueber und der Hinweis ist nicht lesbar.
     Ein z-index am Kindelement reicht nicht — die Bildebene hat selbst
     z-index 0 und bildet damit einen eigenen Stapelkontext. */
  z-index: 2;
}
.expose-platzhalter__text {
  color: var(--paper);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  max-width: 34ch; line-height: 1.7;
}
.expose-platzhalter__text span {
  display: block; margin-top: .4em;
  text-transform: none; letter-spacing: normal;
  color: var(--quiet-light);
}

.expose-abstand-oben { margin-top: clamp(30px, 4vh, 54px); }
.expose-abstand-unten { margin-bottom: clamp(30px, 4vh, 54px); }
.expose-grund-tief { background: var(--green-deep-dim); }

/* ══════════ OBJEKTGALERIE ══════════
   Bilderstrecke auf den Exposé-Seiten, die aus onOffice erzeugt werden.
   Drei Spalten ab 62rem, zwei ab 40rem, sonst eine. Feste Seitenverhältnisse,
   damit beim Nachladen nichts springt (CLS). */
.galerie {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 1.6vw, 20px);
  margin-top: clamp(28px, 4vh, 52px);
}
@media (min-width: 40rem) { .galerie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .galerie { grid-template-columns: repeat(3, 1fr); } }

.galerie__bild { margin: 0; position: relative; }
.galerie__bild img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 2px;
}
.galerie__bild figcaption {
  margin-top: .6em;
  font-size: 13px; line-height: 1.5;
  color: var(--quiet-light);
}

/* ══════════ GRUNDRISS ══════════
   Ein Grundriss wird gelesen, nicht angeschaut. In der dreispaltigen
   Galerie war er 33 % breit und damit wertlos: die Maße standen drin,
   erkennbar waren sie nicht. Deshalb steht er einzeln, hell hinterlegt
   (Zeichnungen sind fast immer auf Weiß) und ohne Beschnitt. */
.grundriss {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 26px);
  max-width: 900px;
  margin: clamp(28px, 4vh, 52px) auto 0;
}
@media (min-width: 62rem) { .grundriss:has(> :nth-child(2)) { grid-template-columns: repeat(2, 1fr); } }
.grundriss__bild { margin: 0; }
.grundriss__bild img {
  display: block;
  width: 100%; height: auto;
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: 2px;
}
.grundriss__bild figcaption {
  margin-top: .6em; font-size: 13px; line-height: 1.5; color: var(--quiet-dark);
}
[data-bg="dark"] .grundriss__bild { border-color: var(--line-light); }
[data-bg="dark"] .grundriss__bild figcaption { color: var(--quiet-light); }

/* ══════════ OBJEKTLISTE ══════════
   Die Übersicht aller Inserate. Bis zum 17.08.2026 war das eine reine
   Textliste — 285 Objektbilder lagen ausgeliefert im Ordner und keines
   stand auf der Übersicht. Wer eine Immobilie sucht, entscheidet am
   Bild, ob er weiterliest.

   Bewusst OHNE Einblend-Choreografie: die Liste wird gefiltert, und
   eine Karte, die beim Einblenden auf opacity 0 stand und danach vom
   Filter wieder eingeschaltet wird, bliebe für immer unsichtbar.
   Genau dieser Fehler ist auf dieser Seite schon dreimal passiert. */
.okarten {
  max-width: 1180px; margin: clamp(30px, 4vh, 56px) auto 0;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(18px, 2.2vw, 30px);
}
@media (min-width: 40rem) { .okarten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .okarten { grid-template-columns: repeat(3, 1fr); } }

/* Ohne diese Zeile filtert die Auswahl ins Leere.
   `display: flex` unten schlaegt die eingebaute Regel [hidden]{display:none}
   des Browsers — die Karten bekamen das Attribut hidden und blieben trotzdem
   stehen. Im Test sah alles richtig aus, weil dort `karte.hidden` geprueft
   wurde und nicht, ob die Liste kuerzer wird. Sie wurde es nicht: 6834 px
   vorher, 6834 px nach dem Filtern. */
.okarte[hidden] { display: none; }

.okarte {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  color: inherit; text-decoration: none;
  transition: border-color var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}
[data-bg="dark"] .okarte { background: var(--green-deep); border-color: var(--line-light); }
a.okarte:hover, a.okarte:focus-visible { border-color: var(--green-ink); transform: translateY(-3px); }
[data-bg="dark"] a.okarte:hover, [data-bg="dark"] a.okarte:focus-visible { border-color: var(--green); }
@media (prefers-reduced-motion: reduce) {
  .okarte { transition: border-color var(--dur-mid) linear; }
  a.okarte:hover, a.okarte:focus-visible { transform: none; }
}

.okarte__bild { position: relative; background: var(--paper-dim); }
[data-bg="dark"] .okarte__bild { background: var(--green-deep-dim); }
.okarte__bild img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.okarte__leer { aspect-ratio: 4 / 3; }
.okarte__marke {
  position: absolute; top: 14px; left: 14px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--clay); color: var(--ink-warm);
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

.okarte__text { padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; flex: 1; }
.okarte__preis {
  font-family: var(--serif); font-size: 15px; letter-spacing: .12em;
  color: var(--green-ink); margin-bottom: 12px;
}
[data-bg="dark"] .okarte__preis { color: var(--green); }
.okarte__titel {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(18px, 1.7vw, 22px); line-height: 1.28; letter-spacing: -.01em;
  margin-bottom: 8px;
  /* Ortsnamen wie "Mariaposching / Loham" sind laenger als die Karte
     breit ist; der Schraegstrich ist keine Umbruchstelle. */
  overflow-wrap: break-word; hyphens: auto;
}
.okarte__herkunft { font-size: 14px; color: var(--quiet-dark); margin-bottom: 16px; }
[data-bg="dark"] .okarte__herkunft { color: var(--quiet-light); }
.okarte__daten {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px;
  margin: 0 0 auto;
}
.okarte__daten li {
  padding: 5px 11px; border: 1px solid var(--line-dark); border-radius: var(--r-pill);
  font-size: 12.5px; color: var(--quiet-dark);
}
[data-bg="dark"] .okarte__daten li { border-color: var(--line-light); color: var(--quiet-light); }
.okarte__mehr {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-dark);
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-ink);
}
[data-bg="dark"] .okarte__mehr { border-color: var(--line-light); color: var(--green); }

.okarten__leer {
  max-width: 1180px; margin: clamp(24px, 3vh, 40px) auto 0;
  max-width: 62ch; color: var(--quiet-dark); line-height: 1.7;
}
[data-bg="dark"] .okarten__leer { color: var(--quiet-light); }

/* ── Auswahlleiste über der Liste ──────────────────────────
   Startet hidden und wird von page.js eingeschaltet. Ohne JavaScript
   stehen alle Objekte untereinander — das ist richtig; Bedienelemente,
   die dann nichts tun, waeren eine Falle. */
.ofilter {
  max-width: 1180px; margin: clamp(26px, 3.4vh, 44px) auto 0;
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: clamp(14px, 1.8vw, 24px);
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--line-dark); border-radius: var(--r-md);
}
[data-bg="dark"] .ofilter { border-color: var(--line-light); }
.ofilter[hidden] { display: none; }
.ofilter__feld { display: flex; flex-direction: column; gap: 6px; min-width: 150px; flex: 1 1 150px; }
.ofilter__feld label {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--quiet-dark);
}
[data-bg="dark"] .ofilter__feld label { color: var(--quiet-light); }
.ofilter select,
.ofilter input[type="search"] {
  font-family: var(--sans); font-size: 15px; color: inherit;
  padding: 11px 13px; background: transparent;
  border: 1px solid var(--line-dark); border-radius: 4px;
  /* 44 px hoch, damit die Auswahl am Handy mit dem Daumen zu treffen ist. */
  min-height: 44px;
  width: 100%;
}
[data-bg="dark"] .ofilter select,
[data-bg="dark"] .ofilter input[type="search"] { border-color: var(--line-light); }
/* Das Suchfeld darf breiter werden als eine Auswahlliste — ein Ortsname
   passt sonst nicht sichtbar hinein. */
.ofilter__feld--suche { flex: 2 1 220px; }
.ofilter input[type="search"]::placeholder { color: var(--quiet-dark); opacity: .8; }
[data-bg="dark"] .ofilter input[type="search"]::placeholder { color: var(--quiet-light); }
.ofilter select option { color: var(--ink-warm); background: var(--paper); }
.ofilter__stand {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; color: var(--quiet-dark); flex: 1 1 auto;
}
[data-bg="dark"] .ofilter__stand { color: var(--quiet-light); }
.ofilter__reset {
  align-self: flex-start;
  font-family: var(--sans); font-size: 13px; color: inherit;
  background: none; border: 0; padding: 6px 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  min-height: 44px;
}
.ofilter__reset:hover { color: var(--green-ink); }
[data-bg="dark"] .ofilter__reset:hover { color: var(--green); }