/* =========================================
   33 – PREISLISTE MIT SAISON-SLIDER

   Feste Unterkunftsspalte links, Saisonen rechts.
   Die Zeilenhöhen werden zusätzlich vom JavaScript
   synchronisiert. Die CSS-Höhen sind Ausgangswerte.
========================================= */

/* =========================================
   1. GRUNDEINSTELLUNGEN UND FARBEN
   Hintergrundfarben hier zentral ändern.
========================================= */
.wf-element-33 {
    --wf-price-header-bg: #fbf8f6;
    --wf-price-row-bg: #fbf8f6;
    --wf-price-divider: #fff;
    --wf-price-text: #423934;
    --wf-price-entry-line: #c9bcb2;
    --wf-price-focus: #e1ac3b;
    width: 100%;
    min-width: 0;
}

.wf-element-33 .wf-headline {
    margin-bottom: 2rem;
}

/* =========================================
   2. SLIDER UND DARSTELLUNG OHNE JAVASCRIPT
   Ohne Swiper bleiben alle Saisonen sichtbar.
========================================= */
.wf-element-33 .wf-price-slider {
    width: 100%;
    min-width: 0;
}

.wf-element-33 .wf-price-slide {
    min-width: 0;
    height: auto;
}

.wf-element-33 .wf-price-slider:not(.swiper-initialized) {
    overflow: visible;
}

.wf-element-33 .wf-price-slider:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 24px;
    transform: none;
}

.wf-element-33 .wf-price-layout .wf-price-slider:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* =========================================
   3. SAISONKÖPFE UND REISEZEITRÄUME
========================================= */
.wf-element-33 .wf-price-caption {
    padding: 24px;
    background: var(--wf-price-header-bg);
    text-align: left;
    caption-side: top;
}

.wf-element-33 .wf-price-season-title {
    display: block;
    margin-bottom: 8px;
    font-size: 1.2rem;
    line-height: 1.3;
    text-align: center;
}

.wf-element-33 .wf-price-periods,
.wf-element-33 .wf-price-period,
.wf-element-33 .wf-price-period-start,
.wf-element-33 .wf-price-period-end {
    display: block;
}

.wf-element-33 .wf-price-period {
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
}

.wf-element-33 .wf-price-period + .wf-price-period {
    margin-top: 4px;
}

.wf-element-33 .wf-price-board {
    display: block;
    margin-top: 6px;
    text-align: center;
}

/* =========================================
   4. TABELLEN UND PREISZELLEN
   Grundregeln gelten auch für ältere Tabellen.
========================================= */
.wf-element-33 .wf-price-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    color: var(--wf-price-text);
    font-weight: 400;
}

.wf-element-33 .wf-price-table thead th {
    padding: 14px 18px;
    background: var(--wf-price-header-bg);
    border-bottom: 4px solid var(--wf-price-divider);
    text-align: left;
    font-size: 0.85rem;
    font-weight: 500;
}

.wf-element-33 .wf-price-table thead th:first-child {
    width: 60%;
}

.wf-element-33 .wf-price-table tbody th,
.wf-element-33 .wf-price-table tbody td {
    padding: 20px 18px;
    background: var(--wf-price-row-bg);
    border-bottom: 4px solid var(--wf-price-divider);
    text-align: left;
    vertical-align: middle;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.wf-element-33 .wf-price-table tbody td {
    border-left: 4px solid var(--wf-price-divider);
}

.wf-element-33 .wf-price-amount {
    display: block;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
}

.wf-element-33 .wf-price-entry + .wf-price-entry {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--wf-price-entry-line);
}

.wf-element-33 .wf-price-entry .wf-price-occupancy {
    display: block;
    margin: 0 0 5px;
}

.wf-element-33 .wf-price-unavailable {
    font-size: 0.85rem;
}

