/* =========================================================
   Cars & Care · site.css
   Fælles designsystem for hele sitet (retning D2).
   Tokens øverst (kan oversættes 1:1 til Webflow Variables),
   derefter grundlag, layout og én blok pr. komponent.
   Hver komponent har sine egne breakpoints lige under sig.
   Breakpoints: 1180, 1080, 959 (mobilmenu og mobilbjælke), 640 px.
   Dokumentation: KOMPONENTER.md. Visuel reference: stilark.html.

   Indhold
    1  Tokens
    2  Grundlag og temaer
    3  Typografi
    4  Layout: container, sektioner, intro, split, kolonner
    5  Knapper og links
    6  Header, navigation og mobilmenu
    7  Mobilbjælke
    8  Footer
    9  Forsidens hero
   10  Sidehoved (undersider) og brødkrumme
   11  Tillidsrække
   12  To veje
   13  Pakker, størrelsespriser og pristabel
   14  Fotos (udsnit), billedpladsholdere, før og efter
   15  Biludlejning: inkluderet, biler, specifikationer, galleri
   16  Erhverv: kort, kunder, logovæg, citater
   17  Trin
   18  Booking: trinindikator, trinpanel, valgkort, tider, opsummering
   19  Formularer
   20  Lister, meddelelser, pladsholdertekst, mærkater og chips
   21  Harmonika (FAQ)
   22  Cases (før og efter)
   23  Seneste opgaver (feed)
   24  Kontakt, åbningstider og kort
   25  Artikler, brødtekst, indholdsfortegnelse og tabeller
   26  CTA-bånd og 404
   27  Reduceret bevægelse
   ========================================================= */

/* =========================================================
   1  Tokens
   ========================================================= */
:root {
  /* Farver */
  --c-anthracite: #1e2329;      /* header, hero, biludlejning, footer */
  --c-raised: #282e35;          /* hævede flader på mørk */
  --c-white: #ffffff;
  --c-light: #f2f4f6;           /* lyse sektioner */
  --c-text: #15191e;            /* tekst på lys (17,6:1 på hvid) */
  --c-muted: #545d68;           /* dæmpet tekst på lys (6,7:1 hvid, 6,1:1 lysgrå) */
  --c-text-dark: #f4f6f8;       /* tekst på mørk (14,6:1) */
  --c-muted-dark: #b8c1cb;      /* dæmpet tekst på mørk (8,7:1) */
  --c-subtle-dark: #8f99a4;     /* metatekst på mørk (5,5:1) */
  --c-line: #dde1e6;            /* hårstreg på lys */
  --c-line-dark: #3a414a;       /* hårstreg på mørk */
  --c-control: #858d96;         /* kant på knapper på lys (3,4:1) */
  --c-control-dark: #7a838d;    /* kant på knapper på mørk (4,1:1) */
  --c-accent: #1565c0;          /* den ene blå, på lys (5,8:1 hvid) */
  --c-accent-dark: #6aa6f5;     /* den ene blå, på mørk (6,3:1) */
  --c-accent-tint: #e8f0fb;     /* baggrund bag lille etiket (blå tekst 5,0:1) */
  --c-wordmark: #646d78;        /* pladsholder-ordmærker (4,8:1 på lysgrå) */

  /* Farver tilføjet til de fælles komponenter */
  --c-line-strong: #d3d8de;     /* kraftigere hårstreg på lys (kortkanter, sektionsfødder) */
  --c-line-strong-dark: #4a525c;/* kraftigere hårstreg på mørk (hover på kort) */
  --c-dark-hover: #2d343c;      /* hover på mørk knap */
  --c-danger: #b42318;          /* fejl på lys (6,6:1 hvid, 5,8:1 på tint) */
  --c-danger-dark: #ff8f84;     /* fejl på mørk (7,2:1 antracit, 6,2:1 hævet) */
  --c-danger-tint: #fdeceb;     /* baggrund bag fejlopsummering på lys */
  --c-danger-tint-dark: #3a2f31;/* baggrund bag fejlopsummering på mørk */
  --c-ph-fill: #e9edf1;         /* billedpladsholder på lys (dæmpet tekst 5,7:1) */
  --c-ph-fill-alt: #dfe4ea;     /* anden flade i før/efter-pladsholdere */
  --c-ph-line: #d0d6dd;         /* kant og ikonring i pladsholdere på lys */
  --c-ph-fill-dark: #2a3139;    /* billedpladsholder på mørk (dæmpet tekst 7,2:1) */
  --c-ph-fill-alt-dark: #323a43;
  --c-ph-line-dark: #3f4751;
  --c-accent-tint-dark: #26344a;/* baggrund bag etiket på mørk (blå tekst 5,0:1) */

  /* Typografi */
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-display: clamp(5.5rem, 3rem + 9vw, 11rem);        /* 404-tallet */
  --fs-h1: clamp(2.5rem, 1.45rem + 3.4vw, 4.5rem);       /* forsidens hero */
  --fs-h1-page: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); /* undersiders sidehoved */
  --fs-h2: clamp(2rem, 1.5rem + 1.6vw, 3.125rem);
  --fs-h3: clamp(1.25rem, 1.15rem + .35vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-price: clamp(2.25rem, 1.8rem + 1.5vw, 3.25rem);
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-xs: .8125rem;
  --fs-eyebrow: .75rem;
  --lh-tight: 1.06;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --measure: 68ch;              /* linjelængde for brødtekst */

  /* Afstande */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(3.5rem, 2.5rem + 3vw, 6rem);
  --space-intro: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  --col-pad: 3rem;              /* luft på hver side af en lodret hårstreg */
  --container: 76rem;
  --gutter: clamp(1.25rem, .6rem + 2.4vw, 2.5rem);
  --header-h: 76px;

  /* Radier og skygger */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(21, 25, 30, .05), 0 14px 36px -14px rgba(21, 25, 30, .16);
  --shadow-card-hover: 0 1px 2px rgba(21, 25, 30, .06), 0 22px 44px -16px rgba(21, 25, 30, .22);
  --shadow-float: 0 18px 40px -14px rgba(0, 0, 0, .55);

  /* Bevægelse */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .22s;

  /* Billedgradering: ens, kølig og neutral på alle fotos */
  --img-grade: saturate(.7) contrast(1.03);
  --img-grade-hero: saturate(.85) brightness(1.06) contrast(1.03);

  /* Standardtema (lyst), så komponenter også virker uden en temaklasse */
  --fg: var(--c-text); --fg-muted: var(--c-muted); --link: var(--c-accent); --line: var(--c-line); --focus: var(--c-accent);
  --line-strong: var(--c-line-strong); --surface: var(--c-white); --control: var(--c-control);
  --field-bg: var(--c-white); --field-border: var(--c-control);
  --ph-bg: var(--c-ph-fill); --ph-bg-alt: var(--c-ph-fill-alt); --ph-fg: var(--c-muted); --ph-line: var(--c-ph-line);
  --danger: var(--c-danger); --danger-bg: var(--c-danger-tint);
  --tint: var(--c-accent-tint); --on-tint: var(--c-accent);
  --pressed-bg: var(--c-anthracite); --pressed-fg: var(--c-white);
}
/* Til ejer: de nuværende fotos er kun 600 px brede, så de vises bevidst små.
   Send gerne de originale kamerafiler (mindst 1600 px), så billederne kan vises
   skarpt på telefoner og nye skærme. Før/efter-par skal tages i samme vinkel og lys. */

/* =========================================================
   2  Grundlag og temaer
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "lnum" 1;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { flex-shrink: 0; }
[hidden] { display: none !important; }

/* Temaer: sæt theme-light eller theme-dark på hver sektion. De kan indlejres
   (fx theme-light på et hvidt kort i en mørk sektion). */
.theme-light {
  --fg: var(--c-text); --fg-muted: var(--c-muted); --link: var(--c-accent); --line: var(--c-line); --focus: var(--c-accent);
  --line-strong: var(--c-line-strong); --surface: var(--c-white); --control: var(--c-control);
  --field-bg: var(--c-white); --field-border: var(--c-control);
  --ph-bg: var(--c-ph-fill); --ph-bg-alt: var(--c-ph-fill-alt); --ph-fg: var(--c-muted); --ph-line: var(--c-ph-line);
  --danger: var(--c-danger); --danger-bg: var(--c-danger-tint);
  --tint: var(--c-accent-tint); --on-tint: var(--c-accent);
  --pressed-bg: var(--c-anthracite); --pressed-fg: var(--c-white);
}
.theme-dark {
  --fg: var(--c-text-dark); --fg-muted: var(--c-muted-dark); --link: var(--c-accent-dark); --line: var(--c-line-dark); --focus: var(--c-accent-dark);
  --line-strong: var(--c-line-strong-dark); --surface: var(--c-raised); --control: var(--c-control-dark);
  --field-bg: var(--c-anthracite); --field-border: var(--c-control-dark);
  --ph-bg: var(--c-ph-fill-dark); --ph-bg-alt: var(--c-ph-fill-alt-dark); --ph-fg: var(--c-muted-dark); --ph-line: var(--c-ph-line-dark);
  --danger: var(--c-danger-dark); --danger-bg: var(--c-danger-tint-dark);
  --tint: var(--c-accent-tint-dark); --on-tint: var(--c-accent-dark);
  --pressed-bg: var(--c-text-dark); --pressed-fg: var(--c-text);
  background: var(--c-anthracite); color: var(--c-text-dark);
}
.theme-light.surface, .theme-light .surface { background: var(--c-white); color: var(--c-text); }

:focus-visible { outline: 2px solid var(--focus, var(--c-accent)); outline-offset: 3px; }
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--c-white); color: var(--c-text); padding: .75rem 1rem; border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; stroke-width: 1.9; }
.icon--lg { width: 24px; height: 24px; stroke-width: 1.5; }
.chev { transition: transform var(--dur) var(--ease); }
[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Pladsholdere for den fælles header og footer: forhindrer et hop, før site.js har kørt */
[data-include="header"] { display: block; height: var(--header-h); background: var(--c-anthracite); }
[data-include="footer"] { display: block; min-height: 24rem; background: var(--c-anthracite); }

/* =========================================================
   3  Typografi
   ========================================================= */
.eyebrow {
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--link); margin-bottom: var(--space-4);
}
.eyebrow--muted { color: var(--fg-muted); }
.h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.1; letter-spacing: -.028em; color: var(--fg); }
.h2 strong { font-weight: 650; }
.h3 { font-size: var(--fs-h3); font-weight: 650; line-height: 1.3; letter-spacing: -.015em; color: var(--fg); }
.h4 { font-size: var(--fs-h4); font-weight: 650; line-height: 1.35; letter-spacing: -.01em; color: var(--fg); }
.lead { font-size: var(--fs-lead); color: var(--fg-muted); line-height: 1.6; }
.muted { color: var(--fg-muted); }
.small { font-size: var(--fs-small); }
.xs { font-size: var(--fs-xs); }
.t-light { font-weight: 300; }
.num { font-variant-numeric: tabular-nums; }
.measure { max-width: var(--measure); }
/* Én stille linje under en pris eller en sektion, fx "Alle priser er inkl. moms." */
.note { font-size: var(--fs-small); color: var(--fg-muted); }
.note--xs { font-size: var(--fs-xs); }

/* =========================================================
   4  Layout
   ========================================================= */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(52rem + var(--gutter) * 2); }
