/*
 * Synapsenbrenner - Block Erlebnis-Liste (acf/sb-erlebnis-liste, P7.2).
 * Design-Richtung "Synapsenbrenner Petrol". Karten- und Badge-Bausteine 1:1
 * aus cpt-sb-sehnsuchtsort.css extrahiert (Build-Skript, P7.1-Verfahren);
 * am Ende die Block-Eigenheiten: Grid statt Slider, Trefferzahl-Zeile,
 * Leerzustand. Die Slider-Regeln des Bausteins bleiben ungenutzt (kein
 * .sbErlebnisSlider im Block) und stoeren nicht.
 */

:root {
    --sb-petrol: #004445;
    --sb-petrolDunkel: #021C1E;
    --sb-mint: #77C49B;
    --sb-surface: #FAF9F6;
    --sb-surfaceAlt: #F2F0EB;
    --sb-inkMuted: #4B5563;
    --sb-linie: #E5E7EB;
}

/* -----------------------------
   Bauabschnitt 8 Teil 2: Aehnliche Erlebnisse. Slider + Teaser-Karten 1:1
   aus cpt-sb-reiseanbieter.css uebernommen (Entsch. 19/20); am Ende die
   Erlebnis-Eigenheiten in .sbAehnlicheWrap (Anker-Regel Entsch. 47,
   width-Fix Entsch. 48, H2 petrolDunkel, 4rem-Rhythmus nach dem CTA-Band).
   ----------------------------- */
.sbErlebnisseWrap {
    padding: 0 0 3rem;
}

.sbErlebnisseWrap h2 {
    margin: 0 0 0.4rem;
    line-height: 1.15;
}

.sbKennzeichnungListe {
    margin: 0 0 1.6rem;
    font-size: 1.4rem;
    color: var(--sb-inkMuted);
}

.sbErlebnisSlider {
    --slider-dots-color: var(--sb-petrol);
}

.sbErlebnisSlider .slick-arrow {
    background-color: var(--sb-petrol);
}

.sbErlebnisSlider .slick-list {
    margin: 0 -1.2rem;
}

.sbErlebnisSlider .slick-track {
    display: flex;
}

.sbErlebnisSlider .slick-slide {
    height: auto;
    display: flex;
    flex-direction: column;
}

.sbErlebnisKarteSlide {
    padding: 0 1.2rem;
}

.sbErlebnisKarteInner {
    position: relative;
    background-color: var(--sb-surface);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sbKarteBadge {
    position: absolute;
    top: 1rem;
    right: 2.2rem;
    z-index: 2;
    background-color: var(--sb-surfaceAlt);
    color: var(--sb-inkMuted);
    font-size: 1.2rem;
    padding: 0.2rem 1rem;
    border-radius: 999px;
}

.sbKarteBildWrap {
    display: block;
}

.sbKarteBildWrap img {
    width: 100%;
    height: auto;
    /* 15.09.2026 (Daniel): einheitliche Teaserhoehe. Ohne festes Seiten-
       verhaeltnis behaelt jedes Bild sein eigenes und die Karten einer Reihe
       werden unterschiedlich hoch. 3:2 quer, object-fit schneidet statt zu
       verzerren. Rueckbau: diesen Block auf width/height/display/radius
       zurueckkuerzen. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: var(--borderRadiusImage, 15px);
}

.sbKarteTextWrap {
    padding: 1.6rem 1.6rem 2rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.sbKarteTitel {
    margin: 0 0 0.8rem;
    font-size: 2rem;
    line-height: 1.15;
}

.sbKarteTitel a {
    color: inherit;
    text-decoration: none;
}

.sbKarteTitel a:hover {
    color: var(--sb-petrol);
}

.sbKarteKurz {
    margin: 0 0 1.2rem;
    font-size: 1.4rem;
}

.sbKarteDetailsToggle {
    background: none;
    border: 0;
    padding: 0;
    align-self: flex-start;
    font-size: 1.4rem;
    color: var(--linkColor);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    margin: 0 0 1.2rem;
}

.sbKarteDetailsToggle:hover {
    color: var(--linkColorHover);
}

.sbKarteDetails {
    margin: 0 0 1.2rem;
}

.sbKarteDetailsListe {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1.2rem;
    margin: 0;
    font-size: 1.4rem;
}

.sbKarteDetailsListe dt {
    font-weight: 600;
    margin: 0;
}

.sbKarteDetailsListe dd {
    margin: 0;
}

.sbKarteDimensionen {
    margin: 0 0 1.6rem;
}

.sbDimZeile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.2rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--sb-linie);
    font-size: 1.4rem;
}

.sbDimZeile:last-child {
    border-bottom: 0;
}

.sbDimFlammen {
    display: inline-flex;
    gap: 0.2rem;
    flex: 0 0 auto;
}

.sbFlamme {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}

.sbFlammeVoll {
    color: var(--sb-petrol);
}

.sbFlammeLeer {
    color: var(--sb-linie);
}

.sbKartePreis {
    margin: auto 0 1.2rem;
    padding-top: 1.2rem;
    font-size: 1.8rem;
    font-weight: 700;
}

.sbKarteCtaWrap {
    margin: 0;
}

/* -----------------------------
   P7.1: Badge-Zeile der Erlebnis-Teaser-Karte (Kapitel 07, Abschnitt 2):
   Reiseart, Dauer, Gruppengroesse als Pill-Chips (Muster sbTierArt,
   weiss/linie). Die Sehnsuchtsdimensionen (Top 4) sind zugleich in den
   Aufklapper gewandert.
   ----------------------------- */
.sbKarteBadges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0 0 1.2rem;
}

.sbKarteBadgeChip {
    display: inline-block;
    padding: 0.3rem 1.2rem;
    border: 1px solid var(--sb-linie);
    border-radius: 999px;
    background: #fff;
    font-size: 1.3rem;
    color: var(--sb-inkMuted);
}

.sbKarteDetails .sbKarteDimensionen {
    margin-top: 1.2rem;
}

/* -----------------------------
   P7.2: Block-Eigenheiten der Erlebnis-Liste. Sektion position:relative fuer
   myAnchor (Regel 47), Inner width:100% gegen die Flex-.container (Regel 48).
   Grid: Theme-Spalten (col-sm-6/col-lg-4) in eigener Flex-Row mit bs-Guttern;
   Karten als Flex-Spalten, damit .sbErlebnisKarteInner mit height:100%
   gleiche Kartenhoehen liefert.
   ----------------------------- */
.sbErlebnisListeBlock {
    position: relative;
    padding: 3rem 0 4rem;
}

.sbErlebnisListeInner {
    width: 100%;
}

.sbErlebnisListeAnzahl {
    margin: 0 0 0.4rem;
    font-size: 1.4rem;
    color: var(--sb-inkMuted);
}

.sbErlebnisListeInner .sbKennzeichnungListe {
    margin: 0 0 2rem;
}

.sbErlebnisListeGrid {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 3rem);
    margin: 0 -1.5rem;
}

