/* Ferienhaus Online — eigene Anpassungen (überschreibt villoz.css) */

:root {
    --villoz-base: #20407c;
    --villoz-base-rgb: 32, 64, 124;

    --villoz-accent: #fecc00;
    --villoz-accent-rgb: 254, 204, 0;
}

/* Utility-Klassen, falls in Templates gebraucht */
.text-accent       { color: var(--villoz-accent) !important; }
.bg-accent         { background-color: var(--villoz-accent) !important; }
.border-accent     { border-color: var(--villoz-accent) !important; }

/* Reiseziele-Block: gleiche Kartenhöhe pro Reihe (Villoz lässt Desktop auf height:auto,
   was bei beliebigen Upload-Bildern zu ungleichen Höhen führt). */
@media (min-width: 992px) {
    .destination-two__item img {
        height: 340px;
        object-fit: cover;
    }
}

/* Vue: FOUC vermeiden, bis die App gemountet ist */
[v-cloak] { display: none; }

/* Objekt-Listing Karte (Vue) */
.objekt-map {
    width: 100%;
    height: 440px;
    border-radius: 8px;
    overflow: hidden;
}

/* Pagination (Bootstrap) in Hausfarbe */
.fh-pagination {
    --bs-pagination-color: var(--villoz-base);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: var(--villoz-base);
    --bs-pagination-hover-border-color: var(--villoz-base);
    --bs-pagination-focus-color: var(--villoz-base);
    --bs-pagination-active-bg: var(--villoz-base);
    --bs-pagination-active-border-color: var(--villoz-base);
    --bs-pagination-border-radius: 6px;
    gap: 6px;
}
.fh-pagination .page-link {
    border-radius: 6px;
    min-width: 42px;
    text-align: center;
}

/* Reiseziel-Beschreibung (unten) */
.reiseziel-text .sec-title__title { text-transform: uppercase; }
.reiseziel-text__content img {
    max-width: 320px;
    height: auto;
    float: left;
    margin: 0 30px 16px 0;
    border-radius: 6px;
}
@media (max-width: 575.98px) {
    .reiseziel-text__content img { float: none; max-width: 100%; margin: 0 0 16px; }
}

/* Globaler Pagebuilder-Einleitungstext */
.section__intro {
    max-width: 760px;
    margin: 0 auto;
}
.section__intro > :last-child {
    margin-bottom: 0;
}

/* ── Section-Padding (Pagebuilder) ──────────────────────────────────────────
   Basis-.section hat Default-Padding; die Modifier (aus Style Settings) überschreiben.
   "Standard" (leerer Wert) → keine Modifier-Klasse → Default greift. */
:root {
    --fh-section-py: 105px;
    --fh-section-py-sm: 48px;
}
.section {
    padding-top: var(--fh-section-py);
    padding-bottom: var(--fh-section-py);
}
.section--pt-small      { padding-top: 75px; }
.section--pb-small      { padding-bottom: 75px; }
.section--pt-medium     { padding-top: 120px; }
.section--pb-medium     { padding-bottom: 120px; }
.section--pt-large      { padding-top: 140px; }
.section--pb-large      { padding-bottom: 140px; }
.section--pt-xtra-large { padding-top: 180px; }
.section--pb-xtra-large { padding-bottom: 180px; }
.section--pt-none       { padding-top: 0; }
.section--pb-none       { padding-bottom: 0; }

@media (max-width: 767.98px) {
    .section {
        padding-top: var(--fh-section-py-sm);
        padding-bottom: var(--fh-section-py-sm);
    }
    .section--pt-small,
    .section--pt-medium,
    .section--pt-large      { padding-top: 60px; }
    .section--pb-small,
    .section--pb-medium,
    .section--pb-large      { padding-bottom: 60px; }
    .section--pt-xtra-large { padding-top: 100px; }
    .section--pb-xtra-large { padding-bottom: 100px; }
    .section--pt-none       { padding-top: 0; }
    .section--pb-none       { padding-bottom: 0; }
}

/* ── Verfügbarkeitskalender (v-calendar) ───────────────────────────────── */
.objekt-calendar-wrap { margin-bottom: 24px; }

