/* ════════════════════════════════════════════════════════════════════════════
   Gulplade.dk — stylesheet

   Opbygning (rækkefølgen betyder noget):
     1. tokens       alle designværdier. Ingen farve, størrelse eller afstand
                     må defineres udenfor dette blok.
     2. base         reset og typografi
     3. layout       header, footer, sidebredder
     4. komponenter  knapper, kort, tabeller, filtre, sammenligning
     5. mørk tilstand
     6. smalle skærme

   Tal sættes altid i monofont med tabular-nums. Et prissammenligningssite
   lever af, at cifre står under hinanden.
   ════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400..700&family=Geist+Mono:wght@400..600&display=swap');

/* ─── 1. Tokens ────────────────────────────────────────────────────────── */

:root {
  /* Baggrund */
  --bg:            #ffffff;
  --bg-alt:        #f7f7f5;
  --bg-muted:      #f0efec;
  --bg-invers:     #14161a;

  /* Tekst */
  --text:          #14161a;
  --text-soft:     #3f434a;
  --text-muted:    #6b7280;
  --fokus:         #14161a;
  /* Samme som --text-muted med vilje: muted ligger på 4,51:1 mod
     --bg-alt, altså lige på WCAG-grænsen, og alt lysere falder under.
     Rangordenen bæres af størrelse, versaler og spærring i stedet. */
  --text-hint:     #6b7280;
  --text-invers:   #f7f7f5;

  /* Streger */
  --border:        #e5e5e2;
  --border-strong: #d0d0cb;

  /* Gul — husets farve. Bruges sparsomt: fokus, badge, understregning. */
  --gul:           #f2b705;
  --gul-bg:        #fdf5db;
  --gul-tekst:     #5c4600;
  --gul-streg:     #efdca4;

  /* Status */
  --ok:            #16794f;
  --ok-bg:         #e6f2ec;
  --advarsel:      #a8590a;
  --advarsel-bg:   #fdf1e3;
  --fejl:          #b42318;

  /* Fonte */
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Størrelser */
  --t-xs:   0.6875rem;   /* 11 — eyebrow, meta */
  --t-sm:   0.75rem;     /* 12 — små labels */
  --t-base: 0.875rem;    /* 14 — brødtekst */
  --t-md:   0.9375rem;   /* 15 — kortnavn */
  --t-lg:   1.0625rem;   /* 17 — h3 */
  --t-xl:   1.25rem;     /* 20 — h2 */
  --t-2xl:  1.5rem;      /* 24 */
  --t-3xl:  1.875rem;    /* 30 */
  --t-4xl:  2.5rem;      /* 40 — hero */

  --v-normal: 400;
  --v-medium: 500;
  --v-semi:   600;
  --v-bold:   700;

  --lh-tight: 1.15;
  --lh-snug:  1.4;
  --lh-base:  1.65;

  --sp-tight: -0.022em;
  --sp-snug:  -0.012em;
  --sp-wide:  0.06em;

  /* Afstande */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;   --s9: 6rem;

  /* Form */
  --r-sm: 5px;  --r: 9px;  --r-lg: 13px;  --r-xl: 18px;  --r-rund: 9999px;

  --skygge:    0 1px 2px rgba(20, 22, 26, .04);
  --skygge-lg: 0 12px 32px -8px rgba(20, 22, 26, .18), 0 2px 8px rgba(20, 22, 26, .06);

  --tid:  130ms;
  --ease: cubic-bezier(.2, .6, .3, 1);

  /* Layout */
  --bredde:  1280px;  /* samme som leasio.dk */
  /* Brødteksten fylder spalten. Det giver lange linjer, men det er valgt:
     siden er et opslagsværktøj, og en tekst der stopper midt på siden ser
     ud som om der mangler noget. */
  --prosa:   100%;
  --luft:    clamp(1rem, 4vw, 2.5rem);

  --z-header: 100;
  --z-bar:    200;
  --z-modal:  300;

  --h-felt: 38px;
  --h-rør:  44px;

  color-scheme: light;
}

/* ─── 2. Base ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  font-weight: var(--v-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--sp-tight);
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; transition: color var(--tid) var(--ease); }
p a:not([class]), li a:not([class]), dd a:not([class]),
.kilde a, .spec-kilde a, .tilbud-model a, .site-footer a {
  text-decoration: underline; text-decoration-thickness: 1.5px;
  text-decoration-color: var(--gul-streg); text-underline-offset: 3px;
}
p a:not([class]):hover, li a:not([class]):hover, dd a:not([class]):hover,
.kilde a:hover, .spec-kilde a:hover, .tilbud-model a:hover {
  text-decoration-color: var(--gul);
}

img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }

/* Fokusringen skal kunne ses. Brandets gule giver 1,82:1 mod hvid, og
   WCAG kræver 3,0:1 for et fokusmærke — den var altså usynlig i lys
   tilstand. Ringen har derfor sit eget token: mørk blæk på lys baggrund
   (18,11:1), den gule på mørk (10,38:1). */
:focus-visible {
  outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 3px;
}

::selection { background: var(--gul-bg); color: var(--text); }

.tal, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.skjult {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.eyebrow {
  font-size: var(--t-xs); font-weight: var(--v-semi);
  letter-spacing: var(--sp-wide); text-transform: uppercase;
  color: var(--text-muted);
}

/* ─── 3. Layout ────────────────────────────────────────────────────────── */

/* Rammen gaelder <main> direkte, ikke en liste af klasser. Listen blev ved
   med at glemme nogen: brugtsiderne (361) og haandbogen (14) gik fra kant
   til kant, fordi deres klasse ikke stod i den. Hver side har ét <main>, og
   de skal alle have samme ramme som menuen. */
main {
  max-width: var(--bredde); margin: 0 auto; padding: 0 var(--luft);
}


.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: 56px; background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
/* Logo og menu skal flugte med indholdet nedenunder. Foer stod der
   margin: 0 auto paa boernene i en flexboks, og det skubbede dem ~50 px uden
   for indholdets kant. Headeren faar i stedet samme indre bredde som <main>:
   halvdelen af den overskydende bredde plus --luft, dog mindst --luft. */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding-inline: max(var(--luft), calc((100% - var(--bredde)) / 2 + var(--luft)));
}

.site-header .logo {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-lg); font-weight: var(--v-bold);
  letter-spacing: var(--sp-tight); flex-shrink: 0;
}
.logo__plade { flex-shrink: 0; display: block; }
.logo__ord { white-space: nowrap; }
.logo__tld { color: var(--text-muted); font-weight: var(--v-medium); }

/* Mod mørk baggrund forsvinder pladens sorte ramme. En tynd lys ring
   holder formen adskilt fra baggrunden. */
@media (prefers-color-scheme: dark) {
  .logo__plade rect:first-child { stroke: #3a4048; }
}

.site-header nav { display: flex; align-items: center; gap: var(--s4); }
.site-header nav a {
  font-size: var(--t-base); font-weight: var(--v-medium); color: var(--text-muted);
}
.site-header nav a:hover { color: var(--text); }
.site-header nav a.nav-cta {
  background: var(--text); color: var(--text-invers);
  border-radius: var(--r-rund); padding: .44rem .9rem;
  font-weight: var(--v-medium);
}
.site-header nav a.nav-cta:hover { background: var(--text-soft); color: var(--text-invers); }

.site-footer {
  margin-top: var(--s9); background: var(--bg-invers); color: #a8adb5;
  font-size: var(--t-sm); line-height: var(--lh-snug);
}
.site-footer__indhold {
  max-width: var(--bredde); margin: 0 auto;
  padding: var(--s7) var(--luft) var(--s6);
  display: grid; gap: var(--s4);
}
.site-footer strong { color: var(--text-invers); font-weight: var(--v-semi); }
.site-footer a { color: #cfd3d9; text-decoration-color: rgba(242, 183, 5, .5); }
.site-footer a:hover { color: #fff; }
.site-footer p { max-width: var(--prosa); }

/* ─── 4. Komponenter ──────────────────────────────────────────────────── */

/* Knapper */
.knap {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--h-rør); padding: 0 var(--s5);
  border: 1px solid transparent; border-radius: var(--r-rund);
  font-size: var(--t-base); font-weight: var(--v-medium); cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--tid) var(--ease), border-color var(--tid) var(--ease), transform var(--tid) var(--ease);
}
.knap:active { transform: translateY(1px); }
.knap--primaer { background: var(--text); color: var(--text-invers); }
.knap--primaer:hover { background: var(--text-soft); color: var(--text-invers); }
.knap--sekundaer { background: var(--bg); color: var(--text); border-color: var(--border-strong); }
.knap--sekundaer:hover { background: var(--bg-alt); border-color: var(--text-muted); color: var(--text); }
.knap--gul { background: var(--gul); color: var(--text); }
.knap--gul:hover { background: #e0a904; color: var(--text); }

.linkknap {
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--gul); text-underline-offset: 3px;
}

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: .14rem .45rem; border-radius: var(--r-sm);
  font-size: var(--t-xs); font-weight: var(--v-semi);
  letter-spacing: var(--sp-snug); white-space: nowrap;
  background: rgba(20, 22, 26, .82); color: #fff;
  backdrop-filter: blur(6px);
}
.badge--gul   { background: var(--gul);    color: var(--text); }
.badge--ok    { background: var(--ok-bg);  color: var(--ok); }
.badge--blank { background: rgba(255,255,255,.92); color: var(--text); }

/* Sektioner */
.sektion { padding: var(--s7) 0; }
.sektion > h2, .sektion--kort > h2 {
  font-size: var(--t-2xl); letter-spacing: var(--sp-tight); margin-bottom: var(--s3);
}
/* Ét mål for al brødtekst. Overskrifter, tabeller og nøgletal fylder bredden. */
.sektion p, .sektion--kort p, .sektion__manchet, .bil-hero__manchet,
.bil-hero__variant, .forbehold p, .note, .vaelger .kilde,
.specs-sektion .kilde, .sektion .kilde, #alle-tilbud .kilde {
  max-width: var(--prosa);
}
.sektion p { color: var(--text-soft); }
.sektion p + p { margin-top: var(--s3); }
.sektion--kort {
  padding: var(--s7) 0; border-top: 1px solid var(--border);
}
.sektion__manchet { color: var(--text-soft); margin-bottom: var(--s5); }
.sektion__knapper { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

.sek-hoved {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s4);
}

/* Nummererede kort */
.kort-grid {
  display: grid; gap: var(--s4); margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.kort {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s4);
}
.kort__nr {
  font-family: var(--mono); font-size: var(--t-sm); font-weight: var(--v-semi);
  color: var(--gul-tekst); background: var(--gul-bg);
  width: 24px; height: 24px; border-radius: var(--r-sm);
  display: grid; place-items: center; margin-bottom: var(--s3);
}
.kort h3 { font-size: var(--t-md); margin-bottom: var(--s2); }
.kort p { font-size: var(--t-base); color: var(--text-soft); max-width: var(--prosa); }

/* Noter, kilder, forbehold */
.note {
  background: var(--gul-bg); border: 1px solid var(--gul-streg);
  border-radius: var(--r); padding: var(--s3) var(--s4);
  font-size: var(--t-base); color: var(--gul-tekst); margin: var(--s4) 0;
}
.note strong { font-weight: var(--v-semi); }

.kilde { font-size: var(--t-sm); color: var(--text-muted); line-height: var(--lh-snug); }
.kilde a { color: var(--text-muted); }

.forbehold {
  border-top: 1px solid var(--border); padding: var(--s6) 0 var(--s7);
  font-size: var(--t-sm); color: var(--text-muted);
}
.forbehold h2 {
  font-size: var(--t-xs); font-weight: var(--v-semi);
  letter-spacing: var(--sp-wide); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--s3);
}
.forbehold p { max-width: var(--prosa); }
.forbehold p + p { margin-top: var(--s2); }

/* Kvalitetsstempel: kilde og dato */
.stempel {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  font-size: var(--t-xs); color: var(--text-muted); line-height: var(--lh-snug);
}
.stempel__dato { font-family: var(--mono); }
.stempel__skil { color: var(--border-strong); }

/* ─── Hero ────────────────────────────────────────────────────────────── */

.hero-ny { padding: var(--s8) 0 var(--s6); }
.hero-ny__over {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  margin-bottom: var(--s4);
  font-size: var(--t-xs); font-weight: var(--v-semi);
  letter-spacing: var(--sp-wide); text-transform: uppercase; color: var(--text-muted);
}
.hero-ny__maerkat {
  background: var(--gul-bg); color: var(--gul-tekst);
  border: 1px solid var(--gul-streg); border-radius: var(--r-rund);
  padding: .2rem .6rem; text-transform: none; letter-spacing: var(--sp-snug);
  font-weight: var(--v-medium);
}
.hero-ny h1 {
  font-size: clamp(2rem, 5.4vw, var(--t-4xl));
  letter-spacing: var(--sp-tight); font-weight: var(--v-bold);
}
.hero-ny__manchet {
  margin-top: var(--s4); max-width: var(--prosa);
  font-size: var(--t-lg); line-height: var(--lh-snug); color: var(--text-soft);
}
.hero-ny__knapper { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--s6);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-alt); overflow: hidden;
}
.hero-stats > div {
  flex: 1 1 0; min-width: 96px; padding: var(--s3) var(--s4);
  border-right: 1px solid var(--border);
}
.hero-stats > div:last-child { border-right: 0; }
.hero-stats dt {
  font-size: var(--t-sm); font-weight: var(--v-normal); color: var(--text-muted);
}
.hero-stats dd {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-xl); font-weight: var(--v-medium);
  letter-spacing: var(--sp-tight); margin-top: 2px;
}

/* ─── Vælger: chips, filtre, sortering ───────────────────────────────── */

.vaelger { padding: var(--s5) 0 var(--s7); scroll-margin-top: 72px; }

/* Knapperne ombrydes. De laa foer i en vandret scroller, og med 13 kategorier
   stod halvdelen uden for skaermen uden at noget antydede, der var mere.
   Et filter, man ikke kan se, findes ikke. */
.chips {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-bottom: var(--s3); padding-bottom: 2px;
}

.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: .34rem var(--s3); border-radius: var(--r-rund);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: var(--t-base); font-weight: var(--v-medium);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--tid) var(--ease), border-color var(--tid) var(--ease), color var(--tid) var(--ease);
}
.chip:hover { border-color: var(--border-strong); }
.chip--valgt { background: var(--text); color: var(--text-invers); border-color: var(--text); }
.chip__tal {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: var(--v-medium);
  padding: 0 4px; border-radius: var(--r-sm);
  background: var(--bg-alt); color: var(--text-muted);
}
.chip--valgt .chip__tal { background: rgba(255,255,255,.16); color: rgba(255,255,255,.92); }

.vaerktoej {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  padding: var(--s3) 0; border-top: 1px solid var(--border);
}
.vaerktoej::-webkit-scrollbar { display: none; }

.filtre { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; flex: 1 1 auto; }
.filtre label { display: block; }
.filtre input, .filtre select {
  font: inherit; font-size: var(--t-base); min-height: var(--h-felt);
  padding: 0 var(--s3); border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg); color: var(--text); appearance: none; flex-shrink: 0;
}
.filtre input[type=search] { flex: 1; min-width: 190px; width: 100%; }
.filtre select {
  cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s2) center; background-size: 14px;
}
/* `outline: none` stod her før og fjernede ringen netop på de kontroller,
   en tastaturbruger har mest brug for den. Musebrugere ser stadig kun
   kanten skifte farve, fordi :focus-visible ikke udløses af et klik. */
.filtre input:focus, .filtre select:focus { border-color: var(--text); }
.filtre input:focus:not(:focus-visible),
.filtre select:focus:not(:focus-visible) { outline: none; }

/* Leasingtype er et enten-eller, ikke en skala, så den får afkrydsningsfelter
   frem for endnu en rulleliste. Ingen afkrydsning betyder alle typer — det er
   den forventede startposition, når man ikke har valgt noget. */
.leasingfilter {
  display: flex; align-items: center; gap: var(--s3);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 0 var(--s3); min-height: var(--h-felt);
  flex-shrink: 0; margin: 0;
}
.leasingfilter legend {
  float: left; padding: 0 var(--s2) 0 0; margin: 0;
  font-size: var(--t-sm); color: var(--text-muted); white-space: nowrap;
}
.leasingfilter label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-base); white-space: nowrap; cursor: pointer;
}
.leasingfilter input[type=checkbox] {
  width: 15px; height: 15px; margin: 0; accent-color: var(--text); cursor: pointer;
}
.leasingfilter__hint { font-size: var(--t-sm); color: var(--text-muted); }

@media (max-width: 720px) {
  .leasingfilter__hint { display: none; }
}

.sortering { display: flex; align-items: center; gap: var(--s1); flex-shrink: 0; }
.sortering__navn {
  font-size: var(--t-xs); font-weight: var(--v-medium); letter-spacing: var(--sp-wide);
  text-transform: uppercase; color: var(--text-muted); margin-right: var(--s1);
}
.sortpille {
  padding: .28rem var(--s3); border-radius: var(--r-rund);
  border: 1px solid transparent; background: transparent; color: var(--text-muted);
  font-size: var(--t-base); cursor: pointer; white-space: nowrap;
}
.sortpille:hover { color: var(--text); }
.sortpille--valgt {
  background: var(--bg-alt); color: var(--text);
  border-color: var(--border-strong); font-weight: var(--v-medium);
}

.visning { display: flex; gap: 2px; padding: 2px; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--r); flex-shrink: 0; }
.visning button {
  padding: .22rem var(--s3); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-muted);
  font-size: var(--t-sm); font-weight: var(--v-medium); cursor: pointer;
}
.visning button[aria-pressed="true"] { background: var(--bg); color: var(--text); box-shadow: var(--skygge); }

.vaelger__status {
  font-size: var(--t-sm); color: var(--text-muted);
  padding: var(--s3) 0; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  flex-wrap: wrap;
}
.vaelger__intet { padding: var(--s8) 0; text-align: center; color: var(--text-muted); }

/* ─── Bilkort ─────────────────────────────────────────────────────────── */

.bilkort-grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(min(258px, 100%), 1fr));
}
.bilkort {
  display: flex; flex-direction: column; position: relative;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--tid) var(--ease), box-shadow var(--tid) var(--ease);
}
.bilkort:hover { border-color: var(--border-strong); box-shadow: var(--skygge-lg); }
.bilkort[hidden] { display: none; }
.bilkort--valgt { border-color: var(--gul); box-shadow: 0 0 0 1px var(--gul); }

.bilkort__link { display: flex; flex-direction: column; flex: 1; color: inherit; }

.bilkort__billede {
  position: relative; aspect-ratio: 16 / 10;
  background: var(--bg-muted); border-bottom: 1px solid var(--border); overflow: hidden;
}
.bilkort__billede img { width: 100%; height: 100%; object-fit: cover; }

/* Pladsholder: modelnavnet i monofont. Ingen fup-grafik. */
.bilkort__intetbillede {
  display: grid; place-items: center; height: 100%; padding: var(--s4);
  font-family: var(--mono); font-size: var(--t-xl); font-weight: var(--v-medium);
  letter-spacing: var(--sp-tight); color: var(--text-hint); text-align: center;
}
.bilkort__intetbillede span { display: block; font-size: var(--t-xs); letter-spacing: var(--sp-wide);
  text-transform: uppercase; margin-top: var(--s2); color: var(--border-strong); }

.bilkort__maerkat {
  position: absolute; top: var(--s3); left: var(--s3);
  padding: .14rem .45rem; border-radius: var(--r-sm);
  background: rgba(255,255,255,.92); color: var(--text-soft);
  font-size: var(--t-xs); font-weight: var(--v-semi);
  letter-spacing: var(--sp-snug);
  box-shadow: 0 1px 2px rgba(20,22,26,.06);
}
.bilkort__badges {
  position: absolute; top: var(--s3); right: var(--s3);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1);
}

.bilkort__krop {
  display: flex; flex-direction: column; gap: var(--s4); flex: 1;
  padding: var(--s4);
}

.bilkort__navnblok { display: grid; gap: 2px; }
.bilkort__navn { font-size: var(--t-lg); letter-spacing: var(--sp-tight); }
.bilkort__variant {
  font-size: var(--t-sm); color: var(--text-muted);
  line-height: var(--lh-snug); overflow-wrap: anywhere;
}

.bilkort__prisblok { display: grid; gap: 3px; }
.bilkort__pris { display: flex; align-items: baseline; gap: var(--s2); }
.bilkort__belob {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.6rem; font-weight: var(--v-medium);
  letter-spacing: var(--sp-tight); line-height: 1.1;
}
.bilkort__valuta { font-size: var(--t-base); color: var(--text-muted); font-weight: var(--v-medium); }
.bilkort__vilkaar {
  font-size: var(--t-sm); color: var(--text-muted); line-height: var(--lh-snug);
}
.bilkort__vilkaar--tom { font-family: var(--sans); font-style: italic; }
.bilkort__hint {
  font-size: var(--t-xs); font-weight: var(--v-medium); color: var(--ok);
  margin-top: 1px;
}
.bilkort__hint::after { content: " \2192"; }

