@import '_content/Carecom.Foundation/Carecom.Foundation.wyf3l6xlep.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; der amber "Morgenlicht"-Glow liegt im ::before
       darueber, damit er (im Gegensatz zu einem background-image) animierbar
       ist — er "atmet" ganz langsam, wie Morgensonne. */
    background: 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;
}

/* Amber-Glow oben rechts (echo des Logo-Sonnenaufgangs). Eigenes Layer, damit
   opacity + scale animierbar sind: ein sehr langsames, kaum merkliches Atmen
   — Licht wird minimal heller/groesser und wieder zurueck, transform-origin
   am Glow-Zentrum (80% 12%). overflow:hidden des Hero beschneidet das Scale. */
.home-hero[b-bitbqw2b1n]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 75% at 80% 12%, rgba(242, 184, 76, .26), transparent 72%);
    transform-origin: 80% 12%;
    pointer-events: none;
    z-index: 0;
    animation: home-hero-sun-b-bitbqw2b1n 10s ease-in-out infinite;
}
@keyframes home-hero-sun-b-bitbqw2b1n {
    0%, 100% { opacity: .82; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero[b-bitbqw2b1n]::before { animation: none; opacity: 1; transform: none; }
}
.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;
}

/* Kammkanten-Schimmer: ein dezenter Amber-Glint wandert an der Kammlinie
   entlang, sodass die Kantenabschnitte nacheinander kurz aufleuchten. Reine
   stroke-dashoffset-Animation auf einer Polyline laengs des Kamms;
   non-scaling-stroke haelt die Linienbreite trotz preserveAspectRatio=none
   konstant. prefers-reduced-motion schaltet es ab. */
.home-hero__ridge-shimmer[b-bitbqw2b1n] {
    fill: none;
    stroke: rgba(242, 184, 76, .5);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 100 1370;
    animation: home-hero-crest-b-bitbqw2b1n 5.5s linear infinite;
}
@keyframes home-hero-crest-b-bitbqw2b1n {
    from { stroke-dashoffset: 1470; }
    to   { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero__ridge-shimmer[b-bitbqw2b1n] { animation: none; stroke: transparent; }
}

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

/* ---- Merch-Hinweis (zeitlich begrenzt) ---------------------------------- */
/* Bewusst dezent: schmaler, gruen angehauchter Streifen unter dem Latest-
   Block, der die Content-Sektionen nicht ueberlagert. */
.home-merch-hint[b-bitbqw2b1n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin: 2rem 0 .5rem;
    padding: .7rem 1.1rem;
    background: rgba(39, 84, 60, .06);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius);
    font-size: .95rem;
    color: var(--bw-fg-soft);
    text-align: center;
}
.home-merch-hint svg[b-bitbqw2b1n] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--bw-brand);
}
.home-merch-hint a[b-bitbqw2b1n] { font-weight: 600; white-space: nowrap; }

/* ---- 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/NotFound.razor.rz.scp.css */
/* 404-Seite als Brand-Moment: dunkle Fir-Green-Szene mit animierter Sonne +
   grossem Serif-404 und Ridge-Uebergang (gespiegelt von der Home-Hero), darunter
   die zweisprachigen Texte auf hellem Grund. */

.not-found[b-znnd0kn9we] {
    /* Body-Edge-Padding (3px in site.css) ueberbruecken, damit das dunkle
       Szenen-Band wie die Home-Hero bis ans Device-Edge laeuft. */
    margin-inline: -3px;
}

/* ---- Szene (dunkel) ----------------------------------------------------- */
.not-found__scene[b-znnd0kn9we] {
    position: relative;
    /* identisches Rezept wie .home-hero: Amber-"Morgenlicht"-Glow oben mittig
       ueber dem Fir-Green-Verlauf. Glow hier zentraler (50% 18%), damit er die
       Sonne hinterleuchtet. */
    background:
        radial-gradient(55% 70% at 50% 18%, rgba(242, 184, 76, .30), transparent 72%),
        linear-gradient(168deg, #27543c 0%, #1a3623 100%);
    text-align: center;
    overflow: hidden;
    padding: 3.5rem 1.25rem 7rem;
}

/* ---- Sonne -------------------------------------------------------------- */
.not-found__sun[b-znnd0kn9we] {
    display: block;
    width: clamp(72px, 14vw, 104px);
    height: clamp(72px, 14vw, 104px);
    margin: 0 auto .5rem;
    /* weicher Schein um die Sonne, verstaerkt den Background-Glow */
    filter: drop-shadow(0 0 14px rgba(242, 184, 76, .55));
}
.not-found__sun-disc[b-znnd0kn9we] {
    fill: #f5c45e;
}
.not-found__sun-rays[b-znnd0kn9we] {
    stroke: #f2b84c;
    stroke-width: 4;
    stroke-linecap: round;
    transform-origin: 50px 50px;
    /* sehr langsame Drehung — lebendig, aber nie ablenkend */
    animation: not-found-sun-spin-b-znnd0kn9we 50s linear infinite;
}

@keyframes not-found-sun-spin-b-znnd0kn9we {
    to { transform: rotate(360deg); }
}

/* ---- 404-Ziffer --------------------------------------------------------- */
.not-found__code[b-znnd0kn9we] {
    font-family: var(--bw-font-serif);
    font-size: clamp(4.5rem, 17vw, 10rem);
    line-height: .95;
    letter-spacing: -.03em;
    margin: 0;
    color: #fbf5e6;
    position: relative;
    z-index: 1;
}

/* ---- Wanderwegweiser ---------------------------------------------------- */
.not-found__sign[b-znnd0kn9we] {
    position: absolute;
    /* steht rechts auf dem Bergkamm: bottom ~ Ridge-Hoehe, leicht ueberlappend */
    right: clamp(.75rem, 9vw, 7rem);
    bottom: clamp(30px, 5vw, 64px);
    width: clamp(48px, 8vw, 78px);
    height: auto;
    /* leichte Schieflage — verwitterter Wegweiser an der Gabelung */
    transform: rotate(-4deg);
    transform-origin: bottom center;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .28));
    z-index: 1;
}
.not-found__sign-post[b-znnd0kn9we] {
    fill: #5c4326;          /* dunkles Holz */
}
.not-found__sign-board[b-znnd0kn9we] {
    fill: #efe2c2;          /* helles, verwittertes Schild — hebt sich vom Fir-Green ab */
    stroke: #c8b487;
    stroke-width: 1.5;
}

/* Schmale Viewports: Wegweiser ausblenden, damit er die zentrierte 404 nicht
   bedraengt. */
@media (max-width: 28rem) {
    .not-found__sign[b-znnd0kn9we] { display: none; }
}

/* ---- Ridge-Uebergang ---------------------------------------------------- */
.not-found__ridge[b-znnd0kn9we] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;            /* hairline overlap kills sub-pixel seam */
    width: 100%;
    height: clamp(44px, 6.5vw, 88px);
    display: block;
}

/* ---- Textbereich (hell) ------------------------------------------------- */
.not-found__body[b-znnd0kn9we] {
    padding: 1.5rem 1.25rem 2.5rem;
}
.not-found__langs[b-znnd0kn9we] {
    max-width: 640px;
    margin: 0 auto;
    display: grid;
    gap: 1.5rem;
}
.not-found__lang[b-znnd0kn9we] {
    padding-left: 1rem;
    border-left: 3px solid var(--bw-border);
}
.not-found__lead[b-znnd0kn9we] {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--bw-fg);
}
.not-found__wink[b-znnd0kn9we] {
    margin: 0 0 .5rem;
    color: var(--bw-fg-muted);
    font-size: .95rem;
}
.not-found__home[b-znnd0kn9we] {
    margin: 0;
    font-weight: 600;
}

