/*
   Synapsenbrenner - Archiv-Uebersichten (Kapitel 07 / P7.1).
   Gemeinsames Stylesheet fuer /anbieter/, /sehnsuchtsort/ und /moment/.
   :root-Token + Karten-Baustein (sbOrtMomentWrap/sbOmKarte) per Build-Skript
   1:1 aus cpt-sb-sehnsuchtsort.css extrahiert; danach Archiv-Eigenheiten.
   REM-Basis: 1rem = 10px.
*/

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

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

/* -----------------------------
   Archiv-Eigenheiten: Petrol-Hero (H1 + Trefferzahl) + Kartenliste.
   Die Liste nutzt sbOrtMomentListe (flex/column/gap) aus dem Baustein;
   .container ist display:flex - direkte Kinder brauchen width:100%
   (Entsch. 48), Sektionen position:relative (Entsch. 47).
   ----------------------------- */
.sbArchivHero {
    position: relative;
    background: var(--sb-petrol);
    padding: 6rem 0 5rem;
}

.sbArchivHero .sbArchivHeroInner {
    width: 100%;
}

.sbArchivTitel {
    margin: 0;
    color: #fff;
}

.sbArchivAnzahl {
    margin: 1rem 0 0;
    font-size: 1.6rem;
    color: var(--sb-mint);
}

.sbArchivListeWrap {
    position: relative;
    background: #fff;
    padding: 6rem 0;
}

.sbArchivListeWrap .sbArchivListeInner {
    width: 100%;
}

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

/* Reiseanbieter-Karte: sbOmKarte-Struktur + Eigenheiten (P7.1) */
.sbRaKarte .sbOmMeta {
    margin: 0 0 0.8rem;
    font-size: 1.4rem;
    color: var(--sb-inkMuted);
}

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