/*
 * Synapsenbrenner – CPT Erlebnis (Bauabschnitt 1: Hero + Sprungmarken;
 * Bauabschnitt 2: linke Sidebar mit 6 Boxen + Hauptspalten-Geruest).
 * Design-Richtung "Synapsenbrenner Petrol": Hero als Petrol-Flaeche mit hellem
 * Text (Flaechenwechsel statt Schatten), Bilder mit 15px-Radius, Karten eckig.
 * REM-Basis: 1rem = 10px (Southvision, html 62.5%). Fliesstext 1.6rem, small 1.4rem.
 * Farben aus globalen Theme-Variablen plus --sb-Tokens; die ctaBtn-Farben sind
 * im Hero und in der Preis-Box bewusst gescoped (weiss auf Petrol), damit der
 * Kontrast unabhaengig von der Theme-Palette stimmt.
 */

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

/* ------------------------------ Hero ------------------------------ */

.sbErlebnisHero {
    background-color: var(--sb-petrol);
    color: #fff;
    padding: 4rem 0;
}

.sbErlebnisHero h1 {
    margin: 0 0 1.2rem;
    color: #fff;
    line-height: 1.1;
}

.sbHeroKurzWrap {
    max-width: 62rem;
}

.sbHeroKurzWrap p {
    margin: 0 0 1.6rem;
    font-size: 1.8rem;
    line-height: 1.5;
}

.sbHeroFakten {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.sbHeroFakt {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 1.5rem;
}

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

.sbFaktIcon {
    flex: 0 0 auto;
    display: inline-flex;
    align-self: center;
    color: var(--sb-mint);
}

.sbFaktIconSvg {
    width: 1.6rem;
    height: 1.6rem;
    display: block;
}

.sbFaktText a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sbFaktText a:hover {
    color: var(--sb-mint);
}

.sbHeroBadge {
    display: inline-block;
    background-color: var(--sb-mint);
    color: var(--sb-petrolDunkel);
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.2rem 1rem;
    border-radius: 999px;
    margin-left: 0.6rem;
    vertical-align: middle;
}

.sbHeroPreis {
    margin: 0 0 1.6rem;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.15;
}

.sbHeroPreisZusatz {
    font-size: 1.5rem;
    font-weight: 400;
}

.sbHeroCtaWrap {
    margin: 0;
}

/* ctaBtn-Farben im Hero scopen: weiss auf Petrol, Hover Mint */
.sbErlebnisHero .ctaBtn.sbHeroCta {
    --ctaBtnStandardBg: #fff;
    --ctaBtnStandardTextColor: #004445;
    --ctaBtnStandardBgHover: #77C49B;
    --ctaBtnStandardTextHover: #021C1E;
    box-shadow: none;
    border-color: #fff;
}

.sbErlebnisHero .ctaBtn.sbHeroCta:hover {
    border-color: var(--sb-mint);
}

.sbHeroBilderWrap {
    margin: 0;
}

/* Galerie nach Block-20-Muster (Variante gross): Bild 1 volle Spaltenbreite,
   Bild 2+3 halb/halb darunter, ab Bild 4 unsichtbar (nur Lightbox).
   Die imgWraps sind bewusst NICHT klickbar (pointer-events: none, Marco
   17.08.); die Lightbox oeffnet ueber den Button "alle Bilder". */
.sbHeroGalerie {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.sbHeroGalerie .imgWrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--borderRadiusImage, 15px);
    pointer-events: none;
    cursor: normal;
}

.sbHeroGalerie .imgWrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
}

.sbHeroGalerie .imgWrap.swipebox {
    cursor: pointer;
}

.sbHeroGalerie > div:nth-of-type(1) {
    width: 100%;
    height: 30rem;
}

.sbHeroGalerie > div:nth-of-type(n+2) {
    width: calc(50% - 0.5rem);
    height: 16rem;
}

