/* ==========================================================================
   Credens — ét stilark til hele fladen.

   Retningen (2/9-2026, docs/design/2026-09-02-offentligt-site-retning.md):
   TO-FARVE-TRYK. Blæk på papir og én staffagefarve, kobolt, brugt fladt og
   med vilje. Hanken Grotesk 800 til overskrifter, bomærke og store tal (phk's
   valg 2/9 blandt fire på /design/skrifter), Schibsted Grotesk til brød og UI —
   leveret som woff2 herfra. Grebet er KVITTERINGEN:
   hvert tal bærer et mærke med sin kilde (`.kvit`), og kildelisten nederst er
   kvitteringsrullen.

   Rækkefølge: tokens → skrifter → grundelementer → formularer → skelettet →
   det offentlige site → portalen → print. Portalen bruger stadig sit eget
   smalle `<main>` uden sidehoved; den arver tokens, skrifter og knapper.
   ========================================================================== */

:root {
  /* farver */
  --papir: #f7f6f2;  --kort: #ffffff;
  --blaek: #17181c;  --blaek-2: #4f525b;  --blaek-3: #63666f;
  --streg: #d9d7d0;  --streg-2: #ebe9e3;
  --spot: #1f3bc4;   --spot-moerk: #16298c;  --spot-lys: #e4e9fb;  --spot-lys-2: #f1f3fc;
  /* **Husets marineblå er ét token for hele sitet, ikke kun for
     `.designflade`.** Bomærket, sidehovedet og enhver primær knap på forsiden,
     selskabssiden, portalen og medarbejdersiderne er marineblå — mens 404-siden
     og salgssiderne fyldte deres primærknap med staffagefarven `--spot`. To
     blå til samme handling er ikke to tokens, det er ét, der mangler (D9/X1),
     og det så ud som en anden hjemmeside på netop den side, alle rammer.
     `--spot` er stadig staffage: prisens tal, kilderne, fokusringen. */
  --navy: #1c2150;   --navy-lys: #3d47a3;
  --primaer: var(--navy);             /* portalen og gaten bruger navnet */
  /* **Hele paletten står her og ikke i `.designflade`.** Den lå i klassen,
     mens regler uden for den — indholdsfortegnelsen på de juridiske sider,
     sagslistens alvorstrin — allerede hentede `--dus`, `--kortkant` og
     `--linje`. En ukendt variabel fejler TAVST: "INDHOLD" stod i brødtekstens
     sorte i stedet for dæmpet grå, og ingen kunne se det på kilden (D1/D9). */
  /* `--blaek-3` var #7d8089 og målte 3,65:1 på papiret — under WCAG AA's
     4,5:1 for den småtekst, den bruges til: sidefoden, hjælpeteksterne,
     versionslinjen, forbeholdet (gennemgangen 24/9). #63666f måler 5,30:1 på
     papiret, 5,74:1 på hvidt og 4,86:1 på den lyseblå `#e8ecf7`. */
  --dus: #6b6f8f; --tekst-2: #4a4e6e;
  --kortkant: #e3e3df; --linje: #eeeeea; --fremhaev: #eef1f8;
  /* Det, der kræver handling: en opbrugt kvote, en åben bestridelse, en
     tilbagekaldt nøgle — og det, der ikke kan fortrydes. */
  --fare: var(--gammelroed); --fare-lys: var(--roed-lys);
  /* Det, der er i orden, og det, der kun er et varsel. */
  --medgang: #1d6b34; --medgang-lys: #e8f3ea; --medgang-prik: #2c9a4b;
  --varsel: #6b4a06; --varsel-lys: #f6ead2;
  --gammelroed: #6e211c;  --roed-lys: #fbf1ee;
  /* bedømmelsens bånd — målt i docs/design/2026-08-31-bedoemmelsens-udtryk.md */
  --baand-1: #6e211c; --baand-2: #bb5a44; --baand-3: #a9a69f;
  --baand-4: #40912f; --baand-5: #14521c;
  /* Båndets farve blandet **8 % ind i hvidt** — tonen bag topboksen (handoffet
     6/9). De står som hex og ikke som `color-mix`, fordi den funktion ellers
     ville skulle stå fem steder med en fallback, der kan tabe kaskaden (den
     gjorde: `--baandtone: #fff` som sidste regel slog alle fem ihjel, målt på
     dev 7/9). At de to tal SKAL være i familie holdes af
     `test_tonen_er_baandets_egen_farve`, som regner blandingen efter. */
  --baandtone-1: #f3eded; --baandtone-2: #faf2f0; --baandtone-3: #f8f8f7;
  --baandtone-4: #f0f6ee; --baandtone-5: #ecf1ed;
  /* Koncernkortets knudekant (handoffet 7/9). Den er en afgrænsning og ikke
     en betydning — hvad et kort ER, står med ord i kortets egen etiket — så
     1,61:1 er i orden her, hvor det ikke ville være det for en streg. */
  --knudekant: #c9cbdd;
  /* Fortegnet på et beløb, selskabet selv har indberettet — resumelinjens
     årets resultat og egenkapital (phk 6/9). Værdierne er de samme som
     `--baand-1` og `--baand-5`, men de har med vilje egne navne: båndfarverne
     betyder "dårligst" og "stærkest bedømt i bestanden", og et overskud malet
     i bedømmelsens grønne ville påstå en bedømmelse, der ikke er givet. To
     oplysninger, to tokens — de kan ændres hver for sig.
     Kontrast mod papiret #f7f6f2: 8,6:1 og 10,2:1 (målt 6/9). */
  --tal-positiv: #14521c; --tal-negativ: #6e211c;
  /* skrifter */
  --skrift-display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --skrift-brod: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --skrift-kode: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* typografisk skala */
  --t-1: .78rem;  --t0: .9rem;  --t1: 1.0625rem;  --t2: 1.2rem;
  --t3: clamp(1.4rem, 1.15rem + 1.1vw, 1.85rem);
  --t4: clamp(1.8rem, 1.3rem + 2.2vw, 2.7rem);
  --t5: clamp(2.4rem, 1.5rem + 4vw, 4.4rem);
  /* rum */
  --r1: 4px; --r2: 8px; --r3: 12px; --r4: 20px; --r5: 32px; --r6: 48px;
  --r7: clamp(56px, 4vw + 32px, 96px);
  --spalte: 1120px;  --laes: 62ch;
  --runding: 3px;  --kant: 1px solid var(--streg);
  /* Klikfladen. DESIGNSPEC § 1 kræver mindst 44×44 px, og 44 stod fjorten
     steder som et råt tal — et manglende token (D9). Værdien er **48 og ikke
     44** (målt 5/9): de omridsede knapper i listerne ramte grænsen på pixlen,
     og en anden skriftmetrik eller en anden browsermotor skubber da fladen
     under kravet, uden at nogen kan se det. Fire px luft er billigere end en
     måling, der lige akkurat holder. */
  --klik: 48px;
  /* Kortets polstring. Stod som et råt `26px` fire steder (D9). Topboksens
     tre spalter måler den samme luft ud til hver side af skillelinjerne, så
     spalternes indhold flugter med kortets øvrige tekst. */
  --kortluft: 26px;
}

/* --- skrifter: fire filer, alle OFL, leveret herfra --- */
@font-face { font-family: "Hanken Grotesk"; font-weight: 300 800; font-style: normal;
             font-display: swap; src: url(/static/fonts/hanken.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400 900; font-style: normal;
             font-display: swap; src: url(/static/fonts/schibsted.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400 900; font-style: italic;
             font-display: swap; src: url(/static/fonts/schibsted-kursiv.woff2) format("woff2"); }

/* --- grundelementer --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papir); color: var(--blaek);
       font: 400 var(--t1)/1.6 var(--skrift-brod); text-rendering: optimizeLegibility; }
h1, h2, h3 { font-family: var(--skrift-display); font-weight: 800; line-height: 1.08;
             letter-spacing: -.02em; margin: 0 0 var(--r3); text-wrap: balance; }
h1 { font-size: var(--t5); line-height: 1.0; letter-spacing: -.03em; }
h2 { font-size: var(--t4); }
h3 { font-size: var(--t3); }
p { margin: 0 0 var(--r3); }
ul, ol { padding-left: 1.3em; margin: 0 0 var(--r4); }
li { margin-bottom: 6px; }
a { color: var(--spot); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--spot-moerk); }
:focus-visible { outline: 3px solid var(--spot); outline-offset: 3px; }
::selection { background: var(--spot-lys); }
strong, b { font-weight: 700; }
small { font-size: var(--t0); }
code, pre, kbd { font-family: var(--skrift-kode); }
code { font-size: .9em; overflow-wrap: anywhere; }
pre { background: var(--kort); border: var(--kant); border-radius: var(--runding);
      padding: 14px 16px; overflow-x: auto; font-size: .86rem; line-height: 1.5;
      margin: 0 0 var(--r4); }
pre code { overflow-wrap: normal; }
/* Kode i en tabelcelle må ikke brækkes bogstav for bogstav — tabellen ruller i stedet. */
table code { overflow-wrap: normal; white-space: nowrap; }
hr { border: 0; border-top: var(--kant); margin: var(--r5) 0; }

/* --- formularer (DESIGNSPEC § 2) --- */
label { display: block; margin: 0 0 6px; font-weight: 600; font-size: var(--t0); }
input, textarea, select { width: 100%; min-height: var(--klik); font: inherit; font-size: 16px;
        padding: 10px 14px; margin: 0 0 var(--r4); color: var(--blaek);
        border: 1.5px solid var(--streg); border-radius: var(--runding); background: var(--kort);
        transition: border-color .15s ease, box-shadow .15s ease; }
textarea { min-height: 120px; line-height: 1.5; resize: vertical; }
select { appearance: none; padding-right: 40px;
         background-image: linear-gradient(45deg, transparent 50%, var(--blaek-2) 50%),
                           linear-gradient(135deg, var(--blaek-2) 50%, transparent 50%);
         background-position: right 20px center, right 15px center;
         background-size: 5px 5px; background-repeat: no-repeat; }
input:hover, textarea:hover, select:hover { border-color: var(--blaek-3); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 0; border-color: var(--spot); box-shadow: 0 0 0 3px var(--spot-lys); }
input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--gammelroed); box-shadow: 0 0 0 3px var(--roed-lys); }
::placeholder { color: var(--blaek-3); }
.feltfejl { color: var(--gammelroed); font-weight: 600; font-size: var(--t0);
            margin: calc(-1 * var(--r3)) 0 var(--r4); }
.fejl { color: var(--gammelroed); font-weight: 600; }
.hjaelp { font-size: var(--t0); color: var(--blaek-3); margin: -2px 0 10px; max-width: var(--laes); }
.valgfri { font-weight: 400; color: var(--blaek-3); font-size: var(--t-1); }

/* Afkrydsning: hele teksten klikker (DESIGNSPEC § 1). Teksten skal ligge i
   ÉT element — løse tekstnoder i en flex-boks ombryder ikke indbyrdes. */
label:has(input[type="checkbox"]), label.accept {
  display: flex; align-items: flex-start; gap: 12px; min-height: var(--klik);
  font-weight: 400; font-size: var(--t1); cursor: pointer; line-height: 1.5;
  margin: var(--r2) 0 var(--r3); }
label:has(input[type="checkbox"]) input, label.accept input {
  width: 20px; height: 20px; min-height: 0; margin: 3px 0 0; flex: none;
  accent-color: var(--spot); }
label.accept > span, label:has(input[type="checkbox"]) > span { min-width: 0; }

/* Knapper. Verbum på knappen; primær er staffagefarven, sekundær er blæk. */
button, .knap { display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: var(--klik); padding: 0 22px; border: 1.5px solid var(--navy);
  border-radius: var(--runding); background: var(--navy); color: #fff;
  font: 600 var(--t1)/1.2 var(--skrift-brod); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease; }
button:hover, .knap:hover { background: var(--navy-lys); border-color: var(--navy-lys); color: #fff; }
button:active, .knap:active { background: var(--blaek); border-color: var(--blaek); }
button[disabled] { opacity: .6; cursor: progress; }
.sekundaer, .knap.sekundaer { background: transparent; color: var(--blaek);
                              border-color: var(--blaek); }
.sekundaer:hover, .knap.sekundaer:hover { background: var(--blaek); border-color: var(--blaek);
                                          color: var(--papir); }
button.lille { min-height: var(--klik); padding: 0 14px; font-size: var(--t0); }
.knaprad { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--r4) 0 0; }

/* ==========================================================================
   Skelettet — det offentlige site
   ========================================================================== */
.spalte { width: min(100% - 2 * var(--r4), var(--spalte)); margin-inline: auto; }
main.spalte { padding-bottom: var(--r6); }

.hoved { border-bottom: var(--kant); background: var(--papir); }
.hoved .spalte { display: flex; flex-wrap: wrap; align-items: center;
                 gap: 6px var(--r5); min-height: 72px; padding: 8px 0; }
.maerke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
          color: var(--blaek); font: 800 1.4rem/1 var(--skrift-display);
          letter-spacing: -.01em; min-height: var(--klik); }
.maerke svg { width: 24px; height: 24px; color: var(--spot); flex: none; }
.maerke:hover { color: var(--spot); }
.hoved nav { display: flex; gap: 2px; margin-left: auto; }
.hoved nav a { display: inline-flex; align-items: center; min-height: var(--klik); padding: 0 12px;
               color: var(--blaek-2); text-decoration: none; font-weight: 500;
               font-size: var(--t0); border-radius: var(--runding); }
.hoved nav a:hover { color: var(--blaek); background: var(--streg-2); }
.hoved nav a[aria-current] { color: var(--spot); border-radius: 0;
                             box-shadow: inset 0 -2px 0 var(--spot); }
/* Handlingerne til højre: sekundær ("Log ind") før primær ("Opret gratis
   konto"). De ligger i én beholder, så de bliver hos hinanden, når bjælken
   brydes — ved 360 px rykker parret ned under bomærket, stadig side om side. */
.hoved .handlinger { display: flex; align-items: center; gap: var(--r2); }
/* Log ud-formularen er portalens handling i bjælken. `form.logud` har en stor
   topmargen til brug midt på en side; her skubbede den knappen 24 px ned, så
   bomærke og knap ikke havde samme lodrette midte (R2, målt 5/9). */
.hoved .handlinger .logud { margin: 0; }
.hoved .knap { min-height: var(--klik); padding: 0 18px; font-size: var(--t0);
               white-space: nowrap; }
.hoved .login { display: inline-flex; align-items: center; min-height: var(--klik);
                padding: 0 14px; border: 1px solid transparent;
                border-radius: var(--runding); font-weight: 600;
                font-size: var(--t0); text-decoration: none;
                white-space: nowrap; transition: background-color .15s ease,
                border-color .15s ease; }

.sidefod { margin-top: var(--r7); border-top: var(--kant); padding: var(--r5) 0 var(--r6);
           font-size: var(--t0); color: var(--blaek-3); }
.sidefod .spalte { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--r5); }
.sidefod .selskab { margin-right: auto; }
/* Linkene er én blok, ikke fire løse elementer i sidefodens flex-boks.
   **Løse var de brudt forkert på 390 px** (målt 5/9): "Om" blev hængende
   ude til højre på selskabslinjen med et hul efter sig, og de tre andre
   faldt ned hver for sig. Som egen boks flytter hele rækken ned samlet, og
   på en bred skærm står den præcis som før — yderkanten er den samme. */
.sidefod .fodmenu { display: flex; flex-wrap: wrap; align-items: center;
                    gap: 0 var(--r5); }
.sidefod a { color: var(--blaek-2); text-decoration: none; display: inline-flex;
             align-items: center; min-height: var(--klik); }
/* "Om" var 24 px bred (24/9). Hvert link er mindst en klikflade bredt. */
.sidefod .fodmenu a { min-width: var(--klik); justify-content: center; }
/* Under 640 px har selskabslinjen og linkrækken hver sin linje. `auto` som
   margen kan ikke skubbe noget til højre, når der kun er ét element på
   linjen, og så stod fodens fire links pænt venstrestillet under hinandens
   hul. Her får de i stedet hele bredden og brydes som en blok. */
@media (max-width: 640px) {
  .sidefod .selskab, .sidefod .fodmenu { width: 100%; margin-right: 0; }
  .sidefod .fodmenu { gap: 0 var(--r4); }
}
.sidefod a:hover { color: var(--spot); text-decoration: underline; }
.sidefod .tilladelse { width: 100%; font-size: var(--t-1); margin-top: 2px; }

/* --- fælles byggesten på sider --- */
.anslag { padding: var(--r7) 0 var(--r5); }
.anslag h1 { max-width: 17ch; }
.manchet { font-size: var(--t2); line-height: 1.5; color: var(--blaek-2);
           max-width: 46ch; margin: 0 0 var(--r5); }
.latin { font: italic 400 var(--t0)/1.55 var(--skrift-brod); color: var(--blaek-3);
         max-width: 44ch; margin: var(--r5) 0 0; padding-left: 14px;
         border-left: 2px solid var(--streg); }

/* Indholdsspalte + notespalte. `minmax(0, …)`: gitterelementer nægter ellers
   at blive smallere end deres indhold, og så ruller siden vandret. */
.opslag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30ch);
          gap: var(--r4) var(--r7); align-items: start; }
.opslag > * { min-width: 0; }
.opslag > .brod { grid-column: 1; max-width: var(--laes); }
.opslag .brod h2 { font-size: var(--t3); margin: var(--r5) 0 var(--r2); }
.opslag .brod h2:first-child { margin-top: 0; }
.opslag .brod h3 { font-size: var(--t2); margin: var(--r4) 0 var(--r2); }
.note { grid-column: 2; font-size: var(--t0); line-height: 1.55; color: var(--blaek-2);
        border-top: 2px solid var(--spot); padding-top: 10px; margin: 6px 0 var(--r5); }
.note b { font-weight: 700; color: var(--blaek); }

/* Kvitteringen — grebet. Et lille mærke, der siger, hvor tallet kommer fra. */
.kvit { display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
        font: 500 .76rem/1.25 var(--skrift-brod); letter-spacing: .01em;
        color: var(--spot); background: var(--spot-lys); border-radius: 3px;
        padding: 5px 9px 5px 8px; text-decoration: none;
        transition: background-color .15s ease, color .15s ease; }
.kvit::before { content: ""; flex: none; width: 8px; height: 10px; background: currentColor;
                clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 82%, 50% 100%, 25% 82%, 0 100%); }
a.kvit:hover { background: var(--spot); color: #fff; }

/* Fodnotehenvisning i brødtekst. Lille med vilje: en henvisning er ikke en handling. */
.ref { font: 600 .7em/1 var(--skrift-brod); vertical-align: super; color: var(--spot);
       text-decoration: none; padding: 4px 1px; }
.ref:hover { text-decoration: underline; }
/* **Klikfladen er større end tegnet** (DESIGNSPEC § 1; målt 24/9: fodnoterne
   13×19 px, kildemærkerne på forsiden 23 px høje). Mærket skal blive lille —
   en henvisning er ikke en handling — så fladen udvides med en usynlig pseudo
   i stedet for med polstring, der ville flytte linjeafstanden. */
.ref, a.kvit { position: relative; }
.ref::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%); }
a.kvit::after { content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%); }

/* Rækker: etiket til venstre, værdi til højre, hårlinjer imellem. */
.raekker { list-style: none; padding: 0; margin: 0 0 var(--r4); border-top: 2px solid var(--blaek); }
.raekker li { margin: 0; border-bottom: var(--kant); }
.raekker .flade { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline;
                  justify-content: space-between; min-height: 56px; padding: 14px 0;
                  text-decoration: none; color: inherit; }
.raekker .hvad { font-weight: 600; }
.raekker .vaerdi { color: var(--blaek-2); text-align: right; }
.raekker .ord { color: var(--blaek-2); text-align: right; }
.raekker .hvor { color: var(--blaek-3); font-size: var(--t0); }
a.flade:hover .hvad { color: var(--spot); }

/* Kilderne — kvitteringsrullen nederst. */
.kilder { margin-top: var(--r7); border-top: 2px solid var(--blaek); padding-top: var(--r4); }
.kilder h2 { font-size: var(--t2); margin: 0 0 var(--r3); }
.kilder ol { margin: 0; padding-left: 2.4em; font-size: var(--t0); color: var(--blaek-2);
             max-width: 80ch; }
.kilder li { margin-bottom: 8px; padding-left: 4px; }
.kilder li::marker { font-family: var(--skrift-display); font-weight: 600; color: var(--spot); }
.kilder li:target { background: var(--spot-lys-2); box-shadow: 0 0 0 6px var(--spot-lys-2); }

/* ==========================================================================
   Forsiden
   ========================================================================== */
/* Forsidens hero, båndet og de tre træk står nu i designafsnittet nederst
   (oplæg 3/9). Her bliver kun det stående, som andre sider også bruger. */
.baand { display: grid; gap: 10px; padding: var(--r3) 0 var(--r4);
         border-top: 2px solid var(--blaek); border-bottom: var(--kant); margin-bottom: 4px; }
.baand .skala { grid-template-columns: 2fr 3fr 10fr 3fr 2fr; height: 10px; }
/* Skalaens farver hænger på `.skala` og ikke på `.baand`, fordi topboksen på
   selskabsopslaget bruger den samme skala uden at ligge i et `.baand`. Var de
   scopet til `.baand`, ville trinnene dér stå gennemsigtige — og en ukendt
   eller uramt variabel fejler TAVST (D9). */
.skala { display: grid; gap: 3px; }
.skala span { border-radius: 2px; opacity: .22; }
.skala .aktiv { opacity: 1; }
.skala .b1 { background: var(--baand-1); } .skala .b2 { background: var(--baand-2); }
.skala .b3 { background: var(--baand-3); } .skala .b4 { background: var(--baand-4); }
.skala .b5 { background: var(--baand-5); }
.baand .laes { display: flex; flex-wrap: wrap; justify-content: space-between;
               align-items: baseline; gap: 2px 16px; margin: 0; }
.baand .laes b { font-weight: 700; }
.baand .laes small { color: var(--blaek-2); }
.tal-raekker { list-style: none; margin: 0; padding: 0; }
.tal-raekker li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px;
                  padding: 12px 0; margin: 0; border-top: 1px solid var(--streg-2);
                  align-items: baseline; }
.tal-raekker li:first-child { border-top: 0; }
.tal-raekker .hvad { font-weight: 600; }
.tal-raekker .vaerdi { font-weight: 500; text-align: right;
                       white-space: nowrap; }
.tal-raekker .kvit { grid-column: 1 / -1; justify-self: start; }

/* Sådan læser du en rapport: en prøve af kortet ved siden af forklaringen.
   Viser produktet i stedet for at nummerere løfter. */
.laesning { padding: var(--r7) 0 0; }
.laesning > .spalte > h2 { margin-bottom: var(--r4); }
.laesning .post { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
                  gap: var(--r4) var(--r7); padding: var(--r5) 0; border-top: var(--kant);
                  align-items: start; }
.laesning .post:last-child { border-bottom: var(--kant); }
.laesning .proeve { background: var(--kort); border: var(--kant); border-radius: var(--r1);
                    padding: var(--r4); }
.laesning .proeve .baand { border: 0; padding: 0; margin: 0; }
.laesning .proeve .udeladt { margin: 0; padding: 0; border: 0; }
.laesning .proeve .udeladt p:last-of-type { margin-bottom: var(--r3); }
.laesning .proeve .tal-raekker li { padding: 0; border: 0; }
.laesning .brod { max-width: var(--laes); }
.laesning h3 { margin: 0 0 var(--r2); }
.laesning .brod p:last-child { margin-bottom: 0; }

/* Under knapperne: prisen og beviset. Tilladelsen er et svar på "må I det?",
   ikke en overskrift (salgstekst-skillets hegn 2). */
.prislinje { font-size: var(--t0); color: var(--blaek-2); margin: var(--r3) 0 0; }
/* Prissiden */
.pris { margin: 0 0 var(--r4); }
.pris .tal { font: 800 clamp(3.6rem, 2.6rem + 4.5vw, 6rem)/.95 var(--skrift-display); color: var(--spot);
             letter-spacing: -.03em; }
.pris .enhed { font-size: var(--t2); color: var(--blaek-2); margin-left: 12px; white-space: nowrap; }
.pris .under { color: var(--blaek-2); margin: var(--r3) 0 0; max-width: 46ch; }

/* Ét iscenesat øjeblik: teksten, så kortet, så kvitteringerne én ad gangen. */
@media (prefers-reduced-motion: no-preference) {
  .anslag .tekst > *, .anslag > h1, .anslag > .manchet, .anslag > .knaprad {
    animation: stig .7s cubic-bezier(.2, .7, .2, 1) both; }
  .anslag .tekst > :nth-child(2), .anslag > .manchet { animation-delay: .06s; }
  .anslag .tekst > :nth-child(3), .anslag > .knaprad { animation-delay: .12s; }
  .anslag .tekst > :nth-child(4) { animation-delay: .18s; }
  .anslag .tekst > :nth-child(5) { animation-delay: .24s; }
  @keyframes stig { from { opacity: 0; transform: translateY(14px); } }
  @keyframes kvit { from { opacity: 0; transform: translateX(-8px); } }
}

/* Antallet på /leads. Det stod i bedømmelsens grønne båndstil — en optælling
   er ikke en bedømmelse, og grøn ville sige "godt" om et tal, der bare er et
   antal (24/9). Neutral flade, samme kant som kortene. */
.optaelling { background: var(--kort); border: 1px solid var(--kortkant);
  border-left: 4px solid var(--navy); border-radius: 8px;
  padding: var(--r4); margin: var(--r4) 0 0; }
.optaelling .overskrift { font-size: var(--t2); font-weight: 800; margin: 0 0 6px; }
.optaelling .interval { margin: 0; color: var(--tekst-2); }

/* Kodeordet på /opret (DESIGNSPEC § 2): kravet står før indtastning som en
   tjekliste, der krydser af live (`formular.js`), og feltet har vis/skjul. */
.krav { list-style: none; padding: 0; margin: 0 0 8px; font-size: var(--t0);
  color: var(--tekst-2); }
.krav li { display: flex; gap: 8px; align-items: baseline; margin: 0; }
.krav .flueben { flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--blaek-3); transform: translateY(2px); }
.krav li.opfyldt { color: var(--medgang); }
.krav li.opfyldt .flueben { background: var(--medgang); border-color: var(--medgang);
  clip-path: none; box-shadow: inset 0 0 0 2px #fff; }
.kodeordsfelt { display: flex; gap: 8px; align-items: flex-start; }
.kodeordsfelt input { flex: 1 1 auto; min-width: 0; }
.designflade .kodeordsfelt .vis-kodeord, .kodeordsfelt .vis-kodeord {
  flex: none; min-width: var(--klik); min-height: var(--klik); padding: 0 14px;
  background: transparent; color: var(--navy); border: 1.5px solid var(--streg); }
.designflade .kodeordsfelt .vis-kodeord:hover, .kodeordsfelt .vis-kodeord:hover {
  background: var(--fremhaev); color: var(--navy); border-color: var(--navy); }
.kodeordsfelt + .feltfejl { margin-top: calc(-1 * var(--r3)); }

/* --- mindre skærme --- */
@media (max-width: 960px) {
  .laesning .post { grid-template-columns: minmax(0, 1fr); }
  .opslag { grid-template-columns: minmax(0, 1fr); }
  .opslag > .brod, .note { grid-column: 1; }
  .note { max-width: var(--laes); }
}
@media (max-width: 720px) {
  .hoved .spalte { gap: 0 var(--r3); padding: 8px 0 4px; }
  /* Navigationen bryder. Portalens fire punkter er bredere end 390 px, og
     uden ombrydning skød de ud over kanten: hver eneste portalside var 398 px
     bred med "Indstillinger" skåret over i højre side (D8, målt 5/9). Det
     offentlige sidehoved har tre punkter og fylder én linje som før. */
  .hoved nav { order: 3; width: 100%; margin: 0 0 0 -10px; flex-wrap: wrap; }
  .hoved nav a { padding: 0 10px; }
  /* Navigationen har mistet sin `margin-left: auto` (den er i fuld bredde
     nedenfor), så handlingerne skal selv skubbe sig til højre. */
  .hoved .handlinger { margin-left: auto; }
  .anslag { padding-top: var(--r6); }
  .knaprad .knap { flex: 1 1 auto; }
}
/* **To rækker ved 390 px, ikke tre** (DESIGNSPEC § 11, målt 24/9). Bomærket
   og de to knapper kunne ikke stå på samme linje, så "Log ind" og "Opret
   gratis konto" brød ned på deres egen række med menuen under. Knapperne
   strammes ind (klikfladen er stadig `--klik` høj), og bomærket bliver en
   anelse mindre. */
@media (max-width: 480px) {
  .maerke { font-size: 1.15rem; gap: 8px; }
  .maerke svg { width: 20px; height: 20px; }
  .hoved .spalte { gap: 0 var(--r2); }
  .hoved .handlinger { gap: 6px; }
  .hoved .login { padding: 0 10px; font-size: 13px; }
  .hoved .knap { padding: 0 12px; font-size: 13px; }
  /* Ét langt ord som overskrift — "Abonnementsvilkår", "Modelbeskrivelsen" —
     var bredere end spalten ved 390 px og gav siden vandret rul (401 og 391
     px, målt 24/9). Overskriften bliver mindre, og et ord, der stadig ikke
     kan være der, må deles. */
  .anslag h1 { font-size: 2.1rem; overflow-wrap: break-word; hyphens: auto; }
}

/* ==========================================================================
   Portalen — smalt `<main>` uden sidehoved (skiftes til skelettet senere)
   ========================================================================== */
main:not(.spalte):not(.fuld) { max-width: 680px; margin: 0 auto; padding: var(--r6) var(--r4) var(--r7); }
main:not(.spalte):not(.fuld) > h1 { font-size: var(--t4); margin-bottom: 6px; }
main:not(.spalte):not(.fuld) h2 { font-size: var(--t3); margin: var(--r5) 0 var(--r2); }
main:not(.spalte):not(.fuld) h3 { font-size: var(--t2); }
.fod { margin-top: var(--r6); color: var(--blaek-3); font-size: var(--t0); }
.cvr { color: var(--blaek-2); margin: -4px 0 var(--r4); }
form.logud { margin-top: var(--r6); }
.videre { margin-top: var(--r6); line-height: 2.2; }
.videre a { display: inline-block; padding: 8px 0; }
.liste { margin: 0 0 var(--r5); }
.tom { color: var(--blaek-3); }
.antal { font-size: var(--t2); margin: var(--r5) 0 4px; }
.antal strong { }
.kvittering { color: var(--blaek-2); }

/* **En kolonneoverskrift følger sin kolonnes justering** (målestokkens T5,
   phk 6/9). "P-NUMMER" og "ANSATTE" stod venstrestillet over højrestillede
   tal, fordi justeringen sad på celletypen — `td` til højre, `th` til venstre
   — og en overskrift derfor pr. konstruktion ikke kunne følge sin kolonne.
   Den fejl slap gennem to gauntlet-runder.

   I en tabel med kolonneoverskrifter sættes justeringen derfor på KLASSEN og
   ikke på celletypen: `.t` er en talkolonne (højre), `.v` en tekstkolonne
   (venstre), og både overskriften og kolonnens celler bærer den samme.
   `test_kolonneoverskrifter_foelger_deres_kolonne` tæller det efter på det
   rendrede HTML og fejler, hvis en overskrift og dens tal peger hver sin vej.
   Specificiteten (0,1,2) er sat, så den vinder over `table.noegletal td` og
   `.enhedstabel th, .enhedstabel td` — det er dem, den skal rette op. */
table th.t, table td.t { text-align: right; }
table th.v, table td.v { text-align: left; }

table.noegletal { width: 100%; border-collapse: collapse; margin: 0 0 var(--r2); }
table.noegletal caption { text-align: left; font-weight: 600; padding: 0 0 8px; }
table.noegletal th { text-align: left; font-weight: 400; padding: 9px 0; border-top: var(--kant); }
table.noegletal td { text-align: right; padding: 9px 0; border-top: var(--kant);
                     }
.kilde { margin-top: var(--r4); }
.forbehold { margin-top: var(--r5); font-size: var(--t0); line-height: 1.55;
             color: var(--blaek-3); max-width: var(--laes); }
.suspension { border-left: 4px solid var(--baand-2); padding-left: 14px; }

/* Bedømmelsens bånd i rapporten. Farven er forstærkning — teksten bærer
   betydningen, så siden også virker i sort/hvid og for en skærmlæser. */
.bedoemmelse { background: var(--kort); border: var(--kant); border-left-width: 10px;
               border-left-style: solid; border-radius: var(--runding);
               padding: 18px 22px; margin: 0 0 var(--r5); }
.bedoemmelse .overskrift { font: 600 var(--t2)/1.2 var(--skrift-display); margin: 0 0 8px; }
.bedoemmelse .interval { margin: 0; color: var(--blaek-2); }
.baand-daarligst { border-left-color: var(--baand-1); }
.baand-svag      { border-left-color: var(--baand-2); }
.baand-midt      { border-left-color: var(--baand-3); }
.baand-staerk    { border-left-color: var(--baand-4); }
.baand-staerkest { border-left-color: var(--baand-5); }
.udeladt { border: 1px dashed var(--streg); border-radius: var(--runding);
           padding: 18px 22px; margin: 0 0 var(--r5); }
.udeladt .overskrift { font-weight: 600; margin: 0 0 8px; }
.udeladt p:last-child { margin: 0; color: var(--blaek-2); }

.retlige { border-left: 4px solid var(--baand-1); padding-left: 14px; margin: 0 0 var(--r5); }
.retlige h2 { margin-top: 0; }
.retlige ul { list-style: none; padding: 0; margin: 0; }
.retlige li { padding: 7px 0; margin: 0; border-top: var(--kant); }
.retlige li:first-child { border-top: none; }
.retlige .dato { color: var(--blaek-2); margin-right: 8px; }
.retlige .hvor { color: var(--blaek-3); font-size: var(--t0); }

.aftale { border: var(--kant); border-radius: var(--runding); background: var(--kort);
          padding: 20px 24px; margin: 0 0 var(--r4); }
.aftale h2 { margin-top: 0; }
.aftale .version { font-weight: 400; color: var(--blaek-3); font-size: var(--t0); }
.aftaletekst { max-height: 46vh; overflow-y: auto; font-size: .93rem; line-height: 1.6;
               color: var(--blaek-2); }
.aftaletekst p { margin: 0 0 12px; }
.dokumentversion { font-size: var(--t0); color: var(--blaek-3); margin: -8px 0 0;
                   }

/* Prosatabeller i vilkår og politik. På smalle skærme ruller de for sig selv
   frem for at skubbe hele siden ud. */
table.dokumenttabel { width: 100%; border-collapse: collapse; margin: 0 0 var(--r4); }
table.dokumenttabel th, table.dokumenttabel td { text-align: left; padding: 9px 14px 9px 0;
                                                 border-top: var(--kant); vertical-align: top; }
table.dokumenttabel tr:first-child th { border-top: none; font-weight: 600; }
@media (max-width: 820px) {
  table.dokumenttabel { display: block; overflow-x: auto; max-width: 100%; }
}
/* Fejlkoderne i API-dokumentationen: på smalle skærme bliver hver række til en
   post — status og kode øverst, forklaringen under — frem for tre smalle spalter. */
@media (max-width: 820px) {
  table.fejlkoder { display: block; overflow: visible; }
  table.fejlkoder tbody { display: block; }
  table.fejlkoder tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px;
                       padding: 10px 0; border-top: var(--kant); }
  table.fejlkoder tr:first-child { display: none; }
  table.fejlkoder th, table.fejlkoder td { display: block; padding: 0; border: 0; }
  table.fejlkoder td:last-child { grid-column: 1 / -1; color: var(--blaek-2); }
  table.fejlkoder td.t { color: var(--blaek-3); }
}

/* Det valgte selskab, når et forslag udfylder feltet i stedet for at føre
   videre. Feltet viser otte cifre, og den, der skrev "mox", skal kunne se, om
   det blev det rigtige selskab (D5: den skal kunne aflæses, ikke anes). */
.hjaelp.valgt { color: var(--blaek); font-weight: 600; margin: -6px 0 12px; }
.nynoegle { border: 2px solid var(--spot); border-radius: var(--runding);
            padding: 18px 22px; margin: 0 0 var(--r5); background: var(--kort); }
.nynoegle .overskrift { font-weight: 600; margin: 0 0 10px; }
.noegletekst { font-family: var(--skrift-kode); font-size: .95rem; word-break: break-all;
               background: var(--papir); padding: 12px 14px; border-radius: var(--runding); }

.sager .vaerdi { text-align: right; font-size: var(--t0); line-height: 1.4; }
/* **Datoen og nedtællingen er det, siden bruges til.** De stod i `--dus` på
   12 px og målte under 4,5:1 (D5) — netop den mikrotekst, der afgør, om en
   frist er sprunget. Den får brødtekstens tone og et hak mere i størrelse.
   Selektoren bærer `.designflade`, fordi `.designflade .raekker .hvor` ellers
   vinder specificitetskampen og holder tonen på `--dus` — reglen så rigtig ud
   og målte 4,40:1 på billedet bagefter (D1). */
.designflade .raekker.sager .hvor, .sager .hvor {
  color: var(--tekst-2, var(--blaek-2)); font-size: 12.5px; }

/* **Tre trin, ikke to** (C2/D3). Driftsbilledet skelner KRITISK fra ADVARSEL
   på de samme to sager, mens sagslisten gav dem samme mørkerøde kant og samme
   mørkerøde dato: "seks dage over fristen" og "om to dage" så ens ud på den
   ene side, hvor der faktisk prioriteres. Overskredet er rødt og kan ikke
   rettes; tæt på er ravgult og kan stadig nås; resten er neutral. */
