/* ==========================================================================
   Bilberegner — designlag
   Indlæses EFTER style.css og udvider den frem for at erstatte den.

   Indhold:
     1. Designtokens
     2. Typografi og systemfont
     3. Tilgængelighed (fokus, skip-link, reduceret bevægelse)
     4. Navigationsrettelser (touch-enheder over 768px)
     5. Komponenter (brødkrummer, byline, ansvarsfraskrivelse, kort)
     6. Annoncepladser
     7. Beregnerresultater og datavisning
     8. Formularer
     9. 3D-lag på forsiden
   ========================================================================== */

/* ==================================================
   1. DESIGNTOKENS
================================================== */
:root {
    /* Flader — mørkt automotive/fintech-udtryk */
    --bb-bg:            #0b1220;
    --bb-surface:       #111c31;
    --bb-surface-2:     #16233c;
    --bb-surface-3:     #1c2b48;
    --bb-border:        rgba(148, 163, 184, 0.16);
    --bb-border-strong: rgba(148, 163, 184, 0.30);

    /* Tekst */
    --bb-text:          #f1f5f9;
    --bb-text-muted:    #b6c2d4;   /* 7.2:1 mod --bb-bg */
    --bb-text-subtle:   #93a3b8;   /* 4.9:1 mod --bb-bg */

    /* Accenter */
    --bb-accent:        #3b82f6;
    --bb-accent-hover:  #60a5fa;
    --bb-accent-soft:   rgba(59, 130, 246, 0.12);
    --bb-success:       #34d399;
    --bb-warning:       #fbbf24;
    --bb-danger:        #f87171;

    /* Dybde — lagdelte skygger frem for én flad */
    --bb-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.40);
    --bb-shadow-md: 0 4px 6px -1px rgba(2, 6, 23, 0.50),
                    0 2px 4px -2px rgba(2, 6, 23, 0.40);
    --bb-shadow-lg: 0 12px 24px -6px rgba(2, 6, 23, 0.55),
                    0 4px 8px -4px rgba(2, 6, 23, 0.45);
    --bb-shadow-glow: 0 0 0 1px rgba(59, 130, 246, 0.28),
                      0 8px 28px -8px rgba(59, 130, 246, 0.32);

    /* Radius */
    --bb-radius-sm: 8px;
    --bb-radius:    14px;
    --bb-radius-lg: 20px;

    /* Spacing */
    --bb-space-1: 4px;
    --bb-space-2: 8px;
    --bb-space-3: 12px;
    --bb-space-4: 16px;
    --bb-space-5: 24px;
    --bb-space-6: 32px;
    --bb-space-7: 48px;
    --bb-space-8: 64px;

    /* Bevægelse */
    --bb-ease:       cubic-bezier(0.22, 1, 0.36, 1);
    --bb-duration:   200ms;
}

/* ==================================================
   2. TYPOGRAFI
   Systemfont-stak: ingen webfont at hente, ingen FOUT,
   nul bytes over ledningen. Erstatter Arial-reset i style.css.
================================================== */
body,
button,
input,
select,
textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", "Inter", system-ui, sans-serif;
}

body {
    background: var(--bb-bg);
    color: var(--bb-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);  font-weight: 700; }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); font-weight: 650; }

p, li {
    line-height: 1.7;
    color: var(--bb-text-muted);
}

.lead {
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    color: var(--bb-text-muted);
    max-width: 62ch;
    text-wrap: pretty;
}

.article-content p,
.article-content li {
    max-width: 70ch;
}

/* ==================================================
   3. TILGÆNGELIGHED
================================================== */

/* Skip-link. Tastaturbrugere skulle tidligere gennem ~30 navigationslinks. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: var(--bb-space-3) var(--bb-space-5);
    background: var(--bb-accent);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 var(--bb-radius-sm) 0;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/*
   Genopret fokusmarkering. style.css satte `outline: none !important`
   fire steder uden erstatning, hvilket gjorde tastaturnavigation usynlig.
   :focus-visible rammer kun tastatur, ikke museklik.
*/
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-drop-btn:focus-visible,
.burger:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--bb-accent-hover) !important;
    outline-offset: 3px;
    border-radius: var(--bb-radius-sm);
}

/* Respekter brugerens ønske om mindre bevægelse. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html { scroll-behavior: auto; }

    /* 3D-laget slås helt fra. */
    .hero-3d { display: none !important; }
    .depth-card { transform: none !important; }
}

/* Skjult, men tilgængeligt for skærmlæsere. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==================================================
   4. NAVIGATION — touch-rettelse
   .nav-dropdown.active-reglen lå kun i @media (max-width: 768px),
   så dropdowns ikke kunne åbnes på iPad, Surface og touch-laptops.
================================================== */
.nav-dropdown.active .nav-dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* På enheder uden hover er :hover upålidelig — brug kun klik. */
@media (hover: none) {
    .nav-dropdown:hover .nav-dropdown-menu {
        display: none;
    }
    .nav-dropdown.active .nav-dropdown-menu {
        display: block;
    }
}

.nav-drop-btn[aria-expanded="true"] span {
    transform: rotate(180deg);
}

.nav-drop-btn span {
    display: inline-block;
    transition: transform var(--bb-duration) var(--bb-ease);
}

/* ==================================================
   5. KOMPONENTER
================================================== */

/* --- Brødkrummer --- */
.breadcrumbs {
    margin-bottom: var(--bb-space-4);
    font-size: 0.875rem;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bb-space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    gap: var(--bb-space-2);
    color: var(--bb-text-subtle);
    margin: 0;
    line-height: 1.4;
}

.breadcrumbs li + li::before {
    content: "/";
    color: var(--bb-text-subtle);
    opacity: 0.6;
}

.breadcrumbs a {
    color: var(--bb-text-subtle);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--bb-accent-hover);
    text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
    color: var(--bb-text);
    font-weight: 600;
}

/* --- Byline --- */
.article-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bb-space-2) var(--bb-space-5);
    margin-top: var(--bb-space-5);
    padding-top: var(--bb-space-4);
    border-top: 1px solid var(--bb-border);
    font-size: 0.9rem;
    color: var(--bb-text-subtle);
}

.article-byline__author strong {
    color: var(--bb-text-muted);
    font-weight: 600;
}

.article-byline__date {
    position: relative;
}

/* --- Ansvarsfraskrivelse --- */
.disclaimer {
    display: flex;
    gap: var(--bb-space-4);
    align-items: flex-start;
    margin: var(--bb-space-6) 0;
    padding: var(--bb-space-5);
    background: linear-gradient(135deg,
                rgba(251, 191, 36, 0.08),
                rgba(251, 191, 36, 0.03));
    border: 1px solid rgba(251, 191, 36, 0.28);
    border-left: 4px solid var(--bb-warning);
    border-radius: var(--bb-radius);
}

.disclaimer__icon {
    flex: 0 0 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bb-warning);
    color: #422006;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
}

.disclaimer p {
    margin: 0;
    font-size: 0.94rem;
    color: var(--bb-text-muted);
}

.disclaimer strong { color: var(--bb-text); }

/* --- Beskedbokse --- */
.notice-box {
    margin: var(--bb-space-5) 0;
    padding: var(--bb-space-5);
    background: var(--bb-surface-2);
    border: 1px solid var(--bb-border);
    border-left: 4px solid var(--bb-accent);
    border-radius: var(--bb-radius);
    color: var(--bb-text-muted);
}

.notice-box--success {
    border-left-color: var(--bb-success);
    background: rgba(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 0.28);
}

.notice-box strong { color: var(--bb-text); }

/* --- Kort med dybde --- */
.tool-grid,
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--bb-space-4);
    margin: var(--bb-space-5) 0 var(--bb-space-6);
}

.tool-card,
.contact-card {
    position: relative;
    padding: var(--bb-space-5);
    background: linear-gradient(160deg, var(--bb-surface-2), var(--bb-surface));
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow-md);
    text-decoration: none;
    transition: transform var(--bb-duration) var(--bb-ease),
                box-shadow var(--bb-duration) var(--bb-ease),
                border-color var(--bb-duration) var(--bb-ease);
}

.tool-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.14), transparent 55%);
    -webkit-mask: linear-gradient(#000 0 0) content-box,
                  linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bb-shadow-lg), var(--bb-shadow-glow);
    border-color: var(--bb-border-strong);
}

.tool-card h3,
.contact-card h3 {
    color: var(--bb-text);
    margin-bottom: var(--bb-space-2);
}

.tool-card p,
.contact-card p {
    margin: 0;
    color: var(--bb-text-muted);
    font-size: 0.94rem;
}

.contact-card__note {
    margin-top: var(--bb-space-3) !important;
    font-size: 0.86rem !important;
    color: var(--bb-text-subtle) !important;
}

.contact-card a {
    color: var(--bb-accent-hover);
    font-weight: 600;
}

.principles-list li {
    margin-bottom: var(--bb-space-3);
}

.principles-list strong { color: var(--bb-text); }

.see-also {
    margin-top: var(--bb-space-6);
    padding-top: var(--bb-space-4);
    border-top: 1px solid var(--bb-border);
    font-size: 0.92rem;
    color: var(--bb-text-subtle);
}

