:root {
    --topstory: hsl(60, 100%, 50%);
    /* Tophistoriens egne, afdæmpede farver. --topstory er samme fulde gul som temaets
       --breaking, så en tophistorie på forsiden lignede en breaking til forveksling.
       Nu har breaking alene den fulde gul; tophistorien er lysegul med en okkerkant —
       på forsiden og i etiketten på artikelsiden (.article-flag--topstory). --topstory
       bliver stående: kampagnebåndet bruger den. */
    --topstory-soft: #fff6c2;
    --topstory-edge: #d9b400;
}

    /* Sektionsnavnet i okker: ca. 5,6:1 på den lysegule flade. */
    .teaser--topstory {
        --teaser-section-color: #7a6200;
        background-color: var(--topstory-soft) !important;
        box-shadow: inset 4px 0 0 var(--topstory-edge);
    }

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

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


    /* Dato og "FOR ABONNENTER" i teaserens metalinje: temaet giver dem --gray-500 (ca. #969592,
       3:1 på hvidt). --text-muted (ca. #6d6c69) giver 5,3:1 på hvidt og 4,9:1 på #f7f7f7. Et
       sektionstema med egen accentfarve (--theme-accent) beholder den. To klasser slår temaets
       .teaser-meta > *. */
    .teaser-meta > .teaser-date,
    .teaser-meta > .teaser-paywall {
        color: var(--theme-accent, var(--text-muted));
    }

    /* #666 i stedet for #777: 12 px tekst skal have 4,5:1. #777 gav 4,48:1 på hvidt og 4,2:1 på
       sidens grå baggrund (#f7f7f7); #666 giver 5,7:1 og 5,3:1. */
    .banner-label {
        flex-basis: 100%;
        text-align: center;
        font-size: 0.75rem;
        color: #666;
        margin-bottom: 4px;
    }


    .banner-label-topscroll {
        flex-basis: 100%;
        text-align: center;
        font-size: .75rem;
        color: #666;
        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
        }
    }

    /* Tickerens titel er en div.h6, ikke en h6: den står før sidens H1 og er layout, ikke en overskrift. */
    .hoest-tour-ticker .teaser-title.h6 {
        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); }
/* Ugens mest laeste: et varmt par, der ikke bruges andre steder, saa blok nummer to paa L-Play ikke
   ligner avisens (teal-groen) med en anden rubrik paa. */
.podcast-art--ugens-mest-laeste { background: linear-gradient(135deg, #b0722a, #2c4f72); }
/* 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;
}

/* "Ugens mest laeste" ligger som blok nummer to lige under avisens. Den skal laeses som EN KANAL TIL,
   ikke som endnu en forside: samme bredde og samme knapper, men en anelse lavere hero og en mindre
   rubrik, saa avisens blok bliver ved med at vaere sidens foerste stemme. */
.podcast-lead--secondary .podcast-lead__hero {
	padding-top: 0.9rem;
	padding-bottom: 1rem;
}

.podcast-lead--secondary .podcast-lead__title {
	font-size: clamp(1.05rem, 1.5vw + 0.55rem, 1.35rem);
}

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

/* "· Hverdage kl. 21.30" efter kanalnavnet i kickeren - samme versaler, men ikke fed, så navnet
   stadig er det, man ser først. */
.podcast-lead__schedule {
	font-weight: 400;
	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;
	}
}

/* ---- Landbrugsmarkedet-striben (.lmst) paa forsiden: EffektivtLandbrug/Estate/LandbrugsmarkedetStrip.razor ----
   Et udstillingsvindue for ejendomme til salg paa landbrugsmarkedet.dk. Bygget som podcast-striben
   ovenfor (samme bredde, samme kortbredde 250/268px, samme luft mellem kortene, samme pile), saa de to
   striber deler rytme: fire kort i spaltens bredde paa en computer, fingerrulning paa en telefon.
   Kortet er Landbrugsmarkedets eget kort (Estate Frontend: PropertyListItem.razor + site.css .property)
   i smal udgave - hvidt, 0.65rem hjoerner, fotoet oeverst, maeglerens runde logo over kanten, groenne
   typemaerkater (#198754), by, overskrift, Bolig/Grundareal, pris og den groenne knap. Kortene staar
   paa sidens egen hvide bund (som podcast-striben), og indholdet saettes i Landbrugsmarkedets
   systemfont, saa kortet laeses som DERES kort. Hovedet (titel + opfordring) er derimod VORES: samme
   form som podcast-stribens.
   Bemaerk: temaets `a:not(.btn, ...)` har specificitet (0,1,1) og slaar en bar klasse, derfor er
   links skrevet som `.lmst a.lmst__cta`, `.lmst a.lmst__more` osv. */
.lmst {
	--lmst-green: #198754;
	--lmst-green-dark: #146c43;
	--lmst-navy: #061b40;
	--lmst-muted: #6c757d;
	--lmst-blue: #0d6efd;
	--lmst-blue-dark: #0a58ca;
	margin: 2rem auto;
	max-width: 1160px;
	/* Som .plst: striben maa ikke bestemme spaltens bredde (flex-barnets min-content ville ellers
	   vaere alle 15 kort paa raekke). */
	min-width: 0;
	contain: inline-size;
}

/* Titel til venstre, opfordring til hoejre - samme hoved som podcast-stribens, med gruppens farve. */
.lmst__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.6rem 1.2rem;
	margin: 0 0 0.8rem;
	padding-left: 0.6rem;
	border-left: 4px solid var(--lmst-green);
}

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

/* Hovedets hoejre side: nyhedsbrevslinket og den groenne pille, i den raekkefoelge. Egen flexboks,
   fordi hovedet selv er space-between - uden den ville linket lande midt imellem titel og pille. */
.lmst__actions {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	max-width: 100%;
	min-width: 0;
}

/* Nyhedsbrevet: et understreget blaat link, bevidst IKKE en knap - to piller ved siden af hinanden
   ville dele stribens ene handling i to lige tunge. */
