@charset "UTF-8";
/* Die Zeile oben muss die ERSTE im Stylesheet sein.
   Ohne sie rät der Browser die Zeichenkodierung, wenn die Datei
   einzeln aufgerufen wird – aus „Höhe“ wird dann „Höhe“. Auf die
   Darstellung der Website wirkt sich das nicht aus, weil die Seite
   selbst UTF-8 meldet; beim Nachsehen in der Datei verwirrt es aber. */
/* Immocenter Ungarn – Gestaltung der Website.
   Farben an die bestehende .com angelehnt: Sandton, gedecktes Gold. */

:root {
    --gold: #8a6d3b;
    --gold-dunkel: #6f572f;
    --sand: #f6f5f1;
    --linie: #e2ded4;
    --text: #2b2b2b;
    --grau: #7a7a7a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    background: var(--sand);
    color: var(--text);
    line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
.innen { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* --- Kopf --- */
.kopf { background: #fff; border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.marke { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.marke span { color: var(--gold); font-weight: 400; }
.kopf-nav a { margin-left: 26px; font-size: 15px; color: var(--grau); }
.kopf-nav a:hover { color: var(--gold); }

.aufbau-hinweis {
    background: #fdf3d8; color: #7a5c00; text-align: center;
    padding: 7px; font-size: 13px; border-bottom: 1px solid #ecdfb6;
}

/* --- Suchbereich --- */
.suchbereich { background: #fff; border: 1px solid var(--linie); border-radius: 8px; margin: 18px 0 16px; }

.such-kopf { display: flex; gap: 12px; align-items: center; padding: 14px 16px; flex-wrap: wrap; }
.such-kopf input[type=search] {
    flex: 1; min-width: 220px; padding: 10px 13px;
    border: 1px solid var(--linie); border-radius: 5px; font-size: 14.5px;
}

.art-schalter { display: flex; border: 1px solid var(--linie); border-radius: 5px; overflow: hidden; }
.art-knopf { padding: 9px 20px; font-size: 14.5px; color: var(--grau); cursor: pointer; }
.art-knopf input { display: none; }
.art-knopf.aktiv { background: var(--gold); color: #fff; font-weight: 600; }

.filter-umschalter {
    background: none; border: 1px solid var(--linie); color: var(--grau);
    padding: 9px 16px; border-radius: 5px; cursor: pointer; font-size: 14px;
}
.filter-umschalter:hover { border-color: var(--gold); color: var(--gold); }
.zuruecksetzen { color: var(--grau); font-size: 13.5px; text-decoration: underline; }

.filter-zeile {
    padding: 9px 16px; border-top: 1px solid var(--linie);
    font-size: 13.5px; color: var(--grau); cursor: pointer;
}
.filter-zeile:hover { background: #faf9f6; }
.filter-zeile strong { color: var(--text); }

/* Vier Spalten, damit die Liste darunter sichtbar bleibt */
.filterraster {
    display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 0 22px; padding: 12px 16px 14px; border-top: 1px solid var(--linie);
    align-items: start;
}
.filter-spalte.breit { grid-column: span 2; display: flex; gap: 22px; }
.filter-spalte.breit .filter-gruppe { flex: 1; }
.filter-gruppe { margin-bottom: 12px; }
.filter-titel {
    display: block; font-size: 11.5px; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--grau); font-weight: 700; margin-bottom: 4px;
}
.filter-gruppe input[type=text] {
    width: 78px; padding: 6px 8px; margin-right: 5px;
    border: 1px solid var(--linie); border-radius: 4px; font-size: 13.5px;
}
.filter-gruppe input[name=ort] { width: 100%; }
.filter-gruppe input.schmal { width: 52px; }
.filter-gruppe select {
    width: 100%; border: 1px solid var(--linie); border-radius: 4px;
    font-size: 13px; padding: 3px;
}
.hinweis { font-size: 11px; color: #b3aca0; }

.kaestchen { font-size: 13.5px; }
.kaestchen.zweispaltig { columns: 2; column-gap: 16px; }
.filter-spalte:first-child .kaestchen.zweispaltig { margin-bottom: 14px; }
.kaestchen label { display: block; padding: 1px 0; cursor: pointer; break-inside: avoid; }
.kaestchen .anzahl { color: #b3aca0; font-size: 11.5px; }

.stufen-reihe { display: flex; flex-direction: column; gap: 2px; }
.stufen-wahl { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.stufen-wahl input { margin: 0; }
.stufe-text { color: var(--grau); }
.noscript-knopf {
    margin: 0 16px 14px; background: var(--gold); color: #fff;
    border: none; padding: 10px 24px; border-radius: 5px; cursor: pointer;
}

#ergebnis.laedt { opacity: 0.45; transition: opacity 0.15s; }

/* --- Ergebnisse --- */
.ergebnis-kopf {
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 10px; margin-bottom: 10px; font-size: 15px;
}
.rang-hinweis { font-size: 13.5px; color: var(--grau); }
.leer { background: #fff; padding: 30px; border-radius: 8px; text-align: center; color: var(--grau); }

.tabelle-rahmen {
    background: #fff; border: 1px solid var(--linie); border-radius: 8px;
    overflow-x: auto; margin-bottom: 26px;
}
.objekttabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.objekttabelle th {
    background: #faf9f6; border-bottom: 2px solid var(--linie);
    padding: 9px 10px; text-align: left; font-size: 12.5px;
    white-space: nowrap; position: sticky; top: 0;
}
.objekttabelle th a { color: var(--grau); }
.objekttabelle th a:hover { color: var(--gold); }
.objekttabelle th a.sortiert { color: var(--gold); font-weight: 700; }
.pfeil { font-size: 9px; }

.objekttabelle td { border-bottom: 1px solid #f0ede6; padding: 7px 10px; vertical-align: middle; }
.objekttabelle tbody tr:hover { background: #fbfaf7; }

.sp-rang { width: 54px; text-align: center; color: var(--grau); font-size: 12.5px; white-space: nowrap; }
.sp-bild { width: 92px; padding: 4px 6px !important; }
.sp-bild img { width: 84px; height: 60px; object-fit: cover; border-radius: 4px; display: block; }
.sp-bild .kein-bild { font-size: 11px; color: #c0b9ab; }
.sp-zahl { text-align: right; white-space: nowrap; }
.sp-eng { width: 38px; text-align: center; }
.sp-bes { color: var(--grau); font-size: 12.5px; max-width: 220px; }

/* Minikarte statt Komitatsname */
.karte-vorlage { position: absolute; width: 0; height: 0; overflow: hidden; }
.sp-karte { width: 112px; text-align: center; }
.karte { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.karte svg { width: 96px; height: 64px; display: block; overflow: visible; }
.karte-land { fill: #eee9dd; stroke: #c9bfa9; stroke-width: 4; stroke-linejoin: round; }
.karte-see { fill: #5b9bd0; stroke: #5b9bd0; stroke-width: 5; stroke-linejoin: round; }
.karte-bp { fill: #6f6a60; }
.karte-punkt { fill: #c0392b; stroke: #fff; stroke-width: 5; }
.karte-kreis { fill: rgba(192, 57, 43, .22); stroke: #c0392b; stroke-width: 3; stroke-dasharray: 9 7; }
.karte-text { font-size: 11.5px; color: var(--grau); white-space: nowrap; line-height: 1.2; }
.karte-ohne { font-size: 12.5px; color: var(--grau); }
.karte-legende { display: block; font-size: 10.5px; font-weight: 400; color: var(--grau); margin-top: 2px; }
.karte-legende i { display: inline-block; vertical-align: middle; margin: 0 3px 0 4px; }
.karte-legende .lg-bp { width: 6px; height: 6px; border-radius: 50%; background: #6f6a60; }
.karte-legende .lg-see { width: 12px; height: 4px; border-radius: 2px; background: #5b9bd0; }

.objekt-link { display: block; max-width: 300px; }
.objekt-link strong { color: var(--gold); }
.objekt-link .objekt-titel { display: block; color: var(--text); font-size: 12.5px; line-height: 1.35; }
.objekttabelle .preis { font-weight: 700; color: var(--gold); font-size: 14.5px; }

/* Die ersten drei der aktuellen Auswahl hervorheben */
.spitze td { background: #fdfaf2; }
.spitze .sp-rang { font-weight: 700; color: #fff; }
.spitze-1 .sp-rang { background: #c9a227; }
.spitze-2 .sp-rang { background: #b0a99a; }
.spitze-3 .sp-rang { background: #c08b5c; }

/* Bewertungsstufen A/B/C */
.stufe {
    display: inline-block; width: 21px; line-height: 21px; border-radius: 3px;
    font-size: 12px; font-weight: 700; text-align: center; color: #fff;
}
.stufe-A { background: #4f9a5a; }
.stufe-B { background: #d1a13a; }
.stufe-C { background: #b08076; }
.kennung-filter { display: flex; align-items: center; gap: 8px; }
.kennung-filter strong { font-size: 13px; color: var(--grau); font-weight: 600; }

.blaettern { display: flex; gap: 20px; justify-content: center; align-items: center; margin: 10px 0 40px; }
.blaettern a { color: var(--gold); font-weight: 600; }
.blaettern span { color: var(--grau); font-size: 14px; }

.kopf-nav a.aktiv { color: var(--gold); }

/* --- Fuss: dunkel wie auf der .com, drei Spalten --- */
.fuss { background: #211f1b; color: #c9c4ba; margin-top: 40px; padding: 38px 0 0; font-size: 15px; }
.fuss a { color: #c9c4ba; }
.fuss a:hover { color: #fff; }
.fuss-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.fuss-spalte h2 { color: #fff; font-size: 16px; font-weight: 700; margin: 0 0 22px; position: relative; padding-bottom: 12px; }
.fuss-spalte h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; background: #b08d3c; }
.fuss-spalte p { margin: 0 0 14px; line-height: 1.6; }
.fuss-spalte strong { color: #ddd8ce; }
.fuss-spalte ul { list-style: none; margin: 0; padding: 0; }
.fuss-spalte li { margin-bottom: 10px; }
.fuss-spalte li span { color: #8f897d; }
.fuss-zeile { border-top: 1px solid #36332d; margin-top: 26px; padding: 16px 20px; font-size: 13px; color: #8f897d; }

/* --- Textseiten (Impressum, Datenschutz, Kontakt …) --- */
.textseite { background: #fff; border: 1px solid var(--linie); border-radius: 8px; max-width: 820px;
             margin: 24px auto 0; padding: 30px 40px 36px; }
.textseite h1 { color: var(--gold); font-size: 28px; margin: 0 0 18px; }
.textseite h2 { font-size: 18px; margin: 26px 0 8px; }
.textseite p, .textseite li { line-height: 1.65; }
.textseite a { color: var(--gold); }
.textseite a:hover { text-decoration: underline; }
.textseite .einleitung { font-size: 17px; color: #555; }
.textseite .klein { font-size: 13px; color: var(--grau); }
.textseite .knopf { display: inline-block; background: var(--gold); color: #fff; padding: 11px 24px;
                    border-radius: 5px; font-weight: 600; text-decoration: none; }
.textseite .knopf:hover { background: var(--gold-dunkel); text-decoration: none; }
.fehlt { background: #fdf3d8; color: #8a5a00; border: 1px dashed #d9b95b; padding: 0 5px; border-radius: 3px;
         font-size: 13px; white-space: normal; }
.hinweis-entwurf { background: #fdf3d8; border-left: 4px solid #d9b95b; padding: 10px 14px; color: #7a5c00; }
.kontakt-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 22px 0 8px; }
.textseite .kontakt-karte { display: block; border: 1px solid var(--linie); border-radius: 8px; padding: 16px 18px;
                            color: var(--text); background: var(--sand); }
.textseite .kontakt-karte:hover { border-color: var(--gold); text-decoration: none; }
.kontakt-art { display: block; font-size: 13px; color: var(--grau); margin-bottom: 4px; }
.kontakt-karte strong { font-size: 18px; color: var(--gold); }
.verzeichnis { padding-left: 20px; }
.textseite h3 { font-size: 15.5px; margin: 18px 0 6px; }
.textseite ul { padding-left: 22px; }
.textseite .liste-a { list-style: lower-alpha; padding-left: 24px; }
.formular-kasten { border: 1px dashed #cfc7b5; border-radius: 6px; padding: 6px 18px; background: var(--sand); }
.formular-kasten p { margin: 10px 0; }
.formular-kasten .formular-zeile { border-bottom: 1px solid #cfc7b5; }
.verweise { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--linie); }
.fuss-spalte .fuss-klein { font-size: 13px; color: #8f897d; }

@media (max-width: 760px) {
    .fuss-raster { grid-template-columns: 1fr; gap: 10px; }
    .textseite { padding: 22px 20px; }
}

@media (max-width: 640px) {
    .kopf-innen { height: auto; padding: 12px 0; flex-direction: column; gap: 8px; }
    .kopf-nav a { margin: 0 12px; }
    .suchleiste-oben { flex-direction: column; align-items: stretch; }
    .art-schalter { justify-content: center; }
}

.sp-rubrik { font-size: 12.5px; color: var(--grau); max-width: 130px; }

@media (max-width: 1100px) {
    .filterraster { grid-template-columns: repeat(2, 1fr); }
    .filter-spalte.breit { grid-column: span 2; }
}
@media (max-width: 640px) {
    .filterraster { grid-template-columns: 1fr; }
    .filter-spalte.breit { flex-direction: column; gap: 0; }
    .kaestchen.zweispaltig { columns: 1; }
}

/* Kennzeichnung neuer Objekte */
.neu-marke {
    display: inline-block; background: #4f9a5a; color: #fff;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; padding: 1px 6px; border-radius: 3px; margin-left: 5px;
    vertical-align: middle;
}
.neu-schalter {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    border: 1px solid var(--linie); border-radius: 5px; padding: 9px 14px;
    font-size: 14px; color: var(--grau); white-space: nowrap;
}
.neu-schalter.aktiv { background: #eef6f0; border-color: #4f9a5a; color: #37703f; font-weight: 600; }

/* --- Objektseite --- */
.zurueck { margin: 16px 0 8px; font-size: 14px; }
.zurueck a { color: var(--grau); }
.objekt-kopf {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 24px; flex-wrap: wrap; margin-bottom: 16px;
}
.objekt-kopf h1 { font-size: 25px; margin: 0 0 4px; line-height: 1.25; }
.objekt-lage { color: var(--grau); font-size: 14.5px; margin: 0; }
.objekt-preis-gross { font-size: 28px; font-weight: 700; color: var(--gold); text-align: right; }
.objekt-preis-gross .qm { display: block; font-size: 13.5px; font-weight: 400; color: var(--grau); }

.galerie { margin-bottom: 26px; }
.galerie-gross { background: #eee; border-radius: 8px; overflow: hidden; position: relative; }
.galerie-pfeil {
    position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, .85); color: #222; font-size: 34px; line-height: 44px; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25); opacity: .85; transition: opacity .15s, background .15s; padding: 0;
}
.galerie-pfeil:hover, .galerie-pfeil:focus-visible { opacity: 1; background: #fff; }
.galerie-zurueck.galerie-pfeil { left: 14px; }
.galerie-vor.galerie-pfeil { right: 14px; }
.galerie-leiste { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 10px 0 2px; }
.galerie-leiste span { font-size: 15px; color: var(--grau); min-width: 64px; text-align: center; }
.galerie-knopf {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie); background: #fff;
    font-size: 28px; line-height: 40px; color: #222; cursor: pointer; padding: 0;
}
.galerie-knopf:hover, .galerie-knopf:focus-visible { border-color: var(--gold); color: var(--gold); }
@media (max-width: 760px) {
    .galerie-pfeil { width: 40px; height: 40px; font-size: 28px; line-height: 36px; }
    .galerie-zurueck.galerie-pfeil { left: 8px; }
    .galerie-vor.galerie-pfeil { right: 8px; }
}
.galerie-gross img { width: 100%; max-height: 560px; object-fit: cover; display: block; }
.galerie-streifen { display: flex; gap: 7px; overflow-x: auto; margin-top: 7px; padding-bottom: 4px; }
.galerie-streifen img {
    width: 104px; height: 74px; object-fit: cover; border-radius: 4px;
    cursor: pointer; opacity: 0.65; flex: 0 0 auto;
}
.galerie-streifen img:hover, .galerie-streifen img.aktiv { opacity: 1; outline: 2px solid var(--gold); }
.bildzahl { font-size: 13px; color: var(--grau); margin: 4px 0 0; }

/* --- Lupe: Bild in voller Grösse --------------------------------------- */
/*
 * Der Unterschied zur Seite steckt in einer Zeile: Oben steht das Bild auf
 * object-fit: cover und wird beschnitten, damit alle Objekte denselben
 * ruhigen Streifen bekommen. Hier steht es auf contain. Wer klickt, will
 * das ganze Bild sehen – gerade bei Fotos, die als Montage aus mehreren
 * Aufnahmen von einem Portal übernommen wurden.
 */
.galerie-lupe {
    position: absolute; right: 14px; bottom: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255, 255, 255, .92); border: 0; border-radius: 99px;
    padding: 8px 15px; font: inherit; font-size: 14px; color: #243b30;
    cursor: pointer; opacity: .85;
}
.galerie-lupe:hover, .galerie-lupe:focus-visible { opacity: 1; }
.galerie-lupe span { font-size: 17px; line-height: 1; }
.galerie-gross img { cursor: zoom-in; }

.lupe {
    /* Über der Lageart-Erklärung (z-index 999), damit nichts durchsticht */
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(10, 16, 13, .93);
    display: flex; align-items: center; justify-content: center;
    padding: 56px 20px 60px;
}
.lupe[hidden] { display: none !important; }
.lupe img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;          /* genau hier liegt der Unterschied */
    border-radius: 4px; cursor: default;
}
.lupe-zu {
    position: absolute; top: 14px; right: 18px; z-index: 2;
    background: none; border: 0; color: #fff; font-size: 40px; line-height: 1;
    cursor: pointer; opacity: .8; padding: 4px 10px;
}
.lupe-zu:hover, .lupe-zu:focus-visible { opacity: 1; }
.lupe-pfeil {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 54px; height: 54px; border-radius: 50%;
    background: rgba(255, 255, 255, .14); border: 0; color: #fff;
    font-size: 34px; line-height: 50px; cursor: pointer;
}
.lupe-pfeil:hover, .lupe-pfeil:focus-visible { background: rgba(255, 255, 255, .3); }
.lupe-pfeil[hidden] { display: none; }
.lupe-zurueck { left: 16px; }
.lupe-vor     { right: 16px; }
.lupe-fuss {
    position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
    color: rgba(255, 255, 255, .75); font-size: 15px;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
    .lupe { padding: 50px 8px 54px; }
    .lupe-pfeil { width: 44px; height: 44px; font-size: 27px; line-height: 40px; }
    .lupe-zurueck { left: 6px; }
    .lupe-vor { right: 6px; }
    .galerie-lupe { right: 8px; bottom: 8px; padding: 7px 12px; font-size: 13px; }
}
/*
 * Solange die Lupe offen ist, treten die Bedienteile der Seite zurück.
 *
 * Der dunkle Grund ist zu 93 % deckend, nicht zu 100. Ohne diese Zeilen
 * blitzen die hellen Pfeile und die Zählung der Seite durch – man sieht
 * zwei Pfeilpaare und zweimal „3 / 3“ übereinander. Auf dem Handy, wo
 * alles dicht beieinander steht, fällt es am meisten auf.
 *
 * visibility statt display: so bleibt der Platz stehen und die Seite
 * springt beim Schliessen nicht.
 */
body.lupe-offen .galerie-pfeil,
body.lupe-offen .galerie-lupe,
body.lupe-offen .galerie-leiste { visibility: hidden; }

.objekt-spalten { display: grid; grid-template-columns: 1fr 340px; gap: 30px; margin-bottom: 40px; }
.objekt-haupt section { margin-bottom: 26px; }
.objekt-haupt h2 { font-size: 19px; margin: 0 0 8px; }
.objekt-haupt p { margin: 0 0 10px; }

.kasten {
    background: #fff; border: 1px solid var(--linie);
    border-radius: 8px; padding: 16px 18px; margin-bottom: 16px;
}
.kasten h2 { font-size: 16px; margin: 0 0 10px; }

/* Übersichtskarte über den Eckdaten: Wo liegt das Objekt in Ungarn?
   Das Bild wird in voller Breite des Kastens gezeigt und unten
   abgeschnitten, damit die Nadel ungefähr in der Mitte bleibt. */
.kasten-karte { padding: 0; overflow: hidden; }
.kasten-karte img { display: block; width: 100%; height: auto; }
.karte-quelle { margin: 0; padding: 5px 10px 7px; font-size: 11px; color: #6b6b63; }
.karte-quelle a { color: inherit; }

/* ---------------------------------------------------------------------
   Die kleine Einblendung unten rechts.

   Sie liegt über allem, nimmt dem Inhalt aber keinen Platz. Auf dem
   Telefon sitzt sie am unteren Rand über die ganze Breite, weil ein
   schmaler Streifen in der Ecke dort entweder zu klein zum Lesen oder
   zu gross wäre.

   „Bewegung reduzieren“ im System schaltet das Hereinfahren ab – siehe
   assets/js/einblendung.js.
   --------------------------------------------------------------------- */
.einblendung {
    position: fixed; right: 18px; bottom: 18px; z-index: 60;
    display: flex; align-items: center; gap: 10px;
    max-width: 330px; padding: 12px 10px 12px 16px;
    background: #08381f; color: #fff;
    border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.28);
    transform: translateX(calc(100% + 24px));
    transition: transform .45s ease-out, opacity .45s ease-out;
    opacity: 0;
}
.einblendung.ist-da { transform: translateX(0); opacity: 1; }
/* Ohne diese Zeile bliebe der Streifen immer im Layout: display:flex
   oben überschreibt die eingebaute Regel [hidden] { display: none }.
   Er wäre dann zwar durchsichtig und weggeschoben, aber vorhanden –
   und finge Mausklicks ab, die dem Inhalt darunter gelten. */
.einblendung[hidden] { display: none; }
.einblendung p { margin: 0; font-size: 14.5px; line-height: 1.35; }
.einblendung button {
    flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
    background: none; border: 0; border-radius: 6px;
    color: #cfe3d6; font-size: 20px; line-height: 1; cursor: pointer;
}
.einblendung button:hover { background: rgba(255,255,255,.12); color: #fff; }

@media (max-width: 600px) {
    .einblendung { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .einblendung { transition: opacity .3s linear; transform: none; }
}
@media print {
    .einblendung { display: none; }
}
.daten { width: 100%; border-collapse: collapse; font-size: 14px; }
.daten th {
    text-align: left; font-weight: 400; color: var(--grau);
    padding: 5px 0; vertical-align: top; width: 48%;
}
.daten td { padding: 5px 0; font-weight: 600; }
.entfernungstabelle { border-collapse: collapse; font-size: 14.5px; }
.entfernungstabelle td { padding: 4px 22px 4px 0; }
.entfernungstabelle td:last-child { font-weight: 600; }

.bewertung { margin-top: 12px; border-top: 1px solid var(--linie); padding-top: 10px; }
.bewertung h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--grau); margin: 0 0 6px; }
.bewertung-zeile { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 2px 0; }
.bewertung-zeile .muted { color: var(--grau); font-size: 13px; }
.merkmalgruppe { font-size: 14px; margin: 0 0 6px; }

.anfrage .knopf {
    display: inline-block; background: var(--gold); color: #fff;
    padding: 11px 22px; border-radius: 5px; font-weight: 600;
}
.anfrage .knopf:hover { background: var(--gold-dunkel); }
.leer .knopf {
    display: inline-block; background: var(--gold); color: #fff;
    padding: 11px 24px; border-radius: 5px; font-weight: 600; margin-top: 10px;
}

@media (max-width: 900px) {
    .objekt-spalten { grid-template-columns: 1fr; }
    .objekt-preis-gross { text-align: left; }
}

/* --- Hauptmenü --- */
.kopf-innen { gap: 20px; }
.kopf-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; }
.kopf-nav a { margin-left: 0; font-size: 14.5px; white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent; }
.kopf-nav a.aktiv { color: var(--gold); border-bottom-color: var(--gold); }
.menue-knopf { display: none; background: none; border: 1px solid var(--linie); border-radius: 5px;
               padding: 7px 10px; cursor: pointer; align-items: center; gap: 3px; flex-direction: column; }
.menue-knopf span { display: block; width: 20px; height: 2px; background: var(--text); }
.menue-knopf b { font-size: 10px; font-weight: 600; color: var(--grau); margin-top: 2px; }
@media (max-width: 1020px) {
    .kopf-innen { flex-wrap: wrap; height: auto; padding: 10px 20px; flex-direction: row !important; justify-content: space-between; }
    .menue-knopf { display: flex; }
    .kopf-nav { display: none; width: 100%; flex-direction: column; gap: 0; padding: 6px 0 4px; }
    .kopf-nav.offen { display: flex; }
    .kopf-nav a { margin: 0 !important; padding: 11px 2px; border-bottom: 1px solid var(--linie); font-size: 16px; }
    .kopf-nav a.aktiv { border-bottom-color: var(--linie); font-weight: 600; }
}

/* --- Willkommen auf der Startseite --- */
.willkommen {
    background: linear-gradient(rgba(25, 22, 17, .55), rgba(25, 22, 17, .55)),
                url('/assets/img/startbild.jpg') center 40% / cover no-repeat,
                linear-gradient(135deg, #3b3226, #6f572f);
    color: #fff; text-align: center; padding: 58px 0 50px;
}
.willkommen-marke { display: inline-block; background: #9a7320; font-size: 12px; letter-spacing: 3px;
                    text-transform: uppercase; padding: 2px 8px; margin: 0 0 16px; }
.willkommen h1 { font-size: clamp(28px, 4.4vw, 50px); font-weight: 400; line-height: 1.15; margin: 0 auto 14px;
                 max-width: 900px; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.willkommen h1::after { content: ""; display: block; width: 80px; height: 2px; background: rgba(255,255,255,.7); margin: 20px auto 0; }
.willkommen-text { font-size: clamp(15px, 1.6vw, 19px); max-width: 720px; margin: 0 auto 26px;
                   text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.willkommen-knoepfe { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 0; }
.knopf-dunkel { display: inline-block; background: rgba(33, 31, 27, .92); color: #fff; padding: 14px 30px;
                font-size: 14px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 3px; }
.knopf-dunkel:hover { background: var(--gold); }
#suchform { scroll-margin-top: 16px; }

/* --- Inhaltsseiten (Verkäufer, Makler, Tippgeber) --- */
.inhaltsseite { max-width: 1100px; margin: 26px auto 0; }
.seiten-kopf { text-align: center; max-width: 820px; margin: 0 auto 26px; }
.seiten-kopf h1 { color: var(--gold); font-size: clamp(26px, 3.4vw, 36px); line-height: 1.2; margin: 0 0 14px; }
.inhaltsseite .einleitung { font-size: 17.5px; color: #555; line-height: 1.65; }
.abschnitt { background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: 26px 30px; margin: 0 0 20px; }
.abschnitt h2 { font-size: 22px; margin: 0 0 14px; }
.abschnitt p { line-height: 1.65; }
.inhaltsseite a:not(.knopf):not(.knopf-hell) { color: var(--gold); }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.raster-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.kachel { background: var(--sand); border-radius: 8px; padding: 16px 18px; }
.kachel h3 { font-size: 16px; margin: 0 0 8px; }
.kachel-zeichen { margin-right: 6px; }
.kachel p { margin: 0 0 8px; font-size: 14.5px; }
.haken-liste { list-style: none; padding: 0; margin: 8px 0; }
.haken-liste li { position: relative; padding-left: 24px; margin: 5px 0; line-height: 1.5; }
.haken-liste li::before { content: "✓"; position: absolute; left: 2px; color: #4f9a5a; font-weight: 700; }
.kreuz-liste { list-style: none; padding: 0; }
.kreuz-liste li { position: relative; padding-left: 24px; margin: 5px 0; }
.kreuz-liste li::before { content: "✕"; position: absolute; left: 3px; color: #b08076; font-weight: 700; }
.angebot { border: 1px solid var(--linie); border-radius: 10px; padding: 20px 20px 18px; display: flex; flex-direction: column; background: #fff; }
.angebot-hervor { border: 2px solid var(--gold); box-shadow: 0 6px 20px rgba(138, 109, 59, .15); }
.angebot-name { font-weight: 700; font-size: 17px; margin: 0 0 8px; }
.angebot-preis { font-size: 26px; font-weight: 700; color: var(--gold); margin: 0; line-height: 1.2; }
.angebot-zusatz { font-size: 13.5px; color: var(--grau); margin: 4px 0 0; }
.angebot-fuer { font-weight: 600; margin: 14px 0 6px; line-height: 1.45; }
.angebot .haken-liste { font-size: 14px; flex: 1; }
.angebot-knopf { margin: 14px 0 0; }
.inhaltsseite .knopf { display: inline-block; background: var(--gold); color: #fff; padding: 11px 22px;
                       border-radius: 5px; font-weight: 600; margin: 4px 6px 4px 0; }
.inhaltsseite .knopf:hover { background: var(--gold-dunkel); }
.inhaltsseite .knopf-hell { background: #fff; color: var(--gold); border: 1px solid var(--gold); }
.inhaltsseite .knopf-hell:hover { background: var(--sand); }
.hinweis-kasten { background: #fbf6ea; border-left: 4px solid var(--gold); border-radius: 6px; padding: 4px 20px; margin: 0 0 20px; }
.hinweis-kasten p { line-height: 1.6; }
.kontakt-kasten { background: var(--sand); border-radius: 8px; padding: 6px 20px; }
.schritte { counter-reset: schritt; list-style: none; padding: 0; margin: 0 0 16px; }
.schritte li { counter-increment: schritt; position: relative; padding: 4px 0 12px 50px; }
.schritte li::before { content: counter(schritt); position: absolute; left: 0; top: 2px; width: 34px; height: 34px;
                       border-radius: 50%; background: var(--gold); color: #fff; font-weight: 700;
                       display: flex; align-items: center; justify-content: center; }
.schritte strong { display: block; }
.schritte span { color: #555; }
.fragen details { border-bottom: 1px solid var(--linie); padding: 12px 0; }
.fragen summary { cursor: pointer; font-weight: 600; list-style: none; position: relative; padding-right: 30px; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-size: 22px; color: var(--gold); }
.fragen details[open] summary::after { content: "–"; }
.fragen p { margin: 8px 0 0; color: #444; }
.seiten-bild { margin: 0 0 16px; }
.seiten-bild img { width: 100%; border-radius: 8px; display: block; }
.aufruf { text-align: center; background: #fbf6ea; }
@media (max-width: 900px) {
    .raster-2, .raster-3 { grid-template-columns: 1fr; }
    .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .abschnitt { padding: 20px; }
}
@media (max-width: 560px) {
    .raster-4 { grid-template-columns: 1fr; }
}

/* --- Ungarn-Ratgeber --- */
.rg-notfall { background: #fdecea; border: 2px solid #d9534f; border-radius: 10px; padding: 14px 24px 10px; margin: 0 0 20px; }
.rg-notfall h2 { color: #b52b27; font-size: 20px; margin: 0 0 8px; }
.rg-notfall ul { list-style: none; padding: 0; margin: 0; columns: 2 320px; column-gap: 30px; }
.rg-notfall li { break-inside: avoid; margin: 0 0 8px; line-height: 1.45; }
/*
 * NOTFALLKASTEN: LINKS MÜSSEN SICH OHNE FARBE ERKENNEN LASSEN.
 *
 * Vorher stand hier nur eine Farbe: #b52b27 auf dem hellroten Kasten.
 * Gegen den Hintergrund ist das mit 5,5:1 gut lesbar – aber gegen den
 * FLIESSTEXT daneben (#1a1a1a) sind es nur 2,8:1. Genau das ist die
 * Frage, die ein Leser hat: Was davon kann ich anklicken? Die beiden
 * unterscheiden sich fast nur im Farbton, und in einem ohnehin rot
 * getönten Kasten fällt das kaum auf.
 *
 * Die Farbe dunkler zu machen hilft NICHT, sondern schadet: #8c1d19
 * käme dem schwarzen Fliesstext noch näher (1,9:1). Deshalb die Form
 * statt der Farbe – Unterstrich und etwas mehr Gewicht. Das sieht
 * jeder, auch wer Rot und Schwarz schlecht auseinanderhält, und es ist
 * die Regel, nach der Links im Web seit jeher erkennbar sind.
 *
 * Gerade hier zählt das: Im Notfallkasten stehen Telefonnummern, die
 * man auf dem Handy antippen können muss.
 */
.rg-notfall a { color: #a32620; font-weight: 600;
                text-decoration: underline; text-decoration-thickness: 2px;
                text-underline-offset: 3px; }
.rg-notfall a:hover, .rg-notfall a:focus { color: #5f100d; background: #ffd9d4; }
.rg-aktuell { border-left: 4px solid var(--gold); }
.rg-rubriken { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.rg-rubriken a { display: flex; flex-direction: column; background: var(--sand); border: 1px solid var(--linie);
                 border-radius: 8px; padding: 14px 16px; color: var(--text) !important; }
.rg-rubriken a:hover { border-color: var(--gold); background: #fbf6ea; }
.rg-symbol { font-size: 24px; line-height: 1; margin-bottom: 6px; }
.rg-name { font-weight: 700; }
.rg-anzahl { font-size: 12.5px; color: var(--grau); }
.rg-rubriken-klein { margin: 0 0 20px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.rg-rubriken-klein a { flex-direction: row; gap: 6px; padding: 9px 12px; font-size: 14px; }
.rg-zurueck { margin: 0 0 14px; }
.rg-suche { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.rg-suche input { flex: 1; min-width: 240px; font-size: 16px; padding: 11px 14px; border: 1px solid var(--linie); border-radius: 6px; }
.rg-abc { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; position: sticky; top: 0; background: #fff; padding: 6px 0; z-index: 2; }
.rg-abc a { display: inline-block; min-width: 30px; text-align: center; padding: 4px 6px; border-radius: 4px;
            background: var(--sand); color: var(--gold) !important; font-weight: 700; }
.rg-abc a:hover { background: var(--gold); color: #fff !important; }
.rg-gruppe { scroll-margin-top: 50px; }
.rg-gruppe h3 { font-size: 22px; color: var(--gold); border-bottom: 1px solid var(--linie); padding-bottom: 4px; margin: 22px 0 8px; }
.rg-liste { list-style: none; padding: 0; margin: 0; }
.rg-liste li { padding: 7px 0; border-bottom: 1px dotted #ece7db; line-height: 1.55; scroll-margin-top: 60px; }
.rg-liste li:last-child { border-bottom: 0; }
.rg-liste li:target { background: #fbf6ea; }
.rg-text { color: #444; }
.rg-verweis { color: var(--grau); font-size: 14px; }

/* --- Verweise im Stichwortverzeichnis sichtbar machen ---
 *
 * Gemessen am 24.10.2026, weil die Links „sehr schwer zu lesen“ waren:
 *
 *   Grün #0b4b2b gegen Weiss              10,22:1   -> bestens lesbar
 *   Grün #0b4b2b gegen Fliesstext #444     1,05:1   -> das ist das Problem
 *
 * Lesbar waren die Links also die ganze Zeit. Man hat nur nicht
 * gesehen, DASS es Links sind: Gegen den dunklen Fliesstext daneben
 * ist der Unterschied 1,05:1, praktisch null. Eine dunklere Farbe
 * macht es schlimmer, eine hellere kostet die Lesbarkeit – mit Farbe
 * allein ist das nicht zu lösen.
 *
 * Deshalb die Unterstreichung, und zwar in Gold: 3,21:1 gegen Weiss.
 * Die bisherige Linie unter den fetten Stichworten war #d8c9a6 und
 * kam auf 1,64:1 – sichtbar nur, wenn man sie sucht.
 *
 * Die Absicht stand in dieser Datei schon (Zeile 880 setzt
 * text-decoration-color auf Gold). Sie lief nur ins Leere, weil `a`
 * ganz oben generell `text-decoration: none` bekommt.
 */
.rg-titel a, .rg-text a, .rg-verweis a {
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 2px;
}
.rg-titel a { text-decoration-thickness: 2px; }
.rg-text a, .rg-verweis a { text-decoration-thickness: 1px; }
.rg-titel a:hover, .rg-titel a:focus-visible,
.rg-text a:hover, .rg-text a:focus-visible,
.rg-verweis a:hover, .rg-verweis a:focus-visible {
    color: var(--gruen-hell);
    text-decoration-color: var(--gruen-hell);
    text-decoration-thickness: 2px;
}
.rg-zitate blockquote { margin: 14px 0; padding: 8px 18px; border-left: 3px solid var(--gold); font-style: italic; color: #555; }
.rg-zitate cite { display: block; font-style: normal; font-size: 13px; margin-top: 4px; }

/* --- Zuzugsregelungen --- */
.zuzug-stern { color: #c0392b; font-weight: 700; margin-left: 2px; text-decoration: none; cursor: help; }
a.zuzug-stern:hover { text-decoration: underline; }
.zuzug-fussnote { font-size: 13px; color: var(--grau); margin: -16px 0 22px; }
.zuzug-fussnote a { color: var(--gold); }
.zuzug-hinweis { background: #fdf1ef; border-left: 4px solid #c0392b; border-radius: 6px; padding: 4px 18px; }
.zuzug-hinweis a { color: #a93226; }
.zg-gruppe h3 { font-size: 18px; margin: 20px 0 6px; border-bottom: 1px solid var(--linie); padding-bottom: 4px; }
.zg-marke { font-size: 11px; font-weight: 600; background: var(--gold); color: #fff; padding: 2px 7px; border-radius: 3px; margin-left: 6px; vertical-align: middle; }
.zg-liste { list-style: none; padding: 0; margin: 0; columns: 2 300px; column-gap: 30px; }
.zg-liste li { break-inside: avoid; padding: 5px 0; border-bottom: 1px dotted #ece7db; }
.zg-auflagen { font-size: 13.5px; color: #555; }

/* --- Logo im Kopf --- */
.marke { display: inline-flex; align-items: center; }
.marke-logo { height: 60px; width: auto; display: block; }
.kopf-innen { min-height: 76px; height: auto; padding-top: 8px; padding-bottom: 8px; }
.logo-rechts .marke { order: 3; margin-left: 24px; }
.logo-rechts .kopf-nav { order: 2; margin-left: auto; }
.logo-rechts .menue-knopf { order: 1; }
@media (max-width: 1020px) {
    .marke-logo { height: 46px; }
    .logo-rechts .marke { margin-left: 0; }
    .logo-rechts .kopf-nav { order: 4; }
}

/* --- Startbild: kleinere Fassung fürs Handy --- */
@media (max-width: 760px) {
    .willkommen {
        background: linear-gradient(rgba(25, 22, 17, .5), rgba(25, 22, 17, .5)),
                    url('/assets/img/startbild-klein.jpg') center 40% / cover no-repeat,
                    linear-gradient(135deg, #3b3226, #6f572f);
    }
}

/* --- Forint-Preis unter dem Euro-Preis --- */
.preis-huf { display: block; font-size: 12px; font-weight: 400; color: var(--grau); white-space: nowrap; }
.objekt-preis-gross .preis-huf { font-size: 15px; margin-top: 2px; }

/* --- Anfrageformular --- */
.anfrage-bereich { background: #fbf6ea; border: 1px solid #eadfc6; border-radius: 8px; padding: 18px 22px; scroll-margin-top: 20px; }
.anfrage-formular label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 12px; }
.anfrage-formular input[type=text], .anfrage-formular input[type=tel], .anfrage-formular input[type=email],
.anfrage-formular textarea {
    display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; font-weight: 400;
    border: 1px solid var(--linie); border-radius: 5px; background: #fff; box-sizing: border-box;
}
.anfrage-formular input:focus, .anfrage-formular textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.formular-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.anfrage-formular .haken { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.anfrage-formular .haken input { margin-top: 4px; }
.anfrage-formular .hat-fehler input, .anfrage-formular .hat-fehler textarea { border-color: #c0392b; background: #fdf1ef; }
.feld-fehler { display: block; color: #a93226; font-weight: 400; font-size: 13px; margin-top: 3px; }
.anfrage-formular .knopf, .textseite .anfrage-formular .knopf {
    display: inline-block; background: var(--gold); color: #fff; border: 0; cursor: pointer;
    padding: 12px 24px; border-radius: 5px; font-weight: 600; font-size: 15px;
}
.anfrage-formular .knopf:hover { background: var(--gold-dunkel); }
.anfrage-formular .hinweis { font-size: 13px; color: var(--grau); }
.unsichtbar { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .formular-raster { grid-template-columns: 1fr; } }

/* --- Serviceleistungen --- */
.service-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.service-kachel { display: flex; flex-direction: column; background: var(--sand); border: 1px solid var(--linie);
                  border-radius: 8px; padding: 16px 18px; color: var(--text) !important; }
.service-kachel:hover { border-color: var(--gold); background: #fbf6ea; }
.service-zeichen { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.service-name { font-weight: 700; margin-bottom: 4px; }
.service-kurz { font-size: 14px; color: #555; flex: 1; }
.service-fuss { margin-top: 10px; font-size: 13px; color: var(--gold); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.service-gebiet { background: #fff; border: 1px solid var(--linie); border-radius: 3px; padding: 1px 7px; font-size: 12px; color: var(--grau); }
.service-kachel.in-vorbereitung { opacity: .8; border-style: dashed; }
.service-raster-klein { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.service-raster-klein .service-kachel { flex-direction: row; align-items: center; gap: 10px; padding: 10px 14px; }
.service-raster-klein .service-zeichen { font-size: 20px; margin: 0; }
.service-raster-klein .service-name { font-size: 14px; font-weight: 600; margin: 0; }
.service-kopfzeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 0; }
.service-preis { background: var(--gold); color: #fff; border-radius: 4px; padding: 3px 12px; font-weight: 700; }
.anfrage-formular select { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit;
                           font-weight: 400; border: 1px solid var(--linie); border-radius: 5px; background: #fff; }

/* --- Lageart (Belterület, Zártkert, Külterület) --- */
.lage-kz { display: inline-block; border: 1px solid; border-radius: 3px; background: #fff; cursor: pointer;
           font-size: 11px; font-weight: 700; line-height: 1; padding: 2px 5px; margin-left: 5px; vertical-align: middle; }
.lage-kz:hover { filter: brightness(1.15); }
.lage-name { font-weight: 600; }
.lage-hintergrund { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); display: flex; align-items: center;
                    justify-content: center; z-index: 999; padding: 20px; }
/* Ohne diese Zeile bliebe das Fenster unsichtbar über der Seite liegen und würde sie abdunkeln */
.lage-hintergrund[hidden], .lage-erklaerung[hidden] { display: none !important; }
.lage-erklaerung { background: #fff; border-radius: 10px; padding: 22px 26px; max-width: 580px;
                   box-shadow: 0 12px 44px rgba(0, 0, 0, .3); }
.lage-erklaerung h3 { margin: 0 0 10px; font-size: 19px; }
.lage-erklaerung p { line-height: 1.65; }
.lage-erklaerung .lage-fuss { font-size: 13.5px; color: var(--grau); }

/* Eine Zeile, die sich nicht aufbauen liess – soll auffallen, aber nicht stören */
.zeile-fehler td { background: #fdf1ef; color: #a93226; font-size: 13px; }
.zeile-fehler .fehler-grund { display: block; font-size: 12px; color: #7a5c57; font-family: Consolas, monospace; }

/* --- Angebote auf der Verkäuferseite: grüne Hervorhebung, rote Preise --- */
.angebote-gruen .angebot { border: 1px solid #dfe3e0; border-radius: 12px; padding: 24px 26px 22px; background: #fff; box-shadow: none; }
.angebote-gruen .angebot-hervor { border: 2px solid #2e6b4f; background: #f5f9f6; box-shadow: none; }
.angebote-gruen .angebot-name { font-weight: 400; font-size: 21px; margin: 0 0 12px; color: #2a2a2a; }
.angebote-gruen .angebot-preis,
.angebote-gruen .angebot-zusatz { font-size: 28px; font-weight: 700; color: #c0392b; margin: 0; line-height: 1.35; }
.angebote-gruen .angebot-zusatz { margin-top: 6px; }
.angebote-gruen .angebot-info { font-size: 17px; font-weight: 400; color: #2e6b4f; vertical-align: 4px; margin-left: 6px; cursor: help; }
.angebote-gruen .angebot-fuer { font-size: 15px; font-weight: 700; margin: 18px 0 10px; }
.angebote-gruen .haken-liste { font-size: 15px; }
.angebote-gruen .haken-liste li { padding: 11px 0 11px 34px; margin: 0; border-bottom: 1px solid #ebeeec; }
.angebote-gruen .haken-liste li:last-child { border-bottom: 0; }
.angebote-gruen .haken-liste li::before { top: 9px; left: 4px; color: #2e6b4f; font-size: 19px; font-weight: 400; }
.angebote-gruen .knopf { background: #2e6b4f; }
.angebote-gruen .knopf:hover { background: #245740; }

/* ===========================================================================
   Gestaltung ab 09/2026 – Schritt 1: Farben, Schriften, Karten, Rhythmus
   ---------------------------------------------------------------------------
   Zweite Hauptfarbe ist das Dunkelgrün aus der Firmensignatur. Gold bleibt der
   Akzent und wirkt dadurch wieder. Überschriften in einer Serifenschrift des
   Systems – ohne Google Fonts, damit nichts an Dritte übertragen wird.
   Diese Regeln stehen am Ende der Datei und überschreiben die bisherigen,
   ohne dass eine Seite angefasst werden muss.
   =========================================================================== */
:root {
    --gruen: #0b4b2b;
    --gruen-dunkel: #08381f;
    --gruen-hell: #14653c;
    --gold: #b8872b;
    --gold-dunkel: #8a6d3b;
    --gold-hell: #d9b45f;
    --sand: #f7f4ed;
    --linie: #e6e0d3;
    --text: #23211d;
    --grau: #6f6b63;
    --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
}

body { color: var(--text); }

/* --- Überschriften in Serife, dunkler, mit mehr Luft --- */
h1, h2, h3,
.abschnitt h2, .inhaltsseite h2, .textseite h1, .objekt-kopf h1, .willkommen h1, .seiten-kopf h1 {
    font-family: var(--serif);
    letter-spacing: -0.2px;
}
.seiten-kopf h1, .textseite h1 { color: var(--text); font-weight: 700; }
.abschnitt h2 { font-size: 27px; color: var(--text); margin: 0 0 8px; }
.kachel h3 { font-family: var(--serif); font-size: 18px; }

/* --- Abschnitt: Label in Gold, goldener Strich, mehr Rhythmus --- */
.abschnitt { border-radius: 12px; padding: 30px 34px; margin: 0 0 24px; box-shadow: 0 2px 14px rgba(20, 20, 20, .05); }
.abschnitt > h2:first-child::after,
.abschnitt > .ueberschrift + h2::after {
    content: ""; display: block; width: 64px; height: 4px; background: var(--gold);
    border-radius: 2px; margin: 12px 0 18px;
}
.ueberschrift { font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase;
                color: var(--gold-dunkel); font-weight: 700; margin: 0 0 4px; }

/* --- Karten mit Kopfstreifen statt grauer Kästen --- */
.kachel { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 0; overflow: hidden;
          box-shadow: 0 2px 12px rgba(20, 20, 20, .04); }
.kachel h3 { background: var(--sand); border-bottom: 3px solid var(--gold); margin: 0;
             padding: 15px 18px; display: flex; align-items: center; gap: 12px; }
.kachel .kachel-zeichen { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--gruen);
                          color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.kachel p, .kachel ul { padding: 0 18px; }
.kachel p { margin: 14px 0; line-height: 1.6; }
.kachel .haken-liste { margin: 12px 0 16px; }
.kachel .haken-liste li { border-bottom: 1px solid #f1eee7; padding: 8px 0 8px 26px; margin: 0; }
.kachel .haken-liste li:last-child { border-bottom: 0; }

.haken-liste li::before { color: var(--gruen); font-weight: 700; }

/* --- Knöpfe: Hauptaktion grün, Nebenaktion mit goldener Kante --- */
.knopf, .textseite .knopf, .anfrage .knopf, .leer .knopf,
.inhaltsseite .knopf, .objektseite .knopf {
    background: var(--gruen); color: #fff; border-radius: 8px; font-weight: 700;
    padding: 13px 26px; border: 0; box-shadow: 0 2px 10px rgba(11, 75, 43, .18);
}
.knopf:hover, .textseite .knopf:hover, .anfrage .knopf:hover,
.inhaltsseite .knopf:hover { background: var(--gruen-hell); color: #fff; }
.knopf-hell, .inhaltsseite .knopf-hell { background: #fff; color: var(--gruen) !important;
    border: 2px solid var(--gold); box-shadow: none; }
.knopf-hell:hover, .inhaltsseite .knopf-hell:hover { background: var(--gold); color: #fff !important; }

/* --- Hinweiskasten: sandfarben mit goldener Kante --- */
.hinweis-kasten { background: var(--sand); border-left: 5px solid var(--gold); border-radius: 10px;
                  padding: 18px 24px; margin: 0 0 22px; }
.hinweis-kasten strong { font-family: var(--serif); font-size: 18px; }

/* --- Schritte: nummerierte Kreise in Gold --- */
.schritte { counter-reset: schritt; list-style: none; padding: 0; }
.schritte li { counter-increment: schritt; position: relative; padding: 0 0 18px 54px; line-height: 1.6; }
.schritte li::before { content: counter(schritt); position: absolute; left: 0; top: -2px; width: 36px; height: 36px;
                       border-radius: 50%; background: var(--gold); color: #fff; font-weight: 700;
                       display: flex; align-items: center; justify-content: center; font-family: var(--serif); }
/* Der Knopf bekommt eine eigene Zeile. Ohne das bleibt er in der Zeile
   des Schritttextes stehen und legt sich mit seiner Polsterung darüber –
   genau so war es auf der Video-Begehung zu sehen. */
.schritte .schritt-knopf { display: block; margin-top: 10px; }

/* --- Fragen und Antworten --- */
.fragen > div, .faq { border-bottom: 1px solid var(--linie); padding: 14px 0; }
.fragen strong, .faq summary { font-family: var(--serif); font-size: 17px; color: var(--text); }

/* --- Bühne der Startseite: dunkelgrün statt grau --- */
.willkommen { background-color: var(--gruen-dunkel); }
.willkommen h1 { font-weight: 700; }
.willkommen h1::after { background: var(--gold); width: 90px; height: 4px; border-radius: 2px; }
.willkommen-marke { background: var(--gold); color: #241c08; border-radius: 999px; padding: 6px 16px; }
.knopf-dunkel { background: var(--gold); color: #241c08; border-radius: 8px; font-weight: 700; }
.knopf-dunkel:hover { background: var(--gold-hell); color: #241c08; }

/* --- Zahlenband: die wichtigsten Argumente auf einen Blick --- */
.zahlenband { display: flex; flex-wrap: wrap; background: var(--gruen); border-radius: 12px;
              color: #fff; margin: 0 0 24px; overflow: hidden; }
.zahlenband div { flex: 1 1 170px; padding: 18px 12px; text-align: center; border-right: 1px solid rgba(255, 255, 255, .14); }
.zahlenband div:last-child { border-right: 0; }
.zahlenband b { display: block; font-family: var(--serif); font-size: 30px; color: var(--gold-hell); }
.zahlenband span { font-size: 13.5px; opacity: .9; }

/* --- Band mit Handlungsaufruf --- */
.ruf-band { background: var(--sand); border-left: 5px solid var(--gold); border-radius: 10px; padding: 20px 26px;
            display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 0 0 24px; }
.ruf-band b { font-family: var(--serif); font-size: 20px; }
.ruf-band .ruf-text { flex: 1 1 260px; color: var(--grau); }

/* --- Zitat einer Kundenstimme --- */
.zitat-kasten { background: var(--gruen); color: #fff; border-radius: 12px; padding: 26px 32px;
                font-family: var(--serif); font-size: 19px; line-height: 1.55; margin: 0 0 24px; }
.zitat-kasten small { display: block; margin-top: 12px; font-family: inherit; font-size: 13.5px; opacity: .85; }

/* --- Links im Fließtext: grün statt gold, besser lesbar --- */
.inhaltsseite a:not(.knopf):not(.knopf-hell):not(.kachel-zeichen) { color: var(--gruen); text-decoration-color: var(--gold); }

@media (max-width: 700px) {
    .abschnitt { padding: 22px 20px; }
    .abschnitt h2 { font-size: 23px; }
}

/* --- Bildbühne oben auf den Seiten (Schritt 2) --- */
.buehne { position: relative; min-height: 340px; display: flex; align-items: center;
          background-color: var(--gruen-dunkel); background-size: cover; background-position: center;
          color: #fff; margin: 0 0 26px; }
.buehne-innen { padding: 46px 0; max-width: 760px; }
.buehne-plakette { display: inline-block; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4);
                   border-radius: 999px; padding: 6px 15px; font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; }
.buehne h1 { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 46px); line-height: 1.12; margin: 14px 0 10px;
             color: #fff; font-weight: 700; }
.buehne h1 em { font-style: normal; color: var(--gold-hell); display: block; }
.buehne-text { font-size: clamp(15px, 1.7vw, 18px); line-height: 1.55; opacity: .94; margin: 0 0 22px; max-width: 600px; }
.buehne-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.buehne-knopf { display: inline-block; background: var(--gold); color: #241c08 !important; font-weight: 700;
                padding: 13px 24px; border-radius: 8px; text-decoration: none !important; }
.buehne-knopf:hover { background: var(--gold-hell); }
.buehne-knopf-rand { background: transparent; border: 2px solid rgba(255, 255, 255, .75); color: #fff !important; }
.buehne-knopf-rand:hover { background: rgba(255, 255, 255, .14); }
.buehne-nachweis { position: absolute; right: 14px; bottom: 10px; font-size: 11.5px;
                   color: rgba(255, 255, 255, .78) !important; text-decoration: none !important; }
.buehne-nachweis:hover { color: #fff !important; text-decoration: underline !important; }

/* --- Schaufenster: drei Objekte mit Bild --- */
.schaufenster { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.schaufenster-objekt { display: block; border: 1px solid var(--linie); border-radius: 12px; overflow: hidden;
                       background: #fff; text-decoration: none !important; color: var(--text) !important;
                       box-shadow: 0 2px 12px rgba(20, 20, 20, .05); }
.schaufenster-objekt:hover { box-shadow: 0 6px 20px rgba(20, 20, 20, .12); transform: translateY(-2px); transition: .15s; }
.schaufenster-bild { display: block; position: relative; height: 165px; background: #e9e4d8; background-size: cover; background-position: center; }
.schaufenster-preis { position: absolute; left: 0; bottom: 0; background: var(--gruen); color: #fff;
                      font-weight: 700; padding: 6px 12px; font-size: 15px; }
.schaufenster-stern { position: absolute; right: 8px; top: 8px; background: var(--gold); color: #241c08;
                      font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.schaufenster-text { display: block; padding: 12px 14px; }
.schaufenster-text b { display: block; font-size: 15.5px; margin-bottom: 3px; line-height: 1.3; }
.schaufenster-text span { color: var(--grau); font-size: 13.5px; }

@media (max-width: 700px) {
    .buehne { min-height: 260px; }
    .buehne-innen { padding: 32px 0; }
}

/* Startseite: Foto aus dem Schaufenster hinter der Begrüßung */
.willkommen { background-size: cover; background-position: center; }
.willkommen-innen { position: relative; }

/* --- Kundenstimmen und Bewertungsplakette --- */
.stimmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.stimme { margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 20px 22px;
          box-shadow: 0 2px 12px rgba(20, 20, 20, .05); display: flex; flex-direction: column; }
.stimme-sterne { color: var(--gold); font-size: 17px; letter-spacing: 2px; }
.stimme blockquote { margin: 10px 0 14px; font-family: var(--serif); font-size: 16.5px; line-height: 1.55; flex: 1; }
.stimme blockquote::before { content: "„"; }
.stimme blockquote::after { content: "“"; }
.stimme figcaption { font-size: 13.5px; color: var(--grau); border-top: 1px solid #f1eee7; padding-top: 10px; }
.stimme-quelle { background: var(--sand); border-radius: 999px; padding: 2px 8px; font-size: 12px; margin-left: 4px; }
.stimmen-fuss { margin: 18px 0 0; }
.bw-plakette { display: inline-flex; align-items: center; gap: 10px; background: var(--gruen); color: #fff !important;
               border-radius: 999px; padding: 9px 18px; text-decoration: none !important; }
.bw-sterne { color: var(--gold-hell); letter-spacing: 1px; }
.bw-zahl { font-family: var(--serif); font-size: 21px; font-weight: 700; }
.bw-text { font-size: 13.5px; opacity: .92; }
.bw-plakette:hover { background: var(--gruen-hell); }

/* --- Bühne: weniger Grün, dafür Schatten hinter der Schrift (09/2026) --- */
/* Der grüne Schleier liegt jetzt dünner über dem Foto (siehe buehne.php).
   Damit die Schrift trotzdem sauber steht, bekommt sie einen weichen
   Schatten statt einer deckenden Fläche darunter. */
.buehne h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .38); }
.buehne h1 em { text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .45); }
.buehne-text { opacity: 1; text-shadow: 0 1px 12px rgba(0, 0, 0, .6), 0 0 4px rgba(0, 0, 0, .5),
                                        0 1px 2px rgba(0, 0, 0, .4); }
.buehne-plakette { background: rgba(8, 40, 24, .42); border-color: rgba(255, 255, 255, .5);
                   backdrop-filter: blur(3px); text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.buehne-knopf-rand { background: rgba(8, 40, 24, .3); backdrop-filter: blur(2px);
                     text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.buehne-nachweis { text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }

/* --- Drei Suchbereiche: Schalter mit Anzahl und Einordnung (09/2026) --- */
.art-knopf { display: inline-flex; align-items: baseline; gap: 6px; }
.art-anzahl { font-size: 11.5px; opacity: .7; font-variant-numeric: tabular-nums; }
.art-knopf.aktiv .art-anzahl { opacity: .85; }

.bereich-hinweis {
    padding: 0 16px 12px;
    border-bottom: 1px solid var(--linie);
    font-size: 14px;
    line-height: 1.5;
    color: var(--grau);
}
.bereich-hinweis p { margin: 0 0 6px; }
.bereich-hinweis strong { color: var(--gruen); font-family: var(--serif); font-size: 15px; }
.bereich-hinweis details { font-size: 13.5px; }
.bereich-hinweis summary {
    cursor: pointer;
    color: var(--gruen);
    display: inline-block;
    padding: 2px 0;
}
.bereich-hinweis summary:hover { text-decoration: underline; }
.bereich-hinweis details p { margin: 6px 0 0; max-width: 70ch; }

@media (max-width: 700px) {
    .bereich-hinweis { padding: 0 16px 10px; font-size: 13.5px; }
}

/* Im Bereich Grundstücke fallen die Spalten weg, die dort immer leer sind:
   Rang (es gibt keine Bewertung), Preis je m² Wohnfläche, Wohnfläche, Zimmer. */
.objekttabelle.nur-grundstuecke .sp-rang,
.objekttabelle.nur-grundstuecke .sp-qm,
.objekttabelle.nur-grundstuecke .sp-wohn,
.objekttabelle.nur-grundstuecke .sp-zi { display: none; }

/* --- Maklerseite: die drei Provisionsanteile als Band ---------------------
   44 / 44 / 12 nebeneinander. Auf dem Telefon untereinander, damit die
   Zahlen gross bleiben und nicht zu dritt in eine Zeile gequetscht werden. */
.anteile {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0 22px;
}
.anteil {
    background: var(--sand);
    border: 1px solid var(--linie);
    border-radius: 10px;
    padding: 18px 18px 16px;
    text-align: center;
}
.anteil b {
    display: block;
    font-family: var(--serif);
    font-size: 40px;
    line-height: 1.1;
    color: var(--gold);
}
.anteil strong { display: block; margin-top: 6px; font-size: 16px; }
.anteil span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--grau); line-height: 1.45; }

/* Der dritte Kasten ist unser eigener Anteil – gedeckt, nicht in Gold,
   damit die beiden Maklerdrittel optisch vorne stehen. */
.anteil:last-child { background: #fff; }
.anteil:last-child b { color: var(--gruen); }

.abschnitt h3 { font-size: 18px; margin: 26px 0 8px; }
.hinweis-klein { font-size: 13.5px; color: var(--grau); margin: 10px 0 0; }

@media (max-width: 700px) {
    .anteile { grid-template-columns: 1fr; gap: 12px; }
    .anteil { padding: 14px 16px; }
    .anteil b { font-size: 34px; }
}

/* --- Sprachumschaltung im Kopf ------------------------------------------
   Die vier Kürzel stehen als kleine Gruppe am Ende der Navigation, leicht
   abgesetzt durch einen senkrechten Strich. Bewusst nur Kürzel und keine
   Fähnchen: eine Flagge steht für ein Land, nicht für eine Sprache – und
   Deutsch wird in drei Ländern gesprochen, aus denen unsere Kunden kommen. */
.sprachwahl {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    padding-left: 14px;
    border-left: 1px solid var(--linie);
}
.kopf-nav .sprachwahl a {
    margin: 0;
    padding: 3px 7px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--grau);
    border-bottom: 0;
    border-radius: 4px;
}
.kopf-nav .sprachwahl a:hover { color: var(--gold); background: var(--sand); }
.kopf-nav .sprachwahl a.aktiv {
    color: #fff;
    background: var(--gold);
    border-bottom: 0;
}

@media (max-width: 900px) {
    /* Im aufgeklappten Menü sitzt die Umschaltung als eigene Zeile unten,
       nicht als weiterer Menüpunkt – sie ist etwas anderes als eine Seite. */
    .sprachwahl {
        display: flex;
        justify-content: flex-start;
        gap: 6px;
        margin: 0;
        padding: 12px 2px 4px;
        border-left: 0;
    }
    .kopf-nav .sprachwahl a {
        padding: 8px 14px;
        font-size: 14px;
        border: 1px solid var(--linie);
    }
    .kopf-nav .sprachwahl a.aktiv { border-color: var(--gold); }
}

/* Hinweis auf der Objektseite, wenn die Beschreibung noch nicht übersetzt ist */
.nur-deutsch {
    font-size: 13px;
    color: var(--grau);
    font-style: italic;
    margin: 0 0 10px;
}
/* Wechselt man von hier aus die Sprache und es gibt diese Seite dort noch
   nicht, führt der Verweis auf die Startseite. Er wird dann etwas blasser –
   sichtbar genug zum Anklicken, aber erkennbar anders als ein echter
   Wechsel auf dieselbe Seite. */
.kopf-nav .sprachwahl a.nur-start { opacity: .6; }
.kopf-nav .sprachwahl a.nur-start:hover { opacity: 1; }

/* --- Kacheln mit Bild am Fuss ---------------------------------------------
   Das Bild sitzt unten und geht bis an die Kante. Damit die Bilder einer
   Reihe auf gleicher Höhe stehen, wird die Kachel zur Spalte und der Text
   darüber bekommt den freien Platz – sonst rutscht bei kurzem Text das Bild
   nach oben und die Reihe sieht schief aus.
   Voraussetzung: alle Bilder im selben Seitenverhältnis (760 × 420). */
.kachel-mit-bild { display: flex; flex-direction: column; }
.kachel-mit-bild p { flex: 1; }
.kachel-bild {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 14px;
    border-top: 1px solid var(--linie);
}

/* --- Hinweis über der Trefferliste, nur auf schmalen Bildschirmen ---------
   Die Objekttabelle hat dreizehn Spalten. Am PC passen sie nebeneinander,
   auf dem Telefon muss man sie seitlich schieben (.tabelle-rahmen hat dafür
   overflow-x: auto). Wer das nicht weiss, hält die Liste für abgeschnitten.
   Am grossen Bildschirm bleibt der Hinweis weg – dort wäre er überflüssig. */
.listen-tipp { display: none; }
@media (max-width: 900px) {
    .listen-tipp {
        display: block;
        width: 100%;
        font-size: 13px;
        line-height: 1.45;
        color: var(--grau);
        background: #fbf6ea;
        border-left: 3px solid var(--gold);
        border-radius: 4px;
        padding: 7px 10px;
        margin-top: 2px;
    }
}

/* Umkreissuche: das Auswahlfeld steht direkt hinter dem Ortsfeld und soll
   als Zusatz dazu lesbar sein, nicht als eigener Filter. */
.filter-gruppe select.umkreis { margin-top: 6px; }
.umkreis-fehl {
    display: block; margin-top: 4px;
    font-size: 13.5px; color: #b26a00;
}

/* ============================================================== Drucken ===
 *
 * Das Exposé auf Papier oder als PDF. Es gibt keinen Serverdienst dafür –
 * gedruckt wird über den Browser, und dessen Dialog bietet überall „Als PDF
 * speichern“. Die Arbeit liegt deshalb hier: aus einer Bildschirmseite ein
 * Blatt machen, das man weiterreichen kann.
 *
 * Zwei Zustände, die das JavaScript an <body> setzt:
 *   .druck-mit   – alle Bilder als Anhang hinten
 *   .druck-ohne  – nur das Titelbild klein oben
 * Ohne beide Klassen (jemand drückt Strg+P) gilt „ohne Bilder“: das ist der
 * sparsamere Ausdruck, und niemand verschwendet ungewollt dreissig Seiten.
 */

/* Auf dem Bildschirm haben diese Teile nichts verloren. */
.druck-kopf,
.druck-titelbild,
.druck-bilder { display: none; }

.druck-knoepfe {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 14px 0 4px;
}
.druck-frage { font-size: 14px; color: var(--grau); }
.knopf-schmal {
    font: inherit; font-size: 14px;
    border: 1px solid #cfd8dc; background: #fff; color: #2a2a2a;
    border-radius: 4px; padding: 6px 13px; cursor: pointer;
}
.knopf-schmal:hover { border-color: #9fb0b6; background: #f6f8f9; }
.knopf-schmal:disabled { opacity: .6; cursor: progress; }

/* ─────────────────────────────────────────────────────────────────
   Ratgeber-Artikel (/lp/…)

   Eine Lesespalte, keine Layoutseite: Die Artikel sind lang, und was
   zaehlt, ist dass man sie zu Ende liest. Deshalb schmaler als der
   uebrige Inhalt und mit groesserer Zeile.
   ───────────────────────────────────────────────────────────────── */
.ra-artikel { max-width: 48rem; }
.ra-weg { font-size: 14px; color: var(--grau); margin: 0 0 14px; }
.ra-weg a { color: var(--gold); }
.ra-weg a:hover { text-decoration: underline; }
.ra-weg span { margin: 0 6px; }

/*
 * GÜRTEL UND HOSENTRÄGER (25.10.2026)
 *
 * Die Höhe wird jetzt am RAHMEN begrenzt, nicht nur am Bild darin.
 * Grund: Zweimal hintereinander hat die Begrenzung am <img> nichts
 * bewirkt, obwohl die Regel nachweislich im Stylesheet stand. Woran
 * es lag, war von aussen nicht zu sehen.
 *
 * `overflow: hidden` am <figure> schneidet alles ab, was über 420
 * Pixel hinausgeht – unabhängig davon, welche Regeln das Bild selbst
 * erwischen. Das ist weniger elegant als eine saubere Bildregel, aber
 * es hält.
 */
.ra-bild {
    margin: 0 0 24px;
    max-height: 420px;
    overflow: hidden;
    border-radius: 8px;
}
@media (max-width: 700px) {
    .ra-bild { max-height: 240px; }
}
/*
 * HÖHE BEGRENZEN, SONST WIRD DAS AUFMACHERBILD TURMHOCH
 *
 * Vorher stand hier nur `width:100%; height:auto`. Bei einem
 * hochformatigen oder quadratischen Quellbild füllt das die ganze
 * Spaltenbreite UND entsprechend viel Höhe – auf einem 1300 Pixel
 * breiten Bildschirm wurde daraus ein Bild von über 1000 Pixeln Höhe,
 * das die Seite allein ausfüllt. Dazu kommt, dass die aus der alten
 * .com übernommenen Bilder klein sind und beim Hochskalieren
 * verwaschen aussehen.
 *
 * `max-height` deckelt die Höhe, `object-fit: cover` schneidet statt
 * zu verzerren. Weniger Hochskalierung heisst zugleich schärfer.
 */
/*
 * NACHTRAG 25.10.2026: feste Höhe statt `height: auto`.
 *
 * Mit `height: auto` rechnet der Browser die Höhe aus der ECHTEN
 * Bildgrösse und `max-height` greift erst danach. Das funktioniert –
 * hängt aber davon ab, dass das Bild seine Masse überhaupt meldet.
 * Bei einem hochformatigen Bild aus der alten .com war das Ergebnis
 * weiter ein Turm.
 *
 * Jetzt bestimmt das Seitenverhältnis die Höhe, und die echte
 * Bildgrösse spielt keine Rolle mehr: 16:9 der Spaltenbreite,
 * höchstens 420 Pixel. `object-fit: cover` schneidet mittig zu.
 */
.ra-bild img {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 420px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    display: block;
}
@media (max-width: 700px) {
    .ra-bild img { max-height: 240px; }
}
.ra-bild figcaption { font-size: 13.5px; color: var(--grau); margin-top: 6px; }

.ra-text { font-size: 17px; line-height: 1.7; }
.ra-text h2 { font-size: 24px; margin: 34px 0 10px; }
.ra-text h3 { font-size: 19px; margin: 26px 0 8px; }
.ra-text p { margin: 0 0 16px; }
.ra-text ul, .ra-text ol { margin: 0 0 16px; padding-left: 24px; }
.ra-text li { margin: 4px 0; }
.ra-text a { color: var(--gold); text-decoration: underline; }
/*
 * Bilder IM FLIESSTEXT. Hier fehlte bisher die Höhenbegrenzung – nur die
 * Breite war gedeckelt. Ein hochformatiges Foto wurde dadurch beliebig
 * hoch und schob den Text aus dem Bild. `object-fit: cover` schneidet
 * mittig zu, statt zu verzerren.
 */
/*
 * Kein `object-fit: cover` hier, anders als beim Titelbild: Im Fliesstext
 * stehen auch Grafiken mit Schrift, und die darf nicht angeschnitten
 * werden. Mit max-width UND max-height passt sich das Bild ein, behaelt
 * sein Seitenverhaeltnis und wird nie hoeher als die Grenze.
 */
.ra-text img {
    max-width: 100%;
    max-height: 420px;
    width: auto;
    height: auto;
    border-radius: 6px;
}
.ra-text figure { margin: 18px 0; text-align: center; }
.ra-text figcaption { font-size: 13.5px; color: var(--grau); margin-top: 6px; }
.ra-text table { border-collapse: collapse; width: 100%; margin: 0 0 18px; font-size: 15.5px; }
.ra-text th, .ra-text td { border: 1px solid var(--linie); padding: 7px 10px; text-align: left; }
.ra-text th { background: var(--sand); }
.ra-text blockquote {
    margin: 0 0 18px; padding: 10px 16px;
    border-left: 3px solid var(--gold); background: var(--sand);
}

/* Die Fragen: aufgeklappt waere die Seite doppelt so lang, zugeklappt
   sieht man auf einen Blick, ob die eigene Frage dabei ist. Fuer Google
   spielt das keine Rolle – der Text steht im Quelltext und zusaetzlich
   als FAQPage ausgezeichnet. */
.ra-faq { margin: 38px 0 0; }
.ra-faq h2 { font-size: 24px; margin: 0 0 12px; }
.ra-faq details {
    border: 1px solid var(--linie); border-radius: 8px;
    background: #fff; margin-bottom: 8px;
}
/* Nebeneinander statt float: Bei einer Frage, die auf dem Handy über zwei
   Zeilen läuft, rutscht ein gefloatetes Zeichen unter die letzte Zeile und
   steht dann auf dem Rahmen. Mit flex bleibt das Plus oben neben der Frage,
   egal wie lang sie ist. */
.ra-faq summary {
    cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none;
    display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
}
.ra-faq summary::-webkit-details-marker { display: none; }
.ra-faq summary::after {
    content: "+"; color: var(--gold); font-weight: 700;
    flex: none; line-height: inherit;
}
.ra-faq details[open] summary::after { content: "\2212"; }
.ra-faq details > div { padding: 0 16px 14px; }

/* Die Artikelliste in einer Rubrik des Ratgebers */
.rg-artikel { list-style: none; margin: 0; padding: 0; }
.rg-artikel li { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.rg-artikel li:last-child { border-bottom: 0; }
.rg-artikel a { color: var(--gold); font-weight: 600; text-decoration: underline; }
.rg-artikel-text { display: block; font-size: 14.5px; color: var(--grau); margin-top: 2px; }

.ra-stand { margin: 28px 0 0; font-size: 14px; color: var(--grau); }

.ra-weiter {
    margin: 32px 0 0; padding: 18px 20px;
    background: var(--sand); border: 1px solid var(--linie); border-radius: 8px;
}
.ra-weiter p { margin: 0 0 10px; }
.ra-weiter p:last-child { margin: 0; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ra-weiter a:not(.knopf) { color: var(--gold); text-decoration: underline; }

@media (max-width: 640px) {
    .ra-text { font-size: 16px; }
    .ra-text h2 { font-size: 21px; }
    /* Auf dem Telefon darf ein Bild nicht den halben Bildschirm fressen. */
    .ra-text img { max-height: 260px; }
}

@media print {
    /* Ränder und Grundschrift: enger und kleiner als am Bildschirm, sonst
       wird aus einem Exposé ein Buch.

       Der obere Rand ist mit Absicht breit: Dort steht die Kopfzeile, und
       zwar auf JEDER Seite. Sie liegt nicht im Textfluss, sondern fest im
       Seitenrand – deshalb muss der Rand ihr den Platz freihalten. */
    @page { size: A4 portrait; margin: 32mm 13mm 16mm; }

    html, body {
        background: #fff !important;
        color: #000;
        font-size: 10.5pt;
        line-height: 1.45;
    }
    .innen { max-width: none; padding: 0; margin: 0; }

    /* Was auf Papier keinen Sinn ergibt. Ein Menü kann man nicht anklicken,
       ein Anfrageformular nicht ausfüllen, und der eigene Knopf soll sich
       nicht selbst mitdrucken. */
    .kopf, .fuss, .zurueck, .druck-knoepfe,
    .galerie-pfeil, .galerie-leiste, .galerie-knopf, .galerie-streifen,
    .galerie-lupe, .lupe,
    .anfrage-bereich, .kasten.anfrage,
    .lage-hintergrund, .lage-erklaerung,
    .menue-knopf, .sprachwahl { display: none !important; }

    /* Der Druckkopf: Absender links, Objektnummer rechts. Er steht auf
       JEDER Seite, denn ein Exposé wird weitergereicht, geheftet und
       auseinandergerissen – und Seite 4 soll immer noch sagen, zu welchem
       Objekt sie gehört und von wem sie kommt.

       Dafür sorgt position: fixed. Im Druck bezieht sich das nicht auf das
       Fenster, sondern auf die Seite: Der Browser wiederholt den Kasten auf
       jedem Blatt. Der negative Wert bei top schiebt ihn hinauf in den
       oberen Seitenrand, den @page oben dafür freigehalten hat.

       Sollte ein Browser den Kasten im Rand abschneiden, fehlt er ab Seite
       zwei – überschreiben kann er den Text nicht, weil der Platz ohnehin
       reserviert ist. Das ist der Grund für diesen Aufbau: Er kann nur
       weniger zeigen, nie etwas kaputtmachen. */
    .druck-kopf {
        display: flex; align-items: flex-start; gap: 14px;
        position: fixed; top: -20mm; left: 0; right: 0;
        height: 16mm; box-sizing: border-box;
        border-bottom: 1.5pt solid #b08d57;
        padding-bottom: 4pt; margin: 0;
        background: #fff;
    }
    .druck-logo { width: 21mm; height: auto; }
    .druck-absender { font-size: 8pt; line-height: 1.3; }
    .druck-nummer { margin-left: auto; text-align: right; font-size: 8pt; line-height: 1.3; }

    /* Titel und Preis nebeneinander wie am Bildschirm, nur ruhiger. */
    .objekt-kopf { display: flex; justify-content: space-between; gap: 10mm; }
    .objekt-kopf h1 { font-size: 16pt; margin: 0 0 2pt; }
    .objekt-lage { font-size: 9pt; margin: 0; }
    .objekt-preis-gross { font-size: 15pt; font-weight: 700; text-align: right; white-space: nowrap; }
    .objekt-preis-gross .preis-huf,
    .objekt-preis-gross .qm { display: block; font-size: 8.5pt; font-weight: 400; }

    /* Zwei Spalten bleiben zwei Spalten – der rechte Kasten mit Eckdaten
       und Provision ist der meistgelesene Teil des Exposés. */
    .objekt-spalten { display: grid; grid-template-columns: 1fr 62mm; gap: 8mm; }
    .objekt-haupt section { margin: 0 0 6pt; }
    .objekt-haupt h2, .objekt-seite h2 {
        font-size: 11pt; margin: 0 0 3pt;
        border-bottom: .5pt solid #ccc; padding-bottom: 2pt;
    }
    .kasten { border: .5pt solid #ccc; border-radius: 0; padding: 5pt 7pt; margin-bottom: 6pt; background: #fff; }
    .daten th, .daten td, .entfernungstabelle td { padding: 1.5pt 0; font-size: 9pt; }

    /* Der Provisionstext steht im Ausdruck AUSGEKLAPPT. Am Bildschirm ist
       das Zuklappen eine Höflichkeit, auf Papier wäre es das Verstecken
       einer Angabe, auf die es ankommt.

       Aufgeklappt wird per JavaScript, nicht hier: Wie ein geschlossenes
       <details> seinen Inhalt verbirgt, haben die Browser mehrfach
       geändert – ein CSS-Kniff, der heute wirkt, kann morgen still
       aufhören. Hier bleibt nur, den Aufklapp-Pfeil wegzunehmen. */
    details > summary { display: none; }

    /* Keine Überschrift allein am Seitenfuss, keine Tabelle mitten zerteilt. */
    h1, h2, h3 { break-after: avoid; }
    section, .kasten, tr { break-inside: avoid; }
    a { color: #000; text-decoration: none; }

    /* --- Bilder: der Unterschied zwischen den beiden Knöpfen ---------- */

    /* Grundstellung und „ohne Bilder“: die grosse Galerie fällt weg, das
       Titelbild steht klein oben. */
    .galerie { display: none !important; }
    .druck-titelbild {
        display: block;
        width: 70mm; height: auto;
        margin: 0 0 6pt;
        border: .5pt solid #ddd;
        break-inside: avoid;
    }

    /* „mit Bildern“: Titelbild oben trotzdem, alle Bilder als Anhang – drei
       je Reihe, damit ein Dutzend Bilder auf zwei Seiten passt. */
    body.druck-mit .druck-bilder {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4mm;
        margin-top: 8pt;
        break-before: page;
    }
    body.druck-mit .druck-bilder img {
        width: 100%; height: 42mm; object-fit: cover;
        border: .5pt solid #ddd;
        break-inside: avoid;
    }
}

/* =========================================================================
   „Neu auf unserer Website“
   =========================================================================
   Ein Kasten im Fluss der Seite, kein Fenster darüber. Überlagern hiesse:
   Der Besucher muss erst etwas wegklicken, bevor er sieht, weswegen er
   gekommen ist – und genau das tun die meisten, ohne zu lesen.

   Auffällig wird er durch die Sandfarbe und den goldenen Rand links,
   nicht durch seine Lage. */
.neu-kasten {
    background: var(--sand); border: 1px solid var(--linie);
    border-left: 5px solid var(--gold); border-radius: 10px;
    padding: 18px 22px; margin: 0 0 26px;
}
.neu-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.neu-marke {
    background: var(--gold); color: #241c08; border-radius: 999px;
    padding: 3px 12px; margin: 0; font-size: 12.5px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
}
.neu-kasten h2 { margin: 0; font-size: 20px; flex: 1 1 auto; }
.neu-kasten h2::after { content: none; }   /* die goldene Linie der Überschriften hier nicht */

/* Der Schliessen-Knopf: mit Wort, nicht nur ×, und gross genug für einen
   Daumen. Wer eine Meldung loswerden will, soll nicht zielen müssen. */
.neu-zu {
    flex: 0 0 auto; background: none; border: 1px solid var(--linie);
    border-radius: 999px; padding: 5px 14px; cursor: pointer;
    font-size: 14px; color: var(--grau); line-height: 1.2;
}
.neu-zu:hover { background: #fff; color: var(--text); border-color: var(--gold); }
.neu-zu span { font-size: 17px; vertical-align: -1px; }

.neu-text { margin: 10px 0 8px; color: var(--grau); }
/* Zwei Spalten, solange Platz ist – acht Punkte untereinander wären eine
   Wand. Auf dem Telefon fällt es von selbst auf eine Spalte zurück. */
.neu-liste {
    margin: 0; padding: 0 0 0 20px;
    columns: 2; column-gap: 34px;
}
.neu-liste li { margin: 0 0 7px; break-inside: avoid; }

/* Drei Punkte führen weiter. Anklickbar ist der ganze Punkt – auf dem
   Telefon trifft man ein einzelnes Wort kaum –, unterstrichen aber nur
   das fette Stichwort: Eine dreizeilig umbrochene Unterstreichung sieht
   auf dem Telefon aus wie durchgestrichen. Den Hinweis, dass es
   weitergeht, gibt der Pfeil am Ende. */
.neu-liste a { color: inherit; text-decoration: none; }
.neu-liste a strong { border-bottom: 1px solid var(--gold); }
.neu-liste a::after { content: ' →'; color: var(--gold); white-space: nowrap; }
.neu-liste a:hover strong { color: var(--gold-dunkel); }
.neu-fuss { margin: 12px 0 0; font-size: 13.5px; color: var(--grau); }

@media (max-width: 760px) {
    .neu-kasten { padding: 15px 16px; }
    .neu-liste { columns: 1; }
    .neu-kasten h2 { font-size: 18px; }
}

/* =========================================================================
   Aus der Suche ein Gesuch
   =========================================================================
   Steht unter der Trefferliste. Bei null Treffern ist es die Hauptsache –
   dann bekommt der Kasten die Sandfarbe und den goldenen Rand. Sonst
   bleibt er ein ruhiger Hinweis, der die Liste nicht überstrahlt: Wer
   gerade zwölf Häuser vor sich hat, soll die ansehen und nicht ein
   Formular. */
.gesuch-kasten {
    margin: 30px 0 10px; padding: 20px 24px;
    border: 1px solid var(--linie); border-radius: 10px;
}
.gesuch-kasten h2 { margin: 0 0 6px; font-size: 19px; }
.gesuch-kasten h2::after { content: none; }
.gesuch-kasten p { margin: 0 0 10px; color: var(--grau); }

.gesuch-leer {
    background: var(--sand); border-left: 5px solid var(--gold);
    padding: 24px 26px;
}
.gesuch-leer h2 { font-size: 22px; }
.gesuch-leer p { color: var(--text); }

/* Die Kriterien als Beleg: „das haben wir verstanden“. Klein, aber da –
   wer sie liest, vertraut dem Knopf eher. */
.gesuch-kriterien { font-size: 14px; }
.gesuch-kriterien-kopf { display: block; font-weight: 600; color: var(--text); }

.gesuch-knopf {
    display: inline-block; background: var(--gold); color: #fff;
    padding: 11px 24px; border-radius: 6px; text-decoration: none;
    font-weight: 600;
}
.gesuch-knopf:hover { background: var(--gold-dunkel); color: #fff; }

/* Auf der Käuferseite, über dem vorbelegten Formular. */
.gesuch-uebernommen {
    background: var(--sand); border-left: 4px solid var(--gold);
    padding: 10px 14px; border-radius: 0 6px 6px 0; margin: 0 0 16px;
}

@media (max-width: 760px) {
    .gesuch-kasten { padding: 16px 16px; }
    .gesuch-knopf { display: block; text-align: center; }
}

/* ===========================================================================
   Faktenband und Zwischenüberschriften auf den Serviceseiten
   ===========================================================================

   Beides gegen dasselbe Problem: Zwei der Leistungen brauchen mehr
   Erklärung als „30 € und wir fordern den Auszug an“, und sechs Absätze
   am Stück liest niemand. Das Band nennt vorweg Preis und Nutzen, die
   Überschriften zerlegen den Rest in Häppchen.

   Das Band ist eine Liste, keine Tabelle: Es sind drei gleichrangige
   Angaben, keine Zeilen und Spalten. Auf dem Telefon stehen sie
   untereinander, statt auf ein Drittel Breite gequetscht zu werden.
   =========================================================================== */

.fakten-band {
    list-style: none; margin: 0 0 26px; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--linie); border: 1px solid var(--linie); border-radius: 10px;
    overflow: hidden;
}
.fakten-band li {
    background: #fff; padding: 16px 18px;
    display: flex; flex-direction: column; gap: 3px;
}
.fakten-band strong {
    font-family: var(--serif, inherit); font-size: 23px; line-height: 1.15; color: var(--gruen, #0b4b2b);
}
.fakten-band span { font-size: 14px; color: var(--grau); line-height: 1.35; }

@media (max-width: 640px) {
    /* Untereinander statt nebeneinander: Eine Zeile „Begriff – Erklärung“
       sieht bei „89 €“ gut aus und bricht bei „Sie erfahren es“ hässlich
       um. Gestapelt stimmt beides. */
    .fakten-band { grid-template-columns: 1fr; }
    .fakten-band li { padding: 13px 16px; }
    .fakten-band strong { font-size: 20px; }
}

/* Zwischenüberschrift im Beschreibungstext. Kleiner als die <h2> der
   Abschnitte – sie gliedert innerhalb eines Abschnitts, sie eröffnet
   keinen neuen. */
.abschnitt h3 { font-size: 19px; margin: 28px 0 8px; }
.abschnitt h3:first-of-type { margin-top: 18px; }

/* Medienbild in einer Angebotskarte. Die Haken-Liste darüber hat flex: 1 –
   dadurch sitzt das Bild unten, direkt über dem Knopf, und die drei Karten
   bleiben gleich hoch. */
.angebot-bild { margin: 18px 0 0; }
.angebot-bild img {
    display: block; width: 100%; height: auto;
    border-radius: 8px; border: 1px solid var(--linie);
}
.angebot-bild figcaption { margin-top: 8px; font-size: 13px; color: var(--grau); }