/* =====================================================================
   Walsted Lungeklinik — designsystem ("Petrol & Bone")
   Ét stilark for hele sitet. Ingen build, ingen tredjepart.
   Fonte → Tokens → base → typografi → layout → komponenter → sektioner →
   header/footer → motion → responsivt → reduced-motion / print.
   ===================================================================== */

/* ---------- Fonte ------------------------------------------------------
   Selvhostede variable fonts (subset dækker basis-latin + æøåÆØÅ/Éé + de
   typografiske tegn sitet rent faktisk bruger, se www/assets/fonts/SUBSET.md).
   Hentet fra Google Fonts og serveret lokalt — ingen tredjeparts-kald, passer
   streng CSP. wght-aksen er indsnævret til det interval sitets CSS rent
   faktisk anvender (Fraunces 400-600, Inter 400-700, begge med margin). KUN
   det offentlige site (dette stylesheet) bruger v2-filerne — personale-
   backenden og infoskærmen har egne @font-face-erklæringer, der bevidst
   peger på de fulde originalfiler (uaudit vægtbrug dér); begge filsæt findes
   stadig, ingen er fjernet.
   Tidligere et selvstændigt fonts.css, hentet som eget stylesheet — flettet
   ind her 28-08-2026 for at spare én request (marginal gevinst under
   HTTP/2-multipleksing, men gjort da punkt 2's fonts.css-redigering
   alligevel krævede filen åben). --------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 380 620;
  font-display: swap;
  src: url('../fonts/fraunces-latin-v2.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 380 720;
  font-display: swap;
  src: url('../fonts/inter-latin-v2.woff2') format('woff2');
}

/* ---------- Tokens ---------------------------------------------------- */
:root {
  /* Palette — aldrig rent sort/hvid */
  --bone:        #F4F1EA;   /* lærred */
  --surface:     #FBFAF6;   /* kort / ophøjede flader */
  --stone:       #E7E2D8;   /* blød fyld */
  --petrol:      #0E3A3A;   /* primær struktur / inverteret bund */
  --petrol-deep: #0A2C2C;   /* dybere petrol */
  --ink:         #1C2422;   /* brødtekst */
  --sage:        #7E988E;   /* dæmpet accent / illustration */
  --sage-soft:   #A9BBB2;
  --sage-ink:    #566B61;   /* sage som tekst på lys bund (WCAG AA) */
  --sage-ink-strong: #4C5D55; /* samme tone, mørkere: sage-ink måler kun 4,43:1 på sten */
  --terracotta:  #C8663E;   /* eneste varme accent — kun CTA/aktiv (<5%) */
  --terracotta-deep:#A9512E;   /* primær CTA-baggrund: hvid tekst ≥ 4,5:1 (WCAG AA) */
  --terracotta-deeper:#8C4325; /* CTA hover — mørkere endnu */
  --hairline:    #D8D2C5;   /* streger / kanter — dekorativ struktur, IKKE interaktive komponenter (se --hairline-strong) */
  /* A11-01 (designreview 31-08-2026): --hairline måler kun 1,34:1 på bone, 1,44:1 på
     surface og 1,17:1 på sten — under WCAG 1.4.11's krav om 3:1 for interaktive
     komponenters kant. --hairline-strong er den faste 3:1-kant til aktive kontroller
     (knapper, sprogvælger, hamburger): 3,45:1 på bone, 3,73:1 på surface, 3,01:1 på
     sten. Betydningslaget er nu: fast 3:1-kant = aktiv handling, sart hårlinje =
     struktur, stiplet lys kant = afventende (se .btn.is-disabled). --hairline SELV
     er uændret og bruges fortsat til al dekorativ inddeling (kort, chips, medaljoner,
     facts, prisliste, notice, sektionskanter) — det er trykkets signaturgreb. */
  --hairline-strong: #75857B;
  --hairline-on-petrol: rgba(244,241,234,.16);
  /* Samme rolle som --hairline-strong, men på petrol-bund (ghost-knapper i mørke
     bånd og footeren): 3,25:1 på --petrol, 3,52:1 på --petrol-deep. */
  --hairline-strong-on-petrol: rgba(244,241,234,.42);

  /* Tekst på petrol */
  --on-petrol:        #EFEBE1;
  --on-petrol-muted:  #AFC3BC;

  /* Typografi */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Rytme (8-skala) */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: 64px; --s6: 96px; --s7: 128px; --s8: 160px;

  --maxw: 1280px;
  --measure: 64ch;
  --gutter: clamp(20px, 5.2vw, 64px);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --header-h: 76px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* MOT-07 (designreview 31-08-2026): motion-kontrakten. --ease-breath er
     logo-mærkets egen asymmetriske kurve, kopieret som et navngivet valg (ikke
     et "citat" af heroen) — mærkets keyframes selv røres ikke. Varighederne
     erstatter elleve spredte ad hoc-værdier med tre navngivne trin. Se den
     fulde kontrakt i motion-sektionen nedenfor. */
  --ease-breath: cubic-bezier(.4,0,.35,1);
  --t-tap: .18s;
  --t-move: .3s;
  --t-scene: .8s;
  --shadow-soft: 0 1px 2px rgba(28,36,34,.04), 0 18px 40px -28px rgba(14,58,58,.28);
}

/* ---------- Reset / base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Header + klæbende subnav. Uden subnav-højden lander ankerspring bag fanerne. */
  scroll-padding-top: calc(var(--header-h) + 46px + 12px);
  /* iOS' grå tap-highlight er det ene interaktionsøjeblik der afslører skabelonen
     på et site hvor selection/fokus/aktiv-markering ellers er husets farver.
     Petrol som grundtone, samme styrke som browserstandarden (1,50:1 på bone,
     1,51:1 på surface, 1,26:1 på terracotta-deep-knappen). */
  -webkit-tap-highlight-color: rgba(14,58,58,.22);
}
/* Petrol-på-petrol ville være 1,00:1 og slukke feedbacken helt på de mørke
   bånd og i footeren; terracotta måler 1,29:1 mod petrol. Egenskaben nedarves,
   så reglen dækker alle klikbare elementer uden at nævne dem. */
.section--petrol, .on-petrol { -webkit-tap-highlight-color: rgba(200,102,62,.28); }

body {
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem); /* 17 → 19px */
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  overflow-x: hidden;
  /* TYP-09: begge selvhostede fontfiler har kun font-style: normal, ingen
     italic-akse. Uden dette ville en fremtidig em/i blive browser-syntetisk
     skråstillet (faux-kursiv) i stedet for at falde tilbage til oprejst. */
  font-synthesis: none;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
svg { color: inherit; }

a { color: inherit; text-decoration: none; }

/* Terracotta er dekorativ og bærer ikke tekst (designmanualen): mod
   on-petrol måler den kun 3,25:1, under AA. Deep-varianten er allerede
   primærknappens godkendte par (4,52:1). */
::selection { background: var(--terracotta-deep); color: var(--on-petrol); }

:focus-visible {
  outline: 2.5px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Terracotta CTA'er har terracotta baggrund → petrol fokusring for sikker kontrast (WCAG 2.4.7). */
.btn--primary:focus-visible { outline-color: var(--petrol); }
/* ...men på de petrol-bånd med primærknap (index #atleter, ydelser) drukner
   petrol-ringen på petrol-bunden (1,00:1): lys ring på mørk bund. */
.section--petrol .btn--primary:focus-visible,
.on-petrol .btn--primary:focus-visible { outline-color: var(--on-petrol); }
/* "For læger" er en sekundær (fag-)indgang: dæmpet farve adskiller den fra patient-menupunkterne uden at ændre bredden. */
.nav a.nav-pro { color: var(--sage-ink); }
/* Diskret henviser-CTA på forsidens booking-sektion. */
.referrer-cue { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--hairline); }

/* ---------- Typografi ------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 430;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--petrol);
  text-wrap: balance;
}

.display {
  font-size: clamp(2.75rem, 6.4vw, 5rem);
  font-weight: 460;
  letter-spacing: -0.026em;
  line-height: 1.02;
}

/* TYP-01 (designreview 31-08-2026): vægttrappe i stedet for én flad vægt/line-height
   fra h1 til h4 — vægten stiger, når graden falder, så små serif-rubrikker (FAQ,
   prislistens grupperubrikker, kort-h3) ankrer bedre i lange tekstflader. .display,
   .page-hero h1 og .stat-num er bevidst URØRT (hero-elegancen bevares). h4's 620
   rammer den subsettede Fraunces-fils wght-loft (380-620, jf. SUBSET.md) — gå ikke
   højere. TYP-02 (åbn aksen til 100-900) er bortfaldet: filen kan det ikke længere. */
h2, .h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 540; line-height: 1.12; }
h3, .h3 { font-size: clamp(1.4rem, 1.8vw, 1.85rem); font-weight: 590; line-height: 1.22; letter-spacing: -0.008em; }
h4 { font-size: 1.2rem; font-weight: 620; line-height: 1.28; letter-spacing: -0.004em; }

/* SML-09: petrol-båndenes h2 må tale med samme tyngde som trykkets rubrikker.
   IKKE på .cta-card h2 (sitets mest gentagne modul, ville forstærke gentagelsen) —
   ingen kolliderer i dag, men undtagelsen skrives eksplicit ind, så et fremtidigt
   cta-card inde i et petrol-bånd ikke arver vægten ved et uheld. */
.section--petrol h2 { font-weight: 600; }
.section--petrol .cta-card h2 { font-weight: 540; }

p { text-wrap: pretty; }
p + p { margin-top: var(--s2); }

.eyebrow {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.6; /* eyebrows kan være h2 (semantik) — neutralisér h-reglens 1.08 */
  text-transform: uppercase;
  color: var(--sage-ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Sage-ink måler 4,43:1 på sten ved 12,5 px — under AA. Samme tone, mørkere,
   kun hvor baggrunden er sten. Designmanualens --sage-ink står uændret. */
.section--stone .eyebrow,
.section--stone .facts dt,
.section--stone .muted { color: var(--sage-ink-strong); }
.section--stone .muted { color: color-mix(in srgb, var(--ink) 74%, var(--stone)); }
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .7;
}
.section--petrol .eyebrow { color: var(--sage-soft); }

/* Målet var 40ch (606 px, ca. 46 tegn pr. linje): underrubrikken fyldte kun
   halvdelen af sidebredden og stod smallere end sin egen h2 (Emils
   layoutgennemgang 01-09-2026, punkt c/e). 54ch (818 px ved 24 px) giver
   målt højst ca. 75 tegn pr. linje inkl. mellemrum. OBS: Inters ch (bredden
   af »0«) er bredere end en gennemsnitlig dansk glyf, så 56ch gav 76-79 tegn
   på de længste hero-linjer (verifikation 02-09-2026); 54ch holder
   45-75-båndet. I .section-head loftes den af hovedets 64ch (767 px), så h2
   og underrubrik deler bredde dér. Gælder også page-hero's lede (den
   tidligere særregel på 52ch er fjernet); i .split-spalter loftes den som
   før af spaltebredden. */
.lede {
  font-size: clamp(1.18rem, 1vw + 1rem, 1.5rem);
  line-height: 1.45;
  letter-spacing: -0.006em;
  color: color-mix(in srgb, var(--ink) 86%, var(--petrol));
  max-width: 54ch;
}

/* 70 % (ikke 62) fordi 62 % gav 4,33:1 på bone og 3,79:1 på sten — begge under AA.
   70 % måler 5,52 / 4,82 / 5,96 på bone / sten / surface. */
.muted { color: color-mix(in srgb, var(--ink) 70%, var(--bone)); }
.measure { max-width: var(--measure); }
.tnum { font-variant-numeric: tabular-nums; }
.em { color: var(--terracotta-deep); font-weight: 700; } /* fremhævede akutnumre — AA på lys bund */

/* TYP-11 (designreview 31-08-2026): bylinen som kolofon frem for anonym
   muted-paragraf. Ordlyden røres ikke, kun de ni p.muted.byline-afsnit
   (allerede klassificeret .byline af SML-03) får rammen. */
.byline {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s2);
  margin-top: var(--s4);
  font-size: .9rem;
  max-width: 64ch;
}

/* Byline-slutmærket (SML-03, designreview 31-08-2026): magasintraditionens
   endmark. Dekorativt, uden tekstalternativ — skærmlæsere upåvirkede. */
.byline::after {
  content: "";
  display: inline-block;
  width: .44em;
  height: .44em;
  border-radius: 50%;
  background: var(--terracotta);
  margin-left: .5em;
  transform: translateY(-.05em);
}

/* Ankerkvittering (RND-07, designreview 31-08-2026, landet 01-09-2026):
   site.js' initAnchorMark() sætter/fjerner disse klasser på målsektionens
   rubrik ved load/hashchange (ren CSS kan ikke se tekstindholdet, se
   site.js). Ender rubrikken selv på punktum, farves netop DET tegn
   (.anchor-dot); ender den uden (label-rubrikker, prislistens
   gruppeoverskrifter), tilføjes et selvstændigt punktum via ::after. Statisk
   — ingen animation, motionkontraktens én-gangs-regel er ikke i spil her.
   Selvreview-fund: .anchor-dot farver en RIGTIG tekstkarakter (periode), ikke
   en dekorativ baggrundsprik som .cta-card--petrol's — derfor samme regel som
   .em (linje ~242): --terracotta-deep, ikke almindelig --terracotta, som kun
   lige akkurat rammer 3:1 på sten/petrol uden margin. --terracotta-deep måler
   4,17:1 på sten og 4,77:1 på bone (rigelig margin), men falder til 2,32:1 på
   petrol (mørkere farve på mørk bund) — derfor bevarer petrol-sektionerne den
   lysere --terracotta, som til gengæld klarer 3:1 (målt 3,22:1) dér. */
.anchor-dot { color: var(--terracotta-deep); }
.section--petrol .anchor-dot,
.on-petrol .anchor-dot { color: var(--terracotta); }
.anchor-dot--append::after {
  content: "";
  display: inline-block;
  width: .14em;
  height: .14em;
  min-width: 4px;
  min-height: 4px;
  border-radius: 50%;
  background: var(--terracotta);
  margin-left: .18em;
  vertical-align: middle;
}

/* ---------- Layout ---------------------------------------------------- */
/* Rytme-gulv mellem blokke i en sektion. Søskende-margener kollapser til den
   største, så komponenter med egen margin er upåvirkede; det her fanger kun
   de steder, hvor to blokke ellers ville støde direkte op til hinanden. */
.section > .wrap > * + * { margin-top: clamp(var(--s3), 3vw, var(--s4)); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* viewport-fit=cover uden dette lader indhold løbe ind under en udskæring i
     landskab (insets op til ca. 59px mod gutterens 20px). Skrevet EFTER
     linjen ovenfor: browsere uden env() beholder den uændret. */
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}

.section { padding-block: clamp(var(--s5), 9vw, var(--s8)); position: relative; }
.section--tight { padding-block: clamp(var(--s4), 6vw, var(--s6)); }

.section--petrol {
  background: var(--petrol);
  color: var(--on-petrol);
}
.section--petrol h1, .section--petrol h2, .section--petrol h3, .section--petrol h4 { color: var(--on-petrol); }
.section--petrol .lede { color: var(--on-petrol-muted); }
.section--stone { background: var(--stone); }
/* Regel (FRV-03): den afsluttende CTA-sektion skifter altid flade i forhold
   til naboen over den, ellers smelter den sammen med den forudgående sektion
   via halveringsreglen nedenfor i stedet for at blive rammet ind af et
   farveskifte. */

/* Naboer med samme baggrund: den store polstring aflæses som et hul, fordi der
   ikke er noget farveskift til at begrunde den. Halvér samlingen dér. */
.section:not(.section--stone):not(.section--petrol) + .section:not(.section--stone):not(.section--petrol),
.section--stone + .section--stone,
.section--petrol + .section--petrol,
.page-hero + .section:not(.section--stone):not(.section--petrol),
.subnav + .section:not(.section--stone):not(.section--petrol) { padding-top: clamp(var(--s4), 5vw, var(--s5)); }
/* og symmetrisk i den anden ende af samlingen (:has = forrige søskende) */
.section:not(.section--stone):not(.section--petrol):has(+ .section:not(.section--stone):not(.section--petrol)),
.section--stone:has(+ .section--stone),
.section--petrol:has(+ .section--petrol) { padding-bottom: clamp(var(--s4), 5vw, var(--s5)); }