.sbHeroGalerie .galleryBtnWrap {
    position: absolute;
    z-index: 2;
    right: 1rem;
    bottom: 1rem;
    display: inline-block;
    background-color: var(--sb-surface);
    color: var(--sb-petrol);
    font-size: 1.4rem;
    padding: 0.8rem 1.6rem;
    border-radius: 999px;
}

.sbHeroGalerie .galleryBtnWrap:hover {
    background-color: var(--sb-mint);
    color: var(--sb-petrolDunkel);
}

.sbErlebnisHero .sbKiHinweis {
    margin: 0.8rem 0 0;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.75);
}

/* ----------------------- Sprungmarken-Submenue ---------------------- */

.sbSubmenuWrap {
    background-color: var(--sb-surface);
    border-bottom: 1px solid var(--sb-linie);
}

.sbSubmenu {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2.4rem;
}

.sbSubmenuLink {
    display: inline-block;
    padding: 1.3rem 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--textColor);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.sbSubmenuLink:hover {
    color: var(--sb-petrol);
    border-bottom-color: var(--sb-mint);
}

.sbRedaktionWrap {
    padding: 3rem 0;
}

/* ----------------- Inhalt: Sidebar (links) + Hauptspalte ------------- */

.sbErlebnisInhalt {
    padding: 4rem 0;
}

.sbSideBox {
    background-color: var(--sb-surfaceAlt);
    padding: 2rem;
    margin-bottom: 2rem;
}

.sbSideBox h3 {
    margin: 0 0 1.6rem;
    font-size: 1.8rem;
    color: var(--sb-petrol);
}

/* Box 1: Zusaetzliche Infos im Steckbrief-Stil des Reiseanbieters:
   Zeile = Icon + Label (klein, uppercase) oben, Wert eingerueckt darunter */
.sbInfoListe {
    margin: 0;
}

.sbInfoListe dt {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sb-inkMuted);
    margin: 0;
}

.sbInfoIcon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--sb-petrol);
}

.sbInfoListe dd {
    margin: 0.3rem 0 1.4rem;
    padding: 0 0 1.4rem 2.4rem;
    border-bottom: 1px solid var(--sb-linie);
    font-size: 1.5rem;
}

.sbInfoListe dd:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.sbJaNein-ja {
    color: var(--sb-petrol);
    font-weight: 600;
}

.sbJaNein-nein {
    font-weight: 600;
}

.sbInfoHinweis {
    color: var(--sb-inkMuted);
    font-weight: 400;
}

.sbInfoFussnote {
    margin: 1.2rem 0 0;
    color: var(--sb-inkMuted);
}

/* Box 2: Sehnsuchtsdimensionen als Flammen (Entscheidung 28) mit eigenem
   Tooltip-Styling (Theme-Markup .tooltip-wrapper, hier gescoped gestylt) */
.sbSideDimensionen .sbDimZeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    font-size: 1.4rem;
}

.sbSideDimensionen .sbDimLabelWrap {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.sbSideDimensionen .tooltip-wrapper {
    position: relative;
    display: inline-flex;
}

.sbSideDimensionen .info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: var(--sb-petrol);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1;
    cursor: help;
}

.sbSideDimensionen .tooltipContent {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 0.6rem);
    width: 22rem;
    background-color: var(--sb-petrolDunkel);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.4;
    padding: 0.8rem 1rem;
    z-index: 10;
}

.sbSideDimensionen .tooltip-wrapper:hover .tooltipContent,
.sbSideDimensionen .tooltip-wrapper:focus-within .tooltipContent {
    display: block;
}

.sbSideDimensionen .sbDimFlammen {
    display: inline-flex;
    gap: 0.2rem;
    color: var(--sb-petrol);
    flex: 0 0 auto;
}

.sbSideDimensionen .sbFlamme {
    width: 1.6rem;
    height: 1.6rem;
    display: block;
}

/* Box 3: Das laesst deine Synapsen brennen (Label/Wert ohne Icon) */
.sbSynapsenListe {
    margin: 0;
}

.sbSynapsenListe dt {
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sb-inkMuted);
    margin: 0;
}