/* --- Footer-tilføjelser --- */
.footer-link-btn {
    display: block;
    background: none;
    border: none;
    padding: 0;
    margin-top: var(--bb-space-2);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-link-btn:hover { color: var(--bb-accent-hover); }

.footer-disclaimer {
    font-size: 0.84rem;
    color: var(--bb-text-subtle);
    max-width: 80ch;
}

.footer-disclaimer strong { color: var(--bb-text-muted); }

/* ==================================================
   6. ANNONCEZONER
   Politik: reserveret hoejde (ingen CLS), tydeligt "Annonce"-maerkat,
   klart adskilt fra indhold og knapper, ingen animation paa selve
   annoncen, og kollaps hvis Google ikke leverer en annonce.
================================================== */
.ad-zone {
    --ad-min: 280px;
    --ad-min-mob: 250px;

    display: block;
    position: relative;
    width: 100%;
    /*
       Inline-annoncer centreres i hovedkolonnen og bliver aldrig
       bredere end et klassisk leaderboard. Uden loftet ville boksen
       straekke sig over hele indholdsbredden og fremstaa som et
       banner paa tvaers af designet.
    */
    max-width: var(--ad-inline-max-width);
    margin: var(--ad-section-spacing) auto;
    padding: var(--bb-space-3);
    clear: both;

    /* Let glasflade, saa zonen laeses som en ramme om noget eksternt
       — ikke som en del af vores eget indhold. */
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.035),
                rgba(255, 255, 255, 0.012));
    border: 1px solid var(--bb-border);
    border-radius: var(--ad-border-radius);
    box-shadow: var(--bb-shadow-sm);
    overflow: hidden;

    /* Reserveret hoejde forhindrer layout shift, naar annoncen loades. */
    min-height: calc(var(--ad-min) + 26px);
}

/*
   Sidebaren er en kompakt 300x250-boks. Den maa hverken straekke sig
   efter hovedkolonnens hoejde eller arve inline-bredden.
*/
.ad-zone--sidebar {
    max-width: var(--ad-sidebar-width);
    width: var(--ad-sidebar-width);
    min-height: calc(var(--ad-sidebar-height) + 26px);
    margin: 0;
    align-self: start;
}

.ad-zone--sidebar .ad-zone__inner { min-height: var(--ad-sidebar-height); }

@supports (backdrop-filter: blur(6px)) {
    .ad-zone { backdrop-filter: blur(6px); }
}

.ad-zone__label {
    display: block;
    margin-bottom: var(--bb-space-2);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bb-text-subtle);
    text-align: center;
    /* Maa ikke kunne forveksles med en overskrift i indholdet. */
    font-weight: 500;
}

.ad-zone__inner {
    min-height: var(--ad-min);
}

/*
   Kollaps ved uudfyldt annonce.
   Google saetter data-ad-status="unfilled", naar der ikke er en annonce
   at vise. Uden dette ville den reserverede hoejde efterlade et stort
   tomt hul midt i indholdet.
*/
.ad-zone:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
    display: none;
}

/* Fallback for browsere uden :has() — sat af script.js. */
.ad-zone.is-unfilled { display: none; }

/* Zoner der kun giver mening paa desktop. */
@media (max-width: 767px) {
    .ad-zone--desktop { display: none !important; }
    .ad-zone {
        max-width: 100%;
        margin: var(--bb-space-6) auto;
        min-height: calc(var(--ad-min-mob) + 26px);
    }
    .ad-zone__inner { min-height: var(--ad-min-mob); }
}

/* ==================================================
   6b. SIDEBAR-GRID (den ene desktop-sidebar)

   HVAD DER VAR GALT FOER
   Foerste forsoeg gav ALLE .container-elementer et hoejre-padding og
   placerede railen absolut i den frigjorte plads. Resultatet var, at
   hver eneste sektion — ogsaa dem uden sidebar — blev skubbet mod
   venstre, saa hele siden stod ude af balance. Railen hang i et fast
   pixel-offset pr. sidetype, gaettet ud fra heroens hoejde, og startede
   derfor i forskellig hoejde uden relation til indholdet ved siden af.

   LOESNINGEN
   Et rigtigt grid, lokalt i den ENE sektion hvor sidebaren hoerer
   hjemme. Alle andre sektioner er uroerte og beholder deres normale,
   centrerede bredde. Grid'et ligger inde i sektionens .container, saa
   full-bleed baggrunde stadig spaender hele siden.

   Ingen global padding. Ingen absolut positionering. Ingen faste
   hero-offsets — railen flugter automatisk med toppen af indholdet ved
   siden af, fordi de er soeskende i samme grid.
================================================== */

:root {
    /* Faelles maal for alle annonceplaceringer. Aendres ét sted. */
    --ad-sidebar-width:     300px;
    --ad-sidebar-height:    250px;   /* kompakt, som en rigtig 300x250 */
    --ad-inline-max-width:  728px;   /* klassisk leaderboard-bredde */
    --ad-inline-height:     120px;   /* realistisk, ikke en tom blok */
    --ad-inline-height-mob:  100px;
    --ad-layout-gap:         28px;
    --ad-section-spacing:    48px;
    --ad-border-radius:      14px;

    /*
       Containerbredde NAAR der er en sidebar. 1180 - 40 padding
       = 1140 indhold; minus 300 rail og 28 gap giver 812 px
       hovedkolonne — bred nok til baade artikeltekst og beregnere.
    */
    --ad-layout-max: 1180px;
}

/*
   MODEL D — indholdet staar ALTID centreret.

   Den tidligere loesning udvidede stoettesektionens container fra 820
   til 1180 px via .container:has(> .bb-layout--has-rail) og lagde
   indholdet i en to-kolonne-grid fra 1280 px. Hovedkolonnen blev
   dermed 812 px og stod 164 px til venstre for hero, formular og
   resultat. Den mekanisme er FJERNET.

   I stedet:

     under 1650 px  Stoetteindholdet er én centreret kolonne i sin
                    normale containerbredde. Ingen sidebar, ingen
                    gridkolonne, ingen ekstra bredde, ingen
                    forskydning. Annoncen, der ellers ville staa i
                    sidebaren, leveres i stedet som en inline-zone
                    inde i hovedkolonnen.

     fra 1650 px    Der er foerst her plads til 950 + 28 + 300 = 1278 px
                    plus luft. Stoettesektionen — og KUN den — udvides,
                    og gruppen centreres samlet. Hovedkolonnen bliver
                    ved med at vaere 950 px, altsaa samme bredde som
                    beregnerkortet ovenfor.

   Bredden styres af en eksplicit klasse paa containeren
   (.bb-support-shell), ikke af :has(). Ingen normal container aendrer
   bredde, fordi en anden sektion har en annonce.
*/

:root {
    --bb-content-max:      950px;
    --bb-ad-sidebar-width: 300px;
    --bb-ad-grid-gap:       28px;
    /* 950 + 28 + 300 = 1278, plus containerens 2x20 px padding. */
    --bb-support-max:     1318px;
}

/*
   Kandidaterne er gensidigt udelukkende. Under breakpointet findes
   railen slet ikke — hverken som kolonne eller reserveret bredde.
*/
.bb-layout__rail { display: none; }
.bb-layout__sub  { display: block; }

@media (min-width: 1650px) {
    .bb-support-shell { max-width: var(--bb-support-max); }

    .bb-layout--has-rail {
        display: grid;
        /* Faste spor: hovedkolonnen krymper aldrig for at give plads. */
        grid-template-columns: var(--bb-content-max) var(--bb-ad-sidebar-width);
        gap: var(--bb-ad-grid-gap);
        /* Hele gruppen centreres samlet i den brede container. */
        justify-content: center;
        align-items: start;
    }

    .bb-layout--has-rail > .bb-layout__rail {
        display: block;
        width: var(--bb-ad-sidebar-width);
        align-self: start;
    }

    /* Erstatningen forsvinder helt, naar sidebaren er aktiv. */
    .bb-layout--has-rail > .bb-layout__main > .bb-layout__sub { display: none; }
}

/*
   Uden sidebar er wrapperen helt gennemsigtig for layoutet:
   hovedindholdet beholder sin normale bredde og faar ingen
   kunstig padding.
*/
.bb-layout__main { min-width: 0; }

/* --- Staging-placeholder. Maa aldrig ligne en rigtig annonce. --- */
.ad-zone--placeholder {
    display: grid;
    place-content: center;
    gap: var(--bb-space-2);
    text-align: center;

    /* Moerk premiumflade — rolig, tydeligt "ikke indhold". */
    background: linear-gradient(160deg, #11161f, #0b0f16);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: var(--bb-radius);
    box-shadow: none;

    /*
       Ingen animation og ingen hovereffekt. En placeholder, der lyste
       op ved hover, ville ligne et klikbart Bilberegner-element — og
       QA'en skal kunne se placeringen, ikke afproeve en funktion.
    */
    transition: none;
}

.ad-zone--placeholder:hover {
    background: linear-gradient(160deg, #11161f, #0b0f16);
    border-color: rgba(148, 163, 184, 0.22);
    transform: none;
    cursor: default;
}

.ad-zone--placeholder .ad-zone__label {
    margin-bottom: 0;
    color: #cbd5e1;
    letter-spacing: 0.18em;
}

/* Diskret zonenavn — kun til visuel QA. */
.ad-zone__name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.62);
}

/*
   Selve annonceindholdet maa aldrig faa CSS, der aendrer eller skjuler
   det — det er i strid med AdSense-politikken. Vi styrer kun containeren.
*/
.ad-zone ins.adsbygoogle {
    display: block;
    margin: 0 auto;
}

