/* Musterhausbesichtigungen: Liste, Karte und Reservierungs-Modal. */

/* Das Theme setzt Montserrat ueber Elementselektoren (h1-h6, p), nicht auf
   body - body traegt den System-Stack. dt, dd und span faenden sonst kein
   Montserrat. Deshalb am Wurzelelement setzen und vererben lassen. */
.mhb-besichtigungen,
.mhb-besichtigung-modal {
    font-family: 'Montserrat', sans-serif;
}

.mhb-besichtigungen {
    --mhb-rot: #D71423;
    --mhb-flaeche: #f2f2f2;
    --mhb-text: #333333;
    /* Feste Kartenhoehe: sonst richtet sich jede Karte nach ihrem Text, die
       Liste wird ungleichmaessig und das Bild muss sich mitstrecken. Ein Wert,
       der an einer Stelle geaendert werden kann. */
    --mhb-kartenhoehe: 520px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Ein Elementor-Container, der seine Widgets nicht streckt (Zeilenrichtung
   oder align-items: flex-start), gibt dem Shortcode-Widget nur die Breite
   seines Inhalts. Die Karte war dann doppelt so breit wie ihre laengste
   Textzeile, die zugeklappte Vergangen-Liste schmaler als die aktive. Ein
   width: 100% auf der Liste hilft nicht, es bezieht sich auf das schrumpfende
   Widget; deshalb am Widget selbst ansetzen. */
.elementor-widget:has(.mhb-besichtigungen) {
    width: 100%;
}

/* --- Karte --- */

/* Muss nach den display-Regeln stehen: eine Autorenregel mit display: grid
   schlaegt sonst das [hidden] des Browsers, und versteckte Karten bleiben sichtbar. */
.mhb-besichtigung[hidden],
.mhb-besichtigung-modal__bild[hidden] {
    display: none;
}


.mhb-besichtigung {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    height: var(--mhb-kartenhoehe);
    background-color: #f2f2f2;
    color: #333333;
}

/* Die Breite muss die feste Groesse sein. Mit aspect-ratio und dem gestreckten
   Grid-Item leitet der Browser sonst die Breite aus der Zeilenhoehe ab und das
   Bild laeuft aus seiner Spalte heraus. Im gestapelten Layout gibt es keine
   Zeilenhoehe, dort uebernimmt aspect-ratio wieder. */
.mhb-besichtigung__bild {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    overflow: hidden;
}

.mhb-besichtigung__bild--leer {
    background-color: #e3e3e3;
}

/* Zwei Klassen tief, weil Elementor .elementor img { height: auto } setzt und
   das eine einzelne Klasse ueberbietet. Auf einer Elementor-Seite fuellt das
   Bild sonst seine Box nicht. */
.mhb-besichtigung .mhb-besichtigung__bild-img,
.mhb-besichtigung-modal .mhb-besichtigung-modal__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Laengere Texte scrollen innerhalb der Karte, statt sie auseinanderzuziehen. */
.mhb-besichtigung__inhalt {
    position: relative;
    overflow-y: auto;
    padding: 40px 48px 48px;
}

/* Die Fahne sitzt bündig an der rechten Kante der Karte. */
.mhb-besichtigung__fahne {
    position: absolute;
    top: 32px;
    right: 0;
    background-color: #D71423;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    /* Links mehr Luft: die Schraege nimmt oben 20px weg, sonst steht der Text
       fast auf der Kante. */
    padding: 12px 24px 12px 44px;
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
}

.mhb-besichtigung__titel {
    margin: 0 0 2px;
    padding-right: 180px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}

/* Eigene Zeile unter dem Hausnamen. Der Abstand nach rechts bleibt, sonst
   laeuft die Zeile unter die Fahne. */
.mhb-besichtigung__ort {
    margin: 0 0 24px;
    padding-right: 180px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 400;
}

.mhb-besichtigung__daten {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 8px 16px;
    margin: 0 0 28px;
}

.mhb-besichtigung__daten dt {
    font-weight: 700;
}

.mhb-besichtigung__daten dd {
    margin: 0;
}

.mhb-besichtigung__termine-titel {
    margin: 0 0 4px;
    font-weight: 700;
}

.mhb-besichtigung__termine {
    margin: 0 0 28px;
}

/* --- Buttons --- */

.mhb-besichtigung__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Masse aus dem Kontaktbereich der Hausseiten: Montserrat 700/16, 17px 32px,
   3px Rahmen. Zwei Klassen tief, weil das Theme mit .page-content a alle Links
   im Inhalt unterstreicht und das eine einzelne Klasse ueberbietet. */
.mhb-besichtigung .mhb-besichtigung__button,
.mhb-besichtigung__button {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    /* Seitlich wie im Kontaktbereich, oben und unten flacher: in der Kartenliste
       stehen zwei Buttons nebeneinander und wirken sonst zu wuchtig. */
    padding: 12px 32px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 3px solid #D71423;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 300ms ease, color 300ms ease;
}

.mhb-besichtigung__button--primaer {
    background-color: #D71423;
    color: #ffffff;
}

.mhb-besichtigung__button--primaer:hover,
.mhb-besichtigung__button--primaer:focus {
    background-color: #ffffff;
    color: #D71423;
}

.mhb-besichtigung__button--sekundaer {
    background-color: #ffffff;
    color: #D71423;
}

.mhb-besichtigung .mhb-besichtigung__button:hover,
.mhb-besichtigung .mhb-besichtigung__button:focus {
    text-decoration: none;
}

.mhb-besichtigung__button--sekundaer:hover,
.mhb-besichtigung__button--sekundaer:focus {
    background-color: #D71423;
    color: #ffffff;
}

/* Winkelbutton wie .mhb-angled-button ("Kontaktieren Sie uns"). Die Regeln sind
   aus mhb-elementor-ext/css/mhb-widget-style.css uebernommen statt die Klasse
   mitzubenutzen: das Plugin registriert mhb-widget-style nur und reicht es ueber
   einzelne Widgets ein, auf dieser Seite waere der Button also ungestylt. */
.mhb-besichtigung__laden {
    position: relative;
    z-index: 1;
    display: inline-block;
    overflow: hidden;
    padding: 14px 30px 14px 40px;
    border: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    color: #D71423;
    cursor: pointer;
    transition: color 400ms ease;
}

.mhb-besichtigung__laden::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 15px;
    border-right: 3px solid #D71423;
}

