body {
  background-color: #f8f9fa;
}
.card {
  border: 1px solid #dee2e6;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.list-group-item {
  border-left: none;
  border-right: none;
}
.list-group-item:first-child {
  border-top: none;
}
.navbar-brand {
  font-size: var(--skrift-5);
  letter-spacing: .5px;
}
.text-bg-purple {
  background-color: #6f42c1 !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DESIGNSYSTEM

   Frem til 14. aug 2026 var alt ovenstående hele sitets CSS — 22 linjer.
   Resten var Bootstrap-standard, og det er den direkte årsag til at intet
   på selskabssiden er primært: alle 13-19 kort har samme grå card-header
   og samme ramme, så øjet får ingen rangorden.

   Alt herunder er NYE klasser. Ingen af Bootstraps egne selektorer bliver
   omdefineret (én undtagelse, tabellernes cifre, se nedenfor), så de
   eksisterende sider ser præcis ud som før.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Afstandsskala — 4/8/12/16/24/32. Sektioner står med det største trin,
     så mellemrummet mellem to sektioner altid er større end mellem to kort
     inde i én sektion. Det er den afstand der gør grupperingen synlig. */
  --rum-1: 4px;
  --rum-2: 8px;
  --rum-3: 12px;
  --rum-4: 16px;
  --rum-6: 24px;
  --rum-8: 32px;

  /* ── Kategorifarver ───────────────────────────────────────────────────
     OTTE FASTE PLADSER, ALDRIG CYKLET. En 9. serie får ikke en genbrugt
     farve: to ejere med samme farve i samme søjle er ikke en farve, det er
     en fejl der ligner data. Den 9. foldes i stedet — se --graf-rest.

     Rækkefølgen ER farveblindheds-sikkerheden, ikke pynt. Den er valideret
     på NABOPAR (værste par gul↔aqua, ΔE 9,1 under protanopi; værste par
     under normalt syn magenta↔gul, ΔE 19,6). Bytter man to pladser om, er
     valideringen ugyldig — kør den igen frem for at gætte.

     Frem til 16. aug 2026 stod her Bootstraps ti standardfarver, gentaget
     hardkodet fire steder i to forskellige rækkefølger. Det er grunden til
     at samme ejer kunne være blå i ét kort og orange i et andet. */
  --graf-serie-1: #2a78d6;   /* blå */
  --graf-serie-2: #eb6834;   /* orange */
  --graf-serie-3: #1baf7a;   /* aqua */
  --graf-serie-4: #eda100;   /* gul */
  --graf-serie-5: #e87ba4;   /* magenta */
  --graf-serie-6: #008300;   /* grøn */
  --graf-serie-7: #4a3aa7;   /* violet */
  --graf-serie-8: #e34948;   /* rød */

  /* De to neutrale er IKKE plads 9 og 10. De betyder "ikke en kategori", og
     de skal kunne skelnes fra HINANDEN, fordi de dækker to forskellige
     ting: "Andre ejere" er registrerede ejere VI har lagt sammen for at
     holde os inden for paletten; "Øvrige" er den uregistrerede rest under
     CVR's 5 %-grænse — en ejer vi ikke kender navnet på. Én grå til begge
     ville påstå at vi heller ikke ved hvem de sammenlagte er. */
  --graf-rest: #898781;      /* Andre ejere (N) — kendte, foldede */
  --graf-uoplyst: #c3c2b7;   /* Øvrige — under registreringsgrænsen */

  /* ── Status ── RESERVERET. Må ALDRIG bruges som seriefarve. Bruger man
     rød både til "serie 8" og til going concern, holder rød op med at
     betyde noget — og siden bruger i forvejen rød til reelle risikosignaler
     (going concern, negativ egenkapital, rentedækning under 1). Status
     kommer altid med ikon eller tekst, aldrig farve alene. */
  --status-god: #0ca30c;
  --status-advarsel: #fab219;
  --status-alvorlig: #ec835a;
  --status-kritisk: #d03b3b;
  /* Femte trin, kun brugt af scorebåndet på personsiden: "meget stærk" skal
     kunne skelnes fra "stærk" på ét bånd hvor felterne står klods op ad
     hinanden. Mørkere grøn og ikke en ny kulør — det er samme udsagn, blot
     mere af det. */
  --status-bedst: #00500a;

  /* ── Grafens kulisse ──────────────────────────────────────────────────
     --graf-flade er kortets baggrund, og dermed MELLEMRUMMETS farve: en
     2 px kant i denne farve mellem to stak-segmenter er hvidt mellemrum,
     ikke en streg. Se .stak-maerke og stakgrafernes borderColor. */
  --graf-blaek: #0b0b0b;
  --graf-blaek-2: #52514e;
  --graf-blaek-daempet: #898781;
  --graf-akse: #c3c2b7;
  --graf-flade: #ffffff;
  --graf-sideplan: #f8f9fa;  /* = body, linje 2 */

  /* Grafroller — de gamle navne, ompeget til paletten ovenfor, så
     .sektionsnav a.active, graf.js og .kpi-vaerdi.er-negativ følger med
     uden at skulle røres. */
  --graf-accent: var(--graf-serie-1);
  /* Literal rgba og IKKE color-mix(): graf.js læser denne med
     getPropertyValue() og giver strengen videre til canvas som fillStyle.
     En custom property med color-mix() afleveres uresolveret, og canvas
     ville tegne ingenting. Prisen er en dubleret værdi — kommentaren er
     hvad der holder de to i sync. */
  --graf-accent-flade: rgba(42, 120, 214, .10);    /* = serie-1 ved 10 % */
  --graf-negativ: var(--status-kritisk);
  --graf-negativ-flade: rgba(208, 59, 59, .10);    /* = kritisk ved 10 % */
  --graf-gitter: #e1e0d9;    /* hårfin og SOLID, ikke en alfa-værdi */

  --tal-positiv: var(--status-god);
  --tal-negativ: var(--status-kritisk);

  /* ── Forsidens bundmenu ── én farve pr. gruppe (5. sep 2026).
     ROLLER OG IKKE PALET-PLADSER. Skindet (ny.css) peger dem på sine
     serie-farver, men grundpaletten her kan ikke bruges
     direkte: serie-4 er den gule #eda100 med 2,17:1 mod hvidt kort — et
     ikon i den farve er ikke der — og serie-2/4/6/8 ligger 5-11 ΔE fra en
     STATUSFARVE, så en orange eller grøn gruppe ville læses som et signal
     om linket. De tre nedenfor er valgt på begge tal: over 3:1 mod kortet,
     og over ΔE 19 fra nærmeste status.
       blå    #2a78d6 = serie-1        4,42:1   ΔE 45 fra kritisk
       violet #4a3aa7 = serie-7        8,56:1   ΔE 40 fra kritisk
       magenta #b64876 = serie-5 mørkere 5,03:1 ΔE 19 fra kritisk */
  --udforsk-person: #2a78d6;
  --udforsk-risiko: #a34a2a;
  --udforsk-selskab: #4a3aa7;
  --udforsk-forandring: #b64876;
}

/* ── Cifre ──────────────────────────────────────────────────────────────
   Den eneste globale ændring, og den mest umiddelbart synlige: med ni års
   regnskaber i 11 talkolonner er proportionale cifre grunden til at
   kolonnerne ikke flugter. tabular-nums rører kun cifre — tekstkolonner i
   samme tabel er upåvirkede. */
.table td, .table th,
.tal, .kpi-vaerdi {
  font-variant-numeric: tabular-nums;
}

/* ── Sektioner ──────────────────────────────────────────────────────────
   scroll-margin-top holder overskriften fri af den klæbende sektionsstribe
   når man hopper til et anker — uden den lander titlen under striben. */
.sektion {
  margin-bottom: var(--rum-8);
  scroll-margin-top: 4.5rem;
}
.sektion-titel {
  font-size: var(--skrift-5);
  font-weight: 600;
  letter-spacing: -.01em;
  padding-bottom: var(--rum-2);
  margin-bottom: var(--rum-4);
  border-bottom: 1px solid #dee2e6;
}
.sektion-titel .badge {
  font-weight: 500;
  vertical-align: middle;
}

/* ── Underkort ──────────────────────────────────────────────────────────
   Kortene INDE i en sektion har ingen headerbjælke. Det er den vigtigste
   enkeltregel i hele designsystemet: bjælken er hvad der gør 19 kasser
   ens. Her bærer titlen sig selv, og rammen er hårfin. */
.underkort {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: .5rem;
  padding: var(--rum-4);
  margin-bottom: var(--rum-4);
}
.underkort-titel {
  font-size: var(--skrift-4);
  font-weight: 600;
  margin-bottom: var(--rum-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rum-2);
}
.underkort-fod {
  font-size: var(--skrift-2);
  color: #6c757d;
  margin-top: var(--rum-3);
  padding-top: var(--rum-2);
  border-top: 1px solid #f1f3f5;
}

/* ── Stamdata ───────────────────────────────────────────────────────────
   Boksen havde 15 rækker adskilt af 15 ens hårstreger. Streger der vejer
   lige meget grupperer ingenting — de siger kun "her slutter en linje", og
   med femten af dem står adressen, selskabskapitalen og formålsparagraffen
   som ligeværdige naboer.

   Derfor: streg kun MELLEM de fire grupper (identitet · kontakt · drift ·
   formelt), afstand indeni. Det er samme greb som --rum-8 bruger mellem
   sektionerne — afstanden er hvad der gør grupperingen synlig. */
.stam-gruppe + .stam-gruppe {
  border-top: 1px solid #f1f3f5;
  margin-top: var(--rum-3);
  padding-top: var(--rum-3);
}
.stam-felt { margin-bottom: var(--rum-3); }
.stam-felt:last-child { margin-bottom: 0; }
.stam-label {
  font-size: var(--skrift-2);
  color: #6c757d;
  letter-spacing: .01em;
  line-height: 1.2;
}
.stam-vaerdi {
  font-size: var(--skrift-4);
  color: #212529;
  font-weight: 500;
  margin-top: 1px;
}
/* Formål og tegningsregel er brødtekst, ikke værdier. Med samme vægt som et
   beløb ville to afsnit vedtægtsprosa dominere hele boksen. */
.stam-vaerdi.er-lang {
  font-size: var(--skrift-4);
  font-weight: 400;
  color: #495057;
}
/* To korte tal side om side. auto-fit falder af sig selv til én spalte når
   skinnen er stakket under hovedspalten under lg. */
.stam-par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--rum-3);
}
.stam-par .stam-felt { margin-bottom: 0; }

/* Identitetslinjen. CVR-nummeret er det man bærer videre — til Skat, til
   banken, til en mail — så det står med cifferfast skrift og har sin egen
   knap i stedet for at skulle markeres med musen i en 400 px skinne. */
