@import '_content/Carecom.Foundation/Carecom.Foundation.9j1wwte0n6.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Page-level frame. Header + main + footer in a single grid column.
   Outer max-width is enforced by .container inside SiteHeader / SiteFooter /
   the per-page <main> wrapper, not here — keeps full-bleed elements
   (hero images, banners) free to span the viewport. */

.page[b-2ywlzf084o] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    /* minmax(0, 1fr) statt der impliziten "auto"-Spalte: Grid-Items haben
       default min-width: auto = min-content. Wenn die min-content eines
       Items (z.B. <main> mit einer Foundation-/Leaflet-Komponente fester
       Pixelbreite tief drin) groesser als die verfuegbare Spalte ist,
       sprengt das Item den Track und macht die ganze Page breiter als
       das Viewport. minmax(0, 1fr) zwingt die Spalte auf "1fr mit
       Untergrenze 0" — Items duerfen unter ihre min-content shrinken,
       statt aus dem Track zu ragen. Standard-Patch fuer Grid-Item-
       Overflow. */
    grid-template-columns: minmax(0, 1fr);
    min-height: 100dvh;
    background: var(--bw-bg);
    color: var(--bw-fg);
}

.page__main[b-2ywlzf084o] {
    /* Each Page composes its own <main class="container"> via SitePage,
       so this outer <main id="main"> is just the focus anchor. */
    display: block;
}

/* Accessibility: keyboard-only "skip to content" link, visible only when
   focused. Lives at the very top of the document order. */
.skip-link[b-2ywlzf084o] {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: var(--bw-brand);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: 0 0 var(--bw-radius) 0;
    z-index: 100;
}
.skip-link:focus[b-2ywlzf084o] {
    left: 0;
    top: 0;
    width: auto;
    height: auto;
}

#blazor-error-ui[b-2ywlzf084o] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fffbe6;
    border-top: 1px solid #d4ba3e;
    color: #6f5a14;
    padding: .8rem 1rem;
    box-shadow: 0 -2px 6px rgba(0,0,0,.08);
    display: none;
    z-index: 1000;
}
#blazor-error-ui[style*="display: block"][b-2ywlzf084o] { display: block; }
#blazor-error-ui .reload[b-2ywlzf084o] { color: var(--bw-brand-dark); margin-left: 1rem; }
#blazor-error-ui .dismiss[b-2ywlzf084o] { float: right; cursor: pointer; }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-jdh9lgim3r],
.components-reconnect-repeated-attempt-visible[b-jdh9lgim3r],
.components-reconnect-failed-visible[b-jdh9lgim3r],
.components-pause-visible[b-jdh9lgim3r],
.components-resume-failed-visible[b-jdh9lgim3r],
.components-rejoining-animation[b-jdh9lgim3r] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-jdh9lgim3r],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-jdh9lgim3r],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-jdh9lgim3r],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-jdh9lgim3r],
#components-reconnect-modal.components-reconnect-retrying[b-jdh9lgim3r],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-jdh9lgim3r],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-jdh9lgim3r],
#components-reconnect-modal.components-reconnect-failed[b-jdh9lgim3r],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-jdh9lgim3r] {
    display: block;
}


#components-reconnect-modal[b-jdh9lgim3r] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-jdh9lgim3r 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-jdh9lgim3r 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-jdh9lgim3r 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-jdh9lgim3r]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-jdh9lgim3r 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-jdh9lgim3r {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-jdh9lgim3r {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-jdh9lgim3r {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-jdh9lgim3r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-jdh9lgim3r] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-jdh9lgim3r] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-jdh9lgim3r] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-jdh9lgim3r] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-jdh9lgim3r] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-jdh9lgim3r] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-jdh9lgim3r 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-jdh9lgim3r] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-jdh9lgim3r {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
/* About-Seite. Der Pfirsichblütenland-Abschnitt bekommt das Tao-Qian-SVG
   rechts an die Seite gefloated; auf schmalen Bildschirmen stapelt das
   Layout vertikal (Portrait zentriert oben, Text drunter). */

.about__lead[b-z4dx5ul1ab] {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.about__pfirsich[b-z4dx5ul1ab] {
    /* Ein flach umrandeter Block, der dem Pfirsichblüten-Abschnitt
       visuell den "Sonderstatus" gibt — sanft, kein Banner-Stil. Linke
       Akzentkante in der erdigen Brand-Farbe. */
    margin: 2rem 0;
    padding: 1.2rem 1.4rem 1.4rem;
    background: var(--bw-bg-muted);
    border-left: 3px solid var(--bw-earth);
    border-radius: var(--bw-radius-lg);
    /* Damit floats sauber clearen. */
    overflow: hidden;
}

.about__pfirsich h2[b-z4dx5ul1ab] {
    margin-top: 0;
    margin-bottom: .8rem;
    font-family: var(--bw-font-serif);
    color: var(--bw-earth);
}

.about__pfirsich-portrait[b-z4dx5ul1ab] {
    float: right;
    width: 120px;
    height: auto;
    margin: 0 0 .6rem 1.2rem;
    /* SVG nutzt currentColor — über die Box-Color steuern wir die
       Strichfarbe. Dezent erdig, damit die Zeichnung nicht zum Logo wird. */
    color: var(--bw-earth);
    opacity: .85;
}

.about__pfirsich-body[b-z4dx5ul1ab] {
    /* leicht erhöhte line-height für den Erzähltext, der etwas länger ist
       als die übrigen About-Abschnitte. */
    line-height: 1.7;
}

/* Mobile: SVG raus aus dem Float, mittig oben über dem Text. */
@media (max-width: 540px) {
    .about__pfirsich-portrait[b-z4dx5ul1ab] {
        float: none;
        display: block;
        margin: 0 auto 1rem;
    }
}

/* P.S.-Randnotiz zum Domainnamen am Seitenende. Dezent-italic-gedaempft,
   per Top-Border vom Inhaltsblock abgesetzt — liest sich als beilaeufige
   Pointe statt als eigener Block. <strong> bekommt eigene Farbe, damit
   "Wetter" und "Hochstraße" als Schluesselworte stehen; geschachteltes
   <em> (Domain "bestes-wetter.de") darf der Browser-Default in upright
   flippen, das gibt der Domain im italic-Umfeld einen schoenen Kontrast. */
.about__footnote[b-z4dx5ul1ab] {
    margin: 2.5rem 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--bw-border);
    font-size: .92rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--bw-fg-muted);
}
.about__footnote strong[b-z4dx5ul1ab] {
    color: var(--bw-fg-soft);
    font-weight: 600;
}
/* /Components/Pages/ArticleDetail.razor.rz.scp.css */
/* ===========================================================================
   Article detail page layout + body shortcode styles.
   --------------------------------------------------------------------------- */

.article[b-nccm1vwuj9] { margin-bottom: 3rem; }


/* ---- Hero ---------------------------------------------------------------- */
.article__hero[b-nccm1vwuj9] {
    position: relative;
    background: var(--bw-fg);
    /* Body-Edge-Padding (3 px in site.css) ueberbruecken — das Hero-Bild
       bleibt full-bleed bis ans Device-Edge, statt ein 3-px-Sand-Streifen
       am Rand stehen zu lassen. Overlay (mit Title + Teaser) erbt davon
       nichts, weil sie absolute positioniert sind und ihre Insets relativ
       zum .article__hero-Container greifen. */
    margin-inline: -3px;
}
/* ::deep weil das <img> seit der Migration auf Foundation-ResponsiveImage
   nicht mehr in dieser Component, sondern in der Foundation-Component
   rendert — das site-scoped [b-xxxxxxxxxx]-Attribut landet damit NUR
   am Wrapper, nicht am <img>. Ohne ::deep matcht das CSS das <img>
   nicht mehr und das Bild fiele auf seine intrinsischen Pixel zurueck
   (zu hoch / cap-loses Rendering). */