/* =========================================
   5. UNTERKUNFT: NAME, BILD UND BESCHREIBUNG
========================================= */
.wf-element-33 .wf-price-accommodation {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wf-element-33 .wf-price-image {
    display: block;
    flex: 0 0 90px;
    width: 90px;
    height: 65px;
    object-fit: cover;
}

.wf-element-33 .wf-price-accommodation-text {
    min-width: 0;
}

.wf-element-33 .wf-price-accommodation-title {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
}

.wf-element-33 .wf-price-accommodation-title a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wf-element-33 .wf-price-accommodation-title a:focus-visible {
    outline: 3px solid var(--wf-price-focus);
    outline-offset: 4px;
}

.wf-element-33 .wf-price-occupancy,
.wf-element-33 .wf-price-description {
    margin-top: 4px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.wf-element-33 .wf-price-basis {
    display: block;
    margin-top: 5px;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* =========================================
   6. FESTE ZIMMERSPALTE UND SAISON-TABELLEN
   Der Abstand zwischen links und rechts beträgt 4px.
========================================= */
.wf-element-33 .wf-price-layout {
    display: grid;
    grid-template-columns: minmax(260px, 32%) minmax(0, 1fr);
    align-items: start;
    gap: 4px;
}

.wf-element-33 .wf-price-fixed {
    min-width: 0;
}

/* Leeres Feld über den Zimmern bleibt transparent. */
.wf-element-33 .wf-price-fixed-heading {
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    padding: 16px;
    background: transparent;
    border-bottom: 4px solid var(--wf-price-divider);
    font-weight: 500;
}

.wf-element-33 .wf-price-fixed-row {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 120px;
    padding: 20px 18px;
    background: var(--wf-price-row-bg);
    border-bottom: 4px solid var(--wf-price-divider);
}

.wf-element-33 .wf-price-layout .wf-price-caption {
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    padding: 16px;
    border-bottom: 4px solid var(--wf-price-divider);
}

.wf-element-33 .wf-price-layout .wf-price-table {
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}

.wf-element-33 .wf-price-layout .wf-price-value {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 8px 16px;
    border-left: 0;
    text-align: center;
}

/* Unsichtbare Tabellenbeschriftungen für Screenreader. */
.wf-element-33 .wf-price-layout .wf-price-table-head,
.wf-element-33 .wf-price-layout .wf-price-room-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* =========================================
   7. UNTERKUNFTSGRUPPEN MIT MEHREREN BELEGUNGEN
   Ein Bild pro Unterkunft, darunter mehrere Preiszeilen.
   Der Verlauf erhält den weißen unteren Rand von 4px.
========================================= */
.wf-element-33 .wf-price-fixed-group {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    column-gap: 14px;
    padding: 0 18px 0 0;
    background: linear-gradient(
        to top,
        var(--wf-price-divider) 0,
        var(--wf-price-divider) 4px,
        var(--wf-price-row-bg) 4px,
        var(--wf-price-row-bg) 100%
    );
}

.wf-element-33 .wf-price-fixed-group:not(:has(.wf-price-group-image)) {
    grid-template-columns: minmax(0, 1fr);
}

.wf-element-33 .wf-price-fixed-group + .wf-price-fixed-group {
    border-top: 4px solid var(--wf-price-divider);
    margin-top: -4px;
}

.wf-element-33 .wf-price-group-content {
    min-width: 0;
}

.wf-element-33 .wf-price-fixed-group .wf-price-fixed-row {
    position: relative;
    min-height: 48px;
    padding: 8px 0;
    background: transparent;
    border-bottom: 4px solid transparent;
}

.wf-element-33 .wf-price-fixed-group .wf-price-fixed-row:only-child {
    min-height: 106px;
}

.wf-element-33 .wf-price-fixed-group .wf-price-occupancy {
    display: block;
    margin-top: 2px;
}

/* Feine Linie zwischen zwei Belegungen derselben Unterkunft. */
.wf-element-33 .wf-price-fixed-group .wf-price-fixed-row:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--wf-price-divider);
}

/* Bild bündig links und oben, mit weißem Abschluss unten. */
.wf-element-33 .wf-price-group-image {
    display: flex;
    position: relative;
    align-items: center;
    align-self: stretch;
    padding: 0;
    margin: 0;
}

.wf-element-33 .wf-price-group-image .wf-price-image {
    position: absolute;
    inset: 0;
    display: block;
    flex: none;
    width: 100%;
    height: calc(100% - 4px);
    max-height: none;
    margin: 0;
    object-fit: cover;
}

/* =========================================
   8. PREISHINWEIS UNTER DEM SLIDER
========================================= */
.wf-element-33 .wf-price-note {
    margin-top: 24px;
    font-size: 1.05rem;
    line-height: 1.7;
    text-align: center;
}

/* =========================================
   9. SLIDER-NAVIGATION UND TASTATURFOKUS
========================================= */
.wf-element-33 .wf-price-navigation[hidden] {
    display: none;
}

.wf-element-33 .wf-price-navigation {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 16px;
}

.wf-element-33 .wf-price-navigation button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--wf-price-text);
    border-radius: 0;
    background: transparent;
    color: var(--wf-price-text);
    font: inherit;
    font-size: 1.5rem;
    cursor: pointer;
}