.sbErlebnisListeGrid .sbErlebnisKarte {
    display: flex;
    flex-direction: column;
    margin: 0 0 3rem;
}

.sbErlebnisListeLeer {
    width: 100%;
    background-color: var(--sb-surface);
    border: 1px solid var(--sb-linie);
    padding: 3rem 2.4rem;
    text-align: center;
}

.sbErlebnisListeLeer p {
    margin: 0;
    color: var(--sb-inkMuted);
}

/* ---------------------------------------------------------------------------
 * P7.3 - Besucher-Filterleiste (Kapitel 07 Abschnitt 3)
 * ------------------------------------------------------------------------- */

:root {
    --sb-ink: #111827;
}

.sbFilterLeiste {
    width: 100%;
    margin: 0 0 2.4rem;
}

.sbFilterGruppen {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.sbFilterGruppe {
    position: relative;
}

.sbFilterGruppeBtn {
    background-color: var(--sb-surface);
    border: 1px solid var(--sb-linie);
    border-radius: 999px;
    padding: 0.8rem 1.8rem;
    font-size: 1.4rem;
    font-family: inherit;
    color: var(--sb-ink);
    cursor: pointer;
}

.sbFilterGruppeBtn::after {
    content: '\25BE';
    margin-left: 0.6rem;
    color: var(--sb-inkMuted);
}

.sbFilterGruppeBtn[aria-expanded="true"] {
    background-color: var(--sb-petrol);
    border-color: var(--sb-petrol);
    color: #fff;
}

.sbFilterGruppeBtn[aria-expanded="true"]::after {
    color: #fff;
}

.sbFilterPanel {
    position: absolute;
    top: calc(100% + 0.8rem);
    left: 0;
    z-index: 30;
    min-width: 26rem;
    max-width: 36rem;
    max-height: 34rem;
    overflow: auto;
    background-color: #fff;
    border: 1px solid var(--sb-linie);
    padding: 1.6rem;
    box-shadow: 0 12px 24px rgba(2, 28, 30, 0.12);
}

.sbFilterPanelBreit {
    min-width: 32rem;
}

/* Checkbox-Baum (Reiseziel, Reisethema) */
.sbFilterBaum {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sbFilterBaum .sbFilterBaum {
    margin-left: 1.8rem;
}

.sbFilterBaumZeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.sbFilterOption {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.4rem;
    color: var(--sb-ink);
    padding: 0.4rem 0;
    cursor: pointer;
}

.sbFilterOption input[type="checkbox"] {
    accent-color: var(--sb-petrol);
    width: 1.6rem;
    height: 1.6rem;
    margin: 0;
    flex-shrink: 0;
}

.sbFilterZahl {
    color: var(--sb-inkMuted);
    font-size: 1.3rem;
}

.sbFilterZweigBtn {
    background: none;
    border: 1px solid var(--sb-linie);
    border-radius: 999px;
    width: 2.4rem;
    height: 2.4rem;
    line-height: 1;
    font-size: 1.4rem;
    color: var(--sb-inkMuted);
    cursor: pointer;
    flex-shrink: 0;
}

/* Pill-Optionen (Reisezeit, Schwierigkeit) */
.sbFilterPills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.sbFilterPill {
    border: 1px solid var(--sb-linie);
    border-radius: 999px;
    padding: 0.5rem 1.2rem;
    background-color: #fff;
}

.sbFilterPill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sbFilterPill:has(input:checked) {
    background-color: var(--sb-surfaceAlt);
    border-color: var(--sb-petrol);
}

.sbFilterPill:has(input:focus-visible) {
    outline: 2px solid var(--sb-mint);
    outline-offset: 2px;
}

/* Schalter (Reiseart) */
.sbFilterSchalterWrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sbFilterSchalter {
    position: relative;
}

.sbFilterSchalter input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sbFilterSchalterZeiger {
    width: 3.4rem;
    height: 1.8rem;
    border-radius: 999px;
    background-color: var(--sb-linie);
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.sbFilterSchalterZeiger::after {
    content: '';
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: #fff;
    transition: left 0.15s ease;
}

.sbFilterSchalter input:checked + .sbFilterSchalterZeiger {
    background-color: var(--sb-petrol);
}

.sbFilterSchalter input:checked + .sbFilterSchalterZeiger::after {
    left: 1.8rem;
}

.sbFilterSchalter input:focus-visible + .sbFilterSchalterZeiger {
    outline: 2px solid var(--sb-mint);
    outline-offset: 2px;
}

/* Dual-Range (Dauer, Preis) */
.sbFilterRange {
    min-width: 22rem;
}

.sbFilterRangeWerte {
    margin: 0 0 1.2rem;
    font-size: 1.4rem;
    color: var(--sb-ink);
}

.sbFilterRangeSlider {
    position: relative;
    height: 2.4rem;
}

/* Sichtbare Schiene liegt EINMAL auf dem Container - die Input-eigenen
   Schienen sind transparent, sonst verdeckt der obere Input (Max) den
   Griff des unteren (Min). */
.sbFilterRangeSlider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 0.4rem;
    background-color: var(--sb-linie);
    border-radius: 999px;
}

.sbFilterRangeSlider input[type="range"] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 2.4rem;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

.sbFilterRangeSlider input[type="range"]::-webkit-slider-runnable-track {
    height: 0.4rem;
    background-color: transparent;
}

.sbFilterRangeSlider input[type="range"]::-moz-range-track {
    height: 0.4rem;
    background-color: transparent;
}

.sbFilterRangeSlider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 1.8rem;
    height: 1.8rem;
    margin-top: -0.7rem;
    border-radius: 50%;
    background-color: var(--sb-petrol);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--sb-linie);
    cursor: pointer;
}