.stam-id {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rum-2);
  font-size: var(--skrift-4);
}
.stam-kopi {
  border: 0;
  background: none;
  padding: 0;
  line-height: 1;
  color: #adb5bd;
  font-size: var(--skrift-3);
}
.stam-kopi:hover, .stam-kopi:focus { color: #6c757d; }

/* Foldeknapper (vedtægter, tidligere binavne, flere p-numre). Samme
   dæmpede vægt som .hjaelp: de skal kunne findes, ikke ses først. */
.stam-fold {
  font-size: var(--skrift-3);
  color: #6c757d;
  text-decoration: none;
}
.stam-fold:hover, .stam-fold:focus { color: #212529; }
.stam-fold .bi-chevron-down {
  display: inline-block;
  font-size: var(--skrift-2);
  transition: transform .15s;
}
.stam-fold[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* Samme vending, men på et kort-hoved der ER collapse-udløseren. Reglen stod
   inline i virksomhed_ny.html i TRE identiske <style>-blokke (Fuld
   opstilling, Tidligere ejere, Registreringshistorik) — samlet her 29. aug
   2026. En inline <style> midt i <body> er render-blokerende arbejde der ikke
   kan caches, og tre kopier af den samme regel er tre steder at rette.
   :not(.collapsed) og ikke [aria-expanded]: Bootstrap fjerner .collapsed fra
   udløseren når panelet er åbent, og hovedet er åbent i sin startstand på de
   kort hvor det er meningen. */
.card-header[data-bs-toggle="collapse"]:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

/* ── Overbliksbånd ──────────────────────────────────────────────────────
   auto-fit frem for et fast antal spalter: felterne er betingede (omsætning
   er kun udfyldt i 7,5 % af regnskaberne, ansatte i 52,1 %), så antallet
   svinger fra selskab til selskab. Med auto-fit fylder de altid bredden ud
   i stedet for at efterlade tomme celler. */
.kpi-stribe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--rum-3);
}
.kpi {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: .5rem;
  padding: var(--rum-3);
}
.kpi-label {
  font-size: var(--skrift-2);
  color: #6c757d;
  line-height: 1.2;
}
.kpi-vaerdi {
  font-size: var(--skrift-6);
  font-weight: 600;
  line-height: 1.15;
  margin-top: 2px;
}
/* Bart .er-negativ med (6. sep 2026): reglen gælder nu også tal der ikke
   sidder i en KPI-flise — «Bruttofortj. pr. årsværk» og «Vækst i
   bruttofortjeneste» er .fs-5 i en bordered boks. Farven er den samme, så
   ét negativt tal ser ens ud uanset hvilken ramme det står i. */
.kpi-vaerdi.er-negativ, .er-negativ { color: var(--tal-negativ); }
/* Modstykket. Tokenet fandtes allerede, men havde ingen klasse, fordi
   overblikbåndet kun farver NEGATIVE tal — dér er en positiv egenkapital
   normaltilstanden og skal ikke fejres. I aflæsningsboksen under
   egenkapitalværdi-grafen er fortegnet derimod selve pointen. */
.kpi-vaerdi.er-positiv { color: var(--tal-positiv); }

/* ── Aflæsning under en graf ────────────────────────────────────────────
   Fælles for egenkapitalværdi- og selskabskapitalkortet. Indholdet skifter
   hver gang markøren flytter sig, og både labelen («Egenkapitalværdi
   jan. 2019» mod «Rejst i runden») og underteksten skifter linjeantal
   undervejs. Uden reserveret plads flyttede flisernes underkant sig — og
   dermed hele resten af siden — ved hver bevægelse af musen.

   Labelen reserverer to linjer, så de store tal står på SAMME linje i alle
   fliserne. Resten af reserven ligger på FLISEN og ikke på de enkelte dele:
   så bliver underteksten stående lige under sit tal, og luften samler sig i
   bunden. Lå reserven på hver del, stod der et hul mellem tallet og teksten.

   nowrap er det der gør reserven mulig: underteksten er bygget som to
   linjer med et hårdt linjeskift, og uden nowrap kunne et langt tal (kurser
   går op til «2.210.800.000.000,00») ombryde til en tredje. Reserven skulle
   så dække tre linjer, og den tredje stod tom på alle andre selskaber.

   Antallet af fliser er låst pr. side i JS'et af samme grund — en flise der
   kommer og går flytter alt under grafen. */
.kpi-aflaesning .kpi-label { min-height: 2.4em; }   /* 2 × line-height 1.2 */
.kpi-aflaesning .kpi-enhed { line-height: 1.3; white-space: nowrap; }
/* Tallet holdes på ÉN linje, og det kræver at det kan VÆRE på én linje.
   «170,6 mio. kr.» ved 1.5 rem er bredere end en flise på ~155 px og ombrød
   til to — reserven blev sprængt af netop de beløb der har flest cifre.
   1.25 rem rummer det længste tilfælde og er stadig det største i flisen. */
.kpi-aflaesning .kpi-vaerdi { font-size: var(--skrift-5); white-space: nowrap; }
/* Et ORD i tal-slotten er ikke et tal og skal ikke sættes som et. «Ingen
   udvanding» ved 1.25 rem er 12 px bredere end flisen; ved 1 rem er det
   ikke. Modifikatoren sættes af JS'et på de fliser hvor værdien er en
   betegnelse og ikke en størrelse — den er stadig lavere end reserven, så
   den kan ikke få striben til at skifte højde. */
.kpi-aflaesning .kpi-vaerdi.er-tekst { font-size: var(--skrift-4); }
.kpi-aflaesning .kpi { min-height: 8.6rem; }

/* Udviklingsgrafen kan have fem serier og kapitalrejsningen seks fliser med
   totalen. Med .kpi-stribes 150 px-minimum brød de over to rækker, og en
   stribe på 4 + 1 ser ud som om noget er faldet ned. Her er både minimum og
   talstørrelse skruet ned, så de er på én række. Sættes af JS ud fra
   flisetallet, som er fast pr. side — aldrig pr. hovret kategori. */
.kpi-aflaesning.er-smal { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.kpi-aflaesning.er-smal .kpi-vaerdi { font-size: var(--skrift-4); }

/* Fortegnsfarve på ÆNDRINGEN, ikke på niveauet. En egenkapital på 22,1 mio.
   der er faldet 4 % er ikke et negativt tal — men farvede man værdien rød,
   læste den som ét. Værdien står derfor i normalt blæk, og det er linjen
   under der bærer retningen. Samme to tokens som .graf-delta bruger. */
.kpi-aflaesning .kpi-enhed .op  { color: var(--tal-positiv); }
.kpi-aflaesning .kpi-enhed .ned { color: var(--tal-negativ); }

/* Et NAVN må gerne klippes — hele listen med links står ét klik væk i
   listevisningen, og navne går op til 145 tegn. Et TAL må ikke, og har
   derfor ikke denne klasse. */
.kpi-aflaesning .kpi-enhed .klip {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-enhed {
  font-size: var(--skrift-3);
  font-weight: 400;
  color: #6c757d;
}

/* ── Klæbende sektionsstribe ────────────────────────────────────────────
   DET ER STRIBEN DER KLÆBER, IKKE SKINNEN. En klæbende sidespalte der er
   højere end vinduet kan ikke rulles til bunden — indholdet nederst bliver
   uopnåeligt. Striben er nogle få linjer høj og har ikke det problem. */
.sektionsnav {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(248, 249, 250, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #dee2e6;
  margin-bottom: var(--rum-6);
}
/* .sektionsnav-link, ikke bare ".sektionsnav a": et underpunkt i en
   dropdown-menu er OGSÅ en <a>-efterkommer af .sektionsnav, og skal ikke
   arve fanernes farve/understregningsstil — kun selve fanen skal. */
.sektionsnav-link {
  display: inline-block;
  padding: var(--rum-3) var(--rum-2);
  font-size: var(--skrift-4);
  color: #6c757d;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.sektionsnav-link:hover { color: #212529; }
.sektionsnav-link.active {
  color: #212529;
  font-weight: 600;
  border-bottom-color: var(--graf-accent);
}
/* Split-trigger: fanetitlen navigerer som før, chevronen ved siden af er
   den faktiske dropdown-toggle. Se devblog for begrundelsen — gør hele
   fanen til toggle, og et klik ville kun åbne menuen, ikke hoppe ned. */
.sektionsnav-item {
  display: inline-flex;
  align-items: center;
}
.sektionsnav-caret {
  background: none;
  border: none;
  padding: 0 var(--rum-2) 0 0;
  color: #adb5bd;
  font-size: var(--skrift-2);
  line-height: 1;
}
.sektionsnav-caret:hover,
.sektionsnav-caret[aria-expanded="true"] { color: #6c757d; }
.sektionsnav-caret i { display: inline-block; transition: transform .15s ease; }
.sektionsnav-caret[aria-expanded="true"] i { transform: rotate(180deg); }
.sektionsnav .dropdown-menu { font-size: var(--skrift-4); }
/* Samme begrundelse som .sektion herover — den sticky fanebjælke må ikke
   dække overskriften når man hopper til et underpunkt. */
.card[id^="k-"] { scroll-margin-top: 4.5rem; }
/* Relationsgrupperne har ankre (#rel-hvidvask fra mærket i statuslinjen og
   fra linjen under Ledelse-kortet) — samme frihøjde under striben. */
.rel-gruppe[id^="rel-"] { scroll-margin-top: 4.5rem; }
/* /admin/feedback: 303 lander på #fb-<id>, og rækken skal ikke gemme sig under navbaren. */
tr[id^="fb-"] { scroll-margin-top: 4.5rem; }

/* ── Grafhøjder ─────────────────────────────────────────────────────────
   KUN TRE, og de sættes på en wrapper — ikke som max-height på <canvas>.
   Med maintainAspectRatio:false styrer Chart.js selv canvas' attributter,
   og en max-height dér kæmper mod den. Højden hører til i layoutet.

   Før dette brugte siden fem højder (90/220/260/280/320 px) uden regel. */
.graf-mini { height: 44px;  position: relative; }   /* sparkline i båndet */
/* Skinnen er smal — .stam-par-cellerne er 120 px brede — og 44 px høj kurve
   dér gør feltet dobbelt så højt som naboerne "Etableret" og "Kapital".
   Halv højde er nok til at vise en retning, som er alt kurven skal her.

   Samme afvejning gælder i overbliksbåndet, hvor kpi() kan bede om den med
   spark_lav: .kpi-stribe er et grid, så alle kort strækkes til det højeste.
   Har striben kurver i næsten alle kort (selskabssiden) er de 44 px gratis;
   har den én ud af fem (personsiden) efterlader de fire kort halvtomme. */
.graf-mini-lav { height: 24px; }
.graf-lav  { height: 180px; position: relative; }   /* korte serier, fx løn */
.graf-std  { height: 260px; position: relative; }   /* arbejdshesten */
.graf-stor { height: 340px; position: relative; }   /* ejerskab over tid */

/* ── Markering af den runde man peger på ────────────────────────────────
   Et bånd bag grafen, ikke en streg over den: markeringen er en STEDANGIVELSE
   og må ikke lægge blæk oven i data. Derfor sideplanets farve — samme grå som
   siden udenom kortet — og z-index under canvas.

   Canvas har ingen egen stablingskontekst af sig selv, så .graf-std > canvas
   får position+z-index her; uden dem tegnes båndet OVEN PÅ kurven, fordi et
   absolut positioneret element ellers vinder over en statisk søskende. */
.graf-baand {
  position: absolute;
  pointer-events: none;
  background: var(--graf-sideplan);
  z-index: 0;
  display: none;
}
.graf-std > canvas, .graf-stor > canvas, .graf-lav > canvas {
  position: relative;
  z-index: 1;
}

/* ── Ændring mellem to årstal, lige under x-aksen ───────────────────────
   Overlay inde i grafwrapperen, ikke en stribe under den. Chart.js tegner
   legenden INDE i canvas, så en søskende-stribe havnede under legenden og
   dermed langt fra de årstal mærkerne beskriver — synligt på et screenshot,
   usynligt i en positionsmåling.

   JS'et sætter top ud fra chart.scales.x.bottom, så mærkerne følger aksen
   uanset om grafen har legende eller ej. pointer-events: none, så de aldrig
   stjæler et tooltip fra kurven. */
.graf-delta {
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  pointer-events: none;
}

/* Mindre end årstallene lige ovenover (11 px). Var .7rem = 11,2 px, altså
   nøjagtig samme vægt som aksens egne tal — så kunne øjet ikke se hvilken
   talrække der var data og hvilken der var kommentar. tabular-nums giver
   cifrene samme bredde, så rækken af mærker står på linje i stedet for at
   vippe efter hvor mange ettaller der tilfældigvis er i tallene. */
.graf-delta span {
  position: absolute;
  transform: translateX(-50%);
  font-size: var(--skrift-1);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
/* Bundet til de samme statusfarver som ejerstakkens ▲/▼, så en stigning har
   én farve på hele siden. */
.graf-delta .op  { color: var(--status-god); }
.graf-delta .ned { color: var(--status-kritisk); }

/* ── Ejerfordeling som stakbjælke ───────────────────────────────────────
   Afløser donut'en. Den fyldte 220 px på 96 % af siderne, men 75 % af de
   besøgte selskaber har 0-1 ejere — så tegnede den én massiv ring. */
.ejerstak {
  display: flex;
  height: 24px;
  border-radius: .25rem;
  overflow: hidden;
  background: #e9ecef;
}
.ejerstak > span {
  display: block;
  height: 100%;
  min-width: 2px;
}

/* ── Forkortede beløb ───────────────────────────────────────────────────
   "56,7 mio." frem for "56.659.573 kr." i regnskabstabellen. Tallet må
   aldrig brydes over to linjer — en kolonne hvor "mio." er faldet ned på
   næste linje er værre end den lange form. Det fulde beløb ligger i
   data-fuld og følger med i udklipsholderen. */
.tal-kort { white-space: nowrap; }

/* ── Kompakt taltabel ───────────────────────────────────────────────────
   Regnskabstabellen har 11 talkolonner og scrollede vandret selv i den
   brede spalte. Bootstraps .table-sm bruger .25rem lodret og .5rem vandret
   polstring; her strammes kun den VANDRETTE, fordi det er bredden der er
   problemet — linjeafstanden er fin som den er. .35rem × 2 × 11 kolonner
   sparer ~66 px uden at cellerne rører hinanden.

   white-space: normal på th er ikke default-brydende af sig selv, men
   modvirker .text-nowrap-arv og gør det utvetydigt at overskrifter i to ord
   MÅ bryde over to linjer. vertical-align: bottom holder dem på linje med
   de ét-linjede når nogle bryder. */
.tabel-tal > :not(caption) > * > * {
  padding-left: .35rem;
  padding-right: .35rem;
}
.tabel-tal thead th {
  white-space: normal;
  vertical-align: bottom;
  line-height: 1.15;
}

/* Overskrifterne er centrerede, tallene under dem højrestillede. Det er
   bevidst: en centreret overskrift står lige langt fra begge kanter og
   fungerer derfor ens over en kort og en lang talkolonne, mens tallene
   SKAL stå højre, fordi det er dét der får cifrene til at flugte lodret
   (sammen med tabular-nums øverst i filen). At binde overskriften til
   samme kant ville kun betyde noget hvis kolonnerne var brede nok til at
   overskriften kunne komme i tvivl om hvad den hører til — her er de
   knap så brede som deres eget indhold. */
.tabel-tal thead th.text-center { text-align: center; }

/* Mærket på et beløb der er UDBETALT og ikke foreslået. Det skal kunne ses
   uden at læses — derfor hævet og lysere; den der ikke undrer sig over det,
   læser bare tallet. Ingen margin til venstre: mærket skal klæbe til tallet,
   ellers ligner det en egen kolonne. */
.udb-maerke {
  font-size: var(--skrift-1);
  color: #adb5bd;
  margin-left: 1px;
}

/* Forkortet kolonneoverskrift. Bootstrap sætter allerede text-decoration
   på abbr[title]; her gøres stregen svag nok til ikke at trække blikket,
   og cursor: help fortæller at der er noget at pege på. */
.kol-kort {
  text-decoration: underline dotted rgba(0,0,0,.35);
  text-underline-offset: 2px;
  cursor: help;
}

/* ── Relationer ─────────────────────────────────────────────────────────
   [hidden] på en <tr> sættes af browserens egen stylesheet til
   display:none, men enhver regel med højere specificitet der sætter
   display ville slå den. Bootstrap sætter det ikke i dag — og netop derfor
   står den her: filtrene bliver tavst virkningsløse hvis det ændrer sig,
   og en filterknap der ikke filtrerer ligner data der mangler. */
.rel-raekke[hidden], .rel-gruppe[hidden] { display: none !important; }

/* Tælleren ved gruppens titel viser hvad der FAKTISK står under den efter
   filtrering, så den skifter mens man klikker. Den skal derfor ikke trække
   blikket til sig som et selvstændigt tal. */
.rel-antal { font-size: var(--skrift-3); }

/* Fælles kolonnebredder på tværs af rollegrupperne.

   Hver gruppe er sin egen <table>, og med table-layout:auto måler hver af dem
   sit eget indhold. Målt på Zetland stod navnekolonnen på 319, 385, 388 og
   598 px i de fire grupper, og datokolonnerne begyndte fire forskellige
   steder — det er dét der får sektionen til at sejle.

   Auto måler desuden kun de rækker der IKKE er hidden, og JS'et skjuler
   rækker ved hvert filterklik og hvert tastetryk i søgefeltet. Bredderne
   hopper derfor også inden i den enkelte tabel over tid: et filter der
   efterlader "Formand" giver en anden rollebredde end et der efterlader
   "Næstformand". table-layout:fixed læser kun første række og ignorerer
   tbody helt, så begge dele forsvinder i ét greb.

   PROCENT OG IKKE REM, og det er en målt beslutning: hver gruppe har sin egen
   .table-responsive. Faste bredder der overskrider pladsen ville få grupperne
   til at scrolle vandret UAFHÆNGIGT af hinanden, og så er flugten tabt igen på
   en værre måde. Procenter kan ikke overskride, så wrapperen udløses aldrig.

   Kun fra md: under 768 px klemmes tabellen til ~332 px, og 16 % ville give
   rollekolonnen 50 px — for lidt til "Formand", som er ét ord og ikke kan
   ombryde. På mobil kan man alligevel ikke se to tabeller samtidig, så
   flugten mellem dem er uden værdi dér. */
@media (min-width: 768px) {
  #relationer table { table-layout: fixed; }
  #relationer thead th:nth-child(1) { width: 45%; }
  /* Rummer "Næstformand", den længste værdi rolle_kort() kan give. Kolonnen
     står tom for Stiftere og Revisorer — pladsen er prisen for at datoerne
     flugter hele vejen ned. */
  #relationer thead th:nth-child(2) { width: 16%; }
  #relationer thead th:nth-child(3),
  #relationer thead th:nth-child(4) { width: 19.5%; }
}

/* ── Hjælpetekst ────────────────────────────────────────────────────────
   Ét ?-mærke i stedet for 81 spredte title-attributter, hvoraf 43 var rå
   browser-tooltips: de virker ikke på touch, kan ikke styles og venter et
   sekund før de kommer. */
.hjaelp {
  color: #adb5bd;
  cursor: pointer;
  /* Fast trin og ikke .875em: spørgsmålstegnet sad næsten altid i en tabel
     og blev derfor 11,375px — et tal ingen havde skrevet, og det næst-
     hyppigste på hele sitet. */
  font-size: var(--skrift-2);
}
.hjaelp:hover, .hjaelp:focus { color: #6c757d; }
.popover { max-width: 22rem; }
.popover-body { font-size: var(--skrift-3); }

/* ── Graf-legend ────────────────────────────────────────────────────────
   Identitet må ikke hvile på farve alene. Tre af de otte kategorifarver
   ligger under 3:1 mod den hvide flade (aqua 2,82 · gul 2,17 · magenta
   2,69), og en læser med deuteranopi skal kunne finde en bestemt ejer uden
   at matche nuancer mod en graf. Frem til 16. aug 2026 havde stakgraferne
   hverken legend eller tabelvisning — man kunne kun læse dem ved at holde
   musen stille over hvert enkelt segment.

   HTML og ikke Chart.js' egen legend: den skal kunne brydes over flere
   linjer med ti navne, markeres med musen og læses op. Chart.js tegner sin
   ind i canvas, hvor den ikke kan noget af det.

   Teksten bærer ALDRIG seriefarven — prikken ved siden af bærer
   identiteten. En gul eller aqua tekstfarve ville være ulæselig. */
.graf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rum-1) var(--rum-3);
  list-style: none;
  padding: 0;
  margin: var(--rum-3) 0 0;
  font-size: var(--skrift-2);
  color: var(--graf-blaek-2);
}
.graf-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--rum-1);
}
.graf-legend-prik {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}

/* ── Mærker inde i stakken ──────────────────────────────────────────────
   ▲/▼ ligger OVEN PÅ en fladefarve. Grøn/rød-konventionen er værd at
   beholde, men den kan ikke bære læsbarheden alene: status-grøn og
   serie-6 er begge grønne (ΔE 9,7), status-rød og serie-8 begge røde
   (4,8). FORMEN bærer retningen, og RINGEN gør mærket læsbart uanset hvad
   det ligger på.

   Otte skarpe skygger uden slør — ikke den slørede text-shadow der stod
   her før, som fik mærket til at se ude af fokus ud på hvid baggrund.
   -webkit-text-stroke duer ikke: den tegner stregen gennem glyffen og gør
   ▲ til en klat. paint-order:stroke findes kun for SVG-tekst. */
.stak-maerke {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: var(--skrift-3);
  line-height: 1;
  cursor: default;
  pointer-events: auto;
  text-shadow:
     2px 0 0 var(--graf-flade), -2px 0 0 var(--graf-flade),
     0 2px 0 var(--graf-flade),  0 -2px 0 var(--graf-flade),
     1.4px 1.4px 0 var(--graf-flade),  -1.4px 1.4px 0 var(--graf-flade),
     1.4px -1.4px 0 var(--graf-flade), -1.4px -1.4px 0 var(--graf-flade);
}
.stak-op { color: var(--status-god); }
.stak-ned { color: var(--status-kritisk); }

/* ⊕/⊖ under x-aksen. De ligger på den hvide side, ikke inde i et segment,
   og skal netop IKKE kunne forveksles med en seriefarve — derfor to vægte
   af blæk og ikke to kulører. Ikke status-farver heller: en ejer der
   træder ud er hverken "god" eller "kritisk", og status er reserveret. */
.stak-ikon-ny, .stak-ikon-ud { cursor: default; }
.stak-ikon-ny { color: var(--graf-blaek-2); }
.stak-ikon-ud { color: var(--graf-blaek-daempet); }

/* ── Årstabeller med år som kolonner ─────────────────────────────────────
   Retningen er brugerens valg (brugere.aars_retning, knappen .aars-vend, se
   visning.js). Begge retninger renderes, og .aars-vandret/.aars-lodret vælger
   med d-none — reglerne herunder gælder derfor kun den ene af dem, uanset
   hvilken der står frem. Regnskabsopstillingen bruger dem altid: 60 poster
   som kolonner er ikke en tabel man kan læse.

   Vendingen gør ikke tabellen smallere — elleve kolonner gange tolv år bliver
   tolv gange elleve — så den scroller stadig vandret. Forskellen er at
   rækkeetiketten nu bærer betydningen: scroller "Personaleomkostning pr.
   ansat" ud af syne, er de resterende tal anonyme. Derfor står første
   kolonne fast.

   position: sticky virker kun med en scroll-forælder, og den er
   .table-responsive fra kaldestedet. Makroen renderer bevidst ingen egen
   wrapper, så der kun er én kandidat. */
.aars-pivot .aars-fast {
  position: sticky;
  left: 0;
  z-index: 2;
  /* Ugennemsigtig baggrund er ikke pynt: uden den skinner de celler der
     scroller forbi, igennem den klæbende kolonne. --graf-flade og ikke
     white, så den følger kortets flade hvis den nogensinde ændres. */
  background: var(--graf-flade);
}

/* Overskriftscellen i hjørnet skal ligge over BEGGE: den er både klæbende
   vandret (som kolonnen) og lodret sammen med sin thead-række. */
.aars-pivot thead .aars-fast {
  z-index: 3;
  background: var(--bs-table-bg, #f8f9fa);
}

/* Hårfin kant som eneste markering af at kolonnen står stille. Ikke en
   skygge: sitets konvention er separation via 1 px ramme, ikke slør — se
   .card og stak-mærkerne. */
.aars-pivot .aars-fast { border-right: 1px solid var(--graf-gitter); }

/* Årskolonnerne må ikke blive smallere end deres tal, ellers bryder
   "1,2 mio." over to linjer og rækkehøjden hopper fra række til række. */
.aars-pivot td, .aars-pivot thead th { white-space: nowrap; }

/* ── Regnskabsopstilling ────────────────────────────────────────────────
   En opstilling har sektioner (Resultatopgørelse, Balance) og indrykkede
   underposter. Sektionsrækken bærer sin egen baggrund på den klæbende
   celle — arves den fra tabellen, bliver overskriften gennemsigtig præcis
   dér hvor tallene glider ind under den, og det er den ene celle på siden
   hvor det ville ses tydeligst. */
.aars-pivot tbody .aars-sektion {
  background: var(--bs-table-bg, #f8f9fa);
  border-top: 1px solid var(--graf-gitter);
}

/* Underposter rykkes ind, som i en trykt opstilling. Indrykningen er den
   eneste markering af niveau, så den skal være tydeligt større end den
   optiske forskel på fed og normal tekst. */
.aars-pivot .aars-detalje { padding-left: 1.75rem; font-weight: 400; }

/* ── Forslag mens man skriver ───────────────────────────────────────────
   Tredje forekomst af samme boks: /vej og /kendte/admin har den som inline
   styles (position-absolute w-100 z-index:1050). Den bor her nu, så de to
   kan følge efter i stedet for at blive en fjerde kopi.

   .soeg-anker er positioneringsforælderen. Uden den ankres listen til
   <body>, og i topbjælken — der er d-flex flex-wrap — bliver den stående
   når feltet ombrydes ned på egen linje. */
/* Søgefeltet i navbaren. Stod inline i base.html frem til 29. aug 2026 —
   et <style> midt i <body> er render-blokerende arbejde på hver eneste side
   og kan ikke caches. */
.navbar-search-input {
  background-color: rgba(255, 255, 255, .1);
  color: #fff;
  border-color: rgba(255, 255, 255, .2);
}
.navbar-search-input::placeholder { color: rgba(255, 255, 255, .6); }
.navbar-search-input:focus {
  background-color: rgba(255, 255, 255, .15);
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
  box-shadow: none;
}

.soeg-anker { position: relative; }

.soeg-forslag {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  max-height: 20rem;
  overflow-y: auto;
  /* Ramme OG skygge: .list-group-item får sine sidekanter fjernet globalt
     længere oppe i denne fil, så en flydende liste ville stå uden lodrette
     kanter og se utæt ud oven på indholdet under. */
  border: 1px solid var(--graf-gitter);
  border-radius: .375rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
  background: var(--graf-flade);
}

/* Rækkerne er tætte med vilje — seks forslag skal kunne ses uden at rulle,
   ellers er tastaturnavigationen blind under den fjerde. */
.soeg-forslag .list-group-item { border-left: none; border-right: none; }
.soeg-forslag .list-group-item:first-child { border-top: none; }
.soeg-forslag .list-group-item:last-child { border-bottom: none; }

/* Rækkens enhed ("mio. kr.") står ved etiketten, ikke i hver celle. Dæmpet og
   mindre, fordi den er en målestok og ikke en del af postens navn — læses den
   som navnets sidste ord, står der "Nettoomsætning mio". */
.aars-pivot .aars-enhed {
  color: var(--graf-blaek-daempet);
  font-weight: 400;
  font-size: var(--skrift-2);
  margin-left: .35rem;
  white-space: nowrap;
}

/* ── Min side: hændelsesfeed og favoritnoter ────────────────────────────
   Feedet er en liste af daterede ting, ikke en tabel. Datoen står i en fast
   kolonne til venstre så øjet kan løbe ned ad den uden at læse teksten —
   det er den eneste grund til at bruge en fast bredde her. */
.feed-dato {
  min-width: 3.9rem;
  font-variant-numeric: tabular-nums;
}

/* Ikonet bærer hændelsestypen. Farven er den samme skala som resten af
   sitet bruger til status, så et flag er rødt hvor det plejer at være rødt. */
.feed-ikon {
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
  color: var(--graf-blaek-daempet);
}
.feed-flag          { color: var(--status-kritisk); }
.feed-status        { color: var(--status-kritisk); }
.feed-kapital       { color: var(--status-god); }
.feed-ny_rolle      { color: var(--status-god); }
.feed-ophoert_rolle { color: #6c757d; }

/* Nyt siden sidste besøg. En kant til venstre frem for en baggrundsfarve:
   feedet kan have tyve nye poster i træk, og tyve farvede rækker er ikke en
   markering, det er en ny baggrund. */
.feed-ny { border-left: 3px solid var(--bs-primary); }
.feed .list-group-item { border-left: 3px solid transparent; }

/* Noten er sidens egentlige indhold for den der bruger den — derfor står den
   som tekst og ikke bag et ikon. Hover-fladen siger at den kan redigeres,
   uden at der skal være en knap. */
.fav-note { margin-top: var(--rum-3); }
.fav-note-tekst {
  font-size: var(--skrift-3);
  white-space: pre-wrap;
  border-radius: .25rem;
  padding: .25rem .375rem;
  margin: -.25rem -.375rem;
  cursor: text;
}
.fav-note-tekst:hover { background: #f8f9fa; }
.fav-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: var(--rum-2);
}
.fav-chips .badge { font-weight: 500; }
.fav-tal { margin-top: var(--rum-2); font-variant-numeric: tabular-nums; }


/* ══════════════════════════════════════════════════════════════════════════
   PROFILKORTENES INDRE (.kv-*)

   Flyttet hertil 25. aug 2026 fra ledelsesprofil.html, som havde et helt
   selvstændigt designsystem med sine egne farvetokens ved siden af husets.

   TOKENS ER BUNDET TIL HUSETS. Det er hele pointen med flytningen: ændrer
   nogen paletten ét sted, følger profilkortene med. Klassenavnene bærer
   stadig kv-præfikset, og det er en bevidst afvejning — at omdøbe 300
   linjers markup og to JS-rendere i hånden samme dag som sammenlægningen er
   nøjagtig dér fejl kommer fra. Præfikset er kosmetik; to stilark var det
   ikke.

   Ydersiden — kort, sektioner, kolonner — er husets .card og .sektion.
   Kun kortenes INDRE er tilbage her.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --kv-surface: #fff;
  --kv-ink: #212529;
  --kv-ink-2: #52514e;
  --kv-muted: #6c757d;
  --kv-grid: var(--graf-gitter);
  --kv-axis: var(--graf-akse);
  --kv-ring: rgba(11, 11, 11, .10);
  --kv-s1: var(--graf-accent);
  --kv-s2: var(--graf-serie-2);
  --kv-s3: var(--graf-serie-3);
  --kv-good: var(--status-god);
  --kv-warning: var(--status-advarsel);
  --kv-serious: var(--status-alvorlig);
  --kv-critical: var(--status-kritisk);
  --kv-best: var(--status-bedst);
  --kv-pos: var(--tal-positiv);
  --kv-total: #52514e;
  --kv-seq-100: #cde2fb;
  --kv-seq-600: #184f95;
}
.kv-h2{font-size: var(--skrift-3);font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--kv-ink-2);margin:0 0 4px}
.kv-sub{font-size: var(--skrift-3);color:var(--kv-muted);margin:0 0 18px}
.kv-person{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.kv-avatar{width:52px;height:52px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--kv-seq-100);color:var(--kv-seq-600);font-weight:680;font-size: var(--skrift-4);letter-spacing:.02em}
.kv-person .kv-nm{font-size: var(--skrift-5);font-weight:660;letter-spacing:-.01em;line-height:1.2}
.kv-person .kv-meta{font-size: var(--skrift-3);color:var(--kv-muted)}
.kv-hero{display:flex;align-items:baseline;gap:9px;margin-top:2px}
.kv-hero .kv-n{font-size: var(--skrift-8);font-weight:600;letter-spacing:-.035em;line-height:.95}
.kv-hero .kv-d{font-size: var(--skrift-4);color:var(--kv-muted);font-weight:500}
.kv-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px 4px 8px;
  font-size: var(--skrift-3);font-weight:620;border:1px solid var(--kv-ring);margin-top:12px}
.kv-chip .kv-ic{font-size: var(--skrift-2);line-height:1}
.kv-rows{display:flex;flex-direction:column;gap:11px}
.kv-row{display:grid;grid-template-columns:152px minmax(0,1fr) 54px;align-items:center;gap:12px}
.kv-row .kv-lab{font-size: var(--skrift-3);color:var(--kv-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv-row .kv-lab .kv-tick{color:var(--kv-muted);margin-right:5px}
.kv-row .kv-val{font-size: var(--skrift-3);font-weight:640;text-align:right;font-variant-numeric:tabular-nums}
.kv-bar{height:14px;background:linear-gradient(to right,var(--kv-grid) 0 1px,transparent 1px) 0 0/  25% 100%;
  border-radius:2px;position:relative}
.kv-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;background:var(--kv-s1)}
.kv-axisline{margin-top:10px;display:flex;justify-content:space-between;font-size: var(--skrift-1);color:var(--kv-muted);
  border-top:1px solid var(--kv-grid);padding-top:5px}
.kv-axisline.kv-offs{margin-left:164px;margin-right:66px}
.kv-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:700px){.kv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kv-tile{border:1px solid var(--kv-ring);border-radius:11px;padding:13px 14px;background:var(--kv-surface)}
.kv-tile .kv-t{font-size: var(--skrift-2);color:var(--kv-muted);letter-spacing:.02em;display:flex;align-items:center;gap:5px}
.kv-tile .kv-v{font-size: var(--skrift-7);font-weight:690;letter-spacing:-.025em;line-height:1.15;margin-top:3px}
.kv-tile .kv-n{font-size: var(--skrift-2);color:var(--kv-muted)}
.kv-sw{width:8px;height:8px;border-radius:2px;flex:none}
.kv-striped{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 3.5px,transparent 3.5px 8px)!important}
.kv-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;font-size: var(--skrift-2);color:var(--kv-ink-2)}
.kv-legend span{display:inline-flex;align-items:center;gap:6px}
.kv-note{font-size: var(--skrift-2);color:var(--kv-muted);margin-top:14px;line-height:1.5}
.kv-flags{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.kv-flag-row{display:flex;gap:9px;align-items:flex-start;font-size: var(--skrift-3);color:var(--kv-ink-2)}
.kv-flag-row .kv-ic{width:16px;flex:none;text-align:center;font-size: var(--skrift-2);line-height:1.4}
.kv-lineage{display:inline-block;font-size: var(--skrift-1);padding:1px 6px;border-radius:20px;
  border:1px solid var(--kv-ring);color:var(--kv-muted);white-space:nowrap;cursor:help;vertical-align:1px}
.kv-caveat{border:1px solid var(--kv-ring);border-left:3px solid var(--kv-warning);
  border-radius:8px;padding:12px 14px;margin-top:14px;font-size: var(--skrift-2);color:var(--kv-ink-2);line-height:1.55}
#kv-tt{position:fixed;pointer-events:none;opacity:0;transition:opacity .1s;background:var(--kv-ink);
  color:var(--kv-surface);font-size: var(--skrift-2);padding:6px 9px;border-radius:7px;z-index:9;white-space:nowrap;
  transform:translate(-50%,-135%);font-weight:520}

/* De tre visninger der ikke kan bygges af noget vi har i forvejen.
   Målerbåndet: en score er ikke præcis nok til at stå som et tal alene —
   45 og 55 er det samme udsagn — og fem lige felter med en markør siger det
   uden at det skal skrives. Tidslinjen: en Gantt over 3-20 selskaber kan
   ikke laves i Chart.js uden et plugin, og den er den eneste visning der
   viser OVERLAP. Driverdiagrammet: et divergerende bånd om en nulakse. */
.kv-meter{margin-top:16px}
.kv-meter .kv-track{display:flex;gap:2px;height:9px}
.kv-meter .kv-track i{flex:1;border-radius:2px}
.kv-meter .kv-marks{display:flex;margin-top:7px;font-size: var(--skrift-1);color:var(--kv-muted);letter-spacing:.01em}
.kv-meter .kv-marks span{flex:1;text-align:center}
.kv-meter .kv-ptr{position:relative;height:11px}
.kv-meter .kv-ptr b{position:absolute;transform:translateX(-50%);font-size: var(--skrift-2);color:var(--kv-ink);font-weight:640;white-space:nowrap;top:-1px}
.kv-meter .kv-ptr b::before{content:"";position:absolute;left:50%;top:-9px;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--kv-ink)}
.kv-tl{position:relative}
.kv-tl .kv-lane{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:12px;height:26px}
.kv-tl .kv-co{font-size: var(--skrift-3);color:var(--kv-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.kv-co{text-decoration:none}
a.kv-co:hover{color:var(--kv-ink);text-decoration:underline}
.kv-tl .kv-track{position:relative;height:100%;border-left:1px solid var(--kv-grid)}
.kv-tl .kv-seg{position:absolute;top:5px;height:14px;border-radius:4px;box-shadow:0 0 0 2px var(--kv-surface)}
.kv-tl .kv-flag{position:absolute;top:2px;transform:translateX(-50%);font-size: var(--skrift-2);line-height:1}
.kv-tl .kv-yrs{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;margin-top:6px}
.kv-tl .kv-yrs .kv-sc{display:flex;justify-content:space-between;font-size: var(--skrift-1);color:var(--kv-muted);
  border-top:1px solid var(--kv-grid);padding-top:5px}
.kv-drv{display:flex;flex-direction:column;gap:9px}
.kv-drv .kv-r{display:grid;grid-template-columns:1fr 190px 60px;align-items:center;gap:12px}
.kv-drv .kv-r .kv-lab{font-size: var(--skrift-3);color:var(--kv-ink-2);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv-drv .kv-r .kv-plot{position:relative;height:15px}
.kv-drv .kv-r .kv-plot::before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--kv-axis)}
.kv-drv .kv-r .kv-plot i{position:absolute;top:1px;height:13px}
.kv-drv .kv-r .kv-plot i.kv-p{left:50%;border-radius:0 4px 4px 0;background:var(--kv-s1)}
.kv-drv .kv-r .kv-plot i.kv-n{right:50%;border-radius:4px 0 0 4px;background:var(--kv-critical)}
.kv-drv .kv-r .kv-num{font-size: var(--skrift-3);font-weight:640;font-variant-numeric:tabular-nums}
.kv-drv .kv-r .kv-num.kv-p{color:var(--kv-pos)} .kv-drv .kv-r .kv-num.kv-n{color:var(--kv-critical)}

/* ═══════════════════════════════════════════════════════════════════════
   NAVIGATION OG VENTETID
   Tilføjet 29. aug 2026 (Fase 2, oplevet hastighed).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Progressbar under navigation ───────────────────────────────────────
   Sættes af static/nav.js, som lægger .navigerer på <html> i selve
   klik-håndteringen. Se den fil for hvorfor baren aldrig når 100 %.

   ::before PÅ <html> og ikke et element nav.js indsætter: en indsættelse
   koster et layout på en side der i forvejen er ved at blive forladt, og
   pseudo-elementet findes allerede — det skal bare males. Samme grund til
   at den animeres med width frem for transform: baren er 3 px høj, så
   en scale() på x-aksen ville være billigere, men også kræve et
   wrapper-element at scale INDE I. Én regel er hele prisen værd her.

   z-index over .sektionsnav (1020) og Bootstraps sticky-lag, men UNDER
   modal (1055): en åben dialog skal ikke få en streg hen over sig. */
html.navigerer::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--graf-accent);
  box-shadow: 0 0 8px rgba(42, 120, 214, .55);
  z-index: 1040;
  /* Kraftig ease-out: 25 % efter et halvt sekund, 60 % efter to, og så
     asymptotisk mod 90 %. Kurven skal matche den reelle fordeling af
     svartider — de fleste sider er der på under et sekund, og for dem må
     baren ikke stå og se stillestående ud. */
  animation: nav-fremdrift 8s cubic-bezier(.05, .75, .25, 1) forwards;
}
@keyframes nav-fremdrift {
  from { width: 0; }
  to   { width: 90%; }
}
/* Uden bevægelse er baren stadig svaret på «skete der noget?» — den står
   bare stille i stedet for at krybe. Fjernes den helt, mister netop de
   brugere den eneste kvittering på klikket. */
@media (prefers-reduced-motion: reduce) {
  html.navigerer::before { animation: none; width: 45%; }
}

/* Blød overgang mellem to sideindlæsninger, hvor browseren kan (Chrome,
   Safari). Progressiv forbedring: gør intet i Firefox, og kræver hverken
   JS eller ændret markup. Den dækker netop det korte glimt af hvid side
   mellem to fulde indlæsninger, som ellers får sitet til at «blinke». */
@view-transition { navigation: auto; }

/* ── Skeletter i grafcontainerne ────────────────────────────────────────
   #cy og #netgraf er tomme kasser i 1-2 s mens cytoscape henter data og
   layouter. En tom grå kasse ser ud som «her er ingenting»; en pulsende
   gør det tydeligt at der kommer noget. Se virksomhed_ny.html (#cy) og
   _macros.html (#netgraf) for markuppen, og netgraf.js for hvor den
   fjernes igen. */
.skelet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rum-3);
  height: 100%;
  color: #6c757d;
  font-size: var(--skrift-4);
}
.skelet-boks {
  width: min(70%, 420px);
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e9ecef 25%, #f3f5f7 50%, #e9ecef 75%);
  background-size: 400% 100%;
  animation: skelet-puls 1.4s ease-in-out infinite;
}
.skelet-boks:nth-child(2) { width: min(45%, 260px); }
@keyframes skelet-puls {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skelet-boks { animation: none; background: #e9ecef; }
}

/* ── Søgeforslag: «Søger…» ──────────────────────────────────────────────
   Rækken tegnes af soeg.js når fetch faktisk affyres (efter debounce), så
   den kun ses når der reelt ventes på serveren. Ikke .list-group-item-
   action: den er ikke et forslag man kan vælge. */
.soeg-forslag .soeg-venter {
  color: #6c757d;
  font-style: italic;
  cursor: default;
}

/* Pladsholderen mens et lazy kort henter sin krop (makroen del_plads,
   _macros.html; hentningen i side.js). min-height gør Bootstraps
   højdeanimation til en glidning frem for et ryk: collapsen animerer til
   pladsholderens højde og springer så til indholdets. */
.del-plads { min-height: 4rem; display: flex; align-items: center; }

/* ── Netværksgraferne (static/netgraf.js) ───────────────────────────────
   HER STÅR KUN DET DER OMGIVER GRAFEN. Selve grafens farver, skrift og
   tilstande ligger i et <style> inde i SVG'en, sat af netgraf.js — ikke af
   pedanteri, men fordi PNG-eksporten serialiserer SVG'en og lader browseren
   tegne den som <img>. Et <img> henter ikke dokumentets stylesheets, så en
   graf hvis farver stod her ville eksportere som sorte kasser. Det samme
   gælder Safaris rendering af SVG-i-img.

   Reglen at huske: alt der skal med i eksporten, hører til i netgraf.js;
   alt der kun findes på siden (tooltip, hint, fuldskærm, legend), hører
   til her. */
.netgraf-laerred {
  /* Ankeret for tooltip og hint. De ligger INDE i beholderen og ikke i
     <body>, fordi fuldskærm kun tegner fuldskærmselementets eget undertræ:
     et tooltip på body ville forsvinde netop dér hvor grafen er størst. */
  position: relative;
  overflow: hidden;
}
.netgraf-svg {
  display: block;
  width: 100%;
  height: 100%;
  /* pan-y: ét finger-strøg RULLER SIDEN, to fingre panorerer/zoomer grafen.
     Afvejningen er bevidst — en 620 px høj graf man ikke kan scrolle forbi
     på en telefon er en fælde, og at panorere med to fingre er den samme
     gestus som i kort-apps. Modstykket i JS er d3.zoom's filter, der afviser
     touchstart med under to fingre. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Tooltip: én div, flyttet med left/top. Den bærer det kanterne IKKE viser
   som tekst — fuldt navn, form, rolle, ejer- og stemmeandel. */
.netgraf-tip {
  position: absolute;
  z-index: 5;
  max-width: 260px;
  padding: var(--rum-2) var(--rum-3);
  border: 1px solid var(--graf-akse);
  border-radius: 6px;
  background: var(--graf-flade);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  font-size: var(--skrift-3);
  line-height: 1.35;
  color: var(--graf-blaek);
  pointer-events: none;   /* må aldrig stjæle den hover den selv beskriver */
}
.netgraf-tip-sub {
  color: var(--graf-blaek-2);
  font-size: var(--skrift-2);
}

/* Engangs-hint ved almindeligt scroll. Det er svaret på et reelt problem:
   når hjulet IKKE zoomer, tror man grafen er død. Beskeden siger hvad man
   skal gøre i stedet — og forsvinder efter 1,5 s, fordi en permanent
   instruktion er en anklage. */
.netgraf-hint {
  position: absolute;
  left: 50%;
  bottom: var(--rum-3);
  transform: translateX(-50%);
  z-index: 5;
  padding: var(--rum-1) var(--rum-3);
  border-radius: 999px;
  background: rgba(11,11,11,.82);
  color: #fff;
  font-size: var(--skrift-2);
  pointer-events: none;
}

/* Fuldskærm: kortet bliver til en flex-kolonne, og lærredet tager resten.
   height:auto !important slår skabelonens inline-højde (380/620 px) —
   den er sat inline netop for at reservere plads under indlæsningen, og
   inline vinder over alt andet end !important. */
.netgraf-fuld {
  display: flex;
  flex-direction: column;
  background: var(--graf-flade);
}
.netgraf-fuld .card-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.netgraf-fuld .netgraf-laerred { flex: 1; height: auto !important; min-height: 0; }

/* Legenden i kortfoden. Den er anden halvdel af beslutningen om at tage
   procenttallene af kanterne: tykkelse og mørkhed BETYDER noget, og et
   diagram hvor man skal gætte betydningen er ikke bedre end ni grå tal. */
.netgraf-legend {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rum-1) var(--rum-3);
}
.netgraf-legend-post {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.netgraf-legend-ikon { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  /* Motoren sætter selv animationsvarigheden til 0; dette dækker det den
     ikke styrer (hint'ets indtoning via browserens egen maling). */
  .netgraf-hint { transition: none; }
}

/* Favoritstjernen (31. aug 2026): én kanonisk gul, brugt af favorit.js'
   dekorator og ensretningen af /mine + personsiden. BEVIDST en egen klasse
   og ikke en global .bi-star-fill-regel — stjerneikonet bruges også af
   «Adm. direktør»- og «Formand»-badges med egne farver. */
:root { --favorit-gul: #ffc107; }
.favorit-mark { color: var(--favorit-gul); font-size: .7em; margin-left: .25rem; }

/* ── «Meld ind»-widgetten (31. aug 2026, beta-forberedelse) ─────────────
   Ikonet injiceres af feedback.js i hver sektions-/kortoverskrift. Første
   udgave var dæmpet (opacity .3, synlig ved hover) — lagt om samme dag på
   Kaspers ønske: i beta-perioden skal boblerne SES, ikke findes. Høj gul
   (egen token; samme værdi som --favorit-gul, men semantikken er en anden
   — skiller favoritgul sig ud en dag, skal boblerne ikke følge med). */
:root { --feedback-gul: #ffc107; }
.feedback-ikon {
  background: none;
  border: none;
  padding: 0 .25rem;
  /* HØJRESTILLET i alle headere, uanset layout — men IKKE med en
     auto-margen. Den stod her til 3. sep 2026 med den begrundelse, at den
     var «harmløs» i flex-headere. Det modsatte er tilfældet: en flex-
     beholder giver auto-margener AL fri plads, FØR justify-content
     overhovedet anvendes (flexbox §8.1). Ikonet er sidste barn i hver
     card-header, så `justify-content: space-between` blev sat ud af kraft,
     og alle kortenes knapgrupper (år-vender, graf/liste, netgraf-filtre)
     gled ind midt i headeren i stedet for at stå yderst — på hele
     virksomhedssiden, /sammenlign og /aargange. Margenen er BEHOLDT, men
     reglen nedenfor giver titlen flex-grow, og flex-grow fordeles FØR
     auto-margener (flexbox §9.7 før §9.5). Så æder titlen den frie plads
     på den linje hvor knapperne står, og ikonets margen får kun noget at
     lave når ikonet er ombrudt ned på en linje for sig — hvor den så er
     det eneste der holder det i højre side (netværkskortets header).
     float:right gør arbejdet i block-headere (sektionstitler). */
  float: right;
  margin-left: auto;
  color: var(--feedback-gul);
  font-size: .8em;
  vertical-align: middle;
  cursor: pointer;
}

/* Pladsen i flex-headere tages af TITLEN. Den vokser, og fordi flex-grow
   fordeles før auto-margener, får hverken meld ind-boblens margin-left:auto
   eller et .ms-auto i en knapbeholder noget at rive i — begge stod ellers og
   sloges om pladsen og skubbede knapperne ind midt i headeren. Med to børn
   er resultatet identisk med `justify-content: space-between`; med tre står
   knapgruppe og boble samlet i højre side. Selektorerne er præcis de
   flex-kontekster feedback.js indsætter boblen i — direkte barn, så
   underkort-titler brugt som gruppeoverskrift inde i et kort ikke rammes;
   boblen selv undtaget, så en header der KUN har den, ikke strækker den. */
.card-header.d-flex > :first-child:not(.feedback-ikon),
.underkort > .underkort-titel > :first-child:not(.feedback-ikon) { flex: 1 1 auto; }

/* Intro-boblen: en ægte tale-boble i samme gule, vist indtil krydset
   klikkes én gang (localStorage, se feedback.js). To ankre: inde i den
   første overskrift (absolut, under teksten) eller — på sider uden
   overskrifts-ikoner — fast over den flydende Feedback-knap. z-index 1035:
   over .sektionsnav (1020) og .feedback-flyder (1030), under
   nav-progressbaren (1040) og modalen (1055). */
.feedback-intro-anker { position: relative; }
.feedback-intro {
  position: absolute;
  top: calc(100% + .55rem);
  /* Højrestillet, ligesom ikonet den introducerer — boblen skal hænge
     under den gule tale-boble, ikke i den modsatte ende af headeren. */
  right: 0;
  max-width: 22rem;
  background: var(--feedback-gul);
  color: #212529;
  font-size: var(--skrift-3);
  font-weight: 400;
  line-height: 1.4;
  border-radius: .5rem;
  padding: .65rem 2rem .65rem .85rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  z-index: 1035;
  cursor: pointer;
}
/* Pilen op mod ankeret (overskrifts-varianten). */
.feedback-intro::before {
  content: "";
  position: absolute;
  top: -.4rem;
  right: .7rem;
  border-left: .45rem solid transparent;
  border-right: .45rem solid transparent;
  border-bottom: .45rem solid var(--feedback-gul);
}
/* Flyder-varianten: fast over knappen nederst til højre, pil nedad. */
.feedback-intro--flyder {
  position: fixed;
  top: auto;
  left: auto;
  right: 1rem;
  bottom: 3.6rem;
}
.feedback-intro--flyder::before {
  top: auto;
  left: auto;
  bottom: -.4rem;
  right: 2.5rem;
  border-bottom: none;
  border-top: .45rem solid var(--feedback-gul);
}
.feedback-intro-luk {
  position: absolute;
  top: .45rem;
  right: .45rem;
  font-size: var(--skrift-1);
}

/* Den globale knap. z-index 1030: OVER .sektionsnav (1020), UNDER
   nav-progressbaren (1040) og modalen (1055) — jf. lag-kommentaren ved
   html.navigerer::before. */
.feedback-flyder {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030;
}

/* ── Min side: favoritlisten (3. sep 2026) ───────────────────────────────
   Én række pr. favorit i stedet for et underkort. Grid med fem spor: navn,
   note (får resten af pladsen, én linje med …, redigeres på stedet), tags (kun så brede som de
   er, højrestillet ind mod datoen), seneste ændring, knapper. Tekst til
   venstre, metadata til højre. Under 768 px falder note og tags ned på hver
   sin linje og ændringen står til venstre. Brugerens tags er grå outline-
   piller UDEN ikon — de må ikke kunne forveksles med data-tags (PEP,
   hvidvask, FIRDS), som er farvede badges med ikon. */
.fav-bjaelke { margin-bottom: var(--rum-3); }
.fav-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: .05rem .55rem;
  font-size: var(--skrift-2);
  line-height: 1.5;
  color: var(--bs-secondary-color);
  background: #fff;
  text-decoration: none;
  white-space: nowrap;
}
a.fav-tag:hover { border-color: #212529; color: #212529; }
.fav-tag.valgt { background: #212529; border-color: #212529; color: #fff; }
.fav-tag-antal { opacity: .65; font-variant-numeric: tabular-nums; }
.fav-tag-x {
  border: 0;
  background: none;
  padding: 0 0 0 .15rem;
  line-height: 1;
  color: inherit;
  opacity: .7;
}
.fav-tag-x:hover { opacity: 1; }
.fav-tag-ret {
  border: 1px dashed var(--bs-border-color);
  background: none;
  border-radius: 999px;
  padding: .05rem .5rem;
  font-size: var(--skrift-2);
  line-height: 1.5;
  color: var(--bs-secondary-color);
}
.fav-tag-ret:hover { color: #212529; border-color: #212529; }
.fav-tag-editor { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.fav-tag-editor input {
  width: 9rem;
  font-size: var(--skrift-2);
  line-height: 1.5;
  padding: .05rem .55rem;
  border: 1px solid #212529;
  border-radius: 999px;
  outline: none;
}
.fav-tag-fejl { flex-basis: 100%; color: var(--bs-danger); font-size: var(--skrift-2); }

.fav-liste { border-top: 1px solid #e9ecef; }
.fav-raekke {
  border-bottom: 1px solid #e9ecef;
  border-left: 3px solid transparent;
  padding: .5rem .5rem .5rem .6rem;
}
.fav-raekke:hover { background: #f8f9fa; }
/* Nyt siden sidste besøg: blå kant OG en svag blå flade over hele rækken
   (Kasper, 3. sep 2026). Feedet nøjes med kanten, fordi tyve nye poster i
   træk dér ville blive en ny baggrundsfarve; på favoritlisten er de nye
   få og skal kunne ses i en liste på hundrede. Hover-fladen skal stadig
   kunne mærkes, derfor en kraftigere tone — reglen står EFTER .fav-raekke:hover
   med vilje. */
.fav-raekke.fav-ny {
  border-left-color: var(--bs-primary);
  background: rgba(13, 110, 253, .05);
}
.fav-raekke.fav-ny:hover { background: rgba(13, 110, 253, .09); }
/* «Hvad er nyt»-boblen: én hændelse pr. linje. Linjeskiftene kommer fra
   teksten (\n), ikke fra markup — boblen kører html: false. Den er en
   TOOLTIP: sitets popover-delegation binder klik (side.js), og et
   data-bs-trigger pr. element ændrer ikke den binding. Tooltip-boksen er
   200 px som standard og skal være bredere for en linje med et selskabsnavn. */
.fav-hover { --bs-tooltip-max-width: 26rem; opacity: 1; }
.fav-hover .tooltip-inner {
  white-space: pre-line;
  text-align: left;
  font-size: var(--skrift-3);
  max-width: 26rem;
  padding: .5rem .625rem;
}
/* Mærkaternes tooltip (5. sep 2026): sanktionsmærkets hover bærer postens
   fakta (navn, program, dato, forordning, forbehold) — 200 px og 90 %
   dækning er for lidt til otte linjer oven på en talboks. Samme greb som
   .fav-hover; sættes via data-bs-custom-class i _macros.html. */
.tag-hover { --bs-tooltip-max-width: 22rem; opacity: 1; }
.tag-hover .tooltip-inner {
  text-align: left;
  font-size: var(--skrift-3);
  max-width: 22rem;
  padding: .5rem .625rem;
}
.fav-hoved {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 1.4fr) fit-content(22rem) 10.5rem auto;
  gap: .75rem;
  align-items: center;
}
.fav-note-kort { min-width: 0; margin-top: 0; min-height: 1.5rem; cursor: text; }
.fav-note-kort .fav-note-tekst {
  font-size: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: .125rem .375rem;
}
/* «Tilføj note…» først når musen er over rækken — ellers står det i 100
   rækker. Uden mus (touch) vises det altid; der er ingen hover at vente på. */
.fav-note-kort .fav-note-tom { visibility: hidden; }
.fav-raekke:hover .fav-note-tom,
.fav-raekke:focus-within .fav-note-tom { visibility: visible; }
@media (hover: none) { .fav-note-kort .fav-note-tom { visibility: visible; } }
.fav-navn { min-width: 0; }
.fav-navn a { overflow-wrap: anywhere; }
.fav-undertekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-nyt-prik {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--bs-primary);
  vertical-align: middle;
  margin-left: .3rem;
}
.fav-tags { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; justify-content: flex-end; justify-self: end; }
.fav-aendring {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fav-knapper { display: flex; gap: .6rem; align-items: center; }
.fav-fold .bi { display: inline-block; transition: transform .15s; }
.fav-fold[aria-expanded="true"] .bi { transform: rotate(180deg); }
.fav-detaljer { padding: .4rem .5rem .5rem 1.7rem; }
/* Kolonnerne skal flugte HELE listen ned, ikke kun inden for rækken: med
   én grid pr. række får tags-sporet (fit-content) forskellig bredde fra
   række til række, og notens venstrekant hopper. Subgrid lader listen eje
   sporene og rækkerne arve dem. Browsere uden subgrid (før 2023) beholder
   gridet pr. række ovenfor. */
@supports (grid-template-columns: subgrid) {
  .fav-liste {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 1.4fr) fit-content(22rem) 10.5rem auto;
    column-gap: .75rem;
  }
  .fav-raekke {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    column-gap: .75rem;
    align-items: center;
  }
  .fav-hoved { display: contents; }
  .fav-detaljer { grid-column: 1 / -1; }
}
.fav-detaljer .fav-chips { margin-top: 0; margin-bottom: var(--rum-2); }
.fav-detaljer .fav-note { margin-top: var(--rum-2); }
@media (max-width: 767.98px) {
  .fav-hoved, .fav-liste { grid-template-columns: minmax(0, 1fr) auto; }
  .fav-note-kort { grid-column: 1 / -1; }
  .fav-note-kort .fav-note-tekst {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .fav-tags { grid-column: 1 / -1; justify-content: flex-start; justify-self: start; }
  .fav-undertekst { white-space: normal; }
  .fav-aendring { white-space: normal; }
  .fav-tag-retform form { width: 100%; }
}

/* ── Fordelingsbånd ─────────────────────────────────────────────────────
   Kortet «Nøgletal mod branchen» (5. sep 2026). Et kasseplot pr. nøgletal:
   hale p10-p90, kasse p25-p75, streg ved medianen, prik ved selskabet.

   AKSEN ER VÆRDIEN. Den 4 px bjælke det afløser havde percentilen som akse,
   og dér lå p10 altid ved 10 %, medianen altid på midten og p90 altid ved
   90 % — samme form for hvert nøgletal og hver branche. Her flytter
   medianen og kvartilerne sig, og en smal kasse betyder en ensartet branche.
   Positionerne kommer fra _baand_positioner i main.py som inline left/width.

   Alt er bygget af div'er og ikke SVG — samme greb som .kv-meter og
   .ejerstak, og det eneste sted i huset hvor en graf tegnes uden Chart.js. */
.fordeling {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--rum-6);
  align-items: center;
  /* Sag #3077 (8. sep 2026): luften om hårstregen halveret — fire rækker
     under hinanden gav 12 px over og under hver streg. */
  padding: var(--rum-2) 0;
  border-bottom: 1px solid var(--graf-gitter);
}
.fordeling:last-child { border-bottom: 0; }
.fordeling-label {
  font-size: var(--skrift-2);
  color: var(--graf-blaek-daempet);
  line-height: 1.2;
}
.fordeling-vaerdi {
  /* 1,375rem til 8. sep 2026 (sag #3077): tallet er en af tre linjer i
     venstrespalten, og det var spalten der satte rækkehøjden. */
  font-size: var(--skrift-5);
  font-weight: 600;
  line-height: 1.15;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.fordeling-enhed {
  font-size: var(--skrift-2);
  font-weight: 400;
  color: var(--graf-blaek-daempet);
}
.fordeling-percentil {
  font-size: var(--skrift-2);
  color: var(--graf-blaek-daempet);
  font-variant-numeric: tabular-nums;
}

/* Farvetrinnene. KUN tallet og markøren farves — ikke en flade bag rækken:
   fire farvede flader under hinanden ville læses som fire advarsler.

   .vaerdi-<trin> ER FÆLLES med overbliksbåndets soliditetsflise (5. sep
   2026): samme nøgletal stod grønt i kasseplottet og i sidens almindelige
   blæk 1.700 px længere oppe. Trinnet regnes ét sted (_kp03_trin i main.py)
   og males ét sted — her. Værterne står med i selektoren frem for at reglen
   er fri, så en ny bruger af klassen er et bevidst valg og ikke et uheld.
   «midt» har med vilje ingen regel: midt i feltet er ikke en tilstand der
   skal farves. */
.kpi-vaerdi.vaerdi-kritisk,
.fordeling-vaerdi.vaerdi-kritisk { color: var(--status-kritisk); }
.kpi-vaerdi.vaerdi-svag,
.fordeling-vaerdi.vaerdi-svag    { color: var(--status-alvorlig); }
.kpi-vaerdi.vaerdi-staerk, .kpi-vaerdi.vaerdi-bedst,
.fordeling-vaerdi.vaerdi-staerk,
.fordeling-vaerdi.vaerdi-bedst   { color: var(--status-god); }

/* Tegnforklaringen (5. sep 2026). Swatchene er miniaturer af figurens egne
   elementer og bruger PRÆCIS samme tokens — skifter paletten (ny.css peger
   --graf-* et andet sted hen), følger nøglen med uden en linje ekstra.
   Højderne er skåret ned fra figurens, så de fire står på samme grundlinje
   som teksten; formen er den samme. */
.fordeling-noegle-liste {
  /* Samme tre tætheder som .fordeling-spor. Gentaget og ikke arvet: nøglen
     står i kortets krop, ikke inde i en figur, så der er intet at arve fra.
     Ændres den ene, skal den anden med — derfor står de to blokke med samme
     ordlyd og samme rækkefølge. */
  --fordeling-t0: color-mix(in srgb, var(--graf-accent) 5%, transparent);
  --fordeling-t1: color-mix(in srgb, var(--graf-accent) 16%, transparent);
  --fordeling-t2: color-mix(in srgb, var(--graf-accent) 30%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--rum-1) var(--rum-4);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--rum-2);
  font-size: var(--skrift-2);
  color: var(--graf-blaek-daempet);
}
.fordeling-noegle-liste li {
  display: inline-flex;
  align-items: center;
  gap: var(--rum-2);
}
/* Bracket'en: to endeknopper og stregen imellem — det er hele figuren, og
   det var netop den form der blev spurgt til. */
.fordeling-noegle-liste .fnl-hale {
  position: relative;
  width: 22px;
  height: 9px;
  border-left: 1px solid var(--graf-blaek-daempet);
  border-right: 1px solid var(--graf-blaek-daempet);
  flex: none;
}
.fordeling-noegle-liste .fnl-hale::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--graf-blaek-daempet);
}
/* Gradienten. Swatchen bruger de SAMME tre tokens som figuren, blot med
   faste stop — nøglen skal vise formen, ikke ét selskabs fordeling. Står
   først i listen, fordi den ligger nederst i figuren. */
.fordeling-noegle-liste .fnl-taethed {
  width: 30px;
  height: 11px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--fordeling-t0) 0%, var(--fordeling-t1) 25%,
              var(--fordeling-t2) 50%, var(--fordeling-t1) 75%, var(--fordeling-t0) 100%);
  flex: none;
}
.fordeling-noegle-liste .fnl-kasse {
  width: 20px;
  height: 11px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--graf-accent) 22%, var(--graf-flade));
  border: 1px solid var(--graf-blaek-daempet);
  flex: none;
}
.fordeling-noegle-liste .fnl-median {
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--graf-blaek-2);
  flex: none;
}
/* Prikken står NEUTRAL og ikke i et af de fire farvetrin: en grøn eller rød
   prik i en tegnforklaring ville læses som en vurdering af dette selskab,
   og trinnet er netop det figuren selv fortæller. Halo'en er med — uden den
   ligner den en median-streg set fra enden. */
.fordeling-noegle-liste .fnl-markoer {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--graf-blaek);
  box-shadow: 0 0 0 2px var(--graf-flade), 0 0 0 3px rgba(11, 11, 11, .10);
  flex: none;
  margin: 0 2px;
}

.fordeling-plot { min-width: 0; }
.fordeling-spor {
  position: relative;
  /* 34 px til 8. sep 2026 (sag #3077). Undergrænsen er markørens halo:
     9 px prik + 7 px skygge = 23 px, som stadig har luft i de 28. */
  height: 28px;
  /* Gradientens tre tætheder, hentet fra prototypens .06/.18/.34 af accent-
     farven. De står som tokens her og ikke inline i makroen, så begge
     designs får deres egen accent uden en linje ekstra i skabelonen —
     kun stop-POSITIONERNE er data. color-mix og ikke rgba(): accenten er
     ikke den samme farve i de to skind. */
  --fordeling-t0: color-mix(in srgb, var(--graf-accent) 5%, transparent);
  --fordeling-t1: color-mix(in srgb, var(--graf-accent) 16%, transparent);
  --fordeling-t2: color-mix(in srgb, var(--graf-accent) 30%, transparent);
}
/* Baggrunden. Ligger FØRST i sporet, så hale, kasse, median og markør tegnes
   oven på den uden z-index — kildeordenen gør arbejdet. Højden er kassens
   plus lidt, så gradienten er en flade figuren står i og ikke en stribe ved
   siden af den. */
.fordeling-taethed {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 22px;
  border-radius: 2px;
}
/* Halen: p10 til p90. Enderne ligger fast (skalaen ER p10-p90 plus luft), så
   stregen er en ramme om det målte, ikke selv en måling. Knopperne i hver
   ende gør det tydeligt hvor skalaen slutter — uden dem ligner en klippet
   markør en markør der bare ligger yderst.

   FARVEN ER --graf-blaek-daempet OG IKKE --graf-akse (5. sep 2026). Aksens
   lyse grå forsvandt hvor gradienten bag den er tættest og stod tydeligt i
   enderne — en solid streg kom til at LIGNE en gradient, fordi kontrasten
   mod baggrunden skiftede hen over dens egen længde. Det samme gælder
   kassens kant nedenfor. Rangordenen holder: medianen er mørkest og 2 px,
   halen er ét trin lysere og 1 px, gradienten er en flade. */
.fordeling-hale {
  position: absolute;
  /* left/width kommer inline fra makroen: halen er p10–p90, og skalaen kan
     være udvidet ud over den (7. sep 2026). */
  top: 50%;
  height: 1px;
  background: var(--graf-blaek-daempet);
}
.fordeling-hale::before, .fordeling-hale::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--graf-blaek-daempet);
}
.fordeling-hale::before { left: 0; }
.fordeling-hale::after { right: 0; }
/* Kassen: de midterste 50 %. Bredden ER budskabet — smal kasse, ensartet
   branche. Fyldt og ikke kun optegnet, så den kan ses i et hurtigt blik ned
   ad fire rækker.

   FYLDET ER UGENNEMSIGTIGT (5. sep 2026). Det var accentfarven ved 10 %
   alpha, og så løb halens hairline tværs gennem kassen som en streg på
   midten — den fandtes to steder på én gang, som ramme om det målte OG som
   linje inde i den kasse den skulle ligge bag. Et kasseplot skjuler
   whiskeren under kassen; det er hele grunden til at kassen er en kasse.

   color-mix mod --graf-flade og ikke en fast lys farve: fladen er kortets
   egen baggrund (--surface i ny.css), så blandingen giver en ugennemsigtig
   tone der passer til kortet.
   22 % ligger over gradientens tætteste stop (30 % med alpha ≈ svagere på
   flade), så kassen læses som figurens tungeste flade og ikke som et hul. */