.sbSynapsenListe dd {
    margin: 0.3rem 0 1.2rem;
    padding: 0 0 1.2rem;
    border-bottom: 1px solid var(--sb-linie);
    font-size: 1.5rem;
}

.sbSynapsenListe dd:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Box 4: Engagement */
.sbSideEngagement ul {
    margin: 0 0 1.2rem;
    padding-left: 1.8rem;
    font-size: 1.4rem;
}

.sbSideEngagement ul li {
    margin-bottom: 0.4rem;
}

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

.sbEngagementLink {
    font-size: 1.4rem;
}

.sbEngagementHinweis {
    margin: 1rem 0 0;
    color: var(--sb-inkMuted);
}

/* Box 5: Reiseberater (Ansprechpartner-Foto + Kontakt-Satz) */
.sbReiseberaterBox {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.sbReiseberaterFotoWrap {
    flex: 0 0 8rem;
}

.sbReiseberaterFotoWrap img {
    width: 100%;
    height: 8rem;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: var(--borderRadiusImage, 15px);
    display: block;
}

.sbReiseberaterTextWrap {
    flex: 1 1 auto;
    min-width: 0;
}

.sbReiseberaterLabel {
    margin: 0 0 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sb-inkMuted);
}

.sbReiseberaterText {
    margin: 0;
    font-size: 1.5rem;
}

/* Box 6: Preis-Box, Petrol-Flaeche wie der Hero (nicht mehr sticky,
   Korrektur Marco 17.08.) */
.sbPreisBox {
    background-color: var(--sb-petrol);
    color: #fff;
    padding: 2.4rem 2rem;
}

.sbPreisBox .sbPreisWert {
    margin: 0 0 1.6rem;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

.sbPreisBox .sbPreisZusatz {
    font-size: 1.4rem;
    font-weight: 400;
}

.sbPreisBox .ctaBtn.sbPreisCta {
    --ctaBtnStandardBg: #fff;
    --ctaBtnStandardTextColor: #004445;
    --ctaBtnStandardBgHover: #77C49B;
    --ctaBtnStandardTextHover: #021C1E;
    box-shadow: none;
    border-color: #fff;
}

.sbPreisBox .ctaBtn.sbPreisCta:hover {
    border-color: var(--sb-mint);
}

/* ------------------------------ Mobil ------------------------------ */

@media (max-width: 767px) {
    .sbErlebnisHero {
        padding: 2.4rem 0;
    }

    .sbHeroBilderWrap {
        margin-top: 2rem;
    }

    .sbHeroGalerie > div:nth-of-type(1) {
        height: 22rem;
    }

    .sbHeroGalerie > div:nth-of-type(n+2) {
        height: 13rem;
    }

    .sbHeroPreis {
        font-size: 2.2rem;
    }

    .sbSubmenu {
        gap: 0 1.8rem;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .sbSubmenuLink {
        white-space: nowrap;
    }
}

/* Mobil/Tablet: Hauptspalte vor der Sidebar */
@media (max-width: 991px) {
    .sbErlebnisInhalt {
        padding: 3rem 0;
    }

    .sbErlebnisInhalt .sbSidebar {
        order: 2;
    }

    .sbErlebnisInhalt .sbHauptspalte {
        order: 1;
    }
}

/* ------------------- Hauptspalte (Bauabschnitt 3) ------------------- */

.sbHauptspalte {
    padding-left: 3rem;
}

.sbHauptBeschreibungWrap h2:first-child {
    margin-top: 0;
}

.sbHauptSektion {
    margin-top: 4rem;
}

.sbHauptSektion h2 {
    margin: 0 0 1.6rem;
    color: var(--sb-petrolDunkel);
}

/* Highlights der Reise */
.sbHighlightListe {
    margin: 0;
    padding-left: 2rem;
}

.sbHighlightListe li {
    margin-bottom: 0.6rem;
}

.sbHighlightListe li::marker {
    color: var(--sb-petrol);
}

/* Reiseroute: Karte links, Ortsliste rechts */
.sbRoutenInnerWrap {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
    background-color: var(--sb-surfaceAlt);
    border-radius: 0;
    padding: 2.4rem;
}

.sbRoutenKarteWrap {
    flex: 0 0 24rem;
    max-width: 24rem;
}

.sbRoutenKarteWrap img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--borderRadiusImage, 15px);
}