.objekt-calendar {
    /* v-calendar-Akzent auf Markenfarbe (Hausblau) themen — überschreibt color="blue" */
    --vc-accent-50:  #eef2f9;
    --vc-accent-100: #d6e0ef;
    --vc-accent-200: #aec1df;
    --vc-accent-300: #85a3cf;
    --vc-accent-400: #5c84bf;
    --vc-accent-500: #20407c;
    --vc-accent-600: #1d3a70;
    --vc-accent-700: #172e59;
    --vc-accent-800: #112343;
    --vc-accent-900: #0b172c;
}
.objekt-calendar .vc-container {
    width: 100%;
    font-family: inherit;
    border-color: #e6e8ee;
    border-radius: 8px;
}
.objekt-calendar__loading { padding: 40px 0; text-align: center; color: #6b7280; }

.objekt-calendar__legend {
    display: flex;
    gap: 24px;
    margin-top: 14px;
    font-size: 14px;
    color: #4b5563;
}
.objekt-calendar__legend span { display: inline-flex; align-items: center; gap: 8px; }
.objekt-calendar__dot { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.objekt-calendar__dot--free   { background: #ffffff; border: 1px solid #cbd5e1; }
.objekt-calendar__dot--booked { background: rgba(220, 38, 38, .18); border: 1px solid rgba(220, 38, 38, .5); }

.objekt-calendar__selection {
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(var(--villoz-base-rgb), .06);
    border-radius: 6px;
    font-size: 15px;
}
/* belegte (disabled) Tage klarer als „nicht buchbar" kennzeichnen */
.objekt-calendar .vc-day.is-disabled .vc-day-content { color: #cbd5e1; text-decoration: line-through; }

/* ── Bild-Wasserzeichen (Frontend-Overlay statt eingebrannt) ─────────────────
   Das Logo wird per CSS über die Objektbilder gelegt — die Originaldatei bleibt
   clean (Feature-Vorgabe). Greift auf Objekt-Cards (Twig _object-card.twig + Vue
   ObjektCard, beide `.villa-card__image`), die Detail-Galerie und die Lightbox.
   Pseudo-Element, weil <img> selbst kein ::after rendern kann.
   Bewusst NICHT auf Reiseziel-/Destinationsbilder (generische Regionenfotos). */
.villa-card__image,
.villa-details-three__gallery__image {
    position: relative;
}
.villa-card__image::after,
.villa-details-three__gallery__image::after,
.mfp-figure::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 104px;
    height: 28px;
    background: url("../img/ferienhaus-watermark.svg") right bottom / contain no-repeat;
    opacity: .82;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
    pointer-events: none;
    z-index: 3;
}
/* Karten-Variante etwas kompakter */
.villa-card__image::after {
    width: 88px;
    height: 24px;
    right: 12px;
    bottom: 12px;
}
/* Lightbox (Magnific Popup): größer, oberhalb der Caption-Leiste */
.mfp-figure {
    position: relative;
}
.mfp-figure::after {
    right: 22px;
    bottom: 52px;
    width: 150px;
    height: 41px;
    opacity: .9;
}

/* ── Anfrage-/Buchungs-Widget (Vue, Sidebar) ───────────────────────────── */
.objekt-booking__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 12px 0 16px;
    border-bottom: 1px solid #eceef3;
    margin-bottom: 16px;
}
.objekt-booking__price__label { color: #6b7280; font-size: 14px; }
.objekt-booking__price__value { color: var(--villoz-base); font-size: 22px; font-weight: 700; }
.objekt-booking__price__value small { font-weight: 400; font-size: 14px; color: #6b7280; }

.objekt-booking__dates {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}
.objekt-booking__dates > div {
    flex: 1;
    border: 1px solid #e6e8ee;
    border-radius: 6px;
    padding: 8px 12px;
    line-height: 1.3;
}
.objekt-booking__dates span { display: block; font-size: 12px; color: #6b7280; }
.objekt-booking__dates strong { font-size: 15px; }
.objekt-booking__hint { font-size: 12px; color: #9097a3; margin: 0 0 14px; }

/* destinationsBlock nutzt die Villoz-Hülle .destination-two (für die
   Spaltenbreiten 23.73%/52.54% + enge Gutter), aber das Section-Padding kommt
   schon vom Pagebuilder-Wrapper → Villoz' eigenes 120/110px-Padding entfernen. */
.section-type-destinationsBlock .destination-two { padding: 0; }

.objekt-booking textarea,
.objekt-booking input { width: 100%; }

/* Villoz stylt im Sidebar-Formular nur input[type=text|number|email]
   (villoz.css ~5296). tel + textarea fallen sonst auf den Browser-Default
   (Kasten-Rahmen) zurück → hier mit denselben Deklarationen nachziehen,
   damit alle Felder einheitlich aussehen. */
.villa-details-sidebar__control input[type=tel],
.villa-details-sidebar__control textarea {
    display: block;
    width: 100%;
    background-color: var(--villoz-white, #fff);
    color: var(--villoz-text, #737a83);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--villoz-font, "Plus Jakarta Sans", sans-serif);
    border: none;
    outline: none;
}
.villa-details-sidebar__control input[type=tel] {
    height: 50px;
    padding: 0 30px;
}
.villa-details-sidebar__control textarea {
    padding: 15px 30px;
    line-height: 1.5;
    resize: vertical;
}

.objekt-booking .is-invalid { border-color: #dc2626 !important; }
.objekt-booking__err { color: #dc2626; font-size: 12px; }

.objekt-booking__success {
    text-align: center;
    padding: 24px 8px;
    color: var(--villoz-base);
}
.objekt-booking__success .fas { font-size: 40px; color: #16a34a; margin-bottom: 10px; display: block; }

/* Honeypot — visuell + für Screenreader entfernt, aber im DOM für Bots */
.objekt-booking__hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Preloader: eigenes Logo statt Villoz-loader.png */
.preloader__image {
    background-size: 180px auto;
}