.mhb-besichtigung__laden span {
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mhb-besichtigung__laden span::before,
.mhb-besichtigung__laden span::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: skew(20deg);
}

.mhb-besichtigung__laden span::before {
    left: 19px;
    bottom: 0;
    border-bottom: 3px solid #D71423;
    border-left: 3px solid #D71423;
    transform-origin: bottom left;
}

.mhb-besichtigung__laden span::after {
    top: 0;
    right: -4px;
    border-top: 3px solid #D71423;
    border-right: 3px solid #D71423;
    transform-origin: top right;
}

/* Das Theme faerbt button:hover/:focus ein; zwei Klassen halten dagegen. */
.mhb-besichtigung__laden:hover,
.mhb-besichtigung__laden:focus {
    background-color: transparent;
    color: #ffffff;
}

.mhb-besichtigung__laden:hover span::before,
.mhb-besichtigung__laden:hover span::after,
.mhb-besichtigung__laden:focus span::before,
.mhb-besichtigung__laden:focus span::after {
    background-color: #D71423;
}

.mhb-besichtigungen__mehr {
    display: flex;
    justify-content: center;
}

/* --- Vergangene Besichtigungen --- */

.mhb-besichtigung--vergangen {
    position: relative;
}

/* Weicher Weissverlauf ueber die ganze Karte, nach unten dichter. Ohne
   pointer-events: none laege er ueber dem Button und schluckte den Klick. */
.mhb-besichtigung--vergangen::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 45%,
        rgba(255, 255, 255, 0.75) 100%
    );
}

/* Aufgeklappt braucht es weder den Hinweis nach unten noch die Abblendung: die
   Eintraege werden bewusst angesehen und sollen normal lesbar sein. Dass sie
   vergangen sind, sagen die Ueberschrift, die fehlende Fahne und der fehlende
   Reservierungsbutton. */
.mhb-besichtigungen--aufgeklappt .mhb-besichtigung--vergangen::after {
    display: none;
}

.mhb-besichtigungen--aufgeklappt .mhb-besichtigung--vergangen .mhb-besichtigung__inhalt {
    opacity: 1;
}

.mhb-besichtigungen--aufgeklappt .mhb-besichtigung--vergangen .mhb-besichtigung__bild-img {
    filter: none;
    opacity: 1;
}

.mhb-besichtigung--vergangen .mhb-besichtigung__inhalt {
    opacity: 0.45;
}

.mhb-besichtigung--vergangen .mhb-besichtigung__aktionen {
    opacity: 1;
}

.mhb-besichtigung--vergangen .mhb-besichtigung__bild-img {
    filter: grayscale(0.25);
    opacity: 0.75;
}

/* --- Slider --- */

