/* =========================================================================
   fewo-marienschacht.de — Layout-Layer
   -------------------------------------------------------------------------
   WARUM ES DIESE DATEI GIBT

   Die Installation ist ein Klon des Baabe-Projekts, in dem das Bootstrap-
   Theme (files/layout/scss/custom.scss bzw. die kompilierte custom.css)
   nicht mehr vorhanden ist. Damit fehlt der Seite ihr komplettes Grund-
   geruest: Seitenbreite, Header als Zeile, Spaltenraster, Abstaende der
   Inhaltselemente. Farben und Schrift kommen aus marienschacht-brand.css,
   die Fewo-Komponenten aus dem mwfm-Skeleton — aber das Skelett dazwischen
   fehlte.

   Diese Datei liefert genau dieses Geruest, in den Massen der Vorlage
   marienschacht.de. Sie ist bewusst klein und ersetzt kein Bootstrap: sie
   deckt die Klassen ab, die auf dieser Seite tatsaechlich vorkommen.

   Wenn spaeter doch ein Theme-CSS dazukommt, kann diese Datei ersatzlos
   entfallen — sie definiert nichts, was ein Theme nicht ohnehin mitbringt.

   EINBINDUNG: direkt VOR marienschacht-brand.css laden.

   Aufbau:
     1  Seitenraster (container, Artikel, Spalten)
     2  Kopfzeile (Logo, Navigation, CTA, Mobile)
     3  Inhaltselemente
     4  Suchformular der Startseite
     5  Fusszeile
     6  Kleine Hilfsklassen
   ========================================================================= */


/* == 1  Seitenraster ====================================================== */
/* EIN Randwert fuer alles: Kopfzeile, Inhalt und Fusszeile muessen dieselbe
   linke und rechte Kante haben. Vorher hatte die Kopfzeilen-Pille keinen
   Aussenrand, Hero und Inhalt aber 1,5 rem — drei verschiedene Kanten
   untereinander. Wer den Rand aendern will, aendert nur diese Variable. */

:root {
    --ms-gutter: 1.25rem;   /* Aussenrand links/rechts   */
    --ms-section: 1.75rem;  /* Abstand zwischen Bloecken */
    --ms-pad: 1.25rem;      /* Innenabstand der Karten   */
}

@media (min-width: 768px) {
    :root {
        --ms-gutter: 2rem;
        --ms-section: 2.25rem;
        --ms-pad: 1.5rem;
    }
}

@media (min-width: 1200px) {
    :root {
        --ms-gutter: 3rem;
    }
}

.container {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: var(--ms-gutter);
}

/* Die Artikel dieser Installation haben KEIN .container-Kind — der Artikel
   selbst ist der Inhaltsrahmen. */
/* Die Maximalbreite gilt fuer den INHALT, nicht fuer die Box: sonst frisst
   der Randabstand von der 1320 px ab und Hero und Suchkarte stehen weiter
   innen als die Kopfzeilen-Pille. */
#main .mod_article {
    width: 100%;
    max-width: calc(1320px + var(--ms-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--ms-gutter);
    margin-block: var(--ms-section);
}

/* Der Hero schliesst direkt an die Kopfzeile an — der Abstand kommt allein
   aus deren unterem Innenabstand, wie auf der Vorlage. */
#main .mod_article.headpicture {
    margin-top: 0;
}

#main .mod_article:last-child {
    margin-bottom: var(--ms-section);
}

/* Spaltenraster — die Inhalte nutzen col-md-* / col-lg-*, ohne Bootstrap
   waeren das wirkungslose Klassen. Zwoelferteilung wie gewohnt. */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -1rem;
}

[class*="col-md-"],
[class*="col-lg-"],
.ce_columns {
    width: 100%;
    padding-inline: 1rem;
}