.section { padding-block: var(--space-section); }
.section--white { background: var(--c-white); }
.section--light { background: var(--c-light); }
.section--dark { background: var(--c-anthracite); }
/* Tættere rytme, og to sektioner på samme baggrund, der deles af en hårstreg */
.section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section--flush-top { padding-top: 0; }
.section--rule > .container { border-top: 1px solid var(--line); padding-top: var(--space-section); }
.section--rule { padding-top: 0; }
.rule { height: 0; border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Sektionsintro. Hver variant følger gitteret under den, så de lodrette linjer mødes. */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5) var(--space-8); align-items: end; margin-bottom: var(--space-intro); }
.intro__text { color: var(--fg-muted); font-size: var(--fs-lead); max-width: 34rem; }
/* To veje: teksten starter over højre kolonnes indhold */
.intro--paths { column-gap: 0; }
.intro--paths .intro__text { padding-left: var(--col-pad); }
/* Pakker: overskrift over kolonne 1-2, tekst over kolonne 3 */
.intro--three { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-5); }
.intro--three > :first-child { grid-column: span 2; }
/* Biludlejning: samme 5/7-gitter som indholdet */
.intro--sub { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
/* Én kolonne */
.intro--single { grid-template-columns: minmax(0, 40rem); }
.intro--single .intro__text { margin-top: calc(var(--space-4) * -.25); }
/* Overskrift til venstre, et link (fx "Se alle") helt til højre */
.intro--link { grid-template-columns: minmax(0, 1fr) auto; }
.intro__link { justify-self: end; }
.intro .note { margin-top: var(--space-3); }

/* Split: to kolonner med fast forhold. Standard 5/7 som biludlejning. */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.split--6-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.split--center { align-items: center; }
.split--end { align-items: end; }

/* Kolonner med hårstreger: åbne kolonner delt af lodrette og vandrette hårstreger,
   uden kasser. Hvert element tegner en lodret streg midt i mellemrummet til højre
   og en vandret streg over sig selv og mellemrummet. Det, der rækker ud over højre
   kant, klippes væk, så stregerne følger med, når antallet af kolonner skifter.
   De 8 px polstring giver plads til fokusrammer i venstre side. */
.columns { --cols-gap: var(--space-8); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cols-gap); overflow: hidden; padding: 0 8px 8px; margin: 0 -8px -8px; clip-path: inset(0 8px 0 0); }
.columns--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); --cols-gap: calc(var(--col-pad) * 2); }
.columns--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); --cols-gap: var(--space-7); }
.columns__item { position: relative; padding-block: var(--space-6); }
.columns__item::before { content: ""; position: absolute; top: 0; bottom: 0; right: calc(var(--cols-gap) / -2); border-left: 1px solid var(--line); }
.columns__item::after { content: ""; position: absolute; top: 0; left: 0; right: calc(var(--cols-gap) * -1); border-top: 1px solid var(--line); }
.columns--open .columns__item { padding-bottom: 0; }
.columns__icon { display: block; color: var(--link); margin-bottom: var(--space-4); }
.columns__title { font-size: 1.25rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--fg); }
.columns__text { margin-top: var(--space-2); color: var(--fg-muted); font-size: 1rem; }
.columns__text a, .columns__item .inline-link { color: var(--link); }
.columns__item .link { margin-top: var(--space-4); }

@media (max-width: 1080px) {
  .intro--three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-8); }
  .intro--three > :first-child { grid-column: auto; }
  .columns--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); --cols-gap: var(--space-8); }
}
@media (max-width: 959px) {
  .intro, .intro--three, .intro--sub { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .intro--paths .intro__text { padding-left: 0; }
  .intro--link { grid-template-columns: minmax(0, 1fr); }
  .intro__link { justify-self: start; }
  .split, .split--6-6, .split--7-5, .split--4-8 { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .columns--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .columns { grid-template-columns: minmax(0, 1fr); }
  .columns--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); --cols-gap: var(--space-6); }
}
@media (max-width: 640px) {
  .columns--4 { grid-template-columns: minmax(0, 1fr); }
  .columns__item { padding-block: var(--space-5); }
}

/* =========================================================
   5  Knapper og links
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.6rem; border-radius: var(--radius-pill);
  font-size: .96875rem; font-weight: 650; letter-spacing: -.005em; line-height: 1.2; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.btn:hover .icon--arrow { transform: translateX(3px); }
.btn--sm { min-height: 44px; padding: 0 1.25rem; font-size: .9375rem; }
.btn--block { width: 100%; }

/* På mørk */
.btn--light { background: var(--c-text-dark); color: var(--c-text); }
.btn--light:hover { background: var(--c-white); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .7); transform: translateY(-1px); }
.btn--ghost { border-color: var(--c-control-dark); color: var(--c-text-dark); }
.btn--ghost:hover { border-color: var(--c-text-dark); background: rgba(255, 255, 255, .05); }
/* På lys */
.btn--dark { background: var(--c-anthracite); color: var(--c-white); }
.btn--dark:hover { background: var(--c-dark-hover); box-shadow: 0 12px 26px -14px rgba(21, 25, 30, .6); transform: translateY(-1px); }
.btn--outline { border-color: var(--c-control); color: var(--c-text); background: transparent; }
.btn--outline:hover { border-color: var(--c-text); background: var(--c-white); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

.link {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--link); font-weight: 650; font-size: var(--fs-small);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em;
  text-decoration-color: currentColor;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link:hover { gap: .7rem; }
.link .icon { width: 16px; height: 16px; stroke-width: 1.9; }
button.link { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 4px; }
/* Trykflade på mindst 44 px uden at ændre, hvordan linket ser ud eller fylder: et usynligt lag
   over og under linket. Gælder .link og linkene i tillidslinjen (.trust__item a). */
.link, .trust__item a { position: relative; }
.link::after, .trust__item a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: max(44px, 100%); transform: translateY(-50%); }

/* Link i løbende tekst: samme farve som teksten, stille understregning (som "Ring 93 91 91 34" under trinene) */
.inline-link { color: var(--fg); font-weight: 650; text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: .3em; text-decoration-thickness: 1px; border-radius: 4px; transition: text-decoration-color var(--dur) var(--ease); }
.inline-link:hover { text-decoration-color: currentColor; }

/* Rund ikonknap (galleri, skift), temaafhængig */
.round-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-pill); border: 1px solid var(--control); background: transparent; color: var(--fg); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.round-btn:hover { border-color: var(--fg); }
.round-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* =========================================================
   6  Header, navigation og mobilmenu
   site.js indsætter markup'en. Aktiv side: aria-current="page".
   ========================================================= */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--c-anthracite); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.header__inner { display: flex; align-items: center; gap: clamp(1.5rem, 2.6vw, 3rem); height: var(--header-h); }
.logo { display: inline-flex; align-items: center; flex-shrink: 0; border-radius: 6px; }
/* Det nye logo (billeder/logo-ny-hvid.svg) er bredt (427 x 52), så højden følger pladsen ved siden af menuen:
   32 px fra 1280 px, 26 px fra 1080 til 1279 px, kun ikonet fra 960 til 1079 px, og 20 til 28 px på mobil. */
.logo img { height: 32px; width: auto; max-width: none; }
@media (max-width: 1279px) {
  .logo img { height: 26px; }
}
@media (min-width: 960px) and (max-width: 1079px) {
  /* Kun ikonet: samme fil, beskåret til de første 120 af 427 enheder */
  .logo img { height: 34px; width: calc(34px * 120 / 52); object-fit: cover; object-position: 0 50%; }
}
.nav { display: flex; align-items: center; gap: clamp(1.1rem, 1.9vw, 2rem); margin-right: auto; }
.nav a { position: relative; color: var(--c-muted-dark); font-size: .9375rem; font-weight: 550; padding-block: .5rem; transition: color var(--dur) var(--ease); white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.nav a:hover { color: var(--c-text-dark); }
.nav a:hover::after { transform: scaleX(1); }
/* Aktiv side: lys tekst og en blå streg på 2 px */
.nav a[aria-current="page"] { color: var(--c-text-dark); }
.nav a[aria-current="page"]::after { height: 2px; background: var(--c-accent-dark); transform: scaleX(1); }
.header__actions { display: flex; align-items: center; gap: 1.25rem; }
.header__phone { display: inline-flex; align-items: center; gap: .5rem; color: var(--c-text-dark); font-weight: 650; font-size: .9375rem; white-space: nowrap; border-radius: 6px; }
.header__phone .icon { width: 18px; height: 18px; color: var(--c-muted-dark); }
.header__phone:hover { color: var(--c-white); }
/* Book tid-siden: knappen viser, at man er her */
.btn--light[aria-current="page"] { background: transparent; color: var(--c-text-dark); border-color: var(--c-accent-dark); box-shadow: none; transform: none; }
.icon-btn {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); border: 1px solid var(--c-control-dark); background: transparent; color: var(--c-text-dark); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.icon-btn:hover { border-color: var(--c-text-dark); background: rgba(255, 255, 255, .05); }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu { position: fixed; inset: 64px 0 0 0; z-index: 55; background: var(--c-anthracite); overflow-y: auto; padding: var(--space-5) var(--gutter) var(--space-7); border-top: 1px solid var(--c-line-dark); }
.mobile-menu[hidden] { display: none; }
.mobile-menu__nav a { display: flex; justify-content: space-between; align-items: center; padding: 1.05rem 0; border-bottom: 1px solid var(--c-line-dark); font-size: 1.25rem; font-weight: 550; color: var(--c-text-dark); letter-spacing: -.01em; }
.mobile-menu__nav .icon { color: var(--c-subtle-dark); }
.mobile-menu__nav a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-decoration-color: var(--c-accent-dark); text-decoration-thickness: 2px; text-underline-offset: .4em; }
.mobile-menu__nav a[aria-current="page"] .icon { color: var(--c-accent-dark); }
.mobile-menu__actions { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.mobile-menu__meta { margin-top: var(--space-6); color: var(--c-muted-dark); font-size: var(--fs-small); }
body.menu-open { overflow: hidden; }

@media (max-width: 1180px) {
  .header__phone span { display: none; }
  .header__phone { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--c-control-dark); border-radius: var(--radius-pill); }
  .header__phone .icon { color: var(--c-text-dark); }
}
@media (max-width: 959px) {
  :root { --header-h: 64px; }
  .nav, .header__actions { display: none; }
  .header__inner { justify-content: space-between; }
  .header__mobile { display: flex; gap: .6rem; }
  .icon-btn { display: inline-flex; }
  .logo img { height: clamp(20px, 6.6vw, 28px); }
}
@media (min-width: 960px) {
  .header__mobile, .mobile-menu { display: none !important; }
}

/* =========================================================
   7  Mobilbjælke (under 960 px)
   ========================================================= */
.mobile-bar { display: none; }
@media (max-width: 959px) {
  .mobile-bar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
    background: var(--c-anthracite); border-top: 1px solid var(--c-line-dark);
  }
  .mobile-bar .btn { min-height: 48px; min-width: 0; padding-inline: 1rem; }
  .mobile-bar .btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* Bilsiden: prisen til venstre, så Forespørg og Ring (data-price) */
  .mobile-bar--price { grid-template-columns: auto repeat(2, minmax(0, 1fr)); align-items: center; }
  .mobile-bar__price { display: grid; line-height: 1.25; color: var(--c-text-dark); font-size: var(--fs-small); white-space: nowrap; }
  .mobile-bar__price strong { font-weight: 700; font-variant-numeric: tabular-nums; }
  .mobile-bar__price > span { color: var(--c-muted-dark); font-size: var(--fs-xs); }
  body { padding-bottom: 72px; }
  body.no-mobile-bar { padding-bottom: 0; }
}

/* =========================================================
   8  Footer
   ========================================================= */
/* CTA over sidefoden: kun knapper (tekstoplæg 2.3). site.js vælger sættet pr. side. */
.footer__cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); padding-block: clamp(2.5rem, 1.75rem + 2.5vw, 4rem); border-bottom: 1px solid var(--c-line-dark); }
.footer__cta .h2 { max-width: 16em; }
.footer__cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Logo og tekst, Kontakt, Bilpleje, Biludlejning og Erhverv, Cars & Care og Følg os */
.footer__grid { display: grid; grid-template-columns: minmax(0, 3.4fr) repeat(4, minmax(0, 2fr)); gap: var(--space-7) var(--space-6); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
.site-footer--no-cta .footer__grid { border-top: 1px solid var(--c-line-dark); }
.footer__brand img { width: 246px; max-width: 100%; height: auto; }
.footer__brand p { margin-top: var(--space-5); color: var(--c-muted-dark); font-size: var(--fs-small); max-width: 18rem; }
.footer__title { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-subtle-dark); margin-bottom: var(--space-4); }
.footer__title--spaced { margin-top: var(--space-6); }
.footer__list { display: grid; gap: .55rem; font-size: var(--fs-small); }
.footer__list a { color: var(--c-muted-dark); border-radius: 4px; transition: color var(--dur) var(--ease); }
.footer__list a:hover { color: var(--c-text-dark); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.footer__contact { font-style: normal; display: grid; gap: .55rem; font-size: var(--fs-small); color: var(--c-muted-dark); }
.footer__contact a { color: var(--c-text-dark); font-weight: 600; border-radius: 4px; }
.footer__contact a:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6); padding-block: var(--space-5) var(--space-6); border-top: 1px solid var(--c-line-dark); font-size: var(--fs-xs); color: var(--c-subtle-dark); }
.footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.footer__legal a { color: var(--c-subtle-dark); border-radius: 4px; }
.footer__legal a:hover { color: var(--c-text-dark); text-decoration: underline; text-underline-offset: .3em; }
/* Til ejer: kun til gennemgangen. Fjernes før lancering sammen med linket i site.js. */
.footer__review-link { padding-left: 1.5rem; border-left: 1px solid var(--c-line-dark); }