/* ==================================================
   7. BEREGNERRESULTATER
================================================== */

/* Nøgletal-tiles */
.result-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: var(--bb-space-4);
    margin: var(--bb-space-5) 0;
}

.result-tile {
    padding: var(--bb-space-5);
    background: linear-gradient(160deg, var(--bb-surface-3), var(--bb-surface-2));
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow-md);
}

.result-tile--primary {
    border-color: rgba(59, 130, 246, 0.42);
    box-shadow: var(--bb-shadow-md), var(--bb-shadow-glow);
}

.result-tile__label {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bb-text-subtle);
    margin-bottom: var(--bb-space-2);
}

.result-tile__value {
    display: block;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
    font-weight: 800;
    color: var(--bb-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.result-tile__sub {
    display: block;
    margin-top: var(--bb-space-1);
    font-size: 0.84rem;
    color: var(--bb-text-subtle);
}

/*
   Udgiftsfordeling som stablet bar. Ren CSS — intet chartbibliotek,
   ingen ekstra bytes JavaScript.
*/
.cost-bar {
    display: flex;
    width: 100%;
    height: 34px;
    margin: var(--bb-space-4) 0 var(--bb-space-3);
    border-radius: var(--bb-radius-sm);
    overflow: hidden;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
}

.cost-bar__segment {
    height: 100%;
    transition: width 600ms var(--bb-ease);
    min-width: 0;
}

.cost-bar__segment--fixed    { background: linear-gradient(180deg, #3b82f6, #2563eb); }
.cost-bar__segment--running  { background: linear-gradient(180deg, #34d399, #10b981); }
.cost-bar__segment--depreciation { background: linear-gradient(180deg, #fbbf24, #f59e0b); }

.cost-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-space-2) var(--bb-space-5);
    font-size: 0.86rem;
    color: var(--bb-text-muted);
    list-style: none;
    padding: 0;
}

.cost-legend li {
    display: flex;
    align-items: center;
    gap: var(--bb-space-2);
    margin: 0;
}

.cost-legend__swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Vandrette sammenligningsbarer */
.compare-bars { margin: var(--bb-space-5) 0; }

.compare-bar {
    margin-bottom: var(--bb-space-4);
}

.compare-bar__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--bb-space-3);
    margin-bottom: var(--bb-space-2);
    font-size: 0.92rem;
}

.compare-bar__name  { color: var(--bb-text-muted); font-weight: 600; }
.compare-bar__value { color: var(--bb-text); font-variant-numeric: tabular-nums; font-weight: 700; }

.compare-bar__track {
    height: 12px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 99px;
    overflow: hidden;
}

.compare-bar__fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    transition: width 600ms var(--bb-ease);
}

.compare-bar--best .compare-bar__fill {
    background: linear-gradient(90deg, #10b981, #34d399);
}

/* Sådan er det regnet ud */
.calc-explain {
    margin: var(--bb-space-5) 0;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    background: var(--bb-surface);
    overflow: hidden;
}

.calc-explain > summary {
    padding: var(--bb-space-4) var(--bb-space-5);
    cursor: pointer;
    font-weight: 600;
    color: var(--bb-text);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--bb-space-3);
}

.calc-explain > summary::after {
    content: "▾";
    color: var(--bb-text-subtle);
    transition: transform var(--bb-duration) var(--bb-ease);
}

.calc-explain[open] > summary::after { transform: rotate(180deg); }
.calc-explain > summary::-webkit-details-marker { display: none; }

.calc-explain__body {
    padding: 0 var(--bb-space-5) var(--bb-space-5);
    border-top: 1px solid var(--bb-border);
    padding-top: var(--bb-space-4);
}

.calc-explain__body p,
.calc-explain__body li { font-size: 0.92rem; }

.calc-formula {
    display: block;
    padding: var(--bb-space-3) var(--bb-space-4);
    margin: var(--bb-space-3) 0;
    background: var(--bb-bg);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86rem;
    color: var(--bb-text-muted);
    overflow-x: auto;
}

/* ==================================================
   8. FORMULARER
================================================== */
.form-row {
    margin-bottom: var(--bb-space-4);
}

.form-row label {
    display: block;
    margin-bottom: var(--bb-space-2);
    font-weight: 600;
    color: var(--bb-text);
    font-size: 0.94rem;
}

.field-help {
    display: block;
    margin-top: var(--bb-space-2);
    font-size: 0.84rem;
    color: var(--bb-text-subtle);
    line-height: 1.5;
}

.field-error {
    display: block;
    margin-top: var(--bb-space-2);
    font-size: 0.86rem;
    color: var(--bb-danger);
    font-weight: 600;
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--bb-danger) !important;
}

/*
   Vejledning, ikke fejl. Bruges naar brugeren mangler at oplyse noget,
   men intet er indtastet forkert — fx manglende effekt/biltype. Rolig
   stil med tydelig tekst; den roede fejlstil er reserveret til faktiske
   indtastningsfejl, saa den bevarer sin betydning.
*/
.field-notice {
    display: block;
    margin-top: var(--bb-space-2);
    padding: var(--bb-space-3);
    border-left: 3px solid var(--bb-accent);
    border-radius: 4px;
    background: var(--bb-accent-soft);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--bb-text);
}

/*
   Markering af de felter, der loeser problemet. Begge er ligevaerdige
   muligheder — derfor samme, ikke-aggressive markering paa begge, og
   ingen aria-invalid: felterne er ikke ugyldige, blot tomme.
*/
.form-row.is-suggested > label {
    color: var(--bb-accent);
}

.form-row.is-suggested select {
    border-color: var(--bb-accent);
    box-shadow: 0 0 0 3px var(--bb-accent-soft);
}

/* Honeypot — skjult for mennesker, synlig for bots. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-privacy {
    margin-top: var(--bb-space-4);
    font-size: 0.84rem;
    color: var(--bb-text-subtle);
}

.contact-form {
    margin: var(--bb-space-5) 0;
    padding: var(--bb-space-5);
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: var(--bb-space-3) var(--bb-space-4);
    background: var(--bb-bg);
    border: 1px solid var(--bb-border-strong);
    border-radius: var(--bb-radius-sm);
    color: var(--bb-text);
    font-size: 1rem;
}

.contact-form textarea { resize: vertical; min-height: 140px; }

/* Nulstil-knap på beregnere */
.btn-reset {
    background: transparent;
    border: 1px solid var(--bb-border-strong);
    color: var(--bb-text-muted);
    padding: var(--bb-space-3) var(--bb-space-5);
    border-radius: var(--bb-radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--bb-duration) var(--bb-ease),
                color var(--bb-duration) var(--bb-ease);
}

.btn-reset:hover {
    border-color: var(--bb-accent);
    color: var(--bb-text);
}

/* ==================================================
   9. 3D-LAG PÅ FORSIDEN
   Ren CSS-perspektiv. Ingen WebGL, intet bibliotek, ingen ekstra requests.
   Bevægelsen drives af to custom properties, som script.js opdaterer
   ved pointermove — kun transform ændres, så det kører på GPU'en
   uden at udløse layout eller paint.
================================================== */
.hero-3d {
    position: relative;
    perspective: 1200px;
    transform-style: preserve-3d;
    will-change: transform;
    pointer-events: none;   /* må aldrig blokere indhold eller klik */
}

.depth-card {
    --bb-tilt-x: 0deg;
    --bb-tilt-y: 0deg;
    --bb-depth: 0px;
    transform: rotateX(var(--bb-tilt-x))
               rotateY(var(--bb-tilt-y))
               translateZ(var(--bb-depth));
    transition: transform 400ms var(--bb-ease);
    transform-style: preserve-3d;
    background: linear-gradient(160deg, var(--bb-surface-2), var(--bb-surface));
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    box-shadow: var(--bb-shadow-lg);
    padding: var(--bb-space-5);
}

.depth-card--near { --bb-depth: 40px; }
.depth-card--far  { --bb-depth: -30px; }

/*
   Slås fra på mindre enheder: der er ingen mus at følge, effekten
   koster batteri, og pladsen bruges bedre på indholdet.
*/
@media (max-width: 900px) {
    .hero-3d { perspective: none; }
    .depth-card {
        transform: none !important;
        transition: none;
    }
}

/* Diskret indtoning ved scroll. Kun opacity og transform. */
.js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms var(--bb-ease), transform 500ms var(--bb-ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==================================================
   PRINT
================================================== */
@media print {
    .header, .site-footer, .ad-zone, .hero-3d, .breadcrumbs { display: none !important; }
    body { background: #fff; color: #000; }
    p, li, h1, h2, h3 { color: #000 !important; }
}

/* Knaprække under beregnere */
.calc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bb-space-3);
    margin: var(--bb-space-5) 0;
}

/* ==================================================
   10. FORSIDENS HERO
================================================== */
.hero-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: var(--bb-space-8);
}

@media (max-width: 900px) {
    .hero-split { grid-template-columns: 1fr; gap: var(--bb-space-5); }
    /* 3D-laget fjernes helt paa mobil — det koster plads og batteri
       uden at tilfoere information. */
    .hero-split .hero-3d { display: none; }
}

.hero-3d {
    position: relative;
    min-height: 340px;
    display: grid;
    place-items: center;
}

/* Diskret lysglød bag kortene, giver dybde uden at koste noget. */
.hero-3d::before {
    content: "";
    position: absolute;
    inset: 10% 5%;
    background: radial-gradient(ellipse at center,
                rgba(59, 130, 246, 0.20), transparent 68%);
    filter: blur(38px);
    pointer-events: none;
}

.hero-panel {
    position: relative;
    width: min(100%, 340px);
    z-index: 2;
}

.hero-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--bb-space-3);
    margin-bottom: var(--bb-space-4);
}

