/* ═══════════════════════════════════════════════════════════════════════
   NY.CSS — sitets skind (5. sep 2026), «Infobook Prototype»

   Ét udseende, ét skabelonsæt. style.css bærer grundreglerne (layout,
   komponenternes form, grafernes basistokens); denne fil lægger prototypens
   udtryk ovenpå og linkes af base.html EFTER style.css. Det klassiske skind
   (style.css alene + Bootstrap-navbaren, valgt pr. bruger i brugere.design)
   blev fjernet 6. sep 2026 — sql/061 dropper kolonnen.

   DEN ENE REGEL: hver selektor herunder begynder med :root. Det er ikke
   pynt: :root vejer (0,1,0), præcis som det [data-design="ny"]-præfiks,
   filen blev bygget under, og det ekstra klassetrin er det der lader
   reglerne slå Bootstraps (.btn, .badge …) og style.css' egne. Fjernes
   præfikset, taber halvdelen af reglerne kaskaden.

   FREMGANGSMÅDE: Bootstrap bliver (dropdowns, modal, popovers, grid), men
   dets CSS-variabler ompeges, og sitets egne klasser (.sektion-titel,
   .underkort, .kpi, .sektionsnav, .stam-*, .tabel-tal, .badge) får
   prototypens udseende. tema.js læser :root-tokens med getComputedStyle, så
   ompegningen af --graf-*/--status-* nederst i tokenblokken er dét der får
   graferne og netgrafen med over — uden en linje JavaScript.

   Skrifterne ligger i static/fonts (hent_fonte.sh) — ingen kald til Google.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Skrifter ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/IBMPlexSans-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/IBMPlexSans-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/IBMPlexSans-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/IBMPlexSans-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/IBMPlexSans-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/IBMPlexSans-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/Newsreader-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/Newsreader-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/static/fonts/Newsreader-normal-400-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/static/fonts/Newsreader-normal-400-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ────────────────────────────────────────────────────────────
   Første blok er prototypens 1:1. Anden blok ompeger sitets egne tokens
   (style.css :root) og Bootstraps, så alt der allerede bruger dem følger
   med. De MØRKE værdier fra prototypen står som kommentar nederst i filen:
   mørkt tema er bevidst ikke med i første runde (tema.js læser tokens én
   gang ved indlæsning, og hver graf skal ses efter i begge). */
:root {
  --ground: #F4F6F8; --surface: #FFFFFF; --surface-2: #EDF0F3; --surface-3: #E4E9ED;
  --ink: #111820; --ink-2: #3D4854; --muted: #6B7684;
  --hair: #DDE3E9; --hair-2: #C4CDD6;
  --accent: #0D5B62; --accent-2: #0A464B; --accent-soft: #E2EFF0; --accent-ink: #0A464B;
  --good: #2E6B4F; --warn: #9A5A15; --crit: #8E2F2F;
  --good-bg: #E6F0EA; --warn-bg: #F7EEE1; --crit-bg: #F6E6E6;
  --c1: #0D5B62; --c2: #7C6BB0; --c3: #C08A2E; --c4: #3F7CAC; --c5: #96594E;
  --topbar: #0F1A1C; --topbar-ink: #D8E4E5;
  --r: 6px;
  --shadow: 0 1px 2px rgba(17,24,32,.05), 0 10px 30px -22px rgba(17,24,32,.35);
  --shadow-pop: 0 2px 6px rgba(17,24,32,.08), 0 18px 40px -20px rgba(17,24,32,.35);
  --top-h: 54px;
  /* ══ TYPOGRAFIEN — HVILKEN SKRIFT HVOR ════════════════════════════════
     Tre familier, én rolle hver. Rollerne har været der siden skindet blev
     bygget; de blev skrevet ned 8. sep 2026, da tjekket målte dem.

       --sans   IBM Plex Sans   Brødtekst, knapper, navigation, formularer.
                                STANDARDEN — er du i tvivl, er det denne.
       --mono   IBM Plex Mono   TAL (tabelceller, KPI-værdier, beløb, datoer)
                                og VERSAL-ETIKETTER (kort-hoveder,
                                .stam-label, graf-legender).
                                Aldrig løbende tekst.
       --serif  Newsreader      Overskrifter fra trin 5 og op.
                                Aldrig under 20px, aldrig brødtekst.

     Ingen fil skriver et skriftnavn direkte — alt går gennem de tre tokens,
     og test_typografi.py holder fast i det.

     TRE VÆGTE, og kun tre: 400 til brug, 500 til Newsreader-overskrifter og
     mono-etiketter, 600 til fremhævning. 700 FINDES IKKE — se blokken ved
     .fw-bold nedenfor. */
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: Newsreader, Georgia, "Times New Roman", serif;

  /* ── Skriftskalaen ────────────────────────────────────────────────────
     OTTE TRIN, MÅLT OG IKKE VALGT PÅ ØJEMÅL (8. sep 2026). Før dem havde
     sitet 53 forskellige størrelser: ny.css skrev px, style.css skrev rem
     (og .65rem = 10,4px · .72rem = 11,52px · .78rem = 12,48px landede
     skævt), og skabelonerne havde 859 inline font-size.

     Trin 1-4 er de fire klumper teksten allerede lå i — 95 % af al tekst
     på sitet flyttede sig under en halv pixel, da de blev lagt sammen:

         trin 1  10px     etiketter, versaler, graf-legender      13 %
         trin 2  11.5px   tæt tekst i tabeller og kort            43 %
         trin 3  13px     tabel- og korttekst                     41 %
         trin 4  15px     brødtekst (--bs-body-font-size)          2 %

     Trin 5-8 er overskrifterne. De er få elementer (~200) men det man
     ser først, og de er lagt i hånden frem for snappet til nærmeste trin.

     NAVNGIVNINGEN følger --rum-1 … --rum-8 i style.css. Målingen bag
     tallene står på /admin/typografi, og test_typografi.py holder antallet
     nede: lofterne dér er målte tal, der kun må falde. */
  --skrift-1: 10px;
  --skrift-2: 11.5px;
  --skrift-3: 13px;
  --skrift-4: 15px;
  --skrift-5: 20px;
  --skrift-6: 24px;
  --skrift-7: 32px;
  --skrift-8: 50px;

  /* ── Seriepaletten ────────────────────────────────────────────────────
     De otte --graf-serie-N var oprindeligt BEHOLDT fra det klassiske skind,
     med den begrundelse at en ny palet skulle valideres og ikke gættes.
     Den er nu valideret (5. sep 2026) og udskiftet, bygget af skindets egne
     fem kulører c1-c5 plus lysheds-varianter af dem.

     MÅLT, IKKE VALGT PÅ ØJEMÅL. CIEDE2000 mellem alle 28 par, i normalt syn
     og i deuteranopi, protanopi og tritanopi (Machado 2009, fuld styrke):

                                  alle 8   første 6   første 4   kontrast
       gammel palet (8 kulører)       4,7        —          —        2,17:1
       ny palet (5 kulører + lys)    10,9      12,6       21,3       2,27:1

     Den nye er altså mere end dobbelt så adskillelig — på FÆRRE kulører.

     RÆKKEFØLGEN ER OPTIMERET PÅ PRÆFIKSER og ikke kun på naboer. Næsten
     alle grafer på sitet tager de første to til fire pladser; kun ejerstakken
     går til otte. Derfor er de fire første maksimeret først (ΔE 21,3 mellem
     de nærmeste to af dem), derefter de seks, og til sidst alle otte — med
     et krav om at hele sættet stadig skal ligge over 10. Uden det led lå
     «Nøgletal over tid» med to teal-kurver ved siden af hinanden: målingen
     var fin, men to trin af samme kulør i den samme graf læses som én.
     Grunden er, at den gamle palet skiller sig ad på KULØR (orange mod rød
     mod grøn), og kulør er præcis det synsdefekterne tager. Den nye skiller
     sig også ad på LYSHED, og lysheden overlever alle tre defekter. Derfor
     står c1 og c3 med hver to trin: #0D5B62 mod #437d83 er samme farve for
     en farveblind læser, men aldrig samme lyshed.

     HØJST TO TRIN PR. KULØR. Tre lilla i forskellige lysheder måler fint,
     men læses som «samme farve, tre nuancer» — og en seriefarve er en
     IDENTITET (samme ejer, samme farve i hvert kort på siden), ikke en
     skala. Alle fem kulører er repræsenteret.

     Plads 1 er accenten. Det er den samme regel som i det klassiske skind,
     hvor --graf-accent peger på --graf-serie-1.

     Rækkefølgen er ikke tilfældig: naboer i paletten er dem der oftest står
     ved siden af hinanden i en legende, og de er maksimeret først.

     Værktøjet der målte det ligger i test_palet.py — den fælder en ændring
     der gør paletten mindre adskillelig end den gamle. */
  --graf-serie-1: #0D5B62;   /* c1   — accent, mørk teal */
  --graf-serie-2: #db9d92;   /* c5ll — lys tegl */
  --graf-serie-3: #6fa0cd;   /* c4l  — lys stålblå */
  --graf-serie-4: #986600;   /* c3m  — mørk okker */
  --graf-serie-5: #7C6BB0;   /* c2   — lilla */
  --graf-serie-6: #72372d;   /* c5m  — mørk tegl */
  --graf-serie-7: #58498d;   /* c2m  — mørk lilla */
  --graf-serie-8: #437d83;   /* c1l  — lys teal */

  /* De to neutrale følger skindets hårstreger: de betyder «ikke en
     kategori» og skal ligge UDEN for serieparret i mætning. */
  --graf-rest: var(--muted);
  --graf-uoplyst: var(--hair-2);

  /* Sitets øvrige tokens (style.css), ompeget til skindets palet. */
  --graf-blaek: var(--ink);
  --graf-blaek-2: var(--ink-2);
  --graf-blaek-daempet: var(--muted);
  --graf-akse: var(--hair-2);
  --graf-flade: var(--surface);
  --graf-sideplan: var(--ground);
  --graf-gitter: var(--hair);
  --graf-accent: var(--accent);
  --graf-accent-flade: rgba(13, 91, 98, .10);   /* LITERAL — canvas kan ikke læse color-mix */
  --status-god: var(--good);
  --status-advarsel: #B8801F;
  --status-alvorlig: #B0572B;
  --status-kritisk: var(--crit);
  --status-bedst: #1F4F39;
  --graf-negativ: var(--crit);
  --graf-negativ-flade: rgba(142, 47, 47, .10);
  --tal-positiv: var(--good);
  --tal-negativ: var(--crit);
  --kv-surface: var(--surface);
  --kv-ink: var(--ink);
  --kv-ink-2: var(--ink-2);
  --kv-muted: var(--muted);
  --kv-ring: var(--hair);
  --kv-total: var(--ink-2);
  --kv-seq-100: var(--accent-soft);
  --kv-seq-600: var(--accent-ink);
  --favorit-gul: #C08A2E;

  /* Forsidens bundmenu — én farve pr. gruppe. Her ER de palet-pladser: alle
     tre klarer over 4:1 mod kortets flade, og skindets palet indeholder
     ingen statusfarve at forveksle dem med (test_palet.py vogter begge
     dele). Se begrundelsen i style.css for hvorfor det klassiske skind i
     stedet har egne værdier. */
  --udforsk-person: var(--graf-serie-1);      /* mørk teal  7,21:1 */
  --udforsk-risiko: var(--graf-serie-6);      /* mørk tegl  (fjerde søjle, 7. sep 2026) */
  --udforsk-selskab: var(--graf-serie-4);     /* mørk okker 4,58:1 — Tal og toplister */
  --udforsk-forandring: var(--graf-serie-5);  /* lilla      4,23:1 — før «Trivia» */

  /* Bootstrap 5.3 — variablerne der bærer farve og skrift. */
  --bs-body-bg: var(--ground);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--sans);
  --bs-body-font-size: var(--skrift-4);
  --bs-body-line-height: 1.55;
  --bs-font-monospace: var(--mono);
  --bs-border-color: var(--hair);
  --bs-border-color-translucent: var(--hair);
  --bs-border-radius: var(--r);
  --bs-border-radius-sm: 4px;
  --bs-secondary-color: var(--muted);
  --bs-tertiary-bg: var(--surface-2);
  --bs-secondary-bg: var(--surface-2);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 13, 91, 98;
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 13, 91, 98;
  --bs-link-hover-color: var(--accent-2);
  --bs-link-hover-color-rgb: 10, 70, 75;
  --bs-heading-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-success-rgb: 46, 107, 79;
  --bs-warning-rgb: 154, 90, 21;
  --bs-danger-rgb: 142, 47, 47;
  --bs-dark-rgb: 17, 24, 32;
  --bs-light-rgb: 237, 240, 243;
}