@media (max-width: 1180px) {
  .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .footer__cta-actions .btn { flex: 1 1 100%; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--space-6); }
  .footer__brand, .footer__grid > div:nth-child(2) { grid-column: 1 / -1; }
  .footer__cta-actions { width: 100%; }
  .footer__bottom { padding-bottom: var(--space-5); }
  .footer__review-link { padding-left: 0; border-left: 0; }
}

/* =========================================================
   9  Forsidens hero
   ========================================================= */
.hero { padding-top: clamp(3rem, 1.5rem + 4vw, 5rem); padding-bottom: var(--space-4); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--space-8); align-items: center; }
.hero__title { font-size: var(--fs-h1); font-weight: 650; line-height: var(--lh-tight); letter-spacing: -.034em; color: var(--c-text-dark); max-width: 11.5em; }
.hero__title .t-light { font-weight: 300; }
.hero__lead { margin-top: var(--space-5); max-width: 31rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: 2.25rem; }
.hero__b2b { margin-top: var(--space-6); font-size: var(--fs-small); color: var(--c-muted-dark); }
.hero__b2b .link { margin-left: .25rem; }

.hero__media { position: relative; justify-self: end; width: 100%; max-width: 450px; }
.hero__frame { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-raised); }
/* Viser kun fotoets nederste højre 450 x 300 px i 1:1 (forlygte, grill, fælg, plade):
   ingen lamelvæg og ingen forrude. Bredden 133,4 % = 600 / 450. */
.hero__frame img { position: absolute; right: 0; bottom: 0; width: 133.4%; max-width: none; height: auto; filter: var(--img-grade-hero); }
.hero__card {
  position: absolute; left: clamp(-2.5rem, -3vw, -1rem); bottom: 2rem;
  display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.15rem 1rem 1.25rem;
  background: var(--c-raised); border: 1px solid var(--c-line-dark); border-radius: var(--radius-md); box-shadow: var(--shadow-float);
  color: var(--c-text-dark); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero__card:hover { transform: translateY(-2px); border-color: var(--c-line-strong-dark); }
.hero__card-title { display: block; margin-top: .35rem; font-weight: 650; font-size: .96875rem; line-height: 1.3; }
.hero__card-meta { display: block; color: var(--c-muted-dark); font-size: var(--fs-xs); margin-top: 2px; }
.hero__card .icon { color: var(--c-muted-dark); width: 18px; height: 18px; }

/* Status på biler. Standard er "Ledig nu" (blå prik). */
.status { display: inline-flex; align-items: center; gap: .45rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent-dark); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.theme-light .status { color: var(--c-accent); }
/* Kommer snart: hul prik. Udlejet: grå firkant. Begge med tekstlabel, ikke nedtonet. */
.status.status--soon, .status.status--rented { color: var(--fg-muted); }
.status--soon::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.status--rented::before { border-radius: 2px; }

@media (max-width: 1080px) {
  .hero__grid { gap: var(--space-7); }
}
@media (max-width: 959px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__media { justify-self: start; max-width: 540px; }
  .hero__card { left: 1rem; bottom: 1rem; }
}
@media (max-width: 640px) {
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__b2b .link { margin-left: 0; margin-top: .35rem; }
  .hero__b2b { display: grid; }
}

/* =========================================================
   10 Sidehoved for undersider og brødkrumme
   Antracit, brødkrumme, eyebrow, stor titel i blandet vægt,
   lead, handlinger og eventuelt et lille foto eller fakta til højre.
   ========================================================= */
.page-head { padding-top: clamp(1.25rem, .8rem + 1.5vw, 2rem); padding-bottom: clamp(3.5rem, 2.5rem + 3.5vw, 6rem); }
.page-head .breadcrumb { margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.75rem); }
.page-head__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: end; }
.page-head--solo .page-head__grid { grid-template-columns: minmax(0, 52rem); }
.page-head__title { font-size: var(--fs-h1-page); font-weight: 650; line-height: 1.08; letter-spacing: -.032em; color: var(--c-text-dark); max-width: 15em; text-wrap: balance; }
.page-head__title .t-light { font-weight: 300; }
.page-head__lead { margin-top: var(--space-5); max-width: 34rem; }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: 2.25rem; }
.page-head__note { margin-top: var(--space-6); font-size: var(--fs-small); color: var(--c-muted-dark); }
.page-head__note .link { margin-left: .25rem; }
/* Højre side: et lille foto (photo eller ph-img) */
.page-head__media { justify-self: end; width: 100%; max-width: 420px; }
.page-head__media .photo, .page-head__media .ph-img { border-radius: var(--radius-lg); }
/* Højre side: nøglefakta i hårstregsrækker */
.page-head__facts { align-self: end; }
.page-head .trust { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.page-head .trust__list { padding-bottom: 0; }

/* Kompakt sidehoved til juridiske sider og systemsider */
.page-head--compact { padding-bottom: clamp(2.75rem, 2rem + 2.5vw, 4.5rem); }
.page-head--compact .page-head__grid { grid-template-columns: minmax(0, 46rem); }
.page-head--compact .page-head__title { font-size: var(--fs-h2); letter-spacing: -.028em; line-height: 1.1; }
.page-head--compact .updated { margin-top: var(--space-5); }

/* Nøglefakta: dl med hårstregsrækker (bruges i sidehoved og i indhold) */
.facts { border-top: 1px solid var(--line); }
.facts__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: .9rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }
.facts dd { font-weight: 650; color: var(--fg); text-align: right; }
.facts dd .per { font-weight: 500; color: var(--fg-muted); font-size: var(--fs-small); }

/* Brødkrumme */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .35rem; font-size: var(--fs-xs); font-weight: 600; }
.breadcrumb li { display: inline-flex; align-items: center; gap: .35rem; color: var(--fg); }
.breadcrumb li + li::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid var(--fg-muted); border-right: 1.5px solid var(--fg-muted); transform: rotate(45deg); margin-right: .45rem; opacity: .8; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-muted); border-radius: 4px; transition: color var(--dur) var(--ease); }
.breadcrumb a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.breadcrumb [aria-current="page"] { color: var(--fg); }

@media (max-width: 959px) {
  .page-head__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .page-head__media { justify-self: start; max-width: 480px; }
}
@media (max-width: 640px) {
  .page-head__actions .btn { flex: 1 1 100%; }
  .page-head__note { display: grid; }
  .page-head__note .link { margin-left: 0; margin-top: .35rem; }
}

/* =========================================================
   11 Tillidsrække
   ========================================================= */
.trust { margin-top: clamp(3rem, 2rem + 3.5vw, 5rem); border-top: 1px solid var(--c-line-dark); }
.trust__list { display: flex; flex-wrap: wrap; gap: .25rem 3rem; padding-block: 1.5rem 1.25rem; }
.trust__item { display: flex; align-items: center; gap: .7rem; padding-block: .25rem; color: var(--c-text-dark); font-weight: 550; font-size: var(--fs-small); }
.trust__item .icon { color: var(--c-accent-dark); }
.trust__item a { border-radius: 4px; text-decoration: underline; text-decoration-color: var(--c-control-dark); text-underline-offset: .3em; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur) var(--ease); }
.trust__item a:hover { text-decoration-color: currentColor; }
/* Tillidsrække på lys baggrund */
.theme-light .trust { border-top-color: var(--c-line); }
.theme-light .trust__item { color: var(--c-text); }
.theme-light .trust__item .icon { color: var(--c-accent); }
.theme-light .trust__item a { text-decoration-color: var(--c-control); }

@media (max-width: 640px) {
  .trust__list { flex-direction: column; gap: 0; padding-block: .5rem .25rem; }
  .trust__item { padding: .85rem 0; }
  .trust__item + .trust__item { border-top: 1px solid var(--c-line-dark); }
  .theme-light .trust__item + .trust__item { border-top-color: var(--c-line); }
}

/* =========================================================
   12 To veje
   To åbne kolonner på hvid, delt af én lodret hårstreg. Ingen kasser.
   ========================================================= */
.paths__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--c-line); }
.path { display: flex; flex-direction: column; padding: var(--space-7) var(--col-pad) 0 0; }
.path + .path { padding-left: var(--col-pad); padding-right: 0; border-left: 1px solid var(--c-line); }
.path .eyebrow { margin-bottom: var(--space-3); }
.path__price { font-size: var(--fs-price); font-weight: 300; letter-spacing: -.035em; line-height: 1; color: var(--fg); margin-top: var(--space-2); }
.path__price .from { font-size: .38em; font-weight: 500; letter-spacing: 0; color: var(--fg-muted); margin-right: .3em; vertical-align: .5em; }
.path__price .per { font-size: .34em; font-weight: 500; letter-spacing: 0; color: var(--fg-muted); margin-left: .35em; white-space: nowrap; }
.path__text { margin-top: var(--space-4); color: var(--fg-muted); max-width: 27rem; }
.path__facts { display: grid; gap: .6rem; margin-top: var(--space-5); }
.path__facts li { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 550; color: var(--fg); }
.path__facts .icon { color: var(--link); }
.path__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-top: var(--space-6); margin-top: auto; }

@media (max-width: 959px) {
  .paths__grid { grid-template-columns: minmax(0, 1fr); }
  .path { padding: var(--space-6) 0 var(--space-6); }
  .path + .path { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-line); }
  .path:last-child { padding-bottom: 0; }
}
@media (max-width: 640px) {
  .path__actions .btn { flex: 1 1 100%; }
}

/* =========================================================
   13 Pakker, størrelsespriser og pristabel
   ========================================================= */
/* Kortene deler rækker (subgrid), så pris, liste og knap står på linje på tværs.
   Flere end tre pakker: brug et nyt .packages__grid pr. række af tre. */
.packages__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: var(--space-5); row-gap: 0; }
.packages__grid + .packages__grid { margin-top: var(--space-5); }
.pkg {
  grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0;
  background: var(--c-white); border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease);
}
.pkg:hover { box-shadow: var(--shadow-card-hover); }
.pkg__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 30px; }
.pkg__name { font-size: var(--fs-h3); font-weight: 650; letter-spacing: -.015em; line-height: var(--lh-snug); }
.badge { display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: var(--radius-pill); background: var(--c-accent-tint); color: var(--c-accent); font-size: .6875rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.badge--dark { background: var(--c-accent-tint-dark); color: var(--c-accent-dark); }
.badge--neutral { background: var(--c-ph-fill); color: var(--c-muted); }
.pkg__one { margin-top: var(--space-2); color: var(--c-muted); font-size: 1rem; }
.pkg__pricing { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--c-line); }
.pkg__price { font-size: 2.5rem; font-weight: 400; letter-spacing: -.035em; line-height: 1; color: var(--c-text); }
.pkg__price .from { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--c-muted); margin-right: .35rem; }
/* Størrelsespriser som én stille linje under prisen, uden baggrund */
.pkg__sizes { display: flex; flex-wrap: wrap; gap: .15rem 0; margin-top: var(--space-3); font-size: var(--fs-small); color: var(--c-muted); line-height: 1.5; }
.pkg__sizes dt, .pkg__sizes dd { display: inline; margin: 0; }
.pkg__sizes dd { color: var(--c-text); font-weight: 600; margin-left: .3em; }
.pkg__sizes div { white-space: nowrap; }
.pkg__sizes div + div::before { content: "·"; margin: 0 .55em; color: var(--c-control); }
.pkg__list { margin-top: var(--space-6); display: grid; gap: .7rem; align-content: start; }
.pkg__list li { display: flex; gap: .7rem; align-items: flex-start; font-size: 1rem; line-height: 1.45; }
.pkg__list .icon { color: var(--c-accent); margin-top: 2px; width: 18px; height: 18px; stroke-width: 2; }
.pkg__extra { padding-top: var(--space-4); }
.pkg__more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; color: var(--c-accent); font-weight: 650; font-size: var(--fs-small); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; border-radius: 4px; }
.pkg__more summary::-webkit-details-marker { display: none; }
.pkg__more summary .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.pkg__more[open] summary .icon { transform: rotate(180deg); }
.pkg__more .pkg__list { margin-top: var(--space-4); padding-top: 0; border-top: 0; }
/* Størrelsespriser som hårstregsrækker uden fyld (Salgsklargøring) */
.sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-5); border-block: 1px solid var(--c-line); }
.sizes div { padding: .85rem 0; }
.sizes div + div { padding-left: var(--space-5); border-left: 1px solid var(--c-line); }
.sizes dt { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.sizes dd { font-size: .9375rem; font-weight: 650; color: var(--c-text); margin-top: 2px; white-space: nowrap; }
.pkg__cta { padding-top: var(--space-5); align-self: end; }

.packages__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--c-line-strong); }
.more-pkgs { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.75rem; font-size: var(--fs-small); color: var(--c-muted); }
.more-pkgs__label { font-weight: 700; color: var(--c-text); }
.more-pkgs a { color: var(--c-text); font-weight: 600; border-radius: 4px; text-decoration: underline; text-decoration-color: var(--c-control); text-underline-offset: .3em; text-decoration-thickness: 1px; }
.more-pkgs a:hover { text-decoration-color: currentColor; }
.more-pkgs span.price { color: var(--c-muted); font-weight: 500; margin-left: .35rem; }