.sbRoutenTextWrap {
    flex: 1 1 auto;
}

.sbRoutenTextWrap h2 {
    margin-top: 0;
}

.sbRoutenListe {
    margin: 0;
    padding-left: 2rem;
}

.sbRoutenListe li {
    margin-bottom: 0.4rem;
}

.sbRoutenListe li::marker {
    color: var(--sb-petrol);
}

/* Icon-Trio: Unterkunft / Verpflegung / Fortbewegung */
.sbIconTrioWrap {
    display: flex;
    gap: 2rem;
}

.sbIconTrioItem {
    flex: 1 1 0;
    text-align: center;
}

.sbIconTrioLabel {
    margin: 0 0 0.8rem;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-inkMuted);
}

.sbIconTrioIcon .sbFaktIconSvg {
    width: 3.2rem;
    height: 3.2rem;
    color: var(--sb-petrol);
}

.sbIconTrioWert {
    margin: 0.8rem 0 0;
    font-weight: 600;
    color: var(--sb-petrolDunkel);
}

/* Reisezeit: Ampel-Balken mit 12 Monatssegmenten */
.sbAmpelBalken {
    display: flex;
    margin: 0 0 1.6rem;
    padding: 0;
    list-style: none;
    border-radius: 999px;
    overflow: hidden;
}

.sbAmpelMonat {
    flex: 1 1 0;
    padding: 0.6rem 0;
    font-size: 1.2rem;
    text-align: center;
}

.sbAmpelGruen {
    background-color: var(--sb-mint);
    color: var(--sb-petrolDunkel);
}

.sbAmpelGrau {
    background-color: var(--sb-surfaceAlt);
    color: var(--sb-inkMuted);
}

.sbAmpelRot {
    background-color: var(--sb-ampelRot);
    color: #fff;
}

.sbReisezeitKlartext {
    margin: 0 0 1.2rem;
}

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

.sbReisezeitHinweis a {
    color: var(--sb-petrol);
    text-decoration: underline;
}

/* Fuer wen (nicht) geeignet */
.sbFuerWenWrap h2 + .sbFuerWenListe {
    margin-bottom: 2.4rem;
}

.sbFuerWenListe {
    margin: 0;
    padding-left: 2rem;
}

.sbFuerWenListe li {
    margin-bottom: 0.6rem;
}

.sbFuerWenJa li::marker {
    color: var(--sb-mint);
}

.sbFuerWenNein li::marker {
    color: var(--sb-ampelRot);
}

/* Mobil: Route stapeln, Icon-Trio umbrechen, Ampel zweizeilig lesbar */
@media (max-width: 767px) {
    .sbHauptspalte {
        padding-left: 1.5rem;
        margin-top: 4rem;
    }

    .sbRoutenInnerWrap {
        flex-direction: column;
    }

    .sbRoutenKarteWrap {
        flex-basis: auto;
        max-width: 100%;
    }

    .sbIconTrioWrap {
        flex-wrap: wrap;
    }

    .sbIconTrioItem {
        flex: 1 1 45%;
    }

    .sbAmpelBalken {
        flex-wrap: wrap;
        border-radius: 1.2rem;
    }

    .sbAmpelMonat {
        flex: 1 1 16%;
    }
}

/* Reiseroute: Icon nur noch als Karten-Fallback in der 24rem-Spalte, wenn
   routen_karte leer ist (routen_icon ueberschreibt das Standardicon);
   verlinkte Sehnsuchtsorte in der Ortsliste (Marco 17.08.) */
.sbRoutenIconFallback {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 18rem;
    background-color: var(--sb-surface);
    border-radius: var(--borderRadiusImage, 15px);
}

.sbRoutenIcon {
    display: inline-flex;
    color: var(--sb-petrol);
}