.lmst a.lmst__newsletter {
	color: var(--lmst-blue);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

.lmst a.lmst__newsletter:hover,
.lmst a.lmst__newsletter:focus-visible {
	color: var(--lmst-blue-dark);
	text-decoration: underline;
}

/* Opfordringen over kortene: en groen pille i Landbrugsmarkedets farve, ny fane. Den naevner selv
   sitet, saa der er ingen "I samarbejde med"-linje ved siden af (taget ud 16-09-2026).
   Teksten må brydes: på én linje er pillen 342 px, og på en 360 px telefon (Galaxy S24) skubbede
   den hele siden 26 px til siden (04-10-2026). Fra ca. 400 px står den stadig på én linje. */
.lmst a.lmst__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	max-width: 100%;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: var(--lmst-green);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.lmst a.lmst__cta:hover,
.lmst a.lmst__cta:focus-visible {
	background: var(--lmst-green-dark);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.lmst__cta-icon {
	width: 0.9em;
	height: 0.9em;
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.lmst a.lmst__cta:hover .lmst__cta-icon {
	transform: translateX(3px);
}

/* Raekken og dens to pile. Pilene svaever over raekken i hver sin kant, som paa podcast-striben. */
.lmst__viewport {
	position: relative;
}

/* Ingen egen bund (en cremefarvet flade blev proevet og taget ud 16-09-2026 - striben skal staa paa
   sidens hvide som podcast-striben). En scroller klipper alt uden for sig - ogsaa lodret - saa
   hoverloeft og skygge har faaet luft i paddingen. */
.lmst__row {
	display: flex;
	gap: 0.9rem;
	align-items: stretch;
	overflow-x: auto;
	/* position: relative holder ethvert absolut placeret barn (fx .visually-hidden i knappen) inde i
	   scrollboksen - se den lange forklaring paa .plst__row. */
	position: relative;
	padding: 0.5rem 0.25rem 1rem;
	/* Snap-linjen skal ligge VED paddingens inderkant, ikke ved raekkens kant: ellers parkerer
	   scroll-snap raekken et stykke inde, og js/podcast-layout.js viser tilbage-pilen paa en urullet stribe. */
	scroll-padding-inline: 0.25rem;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

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

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

/* Pilene: skjult som udgangspunkt, js/podcast-layout.js taender den, der har noget at rulle til. */
.lmst .lmst__nav {
	position: absolute;
	top: 50%;
	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(--lmst-green);
	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;
}

.lmst .lmst__nav.is-active {
	opacity: 1;
	visibility: visible;
}

.lmst .lmst__nav:hover,
.lmst .lmst__nav:focus-visible {
	background: #f6f3f2;
	color: var(--lmst-green-dark);
}

.lmst .lmst__nav svg {
	width: 18px;
	height: 18px;
}

.lmst .lmst__nav--back {
	left: 6px;
}

.lmst .lmst__nav--next {
	right: 6px;
}

@media (max-width: 767.98px) {
	.lmst .lmst__nav {
		display: none;
	}
}

/* ---- Kortet: Landbrugsmarkedets .property i 250px ---- */
.lmst__card {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	width: 250px;
	border-radius: 0.65rem;
	overflow: hidden;
	background: #fff;
	color: #212529;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lmst__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -14px rgba(6, 27, 64, 0.35);
}

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

/* Fotoet: 5:3 som Landbrugsmarkedets 13rem-billede paa et bredere kort, zoomer let ved hover. */
.lmst a.lmst__thumb {
	display: block;
	aspect-ratio: 5 / 3;
	overflow: hidden;
	background: #e6e3d4;
}

.lmst a.lmst__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.lmst__card:hover a.lmst__thumb img {
	transform: scale(1.04);
}

.lmst__body {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 0.8rem 0.85rem 0.9rem;
}

/* Maeglerens logo: den runde hvide skive over fotoets nederste kant (Landbrugsmarkedets .maegler-logo,
   80px der; 56px her, fordi kortet er smallere). */
.lmst a.lmst__dealer {
	position: absolute;
	top: -28px;
	right: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	/* Ingen padding: logoerne er skaaret til cirklen hos Landbrugsmarkedet, saa luft her gav en hvid
	   ring inden i rammen (set paa PA Landbrug 16-09-2026). */
	padding: 0;
	overflow: hidden;
	border-radius: 50%;
	background: #fff;
	border: 3px solid rgba(6, 27, 64, 0.1);
	background-clip: padding-box;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.lmst a.lmst__dealer:hover,
.lmst a.lmst__dealer:focus-visible {
	border-color: var(--lmst-green);
	transform: scale(1.06);
}

.lmst a.lmst__dealer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* Typemaerkaterne, med plads til logoet til hoejre. Maks. tre (klippet i markup). */
.lmst__types {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	min-height: 1.35rem;
	padding-right: 52px;
}

/* line-height 1 og lidt mere luft over end under: versaler har ingen underlaengder, saa med lige
   padding sad teksten en anelse for hoejt i maerkatet (set 16-09-2026). */
.lmst__type {
	display: inline-block;
	padding: 0.3rem 0.5rem 0.22rem;
	border-radius: 0.35rem;
	background: var(--lmst-green);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.lmst__city {
	margin: 0.5rem 0 0.1rem;
	font-family: inherit;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--lmst-navy);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Overskriften staar HEL - ingen klipning med prikker (to-linjers clamp proevet og taget ud
   16-09-2026). Som podcast-stribens beskrivelse: raekken straekker kortene til samme hoejde af sig
   selv (align-items: stretch), og fakta/pris/knap ligger i bund via margin-top: auto paa .lmst__facts,
   saa en lang overskrift goer raekken lidt hoejere frem for at blive skaaret over. */
.lmst__headline {
	margin: 0 0 0.6rem;
	font-size: 0.82rem;
	line-height: 1.4;
	color: #5c6670;
}

/* Bolig / Grundareal - Landbrugsmarkedets .info-list, med stregen over. margin-top: auto skubber
   fakta, pris og knap i bund SAMLET, saa de tre staar paa samme hoejde paa alle kort i raekken,
   uanset om overskriften fylder en linje eller to og typerne en raekke eller to. Den variable luft
   ligger mellem overskrift og streg, hvor den ikke ses. */
.lmst__facts {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin: auto 0 0;
	padding: 0.6rem 0 0;
	border-top: 1px solid rgba(112, 112, 112, 0.14);
	list-style: none;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--lmst-muted);
}

.lmst__facts li {
	margin: 0;
	padding: 0;
	line-height: 1.25;
}

.lmst__facts li.lmst__fact--end {
	text-align: right;
}

.lmst__facts small {
	display: block;
	margin-bottom: 0.1rem;
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #98a2ab;
}

.lmst__price {
	margin: 0.6rem 0 0;
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--lmst-navy);
}

/* Knappen foelger fakta og pris (se .lmst__facts) - IKKE sin egen margin-top: auto, for to
   auto-marginer deler den frie plads imellem sig, og saa flyder prisen igen. */
.lmst__bottom {
	padding-top: 0.75rem;
}

.lmst a.lmst__more {
	display: block;
	padding: 0.5rem 0.8rem;
	border-radius: 0.45rem;
	background: var(--lmst-green);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.lmst a.lmst__more:hover,
.lmst a.lmst__more:focus-visible {
	background: var(--lmst-green-dark);
	color: #fff;
	text-decoration: none;
}

/* ---- Landbrugsmarkedet-footeren (.lmft): EffektivtLandbrug/Estate/LandbrugsmarkedetFooter.razor ----
   Sidste blok i ugeartiklen "Ugens ejendomme": tekstarkivets tekst i rammen fra heroen på
   landbrugsmarkedet.dk - markfotoet som bund, logoet øverst, teksten i det cremefarvede panel
   (#f8f5ec, som deres søgepanel) og den grønne knap (#198754). Fuld bredde i artikelspalten, mobil
   først; Landbrugsmarkedets systemfont i panelet, som i striben. Links er skrevet med to klasser
   (`.lmft a.lmft__cta`), fordi temaets `a:not(.btn, ...)` slår en bar klasse. */
.lmft {
	--lmft-green: #198754;
	--lmft-green-dark: #146c43;
	--lmft-cream: #f8f5ec;
	margin: 2rem 0;
	padding: 1.25rem 0.75rem 0.75rem;
	border-radius: 0.65rem;
	overflow: hidden;
	/* Fotoets lyse himmel bag logoet, kornet længere nede; den hvide toning holder logoet læsbart. */
	background:
		linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%),
		url("https://cdn.lfmedia.dk/Landbrugsmarkedet/Assets/img/background.jpg") center 30% / cover no-repeat,
		#6f8a4c;
}

.lmft__brand {
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
}

/* Sloganet står i selve logobilledet, så det skal være stort nok til at kunne læses. */
.lmft__logo img {
	display: block;
	width: min(260px, 72vw);
	height: auto;
}

.lmft__panel {
	padding: 1rem;
	background: var(--lmft-cream);
	border-radius: 0.5rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #212529;
}

.lmft__text {
	font-size: 0.95rem;
	line-height: 1.55;
}

.lmft__text > :first-child {
	margin-top: 0;
}

.lmft__text > :last-child {
	margin-bottom: 0;
}

.lmft a.lmft__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 0.7rem 1rem;
	background: var(--lmft-green);
	color: #fff;
	border-radius: 8px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.lmft a.lmft__cta:hover,
.lmft a.lmft__cta:focus-visible {
	background: var(--lmft-green-dark);
	color: #fff;
	text-decoration: none;
}

.lmft__cta-icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.lmft {
		padding: 1.5rem 1.5rem 1.25rem;
	}

	.lmft__panel {
		padding: 1.25rem 1.5rem;
	}
}

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

/* Lokalaviserne: fire aviser = 2x2 på en computer i stedet for sektionernes auto-fill, hvor den
   fjerde stod alene på sin egen række. Én kolonne på en telefon. Det bredere kort giver plads til
   et Danmarkskort (.podcast-regionmap) i hjørnet ved siden af navnet og afsnittet. */
.podcast-posters--regions {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
	.podcast-posters--regions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Kortet står i hjørnet øverst til højre, ved siden af navnet og afsnittets linjer - den tomme plads
   dér - og tager ingen højde (absolut placeret), så resumeet ikke skubbes ned. Teksten ved siden af
   holder sig fri af det med en højre-padding lidt større end kortets bredde. Kortet er ~1,2 gange så
   højt som bredt og slutter derfor over resumeet: 104px bredt = ~125px højt mod ~160px til resumeet. */
.podcast-poster--region {
	container-type: inline-size; /* kortets egen bredde styrer kortstørrelsen, ikke vinduets */
}

.podcast-poster--region .podcast-poster__hero {
	position: relative;
}

.podcast-poster__map {
	position: absolute;
	top: 1.15rem;
	right: 1.15rem;
	width: 104px;
	pointer-events: none;
}

.podcast-poster--region .podcast-poster__top,
.podcast-poster--region .podcast-poster__lines {
	padding-right: 120px;
}

/* Et smalt kort (telefonen): et mindre kort, så navnet ved siden af glyffen stadig har plads. */
@container (max-width: 380px) {
	.podcast-poster__map {
		width: 56px;
	}

	.podcast-poster--region .podcast-poster__top,
	.podcast-poster--region .podcast-poster__lines {
		padding-right: 68px;
	}
}

/* Danmarkskortet (Shared/Audio/PodcastRegionMap.razor): hele landet svagt, avisens område fuldt, begge
   i kortets egen tekstfarve (hvid på gradienten). Bornholm står i et tyndt indsat felt. */
.podcast-regionmap {
	display: block;
	height: auto;
	color: #fff;
}

.podcast-regionmap__zone {
	fill: currentColor;
	fill-opacity: 0.25;
}

.podcast-regionmap__zone.is-active {
	fill-opacity: 1;
}

.podcast-regionmap__inset {
	fill: none;
	stroke: currentColor;
	stroke-opacity: 0.35;
	stroke-width: 0.5;
}

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

/* Kanalnavnet og dets undertitel ("Hver torsdag") som én blok ved siden af glyffen. */
.podcast-poster__name {
	flex: 1 1 auto;
	min-width: 0;
}

/* Undertitlen: HVORNÅR kanalen udkommer (fejlrapport #5856411), lige under navnet, fordi den
   handler om kanalen og ikke om afsnittet. Dæmpet og uden egen række - glyffen er alligevel
   56px høj, så den koster ingen højde. Teksten er AudioSectionDTO.Schedule. */
.podcast-poster__schedule {
	margin: 0.2rem 0 0;
	font-size: 0.85rem;
	line-height: 1.3;
	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 (Components/EffektivtLandbrug/NewsPaper/EPaper/EPaperReader.razor) ───────────────────
   Vores egen avislæser - den der afløser VisioLink. Avisen vises som de trykte sider, og
   artiklerne gøres klikbare oven på papiret ud fra ombrydningen i Doc2XMLVisioLink.

   DEN FYLDER HELE SKÆRMEN, og det er ikke en smagssag. Da læseren lå som en ø nede i den
   almindelige side - under topscroll-annoncen, menuen og tickeren - havnede den under folden på en
   normal skærm. Sideoversigten åbnede 800 pixels længere nede, piletasterne bladrede en avis man
   ikke kunne se, og selve opslaget var på størrelse med et frimærke. Det så ud som om knapperne var
   i stykker; de virkede fint, de virkede bare et sted man ikke kiggede. En avis skal fylde skærmen.

   TO PRÆFIKSER, OG DET ER MED VILJE:

     .eavis-*   RAMMEN om avisen - sidebjælken, topbjælken, værktøjslinjen, sideoversigten,
                artiklen, luppen, temaerne. Den ene position: fixed-flade ligger her.
     .ep-*      AVISEN selv - viewporten, sporet, opslaget, klikfelterne, søgningen, paywallen.

   At omdøbe det ene sæt til det andet ville være tusindvis af linjers risiko uden en eneste
   ændring i, hvad man ser - og epaper-reader.js har .ep-* hårdkodet i sine selektorer.

   GEOMETRIEN LIGGER IKKE HER. Den lå før fire steder - C#, JS, --eavis-cols og en matchMedia -
   og kunne komme fra hinanden, så CSS viste én side, mens swipen bladrede to. Nu er der ét sted:
   EPaperReader.SpreadView afgør, hvor mange sider der står i DOM'en, StageSize() sætter scenens
   format, og fit() i epaper-reader.js skalerer den. CSS ved intet om opslag og skærmbredder.

   To tal står stadig her, og begge læses TILBAGE ud af CSS af JavaScript, så de ikke kan komme
   fra hinanden: --ep-frame-pad (indrykningen, som fit() læser) og sidernes forhold 1102 : 1456,
   sidegitteret ombrydningen er målt i (EPaperGeometry). Klikfelterne er ANDELE af siden og
   sættes som procent af EPaperReader.Rect(), så samme tal passer på en telefon, på en fuldskærm
   og i en miniature - der står derfor ikke ét pixeltal om et klikfelt her.

   Farverne er husets: papiret hvidt, rammen mørk og varm så papiret træder frem, turkisen #036d76
   kun dér hvor noget er valgt eller kan trykkes.
   ────────────────────────────────────────────────────────────────────────────────────────── */

.eavis-app {
	--eavis-grid-w: 1102;
	--eavis-grid-h: 1456;
	--eavis-frame: #1c1a17;
	--eavis-frame-2: #262320;
	--eavis-ink: #f4f1ea;
	/* Blækket som kanal og ikke kun som farve: hver eneste svage tone herunder - stregerne, de
	   dæmpede tekster, hover-skyggerne - er det SAMME blæk med en alfa på. Så er et tema tre linjer
	   og ikke tredive. */
	--eavis-ink-rgb: 244, 241, 234;
	--eavis-dim: rgba(var(--eavis-ink-rgb), .58);
	--eavis-line: rgba(var(--eavis-ink-rgb), .14);
	--eavis-teal: #036d76;
	--eavis-teal-lift: #7fc6cc;

	position: fixed;
	inset: 0;
	/* Over indholdet og over podcast-dokken (1040), under Bootstraps baggrund (1050) så en
	   login-modal stadig kan komme ovenpå. */
	z-index: 1046;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	background: var(--eavis-frame);
	color: var(--eavis-ink);
	font-family: var(--font-sans-serif);
	overscroll-behavior: contain;
}

/* Rulningen låses i CSS og ikke med en klasse på body: Blazor kan ikke sætte body-klasser uden JS,
   låsen holder dermed også i det prerenderede HTML, og den rydder sig selv i samme øjeblik
   komponenten fjernes. !important er nødvendigt, fordi linje 77 i denne fil bevidst ophæver
   Bootstraps .modal-open globalt med samme vægt. */
html:has(.eavis-app),
body:has(.eavis-app) {
	overflow: hidden !important;
}

@media (min-width: 1024px) {
	.eavis-app {
		grid-template-columns: 17rem 1fr;
	}
}

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

/* Blazors FocusOnNavigate lægger fokus på første h1 efter hver navigation (og sætter
   tabindex="-1" på den), så en skærmlæser annoncerer den nye side. Det skal blive. Men Chrome
   regner det programmatiske fokus som :focus-visible, og reglen ovenfor tegnede så en turkis
   ramme om avisdatoen, hver gang man kom ind på en avisside. app.css slår den fra med h1:focus,
   men den taber til .epaper :focus-visible på specificitet.

   tabindex="-1" er det rigtige snit, ikke h1: sådan et element står UDEN FOR tab-rækkefølgen og
   kan kun få fokus fra kode. En tastaturbruger lander aldrig dér, så ringen hjælper ingen - og
   alt, man faktisk kan tabbe til, beholder den. */
.epaper [tabindex="-1"]:focus-visible {
	outline: none;
}

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

/* Kiosken står i sitets eget lærred (.lm-canvas > .lm-grid > .lm-col-main), som Visiolink-siden
   på /effektivt-landbrug/webavis, og på sidens hvide baggrund - den creme flade, den havde som
   testside, fik den til at ligne noget andet end resten af sitet. Læserens tomme tilstande
   ("Udgaven findes ikke") står uden lærredet og beholder derfor deres egen luft. */
.ep-kiosk {
	color: var(--ep-ink);
}

	.ep-kiosk:not(.lm-canvas) {
		max-width: 1180px;
		margin-inline: auto;
		padding: 1.5rem 1rem 3rem;
	}

.ep-main {
	padding-block: 1.75rem 3rem;
}

/* ---- Sidehovedet (EPaperMasthead.razor) ----
   Sitets bånd (.theme-header.theme-primary) med tre forslag - se komponenten. Båndet har selv
   bund-margin 0; Visiolink-siden gav det mb-2, og det gør vi også. */
.epaper .ep-band {
	margin-bottom: 0.5rem;
}

	.epaper .ep-band .lead {
		margin-inline: auto;
		max-width: 40rem;
	}

/* Lav: avissiden og paywallen har deres egen overskrift, så båndet siger kun, hvor man er. */
.epaper .ep-band--slim {
	padding-block: 1.125rem;
}

	.epaper .ep-band--slim .theme-header-title {
		margin: 0;
		font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	}

	.epaper .ep-band--slim .lead {
		font-size: 0.9375rem;
	}

/* Forslag B: forsiderne ligger i båndet. Båndet bliver dybt forneden, og hylden trækkes op i det
   med samme mål - så forsiden ligger halvt på petrol, halvt på papirhvidt, og navnene under står på
   siden. Løftet er ét tal, så de to aldrig kommer fra hinanden. */
.epaper.has-shelf-hero {
	--ep-lift: clamp(7rem, 15vw, 12rem);
}

	.epaper.has-shelf-hero .ep-band--shelf {
		margin-bottom: 0;
		padding-bottom: calc(var(--ep-lift) + 2.5rem);
	}

	.epaper.has-shelf-hero .ep-main > .ep-shelf:first-child {
		margin-top: calc(-1 * var(--ep-lift) - 1.75rem);
	}

	.epaper.has-shelf-hero .ep-main > .ep-shelf:first-child .ep-shelf-cover {
		border-color: transparent;
		box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
	}

/* Forslag C: intet bånd. Samme bredde som indholdet under, venstrestillet. */
.ep-intro {
	max-width: 976px;
	margin-inline: auto;
	padding-block: 1.75rem 1.25rem;
	border-bottom: 1px solid var(--ep-line);
}

	.ep-intro .ep-intro-title {
		margin: 0 0 0.25rem;
		font-family: "Lora", "Lora Fallback", serif;
		font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
		font-weight: 400;
		line-height: 1.1;
		color: var(--ep-ink);
	}

	.ep-intro .ep-intro-lead {
		margin: 0;
		font-size: 1.0625rem;
		color: var(--ep-muted);
	}

.ep-intro--slim {
	padding-block: 1rem 0.875rem;
}

	.ep-intro--slim .ep-intro-title {
		font-size: 1.5rem;
	}

/* Mellemrubrik på hylden: "Øvrige magasiner". */
.ep-more {
	margin-top: 3rem;
}

	/* Centreret som kortene under den - hylden centrerer sine kort. */
	.ep-more .ep-section-title {
		text-align: center;
	}

.ep-section-title {
	margin: 0 0 1.25rem;
	font-family: "Lora", "Lora Fallback", serif;
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
	font-weight: 400;
	color: var(--ep-ink);
}

/* Abonnentens linje nederst - Visiolink-sidens "Dit abonnement giver dig adgang …". */
.ep-subscriber-note {
	max-width: 40rem;
	margin: 3rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ep-line);
	text-align: center;
	color: var(--ep-muted);
}

.epaper .ep-subscriber-note a.ep-note-link {
	color: var(--ep-teal);
	white-space: nowrap;
}

.ep-empty {
	padding: 2rem 0;
	color: var(--ep-muted);
}
.ep-folio {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* ---- Læseren: avisfladen inde i rammen ------------------------------------
   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.

   Den var selv position: fixed med z-index 1050. Nu er RAMMEN (.eavis-app) den
   ene faste flade, og to faste lag oven på hinanden er præcis ét for meget:
   avisen er en almindelig boks i rammens hovedspalte. Baggrunden males af
   rammen, så temaet kan nå hele vejen ud.
   -------------------------------------------------------------------------- */

.ep-reader {
	position: static;
	z-index: auto;
	flex: 1 1 auto;
	min-block-size: 0;
	display: flex;
	flex-direction: column;
	background: transparent;
	color: var(--ep-ink, #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-panel: 400px;
}

/* ---- temaet er rammens, ikke trykkets ------------------------------------
   .eavis-app sætter --eavis-ink/-dim/-line pr. tema; .epaper har sine egne
   --ep-*. De var ikke koblet, så søgefeltet, zoomknapperne og søgeresultaterne
   blev mørke, uanset hvilken baggrund læseren havde valgt.

   Sidebilledet får ALDRIG et filter: hele pointen med den mørke ramme er, at
   papiret skal være det lyseste på skærmen. Kun rammens egne flader følger med.
   -------------------------------------------------------------------------- */
.eavis-app .epaper {
	--ep-ink: var(--eavis-ink);
	--ep-muted: var(--eavis-dim);
	--ep-line: var(--eavis-line);
	--ep-stock: transparent;
}

.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: minmax(0, 1fr);
	min-height: 0;
}

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

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

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

/* Links i brødteksten. Læseren skal kunne se forskel UDEN at klikke: peger linket på en artikel
   i denne udgave, åbnes den i artiklen, og man bliver i avisen. Alt andet forlader avisen, og så
   skal det stå der - ikke opdages bagefter i et nyt faneblad.

   Scopet er .eavis-article__text, fordi det er DEN container, links() dekorerer. Reglerne hang
   før på .ep-body, som var artikelarkets brødtekst - den findes ikke mere. */
.eavis-article__text a.ep-link-internal {
	border-bottom: 1px solid currentColor;
	text-decoration: none;
	cursor: pointer;
}

.eavis-article__text a.ep-link-external {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

	/* Pilen siger "åbnes et andet sted" til øjet; noten i linket (visually-hidden) og title siger
	   "Åbnes på hjemmesiden i et nyt vindue" til skærmlæser og mus. Der stod før et styretegn
	   (U+0011) og "97" her - en pil-escape, der var knækket, da filen blev skrevet, og som tegnede
	   "97" efter hvert eneste udgående link. Escapen skrives nu i ASCII, så den ikke kan knække igen. */
	.eavis-article__text a.ep-link-external::after {
		content: "\00a0\2197";
		color: var(--ep-ochre);
		text-decoration: none;
		display: inline-block;
	}

/* Et relateret-kort (billede + rubrik) er ét stort link. En pil midt i billedet ville ikke sige
   noget, så kortet får en lille linje under sit indhold - samme besked, synlig uden at holde musen
   over. Se isCard i epaper-reader.js. */
.eavis-article__text a.ep-link-card::after {
	content: "\00c5 bnes p\00e5  hjemmesiden\00a0\2197";
	display: block;
	/* Luft i kortets egen kant - billedet står helt ude i den, og linjen klistrede sig til den. */
	padding: 0.5rem 0.75rem 0.625rem;
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0.7;
}

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

/* ---- avissiden: forsiden, udgaverne og det, der står i avisen --------------------------------
   /test/eavis/effektivt-landbrug. Formen er Dannys kiosk fra a9c9ca1f: forsiden stor til
   venstre; til højre dato, omfang, de to veje ind i avisen og de øvrige udgaver som en vandret
   stribe. Farverne er kioskens egne (.epaper er lys) - hans lå inde i læserens mørke ramme.

   Links skal have TO klasser (.epaper a.ep-past): temaets a:not(.btn, ...) har specificitet
   0,1,1 og slår en enkelt klasse, så en farve eller en understregning ville ellers vinde.
   -------------------------------------------------------------------------------------------- */
.ep-hero {
	display: grid;
	gap: clamp(1.25rem, 4vw, 2.5rem);
	grid-template-columns: 1fr;
	align-items: start;
	padding-block-end: clamp(1.5rem, 4vw, 2.5rem);
	border-block-end: 1px solid var(--ep-line);
}

@media (min-width: 768px) {
	.ep-hero {
		grid-template-columns: minmax(14rem, 22rem) 1fr;
	}
}

/* På en telefon stod forsiden i fuld bredde, og en låst læser skulle rulle en hel skærm, før
   paywallen kom frem. Den er stadig stor nok til at genkende og trykke på. */
@media (max-width: 767.98px) {
	.epaper .ep-hero-cover {
		justify-self: center;
		width: min(100%, 15rem);
	}
}

.epaper .ep-hero-cover {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 2px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(16, 49, 47, 0.18);
	transition: transform 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
}

	.epaper a.ep-hero-cover:hover {
		transform: translateY(-3px);
		box-shadow: 0 18px 38px rgba(16, 49, 47, 0.26);
	}

	.ep-hero-cover img {
		display: block;
		width: 100%;
		aspect-ratio: 1102 / 1456;
		object-fit: cover;
		object-position: top center;
	}

.ep-hero-go {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 2.5rem 0.75rem 0.75rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* En gittercelle har min-width: auto - altså sit indholds min-content - og striben med udgaverne
   er lige så bred som alle forsiderne tilsammen. Uden nulstillingen sprængte en håndfuld udgaver
   siden ud på en telefon og pressede forsiden sammen på en stor skærm. (Dannys erfaring.) */
.ep-hero-lead {
	min-inline-size: 0;
}

.ep-hero-kicker {
	margin: 0 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ep-teal);
}

.ep-hero-date {
	margin: 0 0 0.375rem;
	font-family: "Lora", "Lora Fallback", serif;
	/* Højst 2.125rem: i .lm-col-main (976 px) er højre spalte ~580 px, og ved 2.5rem brækkede
	   "Onsdag den 23. september 2026" over to linjer. */
	font-size: clamp(1.5rem, 3.4vw, 2.125rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--ep-ink);
}

.ep-hero-meta {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	color: var(--ep-muted);
}

.ep-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-block-end: 2rem;
}

.epaper .btn.ep-hero-btn {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0 1.5rem;
	border-radius: 50rem;
	font-size: 0.9375rem;
	font-weight: 700;
}

/* ---- avissiden, når læseren er låst ude ----
   Forsiden bliver stående - den ER teaseren - men med samme slør og lås som på hylden, og
   betalingsmuren tager knappernes plads i højre spalte (EPaperPaywall Compact - se "Paywall"). */
.ep-hero.is-locked .ep-hero-cover {
	cursor: not-allowed;
}

	.ep-hero.is-locked .ep-hero-cover::before {
		content: "";
		position: absolute;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

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

/* Overskrift over en sektion: "Flere udgaver", "I denne udgave". */
.ep-subhead {
	margin: 0 0 0.875rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ep-muted);
}

/* ---- striben med udgaverne ----
   Samme kontrakt som podcast- og Landbrugsmarkedet-striberne: js/podcast-layout.js tænder den pil,
   der har noget at rulle hen til (.is-active). Pilene ligger uden for rullefladen, så de ikke
   ruller med. */
.ep-strip {
	position: relative;
	min-inline-size: 0;
}

.ep-strip-row {
	position: relative;
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	overflow-x: auto;
	padding: 0.25rem 0.25rem 0.75rem;
	/* Snap-linjen skal ligge VED paddingens inderkant: ellers parkerer scroll-snap rækken et stykke
	   inde, og podcast-layout.js viser tilbage-pilen på en urullet stribe. */
	scroll-padding-inline: 0.25rem;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

	.ep-strip-row::-webkit-scrollbar {
		display: none;
	}

	.ep-strip-row > * {
		scroll-snap-align: start;
	}

.epaper .ep-strip-nav {
	position: absolute;
	top: calc(50% - 1rem);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	padding: 0;
	border: 1px solid var(--ep-line);
	border-radius: 50%;
	background: #fff;
	color: var(--ep-ink);
	box-shadow: 0 6px 18px -8px rgba(16, 49, 47, 0.45);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

	.epaper .ep-strip-nav.is-active {
		opacity: 1;
		visibility: visible;
	}

	.epaper .ep-strip-nav:hover {
		border-color: var(--ep-teal);
		color: var(--ep-teal);
	}

	.ep-strip-nav svg {
		width: 14px;
		height: 14px;
		fill: currentColor;
	}

.ep-strip-nav--back {
	left: 4px;
}

.ep-strip-nav--next {
	right: 4px;
}

@media (max-width: 767.98px) {
	.epaper .ep-strip-nav {
		display: none;
	}
}

/* Én udgave i striben. Bredden kommer fra forsiden (højden er fast, formatet giver resten), og
   datoen må ikke flyde ud over den - derfor nowrap og en flex-kolonne, der følger billedet. */
.ep-past {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	color: var(--ep-muted);
	font-size: 0.8125rem;
}

.epaper a.ep-past {
	color: var(--ep-ink);
	text-decoration: none;
}

	.epaper a.ep-past:hover img {
		outline: 2px solid var(--ep-teal);
		outline-offset: 1px;
	}

	.ep-past img {
		display: block;
		block-size: clamp(8rem, 16vw, 11rem);
		inline-size: auto;
		aspect-ratio: 1102 / 1456;
		object-fit: cover;
		object-position: top center;
		background: #fff;
		box-shadow: 0 4px 12px rgba(16, 49, 47, 0.14);
	}

.ep-past-date {
	font-weight: 700;
	white-space: nowrap;
}

/* ---- artiklerne i udgaven -----------------------------------------------------------------
   "I denne udgave" paa avissiden. Det er dét, en avisside kan, som en forside ikke kan: man ser
   historierne uden at bladre sig igennem, og hvert kort foerer til den side, historien staar
   trykt paa.

   Formen er Dannys kiosk-kort fra a9c9ca1f, men skrevet om til kioskens EGNE farver: hans brugte
   --eavis-*, som kun findes inde i laeserens ramme. Her er vi i .epaper, hvor papiret er lyst.
   -------------------------------------------------------------------------------------------- */
.ep-articles {
	margin-block-start: clamp(1.5rem, 4vw, 2.5rem);
}

.ep-cards {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.epaper a.ep-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ep-line);
	border-radius: 4px;
	background: #fff;
	color: var(--ep-ink);
	text-decoration: none;
	transition: border-color .15s ease-in-out, transform .15s ease-in-out;
}

	.epaper a.ep-card:hover {
		transform: translateY(-2px);
		border-color: var(--ep-teal);
	}

.ep-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--ep-stock);
}

	.ep-card__media img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

/* flex: 1 er dét, der holder sidetallet nede i bunden. Foden har i forvejen margin-top: auto,
   men den skubber kun, hvis der ER plads at skubbe i: raekkens kort er lige hoeje (grid straekker
   dem), mens kroppen kun var saa hoej som sin egen tekst - saa foden laa lige under teksten og
   sad i forskellig hoejde fra kort til kort. */
.ep-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .4375rem;
	padding: .875rem 1rem 1rem;
}

.ep-card__title {
	font-family: "Lora", "Lora Fallback", serif;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	text-wrap: pretty;
}

/* Fire linjer og ikke tre: kortene i en raekke er lige hoeje, og med tre stod der "..." midt paa
   et kort, der havde en hel linje i overskud. */
.ep-card__teaser {
	font-size: .875rem;
	line-height: 1.5;
	color: var(--ep-muted);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

	.ep-card__min {
		display: inline-flex;
		align-items: center;
		gap: .3125rem;
	}

.ep-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-block-start: auto;
	padding-block-start: .5rem;
	font-size: .75rem;
	color: var(--ep-muted);
}

/* ---- Paywall (EPaperPaywall.razor) ----
   Sitets petrolflade (.theme-primary giver farve og tekstfarve), så paywallen hører til
   webavisen og båndet øverst. Tre udgaver, der kun adskiller sig i, hvad der står ved siden af:

     bred        hylden - centreret, gevinsterne på én række.
     .has-cover  læseren - udgavens forside til venstre, løftet op over fladens kant.
     --compact   avissidens højre spalte - forsiden står allerede til venstre.

   Linkene skrives med tre klasser: .theme-primary a:not(.teaser, .btn, button) har 0,2,1 og
   farver ellers linket i temaets accent. */
.epaper .ep-paywall {
	margin: 2.5rem 0 1rem;
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem);
	border-radius: 6px;
	text-align: center;
}

.ep-paywall-body {
	max-width: 44rem;
	margin-inline: auto;
}

.ep-paywall-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--theme-accent);
}

	.ep-paywall-badge .eavis-ic {
		font-size: 1rem;
	}