.hero-panel__title {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-text-subtle);
}

.hero-panel__total {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--bb-text);
    font-variant-numeric: tabular-nums;
}

.hero-panel__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-space-2) var(--bb-space-4);
    margin: var(--bb-space-3) 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
    color: var(--bb-text-subtle);
}

.hero-panel__legend li {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.hero-panel__legend span {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

/* Smaa flydende kort omkring hovedpanelet. */
.hero-chip {
    position: absolute;
    display: grid;
    gap: 2px;
    padding: var(--bb-space-3) var(--bb-space-4);
    z-index: 3;
}

.hero-chip__label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-text-subtle);
}

.hero-chip__value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bb-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hero-chip--1 { top: 4%;    left: -4%; }
.hero-chip--2 { bottom: 6%; right: -2%; }
.hero-chip--2 .hero-chip__value { color: var(--bb-success); }

@media (max-width: 1100px) {
    .hero-chip--1 { left: 0; }
    .hero-chip--2 { right: 0; }
}

/* ==========================================================================
   11. IMMERSIVT LAG — dybde, lys og 3D
   Alt herunder bygger på transform og opacity, som browseren kan køre på
   GPU'en uden at udløse layout eller paint. Ingen WebGL, intet bibliotek.
   ========================================================================== */

/* --- Scenen: fælles perspektiv for et sæt kort --- */
.scene-3d {
    perspective: 1400px;
    perspective-origin: 50% 40%;
    transform-style: preserve-3d;
}

/*
   Kort der reagerer på musen. Vinklerne sættes af script.js som
   custom properties, så JS aldrig rører layout — kun to tal.
*/
.tilt-card {
    --tx: 0deg;
    --ty: 0deg;
    --tz: 0px;
    --lift: 0px;
    transform:
        perspective(1000px)
        rotateX(var(--tx))
        rotateY(var(--ty))
        translate3d(0, var(--lift), var(--tz));
    transform-style: preserve-3d;
    transition: transform 500ms var(--bb-ease), box-shadow 400ms var(--bb-ease);
    will-change: transform;
}

.tilt-card:hover {
    --lift: -6px;
}

/*
   Lysrefleks der følger musen. Ren radial-gradient — ingen billedfil.
   Ligger som pseudoelement over kortet med lav opacity.
*/
.glare {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.glare::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms var(--bb-ease);
    background: radial-gradient(
        420px circle at var(--mx, 50%) var(--my, 0%),
        rgba(255, 255, 255, 0.10),
        transparent 42%
    );
}

.glare:hover::after { opacity: 1; }

/* --- Panel med dybde. Grundformen for alle premiumkort. --- */
.panel {
    position: relative;
    padding: var(--bb-space-6);
    border-radius: var(--bb-radius-lg);
    background:
        linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012)),
        linear-gradient(160deg, var(--bb-surface-2), var(--bb-surface));
    border: 1px solid var(--bb-border);
    box-shadow: var(--bb-shadow-lg);
}

/* Tynd lysende kant langs topkanten — giver indtryk af belyst glas. */
.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(160deg,
                rgba(255,255,255,0.22), transparent 45%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.panel--accent {
    border-color: rgba(59, 130, 246, 0.38);
    box-shadow: var(--bb-shadow-lg), var(--bb-shadow-glow);
}

/* --- Sektionsbaggrunde: luft og lys mellem sektionerne --------------------
   Vigtigt for at siden ikke bliver ét stort mørkt fladt område. */
.section {
    position: relative;
    padding: clamp(48px, 6vw, 96px) 0;
}

.section--raised {
    background: linear-gradient(180deg,
                rgba(255,255,255,0.022), transparent 60%);
}

/* Blødt lysfelt bag en sektion. Ren gradient, ingen billedfil. */
.section--glow::before {
    content: "";
    position: absolute;
    inset: -10% 10% 40%;
    background: radial-gradient(ellipse at 50% 0%,
                rgba(59, 130, 246, 0.14), transparent 65%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.section > .container { position: relative; z-index: 1; }

.section__head {
    max-width: 62ch;
    margin-bottom: var(--bb-space-6);
}

.section__head .eyebrow {
    color: var(--bb-accent-hover);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.76rem;
    margin-bottom: var(--bb-space-2);
}

/* --- Animerede tal ------------------------------------------------------- */
.count-up {
    font-variant-numeric: tabular-nums;
    /* Reserverer bredden, så tallet ikke får teksten til at hoppe,
       mens det tæller op. */
    display: inline-block;
    min-width: 3ch;
}

/* --- Målere og datalinjer ------------------------------------------------ */
.meter {
    --pct: 0;
    position: relative;
    height: 8px;
    border-radius: 99px;
    background: rgba(148, 163, 184, 0.14);
    overflow: hidden;
}

.meter__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--pct) * 1%);
    border-radius: 99px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    transition: width 900ms var(--bb-ease);
}

.meter--success .meter__fill {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.meter--warning .meter__fill {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

/* --- Sparkline / graf i ren SVG ------------------------------------------ */
.spark {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.spark__line {
    fill: none;
    stroke: url(#bbSparkGradient);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Tegnes op ved scroll — se .is-visible nedenfor. */
    stroke-dasharray: var(--len, 1000);
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1400ms var(--bb-ease);
}

.js .spark__line { stroke-dashoffset: var(--len, 1000); }
.js .is-visible .spark__line { stroke-dashoffset: 0; }

.spark__area { fill: url(#bbAreaGradient); opacity: 1; transition: opacity 900ms 400ms var(--bb-ease); }
.js .spark__area { opacity: 0; }
.js .is-visible .spark__area { opacity: 1; }

/* --- Sammenligningskort (leasing vs. køb) -------------------------------- */
.versus {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--bb-space-4);
}

@media (max-width: 720px) {
    .versus { grid-template-columns: 1fr; }
    .versus__divider { display: none; }
}

.versus__divider {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bb-surface-3);
    border: 1px solid var(--bb-border-strong);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--bb-text-subtle);
}

/* Vinderkortet løftes og markeres. */
.versus__card--best {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: var(--bb-shadow-lg), 0 0 0 1px rgba(16,185,129,0.25),
                0 8px 30px -10px rgba(16,185,129,0.35);
}

.versus__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 99px;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Resultatkort der løfter sig, når resultatet vises ------------------- */
.js .result-box {
    transform: translateY(14px) scale(0.985);
    opacity: 0;
    transition: transform 520ms var(--bb-ease), opacity 380ms var(--bb-ease);
}

.result-box.show {
    transform: none;
    opacity: 1;
}

/* --- Faktaboks med dybde ------------------------------------------------- */
.fact-card {
    position: relative;
    margin: var(--bb-space-6) 0;
    padding: var(--bb-space-5) var(--bb-space-5) var(--bb-space-5) var(--bb-space-6);
    border-radius: var(--bb-radius);
    background: linear-gradient(160deg, var(--bb-surface-2), var(--bb-surface));
    border: 1px solid var(--bb-border);
    border-left: 3px solid var(--bb-accent);
    box-shadow: var(--bb-shadow-md);
}

.fact-card__label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bb-accent-hover);
    font-weight: 700;
    margin-bottom: var(--bb-space-2);
}

.fact-card p:last-child { margin-bottom: 0; }

/* --- Datakort mellem tekstsektioner -------------------------------------- */
.data-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: var(--bb-space-3);
    margin: var(--bb-space-6) 0;
}

.data-chip {
    padding: var(--bb-space-4);
    border-radius: var(--bb-radius-sm);
    background: var(--bb-surface-2);
    border: 1px solid var(--bb-border);
    box-shadow: var(--bb-shadow-sm);
}

.data-chip__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--bb-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.data-chip__label {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--bb-text-subtle);
    line-height: 1.4;
}

/* --- Sticky indholdsfortegnelse på desktop ------------------------------- */
.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bb-space-6);
}

@media (min-width: 1100px) {
    .article-layout {
        grid-template-columns: 220px minmax(0, 1fr) 300px;
        align-items: start;
    }
}

.toc-sticky { display: none; }

@media (min-width: 1100px) {
    .toc-sticky {
        display: block;
        position: sticky;
        top: var(--bb-space-5);
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        padding: var(--bb-space-4);
        border-radius: var(--bb-radius);
        background: var(--bb-surface);
        border: 1px solid var(--bb-border);
        font-size: 0.88rem;
    }
}

.toc-sticky h2 {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bb-text-subtle);
    margin: 0 0 var(--bb-space-3);
}

.toc-sticky ol { list-style: none; padding: 0; margin: 0; }

.toc-sticky li { margin-bottom: 2px; }

.toc-sticky a {
    display: block;
    padding: 6px 10px;
    border-radius: var(--bb-radius-sm);
    color: var(--bb-text-subtle);
    text-decoration: none;
    border-left: 2px solid transparent;
    line-height: 1.4;
    transition: color 160ms, background 160ms, border-color 160ms;
}