@media (min-width: 768px) {
    .col-md-1  { width: 8.3333%; }
    .col-md-2  { width: 16.6667%; }
    .col-md-3  { width: 25%; }
    .col-md-4  { width: 33.3333%; }
    .col-md-5  { width: 41.6667%; }
    .col-md-6  { width: 50%; }
    .col-md-7  { width: 58.3333%; }
    .col-md-8  { width: 66.6667%; }
    .col-md-9  { width: 75%; }
    .col-md-10 { width: 83.3333%; }
    .col-md-11 { width: 91.6667%; }
    .col-md-12 { width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-1  { width: 8.3333%; }
    .col-lg-2  { width: 16.6667%; }
    .col-lg-3  { width: 25%; }
    .col-lg-4  { width: 33.3333%; }
    .col-lg-5  { width: 41.6667%; }
    .col-lg-6  { width: 50%; }
    .col-lg-7  { width: 58.3333%; }
    .col-lg-8  { width: 66.6667%; }
    .col-lg-9  { width: 75%; }
    .col-lg-10 { width: 83.3333%; }
    .col-lg-11 { width: 91.6667%; }
    .col-lg-12 { width: 100%; }
}


/* == 2  Kopfzeile ========================================================= */
/* Die weisse Pille selbst kommt aus marienschacht-brand.css — hier steht
   nur, dass ihr Inhalt eine Zeile bildet. */

/* Der Aussenrand sitzt am Balken, nicht an der Pille: die Pille IST das
   .container-Element und traegt innen ihre eigenen 20 px Polsterung. */
#header .header {
    padding-inline: var(--ms-gutter);
}

#header .header > .container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .625rem 1.25rem;
}

#logo {
    flex: 0 0 auto;
    line-height: 0;
}

#header nav.mod_navigation {
    margin-left: auto;
}

#header nav ul.level_1 {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#header nav ul.level_1 > li {
    margin: 0;
}

/* „Jetzt buchen“ ist im Menue als highlight markiert. Auf der Vorlage sitzt
   der Handlungsaufruf als eigene Flaeche rechts aussen — in der weissen
   Pille traegt er hier die Markenfarbe, sonst wuerde er verschwinden.

   Wichtig: Steht der Besucher auf der Zielseite, rendert Contao den Punkt
   als <strong class="active"> statt als <a>. Ohne strong/span im Selektor
   verliert der Button dort seine Flaeche und faellt in sich zusammen. */
#header nav ul.level_1 > li.highlight > :is(a, strong, span) {
    display: inline-block;
    background: var(--ms-gold, #BDB38B);
    color: #fff;
    border-radius: var(--ms-radius, 10px);
    padding: .625rem 1.25rem;
    line-height: 1.2;
    font-weight: 600;
}

#header nav ul.level_1 > li.highlight > a:hover {
    background: var(--ms-gold-dark, #A19876);
    color: #fff;
}

/* Aktiver Zustand: dunkleres Gold, damit man sieht, wo man ist – aber die
   weisse Schrift muss die Regel aus dem Brand-Layer schlagen, die aktive
   Punkte sonst goldfarben einfaerbt (Gold auf Gold waere unlesbar). */
#header nav ul.level_1 > li.highlight > strong,
#header nav ul.level_1 > li.highlight > strong.active,
#header nav ul.level_1 > li.highlight > .active {
    background: var(--ms-gold-dark, #A19876);
    color: #fff;
}

/* Menue-Schalter nur auf kleinen Bildschirmen */
.menu-mobile-opener {
    display: none;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: var(--ms-track, .0625em);
}

@media (max-width: 991.98px) {
    .menu-mobile-opener {
        display: flex;
        margin-left: auto;
    }
}

/* ZWISCHENLOESUNG: Die Insert-Tags {{fa::…}} werden derzeit als Text
   ausgegeben, weil das FontAwesome-Bundle nicht greift. Bis das behoben
   ist, blenden wir die Icon-Spans aus und zeichnen den Menue-Balken per
   CSS. Sobald die Icons rendern, koennen diese beiden Regeln raus. */
.menu-mobile-opener .icon-swap {
    display: none;
}

.menu-mobile-opener::after {
    content: "";
    width: 1.25rem;
    height: 2px;
    background: currentColor;
    box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}


/* == 3  Inhaltselemente =================================================== */
/* Die Abstaende sind bewusst knapp: Auf der Vorlage stehen die Bloecke dicht
   beieinander, die Ruhe kommt aus den Flaechen, nicht aus leerem Raum. */

#main .mod_article > *:not(:last-child) {
    margin-bottom: 1.25rem;
}