.article__hero[b-nccm1vwuj9]  .article__hero-img {
    width: 100%;
    height: clamp(280px, 50vh, 520px);
    object-fit: cover;
    display: block;
}
.article__hero-overlay[b-nccm1vwuj9] {
    /* Sits on top of the image, full-width gradient fade for readability.
       The earlier gradient (transparent → .7 at 70%) left the title at the
       overlay's top floating over the bare photo — and over a bright hero
       like the Loch Hourn panorama the dark global h1 colour disappeared
       entirely. Stronger gradient + explicit white text on the title fixes
       both. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem 1.25rem 2rem;
    color: #fff;
    background: linear-gradient(180deg,
                                rgba(0,0,0,.05)  0%,
                                rgba(0,0,0,.55) 35%,
                                rgba(0,0,0,.85) 100%);
}
.article__meta[b-nccm1vwuj9] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    font-size: .85rem;
    margin-bottom: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.article__category[b-nccm1vwuj9] {
    color: #d0e7d6;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(208, 231, 214, .4);
}
.article__category:hover[b-nccm1vwuj9] { color: #fff; border-bottom-color: #fff; }
.article__author strong[b-nccm1vwuj9] { color: #fff; }

/* Eingestellt-im-X-Hint fuer rueckwirkend eingestellte Touren. Erscheint
   nur wenn Posted-Datum mehr als 180 Tage vom Trip-Datum abweicht (siehe
   Article.ShowPostedHint). Visuell als kleiner Brand-getoenter Marker
   neben der Trip-Datum-Anzeige — nicht so prominent wie die Category-
   Verlinkung, aber sichtbar genug dass der Leser kapiert "der Eintrag
   ist neu, die Geschichte ist aelter". title-Attribut traegt den
   vollen Text fuer Hover/Screen-Reader. */
.article__posted-hint[b-nccm1vwuj9] {
    background: rgba(255, 255, 255, .12);
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #e8b04a;             /* amber — passt zum Sun-Glow im Hero */
    text-transform: none;        /* Override des Meta-Block-uppercase */
}

.article__title[b-nccm1vwuj9] {
    font-family: var(--bw-font-serif);
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.1;
    margin: 0 0 .6rem;
    letter-spacing: -.015em;
    /* The global h1 rule sets a near-black colour; on the hero overlay that
       reads as a smudge against a bright photo. Force white, with a subtle
       shadow as a safety net for the few seconds of slow connections when
       the gradient hasn't loaded yet. */
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.article__lead[b-nccm1vwuj9] {
    font-size: 1.1rem;
    line-height: 1.5;
    max-width: 60ch;
    color: rgba(255,255,255,.92);
    margin: 0;
}

.article__credit[b-nccm1vwuj9] {
    margin: .3rem auto 0;
    font-size: .75rem;
    color: var(--bw-fg-muted);
    text-align: right;
}

/* ---- Body ---------------------------------------------------------------- */
.article__body[b-nccm1vwuj9] {
    max-width: 740px;
    margin: 2rem auto 0;
    padding: 0 1.25rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Mobile: mehr horizontaler Atemraum + breite Blocks brechen um. Auf
   normalen Phones (393-430 px Viewport) gibt es ~25 px Rand statt 20 px,
   das ist die Reading-Padding-Hausnummer (Medium / Substack / Wikipedia
   mobile). Auf richtig schmalen Geraeten — Pixel Fold zu mit 344 px CSS-
   px — skaliert das Padding ueber clamp() sanft zurueck auf ~22 px, sonst
   wuerden 28 px dort 16 % der Bildschirmbreite verschlingen. Formel:
       clamp(1.25rem, 0.5rem + 4vw, 1.75rem)
       344 px ≈ 21.8 px   ·   412 px ≈ 24.5 px   ·   430 px ≈ 25.2 px
       500 px ≈ 28 px (Obergrenze)
   Galerie- und Tour-Meta-Grids fallen unter 640 px auf eine Spalte
   zurueck, Markdown-Tabellen werden in einen scrollbaren Wrapper
   gepackt — sonst sprengen mehrspaltige Tabellen den Reading-Column
   und schieben die ganze Seite horizontal. */
@media (max-width: 640px) {
    .article__body[b-nccm1vwuj9] {
        padding: 0 clamp(1.25rem, 0.5rem + 4vw, 1.75rem);
    }
    .article__hero-overlay[b-nccm1vwuj9] {
        padding: 2rem clamp(1.25rem, 0.5rem + 4vw, 1.75rem) 1.5rem;
    }
    .article__credit[b-nccm1vwuj9] {
        padding: 0 clamp(1.25rem, 0.5rem + 4vw, 1.75rem);
    }
    /* Markdown-Tabellen scrollbar wrappen damit eine 4-Spalten-Etappen-
       Tabelle (Tag | Strecke | km | hm) auf einem 360-px-Phone nicht
       die ganze Seite horizontal mitnimmt. display: block + overflow-x:
       auto auf der Tabelle selbst funktioniert ohne extra Wrapper-Div,
       das Markdig nicht ausstellt. */
    .article__body table[b-nccm1vwuj9] {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
    /* Die Mobile-Overrides fuer .bw-gallery + .bw-tour-meta stehen
       weiter unten als zweites @media-Block — bewusst NACH den Basis-
       Regeln dieser Klassen, damit der CSS-Cascade richtig dreht.
       Vorher standen sie hier oben und wurden von den spaeteren Basis-
       Regeln ueberschrieben (gleiche Spezifitaet, spaeter gewinnt). */
}
/* Witwen / Waisen unterdruecken: text-wrap: pretty laesst den Browser den
 * Zeilenumbruch so legen, dass kein einzelnes Wort allein in der letzten
 * Zeile sitzt (er holt typischerweise das vorletzte Wort der vorletzten
 * Zeile mit nach unten). text-wrap: balance fuer Headings verteilt mehr-
 * zeilige Ueberschriften auf gleichmaessig lange Zeilen. Browser ohne
 * Support fallen still auf den default-flow zurueck — kein Schaden. */
.article__body p[b-nccm1vwuj9],
.article__body li[b-nccm1vwuj9] {
    text-wrap: pretty;
}
.article__body h2[b-nccm1vwuj9] {
    font-family: var(--bw-font-serif);
    font-size: 1.55rem;
    margin: 2.4rem 0 .8rem;
    text-wrap: balance;
}
.article__body h3[b-nccm1vwuj9] {
    font-family: var(--bw-font-serif);
    font-size: 1.2rem;
    margin: 1.8rem 0 .5rem;
    text-wrap: balance;
}
.article__body img[b-nccm1vwuj9] {
    border-radius: var(--bw-radius-lg);
    margin: 1.4rem 0;
    cursor: zoom-in;
    transition: transform .25s ease, box-shadow .25s ease;
}
/* Quiet hover hint — the real enlargement happens on click via lightbox.js,
   which opens the existing .bw-lightbox overlay with the image at full size. */
.article__body img:hover[b-nccm1vwuj9],
.article__body img:focus-visible[b-nccm1vwuj9] {
    transform: translateY(-2px);
    box-shadow: var(--bw-shadow-md, 0 6px 18px rgba(0,0,0,.18));
    outline: none;
}
@media (prefers-reduced-motion: reduce) {
    .article__body img[b-nccm1vwuj9] { transition: none; }
    .article__body img:hover[b-nccm1vwuj9],
    .article__body img:focus-visible[b-nccm1vwuj9] { transform: none; }
}

/* affiliate links: visible nudge that this is a sponsored link */
.article__body a[data-affiliate][b-nccm1vwuj9]::after {
    content: '↗';
    margin-left: .25em;
    color: var(--bw-earth);
    font-size: .85em;
}

/* ---- Tags footer -------------------------------------------------------- */
.article__tags[b-nccm1vwuj9] {
    margin-top: 3rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--bw-border);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.article__tag[b-nccm1vwuj9] {
    background: var(--bw-bg-muted);
    border: 1px solid var(--bw-border);
    color: var(--bw-fg-soft);
    padding: .2rem .6rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: .82rem;
}
.article__tag:hover[b-nccm1vwuj9] {
    background: var(--bw-brand);
    color: #fff;
    border-color: var(--bw-brand);
}

/* ---- Shortcode-emitted blocks ------------------------------------------ */

/* :::product-card — Compact-Default
   --------------------------------------------------------------------
   Cards leben jetzt am Artikel-Ende in <section class="article__products">
   (siehe ArticleRenderer.ExtractProductCards). Default-Layout ist klein —
   schmale Padding, kleinerer Titel, kein Aside-Frame-Pomp. Reicht fuer
   die Standard-Empfehlung "Marke, ein Satz Begruendung, Amazon-Link".
   Cards mit ausfuehrlichem Erfahrungs-Text + Bonus-Tipps (MSR-Zelt) opt-en
   ueber :::product-card{ expanded="1" } und kriegen das frueher voll-
   formatige Layout via .bw-product-card--expanded zurueck. */
[b-nccm1vwuj9] .bw-product-card {
    margin: .8rem 0;
    padding: .7rem 1rem .85rem;
    background: var(--bw-bg-muted);
    border: 1px solid var(--bw-border);
    border-left: 3px solid var(--bw-earth);
    border-radius: var(--bw-radius);
    /* Sticky-Header (z-index 50) ueberlappt sonst beim Anker-Sprung aus
       dem Gear-Strip die Card-Oberkante. 80 px Puffer reicht fuer Header
       inkl. Border. Wirkt nur, wenn die Card per id="…" angesprungen wird. */
    scroll-margin-top: 80px;
}
[b-nccm1vwuj9] .bw-product-card__title {
    font-family: var(--bw-font-serif);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    color: var(--bw-earth);
}
[b-nccm1vwuj9] .bw-product-card__body p { margin: 0 0 .4rem; line-height: 1.5; font-size: .95rem; }
[b-nccm1vwuj9] .bw-product-card__body p:last-child { margin-bottom: 0; }
[b-nccm1vwuj9] .bw-product-card a[data-affiliate] {
    display: inline-block;
    background: var(--bw-earth);
    color: #fff;
    padding: .35rem .8rem;
    border-radius: var(--bw-radius);
    text-decoration: none;
    margin-top: .3rem;
    font-size: .92rem;
}
[b-nccm1vwuj9] .bw-product-card a[data-affiliate]:hover { background: #6f5535; }
[b-nccm1vwuj9] .bw-product-card a[data-affiliate]::after { color: rgba(255,255,255,.7); }

/* Sekundaerer Affiliate-Button — z.B. fuer Hinweise auf neuere Modelle
   ("Mini 3 bei Amazon ansehen") unter dem primaeren Mini-2-CTA. Outline
   statt Solid, kleinere Padding + Font, damit klar wird: das ist die
   "fuer den Vollstaendigkeitshalber"-Option, nicht die Hauptempfehlung.
   Markdown-Syntax: [Text](amazon:ASIN){.bw-affiliate-secondary} —
   Markdig's GenericAttributes-Extension setzt die Klasse aufs <a>. */
[b-nccm1vwuj9] .bw-product-card a[data-affiliate].bw-affiliate-secondary {
    background: transparent;
    color: var(--bw-earth);
    border: 1px solid var(--bw-earth);
    padding: .22rem .65rem;
    font-size: .82rem;
}
[b-nccm1vwuj9] .bw-product-card a[data-affiliate].bw-affiliate-secondary:hover {
    background: var(--bw-earth);
    color: #fff;
    border-color: var(--bw-earth);
}

/* Dezenter Hinweis-Absatz innerhalb einer Produkt-Card — z.B. fuer
   "braucht ein aktives Garmin-Abo"-Disclaimer unter Geraet-CTAs. Klein
   genug um nicht mit den Empfehlungs-Texten zu konkurrieren, dunkel
   genug um lesbar zu bleiben. Markdown-Syntax (Markdig GenericAttributes):
       Hinweis: …. {.bw-product-card__note}
   am Ende des Paragraph-Inhalts. */
[b-nccm1vwuj9] .bw-product-card__note {
    margin: .9rem 0 0;
    font-size: .83rem;
    font-style: italic;
    color: var(--bw-fg-muted);
    line-height: 1.5;
}

/* Expanded-Variante — opt-in via :::product-card{ expanded="1" }. Restored
   to the pre-Compact-default sizes for cards with longer personal text
   + bullet lists. Beispiel-Use-Case: MSR Access 1 mit den zwei Bonus-
   Tipps (Ecke markieren, Heringe mit Baendern). */
[b-nccm1vwuj9] .bw-product-card--expanded {
    margin: 1.6rem 0;
    padding: 1.1rem 1.3rem;
    border-left-width: 4px;
    border-radius: var(--bw-radius-lg);
}
[b-nccm1vwuj9] .bw-product-card--expanded .bw-product-card__title {
    font-size: 1.05rem;
    margin: 0 0 .4rem;
}
[b-nccm1vwuj9] .bw-product-card--expanded .bw-product-card__body p {
    font-size: 1rem;
    margin: 0 0 1em;
    line-height: 1.65;
}
[b-nccm1vwuj9] .bw-product-card--expanded .bw-product-card__body p:last-child { margin-bottom: 0; }
[b-nccm1vwuj9] .bw-product-card--expanded .bw-product-card__body ul {
    margin: .6rem 0 .8rem;
    padding-left: 1.4rem;
}
[b-nccm1vwuj9] .bw-product-card--expanded .bw-product-card__body li {
    margin: .35rem 0;
    line-height: 1.6;
}
[b-nccm1vwuj9] .bw-product-card--expanded a[data-affiliate] {
    padding: .4rem .9rem;
    margin-top: .4rem;
    font-size: 1rem;
}

/* Gear-Strip am Artikel-Anfang: kompakte Zeile mit allen Empfehlungs-
   Links — jeder springt per Anker auf die Card weiter unten. Sitzt
   visuell zwischen DisclosureBanner und dem ersten Story-Inhalt; sorgt
   dafuer, dass Empfehlungen direkt sichtbar bleiben, ohne den Story-
   Anfang nach unten zu druecken. */
[b-nccm1vwuj9] .article__gear-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .55rem;
    margin: 0 0 1.5rem;
    padding: .7rem .9rem;
    background: var(--bw-bg-muted);
    border-radius: var(--bw-radius);
    font-size: .92rem;
    line-height: 1.45;
    color: var(--bw-fg-soft);
}
[b-nccm1vwuj9] .article__gear-strip__intro {
    font-weight: 600;
    color: var(--bw-fg);
    margin-right: .15rem;
}
[b-nccm1vwuj9] .article__gear-strip a {
    color: var(--bw-brand-dark);
    text-decoration: underline;
    text-decoration-color: rgba(45, 90, 61, .4);
    text-underline-offset: 2px;
}
[b-nccm1vwuj9] .article__gear-strip a:hover {
    text-decoration-color: var(--bw-brand);
}
[b-nccm1vwuj9] .article__gear-strip__sep {
    color: var(--bw-fg-muted);
    opacity: .55;
    user-select: none;
}
[b-nccm1vwuj9] .article__gear-strip__icon {
    display: inline-block;
    margin-right: .15em;
    /* Emojis ignorieren color/text-decoration, brauchen aber font-style: normal
       fuer den Fall dass ein Parent kursiv wuerde. line-height: 1 vermeidet,
       dass die Emoji-Glyphen den Zeilenabstand im Strip aufdruecken. */
    font-style: normal;
    line-height: 1;
    text-decoration: none;
}

/* Empfehlungen-Sektion am Artikel-Ende — separiert vom Story-Body via
   Top-Border + serifened Heading. Die Cards selbst kommen aus dem Markdown
   (waren urspruenglich oben gestapelt, jetzt vom Renderer hierher
   gehoisted). Sitzt VOR der article__tags-Footer, damit Tags weiterhin
   den letzten Block des Articles bilden. */
[b-nccm1vwuj9] .article__products {
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bw-border);
}
[b-nccm1vwuj9] .article__products-heading {
    font-family: var(--bw-font-serif);
    font-size: 1.3rem;
    margin: 0 0 1rem;
}
[b-nccm1vwuj9] .article__products .bw-product-card:first-of-type {
    margin-top: 0;
}
/* Support-Hint unter Produkt-Cards ohne Affiliate-Link — dezente Zeile in
   gedaempfter Farbe, NICHT als Button (sonst konkurriert sie mit echten
   Provisions-CTAs in anderen Cards um Aufmerksamkeit). Italic gibt ihr
   den "by the way"-Charakter. */
[b-nccm1vwuj9] .bw-product-card__support-hint {
    margin: .8rem 0 0;
    font-size: .85rem;
    font-style: italic;
    color: var(--bw-fg-muted);
    line-height: 1.5;
}
[b-nccm1vwuj9] .bw-product-card__support-hint a {
    color: var(--bw-brand);
    text-decoration: underline;
    text-decoration-color: rgba(45, 90, 61, .35);
    text-underline-offset: 2px;
}
[b-nccm1vwuj9] .bw-product-card__support-hint a:hover {
    text-decoration-color: var(--bw-brand);
}

/* Article-Ende-Support-Hinweis. Opt-in via <article support-hint="1">.
   Sitzt zwischen Body und Tags; visuell ein dezenter Brand-getoenter
   Streifen — nicht ganz so laut wie die NewsletterBox direkt darunter,
   aber auch nicht so klein wie der per-Card-Hint, weil hier der Leser
   die Aufmerksamkeit gerade noch fuer eine bewusste Geste hat. */
.article__support-hint[b-nccm1vwuj9] {
    margin: 2rem 0 0;
    padding: 1rem 1.2rem;
    background: var(--bw-brand-soft);
    border-left: 3px solid var(--bw-brand);
    border-radius: var(--bw-radius);
    color: var(--bw-fg-soft);
}
.article__support-hint p[b-nccm1vwuj9] {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
}
.article__support-hint a[b-nccm1vwuj9] {
    color: var(--bw-brand-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(45, 90, 61, .4);
    text-underline-offset: 2px;
}
.article__support-hint a:hover[b-nccm1vwuj9] {
    text-decoration-color: var(--bw-brand);
}

/* :::offer — Empfehlungs-Karte fuer Service-Partner mit Provisions-Link.
   Visuell verwandt mit .bw-product-card, aber im Brand-Gruen-Akzent statt
   Erdfarbe — so unterscheidet sich "Service-Empfehlung" (Welcome Pickups,
   Booking, …) optisch vom "Produkt-Hinweis" (Amazon-Artikel) und ist nicht
   ausschliesslich textgleich. */
[b-nccm1vwuj9] .bw-offer {
    margin: 1.6rem 0;
    padding: 1.1rem 1.3rem;
    background: var(--bw-brand-soft);
    border: 1px solid var(--bw-border);
    border-left: 4px solid var(--bw-brand);
    border-radius: var(--bw-radius-lg);
}
[b-nccm1vwuj9] .bw-offer__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem .8rem;
    margin-bottom: .5rem;
}
[b-nccm1vwuj9] .bw-offer__title {
    font-family: var(--bw-font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bw-brand-dark);
}
[b-nccm1vwuj9] .bw-offer__perk {
    display: inline-block;
    padding: .15rem .6rem;
    background: var(--bw-brand);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 999px;
}
[b-nccm1vwuj9] .bw-offer__body p:last-child { margin-bottom: 0; }
[b-nccm1vwuj9] .bw-offer a[data-affiliate] {
    display: inline-block;
    background: var(--bw-brand);
    color: #fff;
    padding: .45rem 1rem;
    border-radius: var(--bw-radius);
    text-decoration: none;
    margin-top: .4rem;
    font-weight: 600;
}
[b-nccm1vwuj9] .bw-offer a[data-affiliate]:hover { background: var(--bw-brand-dark); }
[b-nccm1vwuj9] .bw-offer a[data-affiliate]::after { color: rgba(255,255,255,.7); }

/* :::pros-cons */
[b-nccm1vwuj9] .bw-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin: 1.6rem 0;
}
@media (max-width: 600px) {
    [b-nccm1vwuj9] .bw-pros-cons { grid-template-columns: 1fr; }
}
[b-nccm1vwuj9] .bw-pros-cons__pros,
[b-nccm1vwuj9] .bw-pros-cons__cons {
    list-style: none;
    padding: 1rem 1.2rem;
    margin: 0;
    border-radius: var(--bw-radius-lg);
}
[b-nccm1vwuj9] .bw-pros-cons__pros { background: #ecf5ee; }
[b-nccm1vwuj9] .bw-pros-cons__cons { background: #f6ebeb; }
[b-nccm1vwuj9] .bw-pros-cons__pros li { color: #2d5a3d; }
[b-nccm1vwuj9] .bw-pros-cons__cons li { color: #7a3a3a; }
[b-nccm1vwuj9] .bw-pros-cons__pros li::before { content: '✓ '; font-weight: 700; }
[b-nccm1vwuj9] .bw-pros-cons__cons li::before { content: '✗ '; font-weight: 700; }
[b-nccm1vwuj9] .bw-pros-cons li { padding: .15rem 0; }

/* :::tour-meta */
[b-nccm1vwuj9] .bw-tour-meta,
.bw-tour-meta--head[b-nccm1vwuj9] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .3rem 1.2rem;
    margin: 1.4rem 0;
    padding: .8rem 1.1rem;
    background: var(--bw-brand-soft);
    border-left: 4px solid var(--bw-brand);
    border-radius: var(--bw-radius);
    font-size: .92rem;
}
[b-nccm1vwuj9] .bw-tour-meta dt,
.bw-tour-meta--head dt[b-nccm1vwuj9] {
    font-weight: 600;
    color: var(--bw-brand-dark);
}
[b-nccm1vwuj9] .bw-tour-meta dd,
.bw-tour-meta--head dd[b-nccm1vwuj9] { margin: 0; color: var(--bw-fg); }

/* :::gallery */
[b-nccm1vwuj9] .bw-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .8rem;
    margin: 1.6rem 0;
}
[b-nccm1vwuj9] .bw-gallery img {
    /* Was: object-fit:cover + aspect-ratio:4/3 — kept the grid tidy but
       cropped portraits' top+bottom off. Now: keep natural aspect, let
       site.css cap the height. Grid tiles get slightly varied heights
       (portraits taller than landscapes) — easier to live with than
       chopped pictures. */
    margin: 0;
}

/* Unknown / fallback shortcode wrappers */
[b-nccm1vwuj9] .bw-block {
    margin: 1.4rem 0;
    padding: .8rem 1rem;
    background: var(--bw-bg-muted);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius);
}

/* :::quote — Pull-Quote-Block fuer Reise-Berichte. Idee aus carecom.de
   uebernommen, mit unserer Serif-Schrift, gedaempften Farben und
   leichten horizontalen Trennstrichen statt einer schweren Box. */
[b-nccm1vwuj9] .bw-quote {
    margin: 2.5rem 0;
    padding: 1.6rem 0;
    border-top: 1px solid var(--bw-border);
    border-bottom: 1px solid var(--bw-border);
    text-align: center;
}
[b-nccm1vwuj9] .bw-quote__text {
    margin: 0 0 .6rem;
    font-family: var(--bw-font-serif);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--bw-fg-soft);
}
[b-nccm1vwuj9] .bw-quote__mark {
    color: var(--bw-earth);
    font-weight: 700;
    /* Etwas mehr Luft zu den Anfuehrungszeichen, damit sie nicht am
       ersten/letzten Buchstaben des Zitats kleben. */
    padding: 0 .15em;
}
[b-nccm1vwuj9] .bw-quote__author {
    color: var(--bw-fg-muted);
    font-size: .9rem;
    font-style: normal;
}

/* ===== Mobile-Overrides (NACH den Basis-Regeln) ===============================
   Diese Overrides muessen in der Datei NACH den entsprechenden Basis-Regeln
   stehen, sonst gewinnt bei gleicher Spezifitaet die spaeter definierte
   Basis-Regel und der Mobile-Override wird stillschweigend geschluckt.
   ============================================================================= */
@media (max-width: 640px) {
    [b-nccm1vwuj9] .bw-gallery {
        grid-template-columns: 1fr;
    }

    /* Tour-Meta-Box auf Mobile: Spalten content-hugged statt "auto 1fr",
       damit die Wert-Spalte nicht ueber den ganzen Rest streckt und das
       Label/Wert-Paar auf einer Zeile bleibt UND eng beieinander sitzt.
       Vorher (auto 1fr): Wert klebte links der breiten 1fr-Spalte, weit
       weg vom Label. Probier-Iteration "1fr → Werte stapeln" hatte
       vertikale Platzverschwendung gebracht. Mit "auto auto" sind beide
       Spalten content-sized, Padding-rechts ist die natuerliche Folge
       und visuell unauffaellig. */
    .bw-tour-meta--head[b-nccm1vwuj9],
    [b-nccm1vwuj9] .bw-tour-meta {
        grid-template-columns: auto auto;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ===========================================================================
   Home page — full-bleed dark hero + content sections.
   =========================================================================== */

/* ---- Hero --------------------------------------------------------------- */
.home-hero[b-bitbqw2b1n] {
    position: relative;
    /* Dark fir-green ground with a soft amber "morning light" glow at the
       top-right — echoes the rising sun in the logo. */
    background:
        radial-gradient(60% 75% at 80% 12%, rgba(242, 184, 76, .26), transparent 72%),
        linear-gradient(168deg, #27543c 0%, #1a3623 100%);
    color: #f4ebd6;
    text-align: center;
    overflow: hidden;
    /* generous top, extra bottom room for the ridge SVG */
    padding: 4.5rem 1.25rem 7.5rem;
    /* Body-Edge-Padding (3 px in site.css) ueberbruecken, damit das
       Hero-Band optisch bis ans Device-Edge laeuft. */
    margin-inline: -3px;
}
.home-hero__inner[b-bitbqw2b1n] {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.home-hero__kicker[b-bitbqw2b1n] {
    margin: 0 0 1rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #e8b04a;
}
.home-hero__headline[b-bitbqw2b1n] {
    font-family: var(--bw-font-serif);
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: 1.04;
    letter-spacing: -.02em;
    margin: 0;
    color: #fbf5e6;
}
.home-hero__lead[b-bitbqw2b1n] {
    margin: 1.3rem auto 0;
    max-width: 32rem;
    font-size: 1.12rem;
    line-height: 1.6;
    color: rgba(244, 235, 214, .82);
}
.home-hero__ridge[b-bitbqw2b1n] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;            /* hairline overlap kills sub-pixel seam */
    width: 100%;
    height: clamp(48px, 7vw, 96px);
    display: block;
}

/* ---- Section headings on the home page ---------------------------------- */
.home-section-head[b-bitbqw2b1n] {
    font-family: var(--bw-font-serif);
    font-size: 1.7rem;
    margin: .5rem 0 .25rem;
}

/* ---- Category rails ----------------------------------------------------- */
/* Engerer Abstand (2rem statt 3rem) und kleinere Heading (1.35rem statt
   1.7rem), seit die Rails auf Compact-Tiles laufen — sonst dominiert die
   Sektions-Trennung den Inhalt. Latest oben behaelt die grosse
   .home-section-head-Variante. */
.home-category-rail[b-bitbqw2b1n] { margin-top: 2rem; }
.home-category-rail__head[b-bitbqw2b1n] {
    font-family: var(--bw-font-serif);
    font-size: 1.35rem;
    margin: 0 0 .6rem;
}
.home-category-rail__head a[b-bitbqw2b1n] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--bw-fg);
    text-decoration: none;
}
.home-category-rail__head a:hover[b-bitbqw2b1n] { color: var(--bw-brand); }
.home-category-rail__arrow[b-bitbqw2b1n] {
    color: var(--bw-brand);
    font-size: .8em;
    transition: transform .15s ease-out;
}
.home-category-rail__head a:hover .home-category-rail__arrow[b-bitbqw2b1n] {
    transform: translateX(4px);
}

/* ---- Empty state -------------------------------------------------------- */
.home-empty[b-bitbqw2b1n] {
    color: var(--bw-fg-muted);
    font-style: italic;
    background: var(--bw-bg-muted);
    padding: 1rem 1.2rem;
    border-radius: var(--bw-radius);
    border-left: 3px solid var(--bw-border);
}
/* /Components/Pages/SearchPage.razor.rz.scp.css */
.search[b-gw538gk99r] { max-width: 100%; }

.search__input[b-gw538gk99r] {
    width: 100%;
    padding: .8rem 1rem;
    font: inherit;
    font-size: 1.1rem;
    border: 2px solid var(--bw-border);
    border-radius: var(--bw-radius-lg);
    background: var(--bw-surface);
    color: var(--bw-fg);
}
.search__input:focus[b-gw538gk99r] {
    outline: none;
    border-color: var(--bw-brand);
}

.search__hint[b-gw538gk99r],
.search__noresults[b-gw538gk99r] {
    margin: .6rem 0 0;
    color: var(--bw-fg-muted);
    font-size: .9rem;
}
.search__noresults[b-gw538gk99r] { font-style: italic; }

.search__results[b-gw538gk99r] {
    margin-top: 1.5rem;
    display: grid;
    gap: .9rem;
}

/* Result rows are built by search.js — styled here so the script only
   has to emit plain markup. */
[b-gw538gk99r] .search-hit {
    display: block;
    padding: .9rem 1.1rem;
    background: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .15s;
}
[b-gw538gk99r] .search-hit:hover {
    border-color: var(--bw-brand);
    transform: translateY(-1px);
}
[b-gw538gk99r] .search-hit__cat {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bw-brand);
    font-weight: 600;
}
[b-gw538gk99r] .search-hit__title {
    font-family: var(--bw-font-serif);
    font-size: 1.15rem;
    margin: .15rem 0 .25rem;
    color: var(--bw-fg);
}
[b-gw538gk99r] .search-hit__teaser {
    margin: 0;
    font-size: .9rem;
    color: var(--bw-fg-soft);
    line-height: 1.5;
}
/* /Components/Pages/Support.razor.rz.scp.css */
/* Scoped styles fuer die Unterstuetzen-Seite. Klar an die ArticleCard /
   CARECOM-Selbstbedienung-Visuals angelehnt: weiches Card-Layout mit
   Icon-Tile links, ueberschriftenfett rechts, gruener CTA-Button. Hier
   gibt's bewusst KEIN Maskottchen — der Outdoor-Vibe traegt sich ueber
   das Ridge-SVG aus dem Hero anderswo, ein Strichmaennchen mit Einkaufs-
   wagen waere stilistisch fremd. */

.support__intro[b-k2fo6awtbr] {
    margin: 1.5rem 0 2rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--bw-fg-soft);
}

.support__partners[b-k2fo6awtbr] {
    display: grid;
    gap: 1.25rem;
    margin: 0 0 2.5rem;
}

.support__partner[b-k2fo6awtbr] {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem 1.6rem;
    background: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius-lg);
    align-items: flex-start;
    transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}