.sager li.naer { border-left: 3px solid var(--streg); padding-left: 12px; }
.sager li.haster { border-left: 3px solid var(--varsel, #6b4a06); padding-left: 12px;
                   background: var(--varsel-lys, #f6ead2); }
.sager li.haster .vaerdi, .sager li.haster .vaerdi .hvor {
  color: var(--varsel, #6b4a06); font-weight: 600; }
.sager li.over { border-left: 5px solid var(--fare, var(--gammelroed)); padding-left: 12px;
                 background: var(--fare-lys, var(--roed-lys)); }
.sager li.over .vaerdi, .sager li.over .vaerdi .hvor {
  color: var(--fare, var(--gammelroed)); font-weight: 700; }

/* Fristen på sagens egen side, i sagslistens farvesprog. */
.fristmaerke { font-variant-numeric: tabular-nums; }
.fristmaerke.naer { color: var(--tekst-2, var(--blaek-2)); font-weight: 600; }
.fristmaerke.haster { color: var(--varsel, #6b4a06); font-weight: 700; }
.fristmaerke.over { color: var(--fare, var(--gammelroed)); font-weight: 700; }

.parter { display: flex; flex-wrap: wrap; gap: var(--r5); margin: var(--r4) 0 var(--r5); line-height: 1.6; }
.parter > div { flex: 1 1 14rem; min-width: 0; }
table.linjer { margin-top: var(--r5); }
table.linjer .ialt th, table.linjer .ialt td { font-weight: 600; border-top: 2px solid var(--blaek); }

/* Gem som PDF: alt der ikke er selve bilaget, ryger. */
/* Lead-søgningen. 17 brancher i én kolonne fylder hele skærmen, før man når
   ned til de andre felter — de skal stå i et gitter, der selv finder antallet
   af kolonner efter bredden. `min-width: 0` på varerne, fordi gitterelementer
   ellers nægter at blive smallere end deres indhold (lektion 31/8). */
.leadsoeg fieldset { border: 1px solid var(--streg); border-radius: 8px;
  padding: var(--r3) var(--r4) var(--r4); margin: 0 0 var(--r4); }
.leadsoeg legend { padding: 0 6px; font-size: var(--t-1); color: var(--blaek-2);
  text-transform: uppercase; letter-spacing: .06em; }
.leadsoeg fieldset { display: grid; gap: 2px var(--r4);
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.leadsoeg fieldset legend { grid-column: 1 / -1; }
.leadsoeg fieldset .accept { margin: 0; min-width: 0; }
/* En ukendt branche markerer hele gruppen med en rød streg i venstre side, og
   beskeden står øverst i den, ikke under formularen (24/9). Gruppen har ingen
   ramme i `.designflade`, så markeringen må være sin egen streg. */
.leadsoeg fieldset.ugyldig { border-left: 3px solid var(--gammelroed);
  padding-left: var(--r3); border-radius: 0; }
.leadsoeg fieldset .feltfejl { grid-column: 1 / -1; margin: 0 0 var(--r2); }
.leadsoeg .par { display: grid; gap: 0 var(--r4);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.leadsoeg .par > * { min-width: 0; }
.leadsoeg button { margin-top: var(--r4); }

/* Søgefeltet. phk 3/9: det bør være det mest iøjnefaldende på forsiden — det
   ER produktet. Feltet og knappen sidder i én ramme, så de læses som én ting. */
.selskabssoeg { margin: var(--r5) 0 var(--r4); max-width: 34rem; }
.selskabssoeg label { display: block; font-size: var(--t-1); color: var(--blaek-2);
  margin-bottom: 6px; }
.selskabssoeg .samlet { display: flex; gap: 0; border: 2px solid var(--blaek);
  border-radius: 10px; overflow: hidden; background: #fff; }
.selskabssoeg .samlet:focus-within { box-shadow: 0 0 0 4px rgba(31,59,196,.18);
  border-color: var(--spot); }
/* `margin: 0` er ikke pynt: basisreglen for `input` giver 20 px bundmargen til
   formularer, og inde i den fælles ramme gjorde den feltet 76 px højt — én
   linje tekst med et tomt bånd under (phk 4/9: "boksen er 2 rækker høj"). */
.selskabssoeg input { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0;
  margin: 0; padding: 14px 16px; font-size: var(--t1); background: transparent; }
.selskabssoeg input:focus { outline: none; box-shadow: none; }
.selskabssoeg button { border-radius: 0; padding-inline: var(--r5);
  font-size: var(--t0); white-space: nowrap; }
/* Forslagslisten er lige så bred som feltet, den hører til. Uden det stod
   den 640 px bred under et 700 px felt i portalens opslagskort — to kanter,
   der næsten flugter, læses som en fejl. */
.selskabssoeg .forslag { max-width: none; }
.selskabssoeg.stor { max-width: 40rem; margin-block: var(--r4) var(--r4); }
.selskabssoeg.stor input { padding: 18px 20px; font-size: var(--t2); }
.selskabssoeg.stor label { font-size: var(--t0); color: var(--blaek);
  font-weight: 600; }

/* Forslagslisten under søgefeltet. Ligger i dokumentets flow og ikke absolut
   placeret: en absolut liste skal have en position-kontekst, og den nærmeste
   var sektionen — så forslagene lagde sig oven på overskriften på mobil. */
.forslag { list-style: none; margin: 6px 0 0; padding: 0; max-width: 40rem;
  border: 1px solid var(--streg); border-radius: 10px; overflow: hidden;
  background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.07); }
.forslag li + li { border-top: 1px solid var(--streg); }
.forslag a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
  text-decoration: none; color: var(--blaek); }
.forslag li.aktiv a, .forslag a:hover, .forslag a:focus { background: var(--spot-lys-2); }
.forslag .navn { font-weight: 600; }
.forslag .hvor { font-size: var(--t-1); color: var(--blaek-2); }

/* Etiketter og småtekst, som flere sider bruger. */
.overlinje { font-size: var(--t-1); letter-spacing: .08em; text-transform: uppercase;
  color: var(--spot); font-weight: 700; margin: 0 0 6px; }
.label { font-size: var(--t-1); letter-spacing: .08em; text-transform: uppercase;
  color: var(--blaek-3); font-weight: 700; margin: 0 0 4px; }
.kortfod { font-size: var(--t-1); color: var(--blaek-2); margin: var(--r3) 0 0; }
.baand-intro { background: var(--spot-lys-2); padding: var(--r6) 0; margin: var(--r6) 0 0; }
.baand-intro h2 { margin-top: 0; }
.baand-intro p { max-width: 46ch; font-size: var(--t1); }
.varsel { border: 1px solid var(--streg); border-left: 4px solid var(--spot);
  border-radius: 8px; padding: var(--r4); background: #fff; }
.varsel .overskrift { font-size: var(--t-1); text-transform: uppercase;
  letter-spacing: .08em; color: var(--blaek-3); margin: 0 0 6px; font-weight: 700; }
.varsel p { margin: 0 0 4px; }

/* Rammen om en tabel, der er bredere end sin spalte. Rullet flytter tabellen
   og aldrig siden (D8). `.flerAar` stod her med sit eget sæt regler for
   justering; den tabel findes ikke længere — `.aartabel` afløste den — og
   reglerne er fjernet, så der kun er ét sted, justeringen kan komme fra. */
.tabelrul { overflow-x: auto; margin: var(--r5) 0; -webkit-overflow-scrolling: touch; }
/* Rammen kan få fokus, så tastaturet kan rulle (`sider_visning.aartabel`).
   Fokusringen tegnes indad: udad klippes den af kortets kant. */
.tabelrul:focus-visible { outline-offset: -3px; }

/* ==========================================================================
   Selskabssiden — den offentlige opslagsside (designoplæg 3/9-2026)

   **Egen palet og egen skrift, holdt inde i `.selskabsside`.** Designet er
   tegnet for netop denne side, og en halv indførsel på hele sitet ville give to
   halve designs i stedet for ét. Værdierne står som tal og ikke som husets
   roller, fordi de ER designets — bliver de en dag hele sitets, flytter de op
   i `:root`.

   Sidehovedet er undtagelsen: det står på hver side, og et marineblåt bånd på
   selskabssiden og et lyst alle andre steder ville være to sites.
   ========================================================================== */
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%;
             font-style: normal; font-display: swap;
             src: url(/static/fonts/archivo.woff2) format("woff2"); }

/* Bredderne står på `<body>`, ikke på `main`. Sidehoved og sidefod ligger
   uden for `main` og kunne ikke se en overskrivning dér — de blev ved 1120,
   mens indholdet var 1240 eller 760 (phk 6/9, målt på dev). */
body.selskabsflade { --spalte: 1240px; }
/* Skjult for øjet, læst op af skærmlæseren — tabellens tomme hjørnecelle. */
.visuelt-skjult { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.designflade {
  /* Paletten står nu i `:root` og gælder hele sitet — se dér. `.designflade`
     bærer kun skriften og grundfarven. */
  font-family: "Archivo", var(--skrift-brod); color: var(--navy); }
.designflade a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.designflade a:hover { color: var(--navy-lys); }
/* En knap og en kvittering er flader, ikke løbende tekst — de skal ikke
   understreges, bare fordi de er `<a>`. */
.designflade a.knap, .designflade a.kvit, .designflade .maerke,
.designflade .raekker a, .designflade .forslag a { text-decoration: none; }
.designflade h1, .designflade h2, .designflade h3 { text-wrap: pretty; }

.selskabstop { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px 24px; flex-wrap: wrap; padding-top: var(--r5); }
.selskabstop .meta { font-size: 13px; color: var(--dus); margin: 0 0 6px; }
/* Statusmærket og prislinjen i samme søjle til højre for navnet, så begge
   dele af A1 — "hvad hedder det, kører det, hvad koster resten" — står over
   folden ved 1300 px. */
.selskabstop .topstatus { display: flex; flex-direction: column; align-items: flex-end;
  gap: 8px; }
.toppris { margin: 0; font-size: 13px; color: var(--tekst-2); text-align: right; }
/* Linket er en klikflade, ikke et ord i brødtekst: det målte 15 px i højden
   på 390 px (24/9). DESIGNSPEC § 1 kræver 44 px. */
.toppris a { font-weight: 700; display: inline-flex; align-items: center;
  min-height: var(--klik); }
/* På 390 px falder søjlen ned under navnet og har hele bredden — og så skal
   den flugte med resten af teksten i stedet for at hænge ude til højre. */
@media (max-width: 720px) {
  .selskabstop .topstatus { align-items: flex-start; width: 100%; }
  .toppris { text-align: left; }
}
.selskabsside h1 { font-family: inherit; margin: 0; font-weight: 900; font-stretch: 80%;
  font-size: clamp(2rem, 1.1rem + 2.6vw, 44px); line-height: 1.05; letter-spacing: 0;
  max-width: none; }
/* **Navnet står, som det er registreret** (24/9). Overskriften var sat med
   versaler, så "Vestbyens Taxi ApS" stod som "VESTBYENS TAXI APS" — og "ApS"
   kan ikke skelnes fra CVR's formkode, når alt er store bogstaver. */
/* Én sætning, og den skal stå i fuld længde, når der er plads (phk 6/9). Der
   stod `max-width: 80ch`, og sætningen er ~108 tegn: den brækkede efter "19,3
   mio." med en halv spalte tom til højre. Ingen tegnbegrænsning her — spalten
   er grænsen. */
.selskabsside .resume { margin: var(--r4) 0 0; font-size: 16px; line-height: 1.5;
  color: var(--tekst-2); }
/* De to beløb: fed altid, farve efter fortegn (se `sider_visning.FREMHAEV`).
   `nowrap` gælder beløbet og ikke sætningen — "2,4 mio." på én linje og "kr."
   på den næste er to halve tal, men resten må gerne ombryde på en telefon. */
.selskabsside .resume .tal { font-weight: 700; white-space: nowrap; }
.selskabsside .resume .tal.positiv { color: var(--tal-positiv); }
.selskabsside .resume .tal.negativ { color: var(--tal-negativ); }

/* Statusmærket. Farven er forstærkning — teksten bærer betydningen, som i
   bedømmelsens bånd. Teksten er den rensede etiket (`rapport.status_etiket`),
   aldrig CVR's rå status: den røber en historisk konkurs, vi selv har slettet. */
.statuspil { display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px;
  background: var(--medgang-lys); color: var(--medgang); }
.statuspil .prik { width: 8px; height: 8px; border-radius: 50%;
  background: var(--medgang-prik); flex: none; }
.statuspil.sag { background: var(--roed-lys); color: var(--gammelroed); }
.statuspil.sag .prik { background: var(--baand-2); }
.statuspil.ophoert { background: #ecebe7; color: var(--tekst-2); }
.statuspil.ophoert .prik { background: #8b8d96; }

.selskabsgitter { display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px; margin-top: var(--r4); align-items: start; }
.selskabsgitter > * { min-width: 0; }
.selskabsgitter .side { display: grid; gap: 16px; position: sticky; top: 16px; }
.selskabsgitter .side .kort { margin: 0; }   /* gitteret ejer afstanden her */

/* Kortfladen. **Den hører til hele designfladen, ikke kun selskabssiden**
   (5/9): portalens forside, nøgler, forbrug og overvågning lå som løs tekst på
   papiret, mens opslagssiden og den offentlige forside samlede alt i kort — to
   udtryk i samme produkt. Selektoren stod som `.selskabsside .kort`, og da
   `.selskabsside` altid ligger inde i `.designflade`, ser den offentlige side
   præcis ud som før. Overskriften i kapitæler ER overlinjen (R3): en sektion
   indledes ikke af et stort navn med en tyk streg under. */
.designflade .kort { background: #fff; border: 1px solid var(--kortkant);
  border-radius: 8px; padding: var(--kortluft); margin: 0 0 16px; }
.designflade .kort:last-child { margin-bottom: 0; }
.designflade .kort h2 { font-family: inherit; margin: 0 0 4px; font-size: 15px;
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--navy); }
.designflade .kort h2 .enhed { font-weight: 600; color: var(--dus);
  text-transform: none; letter-spacing: 0; }
.designflade .kort h3 { font-family: inherit; margin: 18px 0 6px; font-size: 12px;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--dus); }
.designflade .kort h3:first-of-type { margin-top: 10px; }

/* **Kort, der kan foldes sammen** (phk 6/9: *"alle de enkelte bokse … skal
   have en 'Fold ind/ud' pil i højre hjørne"*). Fladen er `<details>`, hovedet
   er `<summary>` — se `sider_visning.foldbart` for hvorfor det ikke er
   JavaScript.

   HELE hovedet er klikfladen, ikke kun pilen, og den er `--klik` høj (H2).
   Browserens egen trekant slås fra: den står i venstre side og kan ikke
   flyttes, og pilen skal stå i højre hjørne. */
details.kort > summary { display: flex; align-items: center; gap: 16px;
  justify-content: space-between; min-height: var(--klik); cursor: pointer;
  list-style: none; margin: -13px 0 0; padding: 13px 0; }
details.kort > summary::-webkit-details-marker { display: none; }
details.kort > summary::marker { content: ""; }
.designflade details.kort > summary h2 { margin: 0; }
/* Pilen: to kanter i et kvadrat, drejet. Ét tegn, ingen fil at hente, og den
   kan drejes med en overgang. Peger ned, når kortet er åbent (”her slutter
   det”), og til højre, når det er foldet sammen. */
details.kort > summary::after { content: ""; flex: none; width: 8px; height: 8px;
  margin: 0 3px 3px 0; border-right: 2px solid var(--navy-lys);
  border-bottom: 2px solid var(--navy-lys); transform: rotate(45deg);
  transition: transform .15s ease; }
details.kort:not([open]) > summary::after { transform: rotate(-45deg);
  margin: 0 6px 0 0; }
details.kort > summary:focus-visible { outline: 3px solid var(--spot);
  outline-offset: 3px; border-radius: 4px; }
details.kort > summary:hover::after { border-color: var(--navy); }
/* Er kortet foldet sammen, skal dets bundmargen ikke være et tomt bånd. */
details.kort:not([open]) { padding-block: 14px; }
@media (prefers-reduced-motion: reduce) {
  details.kort > summary::after { transition: none; }
}
.designflade .underlinje { font-size: 12.5px; color: var(--dus); margin: 0 0 16px; }
.designflade .tabelrul { margin: 0; }
/* Rullende tabel: skyggen i kanten siger, at der står mere til højre. Uden den
   ser en afskåret talkolonne på 390 px ud som en fejl frem for som noget, man
   kan rulle til (D8). `local` på de hvide flader gør, at skyggen forsvinder,
   når man er rullet helt ud — den lover ikke mere, end der er.

   **Skyggen var målt for svag** (5/9): 16 % over 12 px gav 249,250,251 mod
   hvid på 390 px-billedet — under 3 % forskel, altså usynlig. Fire kritikere
   så det samme og læste kolonnen som klippet af. Nu 26 % over 18 px, og
   forskellen kan aflæses på pixlen. */
.designflade .tabelrul {
  background:
    linear-gradient(to right, #fff 40%, rgba(255, 255, 255, 0)) left / 28px 100% no-repeat local,
    linear-gradient(to left, #fff 40%, rgba(255, 255, 255, 0)) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(28, 33, 80, .26), rgba(28, 33, 80, 0))
      left / 18px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(28, 33, 80, .26), rgba(28, 33, 80, 0))
      right / 18px 100% no-repeat scroll; }
/* Vinket står, hvor væggen er — øverst til højre, over den kolonne der bliver
   klippet. **Det vises kun, når tabellen faktisk ruller.**

   Betingelsen var en medieforespørgsel (≤ 760 px), og den kan ikke vide, om
   der er noget at rulle til: to år står inden for 310 px på en 390 px-skærm,
   og vinket stod alligevel. Et falsk mærke er værre end intet — det får en
   fuldstændig tabel til at se afskåret ud. Nu måler `static/rul.js`
   `scrollWidth` mod `clientWidth` og sætter `data-rul` på rammen; uden
   JavaScript står der intet, hvilket er den tavse fejl frem for den
   løgnagtige. Skyggen ovenfor lyver ikke af sig selv: `local` gør, at den
   forsvinder, når der ikke er mere at rulle til. */
.designflade .rulvink { display: none; }
.designflade .tabelramme[data-rul] > .rulvink { display: block; margin: 0 0 6px;
  text-align: right; letter-spacing: .06em;
  text-transform: uppercase; color: var(--navy-lys); }

/* Årene som kolonner, nyeste først og fremhævet — det er dén, læseren
   beslutter på. `tabular-nums`, så cifrene står under hinanden. */
.aartabel { border-collapse: collapse; width: 100%; font-size: 13px;
  font-variant-numeric: tabular-nums; }
.aartabel th, .aartabel td { padding: 10px 12px; border-top: 1px solid var(--linje);
  white-space: nowrap; }
.aartabel thead th { border-top: 0; padding: 8px 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: var(--dus); }
/* Talkolonnerne har fast bredde, så de står tæt nok til at kunne sammenlignes
   med øjet; overskuddet af plads går til postens navn, ikke ud mellem årene. */
.aartabel thead th + th { width: 6.75rem; }
.aartabel tbody th { font-weight: 400; color: var(--tekst-2);
  padding-left: 0; white-space: normal; min-width: 11rem; }
.aartabel tbody td:first-of-type, .aartabel thead th:nth-child(2) {
  background: var(--fremhaev); color: var(--navy); font-weight: 700; }
.aartabel tr.sum th, .aartabel tr.sum td { font-weight: 700; color: var(--navy); }
/* Et regnskabsår, der ikke er tolv måneder, siger det under årstallet
   (`sider_visning.aarhoved`). Synligt og ikke kun i `title`, som en telefon
   aldrig viser — otte måneders resultat ved siden af tolv er ikke til at
   sammenligne, hvis man ikke kan se det. */
.aartabel thead .aarlaengde { display: block; font-weight: 400;
  letter-spacing: 0; color: var(--tekst-2); }
/* Postens navn bliver stående, mens årene ruller forbi. Uden det ruller
   "Arbejdskapital" ud af skærmen sammen med sit eget tal, og et tal uden sin
   post er ikke en oplysning. Hvid bund, fordi kortet er hvidt — kolonnen skal
   dække det, der glider ind under den. */
.aartabel tbody th, .aartabel thead th:first-child {
  position: sticky; left: 0; z-index: 1; background: #fff; }
/* Smal skærm: tallene rykker tættere sammen, så to år kan ses ad gangen.
   Tætheden er portalens fortrin — den skal ikke luftes ud, den skal passe. */
@media (max-width: 560px) {
  .aartabel { font-size: 12.5px; }
  .aartabel th, .aartabel td { padding: 9px 8px; }
  .aartabel thead th { padding: 7px 8px; }
  .aartabel thead th + th { width: 5.25rem; }
  .aartabel tbody th { min-width: 7.5rem; padding-right: 10px; }
}

.selskabsside .stamkort { padding: 22px; }
.selskabsside .stamkort h2 { font-size: 13px; margin-bottom: 8px; }
/* Stamkortenes i (fx "Andre navne") ligger i `.notefold` som de andre korts
   (`sider_visning.foldbart`). Rammen regner med kortets luft og overskriftens
   størrelse; stamkortet har begge mindre. */
.selskabsside .notefold:has(> .stamkort) { --kortluft: 22px; }
.selskabsside .notefold:has(> .stamkort) > .noteplads > .skygge { font-size: 13px; }
/* Stamkortet i hovedspalten (selskaber uden maskinlæsbare tal): to spor, så
   det fylder bredden i stedet for at stå som en smal søjle med luft omkring. */
.selskabsside .hovedspalte .stamkort .stam {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  column-gap: 28px; }
/* **Stamoplysningerne holdes sammen af rytme, ikke af streger** (phk 6/9:
   *"det virker som om der er lidt rigeligt luft her også"*). Målt før: 629 px
   for syv rækker, hvoraf 21 af hver rækkes 60 px var tomme — en tredjedel luft
   (målestokkens D7: datatætheden skal passe til dokumenttypen, og et
   stamkort er en opslagsliste, ikke en salgssektion).

   **Etiket og værdi står stadig over hinanden, ikke ved siden af.** To spalter
   ville halvere kortet, men spalten er 212 px bred, og *"702000 ·
   Virksomhedsrådgivning og anden ledelsesrådgivning"* skal kunne stå der:
   delt i to ville værdien få ~130 px og blive til fire linjer, hvor den nu er
   to. På 390 px er der slet ikke plads. Luften er skåret i stedet — mellemrum
   MELLEM rækker, intet mellem etiket og værdi, og skillelinjerne væk. Det er
   nærhedsprincippet: det, der hører sammen, står tæt.

   Ingen `min-height`: der er intet at klikke på i et stamkort. Hvor der ER
   (`.raekker .flade`), gælder `--klik`, og den regel vinder over tætheden. */
.stam { margin: 0; font-size: 13px; }
.stam > div + div { margin-top: 9px; }
.stam dt { color: var(--dus); font-size: 11.5px; line-height: 1.25;
  text-transform: uppercase; letter-spacing: .05em; }
.stam dd { margin: 0; font-weight: 600; line-height: 1.35;
  overflow-wrap: anywhere; }

/* Binavne og tidligere navne (phk 6/9). Listen ligger i et `dd` og skal arve
   dets vægt og rytme — punkttegn og indrykning ville give et listeudtryk,
   resten af stamkortet ikke har. Linjeafstanden er navnenes egen: ét navn er
   én linje, ikke en post med luft omkring (D7). `.naar` er årstallet på et
   navn, selskabet ikke bærer mere, og den skal kunne skelnes fra navnet uden
   at blive ulæselig — `--dus` er den samme dæmpning som `.stam dt`. */
.stam .navne { list-style: none; margin: 0; padding: 0; }
.stam .navne li { margin: 0; }
.stam .navne li + li { margin-top: 4px; }
.stam .navne .naar, .stam .navne li.naar {
  font-weight: 400; color: var(--dus); font-size: 12px; }

/* **Hvorfor et selskab står i resultatet, når man søgte på noget andet.**
   Uden linjen ser det ud som en fejl at søge på "Midtsjællands Godscentral" og
   få "HOLSHIP DANMARK A/S". Den står under navnet og ikke i `.hvor`-rækken med
   by og branche: den handler om søgningen, ikke om selskabet. */
.raekker .via, .forslag .via { display: block; font-size: 12px;
  font-weight: 400; color: var(--blaek-2); }
.designflade .raekker .via, .designflade .forslag .via { color: var(--dus); }

.selskabsside .cta { background: var(--navy); border: 0; color: #fff; padding: 24px; }
.selskabsside .cta h2 { color: #fff; font-size: 15px; text-transform: none;
  letter-spacing: 0; margin-bottom: 8px; }
.selskabsside .cta p { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: #cdd1ec; }
/* Prisen står på siden — også her (A2). Selskabssiden er den, en søgemaskine
   sender folk til, og kassen sagde "Se priserne" uden at sige hvad de var. */
.selskabsside .cta .ctapris { font-size: 13px; color: #cdd1ec; margin: 0 0 14px; }
.selskabsside .cta .ctapris b { color: #fff; font-size: 15px; font-weight: 800; }
/* A3: varslet om, at tilladelsen ikke er endelig, skal stå dér hvor købet
   overvejes — ikke kun i sidefoden. */
.selskabsside .cta .ctanote { margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .22); font-size: 12px;
  line-height: 1.5; color: #cdd1ec; }
.selskabsside .cta .knapper { display: grid; gap: 10px; }
.selskabsside .cta .knap { min-height: var(--klik); padding: 11px 18px; border-radius: 4px;
  text-decoration: none;
  background: #fff; color: var(--navy); border-color: #fff; }
.selskabsside .cta .knap:hover { background: #cdd1ec; border-color: #cdd1ec; color: var(--navy); }
.selskabsside .cta .knap.sekundaer { background: transparent; color: #fff;
  border-color: #5a62a8; font-weight: 600; }
.selskabsside .cta .knap.sekundaer:hover { background: rgba(255, 255, 255, .12);
  border-color: #cdd1ec; color: #fff; }
.selskabsside .cta :focus-visible { outline-color: #fff; }

.selskabsside .fodnoter { margin-top: var(--r4); }
.selskabsside .fodnoter p { margin: 0 0 var(--r3); font-size: 13.5px; }
.selskabsside .forbehold { max-width: 560px; font-size: 12px; line-height: 1.6;
  color: var(--dus); margin: 18px 0 0; }
/* Vejen til det næste selskab lå nederst på siden (`.videresoeg`) indtil 6/9.
   Den er flyttet op over folden som "Søg en anden virksomhed?" — på en telefon
   var bunden af et selskabsopslag længere væk end tilbageknappen. Farverne
   følger sidens, ikke husets staffage. */
.selskabsside .selskabssoeg { margin: 0; }
.selskabsside .selskabssoeg label { color: var(--dus); }
.selskabsside .selskabssoeg .samlet { border-color: var(--navy); border-radius: 4px; }
.selskabsside .selskabssoeg .samlet:focus-within { border-color: var(--navy-lys);
  box-shadow: 0 0 0 4px rgba(28, 33, 80, .16); }
.selskabsside .selskabssoeg button { background: var(--navy); border-color: var(--navy);
  font-family: inherit; font-weight: 700; }
.selskabsside .selskabssoeg button:hover { background: var(--navy-lys);
  border-color: var(--navy-lys); }
.selskabsside :focus-visible { outline-color: var(--navy); }

@media (max-width: 900px) {
  .selskabsgitter { grid-template-columns: minmax(0, 1fr); }
  .selskabsgitter .side { position: static; }
  .selskabsside .kort { padding: 20px; }
}

/* Sidehovedet i designets marineblå. Bomærket er husets kvittering — designets
   hvide firkant med et C er udtrykkeligt en pladsholder i afleveringen. */
.hoved { background: var(--navy); border-bottom: 0; }
.hoved .maerke { color: #fff; }
.hoved .maerke svg { color: #fff; }
/* Kvitteringens linjer er hvide på lys bund. På det marineblå bånd ville et
   hvidt mærke med hvide linjer være en tom firkant — linjerne tager bundens
   farve i stedet. */
.hoved .maerke svg path + path { fill: var(--navy); }
.hoved .maerke:hover { color: #cdd1ec; }
.hoved nav a { color: #cdd1ec; }
.hoved nav a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.hoved nav a[aria-current] { color: #fff; box-shadow: inset 0 -2px 0 #fff; }
.hoved .knap { background: #fff; color: var(--navy); border-color: #fff; }
.hoved .knap:hover { background: #cdd1ec; border-color: #cdd1ec; color: var(--navy); }
/* "Log ind" er omridset, ikke fyldt: to hvide knapper ved siden af hinanden
   ville ikke sige, hvilken af dem der er handlingen. */
.hoved .login { color: #fff; border-color: rgba(255, 255, 255, .38); }
.hoved .login:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.hoved :focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------------------
   Forsiden i samme design (oplæg 3/9): hero med søgefelt og eksempelkort,
   et bånd i lys blå, tre træk med hver sin lille produktprøve — og priserne,
   som oplægget ikke har, men som phk vil have stående.
   -------------------------------------------------------------------------- */
.forside.designflade .anslag { padding: 0; }
.forside.designflade .anslag .spalte { display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; padding: 72px 0 80px; }
.forside.designflade .anslag h1 { font-family: inherit; margin: 0 0 20px;
  font-size: clamp(2.1rem, 1.1rem + 3vw, 52px); font-weight: 900; font-stretch: 82%;
  line-height: 1.05; letter-spacing: 0; max-width: 20ch; text-transform: none; }
.designflade .overlinje { font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy-lys); margin: 0 0 14px; }
.designflade .manchet { font-size: 17px; line-height: 1.6; color: var(--tekst-2);
  max-width: 540px; margin: 0 0 32px; }
.designflade .finskrift { font-size: 13px; line-height: 1.6; color: var(--dus);
  max-width: 480px; margin: 14px 0 0; }
.designflade .label { font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dus); margin: 0 0 10px; }

/* Søgefeltet: felt og knap i én ramme, som resten af sitet — men i sidens
   farver og med designets runding. */
.designflade .selskabssoeg { margin: 0; max-width: 480px; }
.designflade .selskabssoeg label { font-size: 13px; font-weight: 700;
  color: var(--navy); margin-bottom: 8px; }
.designflade .selskabssoeg .samlet { border: 2px solid var(--navy); border-radius: 6px; }
.designflade .selskabssoeg .samlet:focus-within { border-color: var(--navy-lys);
  box-shadow: 0 0 0 4px rgba(28, 33, 80, .16); }
.designflade .selskabssoeg input { font-size: 16px; padding: 14px 16px; }
/* 16 px og ikke 15: under 16 zoomer iOS ind, når feltet får fokus (DESIGNSPEC § 2). */
.designflade .selskabssoeg button { background: var(--navy); border-color: var(--navy);
  padding: 14px 26px; border-radius: 0; }
.designflade .selskabssoeg button:hover { background: var(--navy-lys);
  border-color: var(--navy-lys); }
.designflade .forslag { border-color: var(--kortkant); }
.designflade .forslag li.aktiv a, .designflade .forslag a:hover,
.designflade .forslag a:focus { background: var(--fremhaev); }

/* Eksempelkortet. Mærkatet hænger ud over kanten, som i oplægget — og det
   siger "opdigtet", fordi § 21, stk. 2 forbyder at vise et rigtigt selskabs
   kreditoplysninger offentligt. */
.eksempel { position: relative; margin: 0; }
.eksempel .stempel { position: absolute; top: -12px; right: 20px; z-index: 1;
  background: #fff; border: 1px solid var(--navy); border-radius: 0;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); padding: 6px 10px; }
.eksempelkort { background: #fff; border: 1px solid var(--kortkant); border-radius: 8px;
  padding: 28px; box-shadow: 0 12px 32px rgba(28, 33, 80, .10); }
/* **Skriv aldrig `font: 800 22px/1.2 inherit`.** `inherit` kan ikke stå i
   kortformen sammen med andre værdier, og browseren smider hele erklæringen
   væk. Tolv regler i arket stod sådan og havde aldrig virket; de er fjernet
   24/9 frem for rettet, fordi phk har godkendt udseendet UDEN dem. At tænde
   dem gør knapper og etiketter mindre og federe i Archivo (ned til 11 px) —
   det er et designvalg, ikke en fejlrettelse, og det er phk's. De tilsigtede
   værdier står i commit d1fe031. */
.eksempelkort .selskab { margin: 0; }
.eksempelkort .cvrnr { font-size: 12.5px; color: var(--dus); margin: 4px 0 0; }
.designflade .kortfod { margin: 14px 0 0; padding-top: 14px;
  border-top: 1px solid var(--linje); font-size: 12px; line-height: 1.55;
  color: var(--dus); }

/* Bedømmelsens bånd: FEM felter, ikke oplæggets otte. De fem er modellens
   målte bånd (docs/design/2026-08-31-bedoemmelsens-udtryk.md); otte lige store
   felter ville vise en skala, vi ikke har. */
.designflade .baand { display: grid; gap: 10px; border: 0; padding: 18px 0 4px;
  margin: 0; }
.designflade .baand .skala { height: 8px; gap: 3px; }
.designflade .baand .skala span { border-radius: 2px; }
.designflade .baand .laes { display: block; margin: 0; }
.designflade .baand .laes b { display: block; font-size: 14px; font-weight: 700; }
.designflade .baand .laes small { display: block; margin-top: 3px; font-size: 12px;
  line-height: 1.5; color: var(--tekst-2); }

/* Signalrækkerne: etiket og værdi på én linje, kvitteringen under. */
.designflade .tal-raekker li { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px; align-items: baseline; padding: 14px 0; margin: 0;
  border-top: 1px solid var(--linje); }
.designflade .tal-raekker .hvad { font-size: 14px; font-weight: 700; }
.designflade .tal-raekker .vaerdi { font-size: 14px; font-weight: 600; text-align: right; }
.designflade .tal-raekker .under { grid-column: 1 / -1; font-size: 11.5px; color: var(--dus); }
.designflade .tal-raekker .kvit { grid-column: 1 / -1; justify-self: start; margin-top: 3px; }
.designflade .kvit { background: var(--fremhaev); color: var(--navy-lys);
  letter-spacing: 0; padding: 4px 8px; border-radius: 3px; }
.designflade a.kvit:hover { background: var(--navy-lys); color: #fff; }
.designflade .ref { color: var(--navy-lys); }

/* Båndet med spørgsmålet. Fuld bredde, lys blå. */
.designflade .baand-intro { background: #e8ecf7; padding: 64px 0; margin: 0; }
.designflade .baand-intro h2 { font-family: inherit; margin: 0 0 16px;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 32px); font-weight: 900; font-stretch: 85%;
  letter-spacing: 0; }
.designflade .baand-intro p { font-size: 16px; line-height: 1.65; color: var(--tekst-2);
  max-width: 560px; margin: 0; }

/* De tre træk: en lille produktprøve til venstre, teksten til højre. */
.traek .spalte { padding: 24px 0 40px; }
.traek .post { display: grid; grid-template-columns: 340px minmax(0, 1fr);
  gap: 64px; align-items: center; padding: 48px 0; border-bottom: 1px solid var(--kortkant); }
.traek .post > * { min-width: 0; }
.traek .proeve { background: #fff; border: 1px solid var(--kortkant); border-radius: 8px;
  padding: 22px; box-shadow: 0 6px 20px rgba(28, 33, 80, .06); }
.traek .proeve .baand { padding: 0; }
.traek .proeve .tal-raekker li { border-top: 0; padding: 0; }
.traek .brod h2 { font-family: inherit; margin: 0 0 16px;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 28px); font-weight: 900; font-stretch: 85%;
  line-height: 1.15; letter-spacing: 0; }
.traek .brod p { font-size: 15px; line-height: 1.65; color: var(--tekst-2);
  max-width: 620px; margin: 0 0 12px; }
.designflade .varsel { border: 0; background: transparent; padding: 0; border-radius: 0; }
.designflade .varsel .overskrift { letter-spacing: .1em;
  text-transform: uppercase; color: #a33d3d; margin: 0 0 8px; }
.designflade .varsel p { font-size: 14px; font-weight: 700; margin: 0 0 8px; }

.designflade .knap, .designflade button { border-radius: 4px;
  min-height: var(--klik); padding: 12px 22px; background: var(--navy); border-color: var(--navy);
  color: #fff; }
.designflade .knap:hover, .designflade button:hover { background: var(--navy-lys);
  border-color: var(--navy-lys); color: #fff; }
/* Tre udtryk, ikke ét (H1). Det sekundære gjaldt kun `.knap.sekundaer`, så en
   `<button class="sekundaer">` i portalen tabte specificitetskampen til
   `.designflade button` og blev tegnet som den primære handling. "Tilbagekald"
   og "Fjern" så derfor ud som "Lav en nøgle". */
.designflade .knap.sekundaer, .designflade button.sekundaer {
  background: transparent; color: var(--navy); border-color: var(--navy); }
.designflade .knap.sekundaer:hover, .designflade button.sekundaer:hover {
  background: var(--navy); border-color: var(--navy); color: #fff; }
/* Det, der ikke kan fortrydes: omridset i husets røde. Aldrig fyldt — en
   fyldt knap er sidens ene primære handling, og at tilbagekalde en nøgle
   eller fjerne et selskab fra overvågningen er ikke dét, kunden kom for. */
.designflade .knap.farlig, .designflade button.farlig {
  background: transparent; color: var(--fare); border-color: var(--fare); }
.designflade .knap.farlig:hover, .designflade button.farlig:hover {
  background: var(--fare); border-color: var(--fare); color: #fff; }
/* Den lille knap er smallere og har mindre skrift — den er ikke lavere.
   Højden er klikfladen, og den er fælles: `--klik`, ikke et tal her. */
.designflade button.lille, .designflade .knap.lille { min-height: var(--klik);
  padding: 0 14px; font-size: 13px; }
.designflade .knaprad { margin: 22px 0 0; }

/* Tilstandsmærket: et ord om noget, der er sket med rækken — "Tilbagekaldt",
   "Kvoten er brugt". Farven er forstærkning; ordet bærer betydningen.
   Den blå er den rolige tilstand, der ikke kræver noget af nogen. */
.designflade .tilstand { display: inline-block;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px;
  border-radius: 3px; background: var(--fremhaev); color: var(--navy-lys);
  white-space: nowrap; }
/* Alarmfamilien: de fire forhold, der kræver handling (S3). Det, der spærrer
   arbejdet lige nu, bærer desuden den røde bjælke i kanten — så en opbrugt
   kvote og en tilbagekaldt nøgle ikke kun skilles af ordet (D3). */
.designflade .tilstand.fare { background: var(--fare-lys); color: var(--fare);
  box-shadow: inset 3px 0 0 var(--fare); padding-left: 12px; }
/* Dæmpet alarm: samme familie, mindre hast. **En tilbagekaldt nøgle stod i
   husets rolige blå** (målt 5/9: 238,241,248 mod alarmens 251,241,238) — den
   så ud som en oplysning, mens den er et system, der har mistet sin adgang.
   Den er sket og kan ikke fortrydes; den spærrer ikke noget lige nu, og
   derfor bærer den ikke bjælken. */
.designflade .tilstand.fare.daempet { box-shadow: none; padding-left: 8px; }

/* Priserne. Oplægget har dem ikke; phk vil have dem stående, og vi har selv
   skrevet, at en pris hører hjemme på siden og ikke i en tilbudsmail. */
.priskort .spalte { padding: 8px 0 80px; }
.priskort h2 { font-family: inherit; margin: 0 0 24px;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 32px); font-weight: 900; font-stretch: 85%;
  letter-spacing: 0; }
.priskort .kortene { display: grid; gap: 16px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.priskort-et { background: #fff; border: 1px solid var(--kortkant); border-radius: 8px;
  padding: 26px; min-width: 0; }
.priskort-et .hvem { letter-spacing: .1em;
  text-transform: uppercase; color: var(--dus); margin: 0 0 8px; }
.priskort-et .pris { font-size: 15px; color: var(--tekst-2); margin: 0 0 8px; }
.gratismd { display: block; font-size: 14px; font-weight: 700; color: var(--navy); margin: 0 0 4px; }
.pris .gratismd { font-size: var(--t2); margin: 0 0 var(--r2); }
.priskort-et .pris b { font-size: 40px; font-weight: 900; font-stretch: 85%;
  color: var(--navy); margin-right: 8px; }
.priskort-et ul { list-style: none; margin: 0; padding: 0; font-size: 14px;
  line-height: 1.55; color: var(--tekst-2); }
.priskort-et li { margin: 0; padding: 12px 0; border-top: 1px solid var(--linje); }
.priskort-et li b { color: var(--navy); font-weight: 700; }

/* Kildelisten — kvitteringsrullen. Den bliver stående: påstandene i teksten
   hviler på den, og markedsføringslovens § 21 kræver, at de kan efterprøves. */
.designflade .kilder { border-top: 1px solid var(--navy); margin-top: 0;
  padding: var(--r5) 0 var(--r5); }
/* Sidefoden slutter sig til fladen frem for at svæve et halvt skærmbillede
   under den sidste kilde. */
.designflade + .sidefod { margin-top: 0; }
.designflade .kilder h2 { font-family: inherit; font-size: 15px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 14px; }
.designflade .kilder ol { font-size: 12.5px; line-height: 1.6; color: var(--dus); }
.designflade .kilder li::marker { font-family: inherit; color: var(--navy-lys); }
.designflade .kilder li:target { background: var(--fremhaev); box-shadow: 0 0 0 6px var(--fremhaev); }

/* Navnets betydning i sidehovedet (kun forsiden). Under 1100 px er der ikke
   plads ved siden af navigationen, og den forsvinder frem for at brække. */
.hoved .latin { border-left: 1px solid #5a62a8; border-radius: 0; margin: 0;
  padding: 0 0 0 14px; flex: 0 1 330px; min-width: 0; color: #cdd1ec;
  font: italic 400 11.5px/1.45 var(--skrift-brod); }
/* Navigationen har førsteret til pladsen: knappen må aldrig brække ned på en
   anden linje, fordi et citat fylder. Under 1240 px ryger citatet i stedet. */
.hoved nav { margin-left: auto; flex: none; }
@media (max-width: 1240px) { .hoved .latin { display: none; } }
/* Samme regel, men målt på spalten og ikke på skærmen: portalens
   formularsider er 760 px brede, og dér er der ikke plads til citatet ved
   siden af fire menupunkter og en log ud-knap. Målt på dev 6/9: sidehovedet
   blev 120 px højt og brækkede i tre linjer ved 1280, 1400 og 1600 px.
   Navigationen har førsteret til pladsen. */
/* Citatet skjules kun, hvor der faktisk ikke er plads — under 1240 px, hvor
   menuen har førsteret. Det stod også skjult på hver eneste `smal` side
   uanset skærmbredde, fordi rammen var 760; nu er rammen den samme overalt. */

@media (max-width: 980px) {
  .forside.designflade .anslag .spalte { grid-template-columns: minmax(0, 1fr);
    gap: 40px; padding: 48px 0 56px; }
  .eksempel { max-width: 480px; }
  .traek .post { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 0; }
  .traek .proeve { max-width: 340px; }
  .designflade .baand-intro { padding: 48px 0; }
}

/* --------------------------------------------------------------------------
   Portalen i samme design (phk 3/9: opslagene bag login skal ligne siden uden).

   Portalen deler nu skelet, palet og skrift med det offentlige site. Her står
   kun det, der er portalens eget: den smalle spalte til formularer og lister,
   og de kort, som kun findes bag login — bedømmelsen, de retlige forhold,
   ledelsen.
   -------------------------------------------------------------------------- */
/* **Den smalle bredde gælder INDHOLDET, ikke rammen** (målt 7/9).
   `body.smal { --spalte: 760px }` narrede også sidehovedet og sidefoden, som
   bruger den samme `.spalte`: på en 1400 px skærm sad bomærket og menuen i et
   760 px bredt bånd på hele portalen og hele admin, mens de sad i 1120-1240 på
   forsiden og opslaget. Det var dét, phk kaldte *"bredden på siden skifter
   pludselig"* — det var ikke teksten, det var hele toppen.

   Rammen bliver derfor stående, og kun `main` er smal. Sidegevinsten er, at
   latin-citatet har plads igen: det blev skjult på alle smalle sider, fordi
   der ikke var luft mellem bomærket og menuen. */
main.spalte.smal { max-width: 760px; padding-top: var(--r6); }
main.smal > h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.4rem); margin-bottom: 6px; }
/* Linjen efter en formular skal ikke klæbe til knappen. */
.designflade form + p, .designflade form + .videre { margin-top: var(--r4); }
main.smal h2 { font-size: var(--t3); margin: var(--r5) 0 var(--r2); }
main.smal h3 { font-size: var(--t2); }

/* Overskrifterne følger fladens skrift. Uden den her ville brødteksten være
   Archivo og overskrifterne husets Hanken — to skrifter uden en grund. */
.designflade h1, .designflade h2, .designflade h3 { font-family: inherit;
  letter-spacing: -.01em; }
.designflade label { color: var(--navy); }
.designflade input:focus-visible, .designflade textarea:focus-visible,
.designflade select:focus-visible { border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--fremhaev); }
.designflade table.noegletal caption {
  letter-spacing: .05em; text-transform: uppercase; padding-bottom: 10px; }
.designflade table.noegletal th, .designflade table.noegletal td {
  border-top-color: var(--linje); font-size: 14px; }
.designflade table.noegletal th { color: var(--tekst-2); }

/* Bedømmelseskortet: båndets farve som kant, skalaen indeni. Farven er
   forstærkning — teksten bærer betydningen (docs/design/2026-08-31). */
.designflade .kort.bedoemmelse { border-left-width: 8px; border-left-style: solid;
  padding: var(--kortluft); margin-bottom: 16px; }
.designflade .kort.baand-daarligst { border-left-color: var(--baand-1); }
.designflade .kort.baand-svag      { border-left-color: var(--baand-2); }
.designflade .kort.baand-midt      { border-left-color: var(--baand-3); }
.designflade .kort.baand-staerk    { border-left-color: var(--baand-4); }
.designflade .kort.baand-staerkest { border-left-color: var(--baand-5); }
.designflade .kort.bedoemmelse .baand { padding: 6px 0 0; }
.designflade .kort.bedoemmelse .laes b { font-size: 17px; }

/* --------------------------------------------------------------------------
   Topboksen — handoffet af 6/9, bygget 7/9.

   Tre lige spalter: placeringen blandt danske selskaber, en rigtig femårsgraf
   og det anbefalede kreditmaksimum. Derunder *Trækker op* / *Trækker ned*, og
   nederst forbeholdet om beregningen.

   **Det vender bevidst formen fra 6/9 kl. ~17**, hvor kurven var en udtværet
   flade bag teksten. Den løsning måtte slukke grafen helt under 720 px, fordi
   en vandret udtoning intet har at tone ud til, når spalterne er stablet.
   Tre spalter kan stables; en baggrund kan ikke.

   **Farverne er husets egne** (phk 6/9: *"Behold vores egne farver og
   baggrund."*). Handoffets `#a33d3d`/`#3d7a4e`-familie bruges ikke — kanten,
   tonen og skalaen henter `--baand-1` … `--baand-5`, som er kørt gennem
   dataviz-validatoren med CVD-separation 15,2 på værste nabopar
   (`docs/design/2026-08-31-bedoemmelsens-udtryk.md`). Papiret er `--papir`.
   -------------------------------------------------------------------------- */
/* **Kortets kant og tone følger båndet.** Handoffet har 6 px kant og en
   gradient fra en lys udgave af båndets farve i venstre hjørne til hvid ved
   46 %. Tonen er båndfarven blandet 8 % ind i hvidt (`--baandtone-N` i
   `:root`), og at de to tal er i familie holdes af en test, der regner
   blandingen efter — ikke af hukommelsen (D9).

   **Fallbacken står inde i `var()` og ikke som en egen regel.** Første udgave
   satte `--baandtone: #fff` i en regel efter de fem båndregler; de har samme
   specificitet, så den sidste vandt, og ingen kort fik nogen tone. Fejlen var
   usynlig i stilarket og først målbar på det rendrede kort (7/9).

   **Tonen koster kontrast, og prisen er målt** (7/9). `--dus` (#6b6f8f) måler
   4,89:1 på hvidt papir, men 4,22:1 på den røde tone og 4,28:1 på den grønne —
   under kravet på 4,5. Det gælder også handoffets egen tone (#eef6f0: 4,44).
   Ingen tone, der kan ses, holder `--dus` lovlig, så **al tekst i kortet står i
   `--tekst-2` eller mørkere** (7,0–7,6:1 på alle fem toner). Samme fælde som
   nuancen over den gamle graffladet — tredje gang, og derfor en test. */
.designflade .kort.topboks { border-left-width: 6px;
  background: linear-gradient(105deg, var(--baandtone, #fff) 0%, #fff 46%); }
.designflade .kort.baand-daarligst { --baandtone: var(--baandtone-1); }
.designflade .kort.baand-svag      { --baandtone: var(--baandtone-2); }
.designflade .kort.baand-midt      { --baandtone: var(--baandtone-3); }
.designflade .kort.baand-staerk    { --baandtone: var(--baandtone-4); }
.designflade .kort.baand-staerkest { --baandtone: var(--baandtone-5); }

/* De tre spalter er LIGE brede (handoffet), og skillelinjerne står mellem dem
   med samme luft til begge sider. `minmax(0, 1fr)` og ikke `1fr`: en lang
   etiket ("Bund 50 %" i 40 px) ville ellers kunne skubbe spalten bredere end
   sin tredjedel og gøre de tre ulige. */
.topgitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch; }
.topgitter .tsp { padding: 0 var(--kortluft); display: flex;
  flex-direction: column; min-width: 0; }
.topgitter .tsp:first-child { padding-left: 0; }
.topgitter .tsp:last-child { padding-right: 0; }
.topgitter .tsp + .tsp { border-left: 1px solid var(--linje); }
.topgitter .overlinje { margin: 0 0 10px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-2); }
/* Overskriften i første spalte skal blive på én linje — "Blandt danske
   selskaber" brækket midt over ser ud som to etiketter. */
.topgitter .placering .overlinje { white-space: nowrap; }

/* Rangen: den primære markør. */
/* **Rangen står alene** (phk 7/9: *"fjern i øvrigt 'blandt danske selskaber',
   det står alligevel nedenunder"*). Overlinjen sagde det samme som sætningen
   under skalaen, og to gange det samme er ikke to oplysninger. Uden den rykker
   tallet op, og det må gerne være lidt større: det er kortets hovedtal.
   Den negative margen løfter versalhøjden op i flugt med naboernes
   overlinjer — uden den hang tallet lavt i en spalte, der er tom foroven. */
.topgitter .etiket { font-family: inherit; margin: -6px 0 0; font-weight: 900;
  font-stretch: 80%; font-size: clamp(32px, 1.1rem + 2vw, 46px);
  line-height: 1; letter-spacing: .01em; text-transform: uppercase;
  white-space: nowrap; color: var(--navy); }
/* Nuancen er phk's ord om midterfeltet ("lidt over middel"): en hjælp til at
   læse rangen, ikke en del af den.

   **Handoffet sætter den i bedømmelsens farve, og det kan husets palet ikke
   bære.** Nuancen findes kun på de fem bånd omkring medianen, og de falder i
   farvetrinnene `midt` og `staerk`. Målt 7/9 som 14 px fed tekst på båndets
   egen tone: `--baand-3` giver **2,29:1** og `--baand-4` **3,60:1** — begge
   under 4,5. De to farver er valgt til en skala, hvor de skal kunne skelnes
   fra hinanden, ikke til at bære 14 px bogstaver. Derfor står ordet i
   `--navy`, og farven siger sit gennem kanten, tonen og det fremhævede trin på
   skalaen. Farven forstærker; ordet bærer. */
.topgitter .nuance { margin: 6px 0 0; font-size: 14px; font-weight: 700;
  color: var(--navy); }
/* Selskabets eget trin er højere og bredere end de øvrige — handoffets greb.
   Farven er allerede båndets (`.skala .aktiv`), så fremhævelsen er formens,
   ikke en ekstra farve. */
.topgitter .skala { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; height: 14px;
  align-items: center; max-width: 320px; margin: 16px 0 0; }
.topgitter .skala span { height: 8px; }
.topgitter .skala .aktiv { height: 14px; border-radius: 3px; }
.topgitter .frekvens { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--tekst-2); }

/* **Grafens kasse har lærredets eget forhold** (`aspect-ratio`, holdt op mod
   `visning.GRAF_B/GRAF_H` af en test). Første udgave lod den strække sig med
   `flex: 1`; `preserveAspectRatio` er `meet`, så tegningen blev centreret med
   en tom bjælke over og under — og da grafen ved 900 px spænder over begge
   spalter, blev den skaleret til 746 px bred, hvor 9,5 enheders årstal blev til
   27 px bogstaver. Målt på dev 7/9.

   Med kassens forhold bundet til lærredet er der aldrig en tom bjælke, og
   `max-width` sætter loftet over, hvor stor tegningen kan blive. De automatiske
   margener midterstiller den i den højde, naboerne sætter. */
.topgitter .udvikling .forloebsgraf { display: block; width: 100%;
  max-width: 420px; aspect-ratio: 260 / 160; height: auto; flex: none;
  margin: auto 0; overflow: visible; }
.topgitter .udentekst { margin: 0; font-size: 12.5px; line-height: 1.55;
  color: var(--tekst-2); }
.forloebsgraf .middellinje { stroke: var(--streg); stroke-width: 1;
  stroke-dasharray: 3 3; }
.forloebsgraf .middelord { font-size: 9px; fill: var(--tekst-2); }
.forloebsgraf .linje { fill: none; stroke: var(--navy); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round; }
.forloebsgraf .punkt { fill: #fff; stroke: var(--navy); stroke-width: 2; }
.forloebsgraf .punkt.nu { fill: var(--navy); stroke: none; }
.forloebsgraf .aar { font-size: 9.5px; fill: var(--tekst-2); }
.forloebsgraf .endeetiket { font-size: 9.5px; font-weight: 700; fill: var(--navy); }
.forloebsgraf .endeetiket.nu { font-size: 10.5px; font-weight: 800; }

/* Kreditmaksimum: samme talstørrelse som rangen — de to er sidestillede. */
.topgitter .maks .beloeb { font-family: inherit; margin: 0; font-weight: 900;
  font-stretch: 80%; font-size: clamp(28px, 1.1rem + 1.6vw, 40px);
  line-height: 1; white-space: nowrap; color: var(--navy); }
.topgitter .maks.intet .beloeb { font-size: 20px; font-weight: 800;
  color: var(--tekst-2); }
.topgitter .maksgrund { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--tekst-2); }
/* **Mærket ved antagelsen skal kunne SES uden at pege på det.** Sætningen om,
   at vi ikke kender betalingsadfærden, er hele begrænsningen på beløbet; blev
   den skjult helt, ville et tal stå alene og ligne et løfte. Derfor bliver
   linjen stående, prikket understreget som rolleordene, og selve sætningen
   ligger i noten. Linjeafstanden er `--klik`, så knappen er en fuld klikflade
   uden at sprænge afsnittet — samme greb som i tegningsreglen. */
.topgitter .maksnote { margin: 4px 0 0; font-size: 12.5px;
  line-height: var(--klik); }
/* **Klassen hedder `notested` og ikke `note`.** `.note` findes i forvejen
   (linje 259): en tekstnote i sidens gitter med `grid-column: 2` og en 2 px
   blå streg over sig — og den streg slog igennem her og lagde sig som en
   fremmed linje over mærket (målt på det rendrede billede 6/9). Samme fejlform
   som `.kort.udeladt` i beløbets egen kasse: et klassenavn, der findes i
   forvejen, betyder også det, det betyder andre steder. */
.notested { position: relative; display: inline-block; }
.designflade .noteknap, .noteknap {
  display: inline-flex; align-items: center; min-height: var(--klik);
  padding: 0 2px; margin: 0; border: 0; border-radius: 3px; background: none;
  color: var(--navy); font: inherit; font-weight: 700; cursor: pointer;
  text-align: left; text-decoration: underline dotted;
  text-underline-offset: 4px; text-decoration-thickness: 2px; }
.designflade .noteknap:hover, .noteknap:hover {
  background: var(--fremhaev); color: var(--navy-lys); }
/* **Kortenes i** (phk 7/9: *"Alle de der disclaimer skal væk.. eller laves som
   en popup ved hover over sådan et 'i' ikon. Det bærer alt for meget præg af
   AI."*). Forbeholdet er ikke slettet — det er foldet ind bag et mærke, der
   bliver stående, præcis som antagelsen ved kreditmaksimum blev det 6/9.

   **Klikfladen er 48 px, cirklen er 18.** De 30 px forskel er gennemsigtig
   luft: et 18 px mål ville være under DESIGNSPEC § 1's 44, og et 48 px synligt
   ikon ville råbe ad et kort, hvis pointe er tallet. Knappen ligger inde i
   `<summary>`, som selv er `--klik` høj, så hovedet vokser ikke af den.

   `--tekst-2` og ikke `--dus`: ikonet står også på topboksens tone, hvor `--dus`
   måler 4,22:1 (se afsnittet om topboksen). */
.ikonknap { width: var(--klik); height: var(--klik); padding: 0;
  justify-content: center; text-decoration: none; }
.ikonknap > span { display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--tekst-2); color: var(--tekst-2);
  font: 700 italic 11px/1 var(--skrift-brod); }
.designflade .ikonknap:hover, .ikonknap:hover { background: none; }
.ikonknap:hover > span, .ikonknap[aria-expanded="true"] > span {
  border-color: var(--navy); color: var(--navy); background: var(--fremhaev); }
/* Ikonet skal klæbe til overskriften, ikke svæve midt i hovedet: `<summary>` er
   `space-between`, så uden den automatiske margen ville pilen i højre hjørne og
   ikonet dele pladsen mellem sig. */
details.kort > summary > .ikonnote { margin: 0 auto 0 -8px; }
/* Kortets note er bredere end et rolleopslag — den bærer hele afsnit — og den
   hænger i VENSTRE kant, fordi ikonet står i venstre side. `min()` holder den
   inden for skærmen på 390 px, hvor 400 px ville give vandret rul (D8). */
.notetekst.kortnote { left: 0; right: auto;
  width: max-content; max-width: min(400px, calc(100vw - 40px)); }
.notetekst.kortnote p { margin: 0 0 8px; }
.notetekst.kortnote p:last-child { margin: 0; }

/* **I sidespalten hænger kortets note i højre kant** (24/9). Spalten står
   yderst til højre, og noten ved "Tidligere navne" gik fra x=1223 til 1623
   ved 1440 px — ud over skærmen. Kun når sidespalten er en spalte; under
   900 px står den i fuld bredde, og så er venstre kant den rigtige. */
@media (min-width: 901px) {
  .side .notetekst.kortnote { left: auto; right: 0;
    max-width: min(400px, calc(100vw - 40px)); }
}

/* Noten hænger i HØJRE kant: kreditmaksimum står i kortets yderste spalte, og
   et panel forankret til venstre ville stikke ud over kortet og give siden
   vandret rul (D8). */
.notetekst { display: none; position: absolute; z-index: 5; right: 0;
  top: 100%; min-width: 220px; max-width: 300px; padding: 10px 12px;
  background: #fff; border: 1px solid var(--navy); border-radius: var(--runding);
  box-shadow: 0 6px 20px rgba(28, 33, 80, .18);
  font-size: 13px; line-height: 1.5; font-weight: 400; text-align: left;
  color: var(--blaek); }
.notested:hover > .notetekst,
.notested:focus-within > .notetekst,
.noteknap[aria-expanded="true"] + .notetekst { display: block; }

/* --------------------------------------------------------------------------
   Forsiden bag login (phk's design 7/9).

   Siden var portalens smalle formularskabelon — 760 px, fire kort under
   hinanden — mens opslagssiden ved siden af er 1240 px i to spalter. Det var
   dét, phk kaldte "layoutet skifter pludselig". Den bruger nu det samme
   skelet som opslaget, så de to sider bag login er samme hjemmeside.
   -------------------------------------------------------------------------- */
.portaltop { padding: var(--r5) 0 var(--r4); }
.portaltop .overlinje { margin: 0 0 6px; font-size: 12px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tekst-2); }
/* **Ikke versaler som selskabssidens h1.** Dér er overskriften et navn, der
   skal kunne genkendes på afstand; her er den et spørgsmål, og et spørgsmål i
   versaler er et råb. Samme vægt og skrift, anden form. */
.designflade .portalforside h1,
.designflade .koncernside h1 { margin: 0; font-weight: 900;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 40px); line-height: 1.05;
  letter-spacing: -.01em; color: var(--navy); }
.portalforside .opslagskort { margin-bottom: 16px; }
.portalforside .opslagskort .hjaelp { margin: 10px 0 0; }
/* Linjen ud af et kort — "Se forbruget", "Gå til overvågning". Den står
   nederst i kortet og er en vej videre, ikke en handling: derfor et link og
   ikke en knap, men med `--klik` i højden, så den kan rammes med en tommel. */
.designflade .kortvidere { margin: 14px 0 0; font-size: 13px;
  line-height: var(--klik); }
.designflade .kortvidere a { font-weight: 700; }

/* Målerens bjælke. Tallet er præcisionen, bjælken er forholdet — "52 af 1000"
   siger hvor meget, bjælken siger på et blik, at det næsten ingenting er.
   Farven er husets marineblå og skifter ikke med fyldningen: en måler, der
   bliver rød undervejs, ville påstå en advarsel, der først gælder ved loftet
   (dér tager `.opbrugt` over). */
.maalere .maalertop { display: flex; align-items: baseline; flex-wrap: wrap;
  justify-content: space-between; gap: 4px 16px; }
/* Sporet er `--kortkant` og ikke `--linje`: målt på det rendrede kort 7/9 var
   `--linje` (#eeeeea) på hvidt kort reelt usynligt, og så var bjælken ved 6 %
   ingenting — hverken spor eller fyld. En måler, man ikke kan se, måler ikke. */
.maalere .bjaelke { display: block; margin-top: 8px; height: 5px;
  border-radius: 3px; background: var(--kortkant); overflow: hidden; }
/* Mindst 3 px fyld, også ved en brøkdel af en procent: et fyld på nul pixel
   ser ud som en måler, der ikke virker, frem for som "næsten intet brugt". */
.maalere .bjaelke > span { display: block; height: 100%; min-width: 3px;
  background: var(--navy); border-radius: 3px; }
.maalere .opbrugt .bjaelke > span { background: var(--fare); }

/* --------------------------------------------------------------------------
   Find selskaber — kriterier til venstre, det levende svar til højre.

   Siden var otte felter i én kolonne uden tilbagemelding, før man trykkede.
   Nu står svaret ved siden af og klæber, så tallet er synligt, mens man skruer.
   -------------------------------------------------------------------------- */
.soegegitter { display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px; align-items: start; }
.soegeflade .kriterier > .kort { margin-bottom: 16px; }
/* Svaret følger med ned ad siden. `--klik` fra toppen, så det ikke klæber til
   sidehovedets underkant. */
.svarspalte { position: sticky; top: 16px; }
.designflade .svarkort .antal { font-family: inherit; margin: 4px 0 2px;
  font-weight: 900; font-stretch: 80%; font-size: 40px; line-height: 1;
  color: var(--navy); font-variant-numeric: tabular-nums; }
/* Mens der tælles, dæmpes tallet — men det bliver stående. Et tal, der bliver
   til en spinner ved hvert træk, flimrer; et dæmpet tal siger "det her er ved
   at blive et andet" uden at forsvinde. */
.designflade .svarkort .antal[data-venter] { opacity: .45; }
.designflade .svarkort .hjaelp { margin: 0; }
.designflade .svarkort .knaprad { margin-top: var(--r4); flex-wrap: wrap; }
.designflade .binder { list-style: none; margin: 10px 0 0; padding: 0;
  font-size: 13px; line-height: 1.6; color: var(--tekst-2); }
/* Spejlet: hvordan hvert kriterium er udledt. Almindelige sætninger, ikke en
   tabel — de skal læses, ikke sammenlignes. */
.designflade .forklaringer { list-style: none; margin: var(--r4) 0 0;
  padding: 0; font-size: 14px; line-height: 1.6; color: var(--tekst-2);
  max-width: var(--laes); }
.designflade .forklaringer li { margin: 0 0 8px; }

/* Brikkerne: de valgte kriterier, hver med sit kryds. Også svaret på "hvad var
   det, der gjorde resultatet nul". */
.brikker { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--r4); }
.designflade a.brik { display: inline-flex; align-items: center; gap: 2px;
  min-height: 34px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--kortkant); background: #fff; font-size: 13px;
  font-weight: 700; color: var(--navy); text-decoration: none; }
.designflade a.brik:hover { border-color: var(--navy); background: var(--fremhaev); }
/* Standarden ser anderledes ud end et valg, man selv har truffet. */
.designflade a.brik.standard { font-weight: 400; color: var(--tekst-2);
  border-style: dashed; }

/* Skyderen og dens talfelt. Talfeltet er det rigtige felt — skyderen er
   tilføjelsen, og uden JavaScript gør den ingenting. */
.skyder { margin: 0 0 var(--r3); }
.skyderrad { display: grid; grid-template-columns: minmax(0, 1fr) 9rem;
  gap: 12px; align-items: center; }
.designflade .skyderrad .tal { margin: 0; }
.designflade .skyderrad .spor { width: 100%; accent-color: var(--navy);
  min-height: var(--klik); }

/* Afkrydsningslisterne: to spalter, så sytten brancher ikke bliver en søjle. */
.valgliste { display: grid; grid-template-columns: repeat(auto-fill,
  minmax(200px, 1fr)); gap: 0 16px; }
.designflade fieldset { border: 0; padding: 0; margin: 0 0 var(--r4); }
.designflade fieldset legend { padding: 0; font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-2); }
.designflade label.valg { display: flex; align-items: center; gap: 8px;
  min-height: var(--klik); margin: 0; font-weight: 400; cursor: pointer; }

@media (max-width: 900px) {
  .soegegitter { grid-template-columns: minmax(0, 1fr); }
  /* Klæber ikke på en telefon: et panel, der følger med, æder skærmen. */
  .svarspalte { position: static; }
}

/* Handlingsrækken over folden: "Søg en anden virksomhed?" og vejen til
   koncernen. To indgange, samme vægt, og begge over folden — koncernlinket lå
   indtil 7/9 i sidespaltens nederste kort, altså på en telefon under fem års
   regnskabstal, arbejdssteder og ledelse. */
.handlingsrad { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px var(--r5); }
.videreled { margin: 0; }
.designflade a.viderelink { display: inline-flex; align-items: center;
  min-height: var(--klik); font-weight: 700; }

/* Årsrapporterne: ét år, ét link. Året bærer linket, og dokumenttypen står
   dæmpet efter det — en læser vælger år, ikke filformat. */
.designflade .aarsrapporter { margin: 16px 0 0; font-size: 13px;
  line-height: var(--klik); color: var(--tekst-2); }
.designflade .aarsrapporter a { font-weight: 700; white-space: nowrap; }
.designflade .aarsrapporter .art { font-weight: 400; color: var(--tekst-2); }

/* Trækker op / Trækker ned. Retningen står med ord i overskriften — pilen og
   farven forstærker, de bærer ikke betydningen alene. */
.traekgitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px; margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--linje); }
.designflade .kort.topboks .traek .overlinje { margin: 0 0 8px; font-size: 12px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.designflade .kort.topboks .traek.op .overlinje { color: var(--baand-5); }
.designflade .kort.topboks .traek.ned .overlinje { color: var(--baand-1); }
.designflade .kort.topboks .traek ul { list-style: none; margin: 0; padding: 0; }
.designflade .kort.topboks .traek li { margin: 0; padding: 8px 0;
  border-top: 1px solid var(--linje); font-size: 13px; line-height: 1.5;
  color: var(--tekst-2); }
.designflade .kort.topboks .traek li.tom { color: var(--tekst-2);
  font-style: italic; }
.designflade .kort.topboks .kortfod { margin: 14px 0 0; padding: 0; border: 0;
  font-size: 11.5px; line-height: 1.6; color: var(--tekst-2); }
.designflade .kort.topboks .graffod { margin: 6px 0 0; font-size: 11.5px;
  line-height: 1.6; color: var(--tekst-2); }

/* Under 900 px: to spalter, hvor grafen får hele bredden under de to tal.
   Rangen og beløbet er de to, der skal kunne sammenlignes med et blik, så de
   bliver ved med at stå ved siden af hinanden længst muligt. */
@media (max-width: 900px) {
  .topgitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topgitter .tsp { padding: 0 0 0 var(--r4); }
  .topgitter .tsp:first-child { padding-left: 0; }
  .topgitter .tsp:last-child { padding-right: 0; }
  /* Grafen flyttes ned under de to tal og strækkes over begge spalter.
     Rækkefølgen sættes med `order` og ikke i markup: rangen og beløbet er de
     to, der skal kunne sammenlignes med ét blik, mens kilden skal blive ved med
     at møde en skærmlæser og et tastatur i læserækkefølgen placering →
     udvikling → beløb. */
  .topgitter .udvikling { grid-column: 1 / -1; order: 2; padding: 20px 0 0;
    border-left: 0; border-top: 1px solid var(--linje); margin-top: 20px; }
  .topgitter .maks { order: 1; }
  /* Ingen automatisk margen her: grafen står under sin egen overskrift i fuld
     bredde og skal flugte med den, ikke svæve midt i et bånd. */
  .topgitter .udvikling .forloebsgraf { margin: 0; }
}

/* 560 px: én spalte. **Grafen bliver — det var den, der faldt ud sidst.**
   Handoffets punkt 4: tre spalter skal stables, og grafen skal med. Den kan nu,
   fordi den har sin egen plads og sit eget lærred med fast forhold; den gamle
   baggrundsflade blev strakt til en boks tre gange så høj som bred og gjorde et
   enkelt trins udsving til et spring på en halv skærm. */
@media (max-width: 560px) {
  .topgitter { grid-template-columns: minmax(0, 1fr); }
  .topgitter .tsp { padding: 0; }
  .topgitter .tsp + .tsp { border-left: 0; border-top: 1px solid var(--linje);
    margin-top: 20px; padding-top: 20px; }
  .topgitter .udvikling { grid-column: auto; order: 0; margin-top: 20px; }
  .topgitter .maks { order: 0; }
  .traekgitter { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
/* Retlige forhold står i rødt, fordi de er det, der ændrer en beslutning. */
.designflade .kort.retlige { border-left-width: 8px; border-left-style: solid;
  border-left-color: var(--baand-1); padding: 26px; margin: 0 0 16px; }
.designflade .kort.retlige ul { list-style: none; margin: 0; padding: 0;
  font-size: 14px; }
.designflade .kort.retlige li { margin: 0; padding: 10px 0;
  border-top: 1px solid var(--linje); }

/* Det, der IKKE er der: en stiplet kant siger "her mangler noget med vilje". */
.designflade .kort.udeladt { border: 1px dashed var(--kortkant); background: #fff;
  border-radius: 8px; padding: 26px; margin: 0 0 16px; }
.designflade .kort.udeladt p { color: var(--tekst-2); font-size: 14px;
  line-height: 1.6; margin: 0 0 10px; }
.designflade .kort.udeladt p:last-child { margin-bottom: 0; }

/* Arbejdsstederne: sted, P-nummer og ansatte. P-nummeret står med
   `tabular-nums`, så ti cifre kan sammenlignes lodret. */
.enhedstabel { border-collapse: collapse; width: 100%; font-size: 13px; }
.enhedstabel th, .enhedstabel td { padding: 10px 12px 10px 0;
  border-top: 1px solid var(--linje); text-align: left; vertical-align: top; }
.enhedstabel thead th { border-top: 0; padding-top: 0; font-size: 11.5px;
  font-weight: 700; letter-spacing: .05em; color: var(--dus);
  text-transform: uppercase; }
.enhedstabel tbody th { font-weight: 600; color: var(--navy); }
.enhedstabel tbody th .hvor { font-weight: 400; }
/* Justeringen står på `.t`/`.v` ovenfor og ikke her — ellers kan overskriften
   ikke følge sin kolonne (T5). Her står kun det, der er cellernes eget. */
.enhedstabel td { font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--tekst-2); }
.enhedstabel td.pnr { color: var(--dus); }

.designflade .kort .punkter { list-style: none; margin: 0; padding: 0;
  font-size: 14px; line-height: 1.55; color: var(--tekst-2); }
.designflade .kort .punkter li { margin: 0; padding: 11px 0;
  border-top: 1px solid var(--linje); }
.designflade .kort .punkter li:first-child { border-top: 0; }
/* Rækkelisterne. **Ingen tyk streg over listen** (R3): den lå lige under
   sektionens overskrift og læste som en understregning, en dekoration
   referencen ikke bruger nogen steder. Kortets kant bærer nu afgrænsningen. */
.designflade .raekker { margin: 0; border-top: 0; }
.designflade .raekker li { border-bottom: 0; border-top: 1px solid var(--linje); }
.designflade .raekker li:first-child { border-top: 0; }
/* Rækkens handling står i sin egen kolonne. Som flex-boks med ombrydning
   sprang "Tilbagekald" fra højre til venstre alt efter hvor lang teksten var
   (H3); et gitter med to spor kan ikke det. */
/* **`min-height` er `--klik` og ikke 0.** Rækken er som regel et link, og med
   `min-height: 0` målte den 44 px på 1300 px — fire under DESIGNSPEC § 1's
   krav (målt 6/9). Tætheden må ikke æde klikfladen; det er to krav, og
   klikfladen vinder. Polstringen står stadig, så en række med to linjer vokser
   som før. */
.designflade .raekker .flade { display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px;
  min-height: var(--klik); padding: 11px 0; font-size: 14px; }
.designflade .raekker .flade > .vaerdi, .designflade .raekker .flade > button,
.designflade .raekker .flade > .tilstand { justify-self: end; text-align: right; }
.designflade .raekker .hvad { font-weight: 600; }
.designflade .raekker .hvor { color: var(--dus); font-size: 12px; font-weight: 400; }
.designflade .raekker .vaerdi, .designflade .raekker .ord { color: var(--tekst-2);
  font-size: 13px; }
.designflade .kort .hjaelp { font-size: 12px; color: var(--dus); margin: 12px 0 0;
  max-width: none; }
.designflade .kort .dato { color: var(--dus); margin-right: 8px; }

/* Sidespaltens handlingsliste: kilder og de veje videre, opslaget har.

   **Rækken er linket, ikke ordet.** Ankeret stod `display: inline` uden
   polstring og målte **15 px** i højden (målt 6/9) — en klikflade på en
   tredjedel af kravet, i det samme kort som stamoplysningerne. Nu fylder det
   hele rækken og måler `--klik`. Skillelinjerne bliver stående her, hvor de
   ikke gør det i `.stam` ovenfor: en liste, hvor hver række er en handling,
   skal vise hvor den ene handling slutter og den næste begynder. */
.designflade .stamkort .videre { list-style: none; margin: 0; padding: 0;
  font-size: 13px; line-height: 1.5; }
.designflade .stamkort .videre li { margin: 0; padding: 0;
  border-top: 1px solid var(--linje); }
.designflade .stamkort .videre a { display: flex; align-items: center;
  min-height: var(--klik); padding: 6px 0; }

/* Suspensionsnoten (DPIA 4.3) står, hvor den ikke kan overses.

   **Den vejede mindre end det, den advarer om** (målt 5/9): én tynd linje i
   almindelig vægt lige over bedømmelseskortets fede overskrift og farvede
   bånd. S3 siger det modsatte — visuel vægt følger alvor, og en åben
   bestridelse er én af de fire ting, der kræver handling. Nu med overlinje i
   kapitæler, hel kant og fed brødtekst, samme greb som mærket "KVOTEN ER
   BRUGT". Farven er stadig forstærkning; ordene bærer betydningen. */
.designflade .suspension { border: 1px solid var(--fare);
  border-left: 6px solid var(--fare); background: var(--fare-lys);
  border-radius: 4px; padding: 14px 18px; margin: var(--r4) 0 0; }
.designflade .suspension .overskrift { display: block; margin: 0 0 4px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fare); }
.designflade .suspension p { margin: 0; font-size: 14.5px; font-weight: 600;
  line-height: 1.5; color: var(--navy); }

/* --------------------------------------------------------------------------
   Portalens egne flader (5/9). Kortet, overlinjen og knaphierarkiet er
   fælles ovenfor; her står kun det, kun et værktøj har brug for.
   -------------------------------------------------------------------------- */
/* Fejlkortet: beskeden er det, kunden læser først, og vejen videre står under
   den i finskrift. Begge dele inde i kortet — se `visning.fejlside`. */
.designflade .kort > .besked { font-size: 15.5px; font-weight: 600;
  color: var(--navy); margin: 0; max-width: 60ch; }
.designflade .kort > .videre { margin: 16px 0 0; font-size: 14px; }
.designflade .kort > .fejl { margin: 0 0 4px; color: var(--fare); }
/* **Alarmkortet** (5/9). Kvotesiden var en hvid kortflade med en marineblå
   overskrift — den samme kendsgerning, der står som rød pille på forsiden og
   på forbrugssiden, vejede mindst dér, hvor kunden rammer den midt i sit
   arbejde. S3: visuel vægt følger alvor. Grebet er suspensionsnotens, ikke et
   nyt: hel kant, rød bjælke i venstre side, alarmfamiliens flade. To flader
   der siger det samme, skal se ens ud. */
.designflade .kort.alvor { border-color: var(--fare);
  border-left: 6px solid var(--fare); background: var(--fare-lys); }
.designflade .kort > .tilstand { margin: 0 0 10px; }
/* Vejen videre er brødtekst, ikke finskrift: den er dét, kunden skal bruge
   (Sp3), og mikrotypen er præcis det, D5 siger ryger først. */
.designflade .kort > .vej { margin: 12px 0 0; font-size: 14.5px;
  line-height: 1.6; color: var(--tekst-2); max-width: 62ch; }
.designflade .kort.alvor .knap.sekundaer { background: #fff; }

/* Opslagsfeltet er dét, kunden kom for (H4) — det står øverst, i sit eget
   kort, uden et sælgende anslag over sig. Portalen er ikke en salgsside. */
.designflade .kort.opslagskort { padding: 22px 26px; }
/* Feltet er det samme som på de offentlige sider — samme ramme om felt og
   knap, samme forslagsliste under. Det var en `form.hurtig` med feltet og
   knappen som to flex-elementer, og en forslagsliste kunne ikke ligge under
   dem uden at skubbe knappen ned på en linje for sig (phk 6/9). */
.designflade .kort.opslagskort .selskabssoeg { margin: 0; max-width: none; }
.designflade .kort.opslagskort label { font-size: 13px; font-weight: 700; }

/* Forbrugstallene. Når tælleren når loftet, skifter tallet farve og vægt, og
   rækken får et mærke: en opbrugt kvote skal kunne ses uden at læses (T4). */
.designflade .maalere { list-style: none; margin: 0; padding: 0; }
/* **Rækken er en blok, ikke et gitter.** Etiketten og tallet står nu i deres
   egen `.maalertop`, og bjælken er rækkens anden linje. Blev `li` ved med at
   være et to-kolonne-gitter, landede bjælken i den `auto`-brede anden kolonne
   og blev 3 px bred — målt på det rendrede kort 7/9. */
.designflade .maalere li { display: block; padding: 11px 0; margin: 0;
  border-top: 1px solid var(--linje); }
.designflade .maalere li:first-child { border-top: 0; }
.designflade .maalere .hvad { font-size: 14px; font-weight: 600; }
.designflade .hoejre { display: flex; align-items: center; gap: 10px;
  justify-content: flex-end; flex-wrap: wrap; }
.designflade .raekker .flade > .hoejre { justify-self: end; }
.designflade .maalere .vaerdi { font-size: 14px; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--tekst-2); }
.designflade .maalere li.opbrugt .vaerdi { color: var(--fare); font-weight: 800; }

/* En ændring, der kræver opmærksomhed, må ikke veje det samme som en, der
   ikke gør (S3/D3). Mærket er den røde kant og ordet — samme sprog som
   suspensionsnoten på opslagssiden, så det læses ét sted som det andet. */
.designflade .raekker li.opmaerksom { border-left: 3px solid var(--baand-2);
  margin-left: -14px; padding-left: 11px; }
.designflade .raekker li.opmaerksom .hvad { color: var(--fare); }

/* Sidevalget på lange lister. 500 overvågede selskaber i én bane er ikke en
   liste, det er en væg (D7). */
.designflade .sidevalg { display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px; margin: 16px 0 26px; font-size: 13px; color: var(--dus); }
.designflade .sidevalg a { display: inline-flex; align-items: center;
  min-height: var(--klik); padding: 0 14px; border: 1px solid var(--kortkant);
  border-radius: 4px; text-decoration: none; font-weight: 700; }
.designflade .sidevalg a:hover { border-color: var(--navy); }
.designflade .sidevalg .hvor { margin-left: auto; }

/* A3: varslet om, at tilladelsen ikke er endelig, hvor købet overvejes.
   Egen klasse og ikke `.finskrift`: finskriften er dæmpet mikrotekst, og
   det her er den ene sætning på prissiden, en køber SKAL læse. Størrelsen er
   brødtekstens, farven `--blaek-2` — læsbar, uden at tage anslaget. */
.tilladelsesnote { color: var(--blaek-2); max-width: var(--laes);
  margin: var(--r4) 0 0; }

/* Fokusmærket i husets palet. Grundstilarket sætter kobolt (`--spot`) på alle
   felter og alle `:focus-visible`, og kobolt findes ikke andre steder på
   designfladen — et fokuseret felt på /gate, /registreret eller i portalen
   lyste derfor i en farve, sitet ellers ikke bruger (D9/X1). */
.designflade :focus-visible { outline-color: var(--navy); }
.designflade input:focus-visible, .designflade textarea:focus-visible,
.designflade select:focus-visible {
  border-color: var(--navy); box-shadow: 0 0 0 3px var(--fremhaev); }
/* **Fejlmærket skal overleve fokus.** Reglen ovenfor står senere i arket end
   grundstilarkets `input[aria-invalid]` og har samme specificitet, så et
   fokuseret felt med fejl blev tegnet marineblåt — og feltet er netop
   fokuseret, når man lige har trykket Send (målt 5/9 på /registreret: kanten
   var rgb(28,33,80) og ikke den røde). Derfor står tilstanden her igen, efter. */
.designflade input[aria-invalid="true"], .designflade textarea[aria-invalid="true"],
.designflade input[aria-invalid="true"]:focus-visible,
.designflade textarea[aria-invalid="true"]:focus-visible {
  border-color: var(--fare); box-shadow: 0 0 0 3px var(--fare-lys); }

/* --- gaten: hegnet om dev (D-r3) ------------------------------------------
   Den siger ikke, hvad der ligger bagved. Men den er husets: samme palet,
   samme skrift, samme bomærke som alt inden for hegnet. */
.gateflade { max-width: 420px; margin: 0 auto; padding: var(--r7) var(--r4); }
.gateflade .maerke { margin: 0 0 var(--r5); color: var(--navy); }
.gateflade .maerke svg { color: var(--navy); }
.gateflade .fejl { margin-bottom: var(--r4); }
.gateflade .fod { margin-top: var(--r5); font-size: 13px; color: var(--dus); }

/* --- juridiske dokumenter (/vilkaar, /brugsvilkaar, /privatliv, /model) ----
   B1: over tre skærme kræver en genvej. B2: brødteksten holder sig under 75
   tegn pr. linje — `--laes` (62ch) målte 76 på privatlivspolitikken. */
.dokument .brod { max-width: 58ch; }
/* Forordet: hvilken udgave man læser, og hvad der endnu ikke er godkendt.
   Det er ikke aftaletekst, og det må ikke ligne aftaletekst — det stod som
   almindelige afsnit efter indholdsfortegnelsen. Nu øverst og indrammet. */
.dokumentnote { margin: 0 0 var(--r5); padding: 16px 20px; border-radius: 4px;
  border: 1px solid var(--kortkant); border-left: 4px solid var(--dus);
  background: var(--kort); color: var(--tekst-2); }
.dokumentnote > :first-child { margin-top: 0; }
.dokumentnote > :last-child { margin-bottom: 0; }
.dokumentnote p { font-size: var(--t0); line-height: 1.55; margin: 0 0 8px; }
.dokumentnote code { font-size: .95em; overflow-wrap: anywhere; }
.dokumentindhold { margin: 0 0 var(--r5); padding: 18px 22px;
  background: var(--kort); border: 1px solid var(--kortkant); border-radius: 4px; }
.dokumentindhold h2 { font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dus);
  margin: 0 0 10px; }
.dokumentindhold ol { margin: 0; padding: 0; list-style: none;
  counter-reset: afsnit; }
.dokumentindhold li { margin: 0; }
/* Hver række er en klikflade på mindst 44 px (DESIGNSPEC § 1) — de målte
   35 px 24/9. `flex` centrerer en overskrift på én linje i rækken, og en, der
   ombrydes, vokser bare. */
.dokumentindhold a { display: flex; align-items: center; min-height: var(--klik);
  padding: 7px 0; font-size: 14.5px; box-sizing: border-box;
  line-height: 1.4; text-decoration: none; border-top: 1px solid var(--linje); }
.dokumentindhold li:first-child a { border-top: 0; }
.dokumentindhold a:hover { text-decoration: underline; }
/* Overskrifterne i dokumentet skal kunne ses, når man springer til dem: uden
   afstand foroven lander de klistret op ad sidehovedet. */
.dokument .brod h3 { scroll-margin-top: 24px; }

/* --- driftsbilledet (/admin/drift) ----------------------------------------
   Var to `<pre>`-dumps. En [KRITISK] linje om en overskredet vilkår 8-frist
   blev klippet af midt i sætningen ved skærmkanten — på både 1300 og 390 px —
   og vejede typografisk det samme som et "[ok]". Visuel vægt skal følge
   alvor (D2/S3), så hver linje er nu sin egen række med et mærke i farve. */
.driftliste { list-style: none; margin: 0 0 var(--r4); padding: 0;
  border: 1px solid var(--kortkant); border-radius: 4px; background: var(--kort); }
.driftliste > li { display: grid; grid-template-columns: 104px minmax(0, 1fr);
  gap: 4px 14px; margin: 0; padding: 12px 16px; border-top: 1px solid var(--linje);
  align-items: baseline; }
.driftliste > li:first-child { border-top: 0; }
.driftliste .niveau { display: inline-flex; align-items: center;
  justify-content: center; padding: 3px 8px; border-radius: 3px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--fremhaev); color: var(--tekst-2); white-space: nowrap; }
.driftliste .hvad { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.driftliste .hvad b { font-weight: 700; }
.driftliste .hvor { display: block; font-size: 12.5px; color: var(--dus);
  margin-top: 2px; overflow-wrap: anywhere; }
.driftliste li.kritisk { background: var(--fare-lys); }
.driftliste li.kritisk .niveau { background: var(--fare); color: #fff; }
.driftliste li.kritisk .hvad { color: var(--fare); font-weight: 700; }
.driftliste li.advarsel .niveau { background: var(--varsel-lys); color: var(--varsel); }
.driftliste li.aaben .niveau { background: var(--fare-lys); color: var(--fare); }
.driftliste li.aaben .hvad b { color: var(--fare); }
.driftliste li.ok .niveau { background: var(--medgang-lys); color: var(--medgang); }
.driftsum { font-size: 14.5px; font-weight: 700; margin: 0 0 10px; }
.driftsum.alvor { color: var(--fare); }

@media (max-width: 560px) {
  /* Mærket over teksten frem for ved siden af: 104 px af 390 til en etiket
     ville presse sætningen ned i én-ords-linjer. */
  .driftliste > li { grid-template-columns: minmax(0, 1fr); }
  .driftliste .niveau { justify-self: start; }
}

/* --- tegningsreglen, personroller og koncernoverblikket (phk 6/9) ----------

   Tre flader, ét greb: rækken er klikfladen, ikke ordet, og alt måler mindst
   `--klik`. Ingen nye rå værdier — farver, kanter og mål er husets tokens
   (målestokkens D9). */

/* Tegningsreglen står ordret. Linjeafstanden ER `--klik`, så et rolleord kan
   være en fuld klikflade uden at sprænge sætningen: knappen fylder præcis den
   linje, den står på. Uden det ville en 48 px høj knap midt i en sætning enten
   skubbe linjerne fra hinanden i ryk eller lægge sig hen over naboen. */
.tegningskort .tegningsregel { margin: 0; font-size: 13.5px;
  line-height: var(--klik); color: var(--blaek); overflow-wrap: anywhere; }
.rolleord { position: relative; display: inline-block; }
/* **Selektoren bærer `.designflade`, og det er ikke pynt.** `.designflade
   button` (0,1,1) fylder enhver knap marineblå og giver den 12/22 px
   polstring; en regel på `.rolleknap` alene (0,1,0) taber den kamp, og
   rolleordene blev tegnet som store, fyldte knapper midt i sætningen — målt på
   dev 6/9. Samme fejlform som `.knap.sekundaer` 5/9: en CSS-regel kan se
   rigtig ud og alligevel tabe en specificitetskamp (tasks/lessons.md 3/9). */
.designflade .rolleknap, .rolleknap {
  display: inline-flex; align-items: center; min-height: var(--klik);
  padding: 0 2px; margin: 0; border: 0; border-radius: 3px; background: none;
  color: var(--navy); font: inherit; font-weight: 700; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 4px;
  text-decoration-thickness: 2px; }
.designflade .rolleknap:hover, .rolleknap:hover {
  background: var(--fremhaev); color: var(--navy-lys); }
/* Panelet med navnene. `display: none` og ikke `hidden`, fordi det skal kunne
   åbnes af CSS alene: hover for musen, `:focus-within` for tastaturet. Klik
   sætter `aria-expanded` (rolle.js) — det er den vej, en telefon har. */
.rollenavne { display: none; position: absolute; z-index: 5; left: 0; top: 100%;
  min-width: 200px; max-width: 300px; padding: 10px 12px; background: #fff;
  border: 1px solid var(--navy); border-radius: var(--runding);
  box-shadow: 0 6px 20px rgba(28, 33, 80, .18);
  font-size: 13px; line-height: 1.5; font-weight: 400; text-align: left; }
.rolleord:hover > .rollenavne,
.rolleord:focus-within > .rollenavne,
.rolleknap[aria-expanded="true"] + .rollenavne { display: block; }
.rollenavne .navn { display: block; font-weight: 600; color: var(--blaek); }
.rollenavne .navn + .navn { margin-top: 4px; }
.rollenavne .flere { display: block; margin-top: 6px; color: var(--blaek-2);
  font-size: 12px; }
/* I sidespalten hænger panelet i HØJRE kant. Spalten står yderst til højre i
   en 1240 px flade, og et panel forankret til venstre ville stikke ud over
   viewportens kant og give siden vandret rul (D8). */
.side .rollenavne { left: auto; right: 0; }
/* Mobil: panelet lægger sig i bunden af skærmen i stedet for ved ordet. Ved
   390 px kan et 300 px panel ved et ord i højre side ikke være der uden at
   skubbe siden ud til siden — og D8 tillader kun vandret rul inde i en tabels
   egen ramme, ikke på siden. */
@media (max-width: 560px) {
  /* `.notetekst.kortnote` står med to klasser og ville ellers vinde over den
     her regel med sin egen `left: 0` — panelet ville da hænge i venstre kant
     af sit kort i stedet for i bunden af skærmen (7/9). */
  .rollenavne, .notetekst, .notetekst.kortnote {
    position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px;
    width: auto; max-width: none;
    box-shadow: 0 -6px 24px rgba(28, 33, 80, .22); }
  .side .rollenavne { left: 12px; right: 12px; }
}

/* Personens roller og koncernkæden: hele rækken er linket (DESIGNSPEC § 1). */
.personrad, .koncernrad { display: block; min-height: var(--klik);
  padding: 10px 0; text-decoration: none; color: var(--blaek); }
.personrad:hover, .koncernrad:hover { color: var(--navy); }
.personrad .hvad, .koncernrad .hvad { display: block; font-weight: 600; }
.personrad .hvor, .koncernrad .hvor { display: block; margin-top: 2px;
  font-size: 12.5px; color: var(--blaek-2); }
.personrad .ophoert { font-weight: 400; color: var(--blaek-2); }

.koncerntrae { list-style: none; margin: 0; padding: 0; }
.koncerntrae .koncerntrae { margin-left: 14px; padding-left: 14px;
  border-left: 2px solid var(--linje); }
.koncerntrae > li { border-top: 1px solid var(--linje); }
.koncerntrae > li:first-child { border-top: 0; }
.koncernpersoner { list-style: none; margin: 0 0 8px; padding: 0 0 0 14px;
  border-left: 2px solid var(--linje); }
.koncernpersoner li { padding: 6px 0; font-size: 12.5px; }
.koncernpersoner .hvad { font-weight: 600; margin-right: 8px; }
.koncernpersoner .hvor { color: var(--blaek-2); }

/* --------------------------------------------------------------------------
   Koncernkortet (handoffet af 7/9).

   Pladsen regnes i `web/koncernkort.py` og står som `left`/`top` i markup —
   en koordinat er data og kan ikke stå i et stilark. Alt andet står her.

   **Kortenes højde er fast**, og navnet klippes efter to linjer. Handoffet
   advarer selv mod at antage en højde; vi har fjernet antagelsen i stedet for
   at måle os ud af den, så pilene rammer kanten på pixlen.
   -------------------------------------------------------------------------- */
.koncernside .portaltop { padding: var(--r5) 0 var(--r4); }
.koncernside .manchet { margin: 6px 0 0; font-size: 14px; color: var(--tekst-2); }
.laerred { position: relative; }
.laerred .kanter { position: absolute; inset: 0; }
/* Stregen er `--dus` og ikke handoffets #9aa0c4. Målt 7/9: #9aa0c4 giver
   **2,56:1** på hvidt, og en streg, der bærer selve forholdet mellem to
   selskaber, er ikke pynt — den skal kunne ses (3:1 for grafik, D1).
   `--dus` giver 4,89, og fremhævningen har stadig sit spring: marineblå i
   2,5 px mod 1,5. */
.laerred .kant { fill: none; stroke: var(--dus); stroke-width: 1.5;
  transition: stroke .15s ease, stroke-width .15s ease, opacity .15s ease; }
.laerred .spids { fill: var(--dus); stroke: none;
  transition: fill .15s ease, opacity .15s ease; }
/* Trinnets navn i venstrekanten. `--dus` og ikke handoffets #9a9eb8, som
   måler 2,64:1 — under kravet for tekst. */
.laerred .trinnavn { position: absolute; left: 0; transform: translateY(-50%);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dus); max-width: 118px; }

.laerred .knude { position: absolute; width: 230px; height: 96px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 10px 16px; border-radius: 8px; background: #fff;
  border: 1px solid var(--knudekant); text-decoration: none;
  box-shadow: 0 1px 3px rgba(28, 33, 80, .06);
  transition: box-shadow .15s ease, opacity .15s ease; }
.laerred .knude .art { font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dus); }
/* To linjer og ikke mere: højden er fast, og et tredje navneled ville skubbe
   metalinjen ud af kortet. Klippet er `line-clamp`, så der står "…" og ikke
   bare mindre. */
.laerred .knude .navn { font-size: 13.5px; font-weight: 800; line-height: 1.22;
  color: var(--navy); display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.laerred .knude .meta { font-size: 11.5px; color: var(--tekst-2);
  font-variant-numeric: tabular-nums; }
/* Personen er ikke et link — § 21, stk. 2 og DPIA'ens R3. Den stiplede kant
   siger det med form; ordet "Person" siger det med bogstaver, så formen
   aldrig bærer betydningen alene. */
.laerred .knude.person { border-style: dashed; border-color: var(--dus);
  cursor: default; }
.laerred .knude.opslaget { background: var(--navy); border-color: var(--navy); }
.laerred .knude.opslaget .navn { color: #fff; }
.laerred .knude.opslaget .art { color: var(--knudekant); }
.laerred .knude.opslaget .meta { color: var(--fremhaev); }
.laerred a.knude:hover { box-shadow: 0 6px 18px rgba(28, 33, 80, .18); }
.laerred a.knude:focus-visible { outline: 3px solid var(--spot);
  outline-offset: 3px; }

.laerred .andel { position: absolute; transform: translate(-50%, -50%);
  padding: 3px 9px; border-radius: 999px; background: #fff;
  border: 1px solid var(--knudekant); font-size: 11px; font-weight: 700;
  color: var(--tekst-2); white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease,
              opacity .15s ease; }

/* Fremhævningen. `koncern.js` sætter `data-fremhaev` på lærredet og `aktiv` på
   det, der hænger sammen med knuden — resten dæmpes. Uden JavaScript sker der
   ingenting, og tegningen står som den er: en fremhævning er en hjælp til at
   læse den, ikke en forudsætning for at kunne. */
.laerred[data-fremhaev] .knude:not(.aktiv) { opacity: .3; }
.laerred[data-fremhaev] .kant:not(.aktiv),
.laerred[data-fremhaev] .spids:not(.aktiv),
.laerred[data-fremhaev] .andel:not(.aktiv) { opacity: .25; }
.laerred .knude.aktiv { box-shadow: 0 6px 18px rgba(28, 33, 80, .18); }
.laerred .kant.aktiv { stroke: var(--navy); stroke-width: 2.5; }
.laerred .spids.aktiv { fill: var(--navy); }
.laerred .andel.aktiv { background: var(--navy); border-color: var(--navy);
  color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .laerred .kant, .laerred .spids, .laerred .knude, .laerred .andel {
    transition: none; }
}
/* Noten i sidespalten: tre afsnit, ikke en punktliste. */
.designflade .ejernote p { margin: 0 0 10px; font-size: 12.5px;
  line-height: 1.6; color: var(--tekst-2); }
.designflade .ejernote p:last-child { margin: 0; }

/* "Søg en anden virksomhed?" — udvejen fra ét opslag til det næste (phk 6/9).
   Den står over folden på begge flader og skal kunne SES uden at fylde: en
   hårlinje-ramme, ingen kortflade, ingen fyldt farve. Det er en udvej, ikke
   en handling, og må ikke tage opmærksomhed fra navnet og bedømmelsen. */
.soegvidere { margin: 0 0 var(--r4); }
.soegvidere > summary { display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--klik); padding: 0 2px; cursor: pointer; list-style: none;
  color: var(--navy); font-size: 13.5px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; }
.soegvidere > summary::-webkit-details-marker { display: none; }
.soegvidere > summary::marker { content: ""; }
.soegvidere > summary::after { content: ""; flex: none; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-top: -4px; }
.soegvidere[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.soegvidere > summary:hover { color: var(--navy-lys); }
.soegvidere > summary:focus-visible { outline: 3px solid var(--spot);
  outline-offset: 3px; border-radius: 3px; }
.soegvidere .selskabssoeg { margin: 8px 0 0; max-width: 520px; }
@media (prefers-reduced-motion: reduce) { .soegvidere > summary::after { transition: none; } }

@media print {
  body { background: none; }
  main { max-width: none; padding: 0; }
  .hoved, .sidefod, .ikkeprint, form { display: none !important; }
  a { text-decoration: none; color: inherit; }
  .faktura { page-break-inside: avoid; }
  /* Et sammenfoldet kort må ikke blive til en udskrift med skjulte tal.
     `content-visibility` åbner `<details>` på de motorer, der understøtter
     `::details-content`; `fold.js` åbner dem på `beforeprint` på resten.
     Pilen er en skærmting og udskrives ikke. */
  details.kort { content-visibility: visible; }
  details.kort > .kortkrop { display: block !important; }
  details.kort > summary { list-style: none; }
  details.kort > summary::after { display: none; }
  /* Tegningsreglen trykkes ordret. Påskrifternes paneler er en skærmting —
     står de med, brydes sætningen midt over af navne, og så HAR vi omskrevet
     reglen, netop det der ikke må ske. Rolleordet står tilbage som ord. */
  .rollenavne { display: none !important; }
  .rolleknap { text-decoration: none; color: inherit; font-weight: 400; }
  /* **På papir er der ingen at pege med.** Antagelsen står derfor som
     almindelig tekst efter mærket — en udskrift, hvor begrænsningen på beløbet
     er væk, er en udskrift, der lover mere end svaret gjorde. */
  .noteknap { text-decoration: none; color: inherit; font-weight: 400;
    min-height: 0; }
  .noteknap::after { content: ":"; }
  .notetekst { display: inline !important; position: static; border: 0;
    padding: 0 0 0 4px; box-shadow: none; max-width: none; font-size: inherit; }
  /* **Et "i" er ikke et navn på papir.** Ikonet er en cirkel med ét bogstav,
     der kun betyder noget, fordi man kan pege på den; på tryk skrives knappens
     eget `aria-label` i stedet — det er dét, en skærmlæser også får. */
  .ikonknap { width: auto; height: auto; }
  .ikonknap > span { display: none; }
  .ikonknap::before { content: attr(aria-label); }
  .notetekst.kortnote { display: block !important; position: static;
    width: auto; padding: 0; }
  .notetekst.kortnote p { margin: 0 0 2px; }
}

/* Smal skærm: rækkens højre side falder ned under teksten. Som to spor kunne
   et mærke, der ikke må brydes ("KVOTEN ER BRUGT"), presse teksten sammen til
   ét ord pr. linje og lægge sig hen over den (målt 5/9, 390 px). Alle rækker
   opfører sig ens, så knappen står stadig samme sted i hver række (H3). */
@media (max-width: 560px) {
  .designflade .raekker .flade, .designflade .maalere li {
    grid-template-columns: minmax(0, 1fr); }
  .designflade .raekker .flade > .vaerdi,
  .designflade .raekker .flade > .tilstand,
  .designflade .raekker .flade > .hoejre,
  .designflade .raekker .flade > button { justify-self: start; text-align: left; }
  .designflade .maalere .hoejre, .designflade .hoejre { justify-content: flex-start; }
  .designflade .raekker .flade > button { margin-top: 4px; }
}

/* ==========================================================================
   portal og admin — rettelser 24/9
   Gennemgangen af portalen og admin 24/9. Alt her hører til portalen eller
   admin, undtagen tabelreglen, som retter en specificitetsfejl, der ramte
   begge flader. Står samlet her, så den offentlige side kan rettes andre
   steder i filen uden at de to rettelser støder sammen.
   ========================================================================== */

/* **Tekst- og talkolonner, der peger hver sin vej.** `table td.v` (0,1,2)
   skulle vinde over `table.noegletal td` (0,1,2), men de har samme vægt, og
   den sidste vinder: tekstcellerne stod højrestillet under venstrestillede
   overskrifter i screeningslisten, og fakturaens overskrifter stod forskudt af
   tallene. To klasser mere, så klassen på cellen afgør det. */
table.noegletal th.t, table.noegletal td.t,
table.enhedstabel th.t, table.enhedstabel td.t { text-align: right; }
table.noegletal th.v, table.noegletal td.v,
table.enhedstabel th.v, table.enhedstabel td.v { text-align: left; }
.designflade table.skaermtabel th, .designflade table.skaermtabel td {
  padding-inline: 0 14px; white-space: nowrap; }
.designflade table.skaermtabel td.t { font-variant-numeric: tabular-nums; }
.designflade table.skaermtabel th:last-child,
.designflade table.skaermtabel td:last-child { padding-right: 0; }
.designflade .kort .forbehold { margin: 14px 0 0; font-size: 12px; }
.designflade .binder a { display: inline-block; padding: 6px 0;
  min-height: var(--klik); line-height: 1.5; }

/* Fakturaen: ydelsen fylder, tallene står stramt til højre, summerne under en
   streg. `.enhed` er "ekskl. moms" i overskriften. */
.designflade .faktura table.linjer th.v:first-child { width: 50%; }
.designflade .faktura table.linjer .enhed { font-size: 11px; color: var(--dus);
  font-weight: 400; }
.designflade .faktura table.linjer tbody.summer tr:first-child > * {
  border-top: 1px solid var(--tekst-2); }

/* Hilsenen over forsidens spørgsmål. Almindelige bogstaver: versal-overlinjen
   er et af § 12's forbudte mønstre. */
.designflade .portaltop .hilsen { margin: 0 0 6px; font-size: 15px;
  color: var(--tekst-2); }

/* **Måleren er et `<progress>`.** Bredden stod som inline `style="width:6%"`,
   den eneste inline style i portalen (DESIGNSPEC § 7). Samme spor og samme
   fyld som før: `--kortkant` og marineblå, rød når loftet er nået. */
.maalere progress.bjaelke { display: block; width: 100%; margin-top: 8px;
  height: 5px; border: 0; border-radius: 3px; overflow: hidden;
  -webkit-appearance: none; appearance: none; background: var(--kortkant);
  color: var(--navy); }
.maalere progress.bjaelke::-webkit-progress-bar { background: var(--kortkant);
  border-radius: 3px; }
.maalere progress.bjaelke::-webkit-progress-value { background: var(--navy);
  border-radius: 3px; }
.maalere progress.bjaelke::-moz-progress-bar { background: var(--navy);
  border-radius: 3px; }
.maalere .opbrugt progress.bjaelke { color: var(--fare); }
.maalere .opbrugt progress.bjaelke::-webkit-progress-value { background: var(--fare); }
.maalere .opbrugt progress.bjaelke::-moz-progress-bar { background: var(--fare); }

/* **Kortets i står uden for `<summary>`** (`visning.foldbart`). En knap inde i
   en knap er ugyldig markup (axe: nested-interactive). Rammen `.notefold`
   bærer ikonet i en usynlig kopi af overskriften, lagt oven på kortets
   overskriftslinje, så ikonet lander efter overskriftens sidste ord — som før.
   Kopien tager ingen klik; kun knappen gør. */
.notefold { position: relative; }
.notefold > .noteplads { position: absolute; z-index: 2;
  top: calc(var(--kortluft) - 13px + 1px); left: calc(var(--kortluft) + 1px);
  right: calc(var(--kortluft) + 32px); min-height: var(--klik);
  display: flex; align-items: center; pointer-events: none; }
.notefold:has(> .kort.topboks) > .noteplads { left: calc(var(--kortluft) + 6px); }
.notefold > .noteplads > .skygge { visibility: hidden; font-size: 15px;
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  line-height: normal; }
.notefold > .noteplads > .skygge .enhed { font-weight: 600;
  text-transform: none; letter-spacing: 0; }
.notefold > .noteplads > .ikonnote { pointer-events: auto; margin: 0 0 0 8px;
  flex: none; }
/* Er kortet foldet sammen, er overskriftslinjen lavere (`padding-block`). */
.notefold:has(> details.kort:not([open])) > .noteplads { top: 1px; }

/* **Hele rækken er linket** (DESIGNSPEC § 1). Personlinks i ledelsen og
   selskaberne i overvågningen var klikflader på 15 px højde. Linkets `::after`
   dækker rækken; knappen i rækken ("Fjern") ligger ovenpå og tager sit eget
   klik. */
.designflade .raekker li.helrad { position: relative; }
.designflade .raekker li.helrad a.hel::after { content: ""; position: absolute;
  inset: 0; }
.designflade .raekker li.helrad button { position: relative; z-index: 1; }
.designflade .raekker li.helrad:hover a.hel { color: var(--navy-lys); }

/* Koncernkortets ejer uden dansk CVR, som ikke er et menneske. Ikke stiplet —
   den stiplede kant betyder "person" — og ikke et link: der er intet opslag. */
.laerred .knude.anden { cursor: default; }
/* **Kortene holder deres højde på en telefon.** Mærkerne og kortene er
   absolut placeret efter `koncernkort.py`s mål; en arvet `max-height` eller
   flex-krympning må aldrig gøre et kort lavere end det, pilene regner med. */
.laerred .knude { min-height: 96px; flex-shrink: 0; box-sizing: border-box; }

/* Kodeordsfeltet: vis/skjul-knappen ved siden af feltet, kravet som en
   tjekliste, der krydses af, mens der skrives (DESIGNSPEC § 2). */
.designflade .kodefelt { display: flex; gap: 8px; align-items: stretch;
  margin: 0 0 var(--r4); }
.designflade .kodefelt > input { flex: 1; min-width: 0; margin: 0; }
.designflade .kodefelt > .visknap { flex: none; min-height: var(--klik);
  margin: 0; }
.designflade .kodekrav { list-style: none; margin: 4px 0 8px; padding: 0;
  font-size: 13px; color: var(--tekst-2); }
.designflade .kodekrav li::before { content: "○"; display: inline-block;
  width: 1.4em; color: var(--dus); }
.designflade .kodekrav li.opfyldt { color: var(--blaek); }
.designflade .kodekrav li.opfyldt::before { content: "✓"; color: var(--baand-4);
  font-weight: 700; }

/* **Tegningsreglen læses som almindelig tekst igen.** Linjehøjden var
   `--klik` (48 px), så hvert rolleord kunne være en fuld klikflade — og hele
   afsnittet fik 48 px linjeafstand. Klikfladen er nu et usynligt lag om ordet
   (`::before`), der rækker lige så højt som før, mens linjen er normal. */
.designflade .tegningskort .tegningsregel { line-height: 1.6; }
.designflade .tegningskort .rolleknap { min-height: 0; position: relative;
  display: inline; padding: 0 1px; }
.designflade .tegningskort .rolleknap::before { content: ""; position: absolute;
  left: -4px; right: -4px; top: 50%; height: var(--klik);
  transform: translateY(-50%); }

/* Samme greb ved kreditmaksimums antagelse: brød mærket over to linjer, stod
   der 48 px mellem dem. Klikfladen bliver, linjen bliver normal. */
.designflade .topgitter .maksnote { line-height: 1.5; margin-top: 12px; }
.designflade .topgitter .maksnote .noteknap { min-height: 0; display: inline;
  position: relative; padding: 0 1px; }
.designflade .topgitter .maksnote .noteknap::before { content: "";
  position: absolute; left: -4px; right: -4px; top: 50%;
  height: var(--klik); transform: translateY(-50%); }

/* **Femårsgrafens tekst skal kunne læses i en smal spalte.** Tegningen
   skaleres med spalten; ved 1000 px er spalten 195 px, og 9,5 enheders
   årstal blev til 7 px bogstaver. Jo smallere spalten er, jo flere enheder
   får teksten, så den står i mindst 9,5 px (målt: ved 1000 px er tegningen
   142 px bred, skala 0,55, og 18 enheder giver 9,8 px). */
.topgitter .udvikling { container-type: inline-size; }
@container (max-width: 250px) {
  .forloebsgraf .aar, .forloebsgraf .endeetiket,
  .forloebsgraf .endeetiket.nu { font-size: 13px; }
  .forloebsgraf .middelord { font-size: 12px; }
}
@container (max-width: 200px) {
  .forloebsgraf .aar, .forloebsgraf .endeetiket,
  .forloebsgraf .endeetiket.nu { font-size: 16px; }
  .forloebsgraf .middelord { font-size: 13px; }
}
@container (max-width: 170px) {
  .forloebsgraf .aar, .forloebsgraf .endeetiket,
  .forloebsgraf .endeetiket.nu { font-size: 18px; }
  .forloebsgraf .middelord { font-size: 14px; }
}

/* Sagslisten: fristens tilstand står også med ord, over datoen. */
.designflade .raekker.sager .vaerdi .tilstand { display: block; margin: 0 0 4px;
  justify-self: end; }

@media print {
  /* Kortets i skrives under kortet og ikke i overskriftslinjen: lagt dér
     skubbede noten "KREDITBEDØMMELSE" ned midt i kortet. */
  .notefold { display: flex; flex-direction: column-reverse; }
  .notefold > .noteplads { position: static; display: block; min-height: 0;
    margin: 4px 0 12px; }
  .notefold > .noteplads > .skygge { display: none; }
  .notefold > .noteplads > .ikonnote { margin: 0; }
  /* "Om beregningen :" — knappen var en flex-boks, og mellemrummet stod
     mellem dens to pseudo-elementer. Som almindelig tekst står kolonet lige
     efter ordet. */
  .designflade .noteknap, .designflade .ikonknap.noteknap { display: inline;
    padding: 0; text-decoration: none; color: inherit; }
  .topgitter .maksnote { line-height: 1.5; }
  .notefold > .noteplads { font-size: 12.5px; }
  .maalere progress.bjaelke { display: none; }
}

/* **Portalens menu på én linje ved 390 px** (DESIGNSPEC § 11). Fire ord og
   20 px polstring pr. link var 374 px — "Konto" røg ned på en linje for sig.
   Klikfladen er stadig `--klik` høj; kun luften mellem ordene er mindre.
   Gælder kun sidehoveder med en log ud-knap, altså portal og admin. */
@media (max-width: 420px) {
  .hoved:has(.logud) nav a { padding: 0 7px; }
  .hoved:has(.logud) nav { margin-left: -7px; flex-wrap: nowrap; }
}

/* --- Rettelser 24/9, anden omgang (efterprøvningen med Playwright) --- */

/* **Koncernkortets trinnavne klæber til rammens venstre kant.** Rammen åbner
   rullet ind til selskabet (`koncern.js`), og navnene stod på lærredet i
   venstre kant: ved 1440 px stod der "ERE" og "TTE SELSKAB", ved 390 px stod
   de 472 px uden for skærmen. `.trinspalte` er lærredets første barn og i
   normalt flow, så `sticky` virker mod `.tabelrul`; den er nul bred, og
   navnene hænger ud af den. Den hvide bund dækker det, der ruller ind under
   navnet, så det kan læses på et kort eller en streg. */
.laerred .trinspalte { position: sticky; left: 0; z-index: 3; width: 0;
  height: 100%; }
.laerred .trinspalte .trinnavn { background: rgba(255, 255, 255, .94);
  padding: 3px 8px 3px 0; border-radius: 0 4px 4px 0; white-space: nowrap;
  max-width: none; }
/* Smal skærm: navnet står over rækken, i luften mellem to trin, og ikke midt
   på rækken, hvor det ville dække venstre kort. `top` er rækkens midte; et
   halvt kort (48 px) og navnets egen højde op. Den øverste række har 24 px
   luft over sig (`koncernkort.RAMME`), og navnet er 20 px højt. */
@media (max-width: 720px) {
  .laerred .trinspalte .trinnavn { transform: translateY(calc(-48px - 100% - 2px));
    padding: 3px 8px 3px 2px; }
}
/* Vinket over kortet står til venstre og ikke til højre som over tabellerne:
   det er ikke en kolonne, der er klippet, men hele tegningen, der fortsætter. */
.designflade .koncernramme[data-rul] > .rulvink { text-align: left;
  font-size: 11px; font-weight: 700; margin: 0 0 8px; }

/* **Screeningens fejl ved feltet** (DESIGNSPEC § 2). Listen øverst peger ned
   til felterne; hvert punkt er et link til feltet, det handler om. */
.designflade .feltfejlliste p { margin: 0 0 4px; }
.designflade .feltfejlliste ul { margin: 0; padding-left: 1.2em; }
.designflade .feltfejlliste a { color: inherit; display: inline-block;
  min-height: var(--klik); line-height: var(--klik); }
.designflade .skyder > .feltfejl, .designflade fieldset > .feltfejl {
  margin: 6px 0 0; }

/* **Fakturaen ved 390 px:** beløbene brød til "499,00 / kr." og nummeret til
   "2026- / 0001". Et beløb og et fakturanummer er ét ord hver. */
.designflade .faktura table.linjer td.t,
.designflade .faktura table.linjer th.t { white-space: nowrap; }
.designflade .faktura .fakturanr { white-space: nowrap; }
/* Med beløbene hele stødte kolonnerne sammen ved 390 px ("499,00 kr.499,00
   kr."). Luft foran hver talkolonne, og på en smal skærm står "ekskl. moms"
   under "Stykpris" i stedet for at gøre kolonnen bred. */
.designflade .faktura table.linjer td.t,
.designflade .faktura table.linjer th.t { padding-left: 12px; }
@media (max-width: 480px) {
  .designflade .faktura table.linjer th.v:first-child { width: auto; }
  .designflade .faktura table.linjer th .enhed { display: block; }
}
/* **Den rullende ramme er de skjulte teksters holder.** Periodeteksten til
   skærmlæsere i årstabellernes overskrifter (`aarhoved`, `.visuelt-skjult`) er
   absolut placeret, og uden en placeret forfader lå den uden for rammen, så
   den skubbede siden ud: 600 px bred ved 390 px på CVR 36490411 (målt 24/9). */
.tabelrul { position: relative; }