.content-headline,
.content-text h2,
.content-text h3 {
    margin-bottom: .75rem;
}

.rte > *:last-child {
    margin-bottom: 0;
}

.rte p {
    margin-block: 0 1rem;
}

.rte ul,
.rte ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.content-image figure,
.content-image img {
    margin: 0;
    max-width: 100%;
    height: auto;
}

.content-hyperlink a {
    text-decoration: underline;
    text-underline-offset: .2em;
}


/* == 4  Suchformular der Startseite ======================================= */
/* .filter-home ist das mwfm-Suchmodul. Auf der Vorlage liegt so etwas auf
   einer weissen Karte — hier bekommt es dieselbe Optik und legt sich mit
   negativem Abstand ein Stueck ueber den Hero. */

.filter-home {
    background: var(--ms-surface, #fff);
    border-radius: var(--ms-radius, 10px);
    box-shadow: var(--ms-shadow-soft, 0 6px 24px rgba(0, 0, 0, .12));
    padding: var(--ms-pad, 1.25rem);
}

@media (min-width: 992px) {
    .filter-home {
        margin-top: -4rem;
        position: relative;
        z-index: 2;
    }
}

.filter-home .formbody {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: end;
}

@media (min-width: 768px) {
    .filter-home .formbody {
        grid-template-columns: repeat(3, 1fr) auto;
    }
}

.filter-home .widget {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.filter-home .widget label {
    font-weight: 500;
    font-size: .95rem;
}

.filter-home .widget input {
    width: 100%;
}

.filter-home .widget-submit {
    justify-content: flex-end;
}

.filter-home .submit {
    white-space: nowrap;
}


/* == 5  Fusszeile ========================================================= */
/* Zwei Anforderungen:
   a) Das weisse Panel soll dieselbe Breite und dieselben Kanten haben wie
      die Kopfzeilen-Pille — also nicht randlos ueber die volle Fensterbreite.
   b) Bei wenig Inhalt soll es trotzdem am unteren Rand kleben statt in der
      Seitenmitte zu haengen. Das erledigt der Sticky-Footer weiter unten
      in Abschnitt 8. */

#footer {
    padding-inline: var(--ms-gutter);
}

#footer .footer-top,
#footer .footer-bottom {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
}

/* Innenabstand wie in der Kopfzeilen-Pille, damit Logo oben und Logo unten
   auf derselben Kante stehen. */
#footer .footer-top > .container,
#footer .footer-bottom > .container {
    padding-inline: 1.25rem;
}

#footer .footer-top {
    padding-block: 2rem 1.25rem;
}

#footer .footer-top .row {
    align-items: flex-start;
}

#footer .logo-footer img {
    max-width: 281px;
    height: auto;
}

/* Die Linklisten im Fuss sind Navigation, keine Aufzaehlung. */
#footer .rte ul {
    list-style: none;
    padding-left: 0;
}

#footer .rte li {
    margin-bottom: .35rem;
}

#footer h3 {
    margin-bottom: .75rem;
}

#footer .footer-bottom {
    font-size: .95rem;
}


/* == 6  Hilfsklassen ====================================================== */
/* Kommen im Inhalt vor und waeren ohne Theme wirkungslos. */

.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

.max-half { max-width: 800px; }

.block { display: block; }


/* == 7  Nachtraege: was ohne Theme-CSS sonst kaputt bleibt ================ */

/* Das Logo ist ein Hintergrundbild auf einem <a>. Ohne display:block hat
   ein Inline-Element keine Breite/Hoehe — der Kopf bleibt leer. */
#logo a {
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    text-indent: -9999px;
    overflow: hidden;
}

/* Contao setzt Sprungmarken („Navigation ueberspringen“) als .invisible.
   Ohne Theme-CSS stehen sie sichtbar im Menue. */
.invisible {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Formularfelder: die Vorlage nutzt fuer Felder einen kleineren Radius als
   fuer Karten und Buttons, dazu eine helle Fuellung. */
.formbody :is(input[type="text"], input[type="email"], input[type="tel"],
               input[type="number"], input[type="date"], select, textarea) {
    background-color: var(--ms-field, #F5F5F5);
    border-radius: var(--ms-radius-field, 6px);
}

/* Werkzeugleiste der Objektliste: Anzahl links, Sortierung rechts.
   Das Auswahlfeld zieht sich sonst ueber die volle Breite. */
.accommodation-list__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.accommodation-list__sort {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.accommodation-list__sort-select {
    width: auto;
    min-width: 14rem;
}


/* == 8  Fusszeile bleibt unten ============================================ */
/* Auf kurzen Seiten (Suche ohne Treffer, Impressum, 404) endete der Inhalt
   nach wenigen Zeilen und darunter stand eine grosse leere Flaeche. Das
   Grundgeruest wird deshalb zur Spalte ueber die volle Fensterhoehe, der
   Inhaltsbereich waechst, die Fusszeile wird nach unten geschoben.

   Wichtig: KEIN position:fixed — die Fusszeile bleibt Teil des Flusses und
   rutscht bei langen Seiten ganz normal nach unten aus dem Bild. */

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;   /* zaehlt die Adressleiste mobiler Browser mit */
}

#container {
    flex: 1 0 auto;
}

#footer {
    margin-top: auto;
    flex: 0 0 auto;
}


/* == 9  Such- und Ergebnisseite =========================================== */
/* Die Filterformulare kommen als nackte .ce_form-Bloecke: alle Felder und
   Buttons untereinander, ueber die volle Breite. Hier bekommen sie die
   Kartenoptik der Marke und ein Raster, das mitwaechst.                    */

/* --- Brotkrumen ---------------------------------------------------------- */

.mod_breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-size: .9rem;
    color: var(--ms-muted, #7A7A7A);
}

.mod_breadcrumb li + li::before {
    content: "›";
    margin-right: .5rem;
    color: var(--ms-muted, #7A7A7A);
}

.mod_breadcrumb a {
    color: var(--ms-muted, #7A7A7A);
}

.mod_breadcrumb a:hover {
    color: var(--ms-gold, #BDB38B);
}

.mod_breadcrumb li.active {
    color: var(--ms-ink, #1D1D1B);
}

/* --- Filterformulare als Karte ------------------------------------------ */

#main .ce_form {
    background: var(--ms-surface, #fff);
    border-radius: var(--ms-radius, 10px);
    box-shadow: var(--ms-shadow-soft, 0 6px 24px rgba(0, 0, 0, .12));
    padding: var(--ms-pad, 1.25rem);
    margin-bottom: 1.25rem;
}

/* Felder nebeneinander, solange Platz ist. auto-fit statt fester Spalten:
   Der einfache Filter hat drei Felder, der erweiterte deutlich mehr — beide
   sollen ohne Sonderregel funktionieren. */
#main .ce_form .formbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem 1rem;
    align-items: end;
}

#main .ce_form .widget {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

#main .ce_form .widget label {
    font-weight: 500;
    font-size: .95rem;
}

#main .ce_form .widget input.text,
#main .ce_form .widget select {
    width: 100%;
}

/* Buttons: nur so breit wie noetig, nicht ueber die halbe Zeile. */
#main .ce_form .widget-submit {
    display: flex;
    align-items: flex-end;
}

#main .ce_form .submit {
    width: auto;
    white-space: nowrap;
}

/* „Zuruecksetzen“ ist eine Nebenhandlung und bekommt deshalb den Umriss-
   Stil — sonst stehen zwei gleichwertige goldene Flaechen nebeneinander
   und die eigentliche Suche verliert ihr Gewicht. */
#main .ce_form .submit[name="reset"] {
    background: transparent;
    border: 1px solid var(--ms-ink-soft, #535353);
    color: var(--ms-ink-soft, #535353);
}

#main .ce_form .submit[name="reset"]:hover {
    background: transparent;
    border-color: var(--ms-gold, #BDB38B);
    color: var(--ms-gold, #BDB38B);
}

/* --- Checkbox-Gruppen (Ausstattung, Unterkunftstypen) -------------------- */

#main .ce_form .widget-checkbox {
    grid-column: 1 / -1;
}

#main .ce_form fieldset.checkbox_container {
    border: 0;
    border-top: 1px solid var(--ms-line, #DEDEDE);
    margin: 0;
    padding: .75rem 0 0;
}

#main .ce_form fieldset.checkbox_container legend {
    padding: 0;
    margin-bottom: .75rem;
    font-weight: 500;
    font-size: .95rem;
    color: var(--ms-ink, #1D1D1B);
}

#main .ce_form fieldset.checkbox_container > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 1.5rem .5rem 0;
}