.support__partner:hover[b-k2fo6awtbr] {
    border-color: var(--bw-brand);
    box-shadow: 0 4px 10px rgba(31, 54, 35, .08),
                0 14px 30px rgba(31, 54, 35, .14);
    transform: translateY(-1px);
}

.support__partner-icon[b-k2fo6awtbr] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    /* Akzent-Hintergrund matcht den Hero-Sonnen-Schimmer — dezent amber
       statt der gruenen Markenfarbe, weil die gruene CTA-Box drunter
       sonst gegen das Icon kaempft. */
    background: rgba(232, 176, 74, .14);
    color: var(--bw-brand);
    border-radius: var(--bw-radius);
}
.support__partner-icon svg[b-k2fo6awtbr] { width: 30px; height: 30px; display: block; }

.support__partner-body[b-k2fo6awtbr] { flex: 1; min-width: 0; }

.support__partner-tagline[b-k2fo6awtbr] {
    margin: 0 0 .15rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--bw-fg-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.support__partner-name[b-k2fo6awtbr] {
    margin: 0 0 .6rem;
    font-family: var(--bw-font-serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bw-fg);
}
.support__partner-body p[b-k2fo6awtbr] {
    margin: 0 0 1rem;
    color: var(--bw-fg-soft);
    line-height: 1.55;
}

.support__partner-cta[b-k2fo6awtbr] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.05rem;
    background: var(--bw-brand);
    color: #fff;
    border-radius: var(--bw-radius);
    text-decoration: none;
    font-weight: 500;
    transition: background .15s ease;
}
.support__partner-cta:hover[b-k2fo6awtbr] {
    background: var(--bw-brand-dark);
    color: #fff;
    text-decoration: none;
}
.support__partner-cta svg[b-k2fo6awtbr] {
    width: 16px;
    height: 16px;
    transition: transform .15s ease;
}
.support__partner-cta:hover svg[b-k2fo6awtbr] { transform: translateX(2px); }