.toc-sticky a:hover { color: var(--bb-text); background: rgba(255,255,255,0.04); }

.toc-sticky a.is-current {
    color: var(--bb-text);
    border-left-color: var(--bb-accent);
    background: var(--bb-accent-soft);
    font-weight: 600;
}

/* --- Artikel-hero med parallax ------------------------------------------- */
.hero-parallax {
    position: relative;
    overflow: hidden;
    border-radius: var(--bb-radius-lg);
    box-shadow: var(--bb-shadow-lg);
}

.hero-parallax img {
    display: block;
    width: 100%;
    height: auto;
    transform: translate3d(0, var(--py, 0px), 0) scale(1.06);
    will-change: transform;
}

/* Mørk bund, så eventuel tekst ovenpå altid har kontrast. */
.hero-parallax::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(11,18,32,0.55));
    pointer-events: none;
}

/* --- Trinvis indtoning af kort i en gruppe ------------------------------- */
.js .stagger > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 520ms var(--bb-ease), transform 520ms var(--bb-ease);
}

.stagger.is-visible > * { opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }

/* ==========================================================================
   NEDSKALERING PÅ MOBIL OG VED REDUCERET BEVÆGELSE
   Effekterne er progressiv forbedring — indholdet må aldrig afhænge af dem.
   ========================================================================== */
@media (max-width: 900px) {
    /* Ingen mus at følge: dropper tilt, glare og parallax helt. */
    .tilt-card { transform: none !important; transition: none; }
    .glare::after { display: none; }
    .hero-parallax img { transform: none; }
    .scene-3d { perspective: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tilt-card,
    .hero-parallax img { transform: none !important; transition: none !important; }
    .glare::after { display: none !important; }
    .stagger > *,
    .stagger.is-visible > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .spark__line { stroke-dashoffset: 0 !important; transition: none !important; }
    .spark__area { opacity: 1 !important; transition: none !important; }
    .meter__fill { transition: none !important; }
    .result-box { transform: none !important; transition: none !important; }
    .count-up { transition: none !important; }
}

/* ==========================================================================
   12. FORSIDENS SEKTIONER
   ========================================================================== */

/* --- Hero: bilsilhuet som baggrundslag --- */
.hero-car {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 118%;
    max-width: none;
    transform: translate(-50%, -50%) translateZ(-90px);
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}

.hero-car__edge {
    /* Blødt lys langs karrosseriets overkant. */
    filter: drop-shadow(0 0 6px rgba(147, 197, 253, 0.55));
}

.hero-3d { min-height: 380px; }

.hero-chip__value--positive { color: var(--bb-success); }

/* --- Fælles småting --- */
.muted-sm {
    font-size: 0.88rem;
    color: var(--bb-text-subtle);
}

.section__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-space-3);
    margin-top: var(--bb-space-6);
}

/* --- Udgiftsfordeling --- */
.cost-split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--bb-space-5);
    align-items: start;
}

@media (max-width: 900px) {
    .cost-split { grid-template-columns: 1fr; }
}

.cost-rows {
    list-style: none;
    padding: 0;
    margin: var(--bb-space-5) 0;
}

.cost-rows li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px var(--bb-space-3);
    margin-bottom: var(--bb-space-4);
}

.cost-rows__name { color: var(--bb-text-muted); font-size: 0.94rem; }

.cost-rows__val {
    color: var(--bb-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cost-rows .meter { grid-column: 1 / -1; }

/* --- Versus-kort --- */
.versus__card h3 { margin-bottom: var(--bb-space-2); }

.versus__price {
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
    font-weight: 800;
    color: var(--bb-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    margin: var(--bb-space-2) 0 2px;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: var(--bb-space-4) 0 0;
}

.check-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: var(--bb-space-2);
    font-size: 0.92rem;
    color: var(--bb-text-muted);
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--bb-success);
    font-weight: 700;
}

.check-list li.is-con::before {
    content: "!";
    color: var(--bb-warning);
}

/* --- Energipanel --- */
.energy-panel__chart {
    max-height: 180px;
    margin-bottom: var(--bb-space-5);
}

/* --- Flydende kort --- */
.float-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--bb-space-4);
}

.float-card h3 { margin-bottom: var(--bb-space-2); }
.float-card p  { margin: 0; font-size: 0.94rem; }

/* Forskudt placering giver dybde uden ekstra markup. */
@media (min-width: 1000px) {
    .float-grid > :nth-child(even) { transform: translateY(18px); }
    .float-grid > :nth-child(even).tilt-card { --lift: 18px; }
}

/* --- Artikelkort --- */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--bb-space-4);
}

.article-card {
    display: block;
    padding: var(--bb-space-5);
    border-radius: var(--bb-radius);
    background: linear-gradient(160deg, var(--bb-surface-2), var(--bb-surface));
    border: 1px solid var(--bb-border);
    box-shadow: var(--bb-shadow-md);
    text-decoration: none;
}

.article-card:hover {
    border-color: var(--bb-border-strong);
    box-shadow: var(--bb-shadow-lg), var(--bb-shadow-glow);
}

.article-card__tag {
    display: inline-block;
    margin-bottom: var(--bb-space-3);
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--bb-accent-soft);
    border: 1px solid rgba(59, 130, 246, 0.28);
    color: var(--bb-accent-hover);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.article-card h3 { color: var(--bb-text); margin-bottom: var(--bb-space-2); }
.article-card p  { margin: 0; font-size: 0.92rem; }

/* --- Mobil: fjern forskydning, så kort ikke overlapper --- */
@media (max-width: 999px) {
    .float-grid > :nth-child(even) { transform: none; }
}

/*
   Ekstra sikkerhedsafstand omkring annoncezoner.
   Formålet er at gøre utilsigtede klik usandsynlige: der skal være
   tydelig luft mellem en annonce og nærmeste knap eller link.
*/
/*
   Afstanden styres af --ad-section-spacing, saa den er ens paa alle
   sidetyper. Sidebaren undtages: den staar i sin egen gridkolonne og
   skal flugte med toppen af indholdet, ikke skubbes ned af en margin.
*/
.ad-zone:not(.ad-zone--sidebar) { margin-block: var(--ad-section-spacing); }

@media (max-width: 767px) {
    /* På mobil er fingeren mindre præcis end musen — mere luft. */
    .ad-zone:not(.ad-zone--sidebar) { margin-block: 40px; }
}

/* ==========================================================================
   13. BEREGNER-SHELL — trinvist flow
   Fælles struktur for salgsberegneren og de øvrige beregnere.
   ========================================================================== */

/* Uden JS vises alle trin. .calc-shell--stepped sættes kun af JavaScript. */
.calc-step {
    border: 0;
    padding: 0;
    margin: 0 0 var(--bb-space-6);
    min-width: 0;   /* fieldset krymper ikke uden dette i grid/flex */
}

.calc-shell--stepped .calc-step {
    margin-bottom: 0;
}

.calc-shell--stepped .calc-step.is-active {
    animation: bbStepIn 420ms var(--bb-ease) both;
}

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

@media (prefers-reduced-motion: reduce) {
    .calc-shell--stepped .calc-step.is-active { animation: none; }
}

.calc-step__legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: var(--bb-space-4);
}

.calc-step__eyebrow {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bb-accent-hover);
    font-weight: 700;
    margin-bottom: var(--bb-space-2);
}

.calc-step__legend h2 {
    margin: 0;
    font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
}

.calc-step__legend h2:focus { outline: none; }

.calc-step__intro {
    max-width: 62ch;
    margin-bottom: var(--bb-space-5);
    color: var(--bb-text-muted);
}

/* --- Fremdriftsindikator --- */
.calc-progress {
    margin-bottom: var(--bb-space-6);
}

.calc-progress__steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-space-2) var(--bb-space-4);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--bb-space-3);
    font-size: 0.82rem;
}

.calc-progress__steps li {
    display: flex;
    align-items: center;
    gap: var(--bb-space-2);
    color: var(--bb-text-subtle);
    margin: 0;
    transition: color var(--bb-duration) var(--bb-ease);
}

.calc-progress__steps li span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bb-surface-2);
    border: 1px solid var(--bb-border);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background var(--bb-duration) var(--bb-ease),
                border-color var(--bb-duration) var(--bb-ease),
                color var(--bb-duration) var(--bb-ease);
}

.calc-progress__steps li.is-current { color: var(--bb-text); font-weight: 600; }

.calc-progress__steps li.is-current span {
    background: var(--bb-accent);
    border-color: var(--bb-accent);
    color: #fff;
    box-shadow: 0 0 0 4px var(--bb-accent-soft);
}

.calc-progress__steps li.is-done { color: var(--bb-text-muted); }

.calc-progress__steps li.is-done span {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.45);
    color: #6ee7b7;
}

.calc-progress__track {
    height: 4px;
    border-radius: 99px;
    background: var(--bb-surface-2);
    overflow: hidden;
}

.calc-progress__fill {
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    transition: width 500ms var(--bb-ease);
}

@media (prefers-reduced-motion: reduce) {
    .calc-progress__fill { transition: none; }
}

/* --- Navigation --- */
.calc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-space-3);
    align-items: center;
    margin-top: var(--bb-space-6);
    padding-top: var(--bb-space-5);
    border-top: 1px solid var(--bb-border);
}

/* --- Nummerpladefelt --- */
.plate-field { margin-bottom: var(--bb-space-5); }