.sbRoutenIconSvg {
    width: 12rem;
    height: 12rem;
    display: block;
}

.sbRoutenIconFallback .sbRoutenIcon img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--borderRadiusImage, 15px);
}

.sbRoutenListe a {
    color: var(--sb-petrol);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sbRoutenListe a:hover {
    color: var(--sb-petrolDunkel);
}

/* ------------------- Reiseverlauf (Bauabschnitt 4) ------------------- */

.sbVerlaufIntro {
    margin: 0 0 2rem;
}

.sbVerlaufWrap .singleAkkordeon {
    background-color: var(--sb-surface);
    border: 1px solid var(--sb-linie);
    margin-bottom: 1.2rem;
}

.sbVerlaufWrap .akkordeonHeadline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.4rem 2rem;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--sb-petrolDunkel);
}

.sbVerlaufWrap .akkordeonHeadline:hover {
    color: var(--sb-petrol);
}

.sbEtappenPfeil {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-top: -0.4rem;
}

.sbVerlaufWrap .akkordeonHeadline.isOpen .sbEtappenPfeil {
    transform: rotate(-135deg);
    margin-top: 0.4rem;
}

.sbVerlaufWrap .akkordeonContent {
    display: none;
    overflow: hidden;
    padding: 0 2rem 2rem;
}

.sbVerlaufWrap .akkordeonContent.openAkkordeon {
    display: block;
}

.sbEtappeInnerWrap {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
}

.sbEtappeTextWrap {
    flex: 1 1 auto;
    min-width: 0;
}

.sbEtappeTextWrap > *:first-child {
    margin-top: 0;
}

.sbEtappeBildWrap {
    flex: 0 0 22rem;
    max-width: 22rem;
}

.sbEtappeBildWrap img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--borderRadiusImage, 15px);
}

/* Unterkunfts-Zeile: Text links, optionales unterkunft_bild rechts
   (Wireframe, Korrektur Marco 17.08.) */
.sbEtappeUnterkunftWrap {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.sbEtappeUnterkunftTextWrap {
    flex: 1 1 auto;
    min-width: 0;
}

.sbEtappeUnterkunftBildWrap {
    flex: 0 0 16rem;
    max-width: 16rem;
    margin-top: 1.6rem;
}

.sbEtappeUnterkunftBildWrap img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--borderRadiusImage, 15px);
}

.sbEtappeSubHead {
    margin: 1.6rem 0 0.6rem;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sb-inkMuted);
}

.sbEtappeListe {
    margin: 0;
    padding-left: 2rem;
}

.sbEtappeListe li {
    margin-bottom: 0.4rem;
}

.sbEtappeListe li::marker {
    color: var(--sb-petrol);
}

.sbEtappeZusatz {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: 0.4rem 1.6rem;
    margin: 1.6rem 0 0;
    font-size: 1.4rem;
}

.sbEtappeZusatz dt {
    margin: 0;
    color: var(--sb-inkMuted);
}

.sbEtappeZusatz dd {
    margin: 0;
    font-weight: 600;
}

.sbEtappeVerpflegung {
    margin: 1.6rem 0 0;
    font-size: 1.4rem;
}

.sbEtappeTransfer {
    margin: 1.6rem 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--sb-linie);
    font-size: 1.4rem;
    color: var(--sb-inkMuted);
}

/* Mobil: Etappen-Spalten untereinander (Hauptbild oben), Unterkunftsbild
   unter den Unterkunfts-Text, Zusatzfelder enger */
@media (max-width: 767px) {
    .sbEtappeInnerWrap {
        flex-direction: column;
        gap: 1.6rem;
    }

    .sbEtappeBildWrap {
        flex-basis: auto;
        max-width: 100%;
    }

    .sbEtappeUnterkunftWrap {
        flex-direction: column;
        gap: 0.8rem;
    }

    .sbEtappeUnterkunftBildWrap {
        flex-basis: auto;
        max-width: 100%;
        margin-top: 0;
    }

    .sbEtappeZusatz {
        grid-template-columns: 13rem 1fr;
    }
}