.support__disclosure[b-k2fo6awtbr] {
    margin: 2rem 0 0;
    color: var(--bw-fg-muted);
    font-size: .88rem;
    font-style: italic;
    border-top: 1px solid var(--bw-border);
    padding-top: 1rem;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .support__partner[b-k2fo6awtbr] { flex-direction: column; gap: 1rem; }
    .support__partner-icon[b-k2fo6awtbr] { width: 48px; height: 48px; }
}
/* /Components/Shared/AdSlot.razor.rz.scp.css */
.bw-ad-slot[b-ugk05rrrd5] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem auto;
    background: var(--bw-bg-muted);
    border: 1px dashed var(--bw-border);
    border-radius: var(--bw-radius);
    color: var(--bw-fg-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    overflow: hidden;
}
.bw-ad-slot__label[b-ugk05rrrd5] {
    /* Pseudo-floats above the eventual <ins> ad slot once it's filled;
       the loader scripts overlay the real ad on top of this. */
    pointer-events: none;
    opacity: .6;
}

/* Position-specific sizes — same DOM, different reserved real estate. */
.bw-ad-slot--inline[b-ugk05rrrd5]      { aspect-ratio: 4 / 1; max-width: 640px; }
.bw-ad-slot--leaderboard[b-ugk05rrrd5] { aspect-ratio: 728 / 90; max-width: 728px; }
.bw-ad-slot--sidebar[b-ugk05rrrd5]     { aspect-ratio: 300 / 250; max-width: 300px; }
/* /Components/Shared/ArticleCard.razor.rz.scp.css */
.article-card[b-9olomjdj9b] {
    display: flex;
    flex-direction: column;
    background: var(--bw-surface);
    border-radius: var(--bw-radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    /* Soft resting shadow gives depth without a hard border line; the hover
       lift is more pronounced for a clear, modern affordance. */
    box-shadow: 0 1px 2px rgba(31, 54, 35, .05),
                0 3px 10px rgba(31, 54, 35, .06);
    transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.article-card:hover[b-9olomjdj9b] {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(31, 54, 35, .08),
                0 14px 30px rgba(31, 54, 35, .14);
}

.article-card__hero[b-9olomjdj9b] {
    aspect-ratio: 16 / 10;
    background: var(--bw-bg-muted);
    overflow: hidden;
}
/* ::deep weil das <img> seit der Migration auf Foundation-ResponsiveImage
   nicht mehr in dieser Component, sondern in der Foundation-Component
   rendert — das site-scoped [b-xxxxxxxxxx]-Attribut landet damit NUR am
   .article-card__hero-Wrapper, nicht am <img>. Ohne ::deep matcht das
   CSS das <img> nicht und das Bild waechst auf seine intrinsische Groesse,
   reisst das aspect-ratio: 16/10 des Wrappers auf. */
.article-card__hero[b-9olomjdj9b]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.article-card__body[b-9olomjdj9b] { padding: 1rem 1.1rem 1.2rem; }

.article-card__meta[b-9olomjdj9b] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .78rem;
    color: var(--bw-fg-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .35rem;
}
.article-card__category[b-9olomjdj9b] { color: var(--bw-brand); font-weight: 600; }

.article-card__title[b-9olomjdj9b] {
    font-family: var(--bw-font-serif);
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 0 0 .4rem;
    color: var(--bw-fg);
}
.article-card__teaser[b-9olomjdj9b] {
    margin: 0;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--bw-fg-soft);
}

/* ----- Compact-Variante ----------------------------------------------------
   Kategorie-Rails auf der Home: kleinere Tiles, damit ein Artikel, der im
   Latest-Block schon prominent steht, in der Rail als "weiteres aus dieser
   Kategorie" wirkt und nicht als laute Wiederholung. Hero-Aspect bleibt
   16:10 (gleicher Bildausschnitt wie gross), nur Body, Schriften und
   Paddings ruecken zusammen. Teaser ist im Markup schon weggelassen.
   Hover-Lift dezenter, weil die Karten enger stehen. */
.article-card--compact[b-9olomjdj9b] {
    box-shadow: 0 1px 2px rgba(31, 54, 35, .04),
                0 2px 6px rgba(31, 54, 35, .05);
}
.article-card--compact:hover[b-9olomjdj9b] {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(31, 54, 35, .07),
                0 8px 18px rgba(31, 54, 35, .10);
}

.article-card--compact .article-card__body[b-9olomjdj9b] {
    padding: .7rem .85rem .9rem;
}
.article-card--compact .article-card__meta[b-9olomjdj9b] {
    font-size: .7rem;
    margin-bottom: .25rem;
}
.article-card--compact .article-card__title[b-9olomjdj9b] {
    font-size: .98rem;
    line-height: 1.25;
    /* Serif-h3 ist per Browser-Default 700 — in der Compact-Variante zu
       wuchtig fuer die kleine Tile, gibt 500 (medium) genug Halt ohne
       optisches Gewicht. */
    font-weight: 500;
    margin: 0;
}
/* /Components/Shared/ArticleGrid.razor.rz.scp.css */
.article-grid[b-smb9wxqgfw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}
/* Compact-Variante fuer die Kategorie-Rails auf der Home: engere Spalten +
   kleinerer Gap, damit pro Reihe 3-4 Tiles passen statt 2-3. Die kleineren
   Cards bekommen ihre eigenen Innen-Massen aus ArticleCard.razor.css. */
.article-grid--compact[b-smb9wxqgfw] {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.article-grid__empty[b-smb9wxqgfw] {
    color: var(--bw-fg-muted);
    font-style: italic;
    padding: 1.5rem;
    background: var(--bw-bg-muted);
    border-radius: var(--bw-radius);
    text-align: center;
}
/* /Components/Shared/ComingSoon.razor.rz.scp.css */
/* Full-viewport soft-launch splash. Fir-green background, sand text — the
   brand palette. MainLayout renders this alone, so it covers everything. */
.coming-soon[b-mijmirtb27] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #1f4029;
    color: #fbf8f3;
    text-align: center;
}

.coming-soon__inner[b-mijmirtb27] {
    max-width: 34rem;
}

.coming-soon__logo[b-mijmirtb27] {
    display: block;
    margin: 0 auto 1.4rem;
}

.coming-soon__wordmark[b-mijmirtb27] {
    margin: 0 0 2.4rem;
    font-size: 1rem;
    letter-spacing: .03em;
    opacity: .8;
}

.coming-soon__tld[b-mijmirtb27] {
    opacity: .55;
}

.coming-soon__headline[b-mijmirtb27] {
    margin: 0 0 1rem;
    /* Explicit colour: site.css has a global h1 rule that would otherwise
       override the inherited light colour and leave the headline near-
       invisible on the dark background. */
    color: #fbf8f3;
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.9rem, 5vw, 2.9rem);
    line-height: 1.15;
}