/* ── Grundlag ─────────────────────────────────────────────────────────── */
:root body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--skrift-4);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:root h1, :root h2,
:root .h1, :root .h2 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.015em;
}
/* ── BOOTSTRAPS OVERSKRIFTSKLASSER PÅ SKALAEN (8. sep 2026) ────────────
   Biblioteket kommer med sine egne seks trin, og to af dem findes ikke i
   vores skala: .h3/.fs-3 er 1,75rem = 28px og .h6/.fs-6 er 1rem = 16px.
   De var de sidste to størrelser på sitet, ingen havde valgt.

   Dertil er Bootstraps h1 og h2 FLYDENDE — calc(1.375rem + 1.5vw) — og det
   er dem, der laver mellemtallene 21,57 · 23,14 · 24,71 px på en telefon.
   Med faste trin er en overskrift den samme størrelse uanset skærmbredde,
   og nedtrapningen sker dér hvor vi selv har bedt om den (@media).

   Seks trin lægges på fire: det er hele pointen med en skala. De mere
   specifikke regler i denne fil — .hero h1, .baand-titel, .sektion-titel —
   vinder stadig, fordi en klasse vejer tungere end et element. */
:root h1, :root .h1, :root h2, :root .h2 { font-size: var(--skrift-7); }
:root h3, :root .h3, :root h4, :root .h4 { font-size: var(--skrift-6); }
:root h5, :root .h5 { font-size: var(--skrift-5); }
:root h6, :root .h6 { font-size: var(--skrift-4); }
/* .fs-N er UTILITIES og skrives af Bootstrap med !important. En erklæring
   uden taber til en med, uanset specificitet — samme grund som ved
   .fw-bold ovenfor. Derfor står det kun her, på de seks klasser. */
:root .fs-1, :root .fs-2 { font-size: var(--skrift-7) !important; }
:root .fs-3, :root .fs-4 { font-size: var(--skrift-6) !important; }
:root .fs-5 { font-size: var(--skrift-5) !important; }
:root .fs-6 { font-size: var(--skrift-4) !important; }
/* ── VÆGT 700 FINDES IKKE (8. sep 2026) ───────────────────────────────
   hent_fonte.sh henter wght@400;500;600 for begge IBM Plex-skrifter, og
   Newsreader er en variabel skrift med spændet 400-600. Der er altså intet
   700-snit i static/fonts.

   Alligevel bad 7.819 elementer om 700 — Bootstraps .fw-bold er 700, og
   <strong>/<b> er «bolder», hvilket bliver 700. Browseren kan ikke opfylde
   det og vælger den tungeste den har. MÅLT på den samme tekst i 40px:

       IBM Plex Sans   600: 460,25 px   700: 460,25 px   800: 460,25 px
       IBM Plex Mono   600: 417,73 px   700: 417,73 px   800: 417,73 px
       Newsreader      600: 449,22 px   700: 449,22 px   800: 449,22 px

   Samme bredde = samme skrift. .fw-bold og .fw-semibold har med andre ord
   været det samme hele tiden. Reglen her ændrer derfor ingen pixel; den
   får bare koden til at holde op med at love et trin, der ikke findes.

   KLASSEN .fw-bold BEHOLDES — den står 2.000+ steder i skabelonerne, og at
   omdøbe dem alle ville være en stor og risikabel ændring for at rette et
   navn. Skalaen er tre vægte: 400 brug, 500 display, 600 fremhævet.
   Se skriftprøven på /admin/typografi.

   !important KUN på klasserne, og det er ikke sjusk: Bootstrap skriver selv
   sine utilities som «font-weight: 700 !important», og en erklæring uden
   !important taber til en med — uanset specificitet. b/strong kommer fra
   reboot uden !important og har derfor ingen brug for det. */
:root .fw-bold, :root .fw-bolder { font-weight: 600 !important; }
:root b, :root strong { font-weight: 600; }

/* ── .small ER ET TRIN, IKKE EN FAKTOR (8. sep 2026) ───────────────────
   Bootstraps .small er «.875em» — en faktor, ikke en størrelse. Hvad den
   bliver til, afhænger af hvad den sidder inde i, og sitet havde otte
   forskellige sammenhænge. Målt gav den:

       i brødtekst (15px)      13,125px   29.354 elementer
       i en tabel (13px)       11,375px   44.346 elementer
       i en .small i en tabel   9,953px      314 elementer
       i en .small i brødtekst 11,484px    5.528 elementer

   Tilsammen 55 % af al tekst på sitet — i fire størrelser, ingen havde
   valgt, ud af den SAMME klasse. Den samme .small var 15 % større ét sted
   end et andet; det er ikke afrunding, det er en uensartethed man kan se.

   Nu er den ét trin ned ad skalaen. Brødtekst (trin 4) → trin 3; tabeller
   og de øvrige tætte sammenhænge (trin 3) → trin 2. Sporet med en
   forfader-optælling over tolv sider: 3.093 af de 3.980 lå direkte i
   .table, resten i .stam-vaerdi, .top-hoejre og .card-footer. Kommer der
   flere sammenhænge til, navngiver prøvens afsnit «Størrelser ingen har
   skrevet» dem med side og selektor. */
:root .small, :root small { font-size: var(--skrift-3); }
:root .table .small, :root .table small,
:root .stam-vaerdi .small, :root .stam-vaerdi small,
:root .top-hoejre .small, :root .card-footer.small,
:root .underkort-titel .small { font-size: var(--skrift-2); }

/* Bootstraps egne relative rester. De er alle «.875em» eller «.75rem» og
   laver hver sin afledte størrelse afhængigt af hvor de står. <option>
   arver ikke fra kroppen i Chrome og lander på systemets 14px. */
:root code, :root .form-text { font-size: var(--skrift-3); }
:root .progress { font-size: var(--skrift-2); }
:root select, :root option { font-size: var(--skrift-3); }