.fordeling-kasse {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 16px;
  min-width: 2px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--graf-accent) 22%, var(--graf-flade));
  border: 1px solid var(--graf-blaek-daempet);
}
.fordeling-median {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 18px;
  border-radius: 1px;
  background: var(--graf-blaek-2);
}
/* Selskabet. Halo'en er der for at prikken kan findes oven på kassen uden at
   blive større end medianstregen den skal kunne skelnes fra. */
.fordeling-markoer {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--graf-blaek);
  box-shadow: 0 0 0 4px var(--graf-flade), 0 0 0 7px rgba(11, 11, 11, .10);
  cursor: help;
}
.fordeling-markoer.fordeling-kritisk { background: var(--status-kritisk); }
.fordeling-markoer.fordeling-svag    { background: var(--status-alvorlig); }
.fordeling-markoer.fordeling-staerk,
.fordeling-markoer.fordeling-bedst   { background: var(--status-god); }
/* Klippet: værdien ligger uden for skalaen. Prikken bliver til en pil, så
   den ikke læses som «lige præcis yderst». Det præcise tal står til venstre
   i rækken, så intet er skjult. */
.fordeling-markoer.fordeling-klippet-venstre,
.fordeling-markoer.fordeling-klippet-hoejre {
  border-radius: 2px;
  width: 11px;
  height: 11px;
}
.fordeling-markoer.fordeling-klippet-venstre {
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.fordeling-markoer.fordeling-klippet-hoejre {
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.fordeling-ender {
  position: relative;
  height: 1.1em;
  font-size: var(--skrift-2);
  color: var(--graf-blaek-daempet);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
/* Endetallene står ved halens ender (inline left fra makroen), forankret
   indad, så de ikke rager ud af kortet når halen ligger ved en kant. */
.fordeling-endetal { position: absolute; white-space: nowrap; }
.fordeling-endetal.er-hoejre { transform: translateX(-100%); }
/* Medianetiketten står UNDER sin egen streg og ikke på midten: hele pointen
   med værdi-aksen er at medianen sjældent ER på midten. Den deler linje med
   endetallene siden sag #3077 (8. sep 2026) — se makroen for grænsen på
   16 %, som flytter forankringen indad tæt ved en ende.

   NAVNET ER IKKE .fordeling-midt, og det er ikke pedanteri: «midt» er et af
   de fem farvetrin (_kp03_trin), så et nøgletal i midterfeltet fik klassen
   .fordeling-vaerdi.fordeling-midt og arvede denne position:absolute. Tallet
   forsvandt ud af sin gridcelle og lå oven i nabokolonnen. */
.fordeling-medianetiket {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  /* Ved skalaens yderpunkter ville midterstillingen skubbe etiketten ud over
     kortet. De to grænser holder den inde uden at flytte den mærkbart væk
     fra sin streg — den står stadig under medianen, bare ikke centreret. */
  max-width: 100%;
}
/* Tæt ved en ende vokser etiketten INDAD, væk fra endetallet. */
.fordeling-medianetiket.er-venstre { transform: none; }
.fordeling-medianetiket.er-hoejre { transform: translateX(-100%); }
.fordeling-tom {
  font-size: var(--skrift-2);
  color: var(--graf-blaek-daempet);
}

/* Under lg falder skinnen ned under hovedspalten og rækken bliver smal:
   190 px etiket ved siden af et bånd giver da hverken plads til tal eller
   fordeling. Etiket over, bånd under. */
@media (max-width: 991.98px) {
  .fordeling {
    grid-template-columns: 1fr;
    gap: var(--rum-2);
  }
}


/* ── Forsiden: Prøv-chips, avanceret søgning og bundmenuen ───────────────
   Tre ting der kom til 5. sep 2026. Formen er prototypens; reglerne her er
   grundreglerne, så ny.css kun skal skifte skrift og farve og ikke bygge
   det hele om.

   Klassenavnene er .proev/.qchip og ikke .quick/.qchip som i prototypen:
   .quick er et ord uden betydning på et dansksproget site, og det er den
   slags navn der bliver genbrugt til noget andet om tre måneder. */
.proev { display: flex; flex-wrap: wrap; gap: var(--rum-2); align-items: center; margin: var(--rum-3) 0 var(--rum-2); }
.proev-lab { font-size: var(--skrift-2); color: var(--graf-blaek-daempet); }
.qchip {
  display: inline-flex;
  align-items: center;
  gap: var(--rum-2);
  padding: 4px 12px 4px 5px;
  border: 1px solid var(--graf-akse);
  border-radius: 20px;
  font-size: var(--skrift-3);
  color: inherit;
  text-decoration: none;
  background: var(--graf-flade);
  transition: border-color .15s, color .15s;
}
.qchip:hover { border-color: var(--graf-accent); color: var(--graf-accent); }
/* Mærket til venstre siger HVAD chippen fører til, før man har læst navnet:
   CVR for et selskab, initialer for en person, pil for en sammenligning. */
.qchip-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: var(--skrift-1);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--graf-flade);
  background: var(--graf-blaek-2);
  flex: none;
}
.qchip-mark.er-person { background: var(--udforsk-person); }
.qchip-mark.er-sammenlign { background: var(--graf-accent); font-size: var(--skrift-2); }

/* Avanceret søgning. <details> har en indbygget trekant; den skjules og
   erstattes af et ikon vi kan farve og rotere, så den ser ud som resten af
   sitets foldeknapper (.stam-fold).

   HØJRESTILLET UNDER «SØG»-KNAPPEN (5. sep 2026). Blokken sidder klods under
   søgefeltet, og knappen er feltets højre ende — dér er øjet i forvejen når
   man lige har skrevet noget. text-align og ikke flexbox: summary er
   inline-flex (den skal kunne stå på linje med sit filterantal), og et
   inline-level element rykkes af text-align uden at <details> behøver et
   ekstra lag. Felterne inde i blokken skal så have venstre igen — de arver
   ellers højrestillingen og placeholderne står i højre kant af hvert felt. */
.avanceret { text-align: right; }
.avanceret-felter { text-align: left; clear: both; }
/* Linjen under feltet (6. sep 2026): typevalg + «inkl. ophørte» flyder til
   venstre, «Avanceret søgning» står til højre på samme linje, og de
   udfoldede felter clearer floaten. Se search.html for hvorfor float. */
.soeg-linje { display: flow-root; margin-bottom: var(--rum-2); }
.typevalg { float: left; display: inline-flex; gap: 2px; margin-right: var(--rum-3); }
.typevalg a {
  padding: 2px 9px;
  border-radius: 12px;
  font-size: var(--skrift-3);
  color: var(--graf-blaek-daempet);
  text-decoration: none;
  line-height: 1.5;
}
.typevalg a:hover { color: var(--graf-blaek); }
.typevalg a.active { background: var(--graf-blaek); color: var(--graf-flade); }
.ophoerte {
  float: left;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--skrift-3);
  color: var(--graf-blaek-daempet);
  cursor: pointer;
  line-height: 1.5;
  padding: 2px 0;
  user-select: none;
}
.ophoerte input { margin: 0; accent-color: var(--graf-accent); }
.avanceret > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--rum-2);
  font-size: var(--skrift-3);
  color: var(--graf-blaek-daempet);
  user-select: none;
}
.avanceret > summary::-webkit-details-marker { display: none; }
.avanceret > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.avanceret[open] > summary::before { transform: rotate(90deg); }
.avanceret > summary:hover { color: var(--graf-blaek); }
.avanceret-antal {
  font-size: var(--skrift-2);
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--graf-accent-flade);
  color: var(--graf-accent);
}