/* Detaljeret pakkekort (Bilpleje og priser): samme kort plus "Ideel til",
   varighed, en knap der folder indholdet ud, og et sekundært link. */
.pkg__ideal { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--c-muted); }
.pkg__ideal strong { color: var(--c-text); font-weight: 650; }
.pkg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--c-muted); font-weight: 550; }
.pkg__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.pkg__meta .icon { width: 16px; height: 16px; color: var(--c-muted); }
.pkg__toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--c-accent); font-weight: 650; font-size: var(--fs-small); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; border-radius: 4px; }
.pkg__toggle .icon { width: 16px; height: 16px; }
.pkg__panel-label { margin-top: var(--space-4); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.pkg__panel .pkg__list { margin-top: var(--space-3); }
.pkg__panel-wrap { margin-top: var(--space-6); }
.pkg__cta .link { margin-top: var(--space-4); }
.pkg__cta-row { display: grid; gap: var(--space-3); justify-items: start; }
/* Valgt pakke (guidet booking) */
.pkg.is-selected { box-shadow: inset 0 0 0 2px var(--c-accent), var(--shadow-card); }
.pkg__flag { display: inline-flex; align-items: center; gap: .35rem; color: var(--c-accent); font-size: .6875rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.pkg__flag .icon { width: 14px; height: 14px; stroke-width: 2.2; }

/* Størrelsesguide (Lille, Mellem, Stor): bygges i .columns.columns--4 */
.size-guide__name { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; color: var(--fg); }
.size-guide__type { margin-top: var(--space-2); font-weight: 600; color: var(--fg); font-size: 1rem; line-height: 1.45; }
.size-guide__examples { margin-top: var(--space-3); color: var(--fg-muted); font-size: var(--fs-small); }

/* Størrelsesrækker med pris (Klargøring til salg) */
.size-rows { border-top: 1px solid var(--line); }
.size-rows__row { display: grid; grid-template-columns: minmax(6rem, 1.2fr) minmax(0, 4fr) auto; gap: var(--space-3) var(--space-6); align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.size-rows__name { font-size: 1.125rem; font-weight: 650; color: var(--fg); }
.size-rows__desc { color: var(--fg); font-size: 1rem; }
.size-rows__desc span { display: block; color: var(--fg-muted); font-size: var(--fs-small); margin-top: .15rem; }
.size-rows__price { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; text-align: right; color: var(--fg); }
.size-rows__price .from { font-size: .8125rem; font-weight: 500; color: var(--fg-muted); margin-right: .25rem; letter-spacing: 0; }

/* Kompakt pristabel (Lakpleje og Premium efter størrelse, erhvervspriser) */
.price-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.price-table caption { caption-side: bottom; text-align: left; padding-top: var(--space-4); font-size: var(--fs-small); color: var(--fg-muted); }
.price-table th, .price-table td { padding: 1.05rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.price-table th:first-child, .price-table td:first-child { padding-left: 0; }
.price-table th:last-child, .price-table td:last-child { padding-right: 0; }
.price-table thead th { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); border-bottom-color: var(--line-strong); padding-block: .75rem; }
.price-table tbody th { font-weight: 650; color: var(--fg); font-size: 1.0625rem; }
.price-table td { font-weight: 600; color: var(--fg); white-space: nowrap; }
.price-table .from { font-weight: 500; color: var(--fg-muted); font-size: .875rem; margin-right: .2rem; }
.price-table .num, .price-table th.num { text-align: right; }
.price-table .sub { display: block; font-weight: 500; color: var(--fg-muted); font-size: var(--fs-small); white-space: normal; }

@media (max-width: 1080px) {
  .packages__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--space-5); max-width: 40rem; }
  .pkg { grid-row: auto; display: flex; flex-direction: column; }
  .pkg__cta { align-self: stretch; margin-top: auto; }
  .pkg__extra:empty { display: none; }
}
/* Valgfrit for sider med mange pakker (Bilpleje og priser): to kort pr. række på tablet */
@media (min-width: 641px) and (max-width: 1080px) {
  .packages__grid--two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; column-gap: var(--space-5); }
}
@media (max-width: 640px) {
  .more-pkgs__label { flex-basis: 100%; }
  .pkg__sizes { column-gap: 1.1rem; }
  .pkg__sizes div + div::before { display: none; }
  .more-pkgs { gap: .6rem 1.5rem; }
  /* Størrelsespriser som rækker på smal skærm */
  .sizes { grid-template-columns: minmax(0, 1fr); }
  .sizes div { display: flex; justify-content: space-between; align-items: baseline; padding: .7rem 0; }
  .sizes div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-line); }
  .sizes dd { margin-top: 0; }
  .size-rows__row { grid-template-columns: minmax(0, 1fr) auto; }
  .size-rows__desc { grid-column: 1 / -1; grid-row: 2; }
  /* Pristabel som stablede rækker: hver celle viser sin kolonneoverskrift fra data-label */
  .price-table--stack thead { display: none; }
  .price-table--stack tr { display: block; padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .price-table--stack tbody th { display: block; padding: 0 0 .5rem; border: 0; text-align: left; }
  .price-table--stack td { display: flex; align-items: baseline; gap: .2rem; padding: .3rem 0; border: 0; text-align: left; }
  .price-table--stack td::before { content: attr(data-label); margin-right: auto; font-weight: 500; color: var(--fg-muted); }
  .price-table--stack .num { text-align: right; }
}

/* =========================================================
   14 Fotos, billedpladsholdere, før og efter
   ========================================================= */
/* Foto i en ramme med fast format. Udsnittet er regnet ud fra fotoets pixels:
   et område (x, y, b, h) af et foto på B px vises med
   width: B / b * 100 %, left: -x / b * 100 %, top: -y / h * 100 %, aspect-ratio: b / h.
   Vis aldrig en ramme meget bredere end udsnittets bredde (max-width herunder). */
.photo { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md); background: var(--c-raised); aspect-ratio: 3 / 2; }
.photo img { position: absolute; max-width: none; height: auto; filter: var(--img-grade); }
/* Udsnitsbibliotek. Ingen af dem viser lamelvæggen. Brug hvert udsnit højst én gang pr. side. */
.photo--c3-front { aspect-ratio: 3 / 2; max-width: 470px; }    /* C3: forlygte, grill, fælg og plade (450 x 300) */
.photo--c3-front img { width: 133.333%; left: -33.333%; top: -100%; }
.photo--c3-wheel { aspect-ratio: 2 / 1; max-width: 440px; }    /* C3: fælg, side og tågelygte (420 x 210) */
.photo--c3-wheel img { width: 142.857%; left: 0; top: -185.714%; }
.photo--c3-door { aspect-ratio: 4 / 3; max-width: 330px; }     /* C3: dør, spejl og Cars & Care-mærkat (300 x 225) */
.photo--c3-door img { width: 200%; left: -10%; top: -84.444%; }
.photo--c3-grille { aspect-ratio: 4 / 3; max-width: 240px; }   /* C3: grill og plade, kun lille (220 x 165) */
.photo--c3-grille img { width: 272.727%; left: -172.727%; top: -212.121%; }
.photo--208-front { aspect-ratio: 2 / 1; max-width: 400px; }   /* 208: forlygte, motorhjelm, grill og plade (370 x 185) */
.photo--208-front img { width: 164.324%; left: -47.568%; top: -47.027%; }
.photo--208-hood { aspect-ratio: 3 / 2; max-width: 340px; }    /* 208: motorhjelm og forlygte i 3:2 (318 x 212) */
.photo--208-hood img { width: 191.195%; left: -50.314%; top: -28.302%; }
.photo--208-side { aspect-ratio: 3 / 2; max-width: 300px; }    /* 208: side, dør og forhjul (280 x 187) */
.photo--208-side img { width: 217.143%; left: -5.357%; top: -45.455%; }
.photo--fleet-row { aspect-ratio: 866 / 138; max-width: 900px; } /* flåden: fronterne på alle fem biler (866 x 138) */
.photo--fleet-row img { width: 100%; left: 0; top: -65.217%; }
.photo--fleet-red { aspect-ratio: 3 / 2; max-width: 300px; }   /* flåden: rød Citroën C1 (276 x 184) */
.photo--fleet-red img { width: 313.768%; left: 0; top: -23.913%; }
.photo--fleet-micro { aspect-ratio: 3 / 2; max-width: 290px; } /* flåden: sølvfarvet mikrobil, front (270 x 180) */
.photo--fleet-micro img { width: 320.741%; left: -77.778%; top: -26.667%; }
.photo--fleet-black { aspect-ratio: 3 / 2; max-width: 250px; } /* flåden: sort Citroën C1, front (235 x 157) */
.photo--fleet-black img { width: 368.511%; left: -170.213%; top: -45.223%; }
/* Lejebilerne (billeder/biler/, 16:10, beskåret fra ejerens opslag, så kun bilen ses). Fylder rammen. */
.photo--car { aspect-ratio: 16 / 10; max-width: none; }
.photo--car img { width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; object-position: center 65%; }
.photo--block { max-width: none; }

/* Billedpladsholder: rolig flade, lille ikon og en etiket i firkantede klammer.
   Format: --1x1, --4x3 (standard), --3x2, --16x9, --4x5, --21x9. Mørk: automatisk i .theme-dark. */
.ph-img {
  position: relative; display: grid; place-content: center; justify-items: center; gap: .7rem;
  aspect-ratio: 4 / 3; width: 100%; padding: var(--space-5); overflow: hidden;
  background: var(--ph-bg); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--ph-line);
  color: var(--ph-fg); text-align: center;
}
.ph-img--1x1 { aspect-ratio: 1 / 1; }
.ph-img--3x2 { aspect-ratio: 3 / 2; }
.ph-img--16x9 { aspect-ratio: 16 / 9; }
.ph-img--4x5 { aspect-ratio: 4 / 5; }
.ph-img--21x9 { aspect-ratio: 21 / 9; }
.ph-img--fill { aspect-ratio: auto; height: 100%; }
.ph-img__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ph-line); color: var(--ph-fg); }
.ph-img__icon .icon { width: 20px; height: 20px; }
.ph-img__label { max-width: 26ch; font-size: var(--fs-xs); font-weight: 600; line-height: 1.45; letter-spacing: .005em; color: var(--ph-fg); }
.ph-img--sm .ph-img__icon { width: 34px; height: 34px; }
.ph-img--sm .ph-img__label { font-size: .75rem; }
.ph-img--sm { gap: .45rem; padding: var(--space-3); }