#main .ce_form fieldset.checkbox_container label {
    font-weight: 400;
    cursor: pointer;
}

/* Nicht waehlbare Merkmale bleiben sichtbar, treten aber zurueck — die
   Zahl in Klammern sagt dem Gast, dass es dazu gerade nichts gibt. */
#main .ce_form .is-disabled,
#main .ce_form label.is-disabled {
    color: var(--ms-muted, #7A7A7A);
    cursor: default;
}

/* --- Preisbereich -------------------------------------------------------- */

.price-range {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.price-range input {
    width: 100%;
    min-width: 0;
}

.price-range__sep {
    color: var(--ms-muted, #7A7A7A);
    flex: 0 0 auto;
}

/* --- Ergebnisbereich ----------------------------------------------------- */

.accommodation-list {
    margin-top: 1.25rem;
}

/* Die Ueberschrift wiederholt, was die Werkzeugleiste ohnehin sagt.
   Sie bleibt fuer Suchmaschinen und Screenreader stehen, tritt optisch
   aber nicht mehr als Riesenzeile auf. */
#main h1.content-headline {
    font-size: 1.75rem;
    margin-bottom: .75rem;
}

@media (min-width: 992px) {
    #main h1.content-headline {
        font-size: 2.2rem;
    }
}

/* Leeres Ergebnis: statt einer nackten Zeile eine ruhige Flaeche mit
   Luft — sonst wirkt die Seite kaputt statt nur ergebnislos. */
.accommodation-list__grid > p:only-child {
    grid-column: 1 / -1;
    background: var(--ms-surface, #fff);
    border-radius: var(--ms-radius, 10px);
    box-shadow: var(--ms-shadow-soft, 0 6px 24px rgba(0, 0, 0, .12));
    margin: 0;
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--ms-muted, #7A7A7A);
}


/* Leere Merkmalsgruppen (noch keine Ausstattung gepflegt) erzeugen sonst
   eine Ueberschrift mit Trennlinie und nichts darunter. */
#main .ce_form .widget-checkbox:not(:has(input:not([type="hidden"]))) {
    display: none;
}


/* == 10  Filter in drei Ausspielungen ===================================== */
/* Dasselbe Suchformular liegt dreimal in der Seite, unterschieden durch
   eine Zusatzklasse:
       .search-box--horizontal   quer ueber der Ergebnisliste (Desktop)
       .search-box--left         als Spalte links daneben     (Desktop)
       .search-box--mobile       Schublade von rechts         (schmal)
   Sichtbar ist immer nur, was zur Fensterbreite passt. Umschaltpunkt ist
   992 px — dieselbe Grenze wie beim Hauptmenue, damit nicht an zwei
   Stellen unterschiedlich umgebrochen wird.
   Die Schubladen-Mechanik steckt in files/layout/js/marienschacht.js. */

#main .search-box {
    background: var(--ms-surface, #fff);
    border-radius: var(--ms-radius, 10px);
    box-shadow: var(--ms-shadow-soft, 0 6px 24px rgba(0, 0, 0, .12));
    padding: var(--ms-pad, 1.25rem);
}


/* --- Wo sitzt die Klasse? ------------------------------------------------ */
/* Contao haengt die CSS-Klasse eines Formulars an das <form>, nicht an den
   umgebenden .ce_form-Block. Der Block traegt aber schon die Kartenoptik aus
   Abschnitt 9 — sonst steckt eine weisse Karte in der naechsten. Enthaelt
   ein .ce_form eine .search-box, tritt er deshalb zurueck und ueberlaesst
   der Box das Aussehen. Sitzt die Klasse doch am .ce_form selbst, greift
   diese Regel nicht und alles bleibt wie gehabt. */

#main .ce_form:has(.search-box) {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
}