.plate-field__label {
    display: block;
    margin-bottom: var(--bb-space-2);
    font-weight: 600;
    color: var(--bb-text);
}

.plate-input-wrap {
    display: flex;
    align-items: stretch;
    max-width: 380px;
    border-radius: var(--bb-radius);
    overflow: hidden;
    border: 2px solid var(--bb-border-strong);
    background: #fff;
    transition: border-color var(--bb-duration) var(--bb-ease),
                box-shadow var(--bb-duration) var(--bb-ease);
}

.plate-input-wrap:focus-within {
    border-color: var(--bb-accent);
    box-shadow: 0 0 0 4px var(--bb-accent-soft);
}

/* Det blå EU-felt til venstre, som på en rigtig nummerplade. */
.plate-input-wrap__country {
    display: grid;
    place-items: center;
    width: 46px;
    background: linear-gradient(180deg, #1e40af, #1e3a8a);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.plate-input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: var(--bb-space-4);
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0b1220;
    background: #fff;
}

.plate-input:focus { outline: none; }
.plate-input::placeholder { color: #94a3b8; letter-spacing: 0.08em; font-weight: 500; }

/* --- Loading med kørende bil --- */
.plate-loading {
    margin-top: var(--bb-space-5);
    padding: var(--bb-space-5);
    border-radius: var(--bb-radius);
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    text-align: center;
}

.plate-loading p { margin: var(--bb-space-3) 0 0; color: var(--bb-text-muted); }

.plate-loading__road {
    position: relative;
    height: 32px;
    border-radius: 99px;
    background: var(--bb-bg);
    overflow: hidden;
}

/* Vejstriber der løber forbi — giver fornemmelsen af bevægelse. */
.plate-loading__road::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: 2px;
    background: repeating-linear-gradient(90deg,
                var(--bb-border-strong) 0 14px, transparent 14px 30px);
    animation: bbRoad 700ms linear infinite;
}

.plate-loading__car {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 13px;
    margin: -11px 0 0 -15px;
    border-radius: 6px 9px 4px 4px;
    background: linear-gradient(180deg, #60a5fa, #3b82f6);
    animation: bbCarBob 700ms ease-in-out infinite;
}

.plate-loading__car::before {
    content: "";
    position: absolute;
    left: 6px; right: 7px; top: -5px; height: 6px;
    border-radius: 5px 6px 0 0;
    background: #93c5fd;
}

@keyframes bbRoad   { to { background-position-x: -30px; } }
@keyframes bbCarBob { 50% { transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
    .plate-loading__road::after,
    .plate-loading__car { animation: none; }
}

/* --- Køretøjskort --- */
.vehicle-card {
    display: grid;
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    gap: var(--bb-space-5);
    align-items: center;
    padding: var(--bb-space-5);
    border-radius: var(--bb-radius-lg);
    background: linear-gradient(160deg, var(--bb-surface-2), var(--bb-surface));
    border: 1px solid var(--bb-border);
    box-shadow: var(--bb-shadow-lg);
    margin-bottom: var(--bb-space-5);
}

@media (max-width: 620px) {
    .vehicle-card { grid-template-columns: 1fr; text-align: center; }
    .vehicle-card__visual { max-width: 190px; margin: 0 auto; }
}

.vehicle-card__silhouette { width: 100%; height: auto; display: block; }

.vehicle-card__title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--bb-text);
    margin: 0 0 var(--bb-space-3);
    letter-spacing: -0.01em;
}

.vehicle-card__specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
    gap: var(--bb-space-3);
    margin: 0;
}

.vehicle-card__specs dt {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-text-subtle);
    margin-bottom: 2px;
}

.vehicle-card__specs dd {
    margin: 0;
    font-weight: 600;
    color: var(--bb-text);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.vehicle-edit {
    padding-top: var(--bb-space-5);
    border-top: 1px solid var(--bb-border);
}

/* --- Valgkort --- */
.choice-group { margin-bottom: var(--bb-space-6); }

.choice-group__label {
    display: block;
    margin-bottom: var(--bb-space-3);
    font-weight: 600;
    color: var(--bb-text);
}

.choice-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: var(--bb-space-3);
}

.choice-cards--compact {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
}

.choice-cards--stacked { grid-template-columns: 1fr; }

.choice-card {
    position: relative;
    display: block;
    padding: var(--bb-space-4);
    border-radius: var(--bb-radius);
    background: var(--bb-surface-2);
    border: 1px solid var(--bb-border);
    cursor: pointer;
    /* Stort touch target — hele kortet er klikbart. */
    min-height: 84px;
    transition: border-color var(--bb-duration) var(--bb-ease),
                background var(--bb-duration) var(--bb-ease),
                transform var(--bb-duration) var(--bb-ease);
}

.choice-card:hover { border-color: var(--bb-border-strong); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .choice-card:hover { transform: none; }
}

/* Radioknappen skjules visuelt, men forbliver fokuserbar for tastatur. */
.choice-card input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    margin: 0;
}

.choice-card__title {
    display: block;
    font-weight: 700;
    color: var(--bb-text);
    margin-bottom: 2px;
}

.choice-card__hint {
    display: block;
    font-size: 0.84rem;
    color: var(--bb-text-subtle);
    line-height: 1.45;
}

.choice-card:has(input:checked) {
    border-color: var(--bb-accent);
    background: var(--bb-accent-soft);
    box-shadow: var(--bb-shadow-glow);
}

/* Fokusmarkering skal følge kortet, ikke den skjulte radioknap. */
.choice-card:has(input:focus-visible) {
    outline: 3px solid var(--bb-accent-hover);
    outline-offset: 3px;
}

/* Fallback for browsere uden :has() — sat af CSS-klassen fra JS er
   ikke nødvendig her, da :has() har bred understøttelse i 2026.
   Uden :has() virker valget stadig; kun markeringen mangler. */

.choice-card--wide { min-height: 0; }

/* --- Indsend-række --- */
.calc-actions--submit {
    margin-top: var(--bb-space-6);
    padding-top: var(--bb-space-5);
    border-top: 1px solid var(--bb-border);
}

/* --- Presets i beregnere --- */
.preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-space-2);
    margin-bottom: var(--bb-space-4);
}

.preset-btn {
    display: grid;
    gap: 2px;
    flex: 1 1 90px;
    padding: var(--bb-space-3);
    border-radius: var(--bb-radius-sm);
    background: var(--bb-surface-2);
    border: 1px solid var(--bb-border);
    color: var(--bb-text);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    text-align: center;
    /* Stort nok touch target på mobil. */
    min-height: 56px;
    transition: border-color var(--bb-duration) var(--bb-ease),
                background var(--bb-duration) var(--bb-ease);
}

.preset-btn span {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--bb-text-subtle);
}

.preset-btn:hover { border-color: var(--bb-border-strong); }

.preset-btn.is-active {
    border-color: var(--bb-accent);
    background: var(--bb-accent-soft);
}

.preset-btn.is-active span { color: var(--bb-accent-hover); }

/* --- Følsomhedsanalyse --- */
.sensitivity-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--bb-space-5);
}

.sensitivity-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--bb-space-3);
    padding: var(--bb-space-3) 0;
    border-bottom: 1px solid var(--bb-border);
    margin: 0;
    font-size: 0.92rem;
}

.sensitivity-list li:last-child { border-bottom: 0; }

.sensitivity-list strong {
    color: var(--bb-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Brugerens egen antagelse fremhæves, så rækkerne kan læses som
   "hvad nu hvis" omkring en kendt midte. */
.sensitivity-list .is-baseline {
    background: var(--bb-accent-soft);
    border-radius: var(--bb-radius-sm);
    padding-inline: var(--bb-space-3);
    border-bottom-color: transparent;
}

.sensitivity-list .is-baseline span { color: var(--bb-text); font-weight: 600; }

/* --- Ligeværdig alternativ sti (manuel indtastning) --- */
.alt-path {
    margin-top: var(--bb-space-5);
    text-align: center;
}

.alt-path__divider {
    display: flex;
    align-items: center;
    gap: var(--bb-space-4);
    margin-bottom: var(--bb-space-4);
    color: var(--bb-text-subtle);
    font-size: 0.86rem;
}

/* Linjer på hver side af "eller" — signalerer to ligeværdige veje,
   ikke en primær og en nødløsning. */
.alt-path__divider::before,
.alt-path__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bb-border);
}

.alt-path__hint {
    margin-top: var(--bb-space-3);
    font-size: 0.86rem;
    color: var(--bb-text-subtle);
}

/* ==========================================================================
   14. AI-RESULTAT
   Priserne står som tekst med det samme. Animationen lægger sig ovenpå og
   er aldrig en forudsætning for at kunne læse tallene.
   ========================================================================== */
.ai-result { padding-top: var(--bb-space-4); }

.ai-result__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bb-accent-hover);
    font-weight: 700;
    margin-bottom: var(--bb-space-2);
}

.ai-result__summary {
    font-size: 1.05rem;
    color: var(--bb-text-muted);
    max-width: 60ch;
    margin-bottom: var(--bb-space-6);
}

/* --- Hovedtal --- */
.ai-headline {
    text-align: center;
    padding: var(--bb-space-6) var(--bb-space-5);
    border-radius: var(--bb-radius-lg);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(59,130,246,0.18), transparent 70%),
        linear-gradient(160deg, var(--bb-surface-3), var(--bb-surface));
    border: 1px solid rgba(59,130,246,0.32);
    box-shadow: var(--bb-shadow-lg), var(--bb-shadow-glow);
}