.epaper .ep-paywall .ep-paywall-title {
	margin: 0 0 0.75rem;
	padding: 0;
	border: 0;
	background: none;
	font-family: "Lora", "Lora Fallback", serif;
	font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem);
	font-weight: 400;
	line-height: 1.15;
	color: inherit;
}

.ep-paywall-title,
.ep-paywall-lead {
	text-wrap: balance;
}

.ep-paywall-lead {
	margin: 0 0 1.5rem;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: hsl(0deg 0% 100% / 0.86);
}

/* Hvad abonnementet giver. Én række på den brede flade, en liste i de smalle. */
.ep-paywall-gains {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.625rem 1.75rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

	.ep-paywall-gains li {
		display: flex;
		align-items: baseline;
		gap: 0.5rem;
		text-align: start;
	}

	.ep-paywall-gains .eavis-ic {
		flex: 0 0 auto;
		font-size: 0.875rem;
		color: var(--theme-accent-flashy);
		transform: translateY(0.1em);
	}

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

.epaper .ep-paywall .btn.ep-pw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 1.625rem;
	border: 1px solid transparent;
	border-radius: 50rem;
	font-size: 1rem;
	font-weight: 700;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* !important er det eneste, der virker: temaets `.theme-primary a` sætter ALLE links hvide med
   !important, og den hvide knap blev en tom pille (set 24-09-2026). */
.epaper .ep-paywall .btn.ep-pw-btn--primary {
	background: #fff;
	color: var(--theme-bg) !important;
}

	.epaper .ep-paywall .btn.ep-pw-btn--primary:hover,
	.epaper .ep-paywall .btn.ep-pw-btn--primary:focus-visible {
		background: var(--theme-accent);
		color: var(--text-on-accent) !important;
	}

.epaper .ep-paywall .btn.ep-pw-btn--ghost {
	border-color: hsl(0deg 0% 100% / 0.55);
	background: transparent;
	color: #fff;
}

	.epaper .ep-paywall .btn.ep-pw-btn--ghost:hover,
	.epaper .ep-paywall .btn.ep-pw-btn--ghost:focus-visible {
		border-color: #fff;
		background: hsl(0deg 0% 100% / 0.12);
	}

.epaper .ep-paywall :focus-visible {
	outline-color: #fff;
}

.ep-paywall-fine {
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
	color: hsl(0deg 0% 100% / 0.78);
}

.epaper .ep-paywall a.ep-paywall-link {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Læseren: forsiden af den udgave, man prøvede at åbne, til venstre. Den løftes op over fladens
   overkant - avisen ligger OVENPÅ tilbuddet, ikke inde i en ramme. */
@media (min-width: 768px) {
	.epaper .ep-paywall.has-cover {
		display: grid;
		grid-template-columns: minmax(12rem, 16rem) 1fr;
		gap: clamp(1.75rem, 4vw, 3.5rem);
		align-items: center;
		margin-top: 4.5rem;
		text-align: start;
	}

		.ep-paywall.has-cover .ep-paywall-cover {
			margin-top: -5.5rem;
			align-self: start;
		}

		.ep-paywall.has-cover .ep-paywall-body {
			margin-inline: 0;
		}

		.ep-paywall.has-cover .ep-paywall-gains {
			flex-direction: column;
			justify-content: flex-start;
		}

		.ep-paywall.has-cover .ep-paywall-actions {
			justify-content: flex-start;
		}
}

.ep-paywall-cover {
	max-width: 12rem;
	margin: 0 auto 1.5rem;
}

	.ep-paywall-cover img {
		display: block;
		width: 100%;
		aspect-ratio: 1102 / 1456;
		object-fit: cover;
		object-position: top center;
		border-radius: 2px;
		background: #fff;
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
	}

@media (min-width: 768px) {
	.ep-paywall.has-cover .ep-paywall-cover {
		max-width: none;
		margin-bottom: 0;
	}
}

/* Avissiden: i højre spalte, dér hvor "Læs avisen" ellers står. */
.epaper .ep-paywall.ep-paywall--compact {
	margin: 0 0 2rem;
	padding: 1.5rem 1.625rem;
	text-align: start;
}

	.ep-paywall--compact .ep-paywall-body {
		margin-inline: 0;
	}

	.epaper .ep-paywall--compact .ep-paywall-title {
		font-size: 1.5rem;
	}

	.ep-paywall--compact .ep-paywall-lead {
		margin-bottom: 1rem;
		font-size: 1rem;
	}

	.ep-paywall--compact .ep-paywall-gains {
		flex-direction: column;
		justify-content: flex-start;
		margin-bottom: 1.25rem;
	}

	.ep-paywall--compact .ep-paywall-actions {
		justify-content: flex-start;
	}

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

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

/* 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.
   -------------------------------------------------------------------------- */

/* Kortene har en fast største bredde og centreres. Hylden viser kun titler, der har en udgave at
   læse (i september 2026 to ud af seks), og i et fast gitter på fire stod to kort klemt ude til
   venstre under et centreret bånd. 14rem giver fire på en række i .lm-col-main (976 px) og to på
   en telefon. */
.ep-shelf {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 14rem));
	justify-content: center;
	gap: 1.75rem 1.25rem;
}