/* ---------------- Sprungmarken-Anker (Korrektur v0.9.0) --------------- */
/* .myAnchor ist im Theme position:absolute mit top:-15rem und braucht je
   Sektion einen positionierten Elternteil. Ohne den messen ALLE Anker vom
   <section> aus und landen an derselben Stelle (gefunden 17.08.). */
.sbSideBox,
.sbHauptSektion,
.sbAnbieterWrap,
.sbLeistungenWrap {
    position: relative;
}

/* Die .container des Themes ist ein Flex-Element; die Kinder unserer beiden
   neuen Baender brauchen darum ausdruecklich die volle Breite. */
.sbAnbieterWrap > .container > h2,
.sbAnbieterWrap > .container > .sbAnbieterBox,
.sbAnbieterWrap > .container > .sbAnbieterBewertungen,
.sbLeistungenWrap > .container > .sbLeistungenGrid {
    width: 100%;
}

/* ------------------ Dein Anbieter (Bauabschnitt 5) ------------------- */

.sbAnbieterWrap {
    background-color: var(--sb-surfaceAlt);
    padding: 4rem 0;
}

.sbAnbieterWrap h2 {
    margin: 0 0 2.4rem;
    color: var(--sb-petrolDunkel);
}

.sbAnbieterBox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2.4rem;
}

.sbAnbieterBildWrap {
    flex: 0 0 32rem;
    max-width: 32rem;
}

.sbAnbieterBildWrap img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--borderRadiusImage, 15px);
}

.sbAnbieterTextWrap {
    flex: 1 1 40rem;
    min-width: 0;
}

.sbAnbieterText p {
    margin: 0 0 1.6rem;
}

.sbAnbieterText p:last-child {
    margin-bottom: 0;
}

.sbAnbieterCtaWrap {
    margin: 2rem 0 0;
}

/* Bewertungsteil im selben Band; Klassennamen bewusst wie beim Reiseanbieter,
   damit die spaetere Widget-Ausspielung eine Einhaengestelle bedienen kann. */
.sbAnbieterBewertungen {
    margin-top: 3rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--sb-linie);
}

.sbAnbieterBewertungen h3 {
    margin: 0 0 1rem;
    font-size: 2rem;
    line-height: 1.15;
    color: var(--sb-petrol);
}

.sbBewertungenFazit {
    margin: 0;
    font-size: 1.8rem;
    max-width: 78rem;
}

.sbBewertungenWidget {
    margin: 0;
}

/* -------------- Leistungen zweispaltig (Bauabschnitt 5) -------------- */

.sbLeistungenWrap {
    padding: 4rem 0;
    border-top: 1px solid var(--sb-linie);
    border-bottom: 1px solid var(--sb-linie);
}

.sbLeistungenGrid {
    display: flex;
    flex-wrap: wrap;
}

.sbLeistungenSpalte {
    flex: 1 1 32rem;
    min-width: 0;
    padding: 0 3rem;
}

.sbLeistungenSpalte + .sbLeistungenSpalte {
    border-left: 1px solid var(--sb-linie);
}

.sbLeistungenSpalte h2 {
    margin: 0 0 2rem;
    font-size: 2.2rem;
    text-align: center;
    color: var(--sb-petrolDunkel);
}

/* Liste selbst linksbuendig, der Block aber mittig unter der Ueberschrift */
.sbLeistungenListe {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 100%;
}

.sbLeistungenListe li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.8rem;
    font-size: 1.5rem;
}

.sbLeistungenListe li:last-child {
    margin-bottom: 0;
}

.sbHaken {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: 0.2rem;
}

.sbHakenSvg {
    width: 1.6rem;
    height: 1.6rem;
    display: block;
}

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

.sbLeistungenExklusiv .sbHaken {
    color: var(--sb-inkMuted);
}