/* Reduced-Motion: Sonne steht still. */
@media (prefers-reduced-motion: reduce) {
    .not-found__sun-rays[b-znnd0kn9we] { animation: none; }
}
/* /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__noresults[b-gw538gk99r] {
    margin: .6rem 0 0;
    color: var(--bw-fg-muted);
    font-size: .9rem;
    font-style: italic;
}

/* ---- Empty-State (vor der ersten Suche) --------------------------------- */
.search__empty[b-gw538gk99r] { margin-top: 1.4rem; }

/* Ruhiges Lupe-vor-Bergkamm-Motiv — gruene Linien folgen der Markenfarbe
   (currentColor), Sonne amber. Klein und statisch, reiner Akzent. */
.search__motif[b-gw538gk99r] {
    display: block;
    width: 58px;
    height: 58px;
    margin: 0 0 1rem;
    color: var(--bw-brand);
}

.search__empty-lead[b-gw538gk99r] {
    margin: 0 0 1rem;
    color: var(--bw-fg-soft);
    font-size: 1rem;
    line-height: 1.5;
}
.search__empty-lead strong[b-gw538gk99r] {
    font-family: var(--bw-font-serif);
    font-weight: 700;
    color: var(--bw-fg);
    margin-right: .35rem;
}

/* Start-Chips: Pills, fuellen + starten die Suche per Klick (search.js) */
.search__chips[b-gw538gk99r] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.25rem;
}
.search__chip[b-gw538gk99r] {
    font: inherit;
    font-size: .9rem;
    padding: .4rem .9rem;
    background: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: 999px;
    color: var(--bw-fg-soft);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.search__chip:hover[b-gw538gk99r],
.search__chip:focus-visible[b-gw538gk99r] {
    border-color: var(--bw-brand);
    color: var(--bw-brand);
    transform: translateY(-1px);
    outline: none;
}

/* Stoebern-Zeile: Kategorie-Links mit Mittelpunkt-Trenner */
.search__browse[b-gw538gk99r] {
    margin: 0 0 1rem;
    font-size: .92rem;
    color: var(--bw-fg-muted);
}
.search__browse-lead[b-gw538gk99r] { margin-right: .25rem; }
.search__browse a[b-gw538gk99r] {
    color: var(--bw-fg-soft);
    font-weight: 600;
    text-decoration: none;
}
.search__browse a:hover[b-gw538gk99r] { color: var(--bw-brand); }
.search__browse a + a[b-gw538gk99r]::before {
    content: "·";
    margin: 0 .45rem;
    color: var(--bw-fg-muted);
    font-weight: 400;
}

/* "Ueberrasch mich" — augenzwinkernder Zufallsartikel-Sprung */
.search__surprise[b-gw538gk99r] { margin: 0; font-size: .92rem; }
.search__surprise a[b-gw538gk99r] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--bw-fg-soft);
    font-weight: 600;
    text-decoration: none;
}
.search__surprise a:hover[b-gw538gk99r] { color: var(--bw-brand); }
.search__surprise-die[b-gw538gk99r] {
    display: inline-block;
    font-size: 1.05rem;
    transition: transform .3s ease;
}
.search__surprise a:hover .search__surprise-die[b-gw538gk99r] {
    transform: rotate(20deg) scale(1.12);
}

.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/SignIn.razor.rz.scp.css */
/* Provider-Auswahlseite: ein Button je OIDC-Provider + E-Mail-Code-Login. */

.signin-providers[b-9vttugqip4] {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    max-width: 22rem;
    margin: 1.5rem 0;
}