/* Målene: rolige labels, tallene i mono så kolonnerne flugter */
.bilkort__felter {
  display: grid; gap: 0;
  padding-top: var(--s2); border-top: 1px solid var(--border); margin-top: auto;
}
.bilkort__felter > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); padding: .3rem 0;
  border-bottom: 1px solid var(--border);
}
.bilkort__felter > div:last-child { border-bottom: 0; }
.bilkort__felter dt {
  font-size: var(--t-sm); font-weight: var(--v-normal);
  color: var(--text-muted); white-space: nowrap;
}
.bilkort__felter dd {
  font-size: var(--t-base); font-weight: var(--v-semi);
  letter-spacing: var(--sp-snug); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bilkort__intet {
  padding-top: var(--s3); border-top: 1px solid var(--border);
  font-size: var(--t-sm); color: var(--text-muted);
}

.bilkort__fod {
  padding-top: var(--s3); border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); flex-wrap: wrap;
  font-size: var(--t-xs); color: var(--text-hint);
}
.bilkort__fod .daekning__tal { color: var(--text-muted); }

.bilkort__vaelg {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--border); background: var(--bg-alt);
  font-size: var(--t-sm); font-weight: var(--v-medium); color: var(--text-muted);
  cursor: pointer; user-select: none;
}
.bilkort__vaelg input { accent-color: var(--gul); width: 15px; height: 15px; cursor: pointer; }
.bilkort__vaelg:hover { color: var(--text); }

/* Dækningsmåler */
.daekning { display: flex; align-items: center; gap: var(--s2); }
.daekning__bar {
  width: 46px; height: 4px; border-radius: var(--r-rund);
  background: var(--bg-muted); overflow: hidden; flex-shrink: 0;
}
.daekning__fyld { height: 100%; background: var(--ok); border-radius: var(--r-rund); }
.daekning--lav .daekning__fyld { background: var(--advarsel); }
.daekning__tal { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-muted); }

/* ─── Tabelvisning ───────────────────────────────────────────────────── */

.bilkort-grid--tabel { display: block; overflow-x: auto; }
.bilkort-grid--tabel .bilkort { border: 0; border-radius: 0; border-bottom: 1px solid var(--border); box-shadow: none; }
.bilkort-grid--tabel .bilkort:hover { background: var(--bg-alt); box-shadow: none; }
.bilkort-grid--tabel .bilkort__link { flex-direction: row; align-items: center; gap: var(--s4); padding: var(--s3) 0; }
.bilkort-grid--tabel .bilkort__billede {
  width: 104px; flex-shrink: 0; aspect-ratio: 16 / 10;
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
}
.bilkort-grid--tabel .bilkort__intetbillede { font-size: var(--t-sm); }
.bilkort-grid--tabel .bilkort__intetbillede span { display: none; }
.bilkort-grid--tabel .bilkort__badges,
.bilkort-grid--tabel .bilkort__maerkat { display: none; }
.bilkort-grid--tabel .bilkort__krop {
  flex-direction: row; align-items: center; gap: var(--s5); padding: 0; flex: 1;
}
.bilkort-grid--tabel .bilkort__navnblok { min-width: 160px; flex: 1; }
.bilkort-grid--tabel .bilkort__prisblok { min-width: 150px; }
.bilkort-grid--tabel .bilkort__felter {
  border: 0; padding: 0; flex: 2;
  grid-template-columns: repeat(4, minmax(78px, 1fr));
}
.bilkort-grid--tabel .bilkort__felter > div {
  flex-direction: column; align-items: flex-end; gap: 0;
  padding: 0; border-bottom: 0;
}
.bilkort-grid--tabel .bilkort__intet { border: 0; padding: 0; flex: 2; }
.bilkort-grid--tabel .bilkort__fod { border: 0; padding: 0; margin: 0; min-width: 120px; justify-content: flex-end; }
.bilkort-grid--tabel .bilkort__vaelg { border: 0; background: none; padding: 0 0 0 var(--s3); }

/* ─── Sammenligning ──────────────────────────────────────────────────── */

.smb-bar {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-bar);
  background: var(--bg-invers); color: var(--text-invers);
  padding: var(--s3) var(--luft);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s3);
  opacity: 0; visibility: hidden; transform: translateY(100%);
  transition: opacity var(--tid) var(--ease), visibility var(--tid) var(--ease), transform var(--tid) var(--ease);
}
.smb-bar--aaben { opacity: 1; visibility: visible; transform: none; }
.smb-bar__venstre { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.smb-bar__navn { font-size: var(--t-sm); color: #a8adb5; }
.smb-bar__emner { display: flex; gap: var(--s2); flex-wrap: wrap; }
.smb-bar__emne {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: rgba(255,255,255,.12); border-radius: var(--r-sm);
  padding: .2rem var(--s2); font-size: var(--t-xs); font-weight: var(--v-medium);
}
.smb-bar__fjern { background: none; border: 0; cursor: pointer; opacity: .6; line-height: 1; padding: 0 2px; }
.smb-bar__fjern:hover { opacity: 1; }
.smb-bar__hoejre { display: flex; align-items: center; gap: var(--s3); }
.smb-bar__ryd { background: none; border: 0; color: #a8adb5; font-size: var(--t-sm); cursor: pointer; text-decoration: underline; }
.smb-bar__ryd:hover { color: #fff; }

.smb-bg {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(20, 22, 26, .55); backdrop-filter: blur(2px);
  display: none; align-items: flex-start; justify-content: center;
  padding: var(--s5) var(--s3); overflow-y: auto;
}
.smb-bg--aaben { display: flex; }

.smb-modal {
  background: var(--bg); border-radius: var(--r-lg);
  width: 100%; max-width: 940px; overflow: hidden; box-shadow: var(--skygge-lg);
}
.smb-modal__hoved {
  background: var(--bg-invers); color: var(--text-invers);
  padding: var(--s3) var(--s4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.smb-modal__hoved h2 { font-size: var(--t-lg); color: var(--text-invers); }
.smb-modal__luk {
  background: none; border: 0; color: var(--text-invers); cursor: pointer;
  font-size: var(--t-xl); line-height: 1; padding: 0 var(--s2); opacity: .7;
}
.smb-modal__luk:hover { opacity: 1; }
.smb-modal__krop { overflow-x: auto; }
.smb-modal__fod {
  padding: var(--s3) var(--s4); border-top: 1px solid var(--border);
  background: var(--bg-alt); font-size: var(--t-xs); color: var(--text-muted);
}

.smb-tabel { width: 100%; border-collapse: collapse; }
.smb-tabel th, .smb-tabel td {
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: middle; white-space: nowrap;
}
.smb-tabel thead th {
  background: var(--bg-alt); font-size: var(--t-sm); font-weight: var(--v-semi);
  letter-spacing: var(--sp-snug); position: sticky; top: 0;
}
.smb-tabel thead th small { display: block; font-weight: var(--v-normal); color: var(--text-muted); font-size: var(--t-xs); }
.smb-tabel td {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-base); text-align: right;
}
.smb-tabel td.smb-tabel__navn { text-align: left; }
.smb-tabel thead th:not(:first-child) { text-align: right; }
.smb-tabel__navn {
  font-family: var(--sans) !important; font-size: var(--t-xs) !important;
  font-weight: var(--v-medium); letter-spacing: var(--sp-wide); text-transform: uppercase;
  color: var(--text-muted); background: var(--bg-alt); white-space: normal;
}
.smb-tabel td.bedst { color: var(--ok); font-weight: var(--v-semi); }
.smb-tabel__gruppe th {
  text-align: left; padding-top: var(--s5); font-size: var(--t-xs); font-weight: var(--v-semi);
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted);
}
.smb-tabel td.bedst::after { content: " ●"; font-size: .6em; vertical-align: middle; }
.smb-tabel td.tom { color: var(--text-hint); }

/* ─── Tabeller (model- og oversigtsside) ─────────────────────────────── */

.tilbud-tabel-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
.tilbud-tabel { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.tilbud-tabel thead th {
  background: var(--bg-alt); font-size: var(--t-xs); font-weight: var(--v-semi);
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted);
  text-align: left; white-space: nowrap;
}
.tilbud-tabel th, .tilbud-tabel td {
  padding: var(--s3); border-bottom: 1px solid var(--border); vertical-align: top;
}
.tilbud-tabel tbody tr:hover { background: var(--bg-alt); }
.tilbud-tabel tbody tr:last-child td { border-bottom: 0; }
.tilbud-tabel .tal { text-align: right; white-space: nowrap; }
/* Rækkens navn står til venstre som resten af tabellen (04-10-2026). */
.tilbud-tabel tbody th { text-align: left; }
.tal--stor { font-size: var(--t-md); font-weight: var(--v-medium); }
.tal--afledt { background: var(--gul-bg); }

/* Udstyrstabellen: én kolonne pr. udstyrsniveau. Rækkeoverskriften står fast,
   når tabellen rulles vandret på en telefon. */
.udstyr-tabel tbody th[scope="row"] {
  font-weight: var(--v-medium); text-align: left; white-space: nowrap;
  position: sticky; left: 0; background: var(--bg); z-index: 1;
}
.udstyr-tabel thead th:first-child { position: sticky; left: 0; z-index: 2; }
@media (max-width: 640px) {
  .udstyr-tabel tbody th[scope="row"] { white-space: normal; min-width: 7rem; max-width: 8.5rem; }
  .udstyr-tabel td { min-width: 6.5rem; }
  .udstyr-tabel th, .udstyr-tabel td { padding: var(--s2) var(--s3); }
}
.udstyr-tabel tbody tr:hover th[scope="row"] { background: var(--bg-alt); }
.udstyr-tabel td { min-width: 7.5rem; }
.udstyr__gruppe th {
  background: var(--bg-muted); font-size: var(--t-xs); font-weight: var(--v-semi);
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-soft); text-align: left;
}
.udstyr__fra { display: block; font-weight: var(--v-normal); text-transform: none; letter-spacing: 0; }
.udstyr__tilbud {
  display: inline-block; margin-top: 4px; padding: 1px 6px; border-radius: var(--r-rund);
  background: var(--gul-bg); color: var(--gul-tekst); font-weight: var(--v-medium);
  text-transform: none; letter-spacing: 0;
}
.udstyr__v { display: block; font-weight: var(--v-medium); white-space: nowrap; }
.udstyr__note { display: block; font-size: var(--t-xs); color: var(--text-muted); line-height: var(--lh-snug); margin-top: 2px; }
.udstyr--std .udstyr__v { color: var(--ok); }
.udstyr--std .udstyr__v::before { content: "✓ "; }
.udstyr--nej .udstyr__v, .udstyr--ukendt .udstyr__v { color: var(--text-muted); font-weight: var(--v-normal); }
.udstyr--ukendt .udstyr__v { font-style: italic; }

.udstyr-tabel .udstyr__niv { color: var(--text-muted); font-size: var(--t-sm); white-space: nowrap; min-width: 0; }
.udstyr-tabel--tvaers td:not(.udstyr__niv) { border-right: 1px solid var(--border); }
.udstyr-indeks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.udstyr-indeks li {
  display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline;
  padding: var(--s3) 0; border-bottom: 1px solid var(--border);
}
.udstyr-indeks a { font-weight: var(--v-medium); }
.udstyr-indeks__tal { color: var(--text-muted); font-size: var(--t-sm); white-space: nowrap; }

.udbyder-navn { display: block; font-weight: var(--v-semi); }
.udbyder-vilkaar { display: block; font-size: var(--t-xs); color: var(--text-muted); }

.specs-sektion { padding: var(--s7) 0; border-top: 1px solid var(--border); }
.specs-sektion h2 { font-size: var(--t-2xl); margin-bottom: var(--s4); }
/* Specifikationerne som gitter, så de fylder spalten i stedet for at
   efterlade den højre halvdel tom. Samme opbygning som kortenes måletal:
   etiket til venstre, tal højrestillet. */
.specs-grid {
  display: grid; gap: 0 var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.specs-grid > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); padding: var(--s3) 0;
  border-bottom: 1px solid var(--border);
}
.specs-grid dt { color: var(--text-muted); }
.specs-grid dd {
  font-weight: var(--v-semi); text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Varianten er tekst, ikke et tal, og skal have plads til at ombryde */
.specs-grid > div.specs-grid--tekst { grid-column: 1 / -1; }
.specs-grid > div.specs-grid--tekst dd { font-family: var(--sans); text-align: right; max-width: 30rem; }

/* Modelside-hero */
.breadcrumb { padding: var(--s4) 0 0; font-size: var(--t-sm); color: var(--text-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s2); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--s2); color: var(--border-strong); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb [aria-current="page"] { color: var(--text); }

.bil-hero { padding: var(--s5) 0 var(--s6); }
.bil-maerke { font-size: var(--t-sm); font-weight: var(--v-medium); color: var(--text-muted); }
.bil-hero h1 { font-size: clamp(1.6rem, 4.2vw, var(--t-3xl)); margin-top: var(--s2); }
.bil-hero__manchet { margin-top: var(--s3); color: var(--text-soft); }

.noegletal {
  display: flex; flex-wrap: wrap; margin-top: var(--s5);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-alt); overflow: hidden;
}
.noegletal div { flex: 1 1 0; min-width: 104px; padding: var(--s3); border-right: 1px solid var(--border); }
.noegletal div:last-child { border-right: 0; }
.noegletal dt { font-size: var(--t-sm); font-weight: var(--v-normal); color: var(--text-muted); }
.noegletal dd { font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-lg); font-weight: var(--v-medium); margin-top: 2px;
  white-space: nowrap; }

/* Oversigtsside */
.bil-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.bil-kort {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: border-color var(--tid) var(--ease), box-shadow var(--tid) var(--ease);
}
.bil-kort:hover { border-color: var(--border-strong); box-shadow: var(--skygge-lg); }
.bil-kort a { display: block; padding: var(--s4); }
.bil-kort strong { display: block; font-size: var(--t-md); font-weight: var(--v-semi); }
.bil-kort .fra { display: block; font-family: var(--mono); font-size: var(--t-base); margin-top: var(--s2); }
.bil-kort .meta { display: block; font-size: var(--t-xs); color: var(--text-muted); margin-top: var(--s1); }

/* Priskort (tilbudstjek) */
.pris-grid { display: grid; gap: var(--s4); margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.pris-kort {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5);
}
.pris-kort--fremhaevet { border-color: var(--gul); box-shadow: 0 0 0 1px var(--gul); }
.pris-kort h3 { font-size: var(--t-lg); }
.pris-kort__belob { font-family: var(--mono); font-size: var(--t-3xl); font-weight: var(--v-medium);
  letter-spacing: var(--sp-tight); margin: var(--s3) 0 var(--s1); }
.pris-kort__enhed { font-size: var(--t-sm); color: var(--text-muted); }
.pris-kort ul { margin-top: var(--s4); display: grid; gap: var(--s2); }
.pris-kort li { position: relative; padding-left: var(--s5); font-size: var(--t-base); color: var(--text-soft); }
.pris-kort li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 11px; height: 6px; border-left: 2px solid var(--gul); border-bottom: 2px solid var(--gul);
  transform: rotate(-45deg);
}

/* Gammel hero (tilbudstjek, saadan-tjener-vi-penge) */
.hero { padding: var(--s8) 0 var(--s6); }
.hero h1 { font-size: clamp(1.9rem, 5vw, var(--t-4xl)); font-weight: var(--v-bold); }
.hero__maerkat {
  display: inline-block; background: var(--gul-bg); color: var(--gul-tekst);
  border: 1px solid var(--gul-streg); border-radius: var(--r-rund);
  padding: .2rem .7rem; font-size: var(--t-xs); font-weight: var(--v-medium); margin-bottom: var(--s4);
}
.hero__manchet { margin-top: var(--s4); max-width: var(--prosa); font-size: var(--t-lg);
  line-height: var(--lh-snug); color: var(--text-soft); }
.hero__knapper { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* FAQ */
.faq__punkt { border-bottom: 1px solid var(--border); }
.faq__punkt:first-of-type { border-top: 1px solid var(--border); margin-top: var(--s5); }
.faq__punkt summary {
  cursor: pointer; list-style: none; position: relative;
  padding: var(--s4) var(--s7) var(--s4) 0;
  font-size: var(--t-md); font-weight: var(--v-medium);
}
.faq__punkt summary::-webkit-details-marker { display: none; }
.faq__punkt summary::after {
  content: ""; position: absolute; right: var(--s3); top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.8px solid var(--text-muted); border-bottom: 1.8px solid var(--text-muted);
  transform: rotate(45deg); transition: transform var(--tid) var(--ease);
}
.faq__punkt[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__punkt p { padding: 0 var(--s7) var(--s4) 0; color: var(--text-soft); max-width: var(--prosa); }

/* Udbyderoversigt */
.udbydere { display: grid; gap: var(--s3); margin-top: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)); }
.udbyder {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s4); background: var(--bg);
}
.udbyder__navn { font-size: var(--t-md); font-weight: var(--v-semi); }
.udbyder__tal { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-muted); margin-top: 2px; }
.udbyder__daekning { margin-top: var(--s3); }