.coming-soon__teaser[b-mijmirtb27] {
    margin: 0 auto 2.2rem;
    max-width: 26rem;
    font-size: 1.05rem;
    line-height: 1.6;
    opacity: .82;
}

.coming-soon__langs[b-mijmirtb27] {
    margin: 0;
    font-size: .95rem;
}

.coming-soon__sep[b-mijmirtb27] {
    margin: 0 .3rem;
    opacity: .4;
}

.coming-soon__lang[b-mijmirtb27] {
    color: #fbf8f3;
    text-decoration: none;
    opacity: .55;
    padding: .2rem .35rem;
}

.coming-soon__lang:hover[b-mijmirtb27] {
    opacity: .9;
}

.coming-soon__lang.is-active[b-mijmirtb27] {
    opacity: 1;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .25em;
}
/* /Components/Shared/DisclosureBanner.razor.rz.scp.css */
.disclosure-banner[b-t83mxe288q] {
    display: block;
    margin: 1.2rem 0 2rem;
    padding: .75rem 1rem;
    background: var(--bw-earth-soft);
    border-left: 3px solid var(--bw-earth);
    border-radius: var(--bw-radius);
    color: var(--bw-fg-soft);
    font-size: .88rem;
    line-height: 1.5;
}
.disclosure-banner__heading[b-t83mxe288q] {
    display: block;
    color: var(--bw-earth);
    font-family: var(--bw-font-sans);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .25rem;
}
.disclosure-banner__body[b-t83mxe288q] { display: block; }
/* /Components/Shared/ElevationProfile.razor.rz.scp.css */
.elevation-profile[b-ojammkwmbe] {
    margin: 1.5rem 0;
}
.elevation-profile svg[b-ojammkwmbe] {
    display: block;
    width: 100%;
    height: 160px;
    background: var(--bw-brand-soft);
    border-radius: var(--bw-radius);
}
.elevation-profile__area[b-ojammkwmbe] {
    fill: var(--bw-brand);
    fill-opacity: .2;
}
.elevation-profile__line[b-ojammkwmbe] {
    stroke: var(--bw-brand-dark);
    stroke-width: 2;
    /* preserveAspectRatio="none" stretches the coordinate space, so the
       stroke would scale unevenly — vector-effect keeps it crisp. */
    vector-effect: non-scaling-stroke;
}
.elevation-profile__caption[b-ojammkwmbe] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .35rem;
    font-size: .8rem;
    color: var(--bw-fg-muted);
    font-family: var(--bw-font-mono);
}
.elevation-profile__stats[b-ojammkwmbe] { color: var(--bw-brand-dark); font-weight: 600; }
/* /Components/Shared/LanguageSwitcher.razor.rz.scp.css */
.lang-switcher__link[b-t4t5beik9o] {
    position: relative;
    color: var(--bw-fg-soft);
    text-decoration: none;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .25rem .5rem;
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius);
    transition: background .15s, color .15s, border-color .15s;
}
.lang-switcher__link:hover[b-t4t5beik9o] {
    background: var(--bw-brand);
    color: #fff;
    border-color: var(--bw-brand);
}