.ai-headline__label {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-text-subtle);
    margin-bottom: var(--bb-space-2);
}

.ai-headline__value {
    display: block;
    font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--bb-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}

.ai-headline__range {
    display: block;
    margin-top: var(--bb-space-3);
    font-size: 0.95rem;
    color: var(--bb-text-muted);
}

/* --- Prisindikator --- */
.ai-scale { margin: var(--bb-space-6) 0; }

.ai-scale__track {
    position: relative;
    height: 12px;
    border-radius: 99px;
    background: var(--bb-surface-2);
    border: 1px solid var(--bb-border);
}

/* Bånd der viser det realistiske privatinterval. */
.ai-scale__band {
    position: absolute;
    top: 0; bottom: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(59,130,246,0.55), rgba(96,165,250,0.75));
    /* Vokser ud fra venstre, når resultatet vises. */
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms var(--bb-ease);
}

.is-ready .ai-scale__band { transform: scaleX(1); }

.ai-scale__marker {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 26px;
    margin-top: -13px;
    background: var(--bb-text-subtle);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 400ms var(--bb-ease) 500ms;
}

.is-ready .ai-scale__marker { opacity: 1; }

.ai-scale__marker i {
    position: absolute;
    top: -7px; left: 50%;
    width: 11px; height: 11px;
    margin-left: -5.5px;
    border-radius: 50%;
    background: var(--bb-surface);
    border: 2px solid currentColor;
}

.ai-scale__marker--private { color: #60a5fa; background: #60a5fa; height: 32px; margin-top: -16px; }
.ai-scale__marker--quick   { color: #fbbf24; background: #fbbf24; }
.ai-scale__marker--trade   { color: #f87171; background: #f87171; }

.ai-scale__ends {
    display: flex;
    justify-content: space-between;
    margin-top: var(--bb-space-3);
    font-size: 0.8rem;
    color: var(--bb-text-subtle);
    font-variant-numeric: tabular-nums;
}

/* Uden JS eller ved reduceret bevægelse vises alt straks. */
.no-js .ai-scale__band,
.no-js .ai-scale__marker { transform: scaleX(1); opacity: 1; transition: none; }

@media (prefers-reduced-motion: reduce) {
    .ai-scale__band { transform: scaleX(1) !important; transition: none !important; }
    .ai-scale__marker { opacity: 1 !important; transition: none !important; }
}

/* --- De tre resultatkort --- */
.ai-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: var(--bb-space-4);
    margin: var(--bb-space-6) 0;
}

.ai-card {
    position: relative;
    padding: var(--bb-space-5);
    border-radius: var(--bb-radius);
    background: linear-gradient(160deg, var(--bb-surface-2), var(--bb-surface));
    border: 1px solid var(--bb-border);
    box-shadow: var(--bb-shadow-md);
}

.ai-card.is-highlight {
    border-color: rgba(59,130,246,0.45);
    box-shadow: var(--bb-shadow-lg), var(--bb-shadow-glow);
}

.ai-card__badge {
    display: inline-block;
    margin-bottom: var(--bb-space-2);
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--bb-accent-soft);
    border: 1px solid rgba(59,130,246,0.35);
    color: var(--bb-accent-hover);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ai-card h4 { margin: 0 0 var(--bb-space-2); color: var(--bb-text); }

.ai-card__value {
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
    font-weight: 800;
    color: var(--bb-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    margin: 0;
}

.ai-card__range {
    margin: 2px 0 var(--bb-space-3);
    font-size: 0.86rem;
    color: var(--bb-text-subtle);
    font-variant-numeric: tabular-nums;
}

.ai-card__hint { margin: 0; font-size: 0.86rem; color: var(--bb-text-muted); }

/* --- Usikkerhed --- */
.ai-confidence {
    margin: var(--bb-space-6) 0;
    padding: var(--bb-space-5);
    border-radius: var(--bb-radius);
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-left: 4px solid var(--bb-text-subtle);
}

.ai-confidence.is-high   { border-left-color: var(--bb-success); }
.ai-confidence.is-medium { border-left-color: var(--bb-warning); }
.ai-confidence.is-low    { border-left-color: var(--bb-danger); }

.ai-confidence__level {
    display: block;
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bb-text);
    margin-bottom: var(--bb-space-2);
}

.ai-confidence p { margin: 0; font-size: 0.94rem; }

/* --- Faktorer --- */
.ai-factors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--bb-space-4);
    margin: var(--bb-space-6) 0;
}

.ai-factors__col {
    padding: var(--bb-space-5);
    border-radius: var(--bb-radius);
    background: var(--bb-surface-2);
    border: 1px solid var(--bb-border);
}

.ai-factors__col h4 { margin: 0 0 var(--bb-space-3); font-size: 1rem; }
.ai-factors__col ul { margin: 0; padding-left: 0; list-style: none; }

.ai-factors__col li {
    position: relative;
    padding-left: 24px;
    margin-bottom: var(--bb-space-2);
    font-size: 0.92rem;
}

.ai-factors__col li::before {
    position: absolute;
    left: 0; top: 0;
    font-weight: 700;
}

.ai-factors__col--up li::before   { content: "▲"; color: var(--bb-success); font-size: 0.72rem; top: 4px; }
.ai-factors__col--down li::before { content: "▼"; color: var(--bb-danger);  font-size: 0.72rem; top: 4px; }

/* ------------------------------------------------------------------ *
 * Frivillig leadformular efter AI-resultatet
 *
 * Uden JS er sektionen altid synlig (progressiv forbedring). Med JS
 * foldes den foerst ud, naar et komplet resultat er renderet — derfor
 * gaelder skjulingen kun under .js-klassen.
 * ------------------------------------------------------------------ */
.js .lead-after-result[data-lead-waiting] { display: none; }

.lead-after-result { margin-top: 28px; }

.lead-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 18px 0 14px;
    font-size: 0.92rem;
    line-height: 1.5;
    cursor: pointer;
}

.lead-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--bb-primary, #2563eb);
}

.lead-explain {
    margin-top: 12px;
    font-size: 0.85rem;
}