/* ─── 5. Mørk tilstand ───────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #101114;
    --bg-alt:        #171a1f;
    --bg-muted:      #1e2228;
    --bg-invers:     #05060a;

    --text:          #f2f2f0;
    --text-soft:     #c9ccd1;
    --text-muted:    #939aa4;
    --fokus:         #f2b705;
    --text-hint:     #7b828e;  /* 4,51:1 — stadig stillere end muted */
    --text-invers:   #f7f7f5;

    --border:        #262a31;
    --border-strong: #3a4048;

    --gul-bg:        #2a2206;
    --gul-tekst:     #f4cd5a;
    --gul-streg:     #4a3c0a;

    --ok:            #4ec08d;
    --ok-bg:         #123527;
    --advarsel:      #e0a355;
    --advarsel-bg:   #33230d;

    --skygge:    0 1px 2px rgba(0, 0, 0, .4);
    --skygge-lg: 0 12px 32px -8px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .35);

    color-scheme: dark;
  }

  .site-header { background: rgba(16, 17, 20, .86); }
  .site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); color: var(--text-muted); }
  .badge { background: rgba(255, 255, 255, .14); }
  .badge--blank { background: rgba(16, 17, 20, .9); color: var(--text); }
  .bilkort__maerkat { background: rgba(16, 17, 20, .88); color: var(--text); }
  .smb-bar, .smb-modal__hoved { background: var(--bg-alt); border-top: 1px solid var(--border); }
  .knap--primaer { background: var(--text); color: var(--bg); }
  .knap--primaer:hover { background: var(--text-soft); color: var(--bg); }
  .site-header nav a.nav-cta { background: var(--gul); color: #14161a; }
  .site-header nav a.nav-cta:hover { background: #ffc61a; color: #14161a; }
  .chip--valgt { background: var(--text); color: var(--bg); border-color: var(--text); }
  .chip--valgt .chip__tal { background: rgba(0,0,0,.2); color: var(--bg); }
}

/* ─── 6. Smalle skærme ───────────────────────────────────────────────── */

@media (max-width: 860px) {
  .bilkort-grid--tabel .bilkort__krop { flex-wrap: wrap; gap: var(--s3); }
  .bilkort-grid--tabel .bilkort__felter { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .site-header { height: 52px; }
  .site-header nav { gap: var(--s3); }
  /* Linkene blev før skjult helt her, uden at der kom noget i stedet — så
     på en telefon kunne man ikke komme til Håndbogen, Bedste tilbud eller
     Brugte biler fra toppen overhovedet. Headeren er sticky og kan ikke
     være to rækker høj uden at æde skærm på hver side, så menuen bliver en
     vandret strimmel med CTA'en først. Bundmenuen har dem alle sammen. */
  .site-header nav {
    min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { white-space: nowrap; flex-shrink: 0; }
  .site-header nav a.nav-cta { order: -1; }

  .hero-ny { padding: var(--s6) 0 var(--s5); }
  .hero-stats > div { min-width: 50%; border-bottom: 1px solid var(--border); }
  .hero-stats > div:nth-child(2n) { border-right: 0; }
  .hero-stats dd { font-size: var(--t-lg); }

  .vaerktoej { flex-wrap: wrap; overflow: visible; }
  .filtre { flex-wrap: wrap; min-width: 0; width: 100%; }
  .filtre input[type=search] { min-width: 0; flex: 1 1 100%; }
  .filtre select { flex: 1 1 calc(50% - var(--s1)); }
  .sortering { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .visning { width: 100%; }
  .visning button { flex: 1; }

  .bilkort-grid { grid-template-columns: 1fr; }

  /* Tabelvisning giver ikke mening på en telefon — fald tilbage til kort. */
  .bilkort-grid--tabel { display: grid; grid-template-columns: 1fr; }
  .bilkort-grid--tabel .bilkort { border: 1px solid var(--border); border-radius: var(--r-lg); }
  .bilkort-grid--tabel .bilkort__link { flex-direction: column; padding: 0; }
  .bilkort-grid--tabel .bilkort__billede { width: 100%; border: 0; border-radius: 0;
    border-bottom: 1px solid var(--border); }
  .bilkort-grid--tabel .bilkort__krop { flex-direction: column; padding: var(--s3) var(--s4) var(--s4); }
  .bilkort-grid--tabel .bilkort__felter { border-top: 1px solid var(--border); padding-top: var(--s3); }
  .bilkort-grid--tabel .bilkort__fod { border-top: 1px solid var(--border); padding-top: var(--s3); }

  .smb-bar { padding: var(--s3) var(--s4); }
  .smb-bar__navn { display: none; }
  .noegletal div { min-width: 50%; border-bottom: 1px solid var(--border); }
  .noegletal div:nth-child(2n) { border-right: 0; }
  .site-footer__indhold { padding: var(--s6) var(--luft) var(--s5); }
}

@media print {
  .site-header, .vaerktoej, .chips, .smb-bar, .smb-bg, .bilkort__vaelg { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ─── Specifikationstabel (/varebiler/) ──────────────────────────────── */

.spec-oversigt-wrap {
  margin-top: var(--s6); overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--r-lg);
}
.spec-oversigt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-base); }

.spec-oversigt thead th {
  background: var(--bg-alt); border-bottom: 1px solid var(--border);
  padding: 0; text-align: left; white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.spec-oversigt thead th:last-child {
  padding: var(--s2) var(--s3);
  font-size: var(--t-xs); font-weight: var(--v-semi);
  letter-spacing: var(--sp-wide); text-transform: uppercase; color: var(--text-muted);
}

.spec-sorter {
  display: flex; align-items: center; gap: var(--s1); width: 100%;
  padding: var(--s3); background: none; border: 0; cursor: pointer;
  font-size: var(--t-xs); font-weight: var(--v-semi);
  letter-spacing: var(--sp-wide); text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap;
}
.spec-sorter:hover { color: var(--text); }
.spec-sorter--aktiv { color: var(--text); }
.spec-pil { width: 0; height: 0; border: 3.5px solid transparent; opacity: 0; }
.spec-sorter--aktiv .spec-pil {
  opacity: 1; border-bottom-color: currentColor; border-top-width: 0; margin-top: -3px;
}
.spec-sorter--aktiv.spec-sorter--fald .spec-pil {
  border-bottom-width: 0; border-top-width: 3.5px; border-top-color: currentColor; margin-top: 3px;
}

.spec-oversigt tbody th,
.spec-oversigt tbody td {
  padding: var(--s3); border-bottom: 1px solid var(--border); vertical-align: top;
}
.spec-oversigt tbody tr:last-child th,
.spec-oversigt tbody tr:last-child td { border-bottom: 0; }
.spec-oversigt tbody tr:hover th,
.spec-oversigt tbody tr:hover td { background: var(--bg-alt); }

/* Modelnavnet bliver stående, når tabellen scrolles sidelæns. */
.spec-oversigt tbody th {
  text-align: left; font-weight: var(--v-semi); white-space: nowrap;
  position: sticky; left: 0; z-index: 1; background: var(--bg);
  border-right: 1px solid var(--border);
}
.spec-oversigt thead th.spec-fast { left: 0; z-index: 3; border-right: 1px solid var(--border); }

.spec-variant {
  display: block; font-family: var(--mono); font-size: var(--t-xs);
  font-weight: var(--v-normal); color: var(--text-muted); margin-top: 2px;
  white-space: normal; max-width: 27ch;
}

.spec-oversigt tbody td {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right;
}
.spec-oversigt tbody td.tilbud-tekst,
.spec-oversigt tbody td.tilbud-model,
.spec-oversigt tbody td.spec-kilde { text-align: left; }
/* Kolonnehovedet skal flugte med sin egen kolonne */
.spec-oversigt thead th:not(.spec-fast) .spec-sorter { justify-content: flex-end; }
.spec-oversigt thead th:last-child { text-align: right; }
.spec-oversigt td.tom { color: var(--text-hint); }
.spec-kilde { font-family: var(--sans) !important; font-size: var(--t-xs); }
.spec-kilde a { color: var(--text-muted); text-decoration: underline;
  text-decoration-color: var(--gul-streg); text-underline-offset: 2px; }

@media (max-width: 720px) {
  .spec-oversigt tbody th { position: static; }
  .spec-oversigt thead th.spec-fast { position: sticky; left: auto; }
  .spec-variant { display: none; }
}

/* ─── Postmærker: hvilke driftsposter der er inkluderet ──────────────── */

.postmaerke {
  display: inline-block; margin: 0 3px 2px 0;
  padding: .06rem .42rem; border-radius: var(--r-sm);
  background: var(--ok-bg); color: var(--ok);
  font-family: var(--sans); font-size: var(--t-xs); font-weight: var(--v-medium);
  white-space: nowrap;
}

.bilkort__inkl { font-size: var(--t-xs); color: var(--text-muted); line-height: 1.55; }
.bilkort__inkl--intet { color: var(--advarsel); }

/* ─── Tilbudstabellen ────────────────────────────────────────────────── */

.tilbud-model { font-family: var(--sans) !important; white-space: normal !important; min-width: 150px; }
.tilbud-model a { text-decoration: underline; text-decoration-color: var(--gul-streg); text-underline-offset: 2px; }
.tilbud-tekst { font-family: var(--sans) !important; white-space: normal !important; }
.spec-oversigt tbody tr.tilbud-bedst th,
.spec-oversigt tbody tr.tilbud-bedst td { background: var(--ok-bg); }
.spec-oversigt tbody tr.tilbud-bedst:hover th,
.spec-oversigt tbody tr.tilbud-bedst:hover td { background: #daeee4; }
.spec-oversigt tbody tr[hidden] { display: none; }
.spec-oversigt td .tom { color: var(--text-hint); font-family: var(--sans); }

#alle-tilbud .vaerktoej { justify-content: space-between; }
#alle-tilbud .filtre { flex: 0 1 auto; }

@media (prefers-color-scheme: dark) {
  .spec-oversigt tbody tr.tilbud-bedst th,
  .spec-oversigt tbody tr.tilbud-bedst td { background: #12281f; }
  .spec-oversigt tbody tr.tilbud-bedst:hover th,
  .spec-oversigt tbody tr.tilbud-bedst:hover td { background: #163326; }
}

/* ─── Ranglister (/bedste-tilbud/) ───────────────────────────────────── */

.rangsektion {
  display: grid; gap: var(--s5); margin: var(--s6) 0 var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.rangblok {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg); padding: var(--s4) var(--s4) var(--s3);
}
.rangblok h3 { font-size: var(--t-lg); letter-spacing: var(--sp-snug); }
.rangblok__kriterium {
  font-size: var(--t-sm); color: var(--text-muted);
  margin: var(--s2) 0 var(--s4); line-height: var(--lh-snug);
}
.rangblok__kriterium strong { color: var(--text-soft); font-weight: var(--v-semi); }
.rangblok .kilde { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); }

.rangliste { display: grid; gap: 1px; background: var(--border); border-radius: var(--r); overflow: hidden; }

.rang {
  display: grid; grid-template-columns: 26px 1fr auto;
  gap: var(--s3); align-items: baseline;
  background: var(--bg); padding: var(--s3);
}
.rang:hover { background: var(--bg-alt); }
.rang:first-child { background: var(--gul-bg); }
.rang:first-child:hover { background: #fbefc8; }

.rang__nr {
  font-family: var(--mono); font-size: var(--t-sm); font-weight: var(--v-semi);
  color: var(--text-muted); text-align: right;
}
.rang:first-child .rang__nr { color: var(--gul-tekst); }

.rang__krop { display: grid; gap: 1px; min-width: 0; }
.rang__navn { font-size: var(--t-base); font-weight: var(--v-semi); letter-spacing: var(--sp-snug); }
.rang__navn:hover { text-decoration: underline; text-decoration-color: var(--gul); text-underline-offset: 3px; }
.rang__udbyder { font-size: var(--t-xs); color: var(--text-muted); }
.rang__vilkaar { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-hint); }

.rang__tal {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-md); font-weight: var(--v-medium);
  white-space: nowrap; text-align: right;
}
.rang:first-child .rang__tal { color: var(--gul-tekst); font-weight: var(--v-semi); }

.udbyder__navn a:hover { text-decoration: underline; text-decoration-color: var(--gul); text-underline-offset: 3px; }

@media (max-width: 720px) {
  .rangsektion { grid-template-columns: 1fr; }
  .rang { grid-template-columns: 22px 1fr; }
  .rang__tal { grid-column: 2; text-align: left; }
}

@media (prefers-color-scheme: dark) {
  .rang:first-child { background: #241d05; }
  .rang:first-child:hover { background: #2e2408; }
}

/* ─── Modelsidens hero: tekst og billede side om side ────────────────── */

.bil-hero {
  display: grid; gap: var(--s5); align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--s5) 0 var(--s6);
}

/* Kun modelsiderne har et hero-billede. Oversigtssiderne bruger samme hero
   uden billede, og der skal teksten have hele bredden — ellers stopper
   manchetten midt på siden med tomt rum ved siden af. */
.bil-hero:has(.bil-hero__billede) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
}
.bil-hero__tekst { min-width: 0; }
.bil-hero__variant {
  margin-top: var(--s3); font-size: var(--t-sm); color: var(--text-muted);
}
/* Udstyr i kort form under manchetten, og knapper der hopper ned på siden. */
.bil-hero__udstyr {
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  border-left: 3px solid var(--gul); background: var(--bg-alt);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--t-base); color: var(--text-soft); line-height: var(--lh-snug);
}
.bil-hero__udstyr p + p { margin-top: var(--s2); }
.bil-hero__udstyr strong { color: var(--text); font-weight: var(--v-semi); }
.hoplinks { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.hoplinks a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-rund);
  font-size: var(--t-sm); font-weight: var(--v-medium); color: var(--text); text-decoration: none;
  background: var(--bg); transition: background var(--tid) var(--ease), border-color var(--tid) var(--ease);
}
.hoplinks a::after { content: "↓"; color: var(--text-muted); }
.hoplinks a:first-child { background: var(--text); border-color: var(--text); color: var(--text-invers); }
.hoplinks a:first-child::after { color: inherit; }
.hoplinks a:hover { border-color: var(--text-muted); background: var(--bg-alt); }
.hoplinks a:first-child:hover { background: var(--text-soft); }
#tilbud, #udstyr, #specifikationer, #opladning { scroll-margin-top: 72px; }

/* Tilbudstabellen ligger lige under nøgletallene; fuld sektionsluft er for meget. */
.sektion--taet { padding-top: var(--s5); }

.bil-hero__billede {
  aspect-ratio: 16 / 10; background: var(--bg-muted);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; position: relative;
}
.bil-hero__billede img { width: 100%; height: 100%; object-fit: cover; }
.bil-hero__billede .bilkort__intetbillede { font-size: var(--t-2xl); }

/* Reglen med :has() ovenfor vejer tungere end .bil-hero alene, saa den
   skal naevnes her - ellers stod billede og tekst side om side paa mobil,
   og noegletallene loeb ud over kanten. */
@media (max-width: 860px) {
  .bil-hero, .bil-hero:has(.bil-hero__billede) {
    grid-template-columns: minmax(0, 1fr); gap: var(--s4);
  }
  .bil-hero__billede { order: -1; }
}

/* En leasingtype vi har udledt af en oplyst restværdi, ikke læst direkte hos
   udbyderen. Stjernen og den stiplede streg siger at tallet er vores slutning. */
.udledt {
  text-decoration: underline dotted; text-underline-offset: 2px;
  cursor: help; border: 0;
}

/* ─── Guidekort på /bedste-tilbud/ ─────────────────────────────────────────
   Hvert kort er en indgang til en landingsside. Tallet står øverst, fordi det
   er det, der siger om guiden er værd at klikke på: en guide med tre tilbud
   lover mindre end en med halvtreds. */
.guidegrid {
  list-style: none; margin: var(--s5) 0 0; padding: 0;
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.guidekort { margin: 0; }
.guidekort__link {
  display: flex; flex-direction: column; gap: var(--s2);
  height: 100%; padding: var(--s4);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg); color: inherit; text-decoration: none;
  transition: border-color .12s, transform .12s;
}
.guidekort__link:hover, .guidekort__link:focus-visible {
  border-color: var(--text); transform: translateY(-2px);
}
.guidekort__antal {
  align-self: flex-start;
  font-size: var(--t-sm); font-weight: var(--v-semi);
  font-variant-numeric: tabular-nums;
  padding: .15rem .5rem; border-radius: 999px;
  background: var(--gul); color: #14161a;
}
.guidekort__navn {
  font-size: var(--t-lg); font-weight: var(--v-semi); line-height: 1.25;
}
.guidekort__kort { font-size: var(--t-base); color: var(--text-soft); flex: 1; }
.guidekort__mere {
  font-size: var(--t-sm); font-weight: var(--v-semi);
  text-decoration: underline; text-underline-offset: 3px;
}

/* Tre trin fra behov til aftale */
.trin {
  display: grid; gap: var(--s4); margin-top: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.trin h3 { font-size: var(--t-base); margin: 0 0 var(--s2); }
.trin p { margin: 0; color: var(--text-soft); font-size: var(--t-base); }

/* Links til de øvrige guider, nederst på en guideside */
.guidelinks {
  list-style: none; margin: var(--s3) 0 0; padding: 0;
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.guidelinks a {
  display: block; padding: var(--s3);
  border: 1px solid var(--border); border-radius: var(--r);
  text-decoration: none; color: inherit; font-size: var(--t-base);
}
.guidelinks a:hover, .guidelinks a:focus-visible { border-color: var(--text); }

/* Købsprisen på kortet. Den står under månedsydelsen, fordi de to tal skal
   læses sammen: en ydelse siger ikke meget uden bilens værdi ved siden af.
   Tallene bruger tabular-nums, så de flugter lodret ned gennem gitteret. */
/* Salgsprisen staar paa samme linje paa alle kort. Linjen renderes altid —
   ogsaa naar prisen mangler — saa tallene flugter vandret gennem gitteret og
   oejet kan scanne ned ad kolonnen uden at lede. */
.bilkort__koeb {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2); margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--border);
  font-size: var(--t-base); font-weight: var(--v-semi); color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bilkort__koeb-navn {
  font-size: var(--t-sm); font-weight: var(--v-medium); color: var(--text-muted);
}
.bilkort__koeb--tom { color: var(--text-muted); font-weight: var(--v-medium); font-style: italic; }

/* Knap i bunden af et priskort. Kortene har forskellig hoejde, så knappen
   skubbes ned, og de to kort flugter forneden. */
.pris-kort { display: flex; flex-direction: column; }
.pris-kort ul { flex: 1; }
.pris-kort__til { margin: var(--s4) 0 0; }
.pris-kort__til .knap { width: 100%; justify-content: center; }

/* Navneblokken gives en fast højde, så alt nedenunder — og især nyprisen —
   lander i samme højde på alle kort. Uden den svinger blokken fra 20 til 89 px,
   fordi modelnavnet kan brydes over tre linjer og variantteksten over fire.
   Navnet klippes ved to linjer og varianten ved én; det fulde navn står på
   modelsiden, som kortet linker til. */
.bilkort__navnblok {
  min-height: 3.85rem;
  display: flex; flex-direction: column; gap: 2px;
}
.bilkort__navn {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bilkort__variant {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Gratis-tilbuddet på tilbudstjekket. Det skal være tydeligt, men prisen
   skal stå lige under — siden må ikke skjule, hvad det koster bagefter. */
.hero__maerkat--gratis {
  background: var(--gul); color: #14161a; border-color: var(--gul);
}
.pris-kort__gratis {
  align-self: flex-start;
  font-size: var(--t-sm); font-weight: var(--v-semi);
  padding: .15rem .55rem; border-radius: 999px;
  background: var(--gul); color: #14161a;
  margin-bottom: var(--s2);
}


/* ─── Brugte varebiler ─────────────────────────────────────────────────── */

.brugtgitter {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(min(258px, 100%), 1fr));
}

.brugtkort {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--tid) var(--ease), box-shadow var(--tid) var(--ease);
}
.brugtkort:hover { border-color: var(--border-strong); box-shadow: var(--skygge-lg); }
.brugtkort[hidden] { display: none; }
.brugtkort__link { display: flex; flex-direction: column; flex: 1; color: inherit; }

.brugtkort__billede {
  aspect-ratio: 4 / 3; background: var(--bg-muted);
  border-bottom: 1px solid var(--border); overflow: hidden;
}
.brugtkort__billede img { width: 100%; height: 100%; object-fit: cover; }
.brugtkort__intetbillede {
  display: grid; place-items: center; height: 100%; padding: var(--s4);
  font-family: var(--mono); font-size: var(--t-lg); color: var(--text-hint);
  text-align: center;
}

.brugtkort__krop { display: flex; flex-direction: column; gap: var(--s3); flex: 1; padding: var(--s4); }

/* Navn og variant faar fast hoejde af samme grund som paa de nye biler:
   ellers staar prisen i forskellig hoejde fra kort til kort, og oejet kan
   ikke scanne lodret ned gennem gitteret. */
.brugtkort__navn {
  font-size: var(--t-lg); letter-spacing: var(--sp-tight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brugtkort__variant {
  min-height: 2.5rem; margin-top: 2px;
  font-size: var(--t-sm); color: var(--text-muted); line-height: var(--lh-snug);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.brugtkort__noegletal {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2);
  padding: var(--s3) 0; border-top: 1px solid var(--border);
}
.brugtkort__noegletal dt { font-size: var(--t-xs); color: var(--text-muted); }
.brugtkort__noegletal dd {
  font-size: var(--t-sm); font-weight: var(--v-medium);
  font-variant-numeric: tabular-nums; margin-top: 1px;
}

.brugtkort__pris, .brugtkort__leasing {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  font-size: var(--t-sm);
}
.brugtkort__pris { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--border); }
.brugtkort__pris span, .brugtkort__leasing span { color: var(--text-muted); }
.brugtkort__pris strong { font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.brugtkort__leasing strong { font-variant-numeric: tabular-nums; }
.brugtkort__ingen { font-weight: var(--v-normal); color: var(--text-hint); }

.sorter select {
  font: inherit; font-size: var(--t-base); min-height: var(--h-felt);
  padding: 0 var(--s3); border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg); color: var(--text); appearance: none; flex-shrink: 0;
}

/* Forhandlerens egen tekst. Citatformen siger, at ordene ikke er vores. */
.forhandlertekst {
  margin: 0; padding: var(--s4) var(--s5);
  border-left: 2px solid var(--border-strong); background: var(--bg-alt);
  border-radius: 0 var(--r) var(--r) 0;
}
.forhandlertekst p { margin: 0; color: var(--text-soft); }
.forhandlertekst p + p { margin-top: var(--s2); }

.udstyr {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--s2) var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
}
.udstyr li {
  font-size: var(--t-sm); color: var(--text-soft);
  padding-left: var(--s4); position: relative;
}
.udstyr li::before { content: "\2013"; position: absolute; left: 0; color: var(--text-hint); }

.billedgitter {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.billedgitter img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--r);
}

@media (max-width: 560px) {
  .brugtgitter { grid-template-columns: 1fr; }
}

/* Linjen under tilbudsknappen. Den skal berolige, ikke raabe. */
.bil-hero__note {
  margin-top: var(--s3); max-width: 46ch;
  font-size: var(--t-sm); line-height: var(--lh-snug); color: var(--text-muted);
}

/* Ting der kun giver mening, naar der er plads. */
@media (max-width: 560px) {
  .kun-bred { display: none; }

  /* Syv filterknapper fylder fire raekker paa en telefon. Lidt mindre tekst
     og luft goer det til tre, uden at de bliver svaere at ramme - de er
     stadig over 40 px hoeje. */
  .chip { padding: .3rem var(--s2); font-size: var(--t-sm); gap: var(--s1); }
  .chip__tal { font-size: 10px; }
}

/* Genveje til maerker og modeller. Kompakte piller, ikke brede kasser:
   hvert link er to ord og et tal, og ti halvtomme kasser skubbede bare
   bilerne laengere ned. */
.maerkelinks {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: var(--s3) 0 0; padding: 0;
}
.maerkelinks a {
  display: inline-flex; align-items: center;
  padding: .3rem var(--s3); border-radius: var(--r-rund);
  border: 1px solid var(--border); background: var(--bg);
  text-decoration: none; color: inherit;
  font-size: var(--t-sm); font-weight: var(--v-medium); white-space: nowrap;
}
.maerkelinks a:hover, .maerkelinks a:focus-visible {
  border-color: var(--text); background: var(--bg-alt);
}

/* ─── Annoncesamarbejdet ──────────────────────────────────────────────── */

/* Én linje, ikke en kasse. Den skal kunne ses uden at raabe: en lille etiket
   i husets gule og almindelig broedtekst ved siden af. Laeserne er
   professionelle indkoebere - de skal oplyses, ikke belaeres. */
.samarbejde {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
  margin: var(--s4) 0 var(--s5);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--border);
  font-size: var(--t-sm); line-height: var(--lh-snug); color: var(--text-muted);
}
.samarbejde strong { color: var(--text-soft); font-weight: var(--v-semi); }
.samarbejde a { color: var(--text-muted); }
.samarbejde a:hover { color: var(--text); }
.samarbejde__mrk {
  flex-shrink: 0;
  padding: .08rem .42rem; border-radius: var(--r-sm);
  background: var(--gul-bg); color: var(--gul-tekst);
  border: 1px solid var(--gul-streg);
  font-size: var(--t-xs); font-weight: var(--v-semi);
  letter-spacing: var(--sp-wide); text-transform: uppercase;
}

/* Forhandlerens praesentation. Staar hvor der er plads - paa oversigten og
   maerkesiderne, ikke paa hver enkelt bil. */
.forhandler p { max-width: var(--prosa); }
.forhandler__fakta {
  display: grid; gap: var(--s3) var(--s5); margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  padding: var(--s4) 0; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.forhandler__fakta dt { font-size: var(--t-xs); color: var(--text-muted);
  letter-spacing: var(--sp-wide); text-transform: uppercase; }
.forhandler__fakta dd { font-size: var(--t-base); margin-top: 2px; }
.forhandler__fakta a { color: inherit; }

/* ─── Viden ───────────────────────────────────────────────────────────── */

/* Laesestof, ikke en tabel: smal spalte og mere luft mellem linjerne end
   resten af siden. Den laeses fra ende til anden, den scannes ikke. */
.viden { max-width: 68ch; margin: 0 auto; }
.viden__over {
  font-size: var(--t-xs); font-weight: var(--v-semi);
  letter-spacing: var(--sp-wide); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--s4);
}
.viden h1 {
  font-size: clamp(1.85rem, 4.6vw, var(--t-3xl));
  letter-spacing: var(--sp-tight); font-weight: var(--v-bold);
}
.viden__manchet {
  margin-top: var(--s4); font-size: var(--t-lg);
  line-height: var(--lh-snug); color: var(--text-soft);
}
.viden h2 {
  margin-top: var(--s7); margin-bottom: var(--s3);
  font-size: var(--t-xl); letter-spacing: var(--sp-tight);
}
.viden p { margin-top: var(--s3); line-height: 1.68; color: var(--text-soft); }
.viden strong { color: var(--text); font-weight: var(--v-semi); }

.viden__liste { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.viden__liste li {
  position: relative; padding-left: var(--s5); margin-top: var(--s3);
  line-height: 1.6; color: var(--text-soft);
}
.viden__liste li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 14px; height: 2px; background: var(--gul);
}

/* Kilderne staar i artiklen, ikke i en fodnote. Hele sidens praemis er, at
   et udsagn uden kilde ikke er et udsagn. */
.viden__kilder {
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 2px solid var(--gul);
}
.viden__kilder h2 { margin-top: 0; font-size: var(--t-lg); }
.viden__kilder ul { list-style: none; margin: var(--s3) 0 var(--s4); padding: 0; }
.viden__kilder li { margin-top: var(--s2); font-size: var(--t-sm); line-height: var(--lh-snug); }
.viden__laest { color: var(--text-hint); font-family: var(--mono); font-size: var(--t-xs); }

.vidensgitter {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.videnkort {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg); overflow: hidden;
  transition: border-color var(--tid) var(--ease), box-shadow var(--tid) var(--ease);
}
.videnkort:hover { border-color: var(--border-strong); box-shadow: var(--skygge-lg); }
.videnkort a { display: block; padding: var(--s5); color: inherit; text-decoration: none; }
.videnkort__emne {
  font-size: var(--t-xs); font-weight: var(--v-semi);
  letter-spacing: var(--sp-wide); text-transform: uppercase; color: var(--gul-tekst);
}
.videnkort h3 {
  margin-top: var(--s3); font-size: var(--t-lg);
  letter-spacing: var(--sp-tight); line-height: var(--lh-snug);
}
.videnkort__kort {
  margin-top: var(--s3); font-size: var(--t-sm);
  line-height: var(--lh-base); color: var(--text-soft);
}
.videnkort__meta {
  margin-top: var(--s4); font-family: var(--mono);
  font-size: var(--t-xs); color: var(--text-hint);
}

/* Spoergsmaal og svar. Samme form som paa guidesiderne. */
.faq > div + div { margin-top: var(--s5); }
.faq dt { font-weight: var(--v-semi); }
.faq dd { margin: var(--s2) 0 0; color: var(--text-soft); max-width: var(--prosa); }


/* ─── Vaerktoejsbaeltet: ét system ────────────────────────────────────────

   Foer stod der fire skriftstoerrelser, tre vaegte, to skriftfamilier og et
   versal-spaerret ord i det samme baand - og sorteringsknappen skiftede
   tykkelse, naar man valgte den, saa raekken hoppede.

   Reglen er nu:
     alt klikbart      14 px / vaegt 500
     alle gruppenavne  12 px / vaegt 400 / daempet, ingen versaler
     tal i maerkater   12 px mono
     valgt tilstand    skifter FARVE, aldrig vaegt eller stoerrelse
     alle kontroller   samme hoejde, saa raekkerne flugter

   Reglerne staar sidst i filen med vilje: de skal vinde over alt det,
   der er vokset frem ovenfor.                                           */

/* Gruppenavne: „Leasingtype“ og „Sortér“ er det samme slags ord og skal se
   ens ud. Versalerne og spaerringen paa „SORTÉR“ raabte uden grund. */
.sortering__navn,
.leasingfilter legend {
  font-size: var(--t-sm); font-weight: var(--v-normal);
  letter-spacing: normal; text-transform: none;
  color: var(--text-muted); white-space: nowrap;
}
.sortering__navn { margin-right: var(--s2); }

/* Alt klikbart i baeltet: samme stoerrelse, samme vaegt. */
.chip,
.sortpille,
.visning button,
.leasingfilter label,
.filtre input,
.filtre select {
  font-size: var(--t-base);
  font-weight: var(--v-medium);
  letter-spacing: normal;
}

/* Valgt tilstand: kun farve. Skifter vaegten, flytter teksten sig, og hele
   raekken hopper en pixel, hver gang man klikker. */
.sortpille--valgt,
.visning button[aria-pressed="true"],
.chip--valgt {
  font-weight: var(--v-medium);
}

/* Sorteringsknapperne staar i raekke med to firkantede kontroller. Saa skal
   de ogsaa vaere firkantede - pilleformen hoerte til kategoriknapperne. */
.sortpille {
  min-height: var(--h-felt);
  padding: 0 var(--s3);
  border-radius: var(--r);
}
.sortpille--valgt {
  background: var(--bg-alt);
  color: var(--text);
  border-color: var(--border);
}

/* Kort/Tabel skal have samme hoejde som naboerne. */
.visning { min-height: var(--h-felt); align-items: center; }
.visning button { padding: 0 var(--s3); min-height: calc(var(--h-felt) - 6px); }

/* Kategoriknapperne beholder pilleformen - de er en anden slags kontrol paa
   en anden raekke - men faar samme tekststoerrelse som resten. */
.chip { padding: .38rem var(--s3); gap: var(--s2); }
.chip__tal { font-size: var(--t-sm); padding: 0 5px; }

/* „m. restværdi“ og „u. restværdi“ var en tredje tekststoerrelse inde i en
   enkelt kontrol. Forskellen staar forklaret ved hvert eneste tilbud i
   tabellen; den behoever ikke ogsaa staa med lille i filteret. */
.leasingfilter__hint { display: none; }

@media (max-width: 560px) {
  /* Paa telefon maa knapperne godt vaere lidt mindre, men det skal vaere
     ALLE af dem - ikke kun kategoriknapperne. */
  .chip,
  .sortpille,
  .visning button,
  .leasingfilter label,
  .filtre input,
  .filtre select { font-size: var(--t-sm); }
  .chip { padding: .3rem var(--s2); gap: var(--s1); }
  .chip__tal { font-size: var(--t-xs); }
}

/* Sorteringen faar samme ramme som leasingtypefilteret. Foer stod den naegen
   mellem to indrammede grupper, saa raekken havde tre slags indpakning. */
.sortering {
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 0 var(--s2) 0 var(--s3); min-height: var(--h-felt);
  gap: 2px;
}
.sortpille { min-height: calc(var(--h-felt) - 8px); padding: 0 var(--s2); }

/* Kort/Tabel-bakken skal have samme ramme og ikke sin egen graa bund. */
.visning { background: var(--bg); }

/* Kortene i haandbogen skal slutte i samme hoejde. Overskrifter og manchetter
   er forskellig laengde, saa meta-linjen laa i forskellig hoejde tvaers over
   raekken. Titlen klippes ved to linjer, manchetten ved tre, og meta skubbes
   til bunden - saa flugter de, uanset hvad der staar i dem. */
.videnkort { display: flex; }
.videnkort a { display: flex; flex-direction: column; flex: 1; }
.videnkort h3 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}
.videnkort__kort {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; flex: 1;
}
.videnkort__meta { margin-top: auto; padding-top: var(--s4); }

/* Grupperne i haandbogen skal kunne skelnes fra hinanden uden en streg. */
.haandbog-gruppe + .haandbog-gruppe { padding-top: var(--s6); }
.haandbog-gruppe > h2 { letter-spacing: var(--sp-tight); }


/* ─── Bilkortet: samme to stoerrelser, samme to vaegte ───────────────────

   Kortet brugte 11, 12 og 17 px og tre vaegte - og modelnavnet og prisen,
   de to ting oejet skal finde, stod i SAMME stoerrelse med FORSKELLIG vaegt
   (600 mod 700, fordi <strong> arver browserens fede). Paa 325 kort bliver
   det til en side, der aldrig falder til ro.                             */

.brugtkort__navn { font-weight: var(--v-semi); }
.brugtkort__pris strong {
  font-size: var(--t-lg);
  font-weight: var(--v-semi);
  letter-spacing: var(--sp-tight);
}
.brugtkort__leasing strong { font-size: var(--t-sm); font-weight: var(--v-medium); }

/* Etiketterne i noegletallene var 11 px - en tredje stoerrelse for tre ord.
   De foelger nu varianten og de andre etiketter paa 12 px. */
.brugtkort__noegletal dt { font-size: var(--t-sm); }
.brugtkort__noegletal dd { font-size: var(--t-sm); font-weight: var(--v-medium); }
.brugtkort__pris span, .brugtkort__leasing span { font-weight: var(--v-normal); }


/* ─── Bilkortet paa forsiden: tre roller, tre vaegte ────────────────────

   Kortet havde otte kombinationer af stoerrelse og vaegt, og der var ikke
   en regel bag - der var otte enkeltbeslutninger truffet paa hver sin dag.

     vaerdier og navne     vaegt 600
     hovedtallet          vaegt 500 - stort og mono, det behoever ikke
                          ogsaa vaere fedt
     etiketter og enheder vaegt 400

   Og 11 px findes ikke laengere paa kortet: to ord i en stoerrelse for sig
   er ikke en stoerrelse, det er en undtagelse.                          */

/* Mærkatet er en etiket, ikke en værdi. */
.bilkort__maerkat { font-size: var(--t-sm); font-weight: var(--v-normal); }

/* „Nypris“ og „kr./md.“ er etiketter ved siden af et tal. */
.bilkort__koeb-navn { font-weight: var(--v-normal); }
.bilkort__valuta { font-weight: var(--v-normal); }

/* Dækningstallet stod som eneste tekst i 11 px. */
.daekning__tal, .stempel__skil { font-size: var(--t-sm); }


/* ─── Gruppenavne i vaerktoejsbaeltet ────────────────────────────────────

   „Leasingtype“ og „Sortér“ er det samme slags ord. De skal se ens ud og
   ligge i samme hoejde - og de skal kunne skelnes fra det, man kan klikke
   paa. Foer var de almindelig broedtekst i 12 px og lignede kontroller.

   „Leasingtype“ laa desuden 6 px hoejere end resten, fordi den var et
   <legend> med float: left. Nu er begge et <span> i en role="group", saa
   de ikke kan komme fra hinanden igen.                                  */

.gruppe__navn {
  flex-shrink: 0;
  font-size: var(--t-xs);
  font-weight: var(--v-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-hint);
  white-space: nowrap;
  margin-right: var(--s2);
}

/* Kassen er nu en div, ikke et fieldset - den skal have samme stil som foer. */
.leasingfilter {
  display: flex; align-items: center; gap: var(--s3);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 0 var(--s3); min-height: var(--h-felt);
  flex-shrink: 0; margin: 0;
}

/* To veje i én blok: den gratis, hvor forhandleren betaler, og den betalte,
   hvor kunden gør. De står side om side, så forskellen er til at se. */
.cta-to {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: start;
}
.cta-to .kort h3 { margin-top: 0; }

/* Elbilerne skal kunne ses på afstand i gridet. Grøn venstrekant frem for
   en fuldt farvet kasse: den gule ramme betyder allerede „valgt til
   sammenligning“, og en el-bil må ikke råbe højere end det, brugeren selv
   har valgt. Derfor også kun en tone i selve rammen. */
.bilkort--el {
  border-color: var(--ok-bg);
  box-shadow: inset 3px 0 0 var(--ok);
}
.bilkort--el:hover { border-color: var(--ok); }
/* Valgt slaar el: brugerens eget valg skal altid være det tydeligste. */
.bilkort--el.bilkort--valgt { border-color: var(--gul); }

/* I tabelvisningen er der ingen ramme at farve — der bliver kanten til
   en streg i venstre side af rækken i stedet. */
.bilkort-grid--tabel .bilkort--el {
  border-color: transparent; border-bottom-color: var(--border);
  box-shadow: inset 3px 0 0 var(--ok);
}

/* ── Bilkortet: prisen som en række, og luften ud ──────────────────────── */

/* Prisen står nu som felterne nedenunder: etiket til venstre, tal til højre.
   Før stod beløbet bart i venstre side uden at sige, hvad det var, og kortet
   havde to læseretninger. */
.bilkort__pris {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3);
}
.bilkort__pris-navn {
  font-size: var(--t-sm); font-weight: var(--v-normal);
  color: var(--text-muted); line-height: var(--lh-snug);
}
.bilkort__pris-vaerdi {
  display: flex; align-items: baseline; gap: var(--s2);
  white-space: nowrap; margin-left: auto;
}