/* Bundmenuen. Grupperne er RÆKKER og ikke spalter: Selskabsfokus har 15
   links og ville ellers sætte kortets højde for de to andre. */
.udforsk-raekke {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: var(--rum-4);
  padding: var(--rum-3) 0;
  border-bottom: 1px solid var(--graf-gitter);
}
.udforsk-raekke:last-child { border-bottom: 0; }
.udforsk-raekke:first-child { padding-top: 0; }
.udforsk-gruppe {
  font-size: var(--skrift-2);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--graf-blaek-daempet);
  padding-top: 3px;
}
.udforsk-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rum-2) var(--rum-4);
}
.udforsk-link {
  display: inline-flex;
  align-items: center;
  gap: var(--rum-2);
  font-size: var(--skrift-4);
  color: var(--graf-blaek);
  text-decoration: none;
}
.udforsk-link:hover { color: var(--graf-accent); }
.udforsk-link:hover span:first-of-type { text-decoration: underline; }
/* Ikonet bærer gruppens farve, teksten gør ikke: en hel række farvet tekst
   ville læses som en advarsel eller et link-hierarki der ikke findes. */
.udforsk-link i { color: var(--udforsk-ikon, var(--graf-blaek-daempet)); font-size: .9em; flex: none; }
.udforsk-raekke.er-person { --udforsk-ikon: var(--udforsk-person); }
.udforsk-raekke.er-selskab { --udforsk-ikon: var(--udforsk-selskab); }
.udforsk-raekke.er-risiko { --udforsk-ikon: var(--udforsk-risiko); }
.udforsk-raekke.er-forandring { --udforsk-ikon: var(--udforsk-forandring); }
.udforsk-ny { font-size: var(--skrift-1) !important; vertical-align: middle; }

