@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-6hqim2mhgl] {
    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-6hqim2mhgl] {
    /* 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-6hqim2mhgl] {
    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-6hqim2mhgl] {
    left: 0;
    top: 0;
    width: auto;
    height: auto;
}

#blazor-error-ui[b-6hqim2mhgl] {
    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-6hqim2mhgl] { display: block; }
#blazor-error-ui .reload[b-6hqim2mhgl] { color: var(--bw-brand-dark); margin-left: 1rem; }
#blazor-error-ui .dismiss[b-6hqim2mhgl] { float: right; cursor: pointer; }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-srfhvp1rtn],
.components-reconnect-repeated-attempt-visible[b-srfhvp1rtn],
.components-reconnect-failed-visible[b-srfhvp1rtn],
.components-pause-visible[b-srfhvp1rtn],
.components-resume-failed-visible[b-srfhvp1rtn],
.components-rejoining-animation[b-srfhvp1rtn] {
    display: none;
}

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


#components-reconnect-modal[b-srfhvp1rtn] {
    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-srfhvp1rtn 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-srfhvp1rtn {
    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. */

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

/* ---- Animiertes Drucker-SVG (Blueprint-i3-Mega) -------------------------
   Steht zwischen „Ansatz“ und „Inhalte“. Strich = Blueprint-Indigo, das
   gedruckte Objekt („50“) = Filament-Orange. Animationen ausschliesslich
   ueber transform/opacity bzw. eine wachsende clip-rect-Hoehe — kein Layout-
   Ruckeln. Reduced-Motion am Ende schaltet alles statisch (fertig gedruckt). */
.about-printer[b-gfk3h67scj] {
    margin: 2.5rem auto;
    max-width: 440px;
}
.about-printer__svg[b-gfk3h67scj] {
    display: block;
    width: 100%;
    height: auto;
}

/* Rahmen: duenne Indigo-Technik-Linien. */
.about-printer__frame[b-gfk3h67scj] {
    fill: none;
    stroke: var(--bw-ink);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Bett/Ultrabase + Sockel etwas kraeftiger fuellen — als Flaeche lesbar. */
.about-printer__frame path[b-gfk3h67scj] {
    fill: var(--bw-bg-muted);
}

/* Bemassungs-/Hilfslinien: sehr dezent, wie im OpenSCAD-Render. */
.about-printer__dims[b-gfk3h67scj] {
    stroke: var(--bw-ink);
    stroke-width: 1;
    opacity: .28;
}

/* Gedrucktes Objekt: das „3D“-Logo. Farben kommen aus den <use>-Elementen
   (#a8480f Tiefe, #f5853a Deckflaeche) — kein fill noetig. */

/* Filament-Faden: duenne Orange-Linie, pulsiert (Extrusion). Auf der 8s-Haupt-
   achse — verschwindet nach Druckende (84 %), das fertige „3D" wird nicht weiter
   „bespritzt" (siehe printer-extrude). */
.about-printer__filament[b-gfk3h67scj] {
    stroke: var(--bw-brand);
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: .85;
    animation: printer-extrude-b-gfk3h67scj 8s ease-in-out infinite;
}

/* Carriage (X-Querträger + Kopf + Faden): steigt mit dem Druck nach oben.
   Start unten (Düse knapp über dem Bett), Ende oben — synchron zum Objekt-
   Wachstum (gleiche 8s-Dauer + gleiches lineares Timing wie printer-grow). */
.about-printer__carriage[b-gfk3h67scj] {
    animation: printer-rise-b-gfk3h67scj 8s linear infinite;
}

/* Träger-Linien (am Z-Gestänge gleitend). */
.about-printer__beam[b-gfk3h67scj] {
    stroke: var(--bw-ink);
    stroke-width: 3;
    stroke-linecap: round;
}

/* X-Schlitten + Hotend: sweept in X über die Teilebreite (legt die aktuelle
   Schicht). Auf dieselbe 8s-Hauptachse wie der Z-Anstieg gelegt, damit der Kopf
   nach Druckende (84 %) das Schwingen einstellt — siehe printer-sweep. */
.about-printer__head[b-gfk3h67scj] {
    fill: #cdd3d6;            /* kuehles Metall — Extruder-Koerper */
    stroke: var(--bw-ink);
    stroke-width: 2;
    stroke-linejoin: round;
    animation: printer-sweep-b-gfk3h67scj 8s ease-in-out infinite;
}
.about-printer__head path[b-gfk3h67scj] {
    fill: var(--bw-brand);   /* Messing-Nozzle im Akzent */
    stroke: none;
}

/* Wachs-Clip: Oberkante faehrt von der Bett-Standlinie (y=210, height 0) nach
   oben (y=139, height 71). Synchron zum Carriage-Anstieg. */
.about-printer__grow[b-gfk3h67scj] {
    animation: printer-grow-b-gfk3h67scj 8s linear infinite;
}

@keyframes printer-rise-b-gfk3h67scj {
    /* Filament-Unterkante lokal bei y=112; Objekt-Oberkante faehrt von y=210
       (Bett) auf y=139. translateY haelt die Düse genau auf der Druckkante:
       112+T = Oberkante → Start T=98 (Kante 210), Ende T=27 (Kante 139).
       0–84 % Aufstieg synchron zu printer-grow, 84–100 % verharren. */
    0%   { transform: translateY(98px); }
    84%  { transform: translateY(27px); }
    100% { transform: translateY(27px); }
}
@keyframes printer-sweep-b-gfk3h67scj {
    /* X-Traversengang exakt über die Breite des „3D"-Logos (x 140–260, Düsen-
       Mitte x 200, also ±60) — die Düse legt die Schicht nur über dem Teil, nicht
       darüber hinaus. Auf die 8s-Hauptachse synchronisiert: 0–75 % hin und her
       (je ~1 s pro Bahn), dann bis 84 % mittig parken und bis 100 % ruhen — sobald
       das „3D" fertig ist, schwingt der Kopf nicht mehr. */
    0%        { transform: translateX(-60px); }
    12.5%     { transform: translateX(60px); }
    25%       { transform: translateX(-60px); }
    37.5%     { transform: translateX(60px); }
    50%       { transform: translateX(-60px); }
    62.5%     { transform: translateX(60px); }
    75%       { transform: translateX(-60px); }
    84%, 100% { transform: translateX(0); }
}
@keyframes printer-extrude-b-gfk3h67scj {
    /* Auf der 8s-Hauptachse: Filament pulsiert während des Drucks (0–80 %, ~1,6 s
       je Puls), blendet bis 84 % aus und bleibt aus — das fertige „3D" wird nicht
       weiter „bespritzt". */
    0%        { opacity: .35; }
    10%       { opacity: .9; }
    20%       { opacity: .35; }
    30%       { opacity: .9; }
    40%       { opacity: .35; }
    50%       { opacity: .9; }
    60%       { opacity: .35; }
    70%       { opacity: .9; }
    80%       { opacity: .35; }
    84%, 100% { opacity: 0; }
}
@keyframes printer-grow-b-gfk3h67scj {
    /* Unterkante fix (y+height = 210); Oberkante steigt von 210 auf 139. */
    0%   { y: 210px; height: 0; }
    84%  { y: 139px; height: 71px; }
    100% { y: 139px; height: 71px; }
}

/* Reduced-Motion: alles steht still, „3D" fertig gedruckt, Carriage auf der
   fertigen Druckhoehe. */
@media (prefers-reduced-motion: reduce) {
    .about-printer__carriage[b-gfk3h67scj],
    .about-printer__head[b-gfk3h67scj],
    .about-printer__filament[b-gfk3h67scj],
    .about-printer__grow[b-gfk3h67scj] {
        animation: none;
    }
    .about-printer__carriage[b-gfk3h67scj] { transform: translateY(27px); }
    .about-printer__filament[b-gfk3h67scj] { opacity: 0; }          /* fertig: kein Filament */
    .about-printer__grow[b-gfk3h67scj] { y: 139px; height: 71px; }
}

/* P.S.-Randnotiz zum Namen am Seitenende. Dezent-italic, per Top-Border
   abgesetzt — beilaeufige Pointe statt eigener Block. */
.about__footnote[b-gfk3h67scj] {
    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-gfk3h67scj] {
    color: var(--bw-fg-soft);
    font-weight: 600;
}
/* /Components/Pages/ArticleDetail.razor.rz.scp.css */
/* ===========================================================================
   Article detail page layout + body shortcode styles.
   --------------------------------------------------------------------------- */

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


/* ---- Hero ---------------------------------------------------------------- */
.article__hero[b-jx7wg0c0mm] {
    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-jx7wg0c0mm]  .article__hero-img {
    width: 100%;
    height: clamp(280px, 50vh, 520px);
    object-fit: cover;
    display: block;
}
.article__hero-overlay[b-jx7wg0c0mm] {
    /* 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-jx7wg0c0mm] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    font-size: .85rem;
    margin-bottom: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.article__category[b-jx7wg0c0mm] {
    color: #d0e7d6;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(208, 231, 214, .4);
}
.article__category:hover[b-jx7wg0c0mm] { color: #fff; border-bottom-color: #fff; }
.article__author strong[b-jx7wg0c0mm] { 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-jx7wg0c0mm] {
    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-jx7wg0c0mm] {
    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-jx7wg0c0mm] {
    font-size: 1.1rem;
    line-height: 1.5;
    max-width: 60ch;
    color: rgba(255,255,255,.92);
    margin: 0;
}

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

/* ---- Body ---------------------------------------------------------------- */
.article__body[b-jx7wg0c0mm] {
    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-jx7wg0c0mm] {
        padding: 0 clamp(1.25rem, 0.5rem + 4vw, 1.75rem);
    }
    .article__hero-overlay[b-jx7wg0c0mm] {
        padding: 2rem clamp(1.25rem, 0.5rem + 4vw, 1.75rem) 1.5rem;
    }
    .article__credit[b-jx7wg0c0mm] {
        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-jx7wg0c0mm] {
        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-jx7wg0c0mm],
.article__body li[b-jx7wg0c0mm] {
    text-wrap: pretty;
}
.article__body h2[b-jx7wg0c0mm] {
    font-family: var(--bw-font-serif);
    font-size: 1.55rem;
    margin: 2.4rem 0 .8rem;
    text-wrap: balance;
}
.article__body h3[b-jx7wg0c0mm] {
    font-family: var(--bw-font-serif);
    font-size: 1.2rem;
    margin: 1.8rem 0 .5rem;
    text-wrap: balance;
}
.article__body img[b-jx7wg0c0mm] {
    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-jx7wg0c0mm],
.article__body img:focus-visible[b-jx7wg0c0mm] {
    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-jx7wg0c0mm] { transition: none; }
    .article__body img:hover[b-jx7wg0c0mm],
    .article__body img:focus-visible[b-jx7wg0c0mm] { transform: none; }
}

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

/* ---- Tags footer -------------------------------------------------------- */
.article__tags[b-jx7wg0c0mm] {
    margin-top: 3rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--bw-border);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.article__tag[b-jx7wg0c0mm] {
    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-jx7wg0c0mm] {
    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-jx7wg0c0mm] .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-jx7wg0c0mm] .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-jx7wg0c0mm] .bw-product-card__body p { margin: 0 0 .4rem; line-height: 1.5; font-size: .95rem; }