/* Dezenter dreigeteilter Farbstrich unter dem Sprach-Link, in den
   National-Farben der jeweiligen Sprachregion. Bewusste Anlehnung an
   Flaggen, ohne 1:1-Land-Anspruch (Englisch wird auch in US/AU/NZ/IE
   gesprochen, Deutsch in AT/CH). Position ueber ::after, sodass das
   Markup nicht erweitert werden muss; Target-Sprache kommt aus dem
   existierenden hreflang-Attribut. Default-Opacity .65 fuer den
   "dezent"-Charakter, auf Hover voll. */
.lang-switcher__link[b-t4t5beik9o]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.4rem;
    height: 3px;
    border-radius: 1.5px;
    opacity: .65;
    transition: opacity .15s ease;
    pointer-events: none;
}
.lang-switcher__link:hover[b-t4t5beik9o]::after { opacity: 1; }

/* DE: Schwarz-Rot-Gold (BRD), klar eindeutig. */
.lang-switcher__link[hreflang="de"][b-t4t5beik9o]::after {
    background: linear-gradient(to right,
        #000000  0      33.34%,
        #DD0000  33.34% 66.67%,
        #FFCE00  66.67% 100%);
}
/* EN: Blau-Rot-Blau als 3-Streifen-Abstraktion der Union Jack — Blau
   aussen wie der Untergrund, Rot zentral wie das St-George-Kreuz.
   Bewusst KEIN Rot-Weiss-Blau, das wuerde von links nach rechts wie
   die niederlaendische bzw. franzoesische Flagge (in unterschiedlicher
   Anordnung) wirken. Weiss ist als drittes Element komplett rausge-
   nommen — die Union Jack mit ihren Diagonalen laesst sich in einem
   3-px-Stripe nicht authentisch abbilden, das Farbpaar blau+rot
   transportiert das UK-Gefuehl klarer. */
.lang-switcher__link[hreflang="en"][b-t4t5beik9o]::after {
    background: linear-gradient(to right,
        #012169  0      33.34%,
        #C8102E  33.34% 66.67%,
        #012169  66.67% 100%);
}
/* /Components/Shared/NewsletterBox.razor.rz.scp.css */
.newsletter-box[b-wxkscha8hv] {
    margin: 2.5rem 0;
    padding: 1.4rem 1.5rem;
    background: var(--bw-brand-soft);
    border: 1px solid var(--bw-brand);
    border-radius: var(--bw-radius-lg);
}
.newsletter-box__heading[b-wxkscha8hv] {
    font-family: var(--bw-font-serif);
    font-size: 1.2rem;
    margin: 0 0 .3rem;
    color: var(--bw-brand-dark);
}
.newsletter-box__body[b-wxkscha8hv] {
    margin: 0 0 .8rem;
    color: var(--bw-fg-soft);
    font-size: .92rem;
}
.newsletter-box__frame[b-wxkscha8hv] {
    width: 100%;
    min-height: 130px;
    border: 0;
}
/* /Components/Shared/RelatedArticles.razor.rz.scp.css */
.related-articles[b-5zmejtoz7o] {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--bw-border);
}
.related-articles__heading[b-5zmejtoz7o] {
    font-family: var(--bw-font-serif);
    font-size: 1.4rem;
    margin: 0 0 1.2rem;
}
.related-articles__grid[b-5zmejtoz7o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.2rem;
}
/* /Components/Shared/SiteFooter.razor.rz.scp.css */
.site-footer[b-nja5midwu1] {
    margin-top: 4rem;
    /* Body hat 3 px padding-inline (site.css) — Footer-Baender muessen die
       6 px ueber margin-inline:-3px zurueckholen, damit das Dark-Fir-Green
       voll bis zur Device-Edge laeuft. */
    margin-inline: -3px;
    padding: 2.6rem 1.25rem;
    background: #1f4029;          /* dark fir green — bookends the hero */
    color: rgba(244, 235, 214, .66);
}

/* Centred content column; 800px ist gerade weit genug, damit der einzeilige
   Copyright-Text reinpasst ohne dass das letzte Wort umbricht, und schmal
   genug damit die Nav-Links nicht weit auseinanderlaufen (flex-wrap fed
   anyway). Frueher 620px — fuehrte zum "Mühlhoff" auf neuer Zeile. */
.site-footer__inner[b-nja5midwu1] {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.site-footer__mark[b-nja5midwu1] {
    display: block;
    width: 40px;
    height: 40px;
}

.site-footer__nav[b-nja5midwu1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.4rem;
}
.site-footer__nav a[b-nja5midwu1] {
    color: #f4ebd6;
    text-decoration: none;
    font-size: .92rem;
}
.site-footer__nav a:hover[b-nja5midwu1] { color: #e8b04a; }

.site-footer__copy[b-nja5midwu1] {
    margin: 0;
    font-size: .86rem;
    line-height: 1.5;
}
.site-footer__affiliate[b-nja5midwu1] {
    margin: 0;
    font-size: .8rem;
    font-style: italic;
    line-height: 1.5;
    color: rgba(244, 235, 214, .5);
}
/* /Components/Shared/SiteHeader.razor.rz.scp.css */
.site-header[b-858ik6rxjv] {
    background: #fff;
    border-bottom: 1px solid var(--bw-border);
    position: sticky;
    top: 0;
    z-index: 50;
    /* Body hat 3 px padding-inline als Sicherheitsabstand zur Device-Kante
       (site.css). Das Header-Band soll trotzdem voll bis zur Edge laufen,
       sonst zeigt sich ein heller Streifen zwischen Header-Bottom-Border
       und Device-Edge. Margin-Inline negativ kompensiert das Body-Padding
       genau. Selbe Mechanik bei Site-Footer, Home-Hero, Article-Hero. */
    margin-inline: -3px;
}
.site-header__inner[b-858ik6rxjv] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    /* NUR die vertikale Padding setzen — horizontal kommt aus .container
       (0 1.25rem). Frueher stand hier 'padding: .9rem 0', das killte die
       container-padding-inline und das Logo sass dann buendig an der
       Device-Kante (auf Mobile mangels weiterer Reserve sichtbar). */
    padding-block: .9rem;
}

.site-header__brand[b-858ik6rxjv] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    color: var(--bw-fg);
    font-family: var(--bw-font-serif);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -.005em;
}
.site-header__brand-mark[b-858ik6rxjv] {
    display: block;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}
.site-header__brand-text[b-858ik6rxjv] { /* inherits */ }
/* ".de" set smaller + muted, amazon.de-style — the TLD reads as a suffix,
   not part of the spoken name. */
.site-header__brand-tld[b-858ik6rxjv] {
    font-size: .62em;
    font-weight: 500;
    color: var(--bw-fg-muted);
    letter-spacing: 0;
}

.site-header__nav[b-858ik6rxjv] {
    display: flex;
    gap: 1.4rem;
    margin-left: auto;
}
.site-header__link[b-858ik6rxjv] {
    color: var(--bw-fg-soft);
    text-decoration: none;
    font-size: .95rem;
    padding: .25rem 0;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.site-header__link:hover[b-858ik6rxjv] { color: var(--bw-brand); }
.site-header__link.active[b-858ik6rxjv] {
    color: var(--bw-brand-dark);
    border-bottom-color: var(--bw-brand);
}

.site-header__lang[b-858ik6rxjv] { margin-left: 1rem; }

/* --- Mobile hamburger (CSS-only via hidden checkbox) ---------------------- */
.site-header__toggle[b-858ik6rxjv] { display: none; }
.site-header__hamburger[b-858ik6rxjv] { display: none; }

@media (max-width: 700px) {
    .site-header__nav[b-858ik6rxjv] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--bw-border);
        flex-direction: column;
        gap: 0;
        padding: .5rem 1rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease-out;
    }
    .site-header__link[b-858ik6rxjv] { padding: .65rem 0; border-bottom: 1px solid var(--bw-border); }
    .site-header__link:last-child[b-858ik6rxjv] { border-bottom: none; }

    .site-header__hamburger[b-858ik6rxjv] {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        margin-left: auto;
        cursor: pointer;
        padding: 0;
    }
    .site-header__hamburger span[b-858ik6rxjv] {
        display: block;
        height: 2px;
        background: var(--bw-fg);
        border-radius: 1px;
        transition: transform .2s;
    }

    .site-header__toggle:checked ~ .site-header__nav[b-858ik6rxjv] {
        max-height: 80vh;
    }
}
/* /Components/Shared/SitePage.razor.rz.scp.css */
.site-page[b-vs8yywq5nb] {
    padding: 2rem 0 4rem;
}
.site-page--narrow[b-vs8yywq5nb] {
    /* Reading column for article pages — Wikipedia-school readable line length. */
    max-width: 740px;
}
.site-page--wide[b-vs8yywq5nb] {
    /* Full container, single column — landing / overview pages with card grids. */
    max-width: var(--bw-container);
}
.site-page--with-aside[b-vs8yywq5nb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 3rem;
    max-width: 1180px;
}
@media (max-width: 800px) {
    .site-page--with-aside[b-vs8yywq5nb] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.site-page__head h1[b-vs8yywq5nb] {
    font-family: var(--bw-font-serif);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 1.2rem;
    color: var(--bw-fg);
    letter-spacing: -.01em;
}

.site-page__article > :first-child[b-vs8yywq5nb] { margin-top: 0; }
.site-page__article p[b-vs8yywq5nb] { line-height: 1.65; }
.site-page__article h2[b-vs8yywq5nb] {
    font-family: var(--bw-font-serif);
    font-size: 1.55rem;
    margin: 2rem 0 .8rem;
}
.site-page__article h3[b-vs8yywq5nb] {
    font-family: var(--bw-font-serif);
    font-size: 1.2rem;
    margin: 1.6rem 0 .6rem;
}

.site-page__aside[b-vs8yywq5nb] {
    padding-top: 1rem;
    font-size: .92rem;
}
/* /Components/Shared/SponsoredBanner.razor.rz.scp.css */
.bw-sponsored[b-b4ov9lptlc] {
    position: relative;
    margin: 2rem auto;
    max-width: 760px;
    border: 1px solid var(--bw-earth);
    border-radius: var(--bw-radius-lg);
    overflow: hidden;
}
.bw-sponsored__label[b-b4ov9lptlc] {
    position: absolute;
    top: .5rem;
    right: .6rem;
    background: var(--bw-earth);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .15rem .55rem;
    border-radius: 999px;
    z-index: 2;
    pointer-events: none;
}
.bw-sponsored__inner[b-b4ov9lptlc] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    padding: 1rem 1.2rem;
    text-decoration: none;
    color: var(--bw-fg);
    background: var(--bw-earth-soft);
    transition: background .15s;
}
.bw-sponsored__inner:hover[b-b4ov9lptlc] { background: #ebe1c4; }

.bw-sponsored__img[b-b4ov9lptlc] {
    grid-column: 1;
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--bw-radius);
}
.bw-sponsored__text[b-b4ov9lptlc] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    align-self: center;
}
.bw-sponsored__text strong[b-b4ov9lptlc] {
    font-family: var(--bw-font-serif);
    font-size: 1.05rem;
    color: var(--bw-earth);
}
.bw-sponsored__body[b-b4ov9lptlc] {
    color: var(--bw-fg-soft);
    font-size: .9rem;
    line-height: 1.45;
}