/* auto-fit tæller kolonner ud fra MAKS-bredden (14rem), så en telefon fik én avis pr. række i
   fuld bredde. To er avisstørrelse nok til at kende forsiden. */
@media (max-width: 575.98px) {
	.ep-shelf {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1rem;
	}
}

@media (min-width: 992px) {
	.eavis-app {
	}
}

.eavis-app :focus-visible {
	outline: 3px solid var(--eavis-teal-lift);
	outline-offset: 2px;
}


/* Baggrunden er læserens valg, ikke husets. Den gælder HELE e-avisen - rammen, kiosken,
   sideoversigten og artiklen - fordi en lys artikel i en kulsort ramme blænder præcis lige så
   meget som det hvide papir gjorde. Valget står i sidebjælken og bliver i browseren under
   eavis.reading, samme nøgle som skriftstørrelsen. */
.eavis-app.is-theme-sepia {
	--eavis-frame: #e5d8bd;
	--eavis-frame-2: #f3e9d6;
	--eavis-ink: #33291c;
	--eavis-ink-rgb: 51, 41, 28;
	--eavis-line: rgba(var(--eavis-ink-rgb), .2);
	--eavis-teal-lift: #04606a;
}

.eavis-app.is-theme-light {
	--eavis-frame: #dedcd7;
	--eavis-frame-2: #f7f6f4;
	--eavis-ink: #1f1e1c;
	--eavis-ink-rgb: 31, 30, 28;
	--eavis-line: rgba(var(--eavis-ink-rgb), .18);
	--eavis-teal-lift: #036d76;
}

/* ---- baggrundsvalget i sidebjælken ----
   Tre prøver der viser deres EGET tema og ikke det man står i - ellers kan man ikke se hvad man
   vælger, kun hvad man allerede har. Derfor er de tre farvepar skrevet ud her. */
.eavis-themepick__label {
	margin: 0 0 .5rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--eavis-dim);
}

.eavis-themepick {
	display: flex;
	gap: .375rem;
	margin-block-end: 1rem;
}

.eavis-themedot {
	flex: 1 1 0;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: .3125rem;
	padding: .375rem .25rem;
	border: 1px solid transparent;
	border-radius: .375rem;
	background: transparent;
	color: var(--eavis-dim);
	font-family: var(--font-sans-serif);
	font-size: .625rem;
	cursor: pointer;
	transition: border-color .15s ease-in-out, color .15s ease-in-out;
}

.eavis-themedot:hover {
	border-color: var(--eavis-line);
	color: var(--eavis-ink);
}

.eavis-themedot.is-active {
	border-color: var(--eavis-teal-lift);
	color: var(--eavis-ink);
}

.eavis-themedot__swatch {
	inline-size: 100%;
	block-size: 1.875rem;
	display: grid;
	place-items: center;
	border: 1px solid rgba(var(--eavis-ink-rgb), .2);
	border-radius: .25rem;
	font-family: "Bitter", "Bitter Fallback", serif;
	font-size: .8125rem;
	font-weight: 700;
}

.eavis-themedot--dark .eavis-themedot__swatch {
	background: #1c1a17;
	color: #f4f1ea;
}

.eavis-themedot--sepia .eavis-themedot__swatch {
	background: #f3e9d6;
	color: #33291c;
}

.eavis-themedot--light .eavis-themedot__swatch {
	background: #f7f6f4;
	color: #1f1e1c;
}

/* ---- sidebjælken ---- */
.eavis-app__side {
	display: none;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.5rem 1.25rem;
	background: var(--eavis-frame-2);
	border-inline-end: 1px solid var(--eavis-line);
	overflow-y: auto;
}

@media (min-width: 1024px) {
	.eavis-app__side {
		display: flex;
	}
}

/* Under 1024px er sidebjælken en skuffe, der kun er der når man har bedt om den. */
@media (max-width: 1023.98px) {
	.eavis-app__side.is-open {
		display: flex;
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: min(19rem, 84vw);
		z-index: 3;
		box-shadow: 0 0 60px rgba(0, 0, 0, .6);
	}
}

/* Ingen bredde-lås: logoet fylder sidebjælkens indhold ud, så luften til venstre og højre er den
   samme - det er sidebjælkens egen padding, og ikke to forskellige tal. */
.eavis-app__brand img {
	inline-size: 100%;
	block-size: auto;
}

/* Logoet er trykt til hvidt papir, så på den mørke ramme vendes det om for ikke at stå som en lys
   klat i et mørkt hjørne. På sepia og lys er papiret lyst i forvejen: dér skal det bare være sig
   selv, i husets egne farver. */
.eavis-app.is-theme-dark .eavis-app__brand img {
	filter: invert(1) grayscale(1) brightness(1.9);
}

.eavis-app__edition {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--eavis-dim);
}

.eavis-app__edition span {
	display: block;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--eavis-teal-lift);
}

.eavis-app__nav {
	display: flex;
	flex-direction: column;
	gap: .125rem;
	margin-block: .5rem;
}

.eavis-nav {
	display: flex;
	align-items: center;
	gap: .75rem;
	inline-size: 100%;
	min-height: 2.75rem;
	padding: 0 .875rem;
	border: 0;
	border-radius: .5rem;
	background: transparent;
	color: var(--eavis-ink);
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
	transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

/* To af punkterne er links, resten knapper. Temaets a:not(.btn, …) (0,1,1) slår den enkelte
   klasse og farvede linkene petrol på den mørke ramme - de skal se ud som knapperne. */
.eavis-app a.eavis-nav,
.eavis-app a.eavis-nav:hover,
.eavis-app a.eavis-nav:focus {
	color: var(--eavis-ink);
	text-decoration: none;
}

.eavis-nav:hover {
	background: rgba(var(--eavis-ink-rgb), .09);
}

.eavis-nav.is-active {
	background: var(--eavis-teal);
	color: #fff;
}

.eavis-app__side-foot {
	margin-block-start: auto;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--eavis-line);
}

/* To klasser, ikke én: temaets a:not(.btn, .gallery, .collection-image, .teaser, .nav-link) har
   specificitet (0,1,1) og ville ellers farve linket turkis. Samme greb som blackout-CTA'en. */
.eavis-app a.eavis-exit {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-height: 2.75rem;
	padding: 0 .875rem;
	border-radius: .5rem;
	color: var(--eavis-dim);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none !important;
	transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.eavis-app a.eavis-exit:hover {
	background: rgba(var(--eavis-ink-rgb), .09);
	color: var(--eavis-ink);
}

/* ---- hovedspalten ---- */
.eavis-app__main {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	min-block-size: 0;
	min-inline-size: 0;
}

.eavis-app__bar {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .625rem clamp(.75rem, 2vw, 1.25rem);
	border-block-end: 1px solid var(--eavis-line);
}

.eavis-app__title {
	flex: 1 1 auto;
	margin: 0;
	font-family: "Lora", "Lora Fallback", serif;
	font-size: clamp(1rem, 2vw, 1.375rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--eavis-ink);
}

.eavis-app__bar-actions {
	display: flex;
	align-items: center;
	gap: .375rem;
}

.eavis-app__burger {
	display: inline-flex;
}

/* To klasser, ikke én: .eavis-iconbtn staar SENERE i filen med display:inline-flex og samme
   vaegt, saa den ville vinde - og burgeren blev staaende paa en stor skaerm, hvor den ikke
   gjorde noget, fordi sidebjaelken i forvejen er fremme. */
@media (min-width: 1024px) {
	.eavis-app__bar .eavis-app__burger {
		display: none;
	}
}

/* ---- ikonknapper ---- */
.eavis-ic {
	inline-size: 1em;
	block-size: 1em;
	fill: currentColor;
	flex: 0 0 auto;
}

.eavis-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.875rem;
	block-size: 2.875rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: .5rem;
	background: transparent;
	color: var(--eavis-ink);
	font-size: 1.125rem;
	cursor: pointer;
	text-decoration: none !important;
	transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.eavis-iconbtn:hover {
	background: rgba(var(--eavis-ink-rgb), .12);
}

.eavis-iconbtn.is-active {
	background: var(--eavis-teal);
	color: #fff;
}

.eavis-app a.eavis-iconbtn {
	color: var(--eavis-ink);
}

.eavis-tool--mode.is-active {
	background: var(--eavis-teal);
	color: #fff;
}

/* To knapper der ikke gør noget på en telefon. Læsetilstand giver kun mening når der ER noget at
   gøre anderledes, og dér fylder siden i forvejen hele fladen. Fuld skærm er det samme: læseren ER
   hele skærmen på en telefon, og på iOS findes API et slet ikke for et vilkårligt element. En knap
   der ikke gør noget er værre end ingen knap. */
@media (max-width: 991.98px) {
	/* To klasser, ikke én: .eavis-tool står LÆNGERE NEDE i filen med display: inline-flex og samme
	   vægt, så den ville vinde og knappen blive stående. Samme fælde som burgeren. */
	.eavis-toolbar .eavis-tool--mode,
	.eavis-app__bar [data-eavis-fullscreen] {
		display: none;
	}
}

/* Ombladningen kører uanset systemets "vis animationer"-indstilling. Den er ikke pynt: den er
   dét, der fortæller hvilken vej man bladrede, og uden den skifter opslaget bare indhold, så man
   mister fornemmelsen af hvor i bladet man er. Windows slår animationer fra som strømbesparelse
   lige så tit som af hensyn til bevægelsesuro, og her var prisen for høj.

   Resten af huset respekterer stadig indstillingen; det er kun avisens egen bladring der er
   undtaget. */

/* ---- værktøjslinje ---- */
.eavis-toolbar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .25rem;
	padding: .625rem clamp(.5rem, 2vw, 1.25rem);
	border-block-start: 1px solid var(--eavis-line);
	background: var(--eavis-frame-2);
}

.eavis-tool {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.5rem;
	padding: 0 1rem;
	border: 0;
	border-radius: 50rem;
	background: transparent;
	color: var(--eavis-ink);
	font-family: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease-in-out, opacity .15s ease-in-out;
}

.eavis-tool:hover:not(:disabled) {
	background: rgba(var(--eavis-ink-rgb), .14);
}

.eavis-tool:disabled {
	opacity: .28;
	cursor: default;
}

.eavis-toolbar__count {
	display: flex;
	align-items: baseline;
	gap: .3125rem;
	margin: 0 .75rem;
	font-size: .9375rem;
	color: var(--eavis-dim);
	white-space: nowrap;
}

.eavis-toolbar__count strong {
	font-size: 1.25rem;
	color: var(--eavis-ink);
}

/* Under 768px er der ikke plads til ordene - så bliver knapperne til rene ikoner. */
@media (max-width: 767.98px) {
	.eavis-tool__text {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.eavis-tool {
		padding: 0 .875rem;
		font-size: 1.0625rem;
	}
}

@keyframes eavis-shimmer {
	from { background-position: 150% 0; }
	to   { background-position: -150% 0; }
}

/* ---- sideoversigten som et lag ------------------------------------------------------------- */
.eavis-sheetwrap {
	position: fixed;
	inset: 0;
	z-index: 1047;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(0, 0, 0, .6);
}

.eavis-sheet {
	inline-size: min(96rem, 100%);
	max-block-size: 88vh;
	display: flex;
	flex-direction: column;
	background: var(--eavis-frame-2);
	border-block-start: 1px solid var(--eavis-line);
	border-start-start-radius: .75rem;
	border-start-end-radius: .75rem;
	box-shadow: 0 -20px 60px rgba(0, 0, 0, .6);
}

.eavis-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .875rem 1.25rem;
	border-block-end: 1px solid var(--eavis-line);
}

.eavis-sheet__title {
	margin: 0;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--eavis-dim);
}

.eavis-sheet__list {
	list-style: none;
	margin: 0;
	padding: 1.25rem;
	display: grid;
	/* Faerre sider pr. raekke: man skal kunne SE hvad der staar paa siden, ikke bare at der staar
	   noget. Listen ruller, saa en lille skaerm bare faar faerre raekker ad gangen. */
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 1.125rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.eavis-thumb {
	position: relative;
	display: block;
	inline-size: 100%;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 2px;
	background: transparent;
	cursor: pointer;
	transition: border-color .15s ease-in-out, transform .15s ease-in-out;
}

.eavis-thumb:hover {
	transform: translateY(-2px);
	border-color: rgba(var(--eavis-ink-rgb), .45);
}

.eavis-thumb.is-current {
	border-color: var(--eavis-teal-lift);
}

.eavis-thumb__sheet {
	display: block;
	inline-size: 100%;
	aspect-ratio: var(--eavis-grid-w) / var(--eavis-grid-h);
	object-fit: cover;
	object-position: top center;
	background: #fff;
}

.eavis-thumb__no {
	position: absolute;
	inset-block-end: .25rem;
	inset-inline-end: .25rem;
	padding: .0625rem .375rem;
	border-radius: 2px;
	background: rgba(0, 0, 0, .7);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
}

/* ---- artikeloversigten som et lag ---------------------------------------------------------
   Udgavens historier side for side, i samme lag som sideoversigten (.eavis-sheet) - de to skal
   opføre sig ens. Rammens farver, så den følger temaet.

   Spalter og ikke et gitter: en side har én historie, den næste fem, og i et gitter ville de korte
   sider efterlade huller. Spalter flyder som en indholdsfortegnelse i en trykt avis, og
   break-inside holder en sides historier samlet. */
.eavis-toc {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1rem 1.25rem 1.5rem;
	columns: 22rem;
	column-gap: 2rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--eavis-ink-rgb), .26) transparent;
}

.eavis-toc__page {
	break-inside: avoid;
	margin-block-end: 1.25rem;
}

.eavis-toc__pageno {
	margin: 0 0 .25rem;
	padding-block-end: .375rem;
	border-block-end: 1px solid var(--eavis-line);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--eavis-dim);
}

/* Siderne på det opslag, man har fremme. */
.eavis-toc__page.is-current .eavis-toc__pageno {
	border-block-end-color: var(--eavis-teal-lift);
	color: var(--eavis-teal-lift);
}

.eavis-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eavis-toc__item {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	inline-size: 100%;
	padding: .625rem .5rem;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--eavis-ink);
	font-family: inherit;
	text-align: start;
	cursor: pointer;
	transition: background-color .15s ease-in-out;
}

	.eavis-toc__item:hover,
	.eavis-toc__item:focus-visible {
		background: rgba(var(--eavis-ink-rgb), .08);
	}

.eavis-toc__title {
	font-family: "Lora", "Lora Fallback", serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	text-wrap: pretty;
}

/* To linjer: oversigten skal kunne skimmes. Hele manchetten står i artiklen ét klik væk. */
.eavis-toc__lead {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .875rem;
	line-height: 1.45;
	color: var(--eavis-dim);
}

.eavis-toc__min {
	display: inline-flex;
	align-items: center;
	gap: .3125rem;
	font-size: .75rem;
	color: var(--eavis-dim);
}

/* ───  E-avis: artiklen ────────────────────────────────────────────────────────────────────────
   Artiklen læst ud af avissiden. Den ligger OVEN PÅ avisen med papiret slørret bagved, så man
   aldrig mister fornemmelsen af hvor i bladet man er - og mørk, fordi den så ikke konkurrerer med
   det hvide papir den dækker.
   ────────────────────────────────────────────────────────────────────────────────────────── */

/* Artiklens farver og tekststørrelse ligger i variabler, så Aa-panelet kan skifte tema og
   størrelse ét sted i stedet for at hver enkelt regel skal kende alle tre temaer. Mørk er
   standard: artiklen ligger oven på avisen, og et lyst panel dér blænder. */
.eavis-article {
	--art-bg: #1a1a19;
	--art-bg-2: #141413;
	--art-ink: rgba(236, 234, 229, .9);
	--art-strong: #fff;
	--art-dim: rgba(236, 234, 229, .56);
	--art-rule: rgba(255, 255, 255, .14);
	--art-hover: rgba(255, 255, 255, .12);
	--art-link: #7fc6cc;
	/* Tekststørrelsen er en FAKTOR og ikke fire tal: rubrik, manchet, brødtekst, billedtekst og
	   byline ganges alle med den, så hele artiklen vokser sammen. Før var det kun brødteksten der
	   flyttede sig, og med en rubrik på 42px låst øverst på skærmen lignede de fire trin hinanden. */
	--art-scale: 1;
	--art-size: calc(1.1875rem * var(--art-scale));

	position: fixed;
	inset: 0;
	z-index: 1060;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(1rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem) 0;
	background: rgba(8, 8, 7, .74);
	backdrop-filter: blur(16px) saturate(.85);
	-webkit-backdrop-filter: blur(16px) saturate(.85);
	overscroll-behavior: contain;
}


.eavis-article.is-theme-sepia {
	--art-bg: #f3e9d6;
	--art-bg-2: #e9dcc3;
	--art-ink: #3b3226;
	--art-strong: #211a11;
	--art-dim: rgba(59, 50, 38, .62);
	--art-rule: rgba(59, 50, 38, .18);
	--art-hover: rgba(59, 50, 38, .1);
	--art-link: #0a5960;
}

.eavis-article.is-theme-light {
	--art-bg: #fff;
	--art-bg-2: #f2f2f0;
	--art-ink: #2c2c2b;
	--art-strong: #111;
	--art-dim: rgba(44, 44, 43, .6);
	--art-rule: rgba(0, 0, 0, .14);
	--art-hover: rgba(0, 0, 0, .08);
	--art-link: #036d76;
}

.eavis-article.is-size-0 { --art-scale: .88; }
.eavis-article.is-size-1 { --art-scale: 1; }
.eavis-article.is-size-2 { --art-scale: 1.18; }
.eavis-article.is-size-3 { --art-scale: 1.4; }
.eavis-article__panel {
	position: relative;
	inline-size: min(46rem, 100%);
	flex: 1 1 auto;
	min-block-size: 0;
	display: flex;
	flex-direction: column;
	background: var(--art-bg);
	color: var(--art-ink);
	border-start-start-radius: .5rem;
	border-start-end-radius: .5rem;
	overflow: hidden;
	box-shadow: 0 -10px 60px rgba(0, 0, 0, .55);
}

.eavis-article__close {
	position: absolute;
	inset-block-start: clamp(.5rem, 2vw, 1.25rem);
	inset-inline-end: clamp(.5rem, 2vw, 1.25rem);
	z-index: 1061;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color .15s ease-in-out;
}

.eavis-article__close:hover {
	background: rgba(255, 255, 255, .34);
}

/* Billedet ligger inde i rullefladen, saa det triller vaek naar man laeser videre - og gaar til
   kanten med negativ margen, saa det stadig er fuldbredde. Laa det udenfor, blev det haengende
   og aad den halve skaerm hele vejen ned gennem artiklen. */
.eavis-article__hero {
	margin: calc(var(--eavis-pad-t) * -1) calc(var(--eavis-pad-x) * -1) 1.5rem;
}

.eavis-article__hero img {
	display: block;
	inline-size: 100%;
	max-block-size: 44vh;
	object-fit: cover;
	cursor: zoom-in;
}

.eavis-article__caption {
	padding: .5rem .875rem;
	font-size: calc(.8125rem * var(--art-scale));
	line-height: 1.4;
	color: var(--art-dim);
	background: var(--art-bg-2);
}

/* Læsepositionen. Modulet skriver --eavis-read (0-1) mens panelet rulles. */
.eavis-article__progress {
	flex: 0 0 auto;
	block-size: 3px;
	background: var(--art-rule);
}

.eavis-article__progress::after {
	content: "";
	display: block;
	block-size: 100%;
	inline-size: calc(var(--eavis-read, 0) * 100%);
	background: var(--eavis-teal);
	transition: inline-size .1s linear;
}

.eavis-article__body {
	--eavis-pad-x: clamp(1.25rem, 4vw, 2.5rem);
	--eavis-pad-t: clamp(1.25rem, 4vw, 2rem);

	flex: 1 1 auto;
	min-block-size: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--eavis-pad-t) var(--eavis-pad-x) 2rem;
}

.eavis-article__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem;
	margin: 0 0 1rem;
	font-size: .8125rem;
	letter-spacing: .03em;
	color: var(--art-dim);
}

.eavis-article__minutes {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
}

.eavis-article__title {
	font-family: "Lora", "Lora Fallback", serif;
	font-size: calc(clamp(1.75rem, 4.4vw, 2.625rem) * var(--art-scale));
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.012em;
	text-wrap: balance;
	margin: 0 0 1rem;
	color: var(--art-strong);
}

.eavis-article__intro {
	font-family: "PT Serif", "PT Serif Fallback", serif;
	font-size: calc(clamp(1.0625rem, 2.4vw, 1.3125rem) * var(--art-scale));
	line-height: 1.6;
	margin: 0 0 1.5rem;
	color: var(--art-ink);
}

.eavis-article__byline {
	margin: 0 0 1.25rem;
	padding-block-end: .875rem;
	border-block-end: 1px solid var(--art-rule);
	font-family: "PT Serif", "PT Serif Fallback", serif;
	font-style: italic;
	font-size: calc(.9375rem * var(--art-scale));
	color: var(--art-dim);
}

/* Brødteksten kommer fra ContentBlockList og bærer avisens egne trykklasser (grundskrift, mr,
   faktaboks-titel ...). De er farvet til hvidt papir, så her arves farven i stedet. */
.eavis-article__text {
	font-family: "Bitter", "Bitter Fallback", serif;
	font-size: var(--art-size);
	line-height: 1.78;
	color: var(--art-ink);
}

.eavis-article__text p,
.eavis-article__text .grundskrift,
.eavis-article__text .fakta-tekst {
	color: inherit;
	margin: 0 0 1rem;
}

.eavis-article__text h2,
.eavis-article__text h3,
.eavis-article__text .mr,
.eavis-article__text .faktaboks-titel {
	font-family: "Lora", "Lora Fallback", serif;
	font-size: calc(var(--art-size) * 1.16);
	line-height: 1.25;
	color: var(--art-strong);
	margin: 1.75rem 0 .625rem;
}

/* Ingen margen: billederne står i <figure>'er, der selv holder afstanden, så en margen her blev
   lagt oven i den og efterlod et hul over hver billedtekst. */
.eavis-article__text img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: 3px;
	cursor: zoom-in;
}

/* Kun rigtige tekstlinks. Billederne er pakket ind i husets <a class="gallery"> og "Læs også" i
   <a class="card teaser">, så en bar a-regel lagde en streg under både billedteksten og den
   henviste rubrik. Samme undtagelsesliste som temaets egen a-regel. */
.eavis-article__text a:not(.btn, .gallery, .teaser, .card, .collection-image, .nav-link) {
	color: var(--art-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- blokkene i brødteksten -------------------------------------------------------------------
   Brødteksten er husets egne komponenter, ikke vores markup: ContentBlockList sender hver
   CMSContent-celle gennem ContentRenderer, og de lander som Bootstrap-kort tegnet til en HVID side
   - DocumentFactBoxModule/DocumentFactBox som .card.card--factbox, DocumentRelated som
   .related-article med et .card.teaser indeni, tabeller som .table, containermoduler som
   .cms-container-module. Inde her er baggrunden læserens valg, og en hvid kasse med hvid skrift er
   præcis hvad det lyder som: faktaboksens overskrift var væk.

   Derfor får kasserne artiklens egne farver. Én regel pr. SLAGS kasse og ikke én pr. tema - det er
   hele pointen med --art-*: tilføjer man et tema, er det fem variabler og ingen nye regler her.
   To klasser i vælgeren, fordi Bootstraps egen .card er (0,1,0) og ville vinde på rækkefølge. */
.eavis-article__text .card,
.eavis-article__text .card.teaser,
.eavis-article__text .card--factbox,
.eavis-article__text .related-article,
.eavis-article__text .cms-container-module,
.eavis-article__text .table-responsive {
	background: var(--art-bg-2);
	border-color: var(--art-rule);
	color: var(--art-ink);
}

/* "Læs også" er to lag, og kun det YDERSTE skal ligge på siden: overskriften hører til artiklen, så
   den står på artiklens egen bund. Selve henvisningen er en kasse på linje med faktaboksen - samme
   tone, samme hårfine ramme - for det er den samme slags ting: noget ved siden af teksten, som man
   kan gå videre til. */
.eavis-article__text .related-document-content,
.eavis-article__text .related-article {
	background: var(--art-bg);
}

.eavis-article__text .card-body,
.eavis-article__text .card-header,
.eavis-article__text .card-footer {
	background: transparent;
	border-color: var(--art-rule);
	color: var(--art-ink);
}

/* Rubrikkerne i kasserne - faktaboksens titel, "Læs også" og den henviste rubrik - er artiklens
   stærke farve. Det var netop DEN der forsvandt: hvid på hvid. */
.eavis-article__text .faktaboks-titel,
.eavis-article__text .card-title,
.eavis-article__text .related-article h5,
.eavis-article__text .card h2,
.eavis-article__text .card h3,
.eavis-article__text .card h4,
.eavis-article__text .card h5 {
	color: var(--art-strong);
}

.eavis-article__text table,
.eavis-article__text .table {
	color: var(--art-ink);
	border-color: var(--art-rule);
}

.eavis-article__text th,
.eavis-article__text td {
	border-color: var(--art-rule);
	color: var(--art-ink);
}

/* Billedteksterne står under billedet og skal være dæmpede - ikke understregede, og ikke husets
   grå på en baggrund der kan være hvad som helst. */
.eavis-article__text figcaption {
	color: var(--art-dim);
	text-decoration: none;
}

.eavis-article__text a.gallery,
.eavis-article__text a.card,
.eavis-article__text a.teaser {
	color: inherit;
	text-decoration: none;
}

/* ---- citatet ----
   Husets citatdesign - det store anførselstegn og den kursive kilde - bor under "#article-main
   blockquote" i temaets eget ark, og #article-main findes ikke her: artiklen er vores egen flade.
   Derfor stod citatet som almindelig brødtekst med en højrestillet linje under. Designet er
   porteret hertil i artiklens egne farver, så det også holder på sepia og lys.
   Citatet kommer fra Shared/Common/BlockQuote.razor: <blockquote> med <p> og en
   <p class="citat-person"> til kilden. */
.eavis-article__text blockquote {
	position: relative;
	margin: 2rem 0;
	padding: 1.25rem 0 1.25rem 4.25rem;
	border-block: 1px solid var(--art-rule);
	font-family: "Lora", "Lora Fallback", serif;
	font-size: calc(var(--art-size) * 1.08);
	font-weight: 700;
	line-height: 1.4;
	color: var(--art-strong);
}

.eavis-article__text blockquote::before {
	content: "“";
	position: absolute;
	inset-block-start: .75rem;
	inset-inline-start: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 6rem;
	line-height: 1;
	color: var(--art-link);
}

.eavis-article__text blockquote p {
	margin: 0 0 .75rem;
}

.eavis-article__text blockquote p:last-child {
	margin-block-end: 0;
}

/* Kilden er ikke en del af citatet - den er hvem der sagde det. Derfor kursiv, let og til højre. */
.eavis-article__text .citat-person {
	display: block;
	margin-block-start: .75rem;
	text-align: end;
	font-family: "Bitter", "Bitter Fallback", serif;
	font-size: .9375rem;
	font-weight: 400;
	font-style: italic;
	color: var(--art-link);
}

@media (max-width: 575.98px) {
	.eavis-article__text blockquote {
		padding-inline-start: 2.75rem;
	}

	.eavis-article__text blockquote::before {
		font-size: 4rem;
		inset-block-start: .5rem;
	}
}

.eavis-article__loading {
	padding: 4rem 2rem;
	text-align: center;
	color: var(--art-dim);
}

.eavis-article__bar {
	position: relative;
	/* Over lukkelaget for Aa-panelet (1059), så knapperne i linjen stadig kan trykkes mens panelet
	   er åbent - ellers ville et tryk på Aa-knappen ramme laget i stedet for knappen. */
	z-index: 1061;
	inline-size: min(46rem, 100%);
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .25rem;
	padding: .5rem;
	background: var(--art-bg-2);
	border-block-start: 1px solid var(--art-rule);
}

.eavis-article__action {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .375rem;
	min-height: 2.75rem;
	padding: 0 .5rem;
	border: 0;
	border-radius: 50rem;
	background: transparent;
	color: var(--art-ink);
	font-family: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease-in-out, opacity .15s ease-in-out;
}

.eavis-article__action:hover:not(:disabled) {
	background: var(--art-hover);
}

.eavis-article__action:disabled {
	opacity: .3;
	cursor: default;
}

.eavis-article :focus-visible {
	/* Husets turkise fokusring forsvinder på kul. Den følger temaet i stedet: hvid på det mørke,
	   nærsort på sepia og det lyse - ellers ville den forsvinde igen den anden vej. */
	outline: 3px solid var(--art-strong);
	outline-offset: 2px;
}

@media (max-width: 575.98px) {
	.eavis-article {
		padding: 0;
	}

	.eavis-article__panel,
	.eavis-article__bar {
		inline-size: 100%;
		border-radius: 0;
	}

	.eavis-article__bar {
		padding-block-end: max(.5rem, env(safe-area-inset-bottom));
	}
}

/* ───  E-avis: rettelser efter gennemsyn ───────────────────────────────────────────────────────
   Fem ting der så ud som om de ikke virkede. De fire af dem virkede faktisk - de sagde det bare
   ikke. En knap der ikke skifter udseende har for læseren ikke gjort noget.
   ────────────────────────────────────────────────────────────────────────────────────────── */

/* ---- fuld skærm: ikonet skal vende ------------------------------------------------------------
   Begge ikoner står i knappen, og :fullscreen vælger. Det SKAL være CSS og ikke en klik-handler:
   forlader man fuld skærm med Escape eller F11, er der intet klik at reagere på, og knappen ville
   blive hængende på det forkerte ikon. */
/* Grundreglen FØRST, så skjul-reglerne bagefter: ens vægt, og så vinder den sidste. */
.eavis-fs__enter,
.eavis-fs__exit {
	display: inline-flex;
	align-items: center;
}

.eavis-fs__exit {
	display: none;
}

.eavis-app:fullscreen .eavis-fs__enter {
	display: none;
}

.eavis-app:fullscreen .eavis-fs__exit {
	display: inline-flex;
}

/* ---- sidebjælkens skygge på en telefon --------------------------------------------------------
   Skuffen skal kunne lukkes igen ved at trykke ved siden af. Uden det var burgeren en envejsdør. */
.eavis-scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	border: 0;
	padding: 0;
	background: rgba(0, 0, 0, .55);
	cursor: pointer;
}

@media (min-width: 1024px) {
	.eavis-scrim {
		display: none;
	}
}

/* ---- luppen -----------------------------------------------------------------------------------
   Brødtekstens billeder kommer fra ContentBlockList pakket ind i husets
   <a class="gallery" onclick="openCarousel(...)">. openCarousel åbner #article-img-carousel, som
   DocumentView renderer - og den findes ikke i e-avisen. Derfor skete der ingenting når man klikkede
   på et billede. epaper-chrome.js fanger klikket og bygger dette lag i stedet.

   2147483000 er samme højde som blackout-overlayet: luppen er det øverste der kan være på skærmen,
   og den ligger uden for appen i <body>, så den skal ikke konkurrere med noget. */
.eavis-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(0, 0, 0, .92);
	cursor: zoom-out;
}