.signin-provider[b-9vttugqip4] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 1.2rem;
    border: 1px solid var(--bw-border, #d4dadf);
    border-radius: 8px;
    background: #fff;
    color: var(--bw-ink, #1f2a24);
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}

.signin-provider:hover[b-9vttugqip4] {
    border-color: var(--bw-brand, #2d5a3d);
    background: var(--bw-brand, #2d5a3d);
    color: #fff;
    text-decoration: none;
}
/* /Components/Pages/SignInEmail.razor.rz.scp.css */
/* OTP-Login-Formular (E-Mail-Schritt). Selbst-enthalten — keine Abhaengigkeit
   von globalen Button-/Form-Klassen. Marken-Gruen aus --bw-brand. */

.otp-form[b-lcyraj1zoi] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 26rem;
    margin: 1.25rem 0 0;
}

.otp-field[b-lcyraj1zoi] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.otp-field__label[b-lcyraj1zoi] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--bw-ink-soft, #4a5560);
}

.otp-field__input[b-lcyraj1zoi] {
    font: inherit;
    padding: .6rem .75rem;
    border: 1px solid var(--bw-border, #d4dadf);
    border-radius: 6px;
    background: #fff;
}

.otp-field__input:focus-visible[b-lcyraj1zoi] {
    outline: 2px solid var(--bw-brand, #2d5a3d);
    outline-offset: 1px;
    border-color: var(--bw-brand, #2d5a3d);
}

.otp-submit[b-lcyraj1zoi] {
    align-self: flex-start;
    font: inherit;
    font-weight: 600;
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: 6px;
    background: var(--bw-brand, #2d5a3d);
    color: #fff;
    cursor: pointer;
}

.otp-submit:hover[b-lcyraj1zoi] { background: var(--bw-brand-dark, #1f4029); }

.otp-msg[b-lcyraj1zoi] {
    margin: 1rem 0 0;
    padding: .65rem .85rem;
    border-radius: 6px;
    font-size: .92rem;
}

.otp-msg--error[b-lcyraj1zoi] {
    background: #fdecec;
    color: #8a1c1c;
    border: 1px solid #f3c0c0;
}
/* /Components/Pages/SignInEmailCode.razor.rz.scp.css */
/* OTP-Login-Formular (Code-Schritt). Selbst-enthalten; Marken-Gruen aus
   --bw-brand. Identisches Grund-Layout wie der E-Mail-Schritt + Code-Eingabe
   und „neuen Code anfordern"-Link. */

.otp-form[b-bmg60r70he] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 26rem;
    margin: 1.25rem 0 0;
}

.otp-field[b-bmg60r70he] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.otp-field__label[b-bmg60r70he] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--bw-ink-soft, #4a5560);
}

.otp-field__input[b-bmg60r70he] {
    font: inherit;
    padding: .6rem .75rem;
    border: 1px solid var(--bw-border, #d4dadf);
    border-radius: 6px;
    background: #fff;
}

.otp-field__input--code[b-bmg60r70he] {
    max-width: 10rem;
    letter-spacing: .35em;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.otp-field__input:focus-visible[b-bmg60r70he] {
    outline: 2px solid var(--bw-brand, #2d5a3d);
    outline-offset: 1px;
    border-color: var(--bw-brand, #2d5a3d);
}

.otp-submit[b-bmg60r70he] {
    align-self: flex-start;
    font: inherit;
    font-weight: 600;
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: 6px;
    background: var(--bw-brand, #2d5a3d);
    color: #fff;
    cursor: pointer;
}

.otp-submit:hover[b-bmg60r70he] { background: var(--bw-brand-dark, #1f4029); }

.otp-resend[b-bmg60r70he] {
    margin: 1rem 0 0;
    font-size: .92rem;
}

.otp-msg[b-bmg60r70he] {
    margin: 1rem 0 0;
    padding: .65rem .85rem;
    border-radius: 6px;
    font-size: .92rem;
}

.otp-msg--error[b-bmg60r70he] {
    background: #fdecec;
    color: #8a1c1c;
    border: 1px solid #f3c0c0;
}
/* /Components/Pages/SignInEmailLink.razor.rz.scp.css */
/* Magic-Link-Bestaetigung: nur ein „Jetzt anmelden"-Button. */

.otp-form[b-9fpus25r7t] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 26rem;
    margin: 1.25rem 0 0;
}

.otp-submit[b-9fpus25r7t] {
    align-self: flex-start;
    font: inherit;
    font-weight: 600;
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: 6px;
    background: var(--bw-brand, #2d5a3d);
    color: #fff;
    cursor: pointer;
}

.otp-submit:hover[b-9fpus25r7t] { background: var(--bw-brand-dark, #1f4029); }
/* /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;
}

/* ---- Merch (eigenes Shirt, kein Affiliate) ------------------------------
   Abgesetzt unter der Disclosure. Eigene Ueberschrift + gruen statt amber
   getoente Icon-Kachel signalisieren: andere Kategorie, keine Provision. */
.support__merch[b-k2fo6awtbr] {
    margin-top: 2.75rem;
    /* Fragment-Sprung aus dem Footer-Shirt-Icon (#merch): sticky SiteHeader
       (~70px) + etwas Luft, damit die Ueberschrift sichtbar bleibt. */
    scroll-margin-top: 90px;
}
.support__merch-head[b-k2fo6awtbr] {
    margin: 0 0 1rem;
    font-family: var(--bw-font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--bw-fg);
}
/* gruene Marken-Toenung statt des amber Affiliate-Schimmers */
.support__partner--merch .support__partner-icon[b-k2fo6awtbr] {
    background: rgba(39, 84, 60, .12);
}
/* augenzwinkernder Hinweis unter dem CTA */
.support__merch-note[b-k2fo6awtbr] {
    margin: .85rem 0 0;
    font-size: .85rem;
    font-style: italic;
    color: var(--bw-fg-muted);
}

@media (max-width: 640px) {
    .support__partner[b-k2fo6awtbr] { flex-direction: column; gap: 1rem; }
    .support__partner-icon[b-k2fo6awtbr] { width: 48px; height: 48px; }
}
/* /Components/Pages/WetterInWetter.razor.rz.scp.css */
.wiw__intro[b-qjja6sjhhz] {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 1.4rem;
}

.wiw__forecast[b-qjja6sjhhz] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    max-width: 30rem;
}

.wiw__day[b-qjja6sjhhz] {
    display: grid;
    grid-template-columns: 6rem 1.4em 1fr auto;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border: 1px solid rgba(0, 0, 0, .08);
    border-left: 3px solid rgba(0, 0, 0, .12);
    border-radius: .45rem;
    font-variant-numeric: tabular-nums;
}

.wiw__dow[b-qjja6sjhhz] {
    font-weight: 600;
}

.wiw__cond[b-qjja6sjhhz] {
    color: #5a6b7a;
}

.wiw__temps[b-qjja6sjhhz] {
    white-space: nowrap;
}

.wiw__hi[b-qjja6sjhhz] {
    font-weight: 600;
}

.wiw__lo[b-qjja6sjhhz] {
    margin-left: .4rem;
    color: #888;
}

.wiw__precip[b-qjja6sjhhz] {
    grid-column: 3 / -1;
    text-align: right;
    font-size: .8rem;
    color: #3b6ea5;
}

.wiw__attr[b-qjja6sjhhz] {
    margin-top: 1rem;
    font-size: .82rem;
    opacity: .65;
}

.wiw__attr a[b-qjja6sjhhz] {
    color: inherit;
}

/* Left-rail accent per coarse condition. */
.wiw__day.wx-clear[b-qjja6sjhhz]        { border-left-color: #f4b400; }
.wiw__day.wx-partlycloudy[b-qjja6sjhhz] { border-left-color: #c9a227; }
.wiw__day.wx-cloudy[b-qjja6sjhhz]       { border-left-color: #9aa0a6; }
.wiw__day.wx-fog[b-qjja6sjhhz]          { border-left-color: #b0b0b0; }
.wiw__day.wx-rain[b-qjja6sjhhz]         { border-left-color: #3b6ea5; }
.wiw__day.wx-sleet[b-qjja6sjhhz]        { border-left-color: #5fa1c4; }
.wiw__day.wx-snow[b-qjja6sjhhz]         { border-left-color: #8fc7e8; }
.wiw__day.wx-thunder[b-qjja6sjhhz]      { border-left-color: #6a4ea5; }
/* /Components/Shared/AdSlot.razor.rz.scp.css */
/* Ad slot. The component only renders this block when a real ad unit is
   configured; here we make sure the visitor sees EITHER a labeled real ad OR
   nothing — never an empty "reserved" box.

   States (AdSense sets data-ad-status on the <ins> after it tries to fill):
     • before fill (no status yet) → label hidden, <ins> has no height → invisible
     • filled   → "Anzeige" label + the ad
     • unfilled → whole block collapsed (no consent / no ad available) */

.bw-ad-slot[b-ugk05rrrd5] {
    margin: 2rem auto;
    text-align: center;
}

.bw-ad-slot ins.adsbygoogle[b-ugk05rrrd5] {
    display: block;
}

/* Legally-required ad label — only shown once a real ad has filled the slot. */
.bw-ad-slot__label[b-ugk05rrrd5] {
    display: none;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bw-fg-muted);
    opacity: .55;
    margin-bottom: .3rem;
}
.bw-ad-slot:has(ins.adsbygoogle[data-ad-status="filled"]) .bw-ad-slot__label[b-ugk05rrrd5] {
    display: block;
}

/* AdSense couldn't fill the slot (no consent / no ad) → hide the whole block
   incl. label, so no empty space lingers. */
.bw-ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"])[b-ugk05rrrd5] {
    display: none;
}

/* Per-position width caps — the responsive auto-ad picks its own height. */
.bw-ad-slot--inline[b-ugk05rrrd5]      { max-width: 640px; }
.bw-ad-slot--leaderboard[b-ugk05rrrd5] { max-width: 728px; }
.bw-ad-slot--sidebar[b-ugk05rrrd5]     { max-width: 300px; }
.bw-ad-slot--footer[b-ugk05rrrd5]      { max-width: 970px; }
/* /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;
    /* Dezenter Bild-Zoom beim Card-Hover — etwas traeger (.4s) als der
       Card-Lift (.18s), damit das Bild ruhig "atmet" statt zu springen.
       Der __hero-Wrapper hat overflow:hidden, beschneidet sauber. */
    transition: transform .4s ease-out;
}
.article-card:hover .article-card__hero[b-9olomjdj9b]  img {
    transform: scale(1.04);
}

.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__dateweather[b-9olomjdj9b] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.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/ArticleWeatherToday.razor.rz.scp.css */
.article-weather-today[b-3e33d322hh] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: inherit;
    font-size: .92em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.article-weather-today__temp[b-3e33d322hh] {
    font-weight: 600;
}
/* /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;
}

/* Folgen-Zeile (RSS + Instagram): Icon + Text als Paar, gleiche Farb-/Hover-
   Logik wie die Text-Nav (sand → amber). Der flex-column-gap des __inner
   sorgt fuer den vertikalen Abstand. */
.site-footer__follow[b-nja5midwu1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.4rem;
}
.site-footer__follow-link[b-nja5midwu1] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #f4ebd6;
    text-decoration: none;
    font-size: .92rem;
    transition: color .15s ease;
}
.site-footer__follow-link:hover[b-nja5midwu1],
.site-footer__follow-link:focus-visible[b-nja5midwu1] { color: #e8b04a; }
.site-footer__follow-icon[b-nja5midwu1] { display: block; }

.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; }

/* Anmelden/Abmelden-Cluster — gleiche Sand→Amber-Optik wie die Nav-Links.
   Ohne eigene Farbe erbt der Link die dunkle Default-Linkfarbe und ist auf
   dem dunklen Footer praktisch unsichtbar (nur Hover-Unterstrich sichtbar). */
.site-footer__auth[b-nja5midwu1] {
    margin: 0;
    font-size: .92rem;
}
.site-footer__auth a[b-nja5midwu1] {
    color: #f4ebd6;
    text-decoration: none;
}
.site-footer__auth a:hover[b-nja5midwu1] { color: #e8b04a; }

/* „Neu seit ≤7 Tagen"-Punkt am Updates-Link. Amber wie der Footer-Hover —
   auf dem dunklen Footer-Grund sichtbar, aber zurueckhaltend. Erscheint nur,
   wenn das Sidecar-Datum (Content/Updates/updates.xml) frisch ist. */
.site-footer__new-dot[b-nja5midwu1] {
    display: inline-block;
    width: .4rem;
    height: .4rem;
    margin-left: .4rem;
    border-radius: 50%;
    background: #e8b04a;
    vertical-align: middle;
}

.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);
}
/* /Components/Shared/TourWeatherPanel.razor.rz.scp.css */
.tour-weather-panel[b-mnsqy4za5a] {
    margin: 0 0 1.25rem;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: .55rem;
    background: var(--bw-surface, #fff);
}

.tour-weather-panel__summary[b-mnsqy4za5a] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .85rem;
    cursor: pointer;
    list-style: none;
    font-variant-numeric: tabular-nums;
}

.tour-weather-panel__summary[b-mnsqy4za5a]::-webkit-details-marker {
    display: none;
}

.tour-weather-panel__today[b-mnsqy4za5a] {
    font-weight: 600;
}

.tour-weather-panel__cond[b-mnsqy4za5a] {
    color: #5a6b7a;
}

.tour-weather-panel__temps[b-mnsqy4za5a] {
    white-space: nowrap;
}

.tour-weather-panel__hi[b-mnsqy4za5a] {
    font-weight: 600;
}

.tour-weather-panel__lo[b-mnsqy4za5a] {
    margin-left: .35rem;
    color: #888;
}

/* Disclosure hint, right-aligned; caret flips when open. */
.tour-weather-panel__more[b-mnsqy4za5a] {
    margin-left: auto;
    color: var(--bw-brand, #2d5a3d);
    font-size: .85rem;
}

.tour-weather-panel__more[b-mnsqy4za5a]::after {
    content: " ▸";
}

.tour-weather-panel[open] .tour-weather-panel__more[b-mnsqy4za5a]::after {
    content: " ▾";
}

.tour-weather-panel__days[b-mnsqy4za5a] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 0 .85rem .4rem;
}

.tour-weather-panel__day[b-mnsqy4za5a] {
    display: grid;
    grid-template-columns: 3.2rem 1.3em 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .25rem .4rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
    font-variant-numeric: tabular-nums;
}

.tour-weather-panel__dow[b-mnsqy4za5a] {
    font-weight: 600;
}

.tour-weather-panel__precip[b-mnsqy4za5a] {
    grid-column: 3 / -1;
    text-align: right;
    font-size: .78rem;
    color: #3b6ea5;
}

.tour-weather-panel__attr[b-mnsqy4za5a] {
    margin: 0;
    padding: .35rem .85rem .6rem;
    font-size: .72rem;
    opacity: .6;
}

.tour-weather-panel__attr a[b-mnsqy4za5a] {
    color: inherit;
}
/* /Components/Shared/WeatherIcon.razor.rz.scp.css */
.wx-icon[b-00hoah7sx8] {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.14em;
    flex: none;
}
/* /Components/Shared/WetterInWetterChip.razor.rz.scp.css */
.wetter-wink[b-ebmdkyjms8] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: inherit;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wetter-wink:hover[b-ebmdkyjms8] {
    text-decoration: underline;
}

.wetter-wink__temp[b-ebmdkyjms8] {
    font-weight: 600;
}