.sbFilterRangeSlider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background-color: var(--sb-petrol);
    border: 2px solid #fff;
    cursor: pointer;
}

/* Chips + Zuruecksetzen */
.sbFilterFussWrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.2rem;
}

.sbFilterChips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.sbFilterChip {
    background-color: var(--sb-surfaceAlt);
    border: 1px solid var(--sb-linie);
    border-radius: 999px;
    padding: 0.4rem 1.2rem;
    font-size: 1.3rem;
    font-family: inherit;
    color: var(--sb-ink);
    cursor: pointer;
}

.sbFilterChip:hover {
    border-color: var(--sb-petrol);
}

.sbFilterReset {
    background: none;
    border: none;
    padding: 0.4rem 0;
    font-size: 1.3rem;
    font-family: inherit;
    color: var(--sb-inkMuted);
    text-decoration: underline;
    cursor: pointer;
}

.sbErlebnisListeLeer .sbFilterLeerReset {
    margin-top: 1.6rem;
}

.sbErlebnisListeAnzahl {
    margin: 0 0 1.2rem;
    font-size: 1.4rem;
    color: var(--sb-inkMuted);
}

/* Mobil: Gruppen stapeln, Panels im Fluss statt als Overlay */
@media (max-width: 767px) {
    .sbFilterGruppe {
        width: 100%;
    }

    .sbFilterGruppeBtn {
        width: 100%;
        text-align: left;
    }

    .sbFilterPanel {
        position: static;
        min-width: 0;
        max-width: none;
        box-shadow: none;
        margin-top: 0.8rem;
    }
}