.wf-element-33 .wf-price-navigation button:not(:disabled):hover {
    background: var(--wf-price-text);
    color: #fff;
}

.wf-element-33 .wf-price-navigation button:focus-visible {
    outline: 3px solid var(--wf-price-focus);
    outline-offset: 4px;
}

.wf-element-33 .wf-price-navigation button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* =========================================
   10. SMARTPHONE BIS 767px
   Alle mobilen Anpassungen an einer Stelle.
========================================= */
@media (max-width: 767px) {
    .wf-element-33 .wf-price-caption {
        padding: 20px 16px;
    }

    .wf-element-33 .wf-price-table thead th,
    .wf-element-33 .wf-price-table tbody th,
    .wf-element-33 .wf-price-table tbody td {
        padding: 14px 12px;
    }

    .wf-element-33 .wf-price-accommodation {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .wf-element-33 .wf-price-image {
        flex: none;
        width: 90px;
        height: 60px;
    }

    .wf-element-33 .wf-price-amount {
        font-size: 1.05rem;
    }

    .wf-element-33 .wf-price-layout {
        grid-template-columns: minmax(0, 44%) minmax(0, 56%);
        gap: 0;
    }

    .wf-element-33 .wf-price-fixed {
        border-right: 4px solid var(--wf-price-divider);
    }

    .wf-element-33 .wf-price-fixed-heading {
        padding: 12px 10px;
        font-size: 0.85rem;
    }

    .wf-element-33 .wf-price-layout .wf-price-caption {
        padding: 12px 10px;
    }

    .wf-element-33 .wf-price-season-title {
        font-size: 1.15rem;
    }

    .wf-element-33 .wf-price-period {
        font-size: 0.75rem;
    }

    .wf-element-33 .wf-price-fixed-row {
        min-height: 190px;
        padding: 16px 10px;
    }

    .wf-element-33 .wf-price-layout .wf-price-value {
        height: 48px;
        padding: 8px 10px;
    }

    .wf-element-33 .wf-price-accommodation-title {
        font-size: 0.95rem;
    }

    .wf-element-33 .wf-price-fixed .wf-price-basis {
        font-size: 0.75rem;
    }

    .wf-element-33 .wf-price-fixed-group {
        grid-template-columns: 56px minmax(0, 1fr);
        column-gap: 8px;
        padding: 0 8px 0 0;
    }

    .wf-element-33 .wf-price-fixed-group:not(:has(.wf-price-group-image)) {
        grid-template-columns: minmax(0, 1fr);
    }

    .wf-element-33 .wf-price-fixed-group .wf-price-fixed-row {
        min-height: 48px;
        padding: 8px 0;
    }

    .wf-element-33 .wf-price-fixed-group .wf-price-fixed-row:only-child {
        min-height: 106px;
    }

    .wf-element-33 .wf-price-fixed-group .wf-price-occupancy {
        font-size: 0.8rem;
    }
}