/* Der Slider fuellt die Seitenverhaeltnis-Box absolut aus. Dadurch hat er eine
   feste Hoehe, und das height: 100% der Folien loest sauber auf, statt sich mit
   aspect-ratio gegenseitig hochzuschaukeln. */
.mhb-besichtigung__slider {
    position: absolute;
    inset: 0;
}

/* Swiper setzt .swiper-slide auf height: auto; ohne echte Hoehe bleiben die
   Bilder 0 Pixel hoch. */
.mhb-besichtigung__slider .swiper-wrapper,
.mhb-besichtigung__slider .swiper-slide {
    height: 100%;
}

.mhb-besichtigung__slider .swiper-button-prev,
.mhb-besichtigung__slider .swiper-button-next {
    color: #ffffff;
}

.mhb-besichtigung__slider .swiper-button-prev::after,
.mhb-besichtigung__slider .swiper-button-next::after {
    font-size: 24px;
    font-weight: 700;
}

/* Balken statt Punkte, wie .mhb-swiper-pagination im Plugin: 100x9, 15 Grad
   geschert, ohne Radius. Inaktiv weiss statt sandfarben, weil die Balken hier
   auf dem Foto liegen und nicht auf hellem Grund wie auf den Hausseiten. */
.mhb-besichtigung__slider .swiper-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
    bottom: 16px;
}

.mhb-besichtigung__slider .swiper-pagination-bullet {
    width: 100px;
    height: 9px;
    margin: 0;
    border-radius: 0;
    background: #ffffff;
    opacity: 1;
    transform: skew(15deg, 0deg);
}

.mhb-besichtigung__slider .swiper-pagination-bullet-active {
    background: #D71523;
}

/* --- Modal --- */

.mhb-besichtigung-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.mhb-besichtigung-modal[hidden] {
    display: none;
}

/* Fluent Forms setzt fuer Datumsfelder flatpickr ein. Der Kalender haengt an
   <body>, nicht am Feld, und liegt auf z-index 99999 - also unter dem Modal mit
   100000. body davor, damit nicht die Ladereihenfolge entscheidet. */
body .flatpickr-calendar,
body .flatpickr-calendar.open {
    z-index: 100010;
}

.mhb-besichtigung-modal__hintergrund {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
}