.eavis-lightbox__figure {
	margin: 0;
	max-inline-size: 100%;
	max-block-size: 100%;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.eavis-lightbox__figure img {
	max-inline-size: 100%;
	max-block-size: 82vh;
	object-fit: contain;
	margin-inline: auto;
}

.eavis-lightbox__figure figcaption {
	max-inline-size: 56rem;
	margin-inline: auto;
	color: rgba(255, 255, 255, .78);
	font-family: var(--font-sans-serif);
	font-size: .875rem;
	line-height: 1.5;
	text-align: center;
}

.eavis-lightbox__close {
	position: absolute;
	inset-block-start: clamp(.5rem, 2vw, 1.5rem);
	inset-inline-end: clamp(.5rem, 2vw, 1.5rem);
	inline-size: 2.875rem;
	block-size: 2.875rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.eavis-lightbox__close:hover {
	background: rgba(255, 255, 255, .34);
}

/* ---- rullebjælkerne ---------------------------------------------------------------------------
   Browserens egen bjælke er lys og lagde en hvid stribe ned ad kanten af en kulsort artikel. Den
   males i stedet i avisens egne farver. To skrivemaader, fordi ingen af dem daekker alt: den nye
   scrollbar-color (Firefox og nyere Chromium) og ::-webkit-scrollbar til resten.
   ------------------------------------------------------------------------------------------- */
.eavis-article__body,
.eavis-sheet__list{
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--eavis-ink-rgb), .26) transparent;
}

.eavis-article__body::-webkit-scrollbar,
.eavis-sheet__list::-webkit-scrollbar{
	inline-size: 10px;
	block-size: 10px;
}

.eavis-article__body::-webkit-scrollbar-track,
.eavis-sheet__list::-webkit-scrollbar-track{
	background: transparent;
}

.eavis-article__body::-webkit-scrollbar-thumb,
.eavis-sheet__list::-webkit-scrollbar-thumb{
	border: 3px solid transparent;
	border-radius: 50rem;
	background-clip: content-box;
	background-color: rgba(var(--eavis-ink-rgb), .26);
}

.eavis-article__body::-webkit-scrollbar-thumb:hover,
.eavis-sheet__list::-webkit-scrollbar-thumb:hover{
	background-color: rgba(var(--eavis-ink-rgb), .46);
}

/* Den slørede kant omkring artiklen tager også musehjulet (se onArticleWheel i
   epaper-chrome.js), så markøren ikke behøver ramme selve panelet for at rulle videre. */
.eavis-article {
	cursor: default;
}

/* ---- oplæseren i artiklen ---------------------------------------------------------------------
   Den 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 kender allerede alle tre og sætter .is-current/.is-playing -
   så pauseknap, bevægelige bølger, spolbar linje og tællende klokke virker uden én linje ny
   afspillerkode, og uden at Blazor skal vide noget om lyden.

   Tidslinjen er display:none indtil .is-current, så kortet står roligt indtil man trykker afspil.
   ------------------------------------------------------------------------------------------- */
.eavis-player {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	/* Bundmargenen ligger nu på AI-linjen under kortet (.eavis-player__ai). */
	margin: 0 0 .5rem;
	padding: 1.125rem 1.375rem;
	border: 1px solid rgba(127, 198, 204, .22);
	border-radius: .75rem;
	background: linear-gradient(135deg, #0a4f56, #11262b 72%);
	color: #fff;
	transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.eavis-player.is-playing {
	border-color: rgba(127, 198, 204, .55);
	box-shadow: 0 0 0 1px rgba(127, 198, 204, .18), 0 14px 34px -20px rgba(3, 109, 118, .9);
}

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

/* Skiven. .podcast-morph er husets krydsfade mellem glyf og bølger - den ligger allerede i
   podcast-blokken længere oppe, og det er derfor bølgerne bevæger sig af sig selv. */
.eavis-player__disc {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: 50%;
	background: #fff;
	color: #036d76;
	transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;
}

.eavis-player__play:hover .eavis-player__disc {
	transform: scale(1.06);
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .12);
}

/* Trekant i hvile, to bjælker mens den spiller. Ren CSS - ingen ikonfont, samme linje som resten
   af afspilleren. */
.eavis-player__icon {
	inline-size: 0;
	block-size: 0;
	border-block: .6875rem solid transparent;
	border-inline-start: 1.0625rem solid currentColor;
	margin-inline-start: .3125rem;
	transition: opacity .2s ease, transform .2s ease;
}

.eavis-player.is-playing .eavis-player__icon {
	inline-size: 1.0625rem;
	block-size: 1.1875rem;
	border: 0;
	margin-inline-start: 0;
	background: linear-gradient(to right, currentColor 0 34%, transparent 34% 66%, currentColor 66% 100%);
}

/* Bølgerne arver skivens turkis i stedet for at stå hvide på hvidt. */
.eavis-player__disc .podcast-wavebars {
	color: #036d76;
}

/* Skiven kan kun vise ÉN ting ad gangen. Den viste to: husets krydsfade toner bølgerne ind når
   afsnittet spiller, og reglen ovenfor lavede samtidig trekanten om til to pausebjælker - så lå
   bjælkerne oven i bølgerne, og det så ud som om animationen var i stykker.

   Nu er den bølger mens den spiller, og pausebjælkerne kommer frem når man peger på knappen eller
   tabulerer hen til den: affordancen er der præcis når man skal bruge den, og resten af tiden
   viser skiven at der bliver læst op. */
.eavis-player.is-playing .eavis-player__icon {
	opacity: 0;
}

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

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

.eavis-player__body {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.eavis-player__kicker {
	margin: 0;
	font-family: var(--font-sans-serif);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #7fc6cc;
}

/* Samme greb som play/pause-teksten: begge står i markuppen, CSS vælger. */
.eavis-player__state--pause {
	display: none;
}

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

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

.eavis-player__meta {
	margin: .1875rem 0 0;
	font-family: "Lora", "Lora Fallback", serif;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #fff;
}

/* Husets tidslinje, blot uden dens egen topmargen - kortet styrer afstanden her. */
.eavis-player__timeline {
	margin-top: .75rem;
}

.eavis-player__timeline .podcast-timeline__time {
	color: rgba(255, 255, 255, .72);
	font-family: var(--font-sans-serif);
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

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

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

/* Højttaleren (husets .podcast-volume) yderst til højre, trukket ud til kortets kant. */
.eavis-player__volume {
	margin-inline-end: -.4rem;
}

/* AI-loven under kortet, på artikelfladens egen baggrund - dæmpet blæk, så den følger temaet
   (mørk, sepia, lys) i stedet for at stå hvid på lyst. Ingen p-margen fra artikelteksten:
   den står med sin egen. */
.eavis-article .eavis-player__ai {
	margin: 0 0 1.75rem;
	font-family: var(--font-sans-serif);
	font-size: .78rem;
	line-height: 1.45;
	color: rgba(var(--eavis-ink-rgb), .62);
}

@media (max-width: 575.98px) {
	.eavis-player {
		gap: .875rem;
		padding: 1rem;
	}

	.eavis-player__disc {
		inline-size: 3rem;
		block-size: 3rem;
	}
}

/* ───  E-avis: læseindstillinger og pladsen til afspilleren ────────────────────────────────────
   To ting. "Tekst" er blevet til et rigtigt lille panel man kan SE hvad man vælger i, i stedet
   for en knap der cyklede gennem tilstande i blinde. Og oplæsningen er flyttet ned i sidens egen
   afspiller - den samme bar som podcasten bruger - så den bliver ved når artiklen lukkes.
   ────────────────────────────────────────────────────────────────────────────────────────── */

/* ---- artiklen uden brødtekst, og vejen ud til sitet ---------------------------------------
   Kundemagasinerne og en enkelt Static-artikel kan have en tom brødtekst. Så siges det lige
   ud i stedet for at efterlade et tomt hul under rubrikken. */
.eavis-article__nobody {
	margin: 1.5rem 0 0;
	color: var(--eavis-dim);
	font-style: italic;
}

.eavis-article__site {
	margin: 2rem 0 0;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--eavis-line);
	font-size: 0.9375rem;
}

	/* Temaets eget blæk, og ikke sitets link-turkis: artiklen ligger på en mørk flade, hvor
	   #036d76 er næsten sort. Temaets a:not(.btn, …) slår en enkelt klasse, så der skal to til. */
	.eavis-article .eavis-article__site a {
		color: var(--eavis-ink);
		text-underline-offset: 0.15em;
	}

/* ---- Aa-panelet -------------------------------------------------------------------------------
   Det hænger fast i værktøjslinjen og stiller sig op over den i venstre side, dér hvor Aa-knappen
   selv står. Ude af strømmen, så artiklen ikke hopper hver gang panelet åbnes og lukkes - og i
   venstre side, fordi et panel midt over artiklen dækkede netop den rubrik man var ved at vælge
   skriftstørrelse til. */
.eavis-textpanel {
	position: absolute;
	inset-block-end: calc(100% + .5rem);
	inset-inline-start: .5rem;
	z-index: 1062;
	inline-size: min(21rem, calc(100% - 1.5rem));
	padding: 1rem 1.125rem 1.125rem;
	border: 1px solid var(--art-rule);
	border-radius: .75rem;
	background: var(--art-bg-2);
	color: var(--art-ink);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

.eavis-textscrim {
	position: absolute;
	inset: 0;
	z-index: 1059;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: default;
}

.eavis-textpanel__label {
	margin: 0 0 .5rem;
	font-family: var(--font-sans-serif);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--art-dim);
}

.eavis-textpanel__row {
	display: flex;
	align-items: stretch;
	gap: .5rem;
}

.eavis-textpanel__row + .eavis-textpanel__label {
	margin-block-start: 1.125rem;
}

/* Knapperne bærer selv den størrelse de vælger (style="font-size:…" i markuppen), så man kan se
   forskellen inden man trykker i stedet for bagefter. */
.eavis-sizebtn {
	flex: 1 1 0;
	min-block-size: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--art-rule);
	border-radius: .5rem;
	background: transparent;
	color: var(--art-ink);
	font-family: "Bitter", "Bitter Fallback", serif;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

/* Prøve-A'erne følger artiklens egne fire trin, så knappen viser hvad man får. */
.eavis-sizebtn:nth-child(1) { font-size: .8125rem; }
.eavis-sizebtn:nth-child(2) { font-size: 1rem; }
.eavis-sizebtn:nth-child(3) { font-size: 1.25rem; }
.eavis-sizebtn:nth-child(4) { font-size: 1.5625rem; }

.eavis-sizebtn:hover {
	background: var(--art-hover);
}

.eavis-sizebtn.is-active {
	border-color: var(--eavis-teal-lift);
	background: var(--art-hover);
	box-shadow: inset 0 0 0 1px var(--eavis-teal-lift);
}

.eavis-themebtn {
	flex: 1 1 0;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: .375rem;
	padding: .5rem .25rem;
	border: 1px solid transparent;
	border-radius: .5rem;
	background: transparent;
	color: var(--art-ink);
	font-family: var(--font-sans-serif);
	font-size: .75rem;
	cursor: pointer;
	transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

.eavis-themebtn:hover {
	background: var(--art-hover);
}

.eavis-themebtn.is-active {
	border-color: var(--eavis-teal-lift);
	background: var(--art-hover);
}

/* Prøven viser sit EGET tema, ikke det man står i - ellers kunne man ikke se hvad man valgte.
   Derfor er de tre farvepar skrevet ud her og ikke hentet fra variablerne. */
.eavis-themebtn__swatch {
	inline-size: 2.75rem;
	block-size: 2.25rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--art-rule);
	border-radius: .375rem;
	font-family: "Bitter", "Bitter Fallback", serif;
	font-size: .875rem;
	font-weight: 700;
}

.eavis-themebtn--dark .eavis-themebtn__swatch {
	background: #1a1a19;
	color: #fff;
}

.eavis-themebtn--sepia .eavis-themebtn__swatch {
	background: #f3e9d6;
	color: #3b3226;
}

.eavis-themebtn--light .eavis-themebtn__swatch {
	background: #fff;
	color: #2c2c2b;
}

/* "Aa" i værktøjslinjen: et ord, ikke et ikon, fordi det er præcis dét knappen gør. */
.eavis-aa {
	font-family: "Bitter", "Bitter Fallback", serif;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1;
}

.eavis-article__action.is-active {
	background: var(--art-hover);
	box-shadow: inset 0 0 0 1px var(--art-rule);
}

/* ---- pladsen til afspilleren ------------------------------------------------------------------
   Docken (Shared/Audio/PodcastDock.razor) er fast i bunden af vinduet. Avisen og artiklen dækker
   hele skærmen, så de skal trække sig sammen omkring den i stedet for at lægge sig ovenpå - ellers
   ville man kunne høre oplæsningen uden at kunne pause den.

   Avisen får PADDING og ikke en ny bund: i fuld skærm sætter browserens egen regel inset til 0
   med !important, og så ville en bund blive ignoreret. Artiklen er ikke selv fuldskærmselementet,
   så dér virker bunden - også mens avisen bagved er i fuld skærm. */
body.has-podcast-dock .eavis-app {
	padding-block-end: calc(70px + env(safe-area-inset-bottom));
}

body.has-podcast-dock .eavis-article {
	inset-block-end: calc(70px + env(safe-area-inset-bottom));
}

/* Baren skal ligge over begge dele, så søgelinjen langs dens overkant (der rager 6px op) ikke
   forsvinder ind under artiklen. */
body:has(.eavis-app) .podcast-dock {
	z-index: 1062;
}

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

/* Ikke logget ind: forsiden ER login-knappen (EPaperKiosk.IsAnonymous) - på hylden og på
   avissiden. Forsiden står uden slør, så man kan se, hvilken avis det er; kun en skygge forneden
   bærer knappen, så den kan læses på alle forsider. Knappen åbner sitets login-dialog
   (#modal-login). Logget ind UDEN adgang får stadig låsen ovenfor - dér hjælper login ikke. */
/* Kun bredden på hylden: på avissiden er knappen en gittercelle, og mobilreglen for
   .ep-hero-cover (højst 15rem) skal gælde for den som for linket. */
.epaper .ep-shelf button.ep-cover-login {
	width: 100%;
}

.epaper button.ep-cover-login {
	padding: 0;
	font: inherit;
	text-align: center;
	cursor: pointer;
}

	.epaper button.ep-cover-login::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 45%);
		pointer-events: none;
	}