[b-jx7wg0c0mm] .bw-product-card__body p:last-child { margin-bottom: 0; }
[b-jx7wg0c0mm] .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-jx7wg0c0mm] .bw-product-card a[data-affiliate]:hover { background: #6f5535; }
[b-jx7wg0c0mm] .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-jx7wg0c0mm] .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-jx7wg0c0mm] .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-jx7wg0c0mm] .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-jx7wg0c0mm] .bw-product-card--expanded {
    margin: 1.6rem 0;
    padding: 1.1rem 1.3rem;
    border-left-width: 4px;
    border-radius: var(--bw-radius-lg);
}
[b-jx7wg0c0mm] .bw-product-card--expanded .bw-product-card__title {
    font-size: 1.05rem;
    margin: 0 0 .4rem;
}
[b-jx7wg0c0mm] .bw-product-card--expanded .bw-product-card__body p {
    font-size: 1rem;
    margin: 0 0 1em;
    line-height: 1.65;
}
[b-jx7wg0c0mm] .bw-product-card--expanded .bw-product-card__body p:last-child { margin-bottom: 0; }
[b-jx7wg0c0mm] .bw-product-card--expanded .bw-product-card__body ul {
    margin: .6rem 0 .8rem;
    padding-left: 1.4rem;
}
[b-jx7wg0c0mm] .bw-product-card--expanded .bw-product-card__body li {
    margin: .35rem 0;
    line-height: 1.6;
}
[b-jx7wg0c0mm] .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-jx7wg0c0mm] .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-jx7wg0c0mm] .article__gear-strip__intro {
    font-weight: 600;
    color: var(--bw-fg);
    margin-right: .15rem;
}
[b-jx7wg0c0mm] .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-jx7wg0c0mm] .article__gear-strip a:hover {
    text-decoration-color: var(--bw-brand);
}
[b-jx7wg0c0mm] .article__gear-strip__sep {
    color: var(--bw-fg-muted);
    opacity: .55;
    user-select: none;
}
[b-jx7wg0c0mm] .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-jx7wg0c0mm] .article__products {
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bw-border);
}
[b-jx7wg0c0mm] .article__products-heading {
    font-family: var(--bw-font-serif);
    font-size: 1.3rem;
    margin: 0 0 1rem;
}
[b-jx7wg0c0mm] .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-jx7wg0c0mm] .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-jx7wg0c0mm] .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-jx7wg0c0mm] .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-jx7wg0c0mm] {
    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-jx7wg0c0mm] {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
}
.article__support-hint a[b-jx7wg0c0mm] {
    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-jx7wg0c0mm] {
    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-jx7wg0c0mm] .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-jx7wg0c0mm] .bw-offer__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem .8rem;
    margin-bottom: .5rem;
}
[b-jx7wg0c0mm] .bw-offer__title {
    font-family: var(--bw-font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bw-brand-dark);
}
[b-jx7wg0c0mm] .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-jx7wg0c0mm] .bw-offer__body p:last-child { margin-bottom: 0; }
[b-jx7wg0c0mm] .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-jx7wg0c0mm] .bw-offer a[data-affiliate]:hover { background: var(--bw-brand-dark); }
[b-jx7wg0c0mm] .bw-offer a[data-affiliate]::after { color: rgba(255,255,255,.7); }

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