/* 64ch (767 px, to tredjedele af wrap'ens 1152 px); var 56ch = 671 px, som
   sammen med .lede's 40ch lod rubrik og underrubrik stå i den venstre halvdel
   (layoutgennemgang 01-09-2026, punkt c). Bredden er h2'ens: en lang h2 som
   »Spidskompetencer og hele lungemedicinens bredde.« ombryder stadig i to. */
.section-head { max-width: 64ch; margin-bottom: clamp(var(--s4), 5vw, var(--s5)); }
/* Brødtekst-afsnit i et sektionshoved (kun praktisk-informations #tider har
   dem) må ikke arve de 64ch: ved brødskrift blev det 76-83 tegn pr. linje.
   De beholder hovedets gamle 56ch (671 px, ca. 74 tegn). */
.section-head > p:not(.lede):not(.eyebrow) { max-width: 56ch; }
.section-head .eyebrow { margin-bottom: var(--s2); }
.section-head > h2 { margin-bottom: var(--s2); }

.grid { display: grid; gap: clamp(var(--s2), 2.4vw, var(--s4)); }
/* minmax(0, 1fr), ikke 1fr: et nøgent 1fr er minmax(auto, 1fr), så et spor
   bliver aldrig smallere end sit længste ord. På viden.html tvang rubrikken
   »Lungefunktionsundersøgelse« midterkolonnen op på 488 px og de to andre ned
   på 328/288 px, og gitteret løb 32 px ud over wrap'en (layoutgennemgang
   01-09-2026, punkt f). Med 0 som minimum er sporene ligelige, og lange
   sammensætninger i kortrubrikker deles i stedet (se .card h3 nedenfor).
   Samme form for cols-2/cols-3 i alle breakpoint-blokke nedenfor. .cols-4
   beholder BEVIDST nøgent 1fr: forsidens fire faktakolonner (#specialet, i en
   split-spalte) lever af min-content-minimummet og kollapsede med minmax(0)
   til 4 × 101 px med tekst, der løb ind i nabokolonnen (verifikation
   02-09-2026). */
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Enligt-kort-reglen (17-08) dækkede kun cols-3 og kun tablet (860px-blokken
   nedenfor); på desktop stod et ulige sidste kort i et cols-2-gitter stadig
   alene med et tomt felt ved siden af. Denne regel dækker desktop-tilfældet;
   den rammer kun gitre med ulige antal børn (viden.html, ydelser.html). */
.grid.cols-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.grid.cols-2 > .card:last-child:nth-child(odd) p { max-width: 64ch; }
/* Det enlige korts todelte indre (.card--wide) står i kort-afsnittet nedenfor,
   efter .card selv, fordi det overstyrer kortets display: flex. */

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--s4), 6vw, var(--s7));
  /* Top-justering som standard: ved ulige høje kolonner gav center store huller
     over og under den korte kolonne. Centrering bevares, hvor den klæder indholdet. */
  align-items: start;
}
.cta-card .split,
.split:has(.portrait-frame):not(.split--portrait) { align-items: center; }

/* Om os: portrættet står ved siden af navn og indledning, mens den lange
   biografi løber i fuld bredde nedenunder. Lå hele teksten i højre kolonne,
   blev den dobbelt så høj som billedet, og centreringen efterlod omkring
   350 px tom luft både over og under portrættet. */
.split--portrait { grid-template-columns: 0.72fr 1.28fr; align-items: start; }

/* Splits hvor venstre kolonne indledes med et mærkat (chip eller eyebrow).
   Mærkatet ligger i sin egen gridrække, så overskriften og højre kolonne deler
   række og faktisk flugter foroven. Lå mærkatet inde i venstre kolonne, startede
   højre kolonne ud for mærkatet og stod dermed for højt. */
.split--label { row-gap: 0; }
.split--label > .split-label { grid-column: 1; grid-row: 1; justify-self: start; }
.split--label > .split-label + *     { grid-column: 1; grid-row: 2; }
.split--label > .split-label + * + * { grid-column: 2; grid-row: 2; }
.split-label { margin-bottom: var(--s3); }
.split-label.chip { margin-bottom: var(--s2); }
/* LAY-09 (designreview 31-08-2026, etape 2, selvreview-fund 01-09-2026): på de
   tre store sygdomssider (8-9 spørgsmål) er højresporets prose markant højere
   end venstrespaltens korte "Ofte stillede spørgsmål"-h2, så den samme
   tom-flade-fejl ticketen fjerner andetsteds opstår spejlvendt i venstre spalte.
   h2-cellen deler grid-række med prose (dermed samme rækkehøjde som prose) og
   er selv kort og topjusteret, så den har plads til at hænge fast som et
   kontekst-anker, mens spørgsmålene scroller forbi — samme idé som den
   allerede stickede subnav. Scopet til #faq, så de to andre split--label-brug
   (ligevægtige spalter: "sådan henviser du", "epikriser") er upåvirkede.
   Selve eyebrow'en (række 1, kort række, intet at hænge fast i) følger ikke
   med — den er en mindre, accepteret pris for en enkel, ufarlig rettelse. */
#faq .split--label > .split-label + * {
  position: sticky;
  top: calc(var(--header-h) + 46px + 12px);
  align-self: start;
}

.stack-1 > * + * { margin-top: var(--s1); }
.stack-2 > * + * { margin-top: var(--s2); }
.stack-3 > * + * { margin-top: var(--s3); }
.stack-4 > * + * { margin-top: var(--s4); }

/* ---------- Knapper --------------------------------------------------- */
.btn {
  --btn-fg: var(--petrol);
  --btn-bg: transparent;
  --btn-bd: var(--hairline-strong);
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  /* KMP-03 (designreview 31-08-2026): huset har ingen piller. 999px var
     skabelon-default og gjorde fuldbredde-knapper til lange kapselbånd; en
     handling får nu samme kortgeometri som resten af sitet. Chips, nav-piller
     og kort-pinnens label er metadata/tags, ikke handlinger, og forbliver
     pilleformede (999px) — familien differentieres i stedet for at ensrettes. */
  border-radius: var(--radius-sm);
  padding: 15px 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-move) var(--ease),
              border-color var(--t-move) var(--ease), color var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease);
  text-align: center;
}
.btn svg { width: 18px; height: 18px; flex: none; }
/* MOT-08: kontroller trykkes, de løfter sig ikke — farve- og kantskiftet
   bærer hoveret i forvejen. */
.btn:hover { transform: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  --btn-fg: var(--on-petrol);   /* manualen: aldrig rent hvidt */
  --btn-bg: var(--terracotta-deep);
  --btn-bd: var(--terracotta-deep);
  box-shadow: 0 12px 26px -14px rgba(169,81,46,.7);
}
.btn--primary:hover { --btn-bg: var(--terracotta-deeper); --btn-bd: var(--terracotta-deeper); }

.btn--ghost { --btn-fg: var(--petrol); --btn-bg: transparent; --btn-bd: var(--hairline-strong); }
.btn--ghost:hover { --btn-bd: var(--petrol); background: color-mix(in srgb, var(--petrol) 5%, transparent); }

/* Femte rettested (A11-01, fundet ved verifikation): kanten på petrol har sin
   egen token og skal have en tilsvarende 3:1-variant, ellers er ghost-knapperne
   i de mørke bånd og i footeren stadig under kravet. */
.section--petrol .btn--ghost,
.on-petrol .btn--ghost { --btn-fg: var(--on-petrol); --btn-bd: var(--hairline-strong-on-petrol); }
.section--petrol .btn--ghost:hover,
.on-petrol .btn--ghost:hover { --btn-bd: var(--on-petrol); background: rgba(244,241,234,.06); }

.btn--lg { padding: 18px 32px; font-size: 1.04rem; }

/* tekst-link med wipe-underline. Pilen er ét CSS-tegn (mask, currentColor) på
   .link::after i stedet for en inline-SVG i hver af de 115 forekomster (KMP-04,
   designreview 31-08-2026): justeres pilens form, sker det ét sted. .link--plain
   fjerner pilen helt (mailto-/tel-/krydslinks midt i brødtekst, hvor en pil ville
   være semantisk misvisende); .link--dl bærer sin egen mask (download-pil). */
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--petrol);
  background-image: linear-gradient(var(--terracotta), var(--terracotta));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: left 100%;
  transition: background-size var(--t-move) var(--ease), gap var(--t-move) var(--ease);
  padding-bottom: 2px;
}
.link > span { flex: 1 1 auto; }
.link::after {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
  transition: transform var(--t-move) var(--ease);
}
.link:hover { background-size: 100% 1.5px; gap: 12px; }
.link:hover::after { transform: translateX(3px); }
.link--plain::after { content: none; }
.link--dl::after {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}
.section--petrol .link, .on-petrol .link { color: var(--on-petrol); }

/* MOB-05: ombrudt pilelink-etiket under 640px river pilen løs til højre
   skærmkant, fordi .link er inline-flex med span{flex:1 1 auto}. Sæt linket
   inline, så ::after-pilen selv følger sidste ord i teksten, som i et
   sætningsforløb. Touch har ingen hover, så wipe-underline/gap-transitionen
   ovenfor er irrelevante her; desktop beholder uændret flex-adfærd. */
@media (max-width: 640px) {
  .link { display: inline; }
  .link > span { display: inline; }
  .link::after { display: inline-block; vertical-align: -3px; margin-left: 6px; }
}

/* ---------- Kort ------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(var(--s3), 2.4vw, var(--s4));
  transition: background-color var(--t-move) var(--ease), border-color var(--t-move) var(--ease);
  /* Kortene strækkes til samme højde i gitteret, men indholdet gjorde ikke, så
     handlingslinjen stod i forskellig højde i kort ved siden af hinanden. */
  display: flex;
  flex-direction: column;
}
/* :not(.cta-card-foot): CTA-kortets fodnote er også et p:last-child med et
   .link, og denne regels margin-top: auto (= 0 i en flex-kolonne uden fri
   plads) slog .cta-card-foot's egen margin ud, så hårlinjen lå klos op ad
   knapperne (layoutgennemgang 01-09-2026, punkt b). */
.card > p:last-child:has(.link):not(.cta-card-foot) { margin-top: auto; padding-top: var(--s2); }
/* Kortrubrikker: lange danske sammensætninger (»Lungefunktionsundersøgelse«,
   »Anstrengelsesudløst«) er bredere end et spor i et 3-korts-gitter (277 px
   tekstbredde ved 1710 px, hvor h3 er 29,6 px), og med minmax(0, 1fr) skal
   de kunne deles i stedet for at sprænge sporet. IKKE hyphens: auto på
   desktop: under text-wrap: balance bruger Chrome enhver ordbogsdeling til at
   udligne linjerne (målt 02-09-2026: syv kortrubrikker delt, hvor ingen var
   før, fx »anstren-gelsesudløst« og »Efter / en luftvejsinfektion«), og Safari
   kender ikke hyphenate-limit-chars. I stedet bærer de rubrikker, der reelt
   kan løbe over, et blødt bindestregstegn (&shy;) på sammensætningsgrænsen i
   den danske tekst (index/ydelser/viden: »Anstrengelses&shy;udløst«, viden:
   »Lungefunktions&shy;undersøgelse«); overflow-wrap er sikkerhedsnettet, og
   mobilreglen (640px-blokken) deler fortsat automatisk. Nyt langt ord i en
   kortrubrik: sæt &shy; (kun i den danske tekst, aldrig i data-en), og lær
   i18n-hukommelsen den nye nøgle med tools/i18n-sync.py --learn. */
.card h3, .card .h3 { overflow-wrap: break-word; }
/* .card--wide (layoutgennemgang 01-09-2026, punkt a): det enlige kort, der
   spænder hele rækken i et cols-2-gitter, holdt sin brødtekst på 64ch, så to
   tredjedele af kortet stod tomt (ydelser: allergiudredning). Kortets indre
   lægges i to spor, tekstsporet 1,6 × ikonsporet (ny fordeling; .split selv
   er 1,05:0,95): række 1 er medaljonen alene som mærke, række 2 deler rubrik
   (venstre) og brødtekst (højre) med samme overkant, som .split--label gør
   det, række 3 er handlingslinket. Brødteksten holder 64ch. Forudsætter
   præcis børnene medaljon, h3, p, p.link. Kun via klassen, ikke via
   enligt-kort-selektoren i layout-afsnittet, så et fremtidigt enligt kort
   ikke får todelingen uden at bede om den. SKAL stå efter .card (display:
   flex), som den overstyrer. Spaltemellemrummet loftes på s5 (ikke s6): med
   5vw krympede tekstsporet fra 631 til 599 px på brede skærme, og det
   engelske link ombrød fra 1680 px. Linket sættes inline (som mobilreglen
   MOB-05 i 640px-blokken), så en ombrydning i det smalle spor ved 861-1090 px
   lægger pilen efter sidste ord i stedet for i sporets højre kant. Stables
   igen under 860 px, hvor kortet er for smalt til to spor. */
.card--wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  column-gap: clamp(var(--s4), 4vw, var(--s5));
  align-items: start;
}
.card--wide > .medallion { grid-column: 1; grid-row: 1; }
.card--wide > h3 { grid-column: 1; grid-row: 2; }
.card--wide > p { grid-column: 2; }
.card--wide > p:first-of-type { grid-row: 2; }
.card--wide > p + p { grid-row: 3; }
/* .card.card--wide (0,4,1): matcher specificiteten på .card > p:last-child
   :has(.link):not(.cta-card-foot) ovenfor (:has() og :not() tæller deres
   arguments specificitet med), ellers vandt dennes margin-top: auto. */
.card.card--wide > p:last-child:has(.link) { margin-top: 0; padding-top: var(--s2); }
.card--wide .link { display: inline; }
.card--wide .link > span { display: inline; }
.card--wide .link::after { display: inline-block; vertical-align: -3px; margin-left: 6px; }
/* MOT-08 (designreview 31-08-2026): løft+skygge på alt klikbart var skabelonens
   ens-hover-sprog, og løftede desuden 15 kort der ikke selv er klikbare (kun
   .link-linjen i bunden er) — kortet lovede en klikbarhed, det ikke havde.
   Flader svarer nu med TONE i stedet, jf. manualens fladeprincip: en let
   sage-hævet baggrund plus samme sage-tonede kant som før, ingen bevægelse,
   ingen skygge. Wipen på kortets egen .link forstærkes samtidig, så hele
   kortet peger mod den ene reelle handling, uden at kortet selv løfter sig. */
.card--hover:hover { background: color-mix(in srgb, var(--sage) 6%, var(--surface)); border-color: color-mix(in srgb,var(--sage) 60%, var(--hairline)); }
.card--hover:hover .link { background-size: 100% 1.5px; gap: 12px; }
.card--hover:hover .link::after { transform: translateX(3px); }
/* Citatkortet (FRV-05, designreview 31-08-2026): patientstemmen brugte samme
   hvide flade og samme terracotta-flueben som de kliniske symptomlister ved
   siden af — sage er reelt usynlig som flade på sitet i dag (kun svag
   indblanding i chips/medaljoner). En permanent, let sage-tonet flade
   adskiller citatet uden at det læses som en hover- eller klik-tilstand. */
.card--quote { background: color-mix(in srgb, var(--sage) 8%, var(--surface)); border-color: color-mix(in srgb, var(--sage) 35%, var(--hairline)); }
/* MOT-02 (designreview 31-08-2026, motionkontrakten): den tidligere regel
   ".reveal-stagger > .card" herunder er slettet. Den fandtes kun fordi
   .reveal-stagger > * satte sin egen opacity/transform-transition på hvert
   kort, som ved kildeorden vandt hele .card's transition-shorthand og fik
   tone-hoveret til at snappe i stedet for at glide. Efter MOT-02 fader
   .reveal-stagger som container, ikke dets børn — børnene bærer ingen
   reveal-transition længere, så konflikten er væk, og kortets egen
   transition ovenfor gælder uforstyrret. */
.card h3 { margin-bottom: var(--s1); }
.card p { color: color-mix(in srgb, var(--ink) 78%, var(--bone)); font-size: 1rem; line-height: 1.55; }

.section--petrol .card {
  background: color-mix(in srgb, var(--petrol-deep) 70%, transparent);
  border-color: var(--hairline-on-petrol);
}
.section--petrol .card h3 { color: var(--on-petrol); }
.section--petrol .card p { color: var(--on-petrol-muted); }
/* Dæmpet tekst blandes mod --bone (se .muted og .steps p) og bliver derfor ulæselig
   på petrol. Denne regel lukker hullet generelt, så en ny dæmpet tekst i en
   petrol-sektion ikke arver fejlen. Målt: #AFC3BC på petrol = 6,74:1. */