/* Luften. Mellemrummet mellem blokkene var 16 px tre gange. */
.bilkort__krop { gap: var(--s3); padding: var(--s4); }

/* Navneblokken reserverede plads til et tolinjet modelnavn. De fleste navne
   er én linje, så der stod godt 20 px tomt under varianten på de fleste kort.
   Bundlinjen holdes stadig på plads af `margin-top: auto` på .bilkort__felter,
   så kortene flugter forneden uanset navnets længde. */
.bilkort__navnblok { min-height: 0; }

/* Vilkårslinjen hører til prisen, ikke til næste blok. */
.bilkort__prisblok { gap: 1px; }
/* I tabelvisningen er rækken smal, og „Billigste leasingpris“ på samme linje
   som tallet ville kræve knap 200 px. Dér står etiketten over tallet. */
.bilkort-grid--tabel .bilkort__pris {
  flex-direction: column; align-items: flex-start; gap: 0;
}
.bilkort-grid--tabel .bilkort__pris-vaerdi { margin-left: 0; }

/* ─── Bundmenu ──────────────────────────────────────────────────────────
   Bunden havde ingen navigation — kun brødtekst og copyright. Den er
   vigtigst på mobil, hvor topmenuen ikke har plads, men den gør også
   Udbydere nåelig igen efter at afsnittet røg ud af topmenuen. */
.bundmenu ul {
  list-style: none; margin: 0 0 var(--s2); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
}
.bundmenu a {
  color: #d7dade; font-weight: var(--v-medium);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.bundmenu a:hover { color: #fff; border-bottom-color: currentColor; }

@media (max-width: 720px) {
  /* To kolonner frem for en lang slange af ombrudte links. */
  .bundmenu ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); }
}

/* ─── Toppen af forsiden ─────────────────────────────────
   Linjen over overskriften havde to typografier i sig: metateksten som
   11 px/600 versaler med sperring, mærkatet som 11 px/500 normal skrift.
   Nu er de én typografi, og mærkatet beholder kun sin gule baggrund — det
   er den ene påstand på siden, der fortjener at blive set.

   Og der stod 64 px tomt mellem menuen og første ord. */
.hero-ny { padding: var(--s6) 0 var(--s6); }
.hero-ny__over {
  font-weight: var(--v-medium); text-transform: none;
  letter-spacing: var(--sp-snug); margin-bottom: var(--s3);
}
.hero-ny__maerkat { font-weight: var(--v-medium); }

/* ─── Forsiden: knap, nøgletal og artikelbånd ────────────────────────────
   Samme opbygning som leasio.dk: én knap under manchetten med oplysningen
   om honoraret lige under, nøgletal uden kasse, og et bånd med artikler
   mellem heroen og filtrene. */

.hero-ny__note {
  margin-top: var(--s3); max-width: var(--prosa);
  font-size: var(--t-sm); color: var(--text-muted); line-height: var(--lh-snug);
}

/* Tallet først, etiketten under. Kassen om dem er væk — den gjorde tre tal
   til et skema. I markuppen står <dt> stadig før <dd>, fordi det er den
   rigtige rækkefølge for en definitionsliste; rækkefølgen vendes i stilen. */
.hero-stats {
  border: 0; background: none; border-radius: 0; overflow: visible;
  gap: var(--s4) var(--s7); margin-top: var(--s6);
}
.hero-stats > div {
  flex: 0 1 auto; min-width: 0; padding: 0; border-right: 0;
  display: flex; flex-direction: column-reverse;
}
.hero-stats dt { font-size: var(--t-sm); color: var(--text-muted); margin-top: 2px; }
.hero-stats dd {
  font-family: var(--sans); font-variant-numeric: tabular-nums;
  font-size: var(--t-2xl); font-weight: var(--v-medium);
  letter-spacing: var(--sp-tight);
}

.baand {
  margin-top: var(--s7); padding: var(--s6) var(--s5);
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.baand__hoved {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s4);
}
.baand__navn {
  font-size: var(--t-xs); font-weight: var(--v-semi);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-hint);
  margin: 0;
}
.baand__hoved a { font-size: var(--t-sm); font-weight: var(--v-medium); }

.artikelbaand { display: grid; gap: var(--s3); }
@media (min-width: 900px) {
  .artikelbaand { grid-template-columns: 1.15fr 1fr 1fr; }
  .artikelkort--stor { grid-row: span 2; }
}

.artikelkort {
  display: block; padding: var(--s4); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r);
  color: inherit; text-decoration: none;
  transition: border-color var(--tid) var(--ease), box-shadow var(--tid) var(--ease);
}
.artikelkort:hover { border-color: var(--border-strong); box-shadow: var(--skygge-lg); }
.artikelkort__emne {
  display: block; margin-bottom: var(--s2);
  font-size: var(--t-xs); font-weight: var(--v-semi);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-hint);
}
.artikelkort h3 {
  font-size: var(--t-base); letter-spacing: var(--sp-snug); margin: 0;
  line-height: var(--lh-snug);
}
.artikelkort h3::after { content: " \2192"; color: var(--text-hint); }
.artikelkort p {
  margin-top: var(--s3); font-size: var(--t-sm); color: var(--text-soft);
  line-height: var(--lh-snug);
}
.artikelkort--stor { display: flex; flex-direction: column; }
.artikelkort--stor h3 { font-size: var(--t-xl); letter-spacing: var(--sp-tight); }

/* Adressen på kontaktsiden skal kunne læses på afstand og kopieres. */
.kontakt-mail { font-size: var(--t-lg); font-weight: var(--v-medium); }

/* ─── Henvisning til leasio.dk ───────────────────────────────────────────
   Menupunktet og knappen bærer Leasios egen grønne accent (#1a7a56), så det
   er tydeligt, at linket fører et andet sted hen end resten af menuen.
   Farven er hentet fra deres eget stylesheet, ikke gættet. */
:root {
  --anden: #1a7a56; --anden-bg: #e8f3ee; --anden-streg: #bcdccd;
  --anden-tekst: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Grønt bliver lyst i mørk tilstand, så teksten på knappen skal være
       mørk. Hvid på #57c295 giver 2,20:1 og kan ikke læses. */
    --anden: #57c295; --anden-bg: #10271e; --anden-streg: #214636;
    --anden-tekst: #14161a;
  }
}

.site-header nav a.nav-anden {
  color: var(--anden); font-weight: var(--v-semi);
}
.site-header nav a.nav-anden:hover { color: var(--anden); text-decoration: underline; }

.kort--anden { border-color: var(--anden-streg); background: var(--anden-bg); }
.kort--anden h2 { color: var(--anden); }

.knap--anden {
  background: var(--anden); color: var(--anden-tekst); border-color: var(--anden);
}
.knap--anden:hover { filter: brightness(.88); }
.knap--anden::after { content: " \2197"; }

/* ─── Springlink ─────────────────────────────────────────────────────────
   Hver side tvinger ellers en tastaturbruger gennem seks menupunkter før
   indholdet. Linket er skjult, indtil det får fokus — så er det det
   første, man rammer. */
.spring {
  position: absolute; left: var(--luft); top: -3rem; z-index: 999;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: .6rem 1rem; font-weight: var(--v-medium);
  text-decoration: none; box-shadow: var(--skygge-lg);
  transition: top var(--tid) var(--ease);
}
.spring:focus { top: .6rem; }

/* ─── Undermenu i brugtsektionen ─────────────────────────────────────────
   Sektionens egen navigation. Uden den findes facetsiderne kun i
   sitemappet, og en besøgende, der er landet på én af dem fra en søgning,
   kan ikke komme videre til de andre. */
.undermenu {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: var(--s5) 0 var(--s2);
}
/* Linkene er chips og tager deres udseende derfra. Kun layoutet er
   undermenuens eget. */