.mhb-besichtigung-modal__dialog {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: min(1280px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background-color: #f2f2f2;
    color: #333333;
}

/* Ohne Haus gibt es kein Bild: dann ist das Modal schmal und einspaltig. */
.mhb-besichtigung-modal__dialog--einspaltig {
    grid-template-columns: minmax(0, 1fr);
    width: min(620px, 100%);
}

.mhb-besichtigung-modal__auswahl {
    width: 100%;
}

/* Fluent Forms setzt .ff-el-form-control auf display: block und schlaegt damit
   das [hidden] des Browsers. Ohne diese Regel stehen Auswahlliste und Textfeld
   gleichzeitig da und das Haus erscheint doppelt. */
.mhb-besichtigung-modal__inhalt .ff-el-form-control[hidden],
.mhb-besichtigung-modal__inhalt select[hidden],
.mhb-besichtigung-modal__auswahl[hidden] {
    display: none;
}

.mhb-besichtigung-modal__bild {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    overflow: hidden;
}

.mhb-besichtigung-modal__inhalt {
    position: relative;
    padding: 40px 48px 48px;
}

.mhb-besichtigung-modal__titel {
    margin: 0 0 24px;
    padding-right: 180px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

/* Links oben: rechts oben sitzt die Fahne. */
.mhb-besichtigung-modal__schliessen {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 26px;
    line-height: 1;
    background-color: rgba(255, 255, 255, 0.9);
    border: 0;
    color: #333333;
    cursor: pointer;
}

/* Das Theme faerbt button:focus/:hover ein. Die Regel ist spezifischer als eine
   einzelne Klasse, deshalb hier die Zustaende ausdruecklich setzen. */
.mhb-besichtigung-modal__schliessen:hover,
.mhb-besichtigung-modal__schliessen:focus {
    background-color: #ffffff;
    color: #D71423;
}

.mhb-besichtigung-modal__hinweis {
    font-weight: 700;
    color: #D71423;
}

/* Fluent Forms leitet die Fokusfarbe aus dieser Variablen ab. */
.mhb-besichtigung-modal__inhalt {
    --fluentform-primary: #D71423;
}

/* Zusaetzlich ausdruecklich: die Regel von Fluent Forms ist gleich spezifisch
   wie eine mit zwei Klassen, dann entscheidet die Ladereihenfolge. Drei Klassen
   entscheiden sie nicht mehr. Das Theme faerbt den Fokusrahmen sonst grau. */
.mhb-besichtigung-modal .mhb-besichtigung-modal__inhalt .ff-el-form-control:focus,
.mhb-besichtigung-modal .mhb-besichtigung-modal__inhalt select:focus,
.mhb-besichtigung-modal .mhb-besichtigung-modal__inhalt textarea:focus {
    border-color: #D71423;
    outline: none;
    box-shadow: none;
}

/* Fluent Forms bringt kaum Abstand mit: die naechste Beschriftung klebt sonst
   am vorigen Eingabefeld. */
.mhb-besichtigung-modal__inhalt .ff-el-group {
    margin-bottom: 22px;
}

.mhb-besichtigung-modal__inhalt .ff-el-input--label {
    margin-bottom: 8px;
}

.mhb-besichtigung-modal__inhalt .ff-el-form-control {
    padding: 12px 16px;
}

/* Fluent Forms im Modal an die Kartenflaeche angleichen. */
/* Eingabefelder, Auswahl und Buttons erben die Schrift nicht von selbst. */
.mhb-besichtigung-modal__inhalt .ff-el-form-control,
.mhb-besichtigung-modal__inhalt select,
.mhb-besichtigung-modal__inhalt textarea,
.mhb-besichtigung-modal__inhalt .ff-el-input--label label {
    font-family: 'Montserrat', sans-serif;
}

.mhb-besichtigung-modal__inhalt .ff-el-form-control {
    background-color: #ffffff;
    border: 0;
}

.mhb-besichtigung-modal__inhalt .ff-el-form-control[readonly] {
    background-color: #ffffff;
    cursor: default;
}

/* Der Absendebutton folgt demselben Format wie die CTAs auf der Karte. Hier per
   CSS statt ueber die Formulareinstellungen, damit es auch gilt, wenn jemand den
   Button im Fluent-Forms-Editor anfasst. */
.mhb-besichtigung-modal__inhalt .ff-btn-submit {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    padding: 17px 32px;
    border: 3px solid #D71423;
    border-radius: 0;
    background-color: #D71423;
    color: #ffffff;
    transition: background-color 300ms ease, color 300ms ease;
}

.mhb-besichtigung-modal__inhalt .ff-btn-submit:hover,
.mhb-besichtigung-modal__inhalt .ff-btn-submit:focus {
    background-color: #ffffff;
    color: #D71423;
}

/* Zwei halbbreite Felder nebeneinander (container_class im Formular). */
.mhb-besichtigung-modal__inhalt .mhb-feld-halb {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 8px);
}

.mhb-besichtigung-modal__inhalt .mhb-feld-halb + .mhb-feld-halb {
    margin-left: 12px;
}

/* --- Mobil --- */

@media (max-width: 880px) {
    .mhb-besichtigung,
    .mhb-besichtigung-modal__dialog {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Gestapelt richtet sich die Hoehe wieder nach dem Inhalt. */
    .mhb-besichtigung {
        height: auto;
    }

    .mhb-besichtigung__inhalt {
        overflow-y: visible;
    }

    /* Gestapelt gibt es keine Zeilenhoehe zum Strecken: hier bestimmt wieder
       das Seitenverhaeltnis die Hoehe. */
    .mhb-besichtigung__bild,
    .mhb-besichtigung-modal__bild {
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .mhb-besichtigung__inhalt,
    .mhb-besichtigung-modal__inhalt {
        padding: 32px 24px 40px;
    }

    /* Ohne Schraege braucht es links auch keine zusaetzliche Luft. */
    .mhb-besichtigung__fahne {
        position: static;
        display: inline-block;
        margin-bottom: 16px;
        padding-left: 24px;
        clip-path: none;
    }

    .mhb-besichtigung__titel,
    .mhb-besichtigung__ort,
    .mhb-besichtigung-modal__titel {
        padding-right: 0;
    }

    .mhb-besichtigung__ort {
        font-size: 18px;
    }

    .mhb-besichtigung__daten {
        grid-template-columns: minmax(0, 1fr);
        gap: 0 0;
    }

    .mhb-besichtigung__daten dt {
        margin-top: 12px;
    }

    .mhb-besichtigung__aktionen {
        flex-direction: column;
    }

    .mhb-besichtigung__button {
        width: 100%;
    }

    .mhb-besichtigung-modal__inhalt .mhb-feld-halb {
        width: 100%;
    }

    .mhb-besichtigung-modal__inhalt .mhb-feld-halb + .mhb-feld-halb {
        margin-left: 0;
    }

    .mhb-besichtigung__slider .swiper-pagination-bullet {
        width: 85px;
    }
}