@media (max-width: 575.98px) {
  /* Under 576 px er 130 px til gruppenavnet en tredjedel af skærmen. Navnet
     får sin egen linje, og linkene bliver en liste — vandret ombrydning med
     28 links i en 390 px-kolonne er ikke en menu, det er en tekstblok. */
  .udforsk-raekke { grid-template-columns: 1fr; gap: var(--rum-2); }
  .udforsk-links { flex-direction: column; gap: var(--rum-2); }
}

/* ── Personsiden efter prototypen (6. sep 2026): GRUNDREGLER ──────────────
   Udtrykket ligger i ny.css. Her står kun grundreglerne der holder formen:
   gitteret, måleren, driverrækkerne og listerne. Farverne er kv-tokens med
   Bootstrap-nære fallbacks. */
.score-wrap { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: center; }
.score-maaler { display: block; margin: 0 auto; }
.score-maaler-bund { stroke: var(--kv-ring, #e5e7eb); }
.score-maaler-fyld, .score-maaler-prik { stroke: var(--kv-good, #2E6B4F); }
.score-maaler-prik { fill: #fff; }
.score-maaler-fyld.er-warning, .score-maaler-prik.er-warning { stroke: var(--kv-warning, #9A5A15); }
.score-maaler-fyld.er-serious, .score-maaler-prik.er-serious,
.score-maaler-fyld.er-critical, .score-maaler-prik.er-critical { stroke: var(--kv-critical, #8E2F2F); }
.score-maaler-tal { font-size: var(--skrift-7); font-weight: 600; fill: var(--kv-ink, #111); }
.score-maaler-enhed { font-size: var(--skrift-1); fill: var(--kv-muted, #6b7684); }
.score-baand { font-size: var(--skrift-2); text-transform: uppercase; letter-spacing: .08em; text-align: center; color: var(--kv-muted, #6b7684); margin-top: -6px; }
.score-baand.er-good, .score-baand.er-best { color: var(--kv-good, #2E6B4F); }
.score-baand.er-warning { color: var(--kv-warning, #9A5A15); }
.score-baand.er-serious, .score-baand.er-critical { color: var(--kv-critical, #8E2F2F); }
.driver { display: grid; grid-template-columns: 1fr 52px; gap: 10px; align-items: center; font-size: var(--skrift-3); padding: 4px 0; }
.driver-val { text-align: right; font-variant-numeric: tabular-nums; }
.driver-val.er-positiv { color: var(--kv-good, #2E6B4F); }
.driver-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--kv-ring, #e5e7eb); position: relative; overflow: hidden; margin: -2px 0 4px; }
.driver-bar i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--kv-good, #2E6B4F); }
.driver-bar i.er-negativ { background: var(--kv-critical, #8E2F2F); }
.stat-gitter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat-label { font-size: var(--skrift-2); color: var(--kv-muted, #6b7684); margin-bottom: 4px; }
.stat-vaerdi { font-size: var(--skrift-5); font-weight: 600; }
.stat-vaerdi.er-positiv { color: var(--kv-good, #2E6B4F); }
.stat-enhed { font-size: var(--skrift-2); color: var(--kv-muted, #6b7684); font-weight: 400; }
.stat-note { font-size: var(--skrift-2); color: var(--kv-muted, #6b7684); margin-top: 3px; }
.relrow { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--bs-border-color, #dee2e6); color: inherit; }
.relrow:last-child { border-bottom: 0; }
.relrow .tag { margin-left: auto; white-space: nowrap; font-size: var(--skrift-3); color: #6c757d; }
.avatar { width: 26px; height: 26px; border-radius: 3px; flex: none; display: grid; place-items: center; font-size: var(--skrift-1); font-weight: 600; background: #eef1f4; color: #6c757d; }
.avatar.p { border-radius: 50%; }
.pitem-gruppe { font-size: var(--skrift-2); text-transform: uppercase; color: #6c757d; font-weight: 600; background: #f8f9fa; padding: 4px 16px; border-bottom: 1px solid var(--bs-border-color, #dee2e6); }
.pitem { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--bs-border-color, #dee2e6); color: inherit; }
.pitem:last-child { border-bottom: 0; }
.pitem-krop { min-width: 0; flex: 1 1 auto; }
.pitem .nm, .pitem .rl, .pitem-meta { display: block; }
.pitem .nm { font-weight: 600; }
.pitem-meta { font-size: var(--skrift-3); color: #6c757d; }
.pitem-hoejre { flex: none; text-align: right; }
@media (max-width: 700px) {
  .stat-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .score-wrap { grid-template-columns: 1fr; }
}

/* VL-gruppesiden (6. sep 2026): skillelinjen over tidligere medlemmer. */
.vl-skille td{border-top:2px solid #cfd4da}

/* ── Forbrugslinjen (/mine, /konto-hovedet) og forbrugsfliserne på /konto
   (6. sep 2026). Linjen viser hvor meget der er TILBAGE; .er-opbrugt
   farver leddet, når et loft er nået. .kvote-bar er den tynde bjælke i
   fliserne — 4 px, ikke Bootstraps .progress, som er for tung i en flise. */
.forbrugslinje { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; font-size: var(--skrift-4); color: #6c757d; }
.forbrugslinje a { color: inherit; text-decoration: none; white-space: nowrap; }
.forbrugslinje a:hover { color: #212529; }
.forbrugslinje b { font-weight: 600; color: #212529; }
.forbrugslinje .er-opbrugt b { color: #b45309; }
.kvote-bar { height: 4px; background: #e9ecef; border-radius: 2px; margin: 6px 0 4px; overflow: hidden; }
.kvote-bar > div { height: 100%; background: #2a78d6; border-radius: 2px; }
.kvote-bar > .er-opbrugt { background: #ffc107; }
.forbrug-fliser .kpi-enhed { display: block; }
.abon-linje + .abon-linje { margin-top: .25rem; }
.slet-tekst { max-width: 40rem; }

/* ── Inline-redigering på /konto (6. sep 2026): <details> hvor summary ER
   visningen (etiket + værdi + «Ret»). Ingen trekant, ingen JS. ── */
.ret-felt > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-end; gap: .75rem; }
.ret-felt > summary::-webkit-details-marker { display: none; }
.ret-felt .ret-tekst { display: flex; flex-direction: column; min-width: 0; }
.ret-felt .ret-tekst .stam-vaerdi { overflow-wrap: anywhere; }
.ret-felt .ret-maerke { font-size: var(--skrift-3); color: #6c757d; white-space: nowrap; flex-shrink: 0; }
.ret-felt > summary:hover .ret-maerke { color: #212529; text-decoration: underline; }
.ret-felt .ret-aaben { display: none; }
.ret-felt[open] .ret-aaben { display: inline; }
.ret-felt[open] .ret-lukket { display: none; }