/* ==================================================
   12. CMP-PREVIEW (kun staging)

   Visuel model af Googles cookiedialog, saa placering, kontrast og
   knapafstand kan vurderes FOER go-live. Google CMP leveres af
   AdSense-tagget og kan ikke vises i isoleret staging.

   Dette er ikke en CMP. Den saetter intet, gemmer intet og renderes
   aldrig i produktion — se includes/cmp-preview.php.
================================================== */
.cmp-preview {
    position: fixed;
    z-index: 9000;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: min(920px, calc(100vw - 32px));

    /* Moerk marineblaa premiumflade med lys tekst. */
    background: linear-gradient(165deg, #0e1626, #0a1120);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    padding: 20px 22px;
    color: #e2e8f0;
}

/* Tydeligt internt maerkat, saa previewet aldrig forveksles med den rigtige dialog. */
.cmp-preview__flag {
    margin: 0 0 12px;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fbbf24;
}

.cmp-preview__title {
    margin: 0 0 8px;
    font-size: 1.12rem;
    color: #f8fafc;
}

.cmp-preview__text {
    margin: 0 0 10px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #cbd5e1;
}

.cmp-preview__links {
    margin: 0;
    display: flex;
    gap: 18px;
    font-size: 0.86rem;
}

.cmp-preview__links a { color: #93c5fd; }

.cmp-preview__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}

.cmp-preview__btn {
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    /* Mindst 44px hoejt touchmaal. */
    min-height: 44px;
}

/*
   Afvis og Indstillinger har samme vaegt og fulde synlighed. Kun
   farven adskiller dem fra primaerknappen — ingen skjult afvisning,
   ingen graa-i-graa "nej". Google kraever en synlig "Do not consent"
   paa foerste skaerm, og det er den opsaetning, ejeren skal vaelge.
*/
.cmp-preview__btn--ghost {
    background: transparent;
    border-color: rgba(148, 163, 184, 0.45);
    color: #e2e8f0;
}

.cmp-preview__btn--primary {
    background: #2563eb;
    color: #fff;
}

@media (max-width: 640px) {
    .cmp-preview {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        transform: none;
        padding: 16px;
    }

    /* Knapperne stables i fuld bredde, saa de er nemme at ramme. */
    .cmp-preview__actions {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .cmp-preview__btn { width: 100%; }
}

/* ==================================================
   13. BEREGNERSIDERNES FASTE AKSE

   PROBLEMET DET LOESER
   Beregnersiderne stod paa FIRE forskellige akser:
     hero/intro     .container          1100 px  (1060 indhold)
     formular       .calculator-card     950 px
     resultat       inde i kortet        950 px
     stoetteindhold .container.narrow    820 px  (780 indhold)
     faq/cta        .container          1100 px

   Bredderne skiftede altsaa tre gange paa vej ned gennem siden. Og
   fra 1650 px lagde .bb-support-shell stoettesektionen i et grid med
   950 px indhold + 28 gap + 300 px rail, hvor GRUPPEN blev centreret.
   Hovedkolonnen stod dermed (300 + 28) / 2 = 164 px til venstre for
   beregnerkortet ovenover, og inline-annoncen i den kolonne blev
   centreret i kolonnen — ikke i viewporten. Det var tydeligst netop
   ved 1700 og 1920 px, hvor railen foerst blev monteret.

   LOESNINGEN
   ÉN akse for hele beregnersiden. Alt hvad brugeren laeser eller
   roerer ved — breadcrumb, H1, intro, formular, trinvisning,
   sammenfatning, loading, resultat, resultatforklaring,
   redigér/start forfra, den frivillige leadformular, det
   redaktionelle stoetteindhold, FAQ og den afsluttende CTA — ligger
   i den samme centrerede wrapper med den samme bredde og den samme
   midte.

   Der er ingen sidebar paa beregnersider ved NOGEN bredde (se
   bb_ad_budget() i includes/ad-slot.php), saa der findes ikke laengere
   et grid, der kan forskyde aksen. Annoncerne er inline i
   indholdsstroemmen og arver dermed sidens midte.
================================================== */

:root {
    /* Én bredde for hele beregneroplevelsen. */
    --bb-calc-width: 950px;
}

/*
   AKSEN.

   Bredden, ikke max-width + padding: saa er den ydre kant OG midten
   den samme for hvert eneste element, uanset hvilken container det
   tilfaeldigvis ligger i. De 32 px er sideluften paa smalle skaerme.

   max-width og padding-inline nulstilles, fordi klassen saettes paa
   de samme elementer som .container (1100 px + 20 px) og
   .container.narrow (820 px). Uden nulstillingen ville aksen blive
   klippet forskelligt fra sektion til sektion — praecis det problem,
   den skal fjerne. Den lodrette padding fra .container beholdes.
*/
.bb-calculator-axis {
    width: min(calc(100% - 32px), var(--bb-calc-width));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

/*
   Aksen maaler i procent af sin FORAELDER, saa foraeldrene skal have
   samme vandrette padding — ellers er aksen ikke den samme akse.

   .calculator-section (60px 0), .content-section (45px 0), .faq
   (45px 0) og .cta har alle nul vandret padding. Kun .hero har
   80px 20px — og 60px 18px under 768px. Uden nulstillingen her ville
   heroens akse vaere 40 px smallere end alle de andres, saa snart
   viewporten er under ~1022 px og min() vaelger calc-grenen. H1 og
   intro ville altsaa igen staa paa en anden bredde end formularen
   lige under — praecis den skaevhed, aksen skal fjerne. Den lodrette
   padding, der giver heroen sin hoejde, roeres ikke.

   Sat med en eksplicit klasse, ikke :has(). Det er samme valg som ved
   .bb-support-shell: en sektions bredde skal kunne laeses direkte af
   markup'en, ikke udledes af hvad der tilfaeldigvis ligger indeni.
*/
.bb-calculator-hero { padding-inline: 0; }

/*
   Indholdet INDE i aksen fylder den helt ud. Reglerne stod her
   tidligere med max-width: 950px hver for sig, hvilket var noedvendigt
   dengang containerne var bredere end aksen. Nu er wrapperen selv
   aksen, og en indre max-width ville kun kunne goere et element
   smallere end sine naboer igen.
*/
.bb-calculator-axis > .calculator-card,
.bb-calculator-axis > .bb-calc-form,
.bb-calculator-axis > .bb-calc-results,
.bb-calculator-axis > .result-box {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/*
   Uden for aksen (fx en beregnerkomponent genbrugt paa en artikel)
   gaelder den gamle centrering stadig.

   .bb-calc-intro er FJERNET herfra. Klassen sad paa beregnersidernes
   hero-container og gav den 950 px, mens containeren omkring den var
   1100. Nu er hero-containeren selv aksen, saa klassen har ingen
   markup tilbage at virke paa — den ville staa som en regel, ingen
   side bruger, og naeste laeser ville gaette paa, at den betyder noget.
*/
.calculator-card,
.bb-calc-form,
.bb-calc-results {
    max-width: var(--bb-calc-width);
    margin-inline: auto;
}

/*
   Resultatboksen ligger inde i kortet paa alle fire beregnere og
   arver dermed aksen. Reglen her er et sikkerhedsnet, hvis en
   resultatboks senere flyttes ud af kortet.
*/
.calculator-section > .container > .result-box,
.bb-calc-results > .result-box {
    max-width: var(--bb-calc-width);
    margin-inline: auto;
}

.bb-calc-supporting { margin-top: var(--ad-section-spacing); }

/* ==================================================
   BEREGNERSIDERNES ANNONCER

   PROBLEMET DET LOESER
   Zonerne arvede det globale .ad-zone: op til 728 px bred, 146 px hoej,
   glasflade med gradient, skygge og 14 px radius. Ved siden af
   beregnerkortet (24 px radius, samme glasflade) laeste de som
   endnu et inputkort — bare et tomt et. De saa loese ud, fordi de
   havde beregnerens visuelle vaegt uden dens funktion.

   PRINCIPPET
   En annonce paa en beregnerside skal vaere tydeligt til stede og
   tydeligt IKKE en del af beregningen. Den loesning er ikke mere
   dekoration, men mindre: fladere flade, tyndere kant, mindre radius
   end kortet, lavere hoejde, ingen skygge, ingen hover. Den ligger paa
   sidens akse som alt andet, saa den foelger designet — men den
   ligner ikke noget, man kan klikke sig videre i.
================================================== */

:root {
    /* Fire tokens styrer hele beregnerannoncens maal. Aendres ét sted. */
    --calc-ad-max-width:    728px;   /* klassisk leaderboard */
    --calc-ad-height:       110px;   /* kompakt: midt i 90-130 px */
    --calc-ad-space-before:  40px;
    --calc-ad-space-after:   40px;

    /* Mindre end beregnerkortets 24 px — forskellen skal kunne ses. */
    --calc-ad-radius:        10px;
}

.bb-calc-ad {
    margin-block: var(--calc-ad-space-before) var(--calc-ad-space-after);
}

/*
   Zonen selv. Reglerne overskriver det globale .ad-zone, men KUN inde i
   en beregnerannonce — alle andre sidetyper er uroerte.
*/
.bb-calc-ad .ad-zone {
    max-width: var(--calc-ad-max-width);
    margin-inline: auto;
    /* Marginen ligger paa wrapperen, saa tokenene styrer afstanden alene. */
    margin-block: 0;

    min-height: var(--calc-ad-height);
    padding: var(--bb-space-2);

    /* Diskret flade — ét fladt lag, ingen gradient, ingen glasflade. */
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: var(--calc-ad-radius);

    /* Ingen skygge, ingen gloed, ingen 3D. */
    box-shadow: none;
    backdrop-filter: none;
}

/* Ingen hovereffekt: en annonce maa ikke opfoere sig som en knap. */
.bb-calc-ad .ad-zone:hover {
    background: rgba(255, 255, 255, 0.028);
    border-color: rgba(148, 163, 184, 0.20);
    box-shadow: none;
    transform: none;
}

.bb-calc-ad .ad-zone__inner {
    /* Label og luft ligger uden for; resten er annoncens egen plads. */
    min-height: calc(var(--calc-ad-height) - 30px);
}

/* Lille, rolig maerkat. Skal kunne laeses, ikke bemaerkes. */
.bb-calc-ad .ad-zone__label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
}

/*
   Staging-placeholderen inde i en beregnerannonce foelger samme
   kompakte maal. Uden dette ville .ad-zone--placeholder's egen moerke
   gradient og hoejde slaa igennem og give netop det tunge kortudtryk,
   der skulle vaek.
*/
.bb-calc-ad .ad-zone--placeholder {
    background: rgba(255, 255, 255, 0.028);
    border: 1px dashed rgba(148, 163, 184, 0.28);
    min-height: var(--calc-ad-height);
}

.bb-calc-ad .ad-zone--placeholder:hover {
    background: rgba(255, 255, 255, 0.028);
    border-color: rgba(148, 163, 184, 0.28);
}

@media (max-width: 767px) {
    :root {
        /* Lidt mere luft paa mobil — fingeren er mindre praecis end musen. */
        --calc-ad-space-before: 32px;
        --calc-ad-space-after:  32px;
        --calc-ad-height:      100px;
    }
}

@media (max-width: 767px) {
    /* Mobil: én kolonne, fuld bredde, ingen rester af desktopaksen. */
    .calculator-card,
    .bb-calc-form,
    .bb-calc-results { max-width: 100%; }
}

/* --- Avancerede beregnerfelter (frivillig sektion) --- */
.bb-calc-advanced {
    margin: var(--bb-space-5) 0;
    border: 1px solid var(--bb-border);
    border-radius: var(--ad-border-radius);
    background: rgba(255, 255, 255, 0.02);
    padding: 0 var(--bb-space-4);
}

.bb-calc-advanced > summary {
    /* Skal kunne rammes med baade mus og tastatur. */
    cursor: pointer;
    padding: var(--bb-space-4) 0;
    font-weight: 600;
    color: var(--bb-accent);
    list-style-position: inside;
}

.bb-calc-advanced > summary:focus-visible {
    outline: 3px solid var(--bb-accent-hover);
    outline-offset: 2px;
}

.bb-calc-advanced[open] > summary {
    border-bottom: 1px solid var(--bb-border);
    margin-bottom: var(--bb-space-4);
}

.bb-calc-advanced > .field-help { margin-bottom: var(--bb-space-4); }
.bb-calc-advanced .calc-grid { margin-bottom: var(--bb-space-4); }