.ep-cover-cta {
	position: absolute;
	inset-inline: 0.75rem;
	inset-block-end: 0.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.5rem 1rem;
	border-radius: 50rem;
	background: var(--ep-teal);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
	transition: background-color 0.15s ease-in-out;
}

	.epaper button.ep-cover-login:hover .ep-cover-cta,
	.epaper button.ep-cover-login:focus-visible .ep-cover-cta {
		background: #025861;
	}

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

	.epaper button.ep-hero-cover.ep-cover-login:hover {
		transform: translateY(-3px);
		box-shadow: 0 18px 38px rgba(16, 49, 47, 0.26);
	}

/* To forsider pr. række på en telefon: kortet er ~160 px bredt, og i den fulde størrelse brækkede
   "Log ind for at læse" over to linjer og dækkede halvdelen af forsiden. */
@media (max-width: 575.98px) {
	.ep-shelf .ep-cover-cta {
		inset-inline: 0.375rem;
		inset-block-end: 0.5rem;
		min-height: 2.125rem;
		padding: 0.375rem 0.5rem;
		font-size: 0.8125rem;
		white-space: nowrap;
	}
}

/* Avissidens forside er stor nok til en større knap - samme størrelse som "Læs avisen". */
.ep-hero-cover .ep-cover-cta {
	inset-inline: 1.25rem;
	inset-block-end: 1.25rem;
	min-height: 3rem;
	font-size: 1rem;
}

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

	.ep-shelf-meta h2,
	.ep-shelf-meta h3 {
		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; }
}

/* ──────────────────────────────────────────────────────────────────────────
   CAP i Danmark (/cap-i-danmark/)
   Temasidens kompakte hoved og artikellisten under det. Rammen —
   .lm-canvas > .lm-grid > <SkyScraper> > .lm-col-main — er sitets egen; her
   rettes kun de to steder, hvor den ikke passer af sig selv, og indholdet i
   hovedet stilles op, så det fylder lidt og artiklerne leder.
   ────────────────────────────────────────────────────────────────────────── */
/* <Search IsWidget="true" /> tager altid sit eget .lm-canvas > .lm-grid med. Inde i
   vores egen .lm-col-main er det lærred overflødigt — og dets polstring skubbede
   listekortet 16px længere ind end hovedet lige ovenover, så de to kort ikke flugtede.
   Ingen barn-kombinator: Search pakker sit lærred ind i #searchHeader først.
   Griddet må gerne blive: .lm-col-main:only-child spænder alligevel over alle tre spor. */
.cap-page .lm-col-main .lm-canvas {
    padding: 0;
}

.cap-intro {
    /* Kortets polstring, som .card--zone ellers ville give. Klassen selv er bevidst IKKE
       brugt: .lm-canvas .card--zone trækker sig under 576px ud i kanten med
       margin-inline: calc(var(--canvas-padding-x) * -1) — og fordi lærredet med en
       .card--search i sig har padding 0 i den bredde, havde den negative margin intet at
       sidde inde i. Kortet stak 16px ud i hver side, og hele siden fik vandret scroll. */
    --card-spacer-y: var(--spacing-lg, 1.5rem);
    --card-spacer-x: var(--spacing-lg, 1.5rem);
}

/* Under lg gør .card--search sig selv rammeløs og fylder lærredet ud. Hovedet følger med,
   så de to kort står ens på en telefon. */
@media (max-width: 991.98px) {
    .cap-intro {
        border: none;
        border-radius: 0;
    }
}

.cap-intro .cap-eu-mark {
    display: block;
    width: 100%;
    /* EU-mærkets tekst er brændt ind i billedet (2312 × 292). Over ca. 1000px
       bliver stregen så tynd, at mærket mest af alt ligner en streg — under ca.
       520px bliver den ulæselig, men dér er alt-teksten tilbage om oplysningen.
       Egen bundlinje frem for margin: kortet har allerede sin polstring. */
    max-width: 1000px;
    height: auto;
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.cap-intro .cap-title {
    /* Manuelt klemt ind mellem sitets h2 og h1: siden har ét hoved, ikke en hero. */
    font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.3rem);
    line-height: 1.15;
    margin-bottom: var(--spacing-md, 1rem);
}

.cap-intro .cap-prose {
    /* Linjelængden er hele pointen: i .lm-col-main er kolonnen ~1220px bred, og
       manchetten løb før over hele bredden. 68ch er en læsbar spalte. */
    max-width: 68ch;
}

.cap-intro .cap-prose p:last-child {
    margin-bottom: 0;
}

/* ---- Maskinportal (.mp-*): Components/MaskinPortal - liste, maskine, forhandlere, mærker og søgning ----
   Samme komponenter kan senere vises på MaskinParken: kopiér dette afsnit til dens overrides.css.
   Temaets a:not(.btn, …) har specificitet 0,1,1 og slår en enkelt klasse, så alle link-regler står med
   containerklassen foran (.mp-page a.xxx, .mp-quick a.xxx, .mp-suggest a.xxx). */

.mp-page,
.mp-quick,
.mp-suggest {
	--mp-accent: #036d76;
	--mp-accent-dark: #02555c;
	--mp-accent-soft: #e6f1f2;
	--mp-ink: #1f2a2e;
	--mp-muted: #5d6b70;
	--mp-line: #dfe5e6;
	--mp-surface: #fff;
	--mp-soft: #f5f7f7;
	--mp-radius: 0.6rem;
	--mp-danger: #b3261e;
	color: var(--mp-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.mp-page {
	margin: 0 0 2.5rem;
}

.mp-page h1,
.mp-page h2,
.mp-page h3 {
	color: var(--mp-ink);
	font-family: inherit;
}

.mp-page a.mp-button,
.mp-quick button.mp-button,
.mp-page .mp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	padding: 0.55rem 1.1rem;
	border: 2px solid var(--mp-accent);
	border-radius: 999px;
	background: var(--mp-accent);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.mp-page a.mp-button:hover,
.mp-page a.mp-button:focus-visible,
.mp-quick button.mp-button:hover {
	background: var(--mp-accent-dark);
	border-color: var(--mp-accent-dark);
	color: #fff;
	text-decoration: none;
}

.mp-page a.mp-button--outline {
	background: transparent;
	color: var(--mp-accent);
}

.mp-page a.mp-button--outline:hover {
	color: #fff;
}

.mp-error {
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--mp-danger);
	background: #fbeceb;
	color: var(--mp-danger);
}

.mp-notfound {
	padding: 2rem 0;
}

/* Brødkrummer */
.mp-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--mp-muted);
}

.mp-crumbs li + li::before {
	content: "›";
	margin-right: 0.5rem;
	color: var(--mp-muted);
}

.mp-page .mp-crumbs a {
	color: var(--mp-accent);
}

.mp-head__title {
	margin: 0 0 0.25rem;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	font-weight: 700;
}

.mp-head__lead {
	margin: 0 0 1rem;
	color: var(--mp-muted);
}

/* ---- Listen: filtre til venstre, resultater til højre (under hinanden på en telefon) ---- */
.mp-results__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

@media (min-width: 992px) {
	.mp-results__layout {
		grid-template-columns: 250px minmax(0, 1fr);
	}
}

.mp-filters__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--mp-line);
	border-radius: 999px;
	background: var(--mp-surface);
	color: var(--mp-ink);
	font-weight: 600;
}

.mp-filters__badge {
	min-width: 1.4rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--mp-accent);
	color: #fff;
	font-size: 0.8rem;
	text-align: center;
}

.mp-filters__panel {
	display: none;
	margin-top: 0.75rem;
}

.mp-filters.is-open .mp-filters__panel {
	display: block;
}

@media (min-width: 992px) {
	.mp-filters__toggle {
		display: none;
	}

	.mp-filters__panel {
		display: block;
		margin-top: 0;
	}
}

.mp-facet {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--mp-line);
}

.mp-facet__label {
	cursor: pointer;
	font-weight: 700;
	list-style-position: outside;
}

.mp-facet__unit {
	color: var(--mp-muted);
	font-weight: 400;
}

.mp-facet__options {
	max-height: 18rem;
	margin: 0.5rem 0 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.mp-page a.mp-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0;
	color: var(--mp-ink);
	text-decoration: none;
}

.mp-page a.mp-option:hover .mp-option__label {
	text-decoration: underline;
}

.mp-option__box {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	border: 2px solid #9aa6aa;
	border-radius: 0.25rem;
	background: var(--mp-surface);
}

.mp-page a.mp-option.is-selected .mp-option__box {
	border-color: var(--mp-accent);
	background: var(--mp-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

.mp-option__label {
	flex: 1 1 auto;
}

.mp-option__count {
	color: var(--mp-muted);
	font-size: 0.85rem;
}

.mp-page a.mp-facet__clear {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: 0.875rem;
}

.mp-range {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.mp-range__field {
	display: flex;
	flex: 1 1 5rem;
	flex-direction: column;
	font-size: 0.8rem;
	color: var(--mp-muted);
}

.mp-range__field input {
	width: 100%;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--mp-line);
	border-radius: 0.35rem;
	font-size: 0.95rem;
}

.mp-range__apply {
	padding: 0.45rem 0.8rem;
	border: 0;
	border-radius: 0.35rem;
	background: var(--mp-accent);
	color: #fff;
	font-weight: 600;
}

/* Underkategorier som chips over resultaterne */
.mp-subcats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.mp-page a.mp-subcat {
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--mp-line);
	border-radius: 999px;
	background: var(--mp-surface);
	color: var(--mp-ink);
	font-size: 0.9rem;
	text-decoration: none;
}

.mp-page a.mp-subcat:hover {
	border-color: var(--mp-accent);
	color: var(--mp-accent);
}

.mp-subcat__count {
	color: var(--mp-muted);
}

.mp-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.mp-toolbar__count {
	margin: 0;
	font-weight: 700;
}

.mp-toolbar__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.mp-sort select {
	padding: 0.45rem 2rem 0.45rem 0.75rem;
	border: 1px solid var(--mp-line);
	border-radius: 0.4rem;
	background-color: var(--mp-surface);
}

/* Moms-omskifteren: to links, der ligner én kontakt */
.mp-vat {
	display: inline-flex;
	overflow: hidden;
	border: 1px solid var(--mp-line);
	border-radius: 999px;
	font-size: 0.85rem;
}

.mp-page a.mp-vat__option {
	padding: 0.35rem 0.8rem;
	color: var(--mp-ink);
	text-decoration: none;
}

.mp-page a.mp-vat__option.is-active {
	background: var(--mp-accent);
	color: #fff;
}

.mp-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.mp-page a.mp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: var(--mp-accent-soft);
	color: var(--mp-accent-dark);
	font-size: 0.875rem;
	text-decoration: none;
}

.mp-page a.mp-chip:hover {
	background: #d3e6e8;
}

.mp-chip__x {
	font-size: 1.1rem;
	line-height: 1;
}

.mp-page a.mp-chips__clear {
	font-size: 0.875rem;
}

.mp-empty {
	padding: 2rem 1rem;
	border-radius: var(--mp-radius);
	background: var(--mp-soft);
	text-align: center;
}

/* ---- Kortene ---- */
.mp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: 1rem;
}

.mp-card {
	overflow: hidden;
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-radius);
	background: var(--mp-surface);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mp-card:hover {
	box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.mp-page a.mp-card__link,
.mp-quick a.mp-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.mp-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--mp-soft);
}

.mp-card__media .mp-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mp-card__count {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	padding: 0.1rem 0.45rem;
	border-radius: 0.3rem;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 0.75rem;
}

.mp-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.75rem 0.85rem 0.85rem;
}

.mp-card__kicker {
	color: var(--mp-muted);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mp-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.mp-card__facts {
	margin: 0;
	color: var(--mp-muted);
	font-size: 0.85rem;
}

.mp-card__meta {
	margin: auto 0 0;
	padding-top: 0.4rem;
	font-size: 0.8rem;
	color: var(--mp-muted);
}

.mp-card__meta div {
	display: flex;
	gap: 0.3rem;
}

.mp-card__meta dd {
	margin: 0;
}

.mp-card__productnumber dt {
	font-weight: 600;
}

/* ---- Pris ---- */
.mp-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.4rem;
}