.section--petrol .muted,
.section--petrol .steps p,
.section--petrol .checklist,
.section--petrol figcaption,
.on-petrol .muted,
.on-petrol .steps p { color: var(--on-petrol-muted); }

/* ikon-medaljon */
.medallion {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--sage) 18%, var(--surface));
  border: 1px solid var(--hairline);
  color: var(--petrol);
  margin-bottom: var(--s2);
}
.medallion svg { width: 26px; height: 26px; stroke-width: 1.7; }
/* duotone-teknik (designreview etape 4, BIL-03): rodelementet beholder stroke i currentColor;
   .ic-tone lægger en let sage-tonet fyld på udvalgte flader, så motivet læser som tegnet, ikke støj. */
.medallion svg .ic-tone { fill: color-mix(in srgb, var(--sage) 24%, transparent); }
.section--petrol .medallion { background: rgba(244,241,234,.08); border-color: var(--hairline-on-petrol); color: var(--on-petrol); }

/* chip */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  padding: 7px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--sage) 16%, var(--surface));
  border: 1px solid var(--hairline);
  color: var(--petrol);
}

/* nøgletal */
.stat-num {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(3.4rem, 8vw, 6.5rem);
  font-weight: 420;
  line-height: .92;
  letter-spacing: -0.03em;
  color: var(--on-petrol);
}
.stat-label { color: var(--on-petrol-muted); max-width: 30ch; }
/* nøgletal som hook i kolonnen: stort tal + kort label side om side */
.stat-inline { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); }
.stat-inline .stat-num { flex: none; font-size: clamp(2.8rem, 4vw, 3.6rem); line-height: .9; }
.stat-inline .stat-label { max-width: 34ch; font-size: 1rem; max-inline-size: 34ch; }

/* faktalinje (definition rows) */
/* Sporene ligger på selve .facts, og hver række låner dem med subgrid. Så er
   dt-sporet ét og samme for alle rækker, og dd starter samme sted hele vejen ned.
   auto som minimum betyder samtidig, at sporet aldrig bliver smallere end det
   længste ord: med en fast 140px-bund løb lange sammensætninger som
   "Speciallægekonsultation" ud over sporet og hen over dd i smalle kort. */
.facts {
  display: grid;
  grid-template-columns: minmax(auto, 0.4fr) 1fr;
  border-top: 1px solid var(--hairline);
  /* Rækkerne holder deres naturlige højde (02-09-2026). Uden dette strækkes
     den korteste af to dl.facts i et gitter til naboens højde, og den ekstra
     højde fordeles INDE i rækkerne: 30 px tom flade pr. række på henvisersidens
     #diagnostik og op til 138 px på praktisk-informations #rettigheder, og i
     étspaltetilstanden (620-860 px) lander luften mellem dt og dd, så labelen
     løsriver sig fra sin tekst. Prisen er, at to spalters nederste hårlinjer
     ikke længere flugter, når indholdet er ulige højt. */
  align-content: start;
}
.facts > div {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  gap: var(--s3);
  padding-block: var(--s2);
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
/* Samme struktur som visitkortets bagside, der sætter TELEFON/ADRESSE i små
   spatierede versaler i sage-ink (build_visitkort_v2.py: AX_LABEL wght 600, SAGEINK). */
.facts dt { font-weight: 600; color: var(--sage-ink); font-size: .72rem;
            letter-spacing: .1em; text-transform: uppercase; }
/* TYP-07: beløb i .facts (fx Henvisning & betaling-kortene) skal stå på
   tabelcifre som prislistens .pricelist dd, ikke proportionale tal. */
.facts dd { color: var(--ink); font-variant-numeric: tabular-nums; }
.section--petrol .facts, .on-petrol .facts,
.section--petrol .facts > div, .on-petrol .facts > div { border-color: var(--hairline-on-petrol); }
.section--petrol .facts dt, .on-petrol .facts dt { color: var(--on-petrol); }
.section--petrol .facts dd, .on-petrol .facts dd { color: var(--on-petrol-muted); }

/* TYP-07: den live ventetid kan ikke strengerettes med hårde mellemrum (den
   hentes fra driftsstatus-endpointet og kan bestå af flere ord), så den
   holdes samlet med nowrap i stedet. */
[data-render="waittime"] { white-space: nowrap; }

/* prisliste (priser.html — genereres af build_prisliste.py i klinik-administrativt).
   Samme hårlinje-rytme som .facts: ydelse til venstre, pris i petrol til højre,
   enhed i sage-ink efter navnet og en evt. note under. Ingen tabel: rækkerne
   ombrydes naturligt på smalle skærme. */
.pricelist-wrap { max-width: 860px; margin-top: var(--s3); }
.pricelist-group + .pricelist-group { margin-top: var(--s5); }
.pricelist-group h3 { font-size: 1.15rem; margin-bottom: var(--s2); }
.pricelist-group > .muted { margin-bottom: var(--s2); max-width: 64ch; }
.pricelist { border-top: 1px solid var(--hairline); }
.pricelist > div {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--s3);
  padding-block: 10px;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.pricelist dt { color: var(--ink); }
.pricelist dt .unit { color: var(--sage-ink); font-size: .85rem; white-space: nowrap; }
.pricelist dd { color: var(--petrol); font-weight: 600; text-align: right; white-space: nowrap;
                font-variant-numeric: tabular-nums; }
.pricelist dd.text { color: var(--sage-ink); font-weight: 500; white-space: normal; max-width: 12rem; }
.pricelist .note { grid-column: 1 / -1; margin-top: 4px; color: var(--sage-ink); font-size: .88rem; max-width: 64ch;
                    font-weight: 400; text-align: left; white-space: normal; }
@media (max-width: 480px) {
  .pricelist > div { grid-template-columns: 1fr; row-gap: 2px; }
  .pricelist dd { text-align: left; }
}

/* notice / akut-boks (KMP-01, designreview 31-08-2026). Skabelonens farvede
   venstrekant er erstattet af husets hængende åndedrætsprik: en fritstående
   terracotta-cirkel der hænger over rammens overkant og gennembryder hairlinen,
   samme luftspalte som i logo-mærket (box-shadow-ringen i sektionens egen
   baggrundsfarve). .notice--akut er familiens anden rolle: de callouts der
   advarer (kontakt læge/112) beholder et kraftigt terracotta-signal, så alarm
   og tip ikke bliver lige stille (dommer 2's indvending, vedtaget). */
.notice {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--s3);
  background: var(--surface);
}
.notice::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--s3);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 5px var(--bone);
}
.notice strong { color: var(--petrol); }
.section--stone .notice::before { box-shadow: 0 0 0 5px var(--stone); }
.section--petrol .notice { background: rgba(244,241,234,.06); border-color: var(--hairline-on-petrol); }
.section--petrol .notice::before { box-shadow: 0 0 0 5px var(--petrol); }
.section--petrol .notice strong { color: var(--on-petrol); }

.notice--akut {
  border-color: var(--terracotta);
  background: color-mix(in srgb, var(--terracotta) 5%, var(--surface));
}
.notice--akut::before {
  width: 14px;
  height: 14px;
  background: var(--terracotta-deep);
  box-shadow: 0 0 0 4px var(--bone), 0 0 0 6px var(--terracotta);
}
.section--stone .notice--akut { background: color-mix(in srgb, var(--terracotta) 5%, var(--stone)); }
.section--stone .notice--akut::before { box-shadow: 0 0 0 4px var(--stone), 0 0 0 6px var(--terracotta); }
.section--petrol .notice--akut { background: color-mix(in srgb, var(--terracotta) 10%, rgba(244,241,234,.06)); border-color: var(--terracotta); }
.section--petrol .notice--akut::before { box-shadow: 0 0 0 4px var(--petrol), 0 0 0 6px var(--terracotta); }
/* luft mellem kort-gitter (eller en split) og efterstillet note/akut-boks i
   en sektion; splitten kom til 02-09-2026 med henvisersidens #udredning */
.section .wrap > .grid + .notice,
.section .wrap > .split + .notice { margin-top: clamp(var(--s4), 5vw, var(--s5)); }
/* Afsnit i en notice i fuld bredde (henvisersidens »Det varetager klinikken
   ikke«, vidensidernes callouts) løb ellers 1102 px = ca. 126 tegn ud; samme
   loft som frie .muted-afsnit og .prose (64ch = 767 px = ca. 85 tegn ved
   19 px, husets prosamål, ikke lede'ns 75). Lister og rubrikker røres ikke,
   og i en split-spalte er loftet uden virkning (spalten er smallere). */
.notice > p { max-width: 64ch; }
.section .wrap > .grid + .muted { margin-top: var(--s4); }
.section .wrap > .muted + .notice { margin-top: var(--s3); }
/* to-lags ydelses-grupper: luft mellem en gruppe-label (eyebrow) og det forrige grid */
.section .wrap > .grid + .eyebrow { margin-top: clamp(var(--s4), 5vw, var(--s5)); }
.section .wrap > .eyebrow + .grid { margin-top: var(--s2); }

/* nummereret trin */
/* padding-left: 0 nulstiller browserens punkt-indryk. Både .steps og .checklist
   sætter deres eget maerke absolut i li'ets venstre kant, så de 40px skubbede hele
   listen ind i forhold til overskriften over den. */
.steps { counter-reset: step; padding-left: 0; }
.steps > li {
  list-style: none;
  position: relative;
  padding-left: 64px;
  min-height: 44px;
}
.steps > li + li { margin-top: var(--s3); }
.steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--hairline);
  font-family: var(--serif); font-size: 1.2rem; color: var(--petrol);
  background: var(--surface);
}
.steps h3 { margin-bottom: 4px; }
.steps p { color: color-mix(in srgb, var(--ink) 74%, var(--bone)); font-size: 1rem; }
/* NB: overstyres på petrol af reglen ved .section--petrol .card p ovenfor. */
/* KMP-14 (designreview 31-08-2026, landet etape 3, 01-09-2026): gitter-variant af
   .steps' konturcirkel-med-serif-tal, til et .grid.cols-3 af .card i stedet for en
   <ol>-liste. Samme anatomi (44px cirkel, hairline-kant, --serif, petrol) som
   .steps > li::before, men som et almindeligt flex-first-child (kortet er selv
   display:flex;flex-direction:column) i stedet for absolut positioneret ved siden
   af teksten — der er ikke plads til en sideplaceret cirkel i et smalt gitterkort.
   Erstatter råtekst-tal i selve h3-strengen ("1. Sygehistorie ..."). */
.grid--steps { counter-reset: gridstep; }
.grid--steps > .card::before {
  counter-increment: gridstep;
  content: counter(gridstep);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--hairline);
  font-family: var(--serif); font-size: 1.2rem; color: var(--petrol);
  background: var(--surface);
  margin-bottom: var(--s2);
}

/* tjekliste */
.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 34px; }
.checklist li + li { margin-top: 12px; }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: .35em;
  width: 18px; height: 18px;
  background: no-repeat center / 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8663E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
/* .checklist--cols (layoutgennemgang 01-09-2026, punkt h): en kort tjekliste
   i en boks, der spænder hele wrap'en (henvisersidens »Det varetager klinikken
   ikke«, fem punkter), sættes i to balancerede spalter, så boksen ikke bliver
   en høj, smal søjle med tom flade til højre. Punkterne holder rækkefølgen
   (spalte 1 læses før spalte 2), intet punkt deles over spalteskiftet, og
   luften mellem punkter ligger som padding-bottom (ikke margin-top), så
   spalte 2 flugter med spalte 1 foroven. Stables igen under 860 px. De 12 px
   er .checklist's egen punktafstand (li + li ovenfor), ikke et token. Den
   negative bundmargen æder den højeste spaltes sidste padding-bottom, så
   det efterfølgende afsnit holder stack-2-rytmen (16 px, ikke 28); en
   li:last-child-regel duer ikke, for ved 1000-1100 px er spalte 1 den
   højeste, og dens sidste punkt er ikke listens sidste. */
.checklist--cols { columns: 2; column-gap: var(--s5); margin-bottom: -12px; }
.checklist--cols li { break-inside: avoid; padding-bottom: 12px; }
.checklist--cols li + li { margin-top: 0; }
/* Udelukkelses-/afgrænsningslister (fx kontraindikationer): det bekræftende
   terracotta-flueben erstattes af en neutral, dæmpet streg i sage, så listen
   ikke kan læses som anbefalinger. */
.checklist--neutral li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E988E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
/* Patientcitater (FRV-05, designreview 31-08-2026): et førstepersons-citat er
   ikke en bekræftende liste, og terracotta-fluebenet læses som "godkendt"
   foran det. Erstattes af husets dæmpede prik (jf. manualens prik-bullets og
   byline-slutmærket ovenfor), men i sage-ink, ikke sage: sage selv måler kun
   ca. 2,8:1 på citatkortets nye sage-tonede flade herunder, under WCAG
   1.4.11's 3:1-krav til grafiske indikatorer; sage-ink måler ca. 5,1:1 dér. */
.checklist--quote li::before {
  background-image: none;
  width: 8px; height: 8px;
  left: 5px; top: .6em;
  border-radius: 50%;
  background-color: var(--sage-ink);
}

/* ---------- Header ---------------------------------------------------- */
.skip-link {
  position: absolute; left: 16px; top: -60px;
  background: var(--petrol); color: var(--on-petrol);
  padding: 10px 16px; border-radius: var(--radius-xs); z-index: 200;
  transition: top var(--t-tap) var(--ease);
}
.skip-link:focus { top: 12px; }

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  min-height: var(--header-h);
  display: flex; align-items: center;
  /* Reserve før color-mix(): uden den bliver headeren gennemsigtig i ældre
     browsere, og teksten lander oven på sidens indhold. */
  background: var(--bone);
  background: color-mix(in srgb, var(--bone) 78%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-move) var(--ease), background-color var(--t-move) var(--ease), height var(--t-move) var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--hairline); background: color-mix(in srgb, var(--bone) 90%, transparent); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s2); width: 100%; }

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand .mark { width: 34px; height: 34px; color: var(--petrol); flex: none; }
.mark .accent { fill: var(--terracotta); stroke: var(--terracotta); }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name b { font-family: var(--serif); font-weight: 520; font-size: 1.18rem; letter-spacing: -.01em; color: var(--petrol); }
/* Det engelske ordmærke ("Walsted Lung Clinic") er bredere end det danske og
   brød over to linjer fra 1261 px. En anelse mindre skrift på engelsk giver
   plads uden at ændre det danske og uden at forkorte menupunkterne. */
html[lang="en"] .brand-name b { font-size: 1.06rem; white-space: nowrap; }
.brand-name span { font-size: .72rem; font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--sage-ink); margin-top: 4px; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  font-size: .92rem; font-weight: 500; color: var(--ink); white-space: nowrap;
  padding: 8px 12px; border-radius: 999px;
  transition: color var(--t-tap) var(--ease), background-color var(--t-tap) var(--ease); position: relative;}
.nav a:hover { color: var(--petrol); background: color-mix(in srgb, var(--petrol) 7%, transparent); }
.nav a[aria-current="page"] { color: var(--petrol); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; background: var(--terracotta); border-radius: 2px;
}

.header-actions { display: flex; align-items: center; gap: var(--s2); }

/* sprogskifte. KMP-03: følger .btn fra pille til --radius-sm for samhørighed
   i header-actions (den står lige ved siden af hamburgeren, der allerede har
   kortgeometri). A11-01: kanten skærpes til --hairline-strong (3:1). */
.lang-toggle { display: inline-flex; border: 1.5px solid var(--hairline-strong); border-radius: var(--radius-sm); padding: 3px; background: color-mix(in srgb,var(--surface) 70%, transparent); }
.lang-toggle button {
  font: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  border: 0; background: transparent; color: var(--sage-ink);
  padding: 6px 12px; border-radius: var(--radius-xs); cursor: pointer; line-height: 1;
  transition: background-color var(--t-tap) var(--ease), color var(--t-tap) var(--ease);
}
.lang-toggle button[aria-pressed="true"] { background: var(--petrol); color: var(--on-petrol); }

