/* =====================================================================
   DOMUS PREMIUM — MOBIL-EBENE  (briefing-mobil-01)
   Reine Layout-Isolation unterhalb 1024px.

   ★ Steuerung ueber die BREITE (Media-Query). `pointer: coarse` wird NUR
     additiv genutzt (groessere Tippflaechen bei Finger-Geraeten), NICHT als
     An/Aus fuer die Mobil-Darstellung. Grund: manche Umgebungen (In-App-
     Browser, Vorschau-Tools, Geraete) melden `pointer` nicht zuverlaessig.

   Keine serverseitige Geraeteerkennung. Es werden KEINE Farben/Design-Tokens,
   Schriften oder Font-Awesome neu definiert — alle Werte kommen aus den
   bestehenden WP-Preset-/Theme-Variablen. Isoliert wird nur das LAYOUT.
   ===================================================================== */

/* Gemeinsame Masse. Die untere Aktionsleiste kommt erst in briefing-02;
   ihre Hoehe ist hier reserviert, damit der Mobil-Footer nicht dahinter
   verschwindet. Der Kopf ist zweizeilig (Symbolzeile + Logo darunter). */
:root {
    --domus-mhead-h: 120px;     /* Hoehe der zweizeiligen Mobil-Kopfleiste */
    --domus-mobilebar-h: 64px;  /* Reservehoehe kuenftige untere Leiste */
    --domus-stepper-h: 46px;    /* Hoehe der Sprungmarken-Stepper-Leiste (briefing-06) */
}

/* Neue Kopfleiste standardmaessig aus — der Desktop (>=1024px) zeigt sie nie. */
.domus-mhead { display: none; }

/* Untere Aktionsleiste (briefing-02) ebenso: Desktop zeigt sie nie. */
.domus-mobilebar { display: none; }

/* Sprungmarken-Stepper-Knopf (briefing-06) standardmaessig aus — nur der
   Mobil-Viewport (<1024px) zeigt ihn; der Desktop behaelt seine Boden-Pille. */
.domus-residenz-nav__stepper { display: none; }

/* =====================================================================
   MOBIL-EBENE: bis 1023px  (Handy + Tablet Hochkant) — breitengesteuert
   ===================================================================== */