@media (max-width: 720px) {
  /* Én række man kan svippe i, frem for fire rækker piller. */
  .undermenu {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -ms-overflow-style: none; overscroll-behavior-x: contain;
  }
  .undermenu::-webkit-scrollbar { display: none; }
  .undermenu a { flex-shrink: 0; }
}

/* ─── Brugtsektionen: strammere lodret rytme ─────────────────────────────
   --s7 er 3rem, og sektionerne har den både før og efter, så der stod 6rem
   mellem to blokke. På en liste med 329 biler betyder det, at man skal
   scrolle for at nå noget, der lige så godt kunne have stået der. Kun her —
   på artiklerne er luften en del af læsbarheden. */
.brugt-side .hero-ny { padding: var(--s5) 0 var(--s4); }
.brugt-side .hero-stats { margin-top: var(--s4); }
.brugt-side .samarbejde { margin: var(--s3) 0 var(--s4); }
.brugt-side .sektion { padding: var(--s5) 0; }
.brugt-side .sektion--kort { padding: var(--s5) 0; }
.brugt-side .vaelger { padding: var(--s4) 0 var(--s5); }
.brugt-side .sektion__manchet { margin-bottom: var(--s3); }

/* Undermenuen og chipsene står nu i samme blok. De skal ligge tæt. */
.brugt-side .undermenu { margin: 0 0 var(--s3); }

/* Undermenuens links bruger chip-komponenten, som er lavet til knapper.
   Som links må de ikke arve understregning eller linkfarve. */
a.chip { text-decoration: none; color: var(--text); }
a.chip.chip--valgt { color: var(--bg); }

/* Engros-biler: skiltet ligger oven paa billedet, saa kortet ikke bliver
   hoejere end naboerne, og prisen stadig flugter paa tvaers af gitteret. */
.brugtkort__billede { position: relative; }
.brugtkort__skilt {
  position: absolute; top: var(--s2); left: var(--s2);
  padding: .1rem .45rem; border-radius: var(--r-sm);
  background: var(--gul-bg); color: var(--gul-tekst);
  border: 1px solid var(--gul-streg);
  font-size: var(--t-xs); font-weight: var(--v-medium);
}
.bil-hero__advarsel {
  margin-top: var(--s3); max-width: 52ch; padding: var(--s3);
  background: var(--gul-bg); color: var(--gul-tekst);
  border: 1px solid var(--gul-streg); border-radius: var(--r);
  font-size: var(--t-sm); line-height: var(--lh-snug);
}

/* Leasingtypefilteret maatte ikke krympe, og dets tre valg staar uden
   ombrydning. Paa en telefon paa 375 px blev det 391 px bredt, og hele
   forsiden kunne skubbes 32 px til siden. Paa smal skaerm fylder det
   bredden og bryder om i stedet. */
@media (max-width: 720px) {
  .leasingfilter {
    width: 100%; min-width: 0; flex-shrink: 1; flex-wrap: wrap;
    column-gap: var(--s3); row-gap: var(--s1); padding: var(--s2) var(--s3);
  }
}

/* Bilsidens "Sammenlignet med lageret": de naermeste alternativer i pris. */
.naerliste__titel { margin-top: var(--s5); font-size: var(--t-lg); }
.naerliste { list-style: none; padding: 0; margin: var(--s3) 0 var(--s4); display: grid; gap: var(--s2); }
.naerliste a { font-weight: var(--v-semi); }

/* Forsiden: nøgletallene står lige over artikelbåndet uden en knap imellem,
   så den dobbelte luft (heroens bund + båndets top) er skåret ned. */
.forside .hero-ny { padding-bottom: var(--s3); }
.forside .hero-ny .hero-stats { margin-top: var(--s5); }
.forside .baand { margin-top: var(--s4); }

/* Modelsiden: hopknapperne er knapper, ikke tekstlinks. */
.hoplinks a { text-decoration: none !important; }
.bil-side .bil-hero { padding-bottom: var(--s3); }
.bil-side .noegletal { margin-top: var(--s3); }

/* ─── Kortene flugter vandret (28-09-2026) ───────────────────────────────
   Nyprisen hoppede 19 px mellem kort med og uden variantlinje, og linjen
   „Et dyrere tilbud oplyser …“ skubbede målene ned på de kort, der har den.
   Navneblokken har nu altid plads til navn + én variantlinje, prisblokken
   altid plads til hint-linjen, og målene står lige under prisen i stedet
   for at blive skubbet ned mod bunden. Bundlinjen (dækning og dato) holdes
   nede af margin-top: auto. */
.bilkort-grid:not(.bilkort-grid--tabel) .bilkort__navnblok { min-height: 2.4rem; }
.bilkort-grid:not(.bilkort-grid--tabel) .bilkort__prisblok { min-height: 6.8rem; align-content: start; }
.bilkort-grid:not(.bilkort-grid--tabel) .bilkort__felter { margin-top: 0; }
.bilkort-grid:not(.bilkort-grid--tabel) .bilkort__fod { margin-top: auto; }

/* ─── Garanti (modelside og /garanti/) ─────────────────────────────────── */
.garanti-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-alt); margin: 0;
}
.garanti-grid > div { padding: var(--s3) var(--s4); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: -1px -1px 0 0; }
.garanti-grid dt { font-size: var(--t-sm); color: var(--text-muted); }
.garanti-grid dd { margin: 2px 0 0; font-weight: var(--v-semi); font-variant-numeric: tabular-nums; }
.garanti__note { display: block; font-weight: var(--v-normal); font-size: var(--t-xs); color: var(--text-muted); line-height: var(--lh-snug); margin-top: 2px; }
.garanti__ingen { color: var(--text-muted); font-weight: var(--v-normal); font-style: italic; }
.garantisektion .kilde { margin-top: var(--s3); }
.garanti-tabel th[scope="row"] { text-align: left; white-space: nowrap; font-weight: var(--v-medium); }
.garanti-tabel td { white-space: nowrap; }
.garanti-tabel td.tom { color: var(--text-muted); font-style: italic; }
#garanti { scroll-margin-top: 72px; }

/* Forsiden: nøgletallene står i manchetten i stedet for i en række for sig. */
.hero-ny__manchet strong { color: var(--text); font-weight: var(--v-semi); font-variant-numeric: tabular-nums; }
.forside .hero-ny { padding-bottom: var(--s2); }

/* ─── Samtykkebanner (assets/samtykke.js) ────────────────────────────────
   Nederst på skærmen, dækker ikke indholdet. Afvis og Acceptér er lige store
   og lige synlige — et skjult eller nedtonet "nej" er ikke et frit valg. */
.samtykke {
  position: fixed; left: var(--s4); right: var(--s4); bottom: var(--s4); z-index: var(--z-modal);
  max-width: 720px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
  padding: var(--s4); background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--skygge-lg);
}
.samtykke[hidden] { display: none; }
.samtykke__tekst { flex: 1 1 320px; margin: 0; font-size: var(--t-sm); line-height: var(--lh-snug); color: var(--text-soft); }
.samtykke__tekst a { text-decoration: underline; text-decoration-color: var(--gul); text-underline-offset: 3px; }
.samtykke__knapper { display: flex; gap: var(--s2); }
.samtykke__knap {
  min-width: 104px; padding: 9px 16px; border-radius: var(--r-rund); cursor: pointer;
  font: inherit; font-size: var(--t-sm); font-weight: var(--v-semi);
  background: var(--text); color: var(--text-invers); border: 1px solid var(--text);
}
.samtykke__knap:hover { background: var(--text-soft); border-color: var(--text-soft); }
@media (max-width: 480px) { .samtykke__knapper { width: 100%; } .samtykke__knap { flex: 1; } }

/* ═══ Modelsiden, redesign 28-09-2026 ═══════════════════════════════════
   Én opbygning for hele siden: top med beskrivelse, faktachips og prisboks;
   en fast navigation; og ens moduler med overskrift, én linjes resumé og en
   sammenklappet "Kilde og noter". Kildenoterne skal kunne efterprøves, men
   ikke drukne de tal, folk kom for. */

.modelhero { padding-bottom: var(--s5); align-items: start; }
.modelhero h1 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); letter-spacing: var(--sp-tight); margin-top: var(--s1); }
.modelhero .bil-hero__manchet { font-size: var(--t-md); line-height: var(--lh-base); max-width: 60ch; }
.modelhero .bil-hero__billede { margin-top: var(--s2); }

.faktachips { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.faktachips li {
  padding: 5px 12px; border-radius: var(--r-rund);
  background: var(--bg-alt); border: 1px solid var(--border);
  font-size: var(--t-sm); color: var(--text-muted);
}
.faktachips strong { color: var(--text); font-weight: var(--v-semi); font-variant-numeric: tabular-nums; }

.prisboks {
  margin-top: var(--s5); padding: var(--s4) var(--s5);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--bg);
  box-shadow: var(--skygge);
}
.prisboks__tal { display: grid; gap: 2px; }
.prisboks__etiket { font-size: var(--t-sm); color: var(--text-muted); }
.prisboks__pris { font-family: var(--mono); font-size: 1.9rem; font-weight: var(--v-medium); letter-spacing: var(--sp-tight); line-height: 1.1; font-variant-numeric: tabular-nums; }
.prisboks__pris small { font-family: var(--sans); font-size: var(--t-base); color: var(--text-muted); font-weight: var(--v-medium); letter-spacing: 0; }
.prisboks__sub { font-size: var(--t-sm); color: var(--text-muted); }
.prisboks__knapper { display: flex; flex-wrap: wrap; gap: var(--s2); }
@media (max-width: 520px) {
  .prisboks__knapper { width: 100%; }
  .prisboks__knapper .knap { flex: 1; justify-content: center; }
}

/* Fast navigation lige under sidehovedet (56 px). */
.sidenav {
  position: sticky; top: 56px; z-index: calc(var(--z-header) - 1);
  margin: 0 calc(-1 * var(--luft)); padding: 0 var(--luft);
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.sidenav__indre { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; }
.sidenav__indre::-webkit-scrollbar { display: none; }
.sidenav a {
  padding: 12px 14px; white-space: nowrap; text-decoration: none !important;
  font-size: var(--t-sm); font-weight: var(--v-medium); color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sidenav a:hover { color: var(--text); }
.sidenav a.aktiv { color: var(--text); border-bottom-color: var(--gul); }
@media (prefers-color-scheme: dark) { .sidenav { background: rgba(16, 17, 20, .92); } }

/* Modulerne */
.modul { padding: var(--s7) 0 var(--s2); scroll-margin-top: 110px; }
.modul + .modul { border-top: 1px solid var(--border); }
.modul__hoved { margin-bottom: var(--s4); max-width: 72ch; }
.modul__hoved h2 { font-size: var(--t-2xl); letter-spacing: var(--sp-tight); }
.modul__resume { margin-top: var(--s2); color: var(--text-soft); line-height: var(--lh-base); }
.modul__resume a { text-decoration: underline; text-decoration-color: var(--gul-streg); text-underline-offset: 3px; }
.modul__mangler { margin-top: var(--s3); font-size: var(--t-sm); color: var(--text-muted); line-height: var(--lh-snug); }
.modul__mangler strong { color: var(--text-soft); }
.modul .specs-grid { margin-top: 0; }
.modul .note { margin-top: var(--s4); }

.kildenote { margin-top: var(--s4); font-size: var(--t-sm); color: var(--text-muted); }
.kildenote summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-weight: var(--v-medium); color: var(--text-soft); list-style: none;
}
.kildenote summary::-webkit-details-marker { display: none; }
.kildenote summary::before { content: "▸"; font-size: .8em; transition: transform var(--tid) var(--ease); }
.kildenote[open] summary::before { transform: rotate(90deg); }
.kildenote__indhold { margin-top: var(--s2); padding: var(--s3) var(--s4); background: var(--bg-alt); border-radius: var(--r); line-height: var(--lh-snug); }
.kildenote__indhold p + p { margin-top: var(--s2); }
.kildenote__indhold .kilde { margin: 0; }

/* Tilbudsrækkens note */
.raekkenote { margin-top: 6px; font-size: var(--t-xs); color: var(--text-muted); }
.raekkenote summary { cursor: pointer; color: var(--text-soft); font-weight: var(--v-medium); }
.raekkenote p { margin-top: 4px; max-width: 46ch; line-height: var(--lh-snug); white-space: normal; }

/* Forbeholdet klappes sammen i bunden */
.forbehold--klap summary { cursor: pointer; list-style: none; }
.forbehold--klap summary::-webkit-details-marker { display: none; }
.forbehold--klap summary h2 { display: inline; }
.forbehold--klap summary::after { content: " ▸"; color: var(--text-muted); }
.forbehold--klap[open] summary::after { content: " ▾"; }
.forbehold--klap p:first-of-type { margin-top: var(--s3); }
@media (max-width: 560px) {
  .modul .garanti-grid { grid-template-columns: 1fr 1fr; }
  .modul .garanti-grid > div { padding: var(--s3); }
  .modul .garanti-grid dd { font-size: var(--t-base); }
  .modul { padding-top: var(--s6); }
}

/* ─── Mobilmenu (bygges af assets/samtykke.js) ───────────────────────────
   Den vandrette strimmel, der skulle swipes, så afskåret ud. På en telefon
   står nu logo, "Få tilbud" og en Menu-knap; alle punkter folder ud under. */
.menuknap, .nav-cta--mobil, .site-header nav a.nav-ekstra { display: none; }
@media (max-width: 720px) {
  .site-header { position: sticky; }
  .site-header .nav-cta--mobil {
    display: inline-flex; margin-left: auto; padding: 7px 14px; border-radius: var(--r-rund);
    background: var(--text); color: var(--text-invers); font-size: var(--t-sm); font-weight: var(--v-semi);
    text-decoration: none; white-space: nowrap;
  }
  .menuknap {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
    background: none; border: 1px solid var(--border-strong); border-radius: var(--r-rund);
    font: inherit; font-size: var(--t-sm); font-weight: var(--v-medium); color: var(--text); cursor: pointer;
  }
  .menuknap__streger, .menuknap__streger::before, .menuknap__streger::after {
    display: block; width: 14px; height: 1.5px; background: currentColor; border-radius: 1px; position: relative;
    transition: transform var(--tid) var(--ease), background var(--tid) var(--ease);
  }
  .menuknap__streger::before, .menuknap__streger::after { content: ""; position: absolute; left: 0; }
  .menuknap__streger::before { top: -4.5px; }
  .menuknap__streger::after { top: 4.5px; }
  .menu-aaben .menuknap__streger { background: transparent; }
  .menu-aaben .menuknap__streger::before { transform: translateY(4.5px) rotate(45deg); }
  .menu-aaben .menuknap__streger::after { transform: translateY(-4.5px) rotate(-45deg); }

  .site-header nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; overflow: visible;
    padding: var(--s2) var(--luft) var(--s4); background: var(--bg);
    border-bottom: 1px solid var(--border); box-shadow: var(--skygge-lg);
  }
  .menu-aaben nav { display: flex; }
  .site-header nav a, .site-header nav a.nav-ekstra {
    display: block; padding: 12px 0; font-size: var(--t-md); border-bottom: 1px solid var(--border);
  }
  .site-header nav a.nav-cta { display: none; }
  .site-header nav a:last-child { border-bottom: 0; }
}

/* ─── Sammenligninger (/sammenlign/a-vs-b/) ───────────────────────────── */
.sammenlign-billeder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: var(--s2) 0 var(--s4); }
.sammenlign-billeder a {
  display: grid; gap: var(--s2); text-decoration: none; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg);
}
.sammenlign-billeder img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--bg-alt); }
.sammenlign-billeder span { padding: 0 var(--s3) var(--s3); font-weight: var(--v-semi); }
.sammenlign-tabel th[scope="row"] { text-align: left; font-weight: var(--v-medium); color: var(--text-soft); white-space: nowrap; }
.sammenlign-tabel td { font-variant-numeric: tabular-nums; font-weight: var(--v-medium); }
.sammenlign-tabel td.bedst { color: var(--ok); font-weight: var(--v-semi); }
.sammenlign-tabel td.bedst::after { content: " ●"; font-size: .6em; vertical-align: middle; }
.sammenlign-tabel thead a { color: var(--text); text-transform: none; letter-spacing: 0; font-size: var(--t-sm); }
.sammenlign-tabel .tom { color: var(--text-muted); }
@media (max-width: 560px) {
  .sammenlign-billeder { gap: var(--s2); }
  .sammenlign-tabel th[scope="row"] { white-space: normal; }
}

/* Svarboksen øverst på guiderne: det direkte svar på søgningen. */
.svarboks {
  margin-top: var(--s3); padding: var(--s3) var(--s4); max-width: 60ch;
  background: var(--gul-bg); border: 1px solid var(--gul-streg); border-radius: var(--r);
  font-size: var(--t-md); line-height: var(--lh-snug);
}
.svarboks__etiket { display: block; font-size: var(--t-sm); color: var(--gul-tekst); font-weight: var(--v-semi); margin-bottom: 2px; }
.svarboks a { font-weight: var(--v-semi); text-decoration: underline; text-decoration-color: var(--gul); text-underline-offset: 3px; }

/* ─── Kompakt filterbælte (28-09-2026) ───────────────────────────────────
   Med de tre nye filtre fyldte bæltet tre linjer, rullemenuerne havde hver
   sin bredde, og gruppenavnene stod i versaler. Nu: én højde (34 px), én
   skrift og størrelse for alt, ens bredde på rullemenuerne. */
.vaelger .vaerktoej { gap: 6px; padding: var(--s2) 0; }
.vaelger .filtre { gap: 6px; }
.vaelger .filtre input,
.vaelger .filtre select,
.vaelger .leasingfilter,
.vaelger .visning {
  min-height: 34px; font-family: var(--sans); font-size: var(--t-sm); font-weight: var(--v-medium);
}
.vaelger .filtre select { width: 132px; flex: 0 0 auto; padding-left: 10px; padding-right: 26px; text-overflow: ellipsis; }
.vaelger .filtre input[type=search] { flex: 1 1 180px; min-width: 150px; width: auto; }
.vaelger .gruppe__navn,
.vaelger .sortering__navn,
.vaelger .leasingfilter legend {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: var(--v-normal);
  text-transform: none; letter-spacing: normal; color: var(--text-muted);
}
.vaelger .sortpille,
.vaelger .visning button,
.vaelger .leasingfilter label {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: var(--v-medium);
}
.vaelger .sortpille { padding: .22rem .6rem; }
.vaelger .leasingfilter { gap: 10px; padding: 0 10px; }
.vaelger .leasingfilter__hint { display: none; }
@media (max-width: 720px) {
  .vaelger .filtre select { width: auto; flex: 1 1 calc(50% - 3px); }
}

/* ── Leasingberegneren ─────────────────────────────────────────────────── */
.beregner__gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.25rem; }
.beregner__tilbud { border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem 1.1rem; margin: 0; min-width: 0; }
.beregner__tilbud legend { font-weight: 700; padding: 0 .35rem; }
.beregner__valgfri { font-weight: 400; color: var(--text-muted); font-size: .85em; }
.beregner__felt { display: flex; flex-direction: column; gap: .3rem; margin-top: .75rem; font-size: .92rem; }
.beregner__input { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); overflow: hidden; }
.beregner__input input { flex: 1; min-width: 0; border: 0; padding: .6rem .7rem; font: inherit; font-size: 1rem; background: transparent; }
.beregner__input input:focus { outline: none; }
.beregner__input:focus-within { outline: 2px solid var(--gul, #f2b705); outline-offset: 1px; }
.beregner__input em { font-style: normal; color: var(--text-muted); padding: 0 .7rem; font-size: .88rem; white-space: nowrap; }
.beregner__klasse { max-width: 320px; margin-top: 1.25rem; }
.beregner__klasse select { padding: .55rem .6rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--bg); }
.beregner__resultat dl { display: grid; gap: .45rem; margin: 1rem 0 0; }
.beregner__resultat dl div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--border); padding-top: .45rem; }
.beregner__resultat dt { color: var(--text-muted); }
.beregner__resultat dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.beregner__stor dd { font-size: 1.35rem; }
.beregner__placering { font-size: .9rem; margin: .75rem 0 0; color: var(--text-muted); }
.beregner__samlet p { background: var(--gul-bg); border-radius: 10px; padding: .8rem 1rem; margin: 1.25rem 0 0; }