/* Fotofliser på forsiden (resultater) */
.results__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: end; }
.results__text .h2 { max-width: 9em; }
.results__text p { margin-top: var(--space-4); color: var(--c-muted); max-width: 22rem; }
.results__text .link { margin-top: var(--space-5); }
.gallery { grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.tile figcaption { position: absolute; }
.tile { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--c-light); aspect-ratio: 2 / 1; }
.tile img { position: absolute; max-width: none; height: auto; filter: var(--img-grade); transition: transform .6s var(--ease); }
.tile:hover img { transform: scale(1.025); }
/* C3: fotoets nederste venstre 420 x 210 px (fælg, side, tågelygte), et andet udsnit end i hero */
.tile--c3 img { left: 0; bottom: 0; width: 142.86%; transform-origin: 0 100%; }
/* Peugeot: forlygte, motorhjelm, grill og plade (x 176-546, y 87-272), ingen lamelvæg */
.tile--208 img { left: -47.57%; bottom: 0; width: 164.32%; transform-origin: 50% 100%; }
/* Før/efter-par, statisk: <figure class="compare"> med to .tile og .pill "Før" / "Efter" */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); max-width: 520px; }
/* Pladsholder i en flise: fylder flisen, etiketten øverst, så pillen ikke dækker den */
.tile > .ph-img { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; align-content: start; padding-top: var(--space-4); }
.pill { position: absolute; left: .9rem; bottom: .9rem; padding: .4rem .8rem; border-radius: var(--radius-pill); background: rgba(30, 35, 41, .88); color: var(--c-text-dark); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .01em; }

/* Før og efter-slider: træk, klik på billedet eller brug piletasterne.
   Rækkefølge i rammen: før-lag, efter-lag, range, skillelinje, pills. */
.before-after { margin: 0; }
.before-after__frame { --pos: 50%; position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-md); background: var(--ph-bg); isolation: isolate; }
.before-after__layer { position: absolute; inset: 0; }
.before-after__layer > .ph-img, .before-after__layer > .photo { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-width: none; border-radius: 0; }
.before-after__layer > img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-grade); }
/* Pladsholdernes etiket står midt i den synlige del og over håndtaget, og følger med, når man trækker */
.before-after__layer > .ph-img { align-content: start; padding-top: 14%; }
.before-after__layer--before > .ph-img { padding-right: min(calc(100% - var(--pos) + 1rem), 78%); }
.before-after__layer--after > .ph-img { padding-left: min(calc(var(--pos) + 1rem), 78%); background: var(--ph-bg-alt); }
.before-after__layer--after { clip-path: inset(0 0 0 var(--pos)); }
.before-after__range {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: transparent;
}
/* Sporet fylder hele billedet, og grebet er smalt, så et klik lander præcis dér, man klikker */
.before-after__range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.before-after__range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 100%; background: transparent; border: 0; }
.before-after__range::-moz-range-track { height: 100%; background: transparent; }
.before-after__range::-moz-range-thumb { width: 2px; height: 100%; background: transparent; border: 0; }
.before-after__divider { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 2px; margin-left: -1px; background: var(--c-white); box-shadow: 0 0 0 1px rgba(21, 25, 30, .1); pointer-events: none; }
.before-after__knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--c-white); color: var(--c-text); box-shadow: 0 8px 20px -8px rgba(21, 25, 30, .5); }
.before-after__knob .icon { width: 18px; height: 18px; stroke-width: 1.9; }
.before-after__range:focus-visible + .before-after__divider .before-after__knob { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.before-after__pill { z-index: 2; pointer-events: none; }
.before-after__pill--after { left: auto; right: .9rem; }
.before-after__caption { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--fg-muted); font-weight: 550; }

@media (max-width: 959px) {
  .results__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .gallery { grid-column: auto; }
}
@media (max-width: 640px) {
  /* Fotos som vandret række med snap, så hvert foto vises mindre */
  .gallery { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .gallery::-webkit-scrollbar { display: none; }
  .tile { scroll-snap-align: start; }
}

/* =========================================================
   15 Biludlejning: inkluderet, biler, specifikationer, galleri
   ========================================================= */
.sub__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.included__label { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted-dark); }
.included__price { margin-top: var(--space-3); font-size: var(--fs-price); font-weight: 300; letter-spacing: -.035em; line-height: 1; }
.included__price .from, .included__price .per { font-size: .36em; font-weight: 500; letter-spacing: 0; color: var(--c-muted-dark); }
.included__price .from { margin-right: .3em; vertical-align: .5em; }
.included__price .per { margin-left: .35em; white-space: nowrap; }
.included__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.5rem; margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--c-line-dark); }
.included__list li { display: flex; align-items: flex-start; gap: .65rem; font-weight: 550; font-size: 1rem; line-height: 1.45; }
.included__list .icon { color: var(--c-accent-dark); width: 18px; height: 18px; stroke-width: 2; margin-top: 2px; }
.included__note { margin-top: var(--space-5); color: var(--c-muted-dark); font-size: var(--fs-small); }
.included__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }

/* Billiste (rækker) på mørk flade */
.cars { background: var(--c-raised); border-radius: var(--radius-lg); padding: var(--space-3) clamp(1rem, .6rem + 1.4vw, 1.75rem); }
.cars__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--c-line-dark); color: var(--c-subtle-dark); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .06em; }
.car { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto 20px; align-items: center; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--c-line-dark); border-radius: 4px; transition: background-color var(--dur) var(--ease); }
.car:last-child { border-bottom: 0; }
.car__thumb { width: 112px; height: 76px; border-radius: var(--radius-sm); overflow: hidden; background: var(--c-anthracite); }
.car__thumb img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-grade); }
/* Udsnittene er regnet i procent, så de holder, når miniaturen har samme format (112 x 76) på mobil */
.car__thumb--micro img { object-position: 45.3% 50%; transform: scale(1.965); transform-origin: 43.6% 75.8%; }  /* sølvfarvet mikrobil, front */
.car__thumb--c3 img { object-position: 100% 100%; transform: scale(1.6); transform-origin: 80% 85%; }          /* front og plade */
.car__thumb--208 img { object-position: 84.5% 50%; transform: scale(1.586); transform-origin: 50.3% 99.4%; }   /* front, ingen lamelvæg */
.car__name { display: block; font-size: 1.125rem; font-weight: 650; letter-spacing: -.01em; color: var(--c-text-dark); }
.car__meta { display: block; font-size: var(--fs-small); color: var(--c-muted-dark); margin-top: 2px; }
.car__status { margin-top: .45rem; }
.car__price { text-align: right; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.car__price .from { font-size: .8125rem; font-weight: 500; color: var(--c-muted-dark); letter-spacing: 0; margin-right: .2rem; }
.car__per { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--c-muted-dark); letter-spacing: 0; }
.car > .icon { color: var(--c-subtle-dark); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.car:hover > .icon { transform: translateX(3px); color: var(--c-text-dark); }
.car:hover .car__name { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }

/* Bilkort (listen over ledige biler). Hele kortet er klikbart via linket i titlen. */
.car-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.car-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.theme-dark .car-card { box-shadow: none; border: 1px solid var(--c-line-dark); }
.car-card:hover { box-shadow: var(--shadow-card-hover); }
.theme-dark .car-card:hover { box-shadow: none; border-color: var(--c-line-strong-dark); }
.car-card__media { border-radius: 0; max-width: none; width: 100%; }
.car-card__media.ph-img { border-radius: 0; box-shadow: none; aspect-ratio: 3 / 2; }
.car-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5) clamp(1.25rem, 1rem + .8vw, 1.75rem) clamp(1.5rem, 1.2rem + .8vw, 1.75rem); }
.car-card__name { margin-top: var(--space-3); font-size: 1.25rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--fg); }
.car-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.car-card__link:focus-visible { outline: none; }
.car-card:has(.car-card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.car-card:hover .car-card__link { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.car-card__price { margin-top: var(--space-4); font-size: 1.75rem; font-weight: 400; letter-spacing: -.03em; line-height: 1; color: var(--fg); }
.car-card__price .from, .car-card__price .per { font-size: .8125rem; font-weight: 500; letter-spacing: 0; color: var(--fg-muted); }
.car-card__price .from { margin-right: .3rem; }
.car-card__price .per { margin-left: .3rem; white-space: nowrap; }
.car-card__terms { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--fg-muted); }
.car-card__specs { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg); font-weight: 550; }
.car-card__specs li { display: inline-flex; align-items: center; gap: .4rem; }
.car-card__specs .icon { width: 16px; height: 16px; color: var(--fg-muted); }
.car-card__equip { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--fg-muted); }
.car-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-5); }
.car-card__cta { display: inline-flex; align-items: center; gap: .45rem; color: var(--link); font-weight: 650; font-size: var(--fs-small); transition: gap var(--dur) var(--ease); }
.car-card__cta .icon { width: 16px; height: 16px; stroke-width: 1.9; }
.car-card:hover .car-card__cta { gap: .7rem; }

/* Specifikationer (bilside): dl i hårstregsrækker, to kolonner på bred skærm */
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); border-top: 1px solid var(--line); }
.spec--single { grid-template-columns: minmax(0, 1fr); }
.spec__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: .95rem 0; border-bottom: 1px solid var(--line); }
.spec dt { display: inline-flex; align-items: center; gap: .55rem; color: var(--fg-muted); font-size: var(--fs-small); font-weight: 550; }
.spec dt .icon { width: 18px; height: 18px; color: var(--fg-muted); }
.spec dd { color: var(--fg); font-weight: 650; text-align: right; }

/* Bilgalleri: hovedfoto, forrige og næste, tæller og miniaturer med navn.
   Højst 36rem bredt, fordi fotoene er små. Brug et 3:2-udsnit (photo--c3-front til C3). */
.car-gallery { max-width: 36rem; }
.car-gallery__stage { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; background: var(--ph-bg); }
.car-gallery__slide { position: absolute; inset: 0; }
.car-gallery__slide > .photo, .car-gallery__slide > .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; }
.car-gallery__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); }
.car-gallery__count { font-size: var(--fs-small); font-weight: 600; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.car-gallery__nav { display: flex; gap: .5rem; }
.car-gallery__thumbs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .6rem; margin-top: var(--space-4); }
.car-gallery__thumb { position: relative; display: grid; gap: .4rem; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--fg-muted); font-size: .75rem; font-weight: 600; border-radius: var(--radius-sm); }
/* Miniaturen har samme format (3:2) som hovedfotoet, så udsnittet passer */
.car-gallery__thumb-img { display: block; position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-sm); overflow: hidden; background: var(--ph-bg); box-shadow: inset 0 0 0 1px var(--ph-line); transition: box-shadow var(--dur) var(--ease); }
.car-gallery__thumb-img .photo { width: 100%; max-width: none; border-radius: 0; }
.car-gallery__thumb:hover .car-gallery__thumb-img { box-shadow: inset 0 0 0 1px var(--fg-muted); }
.car-gallery__thumb[aria-pressed="true"] { color: var(--fg); }
.car-gallery__thumb[aria-pressed="true"] .car-gallery__thumb-img { box-shadow: inset 0 0 0 2px var(--link); }

/* Det er med i prisen / Ikke med i prisen: to åbne kolonner med én lodret hårstreg */
.incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.incl__col { padding: var(--space-7) var(--col-pad) 0 0; }
.incl__col + .incl__col { padding-left: var(--col-pad); padding-right: 0; border-left: 1px solid var(--line); }
.incl__title { font-size: clamp(1.5rem, 1.25rem + .8vw, 2rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.15; color: var(--fg); }
.incl__title strong { font-weight: 650; }
.incl__note { margin-top: var(--space-3); color: var(--fg-muted); }
.incl .list-check, .incl .list-minus { margin-top: var(--space-6); }

/* Krav (Det skal du bruge): ikon i en lille ring og tekst, hårstregsrækker */
.reqs { border-top: 1px solid var(--line); }
.reqs li { position: relative; display: flex; align-items: center; min-height: 4.5rem; padding: 1rem 0 1rem 3.5rem; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--fg); }
.reqs__text { display: block; }
.reqs__icon { position: absolute; left: 0; top: 50%; margin-top: -20px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--link); }
.reqs__icon .icon { width: 18px; height: 18px; }