/* Mobil: Anbieter-Bild volle Breite, Leistungsspalten untereinander */
@media (max-width: 767px) {
    .sbAnbieterBildWrap {
        flex-basis: auto;
        max-width: 100%;
    }

    .sbLeistungenSpalte {
        padding: 0;
    }

    .sbLeistungenSpalte + .sbLeistungenSpalte {
        border-left: 0;
        border-top: 1px solid var(--sb-linie);
        margin-top: 3rem;
        padding-top: 3rem;
    }
}
/* -----------------------------
   Bauabschnitt 6: Sehnsuchtsorte + Gaensehautmomente (breite Karten).
   Beide Sektionen teilen sich sbOrtMomentWrap; .container ist display:flex,
   direkte Kinder brauchen deshalb width:100% (Entsch. 48). Anker-Regel:
   Sektion position:relative (Entsch. 47).
   ----------------------------- */
.sbOrtMomentWrap {
    position: relative;
    padding: 4rem 0;
}

.sbMomenteWrap {
    border-top: 1px solid var(--sb-linie);
}

.sbOrtMomentWrap > .container > h2,
.sbOrtMomentWrap > .container > .sbOrtMomentIntro,
.sbOrtMomentWrap > .container > .sbOrtMomentListe {
    width: 100%;
}

.sbOrtMomentWrap h2 {
    margin: 0 0 1.2rem;
    color: var(--sb-petrolDunkel);
}

.sbOrtMomentIntro {
    margin: 0 0 2.4rem;
    max-width: 80rem;
    color: var(--sb-inkMuted);
}

.sbOrtMomentListe {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Karte: Bild links (quadratisch), Text mittig, CTA rechts aussen.
   Kartenrundung 0 laut Design (Bilder 15px, Karten 0px). */
.sbOmKarte {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    padding: 2rem;
    border: 1px solid var(--sb-linie);
    background-color: var(--sb-surface);
}

.sbOmBildWrap {
    flex: 0 0 16rem;
    max-width: 16rem;
}

.sbOmBildWrap img {
    display: block;
    width: 100%;
    height: 16rem;
    object-fit: cover;
    border-radius: var(--borderRadiusImage, 15px);
}

.sbOmTextWrap {
    flex: 1 1 auto;
    min-width: 0;
}

.sbOmBadge {
    display: inline-block;
    margin-bottom: 0.8rem;
    padding: 0.3rem 1.2rem;
    border-radius: 999px;
    font-size: 1.3rem;
    line-height: 1.4;
}

.sbOmBadge.status-inklusive {
    background-color: var(--sb-petrol);
    color: var(--sb-surface);
}

.sbOmBadge.status-optional {
    border: 1px solid var(--sb-petrol);
    color: var(--sb-petrol);
}

.sbOmTitel {
    margin: 0 0 0.6rem;
    font-size: 2rem;
    line-height: 1.2;
}

.sbOmTitel a {
    color: var(--sb-petrolDunkel);
    text-decoration: none;
}

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

.sbOmKurz {
    margin: 0;
    font-size: 1.5rem;
    color: var(--sb-inkMuted);
}

.sbOmCtaWrap {
    flex: 0 0 auto;
}

/* Mobil: Bild volle Breite, CTA unter den Text */
@media (max-width: 767px) {
    .sbOmKarte {
        flex-wrap: wrap;
        gap: 1.6rem;
    }

    .sbOmBildWrap {
        flex-basis: 100%;
        max-width: 100%;
    }

    .sbOmBildWrap img {
        height: 20rem;
    }

    .sbOmCtaWrap {
        flex-basis: 100%;
    }
}

/* -----------------------------
   Bauabschnitt 7: Der Synapsenbrenner Check. Kastenform aus
   cpt-sb-reiseanbieter.css uebernommen (Entsch. 21), ohne Bewertungsteil.
   Anker-Regel: Sektion position:relative, Anker erstes Kind (Entsch. 47);
   .container ist display:flex, direkte Kinder brauchen width:100%
   (Entsch. 48). Kein Padding oben: die Momente-Sektion bringt 4rem mit.
   ----------------------------- */
.sbCheckWrap {
    position: relative;
    padding: 0 0 4rem;
}

.sbCheckWrap > .container > h2,
.sbCheckWrap > .container > .sbCheckBox {
    width: 100%;
}

.sbCheckWrap h2 {
    margin: 0 0 1.6rem;
    color: var(--sb-petrolDunkel);
}

.sbCheckBox {
    background-color: var(--sb-surfaceAlt);
    padding: 2.4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2.4rem;
}

.sbCheckFotoWrap {
    flex: 0 0 12rem;
}

.sbCheckFotoWrap img {
    width: 12rem;
    height: 12rem;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 50%;
    display: block;
}

.sbCheckTextWrap {
    flex: 1 1 32rem;
    min-width: 0;
}

.sbCheckIntro {
    margin: 0 0 1rem;
    font-weight: 700;
}

.sbCheckListe {
    margin: 0 0 1.6rem;
    padding-left: 2rem;
}

.sbCheckListe li {
    margin-bottom: 0.6rem;
}

.sbCheckListe li:last-child {
    margin-bottom: 0;
}

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

/* -----------------------------
   Bauabschnitt 8: FAQ-Akkordeon. 1:1 aus cpt-sb-reiseanbieter.css
   uebernommen (Entsch. 23); dazu Anker-Regel (Entsch. 47), width:100%-Fix
   (Entsch. 48) und H2 in petrolDunkel wie die Nachbarsektionen. Kein
   Padding oben: der Check bringt 4rem Bottom-Padding mit.
   ----------------------------- */
.sbFaqWrap {
    position: relative;
    padding: 0 0 4rem;
}

.sbFaqWrap > .container > h2,
.sbFaqWrap > .container > .akkordeonWrap {
    width: 100%;
}

.sbFaqWrap h2 {
    margin: 0 0 1.6rem;
    color: var(--sb-petrolDunkel);
}

.sbFaqWrap .akkordeonHeadline {
    cursor: pointer;
    position: relative;
    padding: 0 2rem 1.5rem 3.2rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--sb-linie);
}