/* :::tour-meta */
[b-jx7wg0c0mm] .bw-tour-meta,
.bw-tour-meta--head[b-jx7wg0c0mm] {
    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-jx7wg0c0mm] .bw-tour-meta dt,
.bw-tour-meta--head dt[b-jx7wg0c0mm] {
    font-weight: 600;
    color: var(--bw-brand-dark);
}
[b-jx7wg0c0mm] .bw-tour-meta dd,
.bw-tour-meta--head dd[b-jx7wg0c0mm] { margin: 0; color: var(--bw-fg); }

/* :::gallery */
[b-jx7wg0c0mm] .bw-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .8rem;
    margin: 1.6rem 0;
}
[b-jx7wg0c0mm] .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-jx7wg0c0mm] .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-jx7wg0c0mm] .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-jx7wg0c0mm] .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-jx7wg0c0mm] .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-jx7wg0c0mm] .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-jx7wg0c0mm] .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-jx7wg0c0mm],
    [b-jx7wg0c0mm] .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-xekv73maih] {
    position: relative;
    /* Blueprint-Indigo-Grund; der warme Filament-Glow liegt im ::before
       darueber, damit er (im Gegensatz zu einem background-image) animierbar
       ist — er "atmet" ganz langsam. */
    background: linear-gradient(168deg, var(--bw-ink) 0%, var(--bw-ink-dark) 100%);
    color: #eef1f6;
    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;
}