@media (max-width: 1023px) {

    /* Die alte dunkle Boden-Pille wird auf Mobil NICHT gezeigt. Ihre neue
       Mobil-Präsentation ist die Sprungmarken-Stepper-Leiste (briefing-06,
       eigener Abschnitt am Dateiende). Bis briefing-05 war die Leiste hier nur
       ausgeblendet; ab briefing-06 wird sie als Stepper neu dargestellt. */

    /* ---- Alten Desktop-Kopf/Nav auf Mobil neutralisieren ---- */

    /* Desktop-Branding aus — das Logo sitzt in der neuen Kopfleiste. */
    .site-branding { display: none !important; }

    /* Feste rechte Seitenleiste (= minimierter Merkzettel-Panel mit R/W/Herz/
       Brille/Kontakt) auf Mobil aus. Ihre Funktionen kommen mit briefing-02 in
       die untere Aktionsleiste. */
    .domus-merkzettel { display: none !important; }

    /* Die Utility-Bar bleibt im DOM (ihr Such-Dropdown wird gebraucht), aber
       ohne sichtbare Desktop-Steuerung und ohne Eigenhoehe. */
    .site-header .utility-bar {
        display: flex !important;
        min-height: 0;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
    }
    .utility-bar .utility-contact,
    .utility-bar .utility-social,
    .utility-bar .utility-member,
    .utility-bar .search-trigger { display: none !important; }

    /* Such-Dropdown als Viewport-Overlay: im Bestand ist es absolut zur (nun
       unsichtbaren) Bar positioniert; per Delegation an #search-trigger soll
       es aus der neuen Kopfleiste heraus sichtbar werden. */
    .search-dropdown {
        position: fixed;
        /* Gleiche obere Kante wie E-Mail- und Rückruf-Layer. */
        top: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        max-width: none;
        margin-inline: auto;
    }

    /* Die Kopfsuche ist auf dem kleinen Bildschirm ein konzentrierter
       Eingabedialog. Statische Beispielobjekte würden bei geöffneter
       Tastatur unter ihr liegen und sind dort nicht bedienbar. Die Suche per
       Eingabe + „Suchen" bleibt vollständig erhalten; Empfehlungen bleiben
       auf Desktop sichtbar. */
    .search-dropdown__preview {
        display: none;
    }

    /* Die Tastatur verkleinert den sichtbaren Mobilbereich. Das JS setzt die
       Variable nur für einen geöffneten Kontakt-Layer; der Dialog bleibt dann
       oberhalb der Tastatur und sein Inhalt kann darin scrollen. */
    .contact-layer {
        --domus-contact-keyboard-offset: 0px;
    }
    /* Loop 11 (Codex-Nachschaerfung 2): Der GESAMTE offene Kontakt-Layer endet
       oberhalb der unteren Aktionsleiste. Dadurch faengt seine transparente
       pointer-events:auto-Flaeche die Leiste NICHT mehr ab — die .domus-mobilebar
       (z-index 1150) bleibt sichtbar und antippbar, OHNE das aria-modale Modal
       zu ueberstapeln. (Weichenwechsel schliesst den Layer zuvor per JS-Glue in
       search-panel.js.) Der Backdrop __overlay (height:100% des Layers) endet
       damit automatisch an der Leistenoberkante. */
    .contact-layer.is-open {
        bottom: var(--domus-mobilebar-h);
        height: auto;
    }
    .contact-layer.is-open .contact-layer__panel {
        /* Panel ist position:absolute im (jetzt geschrumpften) Layer: bottom
           0.75rem sitzt damit 0.75rem ueber der Leistenoberkante. Tastatur-Offset
           bleibt additiv. Langer Inhalt scrollt intern statt herauszulaufen. */
        bottom: calc(0.75rem + var(--domus-contact-keyboard-offset));
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Hauptmenue (domus-haupt) auf Mobil vorerst aus — die systematische
       mobile Navigation kommt mit briefing-02 (untere Aktionsleiste). */
    .main-navigation__list { display: none !important; }
    .domus-nav-overlay { display: none !important; }

    /* Die main-navigation traegt jetzt die neue Kopfleiste. */
    .site-header .main-navigation {
        display: block;
        min-height: 0;
        padding: 0;
        border-top: 0;
    }

    /* ---- Neue Kopfleiste: ZWEIZEILIG ----
       Obere Zeile: links Kontakt (Umschlag + Hoerer), rechts Kompass + Suche.
       Darunter: das Logo ueber die volle Breite, gross und mittig. So
       konkurrieren Symbole und Logo nicht mehr um denselben Platz. */
    .domus-mhead {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "left  right"
            "brand brand";
        align-items: center;
        row-gap: 2px;
        padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
        background: var(--wp--preset--color--warmweiss);
    }

    /* Obere Zeile links: Kontakt nebeneinander. */
    .domus-mhead__left {
        grid-area: left;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--wp--preset--spacing--10);
        justify-self: start;
    }

    /* Obere Zeile rechts: Suche. */
    .domus-mhead__right {
        grid-area: right;
        display: flex;
        align-items: center;
        gap: var(--wp--preset--spacing--10);
        justify-content: flex-end;
        justify-self: end;
        position: relative;
    }

    /* Alle drei Icon-Buttons in Gold. Reset gegen den globalen Button-Reset
       (box-shadow / transform), sonst wandern/heben sie sich wie Buttons. */
    .domus-mhead__ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        color: var(--wp--preset--color--gold);
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    .domus-mhead__ico:hover,
    .domus-mhead__ico:focus-visible {
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        color: var(--wp--preset--color--gold-dark);
        outline: none;
    }

    /* Kopf-Kompass: bewusst eine kleine, sichtbare Zweiwege-Weiche direkt
       unter dem Symbol; keine Delegation an die auf Mobil verborgene Leiste. */
    .domus-mhead__weiche {
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        z-index: 1200;
        display: flex;
        flex-direction: column;
        min-width: 12rem;
        padding: 8px;
        gap: 6px;
        background: var(--wp--preset--color--warmweiss);
        border: 1px solid var(--wp--preset--color--hellgrau);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    }
    .domus-mhead__weiche[hidden] { display: none; }
    /* Kleine Ueberschrift „Suche nach:" ueber den zwei Optionen (Loop 08):
       kleiner als die Optionen (0.8rem vs 1rem), dunkelgrau statt Gold,
       linksbuendig, keine Schaltflaeche. Zusatzabstand nach unten zu den
       Optionen (zusaetzlich zum flex-gap 6px der Weiche). */
    .domus-mhead__weiche-titel {
        padding: 0.15rem 0.7rem 0;
        margin-bottom: 2px;
        color: var(--wp--preset--color--dunkelgrau);
        font-family: var(--wp--preset--font-family--montserrat), 'Montserrat', sans-serif;
        font-size: 0.9rem;
        font-weight: 600;
        text-align: left;
    }
    .domus-mhead__opt {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        min-height: 44px;
        width: 100%;
        padding: 0.5rem 0.7rem;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--wp--preset--color--dunkelgrau);
        font-family: var(--wp--preset--font-family--montserrat), 'Montserrat', sans-serif;
        font-size: 1rem;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
    }
    /* Symbol vor dem Klartext (Loop 08): gold, feste Breite, bündig — wie in
       der unteren Aktionsleiste (.domus-mobilebar__opt > i). */
    .domus-mhead__opt > i {
        width: 1.3rem;
        text-align: center;
        color: var(--wp--preset--color--dunkelgrau);
        font-size: 1.05rem;
    }
    .domus-mhead__opt:hover,
    .domus-mhead__opt:focus-visible,
    .domus-mhead__opt.is-anvisiert {
        background: var(--wp--preset--color--hellgrau) !important;
        color: var(--wp--preset--color--akzent-flaeche);
        outline: none;
    }

    /* Logo darunter, ueber die volle Breite, gross, schwarz, mittig. */
    .domus-mhead__brand {
        grid-area: brand;
        min-width: 0;
        text-align: center;
        text-decoration: none;
        color: var(--wp--preset--color--schwarz);
    }
    .domus-mhead__brand:hover {
        color: var(--wp--preset--color--schwarz);
        text-decoration: none;
    }
    .domus-mhead__brand-title {
        display: block;
        font-family: var(--wp--preset--font-family--playfair), 'Playfair Display', Georgia, serif;
        font-size: clamp(1.7rem, 7.5vw, 2.25rem);
        font-weight: 700;
        letter-spacing: 0.04em;
        line-height: 1.05;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--wp--preset--color--schwarz);
    }
    /* Unterzeile auf dem Handy aus (Platz fuer ein dominantes Logo). */
    .domus-mhead__brand-tagline { display: none; }

    /* ---- Mobil-Footer: den BESTEHENDEN Footer stapeln (kein neues Markup) ---- */
    .site-footer__widgets { display: block; }
    .site-footer__col { margin-bottom: var(--wp--preset--spacing--30); }
    .site-footer__col:last-child { margin-bottom: 0; }
    /* „Unser Service" auf Mobil aus. Am Widget-Bestand belegt (2026-09-04):
       footer-spalte-2 = Titel „UNSER SERVICE" (Residenzenuebersicht, Mein
       YouTube-Kanal). Beides ist ueber Kompass bzw. „Magazin & Video" ohnehin
       erreichbar. Spalte 1 (Internes) und 3 (Anbieter/Login) bleiben. */
    .site-footer__col--footer-spalte-2 { display: none; }
    /* Abstand nach unten fuer die spaetere feste Aktionsleiste (briefing-02). */
    .site-footer {
        padding-bottom: calc(var(--domus-mobilebar-h) + var(--wp--preset--spacing--30));
    }
}

/* =====================================================================
   TABLET HOCHKANT: 768–1023px — aufgeweitetes Fundament (breitengesteuert)
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Logo auf dem Tablet etwas groesser (aber nicht zu gross). */
    .domus-mhead__brand-title {
        font-size: clamp(2rem, 5vw, 2.5rem);
    }

    /* Unterzeile auf dem Tablet sichtbar. */
    .domus-mhead__brand-tagline {
        display: block;
        margin-top: 4px;
        font-family: var(--wp--preset--font-family--montserrat), 'Montserrat', sans-serif;
        font-size: 0.62rem;
        font-weight: 500;
        letter-spacing: 0.26em;
        line-height: 1;
        text-transform: uppercase;
        color: var(--wp--preset--color--dunkelgrau);
    }
}

/* =====================================================================
   HANDY: bis 767px — Logo ZUERST (markenfuehrend), Symbole darunter.
   Das Tablet (768–1023) behaelt bewusst die Symbolzeile oben.
   ===================================================================== */
@media (max-width: 767px) {

    /* Marke oben ueber die volle Breite, Symbolzeile darunter. */
    .domus-mhead {
        grid-template-areas:
            "brand brand"
            "left  right";
        row-gap: 8px;
    }

    /* Logo skaliert bis hinunter zum iPhone 5 (320px), ohne Umbruch/Versatz. */
    .domus-mhead__brand-title {
        font-size: clamp(1.5rem, 8vw, 2.1rem);
    }
}

/* =====================================================================
   FINGER-SCHICHT bei Desktop-Breite (Tablet quer): groessere Tippflaechen,
   KEIN Layoutwechsel. Desktop mit Maus (pointer: fine) bleibt unberuehrt.
   Dies ist die EINZIGE Stelle, an der `pointer` verwendet wird.
   ===================================================================== */
@media (min-width: 1024px) and (pointer: coarse) {
    .main-navigation__list > li > a { padding-block: 0.9rem; }
    .utility-contact__item,
    .search-trigger { min-height: 44px; }
}

/* =====================================================================
   UNTERE AKTIONSLEISTE + WEICHEN  (briefing-mobil-02) — bis 1023px
   Drei Text-Weichen (Magazin & Video / Kompass / Mein Bereich). Home laeuft
   ueber den Logo-Tipp der Kopfleiste. Reine Darstellung; Ziele/Ausloeser sind
   bestehend. Keine neuen Farben/Fonts/FA — nur Tokens/Presets.
   ===================================================================== */
@media (max-width: 1023px) {

    .domus-mobilebar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* Loop 10: ueber dem Merkzettel-/Finder-Overlay (1100), damit Leiste UND
           ihre nach oben aufklappenden Weichen bedienbar bleiben. Kontakt-/
           Vollmodals liegen bei 9999+ und decken die Leiste weiter zu. */
        z-index: 1150;
        height: var(--domus-mobilebar-h);
        margin: 0;
        background: var(--wp--preset--color--warmweiss);
        /* Loop 11: zarte goldene Ober-Linie statt hellgrau — hebt die drei
           unteren Bereiche ruhig und markenkonform vom Content ab (Huib-Auftrag
           14.09.26). Nur die Rahmenfarbe; keine Flaeche, kein Radius (0 bleibt). */
        border-top: 1px solid var(--wp--preset--color--akzent-linie);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    }

    .domus-mobilebar__item {
        position: relative;
        flex: 1 1 0;
        display: flex;
        min-width: 0;
    }

    /* Der Text-Knopf fuellt sein Drittel; Reset gegen den globalen Button-Reset. */
    .domus-mobilebar__btn {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0 var(--wp--preset--spacing--10);
        margin: 0;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        color: var(--wp--preset--color--dunkelgrau);
        font-family: var(--wp--preset--font-family--montserrat), 'Montserrat', sans-serif;
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Loop pw-ruhend-01: derselbe Knopf als direkter Link (Premium Wohnen ruht). */
    a.domus-mobilebar__btn--link,
    a.domus-mobilebar__btn--link:hover,
    a.domus-mobilebar__btn--link:visited {
        color: var(--wp--preset--color--dunkelgrau);
        text-decoration: none;
    }

    /* Aktive/geoeffnete Weiche leuchtet im Gold (Bildsprache der aktiven Marke). */
    .domus-mobilebar__btn.is-offen,
    .domus-mobilebar__btn:focus-visible {
        color: var(--wp--preset--color--akzent-flaeche);
        outline: none;
    }

    /* Popover ueber der Leiste. */
    .domus-mobilebar__weiche {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 6px);
        transform: translateX(-50%);
        min-width: 12rem;
        max-width: 90vw;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 8px;
        background: var(--wp--preset--color--warmweiss);
        border: 1px solid var(--wp--preset--color--hellgrau);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    }
    .domus-mobilebar__weiche[hidden] { display: none; }
    /* Kleine Ueberschrift „unsere Verzeichnisse" ueber den zwei Optionen des
       Residenzen-&-Wohnen-Panels (Loop 09): kleiner als die Optionen, dunkelgrau,
       linksbuendig, keine Schaltflaeche, Abstand nach unten (zusaetzlich zum
       flex-gap 6px). Stil wie .domus-mhead__weiche-titel. */
    .domus-mobilebar__weiche-titel {
        padding: 0.1rem 0.7rem 0;
        margin-bottom: 2px;
        color: var(--wp--preset--color--dunkelgrau);
        font-family: var(--wp--preset--font-family--montserrat), 'Montserrat', sans-serif;
        font-size: 0.9rem;
        font-weight: 600;
        text-align: left;
    }

    /* Die äußeren Weichen werden an der Bildschirmkante verankert. Sonst
       schiebt translateX(-50%) den Mein-Bereich-Popper auf schmalen Handys
       teilweise außerhalb des sichtbaren Bereichs. */
    .domus-mobilebar__item:first-child .domus-mobilebar__weiche {
        left: 0;
        transform: none;
    }
    .domus-mobilebar__item:last-child .domus-mobilebar__weiche {
        left: auto;
        right: 0;
        transform: none;
    }

    /* Optionen: Symbol + Klartext, komfortable Tippflaeche, scharfe Ecken.
       Loop 09: heller Grund + dezenter Schatten -> jeder Eintrag wirkt als
       leicht erhabenes Feld (plastischer, Vorbild: Schatten des Weichen-Poppers
       .domus-mhead__weiche/.domus-mobilebar__weiche). border-radius bleibt 0
       (Design-Tokens). Greift fuer alle DREI unteren Panels einheitlich. */
    .domus-mobilebar__opt {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        min-height: 44px;
        padding: 0.5rem 0.7rem;
        margin: 0;
        width: 100%;
        box-sizing: border-box; /* width:100% inkl. Padding -> kein Ueberlauf ueber den Panel-Rand */
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 0 !important;
        /* Feine 1px-Linie ringsum (Abschluss auf ALLEN vier Kanten) + weicher
           Lift darunter. Ersetzt den zuvor rein nach unten gerichteten Schatten,
           bei dem die senkrechten Kanten unsichtbar blieben. */
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.10) !important;
        transform: none !important;
        color: var(--wp--preset--color--dunkelgrau);
        font-family: var(--wp--preset--font-family--montserrat), 'Montserrat', sans-serif;
        font-size: 1rem;
        font-weight: 500;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    .domus-mobilebar__opt > i {
        width: 1.3rem;
        text-align: center;
        color: var(--wp--preset--color--dunkelgrau);
        font-size: 1.05rem;
    }
    .domus-mobilebar__opt:hover,
    .domus-mobilebar__opt:focus-visible,
    .domus-mobilebar__opt.is-anvisiert {
        background: var(--wp--preset--color--hellgrau) !important;
        color: var(--wp--preset--color--akzent-flaeche);
        outline: none;
    }

    /* ---- Merkzettel als Mobil-Layer (SOLL §6.2 / Codex-Nachschaerfung 2) ----
       Die feste rechte Seitenleiste bleibt auf Mobil unsichtbar (Regel aus
       briefing-01). Wird der Merkzettel aber GEOEFFNET (--maximized), zeigt er
       sich als Overlay ueber der Breite — der Oeffnungsweg funktioniert damit
       auf Handy UND Tablet (bis 1023px), nicht nur bis 767px. */
    .domus-merkzettel.domus-merkzettel--maximized {
        display: block !important;
        position: fixed;
        left: 0;
        right: 0;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box;
        top: var(--domus-mhead-h);
        /* Loop 10: unten Platz fuer die Aktionsleiste lassen, damit sie sichtbar
           und bedienbar bleibt (nicht verdeckt). */
        bottom: var(--domus-mobilebar-h);
        z-index: 1100;
        transform: none !important;
    }
    .domus-merkzettel.domus-merkzettel--maximized .domus-merkzettel__panel {
        /* Einheitlicher Dialog wie Kontakt: der Hintergrund bleibt sichtbar,
           der Inhalt liegt als eingerücktes, scrollbares Fenster darauf. */
        position: fixed;
        top: 0.75rem;
        right: 0.75rem;
        /* Loop 10 (Codex-Praezisierung): das feste Innenpanel selbst muss ueber
           der Aktionsleiste enden — Eltern-bottom allein reicht nicht, weil das
           Panel eigenes position:fixed hat. */
        bottom: calc(var(--domus-mobilebar-h) + 0.75rem);
        left: 0.75rem;
        width: auto !important;
        max-width: none !important;
        height: auto;
        max-height: calc(100vh - var(--domus-mobilebar-h) - 1.5rem);
        border-radius: 0;
        /* Überschreibt die alte Mobil-Dialoganimation (translate -50%),
           die das weiße Panel genau um seine halbe Breite nach links schob. */
        transform: none !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Reiter-Spalte, Ziehgriff und der Aufklapp-Pfeil sind auf Mobil nicht noetig. */
    .domus-merkzettel.domus-merkzettel--maximized .domus-merkzettel__triggers,
    .domus-merkzettel.domus-merkzettel--maximized .domus-merkzettel__drag-handle,
    .domus-merkzettel.domus-merkzettel--maximized .domus-merkzettel__mobile-toggle {
        display: none !important;
    }
}

/* Desktop: Die Serviceleiste bleibt als festes Orientierungselement mittig.
   Die alte JS-Y-Variable darf ihre sichtbare Lage nicht mehr überschreiben. */
@media (min-width: 1024px) {
    .domus-merkzettel {
        top: 50vh !important;
        transform: translateX(var(--domus-slide-x)) translateY(-50%) !important;
    }
}

/* =====================================================================
   STARTSEITE-KARTENFLUSS  (briefing-mobil-04) — bis 1023px, nur .home
   Reiner Reflow des vorhandenen Startseiten-Contents (DB: post-content
   der Startseite, Seite 43). Die Startseite nutzt zwei
   `.domus-layout-75-25`-Zeilen (Hauptspalte 75% + `.domus-col-sidebar`
   25%). Dieselbe Klasse tragen auch Einzel-/Archivseiten — darum ist
   ALLES hier auf `body.home` beschraenkt, damit jene unberuehrt bleiben.

   Der Grund-Umbruch auf eine Spalte existiert global bereits in style.css
   (Alt-Ebene). Hier uebernimmt die ISOLIERTE Mobil-Ebene die Startseite
   (SOLL §2) und gibt ihr den ruhigen, einspaltigen Kartenfluss der SOLL §7.
   Quellreihenfolge Hauptspalte vor Sidebar-Spalte ⇒ die Sidebar-
   Inhalte stapeln sich von selbst UNTER den Hauptinhalt. Selektion rein
   ueber semantische Klassen, nicht ueber Positionsindizes. Desktop
   (>=1024px) und alle Nicht-Startseiten bleiben unberuehrt. Keine
   Inhalts-/DB-Aenderung, keine Blocklogik.
   ===================================================================== */
@media (max-width: 1023px) {

    /* Startseiten-75/25 einspaltig in der isolierten Ebene (scoped). */
    .home .domus-layout-75-25 {
        display: block;
    }

    /* Ruhiger vertikaler Rhythmus: zwischen den beiden Startseiten-Zeilen
       und zwischen Haupt- und darunter gestapelter Sidebar-Spalte. */
    .home .domus-layout-75-25 + .domus-layout-75-25 {
        margin-top: var(--wp--preset--spacing--40, 2.5rem);
    }
    .home .domus-layout-75-25 > .wp-block-column + .wp-block-column {
        margin-top: var(--wp--preset--spacing--40, 2.5rem);
    }

    /* Die Sidebar-Spalte ist im Fluss ein normaler, voller Block — nicht
       mehr die schmale, oben klebende 25%-Spalte. */
    .home .domus-layout-75-25 .domus-col-sidebar {
        align-self: stretch;
        width: 100%;
    }

    /* Grosses Hochkant-Sidebar-Medium (dekoratives Park-Bild, 341x1024)
       nicht die volle Breite dominieren lassen — als ruhige, mittige Karte
       begrenzen. Greift nur auf der Startseiten-Sidebar. */
    .home .domus-col-sidebar .wp-block-image {
        margin-inline: auto;
    }
    .home .domus-col-sidebar .wp-block-image img {
        max-width: min(100%, 22rem);
        height: auto;
    }
}

/* =====================================================================
   KOMPASS / FINDER  (briefing-mobil-05) — bis 1023px
   Reine optische Übernahme (SOLL §8): der vorhandene Finder wird NUR neu
   angeordnet, nicht neu gebaut. Beide Welten teilen die Struktur-Klassen
   `.domus-residenzenfinder__*` (der Wohnen-Finder trägt nur zusätzlich
   `.domus-wohnenfinder`), darum bedient EINE Regel beide.

   Die Form ist ein einspaltiges Grid (style.css); `order` ändert nur die
   SICHTBARE Reihenfolge. DOM-, Tab- und Vorlesereihenfolge bleiben
   unverändert; die Bedienlogik (Filter-Live-Update, „Ergebnisse anzeigen",
   „Zurücksetzen", localStorage `domus_kompass_selections`) hängt an IDs/JS
   und wird nicht berührt. Kein JS-/Payload-Eingriff, kein erneutes
   Dialog-Framing (das ist MOBIL-03), kein Vorschaubild (geparkt). Desktop
   (>=1024px) bleibt unberührt.

   SOLL-§8-Reihenfolge: Ergebnisse-Knopf → Wunschregion → Schnellprofile →
   Merkmalsgruppen → Zurücksetzen (die Ergebnisliste folgt als eigener Block
   ohnehin nach der Form). Einziger echter Umzug: die Wunschregion nach oben
   (Quellreihenfolge hat sie hinter Profilen und Merkmalsgruppen).
   ===================================================================== */
@media (max-width: 1023px) {

    .domus-residenzenfinder__show-results { order: 1; }
    .domus-residenzenfinder__region       { order: 2; }
    .domus-residenzenfinder__profiles     { order: 3; }
    .domus-residenzenfinder__fields       { order: 4; }
    .domus-residenzenfinder__actions      { order: 5; }
}

/* =====================================================================
   SPRUNGMARKEN-STEPPER  (briefing-mobil-06) — bis 1023px
   Erklärungsfreie Navigation innerhalb langer Objektseiten
   (SOLL §9, neu gefasst): waagerechte Leiste UNTEN, über der festen
   Aktionsleiste, ständig sichtbar. Einträge = Symbol + Text. Fester Knopf
   „Nächster Bereich" blättert den Streifen (Vorschauindex) OHNE Seitensprung;
   Tipp auf einen Eintrag nutzt den nativen Anker-Sprung. Der vorhandene
   Scroll-Spy (residenz-nav.js) hebt weiter den aktuellen Abschnitt hervor.

   Z-Ebene BEWUSST unter der Mobilebar (die bei z-index:1000 liegt) und unter
   den Dialogen (1100/1200), damit ein geöffneter Kontakt-/Kompass-/Mein-
   Bereich-Dialog die Stepper-Leiste überlagert — nicht umgekehrt.
   Reine Darstellung + UI-Glue; Markup/Anker/Scroll-Spy unverändert. Desktop
   (>=1024px) behält seine Boden-Pille (style.css).
   ===================================================================== */
@media (max-width: 1023px) {

    /* Aus der dunklen, schwebenden Pille wird eine feste Leiste über der
       Aktionsleiste. Farbwelt (dunkel + Gold) wie auf dem Desktop. */
    .domus-residenz-nav {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(var(--domus-mobilebar-h) + 6px);
        top: auto;
        width: auto;
        margin: 0;
        transform: none !important;
        display: flex;
        align-items: stretch;
        height: var(--domus-stepper-h);
        /* Gerundete Aussenkanten wie auf dem Desktop (Pille), mit etwas Abstand
           zu den Bildschirmraendern. overflow:hidden klippt die End-Knoepfe. */
        border-radius: calc(var(--domus-stepper-h) / 2);
        border: 1px solid rgba(191, 147, 89, 0.35);
        background: rgba(45, 43, 40, 0.96);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
        overflow: hidden;
        z-index: 900; /* unter Mobilebar (1000) und Dialogen (1100/1200) */
        animation: domus-stepper-in 0.45s ease-out both;
    }

    /* Eintrittsbewegung: von rechts hereinfließen. */
    @keyframes domus-stepper-in {
        from { transform: translateX(18%); opacity: 0; }
        to   { transform: translateX(0);   opacity: 1; }
    }

    /* Alten Klapp-Toggle auf Mobil sicher aus (die Stepper-Leiste ersetzt ihn). */
    .domus-residenz-nav__toggle { display: none !important; }
    .domus-residenz-nav.is-collapsed .domus-residenz-nav__items { display: flex; }

    /* Zwei Pfeil-Knöpfe (nur Symbol): links „zurück", rechts „weiter".
       DOM-Reihenfolge prev → items → next ergibt links/rechts von selbst. */
    .domus-residenz-nav__stepper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        min-height: var(--domus-stepper-h);
        padding: 0;
        margin: 0;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(191, 147, 89, 0.16) !important;
        box-shadow: none !important;
        transform: none !important;
        color: var(--wp--preset--color--gold);
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    .domus-residenz-nav__stepper--prev { border-right: 1px solid rgba(191, 147, 89, 0.28); }
    .domus-residenz-nav__stepper--next { border-left: 1px solid rgba(191, 147, 89, 0.28); }
    .domus-residenz-nav__stepper:hover,
    .domus-residenz-nav__stepper:focus-visible {
        background: rgba(191, 147, 89, 0.28) !important;
        color: var(--wp--preset--color--gold);
        box-shadow: none !important;
        transform: none !important;
        outline: none;
    }

    /* Waagerechter Streifen der Einträge, per JS horizontal gescrollt. */
    .domus-residenz-nav__items {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-behavior: smooth;
        /* Sauberes Einrasten: die angesteuerte Marke landet mittig, statt
           „zwischen" zwei Marken stehenzubleiben. Native, GPU-fluessige
           Bewegung (das JS nutzt scrollTo, kein eigenes Tween mehr). */
        scroll-snap-type: x mandatory;
    }
    .domus-residenz-nav__items::-webkit-scrollbar { display: none; }

    /* Einzelner Eintrag: Symbol + Text nebeneinander, nicht umbrechend. */
    .domus-residenz-nav__item {
        flex: 0 0 auto;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 0.45rem;
        width: auto;
        padding: 0 0.85rem;
        border: 0;
        border-right: 1px solid rgba(191, 147, 89, 0.12);
        color: rgba(250, 250, 248, 0.9);
        white-space: nowrap;
        scroll-snap-align: center;
    }
    .domus-residenz-nav__item:last-child { border-right: 0; }

    .domus-residenz-nav__icon { font-size: 1.05rem; line-height: 1; }

    /* Text sichtbar (überschreibt die alte <768px-Ausblendung in style.css). */
    .domus-residenz-nav__label {
        display: inline;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
        line-height: 1;
    }

    /* Aktueller Abschnitt (Scroll-Spy): dezent Gold. */
    .domus-residenz-nav__item.is-active {
        color: var(--wp--preset--color--gold);
    }
    /* Vorschau (Stepper/Scroll-Spy-Nachführung): deutlich hervorgehoben. */
    .domus-residenz-nav__item.is-vorschau {
        color: var(--wp--preset--color--gold);
        background: rgba(191, 147, 89, 0.22);
    }

    /* Platz für die Stepper-Leiste, damit der Seitenfuß nicht dahinter liegt.
       Nur auf Seiten mit Leiste (Body-Klasse setzt das Stepper-JS). */
    body.has-sprungmarken-stepper .site-footer {
        padding-bottom: calc(var(--domus-mobilebar-h) + var(--domus-stepper-h) + var(--wp--preset--spacing--30));
    }
}

/* Eintrittsbewegung respektiert die Systemeinstellung „weniger Bewegung". */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .domus-residenz-nav { animation: none; }
    .domus-residenz-nav__items { scroll-behavior: auto; }
}

/* Sprungmarken-Stepper — HANDY: genau EINE Marke pro Ansicht (Huib 14.09.26).
   Jeder Eintrag fuellt die Streifenbreite und rastet mittig ein (scroll-snap
   der Elternregel). Damit lugen keine halben Nachbar-Marken mehr herein. Steht
   bewusst NACH dem 1023er-Block, damit `flex: 0 0 100%` das dortige
   `width:auto` ueberschreibt. Auf Tablet (768–1023px) bleibt die
   Mehrfachanzeige unveraendert. */
@media (max-width: 767px) {
    .domus-residenz-nav__item {
        flex: 0 0 100%;
        justify-content: center;
    }
}

/* Loop phase-a-sichtbarkeit-01 (Tastatur): Die mobilen Leisten zeigten den Tastaturfokus nur über die Farbe.
   Ein sichtbarer Rahmen nur bei Tastaturbedienung (:focus-visible), Maus und Touch bleiben unverändert.
   Steht am Ende, damit er die `outline: none` der Zustandsregeln oben überstimmt. */
.domus-mhead__ico:focus-visible,
.domus-mhead__opt:focus-visible,
.domus-mobilebar__btn:focus-visible,
.domus-mobilebar__opt:focus-visible,
.domus-residenz-nav__stepper:focus-visible {
    outline: 2px solid var(--wp--preset--color--gold-dark);
    outline-offset: 2px;
}