@media (max-width: 500px) {
    .bw-sponsored__inner[b-b4ov9lptlc] { grid-template-columns: 1fr; }
    .bw-sponsored__img[b-b4ov9lptlc]   { width: 100%; height: 140px; }
}
/* /Components/Shared/TourFilter.razor.rz.scp.css */
.tour-filter[b-so5cprq7bd] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.2rem;
    background: var(--bw-bg-muted);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius-lg);
}
.tour-filter__field[b-so5cprq7bd] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .8rem;
    color: var(--bw-fg-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tour-filter__field select[b-so5cprq7bd] {
    font: inherit;
    text-transform: none;
    letter-spacing: normal;
    padding: .4rem .6rem;
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius);
    background: var(--bw-surface);
    color: var(--bw-fg);
    min-width: 9rem;
}
/* Pushed to the right edge of the bar (margin-left: auto). flex-end so its
   baseline lines up with the select boxes, not the taller label+select
   fields. font-size / line-height / padding are matched to the native
   <select> so the button box is the same height as the comboboxes, not
   just bottom-aligned. Toggled via the [hidden] attribute by
   tour-filter.js — only visible while a filter is active. */
.tour-filter__reset[b-so5cprq7bd] {
    margin-left: auto;
    align-self: flex-end;
    font: inherit;
    font-size: .8rem;
    line-height: normal;
    padding: .45rem .8rem;
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius);
    background: var(--bw-surface);
    color: var(--bw-fg);
    cursor: pointer;
}
.tour-filter__reset:hover[b-so5cprq7bd] {
    border-color: var(--bw-fg-muted);
    background: var(--bw-bg-muted);
}
.tour-filter__reset[hidden][b-so5cprq7bd] {
    display: none;
}
/* /Components/Shared/TourMap.razor.rz.scp.css */
/* Shared .tour-map / .tour-map__canvas styles live in wwwroot/css/site.css —
   both TourMap and TourOverview render canvases with these class names, and
   each component's own scoped-CSS attribute would only style one of them.
   Keeping the rules unscoped sidesteps the duplication and the gotcha. */
/* /Components/Shared/TourOverview.razor.rz.scp.css */
/* Multi-day tour overview — sits at the top of the article body. */

.tour-overview[b-um5v8wrmip] {
    margin: 1.5rem 0 2.4rem;
    padding: 1.3rem 1.4rem 1.6rem;
    background: var(--bw-bg-muted);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius-lg);
}

.tour-overview__heading[b-um5v8wrmip] {
    margin: 0 0 1rem;
    font-size: 1.4rem;
    color: var(--bw-brand-dark);
}

/* Leg list — vertical with color swatches matching the map polylines. */
.tour-overview__legs[b-um5v8wrmip] {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}
.tour-overview__leg[b-um5v8wrmip] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .35rem 0;
    border-top: 1px solid var(--bw-border);
}
.tour-overview__leg:first-child[b-um5v8wrmip] { border-top: 0; padding-top: 0; }

.tour-overview__leg-swatch[b-um5v8wrmip] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, .15);
}

.tour-overview__leg-link[b-um5v8wrmip] {
    color: var(--bw-brand-dark);
    text-decoration: none;
    font-weight: 500;
}
.tour-overview__leg-link:hover[b-um5v8wrmip] {
    text-decoration: underline;
    color: var(--bw-brand);
}