/* --- Sichtbarkeit -------------------------------------------------------- */
/* Immer beides ausblenden: die Box UND ihren Wrapper. Bliebe der Wrapper
   stehen, saehe man eine leere weisse Flaeche an ihrer Stelle. */

@media (max-width: 991.98px) {
    #main .search-box--horizontal,
    #main .search-box--left,
    #main .ce_form:has(> .search-box--horizontal),
    #main .ce_form:has(> .search-box--left) {
        display: none;
    }
}

@media (min-width: 992px) {
    #main .search-box--mobile,
    #main .ce_form:has(> .search-box--mobile),
    .search-box-opener,
    .search-box-backdrop,
    [data-search-box-toggle] {
        display: none !important;
    }
}


/* --- Quer ueber der Liste ------------------------------------------------ */

#main .search-box--horizontal {
    margin-bottom: 1.25rem;
}

#main .search-box--horizontal .formbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .75rem 1rem;
    align-items: end;
}


/* --- Spalte links -------------------------------------------------------- */
/* Der Filter wird nach links ausgeschert, alles danach rueckt um seine
   Breite ein.

   Warum Float und nicht Raster: Im Raster muss ein Element, das ueber zwei
   Zeilen spannt, in diese Zeilen hineinpassen — der Browser verteilt seine
   Hoehe darauf. Bei leerem Suchergebnis ist der Filter hoeher als
   Ueberschrift plus Liste, und genau diese Verteilung riss eine Luecke
   zwischen beide. Ein ausgescherter Filter steht ausserhalb des normalen
   Flusses; die Hoehen von Ueberschrift und Liste bleiben davon unberuehrt,
   egal wie lang der Filter ist. */

@media (min-width: 992px) {
    #main .mod_article:has(.search-box--left) {
        --ms-filter-width: 300px;
        --ms-filter-gap: 2rem;
    }

    /* Ausgeschert wird die Box selbst oder der Block, der sie enthaelt —
       je nachdem, wo die Klasse gesetzt wurde. */
    #main .mod_article:has(.search-box--left) > .search-box--left,
    #main .mod_article:has(.search-box--left) > *:has(.search-box--left) {
        float: left;
        width: var(--ms-filter-width);
        margin-right: var(--ms-filter-gap);
        position: sticky;
        top: 1.5rem;
    }

    /* Alles, was NACH dem Filter kommt — Ueberschrift, Werkzeugleiste,
       Ergebnisliste — rueckt ein. Ueber den Geschwister-Kombinator gilt das
       auch fuer Bausteine, die spaeter dazukommen; eine Aufzaehlung
       einzelner Klassen wuerde beim naechsten neuen Element wieder brechen. */
    #main .mod_article:has(.search-box--left) > .search-box--left ~ *,
    #main .mod_article:has(.search-box--left) > *:has(.search-box--left) ~ * {
        margin-left: calc(var(--ms-filter-width) + var(--ms-filter-gap));
    }

    #main .mod_article:has(.search-box--left) > .accommodation-list {
        margin-top: 0;
    }

    #main .mod_article:has(.search-box--left) > h1.content-headline {
        margin-top: 0;
    }

    /* Ist der Filter laenger als die Ergebnisse, muss der Artikel ihn
       trotzdem umschliessen — sonst ragt er in die Fusszeile. */
    #main .mod_article:has(.search-box--left)::after {
        content: "";
        display: block;
        clear: both;
    }

    /* Beim Scrollen durch lange Ergebnislisten bleibt der Filter stehen.
       Begrenzung, damit ein langer Filter nicht ueber den Bildschirm
       hinauswaechst. */
    #main .search-box--left {
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
    }
}


#main .search-box--left .formbody {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}

#main .search-box--left .widget-submit {
    display: block;
}

#main .search-box--left .submit {
    width: 100%;
}


/* --- Schublade von rechts ------------------------------------------------ */

#main .search-box--mobile {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    width: min(88vw, 380px);
    max-width: 100%;
    border-radius: var(--ms-radius, 10px) 0 0 var(--ms-radius, 10px);
    box-shadow: -10px 0 40px rgba(0, 0, 0, .25);
    padding: 3.5rem 1.5rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .3s ease-in-out;
    visibility: hidden;
}

#main .search-box--mobile.is-open {
    transform: translateX(0);
    visibility: visible;
}

