:root {
    --topstory: hsl(60, 100%, 50%);
}

    .teaser--topstory {
        --teaser-section-color: var(--body-color);
        background-color: var(--topstory) !important;
    }

        .teaser--topstory .teaser-section {
            font-size: 1rem;
        }

        .teaser--topstory .teaser-title {
            font-weight: 900;
        }


    .banner-label {
        flex-basis: 100%;
        text-align: center;
        font-size: 0.75rem;
        color: #777;
        margin-bottom: 4px;
    }


    .banner-label-topscroll {
        flex-basis: 100%;
        text-align: center;
        font-size: .75rem;
        color: #777;
        margin-bottom: 4px;
        position: absolute;
        z-index: 999;
        right: 10px;
    }


    .article-content p a, .article-bodytext p a, .article-bodytext ul a {
        text-decoration: underline !important
    }


    .Kommentar-skribent, .grundskrift-kursiv {
        font-style: italic;
    }

    @media (max-width: 768px) {
        .banner--display, .banner--spot {
            width: auto !important;
        }
    }

    div#cke_1_contents {
        height: 300px !important;
    }

    .zone-sm zone-topic-clusters {
        background-color: #00ff21 !important;
        color: #fff;
    }

    .topic-faq a {
        color: #fff !important;
        text-decoration: underline !important
    }

    .lm-banner:has(.banner--interscroll,.banner--topscroll) .bannercontent {
        background-position: center !important;
    }
    /*.lm-banner:has(.banner--interscroll) {
    height: 120vh;
}
*/
    /* ─── Article image carousel modal ─── */
    body.modal-open {
        overflow: auto !important;
        padding-right: 0 !important;
    }

    .carousel-icon {
        background-color: rgba(255, 255, 255, 0.9);
        border-color: rgba(255, 255, 255, 0.8);
        color: #333;
        z-index: 3;
        padding: 0.2rem;
        display: block;
    }

    .carousel-icon .icon {
        width: 1.25rem;
        height: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel-icon .icon svg {
        width: 1.25rem;
        height: 1.25rem;
        display: block;
        fill: currentColor;
    }

    #article-img-carousel .modal-dialog {
        margin: 12px;
    }

    @media (min-width: 576px) {
        #article-img-carousel .modal-dialog {
            margin-right: auto;
            margin-left: auto;
        }
    }

    #article-img-carousel .carousel-caption {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        top: auto !important;
        padding: 0.75rem 1rem !important;
        background: #fff !important;
        background-image: none !important;
        color: #333 !important;
        font-size: 0.875rem;
        line-height: 1.4;
        text-align: left;
        border-radius: 0 0 var(--modal-border-radius, 0.5rem) var(--modal-border-radius, 0.5rem);
    }

    #article-img-carousel .carousel-item {
        overflow: visible;
    }

    #article-img-carousel .carousel-item::before,
    #article-img-carousel .carousel-item::after,
    #article-img-carousel .carousel-caption::before,
    #article-img-carousel .carousel-caption::after {
        display: none !important;
    }

    #article-img-carousel .carousel-item img {
        border-radius: var(--modal-border-radius, 0.5rem) var(--modal-border-radius, 0.5rem) 0 0;
        width: 100%;
        height: auto;
        display: block;
        background: #fff;
    }

    /* Neutralize .ratio class on carousel images so they keep natural aspect */
    #article-img-carousel .carousel-item .ratio {
        position: static;
        --aspect-ratio: none;
    }

    #article-img-carousel .carousel-item .ratio::before {
        display: none;
        padding-top: 0;
    }

    #article-img-carousel .carousel-item .ratio > * {
        position: static;
    }

    #article-img-carousel .carousel-inner {
        overflow: visible;
    }

    #article-img-carousel .modal-body {
        overflow: visible;
        padding: 0;
        background: transparent;
    }

    #article-img-carousel .modal-content {
        overflow: visible;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    #article-img-carousel .btn-close {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        z-index: 10;
        background-color: rgba(255,255,255,0.9);
        border-radius: 50%;
        padding: 0.65rem;
        opacity: 1;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    @media (min-width: 768px) {
        #article-img-carousel .carousel-indicators {
            margin-bottom: -2rem;
        }
    }

    #article-img-carousel .carousel-control-prev,
    #article-img-carousel .carousel-control-next {
        width: 3rem;
        height: 3rem;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        background-color: rgba(0,0,0,0.4);
        border: 0;
        border-radius: 50%;
        opacity: 0.8;
        padding: 0;
    }

    #article-img-carousel .carousel-control-prev:hover,
    #article-img-carousel .carousel-control-next:hover {
        background-color: rgba(0,0,0,0.6);
        opacity: 1;
    }

    @media (min-width: 768px) {
        #article-img-carousel .carousel-control-prev {
            left: -3.5rem;
        }

        #article-img-carousel .carousel-control-next {
            right: -3.5rem;
        }
    }

    #article-img-carousel .carousel-control-prev-icon,
    #article-img-carousel .carousel-control-next-icon {
        width: 1.5rem;
        height: 1.5rem;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        transform: translate(-50%, -50%);
    }

    #article-img-carousel .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.5 2.5 L5 8 L10.5 13.5'/%3e%3c/svg%3e");
    }

    #article-img-carousel .carousel-control-next-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5.5 2.5 L11 8 L5.5 13.5'/%3e%3c/svg%3e");
    }

    /* Mobile: stack indicators and arrows below the image */
    @media (max-width: 767.98px) {
        #article-img-carousel .carousel {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        #article-img-carousel .carousel-inner {
            order: 1;
            width: 100%;
        }

        #article-img-carousel .carousel-indicators {
            order: 2;
            position: static;
            width: 100%;
            margin: 0.75rem auto 0;
        }

        #article-img-carousel .carousel-control-prev,
        #article-img-carousel .carousel-control-next {
            order: 3;
            position: relative;
            top: auto;
            left: auto;
            right: auto;
            transform: none;
            display: inline-block;
            margin: 0.5rem 0.25rem 0;
            flex: none;
            background-color: rgba(0,0,0,0.4);
            touch-action: manipulation;
            transition: none;
        }

        #article-img-carousel .carousel-control-prev:hover,
        #article-img-carousel .carousel-control-prev:focus,
        #article-img-carousel .carousel-control-prev:active,
        #article-img-carousel .carousel-control-next:hover,
        #article-img-carousel .carousel-control-next:focus,
        #article-img-carousel .carousel-control-next:active {
            background-color: rgba(0,0,0,0.4) !important;
            opacity: 0.8 !important;
        }
    }


    .article blockquote:before {
        content: "“";
        position: absolute;
        top: -.35rem;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        width: 3rem;
        height: 2rem;
        font-size: 6rem;
        line-height: 1;
        font-family: georgia;
        color: #036d76;
        text-align: center;
    }

    .article blockquote {
        display: block;
        border-width: 2px 0;
        border-style: solid;
        border-color: rgba(0, 0, 0, .125);
        padding: 2rem 0 1.5rem;
        margin: 2rem auto;
        position: relative;
        max-width: 80%;
    }

        .article blockquote:after {
            content: attr(cite);
            display: block;
            text-align: right;
            color: #036d76;
            margin-top: .5rem;
        }


    .Kommentar-skribent {
        width: auto;
        margin-bottom: 1rem !important;
    }

    /* Afsenderlinjen er typisk et <p> med ren inline-tekst. display:flex fra
       base-CSS'en gør HVER direkte børneknude til sit eget flex-item, så
       "…Hals</em>, b<em>yrådsmedlem…" bliver til tre kolonner ved siden af
       hinanden - og det løsrevne "b" ender i sin egen. Flex hører til
       billedvarianten (img + p); en ren tekstlinje skal sættes som block. */
    p.Kommentar-skribent {
        display: block;
    }

    /* Samme problem i en <div> uden billede. Egen regel og ikke lagt i
       selektørlisten ovenfor: en browser uden :has() ville kassere HELE reglen. */
    .Kommentar-skribent:not(:has(img)) {
        display: block;
    }

    blockquote p:last-of-type {
        margin-bottom: 0;
    }

    .citat-person, .hojre-kursiv {
        display: block !important;
        font-style: italic !important;
        text-align: right !important;
    }

    .related-article .card-body {
        padding: 1rem !important;
    }
    /* Mobile (default) */
    .banner--display:has(*) {
        min-height: 250px;
    }
    /* Desktop (min-width: 992px = Bootstrap's lg breakpoint) */
    @media (min-width: 992px) {
        .banner--display:has(*) {
            min-height: 190px;
        }

        .hidden-spinner {
            display: none !important;
        }
    }

    .video-wrapper {
        position: relative;
        width: 100%;
        max-width: 976px; /* Adjust as needed */
        height: 0;
        padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    }

        .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }


    .theme-primary a {
        color: hsla(0, 0%, 100%, 0.95) !important;
    }


    .paywall:before {
        content: "";
        position: absolute;
        z-index: 0;
        top: -171px;
        height: 167px;
        width: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.9) 100%);
        /*background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0.75) 24%, hsla(0, 0%, 100%, 0.9) 77%, #fff);*/
    }

    .article-preview {
        max-height: 160px;
        overflow: hidden;
        position: relative;
    }

        .article-preview::before {
            content: "";
            position: absolute;
            bottom: 0;
            height: 160px; /* adjust if needed */
            width: 100%;
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);
            pointer-events: none;
            z-index: 1;
        }


    .lm-banner:has(.banner--interscroll) .banner--interscroll {
        top: 0;
    }
    /* Skærmbredde ≥ 992px og pixel‐ratio ≥ 1.25 (125 % og op) */
    @media (min-width: 992px) and (min-resolution: 1.25dppx) {
        .lm-banner:has(.banner--interscroll) {
            --scroll-banner-offset: -40px;
        }
        /*    .featured-news {
        display: none
    }*/
    }
    /* Samme med dpi‐notation */
    @media (min-width: 992px) and (min-resolution: 120dpi) {
        .lm-banner:has(.banner--interscroll) {
            --scroll-banner-offset: -25px;
        }
        /*    .featured-news {
        display: none
    }*/
    }
    /* Ældre WebKit/Firefox‐prefixer */
    @media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-moz-device-pixel-ratio: 1.25) {
        .lm-banner:has(.banner--interscroll) {
            --scroll-banner-offset: -40px;
        }
        /* .featured-news {
        display: none
    }*/
    }

    @media (max-width: 600px) {

        .banner--spot iframe, .banner--display iframe {
            position: relative !important
        }
    }

    .hoest-tour-ticker h6.teaser-title {
        font-size: 1.3rem;
        margin: 0 auto;
    }



    .inline-banner {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        padding: 8px 16px;
        background: #f5f5f5;
        color: #222;
        border: 1px solid #ccc;
        border-radius: 6px;
    }

        .inline-banner .logo svg {
            height: 60px;
            width: auto;
            display: block;
        }

        .inline-banner .copy {
            font-size: 20px;
            font-weight: 600;
            line-height: 1.3
        }

        .inline-banner .highlight-banner {
            font-size: 28px;
            font-weight: 800;
            color: #004c97;
            display: block;
            margin: 0 0 4px 0
        }

        .inline-banner .dash {
            margin: 0 6px;
            font-weight: 400;
            color: #555
        }
        /* Size caps per format */
        .inline-banner .w980 {
            max-width: 980px;
            min-height: 80px
        }

        .inline-banner .w380 {
            max-width: 380px;
            min-height: 180px
        }

    @media (max-width: 768px) {
        .inline-banner {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 12px;
            padding: 16px;
        }

            .inline-banner .logo {
                display: flex;
                justify-content: center;
            }

                .inline-banner .logo svg {
                    width: 100%;
                    max-width: 200px; /* eller en størrelse du ønsker */
                    height: auto;
                }

            .inline-banner .copy {
                font-size: 18px;
            }

            .inline-banner .highlight-banner {
                font-size: 24px;
            }
    }



    .video-ad-banner {
        margin: 20px 0 30px 0;
        overflow: hidden;
        transition: max-height 0.6s ease-out, opacity 0.6s ease-out, margin 0.6s ease-out;
        max-height: 500px;
        opacity: 1;
    }

        .video-ad-banner.collapsed {
            max-height: 0;
            opacity: 0;
            margin: 0;
        }

    .injected-banner-text {
        display: block;
        text-align: center;
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
    }

    .video-container {
        border: 1px solid #000;
        margin-bottom: 40px;
        height: 343px;
        position: relative;
        background: #000;
    }

    .vjs-ad-top {
        padding-bottom: 56.25%;
        position: relative;
        background: #000;
    }

    #linkOverlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }

    #replayContainer {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        display: none;
    }

        #replayContainer.active {
            display: block;
        }

    #replayButton, #followLinkButton {
        background: rgba(0, 0, 0, 0.8);
        color: white;
        border: none;
        padding: 20px;
        border-radius: 10px;
        cursor: pointer;
        text-align: center;
        margin: 10px;
        transition: background 0.3s ease;
    }

        #replayButton:hover, #followLinkButton:hover {
            background: rgba(0, 0, 0, 0.9);
        }

        #replayButton svg, #followLinkButton svg {
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
        }

    #closeAdButtonContainer {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
    }

    #closeAdButton {
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 8px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        transition: background 0.3s ease;
    }

        #closeAdButton:hover {
            background: rgba(0, 0, 0, 0.9);
        }

    #audioButtonContainer {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 10;
    }

    #toggleAudioButton {
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
        transition: background 0.3s ease;
    }

        #toggleAudioButton:hover {
            background: rgba(0, 0, 0, 0.9);
        }

        #toggleAudioButton.audioOff::before {
            content: "🔇";
        }

        #toggleAudioButton.audioOn::before {
            content: "🔊";
        }

    .video-player {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
    }

    @media (max-width: 768px) {
        .video-ad-banner {
            margin: 10px 0 20px 0;
        }

        .video-container {
            height: 200px;
        }

        #replayButton, #followLinkButton {
            padding: 15px;
        }

            #replayButton svg, #followLinkButton svg {
                width: 40px;
                height: 40px;
            }
    }

    .page {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .page-content {
        flex: 1;
    }

    .featured-news {
        height: auto;
        overflow-x: clip;
    }

    .featured-news .teaser-media {
        aspect-ratio: 16 / 9 !important;
    }

    .featured-news .teaser-img,
    .featured-news .teaser-media > img {
        aspect-ratio: 16 / 9 !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
    }

    .page-header {
        background-color: #fff;
    }

    .page-content, .page-footer {
        background-color: var(--body-bg, #fff);
        position: relative;
        z-index: 1;
    }

    .card--teaser {
        border-radius: 0 !important;
        border: none !important;
    }

    .eu-box {
        border: 1px solid #000; /* small border */
        background-color: #d2d2d2;
        padding: 15px; /* optional but recommended */
        margin-bottom: 20px;
    }
    /* Blå faktaboks */
    .card.bg-blue {
        background-color: #0d6efd; /* Bootstrap primary blue */
        color: #ffffff;
    }
        /* Tekst i faktaboksen */
        .card.bg-blue p,
        .card.bg-blue li,
        .card.bg-blue h2 {
            color: #ffffff;
        }
        /* Links: hvide og fede */
        .card.bg-blue a {
            color: #ffffff;
            font-weight: 700;
            text-decoration: underline !important;
        }
            /* Hover/focus for links */
            .card.bg-blue a:hover,
            .card.bg-blue a:focus {
                color: #e6e6e6;
                text-decoration: none !important;
            }
        /* Knap i bunden – tilpasset blå baggrund */
        .card.bg-blue .btn-outline-secondary {
            color: #ffffff;
            border-color: #ffffff;
        }

            .card.bg-blue .btn-outline-secondary:hover {
                background-color: #ffffff;
                color: #0d6efd;
            }






/* Fejlrapport #4237655 — Faktaboks-trunkering (håndteres serverside i
   DocumentFactBox.razor; her er kun styling af inline "Læs mere"-link). */
a.factbox-laes-mere,
.factbox-laes-mere {
    color: hsl(208, 100%, 32%);
    cursor: pointer;
    font-weight: 600;
    margin-left: 0.25em;
    user-select: none;
    white-space: nowrap;
    text-decoration: none !important;
}

a.factbox-laes-mere:hover,
.factbox-laes-mere:hover {
    text-decoration: underline !important;
    color: hsl(208, 100%, 24%);
}


/* ──────────────────────────────────────────────────────────────────────────
   Web-font FOUT / CLS mitigation
   The Google Fonts (Bitter, Lora, PT Serif) are loaded with display=swap. Until
   they arrive the browser paints the generic `serif` (Times New Roman), then
   swaps — that is the visible font/size change and layout shift seen on the
   front page, ticker and header during load.

   These metric-matched fallback faces map Times New Roman onto each web font's
   metrics, so the pre-swap text occupies the same width/height and the swap no
   longer shifts layout. Override values were measured from the live fonts
   (canvas TextMetrics) against Times New Roman; line-gap-override is 0% because
   none of the three define a line gap. They are inserted between the web font
   and the generic `serif` in each stack (mirrors --body-font-family, the
   heading rule and .article-subtitle in effektivt.min.css).
   ────────────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: "Bitter Fallback";
    src: local("Times New Roman"), local("Times");
    size-adjust: 111.95%;
    ascent-override: 83.97%;
    descent-override: 24.12%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Lora Fallback";
    src: local("Times New Roman"), local("Times");
    size-adjust: 113.78%;
    ascent-override: 88.77%;
    descent-override: 23.73%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "PT Serif Fallback";
    src: local("Times New Roman"), local("Times");
    size-adjust: 107.93%;
    ascent-override: 96.36%;
    descent-override: 26.87%;
    line-gap-override: 0%;
}

:root {
    --body-font-family: "Bitter", "Bitter Fallback", serif;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "Lora", "Lora Fallback", serif;
}

.article-subtitle {
    font-family: "PT Serif", "PT Serif Fallback", serif;
}

/* ──────────────────────────────────────────────────────────────────────────
   TopicCluster (tag) hero – 16:9 image instead of the wide cover background.
   Desktop/tablet: 16:9. Below 720px: 4:3 with the image centered.
   A grid ::before establishes a *minimum* height from the aspect-ratio, so a
   long title/summary grows the hero downward instead of being clipped – no
   character limit on the text.
   ────────────────────────────────────────────────────────────────────────── */
/* Full-width band behind the centered hero – ambient blurred backdrop of the
   same header image so the centered 16:9 card doesn't float on an empty surface.
   No extra image production: it reuses --tagview-ambient set on the element. */
.lm-canvas-tagview.tagview-hero-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: clamp(1.5rem, 4vw, 3rem) !important;
    background-color: var(--bs-primary, #2c5234);
}

    .lm-canvas-tagview.tagview-hero-band::before {
        content: "";
        position: absolute;
        inset: -40px;
        z-index: -1;
        background-image: var(--tagview-ambient);
        background-size: cover;
        background-position: center;
        filter: blur(34px) brightness(0.55) saturate(1.1);
        transform: scale(1.12);
    }

.tagview-hero {
    display: grid;
    grid-template-areas: "stack";
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    background-color: var(--bs-primary, #2c5234);
}

    .tagview-hero::before {
        content: "";
        grid-area: stack;
        aspect-ratio: 16 / 9;
    }

    /* Stack the image and the text overlay in the same grid cell */
    .tagview-hero > * {
        grid-area: stack;
        min-width: 0;
    }

.tagview-hero-img {
    align-self: stretch;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tagview-hero-overlay {
    align-self: end;
    z-index: 1;
    width: 100%;
    padding-block: clamp(1.25rem, 4vw, 3rem);
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0) 85%);
}

    .tagview-hero .cover-title,
    .tagview-hero .cover-text {
        color: #fff;
    }

    .tagview-hero .cover-text {
        margin-bottom: 0;
        color: rgba(255, 255, 255, 0.92);
    }

/* Below 720px: 4:3 ratio with the image centered */
@media (max-width: 719.98px) {
    .tagview-hero::before {
        aspect-ratio: 4 / 3;
    }

    .tagview-hero-img {
        object-position: center center;
    }
}

/* HTML-only ticker items (Manual ticker with no image/heading/link – the editor supplies raw
   TickerHTML, typically <a><img></a>). Make the artwork fill the 20rem slide card and drop the
   inline-image gap. Inline styles in the TickerHTML still win, so this is only a sensible default. */
.featured-news .card--teaser > .ticker-html,
.featured-news .card--teaser > .ticker-html > a {
    display: block;
}

.featured-news .card--teaser > .ticker-html img {
    display: block;
    width: 100%;
    height: auto;
}

/* Compact the desktop top-nav links (was 1rem, set on .navbar). Scoped to the header nav so other
   navbars are unaffected; overrides.css loads after effektivt.min.css, so this wins. */
.lm-navbar-navigation {
    --navbar-nav-link-padding-x: 0.75rem;
}

/* Center the main nav items so the shorter Høst-Tour pill stays vertically centered (the navbar-nav
   has no align-items, so it would otherwise stretch and top-align the pill). Not the icon buttons. */
.lm-navbar-navigation .navbar-nav:not(.nav-btns) {
    align-items: center;
}

/* Seasonal "Høst-Tour" CTA in the desktop top nav: primary-teal pill, kept short so it isn't too tall
   (default nav-link padding is 0.75rem top/bottom). */
.lm-navbar-navigation .nav-link.nav-link--hoesttour {
    font-weight: 700;
    color: #fff;
    background-color: hsl(190, 56%, 30%);
    border-radius: 999px;
    padding-block: 0.35rem;
}

.lm-navbar-navigation .nav-link.nav-link--hoesttour:hover {
    color: #fff;
    background-color: hsl(190, 56%, 38%);
}

/* "Høst-Tour" badge on teaser images for documents tagged 84. Rendered as a real element inside
   .teaser-media (which is position:relative + overflow:hidden), so it anchors to and is clipped to
   the image box; z-index keeps it above the gallery/video ::before tint (z-index:1). */
.teaser-media .teaser-hoesttour {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    background-color: #f5b301;
    color: #fff;
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* På horisontale teasere er billedboksen kun clamp(5rem, 30%, 12rem) bred, så 20px-indrykket lander
   midt i miniaturen. Trækkes ind i hjørnet fra md og op (under md er teaseren stacked, se nedenfor). */
@media (min-width: 768px) {
    .teaser--horizontal .teaser-media .teaser-hoesttour {
        top: 10px;
        left: 10px;
    }
}

/* Horisontale teasere stables på mobil. .teaser--horizontal er ikke et selvstændigt layout - det er
   basis-.teaser (som er stacked) med seks variabler skrevet ovenpå, så vi sætter blot de seks tilbage
   til deres basisværdier under md. Billedet bliver dermed fuldbredde 16:9 i stedet for en 5-12rem
   miniature - hvilket også giver Høst-Tour-badgen plads.
   Tickeren (.featured-news) bruger også .teaser--horizontal men skal forblive en miniature-række
   på alle bredder - derfor undtaget via :not(). */
@media (max-width: 767.98px) {
    .teaser--horizontal:not(.featured-news *) {
        --teaser-flex-direction: column;
        --teaser-media-width: auto;
        --teaser-media-margin: var(--teaser-offset) var(--teaser-offset) 0;
        --teaser-body-width: auto;
        --teaser-title-size: clamp(1.0625rem, 0.5874rem + 3.3049cqi, 3rem);
    }

    /* i zoner er body-padding sat til et venstreindryk beregnet til sidebilledet */
    .zone .teaser--horizontal {
        --teaser-body-padding: var(--spacing-base) 0;
    }
}


/* ===== LmPagination (fejlrapport #5091790) - holdes ens paa tvaers af tenants ===== */
.lm-pagination {
	--lm-pg-accent: #036d76;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	margin: 1.5rem 0;
}

.lm-pagination__label {
	font-size: .875rem;
	color: #6c757d;
}

.lm-pagination__items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .3rem;
}

.lm-pagination__btn {
	min-width: 2.375rem;
	height: 2.375rem;
	padding: 0 .625rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--lm-pg-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--lm-pg-accent);
	text-decoration: none;
	font-weight: 500;
	font-size: .9375rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

a.lm-pagination__btn:hover,
button.lm-pagination__btn:hover {
	background: color-mix(in srgb, var(--lm-pg-accent) 12%, transparent);
	color: var(--lm-pg-accent);
	text-decoration: none;
}

.lm-pagination__btn--active {
	background: var(--lm-pg-accent);
	border-color: var(--lm-pg-accent);
	color: #fff;
	cursor: default;
}

.lm-pagination__btn--disabled,
.lm-pagination__btn:disabled {
	color: #adb5bd;
	border-color: #dee2e6;
	background: transparent;
	cursor: default;
	pointer-events: none;
}

.lm-pagination__ellipsis {
	min-width: 1.5rem;
	text-align: center;
	color: #6c757d;
	user-select: none;
}

@media (max-width: 575.98px) {
	/* Mobil: alt skal passe paa EN linje (ingen orphan-wrap). Midtervinduet skjules,
	   og foerste/sidste-pilene skjules - "1" og sidste sidetal ER allerede de links. */
	.lm-pagination__btn--middle:not(.lm-pagination__btn--active),
	.lm-pagination__btn--first,
	.lm-pagination__btn--last {
		display: none;
	}

	.lm-pagination__items {
		gap: .25rem;
	}

	.lm-pagination__btn {
		min-width: 2.125rem;
		height: 2.125rem;
		padding: 0 .5rem;
		font-size: .875rem;
	}

	.lm-pagination__ellipsis {
		min-width: 1rem;
	}

	/* To midtpunkter (aktiv side midt i arkivet) fylder for meget paa mobil:
	   skjul dem og kollaps deres efterfoelgende ellipse, saa "... ..." aldrig opstaar. */
	.lm-pagination__btn--midpoint-paired,
	.lm-pagination__btn--midpoint-paired + .lm-pagination__ellipsis {
		display: none;
	}
}


@media (max-width: 374.98px) {
	/* Smalleste enheder: skjul ogsaa inderste boundary-sidetal, saa raekken aldrig wrapper. */
	.lm-pagination__btn--boundary-inner:not(.lm-pagination__btn--active) {
		display: none;
	}
}

/* Fade-in af listen efter sideskift (LmPagination) - perceived feedback ved hurtige loads. */
.lm-fade-in {
	animation: lmFadeIn .3s ease-out;
}

@keyframes lmFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* ─── Google Preferred Sources ───────────────────────────────────────────────
   CTA'en er et deeplink til https://www.google.com/preferences/source, ikke Googles
   publisher.js-knap: scriptet initialiserer kun ved sideload, og AppRoutes kører
   InteractiveServer, så <head> genindlæses aldrig ved intern navigation.
   Google-G'et må ikke farves om, så knapfladen er altid hvid med Googles egen
   kantfarve (#dadce0) - resten af boksen er husets sandfarve. */

.preferred-source {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	gap: .5625rem;
	font-family: var(--font-sans-serif);
	font-weight: 600;
	line-height: 1.2;
	border-radius: 50rem;
	background-color: var(--white);
	color: var(--body-color);
	text-decoration: none !important;
	transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

	.preferred-source:hover,
	.preferred-source:focus {
		background-color: var(--gray-100);
		border-color: var(--gray-400);
		box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
		color: var(--body-color);
	}

	.preferred-source:focus-visible {
		outline: 3px solid rgba(var(--primary-rgb), .45);
		outline-offset: 2px;
	}

.preferred-source-glyph {
	flex: none;
	display: block;
}

.preferred-source-label {
	white-space: nowrap;
}

.preferred-source-label--short {
	display: none;
}

/* Chip - artiklens byline */
.preferred-source--chip {
	min-height: 44px;
	padding: 0 1.125rem;
	border: 1px solid var(--gray-300);
	font-size: var(--fs-sm);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

	.preferred-source--chip .preferred-source-glyph {
		width: 18px;
		height: 18px;
	}

/* Pille - footerens ikonrække */
.preferred-source--pill {
	min-height: 40px;
	padding: 0 .9375rem;
	border: 1px solid #dadce0;
	font-size: var(--fs-xs);
	color: #3c4043;
	box-shadow: 0 1px 2px rgba(60, 64, 67, .14);
}

	.preferred-source--pill .preferred-source-glyph {
		width: 17px;
		height: 17px;
	}

/* Knap - inde i båndet */
.preferred-source--button {
	min-height: 52px;
	padding: 0 1.625rem;
	border: 1px solid #dadce0;
	font-size: var(--fs-base);
	color: #3c4043;
	box-shadow: 0 1px 3px rgba(60, 64, 67, .15);
}

	.preferred-source--button .preferred-source-glyph {
		width: 20px;
		height: 20px;
	}

/* Båndet - artikelbund og forside */
.preferred-source-band {
	display: flex;
	align-items: center;
	gap: var(--spacing-xl);
	background-color: hsl(45, 35%, 90%);
	border: 1px solid var(--tertiary);
	border-radius: var(--border-radius);
	padding: var(--spacing-lg) var(--spacing-xl);
}

.preferred-source-band-text {
	flex: 1 1 auto;
}

.preferred-source-band-kicker {
	display: block;
	font-family: var(--font-sans-serif);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--secondary);
	margin-bottom: .375rem;
}

.preferred-source-band-headline {
	font-family: Lora, serif;
	font-weight: 600;
	font-size: var(--fs-lg);
	line-height: 1.3;
	margin: 0 0 .5rem;
	color: var(--body-color);
}

.preferred-source-band-body {
	margin: 0;
	font-size: var(--fs-base);
	line-height: 1.6;
	color: var(--body-light-color);
	max-width: 68ch;
}

.preferred-source-band-action {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .5rem;
}

.preferred-source-note {
	font-family: var(--font-sans-serif);
	font-size: var(--fs-2xs);
	line-height: 1.4;
	color: var(--gray-500);
	text-align: center;
	text-wrap: pretty;
	max-width: 18.125rem;
}

/* Forfatterbilledet i bylinen holdes INDE mellem de to hairlines. Sitets egen regel lægger billedet
   absolut i bunden af en 60px bred figur uden højde, med max-height 70px, mens navnerækken kun er 50px:
   de øverste 20px lå derfor oven på den øverste linje på desktop, og på en telefon, hvor rækken er
   højere, hang billedet ud af bunden. Nu ligger det i flowet og fylder rækken fra linje til linje -
   ingen luft over eller under - og bredden følger billedet selv. */
.byline .byline-author {
	align-items: stretch;
}

.byline .byline-img {
	display: flex;
	width: auto;
	height: 60px;
	margin: 0 .75rem 0 0;
}

.byline .byline-img img {
	position: static;
	display: block;
	width: auto;
	height: 100%;
	max-height: none;
	object-fit: contain;
}

/* Navnerækken følger billedets højde i stedet for sine egne 50px, så linjerne rammer billedet præcist. */
.byline .byline-name {
	height: auto;
	min-height: 60px;
}

/* Tættere på det, der følger efter (afspilleren, brødteksten): sitets 1,5rem var for meget luft. */
.byline {
	margin-bottom: 1rem;
}

/* Chippen ligger til højre i byline-rækken, men kun når rækken faktisk er en række */
@media (min-width: 768px) {
	.byline-preferred-source {
		margin-left: auto;
	}
}

/* Mobil: chippen får stadig sin egen linje under forfatteren, men er ikke længere en
   knap i fuld bredde. Den er en lav meta-stribe: hairline over (.byline's egen
   border-bottom lukker den nedadtil), ingen ramme, ingen flade, chevron yderst til
   højre. Så læses den som en linje i bylinen frem for som en CTA, der konkurrerer med
   artiklens egne knapper. Ingen luft over hairlinen: rækken er gap-0 på mobil (sat i
   DocumentByline.razor, fordi Bootstraps gap-* er !important), så billedet går fra linje til linje. */
@media (max-width: 767.98px) {
	.byline-preferred-source .preferred-source--chip {
		width: 100%;
		justify-content: flex-start;
		min-height: 0;
		gap: .5rem;
		padding: .5rem 0;
		border: 0;
		border-top: 1px solid var(--gray-300);
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
		font-size: var(--fs-2xs);
		color: var(--body-light-color);
	}

		.byline-preferred-source .preferred-source--chip:hover,
		.byline-preferred-source .preferred-source--chip:focus {
			background-color: transparent;
			box-shadow: none;
			color: var(--body-color);
		}

		.byline-preferred-source .preferred-source--chip:focus-visible {
			outline-offset: -2px;
		}

		.byline-preferred-source .preferred-source--chip .preferred-source-glyph {
			width: 15px;
			height: 15px;
		}

		/* Chevron viser at striben fører ud af sitet. Tegnet med borders og ikke som
		   tegnet ›: husets sans-font mangler glyffen og rendere en tofu-firkant.
		   Dekorativ - hele linkets tekst står allerede i aria-label. */
		.byline-preferred-source .preferred-source--chip::after {
			content: "";
			flex: none;
			margin-left: auto;
			margin-right: .125rem;
			width: .375rem;
			height: .375rem;
			border-top: 1.5px solid var(--gray-500);
			border-right: 1.5px solid var(--gray-500);
			transform: rotate(45deg);
		}
}

@media (max-width: 767.98px) {
	.preferred-source-band {
		flex-direction: column;
		align-items: stretch;
		gap: var(--spacing-md);
		padding: var(--spacing-md);
	}

	.preferred-source-band-action {
		align-items: stretch;
	}

	.preferred-source--button {
		width: 100%;
	}

	.preferred-source-note {
		max-width: none;
	}
}

/* ─── Planlagt blackout (Components/Shared/Common/ScheduledBlackout.razor) ────
   Overlayet skal ligge over ALT paa siden - ogsaa OneSignal-overlayet
   (z-index 999999, defineret nederst i denne fil) og #modal-search .close
   (99999). Derfor den ekstreme vaerdi frem for husets normale skala.

   Scroll-laasen er ren CSS via :has() og ikke en klasse paa <body>. Tre grunde:
   Blazor kan slet ikke saette body-klasser uden JS-interop; laasen virker
   dermed ogsaa i det prerenderede HTML, hvor der endnu ikke er nogen circuit;
   og den rydder sig selv op i samme oejeblik Blazor fjerner overlayet fra DOM.
   !important er noedvendigt, fordi linje 76 i denne fil bevidst ophaever
   Bootstraps .modal-open-laas globalt med samme vaegt.
   :has() bruges i forvejen flere steder i filen, saa der er ingen ny
   browserrisiko. 100dvh frem for 100vh, saa mobilbrowserens adressebjaelke
   ikke efterlader en stribe af siden synlig under overlayet. */
html:has(.blackout),
body:has(.blackout) {
	height: 100dvh;
	overflow: hidden !important;
}

.blackout {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(1.5rem, 6vw, 4rem) clamp(1.25rem, 6vw, 3rem);
	background: #000;
	color: #fff;
	text-align: center;
}

	/* Husets normale fokusmarkering er en primaerfarvet glow, som forsvinder paa
	   sort. Her skal den vaere hvid for at kunne ses. */
	.blackout :focus-visible {
		outline: 3px solid #fff;
		outline-offset: 3px;
	}

	.blackout-inner {
		width: 100%;
		max-width: 44rem;
		margin: auto;
	}

	.blackout-title {
		margin: 0 0 clamp(1.25rem, 4vw, 2rem);
		font-family: var(--font-sans-serif);
		font-size: clamp(1.75rem, 7vw, 3.5rem);
		font-weight: 800;
		line-height: 1.05;
		letter-spacing: .01em;
		text-transform: uppercase;
		color: #fff;
	}

	.blackout-lead {
		margin: 0 0 clamp(1rem, 3vw, 1.5rem);
		font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
		font-weight: 600;
		line-height: 1.45;
		color: #fff;
	}

	.blackout-body {
		margin: 0 0 clamp(1.75rem, 5vw, 2.5rem);
		font-size: clamp(.9375rem, 2vw, 1.0625rem);
		line-height: 1.6;
		color: rgba(255, 255, 255, .78);
	}

		.blackout-body > p {
			margin: 0 0 .75rem;
		}

			.blackout-body > p:last-child {
				margin-bottom: 0;
			}

	/* CTA'en er sidens eneste vej videre, saa den er den hvide flade. Pilen er en
	   ren glyf her - modsat .preferred-source-chippen, hvor husets sans mangler
	   tegnet - fordi overlayet saetter sin egen skrifttype.
	   Selektoren er bevidst .blackout .blackout-cta og ikke bare .blackout-cta:
	   temaets a:not(.btn, .gallery, .collection-image, .teaser, .nav-link) i
	   effektivt.min.css har specificitet (0,1,1) og ville ellers farve linket
	   turkis med --theme-accent. To klasser slaar den uden !important. */
	.blackout .blackout-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .625rem;
		min-height: 3.25rem;
		padding: .875rem 1.75rem;
		border: 2px solid #fff;
		border-radius: 50rem;
		background-color: #fff;
		color: #000;
		font-family: var(--font-sans-serif);
		font-size: clamp(.9375rem, 2vw, 1.0625rem);
		font-weight: 700;
		letter-spacing: .02em;
		text-transform: uppercase;
		text-decoration: none !important;
		transition: background-color .15s ease-in-out, color .15s ease-in-out;
	}

		.blackout .blackout-cta:hover,
		.blackout .blackout-cta:focus {
			background-color: transparent;
			color: #fff;
		}

	.blackout-cta-arrow {
		font-size: 1.1em;
		line-height: 1;
	}

	.blackout-return {
		margin: clamp(1.5rem, 4vw, 2rem) 0 0;
		font-size: var(--fs-sm);
		color: rgba(255, 255, 255, .6);
	}

	/* Bevidst underordnet CTA'en: en tekstknap, ikke en konkurrerende flade. */
	.blackout-skip {
		margin-top: clamp(1.25rem, 3vw, 1.75rem);
		padding: .5rem .25rem;
		border: 0;
		background: none;
		color: rgba(255, 255, 255, .6);
		font-family: var(--font-sans-serif);
		font-size: var(--fs-sm);
		text-decoration: underline;
		text-underline-offset: .25em;
		cursor: pointer;
		transition: color .15s ease-in-out;
	}

		.blackout-skip:hover,
		.blackout-skip:focus {
			color: #fff;
		}

@media (prefers-reduced-motion: no-preference) {
	.blackout {
		animation: blackout-fade .35s ease-out both;
	}

	@keyframes blackout-fade {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
}

@media (max-width: 767.98px) {
	.blackout {
		align-items: flex-start;
	}

	.blackout .blackout-cta {
		width: 100%;
	}
}

/* ─── Web push permission-prompt (wwwroot/js/webpush.js) ─────────────────────
   Laa foer inline i AppEffektivt.razor; flyttet hertil fordi overrides.css er
   den eneste CSS-fil huset vedligeholder. z-index 999999 er bevaret - se
   blackout-blokken ovenfor, som bevidst skal ligge over denne.

   Overlayet har fire tilstande, styret af data-state fra webpush.js:
     ask     - soft-prompt med knapper. Selve den native browser-dialog kaldes
               foerst paa klik, fordi Firefox/Safari kraever en user gesture og
               Chrome ellers sender anmodningen i "quiet UI".
     waiting - den native dialog er aaben; pilen peger op mod den (Chrome/Firefox
               tegner den oeverst til venstre i vinduet).
     denied  - brugeren har blokeret; vi forklarer vejen tilbage via haengelaasen.
     quiet   - Chrome viste aldrig dialogen (quieter permission UI). Uden denne
               tilstand forsvandt overlayet bare tavst efter et par sekunder. */
.onesignal-permission-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	z-index: 999999;
}

	.onesignal-permission-overlay.active {
		display: block;
	}

.onesignal-permission-content {
	position: absolute;
	top: 130px;
	left: 140px;
	text-align: center;
	color: #fff;
	max-width: 350px;
}

	/* I ask/denied/quiet er der ingen browser-dialog at pege paa, saa kortet
	   centreres i stedet for at klaebe sig op i hjoernet. */
	.onesignal-permission-overlay[data-state="ask"] .onesignal-permission-content,
	.onesignal-permission-overlay[data-state="denied"] .onesignal-permission-content,
	.onesignal-permission-overlay[data-state="quiet"] .onesignal-permission-content {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 420px;
	}

.onesignal-permission-arrow {
	font-size: 48px;
	line-height: 1;
	animation: onesignal-bounce 1s infinite;
}

	/* Pilen peger paa browserens egen dialog og vises derfor KUN i waiting. I quiet
	   ligger Chromes klokkeikon i hoejre ende af adressefeltet, ikke hvor pilen peger,
	   saa der forklarer teksten det i stedet - en pil mod det forkerte sted er vaerre
	   end ingen pil. */
	.onesignal-permission-overlay:not([data-state="waiting"]) .onesignal-permission-arrow {
		display: none;
	}

.onesignal-permission-text {
	font-size: 18px;
	line-height: 1.5;
	margin-top: 12px;
	background: rgba(0, 0, 0, 0.8);
	padding: 16px 20px;
	border-radius: 8px;
}

.onesignal-permission-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 14px;
}

	/* Kun soft-prompten har knapper; de oevrige tilstande lukkes af sig selv
	   eller af "Luk"-knappen, som webpush.js selv skifter tekst paa. */
	.onesignal-permission-overlay:not([data-state="ask"]) .onesignal-permission-allow {
		display: none;
	}

.onesignal-permission-btn {
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: 6px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.onesignal-permission-allow {
	background: #4e8b1d;
	color: #fff;
}

	.onesignal-permission-allow:hover,
	.onesignal-permission-allow:focus-visible {
		background: #3f7117;
	}

.onesignal-permission-dismiss {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
}

	.onesignal-permission-dismiss:hover,
	.onesignal-permission-dismiss:focus-visible {
		background: rgba(255, 255, 255, 0.12);
		border-color: #fff;
	}

@keyframes onesignal-bounce {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.onesignal-permission-arrow {
		animation: none;
	}
}

@media (max-width: 768px) {
	.onesignal-permission-content {
		top: 80px;
		left: 50%;
		transform: translateX(-50%);
		max-width: 90%;
	}

	.onesignal-permission-text {
		font-size: 16px;
	}

	.onesignal-permission-btn {
		flex: 1 1 100%;
	}
}

/* ─── Kampagnebånd over topartiklen (CampaignBand.razor) ──────────────────────
   Båndet skal kunne ses som noget andet end en artikel, så det låner intet fra
   .teaser: sort flade, gul fare-stribe og versal sans i stedet for hvidt kort
   med serif. Gul på sort er samtidig husets egne farver her — --topstory er den
   gule flade, topartiklen i forvejen bruger — så det er markant uden at være
   fremmed. Det er den nedtonede afløser for fuldskærms-blackoutet.

   Selektoren er .campaign-band.campaign-band--link og ikke bare .campaign-band:
   temaets a:not(.btn, .gallery, .collection-image, .teaser, .nav-link) i
   effektivt.min.css har specificitet (0,1,1) og ville ellers farve båndet
   turkis med --theme-accent. To klasser slår den uden !important. */
.campaign-band {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-lg) 0;
	border-radius: var(--border-radius);
	background-color: #101010;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
	transition: box-shadow .15s ease-in-out;
}

.campaign-band.campaign-band--link {
	color: #fff;
	text-decoration: none !important;
}

	.campaign-band:hover,
	.campaign-band:focus-visible {
		box-shadow: inset 0 0 0 1px var(--topstory);
	}

	.campaign-band:focus-visible {
		outline: 3px solid var(--topstory);
		outline-offset: 2px;
	}

/* Fare-striben — båndets signatur. align-self: stretch lader den følge højden
   uden at kende den, så den også holder, når teksten bryder til flere linjer. */
.campaign-band-rail {
	flex: none;
	align-self: stretch;
	width: .875rem;
	background-image: repeating-linear-gradient(135deg, var(--topstory) 0 .5rem, #101010 .5rem 1rem);
}

.campaign-band-text {
	flex: 1 1 auto;
	min-width: 0;
}

.campaign-band-kicker {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--font-sans-serif);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--topstory);
}

.campaign-band-pulse {
	flex: none;
	width: .4375rem;
	height: .4375rem;
	border-radius: 50%;
	background-color: var(--topstory);
}

.campaign-band-headline {
	display: block;
	margin: .375rem 0;
	font-family: var(--font-sans-serif);
	font-size: clamp(1.375rem, 3.2vw, 1.875rem);
	font-weight: 800;
	line-height: 1.08;
	text-transform: uppercase;
	text-wrap: balance;
	color: #fff;
}

.campaign-band-body {
	display: block;
	max-width: 52ch;
	font-size: var(--fs-sm);
	line-height: 1.5;
	text-wrap: pretty;
	color: rgba(255, 255, 255, .72);
}

/* CTA'en er en span, ikke et link — hele båndet er ankeret. Derfor hænger
   hover/focus på .campaign-band og ikke på knappen selv. */
.campaign-band-cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 2.875rem;
	padding: .625rem 1.375rem;
	border: 2px solid var(--topstory);
	border-radius: 50rem;
	background-color: var(--topstory);
	color: #000;
	font-family: var(--font-sans-serif);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

	.campaign-band:hover .campaign-band-cta,
	.campaign-band:focus-visible .campaign-band-cta {
		background-color: transparent;
		color: var(--topstory);
	}

.campaign-band-arrow {
	flex: none;
	width: 1rem;
	height: 1rem;
	transition: transform .15s ease-in-out;
}

	.campaign-band:hover .campaign-band-arrow {
		transform: translateX(.1875rem);
	}

@media (prefers-reduced-motion: no-preference) {
	.campaign-band-pulse {
		animation: campaign-band-pulse 2.4s ease-out infinite;
	}

	@keyframes campaign-band-pulse {
		0% {
			box-shadow: 0 0 0 0 rgba(255, 255, 0, .55);
		}

		70% {
			box-shadow: 0 0 0 .5rem rgba(255, 255, 0, 0);
		}

		100% {
			box-shadow: 0 0 0 0 rgba(255, 255, 0, 0);
		}
	}
}

/* Mobil: striben lægger sig som en tapelinje øverst i stedet for langs kanten,
   og knappen fylder båndets bredde. De negative margener spejler paddingen. */
@media (max-width: 767.98px) {
	.campaign-band {
		flex-direction: column;
		align-items: stretch;
		gap: var(--spacing-md);
		padding: 0 var(--spacing-lg) var(--spacing-lg);
	}

	.campaign-band-rail {
		width: auto;
		height: .625rem;
		margin: 0 calc(var(--spacing-lg) * -1);
		background-image: repeating-linear-gradient(135deg, var(--topstory) 0 .4375rem, #101010 .4375rem .875rem);
	}

	.campaign-band-cta {
		width: 100%;
	}
}


/* ──────────────────────────────────────────────────────────────────────────
   Container-moduler (Faktaboksmodul / Tekstboksmodul).
   Et modul er en CMSContent-blok (CMSContentType 226), som andre blokke ligger
   inde i (ParentCMSContent_id). Blokkene renderes af deres egne komponenter
   INDE I kortet (DocumentFactBoxModule / DocumentTextBoxModule), så her er kun
   afstande og titlen — selve kortet er det samme som den gamle enkeltbloks-
   faktaboks (.card--factbox) og tekstboks (.card.theme-primary).
   ────────────────────────────────────────────────────────────────────────── */
.card--factbox-module .card-body > *:last-child,
.card--textbox-module .card-body > *:last-child {
	margin-bottom: 0;
}

.card--factbox-module .card-body > table,
.card--factbox-module .card-body > .table-responsive,
.card--factbox-module .card-body > figure,
.card--factbox-module .card-body > blockquote,
.card--factbox-module .card-body > .row,
.card--textbox-module .card-body > table,
.card--textbox-module .card-body > .table-responsive,
.card--textbox-module .card-body > figure,
.card--textbox-module .card-body > blockquote,
.card--textbox-module .card-body > .row {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

/* Tekstboksens titel spejler faktaboksens (.faktaboks-titel i det genererede stylesheet). */
.tekstboks-titel {
	font-size: var(--fs-lg);
	margin-bottom: 1rem;
}


/* --------------------------------------------------------------------------
   Podcast: L-Play-siden (Pages/PodcastPage.razor) og sitets ene afspiller,
   "docken", i bunden af vinduet (Shared/Audio/PodcastDock.razor +
   js/podcast-dock.js).

   .podcast-lead* er L-Play-sidens FREMHAEVEDE afsnit (.podcast-lead--page).
   Klassenavnet er aeldre end siden: reglerne var delt med forsidens lead
   (Common/PodcastLead.razor), som blev slettet 2026-09-15 - forsiden har
   PodcastStrip og sektionssiderne SectionUniverse i stedet. Kun L-Play bruger
   dem nu, og widget-reglerne (--solo, __watermark, __head, __all, __ai,
   --cover og den parkerede kanal-række) er fjernet med komponenten. De står
   i git-historikken, hvis leadet skal genopstaa.

   Samme komposition som appens podcast-modul, saa laeseren moeder det samme
   paa web og i app: ET fremhaevet afsnit paa kanalens brand-gradient med EN
   stor, hvid "Afspil"-knap, og alle kanaler som kort nedenunder. Alle kanaler
   er for abonnenter; en laeser uden abonnement hoerer en smagsproeve
   (intro + laase-besked) og faar derefter en pulserende "Faa adgang"-knap
   (.is-preview-ended, sat af docken). Lyden koerer i docken, der glider op
   nedefra og bliver der, mens laeseren navigerer videre.

   Tilstand: js/podcast-dock.js holder .is-current/.is-playing paa ALT med
   data-podcast-id (knapper, kort, tidslinjer) og maler --podcast-progress
   paa tidslinjerne. Al visuel respons herfra - Afspil/Pause, glyf -> lydboelge,
   tidslinjens fyld - er ren CSS paa de klasser.

   Sitets stylesheet farver alle links med `a:not(.btn, ...)` (specificitet 0,1,1),
   som slaar en enkelt klasse. Derfor er hvide links herunder skrevet som
   `.podcast-lead a.klasse` - ellers bliver de link-groenne.
   -------------------------------------------------------------------------- */

/* ---- Kanalernes brand-gradienter (samme par som appens BrandGradients) ---- */
.podcast-art--kvaeg       { background: linear-gradient(135deg, #036d76, #66332a); }
.podcast-art--grise       { background: linear-gradient(135deg, #b0722a, #66332a); }
.podcast-art--planter     { background: linear-gradient(135deg, #488a42, #036d76); }
.podcast-art--maskiner    { background: linear-gradient(135deg, #5a6b6d, #036d76); }
.podcast-art--business    { background: linear-gradient(135deg, #66332a, #b0722a); }
.podcast-art--marked      { background: linear-gradient(135deg, #b0722a, #036d76); }
.podcast-art--debat       { background: linear-gradient(135deg, #66332a, #5a6b6d); }
.podcast-art--dagens-avis { background: linear-gradient(135deg, #036d76, #488a42); }
.podcast-art--default     { background: linear-gradient(135deg, #036d76, #66332a); }
/* Lokalaviserne: fire toner af samme familie, saa de laeses som EN gruppe paa L-Play, men en laeser
   stadig kan kende sin egen sides kort fra naboens. */
.podcast-art--landbrugnord { background: linear-gradient(135deg, #2c4f72, #036d76); }
.podcast-art--landbrugsyd  { background: linear-gradient(135deg, #488a42, #2c4f72); }
.podcast-art--landbrugoest { background: linear-gradient(135deg, #5a6b6d, #2c4f72); }
.podcast-art--landbrugfyn  { background: linear-gradient(135deg, #036d76, #488a42); }

.podcast-glyph {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* ---- Cover-morph: glyffen toner ud og en lydboelge toner ind, mens afsnittet spiller ----
   .podcast-morph er selve coveret (lead, kort, dock); .is-playing sidder paa
   det element, docken har markeret (lead-sektionen, kortet, docken selv). */
.podcast-morph {
	position: relative;
}

.podcast-morph .podcast-glyph {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.podcast-wavebars {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.podcast-wavebars i {
	display: block;
	width: 4px;
	height: 50%;
	border-radius: 4px;
	background: currentColor;
	transform: scaleY(0.35);
}

.is-playing .podcast-morph .podcast-glyph {
	opacity: 0;
	transform: scale(0.6);
}

.is-playing .podcast-morph .podcast-wavebars {
	opacity: 1;
	transform: none;
}

/* Selve animationen hoerer til TILSTANDEN - ikke til stregerne med en pause paa. En
   pauset animation, en anden regel skal genstarte, er skroebelig: enhver animation-
   shorthand i kaskaden nulstiller play-state igen, og i praksis stod stregerne stille.
   Forskudt timing, saa de boelger i stedet for at pulsere i takt. */
.is-playing .podcast-morph .podcast-wavebars i {
	animation: podcast-wave 1s ease-in-out infinite;
}

.is-playing .podcast-morph .podcast-wavebars i:nth-child(1) { animation-delay: 0s;    animation-duration: 0.9s; }
.is-playing .podcast-morph .podcast-wavebars i:nth-child(2) { animation-delay: 0.18s; animation-duration: 1.1s; }
.is-playing .podcast-morph .podcast-wavebars i:nth-child(3) { animation-delay: 0.36s; animation-duration: 0.8s; }
.is-playing .podcast-morph .podcast-wavebars i:nth-child(4) { animation-delay: 0.12s; animation-duration: 1s; }
.is-playing .podcast-morph .podcast-wavebars i:nth-child(5) { animation-delay: 0.3s;  animation-duration: 1.2s; }

@keyframes podcast-wave {
	0%, 100% { transform: scaleY(0.35); }
	50%      { transform: scaleY(1); }
}

/* ---- Den store afspil-knap (L-Play, kortene, striben) ---- */
.podcast-play {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #036d76;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	padding: 0.55rem 1.3rem 0.55rem 0.6rem;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.55);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.podcast-play:hover,
.podcast-play:focus-visible {
	background: #f6f3f2;
	color: #025961;
	text-decoration: none;
	transform: translateY(-1px);
}

.podcast-play__icon {
	position: relative;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #036d76;
}

/* Trekanten er optisk centreret (lidt til hoejre for boksens midte). */
.podcast-play__icon::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 11px;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #fff;
}

.podcast-play__label--pause {
	display: none;
}

/* Spillende tilstand (docken saetter .is-playing paa knappen): to streger og "Pause". */
.podcast-play.is-playing .podcast-play__label--play {
	display: none;
}

.podcast-play.is-playing .podcast-play__label--pause {
	display: inline;
}

.podcast-play.is-playing .podcast-play__icon::before {
	left: 13px;
	top: 12px;
	width: 12px;
	height: 14px;
	border: 0;
	background: linear-gradient(90deg, #fff 0 4px, transparent 4px 8px, #fff 8px 12px);
}

/* Knappen i afsnitslisten er teal paa hvidt. */
.podcast-play--card {
	background: #036d76;
	color: #fff;
	box-shadow: 0 8px 18px -12px rgba(3, 109, 118, 0.9);
}

.podcast-play--card:hover,
.podcast-play--card:focus-visible {
	background: #025961;
	color: #fff;
}

.podcast-play--card .podcast-play__icon {
	background: #fff;
}

.podcast-play--card .podcast-play__icon::before {
	border-color: transparent transparent transparent #036d76;
}

.podcast-play--card.is-playing .podcast-play__icon::before {
	background: linear-gradient(90deg, #036d76 0 4px, transparent 4px 8px, #036d76 8px 12px);
}

/* Kompakt variant til listen af tidligere afsnit. */
.podcast-play--compact {
	gap: 0.45rem;
	font-size: 0.9rem;
	padding: 0.35rem 0.95rem 0.35rem 0.4rem;
}

.podcast-play--compact .podcast-play__icon {
	width: 30px;
	height: 30px;
}

.podcast-play--compact .podcast-play__icon::before {
	left: 11px;
	top: 9px;
	border-width: 6px 0 6px 10px;
}

.podcast-play--compact.is-playing .podcast-play__icon::before {
	left: 10px;
	top: 9px;
	width: 10px;
	height: 12px;
	background: linear-gradient(90deg, #036d76 0 3px, transparent 3px 7px, #036d76 7px 10px);
}

/* ---- Tidslinje: vises kun for det afsnit, der ligger i docken (.is-current) ---- */
.podcast-timeline {
	display: none;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.9rem;
}

.podcast-timeline.is-current {
	display: flex;
	animation: podcast-reveal 0.25s ease;
}

@keyframes podcast-reveal {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

/* 18px hoej ramme at ramme med fingeren; selve linjen er 5px. touch-action: none,
   saa et traek i linjen spoler i stedet for at scrolle siden. */
.podcast-timeline__track {
	position: relative;
	flex: 1 1 auto;
	height: 18px;
	border-radius: 999px;
	cursor: pointer;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.podcast-timeline__track::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
}

.podcast-timeline__fill {
	position: absolute;
	left: 0;
	top: 50%;
	height: 5px;
	margin-top: -2.5px;
	width: calc(var(--podcast-progress, 0) * 100%);
	border-radius: 999px;
	background: #fff;
}

.podcast-timeline__fill::after {
	content: "";
	position: absolute;
	right: -7px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	transform: scale(0.85);
	transition: transform 0.15s ease;
}

.podcast-timeline__track:hover .podcast-timeline__fill::after,
.podcast-timeline__track:focus-visible .podcast-timeline__fill::after {
	transform: scale(1.1);
}

.podcast-timeline__track:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.podcast-timeline__time {
	flex: 0 0 auto;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.9;
}

/* Paa hvide kort: teal linje. */
.podcast-timeline--card {
	margin-top: 0.75rem;
}

.podcast-timeline--card .podcast-timeline__track::before {
	background: rgba(3, 109, 118, 0.16);
}

.podcast-timeline--card .podcast-timeline__fill,
.podcast-timeline--card .podcast-timeline__fill::after {
	background: #036d76;
}

.podcast-timeline--card .podcast-timeline__track:focus-visible {
	outline-color: #036d76;
}

.podcast-timeline--card .podcast-timeline__time {
	color: #6e6e6e;
	opacity: 1;
}

/* ---- L-Play: det fremhaevede afsnit ---- */
.podcast-lead {
	container: podcast-lead / inline-size;
	margin: 0 0 1.5rem;
	border-radius: 18px;
	overflow: hidden;
	background: #2a1b17;
	color: #fff;
	box-shadow: 0 16px 36px -24px rgba(20, 16, 15, 0.7);
}

.podcast-lead--page {
	scroll-margin-top: 150px;
}

.podcast-lead__hero {
	position: relative;
	overflow: hidden;
	padding: 1.1rem 1.25rem 1.25rem;
	color: #fff;
}

/* Indholdet ligger i sit eget lag over heroens gradient. */
.podcast-lead__row,
.podcast-lead .podcast-timeline,
.podcast-lead a.podcast-lead__cta {
	position: relative;
	z-index: 1;
}

.podcast-lead__kicker {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.85rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.92;
}

.podcast-lead__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5fb8bf;
}

/* Cover + tekst + knap paa EN raekke. Knappen (.podcast-lead__actions) fylder hele
   bredden og falder ned paa sin egen linje, indtil kortet er bredt nok - se
   container-forespoergslen nedenfor. */
.podcast-lead__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

/* Frostet cover: hvid flade i lav opacitet, glyffen ovenpaa i fuld hvid. */
.podcast-lead__cover {
	flex: 0 0 68px;
	width: 68px;
	height: 68px;
	padding: 16px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.podcast-lead__text {
	flex: 1 1 12rem;
	min-width: 0;
}

.podcast-lead__title {
	margin: 0 0 0.3rem;
	font-size: clamp(1.15rem, 1.9vw + 0.6rem, 1.55rem);
	line-height: 1.25;
	color: #fff;
}

.podcast-lead__meta {
	margin: 0;
	font-size: 0.875rem;
	color: #fff;
	opacity: 0.85;
}

.podcast-lead__actions {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.75rem;
}

/* Bredt kort: knappen til hoejre for titlen, saa pladsen bruges. */
@container podcast-lead (min-width: 560px) {
	.podcast-lead__actions {
		flex: 0 0 auto;
		margin-left: auto;
	}
}

/* "Alle afsnit" beside the play button on the featured block - the same white pill as "Alle podcasts",
   but a <button>, so it needs the button reset the link never did. */
.podcast-lead button.podcast-lead__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.9rem;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.podcast-lead button.podcast-lead__more:hover,
.podcast-lead button.podcast-lead__more:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
}

/* Det fremhaevede afsnits bagkatalog ligger paa hvidt under heroen - og skal derfor
   nulstille .podcast-lead's hvide tekstfarve, ellers staar afsnitstitlerne hvidt paa hvidt. */
.podcast-lead__episodes {
	padding: 0 1.25rem 1.1rem;
	background: #fff;
	color: #2b2b2b;
}

.podcast-lead__episodes .podcast-episode__title,
.podcast-lead__episodes .podcast-episode__teaser {
	color: #2b2b2b;
}

.podcast-lead__episodes .podcast-episodes {
	padding-top: 0;
}

.podcast-lead__teaser {
	margin: 0;
	padding: 0.9rem 1.25rem 1.1rem;
	background: #fff;
	color: #404040;
	font-size: 0.95rem;
}

/* ---- Docken: sitets ene afspiller, fast i bunden af vinduet ----
   z-index 1040 ligger over indholdet og under Bootstraps modaler (1055),
   blackout'et og OneSignal-overlayet. */
.podcast-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1040;
	background: #2a1b17;
	color: #fff;
	box-shadow: 0 -14px 34px -18px rgba(0, 0, 0, 0.7);
	padding-bottom: env(safe-area-inset-bottom);
	transform: translateY(110%);
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.podcast-dock.is-open {
	transform: none;
}

/* Sidens indhold skal kunne scrolles fri af docken. */
body.has-podcast-dock {
	padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* Soegelinjen langs dockens overkant. Rammen er 14px hoej og rager 6px op over
   docken, saa den er til at ramme; linjen selv er 4px og vokser under markoeren. */
.podcast-dock__track {
	position: absolute;
	left: 0;
	right: 0;
	top: -6px;
	height: 14px;
	cursor: pointer;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.podcast-dock__track::before,
.podcast-dock__buffer,
.podcast-dock__fill {
	position: absolute;
	left: 0;
	top: 6px;
	height: 4px;
	transition: height 0.15s ease, top 0.15s ease;
}

.podcast-dock__track::before {
	content: "";
	right: 0;
	background: rgba(255, 255, 255, 0.16);
}

.podcast-dock__buffer {
	width: calc(var(--podcast-buffered, 0) * 100%);
	background: rgba(255, 255, 255, 0.2);
}

.podcast-dock__fill {
	width: calc(var(--podcast-progress, 0) * 100%);
	background: #5fb8bf;
}

.podcast-dock__fill::after {
	content: "";
	position: absolute;
	right: -6px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.podcast-dock__track:hover::before,
.podcast-dock__track:hover .podcast-dock__buffer,
.podcast-dock__track:hover .podcast-dock__fill,
.podcast-dock__track:focus-visible::before,
.podcast-dock__track:focus-visible .podcast-dock__buffer,
.podcast-dock__track:focus-visible .podcast-dock__fill {
	top: 5px;
	height: 6px;
}

.podcast-dock__track:hover .podcast-dock__fill::after,
.podcast-dock__track:focus-visible .podcast-dock__fill::after {
	opacity: 1;
	transform: none;
}

.podcast-dock__track:focus-visible {
	outline: 2px solid #5fb8bf;
	outline-offset: -2px;
}

.podcast-dock__inner {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0.7rem 1rem;
}

.podcast-dock__cover {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	padding: 11px;
	border-radius: 12px;
	color: #fff;
}

.podcast-dock__glyph {
	display: block;
	width: 100%;
	height: 100%;
}

/* Et billede i stedet for kanalens glyf. En artikel læst op sender sit eget foto med, så baren
   viser HVAD der bliver læst op; en podcast har ikke noget og beholder sin glyf. Bølgerne skal
   stadig kunne ses ovenpå, så de får en dæmpet flade at stå på. */
.podcast-dock__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}

.podcast-dock__cover.has-photo {
	padding: 0;
}

.podcast-dock__cover.has-photo .podcast-dock__glyph {
	display: none;
}

.podcast-dock__cover.has-photo .podcast-wavebars {
	padding: 11px;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.45);
}

.podcast-dock__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.podcast-dock a.podcast-dock__title {
	display: block;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
}

.podcast-dock a.podcast-dock__title:hover,
.podcast-dock a.podcast-dock__title:focus-visible {
	color: #fff;
	text-decoration: underline;
}

/* Kanalen må forkortes med "…", klokken aldrig: linjen er en flex-række, hvor kun kanalen kan give
   sig. Før stod ellipsen på hele linjen og åd klokken bagfra på en telefon ("Maskiner · Artikel læ…"). */
.podcast-dock__meta {
	display: flex;
	align-items: baseline;
	min-width: 0;
	margin: 0;
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	opacity: 0.8;
}

.podcast-dock__meta [data-dock-channel] {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.podcast-dock__sep,
.podcast-dock__time {
	flex: 0 0 auto;
}

.podcast-dock__sep {
	margin: 0 0.35rem;
}

.podcast-dock__controls {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.3rem;
}

.podcast-dock__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	opacity: 0.85;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.podcast-dock__btn svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.podcast-dock__btn:hover,
.podcast-dock__btn:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	opacity: 1;
}

.podcast-dock__play {
	position: relative;
	width: 46px;
	height: 46px;
	margin: 0 0.2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.7);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.podcast-dock__play:hover,
.podcast-dock__play:focus-visible {
	background: #f6f3f2;
	transform: translateY(-1px);
}

.podcast-dock__play-icon::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 14px;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #036d76;
}

.podcast-dock.is-playing .podcast-dock__play-icon::before {
	left: 16px;
	top: 15px;
	width: 14px;
	height: 16px;
	border: 0;
	background: linear-gradient(90deg, #036d76 0 5px, transparent 5px 9px, #036d76 9px 14px);
}

.podcast-dock__speed {
	min-width: 48px;
	height: 30px;
	padding: 0 0.55rem;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.podcast-dock__speed:hover,
.podcast-dock__speed:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
}

.podcast-dock__close {
	margin-left: 0.2rem;
}

/* En artikel uden sektion sender en tom kanal-tekst; så skal prikken foran klokken heller ikke stå der. */
.podcast-dock__meta [data-dock-channel]:empty + .podcast-dock__sep {
	display: none;
}

/* På en telefon er baren smal: spolknapperne, lydstyrken og hastigheden gemmes væk, og lukkeknappen
   gøres mindre, så overskriften, sektionen og klokken (spillet / i alt) får pladsen. */
@media (max-width: 599px) {
	.podcast-dock__inner {
		gap: 0.7rem;
		padding: 0.6rem 0.8rem;
	}

	.podcast-dock__btn--skip,
	.podcast-dock__speed {
		display: none;
	}

	.podcast-dock__controls {
		gap: 0.15rem;
	}

	.podcast-dock__close {
		width: 30px;
		height: 30px;
		margin-left: 0;
	}

	.podcast-dock__close svg {
		width: 20px;
		height: 20px;
	}
}

/* ---- Lydstyrke: højttaler + skyder, samme kontrol i docken og på artikelkortet ----
   (Components/Shared/Audio/PodcastVolume.razor). Et klik på højttaleren slår lyden fra og til;
   skyderen folder sig ud, når man peger på kontrollen eller tabulerer ind i den. Uden mus (telefon)
   er der ingen skyder - dér ejer systemet lydstyrken - og på iOS kan siden slet ikke sætte den
   (.is-locked, sat af js/podcast-dock.js), så tilbage står en ren mute-knap. */
.podcast-volume {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	color: #fff;
}

.podcast-volume__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: 0.85;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.podcast-volume__btn svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.podcast-volume__btn:hover,
.podcast-volume__btn:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	opacity: 1;
}

/* Krydset kun når lyden er fra; bølgerne kun når den er til. */
.podcast-volume__cross {
	display: none;
}

.podcast-volume.is-muted .podcast-volume__cross {
	display: block;
}

.podcast-volume.is-muted .podcast-volume__wave {
	display: none;
}

/* Skyderen: 0 bred i hvile, 5rem når kontrollen er under markøren eller har fokus. Sporet males med
   --podcast-volume, som scriptet sætter på kontrollen, så det fyldte stykke følger niveauet. */
.podcast-volume__range {
	width: 0;
	height: 18px;
	margin: 0;
	padding: 0;
	opacity: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: width 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
}

.podcast-volume:hover .podcast-volume__range,
.podcast-volume:focus-within .podcast-volume__range {
	width: 5rem;
	margin-right: 0.4rem;
	opacity: 1;
}

.podcast-volume__range::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, #fff calc(var(--podcast-volume, 1) * 100%), rgba(255, 255, 255, 0.28) 0);
}

.podcast-volume__range::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, #fff calc(var(--podcast-volume, 1) * 100%), rgba(255, 255, 255, 0.28) 0);
}

.podcast-volume__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	margin-top: -4px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.podcast-volume__range::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.podcast-volume__range:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Ingen skyder uden mus, og ingen i en browser der ikke lader siden sætte lydstyrken (iOS). */
@media (hover: none) {
	.podcast-volume__range {
		display: none;
	}
}

.podcast-volume.is-locked .podcast-volume__range {
	display: none;
}

/* I docken står den mellem 15-frem og hastigheden. På en telefon skjules den helt, ligesom
   spolknapperne - systemet har sine egne lydknapper, og baren er smal nok i forvejen. */
.podcast-dock__volume {
	margin-right: 0.1rem;
}

@media (max-width: 599px) {
	.podcast-dock__volume {
		display: none;
	}
}

/* ═══ Artiklen læst op (Components/Shared/Audio/ArticleNarration.razor) ═══════════════════════
   Kortet fra e-avisens artikelvindue, flyttet ind på artikelsiden selv: samme mørke flade, samme
   hvide skive der bliver til bølger, samme tidslinje. Lavere end i e-avisen - mindre luft, mindre
   skive - og tidslinjen er display:none indtil .is-current (husets .podcast-timeline-regel), så
   kortet står roligt og lavt, indtil man trykker afspil. Højttaleren til højre er .podcast-volume.

   Kortet låner podcastsidens maskineri i stedet for at finde på sit eget: knappen er en almindelig
   [data-podcast-play], tidslinjen er husets .podcast-timeline, og bølgerne er PodcastWave inde i en
   .podcast-morph. js/podcast-dock.js sætter .is-current/.is-playing, og alt herunder er ren CSS
   ovenpå - pauseknap, bevægelige bølger, spolbar linje og tællende klokke uden ny afspillerkode. */
.article-player {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.375rem;
	padding: 0.5rem 0.875rem;
	border: 1px solid rgba(127, 198, 204, 0.22);
	border-radius: 0.75rem;
	background: linear-gradient(135deg, #0a4f56, #11262b 72%);
	color: #fff;
	transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.article-player.is-playing {
	border-color: rgba(127, 198, 204, 0.55);
	box-shadow: 0 0 0 1px rgba(127, 198, 204, 0.18), 0 14px 34px -20px rgba(3, 109, 118, 0.9);
}

.article-player__play {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.article-player__play:focus-visible {
	outline: none;
}

/* Skiven. .podcast-morph er husets krydsfade mellem glyf og bølger. */
.article-player__disc {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: #fff;
	color: #036d76;
	transition: transform 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
}

.article-player__play:hover .article-player__disc {
	transform: scale(1.06);
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12);
}

.article-player__play:focus-visible .article-player__disc {
	box-shadow: 0 0 0 3px #fff;
}

/* Trekant i hvile, to bjælker mens den spiller. Ren CSS - ingen ikonfont. */
.article-player__icon {
	width: 0;
	height: 0;
	border-top: 0.5625rem solid transparent;
	border-bottom: 0.5625rem solid transparent;
	border-left: 0.875rem solid currentColor;
	margin-left: 0.25rem;
	transition: opacity 0.2s ease;
}

/* Skiven viser ÉN ting ad gangen: bølger mens den spiller, og pausebjælkerne først når man peger på
   knappen eller tabulerer hen til den - ellers lå bjælkerne oven i bølgerne. */
.article-player.is-playing .article-player__icon {
	width: 0.875rem;
	height: 1rem;
	border: 0;
	margin-left: 0;
	background: linear-gradient(to right, currentColor 0 34%, transparent 34% 66%, currentColor 66% 100%);
	opacity: 0;
}

.article-player.is-playing .article-player__play:hover .article-player__icon,
.article-player.is-playing .article-player__play:focus-visible .article-player__icon {
	opacity: 1;
}

.article-player.is-playing .article-player__play:hover .podcast-wavebars,
.article-player.is-playing .article-player__play:focus-visible .podcast-wavebars {
	opacity: 0;
}

/* Bølgerne arver skivens turkis i stedet for at stå hvide på hvidt - og er mindre end husets: skiven er
   kun 40px, og med de sædvanlige 4px-streger (32px bred, halv højde) ramte de yderste streger cirklens
   kant, når de svang helt ud. 3px streger med 2px luft er 23px brede og 15px høje på det højeste. */
.article-player__disc .podcast-wavebars {
	gap: 2px;
	color: #036d76;
}

.article-player__disc .podcast-wavebars i {
	flex: 0 0 3px;
	width: 3px;
	height: 38%;
}

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

/* Kicker og titel er div'er, ikke p'er: artikelsidens "#article-main p" giver hvert afsnit 18px
   bundmargen med et id i selektoren, og to afsnit i kortet gjorde det 114px højt i hvile - nu ca. 56. */
.article-player__kicker {
	margin: 0;
	font-family: var(--font-sans-serif);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #7fc6cc;
}

/* Længden i kickeren, "LYT TIL ARTIKLEN · 5 MIN", indtil tidslinjen med den præcise klokke er fremme. */
.article-player__length::before {
	content: " · ";
}

.article-player.is-current .article-player__length {
	display: none;
}

/* Begge tekster står i markuppen, CSS vælger. */
.article-player__state--pause {
	display: none;
}

.article-player.is-playing .article-player__state--play {
	display: none;
}

.article-player.is-playing .article-player__state--pause {
	display: inline;
}

.article-player__meta {
	margin: 0.125rem 0 0;
	font-family: "Lora", "Lora Fallback", serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

/* Husets tidslinje, blot tættere på titlen - kortet styrer afstanden her. */
.article-player__timeline {
	gap: 0.6rem;
	margin-top: 0.2rem;
}

/* Linjen flugter med titlen; knoppen (14px) er centreret på linjens start og stikker derfor 7px ud
   til venstre i 0:00. En indrykning på den halve knop blev prøvet og taget ud igen: så snart knoppen
   var kommet forbi starten, stod selve linjen skævt i forhold til teksten, og det var værre. */
.article-player__timeline .podcast-timeline__track {
	height: 16px;
}

.article-player__timeline .podcast-timeline__time {
	font-family: var(--font-sans-serif);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.72);
	opacity: 1;
}

/* Højttaleren trækkes ud til kortets kant, så dens 38px runde flade ikke lægger luft til. */
.article-player__volume {
	margin-right: -0.4rem;
}

/* AI-loven, på siden selv og lige under kortet. Kun stemmen er syntetisk - teksten er artiklens egen -
   derfor PodcastFormat.NarrationAiDisclaimer og ikke podcastens label. Grå på sidens baggrund,
   som .plst__ai og .podcast-page__ai. */
.article-player + p.article-player__ai {
	/* Kun topmargenen sættes her; bundmargenen er artiklens egen afsnitsafstand ("#article-main p"). */
	margin-top: 0;
	font-family: var(--font-sans-serif);
	/* Én linje i spalten på desktop - teksten er skåret til, så den lige netop kan. */
	font-size: 0.72rem;
	line-height: 1.45;
	color: #6e6e6e;
}

@media (max-width: 575.98px) {
	.article-player {
		gap: 0.625rem;
		padding: 0.5rem 0.625rem;
	}

	.article-player__disc {
		width: 2.25rem;
		height: 2.25rem;
	}

	/* Højttaleren rykkes helt ud i kanten på en telefon - der er ingen skyder at gøre plads til. */
	.article-player__volume {
		margin-right: -0.5rem;
	}
}

@media (max-width: 379px) {
	.podcast-dock__speed {
		display: none;
	}
}

/* ---- Podcast-striben (.plst) paa forsiden: EffektivtLandbrug/PodCast/PodcastStrip.razor ----
   Et kort pr. kanal, vandret. Kortet er L-Play-sidens kanalkort (.podcast-poster) i smal udgave:
   samme brand-gradient (sitets egne .podcast-art--*, som kortet faar direkte - striben maler dem
   IKKE selv), samme cover i afrundet firkant, kanalnavnet ved siden af, kicker, titel, meta og
   afsnittets beskrivelse.
   Dokket sætter .is-current/.is-playing/.is-preview* paa kortet via data-podcast-id, saa coveret
   morfer til boelger, tidslinjen dukker op og tilbuddet pulserer - som paa L-Play og i leadet.
   Bemaerk: temaets `a:not(.btn, ...)` har specificitet (0,1,1) og slaar en bar klasse, derfor er
   links skrevet som `.plst a.plst__all`, `.plst a.plst__play` og `.plst a.plst__cta`. */
.plst {
	--plst-teal: #036d76;
	margin: 2rem auto;
	max-width: 1160px;
	/* Striben maa ikke bestemme spaltens bredde. Den staar i en Bootstrap-kolonne (.col-lg-12), som er
	   et flex-barn med min-width:auto, og et flex-barns mindstebredde er dets indholds min-content -
	   dvs. ALLE kortene paa raekke (8 x 250px + luft), selv om raekken selv ruller vandret. Med Dagens
	   avis forrest blev summen bredere end spalten, og hele forsidens container voksede med (maalt
	   16-09-2026: slettes striben i inspektoren, er bredden rigtig igen). contain: inline-size goer
	   stribens egen bredde uafhaengig af indholdet, saa spalten bliver lige saa bred som sine naboer,
	   og raekken ruller inden i den som tiltaenkt. */
	min-width: 0;
	contain: inline-size;
}

.plst__head {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	margin: 0 0 0.8rem;
	padding-left: 0.6rem;
	border-left: 4px solid var(--plst-teal);
}

.plst__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.plst a.plst__all {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--plst-teal);
	text-decoration: none;
	white-space: nowrap;
}

.plst a.plst__all:hover {
	text-decoration: underline;
}

.plst__all-icon {
	width: 0.85em;
	height: 0.85em;
}

/* AI-oplysningen over striben - paa sidens egen baggrund, saa graa og ikke hvid som paa kortene.
   Ingen max-width, af samme grund som paa L-Play: den broed linjen langt inde i raekkens bredde. */
.plst__ai {
	margin: -0.35rem 0 0.6rem;
	font-size: 0.78rem;
	line-height: 1.45;
	color: #6e6e6e;
}

/* Raekken og dens to pile. Pilene ligger OVER raekken i hver sin kant, saa de ikke tager bredde fra
   kortene - striben er lige saa bred som foer, og pilene svaever paa den. */
.plst__viewport {
	position: relative;
}

/* Vandret stribe. scroll-snap giver et roligt stop pr. kort paa touch. */
.plst__row {
	display: flex;
	gap: 0.9rem;
	align-items: stretch;
	overflow-x: auto;
	/* position: relative er IKKE pynt - den holder hele forsiden inden for telefonens bredde.
	   overflow-x klipper KUN de efterkommere, hvis containing block ligger inde i selve
	   scrollboksen. Raekken var static, saa naermeste positionerede forfader var
	   .plst__viewport, og ethvert `position: absolute` barn nede i et kort blev maalt op mod
	   DEN - altsaa uden for klipningen. Synderen er .visually-hidden (temaets utility er
	   `position: absolute`) inde i .podcast-play, som selv er static: dens hoejre kant laa
	   1627px ude, og forsiden kunne traekkes 67px til siden paa en 390px telefon. Maalt paa
	   cms1 15-09-2026; at skjule .plst tog dokumentet fra 1627px til 390px, alt andet paa
	   siden aendrede intet. Med raekken som containing block kan intet absolut placeret barn
	   slippe ud af striben - heller ikke et, der bliver tilfoejet senere. Pilene er boern af
	   .plst__viewport og roeres ikke; de ligger fortsat oeverst paa deres z-index: 2. */
	position: relative;
	padding: 0.2rem 0.2rem 0.35rem;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	/* Rullepanelet er pilenes arbejde nu; traek og pegefelt virker uaendret uden det. */
	scrollbar-width: none;
}

.plst__row::-webkit-scrollbar {
	display: none;
}

.plst__row > * {
	scroll-snap-align: start;
}

/* Skjult som udgangspunkt: js/podcast-layout.js taender kun den pil, der har noget at rulle til.
   Uden JS bliver de staaende skjulte, og striben rulles som foer. */
.plst .plst__nav {
	position: absolute;
	top: calc(50% - 0.5rem);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	border: 1px solid #dfe4e3;
	border-radius: 50%;
	background: #fff;
	color: var(--plst-teal);
	box-shadow: 0 6px 18px -8px rgba(20, 16, 15, 0.45);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.plst .plst__nav.is-active {
	opacity: 1;
	visibility: visible;
}

.plst .plst__nav:hover,
.plst .plst__nav:focus-visible {
	background: #f6f3f2;
	color: #025961;
}

.plst .plst__nav svg {
	width: 18px;
	height: 18px;
}

/* INDE i raekkens kant, ikke uden for den. Udenfor havde de kun et par pixels til vinduets kant paa
   en smal skaerm (maalt: 883 af 885 px) og ville falde ud af siden foer eller siden. De ligger nu
   ovenpaa kanten af yderste kort, som en karrusel normalt goer det. */
.plst .plst__nav--back {
	left: 6px;
}

.plst .plst__nav--next {
	right: 6px;
}

/* Paa en smal skaerm er der ikke plads udenfor, og der ruller man alligevel med fingeren. */
@media (max-width: 767.98px) {
	.plst .plst__nav {
		display: none;
	}
}

/* Samme form som .podcast-poster: 18px hjoerner, hvid tekst paa kanalens gradient. Baggrunden kommer
   fra .podcast-art--* paa selve kortet.
   INGEN skygge her, i modsaetning til posteren paa L-Play: raekken er en vandret scroller
   (overflow-x), og en scroller klipper ALT uden for sig selv - ogsaa lodret, fordi en akse med
   overflow tvinger den anden ud af "visible". Skyggen blev derfor skaaret over i en skarp vandret
   kant under hvert kort. Posteren staar i et almindeligt grid og beholder sin. */
.plst__card {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	width: 250px;
	padding: 1rem 1rem 1.1rem;
	border-radius: 18px;
	color: #fff;
	overflow: hidden;
}

/* Cover og kanalnavn paa EN linje, som posterens __top. */
.plst__top {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 0.75rem;
}

.plst__cover {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	padding: 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.plst__channel {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 1rem;
	line-height: 1.15;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.plst__kicker {
	margin: 0;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.8;
}

.plst__ep {
	margin: 0.2rem 0 0.25rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.28;
	color: #fff;
}

.plst__meta {
	margin: 0;
	font-size: 0.78rem;
	color: #fff;
	opacity: 0.85;
}

/* Beskrivelsen staar HEL - ingen klipning. Kortene straekkes til samme hoejde af raekken selv
   (align-items: stretch), saa et langt resume goer raekken hoejere frem for at blive skaaret over. */
.plst__teaser {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: #fff;
	opacity: 0.92;
}

/* Knapraekken skubbes ned, saa kortene i raekken faar bund paa samme hoejde. */
.plst__bottom {
	margin-top: auto;
	padding-top: 0.85rem;
}

.plst .plst__play,
.plst a.plst__play {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: #fff;
	color: #14201f;
	border: 0;
	border-radius: 999px;
	padding: 0.3rem 0.8rem 0.3rem 0.35rem;
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

.plst .plst__play:hover,
.plst a.plst__play:hover,
.plst .plst__play:focus-visible,
.plst a.plst__play:focus-visible {
	background: #f6f3f2;
	color: #14201f;
	text-decoration: none;
}

/* Trekant/pause-ikonet er PodcastPlayButtons eget (.podcast-play__icon), skaleret ned til pillen. */
.plst .plst__play .podcast-play__icon {
	width: 24px;
	height: 24px;
	background: var(--plst-teal);
}

.plst .plst__play .podcast-play__icon::before {
	left: 10px;
	top: 7px;
	border-width: 5px 0 5px 8px;
}

.plst .plst__play.is-playing .podcast-play__icon::before {
	left: 9px;
	top: 8px;
	width: 7px;
	height: 8px;
	background: linear-gradient(90deg, #fff 0 2px, transparent 2px 5px, #fff 5px 7px);
}

/* Et afsnit fra foer smagsproeverne: intet at afspille her, saa et roligt link ind paa siden.
   Ingen haengelaas - knappen ved siden af spiller for alle, og hvem der hoerer hvad afgoeres
   serverside. */
.plst a.plst__play--link {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	padding: 0.3rem 0.8rem;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.plst a.plst__play--link:hover,
.plst a.plst__play--link:focus-visible {
	background: rgba(255, 255, 255, 0.26);
	color: #fff;
}

/* Tidslinjen er kun synlig paa det kort, dokket faktisk har loadet (se .podcast-timeline), og den
   hvide standardvariant er den rigtige her: kortet er kanalens gradient, ikke et hvidt kort. */
.plst__card .podcast-timeline {
	margin-top: 0.7rem;
	gap: 0.55rem;
}

.plst__card .podcast-timeline__time {
	font-size: 0.72rem;
	color: #fff;
}

/* Tilbuddet: skjult indtil smagsproeven spiller, pulserende naar den er ved at slutte - samme
   opfoersel og samme ord som paa leadet og L-Play-kortet. */
.plst a.plst__cta {
	display: none;
	margin-top: 0.7rem;
	padding: 0.3rem 0.8rem;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}

.plst .is-preview a.plst__cta {
	display: inline-block;
	animation: podcast-reveal 0.25s ease;
}

.plst a.plst__cta:hover,
.plst a.plst__cta:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.plst .is-preview-ending a.plst__cta,
.plst .is-preview-ended a.plst__cta {
	background: #fff;
	color: #036d76;
	animation: podcast-cta-pulse 1.6s ease-in-out infinite;
}

@media (min-width: 992px) {
	.plst__card {
		width: 268px;
	}
}

/* ---- L-Play (PodcastFormat.PageUrl): hoved, adgangs-strimmel, kanalkort ----
   Kanalerne er kort paa deres egen brand-gradient: glyf, navn ved siden af, nyeste
   afsnit med resume, "Afspil" og "Alle afsnit". Kortene straekker sig IKKE til
   hinandens hoejde (align-items: start), saa en aabnet kanal aldrig goer naboerne
   hoejere. Faelles med det fremhaevede afsnit: adgangs-strimlen (.podcast-access),
   resumeet (.podcast-teaser), listen af tidligere afsnit (.podcast-episodes) og
   det kontekstuelle tilbud (.podcast-unlock). */
.podcast-page__head {
	margin: 0.5rem 0 1.25rem;
	/* Maalestok for overskriften nedenfor: cqw skal maales paa den plads, overskriften
	   faktisk har, altsaa hovedet selv. */
	container-type: inline-size;
}

/* Overskriften skal helst staa paa ÉN linje paa desktop. Den kan ikke maales i vw: spalten er
   ikke vinduet - skyskraberne tager 162px i hver side, og over 1580px vokser vinduet uden at
   spalten goer det. Derfor cqw, altsaa procent af SPALTEN.
   Tallet er MAALT, ikke gaettet: "L-Play - lyd og video fra Effektivt Landbrug" er 20,51em bred i
   Lora 600 (canvas measureText paa Googles egen Lora), saa den fylder spalten praecis ved
   100/20,51 = 4,88cqw. 4,6cqw giver knap 6 % luft til kerning og selvhostede metrics. clamp holder
   den mellem 1,5rem (mobil, hvor den gerne maa brydes) og temaets egne 3rem, saa den aldrig
   bliver stoerre end en almindelig h1. Bryder den alligevel paa en smal spalte, bryder den
   paent - der er ingen nowrap, som kunne skubbe layoutet. */
.podcast-page__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 4.6cqw, 3rem);
}

.podcast-page__lead {
	margin: 0;
	font-size: 1.05rem;
}

/* AI-loven: staar ved beskrivelsen oeverst paa siden, foer nogen trykker play - paa sidens egen
   baggrund, derfor graa og ikke hvid som paa kortene.
   INGEN max-width: en maalbredde her broed linjen midt inde i spalten, mens beskrivelsen lige ovenover
   loeb helt ud, og de to afsnit saa ud til at hoere til hver sin side. Teksten foelger spalten. */
.podcast-page__ai {
	margin: 0.6rem 0 0;
	font-size: 0.8rem;
	line-height: 1.45;
	color: #6e6e6e;
}

.podcast-page__status {
	color: #6e6e6e;
}

.podcast-page__section {
	margin: 0 0 0.9rem;
}

/* Én linje under en overskrift, hvor gruppen har brug for en forklaring ("Lokalaviser"). */
.podcast-page__sectionlead {
	margin: -0.5rem 0 1rem;
	font-size: 0.9rem;
	color: #6e6e6e;
}

/* ---- Adgangs-strimlen: EN gang paa siden, aldrig pr. kanal ---- */
.podcast-access {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	margin: 0 0 1.75rem;
	padding: 0.8rem 1rem;
	border: 1px solid rgba(3, 109, 118, 0.2);
	border-left: 4px solid #036d76;
	border-radius: 12px;
	background: #f3f8f8;
	color: #2b2b2b;
}

.podcast-access__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #036d76;
	color: #fff;
}

.podcast-access__text {
	flex: 1 1 18rem;
	min-width: 0;
	margin: 0;
	font-size: 0.925rem;
	line-height: 1.4;
}

.podcast-access__actions {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-left: auto;
}

.podcast-access__login {
	font-size: 0.9rem;
	white-space: nowrap;
}

/* Haengelaasen (ren CSS: boejle + krop) - strimlen, noeglen og "Kun for abonnenter". */
.podcast-badge__lock {
	position: relative;
	display: inline-block;
	width: 10px;
	height: 11px;
}

.podcast-badge__lock::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0;
	width: 6px;
	height: 5px;
	border: 1.5px solid currentColor;
	border-bottom: 0;
	border-radius: 3px 3px 0 0;
}

.podcast-badge__lock::after {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 10px;
	height: 6px;
	border-radius: 1.5px;
	background: currentColor;
}

/* ---- Det kontekstuelle tilbud: foelger smagsproeven ----
   js/podcast-dock.js saetter klasserne paa docken og paa alle elementer med
   afsnittets data-podcast-id (kortet, det fremhaevede afsnit, afsnittet i listen):
     .is-preview         smagsproeven er den, der ligger i afspilleren -> tilbuddet vises
     .is-preview-ending  laase-beskeden laeses op lige nu (de sidste ~12 sekunder) -> det pulserer
     .is-preview-ended   smagsproeven er spillet faerdig -> det bliver ved med at pulsere
   Et afsnit i listen ligger inde i kortet, saa det viser kun SIT tilbud, naar det
   selv spiller (reglen med :not). */
@keyframes podcast-cta-pulse {
	0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(3, 109, 118, 0.55); }
	50%      { transform: scale(1.04); box-shadow: 0 0 0 12px rgba(3, 109, 118, 0); }
}

.podcast-page a.podcast-unlock {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	margin-top: 0.8rem;
	padding: 0.45rem 1rem;
	border: 1.5px solid #036d76;
	border-radius: 999px;
	color: #036d76;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.podcast-page .is-preview a.podcast-unlock {
	display: flex;
	animation: podcast-reveal 0.25s ease;
}

.podcast-page .podcast-episode:not(.is-preview) a.podcast-unlock {
	display: none;
}

.podcast-page a.podcast-unlock:hover,
.podcast-page a.podcast-unlock:focus-visible {
	background: rgba(3, 109, 118, 0.08);
	color: #036d76;
}

.podcast-page .is-preview-ending a.podcast-unlock,
.podcast-page .is-preview-ended a.podcast-unlock {
	background: #036d76;
	color: #fff;
	animation: podcast-cta-pulse 1.6s ease-in-out infinite;
}

.podcast-page a.podcast-unlock--compact {
	margin-top: 0.6rem;
	padding: 0.35rem 0.85rem;
	font-size: 0.8rem;
}

/* Paa gradienten: hvid kant, hvid tekst - og hvid pille, naar den pulserer. */
.podcast-page a.podcast-unlock--light {
	border-color: rgba(255, 255, 255, 0.85);
	color: #fff;
}

.podcast-page a.podcast-unlock--light:hover,
.podcast-page a.podcast-unlock--light:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.podcast-page .is-preview-ending a.podcast-unlock--light,
.podcast-page .is-preview-ended a.podcast-unlock--light {
	background: #fff;
	color: #036d76;
}

/* Tilbuddet på det fremhævede afsnit (hvidt link på gradienten - se noten om
   a:not(.btn) oeverst): skjult, indtil smagsproeven spiller. */
.podcast-lead a.podcast-lead__cta {
	display: none;
	margin-top: 0.85rem;
	padding: 0.35rem 0.9rem;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}

.podcast-lead.is-preview a.podcast-lead__cta {
	display: inline-block;
	animation: podcast-reveal 0.25s ease;
}

.podcast-lead a.podcast-lead__cta:hover,
.podcast-lead a.podcast-lead__cta:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.podcast-lead.is-preview-ending a.podcast-lead__cta,
.podcast-lead.is-preview-ended a.podcast-lead__cta {
	background: #fff;
	color: #036d76;
	animation: podcast-cta-pulse 1.6s ease-in-out infinite;
}

/* Docken: linket foelger smagsproeven og bliver en pulserende pille under laase-beskeden. */
.podcast-dock__cta {
	display: none;
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	margin-top: 0.15rem;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.podcast-dock.is-preview .podcast-dock__cta {
	display: inline-block;
}

.podcast-dock.is-preview-ending .podcast-dock__cta,
.podcast-dock.is-preview-ended .podcast-dock__cta {
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: #fff;
	color: #036d76;
	text-decoration: none;
	animation: podcast-cta-pulse 1.6s ease-in-out infinite;
}

.podcast-dock a.podcast-dock__cta:hover,
.podcast-dock a.podcast-dock__cta:focus-visible {
	color: #fff;
}

.podcast-dock.is-preview-ending a.podcast-dock__cta:hover,
.podcast-dock.is-preview-ending a.podcast-dock__cta:focus-visible,
.podcast-dock.is-preview-ended a.podcast-dock__cta:hover,
.podcast-dock.is-preview-ended a.podcast-dock__cta:focus-visible {
	color: #036d76;
}

/* ---- Resume med "Laes mere" ----
   Kassen er hoej til N linjer og skjuler resten. Selve afkortningen laver
   js/podcast-layout.js: den finder det sidste hele ord, der kan vaere, og saetter
   teksten til det - saa "... Laes mere" staar lige efter ordet, paa samme linje, i
   almindelig venstrestillet tekst. (Foerste forsoeg flooed linket ud i hoejre kant
   og strakte linjerne ud i begge sider for at naa det; mellemrummene mellem ordene
   blev for store.) Uden scriptet ser laeseren bare de foerste linjer uden link.
   Blazor renderer HELE teksten, saa den er der stadig, naar linket aabner den. */
.podcast-teaser {
	--podcast-teaser-lines: 3;
	max-height: calc(var(--podcast-teaser-lines) * 1.45em + 0.06em);
	overflow: hidden;
	line-height: 1.45;
}

.podcast-teaser.is-expanded {
	max-height: none;
}

.podcast-teaser__text {
	margin: 0;
}

/* Prikkerne og linket hoerer til den afkortede tekst - de vises kun, naar der ER
   skaaret noget vaek (.has-overflow, sat af scriptet). */
.podcast-teaser__cut,
.podcast-teaser__more,
.podcast-teaser__less {
	display: none;
}

.podcast-teaser.has-overflow:not(.is-expanded) .podcast-teaser__cut {
	display: inline;
}

.podcast-teaser.has-overflow:not(.is-expanded) .podcast-teaser__more {
	display: inline;
}

.podcast-teaser.is-expanded .podcast-teaser__less {
	display: inline-block;
	margin-top: 0.25rem;
}

.podcast-teaser__more,
.podcast-teaser__less {
	padding: 0;
	border: 0;
	background: none;
	color: #036d76;
	font: inherit;
	font-weight: 700;
	line-height: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.podcast-teaser__more:hover,
.podcast-teaser__more:focus-visible,
.podcast-teaser__less:hover,
.podcast-teaser__less:focus-visible {
	color: #025961;
}

/* Paa gradienten er baade tekst og link hvidt; i den hvide afsnitsliste er de moerke
   (uden denne opdeling stod "Laes mere" hvidt paa hvidt i listen). */
.podcast-poster__hero .podcast-teaser__more,
.podcast-poster__hero .podcast-teaser__less {
	color: #fff;
}

.podcast-poster__hero .podcast-teaser__more:hover,
.podcast-poster__hero .podcast-teaser__more:focus-visible,
.podcast-poster__hero .podcast-teaser__less:hover,
.podcast-poster__hero .podcast-teaser__less:focus-visible {
	color: #fff;
	opacity: 0.85;
}

/* ---- Faelles smaating i kort og lister ---- */
.podcast-kicker {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #036d76;
}

.podcast-kicker__count {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: #6e6e6e;
}

.podcast-meta {
	margin: 0;
	font-size: 0.85rem;
	color: #6e6e6e;
}

.podcast-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	border: 1.5px solid rgba(3, 109, 118, 0.45);
	border-radius: 999px;
	background: transparent;
	color: #036d76;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.podcast-more:hover,
.podcast-more:focus-visible {
	background: rgba(3, 109, 118, 0.08);
	border-color: #036d76;
}

.podcast-more:disabled {
	opacity: 0.45;
	cursor: default;
}

/* Kanalen, der hentes: knappen daempes, men bliver staaende - listen tegnes foerst,
   naar den er hel, saa der er kun EN hoejdeaendring (se ToggleChannelAsync). */
.podcast-more.is-loading {
	opacity: 0.75;
	cursor: progress;
}

/* Paa gradienten: hvid udgave. */
.podcast-more--light {
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.podcast-more--light:hover,
.podcast-more--light:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
}

/* "Vis N flere afsnit" er listens FOD, ikke en handling paa det sidste afsnit: egen
   linje over hele bredden med en streg over. */
.podcast-more--load {
	justify-content: center;
	width: 100%;
	margin-top: 0.25rem;
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0;
}

.podcast-more--load:hover,
.podcast-more--load:focus-visible {
	background: rgba(3, 109, 118, 0.06);
	border-color: rgba(0, 0, 0, 0.08);
}

/* Pilen paa "Alle afsnit": ned naar listen er lukket, op naar den er aaben. */
.podcast-chevron {
	width: 0.9em;
	height: 0.9em;
	transition: transform 0.2s ease;
}

[aria-expanded="true"] > .podcast-chevron {
	transform: rotate(180deg);
}

/* ---- Listen af tidligere afsnit (i kortet og under det fremhaevede afsnit) ---- */
.podcast-episodes {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-top: 1rem;
}

.podcast-episode {
	display: flex;
	flex-direction: column;
	padding-top: 0.85rem;
	border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

.podcast-episode:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.podcast-episode__title {
	margin: 0 0 0.15rem;
	font-size: 1rem;
}

.podcast-episode__teaser {
	margin: 0.3rem 0 0;
	font-size: 0.875rem;
	color: #4a4a4a;
}

/* Under det fremhaevede afsnit er der plads til hele resumeet - ingen beskaering. */
.podcast-episode__teaser--full {
	line-height: 1.45;
}

.podcast-episode__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.6rem;
}

/* Et afsnit uden hverken stream eller smagsproeve: en stille linje med et link. */
.podcast-episode__locked {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: #6e6e6e;
}

/* ---- Kanalkortene ---- */
.podcast-posters {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	align-items: start; /* et aabnet kort maa ikke traekke naboerne med i hoejden */
	gap: 1.1rem;
}

/* Masonry: js/podcast-layout.js saetter klassen og giver hvert kort et raekke-spaend
   svarende til sin egen hoejde, saa naeste kort starter lige under det korte kort i
   stedet for under raekkens hoejeste. Raekkerne er 1px og mellemrummet ligger i
   spaendet - derfor row-gap: 0. Uden scriptet staar reglerne herover alene: et
   almindeligt gitter med toppen af kortene i linje. */
.podcast-posters.is-masonry {
	grid-auto-rows: 1px;
	row-gap: 0;
}

.podcast-poster {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 18px;
	color: #fff;
	box-shadow: 0 16px 36px -24px rgba(20, 16, 15, 0.7);
	scroll-margin-top: 150px;
}

.podcast-poster__hero {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.15rem 1.15rem 1.25rem;
}

/* Glyf, kanalnavn og noegle paa EN linje - navnet ved siden af logoet, ikke under det. */
.podcast-poster__top {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.9rem;
}

.podcast-poster__glyph {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	padding: 13px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.podcast-poster__channel {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.15;
	color: #fff;
}

/* Kanalens egen linje: hvad kanalen handler om, stående under navnet og FØR "Nyeste afsnit".
   Den er bevidst dæmpet - kortets hierarki er navn, derefter afsnit; linjen er til den, der
   ikke kender kanalen i forvejen (og til søgemaskinen, som ellers kun havde ét ord at gå
   efter). Samme dæmpning som .podcast-poster__meta, men med plads over afsnittet.

   PARKERET 15-09-2026 sammen med markup'en i PodcastPage.razor. Reglen bliver stående, så
   linjen kan slås til igen ved at fjerne stjernerne dér - der er intet at skrive om her. */
.podcast-poster__about {
	margin: 0.35rem 0 0.75rem;
	font-size: 0.9rem;
	line-height: 1.35;
	color: #fff;
	opacity: 0.85;
}

/* Noeglen: vejen ind i kampagnen FOER man trykker afspil. Ikon alene - ordene staar i strimlen. */
.podcast-page a.podcast-poster__key {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin-left: auto;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.podcast-page a.podcast-poster__key:hover,
.podcast-page a.podcast-poster__key:focus-visible {
	background: rgba(255, 255, 255, 0.38);
	color: #fff;
}

.podcast-poster__kicker {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.8;
}

.podcast-poster__title {
	margin: 0.2rem 0 0.25rem;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.podcast-poster__meta {
	margin: 0;
	font-size: 0.85rem;
	color: #fff;
	opacity: 0.85;
}

.podcast-poster__teaser {
	margin: 0.45rem 0 0;
	font-size: 0.925rem;
	color: #fff;
	opacity: 0.92;
}

/* Afspil til venstre, "Alle afsnit" helt til hoejre - paa EN linje, altid. */
.podcast-poster__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: 1.1rem;
}

.podcast-poster__actions .podcast-more {
	margin-left: auto;
}

/* Listen af tidligere afsnit ligger paa hvidt under kortet - og skal derfor nulstille
   kortets hvide tekstfarve, ellers staar titlerne hvidt paa hvidt. */
.podcast-poster__episodes {
	padding: 0 1.15rem 1.15rem;
	background: #fff;
	color: #2b2b2b;
}

.podcast-poster__episodes .podcast-episode__title {
	color: #2b2b2b;
}

/* ---- Reduceret bevaegelse ----
   To ting er UNDTAGET med vilje og animerer ALTID, ogsaa naar Windows eller browseren
   beder om mindre bevaegelse:
     - lydboelgen, afspillerens eneste tegn paa, at der spiller noget lige nu
     - det pulserende tilbud ("Hoer hele afsnittet - faa fuld adgang", dockens og
       sidens tilsvarende), som skal fange oejet praecis mens laase-beskeden laeses op
   Resten - svaev, glid, tidslinjens indtoning - staar stille som bedt om. */
@media (prefers-reduced-motion: reduce) {
	.podcast-play,
	.podcast-dock,
	.podcast-dock__play,
	.podcast-timeline__fill::after {
		transition: none;
	}

	.podcast-timeline.is-current {
		animation: none;
	}
}


/* --------------------------------------------------------------------------
   E-avis (TESTSIDE) - Components/EffektivtLandbrug/NewsPaper/EPaper/*
   + wwwroot/js/epaper-reader.js

   Vores egen e-avislaeser, bygget ved siden af Visiolink. Sidebillederne er
   renderet paa forhaand af Landbrugnet.CMS.Service og hentes gennem
   /api/EPaper/Page/... - websitet renderer ikke selv.

   ALT LIGGER UNDER .epaper MED VILJE. Prototypen satte sine Bootstrap-
   variabler paa :root, og kopieret direkte ville det omstyle hver knap,
   formular, liste og modal paa hele sitet. Herunder arver Bootstraps
   komponentvariabler gennem kaskaden, saa .btn og .form-control inde i
   laeseren faar avisens farver - og intet udenfor roeres.

   Strukturklasser er praefikset ep-, fordi .article, .card, .body, .panel,
   .title, .date, .step og .stage allerede er taget af temaet.

   Links skrives med TO klasser (.ep-kiosk a.ep-cover-link), fordi sitets eget
   `a:not(.btn, ...)` har specificitet 0,1,1 og slaar en enkelt klasse.
   -------------------------------------------------------------------------- */

.epaper {
	/* Avisens egne farver. Teal er sitets, okker er reserveret til artikellaget,
	   saa "tekst vi kan loefte op" aldrig laeses som navigation. */
	--ep-ink: #10312f;
	--ep-stock: #efe9dd;
	--ep-teal: #036d76;
	--ep-ochre: #b0722a;
	--ep-line: rgba(16, 49, 47, 0.16);
	--ep-muted: rgba(16, 49, 47, 0.62);

	--bs-primary: var(--ep-teal);
	--bs-link-color: var(--ep-teal);
	--bs-link-hover-color: #025861;
	--bs-border-color: var(--ep-line);
	--bs-border-radius: 4px;
	--bs-focus-ring-color: rgba(3, 109, 118, 0.35);
}

.epaper :focus-visible {
	outline: 2px solid var(--ep-teal);
	outline-offset: 2px;
}

/* ---- Kiosken: avisen som en genstand, man tager op ---- */

.ep-kiosk {
	max-width: 1180px;
	margin-inline: auto;
	padding: 1.5rem 1rem 3rem;
	background: var(--ep-stock);
	color: var(--ep-ink);
}

.ep-warn {
	margin-bottom: 1.5rem;
	padding: 0.6rem 0.9rem;
	border: 1px dashed var(--ep-ochre);
	border-radius: 4px;
	font-size: 0.875rem;
	color: var(--ep-muted);
}

.ep-empty {
	padding: 2rem 0;
	color: var(--ep-muted);
}

.ep-masthead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--ep-ink);
}

	/* Temaet giver h1 en ramme og en baggrund. Mastheaden er avisens hoved, ikke en
	   sideoverskrift, saa den nulstilles her. */
	.ep-masthead h1 {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		font-size: clamp(1.75rem, 4vw, 2.75rem);
		color: var(--ep-ink);
	}

	.ep-masthead time {
		color: var(--ep-muted);
	}

.ep-lead {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: 1.5rem 2rem;
	align-items: start;
	padding: 1.75rem 0;
}

.ep-lead-cover img,
.ep-cover-pending {
	display: block;
	width: 100%;
	aspect-ratio: 1102 / 1456;
	border: 1px solid var(--ep-line);
	box-shadow: 0 2px 10px rgba(16, 49, 47, 0.14);
	background: #fff;
}

.ep-cover-pending {
	background: repeating-linear-gradient(135deg, #e6e0d3 0 10px, #ded7c8 10px 20px);
}

.ep-facts {
	margin-bottom: 1rem;
	color: var(--ep-muted);
}

.ep-pending {
	color: var(--ep-ochre);
}

/* Udgaver, der ikke er udkommet, vises KUN for redaktionen. Maerket skal vaere umuligt at
   overse: ser det ud som resten, tror nogen, at laeserne kan se avisen. */
.ep-unpublished {
	color: var(--ep-ochre);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ep-archive-state.ep-unpublished {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
}

.ep-plan-head h2,
.ep-archive h2 {
	margin-bottom: 0.25rem;
	font-size: 1.25rem;
}

.ep-plan-head p {
	margin-bottom: 1.25rem;
	color: var(--ep-muted);
}

/* ---- Sideplanen: udgaven i opslag, som en redaktoer planlaegger den ---- */

.ep-spreads {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.ep-spread {
	display: flex;
	gap: 2px;
	padding: 6px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid var(--ep-line);
}

	/* Forsiden og bagsiden staar alene. Halv bredde, saa raekken ikke skrider. */
	.ep-spread.is-single {
		padding-inline: 6px;
	}

.epaper a.ep-plan-page {
	display: block;
	width: 92px;
	color: inherit;
	text-decoration: none;
}

	.epaper a.ep-plan-page img {
		display: block;
		width: 100%;
		aspect-ratio: 1102 / 1456;
		background: #fff;
	}

	.epaper a.ep-plan-page.is-current img {
		outline: 2px solid var(--ep-ochre);
		outline-offset: -2px;
	}

.ep-plan-meta {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	padding-top: 0.25rem;
	font-size: 0.75rem;
	color: var(--ep-muted);
}

.ep-folio {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* ---- Tidligere udgaver ---- */

.ep-archive {
	padding-top: 2.5rem;
}

.ep-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 1.25rem;
}

.epaper a.ep-archive-item {
	display: block;
	color: inherit;
	text-decoration: none;
}

	.epaper a.ep-archive-item img,
	.epaper a.ep-archive-item .ep-cover-pending {
		margin-bottom: 0.4rem;
	}

.ep-archive-date {
	display: block;
	font-weight: 600;
}

.ep-archive-state {
	display: block;
	font-size: 0.8125rem;
	color: var(--ep-muted);
}

@media (max-width: 575.98px) {
	.ep-lead {
		grid-template-columns: minmax(0, 1fr);
	}

	.ep-lead-cover {
		max-width: 200px;
	}
}

/* ---- Læseren: en fast flade over sitet -----------------------------------
   Mørk kant er funktionelt, ikke stilistisk: en lys ramme ved siden af en hvid
   avisside ødelægger trykkets kontrast. Avisen skal være det lyseste på skærmen.

   z-index 1050 ligger over sitets sticky header og podcast-docken (1040) og
   under login-modalen og blackout-overlayet, som med vilje bliver liggende
   øverst.
   -------------------------------------------------------------------------- */

.ep-reader {
	position: fixed;
	inset: 0;
	z-index: 1050;
	display: flex;
	flex-direction: column;
	background: var(--ep-ink);
	color: #f4f1ea;

	/* DEN ENE indrykning. .ep-pair polstres med den, og fit() i epaper-reader.js
	   læser den tilbage ud af CSS. Kommer de to fra hinanden, lander en bladring
	   nogle pixels fra dér, hvor trækket slap. */
	--ep-frame-pad: 22px;
	--ep-rail: 104px;
	--ep-panel: 400px;
	--ep-bar: 54px;
}

.ep-topbar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	flex: 0 0 auto;
}

.ep-spacer {
	flex: 1 1 auto;
}

.ep-title {
	font-weight: 600;
}

.ep-date {
	color: rgba(244, 241, 234, 0.6);
	font-size: 0.875rem;
}

.epaper .btn.ep-chrome {
	--bs-btn-color: #f4f1ea;
	--bs-btn-bg: rgba(255, 255, 255, 0.08);
	--bs-btn-border-color: rgba(255, 255, 255, 0.16);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: rgba(255, 255, 255, 0.16);
	--bs-btn-hover-border-color: rgba(255, 255, 255, 0.28);
	--bs-btn-active-bg: rgba(255, 255, 255, 0.22);
	--bs-btn-active-color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.ep-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(244, 241, 234, 0.6);
}

	.ep-search .form-control {
		width: 200px;
		background: rgba(255, 255, 255, 0.08);
		border-color: rgba(255, 255, 255, 0.16);
		color: #f4f1ea;
	}

		.ep-search .form-control::placeholder {
			color: rgba(244, 241, 234, 0.45);
		}

/* Rækken under topbjælken: skinne, scene og søgepanel.
   minmax(0, 1fr) er en fejlrettelse, ikke smag: uden den skubber topbjælkens
   min-content-bredde hele layoutet ud over en 414 px skærm. */
.ep-stagerow {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: var(--ep-rail) minmax(0, 1fr);
	min-height: 0;
}

	.ep-stagerow.has-panel {
		grid-template-columns: var(--ep-rail) minmax(0, 1fr) var(--ep-panel);
	}

.ep-rail {
	overflow-y: auto;
	padding: 0.5rem;
	border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.epaper a.ep-rail-item {
	display: block;
	margin-bottom: 0.5rem;
	color: rgba(244, 241, 234, 0.7);
	text-decoration: none;
	text-align: center;
	font-size: 0.75rem;
}

	.epaper a.ep-rail-item img {
		display: block;
		width: 100%;
		aspect-ratio: 1102 / 1456;
		background: #fff;
		border: 1px solid transparent;
	}

	.epaper a.ep-rail-item.is-current img {
		border-color: var(--ep-ochre);
	}

	.epaper a.ep-rail-item.is-current {
		color: #fff;
	}

.ep-stage-wrap {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.ep-viewport {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	touch-action: none;
	cursor: grab;
}

	.ep-viewport.is-dragging {
		cursor: grabbing;
	}

/* Sporet er tre viewport-store rammer, forskudt i PIXELS. En procent ville blive
   læst mod sporets egen bredde og give et forkert spring. */
.ep-track {
	position: absolute;
	inset: 0;
	opacity: 0;
	will-change: transform;
}

/* IKKE inset: 0 her. inset saetter baade left og right, saa left: -100% nedenfor
   ville goere rammen DOBBELT saa bred i stedet for at flytte den - og naboopslaget
   ville blive haengende inde i billedet. Bredden saettes eksplicit, og kun left
   flyttes. */
.ep-frame {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
}

	.ep-frame:first-child {
		left: -100%;
	}

	.ep-frame:last-child {
		left: 100%;
	}

.ep-pair {
	position: absolute;
	inset: 0;
	padding: var(--ep-frame-pad);
	display: flex;
	align-items: center;
	justify-content: center;
}

	.ep-pair img.ep-page {
		display: block;
		flex: 0 1 auto;
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
	}

.ep-stage {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	transform-origin: 0 0;
}

.ep-leaf {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

	.ep-leaf img.ep-page {
		display: block;
		width: 100%;
		height: 100%;
		background: #fff;
	}

/* Artikelfelterne. Okker er reserveret til artikellaget, så "tekst vi kan løfte
   op" aldrig læses som navigation. */
.ep-hotspot {
	position: absolute;
	padding: 0;
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ep-viewport.has-layer .ep-hotspot {
	border-color: rgba(176, 114, 42, 0.55);
	background: rgba(176, 114, 42, 0.08);
}

.ep-viewport.has-layer .ep-hotspot:hover,
.ep-viewport.has-layer .ep-hotspot.is-active {
	border-color: var(--ep-ochre);
	background: rgba(176, 114, 42, 0.2);
}

.ep-zoomset {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: flex;
	flex-direction: column;
}

	.ep-zoomset .btn {
		--bs-btn-color: #f4f1ea;
		--bs-btn-bg: rgba(16, 49, 47, 0.85);
		--bs-btn-border-color: rgba(255, 255, 255, 0.2);
		--bs-btn-hover-bg: rgba(16, 49, 47, 0.95);
		--bs-btn-hover-color: #fff;
		width: 38px;
		font-size: 1.1rem;
		line-height: 1;
	}

.ep-pagebar {
	flex: 0 0 var(--ep-bar);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.epaper .btn.ep-step {
	--bs-btn-color: #f4f1ea;
	--bs-btn-bg: transparent;
	--bs-btn-border-color: rgba(255, 255, 255, 0.2);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
	--bs-btn-disabled-color: rgba(244, 241, 234, 0.3);
	--bs-btn-disabled-border-color: rgba(255, 255, 255, 0.1);
	display: inline-flex;
	align-items: center;
}

.ep-pagenum em {
	font-style: normal;
	color: rgba(244, 241, 234, 0.55);
}

/* ---- Søgepanelet ---- */

.ep-panel {
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.18);
}

.ep-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

	.ep-panel-head .btn-close {
		filter: invert(1) grayscale(1);
		opacity: 0.6;
	}

.ep-results {
	overflow-y: auto;
	--bs-list-group-bg: transparent;
	--bs-list-group-color: #f4f1ea;
	--bs-list-group-border-color: rgba(255, 255, 255, 0.1);
	--bs-list-group-action-hover-bg: rgba(255, 255, 255, 0.08);
	--bs-list-group-action-hover-color: #fff;
	--bs-list-group-action-active-bg: rgba(255, 255, 255, 0.12);
}

.ep-result {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	text-align: left;
}

	.ep-result.is-current {
		background: rgba(176, 114, 42, 0.18);
	}

.ep-result-head {
	font-weight: 600;
}

.ep-panel .ep-empty {
	padding: 1rem;
	color: rgba(244, 241, 234, 0.6);
}

/* ---- Læsevisningen: artiklen løftet op i et ark over siden ---- */

.ep-reading {
	background: rgba(16, 49, 47, 0.55);
}

.ep-sheet {
	background: #fffdf8;
	color: var(--ep-ink);
	border: 0;
}

.ep-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.ep-sheet-tools {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.epaper .btn.ep-sheet-goto,
.epaper .btn.ep-sheet-close {
	--bs-btn-color: var(--ep-teal);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: transparent;
	--bs-btn-hover-bg: rgba(3, 109, 118, 0.1);
	--bs-btn-hover-color: var(--ep-teal);
}

/* Et rullepanel med doven billedindlæsning skal have overflow-anchor: none.
   Fotoerne tilføjer højde OVER læsepositionen efter første tegning, og Chromes
   scroll-forankring kompenserer - så artiklen åbner halvvejs nede. */
.ep-article {
	overflow-anchor: none;
}

	.ep-article h2 {
		margin: 0 0 0.75rem;
		padding: 0;
		border: 0;
		background: none;
		font-size: clamp(1.5rem, 3vw, 2rem);
		line-height: 1.15;
	}

.ep-standfirst {
	font-size: 1.0625rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.ep-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	font-size: 0.875rem;
	color: var(--ep-muted);
}

.ep-article figure {
	margin: 0 0 1.25rem;
}

	.ep-article figure img {
		display: block;
		width: 100%;
	}

	.ep-article figcaption {
		padding-top: 0.35rem;
		font-size: 0.8125rem;
		color: var(--ep-muted);
	}

/* Læsebredde: omkring 64 tegn er dét, øjet kan følge uden at miste linjen. */
.ep-body {
	max-width: 34em;
	font-size: 1.0625rem;
	line-height: 1.68;
}

	.ep-body h2,
	.ep-body h3 {
		margin: 1.5rem 0 0.5rem;
		padding: 0;
		border: 0;
		background: none;
		font-size: 1.125rem;
	}

.ep-nobody,
.ep-sheet-more {
	color: var(--ep-muted);
	font-size: 0.9375rem;
}

/* Links i broedteksten. Laeseren skal kunne se forskel UDEN at klikke: peger linket paa en artikel
   i denne udgave, aabnes den i arket og man bliver i avisen. Alt andet forlader avisen, og saa
   skal det staa der - ikke opdages bagefter i et nyt faneblad. */
.ep-body-rich a.ep-link-internal,
.ep-body a.ep-link-internal {
	border-bottom: 1px solid currentColor;
	text-decoration: none;
	cursor: pointer;
}

.ep-body-rich a.ep-link-external,
.ep-body a.ep-link-external {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

	/* Pilen er kun for oejet; teksten ved siden af er den, en skaermlaeser laeser op. */
	.ep-body-rich a.ep-link-external::after,
	.ep-body a.ep-link-external::after {
		content: " 97";
		color: var(--ep-ochre);
	}

.ep-link-note {
	color: var(--ep-muted);
	font-size: 0.8125rem;
	white-space: nowrap;
}

/* Artikelblokkene kommer fra sitets egen renderer og har sitets bredder med sig. Arket er smallere
   end en artikelside, saa intet maa kunne skubbe det ud i vandret scroll. */
.ep-body-rich img,
.ep-body-rich table,
.ep-body-rich iframe {
	max-width: 100%;
	height: auto;
}

.epaper .ep-sheet-more a.ep-sheet-link {
	color: var(--ep-teal);
}

/* ---- Paywall ---- */

.ep-paywall {
	max-width: 640px;
	margin: 3rem auto;
	padding: 2rem;
	background: #fff;
	border: 1px solid var(--ep-line);
	text-align: center;
}

	.ep-paywall h2 {
		margin: 0 0 1rem;
		padding: 0;
		border: 0;
		background: none;
	}

.ep-paywall-lead {
	margin-bottom: 1.5rem;
	color: var(--ep-muted);
}

.ep-paywall-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.ep-paywall-back {
	margin: 1.5rem 0 0;
}

.epaper .ep-paywall-back a.ep-paywall-link,
.epaper .ep-empty a.ep-empty-link {
	color: var(--ep-teal);
}

/* ---- Smalle skærme ---- */

.ep-hide-sm,
.ep-hide-md,
.ep-hide-lg {
	display: none;
}

@media (min-width: 576px) {
	.ep-hide-sm {
		display: inline;
	}
}

@media (min-width: 768px) {
	.ep-hide-md {
		display: inline;
	}
}

@media (min-width: 1200px) {
	.ep-hide-lg {
		display: inline;
	}
}

/* Skinnen kræver plads, den ikke har under xxl. */
@media (max-width: 1399.98px) {
	.ep-stagerow,
	.ep-stagerow.has-panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.ep-rail {
		display: none;
	}
}

/* Under 940 px erstatter søgepanelet scenen i stedet for at klemme den. */
@media (max-width: 939.98px) {
	.ep-reader {
		--ep-frame-pad: 10px;
	}

	.ep-stagerow.has-panel .ep-stage-wrap {
		display: none;
	}

	.ep-stagerow.has-panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.ep-search .form-control {
		width: 130px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.epaper * {
		transition: none !important;
		animation: none !important;
	}
}

/* --------------------------------------------------------------------------
   Ticker-kampagner - wwwroot/data/tickeritems.json

   De manuelle tickerelementer (TickerType.Manual / ManualSubscribeAd) laa
   visuelt fuldstaendig ens med de redaktionelle kort, saa laeseren ikke kunne
   se forskel paa en artikel, en messe og et abonnementstilbud. De tre har
   hver sin opgave og faar derfor hver sin identitet.

   Klassen kommer fra "cssClass" i tickeritems.json og saettes af Ticker.razor
   paa kortet: <div class="card card--teaser @cardClassManual">. Den gaelder
   derfor i BEGGE headere - ikke kun HeaderV2.

   Farverne er sitets egne: teal til vores eget produkt, sand til kampagner
   (samme som "Proev 30 dage"-pillen), ink til det direkte salg.
   -------------------------------------------------------------------------- */

/* !important er ikke dovenskab her: temaet nulstiller selv rammen paa .card--teaser med
   !important (formentlig for at fjerne Bootstraps kortramme inde i tickeren). Maalt:
   hoejere specificitet alene aendrer intet - .featured-news .card--teaser.ticker-cta (0,3,0)
   gav stadig `0px none`, mens !important gav 4px. Kun border-left behoever det;
   baggrund og knapfarver vinder fint uden. */
.card--teaser.ticker-cta {
	border-left: 4px solid transparent !important;
}

	/* Kickeren ligger i "heading" i JSON'en, fordi feltet rendres som MarkupString. */
	.ticker-cta .ticker-cta__kicker {
		display: block;
		margin-bottom: .15rem;
		font-size: .62rem;
		font-weight: 700;
		letter-spacing: .11em;
		text-transform: uppercase;
	}

	/* Knappen maa ALDRIG ombryde. Gjorde den det, blev den 60-80px hoej i en 70px bred
	   kolonne, hvilket baade skubbede kortet (og dermed hele striben) i hoejden og stjal
	   bredde fra titlen - som saa blev klippet af line-clamp:2 efter faa ord.
	   Maalt foer: knaphoejder 47/65/82px og titelbredde nede paa 210px mod 302px paa et
	   redaktionelt kort. Hold derfor ogsaa CTA-teksterne i tickeritems.json korte. */
	.ticker-cta .btn {
		white-space: nowrap;
		flex: 0 0 auto;
		align-self: center;
	}

	.ticker-cta .teaser-title {
		font-weight: 400;
	}

		.ticker-cta .teaser-title strong {
			font-weight: 700;
		}

/* ---- Lyt: vores eget produkt ---- */
.card--teaser.ticker-cta--lyt {
	border-left-color: #036d76 !important;
	background-color: #eef5f5;
}

	.ticker-cta--lyt .ticker-cta__kicker {
		color: #036d76;
	}

	/* To klasser slaar .btn-dark (0,1,0), saa knappen faar kampagnens egen farve. */
	.ticker-cta--lyt .btn {
		background-color: #036d76;
		border-color: #036d76;
		color: #fff;
	}

/* ---- Messe/arrangement: tidsbegraenset, dato foerst ---- */
.card--teaser.ticker-cta--event {
	border-left-color: #b07a2a !important;
	background-color: #faf4ea;
}

	.ticker-cta--event .ticker-cta__kicker {
		color: #8a5200;
	}

	.ticker-cta--event .btn {
		background-color: #8a5200;
		border-color: #8a5200;
		color: #fff;
	}

/* ---- Tilbud: det direkte salg. Skjules for abonnenter af Ticker.razor. ---- */
.card--teaser.ticker-cta--tilbud {
	border-left-color: #14201f !important;
	background-color: #f4f4f2;
}

	.ticker-cta--tilbud .ticker-cta__kicker {
		color: #14201f;
	}

	/* Prisen er argumentet - den faar lov at fylde. */
	.ticker-cta--tilbud .ticker-cta__pris {
		font-weight: 700;
		white-space: nowrap;
	}


/* ---- Landbrugsmarkedet: soestersitets logo som eget kort ----------------
   Kortet er DATA i wwwroot/data/tickeritems.json - image + imageAlt + link -
   og rendres af Ticker.razors logokort-gren (IsLogoCard). Det var HTML-only
   indtil 14-09-2026, fordi den almindelige Manual-gren manglede to ting:
   dens img havnede i teaser-media (96px bredt, saa undertitlen i logoet blev
   ulaeselig), og dens anker havde intet target. Begge huller er nu lukket i
   komponenten, saa der ikke laengere skal skrives raa markup i en JSON-fil.

   SELVE layoutet staar fortsat som inline styles - men i Ticker.razor, ikke
   i JSON'en. Grunden er uaendret: tickeritems.json er EEN fil for alle sites,
   mens denne overrides.css kun er Effektivt Landbrugs, saa kortet paa
   Agrinews/Foedevaremediet ville falde tilbage paa temaets egne regler.
   Her staar kun kortets ramme og farve.

   NB: kortet har nu et rigtigt "link", saa det ikke laengere deler noegle med
   andre kort. TickerAppState.ReorderTickerItems laver DistinctBy paa netop
   det felt, og to elementer med tom "link" ville blive til eet.
   -------------------------------------------------------------------------- */
.card--teaser.ticker-marked {
	border-left: 4px solid #007548 !important; /* logoets groenne, maalt paa PNG'en */
	background-color: #f1f7f3;
}

/* Kortet er SMALLERE end de 20rem, temaet giver alle tickerkort - og det er selve
   greben. Logoet er 450x115 (ratio 3,91 - maalt, filen har ingen luft at trimme),
   og kortets indhold er kun 52px hoejt, saa 90% af et 320px kort ville vaere 288px
   bredt = 74px hoejt og blive klippet. Ved 13.5rem fylder logoet de 90%
   af klikfladen OG rammer loftet i hoejden: maalt 191 x 49px (88% af kortet,
   fordi den groenne kant tager 4px). Vil man have logoet stoerre, er det
   --header-featured-height, der skal aendres - og den flytter hele headeren. */
.featured-news .card--teaser.ticker-marked {
	flex: 0 0 13.5rem;
}

/* Hele billedet ER knappen, saa kortet skal selv vise, at der kan klikkes.
   Temaet slaar den normale kort-hover fra inde i .featured-news. */
.featured-news .card--teaser.ticker-marked:hover {
	background-color: #e7f1ea;
}


/* ---- Hylden: alle aviser som forsidekort ----------------------------------
   Bygget som Visiolink-oversigtens .eavis-gitter paa /effektivt-landbrug/webavis:
   samme facon (2/3/4 kolonner), samme hover-lup, samme permanente laas paa det,
   der kraever abonnement. Stilen kan IKKE genbruges derfra - den ligger i et
   <style>-blok inde i OverView.razor og findes kun, naar den komponent er paa
   siden - og OverView.razor maa ikke roeres, mens Visiolink koerer ved siden af.

   Forsiden er avisens faktiske side 1 fra CDN'et, ikke et teaser-billede fra
   e-pages, saa kortene har et rigtigt sideforhold og skal ikke beskaeres.
   -------------------------------------------------------------------------- */

.ep-shelf-head {
	margin-bottom: 1.75rem;
}

	.ep-shelf-head h1 {
		margin: 0 0 0.25rem;
		font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
		letter-spacing: -0.01em;
	}

	.ep-shelf-head p {
		margin: 0;
		color: var(--ep-muted);
	}

.ep-shelf {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 1.25rem;
	margin-bottom: 2.5rem;
}

@media (min-width: 576px) {
	.ep-shelf {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.ep-shelf {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ep-shelf-item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Selve forsiden. Baade <a> (laesbar) og <span> (laast) bruger den samme klasse,
   saa de to tilstande ikke kan komme til at se forskellige ud ved et uheld. */
.ep-shelf .ep-shelf-cover {
	position: relative;
	display: block;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ep-line);
	border-radius: 3px;
	/* Avisformat. Uden det hopper gitteret, mens forsiderne hentes. */
	aspect-ratio: 1102 / 1456;
	box-shadow: 0 1px 2px rgba(16, 49, 47, 0.08);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ep-shelf .ep-shelf-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hover-luppen. Kun paa det, der faktisk kan aabnes - derfor a og ikke .ep-shelf-cover. */
.ep-shelf a.ep-shelf-cover::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	transition: background-color 0.25s ease-in-out;
}

.ep-shelf a.ep-shelf-cover::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	transform: translate(-50%, -50%);
	background-image: url('/images/magnifying.svg');
	background-repeat: no-repeat;
	background-position: center;
	filter: invert(100%);
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
}

.ep-shelf a.ep-shelf-cover:hover {
	box-shadow: 0 6px 18px rgba(16, 49, 47, 0.16);
	transform: translateY(-2px);
}

	.ep-shelf a.ep-shelf-cover:hover::before {
		background-color: rgba(0, 0, 0, 0.5);
	}

	.ep-shelf a.ep-shelf-cover:hover::after {
		opacity: 1;
	}

/* Laast titel: permanent slaer og en haengelaas, praecis som Visiolinks
   .eavis.paywall. Forsiden bliver staaende - den ER teaseren. */
.ep-shelf-item.is-locked .ep-shelf-cover {
	cursor: not-allowed;
}

	.ep-shelf-item.is-locked .ep-shelf-cover::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.ep-shelf-item.is-locked .ep-shelf-cover::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 28px;
		height: 28px;
		transform: translate(-50%, -50%);
		background-image: url('/images/lock.svg');
		background-repeat: no-repeat;
		background-position: center;
		filter: invert(100%);
		opacity: 1;
	}

.ep-shelf-meta {
	padding-top: 0.6rem;
}

	.ep-shelf-meta h2 {
		margin: 0;
		font-size: 1rem;
		line-height: 1.3;
	}

.ep-shelf-state {
	margin: 0.15rem 0 0.35rem;
	font-size: 0.8125rem;
	color: var(--ep-muted);
}

/* To klasser: sitets eget a:not(.btn, ...) har specificitet 0,1,1 og slaar en enkelt. */
.ep-kiosk a.ep-shelf-more {
	font-size: 0.8125rem;
	color: var(--ep-teal);
	text-decoration: none;
	border-bottom: 1px solid rgba(3, 109, 118, 0.35);
}

	.ep-kiosk a.ep-shelf-more:hover {
		border-bottom-color: var(--ep-teal);
	}

/* Tilbage til hylden fra én titels side. */
.ep-crumb {
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

.ep-kiosk a.ep-crumb-link {
	color: var(--ep-muted);
	text-decoration: none;
}

	.ep-kiosk a.ep-crumb-link:hover {
		color: var(--ep-teal);
	}


/* ═══ HeaderV2 (Components/EffektivtLandbrug/Common/HeaderV2.razor) ═══════════════════════════════════
   Flyttet hertil fra komponentens egen <style>-blok 16-09-2026, saa al vores styling ligger ét sted.
   Blokken laa foer NEDERST i komponenten, og headeren blev malet ustylet et oejeblik ved genindlaesning
   (logoet i sin naturlige 958px-bredde nederst til venstre), indtil parseren naaede CSS'en; her ligger
   den i stylesheetet, der er laest foer det foerste element tegnes. */
/* Midlertidig styling. Flyttes til overrides.css naar headeren gaar i produktion - den ligger
   her for ikke at roere eksisterende filer. Temaets `a:not(.btn, ...)` har specificitet
   (0,1,1) og slaar en bar klasse, derfor er alle links skrevet som `.hv2 a.klasse`. */

/* Berlingske-modellen: den OEVERSTE linje klaeber, resten scroller vaek.
   Deres Navigation_sticky staar paa top:0 og skrumper indholdet fra 150px til 93px.
   Her opnaas det uden JavaScript ved at lade header-elementet indeholde KUN den oeverste
   linje; sektioner og baand ligger som soeskende og scroller derfor frit.
   (Skriv ikke tagnavne i vinkelparenteser i en CSS-kommentar - Razor parser dem som
   rigtig markup og fejler med RZ9980.)

   Forudsaetningen, der kostede to forsoeg: et sticky element kan kun klaebe, saa laenge dets
   FORAELDER er i billedet. Derfor skal .hv2 selv vaere barn af den fuldhoeje .page - en indre
   wrapper omkring bjaelkerne scroller bare ud sammen med sin egen 89px hoeje foraelder.

   z-index 3 - ET TRIN OVER .hv2__below. Det er ikke pynt: naar brandbjaelken klaeber, glider
   sektionslinjen og tickeren op OVER den, og med samme z-index afgoeres det af DOM-raekke-
   foelgen, saa den SENERE .hv2__below vandt og malede hen over den klaebende bjaelke.
   (main.page-content ligger paa 1 i samme foraelder, saa begge er stadig over indholdet.) */
/* Hoejderne ligger paa :root, fordi de skal kunne laeses UDEN FOR headeren - se
   .sticky-top-reglen nedenfor. Brandbjaelken er hoejere end foer, fordi ikonknapperne
   staar ikon-over-tekst som i den nuvaerende header. */
/* --hv2-stick-top er ÉT tal: dér begynder alt, der klæber under headeren — højrespalten,
   skyskraberne og artiklens aside. Luften er der, så "Mest læste" ikke sidder klinet op ad
   sektionslinjen, og den følger automatisk med ned på mobil, hvor --hv2-sticky-h er 57px. */
:root { --hv2-brand-h: 62px; --hv2-sticky-h: 63px; --hv2-stick-gap: 14px;
        --hv2-stick-top: calc(var(--hv2-sticky-h) + var(--hv2-stick-gap)); }

/* --hv2-radius er ÉN vaerdi, saa pillerne og L-maerket paa mobil runder ens - det er hele
   pointen: maerket er et fyldt kvadrat ved siden af pillerne, og to forskellige radier ville
   laese som to formsprog paa samme raekke. Ordmaerket paa desktop faar den IKKE; det staar
   frit paa hvidt og har ingen flade at runde. .5rem er temaets eget --border-radius-lg,
   altsaa den afrunding sitets knapper i forvejen har. */
.hv2 { --hv2-teal: #036d76; --hv2-ink: #14201f; --hv2-rule: #dfe4e3; --hv2-sand: #ece4d4;
       --hv2-radius: .5rem;
       background: #fff; border-bottom: 1px solid var(--hv2-rule);
       position: sticky; top: 0; z-index: 3; }

/* Forside, sektionsside og lokalside saetter INLINE `top: 135px` paa .sticky-top i
   hoejrespalten - det er den GAMLE headers klaebende hoejde (navbar 58 + featured 78).
   HeaderV2's klaebende del er kun brandbjaelken, saa spalten ville haenge ~70px for lavt
   og efterlade et hul, naar man scroller.
   Inline style slaas kun af !important. Reglen bor i DENNE komponents style-tag, saa den
   forsvinder helt af sig selv, naar den gamle header er i brug - frem for at rette
   FrontPageZone1, SectionPageZone1 og LocalPageZone1 hver for sig. */
.sticky-top { top: var(--hv2-stick-top) !important; }

/* ---------- Alt andet, der klaeber: skyskraberne og artiklens aside ----------

   Temaet regner IKKE sine klæbehøjder ud af CSS. `index.min.js` måler den gamle headers
   dele ved hver scroll og skriver højderne som inline custom properties på html:
   .lm-branding → --branding-height, .lm-navbar → --navbar-height,
   .featured-news → --featured-height. Derefter står der i temaets ark:

       .lm-col-sticky > *            top: calc(var(--navbar-height) + var(--spacing-sm))
       :has(.featured-news) …        top: calc(var(--navbar-height) + var(--featured-height) …)
       .article-aside[class*=sticky] top: calc(var(--sticky-header-height) + var(--spacing-md))
       :root                         --sticky-header-height: calc(var(--branding-height, 60px)
                                                               + var(--featured-height, 86px))

   HeaderV2 har hverken .lm-branding eller .lm-navbar, og det har to målte konsekvenser:

   1. --navbar-height bliver ALDRIG sat. En calc() med en udefineret custom property er
      ugyldig, så `top` faldt tilbage på `auto` — og et sticky element med top:auto klæber
      ikke. Skyskraberne fulgte simpelthen med siden ned. (Målt: top=auto, position=sticky.)
   2. --branding-height er heller ikke sat og falder tilbage på 60px, mens --featured-height
      stadig måles på tickeren (78px). --sticky-header-height blev derfor 138px, og artiklens
      aside lå ~90px for langt nede — det store hul i højre side.

   Derfor sættes `top` her direkte i stedet for at forsyne temaet med variabler: tickeren er
   ikke længere en del af det klæbende område, så dens højde SKAL ikke tælle med, og
   --featured-height skrives inline på html af JS'en, hvilket slår enhver :root-regel.

   !important på skyskraberne, fordi temaet har fire regler med stigende specificitet
   (op til :has(.lm-navbar.sticky .featured-news), 0-4-0) — alle bygget på den gamle header.
   Artiklens aside har kun én regel med samme specificitet som vores, og vores står senere. */
.lm-col-sticky > * { top: var(--hv2-stick-top) !important; }

.article-aside[class*="sticky"] { top: var(--hv2-stick-top); }

/* Variablerne arves ikke herned - .hv2__below er soeskende, ikke barn.

   position:relative + z-index er IKKE pynt her. Topscrolleren er en `position: fixed`
   flade inde i ASIDE.lm-banner, som selv staar paa `position: relative; z-index: 0` og
   dermed aabner en stacking context. Et STATIC element males i normal-flow-laget, altsaa
   UNDER positionerede elementer - saa uden det her glider sektionsbjaelken ind bag
   annoncen, mens den scroller forbi de foerste 782px. Ét trin UNDER .hv2 (3), saa den
   klaebende brandbjaelke males oven paa, naar de to overlapper, og stadig over
   main.page-content, der ligger paa z-index 1. */
.hv2__below { --hv2-teal: #036d76; --hv2-ink: #14201f; --hv2-rule: #dfe4e3;
              position: relative; z-index: 2;
              background: #fff; border-bottom: 1px solid var(--hv2-rule); }

.hv2__bar { display: flex; align-items: center; gap: .7rem;
            max-width: 1340px; margin: 0 auto; padding: .55rem 1rem; }
/* Fast hoejde, og tre zoner: 1fr auto 1fr holder logoet reelt centreret. minmax(0,1fr)
   frem for 1fr, saa siderne faktisk maa krympe paa en smal skaerm i stedet for at skubbe. */
.hv2__bar--brand { height: var(--hv2-brand-h); padding-block: 0;
                   border-bottom: 1px solid var(--hv2-rule);
                   display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
                   align-items: center; gap: .5rem; }
.hv2__zone { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.hv2__zone--left { justify-self: start; }
.hv2__zone--right { justify-self: end; }
/* Sektionerne centreres paa desktop. Paa smal skaerm scroller de vandret, og der maa de
   IKKE centreres - med overflow ville de foerste punkter blive klippet af til venstre. */
.hv2__secband { background: #f7f7f7; border-bottom: 1px solid var(--hv2-rule); }
/* position: relative hoerer paa BJAELKEN og ikke paa baandet: pilene skal foelge det
   centrerede indhold (maks 1340px), ikke skaermens kant paa en bred skaerm. */
.hv2__bar--sections { padding-block: .3rem; gap: .4rem; justify-content: center;
                      position: relative; }

/* Pilene ligger OVEN PAA linjen, saa de ikke tager bredde fra punkterne - raekken er lige
   saa bred som foer, og pilene svaever paa den. Samme greb som podcast-stribens .plst__nav. */
.hv2__secnav { position: absolute; top: 50%; transform: translateY(-50%);
               width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
               background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
               display: flex; align-items: center; justify-content: center;
               color: var(--hv2-ink); cursor: pointer; z-index: 2; }
/* Browserens egen [hidden]-regel er `display: none` UDEN vaegt, saa vores display: flex
   ovenfor slaar den. Uden den her linje ville pilene aldrig blive skjult. */
.hv2__secnav[hidden] { display: none; }
.hv2__secnav svg { width: 13px; height: 13px; display: block; }
.hv2__secnav--prev { left: .25rem; }
.hv2__secnav--next { right: .25rem; }
.hv2__bar--rail { display: block; padding: .5rem 1rem; background: #f4f7f6;
                  border-top: 1px solid var(--hv2-rule); }
.hv2__sp { flex: 1 1 auto; }

/* Logoet er 958x109 i sig selv; her vises det paa hoejden, saa bredden foelger med.
   min-width:0 er noedvendigt for at gridcellen overhovedet MAA krympe - se mobilreglen. */
.hv2 a.hv2__mark { display: flex; align-items: center; justify-content: center;
                   min-width: 0; text-decoration: none; }
.hv2 a.hv2__mark picture { display: flex; min-width: 0; }
.hv2 a.hv2__mark img { height: 34px; width: auto; max-width: 100%; display: block; }

/* Lidt højere piller (og et lidt større L-mærke) end først tegnet - de tre knapper til venstre
   stod lave i forhold til ikonknapperne til højre (2026-09-16). */
.hv2 a.hv2__pill { border-radius: var(--hv2-radius); padding: .45rem .8rem; font-size: .78rem;
                   font-weight: 700; white-space: nowrap; text-decoration: none;
                   display: inline-flex; align-items: center; gap: .35rem; }
.hv2 a.hv2__pill--teal { background: var(--hv2-teal); color: #fff; }
.hv2 a.hv2__pill--line { border: 1px solid #c2cfcd; color: var(--hv2-ink); }
/* En tynd kant en tand moerkere end fladen: uden den laa sandpillen flad og "doed" paa den
   lyse bjaelke ved siden af L-maerket paa mobil (2026-09-16). */
.hv2 a.hv2__pill--sand { background: var(--hv2-sand); color: #4a3a1a; border: 1px solid #d3c6a8; }

/* Hover/fokus paa pillerne (2026-09-16): foer skete der ingenting under musen. Hver pille
   moerkner en tand i sin egen farve og loefter sig 1px - samme greb paa alle tre, saa de
   laeses som ét saet knapper. Ingen farveskift til noget nyt: teal bliver dybere teal, sand
   dybere sand, og stregpillen faar teal kant og tekst. Tastaturet faar det samme via
   :focus-visible. Logoet (.hv2__mark) har med vilje INGEN hover - det er et maerke, ikke en knap. */
.hv2 a.hv2__pill { transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                   transform .15s ease, box-shadow .15s ease; }
.hv2 a.hv2__pill:hover, .hv2 a.hv2__pill:focus-visible { transform: translateY(-1px); text-decoration: none; }
.hv2 a.hv2__pill--teal:hover, .hv2 a.hv2__pill--teal:focus-visible { background: #02555c; color: #fff;
                   box-shadow: 0 4px 10px -6px rgba(3, 109, 118, .8); }
.hv2 a.hv2__pill--line:hover, .hv2 a.hv2__pill--line:focus-visible { border-color: var(--hv2-teal);
                   color: var(--hv2-teal); background: rgba(3, 109, 118, .06); }
.hv2 a.hv2__pill--sand:hover, .hv2 a.hv2__pill--sand:focus-visible { background: #e1d5bb; color: #3a2c10;
                   border-color: #c3b28c; }
.hv2 a.hv2__pill:focus-visible { outline: 2px solid var(--hv2-teal); outline-offset: 2px; }
.hv2__play { width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px;
             border-color: transparent transparent transparent currentColor; }


/* Sektionslinjen. Vandret scroll paa smal skaerm - ingen burger for det, der betyder noget. */
.hv2__sections { display: flex; align-items: center; gap: 1.05rem; overflow-x: auto;
                 scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hv2__sections::-webkit-scrollbar { display: none; }
/* Sektionslinkene ligger nu i .hv2__below, ikke i .hv2 - selectoren skal foelge med.
   To klasser er stadig noedvendigt: temaets `a:not(.btn, ...)` er (0,1,1). */
/* Stregen under hover/aktiv er et ::after lagt ABSOLUT i bunden af linket, ikke en border:
   en 2px border lagde sig til højden og gav synligt mere luft under teksterne end over dem
   (2026-09-16). Nu koster stregen ingen højde; 4px luft over og under giver fingeren lidt
   mere at ramme på mobil, og stregen ligger i de nederste 2 af dem. */
.hv2__below a.hv2__sec { position: relative; font-size: .78rem; font-weight: 700; letter-spacing: .05em;
                  text-transform: uppercase; color: var(--hv2-ink); text-decoration: none;
                  white-space: nowrap; padding: 4px 0; }
.hv2__below a.hv2__sec::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
                  height: 2px; background: transparent; border-radius: 1px; }
.hv2__below a.hv2__sec:hover::after { background: var(--hv2-teal); }

/* Den aktive sektion. Stregen er den samme som hover'ens, men bliver stående — og teksten
   skifter FARVE oveni, fordi punktet på mobil kan ligge halvt uden for den vandrette
   scroll, hvor en streg i bunden er det første, der forsvinder ud af syne.
   Tre klasser + et tag (0,3,1) slår temaets `a:not(.btn, ...)` (0,1,1), og reglen står
   EFTER :hover, så den vinder ved lige specificitet, når musen holder over det punkt,
   man allerede står på. */
.hv2__below a.hv2__sec.is-active { color: var(--hv2-teal); }
.hv2__below a.hv2__sec.is-active::after { background: var(--hv2-teal); }

/* "Alt" som details/summary - ingen JavaScript, og tastaturet virker af sig selv.
   Skriv ikke tagnavne i vinkelparenteser her: Razor parser dem som rigtig markup,
   ogsaa inde i en CSS-kommentar, og fejler med RZ9980 "unclosed tag". */
/* Ikonknapperne og menuen styles af temaets egen CSS (.nav-icon, .icon, .offcanvas).
   .label goer den derimod IKKE: temaets regel er `.nav-btns .label`, og den originale
   header pakker klyngen i en liste med klasserne navbar-nav + nav-btns, mens vores er
   .hv2__icons. Reglen har altsaa aldrig ramt her, og etiketterne stod uden versaler,
   uden vaegt og uden farve - deraf at de saa utydelige ud. Temaets fem deklarationer
   staar derfor ORDRET herunder.

   Farven har en fallback, fordi --nav-link-color kun defineres paa .nav og .navbar-nav
   og derfor heller ikke arves herned. Vaerdien er den, variablen resolver til i
   originalen: .nav-btns er en .navbar-nav, som saetter --nav-link-color: --navbar-color. */
.hv2__icons { display: flex; align-items: center; gap: .1rem; flex: 0 0 auto; }
.hv2__icons .label { font-size: .625rem; text-transform: uppercase; font-weight: 600;
                     line-height: 1; color: var(--nav-link-color, hsl(220, 1.5%, 20%)); }

/* Hover/fokus paa ikonknapperne (2026-09-16): ikon og etiket bliver teal, og knappen faar en
   svag teal flade med pillernes runding, saa den svarer pillerne til venstre. Ingen loeft her -
   ikon-over-tekst er hoejere end en pille, og et loeft ville faa raekken til at hoppe. */
.hv2__icons .btn { border-radius: var(--hv2-radius);
                   transition: background-color .15s ease, color .15s ease; }
.hv2__icons .btn .icon svg, .hv2__icons .btn .icon svg path { transition: fill .15s ease; }
.hv2__icons .btn:hover, .hv2__icons .btn:focus-visible { background: rgba(3, 109, 118, .08); }
.hv2__icons .btn:hover .icon svg, .hv2__icons .btn:hover .icon svg path,
.hv2__icons .btn:focus-visible .icon svg, .hv2__icons .btn:focus-visible .icon svg path { fill: var(--hv2-teal); }
.hv2__icons .btn:hover .label, .hv2__icons .btn:focus-visible .label { color: var(--hv2-teal); }
.hv2__icons .btn:focus-visible { outline: 2px solid var(--hv2-teal); outline-offset: 2px; box-shadow: none; }

/* Modstykket til hv2__hide-sm: findes kun paa mobil (tilbuddet ved siden af L-maerket, naar man
   er logget ud). */
@media (min-width: 992px) {
    .hv2__only-sm { display: none !important; }
}

@media (max-width: 991.98px) {
    .hv2__hide-sm { display: none !important; }
    :root { --hv2-brand-h: 56px; --hv2-sticky-h: 57px; }
    .hv2__bar { padding-inline: .5rem; }

    /* Paa mobil er raekkefoelgen en anden: L-maerket forrest, saa L-Play og e-avisen, og
       ikonklyngen yderst til hoejre. Logoet staar i MIDTEN af markup'en, fordi desktop
       skal blive ved med at have det matematisk midt paa linjen - derfor bliver bjaelken
       FLEX her, og logoet hentes frem med `order` frem for at flytte markup'en.
       Flex frem for tre gridspor loeser samtidig det, spor-byttet loeste foer: pillerne
       MAA krympe (`0 1 auto`), saa et langt ord ikke skubber ikonerne ud over kanten,
       som logoet gjorde ved 360px, da det laa i et auto-spor. */
    .hv2__bar--brand { display: flex; gap: .35rem; }
    .hv2 a.hv2__mark { order: -1; flex: 0 0 auto; }
    /* overflow: hidden er sikkerhedsnettet. Raekken er maalt med sitets egne skrifter,
       men Chromes tekstforstoerrelse paa Android ganger alle fontstoerrelser op uden at
       aendre CSS-bredden - og saa kan pillerne blive bredere end maalt. Sker det, bliver
       e-avisen klippet af i kanten af sin egen zone i stedet for at lande oven paa
       Soeg-knappen, man skal kunne trykke paa. */
    .hv2__zone--left { flex: 0 1 auto; min-width: 0; overflow: hidden; }
    .hv2__zone--right { margin-left: auto; flex: 0 0 auto; }

    /* L-maerket er kvadratisk (35x35). Hoejde OG bredde saettes, saa pladsen staar fast
       fra foerste frame - <img>-taggets egne maal er ordmaerkets og passer ikke her.
       Afrundingen hoerer KUN til her: L-maerket er en fyldt flade, hvis hjoerner skal
       runde som pillernes, mens ordmaerket paa desktop staar frit paa hvidt og ikke skal
       beskaeres i hjoernerne. */
    .hv2 a.hv2__mark img { height: 32px; width: 32px; max-height: none;
                           border-radius: var(--hv2-radius); }

    /* Begge piller skal kunne staa paa raekken ved 360px ved siden af tre ikonknapper.
       Med desktoppens polstring goer de ikke - derfor en tand mindre her. */
    .hv2 a.hv2__pill { padding: .42rem .55rem; font-size: .72rem; }
    .hv2__zone { gap: .3rem; }
    /* Ingen mindre etiket paa mobil: originalen skrumper den heller ikke, og .nav-btns
       .label er .625rem i alle bredder. Skulle raekken blive for traang ved 360px - den
       bredde, logo-mod-ikoner blev maalt paa ovenfor - er det stoerrelsen alene, der maa
       ned igen; versaler, vaegt og farve er dét, der goer teksten laesbar. */
    .hv2__bar--sections { justify-content: flex-start; }
}

/* Telefonbredder. De sidste pixels hentes hos ikonknappernes polstring frem for hos
   tekststoerrelsen: etiketterne skal blive ved med at kunne laeses, og polstringen er
   pynt. Maalt ved 360px: knapperne gaar fra 41/51/50px til 37/48/46px, og luften mellem
   e-avisen og Soeg gaar fra 5px til 16px. */
@media (max-width: 420px) {
    .hv2__icons .btn { padding-inline: .45rem; }
}

/* Under 360px er der ikke raekke nok til begge piller. Maalt: logo + L-Play + e-avisen +
   ikonklyngen kraever 344px, og en 320px skaerm har 304 at give af - uden den her regel
   laa e-avisen 35px hen over Soeg-knappen.
   Det er e-avisen, der viger, ikke L-Play: L-Play er den nye funktion, og et link, der
   ligger oven paa en knap, er vaerre end et, der er vaek. Fra 360px og op - altsaa paa
   stort set enhver telefon i drift - staar de begge. */
@media (max-width: 359.98px) {
    .hv2__zone--left a.hv2__pill--line { display: none; }
}