.mp-price__headline {
	color: var(--mp-accent-dark);
	font-size: 1.1rem;
	font-weight: 800;
}

.mp-price--request .mp-price__headline {
	color: var(--mp-ink);
	font-size: 1rem;
}

.mp-price__qualifier,
.mp-price__secondary {
	color: var(--mp-muted);
	font-size: 0.8rem;
}

.mp-price__secondary {
	flex-basis: 100%;
}

/* ---- Billeder ---- */
.mp-img {
	display: block;
	max-width: 100%;
	height: auto;
}

.mp-img--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 8rem;
	background: var(--mp-soft);
	color: #a4b0b3;
}

.mp-img--empty svg {
	width: 3rem;
	height: 3rem;
}

/* ---- Sider ---- */
.mp-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.75rem;
}

.mp-pager__pages {
	display: flex;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mp-page a.mp-pager__page,
.mp-pager__page,
.mp-page a.mp-pager__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.6rem;
	border: 1px solid var(--mp-line);
	border-radius: 0.4rem;
	color: var(--mp-ink);
	text-decoration: none;
}

.mp-pager__page.is-current {
	border-color: var(--mp-accent);
	background: var(--mp-accent);
	color: #fff;
	font-weight: 700;
}

.mp-pager__gap {
	align-self: center;
	color: var(--mp-muted);
}

/* ---- Én maskine ---- */
.mp-machine__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

@media (min-width: 992px) {
	.mp-machine__layout {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}

.mp-gallery__stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--mp-radius);
	background: var(--mp-soft);
}

.mp-gallery__stage .mp-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.mp-machine.is-withdrawn .mp-gallery__stage .mp-img {
	filter: grayscale(0.6);
	opacity: 0.8;
}

.mp-gallery__thumbs {
	display: flex;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	padding: 0 0 0.25rem;
	overflow-x: auto;
	list-style: none;
}

.mp-gallery__thumb {
	flex: 0 0 auto;
	width: 5.5rem;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 0.35rem;
	background: none;
}

.mp-gallery__thumb.is-active {
	border-color: var(--mp-accent);
}

.mp-gallery__thumb .mp-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mp-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mp-badge--withdrawn {
	background: var(--mp-danger);
	color: #fff;
}

.mp-machine__kicker {
	color: var(--mp-muted);
	font-size: 0.8rem;
	text-transform: uppercase;
}

.mp-machine__title {
	margin: 0.2rem 0 0.4rem;
	font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
	font-weight: 800;
	line-height: 1.2;
}

.mp-machine__productnumber {
	margin: 0 0 0.75rem;
	color: var(--mp-muted);
}

.mp-machine__productnumber span {
	font-weight: 700;
	color: var(--mp-ink);
}

.mp-machine__withdrawn {
	padding: 0.75rem 1rem;
	border-radius: var(--mp-radius);
	background: #fbeceb;
	color: var(--mp-danger);
	font-weight: 600;
}

.mp-machine__price .mp-price__headline {
	font-size: 1.75rem;
}

.mp-machine .mp-vat {
	margin: 0.5rem 0 1rem;
}

.mp-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1rem;
	margin: 0 0 1.25rem;
}

.mp-facts dt {
	color: var(--mp-muted);
	font-size: 0.8rem;
	font-weight: 400;
}

.mp-facts dd {
	margin: 0;
	font-weight: 600;
}

.mp-contact {
	padding: 1rem;
	border-radius: var(--mp-radius);
	background: var(--mp-soft);
}

.mp-contact__title {
	margin: 0 0 0.25rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--mp-muted);
	text-transform: uppercase;
}

.mp-contact__dealer {
	margin: 0 0 0.25rem;
	font-size: 1.1rem;
	font-weight: 700;
}

.mp-contact__address,
.mp-contact__person {
	margin: 0 0 0.5rem;
	color: var(--mp-muted);
	font-size: 0.9rem;
}

.mp-contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.mp-specs,
.mp-description,
.mp-similar,
.mp-people {
	margin-top: 2rem;
}

.mp-specs h2,
.mp-description h2,
.mp-similar h2,
.mp-people h2 {
	margin-bottom: 0.75rem;
	font-size: 1.3rem;
	font-weight: 800;
}

.mp-specs__highlights {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: 0.75rem;
	margin: 0 0 1.25rem;
}

.mp-specs__highlights div {
	padding: 0.75rem;
	border-radius: var(--mp-radius);
	background: var(--mp-accent-soft);
}

.mp-specs__highlights dt {
	color: var(--mp-muted);
	font-size: 0.8rem;
	font-weight: 400;
}

.mp-specs__highlights dd {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
}

.mp-specs__groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: 1rem 2rem;
}

.mp-specs__group h3 {
	margin: 0 0 0.4rem;
	font-size: 1rem;
	font-weight: 700;
}

.mp-specs__group dl {
	margin: 0;
}

.mp-specs__group div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--mp-line);
	font-size: 0.9rem;
}

.mp-specs__group dt {
	color: var(--mp-muted);
	font-weight: 400;
}

.mp-specs__group dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.mp-description p {
	max-width: 70ch;
	line-height: 1.6;
}

/* ---- Forhandlere og mærker ---- */
.mp-regions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
}

.mp-page a.mp-region {
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--mp-line);
	border-radius: 999px;
	color: var(--mp-ink);
	font-size: 0.9rem;
	text-decoration: none;
}

.mp-page a.mp-region.is-active {
	border-color: var(--mp-accent);
	background: var(--mp-accent);
	color: #fff;
}

.mp-region__count {
	opacity: 0.7;
}

.mp-directory {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 0.75rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.mp-page a.mp-directory__link {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	grid-template-areas: "logo name" "logo meta" "logo count";
	column-gap: 0.75rem;
	align-items: center;
	height: 100%;
	padding: 0.75rem;
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-radius);
	background: var(--mp-surface);
	color: var(--mp-ink);
	text-decoration: none;
}

.mp-page a.mp-directory__link:hover {
	border-color: var(--mp-accent);
}

.mp-directory__logo {
	grid-area: logo;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	overflow: hidden;
	border-radius: 0.4rem;
	background: var(--mp-soft);
}

.mp-directory__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.mp-directory__initial {
	color: var(--mp-accent);
	font-size: 1.4rem;
	font-weight: 800;
}

.mp-directory__name {
	grid-area: name;
	font-weight: 700;
}

.mp-directory__meta {
	grid-area: meta;
	color: var(--mp-muted);
	font-size: 0.85rem;
}

.mp-directory__count {
	grid-area: count;
	color: var(--mp-accent-dark);
	font-size: 0.85rem;
	font-weight: 600;
}

.mp-letters {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	padding: 0.5rem 0;
	background: var(--mp-surface);
}

.mp-page .mp-letters a {
	min-width: 1.9rem;
	padding: 0.2rem 0.4rem;
	border-radius: 0.3rem;
	font-weight: 700;
	text-align: center;
}

.mp-letter {
	margin-top: 1.5rem;
	scroll-margin-top: 4rem;
}

.mp-letter__title {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 800;
}

.mp-profile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-bottom: 1.25rem;
}

.mp-profile__logo {
	max-width: 10rem;
	max-height: 5rem;
	object-fit: contain;
}

.mp-profile__title {
	margin: 0 0 0.25rem;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
	font-weight: 800;
}

.mp-profile__address {
	margin: 0;
	color: var(--mp-muted);
}

.mp-profile__description {
	max-width: 75ch;
	margin-bottom: 1.5rem;
	line-height: 1.6;
}

.mp-people ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mp-person {
	display: flex;
	flex-direction: column;
	padding: 0.75rem;
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-radius);
	font-size: 0.9rem;
}

.mp-person__name {
	font-weight: 700;
}

/* ---- Forsidens søgeboks ---- */
.mp-quick {
	margin: 0 0 2rem;
	overflow: hidden;
	border-radius: var(--mp-radius);
	background: var(--mp-accent);
	box-shadow: 0 0.5rem 1.5rem rgba(3, 109, 118, 0.18);
}

.mp-quick__tabs {
	display: flex;
	overflow-x: auto;
}

.mp-quick__tab {
	display: inline-flex;
	flex: 1 0 auto;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8rem 1rem;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 700;
	white-space: nowrap;
}

.mp-quick__tab.is-active {
	background: var(--mp-surface);
	color: var(--mp-accent-dark);
}

.mp-quick__icon svg {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
}

.mp-quick__form {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1rem;
	background: var(--mp-surface);
}

.mp-quick__text input {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--mp-line);
	border-radius: 0.45rem;
	font-size: 1rem;
}

.mp-segment {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.mp-segment__option {
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--mp-line);
	border-radius: 999px;
	background: var(--mp-surface);
	color: var(--mp-ink);
	font-size: 0.9rem;
}

.mp-segment__option.is-active {
	border-color: var(--mp-accent);
	background: var(--mp-accent);
	color: #fff;
}

.mp-segment__count {
	opacity: 0.7;
}

.mp-quick__fields {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
	gap: 0.75rem;
}

.mp-field {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.mp-field__label {
	color: var(--mp-muted);
	font-size: 0.8rem;
	font-weight: 600;
}

.mp-field select {
	width: 100%;
	padding: 0.55rem 0.6rem;
	border: 1px solid var(--mp-line);
	border-radius: 0.45rem;
	background-color: var(--mp-surface);
}

.mp-quick__submit {
	align-self: flex-end;
	min-width: 14rem;
}

/* ---- Søgefelt med forslag ---- */
.mp-suggest {
	position: relative;
	margin: 0 0 1.5rem;
}

.mp-suggest__field {
	display: flex;
	overflow: hidden;
	border: 2px solid var(--mp-accent);
	border-radius: 999px;
	background: var(--mp-surface);
}

.mp-suggest__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7rem 1.1rem;
	border: 0;
	font-size: 1rem;
	outline: none;
}

.mp-suggest__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	border: 0;
	background: var(--mp-accent);
	color: #fff;
}

.mp-suggest__submit svg {
	width: 1.3rem;
	height: 1.3rem;
}

.mp-suggest__panel {
	position: absolute;
	top: calc(100% + 0.35rem);
	right: 0;
	left: 0;
	z-index: 20;
	max-height: 26rem;
	overflow-y: auto;
	padding: 0.5rem 0;
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-radius);
	background: var(--mp-surface);
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
}

.mp-suggest__panel[hidden] {
	display: none;
}

.mp-suggest__heading {
	margin: 0.4rem 1rem 0.2rem;
	color: var(--mp-muted);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
}

.mp-suggest__group ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mp-suggest a.mp-suggest__item {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.45rem 1rem;
	color: var(--mp-ink);
	text-decoration: none;
}

.mp-suggest a.mp-suggest__item:hover,
.mp-suggest a.mp-suggest__item:focus-visible {
	background: var(--mp-accent-soft);
}

.mp-suggest__meta {
	color: var(--mp-muted);
	font-size: 0.85rem;
	white-space: nowrap;
}

.mp-suggest__all {
	width: 100%;
	margin-top: 0.25rem;
	padding: 0.6rem 1rem;
	border: 0;
	border-top: 1px solid var(--mp-line);
	background: none;
	color: var(--mp-accent);
	font-weight: 700;
	text-align: left;
}

/* ─── Breaking / tophistorie på artikelsiden (DocumentView.razor) ─────────────
   Samme styling som giver forsidens gule teaser (TeaserCss på placeringen, inden
   for sin levetid — TeaserStyleResolver), så læseren genkender artiklen. Etiketten
   står forrest i metalinjen før sektionen.

   Breaking og tophistorie deler den gule farve (--breaking og --topstory er samme
   gul), så de skilles på styrke: breaking er sort på fuld gul med en pulserende
   prik (ca. 19:1), tophistorien en afdæmpet lysegul etiket.

   Temaets .article-meta > *:not(:last-of-type) tegner en lodret streg efter hvert
   punkt; efter en etiket er den støj, så den fjernes (0,2,1 slår temaets 0,2,0). */
.article-meta > li:has(> .article-flag) {
	border-right: 0;
}

.article-flag {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem .55rem;
	border-radius: var(--border-radius-sm);
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1;
}

.article-flag--breaking {
	background-color: var(--breaking);
	color: #101010;
}

/* Tophistorien er den rolige af de to: en lys, varm gul flade med mørk tekst og en
   tynd okkergul kant til venstre — samme gule familie som forsidens teaser, men den
   råber ikke. Breaking er stadig den eneste med fuld gul. Kanten er okker og ikke
   --topstory, for ren gul på lysegul kan ikke ses. Mørk tekst på #fff6c2 er ca. 18:1. */
.article-flag--topstory {
	background-color: var(--topstory-soft);
	color: #2b2b2b;
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--topstory-edge);
}

.article-flag-dot {
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background-color: #101010;
}

@media (prefers-reduced-motion: no-preference) {
	.article-flag-dot {
		animation: article-flag-pulse 1.6s ease-in-out infinite;
	}
}

@keyframes article-flag-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .25; }
}

/* ─── E-avis: helsidesannoncer (interstitials) ─────────────────────────────────
   En annonce lægges ind mellem to opslag, mens man bladrer fremad (EPaperReader +
   EPaperInterstitialPlanner). Den tegnes INDE i .ep-stage i samme geometri som et
   opslag, så epaper-reader.js passer den ind, zoomer og swiper uden at vide, at
   det er en annonce. Billedet holder sine egne proportioner (contain) og står på
   læserens baggrund, ikke på hvidt papir: det er tydeligt, at det ikke er avisen.

   Mærkningen "Annonce" og "Fortsæt læsning" ligger i .ep-adbar UDEN for scenen,
   så de hverken skaleres med billedet eller kan zoomes væk. Samme mørke petrol
   som zoomknapperne, som bjælken afløser, mens annoncen står fremme. */
.ep-ad {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ep-ad .ep-ad__link,
.ep-ad .ep-ad-picture {
	display: block;
	width: 100%;
	height: 100%;
}

.ep-ad__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Annoncen i nabo-rammen, mens den er på vej - som en side i .ep-pair. */
.ep-pair .ep-ad-picture {
	display: contents;
}

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

.ep-adbar {
	position: absolute;
	top: 1rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .35rem .4rem .35rem .9rem;
	border-radius: 999px;
	background: rgba(16, 49, 47, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #f4f1ea;
	font-family: var(--font-sans-serif);
	font-size: .8125rem;
	white-space: nowrap;
	cursor: default;
	z-index: 2;
}

.ep-adbar__label {
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* To klasser + elementet: temaets button-regler må ikke tage farven. */
.ep-adbar button.ep-adbar__next {
	border: 0;
	border-radius: 999px;
	padding: .3rem .8rem;
	background: #f4f1ea;
	color: #10312f;
	font-weight: 700;
	line-height: 1.2;
}

	.ep-adbar button.ep-adbar__next:hover,
	.ep-adbar button.ep-adbar__next:focus-visible {
		background: #fff;
	}