/* Filament-Glow oben rechts (warmes Licht im Marken-Orange, statt des fruehen
   gelben "Morgenlichts"). 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-xekv73maih]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 75% at 80% 12%, rgba(240, 122, 46, .22), transparent 72%);
    transform-origin: 80% 12%;
    pointer-events: none;
    z-index: 0;
    animation: home-hero-sun-b-xekv73maih 10s ease-in-out infinite;
}
@keyframes home-hero-sun-b-xekv73maih {
    0%, 100% { opacity: .82; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero[b-xekv73maih]::before { animation: none; opacity: 1; transform: none; }
}
.home-hero__inner[b-xekv73maih] {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.home-hero__kicker[b-xekv73maih] {
    margin: 0 0 1rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #f5985a;
}
.home-hero__headline[b-xekv73maih] {
    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-xekv73maih] {
    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-xekv73maih] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;            /* hairline overlap kills sub-pixel seam */
    width: 100%;
    height: clamp(48px, 7vw, 96px);
    display: block;
}

/* Schicht-Linien auf den Treppen-Treads: warmer Filament-Ton, animieren NUR
   die Deckkraft. Ruhewert ist dezent (.32); die Linie soll nur ahnbar sein.
     A) layer-intro: einmaliges Aufwachsen von unten (l0) nach oben (l3),
        fill-mode both haelt den Ruhewert.
     C) layer-wave: infinit, aber fast die ganze Zeit im Ruhewert; alle 12 s
        ein kurzer Puls. Per gestaffeltem animation-delay (+0.25 s je Stufe)
        wandert der Puls von unten nach oben — wie eine frisch gelegte,
        noch warme Schicht. Wave startet erst NACH dem Intro (Delay 12 s),
        die Werte am Zyklus-Rand sind identisch → nahtloser Uebergang. */
.home-hero__layer rect[b-xekv73maih] {
    fill: #f5985a;
}
.home-hero__layer[b-xekv73maih] {
    opacity: .32;
}
.home-hero__layer--0[b-xekv73maih] { animation: layer-intro-b-xekv73maih .5s ease-out .15s both, layer-wave-b-xekv73maih 12s ease-in-out 12.00s infinite; }
.home-hero__layer--1[b-xekv73maih] { animation: layer-intro-b-xekv73maih .5s ease-out .35s both, layer-wave-b-xekv73maih 12s ease-in-out 12.25s infinite; }
.home-hero__layer--2[b-xekv73maih] { animation: layer-intro-b-xekv73maih .5s ease-out .55s both, layer-wave-b-xekv73maih 12s ease-in-out 12.50s infinite; }
.home-hero__layer--3[b-xekv73maih] { animation: layer-intro-b-xekv73maih .5s ease-out .75s both, layer-wave-b-xekv73maih 12s ease-in-out 12.75s infinite; }

@keyframes layer-intro-b-xekv73maih {
    from { opacity: 0; }
    to   { opacity: .32; }
}
@keyframes layer-wave-b-xekv73maih {
    0%, 100% { opacity: .32; }
    5%       { opacity: .85; }
    14%      { opacity: .32; }
}

/* Reduced-Motion: keine Animation, Linien ruhen im dezenten Wert. */
@media (prefers-reduced-motion: reduce) {
    .home-hero__layer[b-xekv73maih] {
        animation: none;
        opacity: .28;
    }
}

/* ---- Section headings on the home page ---------------------------------- */
.home-section-head[b-xekv73maih] {
    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-xekv73maih] {
    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-xekv73maih] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--bw-brand);
}
.home-merch-hint a[b-xekv73maih] { 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-xekv73maih] { margin-top: 2rem; }
.home-category-rail__head[b-xekv73maih] {
    font-family: var(--bw-font-serif);
    font-size: 1.35rem;
    margin: 0 0 .6rem;
}
.home-category-rail__head a[b-xekv73maih] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--bw-fg);
    text-decoration: none;
}
.home-category-rail__head a:hover[b-xekv73maih] { color: var(--bw-brand); }
.home-category-rail__arrow[b-xekv73maih] {
    color: var(--bw-brand);
    font-size: .8em;
    transition: transform .15s ease-out;
}
.home-category-rail__head a:hover .home-category-rail__arrow[b-xekv73maih] {
    transform: translateX(4px);
}

/* ---- Empty state -------------------------------------------------------- */
.home-empty[b-xekv73maih] {
    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-faf35qd6mh] {
    /* 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-faf35qd6mh] {
    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, var(--bw-ink) 0%, var(--bw-ink-dark) 100%);
    text-align: center;
    overflow: hidden;
    padding: 3.5rem 1.25rem 7rem;
}

/* ---- Filament-Spule ----------------------------------------------------- */
.not-found__spool[b-faf35qd6mh] {
    display: block;
    width: clamp(72px, 14vw, 104px);
    height: clamp(72px, 14vw, 104px);
    margin: 0 auto .5rem;
    /* weicher Schein um die Spule, verstaerkt den Background-Glow */
    filter: drop-shadow(0 0 14px rgba(242, 184, 76, .55));
}
.not-found__spool-rim[b-faf35qd6mh] {
    fill: none;
    stroke: #f5c45e;
    stroke-width: 8;
}
.not-found__spool-hub[b-faf35qd6mh] {
    fill: #f5c45e;
}
.not-found__spool-spokes[b-faf35qd6mh] {
    stroke: #f2b84c;
    stroke-width: 5;
    stroke-linecap: round;
    transform-origin: 50px 50px;
    /* sehr langsame Drehung — wie eine abrollende Spule, nie ablenkend */
    animation: not-found-spool-spin-b-faf35qd6mh 50s linear infinite;
}

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

/* ---- 404-Ziffer --------------------------------------------------------- */
.not-found__code[b-faf35qd6mh] {
    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;
}

/* ---- Druckduese (Hotend) ------------------------------------------------ */
.not-found__nozzle[b-faf35qd6mh] {
    position: absolute;
    /* steht rechts auf dem Schicht-Kamm: bottom ~ Ridge-Hoehe, leicht ueberlappend */
    right: clamp(.75rem, 9vw, 7rem);
    bottom: clamp(30px, 5vw, 64px);
    width: clamp(44px, 7vw, 70px);
    height: auto;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .28));
    z-index: 1;
}
.not-found__nozzle-body[b-faf35qd6mh] {
    fill: #cdd3d6;          /* kuehles Metall — Extruder-Koerper */
    stroke: #9aa3a7;
    stroke-width: 1.5;
}
.not-found__nozzle-block[b-faf35qd6mh] {
    fill: #d98a3d;          /* messingfarbener Heizblock */
    stroke: #b06f2d;
    stroke-width: 1.5;
}
.not-found__nozzle-tip[b-faf35qd6mh] {
    fill: #e6a94e;          /* Messing-Nozzle */
}
.not-found__nozzle-thread[b-faf35qd6mh] {
    fill: none;
    stroke: #f2b84c;        /* austretender Filament-Faden, im Spulen-Amber */
    stroke-width: 2.5;
    stroke-linecap: round;
}

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

/* ---- Ridge-Uebergang ---------------------------------------------------- */
.not-found__ridge[b-faf35qd6mh] {
    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-faf35qd6mh] {
    padding: 1.5rem 1.25rem 2.5rem;
}
.not-found__langs[b-faf35qd6mh] {
    max-width: 640px;
    margin: 0 auto;
    display: grid;
    gap: 1.5rem;
}
.not-found__lang[b-faf35qd6mh] {
    padding-left: 1rem;
    border-left: 3px solid var(--bw-border);
}
.not-found__lead[b-faf35qd6mh] {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--bw-fg);
}
.not-found__wink[b-faf35qd6mh] {
    margin: 0 0 .5rem;
    color: var(--bw-fg-muted);
    font-size: .95rem;
}
.not-found__home[b-faf35qd6mh] {
    margin: 0;
    font-weight: 600;
}

/* Reduced-Motion: Spule steht still. */
@media (prefers-reduced-motion: reduce) {
    .not-found__spool-spokes[b-faf35qd6mh] { animation: none; }
}
/* /Components/Pages/SearchPage.razor.rz.scp.css */
.search[b-lg8gjrvxbw] { max-width: 100%; }

.search__input[b-lg8gjrvxbw] {
    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-lg8gjrvxbw] {
    outline: none;
    border-color: var(--bw-brand);
}

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

/* ---- Empty-State (vor der ersten Suche) --------------------------------- */
.search__empty[b-lg8gjrvxbw] { 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-lg8gjrvxbw] {
    display: block;
    width: 58px;
    height: 58px;
    margin: 0 0 1rem;
    color: var(--bw-brand);
}

.search__empty-lead[b-lg8gjrvxbw] {
    margin: 0 0 1rem;
    color: var(--bw-fg-soft);
    font-size: 1rem;
    line-height: 1.5;
}
.search__empty-lead strong[b-lg8gjrvxbw] {
    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-lg8gjrvxbw] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.25rem;
}
.search__chip[b-lg8gjrvxbw] {
    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-lg8gjrvxbw],
.search__chip:focus-visible[b-lg8gjrvxbw] {
    border-color: var(--bw-brand);
    color: var(--bw-brand);
    transform: translateY(-1px);
    outline: none;
}

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

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

.search__results[b-lg8gjrvxbw] {
    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-lg8gjrvxbw] .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-lg8gjrvxbw] .search-hit:hover {
    border-color: var(--bw-brand);
    transform: translateY(-1px);
}
[b-lg8gjrvxbw] .search-hit__cat {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bw-brand);
    font-weight: 600;
}
[b-lg8gjrvxbw] .search-hit__title {
    font-family: var(--bw-font-serif);
    font-size: 1.15rem;
    margin: .15rem 0 .25rem;
    color: var(--bw-fg);
}
[b-lg8gjrvxbw] .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-ymfyw19uy2] {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    max-width: 22rem;
    margin: 1.5rem 0;
}

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

.signin-provider:hover[b-ymfyw19uy2] {
    border-color: var(--bw-brand, #f07a2e);
    background: var(--bw-brand, #f07a2e);
    color: #fff;
    text-decoration: none;
}
/* /Components/Pages/SignInEmail.razor.rz.scp.css */
/* OTP-Login-Formular (E-Mail-Schritt). Selbst-enthalten — Marken-Orange aus --bw-brand. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.otp-msg--error[b-kpdszyyqr1] {
    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-epgspsgksq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 26rem;
    margin: 1.25rem 0 0;
}

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

.otp-submit:hover[b-epgspsgksq] { background: var(--bw-brand-dark, #b4541a); }
/* /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-kdbb3crlhz] {
    margin: 1.5rem 0 2rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--bw-fg-soft);
}

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

.support__partner[b-kdbb3crlhz] {
    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-kdbb3crlhz] {
    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-kdbb3crlhz] {
    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-kdbb3crlhz] { width: 30px; height: 30px; display: block; }

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

.support__partner-tagline[b-kdbb3crlhz] {
    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-kdbb3crlhz] {
    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-kdbb3crlhz] {
    margin: 0 0 1rem;
    color: var(--bw-fg-soft);
    line-height: 1.55;
}

.support__partner-cta[b-kdbb3crlhz] {
    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-kdbb3crlhz] {
    background: var(--bw-brand-dark);
    color: #fff;
    text-decoration: none;
}
.support__partner-cta svg[b-kdbb3crlhz] {
    width: 16px;
    height: 16px;
    transition: transform .15s ease;
}
.support__partner-cta:hover svg[b-kdbb3crlhz] { transform: translateX(2px); }

.support__disclosure[b-kdbb3crlhz] {
    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-kdbb3crlhz] {
    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-kdbb3crlhz] {
    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-kdbb3crlhz] {
    background: rgba(39, 84, 60, .12);
}
/* augenzwinkernder Hinweis unter dem CTA */
.support__merch-note[b-kdbb3crlhz] {
    margin: .85rem 0 0;
    font-size: .85rem;
    font-style: italic;
    color: var(--bw-fg-muted);
}

@media (max-width: 640px) {
    .support__partner[b-kdbb3crlhz] { flex-direction: column; gap: 1rem; }
    .support__partner-icon[b-kdbb3crlhz] { width: 48px; height: 48px; }
}
/* /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-hw1rpoa71m] {
    margin: 2rem auto;
    text-align: center;
}

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

/* Legally-required ad label — only shown once a real ad has filled the slot. */
.bw-ad-slot__label[b-hw1rpoa71m] {
    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-hw1rpoa71m] {
    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-hw1rpoa71m] {
    display: none;
}

/* Per-position width caps — the responsive auto-ad picks its own height. */
.bw-ad-slot--inline[b-hw1rpoa71m]      { max-width: 640px; }
.bw-ad-slot--leaderboard[b-hw1rpoa71m] { max-width: 728px; }
.bw-ad-slot--sidebar[b-hw1rpoa71m]     { max-width: 300px; }
.bw-ad-slot--footer[b-hw1rpoa71m]      { max-width: 970px; }
/* /Components/Shared/ArticleCard.razor.rz.scp.css */
.article-card[b-ez9z9mwgaq] {
    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-ez9z9mwgaq] {
    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-ez9z9mwgaq] {
    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-ez9z9mwgaq]  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-ez9z9mwgaq]  img {
    transform: scale(1.04);
}

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

.article-card__meta[b-ez9z9mwgaq] {
    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-ez9z9mwgaq] { color: var(--bw-brand); font-weight: 600; }
.article-card__dateweather[b-ez9z9mwgaq] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.article-card__title[b-ez9z9mwgaq] {
    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-ez9z9mwgaq] {
    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-ez9z9mwgaq] {
    box-shadow: 0 1px 2px rgba(31, 54, 35, .04),
                0 2px 6px rgba(31, 54, 35, .05);
}
.article-card--compact:hover[b-ez9z9mwgaq] {
    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-ez9z9mwgaq] {
    padding: .7rem .85rem .9rem;
}
.article-card--compact .article-card__meta[b-ez9z9mwgaq] {
    font-size: .7rem;
    margin-bottom: .25rem;
}
.article-card--compact .article-card__title[b-ez9z9mwgaq] {
    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-i8z5ba1u3y] {
    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-i8z5ba1u3y] {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.article-grid__empty[b-i8z5ba1u3y] {
    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-xehw7fvk2b] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bw-ink);
    color: #f7f8fa;
    text-align: center;
}

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

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

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

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

.coming-soon__headline[b-xehw7fvk2b] {
    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-xehw7fvk2b] {
    margin: 0 auto 2.2rem;
    max-width: 26rem;
    font-size: 1.05rem;
    line-height: 1.6;
    opacity: .82;
}

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

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

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

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

.coming-soon__lang.is-active[b-xehw7fvk2b] {
    opacity: 1;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .25em;
}
/* /Components/Shared/DisclosureBanner.razor.rz.scp.css */
.disclosure-banner[b-8fxbgiendh] {
    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-8fxbgiendh] {
    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-8fxbgiendh] { display: block; }
/* /Components/Shared/LanguageSwitcher.razor.rz.scp.css */
.lang-switcher__link[b-s4so0ortcy] {
    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-s4so0ortcy] {
    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-s4so0ortcy]::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-s4so0ortcy]::after { opacity: 1; }

/* DE: Schwarz-Rot-Gold (BRD), klar eindeutig. */
.lang-switcher__link[hreflang="de"][b-s4so0ortcy]::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-s4so0ortcy]::after {
    background: linear-gradient(to right,
        #012169  0      33.34%,
        #C8102E  33.34% 66.67%,
        #012169  66.67% 100%);
}
/* /Components/Shared/RelatedArticles.razor.rz.scp.css */
.related-articles[b-24enazvmj7] {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--bw-border);
}
.related-articles__heading[b-24enazvmj7] {
    font-family: var(--bw-font-serif);
    font-size: 1.4rem;
    margin: 0 0 1.2rem;
}
.related-articles__grid[b-24enazvmj7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.2rem;
}
/* /Components/Shared/SiteFooter.razor.rz.scp.css */
.site-footer[b-bgeudvroj5] {
    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: var(--bw-ink);    /* blueprint indigo — bookends the hero */
    color: rgba(226, 232, 240, .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-bgeudvroj5] {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.site-footer__mark[b-bgeudvroj5] {
    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-bgeudvroj5] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.4rem;
}
.site-footer__follow-link[b-bgeudvroj5] {
    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-bgeudvroj5],
.site-footer__follow-link:focus-visible[b-bgeudvroj5] { color: #e8b04a; }
.site-footer__follow-icon[b-bgeudvroj5] { display: block; }

.site-footer__nav[b-bgeudvroj5] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.4rem;
}
.site-footer__nav a[b-bgeudvroj5] {
    color: #f4ebd6;
    text-decoration: none;
    font-size: .92rem;
}
.site-footer__nav a:hover[b-bgeudvroj5] { 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-bgeudvroj5] {
    margin: 0;
    font-size: .92rem;
}
.site-footer__auth a[b-bgeudvroj5] {
    color: #f4ebd6;
    text-decoration: none;
}
.site-footer__auth a:hover[b-bgeudvroj5] { 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-bgeudvroj5] {
    display: inline-block;
    width: .4rem;
    height: .4rem;
    margin-left: .4rem;
    border-radius: 50%;
    background: #e8b04a;
    vertical-align: middle;
}

.site-footer__copy[b-bgeudvroj5] {
    margin: 0;
    font-size: .86rem;
    line-height: 1.5;
    /* Zeilen gleichmaessig umbrechen, damit nicht ein einzelnes Wort
       ("Muehlhoff") allein in der letzten Zeile haengt. */
    text-wrap: balance;
}
.site-footer__affiliate[b-bgeudvroj5] {
    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-1n3bs03a83] {
    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-1n3bs03a83] {
    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-1n3bs03a83] {
    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;
    /* Markenname nie umbrechen lassen — der Bindestrich in „3d-spielplatz"
       ist sonst eine Umbruchstelle, und im Flex-Header schrumpft der Block,
       bis „spielplatz" in die zweite Zeile rutscht. */
    flex-shrink: 0;
}
.site-header__brand-mark[b-1n3bs03a83] {
    display: block;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}
.site-header__brand-text[b-1n3bs03a83] { white-space: nowrap; }
/* ".de" set smaller + muted, amazon.de-style — the TLD reads as a suffix,
   not part of the spoken name. */
.site-header__brand-tld[b-1n3bs03a83] {
    font-size: .62em;
    font-weight: 500;
    color: var(--bw-fg-muted);
    letter-spacing: 0;
}

.site-header__nav[b-1n3bs03a83] {
    display: flex;
    gap: 1.4rem;
    margin-left: auto;
}
.site-header__link[b-1n3bs03a83] {
    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-1n3bs03a83] { color: var(--bw-brand); }
.site-header__link.active[b-1n3bs03a83] {
    color: var(--bw-brand-dark);
    border-bottom-color: var(--bw-brand);
}

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

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

@media (max-width: 700px) {
    .site-header__nav[b-1n3bs03a83] {
        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-1n3bs03a83] { padding: .65rem 0; border-bottom: 1px solid var(--bw-border); }
    .site-header__link:last-child[b-1n3bs03a83] { border-bottom: none; }

    .site-header__hamburger[b-1n3bs03a83] {
        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-1n3bs03a83] {
        display: block;
        height: 2px;
        background: var(--bw-fg);
        border-radius: 1px;
        transition: transform .2s;
    }

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

.site-page__head h1[b-bojwmy903s] {
    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-bojwmy903s] { margin-top: 0; }
.site-page__article p[b-bojwmy903s] { line-height: 1.65; }
.site-page__article h2[b-bojwmy903s] {
    font-family: var(--bw-font-serif);
    font-size: 1.55rem;
    margin: 2rem 0 .8rem;
}
.site-page__article h3[b-bojwmy903s] {
    font-family: var(--bw-font-serif);
    font-size: 1.2rem;
    margin: 1.6rem 0 .6rem;
}

.site-page__aside[b-bojwmy903s] {
    padding-top: 1rem;
    font-size: .92rem;
}
/* /Components/Shared/SponsoredBanner.razor.rz.scp.css */
.bw-sponsored[b-36w5p85hkv] {
    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-36w5p85hkv] {
    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-36w5p85hkv] {
    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-36w5p85hkv] { background: #ebe1c4; }

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

@media (max-width: 500px) {
    .bw-sponsored__inner[b-36w5p85hkv] { grid-template-columns: 1fr; }
    .bw-sponsored__img[b-36w5p85hkv]   { width: 100%; height: 140px; }
}