/* En overskrift med .text-uppercase er en ETIKET og ikke en display-linje.
   På /admin stod «Værktøjer» og «Statistik» som h2 med .text-uppercase, og
   fik derfor Newsreader i 11,5px — en display-skrift brugt langt under sin
   egen nedre grænse (trin 5). Versaler, spatieret og dæmpet er mono-rollen,
   præcis som .stam-label og kort-hovederne. */
:root h1.text-uppercase, :root h2.text-uppercase, :root h3.text-uppercase,
:root h4.text-uppercase, :root h5.text-uppercase, :root h6.text-uppercase {
  font-family: var(--mono); font-size: var(--skrift-1); font-weight: 500;
  letter-spacing: .12em;
}

:root a { color: var(--accent); text-decoration: none; }
:root a:hover { color: var(--accent-2); }
:root :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
:root .text-muted { color: var(--muted) !important; }
:root .text-primary { color: var(--accent) !important; }
:root .bg-light { background-color: var(--surface-2) !important; }
:root .bg-white { background-color: var(--surface) !important; }
:root .border, :root .border-top, :root .border-bottom,
:root .border-start, :root .border-end { border-color: var(--hair) !important; }
:root hr { border-color: var(--hair); opacity: 1; }
/* Tal er mono overalt — det er prototypens vigtigste enkelttræk. */
:root .tal, :root .tal-kort, :root .kpi-vaerdi,
:root .stam-id, :root .font-monospace,
:root code, :root .kv-n, :root .kv-v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
/* ── MONO FØLGER INDHOLDET, IKKE CELLEN (8. sep 2026) ──────────────────
   «:root .table td» stod indtil nu i listen ovenfor, og det var en anden
   påstand end den, systemet gør: mono er TAL og versal-etiketter, ikke
   «alt hvad der står i en tabel». Målt på 7.079 celler over ti sider var
   2.787 — knap fire ud af ti — almindelig løbende tekst: bynavne,
   selskabsformer, roller, «Datterselskab», «Kontant kapitaludvidelse».

   At det var forkert, kunne man allerede se på lapperne: .table td a,
   .table td strong og .table td:first-child trak hver sin slags indhold
   tilbage til sans. De er væk nu — de var patches på en forkert præmis.

   REGLEN ER HØJRESTILLING, fordi det i forvejen er husets konvention for
   en talkolonne: 453 af skabelonernes 877 celler bærer allerede text-end.
   De talkolonner der står VENSTRE — rækkenumre (loop.index), årstal og
   datoer — får .tal skrevet på, og det er en håndfuld steder. Kolonner
   med tal OG tekst i samme celle («98 selskaber») hører til teksten. */