/* Wer „weniger Bewegung“ eingestellt hat, bekommt sie ohne Fahrt. */
@media (prefers-reduced-motion: reduce) {
    #main .search-box--mobile {
        transition: none;
    }
}

#main .search-box--mobile .formbody {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}

#main .search-box--mobile .submit {
    width: 100%;
}

.search-box-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(29, 29, 27, .45);
}

.search-box-backdrop[hidden] {
    display: none;
}

/* Hintergrund festhalten, solange die Schublade offen ist. */
body.search-box-is-open {
    overflow: hidden;
}

/* Schliessen-Kreuz, vom Skript eingesetzt */
.search-box__close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--ms-ink, #1D1D1B);
}

.search-box__close::before,
.search-box__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.1rem;
    height: 2px;
    background: currentColor;
}

.search-box__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.search-box__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Ein eigener Schalter im Inhalt bekommt dieselbe Optik wie der vom Skript
   erzeugte — sonst steht dort ein nackter Browser-Button. Wer ihn anders
   haben will, gibt ihm eine eigene Klasse; diese Regel greift nur, solange
   keine vorhanden ist. */
@media (max-width: 991.98px) {
    [data-search-box-toggle]:not(.search-box-opener):not([class]) {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .625rem 1.25rem;
        border: 0;
        border-radius: var(--ms-radius, 10px);
        background: var(--ms-gold, #BDB38B);
        color: #fff;
        font: inherit;
        font-weight: 500;
        cursor: pointer;
    }
}

/* Schalter — nur, wenn die Seite keinen eigenen mitbringt */
.search-box-opener {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border: 0;
    border-radius: var(--ms-radius, 10px);
    background: var(--ms-gold, #BDB38B);
    color: #fff;
    font: inherit;
    font-weight: 500;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
    cursor: pointer;
}

.search-box-opener:hover {
    background: var(--ms-gold-dark, #A19876);
}

/* Reglersymbol, damit kein Icon-Paket noetig ist */
.search-box-opener__icon {
    position: relative;
    width: 1.1rem;
    height: .75rem;
}

.search-box-opener__icon::before,
.search-box-opener__icon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
}

.search-box-opener__icon::before { top: 0; }
.search-box-opener__icon::after  { bottom: 0; }


/* == 11  Schatten nicht abschneiden ======================================= */
/* Die Karten tragen ihren Schatten ausserhalb der eigenen Box. Sobald ein
   Elternelement clippt — im Starter-Theme stand z. B. `#wrapper { overflow:
   clip }` gegen horizontales Ueberlaufen — wird der Schatten an dessen Kante
   abgeschnitten. Dasselbe Clipping wuerde ausserdem `position: sticky` der
   linken Filterspalte ausser Kraft setzen.

   Deshalb hier ausdruecklich sichtbar. Kommt das horizontale Ueberlaufen
   dadurch zurueck, gehoert `overflow-x: clip` an den Verursacher (meist ein
   zu breites Bild oder ein negativer Rand), nicht an die ganze Seite. */

#wrapper,
#container,
#main,
#main > .inside,
#main .mod_article,
#main .ce_form {
    overflow: visible;
}


/* == 12  Hauptmenü auf schmalen Bildschirmen ============================== */
/* Unter 992 px fährt dieselbe Navigation vollflächig von oben herein. Die
   Mechanik steckt in files/layout/js/marienschacht.js; hier nur das Aussehen.

   Bewusst NICHT über display:none/block: ein Element, das gerade erst
   eingeblendet wird, animiert nicht. Deshalb liegt das Menü dauerhaft im
   Dokument, nur oberhalb des Bildschirms geparkt und per visibility aus dem
   Weg genommen — so ist es weder anklickbar noch für Screenreader sichtbar,
   kann aber gleiten. */

@media (max-width: 991.98px) {
    #header nav.mod_navigation {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1101;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        padding: 5rem 1.5rem 2rem;
        background: var(--ms-surface, #fff);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateY(-100%);
        visibility: hidden;
        transition: transform .32s ease-in-out, visibility .32s;
    }

    body.menu-is-open {
        overflow: hidden;
    }

    body.menu-is-open #header nav.mod_navigation {
        transform: translateY(0);
        visibility: visible;
    }

    /* Wer „weniger Bewegung“ eingestellt hat, bekommt es ohne Fahrt. */
    @media (prefers-reduced-motion: reduce) {
        #header nav.mod_navigation {
            transition: none;
        }
    }

    /* Die Punkte stehen groß und mittig — auf einer ganzen Bildschirmfläche
       wirkt eine linksbündige Miniliste verloren. */
    #header nav.mod_navigation ul.level_1 {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: .25rem;
        min-height: 60%;
    }

    #header nav ul.level_1 > li > :is(a, strong, span) {
        display: block;
        padding: .9rem 0;
        font-size: 1.4rem;
        text-align: center;
    }

    #header nav ul.level_1 > li + li > :is(a, strong, span) {
        border-top: 1px solid var(--ms-line, #DEDEDE);
    }

    /* „Jetzt buchen“ bleibt auch untereinander die Hauptaktion. */
    #header nav ul.level_1 > li.highlight {
        margin-top: 1.5rem;
    }

    #header nav ul.level_1 > li.highlight > :is(a, strong, span) {
        border-top: 0;
        padding: .9rem 1.5rem;
    }

    /* Das Logo bleibt über dem geöffneten Menü sichtbar, damit die Fläche
       nicht wie eine fremde Seite wirkt. Angehoben wird das Logo selbst,
       nicht die Pille: die Navigation liegt IN der Pille, mit ihr stiege
       sie also mit auf. */
    body.menu-is-open #logo {
        position: relative;
        z-index: 1102;
    }

    body.menu-is-open #header nav.mod_navigation {
        padding-top: 7rem;
    }

    /* Der Handlungsaufruf ist eine Pille — die zentriert sich nur, wenn die
       umgebende Zeile es vorgibt. */
    #header nav ul.level_1 > li.highlight {
        text-align: center;
    }
}

/* Das Menü deckt die ganze Fläche ab — eine Abdunklung dahinter wäre
   unsichtbar. Sie bleibt nur als Klickfläche zum Schließen erhalten. */
.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
}

.menu-backdrop[hidden] {
    display: none;
}

/* Schließen-Kreuz, vom Skript eingesetzt */
.menu-mobile__close {
    position: fixed;
    top: 1.75rem;
    right: 1.5rem;
    z-index: 1103;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--ms-ink, #1D1D1B);
}

.menu-mobile__close::before,
.menu-mobile__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.4rem;
    height: 2px;
    background: currentColor;
}

.menu-mobile__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.menu-mobile__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

body:not(.menu-is-open) .menu-mobile__close {
    display: none;
}

/* Auf großen Bildschirmen darf nichts davon übrig bleiben. */
@media (min-width: 992px) {
    .menu-backdrop,
    .menu-mobile__close {
        display: none !important;
    }
}


/* == 13  Objekte ohne Bild ================================================ */
/* Fehlt einem Mietobjekt das Bild, rendert das Bundle den Bildbereich gar
   nicht — die Karte faellt in sich zusammen, und was sonst ueber dem Bild
   liegt (Merkzettel-Herz, Neu-Kennzeichnung) rutscht auf den Titel.

   Statt eines Fremdbildes steht dort die Bildmarke auf hellem Beige: klar
   erkennbar als „noch kein Foto", ohne etwas vorzutaeuschen. Sobald ein Bild
   gepflegt ist, greift die Regel nicht mehr. */

.accommodation-card:not(:has(.accommodation-card__image img))::before,
.accommodation-row:not(:has(.accommodation-row__image img, .accommodation-row__img))::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: 200px;
    background-color: var(--ms-gold-soft, #EDEAE0);
    background-image: url('/files/layout/img/favicon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 64px;
    border-bottom: 1px solid var(--ms-line, #DEDEDE);
    opacity: .55;
}

/* In der Zeilenansicht sitzt das Bild links neben dem Text. */
.accommodation-list--row .accommodation-card:not(:has(.accommodation-card__image img))::before {
    width: 320px;
    max-width: 40%;
    height: auto;
    min-height: 180px;
    border-bottom: 0;
    border-right: 1px solid var(--ms-line, #DEDEDE);
}