@media (max-width: 1080px) {
  .car-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .sub__grid { grid-template-columns: minmax(0, 1fr); }
  .incl { grid-template-columns: minmax(0, 1fr); }
  .incl__col { padding: var(--space-6) 0; }
  .incl__col + .incl__col { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .car-gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .included__list { gap: .8rem 1rem; }
  .included__actions .btn { flex: 1 1 100%; }
  .car { grid-template-columns: 84px minmax(0, 1fr) 18px; gap: .5rem var(--space-4); }
  .car__thumb { width: 84px; height: 57px; }
  .car__price { grid-column: 2; grid-row: 2; text-align: left; }
  .car__price .car__per { display: inline; margin-left: .3rem; }
  .car > .icon { grid-column: 3; grid-row: 1 / span 2; }
  .car__thumb { grid-row: 1 / span 2; align-self: start; }
  .car-cards { grid-template-columns: minmax(0, 1fr); }
  .spec { grid-template-columns: minmax(0, 1fr); }
  .car-gallery__thumbs { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 26%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .car-gallery__thumbs::-webkit-scrollbar { display: none; }
}

/* =========================================================
   16 Erhverv: kort, kunder, logovæg, citater
   ========================================================= */
.b2b__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-8); align-items: center; }
.b2b__text .lead { margin-top: var(--space-5); max-width: 30rem; }
.b2b__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }
.b2b-card { background: var(--c-white); border-radius: var(--radius-lg); padding: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); box-shadow: var(--shadow-card); }
.b2b-card__label { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); }
.b2b-card .pkg__name { margin-top: var(--space-2); }
.b2b-card .sizes { margin-top: var(--space-5); }
.b2b-card .sizes dd { font-size: 1.0625rem; }
.b2b-card .pkg__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.25rem; margin-top: var(--space-5); border-top: 0; padding-top: 0; }
.b2b-card .pkg__list li { font-size: var(--fs-small); }
.b2b-card .link { margin-top: var(--space-5); }
/* Kundelogoer: kun med kundens tilladelse. Indtil da én diskret pladsholder. */
.clients { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: var(--space-5); border-top: 1px solid var(--c-line-strong); display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 2rem; }
.clients__label { font-size: var(--fs-small); color: var(--c-text); font-weight: 650; }
.clients__placeholder { font-size: 1.0625rem; font-weight: 400; letter-spacing: .02em; color: var(--c-wordmark); }
.clients__note { font-size: var(--fs-small); color: var(--c-muted); }

/* Logovæg: åbent gitter med indre hårstreger. Pladsholder: [Kundelogo 1] */
.logo-wall { --lw-gap: 2px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
.logo-wall__item { position: relative; display: grid; place-items: center; min-height: 112px; padding: var(--space-5); text-align: center; font-size: 1.0625rem; font-weight: 400; letter-spacing: .02em; color: var(--c-wordmark); }
.logo-wall__item::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; border-left: 1px solid var(--line); }
.logo-wall__item::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; border-top: 1px solid var(--line); }
.theme-dark .logo-wall__item { color: var(--c-muted-dark); }

/* Citat (anmeldelse eller erhvervskunde). Kun ægte citater, ellers pladsholder. */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.quote { position: relative; padding-top: var(--space-5); border-top: 1px solid var(--line); }
.quote::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 2px; background: var(--link); }
.quote blockquote { font-size: 1.1875rem; font-weight: 400; line-height: 1.55; letter-spacing: -.01em; color: var(--fg); }
.quote--lg blockquote { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.875rem); font-weight: 300; line-height: 1.4; letter-spacing: -.02em; }
.quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; margin-top: var(--space-4); font-size: var(--fs-small); color: var(--fg-muted); font-weight: 600; }

@media (max-width: 959px) {
  .b2b__grid { grid-template-columns: minmax(0, 1fr); }
  .quotes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .b2b__actions .btn { flex: 1 1 100%; }
  .b2b-card .pkg__list { grid-template-columns: minmax(0, 1fr); }
  .clients { flex-direction: column; gap: .35rem; }
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-wall__item { min-height: 88px; font-size: 1rem; }
}

/* =========================================================
   17 Trin (Sådan foregår det)
   ========================================================= */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); counter-reset: step; }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.step { position: relative; padding-top: var(--space-5); border-top: 1px solid var(--c-line); }
.step::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 2px; background: var(--c-accent); }
.step__num { font-size: var(--fs-xs); font-weight: 750; letter-spacing: .14em; color: var(--c-accent); }
.step__title { margin-top: var(--space-4); font-size: 1.25rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; }
.step__text { margin-top: var(--space-2); color: var(--c-muted); font-size: 1rem; }
.step__text a { color: var(--c-accent); font-weight: 650; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; border-radius: 4px; }
.steps__note { margin-top: var(--space-7); color: var(--c-muted); font-size: 1rem; }
.steps__note a { color: var(--c-text); font-weight: 650; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--c-control); text-underline-offset: .3em; text-decoration-thickness: 1px; border-radius: 4px; }
.steps__note a:hover { text-decoration-color: currentColor; }
/* Trin på mørk baggrund */
.theme-dark .step { border-top-color: var(--c-line-dark); }
.theme-dark .step::before { background: var(--c-accent-dark); }
.theme-dark .step__num, .theme-dark .step__text a { color: var(--c-accent-dark); }
.theme-dark .step__text, .theme-dark .steps__note { color: var(--c-muted-dark); }
.theme-dark .steps__note a { color: var(--c-text-dark); text-decoration-color: var(--c-control-dark); }

@media (max-width: 1080px) {
  .steps--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-7); }
}
@media (max-width: 959px) {
  .steps, .steps--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-7); }
  .steps--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .steps, .steps--3, .steps--5 { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
}

/* =========================================================
   18 Booking: trinindikator, trinpanel, valgkort, tider, opsummering
   ========================================================= */
/* Trinindikator: <ol class="stepper"> med is-done, is-current (aria-current="step") og låste trin */
.stepper { display: grid; grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); gap: 0; counter-reset: stepper; }
.stepper__item { position: relative; display: flex; align-items: center; gap: .65rem; padding-top: var(--space-4); border-top: 2px solid var(--line); color: var(--fg-muted); font-size: var(--fs-small); font-weight: 600; }
.stepper__item + .stepper__item { padding-left: var(--space-3); }
.stepper__num { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: var(--fs-xs); font-weight: 750; font-variant-numeric: tabular-nums; color: var(--fg-muted); }
.stepper__num .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.stepper__item.is-done { border-top-color: var(--link); color: var(--fg); }
.stepper__item.is-done .stepper__num { background: var(--link); box-shadow: none; color: var(--surface); }
.stepper__item.is-current { border-top-color: var(--link); color: var(--fg); }
.stepper__item.is-current .stepper__num { box-shadow: inset 0 0 0 2px var(--link); color: var(--link); }
.stepper__item a, .stepper__item button { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; border-radius: 4px; }
.stepper__status { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--fg-muted); font-weight: 600; }

/* Trinpanel: ét trin i den guidede booking */
.step-panel { position: relative; padding-block: var(--space-6) var(--space-7); border-top: 1px solid var(--line); }
.step-panel.is-current::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 2px; background: var(--link); }
.step-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
.step-panel__num { font-size: var(--fs-xs); font-weight: 750; letter-spacing: .14em; color: var(--link); font-variant-numeric: tabular-nums; }
.step-panel__title { font-size: var(--fs-h3); font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--fg); }
.step-panel__state { margin-left: auto; align-self: center; }
.step-panel__intro { margin-top: var(--space-3); color: var(--fg-muted); max-width: 40rem; }
.step-panel__body { margin-top: var(--space-5); }
.step-panel.is-locked .step-panel__num, .step-panel.is-locked .step-panel__title { color: var(--fg-muted); }
.step-panel__locked { position: relative; margin-top: var(--space-3); padding-left: 1.5rem; color: var(--fg-muted); font-size: var(--fs-small); font-weight: 550; }
.step-panel__locked .icon { position: absolute; left: 0; top: .2em; width: 16px; height: 16px; }
.step-panel__choice { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-top: var(--space-3); font-weight: 600; color: var(--fg); }

/* Valgkort (radio). Label > input.choice__input + span.choice__card */
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice { position: relative; display: block; cursor: pointer; }
.choice__input { position: absolute; top: 1rem; left: 1rem; width: 1px; height: 1px; margin: 0; opacity: 0; }
.choice__card {
  position: relative; display: grid; align-content: start; gap: .3rem; height: 100%; min-height: 64px;
  padding: 1.15rem 1.25rem 1.2rem; border-radius: var(--radius-md);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.choice:hover .choice__card { box-shadow: inset 0 0 0 1px var(--fg-muted); }
.choice__mark { position: absolute; top: 1.1rem; right: 1.1rem; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--control); color: transparent; transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.choice__mark .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.choice__title { padding-right: 2rem; font-size: 1.125rem; font-weight: 650; letter-spacing: -.01em; color: var(--fg); line-height: 1.3; }
.choice__text { font-size: var(--fs-small); color: var(--fg); }
.choice__meta { font-size: var(--fs-xs); color: var(--fg-muted); }
.choice__price { margin-top: .35rem; font-weight: 650; color: var(--fg); }
.choice__price .from { font-weight: 500; color: var(--fg-muted); font-size: var(--fs-small); margin-right: .2rem; }
.choice__input:checked + .choice__card { box-shadow: inset 0 0 0 2px var(--link); }
.choice__input:checked + .choice__card .choice__mark { background: var(--link); box-shadow: none; color: var(--surface); }
.choice__input:focus-visible + .choice__card { outline: 2px solid var(--focus); outline-offset: 3px; }
.choice__input:disabled + .choice__card { opacity: .5; cursor: not-allowed; }

/* Tider og dage: små valgknapper (radio) */
.slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot { position: relative; display: inline-flex; }
.slot__input { position: absolute; inset: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.slot__label { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 5.5rem; min-height: 48px; padding: .4rem 1.1rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--control); font-size: var(--fs-small); font-weight: 650; color: var(--fg); line-height: 1.2; cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease); }
.slot__label small { display: block; font-size: var(--fs-xs); font-weight: 550; color: var(--fg-muted); margin-top: .15rem; }
.slot:hover .slot__label { box-shadow: inset 0 0 0 1px var(--fg); }
.slot__input:checked + .slot__label { background: var(--pressed-bg); color: var(--pressed-fg); box-shadow: none; }
.slot__input:checked + .slot__label small { color: inherit; opacity: .8; }
.slot__input:focus-visible + .slot__label { outline: 2px solid var(--focus); outline-offset: 3px; }
.slot__input:disabled + .slot__label { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.slot--day .slot__label { border-radius: var(--radius-md); min-height: 60px; min-width: 6.25rem; }

/* Opsummering: kort med valg, pris og handling. Klæber på brede skærme. */
.summary { background: var(--surface); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); box-shadow: var(--shadow-card); }
.theme-dark .summary { box-shadow: none; border: 1px solid var(--c-line-dark); }
.summary--sticky { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
.summary__label { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }
.summary__list { margin-top: var(--space-4); border-top: 1px solid var(--line); }
.summary__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem var(--space-3); padding: .85rem 0; border-bottom: 1px solid var(--line); }
.summary__row dt { font-size: var(--fs-xs); color: var(--fg-muted); font-weight: 600; grid-column: 1; }
.summary__row dd { grid-column: 1; font-weight: 650; color: var(--fg); }
.summary__change { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-height: 44px; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-top: var(--space-5); }
.summary__total-label { font-weight: 650; color: var(--fg); }
.summary__price { font-size: 2rem; font-weight: 400; letter-spacing: -.03em; line-height: 1; color: var(--fg); white-space: nowrap; }
.summary__price .from { font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--fg-muted); margin-right: .3rem; }
.summary__vat { margin-top: var(--space-2); text-align: right; font-size: var(--fs-xs); color: var(--fg-muted); }
.summary__note { position: relative; margin-top: var(--space-5); padding: var(--space-4) 0 0 1.75rem; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg-muted); }
.summary__note .icon { position: absolute; left: 0; top: calc(var(--space-4) + 2px); width: 18px; height: 18px; color: var(--link); }
.summary .btn { margin-top: var(--space-5); }