.sbFaqWrap .akkordeonHeadline h3 {
    margin: 0;
    font-size: 1.8rem;
    line-height: 1.3;
}

.sbFaqWrap .akkordeonHeadline:before {
    content: '+';
    position: absolute;
    left: 0.4rem;
    top: 0;
    display: block;
    color: var(--sb-petrol);
    font-weight: 700;
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}

.sbFaqWrap .akkordeonHeadline.isOpen:before {
    -webkit-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
            transform: rotate(225deg);
}

.sbFaqWrap .akkordeonContent {
    overflow: hidden;
    display: none;
}

.sbFaqWrap .akkordeonContent.openAkkordeon {
    display: block;
}

.sbFaqWrap .akkordeonContent .innerContent {
    padding: 0 2rem 1.5rem 3.2rem;
}

.sbFaqWrap .akkordeonContent .innerContent p {
    margin: 0;
    max-width: 78rem;
}

/* -----------------------------
   CTA-Band: FESTER Platzhalter (Wireframe: graues Band zwischen FAQ und
   Aehnliche Erlebnisse) - Inhalt folgt in einem spaeteren Bauabschnitt.
   ----------------------------- */
.sbCtaWrap {
    background-color: var(--sb-surfaceAlt);
    padding: 4rem 0;
}

.sbCtaWrap > .container > .sbCtaPlatzhalter,
.sbCtaWrap > .container > .sbCtaHinweis {
    width: 100%;
    text-align: center;
}

.sbCtaPlatzhalter {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--sb-petrolDunkel);
}

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

/* -----------------------------
   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;
    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;
}

/* Erlebnis-Eigenheiten der Aehnliche-Sektion */
.sbAehnlicheWrap {
    position: relative;
    padding: 4rem 0;
}

.sbAehnlicheWrap > .container > h2,
.sbAehnlicheWrap > .container > .sbKennzeichnungListe,
.sbAehnlicheWrap > .container > .sbErlebnisSlider {
    width: 100%;
}

.sbAehnlicheWrap h2 {
    color: var(--sb-petrolDunkel);
}

/* -----------------------------
   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;
}