/* hamburger. A11-01: samme 3:1-kant som de øvrige kontroller. */
.nav-toggle { display: none; width: 46px; height: 46px; border: 1.5px solid var(--hairline-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: var(--petrol);
  transform: translate(-50%,-50%); transition: transform var(--t-move) var(--ease), opacity var(--t-move) var(--ease);
}
.nav-toggle span::before { transform: translate(-50%,-8px); }
.nav-toggle span::after { transform: translate(-50%,6px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translate(-50%,-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translate(-50%,-50%) rotate(-45deg); }

/* ---------- Mobilmenu ------------------------------------------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bone);
  padding: calc(var(--header-h) + var(--s3)) var(--gutter) var(--s4);
  /* Samme udskærings-kompensation som .wrap; fuldskærmsmenuen kan i landskab
     ligge lige op ad notchen. Skrevet EFTER shorthanden ovenfor. */
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: var(--s2);
  transform: translateY(-8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y: auto;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.mobile-menu a.m-link {
  font-family: var(--serif); font-size: 1.9rem; color: var(--petrol);
  padding-block: 10px; border-bottom: 1px solid var(--hairline);
}
/* Aktiv side i mobilmenuen: alle m-links er petrol, så markeringen må ikke være
   farve alene — fed vægt + terracotta-understregning. */
.mobile-menu a.m-link[aria-current="page"] {
  font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--terracotta);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.mobile-menu .btn { margin-top: var(--s2); justify-content: center; }
/* Sprogvælgeren må ikke strækkes af kolonne-flex'ens stretch — krymp til indhold, venstrestil. */
.mobile-menu .lang-toggle { align-self: flex-start; margin-top: var(--s2); }
/* MOB-04: kontakt-foden efter bookingknappen. Menuen fylder allerede
   viewporten på almindelige telefoner (verifikationens forbehold); frem for
   at ankre foden med margin-top: auto (som ville kræve rul i forvejen og
   strammet lodret budget), accepteres det som udgangspunkt at foden ligger
   nederst i den rullende menu (.mobile-menu har allerede overflow-y: auto). */
.mobile-menu .menu-contact { margin-top: var(--s3); flex: none; width: 100%; }
body.menu-open { overflow: hidden; }

/* ---------- Hero ------------------------------------------------------ */
.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex; align-items: center;
  padding-top: calc(var(--header-h) + var(--s4));
  padding-bottom: var(--s5);
  overflow: hidden;
}
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: var(--s4); align-items: center; }
.hero h1 { margin-block: var(--s3) var(--s3); }
.hero .lede { margin-bottom: var(--s4); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-meta { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }

.hero-copy { position: relative; z-index: 2; }   /* tekst over orbens glød → god kontrast */
.hero-visual { position: relative; z-index: 1; display: grid; place-items: center; min-height: min(72vw, 380px); }

/* baggrunds-luftstrømme */
.airflow-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 50%);
  mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 50%); }
.airflow-bg svg { width: 100%; height: 100%; }
.airflow-bg path { fill: none; stroke: var(--sage); stroke-width: 1; opacity: .35; }

/* driftsbesked-banner — pladsholderen findes ALTID (bygget af buildHeader i
   site.js), kollapset til 0 højde/margin/opacity, så den ikke optager synlig
   plads eller efterlader et tomrum, når der ingen driftsbesked er. Kommer der
   én (initDriftsstatus i site.js), tilføjes .is-visible, og banneret glider
   ind via max-height/opacity/margin-top i stedet for at springe direkte til
   fuld højde (undgår det pludselige layout-skift ved indsættelse). En rigtig
   nul-CLS ville kræve at pladsen var reserveret synligt hele tiden, hvilket
   netop er det, denne pladsholder er bygget for at UNDGÅ — se ticket-rapport
   for afvejningen. */
.driftsbanner {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  background: var(--stone);
  border-bottom: 0 solid var(--hairline);
  transition: max-height .32s cubic-bezier(.22,1,.36,1), opacity .32s cubic-bezier(.22,1,.36,1), margin-top .32s cubic-bezier(.22,1,.36,1);
}
.driftsbanner.is-visible { max-height: 200px; opacity: 1; margin-top: var(--header-h); border-bottom-width: 1px; }
.driftsbanner .wrap { padding-block: 12px; }
.driftsbanner span { display: inline-flex; align-items: baseline; gap: 9px; font-size: .96rem; font-weight: 500; color: var(--ink); }
.driftsbanner span::before { content: ""; flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); }
body.has-driftsbanner .hero { padding-top: var(--s4); }
/* .page-hero regner selv header-højden med i sin padding-top. Står driftsbanneret
   over den, tælles højden to gange og giver 66-170 px død luft på undersiderne. */
body.has-driftsbanner .page-hero { padding-top: clamp(var(--s4), 8vw, var(--s6)); }

/* flow-volume-loop — fagligt motiv i ydelses-/undersøgelsessektionen */
.fv-figure { max-width: 380px; margin: var(--s4) auto 0; }
.fv-figure svg { width: 100%; height: auto; aspect-ratio: 416 / 306; overflow: visible; }
.fv-figure figcaption { margin-top: var(--s2); text-align: center; font-size: .92rem; line-height: 1.5; color: var(--sage-ink); }
.fv-figure .fv-axis line { stroke: var(--sage); }
.fv-figure .fv-loop { fill: none; stroke: var(--petrol); }
/* stregsegmenter starter skjult og tegnes via JS (stroke-dashoffset) */
.fv-figure .fv-rise, .fv-figure .fv-desc, .fv-figure .fv-insp { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.fv-figure .accent { fill: var(--terracotta); }
.fv-figure .fv-label { fill: var(--sage); font-family: var(--sans); letter-spacing: .04em; }

/* ---------- Hero: åndedræts-mærke (lys) ------------------------------- */
/* Klinikkens logo-mærke der trækker vejret. Animerer transform/opacity/filter
   samt fill (lunge-iltning) og stroke-dashoffset (luft-puls) — billigt for de få
   elementer. ALT er scopet til .mark-wrap, så header/footer-mærket IKKE påvirkes.
   Keyframes namespaced (mark-*). Brand-farver = tokens (color-mix til alpha);
   de varme ilt/luft-højlys er faste highlight-farver fra den godkendte reference. */
.mark-wrap { position: relative; width: min(60vw, 270px); aspect-ratio: 1; display: grid; place-items: center; isolation: isolate; }
.m-bloom {
  position: absolute; left: 50%; top: 50%; width: 180%; aspect-ratio: 1; z-index: -1;
  transform: translate(-50%, -50%); border-radius: 50%; filter: blur(64px); pointer-events: none;
  background: radial-gradient(circle at 50% 46%,
    color-mix(in srgb, var(--terracotta) 50%, transparent),
    color-mix(in srgb, var(--sage) 32%, transparent) 44%, transparent 66%);
  animation: mark-bloom 11s cubic-bezier(.4,0,.35,1) infinite;
}
.m-drift {
  position: absolute; inset: -22%; border-radius: 50%; filter: blur(26px); opacity: .55;
  mix-blend-mode: soft-light; pointer-events: none;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--sage) 50%, transparent),
    color-mix(in srgb, var(--terracotta) 55%, transparent),
    color-mix(in srgb, var(--petrol) 50%, transparent),
    color-mix(in srgb, var(--terracotta-deep) 45%, transparent),
    color-mix(in srgb, var(--sage) 50%, transparent));
  animation: mark-spin 42s linear infinite;
}
.m-aura {
  position: absolute; inset: -15%; border-radius: 50%; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--terracotta) 40%, transparent);
  animation: mark-aura 11s cubic-bezier(.4,0,.35,1) infinite;
}
.m-aura.two { inset: -5%; border-color: color-mix(in srgb, var(--petrol) 12%, transparent); animation-duration: 11.4s; }
.mark-wrap svg.mark { position: relative; width: 100%; height: 100%; overflow: visible; color: var(--petrol); }
.mark-wrap .lung { transform-box: fill-box; animation: mark-lung 11s cubic-bezier(.4,0,.35,1) infinite; }
.mark-wrap .lung.left  { transform-origin: 95% 40%; }
.mark-wrap .lung.right { transform-origin: 5% 40%; }
.mark-wrap .airway { fill: none; stroke: currentColor; stroke-linecap: round; }
.mark-wrap .airway-glow { fill: none; stroke: #eda06a; stroke-width: 3.8; stroke-linecap: round; filter: blur(1.3px); opacity: .12; animation: mark-glow 11s cubic-bezier(.4,0,.35,1) infinite; }
.mark-wrap .accent { fill: var(--terracotta); transform-box: fill-box; transform-origin: center; animation: mark-dot 11s cubic-bezier(.4,0,.35,1) infinite; }

/* Vejrtrækning: hurtigere ind, langsommere ud. mark-* namespaced. */
@keyframes mark-lung { 0% { transform: scale(1); fill: var(--petrol); animation-timing-function: cubic-bezier(.33,0,.12,1); } 34% { transform: scale(1.13); fill: #2f6f62; } 44% { transform: scale(1.13); fill: #2f6f62; animation-timing-function: cubic-bezier(.55,0,.5,1); } 100% { transform: scale(1); fill: var(--petrol); } }
@keyframes mark-glow { 0% { opacity: .1; animation-timing-function: cubic-bezier(.33,0,.12,1); } 34% { opacity: .95; } 44% { opacity: .85; animation-timing-function: cubic-bezier(.55,0,.5,1); } 100% { opacity: .1; } }
@keyframes mark-dot { 0% { opacity: .45; transform: scale(.8); animation-timing-function: cubic-bezier(.33,0,.12,1); } 34% { opacity: 1; transform: scale(1.22); } 44% { opacity: 1; animation-timing-function: cubic-bezier(.55,0,.5,1); } 100% { opacity: .45; transform: scale(.8); } }
@keyframes mark-bloom { 0% { transform: translate(-50%,-50%) scale(.82); opacity: .4; animation-timing-function: cubic-bezier(.33,0,.12,1); } 33% { transform: translate(-50%,-50%) scale(1.12); opacity: .62; } 44% { transform: translate(-50%,-50%) scale(1.12); opacity: .62; animation-timing-function: cubic-bezier(.55,0,.5,1); } 100% { transform: translate(-50%,-50%) scale(.82); opacity: .4; } }
@keyframes mark-aura { 0% { transform: scale(.9); opacity: 0; animation-timing-function: cubic-bezier(.33,0,.12,1); } 40% { transform: scale(1.16); opacity: .4; } 100% { transform: scale(.9); opacity: 0; } }
@keyframes mark-spin { to { transform: rotate(360deg); } }

/* Diskret fuldbleed grain over hero'en (feTurbulence som data-URI; CSP-sikkert) */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* analyselag — afledte mål foldes ud (forskudt) efter kurven er tegnet */
.fv-analysis .an { opacity: 0; transition-property: opacity, stroke-dashoffset; transition-duration: .5s, .65s; transition-timing-function: var(--ease); }
.fv-analysis .mark { stroke: var(--sage); stroke-width: 1; stroke-dasharray: 210; stroke-dashoffset: 210; }
.fv-analysis .fev { stroke: var(--terracotta); }
.fv-analysis .tag { fill: var(--petrol); font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .02em; }
.fv-analysis .tag .num { font-size: 7px; }
.fv-analysis .tag.key { fill: var(--terracotta); }
.fv-analysis .key-leader { stroke: var(--terracotta); stroke-width: 1; }
.fv-analysis .key-dot { fill: var(--terracotta); }
.fv-analysis .bracket { fill: none; stroke: var(--sage); stroke-width: 1; }
.fv-analysis .blabel { fill: var(--sage); font-family: var(--sans); font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.fv-analysis.show .an { opacity: 1; }
.fv-analysis.show .mark { stroke-dashoffset: 0; }
.fv-analysis.show .d1 { transition-delay: .05s; }
.fv-analysis.show .d2 { transition-delay: .14s; }
.fv-analysis.show .d3 { transition-delay: .23s; }
.fv-analysis.show .d4 { transition-delay: .32s; }
.fv-analysis.show .d5 { transition-delay: .41s; }
.fv-analysis.show .d6 { transition-delay: .50s; }
.fv-analysis.show .d7 { transition-delay: .59s; }
.fv-analysis.show .d8 { transition-delay: .68s; }
.fv-analysis.show .d9 { transition-delay: .77s; }

/* portræt-pladsholder */
.portrait-frame {
  position: relative; aspect-ratio: 4 / 5;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: linear-gradient(155deg, var(--surface), var(--stone));
  display: grid; place-items: center; overflow: hidden;
}
.portrait-mono { font-family: var(--serif); font-weight: 420; font-size: clamp(4rem, 11vw, 7rem); letter-spacing: -.03em; line-height: 1; color: color-mix(in srgb, var(--petrol) 34%, var(--stone)); }  /* 20 % var reelt usynligt (1,64:1). Monogrammet er dekorativt (aria-hidden, navnet står under), så kravet er ikke 4,5 — men det skal kunne ses. */
.portrait-note { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-ink); }
/* portrætfoto udfylder rammen; pladsholder (mono/note) vises kun hvis billedet mangler */
.portrait-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.portrait-frame .portrait-mono, .portrait-frame .portrait-note { display: none; }
.portrait-frame.no-photo .portrait-img { display: none; }
.portrait-frame.no-photo .portrait-mono { display: block; }
.portrait-frame.no-photo .portrait-note { display: block; }

/* Team (Om os): sygeplejerskerne præsenteres under lægen — mindre og sekundært */
.team { margin-top: clamp(var(--s5), 6vw, var(--s6)); }
.team > .section-head { margin-bottom: clamp(var(--s3), 3vw, var(--s4)); }
/* BIL-10a: manualens portrætformat er 4:5 på tværs af sitet (.portrait-frame,
   se ovenfor); teamvarianten stod på 1:1 og modsagde dermed sin egen
   indsættelsesanvisning. Ret KUN her — .portrait-frame selv er allerede 4:5. */
.member-photo { aspect-ratio: 4 / 5; margin-bottom: var(--s2); }
.member-photo .portrait-mono { font-size: clamp(2.2rem, 6vw, 3rem); }
.member-name { font-size: 1.15rem; margin: 0 0 2px; }
.member-role { color: var(--sage-ink); font-weight: 600; font-size: .92rem; margin: 0; }
.member-bio { margin-top: var(--s1); }

/* Portal-stak: de tre (evt. dæmpede) portal-indgange fylder hver sin række,
   men de to fungerende alternativer i afventer-tilstanden (Ring, Kontakt &
   find vej — ingen is-disabled, kendes på deres href) deler én række via
   attributselektorer på markup, site.js allerede genererer. Ved aktiv portal
   findes de to alternativer slet ikke, og layoutet falder automatisk
   tilbage til tre fulde rækker. */
.portal-actions { display: flex; flex-wrap: wrap; flex-direction: row; gap: 12px; max-width: 560px; }
.portal-actions .btn { flex: 1 1 100%; justify-content: flex-start; }
.portal-actions .btn[href^="tel:"], .portal-actions .btn[href$="kontakt.html"] { flex: 1 1 calc(50% - 6px); justify-content: center; }
@media (max-width: 480px) {
  .portal-actions .btn { flex-basis: 100%; }
}
/* MOB-07: de to fungerende alternativer (Ring, Kontakt & find vej — uden
   is-disabled) foran de dæmpede portal-knapper på mobil, hvor stakken ellers
   åbner med tre døde knapper. BEVIDST MIDLERTIDIG: reglen rydder op efter sig
   selv, når portalen aktiveres (CONFIG.portal mister id=999999) — alle
   knapper mister da is-disabled, får samme order og består i deres
   oprindelige rækkefølge. Fjern reglen når afventer-tilstanden selv fjernes. */
@media (max-width: 620px) {
  .portal-actions .btn:not(.is-disabled) { order: -1; }
}

/* Portal-afventer-tilstand (CONFIG.portal med pladsholder-id 999999, se site.js):
   portal-knapper/-links renderes uden href og dæmpes; en lille tosproget
   .portal-note vises ved booking-knapperne (hero + portal-actions). */
/* En nedtonet primærknap ligner stadig sidens primære handling. En deaktiveret
   kontrol skal se inaktiv ud, ikke bare svag. */
.btn.is-disabled, a.is-disabled { pointer-events: none; }
.btn.is-disabled {
  background: transparent; color: var(--sage-ink);
  border: 1px dashed var(--hairline); box-shadow: none;
}
.on-petrol .btn.is-disabled, .section--petrol .btn.is-disabled {
  color: var(--on-petrol-muted); border-color: var(--hairline-on-petrol);
}
a.is-disabled:not(.btn) { opacity: .55; }
.portal-note { flex-basis: 100%; width: 100%; margin: 6px 0 0; font-size: .88rem; line-height: 1.45; color: var(--sage-ink); }
.on-petrol .portal-note, .section--petrol .portal-note { color: var(--sage-soft); }

/* CTA-række under sektioner. Spaltemellemrum s3 (24 px), ikke s4: forsidens
   tre links måler 384 + 401 + 295 px og manglede 8 px i at gå på én linje i
   wrap'ens 1152 px med 40 px-mellemrum, så det tredje link faldt ned alene
   under tre kolonner med rigelig plads (layoutgennemgang 01-09-2026,
   punkt d). Med 24 px står de tre på én linje fra 1257 px viewport (målt;
   ved 1257-1260 px kan et hover, der åbner link-gap'et 4 px, kortvarigt
   skubbe det tredje link ned). De engelske labels er 47 px for lange og
   ombryder fortsat 2+1: en tekstbeslutning, ikke CSS. */
.cta-row { margin-top: clamp(var(--s3), 3vw, var(--s4)); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: flex-start; }

/* CTA-kort */
.cta-card .split { align-items: center; gap: clamp(var(--s3), 4vw, var(--s5)); }
.cta-card-foot { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--hairline); }
.cta-card-foot .link { white-space: nowrap; }

/* AIT-01 (designreview 31-08-2026): stille CTA-afslutning for artikelfamilien.
   Samme cta-card-markup og portal-mekanik som den kommercielle variant, kun
   rammen forsvinder — en hairline-afdeling i onepagerens sprog i stedet for
   endnu et hvidt kort. Sitet havde de facto allerede dette udtryk på priser
   og kontakt (portalstakken direkte på fladen); her formaliseres det som en
   navngiven variant af selve cta-card-komponenten, uden at ændre markup,
   knapper eller portal-mekanikken. */
.cta-card--quiet {
  background: transparent;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--hairline);
  padding: clamp(var(--s4), 4vw, var(--s5)) 0 0;
}

/* FRV-06 (designreview 31-08-2026): petrol-plakatfinalen for de kommercielle
   sider uden allerede eget petrol-moment (om-os, viden, praktisk-information
   — index/ydelser/atleter beholder deres eksisterende petrol-bånd som deres
   ene mørke moment i stedet, jf. "højst ét petrol-moment pr. side"). Trykkets
   mest markante greb (visitkortforside, social-preview, foredragstitelside)
   overført til webbet: on-petrol på samme element genbruger de eksisterende
   regler for muted/link/btn--ghost/portal-note/is-disabled (se dem ved deres
   respektive .on-petrol-selektorer); her tilføjes kun det nye — selve
   petrol-fladen, centreret layout, den fritstående åndedrætsprik (samme greb
   som 404-heroet, RND-04) og en kort terracotta-accentregel under rubrikken.
   Trykreglen for petrol-flader: ingen kant, ingen skygge. */
.cta-card--petrol {
  background: var(--petrol);
  border: none;
  box-shadow: none;
  text-align: center;
}
.cta-card--petrol::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terracotta);
  margin: 0 auto var(--s3);
}
/* .cta-card--petrol.cta-card (ikke bare .cta-card--petrol) for at matche
   specificiteten af .section--petrol .cta-card h2 (styles.css, weight 540) —
   selvreview-fund: uden det ville den regel vinde over 620, hvis kortet en
   dag lander inde i et rigtigt petrol-bånd (i dag sker det ikke, kortet
   sidder i section--stone, men reglen bør ikke være skrøbelig over for det). */