@media (max-width: 1080px) {
  .choices--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .summary--sticky { position: static; }
}
@media (max-width: 800px) {
  .choices { grid-template-columns: minmax(0, 1fr); }
  .choices--2, .choices--4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .stepper__item { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .stepper__item + .stepper__item { padding-left: .5rem; }
  .stepper__label { display: none; }
  .stepper__item.is-current .stepper__label { display: none; }
  .step-panel__state { margin-left: 0; }
  .slot { flex: 1 1 calc(33.333% - .5rem); }
  .slot__label { width: 100%; min-width: 0; padding-inline: .5rem; }
}

/* =========================================================
   19 Formularer
   Lys og mørk via temaet. Fejl: aria-invalid="true" på feltet,
   .field__error med id i aria-describedby, og .error-summary (role="alert").
   ========================================================= */
.form { display: grid; gap: var(--space-5); }
.form__intro { font-size: var(--fs-small); color: var(--fg-muted); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.field { display: grid; align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field__label { display: block; margin-bottom: .5rem; font-size: .9375rem; font-weight: 650; color: var(--fg); line-height: 1.35; }
.field__optional { font-weight: 500; color: var(--fg-muted); }
.field__req { color: var(--danger); margin-left: .15rem; font-weight: 700; }
.field__help { margin-top: .45rem; font-size: var(--fs-xs); color: var(--fg-muted); }
.field__error { display: flex; align-items: flex-start; gap: .4rem; margin-top: .5rem; font-size: var(--fs-small); font-weight: 650; color: var(--danger); }
.field__error .icon { width: 16px; height: 16px; margin-top: 3px; stroke-width: 2; }

.input, .select, .textarea {
  display: block; width: 100%; min-height: 52px; padding: .8rem 1rem; margin: 0;
  font: inherit; font-size: 1rem; line-height: 1.4; color: var(--fg);
  background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-muted); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--fg-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.textarea { min-height: 136px; resize: vertical; }
.select {
  -webkit-appearance: none; appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545d68' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 18px;
}
.theme-dark .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8c1cb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); }
.theme-dark .input, .theme-dark .select, .theme-dark .textarea { color-scheme: dark; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: .55; cursor: not-allowed; }

/* Afkrydsning og radio */
.check { display: flex; align-items: flex-start; gap: .75rem; min-height: 44px; padding-block: .55rem; cursor: pointer; color: var(--fg); font-size: 1rem; line-height: 1.45; }
.check__input {
  -webkit-appearance: none; appearance: none; display: grid; place-content: center; flex: none;
  width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--field-border); border-radius: 6px; background: var(--field-bg); cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.check__input::before { content: ""; width: 12px; height: 12px; background: var(--surface); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform var(--dur) var(--ease); }
.check__input:checked { background: var(--link); border-color: var(--link); }
.check__input:checked::before { transform: scale(1); }
.check__input[type="radio"] { border-radius: 50%; }
.check__input[type="radio"]::before { width: 10px; height: 10px; border-radius: 50%; clip-path: none; }
.check__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.check__input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.check__label a { color: var(--link); font-weight: 650; text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }
.check-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); }
.check-group--inline { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }

.fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset + .fieldset { margin-top: var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--line); }
/* float tager legend ud af fieldsetets kant, så hårstregen over gruppen ikke går gennem teksten */
.fieldset__legend + * { clear: both; }
.fieldset__legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-4); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }
.fieldset__legend--field { margin-bottom: .35rem; font-size: .9375rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--fg); }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.form__legal { font-size: var(--fs-small); color: var(--fg-muted); max-width: 40rem; }
.form__legal a { color: var(--link); font-weight: 650; text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }
/* Skjult felt mod spamrobotter (honeypot). Skjult for alle, også skærmlæsere. */
.form__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Kort omkring en formular */
.form-card { background: var(--surface); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); box-shadow: var(--shadow-card); }
.theme-dark .form-card { box-shadow: none; border: 1px solid var(--c-line-dark); }

/* Fejlopsummering øverst i formularen */
.error-summary { display: grid; gap: .5rem; padding: 1.1rem 1.25rem 1.15rem; border-radius: var(--radius-sm); background: var(--danger-bg); box-shadow: inset 3px 0 0 var(--danger); color: var(--fg); }
.error-summary:focus { outline: none; }
.error-summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.error-summary__title { display: flex; align-items: center; gap: .55rem; font-weight: 700; }
.error-summary__title .icon { color: var(--danger); }
.error-summary__text { font-size: var(--fs-small); }
.error-summary__list { display: grid; gap: .3rem; padding-left: 1.85rem; font-size: var(--fs-small); }
.error-summary__list a { color: var(--danger); font-weight: 650; text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; border-radius: 4px; }

/* Tak-tilstand efter afsendelse */
.form-success { display: grid; gap: var(--space-4); justify-items: start; }
.form-success:focus { outline: none; }
.form-success__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--tint); color: var(--on-tint); }
.form-success__icon .icon { width: 24px; height: 24px; stroke-width: 2; }
.form-success__title { font-size: var(--fs-h3); font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--fg); max-width: 30em; }
.form-success__title:focus { outline: none; }
.form-success__title:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.form-success__text { color: var(--fg-muted); max-width: 40rem; }
.form-success__steps { width: 100%; margin-top: var(--space-2); border-top: 1px solid var(--line); counter-reset: done; }
.form-success__steps li { position: relative; padding: .9rem 0 .9rem 2.75rem; border-bottom: 1px solid var(--line); color: var(--fg); counter-increment: done; }
.form-success__steps li::before { content: counter(done, decimal-leading-zero); position: absolute; left: 0; top: 1.1rem; font-size: var(--fs-xs); font-weight: 750; letter-spacing: .14em; color: var(--link); }
.form-success__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-2); }

@media (max-width: 640px) {
  .form__grid, .check-group { grid-template-columns: minmax(0, 1fr); }
  .form__actions .btn { flex: 1 1 100%; }
}

/* =========================================================
   20 Lister, meddelelser, pladsholdertekst, mærkater og chips
   ========================================================= */
/* Liste med flueben (inkluderet) og med streg (ikke med i prisen) */
/* Ikonet står absolut, så tekst og pladsholdere i punktet løber som almindelig tekst */
.list-check, .list-minus { display: grid; gap: .8rem; }
.list-check li, .list-minus li { position: relative; padding-left: 1.75rem; font-size: 1rem; line-height: 1.45; color: var(--fg); }
.list-check li > .icon, .list-minus li > .icon { position: absolute; left: 0; top: .12em; width: 18px; height: 18px; stroke-width: 2; }
.list-check .icon { color: var(--link); }
.list-minus .icon { color: var(--fg-muted); }
.list-check--2col, .list-minus--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
.list-check--strong li { font-weight: 550; }
.list-check__sub { display: block; color: var(--fg-muted); font-size: var(--fs-small); font-weight: 400; margin-top: .1rem; }

/* Meddelelse: info (blå tint) og neutral (grå). Bruges til RKI-teksten og eksempel-noter. */
.notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem var(--space-4); padding: var(--space-5); border-radius: var(--radius-md); background: var(--tint); color: var(--fg); }
.notice__icon { grid-row: span 3; color: var(--on-tint); margin-top: 2px; }
.notice__title { font-weight: 700; color: var(--fg); font-size: 1.0625rem; line-height: 1.4; }
.notice__text { color: var(--fg); font-size: 1rem; }
.notice__text + .notice__text { margin-top: .5rem; }
.notice__actions { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; }
.notice--neutral { background: var(--c-light); }
.notice--neutral .notice__icon { color: var(--fg-muted); }
.section--light .notice--neutral, .theme-light .section--light .notice--neutral { background: var(--c-white); }
.theme-dark .notice--neutral { background: var(--c-raised); }
.notice--sm { padding: var(--space-4); font-size: var(--fs-small); }
.notice--sm .notice__text { font-size: var(--fs-small); }

/* Pladsholdertekst i løbende tekst: [svartid], [årgang], [udfyld] */
.ph { padding: .04em .2em; border-radius: .25em; background: var(--ph-bg); color: var(--ph-fg); font-weight: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Note til ejeren, der skal udfyldes eller fjernes før lancering: [Kortene kommer fra CMS ...] */
.ph-note { display: flex; align-items: flex-start; gap: .55rem; margin-top: var(--space-4); padding: .7rem .9rem; border: 1px dashed var(--ph-line); border-radius: var(--radius-sm); font-size: var(--fs-xs); line-height: 1.5; color: var(--ph-fg); max-width: 46rem; }
.ph-note::before { content: "Til ejer"; flex: none; padding: .1rem .45rem; border-radius: var(--radius-pill); background: var(--ph-bg); font-size: .6875rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; }
.theme-dark .ph-note { border-color: var(--c-control-dark); }
.ph-note--inline { display: inline-flex; margin-top: 0; }

/* Mærkat (kategori) og etiketter */
.tag { display: inline-flex; align-items: center; gap: .35rem; min-height: 26px; padding: .15rem .7rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--fs-xs); font-weight: 650; color: var(--fg-muted); line-height: 1.3; white-space: nowrap; }
.tag--accent { box-shadow: none; background: var(--tint); color: var(--on-tint); }
.tag--solid { box-shadow: none; background: var(--pressed-bg); color: var(--pressed-fg); }
.tag .icon { width: 14px; height: 14px; stroke-width: 2.2; }

/* Filterchips og valgknapper (aria-pressed) */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips > li { display: flex; }
.chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.1rem; white-space: nowrap; border-radius: var(--radius-pill); border: 0; box-shadow: inset 0 0 0 1px var(--control); background: transparent; color: var(--fg); font-size: var(--fs-small); font-weight: 650; cursor: pointer; transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease); }
.chip:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.chip[aria-pressed="true"], .chip[aria-current="true"], .chip.is-active { background: var(--pressed-bg); color: var(--pressed-fg); box-shadow: none; }
.chip .icon { width: 16px; height: 16px; }
.chip__count { font-weight: 500; opacity: .75; }
a.chip:hover { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }

@media (max-width: 640px) {
  .list-check--2col, .list-minus--2col { grid-template-columns: minmax(0, 1fr); }
  .notice { padding: var(--space-4); column-gap: var(--space-3); }
}

/* =========================================================
   21 Harmonika (FAQ)
   <h3 class="accordion__heading"><button class="accordion__trigger" data-toggle="ID">
   ========================================================= */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__heading { margin: 0; font-size: inherit; font-weight: inherit; }
.accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); width: 100%; min-height: 64px; padding: 1.1rem 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--fg); font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; border-radius: 4px; }
.accordion__trigger:hover .accordion__q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.accordion__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--fg); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.accordion__icon .icon { width: 18px; height: 18px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(180deg); background: var(--pressed-bg); color: var(--pressed-fg); box-shadow: none; }
.accordion__panel { padding: 0 3.75rem var(--space-6) 0; color: var(--fg-muted); max-width: 48rem; }
.accordion__panel > * + * { margin-top: .8rem; }
.accordion__panel ul { display: grid; gap: .45rem; }
.accordion__panel ul li { position: relative; padding-left: 1.15rem; }
.accordion__panel ul li::before { content: ""; position: absolute; left: .1rem; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--link); }
.accordion__panel a:not(.link):not(.btn) { color: var(--link); font-weight: 650; text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }
.accordion--compact .accordion__trigger { min-height: 56px; font-size: 1.0625rem; }

/* Grupperet FAQ: emne til venstre, spørgsmål til højre */
.faq-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-5) var(--space-8); padding-block: var(--space-7); border-top: 1px solid var(--line); }
.faq-group:first-child { border-top: 0; padding-top: 0; }
.faq-group__title { font-size: var(--fs-h3); font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--fg); }
.faq-group__text { margin-top: var(--space-3); color: var(--fg-muted); font-size: var(--fs-small); max-width: 18rem; }
.faq-group__head { align-self: start; position: sticky; top: calc(var(--header-h) + var(--space-5)); }
.faq-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); }

@media (max-width: 959px) {
  .faq-group { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-6); }
  .faq-group__head { position: static; }
}
@media (max-width: 640px) {
  .accordion__trigger { font-size: 1.0625rem; gap: var(--space-4); }
  .accordion__panel { padding-right: 0; }
}

/* =========================================================
   22 Cases (Før og efter): bil, udgangspunkt, det gjorde vi, resultat, tid
   ========================================================= */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.case { display: flex; flex-direction: column; }
.case__body { display: flex; flex-direction: column; flex: 1; padding-top: var(--space-5); }
.case__top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--space-4); }
.case__time { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); font-weight: 600; color: var(--fg-muted); }
.case__time .icon { width: 16px; height: 16px; }
.case__title { margin-top: var(--space-3); font-size: var(--fs-h3); font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--fg); }
.case__facts { margin-top: var(--space-4); border-top: 1px solid var(--line); }
.case__facts > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-4); padding: .8rem 0; border-bottom: 1px solid var(--line); }
.case__facts dt { padding-top: .2em; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.case__facts dd { font-size: var(--fs-small); color: var(--fg); }
.case__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: auto; padding-top: var(--space-5); }
/* Bred case: billede til venstre, fakta til højre */
.case--wide { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: center; }
.case--wide .case__body { padding-top: 0; }

@media (max-width: 959px) {
  .cases { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); max-width: 40rem; }
  .case--wide { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .case--wide .case__body { padding-top: var(--space-5); }
}
@media (max-width: 640px) {
  .case__facts > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* =========================================================
   23 Seneste opgaver (feed fra egen samling, ingen Meta-indlejring)
   ========================================================= */
.feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
/* position: relative holder skjult tekst (.visually-hidden) inde i kortet, så den aldrig giver vandret scroll */
.feed__item { position: relative; display: flex; flex-direction: column; }
.feed__meta { margin-top: var(--space-4); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .02em; color: var(--fg-muted); }
.feed__title { margin-top: .3rem; font-size: 1.125rem; font-weight: 650; letter-spacing: -.01em; color: var(--fg); }
.feed__pkg { margin-top: .1rem; font-size: var(--fs-small); font-weight: 600; color: var(--link); }
.feed__note { margin-top: .4rem; font-size: var(--fs-small); color: var(--fg-muted); }
.feed__item .link { margin-top: var(--space-3); }
.feed__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-7); }

@media (max-width: 959px) {
  .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .feed { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .feed::-webkit-scrollbar { display: none; }
  .feed__item { scroll-snap-align: start; }
  .feed--grid { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
}

/* =========================================================
   24 Kontakt, åbningstider og kort
   ========================================================= */
/* Kontaktblok (i .columns): etiket, stor værdi, metatekst */
.contact-block__label { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }
.contact-block__label .icon { width: 18px; height: 18px; color: var(--link); }
/* E-mail: skriv kontakt@<wbr>carsandcare.dk, så adressen kun brydes efter @ */
.contact-block__value { display: block; margin-top: var(--space-4); font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.35; color: var(--fg); font-style: normal; overflow-wrap: break-word; }
a.contact-block__value { border-radius: 4px; text-decoration: underline; text-decoration-color: var(--control); text-decoration-thickness: 1px; text-underline-offset: .28em; transition: text-decoration-color var(--dur) var(--ease); }
a.contact-block__value:hover { text-decoration-color: currentColor; }
.contact-block__meta { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--fg-muted); }
.contact-block .link { margin-top: var(--space-4); }

/* Åbningstider: rækker med dag eller ydelse og tid. Tiderne er pladsholdere, indtil ejeren oplyser dem. */
.hours { border-top: 1px solid var(--line); }
.hours__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.hours dt { color: var(--fg); font-weight: 600; }
.hours dd { color: var(--fg); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.hours__row.is-today dt::after { content: "I dag"; margin-left: .5rem; padding: .05rem .45rem; border-radius: var(--radius-pill); background: var(--tint); color: var(--on-tint); font-size: .6875rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }

/* Statisk kort (pladsholder, intet Google Maps-iframe) med Find vej-link */
.map { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg); background: var(--ph-bg); box-shadow: inset 0 0 0 1px var(--ph-line); }
.map__lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ph-line); }
.map__lines path { fill: none; stroke: currentColor; stroke-linecap: round; }
.map__pin { position: relative; display: grid; justify-items: center; gap: .8rem; padding: var(--space-4); text-align: center; }
.map__marker { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-anthracite); color: var(--c-white); box-shadow: 0 0 0 6px rgba(30, 35, 41, .1), var(--shadow-card); }
.theme-dark .map__marker { background: var(--c-text-dark); color: var(--c-text); box-shadow: 0 0 0 6px rgba(244, 246, 248, .08); }
.map__marker .icon { width: 22px; height: 22px; }
.map__address { padding: .35rem .8rem; border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs-small); font-weight: 650; color: var(--fg); box-shadow: 0 1px 2px rgba(21, 25, 30, .08); }
.map__label { max-width: 30ch; font-size: var(--fs-xs); font-weight: 600; color: var(--ph-fg); }
.map__actions { position: absolute; left: var(--space-4); bottom: var(--space-4); display: flex; flex-wrap: wrap; gap: .5rem; }
/* Kortbillede fra OpenStreetMap (selvhostet, centreret på adressen). Markørens midte står præcis på billedets midte. */
.map--photo .map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map--photo .map__pin { position: absolute; left: 50%; top: 50%; padding: 0; transform: translate(-50%, -26px); }
.map__credit { position: absolute; right: .5rem; bottom: .5rem; padding: .1rem .45rem; border-radius: 4px; background: rgba(255, 255, 255, .85); font-size: .6875rem; color: #333; text-decoration: none; }
.map__credit:hover { text-decoration: underline; }
.map-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); font-size: var(--fs-small); color: var(--fg-muted); }

@media (max-width: 640px) {
  .map { aspect-ratio: 4 / 3; }
  .map__actions { left: var(--space-3); bottom: var(--space-3); }
}

/* =========================================================
   25 Artikler, brødtekst, indholdsfortegnelse og tabeller
   ========================================================= */
.articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
.article-card { position: relative; display: flex; flex-direction: column; }
.article-card__meta { margin-top: var(--space-4); font-size: var(--fs-xs); font-weight: 650; color: var(--fg-muted); }
.article-card__title { margin-top: .35rem; font-size: 1.25rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--fg); }
.article-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.article-card__title a:focus-visible { outline: none; }
.article-card:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: var(--radius-md); }
.article-card:hover .article-card__title a { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.article-card__text { margin-top: .5rem; font-size: var(--fs-small); color: var(--fg-muted); }
.article-card__more { display: inline-flex; align-items: center; gap: .45rem; margin-top: var(--space-4); color: var(--link); font-weight: 650; font-size: var(--fs-small); transition: gap var(--dur) var(--ease); }
.article-card__more .icon { width: 16px; height: 16px; stroke-width: 1.9; }
.article-card:hover .article-card__more { gap: .7rem; }

/* Brødtekst (juridiske sider og guide-artikel) */
.prose { max-width: var(--measure); color: var(--fg); font-size: var(--fs-body); line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.4em; font-size: clamp(1.5rem, 1.3rem + .7vw, 1.875rem); font-weight: 600; letter-spacing: -.022em; line-height: 1.2; color: var(--fg); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.prose h3 { margin-top: 2em; font-size: 1.1875rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.35; color: var(--fg); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.prose h2 + *, .prose h3 + * { margin-top: .7em; }
.prose > :first-child, .prose > section:first-child > :first-child { margin-top: 0; }
.prose section + section { margin-top: 0; }
.prose section > h2 { margin-top: 2.4em; }
.prose p, .prose li { color: var(--fg); }
.prose .muted { color: var(--fg-muted); }
.prose a:not(.btn):not(.link) { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.prose strong { font-weight: 650; }
/* Kun almindelige lister (uden klasse) får prikker og numre. Komponentlister i teksten
   (.list-check, .list-minus, .reqs, .pkg__list og andre) beholder deres eget udseende. */
.prose ul:not([class]), .prose ol:not([class]) { display: grid; gap: .5em; }
.prose ul:not([class]) > li { position: relative; padding-left: 1.4em; }
.prose ul:not([class]) > li::before { content: ""; position: absolute; left: .3em; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--link); }
.prose ol:not([class]) { counter-reset: prose; }
.prose ol:not([class]) > li { position: relative; padding-left: 2em; counter-increment: prose; }
.prose ol:not([class]) > li::before { content: counter(prose) "."; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--link); font-variant-numeric: tabular-nums; }
.prose figure { margin-block: 2em; }
.prose figcaption { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--fg-muted); }
.prose blockquote { padding-left: var(--space-5); border-left: 2px solid var(--link); font-size: 1.1875rem; color: var(--fg); }
.prose .notice { margin-block: 1.75em; }
.prose address { font-style: normal; display: grid; gap: .1rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5em; }

/* "Sidst opdateret" og andre metalinjer */
.updated { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); font-weight: 600; color: var(--fg-muted); }
.updated .icon { width: 16px; height: 16px; }
.meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: var(--fs-xs); font-weight: 600; color: var(--fg-muted); }
/* Børnene er almindelige span; læg en eventuel .ph inde i dem, så prikken ikke får pladsholderens baggrund */
.meta-line > * + *::before { content: "·"; margin-right: .5rem; color: var(--control); }

/* Indholdsfortegnelse */
.toc__label { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-3); }
.toc ol { display: grid; border-top: 1px solid var(--line); counter-reset: toc; }
.toc li { counter-increment: toc; border-bottom: 1px solid var(--line); }
.toc a { display: flex; gap: .75rem; align-items: baseline; min-height: 44px; padding: .6rem 0; font-size: var(--fs-small); font-weight: 600; color: var(--fg); line-height: 1.4; border-radius: 4px; transition: color var(--dur) var(--ease); }
.toc--numbered a::before { content: counter(toc); flex: none; min-width: 1.4rem; font-size: var(--fs-xs); font-weight: 750; color: var(--link); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--link); }
.toc a[aria-current="true"] { color: var(--link); }

/* Dokumentlayout: fortegnelse til venstre (klæber), tekst til højre */
.doc { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.doc__aside { position: sticky; top: calc(var(--header-h) + var(--space-5)); max-height: calc(100vh - var(--header-h) - 2 * var(--space-5)); overflow-y: auto; padding: 2px 4px 2px 2px; }
.doc__aside > * + * { margin-top: var(--space-6); }

/* Tabel */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table th, .table td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table thead th { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); border-bottom-color: var(--line-strong); }
.table tbody th { font-weight: 650; color: var(--fg); }
.table td { color: var(--fg); }

@media (max-width: 1080px) {
  .articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .doc__aside { position: static; max-height: none; overflow: visible; padding: var(--space-5); border-radius: var(--radius-md); background: var(--c-light); }
  .section--light .doc__aside { background: var(--c-white); }
}
@media (max-width: 640px) {
  .articles { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

/* =========================================================
   26 CTA-bånd og 404
   ========================================================= */
/* CTA-bånd: samme opbygning som footerens CTA. Mørkt lige før footeren:
   sæt data-cta="off" på footerens pladsholder, så CTA'en ikke gentages. */
.cta-band__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); }
.cta-band .h2 { max-width: 16em; }
.cta-band__text { margin-top: var(--space-4); color: var(--fg-muted); max-width: 34rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cta-band--light .cta-band__inner { padding-top: var(--space-6); border-top: 1px solid var(--line); }

/* 404 */
.not-found { padding-block: clamp(3.5rem, 2.5rem + 5vw, 7.5rem); }
.not-found__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-8); align-items: center; }
.not-found__code { font-size: var(--fs-display); font-weight: 300; line-height: .85; letter-spacing: -.06em; color: var(--c-subtle-dark); font-variant-numeric: tabular-nums; }
.not-found__title { font-size: var(--fs-h1-page); font-weight: 650; line-height: 1.08; letter-spacing: -.032em; color: var(--c-text-dark); }
.not-found__text { margin-top: var(--space-5); max-width: 30rem; }
.not-found__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: 2.25rem; }
.link-list { border-top: 1px solid var(--line); }
.link-list a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 56px; padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; font-weight: 600; color: var(--fg); border-radius: 4px; }
.link-list .icon { color: var(--fg-muted); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.link-list a:hover .icon { transform: translateX(3px); color: var(--fg); }
.link-list a:hover span { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }
.link-list small { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--fg-muted); margin-top: .1rem; }

@media (max-width: 959px) {
  .not-found__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 640px) {
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn, .not-found__actions .btn { flex: 1 1 100%; }
}

/* =========================================================
   27 Reduceret bevægelse
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .btn:hover, .hero__card:hover { transform: none; }
  .tile:hover img { transform: none; }
}