/* ── Henvendelsesformular (popup) ──────────────────────────────────────── */
.lead-dialog { width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 24px); border: 0; border-radius: 16px; padding: 0; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.25); color: inherit; }
.lead-dialog::backdrop { background: rgba(20,20,20,.55); }
.lead-dialog__form { padding: 1.4rem 1.5rem 1.5rem; }
.lead-dialog__hoved { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.lead-dialog__hoved h2 { margin: 0; font-size: 1.35rem; }
.lead-dialog__luk { border: 0; background: var(--bg-muted); border-radius: 50%; width: 36px; height: 36px; font-size: 1.4rem; line-height: 1; cursor: pointer; flex: none; }
.lead-dialog__bil { font-weight: 600; margin: .5rem 0 0; }
.lead-dialog__intro { margin: .5rem 0 1rem; color: var(--text-soft); }
.lead-dialog__felter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.lead-dialog__felter label { display: flex; flex-direction: column; gap: .3rem; font-size: .92rem; font-weight: 600; min-width: 0; }
.lead-dialog__felter input:not([type=checkbox]), .lead-dialog__felter select, .lead-dialog__felter textarea { font: inherit; font-weight: 400; padding: .6rem .7rem; border: 1px solid var(--border-strong); border-radius: 8px; width: 100%; background: var(--bg); }
.lead-dialog__felter :focus-visible { outline: 2px solid var(--gul, #f2b705); outline-offset: 1px; }
.lead-dialog__bred { grid-column: 1 / -1; }
.lead-dialog__lille { font-size: .82rem; color: var(--text-muted); margin: 0; }
.lead-dialog__samtykke { flex-direction: row !important; align-items: flex-start; gap: .6rem !important; font-weight: 400 !important; font-size: .88rem !important; }
.lead-dialog__samtykke input { margin-top: .2rem; flex: none; }
.lead-dialog__note { font-size: .88rem; color: var(--text-soft); margin: 1rem 0 .6rem; }
.lead-dialog__send { width: 100%; justify-content: center; }
.lead-dialog__status { margin: .8rem 0 0; }
@media (max-width: 560px) {
  .lead-dialog { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; max-width: 100%; }
  .lead-dialog__felter { grid-template-columns: 1fr; }
}
/* Fast knap nederst på brugtbilsiderne (mobil) */
.lead-bar { display: none; }
@media (max-width: 760px) {
  .lead-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: .6rem 16px calc(.6rem + env(safe-area-inset-bottom)); background: var(--bg); box-shadow: 0 -6px 18px rgba(0,0,0,.12); gap: .6rem; align-items: center; }
  .lead-bar .knap { flex: 1; justify-content: center; }
  .lead-bar__pris { font-weight: 700; white-space: nowrap; }
  body.har-lead-bar { padding-bottom: 76px; }
}
.lead-bar-plads { display: none; }
@media (max-width: 760px) { .lead-bar-plads { display: block; height: 84px; } }

/* Henvendelsesboks på brugtbilsiden og knap på kortene */
.leadboks { display: flex; gap: 1.25rem 2rem; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--gul-bg); border: 1px solid var(--gul-streg); border-radius: 14px; padding: 1.1rem 1.4rem; margin: 1.25rem 0; }
.leadboks h2 { margin: 0 0 .4rem; font-size: 1.2rem; }
.leadboks__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.leadboks__liste li::before { content: "✓ "; font-weight: 700; color: var(--ok); }
.leadboks__handling { display: flex; flex-direction: column; gap: .4rem; align-items: stretch; min-width: 240px; }
.leadboks__handling .knap { justify-content: center; }
.leadboks__lille { font-size: .82rem; color: var(--text-soft); text-align: center; }
.brugtkort__lead { margin: 0; padding: 0 1rem 1rem; }
.brugtkort__lead .knap { width: 100%; justify-content: center; }

/* Brugtbilsidens nøgletal: 2×2 i stedet for én række, der løb sammen */
.brugt-side .bil-hero .noegletal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brugt-side .bil-hero .noegletal div { min-width: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: -1px; }
.brugt-side .bil-hero .noegletal div:nth-child(2n) { border-right: 0; }
.brugt-side .bil-hero .noegletal dd { font-family: inherit; font-size: 1.25rem; font-weight: 700; white-space: normal; }
/* Engros som et lille mærke, ikke en kasse */
.bil-hero__engros { display: inline-block; margin-top: .75rem; font-size: .85rem; background: var(--gul-bg); border-radius: 999px; padding: .25rem .7rem; }

/* Brugtbilsiden, nederste del: roligere */
.brugt-side .specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
@media (max-width: 640px) { .brugt-side .specs-grid { grid-template-columns: 1fr; } }
.udstyrsmaerker { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.udstyrsmaerker li { background: var(--bg-alt, #f5f5f3); border: 1px solid var(--border, #e5e5e5); border-radius: 999px; padding: .3rem .75rem; font-size: .9rem; }
.brugt-side .leadboks { margin-top: 2.5rem; }
.brugt-forbehold { font-size: .82rem; color: var(--text-muted, #666); margin: .75rem 0 2rem; max-width: 70ch; }
/* Luft mellem engros-mærket og knappen */
.brugt-side .bil-hero__engros { margin: 1rem 0 0; }
.brugt-side .bil-hero__knapper { margin-top: 1.1rem; }
.leadboks p { margin: .2rem 0 0; max-width: 60ch; }
.leadboks--soeg { margin-top: 2rem; }
.lead-dialog [hidden] { display: none !important; }

/* Nyt om modellen (bil.nyhed) - fx en ny generation på vej */
.nyhedsboks { border-left: 4px solid var(--gul); background: var(--gul-bg); border-radius: 0 12px 12px 0; padding: .8rem 1.1rem; margin: 1rem 0 1.25rem; }
.nyhedsboks p { margin: 0; }
.nyhedsboks__over { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gul-tekst); margin-bottom: .25rem !important; }

/* Målskitse på modelsiden (maalskitse.js), i stil med producenternes måltegninger */
.maalskitse { margin: 0 0 1.25rem; padding: 1rem 1rem .75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.maalskitse__visninger { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: .5rem 1.5rem; }
.maalskitse svg { max-width: 100%; height: auto; display: block; }
.ms-krom { fill: #c9ced5; stroke: #2e3239; stroke-width: .6; }
.ms-plade { fill: #ffffff; stroke: #2e3239; stroke-width: .7; }
.ms-kromstreg { fill: none; stroke: #c9ced5; stroke-width: 1.6; stroke-linecap: round; }
.maalskitse figcaption { font-size: .8rem; color: var(--text-soft); margin-top: .5rem; text-align: center; }
.ms-krop { fill: url(#ms-lak); stroke: none; }
.ms-kant { fill: none; stroke: #2e3239; stroke-width: 1.3; stroke-linejoin: round; }
.ms-rude { fill: url(#ms-glas); stroke: #2e3239; stroke-width: .7; }
.ms-linje { fill: none; stroke: #7b828d; stroke-width: .75; stroke-linecap: round; }
.ms-plast { fill: #33373e; stroke: none; }
.ms-plast--lys { fill: #d9dde2; stroke: none; }
.ms-lygte { fill: #f1f3f5; stroke: #2e3239; stroke-width: .8; }
.ms-lygtestreg { fill: none; stroke: #2e3239; stroke-width: .9; stroke-linecap: round; }
.ms-lygte--bag { fill: #a8383c; stroke: #5e1f21; }
.ms-greb { fill: none; stroke: #7b828d; stroke-width: 1.5; stroke-linecap: round; }
.ms-daek { fill: #25282d; }
.ms-faelg { fill: #cdd2d8; stroke: #5f6772; stroke-width: .6; }
.ms-faelgring { fill: none; stroke: #8b939e; stroke-width: .6; }
.ms-egerhul { fill: #4a5059; }
.ms-nav { fill: #8b939e; stroke: #4a5059; stroke-width: .5; }
.ms-skygge { fill: rgba(20,22,26,.14); }
.ms-jord { stroke: #b4bac2; stroke-width: 1; }
.ms-maal { stroke: #1f2328; stroke-width: .9; }
.ms-hjaelp { stroke: #a4abb4; stroke-width: .6; }
.ms-tal { font: 600 12px system-ui, -apple-system, "Segoe UI", sans-serif; fill: #1f2328; }
@media (max-width: 600px) {
  .maalskitse { padding: .6rem .4rem .5rem; }
  .ms-tal { font-size: 17px; }
}
.ms-markering { fill: #f0a020; stroke: #9a5d00; stroke-width: .5; }
.ms-plast--moerk { fill: #1d2025; stroke: none; }
.ms-logostreg { fill: none; stroke: #2e3239; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }

/* Tilbud delt efter leasingtype paa modelsiden; forklaringen fylder hele bredden */
#tilbud .modul__hoved { max-width: none; }
.tilbudsgruppe { margin-top: 1.75rem; }
.tilbudsgruppe:first-of-type { margin-top: 0; }
.tilbudsgruppe__navn { font-size: var(--t-lg, 1.15rem); margin: 0 0 .25rem; }
.tilbudsgruppe__antal { font-size: .85rem; font-weight: 500; color: var(--text-soft, #5b616e); margin-left: .35rem; }
.tilbudsgruppe__tekst { margin: 0 0 .75rem; color: var(--text-soft, #5b616e); }
.tilbudsgruppe__tekst a { text-decoration: underline; text-decoration-color: var(--gul-streg); text-underline-offset: 3px; }

/* Faa tilbud (/faa-tilbud/) */
.ft-helt { padding: var(--s6, 2.5rem) 0 var(--s5, 2rem); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
@media (max-width: 900px) { .ft-helt { grid-template-columns: 1fr; gap: 1.75rem; } }
.ft-helt h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.08; letter-spacing: var(--sp-tight, -.02em); margin: .4rem 0 .9rem; }
.ft-helt__manchet { font-size: var(--t-md, 1.15rem); line-height: var(--lh-base, 1.55); color: var(--text-soft, #5b616e); max-width: 46rem; }
.ft-handling { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }
.ft-loefter { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ft-loefter li { padding-left: 1.4rem; position: relative; font-weight: 500; }
.ft-loefter li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.ft-honorar { margin-top: 1.1rem; font-size: .88rem; color: var(--text-soft, #5b616e); max-width: 46rem; }
.ft-honorar a { text-decoration: underline; text-decoration-color: var(--gul-streg); text-underline-offset: 3px; }
.ft-trin { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.ft-trin li { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.2rem; }
.ft-trin h3 { font-size: 1.05rem; margin: .5rem 0 .3rem; }
.ft-trin p { margin: 0; color: var(--text-soft, #5b616e); line-height: 1.5; }
.ft-trin__nr { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--gul, #f2b705); color: #14161a; font-weight: 700; }
.ft-baand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; background: var(--gul-bg); border: 1px solid var(--gul-streg); border-radius: 16px; padding: 1.4rem 1.6rem; margin: 2rem 0; }
.ft-baand h2 { font-size: 1.35rem; margin: 0 0 .25rem; }
.ft-baand p { margin: 0; color: var(--text-soft, #5b616e); }
.ft-baand .ft-handling { margin-top: 0; }
.ft-baand--slut { background: #14161a; border-color: #14161a; color: #fff; }
.ft-baand--slut p { color: #c9ced5; }
.ft-baand--slut .knap--sekundaer { background: transparent; color: #fff; border-color: #fff; }
.ft-tal { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin: 1rem 0 1.25rem; }
.ft-tal div { border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.2rem; background: var(--bg); }
.ft-tal strong { display: block; font-size: 2rem; line-height: 1.1; }
.ft-tal span { color: var(--text-soft, #5b616e); font-size: .92rem; }

/* Forsidens vaerktoejslinje: lavere, roligere og paa to tynde linjer */
.vaelger .vaerktoej { display: block; padding: .6rem 0 .2rem; border-top: 1px solid var(--border); }
.vaelger .filtre { gap: .4rem; }
.vaelger .filtre input, .vaelger .filtre select { height: 34px; padding: 0 .7rem; font-size: .85rem; border-radius: 999px; border-color: var(--border); background-color: var(--bg); }
.vaelger .filtre select { padding-right: 1.8rem; }
.vaelger .filtre__sog { flex: 0 1 15rem; }
.vaerktoej__linje { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .55rem; }
.ltpiller { display: flex; flex-wrap: wrap; gap: .35rem; }
.ltpille { position: relative; cursor: pointer; }
.ltpille input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ltpille span { display: inline-block; padding: .3rem .75rem; border: 1px solid var(--border); border-radius: 999px; font-size: .82rem; color: var(--text-soft); background: var(--bg); transition: background .15s, border-color .15s; }
.ltpille:hover span { border-color: var(--border-strong); }
.ltpille input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); }
.ltpille input:focus-visible + span { outline: 2px solid var(--gul, #f2b705); outline-offset: 2px; }
.sortvalg { display: flex; align-items: center; gap: .4rem; margin-left: auto; font-size: .82rem; color: var(--text-muted); }
.sortvalg select { height: 32px; padding: 0 1.8rem 0 .7rem; border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; background-color: var(--bg); color: var(--text); }
.vaerktoej__linje .visning { padding: 2px; }
.vaerktoej__linje .visning button { padding: .28rem .8rem; font-size: .82rem; }
@media (max-width: 600px) { .sortvalg { margin-left: 0; } }
.ft-kort { background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 1.4rem 1.4rem 1.2rem; box-shadow: 0 10px 30px rgba(20,22,26,.08); border-top: 4px solid var(--gul, #f2b705); }
.ft-kort__over { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gul-tekst); margin: 0; }
.ft-kort h2 { font-size: 1.3rem; margin: .3rem 0 .9rem; }
.ft-kort__valg { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ft-valg { display: block; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--text); background: var(--bg-alt); transition: border-color .15s, background .15s, transform .15s; }
.ft-valg:hover { border-color: var(--text); background: var(--bg); transform: translateY(-1px); }
.ft-valg strong { display: block; font-size: .92rem; }
.ft-valg span { display: block; font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.ft-kort__fakta { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; color: var(--text-soft); }
.ft-kort__fakta li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
@media (max-width: 420px) { .ft-kort__valg { grid-template-columns: 1fr; } }

/* To linjer: typer + sortering/visning, derefter soegning og filtre */
.vaelger__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.vaelger__top .chips { margin: 0; }
.vaelger__hoejre { display: flex; align-items: center; gap: .6rem; }
.vaelger__hoejre .sortvalg { margin-left: 0; }
.vaelger__hoejre .visning button { padding: .28rem .8rem; font-size: .82rem; }
.vaelger .vaerktoej { margin-top: .6rem; }
.vaelger .filtre { flex-wrap: wrap; }
.vaelger .filtre__sog { flex: 0 1 12.5rem; }
.vaelger .filtre select { max-width: 11rem; }
@media (min-width: 1100px) { .vaelger .filtre { flex-wrap: nowrap; } .vaelger .filtre__sog { flex: 1 1 10rem; } }


/* Brugtoversigten: søgning, filtre og sortering på én linje på desktop
   (01-10-2026). På smalle skærme ombrydes de som før. */
.brugt-side .vaerktoej .filtre { flex-wrap: nowrap; }
.brugt-side .vaerktoej .filtre__sog { flex: 1 1 auto; min-width: 0; }
.brugt-side .vaerktoej .filtre__sog input { min-width: 0; width: 100%; }
.brugt-side .vaerktoej .sorter select { width: auto; max-width: none; }
.brugt-side .vaerktoej .sorter { margin-left: auto; }
@media (max-width: 900px) {
  .brugt-side .vaerktoej .filtre { flex-wrap: wrap; }
  .brugt-side .vaerktoej .filtre__sog { flex: 1 1 100%; }
  .brugt-side .vaerktoej .sorter { margin-left: 0; }
}

/* Få tilbud og Tilbudstjek: to faner under én menuknap (01-10-2026).
   Hvem der betaler, står under hver fane — det er forskellen på de to. */
.forloeb { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin: var(--s4) 0 var(--s2); }
.forloeb__fane {
  display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--bg);
  color: var(--text); text-decoration: none;
  transition: border-color var(--tid) var(--ease);
}
.forloeb__fane:hover { border-color: var(--border-strong); }
.forloeb__fane strong { font-size: var(--t-base); }
.forloeb__fane span { font-size: var(--t-sm); color: var(--text-muted); }
.forloeb__fane--aktiv { border: 2px solid var(--text); padding: calc(var(--s3) - 1px) calc(var(--s4) - 1px); background: var(--bg-alt); }
@media (max-width: 560px) { .forloeb { grid-template-columns: 1fr; } }
.tjek-valg { border-color: var(--gul); border-width: 2px; }
.tjek-valg__vilkaar { font-size: var(--t-sm); color: var(--text-soft); }
.tjek-valg__knapper { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* Få tilbud og Tilbudstjek: strammere lodret rytme (01-10-2026), som på brugtsiderne. */
.tjek-side .hero { padding: var(--s4) 0 var(--s5); }
.tjek-side .sektion, .tjek-side .sektion--kort { padding: var(--s5) 0; }
.ft .sektion { padding: var(--s5) 0; }
.ft .forloeb, .tjek-side .forloeb { margin-top: var(--s3); }
.tjek-side .pris-kort__belob { margin: var(--s2) 0 0; line-height: 1.1; }
.tjek-side .pris-kort ul { margin-top: var(--s3); }
.tjek-side .pris-kort { padding: var(--s4) var(--s5); }

/* Tilbudstjek: pris ved knappen, praktiske forhold og rapporteksemplet (01-10-2026). */
.tjek-handling { align-items: center; }
.tjek-handling__pris { margin: 0; font-size: var(--t-sm); color: var(--text-soft); }
.tjek-praktisk { display: grid; gap: var(--s3); margin: 0; }
.tjek-praktisk div { display: grid; grid-template-columns: 11rem 1fr; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--border); }
.tjek-praktisk dt { font-weight: var(--v-semi); }
.tjek-praktisk dd { margin: 0; color: var(--text-soft); }
@media (max-width: 560px) { .tjek-praktisk div { grid-template-columns: 1fr; gap: var(--s1); } }
.tjek-eks__maerke { display: inline-block; font-size: var(--t-xs); font-weight: var(--v-semi); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 var(--s3); }
.tjek-eks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); padding: var(--s4); background: var(--bg-alt); }
@media (max-width: 760px) { .tjek-eks { grid-template-columns: 1fr; } }
.tjek-eks__del { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s4); }
.tjek-eks__del h3 { font-size: var(--t-base); margin: 0 0 var(--s2); }
.tjek-eks__del ul { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--s1); color: var(--text-soft); font-size: var(--t-sm); }
.tjek-eks__lille { font-size: var(--t-xs); color: var(--text-muted); margin: 0 0 var(--s2); }
.tjek-eks__tal { width: 100%; border-collapse: collapse; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.tjek-eks__tal td { padding: 3px 0; }
.tjek-eks__tal td:last-child { text-align: right; }
.tjek-eks__sum td { font-weight: var(--v-semi); border-top: 1px solid var(--border); padding-top: var(--s1); }
.tjek-eks__mail { margin: 0; font-size: var(--t-sm); color: var(--text-soft); font-family: var(--mono); line-height: 1.55; }

/* Få tilbud: fire trin, eksempel på sammenligning (01-10-2026). */
@media (min-width: 900px) { .ft-trin--fire { grid-template-columns: repeat(4, 1fr); } }
.ft-eks__aaben td { color: var(--text-muted); font-style: italic; }
.ft-kort__fod { margin: var(--s3) 0 0; font-size: var(--t-sm); color: var(--text-soft); }
.lead-dialog__levering select, .lead-dialog__tid select { display: block; width: 100%; margin-top: 4px; }
.ft-svartid { margin: var(--s2) 0 0; font-size: var(--t-sm); font-weight: var(--v-semi); }
.ft-eks__sum td { font-weight: var(--v-semi); border-top: 2px solid var(--text); }
.ft-eks__sum2 td { color: var(--text-soft); font-size: var(--t-sm); }


/* Mørk tilstand: knapper, der ellers blev lys tekst på lys baggrund (02-10-2026). */
@media (prefers-color-scheme: dark) {
  .site-header .nav-cta--mobil { background: var(--gul); color: #14161a; }
  .samtykke__knap { background: var(--text); color: var(--bg); border-color: var(--text); }
  .samtykke__knap:hover { background: var(--text-soft); color: var(--bg); }
  .lead-bar { box-shadow: 0 -6px 18px rgba(0,0,0,.5); border-top: 1px solid var(--border); }
  .ft-kort { box-shadow: none; }
}
/* Gennemgangen på leasingform-guiderne (02-10-2026). */
.leasingform h3 { margin-top: var(--s5); }
.leasingform__ord { display: grid; gap: var(--s2); margin: 0; }
.leasingform__ord div { display: grid; grid-template-columns: 11rem 1fr; gap: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--border); }
.leasingform__ord dt { font-weight: var(--v-semi); }
.leasingform__ord dd { margin: 0; color: var(--text-soft); }
@media (max-width: 560px) { .leasingform__ord div { grid-template-columns: 1fr; gap: 2px; } }

/* Side om side-tabel (finansiel eller operationel, 02-10-2026) */
.sbs__rul { overflow-x: auto; margin: var(--s3) 0 var(--s4); -webkit-overflow-scrolling: touch; }
.sbs { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.sbs th, .sbs td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.sbs thead th { background: var(--bg-alt); font-weight: var(--v-semi); color: var(--text); }
.sbs tbody th { font-weight: var(--v-semi); color: var(--text); min-width: 7em; }
.sbs td { color: var(--text); font-variant-numeric: tabular-nums; min-width: 8em; }
.sbs td small { display: block; color: var(--text-muted); font-size: var(--t-xs); margin-top: 2px; }
/* Taltabeller i artikler (04-10-2026): tal højrestillet, sumrække fremhævet. */
.sbs--tal td, .sbs--tal thead th:not(:first-child) { text-align: right; min-width: 6em; }
.sbs--tal .sbs__sum th, .sbs--tal .sbs__sum td { font-weight: var(--v-semi); border-top: 2px solid var(--text-muted); }
.sbs-titel { margin: var(--s5) 0 0; }
/* Pressesiden (04-10-2026). */
.presse__grafik { margin: var(--s4) 0 0; }
.presse__grafik img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; }
.presse__grafik figcaption { margin-top: var(--s2); font-size: var(--t-sm); color: var(--text-muted); }

/* Grøn omstilling (02-10-2026) */
.groen-regler__gitter { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); margin-top: var(--s4); }
.groen-kort { border: 1px solid var(--border); border-radius: 12px; padding: var(--s4); background: var(--bg-alt); color: var(--text); }
.groen-kort h3 { margin: 0 0 var(--s2); }
.groen-kort p { margin: 0 0 var(--s2); }
.groen-kort__status { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: var(--v-semi); }
.groen-kort__link a { font-weight: var(--v-semi); }
.groen-faelles { margin-top: var(--s4); }
.groen-faelles__gitter { display: grid; gap: var(--s4) var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.groen__hj { display: block; color: var(--text-muted); font-size: var(--t-xs); margin-top: 4px; }
.groen-res { margin-top: var(--s4); }
.groen-res .sbs td { text-align: right; }
.groen-res__sum th, .groen-res__sum td { font-weight: var(--v-semi); border-top: 2px solid var(--text); }
.groen-res__konklusion { font-size: var(--t-lg, 1.15rem); margin-top: var(--s3); }

/* Elberegner: størrelsesfilter og vælgere (02-10-2026) */
.groen-str { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s3) 0 var(--s4); }
.groen-str__lbl { font-weight: var(--v-semi); color: var(--text); margin-right: var(--s1); }
.groen-str button { font: inherit; font-size: var(--t-sm); padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; }
.groen-str button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.groen-str button:focus-visible { outline: 2px solid var(--gul, #f2b705); outline-offset: 2px; }
.groen-beregner select { width: 100%; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 1rem; background: var(--bg); color: var(--text); }
.sbs tbody th small { display: block; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--v-normal); }
.sbs__gruppe th { background: var(--bg-alt); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }

/* Kørsel og priser på én linje på brede skærme (02-10-2026) */
@media (min-width: 700px) {
  .groen-faelles__gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .groen-faelles__gitter { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.groen-faelles__note { margin-top: var(--s3); }

/* Side om side-tabeller må aldrig gøre siden bredere end skærmen (02-10-2026). */
.sbs__rul { max-width: 100%; min-width: 0; width: 100%; }
.sbs--tett th, .sbs--tett td { min-width: 0; padding-left: var(--s2); padding-right: var(--s2); }
.sbs--tett td { white-space: nowrap; }

/* Garantilisten på mærkesiderne: lange garantitekster må bryde på mobil (02-10-2026). */
@media (max-width: 640px) {
  .udstyr-indeks li { flex-wrap: wrap; }
  .udstyr-indeks__tal { white-space: normal; }
}
/* Lange sammenligningslinks ("X vs. Y") må bryde i stedet for at skubbe siden bred. */
.maerkelinks a { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* Elberegner: strøm pr. kWh eller Clever-fastpris (02-10-2026) */
.groen-lad { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); }
.groen-lad button { font: inherit; font-size: var(--t-sm); padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; }
.groen-lad button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.groen-lad button:focus-visible { outline: 2px solid var(--gul, #f2b705); outline-offset: 2px; }
@media (min-width: 1280px) {
  .groen-faelles__gitter--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.groen-faelles__gitter[hidden] { display: none; }
@media (min-width: 700px) {
  #lad-kwh, #lad-fast { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Elberegnerens resultat: én tekststørrelse i konklusionen, tal højrestillet (02-10-2026). */
.groen-res .sbs { font-size: var(--t-base); }
.groen-res .sbs thead th:not(:first-child) { text-align: right; }
.groen-res__boks { margin-top: var(--s4); padding: var(--s4); border-radius: 12px; background: var(--bg-alt); border: 1px solid var(--border); }
.groen-res__boks p { margin: 0; font-size: var(--t-base); line-height: 1.55; color: var(--text); }
.groen-res__boks p + p { margin-top: var(--s2); }
.groen-res__konklusion { font-size: var(--t-base); }
.groen-beregner > .kilde { margin-top: var(--s4); font-size: var(--t-sm); color: var(--text-muted); line-height: 1.6; }
.groen-beregner > .kilde + .kilde { margin-top: var(--s2); }
/* Genveje i toppen af /groen-omstilling/ (02-10-2026) */
.groen-hop { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
#beregner, #regler { scroll-margin-top: 80px; }

/* ─── Grøn omstilling: sidens eget grønne tema (02-10-2026) ─────────────── */
:root {
  --groen:            #1f7a4d;
  --groen-hover:      #17633e;
  --groen-tekst:      #176b42;
  --groen-bg:         #eef7f1;
  --groen-streg:      #cfe6d8;
  --groen-knap-tekst: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --groen:            #3fbf7f;
    --groen-hover:      #5fd396;
    --groen-tekst:      #6fd6a0;
    --groen-bg:         #10231a;
    --groen-streg:      #1f4a33;
    --groen-knap-tekst: #08130d;
  }
}
.groen-side .hero-ny {
  background: var(--groen-bg); border: 1px solid var(--groen-streg); border-radius: 16px;
  padding: var(--s6) var(--s5); margin-top: var(--s3);
}
.groen-side .hero-ny__over { color: var(--groen-tekst); }
.groen-side .hero-ny h1 { color: var(--text); }
.groen-side .knap--primaer { background: var(--groen); color: var(--groen-knap-tekst); }
.groen-side .knap--primaer:hover { background: var(--groen-hover); color: var(--groen-knap-tekst); }
.groen-side .knap--sekundaer { border-color: var(--groen); color: var(--groen-tekst); background: var(--bg); }
.groen-side .knap--sekundaer:hover { background: var(--groen-bg); }
.groen-skiller {
  border: 0; height: 3px; margin: var(--s6) 0 var(--s2); border-radius: 3px;
  background: linear-gradient(90deg, var(--groen) 0%, var(--groen-streg) 55%, transparent 100%);
}
.groen-side .groen-kort { border-top: 3px solid var(--groen); }
.groen-side .groen-kort__status { color: var(--groen-tekst); }
.groen-side .groen-kort__link a { color: var(--groen-tekst); }
.groen-side .groen-str button[aria-pressed="true"],
.groen-side .groen-lad button[aria-pressed="true"] { background: var(--groen); border-color: var(--groen); color: var(--groen-knap-tekst); }
.groen-side .groen-beregner legend { color: var(--groen-tekst); }
.groen-side .groen-res__boks { background: var(--groen-bg); border-color: var(--groen-streg); }
.groen-side .groen-res__sum th, .groen-side .groen-res__sum td { border-top-color: var(--groen); }
@media (max-width: 640px) {
  .groen-side .hero-ny { padding: var(--s5) var(--s4); }
}

/* Ladetidsberegneren (02-10-2026) */
.lt-valg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.lt-valg__lbl { min-width: 13em; font-weight: var(--v-semi); color: var(--text); }
.lt-valg .groen-lad { margin: 0; }
.lt-adv { margin-top: var(--s4); color: var(--text); font-weight: var(--v-semi); }
.lt-adv p { margin: 0; }
.groen-res .sbs td:last-child { text-align: right; }
/* Ladetid: labels får plads til to linjer, så felterne i en række flugter (02-10-2026). */
.lt .groen-faelles__gitter .beregner__felt > span:first-child { min-height: 3.5em; display: flex; align-items: flex-end; }
.lt .groen-faelles__gitter { align-items: start; }
/* Ladetid: bilens tal og antagelserne er klappet sammen (02-10-2026). */
.lt-mere { margin-top: var(--s3); border: 1px solid var(--border); border-radius: 12px; padding: var(--s3) var(--s4); background: var(--bg); }
.lt-mere summary { cursor: pointer; font-weight: var(--v-semi); color: var(--groen-tekst, var(--text)); }
.lt-mere[open] summary { margin-bottom: var(--s3); }
.lt .lt-mere .groen-faelles__gitter .beregner__felt > span:first-child { min-height: 3.5em; display: flex; align-items: flex-end; }

/* Mærkesider: salgstal i toppen (02-10-2026) */
.maerke-salg { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s1); font-size: var(--t-sm); color: var(--text-soft); }
.maerke-salg a.kilde-link { color: var(--text-muted); font-size: var(--t-xs); }

/* Grupperne på /bedste-tilbud/ (02-10-2026) */
.guidegruppe { margin-top: var(--s6); scroll-margin-top: 80px; }
.guidegruppe h3 { font-size: var(--t-lg); margin: 0 0 var(--s1); }

/* Forsidens værktøjslinje (Kort/Tabel) brød ud af skærmen på mobil (02-10-2026). */
@media (max-width: 640px) {
  .vaelger__hoejre { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  .vaelger__hoejre > * { min-width: 0; }
}

/* De mindste telefoner (320 px): guidekort og header må ikke gøre siden bredere (02-10-2026). */
.guidegrid { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
@media (max-width: 360px) {
  .menuknap > span:not(.menuknap__streger) { display: none; }
  .menuknap { padding-left: .7rem; padding-right: .7rem; }
}

/* Partnere (partnere.js): betalte, altid mærket. Rolig flade, ingen bannerlook. */
.partner {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-alt); padding: var(--s4) var(--s5); margin-top: var(--s4);
}
.partner__hoved { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.partner__logo {
  width: 44px; height: 44px; border-radius: var(--r); flex: none;
  display: grid; place-items: center; font-weight: var(--v-bold);
  background: var(--gul-bg); border: 1px solid var(--gul-streg); color: var(--text);
}
.partner__navn { font-size: var(--t-md); margin: 0; }
.partner__omraade { font-size: var(--t-sm); color: var(--text-muted); margin: 0; }
.partner__maerkater { margin-left: auto; display: flex; gap: var(--s2); }
.partner__maerkat {
  font-size: var(--t-xs); font-weight: var(--v-semi); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 2px 6px; background: var(--bg);
}
.partner__maerkat--eksempel { color: var(--text); background: var(--gul-bg); border-color: var(--gul-streg); }
.partner__kort { margin-top: var(--s3); color: var(--text-soft); max-width: var(--prosa); }
.partner__produkter {
  list-style: none; padding: 0; margin: var(--s4) 0 0;
  display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.partner__produkter li {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--s3); display: flex; flex-direction: column; gap: var(--s1);
}
.partner__produkter li > span { font-size: var(--t-sm); color: var(--text-soft); }
.partner__produkter li > .partner__vaegt { color: var(--text-muted); font-variant-numeric: tabular-nums; margin-top: auto; }
.partner__vaegt strong { color: var(--text); }
.partner__knapper { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.partner__note { font-size: var(--t-sm); color: var(--text-muted); margin-top: var(--s3); }
.partner__note a { color: var(--text-muted); }
.partner__fakta { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s4); }
.partner__fakta dt { font-size: var(--t-sm); color: var(--text-muted); }
.partner__fakta dd { margin: 0; font-weight: var(--v-semi); }
.partner-side .sektion--kort p + p { margin-top: var(--s3); }

/* Partnerens egne farver (partnere.json: farver). Accent kun på streger,
   knapper og flader med mørk tekst i lys tilstand; i mørk tilstand falder
   fladerne tilbage til sidens egne. */
.partner--brand { border-top: 4px solid var(--p-accent); }
.partner--brand .partner__produkter li { border-top: 3px solid var(--p-accent); }
.partner--brand .knap--primaer,
.partner-side--brand .knap--primaer { background: var(--p-accent); color: #fff; }
.partner--brand .knap--primaer:hover,
.partner-side--brand .knap--primaer:hover { filter: brightness(1.1); color: #fff; }
.partner--brand .partner__navn { color: var(--text); }
.partner__logo--billede {
  width: auto; height: 44px; padding: 0 var(--s3);
  background: #fff; border: 1px solid var(--border);
}
.partner__logo--billede img { display: block; height: 22px; width: auto; }
.partner-hero {
  background: var(--p-flade); border-top: 5px solid var(--p-accent);
  border-radius: var(--r-lg); padding: var(--s6) var(--s5); margin-top: var(--s3);
}
.partner-hero h1, .partner-hero .hero-ny__manchet { color: #14161a; }
.partner-hero__logo { margin-bottom: var(--s3); }
.partner-hero__logo img { display: block; height: 40px; width: auto; }
.partner-side--brand .partner__produkter li { border-top: 3px solid var(--p-accent); }
.partner-side--brand .maerkelinks a { border-color: var(--p-accent); }
@media (prefers-color-scheme: dark) {
  .partner-hero { background: var(--bg-alt); }
  .partner-hero h1 { color: var(--text); }
  .partner-hero .hero-ny__manchet { color: var(--text-soft); }
  .partner-hero__logo img { background: #fff; padding: 6px 10px; border-radius: var(--r); height: 52px; }
}

/* ── Partnerblok med moduler og opstillinger (partnere.js, fuldt niveau) ──
   Produktfotos har hvid baggrund fra producenten; derfor står de på en hvid
   plade i begge temaer. Al tekst bruger sidens egne farvevariabler. */
.pblok__over {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  font-size: var(--t-sm); color: var(--text-muted); margin-bottom: var(--s2);
}
.pblok__over > span:not(.partner__maerkat) { margin-left: var(--s1); }
.pblok__hoved { display: flex; justify-content: space-between; gap: var(--s5); align-items: flex-start; }
.pblok__hoved h2 { margin-bottom: var(--s2); }
.pblok__manchet { color: var(--text-soft); max-width: var(--prosa); }
.pblok__logo {
  height: 40px; width: auto; flex: none; background: #fff; padding: 8px 12px;
  border-radius: var(--r); border: 1px solid var(--border); box-sizing: content-box;
}
.pblok__pakker {
  display: grid; gap: var(--s4); margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.pakke {
  display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid var(--border); border-top: 4px solid var(--p-accent, var(--text));
  border-radius: var(--r-lg); overflow: hidden;
}
.pakke__billeder {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 1px; background: var(--border);
}
.pakke__billeder figure { margin: 0; background: #fff; position: relative; }
.pakke__billeder img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.pakke__billeder figcaption {
  position: absolute; left: 8px; bottom: 6px; font-size: var(--t-xs); font-weight: var(--v-semi);
  color: #3c4650; background: rgba(255, 255, 255, .9); padding: 1px 6px; border-radius: var(--r-sm);
}
.pakke__krop { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.pakke__over { font-size: var(--t-sm); color: var(--text-muted); margin: 0; }
.pakke__navn { font-size: var(--t-lg); margin: 0; }
.pakke__tekst { color: var(--text-soft); font-size: var(--t-base); margin: 0; }
.pakke__dele { list-style: none; padding: 0; margin: var(--s1) 0 0; font-size: var(--t-sm); }
.pakke__dele li { display: flex; gap: var(--s2); padding: 4px 0; border-top: 1px solid var(--border); }
.pakke__dele li span { color: var(--text-muted); min-width: 4.5em; }
.pakke__dele em { margin-left: auto; font-style: normal; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pakke__fakta, .modul__fakta {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); margin: var(--s2) 0 0;
}
.pakke__fakta dt, .modul__fakta dt { font-size: var(--t-xs); color: var(--text-muted); }
.pakke__fakta dd, .modul__fakta dd { margin: 0; font-weight: var(--v-semi); font-variant-numeric: tabular-nums; }
.pakke__pris {
  margin: auto 0 0; padding-top: var(--s3); font-size: var(--t-xl); font-weight: var(--v-bold);
  font-variant-numeric: tabular-nums; color: var(--text);
}
.pakke__pris span { display: block; font-size: var(--t-xs); font-weight: var(--v-normal); color: var(--text-muted); }
.pakke__pris small { font-size: var(--t-sm); font-weight: var(--v-normal); color: var(--text-muted); }
.pakke__knap { margin-top: var(--s3); text-align: center; justify-content: center; }
.pblok .knap--primaer, .pemne .knap--primaer, .partner-side--brand .knap--primaer {
  background: var(--p-accent, var(--text)); color: #fff; border-color: var(--p-accent, var(--text));
}
.pblok .knap--primaer:hover, .pemne .knap--primaer:hover, .partner-side--brand .knap--primaer:hover {
  background: var(--p-accent, var(--text)); color: #fff; filter: brightness(1.12);
}
.pblok__alle { margin-top: var(--s5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-alt); }
.pblok__alle > summary {
  cursor: pointer; padding: var(--s3) var(--s4); font-weight: var(--v-semi); list-style: none;
}
.pblok__alle > summary::-webkit-details-marker { display: none; }
.pblok__alle > summary::after { content: " +"; color: var(--text-muted); }
.pblok__alle[open] > summary::after { content: " \2212"; }
.pblok__moduler {
  display: grid; gap: var(--s3); padding: 0 var(--s4) var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
.modul { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.modul__billede { background: #fff; border-bottom: 1px solid var(--border); }
.modul__billede img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.modul__krop { padding: var(--s3); }
.modul__side { font-size: var(--t-xs); color: var(--text-muted); margin: 0 0 2px; }
.modul__navn { font-size: var(--t-md); margin: 0 0 var(--s1); }
.modul__tekst { font-size: var(--t-sm); color: var(--text-soft); margin: 0; }
.pblok__knapper { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.pblok__kilde { font-size: var(--t-sm); color: var(--text-muted); margin-top: var(--s4); max-width: var(--prosa); }
.pblok__kilde a { color: var(--text-muted); }

/* Emnesiden: billede, logo og produktlinjer side om side */
.pemne { border-top: 4px solid var(--p-accent, var(--border)); }
.pemne__gitter { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s5); align-items: start; margin-top: var(--s3); }
.pemne__billede { margin: 0; }
.pemne__billede img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); background: #fff; }
.pemne__billede figcaption, .profil-hero__billede figcaption { font-size: var(--t-xs); color: var(--text-muted); margin-top: var(--s1); }
.pemne__tekst .pblok__logo { margin-bottom: var(--s3); }
.pemne__kort { font-size: var(--t-md); color: var(--text); margin: 0 0 var(--s3); }
.pemne__linjer { display: grid; gap: var(--s2); margin: 0; }
.pemne__linjer div { padding: var(--s2) 0; border-top: 1px solid var(--border); }
.pemne__linjer dt { font-weight: var(--v-semi); }
.pemne__linjer dd { margin: 0; color: var(--text-soft); font-size: var(--t-sm); }
.pemne__modeller { margin-top: var(--s5); }
.pemne__modeller h3 { font-size: var(--t-md); margin-bottom: var(--s3); }
.pemne__modeller ul {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.pemne__modeller a {
  display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); text-decoration: none;
  border: 1px solid var(--border); border-left: 4px solid var(--p-accent, var(--border));
  border-radius: var(--r); background: var(--bg-alt); color: var(--text);
}
.pemne__modeller a:hover { border-color: var(--p-accent, var(--text-muted)); }
.pemne__modeller span { font-size: var(--t-sm); color: var(--text-muted); }

/* Profilsiden */
.profil-hero {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--s6); align-items: center;
  padding: var(--s6) 0; border-bottom: 1px solid var(--border);
}
.profil-hero h1 { font-size: var(--t-3xl); line-height: var(--lh-tight); letter-spacing: var(--sp-tight); margin: var(--s3) 0; }
.profil-hero__logo { display: block; height: 44px; width: auto; background: #fff; padding: 8px 12px; border-radius: var(--r); border: 1px solid var(--border); box-sizing: content-box; }
.profil-hero__manchet { font-size: var(--t-md); color: var(--text-soft); max-width: 36em; }
.profil-hero__billede { margin: 0; }
.profil-hero__billede img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); background: #fff; }
.profil-om { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s6); }
.profil-om .partner__fakta { flex-direction: column; gap: var(--s3); align-self: start; padding: var(--s4); background: var(--bg-alt); border-radius: var(--r-lg); }
.linjer { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); margin-top: var(--s4); }
.linje { padding: var(--s4); border: 1px solid var(--border); border-top: 3px solid var(--p-accent, var(--border)); border-radius: var(--r); background: var(--bg-alt); }
.linje h3 { font-size: var(--t-md); margin-bottom: var(--s1); }
.linje p { font-size: var(--t-sm); color: var(--text-soft); margin: 0; }

@media (max-width: 860px) {
  .pemne__gitter, .profil-hero, .profil-om { grid-template-columns: 1fr; }
  .profil-hero__billede { order: -1; }
  .pblok__hoved { flex-direction: column-reverse; gap: var(--s3); }
}
.sektion.pemne .pemne__modeller a, .sektion.pemne .pemne__modeller a:hover { text-decoration: none; }

/* ── Tekniske tegninger og diagrammer (indretning-grafik.js) ──────────────
   Kun sidens farvevariabler; modulerne er gule som sidens accent. */
.tg { margin: var(--s5) 0 0; }
.tg figcaption, .tg-note { font-size: var(--t-sm); color: var(--text-muted); margin-top: var(--s2); max-width: var(--prosa); }
.tg svg { display: block; width: 100%; height: auto; overflow: visible; }
.tg svg text { font-family: var(--mono); font-size: 11px; fill: var(--text-soft); }
.tg-par { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s5); align-items: end; margin-top: var(--s5); }
.tg-par .tg { margin: 0; padding: var(--s4); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-lg); }
.tg-par--kraft { align-items: center; grid-template-columns: 1fr 1fr; }

/* plan og snit */
.tg-rum { fill: var(--bg); stroke: var(--text); stroke-width: 2; }
.tg-hjul { fill: url(#skraa); stroke: var(--text-muted); stroke-width: 1; }
.tg-skraa { stroke: var(--text-muted); stroke-width: 1.2; }
.tg-modul { fill: var(--gul-bg); stroke: var(--gul); stroke-width: 2; }
.tg svg .tg-modul__tekst { font-size: 10px; font-weight: 600; fill: var(--text); letter-spacing: .04em; }
.tg-doer { stroke: var(--gul); stroke-width: 5; stroke-linecap: round; }
.tg-gulvlinje { stroke: var(--text); stroke-width: 2; }
.tg-maal line { stroke: var(--text-muted); stroke-width: 1; }
.tg-pil { fill: none; stroke: var(--text-muted); stroke-width: 1.2; }
.tg svg .tg-maal text { fill: var(--text); font-size: 11px; }
.tg svg .tg-fremhaev { font-weight: 700; fill: var(--text); }
.tg svg .tg-lille { font-size: 10px; letter-spacing: .08em; fill: var(--text-muted); }

/* anatomi */
.tg-anatomi { padding: var(--s4); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-lg); }
.tg-profil { fill: var(--bg); stroke: var(--text); stroke-width: 1.5; }
.tg-huller circle { fill: var(--text-muted); }
.tg-hylde { fill: var(--text-muted); }
.tg-kasse { fill: var(--bg); stroke: var(--text); stroke-width: 1.3; }
.tg-kuffert { fill: var(--gul-bg); stroke: var(--text); stroke-width: 1.5; }
.tg-handtag { fill: none; stroke: var(--text); stroke-width: 2; }
.tg-greb { fill: var(--text-muted); }
.tg-greb--skuffe { fill: var(--gul); }
.tg-skuffe { fill: var(--bg); stroke: var(--text); stroke-width: 1.5; }
.tg-skinne-tynd { stroke: var(--text-muted); stroke-dasharray: 3 3; }
.tg-bakke { fill: var(--bg); stroke: var(--text); stroke-width: 1.5; }
.tg-skillevaeg { stroke: var(--text-muted); stroke-width: 1.2; }
.tg-gulv { fill: var(--text-muted); }
.tg-skinne { stroke: var(--gul); stroke-width: 3; stroke-dasharray: 8 4; }
.tg-call line { stroke: var(--text-muted); stroke-width: 1; }
.tg-call circle { fill: var(--text); }
.tg svg .tg-call__navn { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: var(--text); }
.tg svg .tg-call__under { font-family: var(--sans); font-size: 11px; fill: var(--text-muted); }

/* noegletal */
.tg-noegle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: var(--s5) 0 0; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.tg-noegle div { background: var(--bg-alt); padding: var(--s3) var(--s4); }
.tg-noegle dt { font-size: var(--t-xs); color: var(--text-muted); }
.tg-noegle dd { margin: 2px 0 0; font-size: var(--t-xl); font-weight: var(--v-bold); font-variant-numeric: tabular-nums; color: var(--text); }
.tg-noegle dd span { font-size: var(--t-sm); font-weight: var(--v-medium); color: var(--text-muted); }

/* soejler: vaegt pr. meter */
.tg-forklaring { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: var(--t-sm); color: var(--text-soft); margin: 0 0 var(--s3); }
.tg-forklaring span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.tg-forklaring__hylder::before, .tg-soejle--hylder i, .tg-prik--hylder { background: var(--text-muted); }
.tg-forklaring__blandet::before, .tg-soejle--blandet i, .tg-prik--blandet { background: var(--gul-streg); }
.tg-forklaring__skuffer::before, .tg-soejle--skuffer i, .tg-prik--skuffer { background: var(--gul); }
.tg-soejler { display: grid; gap: var(--s2); }
.tg-soejle { display: grid; grid-template-columns: 9.5rem 1fr 5.5rem; gap: var(--s3); align-items: center; }
.tg-soejle__navn { font-weight: var(--v-semi); font-size: var(--t-sm); line-height: 1.2; }
.tg-soejle__navn small, .tg-nytte__navn small, .tg-nytte__tal small { display: block; font-weight: var(--v-normal); color: var(--text-muted); font-size: var(--t-xs); }
.tg-soejle__bar { height: 22px; background: var(--bg-alt); border-radius: var(--r-sm); overflow: hidden; }
.tg-soejle__bar i { display: block; height: 100%; border-radius: var(--r-sm); }
.tg-soejle__tal { font-variant-numeric: tabular-nums; font-weight: var(--v-semi); text-align: right; font-size: var(--t-sm); }

/* nyttelast */
.tg-nytter { display: grid; gap: var(--s3); }
.tg-nytte { display: grid; grid-template-columns: 14rem 1fr 9rem; gap: var(--s3); align-items: center; }
.tg-nytte__navn { font-weight: var(--v-semi); font-size: var(--t-sm); line-height: 1.25; }
.tg-nytte__bar { display: flex; height: 26px; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-alt); border: 1px solid var(--border); }
.tg-nytte__ind { display: block; background: var(--gul); }
.tg-nytte__rest { display: block; flex: 1; background: repeating-linear-gradient(90deg, var(--bg-alt) 0 9px, var(--border) 9px 10px); }
.tg-nytte__tal { font-variant-numeric: tabular-nums; font-size: var(--t-sm); text-align: right; }

/* tabeller og prikker */
.tg-tabel td, .tg-tabel th { font-variant-numeric: tabular-nums; }
.tg-prik { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }

/* kraefter */
.tg-last { fill: var(--gul-bg); stroke: var(--text); stroke-width: 2; }
.tg svg .tg-last__tekst { font-weight: 700; fill: var(--text); font-size: 13px; letter-spacing: .1em; }
.tg-kraft { stroke: var(--text); stroke-width: 3; }
.tg-kraft--stor { stroke-width: 5; }
.tg-kraftpil { fill: var(--text); }
.tg svg .tg-kraft__tekst { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: var(--text); }

/* proces */
.tg-proces { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); counter-reset: none; position: relative; }
.tg-proces::before { content: ""; position: absolute; left: 18px; right: 18px; top: 17px; height: 2px; background: var(--border); }
.tg-proces li { position: relative; }
.tg-proces__nr { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gul); color: #14161a; font-weight: var(--v-bold); margin-bottom: var(--s3); }
.tg-proces strong { display: block; margin-bottom: var(--s1); }
.tg-proces p { font-size: var(--t-sm); color: var(--text-soft); margin: 0; }

@media (max-width: 860px) {
  .tg-par, .tg-par--kraft { grid-template-columns: 1fr; }
  .tg-noegle { grid-template-columns: 1fr 1fr; }
  .tg-proces { grid-template-columns: 1fr; }
  .tg-proces::before { left: 17px; right: auto; top: 18px; bottom: 18px; width: 2px; height: auto; }
  .tg-proces li { padding-left: 52px; }
  .tg-proces__nr { position: absolute; left: 0; top: 0; }
  .tg-soejle { grid-template-columns: 7rem 1fr 4.5rem; }
  .tg-nytte { grid-template-columns: 1fr; gap: var(--s1); }
  .tg-nytte__tal { text-align: left; }
}
.tg-anatomi__gitter { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr; gap: var(--s5); align-items: center; }
.tg-nr circle { fill: var(--text); }
.tg svg .tg-nr text { fill: var(--bg); font-family: var(--sans); font-size: 12px; font-weight: 700; }
.tg-dele { margin: 0; padding: 0; list-style: none; counter-reset: del; display: grid; gap: var(--s2); }
.tg-dele li { counter-increment: del; display: grid; grid-template-columns: 26px 1fr; column-gap: var(--s2); }
.tg-dele li::before { content: counter(del); grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.tg-dele strong { font-size: var(--t-base); }
.tg-dele span { font-size: var(--t-sm); color: var(--text-muted); }
@media (max-width: 860px) { .tg-anatomi__gitter { grid-template-columns: 1fr; } }
.tg-anatomi__gitter svg { max-width: 460px; justify-self: center; }
.tg-par--kraft .tg svg { max-width: 420px; margin: 0 auto; }
.tg, .tg-par > *, .tg-kraft-tabel { min-width: 0; }
.tg .tilbud-tabel-wrap, .tg-kraft-tabel { overflow-x: auto; max-width: 100%; }
.pblok__knapper .knap, .pakke__knap { white-space: normal; text-align: center; }
.tg-par:not(.tg-par--kraft) { align-items: stretch; }
.tg-par:not(.tg-par--kraft) .tg { display: flex; flex-direction: column; justify-content: space-between; }
.indretning-link { margin: var(--s4) 0 0; }
.indretning-link a { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); border: 1px solid var(--border); border-left: 4px solid var(--gul); border-radius: var(--r); background: var(--bg-alt); color: var(--text); text-decoration: none; }
.indretning-link span { font-size: var(--t-sm); color: var(--text-soft); }
.indretning-link a:hover { border-color: var(--gul); }
.tg-maal-tabel th[scope=row] { text-align: left; }
.tg-maal-tabel th[scope=row] a { text-decoration: underline; text-decoration-color: var(--gul-streg); text-underline-offset: 3px; }
.tg-par:not(.tg-par--kraft) .tg svg { margin: auto 0; }
.indretning-link-sektion .indretning-link a, .indretning-link-sektion .indretning-link a:hover { text-decoration: none; }

/* ── Partnerens profilside (partnere.js, profilSide) ─────────────────────── */
.profil-fakta { margin: var(--s5) 0 0; }
.profil-fakta dd { color: var(--text); }
.fordele { display: grid; gap: var(--s3); margin-top: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.fordel { padding: var(--s4); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-lg); }
.fordel__nr {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--p-accent, var(--text)); color: #fff; font-weight: var(--v-bold); font-size: var(--t-sm); margin-bottom: var(--s2);
}
.fordel h3 { font-size: var(--t-md); margin: 0 0 var(--s1); }
.fordel p { font-size: var(--t-sm); color: var(--text-soft); margin: 0; }

/* Vaelg din bil */
.vb-vaelger {
  display: grid; gap: var(--s2); margin-top: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}
.vb-kort {
  display: flex; flex-direction: column; gap: 2px; padding: var(--s2); text-decoration: none; color: var(--text);
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r); transition: border-color .15s;
}
.vb-kort:hover { border-color: var(--p-accent, var(--text-muted)); }
.vb-kort[aria-current="true"] { border-color: var(--p-accent, var(--text)); box-shadow: inset 0 0 0 1px var(--p-accent, var(--text)); }
.vb-kort img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; margin-bottom: var(--s1); }
.vb-kort__navn { font-weight: var(--v-semi); font-size: var(--t-sm); line-height: 1.25; }
.vb-kort__info { font-size: var(--t-xs); color: var(--text-muted); }
.vb-panel { margin-top: var(--s6); scroll-margin-top: 90px; }
.vb-panel__hoved { border-top: 4px solid var(--p-accent, var(--border)); padding-top: var(--s3); }
.vb-panel__hoved h3 { font-size: var(--t-xl); margin: 0 0 var(--s1); }
.vb-panel__hoved p { color: var(--text-soft); margin: 0; }

/* Produktlinjer med billeder */
.linjer--billeder { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.linjer--billeder .linje { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.linjer--billeder .linje img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #fff; }
.linje__tekst { padding: var(--s3) var(--s4) var(--s4); }
.partner-side .faq__punkt p { max-width: var(--prosa); }
.tg-maal-tabel th, .tg-maal-tabel td { padding-top: 8px; padding-bottom: 8px; }
.tg-flere { margin-top: var(--s2); }
.tg-flere > summary { cursor: pointer; font-weight: var(--v-semi); font-size: var(--t-sm); padding: var(--s2) 0; }
.tg-flere .tilbud-tabel-wrap { margin-top: var(--s2); }
@media (max-width: 640px) {
  .vb-vaelger { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s2); -webkit-overflow-scrolling: touch; }
  .vb-kort { flex: 0 0 140px; scroll-snap-align: start; }
}
.partner-side--brand .tg-proces__nr { background: var(--p-accent); color: #fff; }
.emnekort { display: grid; gap: var(--s3); margin-top: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.emnekort__kort { padding: var(--s4); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-lg); }
.emnekort__kort h3 { font-size: var(--t-md); margin: 0 0 var(--s1); }
.sektion .emnekort__kort p { font-size: var(--t-sm); color: var(--text-soft); margin: 0; max-width: none; }
/* Mindre illustrationer (brugeren 03-10-2026: for store) */
.tg-anatomi__gitter { grid-template-columns: minmax(0, 300px) 1fr; }
.tg-anatomi__gitter svg { max-width: 300px; }
.tg-par:not(.tg-par--kraft) { max-width: 720px; }
.tg-par:not(.tg-par--kraft) .tg svg { max-height: 300px; }
.tg-par--kraft .tg svg { max-width: 300px; }
.tg--lille { max-width: 360px; padding: var(--s3); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-lg); margin: 0; }
.ind-maal { display: grid; grid-template-columns: 1fr minmax(0, 360px); gap: var(--s5); align-items: start; margin-top: var(--s3); }
.ind-tal { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); margin: 0; }
.ind-tal div { padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.ind-tal dt { font-size: var(--t-xs); color: var(--text-muted); }
.ind-tal dd { margin: 0; font-size: var(--t-lg); font-weight: var(--v-semi); font-variant-numeric: tabular-nums; }
.ind-tal dd span { font-size: var(--t-sm); color: var(--text-muted); font-weight: var(--v-normal); }
@media (max-width: 860px) { .ind-maal, .tg-anatomi__gitter { grid-template-columns: 1fr; } .tg-anatomi__gitter svg { justify-self: center; } }
.tg-par:not(.tg-par--kraft) .tg svg { max-height: 360px; }
.tg-par .tg svg text, .tg--lille svg text { font-size: 14px; }
.tg-par .tg svg .tg-lille, .tg--lille svg .tg-lille { font-size: 12px; }

/* Guidernes nye top (04-10-2026, GULPLADE_GUIDE_NY): knapper, tillid og de tre bedste. */
.guide-knapper { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s4) 0 0; }
.tillid { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s4) 0 0; padding: 0;
  font-size: var(--t-sm); color: var(--text-soft); }
.tillid li { display: flex; align-items: center; gap: var(--s2); }
.tillid li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gul); flex: none; }
.podium { list-style: none; margin: var(--s5) 0 var(--s2); padding: 0; display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.podium__kort { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--tid) var(--ease), box-shadow var(--tid) var(--ease); }
.podium__kort:hover { border-color: var(--border-strong); box-shadow: var(--skygge-lg); }
.podium__kort--vinder { border-color: var(--gul); box-shadow: 0 0 0 1px var(--gul); }
.podium__kort a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.podium__billede { position: relative; aspect-ratio: 16 / 10; background: var(--bg-muted); border-bottom: 1px solid var(--border); overflow: hidden; }
.podium__billede img { width: 100%; height: 100%; object-fit: cover; }
.podium__nr { position: absolute; top: var(--s3); left: var(--s3); padding: .15rem .5rem; border-radius: var(--r-sm);
  background: var(--text); color: var(--bg); font-size: var(--t-xs); font-weight: var(--v-semi); }
.podium__kort--vinder .podium__nr { background: var(--gul); color: #14161a; }
.podium__krop { display: grid; gap: var(--s1); padding: var(--s4); flex: 1; align-content: start; }
.podium__navn { font-size: var(--t-lg); margin: 0; letter-spacing: var(--sp-tight); }
.podium__tal { margin: var(--s1) 0 0; font-size: var(--t-xl); font-weight: var(--v-semi); font-variant-numeric: tabular-nums; }
.podium__tal span { font-size: var(--t-sm); font-weight: var(--v-medium); color: var(--text-muted); }
.podium__pris, .podium__hos { margin: 0; font-size: var(--t-sm); color: var(--text-soft); }
.podium__se { margin-top: var(--s3); font-size: var(--t-sm); font-weight: var(--v-semi); color: var(--text); }
.podium__se::after { content: " \2192"; }
.podium__note { margin-top: var(--s2); }
.vinderkort { list-style: none; margin: var(--s4) 0; padding: 0; display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.vinderkort a { display: grid; gap: 2px; height: 100%; padding: 0 0 var(--s4); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; color: inherit; text-decoration: none; background: var(--bg);
  transition: border-color var(--tid) var(--ease), box-shadow var(--tid) var(--ease); }
.vinderkort a:hover { border-color: var(--border-strong); box-shadow: var(--skygge-lg); }
.vinderkort img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-muted); border-bottom: 1px solid var(--border); margin-bottom: var(--s3); }
.vinderkort span { padding: 0 var(--s4); }
.vinderkort__kat { font-size: var(--t-xs); font-weight: var(--v-semi); color: var(--gul-tekst); text-transform: uppercase; letter-spacing: var(--sp-wide); }
.vinderkort__navn { font-size: var(--t-lg); font-weight: var(--v-semi); color: var(--text); }
.vinderkort__tal { font-size: var(--t-base); font-variant-numeric: tabular-nums; color: var(--text); }
.vinderkort__hos { font-size: var(--t-sm); color: var(--text-muted); }

/* Guidernes nøgletal og prisdiagram (04-10-2026, GULPLADE_GUIDE_LIV, preview).
   Diesel og el har samme farver som pressegrafikken (valideret for farveblindhed). */
:root { --graf-diesel: #b88300; --graf-el: #2f63b0; --graf-andet: #8a8f98; }
@media (prefers-color-scheme: dark) { :root { --graf-diesel: #d9a21b; --graf-el: #6b9be0; --graf-andet: #8a919c; } }
.guidetal { display: grid; gap: var(--s3); margin: var(--s6, 2rem) 0 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr)); }
.guidetal__felt { margin: 0; padding: var(--s4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-alt); }
.guidetal dt { font-size: var(--t-xs); font-weight: var(--v-semi); text-transform: uppercase; letter-spacing: var(--sp-wide); color: var(--text-muted); }
.guidetal dd { margin: 0; }
.guidetal__tal { margin-top: var(--s1) !important; font-size: var(--t-2xl); font-weight: var(--v-semi); letter-spacing: var(--sp-tight); font-variant-numeric: tabular-nums; color: var(--text); }
.guidetal__under { margin-top: var(--s1) !important; font-size: var(--t-sm); color: var(--text-soft); }
.prisgraf__figur { margin: var(--s5) 0 0; padding: var(--s5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); }
.prisgraf__titel { font-size: var(--t-sm); font-weight: var(--v-semi); color: var(--text-soft); }
.prisgraf__forklaring { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s3) 0 0; padding: 0; font-size: var(--t-sm); color: var(--text-soft); }
.prisgraf__forklaring li { display: flex; align-items: center; gap: var(--s2); }
.prisgraf__prik { width: .7rem; height: .7rem; border-radius: 3px; flex: none; }
.prisgraf__prik--diesel, .prisgraf__soejle--diesel { background: var(--graf-diesel); }
.prisgraf__prik--el, .prisgraf__soejle--el { background: var(--graf-el); }
.prisgraf__prik--andet, .prisgraf__soejle--andet { background: var(--graf-andet); }
.prisgraf__liste { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); }
.prisgraf__raekke { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 4.5rem; align-items: center; gap: var(--s3); font-size: var(--t-base); }
.prisgraf__navn { color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prisgraf__navn:hover { text-decoration: underline; }
.prisgraf__el { font-size: var(--t-xs); font-weight: var(--v-semi); color: var(--graf-el); }
.prisgraf__spor { display: block; height: .85rem; border-radius: 0 4px 4px 0; background: var(--bg-muted); overflow: hidden; }
.prisgraf__soejle { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.prisgraf__tal { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
@media (max-width: 560px) {
  .prisgraf__figur { padding: var(--s4); }
  .prisgraf__raekke { grid-template-columns: minmax(0, 1fr) 4.2rem; row-gap: var(--s1); }
  .prisgraf__spor { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 560px) {
  .guidetal__felt { padding: var(--s3); }
  .guidetal__tal { font-size: var(--t-xl); }
}

/* Restbjælken i finansiel leasing: ydelser plus restværdi i samme skala (04-10-2026). */
.restbar { display: flex; height: 8px; margin: 6px 0 2px auto; min-width: 9rem; border-radius: 2px; overflow: hidden; }
.restbar__betalt { background: var(--text-soft); }
.restbar__rest { background: repeating-linear-gradient(135deg, var(--text-muted) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--text-muted); }
.restbar-legende { display: flex; gap: 1rem; margin: -.4rem 0 .75rem; font-size: var(--t-xs); color: var(--text-muted); }
.restbar-legende span::before { content: ""; display: inline-block; width: 12px; height: 8px; margin-right: 5px; vertical-align: middle; border-radius: 2px; }
.restbar-legende__betalt::before { background: var(--text-soft); }
.restbar-legende__rest::before { background: repeating-linear-gradient(135deg, var(--text-muted) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--text-muted); }
.restbar--billigst .restbar__betalt { background: var(--ok); }
.restbar--billigst .restbar__rest { background: repeating-linear-gradient(135deg, var(--ok) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--ok); }
.restbar__billigst { color: var(--ok); font-weight: var(--v-medium); }