.cta-card--petrol.cta-card h2 {
  color: var(--on-petrol);
  font-weight: 620; /* vægttrappens loft (TYP-01/h4), genbrugt her og ikke andre
                        steder til rubrikken — plakatfinalens "tunge Fraunces-pol"
                        (ticketteksten), uden at overskride den subsettede fils
                        wght-loft på 620 (SUBSET.md). */
  position: relative;
  padding-bottom: var(--s3);
}
/* Forsvar mod en almindelig <p> uden .muted i splittet: uden en eksplicit
   farve ville den arve .card p's mørke, næsten usort tone (~1,5:1 på petrol).
   Al brødtekst i kortet skal læse som dæmpet ligesom resten af petrol-sproget. */
.cta-card--petrol p { color: var(--on-petrol-muted); }
.cta-card--petrol h2::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 48px; height: 2px;
  background: var(--terracotta);
}
.cta-card--petrol .split { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.cta-card--petrol .portal-actions { justify-content: center; }
/* Selvreview-fund: .cta-card-foot bruges ikke på de tre nuværende plakatsider,
   men er en søster til .split (arver ikke dens centrering) og dens lyse
   --hairline-kant ville stå næsten usynlig på petrol. Forsvar mod at mønstret
   genbruges her senere uden at nogen husker at rette det. */
.cta-card--petrol .cta-card-foot { text-align: center; border-top-color: var(--hairline-strong-on-petrol); }

/* ---------- Footer ---------------------------------------------------- */
.site-footer { background: var(--petrol-deep); color: var(--on-petrol); padding-block: var(--s5) var(--s4); }
.site-footer a { color: var(--on-petrol-muted); transition: color var(--t-tap) var(--ease); }
.site-footer a:hover { color: var(--on-petrol); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--hairline-on-petrol); }
.footer-col h4 { color: var(--on-petrol); font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s2); }
.footer-col ul { list-style: none; padding-left: 0; } /* browserens 40px punkt-indryk: listerne stod rykket ind under kolonneoverskriften */
.footer-col li + li { margin-top: 10px; }
/* MOB-06: usynlig tap-flade på footerens links (padding-block med modsvarende
   negativ margin), så touch-målene bliver mindst 35 px uden nogen visuel
   ændring af linjeafstanden. Gælder også facts-kolonnens tel:/mailto:-links. */
.footer-top a { display: inline-block; padding-block: 4px; margin-block: -4px; }
.footer-brand .mark { width: 40px; height: 40px; color: var(--on-petrol); }
.footer-brand .mark .accent { stroke: var(--terracotta); }
/* SML-05a: indgangsskiltets lockup — mærke, lodret hairline, navnetræk i
   serif ombrudt over to linjer (site.js: lockupLine1/2). Erstatter den
   tidligere blotte MARK som eneste brand-element i footeren. */
.footer-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: var(--s2); }
.footer-lockup .mark { margin: 0; } /* .footer-brand .mark's margin-bottom gjaldt kun MARK som soloelement */
.footer-lockup-name {
  display: flex; flex-direction: column; line-height: 1.18;
  font-family: var(--serif); font-weight: 520; font-size: 1.05rem; letter-spacing: -.005em;
  color: var(--on-petrol); border-left: 1px solid var(--hairline-on-petrol); padding-left: 14px;
}
.footer-brand p { color: var(--on-petrol-muted); font-size: .98rem; max-width: 34ch; }
/* SML-05b: kontaktkolonnen som visitkortbagsidens labelrækker (dl.facts,
   .on-petrol-varianten ovenfor). footer-contact-klassen bruges kun af
   MOB-06's mobillayout nedenfor, den styler intet i sig selv her. */
.footer-contact .facts { margin-top: 2px; }
/* .footer-top a's usynlige tap-flade (padding-block:4px/margin-block:-4px,
   se ovenfor) ville ellers bide sig ind i den efterfølgende muted-linje, når
   et link og en note kun er adskilt af <br> uden mellemrum (e-mail-rækken).
   Lidt luft over noten holder tap-fladen fra at overlappe synlig tekst. */
.footer-contact .facts dd .muted { display: block; margin-top: 3px; }
/* SML-08a: koordinatlinjen skal ikke ombryde midt i tallet på smalle skærme. */
.geo { white-space: nowrap; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between; align-items: center; padding-top: var(--s4); }
.footer-bottom .legal { color: var(--on-petrol-muted); font-size: .85rem; display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* Ingen max-width: 60ch her. Linjen er kort nok til at stå på én linje og
   flugte med copyright-linjen ovenfor; 60ch tvang et unødigt ombrud midt i
   sætningen på brede skærme. Den ombryder stadig af sig selv, når footeren
   bliver smallere end teksten. */
.footer-disclaimer { font-size: .82rem; color: var(--on-petrol-muted); }
/* Akut-boksen ligger som eget fuldbredde-bånd under kolonnerne. I den smalle
   kontaktkolonne brød den over syv linjer og tyngede footeren i højre side. */
.footer-akut { margin-top: var(--s4); background: rgba(244,241,234,.05); border: 1px solid var(--hairline-on-petrol); border-radius: var(--radius-sm); padding: var(--s2) var(--s3); }
.footer-akut p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: .92rem; }
.footer-akut b { color: var(--on-petrol); white-space: nowrap; }
.footer-akut .em { color: var(--on-petrol); font-weight: 700; } /* rå terracotta er under AA på petrol — hvid som .footer-akut b */

/* ---------- Undersider: page-hero, prose, subnav, kort --------------- */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(var(--s4), 8vw, var(--s6)));
  padding-bottom: clamp(var(--s4), 6vw, var(--s6));
  position: relative;
}
.page-hero .eyebrow { margin-bottom: var(--s2); }
/* Målet 22ch (889 px ved 64 px), før 18ch (727 px): ydelsers 93 tegn lange h1
   brød i fem linjer, lungefunktionsundersøgelsens i tre (layoutgennemgang
   01-09-2026, punkt e). Ved 22ch bliver de tre og to; ingen anden hero-h1
   får en ny ombrydning ud over »Det praktiske, samlet ét sted.«, der går på
   én linje (»Astmamedicin og antidoping (TUE).« er 952 px og bliver på to).
   Størrelse og vægt er urørt (hero-elegancen). Lede'ns egen særregel (52ch)
   er udgået: .lede's 54ch gælder også her. */
.page-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); letter-spacing: -.024em; margin-bottom: var(--s3); max-width: 22ch; }
.page-hero .crumbs { margin-bottom: var(--s3); font-size: .85rem; color: var(--sage-ink); display: flex; gap: 8px; align-items: center; }
.page-hero .crumbs a:hover { color: var(--petrol); }
.page-hero .hero-cta { margin-top: clamp(var(--s3), 3vw, var(--s4)); }
.page-hero .hero-cta + .muted { margin-top: var(--s3); }
/* LAY-12 (designreview 31-08-2026, etape 2): begrebs-facts løftet op i heroens
   tomme højre halvdel på de tre store sygdomssider (EILO/EIB/DV). Uden dette
   løftes dl.facts' øverste hårlinje ikke i niveau med h1-baseline.
   Navngivet klasse i stedet for `.page-hero .split .facts` (selvreview-fund
   01-09-2026): en ren strukturselektor ville også rammet en fremtidig,
   uafhængig brug af facts i en hero-split, der ikke skal have denne margin. */
.page-hero .hero-facts { margin-top: var(--s2); }
/* LAY-03 (designreview 31-08-2026, etape 2): astmatest.html #forbered pakkes i
   .split (prose/notice), men notice'n (7-punkts checklist) er markant højere
   end prosen. Ubalancen accepteres bevidst i stedet for at udelade siden fra
   fundet (ticket 20260901-0554) — start-justering forhindrer et stort tomt
   felt under den korte kolonne. */
#forbered .split { align-items: start; }
.page-hero--center { text-align: center; min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.page-hero--center .eyebrow { justify-content: center; }
.page-hero--center h1, .page-hero--center .lede { margin-inline: auto; }
.page-hero--center .hero-cta { justify-content: center; }
/* RND-04 (designreview 31-08-2026): sitets eneste centrerede hero (404) får
   trykkets fritstående åndedrætsprik over rubrikken. Statisk, ingen animation.
   .page-hero--center bruges udelukkende på 404.html, så reglen er reelt
   404-only uden en ekstra klasse. */
.page-hero--center .wrap::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terracotta);
  margin: 0 auto var(--s3);
}

/* feature-rows (uddybende tilstande) */
.feature-row { align-items: start; }
.feature-rows > .feature-row + .feature-row {
  margin-top: clamp(var(--s4), 5vw, var(--s5));
  padding-top: clamp(var(--s4), 5vw, var(--s5));
  border-top: 1px solid var(--hairline);
}

/* ---------- Kantfade, delt mekanisme (A11-04 + MOB-02 + MOB-01) ----------
   .edge-fade er den ENE overflow-scroller-adfærd, som subnaven og kontakt-
   kortet begge bruger: initEdgeFade() i site.js måler scrollWidth/clientWidth/
   scrollLeft og sætter has-overflow/at-end/fade-l/fade-r derefter, så masken
   kun vises når der reelt er klippet indhold i den retning, og forsvinder ved
   enden i stedet for at være et fast gæt ud fra en breakpoint. scroll-padding-
   inline holder en tastaturfokuseret fane/kant fri af selve fadezonen.
   Uden JS (scripting: none) kan ingen tilstand måles; her bevares den gamle,
   statiske højre-fade som affordance om at indholdet fortsætter. */
.edge-fade { overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 32px; }
.edge-fade::-webkit-scrollbar { display: none; }
.edge-fade.has-overflow.fade-l:not(.fade-r) { mask-image: linear-gradient(to right, transparent, #000 28px); -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); }
.edge-fade.has-overflow.fade-r:not(.fade-l) { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.edge-fade.has-overflow.fade-l.fade-r { mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
@media (scripting: none) {
  .edge-fade { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
}

/* sticky undernav (anker-links) */
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: color-mix(in srgb, var(--bone) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block: 1px solid var(--hairline); }
.subnav .wrap { display: flex; gap: 4px; }
.subnav a { white-space: nowrap; font-size: .92rem; font-weight: 500; color: var(--ink); padding: 14px 14px; border-bottom: 2px solid transparent; transition: color var(--t-tap) var(--ease), border-color var(--t-tap) var(--ease); }
.subnav a:hover { color: var(--petrol); }
.subnav a.active, .subnav a[aria-current] { color: var(--petrol); border-bottom-color: var(--terracotta); }

/* lang prose (jura/info) */
.prose { max-width: 64ch; }
.prose > * + * { margin-top: var(--s2); }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: var(--s5); }
.prose h3 { font-size: 1.2rem; margin-top: var(--s4); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 8px; }
/* A11-01: --hairline-strong i stedet for --hairline, mest til gavn for
   jurasidernes (og artiklernes) mange prose-links — samme 3:1-logik som de
   interaktive kanter, uden at ændre selve linkfarven (--petrol). */
.prose a { color: var(--petrol); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--terracotta); }
.prose .small { font-size: .9rem; color: color-mix(in srgb, var(--ink) 62%, var(--bone)); }
/* FRV-01 (designreview 31-08-2026): manglende prose-på-petrol-støtte, opdaget
   ved verifikationen. Kort, facts, muted og checklist havde allerede
   petrol-varianter; prosaens links og small-tekst havde ikke. */
.section--petrol .prose a, .on-petrol .prose a { color: var(--on-petrol); text-decoration-color: var(--hairline-strong-on-petrol); }
.section--petrol .prose a:hover, .on-petrol .prose a:hover { text-decoration-color: var(--terracotta); }
.section--petrol .prose .small, .on-petrol .prose .small { color: var(--on-petrol-muted); }

/* SML-02 (designreview etape 4, 01-09-2026): marginalia i artiklernes tomme
   højrespalte. Samme kolonnegeometri og kollaps-grænse (1040px) som .split,
   men en smallere højreside, fordi noten er en kort sidenote, ikke en
   ligeværdig blok — derfor egen klasse frem for at genbruge .split. */
.prose-margin {
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  gap: clamp(var(--s4), 4vw, var(--s6));
  align-items: start;
}
.prose-margin > .prose { max-width: none; }
.margin-note {
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 46px + 12px);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s2);
  font-size: .92rem;
  color: var(--sage-ink);
}
.margin-note + .margin-note { margin-top: var(--s4); }
.margin-note__label {
  display: block;
  font: 600 .72rem/1.6 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin-bottom: 4px;
}
.margin-note a { color: var(--petrol); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }
.margin-note a:hover { text-decoration-color: var(--terracotta); }
@media (max-width: 1040px) {
  .prose-margin { grid-template-columns: 1fr; gap: var(--s4); }
  .margin-note { position: static; border-top: 1px solid var(--hairline); }
}

/* SML-01 (designreview 31-08-2026): "Kort fortalt" som designet manchet, adskilt
   fra den efterfølgende brødtekst i SAMME .prose-container (fx "De hyppigste
   årsager" i samme div). Scopet til h2:first-child + den umiddelbart følgende p,
   ikke til hele .prose--manchet, så resten af prose-blokken ikke arver satsen —
   ingen HTML-omstrukturering nødvendig, kun klassen på den eksisterende div. */
.prose--manchet > h2:first-child {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s3);
  font: 600 .78rem/1.6 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage-ink);
}
.prose--manchet > h2:first-child + p {
  font-family: var(--serif);
  font-weight: 430;
  font-size: clamp(1.22rem, .9vw + 1.05rem, 1.5rem);
  line-height: 1.5;
  letter-spacing: -.006em;
  color: color-mix(in srgb, var(--ink) 90%, var(--bone));
}

/* TYP-10 (designreview 31-08-2026): jurasiderne sat som dokumenter, ikke som
   marketing. Dokumentskala uden HTML-ændring (kun body[data-page]). */
body[data-page="privatliv"] .page-hero h1,
body[data-page="cookies"] .page-hero h1 {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  max-width: 28ch;
}
/* Datolinjen (.muted.doc-date): visitkortbagsidens labeltypografi — hairline
   over, spatieret versal-label til venstre, værdien med tabelcifre. De to
   eksisterende spans og teksten er urørt. */
.doc-date {
  display: flex;
  gap: 12px;
  align-items: baseline;
  border-top: 1px solid var(--hairline);
  padding-top: var(--s2);
  margin-top: var(--s3);
}
.doc-date span:first-child {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sage-ink);
}
.doc-date span:last-child { font-variant-numeric: tabular-nums; }

/* Publikationsliste (om os). Kompakt og uden punkttegn: posterne er referencer,
   ikke punkter i en opremsning. padding-left: 0 af samme grund som .checklist. */
ul.pub-list { list-style: none; padding-left: 0; }
.pub-list li { font-size: .94rem; line-height: 1.55; color: color-mix(in srgb, var(--ink) 78%, var(--bone)); }
.pub-list li + li { margin-top: 12px; }
.pub-list b { color: var(--petrol); font-weight: 600; }
/* TYP-09: tidsskriftstitler i <em> ville ellers blive syntetisk skråstillet
   (fonten har ingen italic-akse). Oprejst, husets etiketfarve i stedet. */
.pub-list em { font-style: normal; color: var(--sage-ink); }

/* statisk kort-panel (ingen cookie-droppende iframe) */
.map-panel { position: relative; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--stone); aspect-ratio: 16 / 11; }
.map-panel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-actions { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
/* Indlejret vektorkort (kontakt): panelet følger kortets egen højde, og Maps-
   knapperne ligger UNDER kortet (ikke oven på legenden/målestokken). */
.map-panel--map { aspect-ratio: auto; background: var(--stone); }
/* MOB-01: rulning og fade sidder på DENNE indre wrapper, ikke på selve
   rammen (.map-panel--map), så basefladens kant og hjørner (border+radius,
   sat på .map-panel ovenfor) altid er synlige, uanset scrollposition. */
.map-scroll { display: block; }
.map-img { display: block; width: 100%; height: auto; }
/* MOB-08: under 640 px viser <picture> et EGET, beskåret mobilkort
   (kort-charlottenlund-mobil(-en).svg) med skrift løftet til >=16 enheder —
   det skal fylde rammen uden vandret rul. Den tidligere tvungne min-width
   (der skalerede DESKTOP-kortets 800 px-tegning op til en læsbar bredde og
   dermed altid udløste rul under 640 px, jf. MOB-01) er derfor fjernet;
   `.map-img{width:100%}` ovenfor er nok. `.edge-fade`/`initEdgeFade` bevares
   uændret og aktiverer kun rul/fade, når indholdet reelt er bredere end sin
   ramme (has-overflow) — det gælder fortsat det STORE kort over 640 px. */
/* Bred forklarende figur med billedtekst (fx de tre tilstande ved åndenød under sport) */
.figure-wide { margin: clamp(var(--s4), 4vw, var(--s5)) 0; }
.figure-wide img { width: 100%; }
.figure-wide figcaption { margin-top: 14px; font-size: .94rem; max-width: 68ch; }
/* BIL-10c: fotoprogrammets situationsbilleder (manualens 3:2-format), klar til
   brug når fotorunden leverer — ingen fotos bestilt eller forgrebet af dette,
   kun web-siden gjort klar. Billedtekst i samme sprog som .figure-wide's. */
.photo-figure { margin: clamp(var(--s4), 4vw, var(--s5)) 0; }
.photo-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); display: block; }
.photo-figure figcaption { margin-top: 14px; font-size: .94rem; max-width: 68ch; }
.map-actions--below { position: static; left: auto; bottom: auto; margin-top: 14px; }
/* Kontakt: detaljer øverst, bredt kort nedenunder (kortet er find-vej-elementet) */
.contact-details { max-width: 760px; }
.contact-map { max-width: 980px; margin: clamp(var(--s5), 6vw, var(--s7)) 0 0; }
.contact-map .map-actions--below { margin-top: 16px; }
.hours-extra { display: block; margin-top: 3px; font-size: .9rem; opacity: .68; }
/* Telefontid/åbningstider: fjern den indre tabels vandrette streger (kun én ugentlig dag) */
#kontakt .facts .facts { border-top: none; }
#kontakt .facts .facts > div { border-bottom: none; padding-block: 0; }

/* Åbningsstatus, levende mikrodetalje (SML-07). Prikken bærer aldrig
   betydningen alene (A11-01-linjen): teksten siger altid tilstanden.
   sage-ink = neutral (lukket/afventer-lancering), terracotta = opmærksomhed
   (åben nu) — husets eneste varme accent, samme rolle som CTA/aktiv. */
.open-status {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; font-size: .85rem; color: var(--sage-ink);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage-ink); flex: none; }
.status-dot--active { background: var(--terracotta); }

/* ---------- i18n: skjul inaktivt sprog (default = dansk uden JS) ------ */
[data-lang-only="en"] { display: none; }
html[lang="en"] [data-lang-only="en"] { display: revert; }
html[lang="en"] [data-lang-only="da"] { display: none; }

/* Lange danske sammensatte ord (fx "Lungefunktionsundersøgelse") er bredere end
   en telefonskærm og skubbede hele siden vandret ud. Orddeling kun på små skærme. */
@media (max-width: 640px) {
  /* Orddeling er nødvendig på mobil (danske sammensætninger er bredere end
     skærmen), men uden en grænse deler browseren efter to bogstaver og laver
     brud som "anstrengelses-udløst" til "anstrenge-lsesudløst". Grænserne
     kræver mindst 8 tegn i ordet og 4 på hver side af bruddet (Safari: 4/4,
     ingen ordlængdegrænse). OBS: et &shy; i teksten vinder IKKE over
     ordbogsdelingen her; Chrome kan stadig vælge sit eget delepunkt. */
  h1, h2, h3, h4, .h3 {
    hyphens: auto;
    -webkit-hyphens: auto;
    /* Safari (desktop og iOS) kender ikke hyphenate-limit-chars; de to
       præfiksede egenskaber er dens eneste grænse (02-09-2026). */
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
    hyphenate-limit-chars: 8 4 4;
    overflow-wrap: break-word;
  }
}

/* ---------- Motion: kontrakten (designreview 31-08-2026, motionkontrakten) --
   Bevægelse er forbeholdt tre ting: det der FORKLARER (figurerne tegner sig,
   flow-volume-loopet), det der KVITTERER (knap-tryk, sprogskift, fanevalg —
   --t-tap/--t-move) og det der LEVER (det åndende mærke, flow-volume-pulsen).
   Sat tekst fader ikke længere op ved scroll (MOT-01/MOT-02) — det var
   skabelonens tydeligste signatur uden selv at forklare, kvittere eller leve.
   Tre navngivne varigheder erstatter elleve spredte ad hoc-værdier:
   --t-tap (.18s) til øjeblikkelig kvittering (nav, sprogvælger, subnav,
   footer, skip-link), --t-move (.3s) til håndgribelig bevægelse (knap,
   link-wipe, kort, header, hamburger), --t-scene (.8s) til sceneskift
   (reveal-fladerne, dvs. figurer og reveal-stagger-gitre). --ease-breath er
   logo-mærkets egen asymmetriske kurve, navngivet som token og reserveret til
   loopet, ambient motion og reveal-scenen — reveal-fladerne er de eneste
   tekstnære elementer, der bevidst bruger den, fordi MOT-02 gør fade-ind til
   en scene, ikke en kvittering.
   Én-gangs-reglen: ingen ny animation gentager sig uendeligt uden for det
   fredede hero (det åndende mærke og flow-volume-pulsen er de bevidste
   undtagelser — de ER de levende motiver). Reveal og de øvrige sceneskift
   kører én gang og bliver stående i sluttilstanden.
   Hero-undtagelsen: forsidens hero (.hero-fade, .breathe, mark-*) er fredet
   og indgår ikke i reveal-mekanismen — se CLAUDE.md "Signaturmotiv".
   --ease bevares uændret til alt andet: den genererede figur-CSS i
   tools/figurer/byg.py refererer hverken --ease eller cubic-bezier, så den er
   under alle omstændigheder upåvirket af denne kontrakt — --ease røres
   simpelthen ikke, for ikke at åbne den mulighed. */
/* Uden JavaScript bliver .reveal/.reveal-stagger aldrig til .in, og siden ville
   stå tom. (scripting: none) fanger browsere med JS slået fra; init() i site.js
   kører initReveals() først og er indkapslet, så en fejl i et andet trin heller
   ikke kan efterlade siden usynlig. MOT-06: samme fallback dækker nu også
   flow-volume-figuren i sin helhed — kurven (.fv-*) OG annotationslaget
   (.fv-analysis, ellers kun vist via JS' .show-klasse) — uden begge dele stod
   figuren med enten skjulte streger eller en tegnet kurve uden sine FEV1/PEF-
   mærker og etiketter. .draw-reglen er FORBEREDT, ikke aktiv: ingen element
   bærer i dag class="draw" (hero-mærket bruger .mark-wrap/.hero-fade, ikke
   .draw), men MOT-05 (etape 2) skal genbruge den eksisterende .draw/initDraw-
   mekanisme til nye tegnende figurer, og fallback'en skal stå klar, inden de
   lander. Print har sin egen regel nederst i filen. */
@media (scripting: none) {
  .reveal, .reveal-stagger { opacity: 1 !important; transform: none !important; }
  .hero-fade { animation: none !important; opacity: 1 !important; transform: none !important; }
  .draw path, .draw line, .draw circle, .draw polyline { stroke-dashoffset: 0 !important; }
  .fv-figure .fv-rise, .fv-figure .fv-desc, .fv-figure .fv-insp { stroke-dashoffset: 0 !important; }
  .fv-analysis .an { opacity: 1 !important; }
  .fv-analysis .mark { stroke-dashoffset: 0 !important; }
}
/* MOT-02: nth-child-stigen (27 gitre, op til fem forskudte forsinkelser pr.
   gitter) er slettet. .reveal-stagger fader nu som HELHED, samme scene-
   varighed og -kurve som .reveal, i stedet for at hvert barn kaskaderer for
   sig — den mest genkendelige skabelon-koreografi på sitet er væk.
   initReveals() observerer allerede containerne (.reveal, .reveal-stagger),
   ikke deres børn, så JS er urørt. */
.reveal, .reveal-stagger { opacity: 0; transform: translateY(16px); transition: opacity var(--t-scene) var(--ease-breath), transform var(--t-scene) var(--ease-breath); }
.reveal.in, .reveal-stagger.in { opacity: 1; transform: none; }

/* ---------- Hero (over folden): CSS-only indtoning, ingen JS-afhængighed --
   .hero-copy/.hero-visual er sidens LCP-kandidat. .reveal ovenfor holder
   elementet på opacity:0, indtil site.js's IntersectionObserver har kørt —
   det er fint under folden, men over folden betyder det, at browseren aldrig
   kan male den største tekst, før scriptet er hentet og eksekveret. .hero-fade
   bruger i stedet en ren @keyframes-animation, der starter så snart CSS'en er
   parset og elementet er lagt ud, helt uafhængigt af JavaScript. Samme retning
   og varighed som .reveal, så det visuelle udtryk er uændret. */
@keyframes hero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-fade { animation: hero-in .6s var(--ease) both; }

/* MOT-05: figurernes kurver (vidensfigurer) tegner sig, når de kommer i syne,
   via .draw/.drawn (sat af initDraw i site.js, IntersectionObserver). */
.draw path, .draw circle, .draw line { stroke-dasharray: var(--len, 1400); stroke-dashoffset: var(--len, 1400); }
.draw.drawn path, .draw.drawn circle, .draw.drawn line { animation: draw 2.4s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* MOT-10: flow-volume-gruppens puls deler nu mærkets 11-sekunders asymmetriske
   rytme (samme faser som mark-lung, se .mark-wrap .lung ovenfor — heroen selv
   er urørt, kun dette sekundære motiv lægges op ad dens signatur) i stedet for
   en uafhængig 8s ease-in-out-puls. Den er sat på pause, indtil initSpirometry
   sætter .fv-done, når kurven er færdigtegnet (ingen fast animation-delay fra
   load, som kun passede når figuren stod i det første viewport). */
.breathe { transform-box: fill-box; transform-origin: center; animation: breathe 11s linear infinite; animation-play-state: paused; }
@keyframes breathe {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(.33,0,.12,1); }
  34% { transform: scale(1.018); }
  44% { transform: scale(1.018); animation-timing-function: cubic-bezier(.55,0,.5,1); }
  100% { transform: scale(1); }
}
.fv-figure.fv-done .breathe { animation-play-state: running; }

/* ---------- Responsivt ------------------------------------------------ */
@media (max-width: 1040px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  /* MOB-06: footer-top er 2-spaltet fra og med denne bredde (860px og 620px
     genstarter blot samme værdi); uden span-overrides ville facts-kontakt-
     kolonnen (nu adresse+telefon+e-mail+CVR) klemmes ind ved siden af Patient
     i et 2×2-gitter i hele 620-1040px-tabletbåndet. Brand og kontakt spænder
     derfor begge kolonner allerede her, ikke først ved 620px. */
  .footer-brand, .footer-contact { grid-column: 1 / -1; }
}
/* Header-bredde: engelske menupunkter er bredere end danske, så logo-underteksten
   skjules — og hele menuen samles i hamburgeren — ved højere bredder for EN end DA.
   (<html lang> skifter med sproget, så html[lang=..] styrer det.) */
/* Underteksten kan (med 7 nav-punkter) ikke længere sameksistere med den fulde menu
   inden for .wrap-loftet på 1152px indhold — vis den derfor kun i hamburger-tilstand,
   og skjul den på helt smalle skærme, hvor den ville kollidere med burger-knappen. */
@media (min-width: 1121px) { html[lang="da"] .brand-name span { display: none; } }
@media (min-width: 1261px) { html[lang="en"] .brand-name span { display: none; } }
@media (max-width: 479px) { .brand-name span { display: none; } }
/* Saml menuen i hamburgeren før rækken bliver trang (7 punkter + sprog + CTA) */
@media (max-width: 1120px) {
  html[lang="da"] { --header-h: 66px; }
  html[lang="da"] .nav,
  html[lang="da"] .header-actions .lang-toggle,
  html[lang="da"] .header-actions .btn { display: none; }
  html[lang="da"] .nav-toggle { display: block; }
  html[lang="da"] .header-actions { margin-left: auto; }
}
@media (max-width: 1260px) {
  html[lang="en"] { --header-h: 66px; }
  html[lang="en"] .nav,
  html[lang="en"] .header-actions .lang-toggle,
  html[lang="en"] .header-actions .btn { display: none; }
  html[lang="en"] .nav-toggle { display: block; }
  html[lang="en"] .header-actions { margin-left: auto; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .hero-visual { max-width: 420px; margin-inline: auto; }
  .split { grid-template-columns: 1fr; gap: var(--s4); }
  /* Én kolonne: mærkat, venstre, højre under hinanden. Rækkeafstanden holdes på
     mærkatets egen margin, så mærkat og overskrift bliver hængende sammen. */
  .split--label { row-gap: 0; }
  .split--label > .split-label + * + * { grid-column: 1; grid-row: 3; margin-top: var(--s4); }
  /* #faq's sticky h2 (se styles.css's split--label-blok) er kun meningsfuld i
     tospalte-layoutet; i den stablede mobilvisning har intet at hænge fast i,
     og resultatet var i praksis en overskrift der blev hængende hen over
     spørgsmålene under scroll. */
  #faq .split--label > .split-label + * { position: static; }
  /* 620-860 px er tablet, ikke telefon: behold to spalter i kortgitre og footer,
     så siden ikke bliver dobbelt så lang som på en telefon. */
  .cols-3, .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Et 3-korts-gitter delt i to spalter efterlader ellers det tredje kort alene
     med et lige så bredt tomt felt ved siden af — lad det spænde hele rækken. */
  .grid.cols-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Det brede kort og den to-spaltede tjekliste stables, når wrap'en er under
     ca. 770 px: to spor i kortet ville give 185/330 px ved 620 px. */
  /* display: flex ignorerer gridplaceringerne fra basisreglerne, så de skal
     ikke nulstilles her (en generel `> *`-reset ville alligevel tabe til dem
     på specificitet). */
  .card--wide { display: flex; align-items: stretch; }
  .checklist--cols { columns: 1; margin-bottom: 0; }
  .checklist--cols li { padding-bottom: 0; }
  .checklist--cols li + li { margin-top: 12px; }
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: 1fr; }
  .facts > div { gap: 4px; }
  /* Portræt og medarbejderfotos fylder ellers hele skærmhøjden, når de stables. */
  .split--portrait .portrait-frame { max-width: 340px; }
  .team .member-photo { max-width: 200px; }
}
@media (max-width: 620px) {
  .cols-3, .cols-2 { grid-template-columns: minmax(0, 1fr); }
  /* To dl.facts i et cols-2-gitter (henviser #diagnostik og praktisk
     #rettigheder) stables her og viste ellers to hårlinjer med 16 px mellemrum
     midt i listen, som en tom række. Sømmen lukkes, så rækkerne læses som én
     liste (02-09-2026). */
  .grid.cols-2:has(> .facts + .facts) { row-gap: 0; }
  .grid.cols-2 > .facts + .facts { border-top: 0; }
  /* MOB-06: footer-top's 2 spalter + span-overrides (Indhold/Patient side om
     side, brand/kontakt fuld bredde) sættes allerede ved 1040px og gælder
     stadig her; ingen gentagelse nødvendig. Korter footeren med ca. 450 px
     ift. at stable alle fire kolonner i én lang søjle. */
}
@media (max-width: 480px) {
  .cols-4 { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .hero-cta { flex-direction: column; align-items: stretch; }
}

/* Frie .muted-afsnit havde ingen max-width og løb 1152 px ud (~110 tegn). */
.section .wrap > .muted, .prose > .muted { max-width: 64ch; }

/* Kildeliste på vidensiderne. Reset'en nulstiller margin, men ikke padding —
   uden padding-left: 0 arver listen browserens 40 px indryk. */
.kilder { list-style: none; padding-left: 0; margin: 0; display: grid; gap: var(--s2); }
.kilder li { font-size: .95rem; line-height: 1.55; color: color-mix(in srgb, var(--ink) 78%, var(--bone)); }
.kilder .link { font-size: .88rem; }

/* Statisk reserve-navigation (fjernes af site.js). Den skal være læselig for
   dem, der faktisk ser den — brugere uden JavaScript — men holde sig i
   baggrunden, så den ikke konkurrerer med sidens egen afslutning. */
.static-nav {
  max-width: var(--maxw); margin: var(--s5) auto 0; padding: var(--s4) var(--s3);
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: baseline;
  font-size: .92rem;
}
.static-nav a { color: var(--petrol); }
.static-nav p { flex-basis: 100%; margin: var(--s2) 0 0; color: color-mix(in srgb, var(--ink) 70%, var(--bone)); }

/* ---------- Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .reveal-stagger { opacity: 1 !important; transform: none !important; }
  .hero-fade { animation: none !important; opacity: 1 !important; transform: none !important; }
  .draw path, .draw circle, .draw line { stroke-dashoffset: 0 !important; }
  .fv-figure .fv-rise, .fv-figure .fv-desc, .fv-figure .fv-insp { stroke-dashoffset: 0 !important; }
  .breathe { animation: none !important; }
  /* Åndedræts-mærke: pæn statisk tilstand (animationer slukket af *-reglen ovenfor) */
  .mark-wrap .lung { transform: scale(1.06); fill: #256054; }
  .mark-wrap .airway-glow { opacity: .6; }
  .mark-wrap .accent { opacity: .95; transform: scale(1); }
  .m-aura { opacity: .14; transform: scale(1.04); }
  .m-aura.two { opacity: .1; }
  .m-bloom { opacity: .5; transform: translate(-50%,-50%) scale(1); }
}

/* ---------- Print ----------------------------------------------------- */
.print-contact { display: none; }

/* ==== Vidensfigurer =====================================================
   Skrevet af tools/figurer/byg.py. Ret i .py-filerne dér og kør scriptet
   igen; rettelser her bliver overskrevet.

   Fire af figurerne findes i to opstillinger, en bred og en høj. Ordene skal
   stå inde i tegningen for at kunne pege på noget, og én SVG skaleret ned til
   telefonbredde ville give 5-6 px skrift. Så vises den ene ad gangen. */

/* BIL-05: figurernes fælles sekundærpalet, navngivet ét sted. Erstatter 25
   unavngivne hexfarver spredt over de enkelte modul-css-filer. Fire nær-
   identiske toner er samlet undervejs (tre lyserøde i --fig-vaev, to dybe i
   --fig-vaev-dyb); ret ALDRIG en enkelt værdi i et modul-css uden at
   overveje om den skal herind i stedet. Se docs/design-review-2026-08-31-
   bilag.md, BIL-05, for udregningen bag de sammenlagte værdier. */
.figure-wide {
  --fig-brusk-lys: #C6D0C9;
  --fig-brusk: #93A8A0;
  --fig-brusk-moerk: #7E8F88;
  --fig-brusk-flade: #D5DDD8;
  --fig-kant: #6E8078;
  --fig-vaev-lys: #EDBFB2;
  --fig-vaev: #E0A79A;
  --fig-vaev-dyb: #C97C66;
  --fig-fold: #F2D3C8;
  --fig-snit: #D9C7BD;
  --fig-snit-kant: #9A8578;
  --fig-slimhinde-lys: #D9D3C6;
  --fig-slimhinde: #A8A294;
  --fig-slimhinde-moerk: #8E8578;
  --fig-membran: #B7C3BC;
  --fig-ridge: #EDF2EF;
  --fig-dybde-lys: #4A423E;
  --fig-dybde: #2A2422;
  --fig-aabning: #2E2825;
  --fig-krop: #DCE3DF;
  --fig-krop-kant: #8FA49B;
  --fig-slim: #A3A981;
}
.figure-wide svg { width: 100%; height: auto; display: block; }
.figure-wide .fig--hoej { display: none; }
@media (max-width: 1040px) {
  .figure-wide .fig--bred { display: none; }
  .figure-wide .fig--hoej { display: block; }
}
/* MOT-05: figurer maa kun fade ind, aldrig flyve, mens deres kurver samtidig
   tegner sig (.draw/.drawn, se initDraw i site.js). */
.figure-wide.reveal { transform: none; }

/* ---------- Hvor sidder forsnævringen: EILO mod astma ------------------
   Kun anatomien. Ordene står i sidens egne kort under samme overskrift,
   så figuren ikke gentager dem. Tegningen er lille og står centreret. */

.airway-fig svg { max-width: 340px; margin-inline: auto; }

.aw-lung { fill: var(--sage); opacity: .20; }
.aw-cart { fill: var(--petrol); }
.aw-cart--cricoid { opacity: .82; }
.aw-aperture { fill: var(--bone); opacity: .92; }
.aw-zone { stroke: none; }
.aw-zone--eilo { fill: var(--terracotta); opacity: .13; }
.aw-zone--eib  { fill: var(--sage);       opacity: .22; }

.aw-tube { fill: none; stroke: var(--petrol); stroke-linecap: round; }
.aw-tube--trachea { stroke-width: 26; }
.aw-tube--main    { stroke-width: 17; }
.aw-tube--sec     { stroke-width: 11; }
.aw-tube--ter     { stroke-width: 7.5; }
.aw-tube--ter2    { stroke-width: 4.5; }
.aw-ring { stroke: var(--bone); stroke-width: 2.5; stroke-linecap: round; opacity: .55; }

/* SVG'en er aldrig bredere end 340 px, hverken på skærm eller telefon, så
   skriftstørrelsen inde i den skal ses i det lys: 24 px i et 520 enheder
   bredt koordinatsystem giver omkring 16 px på skærmen. */
.aw-site {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  letter-spacing: 0; fill: var(--petrol);
}

/* ---------- Strubehovedet: åbningen i hvile og under anstrengelse -------
   Snitplanet ligger igennem selve modellen, og henvisningslinjer peger ud til
   de forstørrede tværsnit. Så kan man se hvor snittet er lagt, og hvad man
   ser i det. Samme tonesprog som bronkie-figuren, så de to hører sammen.

   Figuren findes i to opstillinger. Én SVG, der skaleres ned til
   telefonbredde, ville give 5-6 px skrift, og ordene skal stå inde i
   tegningen for at kunne pege på noget. Derfor en bred og en høj opstilling,
   hvor CSS'en viser den ene ad gangen. Ingen inline styles, jf. CSP. */


/* Kroppen: lysest lidt til venstre for midten, mørkere ud mod kanterne. */
.lx-g1 { stop-color: var(--fig-brusk); }
.lx-g2 { stop-color: var(--fig-brusk-lys); }
.lx-g3 { stop-color: var(--fig-brusk-moerk); }
.fig--bred .lx-body { fill: url(#lxBodyB); }
.fig--hoej .lx-body { fill: url(#lxBodyH); }

/* Dybden ned i luftvejen: mørkest nederst. */
.lx-d1 { stop-color: var(--fig-dybde-lys); }
.lx-d2 { stop-color: var(--fig-dybde); }

/* Bløddelene indeni. Lyserøde som i den lægefaglige billedtradition. */
.lx-s1 { stop-color: var(--fig-vaev-lys); }
.lx-s2 { stop-color: var(--fig-vaev); }

/* Det bløde stykke mellem bruskene er bindevæv, ikke et hul. Derfor en
   tone der ligger tæt på brusken, bare mattere. */
.lx-membrane { fill: var(--fig-membran); }

.lx-ridge {
  fill: none; stroke: var(--fig-ridge); stroke-width: 4; opacity: .55;
  stroke-linecap: round;
}
.lx-sulcus { fill: none; stroke: var(--fig-kant); stroke-width: 1.9; opacity: .45; }

/* Snitplanet: et gennemsigtigt ark lagt vandret gennem strubehovedet. Den
   forreste del tegnes oven på modellen, den bageste bagved, så arket løber
   igennem i stedet for bagom. */
.lx-plane { fill: var(--sage-soft); opacity: .30; }
.lx-plane--front { opacity: .34; }
.lx-plane-edge {
  fill: none; stroke: var(--sage-ink); stroke-width: 1.6; opacity: .55;
}

/* Snitfladen på modellen: samme opbygning som de store tværsnit, bare
   forkortet af perspektivet. Det er dét, der binder de to ting sammen. */
.lx-cut-cart { fill: var(--fig-brusk-flade); stroke: var(--fig-kant); stroke-width: 1.6; }
.fig--bred .lx-cut-soft { fill: url(#lxSoftB); }
.fig--hoej .lx-cut-soft { fill: url(#lxSoftH); }
.lx-cut-ap   { fill: var(--fig-aabning); }

/* Henvisningen: "det her, forstørret". */
.lx-wedge { fill: var(--stone); opacity: .42; }
.lx-fan {
  fill: none; stroke: var(--sage-ink); stroke-width: 1.3; opacity: .5;
}

.lx-panel { fill: var(--surface); stroke: var(--hairline); stroke-width: 1.5; }

/* Tværsnittene har SAMME ydre mål begge steder, så det man ser er åbningen
   og ikke skalaen. */
.lx-cart { fill: var(--fig-brusk-flade); stroke: var(--fig-kant); stroke-width: 2; }
.fig--bred .lx-soft { fill: url(#lxSoftB); }
.fig--hoej .lx-soft { fill: url(#lxSoftH); }
.lx-fold { fill: var(--fig-fold); }
.fig--bred .lx-ap { fill: url(#lxDeepB); }
.fig--hoej .lx-ap { fill: url(#lxDeepH); }
.lx-ghost {
  fill: none; stroke: var(--sage-ink); stroke-width: 1.6;
  stroke-dasharray: 7 6; opacity: .55;
}

.lx-arrow { stroke: var(--terracotta); stroke-width: 3; stroke-linecap: round; }
.lx-arrow-head {
  fill: none; stroke: var(--terracotta); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}

.lx-panel-label {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  letter-spacing: 0; fill: var(--petrol);
}
.lx-disc-label {
  font-family: var(--sans); font-size: 18px; font-weight: 600; fill: var(--ink);
}
.lx-site {
  font-family: var(--sans); font-size: 17px; font-weight: 700;
  letter-spacing: .04em; fill: var(--petrol);
}
.lx-note { font-family: var(--sans); font-size: 15px; fill: var(--sage-ink); }
.lx-lead { fill: none; stroke: var(--sage-ink); stroke-width: 1.4; opacity: .6; }

/* Den høje opstilling har et mindre koordinatsystem, så skrift og streger
   skal være tilsvarende større for at se ens ud på skærmen. */
.fig--hoej .lx-panel-label { font-size: 28px; }
.fig--hoej .lx-disc-label  { font-size: 22px; }
.fig--hoej .lx-site        { font-size: 24px; }
.fig--hoej .lx-note        { font-size: 22px; }
.fig--hoej .lx-lead        { stroke-width: 2; }
.fig--hoej .lx-fan         { stroke-width: 1.9; }
.fig--hoej .lx-ghost       { stroke-width: 2.2; stroke-dasharray: 9 8; }
.fig--hoej .lx-arrow,
.fig--hoej .lx-arrow-head  { stroke-width: 4; }
.fig--hoej .lx-cart        { stroke-width: 2.6; }
.fig--hoej .lx-sulcus      { stroke-width: 2.5; }
.fig--hoej .lx-ridge       { stroke-width: 5; }
.fig--hoej .lx-plane-edge  { stroke-width: 2; }
.fig--hoej .lx-cut-cart    { stroke-width: 2; }

/* ---------- En bronkie normalt og ved astma ----------------------------
   Længdesnit: den forreste halvdel af røret er skåret væk, så man kigger ind
   i luftvejen. Toneforløbene giver rundhed uden at gøre tegningen blank, og
   alle farver kommer fra husets tokens. Ingen inline styles, jf. CSP. */

/* Figuren findes i to opstillinger. Ordene skal stå inde i tegningen for at
   kunne pege på noget, og én SVG skaleret ned til telefonbredde ville give
   5-6 px skrift. Derfor en bred med rørene ved siden af hinanden og en høj
   med dem over hinanden, hvor CSS'en viser den ene ad gangen. */

/* Ydersiden: lysest lidt til venstre for midten, mørkere ud mod kanterne.
   Det er dét, der får røret til at runde. */
.br-o1 { stop-color: var(--fig-brusk); }
.br-o2 { stop-color: var(--fig-brusk-lys); }
.br-o3 { stop-color: var(--fig-brusk-moerk); }
.fig--bred .br-outer { fill: url(#brOuterB); }
.fig--hoej .br-outer { fill: url(#brOuterH); }

/* Indersiden: mørkest i midten, så hulrummet læses som konkavt. */
.br-i1 { stop-color: var(--fig-slimhinde-lys); }
.br-i2 { stop-color: var(--fig-slimhinde); }
.br-i3 { stop-color: var(--fig-slimhinde-moerk); }
.fig--bred .br-inner { fill: url(#brInnerB); }
.fig--hoej .br-inner { fill: url(#brInnerH); }
.fig--bred .br-inner--a { fill: url(#brInnerAB); }
.fig--hoej .br-inner--a { fill: url(#brInnerAH); }

/* Snitkanten er væggens tykkelse. Ved astma er den både tykkere og betændt. */
/* Selve snitfladen: væggen set fra enden. Ved astma er den både tykkere
   (geometrien) og betændt (farven). */
.br-face { fill: var(--fig-snit); }
.br-face--inflamed { fill: var(--fig-vaev-dyb); }
.br-edge { fill: none; stroke: var(--fig-snit-kant); stroke-width: 1.6; opacity: .7; }

/* Muskulaturen er lyserød som i den lægefaglige billedtradition. Båndene er
   ens og ligger med fast afstand; buen ned over forsiden er dét, der får dem
   til at smyge sig om røret. De tegnes før væggen, så de forsvinder ind bag
   snitkanten i stedet for at løbe ind i slimhinden. */
.br-band {
  fill: none; stroke: var(--fig-vaev); stroke-width: 9; opacity: .92;
  stroke-linecap: round;
}
.br-band--tight { stroke: var(--fig-vaev-dyb); stroke-width: 17; opacity: 1; }

.br-mucus { fill: var(--fig-slim); opacity: .92; }

.br-arrow { stroke: var(--terracotta); stroke-width: 3; stroke-linecap: round; }
.br-arrow-head {
  fill: none; stroke: var(--terracotta); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}

.br-caption {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  letter-spacing: 0; fill: var(--petrol);
}
.br-lead  { stroke: var(--sage-ink); stroke-width: 1.4; fill: none; opacity: .6; }
.br-label { font-family: var(--sans); font-size: 16px; fill: var(--ink); }

/* Den høje opstilling har et mindre koordinatsystem, så skrift og streger
   skal være tilsvarende større for at se ens ud på skærmen. */
.fig--hoej .br-caption { font-size: 27px; }
.fig--hoej .br-label   { font-size: 21px; }
.fig--hoej .br-lead    { stroke-width: 1.9; }
.fig--hoej .br-edge    { stroke-width: 2; }

/* ---------- Dysfunktionel vejrtrækning: hvor og hvordan ------------------
   Kropssilhuetten siger hvor bevægelsen sidder, kurven siger hvordan rytmen
   ser ud. To rækker, så forskellen læses vandret.

   To opstillinger: én SVG skaleret ned til telefonbredde ville give 5-6 px
   skrift, og ordene skal stå inde i tegningen for at kunne pege på noget.
   Ingen inline styles, jf. CSP. */


.bp-body { fill: var(--fig-krop); stroke: var(--fig-krop-kant); stroke-width: 1.6; }
/* Den del af kroppen, der bevæger sig. Farven står aldrig alene: pilene og
   overskriften siger det samme. */
.bp-move { fill: var(--terracotta); opacity: .20; }
.bp-arrow {
  stroke: var(--terracotta); stroke-width: 2.6; stroke-linecap: round;
}
.bp-arrow-head {
  fill: none; stroke: var(--terracotta); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.bp-base { fill: none; stroke: var(--hairline); stroke-width: 1.4; }
.bp-trace {
  fill: none; stroke: var(--petrol); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.bp-sigh { fill: var(--terracotta); }
.bp-lead { fill: none; stroke: var(--sage-ink); stroke-width: 1.3; opacity: .6; }

.bp-row {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  letter-spacing: 0; fill: var(--petrol);
}
.bp-sub { font-family: var(--sans); font-size: 15px; fill: var(--sage-ink); }
.bp-note { font-family: var(--sans); font-size: 14px; fill: var(--sage-ink); }
.bp-time { letter-spacing: .06em; }

/* Den høje opstilling har et mindre koordinatsystem, så skrift og streger
   skal være tilsvarende større for at se ens ud på skærmen. */
.fig--hoej .bp-row   { font-size: 28px; }
.fig--hoej .bp-sub   { font-size: 20px; }
.fig--hoej .bp-note  { font-size: 19px; }
.fig--hoej .bp-trace { stroke-width: 3.4; }
.fig--hoej .bp-base  { stroke-width: 1.8; }
.fig--hoej .bp-body  { stroke-width: 2; }
.fig--hoej .bp-lead  { stroke-width: 1.8; }
.fig--hoej .bp-sigh  { r: 6.5; }
.fig--hoej .bp-arrow,
.fig--hoej .bp-arrow-head { stroke-width: 3.4; }

/* ---------- Udredning af anstrengelsesudløst åndenød --------------------
   Symptomet øverst, tre sideordnede spor under det. Sideordnede med vilje:
   dysfunktionel vejrtrækning er ikke en udelukkelsesdiagnose, så sporene må
   ikke tegnes som en rækkefølge, man arbejder sig ned igennem.

   Medaljonerne er sammendrag af de tre øvrige figurer, så figuren også
   fungerer som et kort over dem.

   To opstillinger: én SVG skaleret ned til telefonbredde ville give 5-6 px
   skrift. Ingen inline styles, jf. CSP. */


.ud-line { fill: none; stroke: var(--hairline); stroke-width: 2; }
.ud-top { fill: var(--petrol); }
.ud-bund { fill: var(--stone); }
.ud-medal { fill: var(--surface); stroke: var(--hairline); stroke-width: 1.6; }
.ud-rule { fill: none; stroke: var(--hairline); stroke-width: 1.4; }

/* Medaljonernes indhold: samme toner som i de figurer, de sammenfatter.
   BIL-05: .ud-wall og .ud-inflamed havde deres to hexværdier byttet om ift.
   bronkie.css's .br-face/.br-face--inflamed (den inflammerede slimhinde
   skal konsekvent have samme farve, uanset hvilken fil den står i) —
   rettet her ved at bruge de samme navngivne tokens begge steder. */
.ud-cart { fill: var(--fig-brusk-flade); stroke: var(--fig-kant); stroke-width: 1.6; }
.ud-soft { fill: var(--fig-vaev); }
.ud-fold { fill: var(--fig-fold); }
.ud-wall { fill: var(--fig-snit); }
.ud-inflamed { fill: var(--fig-vaev-dyb); }
.ud-dark { fill: var(--fig-aabning); }
.ud-trace {
  fill: none; stroke: var(--petrol); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.ud-top-t {
  font-family: var(--sans); font-size: 21px; font-weight: 700;
  letter-spacing: .01em; fill: var(--bone);
}
.ud-top-s { font-family: var(--sans); font-size: 15px; fill: var(--on-petrol-muted, #AFC3BC); }
.ud-navn {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  letter-spacing: 0; fill: var(--petrol);
}
.ud-tegn { font-family: var(--sans); font-size: 16px; fill: var(--ink); }
.ud-lab {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase; fill: var(--sage-ink);
}
.ud-test { font-family: var(--sans); font-size: 16px; fill: var(--ink); }
.ud-bund-t { font-family: var(--sans); font-size: 17px; fill: var(--sage-ink); }

/* Den høje opstilling har et mindre koordinatsystem, så skrift og streger
   skal være tilsvarende større for at se ens ud på skærmen. */
.fig--hoej .ud-top-t  { font-size: 24px; }
.fig--hoej .ud-top-s  { font-size: 18px; }
.fig--hoej .ud-navn   { font-size: 24px; }
.fig--hoej .ud-tegn   { font-size: 19px; }
.fig--hoej .ud-lab    { font-size: 14px; }
.fig--hoej .ud-test   { font-size: 19px; }
.fig--hoej .ud-bund-t { font-size: 20px; }
.fig--hoej .ud-line   { stroke-width: 2.4; }
.fig--hoej .ud-trace  { stroke-width: 3; }

/* ---------- De tre tilstande på tidsforløb -----------------------------
   Erstatter den importerede publikationsgrafik. Farverne er husets: petrol
   til kurverne, terracotta kun til den ene, der skal skille sig ud, og sten
   til anstrengelsesfeltet. Ingen ren sort eller hvid. */

.ti-fig { width: 100%; height: auto; display: block; }

.ti-effort { fill: var(--stone); opacity: .85; }
.ti-axis { stroke: var(--hairline); stroke-width: 1.5; }

.ti-curve { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ti-curve--astma { stroke: var(--petrol); }
.ti-curve--eilo  { stroke: var(--terracotta-deep); }
.ti-curve--dys   { stroke: var(--sage-ink); stroke-dasharray: 1 7; stroke-width: 4.2; }

.ti-navn {
  font-family: var(--serif); font-size: 23px; font-weight: 600;
  fill: var(--petrol);
}
.ti-lyd {
  font-family: var(--sans); font-size: 17px; font-weight: 500;
  fill: color-mix(in srgb, var(--ink) 74%, var(--bone));
}
.ti-tid {
  font-family: var(--sans); font-size: 16px;
  fill: color-mix(in srgb, var(--ink) 70%, var(--bone));
}
.ti-axlab, .ti-yakse {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  fill: var(--sage-ink);
}

/* Den høje opstilling har mere plads pr. spor, så skriften kan være mindre
   i koordinatsystemet uden at blive mindre på skærmen. */
.fig--hoej .ti-navn { font-size: 27px; }
.fig--hoej .ti-lyd  { font-size: 18px; }
.fig--hoej .ti-tid  { font-size: 17px; }

/* MOT-05: astma- og eilo-kurven tegnes hurtigere end draw-standarden (2.4s),
   og eilo forskudt, så de to spor tegner sig i rækkefølge frem for samtidig. */
.ti-fig .draw.drawn path { animation-duration: 1.6s; }
.ti-fig .draw.drawn .ti-curve--eilo { animation-delay: .35s; }

/* ---------- Reversibilitetstesten: volumen før og efter medicin -------
   Samme tonesprog som tilstande.css: petrol til kurven, terracotta kun til
   pilen der markerer bedringen, og en dæmpet stiplet linje (samme greb som
   larynx.css's lx-ghost) for at vise foer-niveauet inde i efter-panelet. */

.rv-fig { width: 100%; height: auto; display: block; }

.rv-axis { stroke: var(--hairline); stroke-width: 1.5; }
.rv-ref {
  fill: none; stroke: var(--sage-ink); stroke-width: 1.6;
  stroke-dasharray: 7 6; opacity: .55;
}

.rv-curve { fill: none; stroke: var(--petrol); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }

.rv-arrow { stroke: var(--terracotta); stroke-width: 3; stroke-linecap: round; }
.rv-arrow-head {
  fill: none; stroke: var(--terracotta); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}

.rv-navn {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  fill: var(--petrol);
}
.rv-axlab, .rv-yakse {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  fill: var(--sage-ink);
}
.rv-label {
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  fill: var(--ink);
}

/* Den høje opstilling har mere plads pr. panel, så skriften kan være mindre
   i koordinatsystemet uden at blive mindre på skærmen. */
.fig--hoej .rv-navn  { font-size: 26px; }
.fig--hoej .rv-label { font-size: 18px; }
.fig--hoej .rv-arrow,
.fig--hoej .rv-arrow-head { stroke-width: 4; }
.fig--hoej .rv-ref   { stroke-width: 2; stroke-dasharray: 9 8; }
/* ==== Vidensfigurer slut ==== */

@media print {
  .site-header, .mobile-menu, .nav-toggle, .airflow-bg, .hero-visual, .fv-figure, .site-footer, .subnav { display: none !important; }
  /* .reveal/.reveal-stagger er opacity:0 indtil JS har set elementet. Uden denne
     regel printes alt, der ikke har været rullet i syne, som blanke sider. Samme
     greb som i prefers-reduced-motion-blokken. */
  .reveal, .reveal-stagger { opacity: 1 !important; transform: none !important; }
  .hero-fade { animation: none !important; opacity: 1 !important; transform: none !important; }
  .draw path, .draw line, .draw circle, .draw polyline { stroke-dashoffset: 0 !important; }
  h1, h2, h3, h4 { break-after: avoid; }
  .card, .facts > div, .steps li, figure, .notice, .pricelist > div { break-inside: avoid; }
  .section--petrol, .section--stone { background: transparent !important; }
  .section--petrol h2, .section--petrol h3, .section--petrol p,
  .section--petrol .muted, .section--petrol .steps p { color: #000 !important; }
  /* FRV-01 (designreview 31-08-2026): facts-dt/dd manglede i den eksisterende
     petrol-print-nulstilling, påpeget ved verifikationen. */
  .section--petrol .facts dt, .section--petrol .facts dd { color: #000 !important; }
  /* FRV-06/FRV-01 (designreview 31-08-2026, selvreview-fund): .cta-card--petrol
     og prosaens petrol-varianter bruger utility-klassen .on-petrol, ikke
     .section--petrol, så de faldt uden for nulstillingen ovenfor. Aktiverer
     browseren "udskriv baggrunde", ville kortet ellers printe petrol-på-petrol
     (usynlig tekst); ellers ville --on-petrol/--on-petrol-muted-farverne stå
     næsten usynlige på hvidt papir. Samme nulstilling, udvidet til begge
     selektorer. */
  .cta-card--petrol { background: transparent !important; border-color: var(--hairline) !important; }
  .on-petrol h2, .on-petrol h3, .on-petrol p, .on-petrol .muted { color: #000 !important; }
  .section--petrol .prose a, .on-petrol .prose a { color: #000 !important; text-decoration-color: #000 !important; }
  .section--petrol .prose .small, .on-petrol .prose .small { color: #000 !important; }
  /* Print er en dokumenteret undtagelse fra 'aldrig rent sort/hvidt'. */
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; }
  /* on-brand overskrifter i print */
  h1, h2, h3, h4, .display { color: var(--petrol) !important; }
  /* kompakt kontakt-footer ved print (erstatter den store petrol-footer) */
  .print-contact {
    display: block; margin-top: 28px; padding-top: 12px;
    border-top: 1px solid var(--hairline);
    font-size: 11px; line-height: 1.55; color: var(--petrol); text-align: center;
  }
  .print-contact b { font-weight: 700; }
  .print-contact .print-src { overflow-wrap: anywhere; }

  /* KMP-01: callout-prikkens box-shadow-ring er en baggrund og printes ikke;
     en 1px kontur holder den synlig, selv om baggrundsfyld udelades. */
  .notice::before { border: 1px solid var(--terracotta-deep); }
  .notice--akut::before { border-width: 2px; }

  /* RND-07: den farvede punktum-variant (.anchor-dot) er almindelig tekstfarve
     og printes som h1-h4's egen farve (h1, h2, h3, h4 { color: var(--petrol)
     !important } herover rammer kun rubrikkens egen tekst, ikke et barn med sin
     egen color-regel). Den tilføjede variants ::after-cirkel er derimod en
     baggrund, som KMP-01-mønstret ovenfor: en 1px kontur holder den synlig. */
  .anchor-dot--append::after { background: none; border: 1px solid var(--terracotta-deep); }

  /* RND-10: pilen (.link::after, KMP-04) er en mask/baggrund og printes derfor
     ikke af sig selv, ligesom checklistens flueben; skjules her eksplicit for at
     dokumentere ændringen frem for at antage den. Eksterne kilder får i stedet
     deres URL skrevet ud som tekst, så en printet vidensside/jurasides
     kildeliste eller "DOI"-link ikke citerer sig selv uden mål på papir. */
  .link::after { content: none; }
  .prose a[href^="https://"]::after,
  .kilder a[href^="https://"]::after {
    content: " (" attr(href) ")";
    flex: 1 1 auto;
    width: auto; height: auto;
    background: none; mask: none; -webkit-mask: none;
    font-family: var(--sans);
    font-size: .85em;
    color: var(--petrol);
    overflow-wrap: anywhere;
  }
}

/* ---------- A11-03: forced colors + prefers-contrast (Windows High Contrast) ----------
   Stilarket havde nul forekomster af forced-colors/prefers-contrast. Sitets
   egne figurer (flow-volume-loopet, viden-figurerne) er betydningsbærende i
   farve, ikke bare dekoration, og skal derfor IKKE tvinges om til systemets
   to-farve-palet: forced-color-adjust:none holder dem på deres egne farver,
   på en garanteret lys plade (samme --bone som resten af siden), så det
   opt-out'ede indhold ikke lander på en uforudsigelig Canvas-baggrund.
   Den aktive navmarkering (.nav a[aria-current]::after) er kun en baggrunds-
   farvet pseudo-streg, som forsvinder under forced-colors (baggrunde tvinges
   om til systemfarver); en rigtig tekstunderstregning overlever det samme
   greb, så aktiv/inaktiv forbliver skelnelig. Samme fix for subnavens aktive
   fane og sprogvælgerens trykkede tilstand. */
@media (forced-colors: active) {
  .fv-figure, .fv-figure svg,
  .figure-wide, .figure-wide svg {
    forced-color-adjust: none;
  }
  .fv-figure, .figure-wide { background: var(--bone); }
  .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
  .subnav a.active, .subnav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
  .lang-toggle button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; }
  /* RND-07-selvreview: .anchor-dot--append::after er samme slags baggrunds-
     kun-signal som navmarkeringen ovenfor og forsvinder på samme måde (målt:
     baggrunden tvinges til samme systemfarve som siden selv). En kontur i
     CanvasText overlever, ligesom teksten den sidder ved siden af. */
  .anchor-dot--append::after { background: none; border: 1px solid CanvasText; }
}

/* A11-03: hæv kantstyrken og fjern dæmpningen af "muted"-tekst, når brugeren
   selv har bedt om mere kontrast (uafhængigt af forced-colors/Windows HC).
   --hairline omdefineres til --hairline-strong ét sted, så al brug af
   var(--hairline) på tværs af kort/chips/facts/prislisten arver løftet. */
@media (prefers-contrast: more) {
  :root { --hairline: var(--hairline-strong); }
  .muted { color: var(--ink); }
  .section--stone .muted { color: var(--ink); }
  .section--petrol .muted,
  .section--petrol .steps p,
  .section--petrol .checklist,
  .section--petrol figcaption,
  .on-petrol .muted,
  .on-petrol .steps p { color: var(--on-petrol); }
}