:root .table td.text-end, :root .table td.tal {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
/* Undtagelsen fra undtagelsen: en kolonne der er højrestillet af HENSYN TIL
   LAYOUTET og ikke fordi den rummer tal — bykolonnen på /stoerste er skubbet
   ud til kanten. .tekst siger det, så den ikke skal gætte sig frem. */
:root .table td.tekst {
  font-family: var(--sans);
  font-variant-numeric: normal;
}
/* Mono-etiketten (.lab i prototypen): små versaler, spatieret, dæmpet. */
:root .stam-label, :root .kpi-label, :root .kv-h2,
:root .kv-tile .kv-t, :root .text-uppercase.small,
:root .card-header.small, :root .rel-antal,
:root .form-label.small {
  font-family: var(--mono);
  font-size: var(--skrift-1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ── Topbar (_topbar_ny.html) ─────────────────────────────────────────── */
:root .top {
  position: sticky; top: 0; z-index: 1040;
  background: var(--topbar); color: var(--topbar-ink);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
:root .top-in {
  max-width: 1220px; margin: 0 auto; padding: 0 22px; height: var(--top-h);
  display: flex; align-items: center; gap: 20px;
}
:root .brand {
  font-family: var(--serif); font-size: var(--skrift-5); font-weight: 500; letter-spacing: -.01em;
  color: #fff; flex: none;
}
:root .brand span { color: #54B4BA; font-style: italic; }
:root .brand:hover { color: #fff; }
:root .topsoeg { flex: 1; max-width: 520px; position: relative; margin: 0; }
:root .topsoeg .ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: #fff; opacity: .5; font-size: var(--skrift-3); pointer-events: none;
}
:root .topsoeg .navbar-search-input {
  width: 100%; height: 34px; border-radius: 4px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: #fff; padding: 0 12px 0 32px; font-size: var(--skrift-3);
  font-family: var(--sans); box-shadow: none;
}
:root .topsoeg .navbar-search-input::placeholder { color: rgba(255,255,255,.42); }
:root .topsoeg .navbar-search-input:focus {
  outline: none; border-color: #54B4BA; background: rgba(255,255,255,.1); box-shadow: none;
}
:root .top-hoejre {
  margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: var(--skrift-3); flex: none;
}
:root .top-hoejre > a { color: rgba(255,255,255,.72); }
:root .top-hoejre > a:hover { color: #fff; }
:root .top-knap {
  font: inherit; font-size: var(--skrift-3); color: rgba(255,255,255,.72); background: none;
  border: 1px solid rgba(255,255,255,.2); border-radius: 3px; padding: 4px 9px; cursor: pointer;
}
:root .top-knap:hover { color: #fff; border-color: rgba(255,255,255,.5); }
/* Niveau-menuen (_del_niveau_menu.html) er Bootstrap-markup; her får den
   prototypens .who-stil: mono, lille, dæmpet. */
:root .top-hoejre .dropdown-toggle,
:root .top-hoejre > span[data-niveau] {
  font-family: var(--mono); font-size: var(--skrift-2); color: rgba(255,255,255,.55) !important;
}
:root .top-hoejre .dropdown-toggle .small { font-size: var(--skrift-2); }
:root .top-hoejre .dropdown-toggle:hover { color: #fff !important; }
:root .dropdown-menu {
  --bs-dropdown-bg: var(--surface); --bs-dropdown-border-color: var(--hair-2);
  --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-bg: var(--accent-soft);
  --bs-dropdown-link-active-bg: var(--accent); --bs-dropdown-border-radius: var(--r);
  --bs-dropdown-font-size: var(--skrift-3); box-shadow: var(--shadow-pop);
}
:root .dropdown-header { font-family: var(--mono); font-size: var(--skrift-1); letter-spacing: .1em; text-transform: uppercase; }

/* ── Sidebredde og fod ────────────────────────────────────────────────── */
:root .side { max-width: 1220px; margin: 0 auto; padding: 0 22px 60px; }
:root footer.fod {
  border-top: 1px solid var(--hair); margin-top: 40px; padding: 20px 22px;
  /* Sans og ikke mono (8. sep 2026): «Infobook · Data fra Erhvervsstyrelsen
     og Skattestyrelsen» er en sætning. Mono-rollen er tal og versal-
     etiketter — se blokken om typografien øverst i filen. */
  font-family: var(--sans); font-size: var(--skrift-2); color: var(--muted); text-align: center;
}
:root footer.fod small { font-size: inherit; }
:root footer.fod a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
:root footer.fod a:hover { color: var(--accent); }

/* ── Båndet øverst på selskabs- og personsiden ───────────────────────── */
:root .baand { padding-top: 6px; }
:root .baand-titel {
  font-family: var(--serif); font-weight: 500; font-size: var(--skrift-7); line-height: 1.08;
  letter-spacing: -.015em; margin: 0 0 6px;
}
/* Fast trin og ikke .3em: mærkatet fulgte titlens størrelse og blev derfor
   11,4px på skrivebordet og noget andet på en telefon — en størrelse ingen
   havde valgt, afledt af en anden. */
:root .baand-titel .badge { font-size: var(--skrift-1); vertical-align: middle; }
/* SANS OG IKKE MONO (8. sep 2026, Kaspers spørgsmål). Linjen er løbende
   tekst — «A/S · Stiftet 03.02.2015 · Ravnsborg Tværgade 5C, 2200 København
   N · Adm. direktør Jeppe Carøe Rindom» — hvor kun CVR-nummeret og datoen
   er data. Mono-rollen er tal og versal-etiketter, og det her er hverken.

   Det koster mere end konsistens: mono er ~15 % bredere pr. tegn, og
   linjen brækkede derfor over to linjer på 1200 px. I brødskrift er den
   én. Samme indhold, samme bredde, en linje mindre.

   .baand-adresse og .baand-direktoer arver herfra og følger med. */
:root .baand-fakta {
  font-family: var(--sans); font-size: var(--skrift-3) !important; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center;
}
:root .baand-handlinger .btn { font-size: var(--skrift-3); }
/* Sag #3094 (8. sep 2026): venstre kolonne får en fast flex-basis i stedet
   for hele indholdets bredde, så en lang adresse i faktalinjen ombrydes inde
   i kolonnen og knapperne bliver stående til højre for navnet. Under ~320 px
   + knapperne (mobil) falder de ned som før. */
:root .baand-hoved { flex: 1 1 320px; min-width: 0; }
:root .baand-handlinger { flex-shrink: 0; }
:root .baand-kort { color: var(--muted); text-decoration: none; }
:root .baand-kort:hover { color: var(--accent); }
:root .baand a.text-muted[href^="javascript:history"] { font-size: var(--skrift-3); }

/* Knapper: prototypens .btn / .btn.primary. */
:root .btn {
  --bs-btn-border-radius: 4px; --bs-btn-font-size: var(--skrift-3); --bs-btn-font-family: var(--sans);
  --bs-btn-padding-y: 6px; --bs-btn-padding-x: 12px;
}
:root .btn-sm { --bs-btn-font-size: var(--skrift-3); --bs-btn-padding-y: 4px; --bs-btn-padding-x: 10px; }
:root .btn-outline-secondary, :root .btn-outline-primary,
:root .btn-outline-dark, :root .btn-light {
  --bs-btn-color: var(--ink); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--hair-2);
  --bs-btn-hover-color: var(--accent); --bs-btn-hover-bg: var(--surface); --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-color: var(--accent-ink); --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-border-color: var(--accent);
}
:root .btn-primary {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-2); --bs-btn-hover-border-color: var(--accent-2);
  --bs-btn-active-bg: var(--accent-2); --bs-btn-active-border-color: var(--accent-2);
}
:root .btn-link { --bs-btn-color: var(--accent); }
/* Et <a class="btn btn-primary"> (kontosiden/prissiden, 6. sep 2026) arver
   ellers `:root a`'s accentfarve — teal på teal, teksten
   forsvinder. Samme årsag og samme greb som .btn-dark nedenfor. */
:root a.btn-primary, :root a.btn-primary:hover { color: #fff; }
/* «Aktiv» i Min sides vælgere (type og sortering) var Bootstraps .btn-dark:
   en næsten sort klods (#212529) der hverken står i paletten eller i
   prototypen — og teksten blev mørk teal, fordi `:root a`
   (0,1,1) er mere specifik end Bootstraps `.btn` (0,1,0), så et
   <a class="btn"> arver accentfarven i stedet for knappens egen. Målt til
   2,03:1 mellem tekst og baggrund, hvor kravet er 4,5.

   Accenten er sidens egen «valgt»-farve i forvejen (aktive faner,
   .btn-primary), og hvid på #0D5B62 måler 7,7:1.

   color sættes DIREKTE og ikke kun som --bs-btn-color: variablen læses af
   `.btn`-reglen, som taber til `a`. Selektoren her er (0,2,0) og vinder. */
:root .btn-dark {
  --bs-btn-color: #fff; --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent-2); --bs-btn-hover-border-color: var(--accent-2);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--accent-2); --bs-btn-active-border-color: var(--accent-2);
  color: var(--bs-btn-color);
}
:root .btn-dark:hover, :root .btn-dark:focus { color: var(--bs-btn-hover-color); }

/* Formularfelter */
:root .form-control, :root .form-select {
  border-color: var(--hair-2); border-radius: 4px; font-family: var(--sans); background-color: var(--surface); color: var(--ink);
}
:root .form-control:focus, :root .form-select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
:root .input-group-text { background: var(--surface-2); border-color: var(--hair-2); color: var(--muted); }
:root .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* ── KPI-båndet ───────────────────────────────────────────────────────── */
:root .kpi-stribe:not(.kpi-aflaesning) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
  border: 1px solid var(--hair); border-radius: var(--r); background: var(--surface); overflow: hidden;
}
:root .kpi-stribe:not(.kpi-aflaesning) .kpi {
  background: transparent; border: 0; border-right: 1px solid var(--hair); border-radius: 0; padding: 14px 16px;
}
:root .kpi-stribe:not(.kpi-aflaesning) .kpi:last-child { border-right: 0; }
:root .kpi-label { font-size: var(--skrift-1); margin-bottom: 5px; }
:root .kpi-label .hjaelp { text-transform: none; letter-spacing: 0; }
:root .kpi-vaerdi { font-size: var(--skrift-5); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; margin-top: 0; }
:root .kpi-vaerdi.er-negativ,
:root .er-negativ { color: var(--crit); }
:root .kpi-vaerdi.er-positiv { color: var(--good); }
:root .kpi-enhed { font-family: var(--sans); font-size: var(--skrift-2); color: var(--muted); font-weight: 400; letter-spacing: 0; }
/* Aflæsningsboksene under graferne er samme klasser, men INDE i et kort —
   der får de ingen ramme, bare kolonner med en hårstreg imellem. */
:root .kpi-aflaesning .kpi { background: var(--surface-2); border: 0; border-radius: 4px; padding: 10px 12px; }

/* ── Sektionsnav — klæber under topbaren ─────────────────────────────── */
:root .sektionsnav {
  top: var(--top-h); z-index: 1030; background: var(--ground); backdrop-filter: none;
  border-bottom: 1px solid var(--hair); margin-bottom: 26px; display: flex; gap: 2px; overflow-x: auto;
  /* !important er nødvendigt og ikke dovent: <nav> bærer Bootstraps
     .flex-wrap-utility i skabelonen, og den er selv !important. Uden dette
     ombryder striben til to-tre rækker på mobil og æder en tredjedel af
     skærmen — den skal rulle vandret, som prototypens .subnav. */
  flex-wrap: nowrap !important;
  scrollbar-width: none;
}
:root .sektionsnav::-webkit-scrollbar { display: none; }
:root .sektionsnav-link {
  padding: 11px 14px; font-size: var(--skrift-3); color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap;
}
:root .sektionsnav-link:hover { color: var(--ink); }
:root .sektionsnav-link.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
:root .sektionsnav-caret { color: var(--hair-2); }
:root .sektionsnav-caret:hover, :root .sektionsnav-caret[aria-expanded="true"] { color: var(--muted); }
:root .sektion, :root .card[id^="k-"], :root .rel-gruppe[id^="rel-"] { scroll-margin-top: 112px; }

/* ── Sektioner: toplinje, nummer, serif ──────────────────────────────── */
/* Tælleren nulstilles på SIDEN og ikke på hovedspalten. Uden en tæller i
   scope opretter hver overskrift sin egen (CSS Lists: den instantieres på
   det element der inkrementerer), og så står alle sektioner som «01» — det
   skete på Min side, som slet ingen .col-lg-8 har, målt 6. sep 2026.
   Personsiden har TO .col-lg-8 og ville tilsvarende begynde forfra i den
   anden. Ét scope pr. side giver nummerering i dokumentets rækkefølge. */
:root body { counter-reset: sektion; }
:root .sektion { margin-bottom: 34px; }
:root .sektion-titel {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--serif); font-weight: 500; font-size: var(--skrift-6); letter-spacing: -.01em;
  border-bottom: 0; border-top: 2px solid var(--ink); padding: 10px 0 0; margin-bottom: 14px;
}
:root .sektion-titel::before {
  counter-increment: sektion; content: "0" counter(sektion);
  font-family: var(--mono); font-size: var(--skrift-2); color: var(--muted); letter-spacing: .08em; font-weight: 400;
}
:root .sektion-titel .badge { font-size: var(--skrift-1); }

/* ── Kort → paneler ───────────────────────────────────────────────────── */
:root .underkort, :root .card {
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); box-shadow: none;
}
:root .underkort { padding: 18px; margin-bottom: 16px; }
:root .underkort-titel { font-size: var(--skrift-4); font-weight: 600; margin: -18px -18px 14px; padding: 13px 18px; border-bottom: 1px solid var(--hair); }
:root .underkort-titel .text-muted, :root .underkort-titel small {
  font-family: var(--mono); font-size: var(--skrift-2); font-weight: 400; color: var(--muted) !important;
}
:root .underkort-fod {
  margin: 14px -18px -18px; padding: 10px 18px; border-top: 1px dashed var(--hair); font-size: var(--skrift-3); color: var(--muted);
}
:root .underkort-fod a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
:root .card-header {
  background: var(--surface); border-bottom: 1px solid var(--hair); font-size: var(--skrift-4); font-weight: 600; color: var(--ink);
}
:root .card-header.small.text-muted { font-family: var(--mono); font-size: var(--skrift-1); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) !important; background: var(--surface-2); }
:root .card-body { color: var(--ink); }
:root .card-footer { background: var(--surface); border-top: 1px dashed var(--hair); font-size: var(--skrift-3); color: var(--muted); }
:root .list-group { --bs-list-group-border-color: var(--hair); --bs-list-group-bg: var(--surface); --bs-list-group-color: var(--ink); --bs-list-group-action-hover-bg: var(--surface-2); --bs-list-group-action-hover-color: var(--ink); }

/* ── Tabeller ─────────────────────────────────────────────────────────── */
:root .table {
  --bs-table-bg: transparent; --bs-table-color: var(--ink-2); --bs-table-border-color: var(--hair);
  --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--ink); --bs-table-striped-bg: var(--surface-2);
  font-size: var(--skrift-3);
}
:root .table thead th, :root .table th {
  font-family: var(--mono); font-size: var(--skrift-1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; background: var(--surface-2); border-bottom: 1px solid var(--hair);
}
:root .table td { color: var(--ink-2); }
/* De tre lapper der stod her — .table td a, .table td .fw-semibold,
   .table td strong og .table td:first-child — er væk. De trak navne og
   fremhævet tekst tilbage til sans, fordi cellen var mono som udgangspunkt.
   Nu er cellen sans som udgangspunkt, og der er intet at trække tilbage. */
:root .table .text-muted { color: var(--muted) !important; }
:root .table-responsive { position: relative; }
/* /alternativ/<konkurrent> (6. sep 2026): budskaberne ER siden — sans,
   læsestørrelse og blæk, ikke datatabellens mono og småt. Vores kolonne
   står tungest; konkurrentens er dæmpet men læselig. */
/* /alternativ-hovedet genbruger forsidens .hero; kun bredden og de tre
   kolonner «X kan · Infobook kan · Du sparer» er egne (6. sep 2026). Sans
   og stort: det er sidens vigtigste budskaber, ikke en tabelfod. */
:root .hero.hero-alt h1 { max-width: 24ch; }
:root .hero.hero-alt .sub { max-width: 62ch; margin-bottom: 28px; }
:root .alt-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
:root .alt-tre-etiket { font-family: var(--sans); font-size: var(--skrift-3); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
:root .alt-tre-etiket.alt-tre-os { color: var(--accent); }
:root .alt-tre p { font-family: var(--sans); font-size: var(--skrift-4); line-height: 1.5; color: var(--ink); margin: 6px 0 0; }
@media (max-width: 767px) { :root .alt-tre { grid-template-columns: 1fr; gap: 18px; } }
:root .alt-priskort { transition: border-color .12s, box-shadow .12s; }
:root .alt-priskort:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
:root .alt-priskort .stretched-link { color: var(--ink); }
:root .alt-priskort:hover .stretched-link { color: var(--accent); }

/* Forsidens salgsblok (7. sep 2026): mellem hero'en og «Udforsk data».
   Overskriften er hero-h1'ens typografi et trin mindre; de tre felter er
   /alternativ-sidens tre kolonner. Egen klasse, så de to sider kan skilles
   senere uden at rette hinanden. */
:root .salg { padding: 30px 0 34px; border-bottom: 1px solid var(--hair); margin-bottom: 8px; }
:root .salg h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.1; letter-spacing: -.012em; margin: 0 0 22px; max-width: 22ch; text-wrap: balance;
}
:root .salg h2 em { font-style: italic; color: var(--accent); }
:root .salg-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
:root .salg-etiket { font-family: var(--sans); font-size: var(--skrift-3); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
:root .salg-etiket.salg-os { color: var(--accent); }
:root .salg-tre p { font-family: var(--sans); font-size: var(--skrift-4); line-height: 1.5; color: var(--ink); margin: 6px 0 0; }
:root .salg-opret { font-family: var(--sans); font-size: var(--skrift-4); font-weight: 600; margin: 22px 0 -8px; }
:root .salg-opret a { color: var(--accent); text-decoration: none; }
:root .salg-opret a:hover { text-decoration: underline; }
:root .hero .salg-opret { margin: -12px 0 24px; }
:root .salg-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 26px; }
:root .salg-links a { font-family: var(--sans); font-size: var(--skrift-4); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
:root .salg-links a:not(.btn):hover { color: var(--accent); }
:root .salg-links a:not(.btn) .bi { color: var(--muted); }
:root .salg-links a.btn { padding: 8px 18px; font-size: var(--skrift-4); color: #fff; }   /* reglen ovenfor gav knappen mørk tekst */
@media (max-width: 767px) { :root .salg-tre { grid-template-columns: 1fr; gap: 18px; } }

/* /demo (7. sep 2026): seks nummererede trin med skærmbillede. Nummeret er
   ikke pynt — rundvisningen ER en rækkefølge. */
:root .demo-trin { display: grid; grid-template-columns: 1fr 1.35fr; gap: 28px; align-items: start; padding: 30px 0; border-top: 1px solid var(--hair); }
:root .demo-trin:first-of-type { border-top: 0; padding-top: 6px; }
:root .demo-nr { font-family: var(--mono); font-size: var(--skrift-2); letter-spacing: .12em; color: var(--accent); text-transform: uppercase; }
:root .demo-trin h2 { font-family: var(--serif); font-weight: 500; font-size: var(--skrift-6); line-height: 1.1; margin: 4px 0 10px; text-wrap: balance; }
:root .demo-trin p { font-family: var(--sans); font-size: var(--skrift-4); line-height: 1.5; color: var(--ink); margin: 0 0 14px; }
:root .demo-trin .demo-link { font-family: var(--sans); font-size: var(--skrift-4); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
:root .demo-trin figure { margin: 0; }
:root .demo-trin img { width: 100%; height: auto; display: block; border: 1px solid var(--hair-2); border-radius: var(--r); box-shadow: var(--shadow); }
/* Sans: en billedtekst er en sætning («Novo Nordisk A/S · skærmbillede fra
   Infobook»), ikke et tal eller en versal-etiket. */
:root .demo-trin figcaption { font-family: var(--sans); font-size: var(--skrift-2); color: var(--muted); margin-top: 8px; }
:root .demo-cta { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 30px 0 10px; border-top: 1px solid var(--hair); }
@media (max-width: 767px) { :root .demo-trin { grid-template-columns: 1fr; gap: 16px; } }
:root .alt-tabel td, :root .alt-tabel th { font-family: var(--sans); font-size: var(--skrift-4); line-height: 1.5; padding: 12px 14px; vertical-align: top; }
:root .alt-tabel th.alt-emne { font-family: var(--sans); font-size: var(--skrift-3); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-top: 15px; }
:root .alt-tabel td.alt-dem { color: var(--muted); }
:root .alt-tabel td.alt-os { color: var(--ink); font-weight: 500; }
:root .alt-tabel thead th { font-family: var(--sans); font-size: var(--skrift-3); letter-spacing: .04em; text-transform: uppercase; }
:root .alt-tabel thead th.alt-os-hoved { color: var(--accent); }
:root .alt-ikke { font-size: var(--skrift-4); line-height: 1.55; color: var(--ink-2); }
:root .alt-fod { font-size: var(--skrift-3); }
:root .aars-pivot .aars-fast { background: var(--surface); }
:root .aars-pivot thead .aars-fast { background: var(--surface-2); }
:root .aars-pivot tbody .aars-sektion { background: var(--surface-2); font-family: var(--sans); }
/* Rækkepar i Driftskapital (sag #3072): «% af aktiver» er en tæt underrække
   under sit år/sin post. Bootstrap tegner stregen mellem rækker som
   border-bottom på cellen OVENFOR, så det er hovedrækken der mister sin
   streg og sin bundluft — underrækken mister topluften. */
:root tr.andel-hoved > * { border-bottom: 0; padding-bottom: 0; }
:root tr.andel-raekke > * { padding-top: 0; font-size: var(--skrift-2); }
:root .kol-kort { text-decoration-color: var(--hair-2); }
:root .udb-maerke { color: var(--hair-2); }

/* ── Badges → piller ──────────────────────────────────────────────────── */
:root .badge {
  font-family: var(--mono); font-size: var(--skrift-1) !important; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px; font-weight: 600; background: var(--surface-3); color: var(--muted);
  border: 0 !important; vertical-align: middle;
}
:root .badge.bg-success, :root .badge.text-bg-success,
:root .badge.bg-success-subtle { background: var(--good-bg) !important; color: var(--good) !important; }
:root .badge.bg-warning, :root .badge.text-bg-warning,
:root .badge.bg-warning-subtle { background: var(--warn-bg) !important; color: var(--warn) !important; }
:root .badge.bg-danger, :root .badge.text-bg-danger,
:root .badge.bg-danger-subtle { background: var(--crit-bg) !important; color: var(--crit) !important; }
:root .badge.bg-primary, :root .badge.text-bg-primary,
:root .badge.bg-info, :root .badge.text-bg-info { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
:root .badge.bg-secondary, :root .badge.text-bg-secondary,
:root .badge.bg-light, :root .badge.text-bg-light { background: var(--surface-3) !important; color: var(--muted) !important; }
:root .badge.bg-dark, :root .badge.text-bg-dark { background: var(--ink) !important; color: #fff !important; }
:root .badge.text-bg-purple { background: #7C6BB0 !important; color: #fff !important; }
:root .baand-titel .badge, :root h1 .badge { font-size: var(--skrift-1) !important; }

/* ── Skinnen (højre spalte) ───────────────────────────────────────────── */
:root .col-lg-4 .underkort { padding: 13px 15px; margin-bottom: 14px; }
:root .col-lg-4 .underkort-titel { font-size: var(--skrift-3); margin: -13px -15px 13px; padding: 11px 15px; }
:root .col-lg-4 .underkort-fod { margin: 13px -15px -13px; padding: 9px 15px; }
:root .stam-gruppe + .stam-gruppe { border-top: 1px solid var(--hair); margin-top: 11px; padding-top: 11px; }
:root .stam-felt { margin-bottom: 11px; }
:root .stam-label { font-size: var(--skrift-1); margin-bottom: 2px; }
:root .stam-vaerdi { font-size: var(--skrift-3); color: var(--ink); font-weight: 400; }
:root .stam-vaerdi.er-lang { font-size: var(--skrift-3); color: var(--ink-2); }
:root .stam-id { font-family: var(--mono); font-size: var(--skrift-3); }
:root .stam-kopi { color: var(--hair-2); }
:root .stam-kopi:hover { color: var(--muted); }
:root .stam-fold { color: var(--muted); }
:root .col-lg-4 .d-grid .btn-outline-secondary {
  border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; text-align: left; padding: 9px 2px; font-size: var(--skrift-3); color: var(--ink);
}
:root .col-lg-4 .d-grid .btn-outline-secondary:last-child { border-bottom: 0; }
:root .col-lg-4 .d-grid .btn-outline-secondary:hover { background: var(--surface-2); color: var(--accent); }
:root .col-lg-4 .d-grid .btn-outline-secondary .bi { color: var(--muted); }

/* ── Relationer, forslag, noter, hjælp ────────────────────────────────── */
:root .rel-raekke td { padding-top: 9px; padding-bottom: 9px; }
:root .rel-raekke .fw-semibold, :root .rel-raekke a { font-family: var(--sans); font-weight: 500; }
:root .soeg-forslag {
  border: 1px solid var(--hair-2); border-radius: var(--r); box-shadow: var(--shadow-pop); background: var(--surface);
}
:root .soeg-forslag .list-group-item { font-size: var(--skrift-4); }
:root .soeg-forslag .list-group-item.active, :root .soeg-forslag .list-group-item:hover { background: var(--accent-soft); color: var(--ink); border-color: var(--hair); }
:root .soeg-forslag small, :root .soeg-forslag .text-muted { font-family: var(--mono); font-size: var(--skrift-2); }
:root .alert {
  --bs-alert-border-radius: 4px; font-size: var(--skrift-3); border: 1px solid var(--hair);
  background: var(--surface-2); color: var(--ink-2);
}
:root .alert-warning { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
:root .alert-danger { background: var(--crit-bg); border-color: transparent; color: var(--crit); }
:root .alert-success { background: var(--good-bg); border-color: transparent; color: var(--good); }
:root .alert-info, :root .alert-light, :root .alert-secondary { background: var(--surface-2); color: var(--ink-2); }
:root .alert a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
:root .hjaelp { color: var(--hair-2); }
:root .hjaelp:hover, :root .hjaelp:focus { color: var(--muted); }
:root .popover { --bs-popover-bg: var(--surface); --bs-popover-border-color: var(--hair-2); --bs-popover-body-color: var(--ink-2); --bs-popover-border-radius: var(--r); box-shadow: var(--shadow-pop); }
:root .tooltip { --bs-tooltip-bg: var(--ink); --bs-tooltip-font-size: var(--skrift-2); }
:root .graf-legend { font-family: var(--mono); font-size: var(--skrift-2); color: var(--ink-2); }
:root .nav-tabs {
  --bs-nav-tabs-border-color: var(--hair); --bs-nav-tabs-link-active-color: var(--accent);
  --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: transparent transparent var(--accent);
  --bs-nav-link-color: var(--muted); --bs-nav-link-hover-color: var(--ink); --bs-nav-tabs-link-hover-border-color: transparent transparent var(--hair-2);
  --bs-nav-link-font-size: var(--skrift-3);
}
:root .nav-tabs .nav-link { border-bottom-width: 2px; margin-bottom: -1px; }
:root .pagination { --bs-pagination-color: var(--ink); --bs-pagination-border-color: var(--hair-2); --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent); --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-font-size: var(--skrift-3); }
:root .modal-content { border: 1px solid var(--hair-2); border-radius: var(--r); box-shadow: var(--shadow-pop); }
:root .modal-header, :root .modal-footer { border-color: var(--hair); }
:root .feedback-flyder { border-radius: 4px; font-size: var(--skrift-3); }
/* «Meld ind»-boblen hænger i et kort-hoved, og et kort-hoved er mono-versaler
   i dette design. Boblen er brødtekst og skal ikke arve det — den stod som
   versalskrevet mono på forsiden, hvor den hænger under «Udforsk data». */
:root .feedback-intro, :root .feedback-intro * {
  font-family: var(--sans); font-size: var(--skrift-3); letter-spacing: normal; text-transform: none; font-weight: 400;
}
:root .progress { background: var(--surface-3); }
:root .kv-tile { border-radius: var(--r); }
:root .kv-avatar { border-radius: 3px; }

/* ── Forsiden og søgeresultaterne (search.html) ───────────────────────── */
:root .hero { padding: 48px 0 36px; border-bottom: 1px solid var(--hair); margin-bottom: 8px; }
:root .hero h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4.6vw, 50px);
  line-height: 1.05; letter-spacing: -.015em; margin: 0 0 12px; max-width: 16ch; text-wrap: balance;
}
:root .hero h1 em { font-style: italic; color: var(--accent); }
:root .hero .sub { color: var(--ink-2); font-size: var(--skrift-4); max-width: 52ch; margin: 0 0 24px; }
/* Feltets bredde står ÉT sted: både søgeboksen og «Avanceret søgning»
   under den skal ende på samme lodrette linje, og to skrevne 620'ere ville
   drive fra hinanden første gang den ene rettes. */
:root .hero { --soegbredde: 620px; }
:root .hero .bigsoeg { position: relative; max-width: var(--soegbredde); }
/* Højrestillingen sker i style.css; her skal blokken bare have SAMME kasse
   som feltet, ellers lander summary ved kolonnens kant 156 px til højre for
   «Søg»-knappen — målt i browseren 5. sep 2026. */
:root .hero .avanceret { max-width: none; }
:root .hero .bigsoeg .form-control {
  height: 52px; border-radius: var(--r); border: 1px solid var(--hair-2); background: var(--surface);
  color: var(--ink); font-size: var(--skrift-4); padding: 0 16px 0 44px; box-shadow: var(--shadow);
}
:root .hero .bigsoeg .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Over feltet: Bootstrap giver .form-control:focus z-index 5 inde i en
   input-group, og ikonet står før feltet i DOM'en — uden 6 forsvinder det
   under den fokuserede kant. pointer-events:none, så et klik på ikonet
   lander i feltet. */
:root .hero .bigsoeg .ico {
  position: absolute; left: 16px; top: 17px; color: var(--muted); z-index: 6; pointer-events: none;
}
:root .hero .bigsoeg .btn { height: 52px; border-radius: 0 var(--r) var(--r) 0; font-size: var(--skrift-4); padding: 0 18px; }
:root .hero .skala { display: flex; gap: 26px; margin-top: 18px; flex-wrap: wrap; }
:root .hero .skala div { font-family: var(--mono); font-size: var(--skrift-2); color: var(--muted); }
:root .hero .skala b { color: var(--ink); font-weight: 600; }
:root .hero .filtre { margin-top: 14px; }
:root .hero .form-check-label { font-size: var(--skrift-3); }
/* Resultatlisterne: .list-group-item som prototypens .row. */
:root .soeg-resultater h6 { font-family: var(--serif); font-size: var(--skrift-5); font-weight: 500; }
:root .soeg-resultater h6 .badge { font-size: var(--skrift-1) !important; vertical-align: middle; margin-left: 6px; }
:root .soeg-resultater .list-group { border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
:root .soeg-resultater .list-group-item { padding: 12px 18px; border-left: 0; border-right: 0; }
:root .soeg-resultater .list-group-item .fw-semibold { font-size: var(--skrift-4); font-weight: 600; color: var(--ink); }
:root .soeg-resultater .list-group-item small { font-family: var(--mono); font-size: var(--skrift-2); color: var(--muted) !important; }
:root .soeg-resultater .list-group-item small .badge { font-size: var(--skrift-1) !important; }
/* «Prøv»-chips under det store felt. Prototypens .qchip 1:1 — pille,
   hårstreg, hover i accenten. */
:root .proev { gap: 8px; margin: 14px 0 0; }
:root .proev-lab {
  font-family: var(--mono); font-size: var(--skrift-1); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
:root .qchip { border-color: var(--hair-2); background: var(--surface); font-size: var(--skrift-3); }
:root .qchip:hover { border-color: var(--accent); color: var(--accent); }
:root .qchip-mark { width: 20px; height: 20px; font-family: var(--mono); font-size: var(--skrift-1); }

/* Linjen under feltet: samme kasse som feltet, så summary ender under
   «Søg»-knappen. Typevalget i mono som resten af skindets små etiketter. */
:root .hero .soeg-linje { max-width: var(--soegbredde); margin-top: 8px; }
:root .typevalg a { font-size: var(--skrift-3); color: var(--muted); }
:root .typevalg a:hover { color: var(--ink); }
:root .typevalg a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
:root .ophoerte { font-size: var(--skrift-3); color: var(--muted); }
:root .ophoerte input { accent-color: var(--accent); }

/* Avanceret søgning. */
:root .avanceret > summary { font-size: var(--skrift-3); color: var(--muted); }
:root .avanceret > summary:hover { color: var(--ink); }
:root .avanceret-antal {
  font-family: var(--mono); font-size: var(--skrift-1); background: var(--accent-soft); color: var(--accent-ink);
}

/* «Udforsk data»: bundmenu i fuld bredde, tre rækker. */
/* Fire SØJLER (7. sep 2026, Kaspers ønske) i stedet for tre vandrette
   rækker: Personfokus · Risiko · Tal og toplister · Forandringer side om
   side, syv punkter i hver, under hinanden. Grundreglerne (grid 130px + flex-wrap) står i style.css og
   overstyres her; klassenavnene er de samme, så test_forside stadig
   finder grupperne. På mobil falder søjlerne under hinanden med hårstreg. */
/* Søjlerne er så brede som deres længste punkt, og kortet er så bredt som
   søjlerne — ikke hele containeren — og står centreret som hero'en. */
:root .udforsk .card { width: fit-content; max-width: 100%; margin: 0 auto; }
:root .udforsk .card-body { display: grid; grid-template-columns: repeat(4, max-content); gap: 24px 36px; padding: 16px 22px 18px; }
@media (max-width: 991px) { :root .udforsk .card-body { grid-template-columns: repeat(2, max-content); } }
:root .udforsk-raekke { display: block; padding: 0; border-bottom: 0; }
:root .udforsk-gruppe { margin-bottom: 8px; padding-top: 0; }
:root .udforsk-links { flex-direction: column; flex-wrap: nowrap; gap: 7px; }
@media (max-width: 767px) {
  :root .udforsk .card { width: auto; }
  :root .udforsk .card-body { grid-template-columns: 1fr; gap: 16px; }
  :root .udforsk-raekke { border-bottom: 1px solid var(--hair); padding-bottom: 14px; }
  :root .udforsk-raekke:last-child { border-bottom: 0; padding-bottom: 0; }
}
:root .udforsk-gruppe {
  font-family: var(--mono); font-size: var(--skrift-1); letter-spacing: .12em; color: var(--muted);
}
:root .udforsk-link { color: var(--ink); font-size: var(--skrift-3); }
:root .udforsk-link:hover { color: var(--accent); }
:root .udforsk-ny { font-size: var(--skrift-1) !important; }

/* ── Responsivt ───────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  /* ET TRIN NED, ikke samme trin. Skrivebordet er trin 7; en mekanisk
     afrunding af de gamle 30px landede på trin 7 igen og ville have
     fjernet hele nedtrapningen. Det gælder alle størrelser inde i en
     @media: de skal vælges i forhold til den de afløser, ikke i forhold
     til hvad de tilfældigvis stod på før. */
  :root .baand-titel { font-size: var(--skrift-6); }
}
@media (max-width: 640px) {
  /* Søgefeltet var skjult her fra 6. sep til 7. sep 2026 for at få bjælken
     til at gå op i 390 px. Kasper ville have det tilbage, også selvom det
     koster en linje: på en selskabs- eller personside på telefon kunne man
     ellers kun søge ved at gå tilbage til forsiden. Det ligger nu alene på
     sin egen linje i fuld bredde lige under logoet, over links-rækken. */
  :root .topsoeg { order: 2; flex: 1 0 100%; max-width: none; }
  :root .top-hoejre { order: 3; }
  /* .baand-titel stod her på 26px og er nu dækket af trin 6 i @1000px —
     en regel der sætter det samme igen er ikke en regel. */
  :root .side { padding: 0 14px 40px; }
  /* Topbaren rummer fem ting og ikke 390 px. Den ombryder derfor til to
     linjer på telefon — og holder så op med at klæbe, præcis som det
     klassiske navbar gør: en tolinjers bjælke der bliver hængende koster
     mere skærm end den sparer. Sektionsstriben klæber stadig, nu i toppen. */
  :root .top { position: static; }
  :root .top-in {
    height: auto; flex-wrap: wrap; padding: 8px 14px; gap: 8px 12px; row-gap: 6px;
  }
  :root .top-hoejre { gap: 10px; margin-left: 0; width: 100%; flex-wrap: wrap; font-size: var(--skrift-3); }
  :root .sektionsnav { top: 0; }
  :root .sektion, :root .card[id^="k-"],
  :root .rel-gruppe[id^="rel-"] { scroll-margin-top: 58px; }
  /* KPI-tallet stod her på 19px, fordi skrivebordets 22px brækkede
     «56.659.573 kr.» over to linjer i to spalter. Skrivebordet er nu trin 5
     (20px), og målt på 175 KPI-tal over syv selskaber ved 390 px brækker
     ingen af dem. Undtagelsen var altså en undtagelse fra et tal, der ikke
     findes mere. */
}
@media (prefers-reduced-motion: reduce) {
  :root * { transition: none !important; animation: none !important; }
}

/* ── Mørkt tema — IKKE aktivt (5. sep 2026) ───────────────────────────
   Prototypens mørke tokens, gemt her så de kan tændes uden at lede. Før de
   tændes: tema.js læser tokens én gang ved indlæsning (prefers-color-scheme
   skifter derfor ikke graferne live), og hver graf, netgraf og badge skal
   ses efter i mørkt.

:root[data-tema="moerk"] {
  --ground:#0C1015; --surface:#141A21; --surface-2:#1B222B; --surface-3:#232B35;
  --ink:#E7ECF1; --ink-2:#B6C0CB; --muted:#7F8B99;
  --hair:#222A34; --hair-2:#333D4A;
  --accent:#54B4BA; --accent-2:#8FD3D7; --accent-soft:#122E31; --accent-ink:#8FD3D7;
  --good:#6FBE93; --warn:#D6A052; --crit:#D97B7B;
  --good-bg:#15271E; --warn-bg:#2A2114; --crit-bg:#2B1A1A;
  --c1:#54B4BA; --c2:#A392D8; --c3:#D9A94B; --c4:#6FA6D6; --c5:#C08A7E;
  --topbar:#080C0F; --topbar-ink:#C8D6D8;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -22px rgba(0,0,0,.9);
  --shadow-pop:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -20px rgba(0,0,0,.9);
}
*/

/* Hovedet på en RESULTATSIDE: samme hero, men lavt — prototypens
   søgeresultat har intet hero, kun brødkrumme og filtre. */
:root .hero.hero-lille { padding: 22px 0 18px; }
:root .hero.hero-lille h1 { font-size: var(--skrift-6); margin-bottom: 6px; }
:root .hero.hero-lille .sub { display: none; }

/* ── Personsiden efter prototypen (6. sep 2026) ───────────────────────── */
/* Tidslinjens rollefarver: mørk teal, lys teal, stålblå — tre KØLIGE trin
   der læses som hierarki (CEO mørkest). Første udgave brugte okker og lys
   tegl, og tegl læses som rødt: en bestyrelsespost så ud som en advarsel.
   Målt med test_palet's maal(): ΔE ≥ 11,9 mellem de tre i normalt syn og
   alle tre synsdefekter. Prototypens lilla (--c2) er fravalgt for at holde
   forløbet i de grønne nuancer. Formand er stribet bestyrelse. */
:root { --kv-s1: var(--graf-serie-1); --kv-s2: var(--graf-serie-8); --kv-s3: var(--graf-serie-3); }

/* Måleren. Buen er --accent som i prototypen; båndets farve sidder på
   prikken og etiketten under, så et svagt bånd ikke maler hele buen rød. */
:root .score-wrap { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; }
:root .score-maaler { display: block; margin: 0 auto; }
:root .score-maaler-bund { stroke: var(--surface-3); }
:root .score-maaler-fyld { stroke: var(--accent); }
:root .score-maaler-prik { fill: var(--surface); stroke: var(--accent); }
:root .score-maaler-tal { font-family: var(--mono); font-size: var(--skrift-7); font-weight: 500; letter-spacing: -.03em; fill: var(--ink); }
:root .score-maaler-enhed { font-family: var(--mono); font-size: var(--skrift-1); letter-spacing: .1em; fill: var(--muted); }
:root .score-baand {
  font-family: var(--mono); font-size: var(--skrift-1); letter-spacing: .12em; text-transform: uppercase;
  text-align: center; margin-top: -8px; color: var(--ink-2);
}
:root .score-baand.er-good, :root .score-baand.er-best { color: var(--good); }
:root .score-baand.er-warning { color: var(--warn); }
:root .score-baand.er-serious, :root .score-baand.er-critical { color: var(--crit); }

/* Driverne: label · ±point · en tynd bjælke under, der vokser fra midten —
   plus til højre, minus til venstre. Tegnes af tegnTidslinje i person.html. */
/* Tættere rækker (Kaspers ønske 6. sep 2026). Tre ting lagde luft til før:
   .kv-drv's arvede flex-gap (9 px), gitterets gap som også gjaldt LODRET
   mellem etiket og bjælke (10 px), og rækkens egen padding. Nu er lodret
   gap 0, og hele rækkens luft ligger i én padding. ~19 px pr. driver mod 33. */
:root .kv-drv { gap: 0; }
:root .driver { display: grid; grid-template-columns: 1fr 52px; gap: 0 10px; align-items: center; font-size: var(--skrift-3); line-height: 1.3; padding: 2px 0; color: var(--ink-2); }
:root .driver-val { font-family: var(--mono); font-size: var(--skrift-3); text-align: right; font-variant-numeric: tabular-nums; }
:root .driver-val.er-positiv { color: var(--good); }
:root .driver-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--surface-3); position: relative; overflow: hidden; margin: 2px 0 0; }
:root .driver-bar i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--good); }
:root .driver-bar i.er-negativ { background: var(--crit); }
/* Selskaberne bag en driver (sag #2869): rækkens tekst som link eller som
   fold-knap, og listen som en ekstra fuldbredde-linje i samme grid. */
:root a.driver-label { color: inherit; text-decoration: none; }
:root a.driver-label:hover { text-decoration: underline dotted; }
:root .driver-fold { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
:root .driver-fold:hover { text-decoration: underline dotted; }
:root .driver-fold .bi { font-size: var(--skrift-2); color: var(--muted); transition: transform .15s; display: inline-block; }
:root .driver-fold[aria-expanded="true"] .bi { transform: rotate(180deg); }
/* Korthovedets pil-knap (Skat-kortet, 8. sep 2026): samme størrelse og plads
   som de andre foldbare korts pil — yderst til højre, uden understregning. */
:root .kort-fold .bi { font-size: var(--skrift-2); }
/* Hovedets gap-2 (.5rem) lægger sig mellem højregruppen og meld ind-ikonet;
   de andre korts pil står klos op ad ikonet, så gap'et opvejes her — målt
   771-783 px mod 779-791 px på Fuld resultatopgørelse før rettelsen. */
:root .kort-fold { margin-right: -.5rem; }
:root .kort-fold:hover { text-decoration: none; }
:root .kort-fold:hover .bi { color: var(--accent); }
:root .driver-liste { grid-column: 1 / -1; font-size: var(--skrift-3); line-height: 1.4; padding: 3px 0 4px 10px; color: var(--ink-2); }
:root .driver-liste a { color: var(--accent); text-decoration: none; }
:root .driver-liste a:hover { text-decoration: underline; }

/* Statgitteret: fire felter med mono-tal, som prototypens smallMultStat. */
:root .stat-gitter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
:root .stat-label { font-family: var(--mono); font-size: var(--skrift-1); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
:root .stat-vaerdi { font-family: var(--mono); font-size: var(--skrift-5); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
:root .stat-vaerdi.er-positiv { color: var(--good); }
:root .stat-enhed { font-family: var(--sans); font-size: var(--skrift-2); color: var(--muted); font-weight: 400; letter-spacing: 0; }
:root .stat-note { font-size: var(--skrift-2); color: var(--muted); margin-top: 3px; line-height: 1.4; }

/* Flaglinjerne under track record: prik, tekst, hårstreg imellem. */
:root .kv-flags .kv-flag-row { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: var(--skrift-3); color: var(--ink-2); }
:root .kv-flags .kv-flag-row:last-child { border-bottom: 0; }
:root .kv-flags .kv-flag-row .kv-ic { font-size: var(--skrift-1); margin-top: 5px; }

/* Tidslinjen: tynde bjælker med afrundede hjørner, mono-årstal, sans-labels. */
:root .kv-tl .kv-co { font-family: var(--sans); font-size: var(--skrift-1); color: var(--ink-2); }
:root .kv-tl a.kv-co:hover { color: var(--accent); }
/* Tættere baner (Kaspers ønske 6. sep 2026): 18 px i stedet for de arvede
   26 — en person med 60 poster fyldte to skærmhøjder. Bjælke og flag centreres
   med transform, så højden kan ændres ét sted. */
:root .kv-tl .kv-lane { height: 18px; gap: 10px; }
:root .kv-tl .kv-seg { height: 9px; top: 50%; transform: translateY(-50%); border-radius: 2px; opacity: .88; box-shadow: 0 0 0 1px var(--surface); }
:root .kv-tl .kv-flag { top: 50%; transform: translate(-50%, -50%); font-size: var(--skrift-1); }
:root .kv-tl .kv-yrs { font-family: var(--mono); font-size: var(--skrift-1); color: var(--muted); }
:root .kv-legend { font-family: var(--sans); font-size: var(--skrift-3); color: var(--muted); }

/* Netværkslisten: avatar-initialer, navn, roller som piller, «N fælles ›». */
:root .rel-liste { padding: 4px 0; }
:root .relrow { display: flex; align-items: center; gap: 12px; padding: 9px 18px; border-bottom: 1px solid var(--hair); color: var(--ink); }
:root .relrow:last-child { border-bottom: 0; }
:root .relrow:hover { background: var(--surface-2); }
:root .relrow .nm { font-size: var(--skrift-3); font-weight: 500; }
:root .relrow .badge { margin-right: 4px; }
:root .relrow .tag { margin-left: auto; font-family: var(--mono); font-size: var(--skrift-2); color: var(--muted); white-space: nowrap; }
:root .relrow.text-muted .nm { color: var(--muted); }
:root .avatar {
  width: 26px; height: 26px; border-radius: 3px; flex: none; display: grid; place-items: center;
  font-family: var(--mono); font-size: var(--skrift-1); font-weight: 600; background: var(--surface-3); color: var(--muted);
}
:root .avatar.p { border-radius: 50%; }

/* Nuværende selskaber i skinnen: prototypens .pitem — avatar, navn, en
   rollelinje i mono-versaler, og status/flag til højre. */
:root .plist { display: flex; flex-direction: column; }
:root .pitem-gruppe {
  font-family: var(--mono); font-size: var(--skrift-1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: var(--surface-2); padding: 6px 15px; border-bottom: 1px solid var(--hair);
}
:root .pitem { display: flex; align-items: center; gap: 10px; padding: 9px 15px; border-bottom: 1px solid var(--hair); color: var(--ink); }
:root .pitem:last-child { border-bottom: 0; }
:root .pitem:hover { background: var(--surface-2); }
:root .pitem-krop { min-width: 0; flex: 1 1 auto; }
:root .pitem .nm { font-size: var(--skrift-3); font-weight: 500; display: block; }
:root .pitem .rl { display: block; margin-top: 2px; font-family: var(--mono); font-size: var(--skrift-1); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
:root .pitem .rl .badge { margin-right: 3px; }
:root .pitem-meta { display: block; font-size: var(--skrift-2); color: var(--muted); margin-top: 1px; }
:root .pitem-hoejre { flex: none; text-align: right; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }

@media (max-width: 700px) {
  :root .stat-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .score-wrap { grid-template-columns: 1fr; }
}
/* Punktestimatet i «Ejerandel og værdi over tid» arvede den gamle
   ledelsesprofils 48 px-tal og stod som det største på siden. Prototypens
   formueestimat er 24 px mono; 30 er nok til at være hovedtallet i kortet. */
:root .kv-hero .kv-n { font-family: var(--mono); font-size: var(--skrift-7); font-weight: 500; letter-spacing: -.025em; }
:root .kv-hero .kv-d { font-family: var(--mono); font-size: var(--skrift-2); color: var(--muted); }

/* ── VL-gruppesiden (6. sep 2026) ─────────────────────────────────────── */
:root .vl-skille td { border-top-color: var(--hair-2); font-family: var(--mono); letter-spacing: .08em; }

/* ── Forbrugslinje og forbrugsfliser (6. sep 2026) ────────────────────── */
:root .forbrugslinje { font-family: var(--mono); font-size: var(--skrift-2); color: var(--muted); letter-spacing: .01em; }
:root .forbrugslinje b { font-weight: 500; color: var(--ink); }
:root .forbrugslinje a:hover, :root .forbrugslinje a:hover b { color: var(--accent); }
:root .forbrugslinje .er-opbrugt b { color: var(--warn); }
/* /konto (7. sep 2026): niveauet én gang og stort; forbrugskortene er
   admin-forsidens .card-kort (ingen egne regler). Team-boksen er en dæmpet
   flade under niveaulinjen med brugerlisten foldet. */
:root .abon-niveau-navn { font-family: var(--serif); font-size: var(--skrift-6); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
:root .abon-niveau-navn .badge { font-family: var(--mono); vertical-align: middle; }
:root .abon-raekke + .abon-raekke { margin-top: 2px; }
:root .team-boks { background: var(--surface-2); border-radius: 4px; padding: 10px 12px; }
:root .team-boks summary { cursor: pointer; }
:root .team-liste li { padding: 2px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Feedets skillelinjer «Vil ske» / «Er sket» (7. sep 2026) — samme mono-
   etiket som kortenes overskrifter; fremtidsposter dæmpes let. */
:root .feed .feed-skel { font-family: var(--mono); font-size: var(--skrift-1); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); padding-top: 5px; padding-bottom: 5px; }
:root .feed .feed-skel-note { letter-spacing: 0; text-transform: none; }
:root .feed .feed-fremtid .feed-dato { color: var(--accent); font-weight: 600; }
:root .konto-meta { font-family: var(--mono); font-size: var(--skrift-2); }
:root .ret-felt .ret-maerke { font-family: var(--mono); font-size: var(--skrift-2); letter-spacing: .02em; }
:root .ret-felt > summary:hover .ret-maerke { color: var(--accent); text-decoration: none; }
:root .ret-felt .ret-tekst .stam-vaerdi { font-size: var(--skrift-4); }
/* /konto Profil (sag #3069, 8. sep 2026): tre tætte linjer, ikke tre kolonner
   — en lang e-mail fik en tredjedel af kortet og knækkede midt i ordet.
   Etiketten står i fast bredde foran værdien; på telefon falder den over
   værdien igen, og dér må adressen hellere brydes end skæres af. */
:root .profil-felt + .profil-felt { border-top: 1px solid var(--hair); margin-top: 8px; padding-top: 8px; }
:root .profil-felt .ret-tekst { flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: baseline; gap: 12px; }
:root .profil-felt .stam-label { flex: 0 0 11rem; margin-bottom: 0; }
/* flex: 1 1 auto på boksen OG værdien er ikke pynt: WebKit (Safari) gav
   den indre flex-boks kun sin fejlberegnede max-content-bredde (156 px),
   så «Kasper Mejlgaard» og «Straks ved signal» blev to linjer, mens
   Chromium gav den hele summary'en. Med udtrykkelig vækst er de enige. */
:root .profil-felt .stam-vaerdi { flex: 1 1 auto; min-width: 0; overflow-wrap: normal; word-break: normal; }
@media (max-width: 575px) {
  :root .profil-felt .ret-tekst { flex-direction: column; gap: 2px; }
  :root .profil-felt .stam-label { flex-basis: auto; }
  :root .profil-felt .stam-vaerdi { overflow-wrap: anywhere; }
}
/* /vej (sag #3063, 8. sep 2026): lige korte veje side om side. I vej 2 og 3
   fremhæves de knuder, vej 1 ikke har — accentkant og blød flade — så
   forskellen ses uden at læse alle linjer igen. */
:root .vej-ny { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }