/* ==========================================================================
   grundlag.css — fladernes fælles grundlag
   Nulstilling · variabler · typografi · formularer · tabeller · knapper

   Håndskrevet. Intet byggetrin, ingen preprocessor, ingen eksterne ressourcer.
   Filen leveres, som den står. Ændres kun ét sted for begge flader.

   Rækkefølge i <head>:
     grundlag.css → komponenter.css → kundeadmin.css | tenantadmin.css
     print.css (media="print")

   Farve er aldrig eneste betydningsbærer. Hvert statusudtryk bærer
   samtidig et ikon, en kantform og en tekst. Se komponenter.css K-2.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · NULSTILLING
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul, fieldset, legend {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg, video { max-width: 100%; }
img, video { height: auto; }
svg { display: inline-block; vertical-align: middle; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: none; }

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset { border: none; min-width: 0; }

hr {
  border: none;
  border-top: 1px solid var(--kant-fin);
  margin: var(--rum-5) 0;
}

/* --------------------------------------------------------------------------
   2 · VARIABLER
   Hele paletten ligger her. Komponenter refererer kun til var(--...),
   aldrig til en hex-værdi. En tenant kan derfor få egne farver ved at
   overskrive tokens i et <style>-element efter dette ark — uden at nogen
   rører komponenterne.

   MÅ overskrives pr. tenant:  --signatur, --primaer*, --radius*, --maerkat-*
   MÅ IKKE overskrives:        --tone-*, --tekst-*, --fokus-*
                               Kontrastforholdene i briefen er regnet på dem.
   -------------------------------------------------------------------------- */

:root {
  /* --- Skrift: systemskrifter, ingen webfont ---------------------------- */
  --skrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;
  --skrift-tal: ui-monospace, "SFMono-Regular", "Cascadia Mono",
            "Segoe UI Mono", Consolas, "DejaVu Sans Mono",
            "Liberation Mono", monospace;

  /* --- Typografisk skala (rod = 16 px) ---------------------------------- */
  --tekst-mikro:   0.6875rem;  /* 11 px — versaletiketter, zonenavne        */
  --tekst-lille:   0.75rem;    /* 12 px — hjælpetekst, mærkater, sidefod    */
  --tekst-tabel:   0.8125rem;  /* 13 px — tabelceller                       */
  --tekst-brod:    0.9375rem;  /* 15 px — brødtekst, etiketter, knapper     */
  --tekst-mellem:  1.0625rem;  /* 17 px — kortoverskrift, dialogbrødtekst   */
  --tekst-h3:      1.125rem;   /* 18 px                                     */
  --tekst-h2:      1.375rem;   /* 22 px                                     */
  --tekst-h1:      1.75rem;    /* 28 px                                     */
  --tekst-maalertal: 2.25rem;  /* 36 px — K-3's tal                         */

  --linje-taet:    1.25;
  --linje-tabel:   1.35;
  --linje-brod:    1.5;

  --vaegt-normal:  400;
  --vaegt-halvfed: 600;
  --vaegt-fed:     700;

  /* --- Spacing-skala: 4 px-grid ---------------------------------------- */
  --rum-1:  4px;
  --rum-2:  8px;
  --rum-3: 12px;
  --rum-4: 16px;
  --rum-5: 24px;
  --rum-6: 32px;
  --rum-7: 48px;
  --rum-8: 64px;

  /* --- Neutraler -------------------------------------------------------- */
  --hvid:       #ffffff;
  --graa-50:    #f5f7f9;
  --graa-75:    #eef1f5;
  --graa-100:   #eceff2;
  --graa-200:   #dde2e7;
  --graa-300:   #c3ccd4;
  --graa-400:   #a7b1bb;
  --graa-500:   #6f7b87;
  --graa-600:   #5a656f;
  --graa-700:   #4f5a64;
  --graa-800:   #1f2a33;
  --graa-900:   #12171c;

  /* --- Flader ----------------------------------------------------------- */
  --sideflade:  var(--graa-50);   /* sidens bund — overskrives pr. flade     */
  --kortflade:  var(--hvid);      /* kort, tabeller, paneler                 */
  --zebra:      #f7f9fa;          /* hver anden tabelrække                   */
  --fyld-svag:  var(--graa-100);  /* tabelhoved, deaktiveret bund            */

  /* --- Kanter ----------------------------------------------------------- */
  --kant-fin:   #d7dde3;  /* rækkelinjer — dekorative, ikke betydningsbærende */
  --kant-kort:  var(--graa-300);  /* kort- og panelgrænse                    */
  --kant-felt:  var(--graa-500);  /* formularfelter, mærkekanter — 3:1 krav  */

  /* --- Tekst ------------------------------------------------------------ */
  --tekst-overskrift: var(--graa-900);
  --tekst-krop:       var(--graa-800);
  --tekst-daempet:    var(--graa-700);
  --tekst-paa-moerk:  #eef2f5;
  --tekst-deaktiv:    var(--graa-600);

  /* --- Primærhandling og links ------------------------------------------
     Ens i begge flader. Fladerne adskilles på chrome, ikke på semantik. */
  --primaer:        #0d5296;
  --primaer-moerk:  #0a4078;   /* hover / active                            */
  --primaer-tint:   #e4eefa;   /* valgt række, aktivt filter                */
  --link:           var(--primaer);
  --link-besogt:    #5a3a86;

  /* --- De fire toner (K-2) ---------------------------------------------
     Hver tone har: staerk (tekst + kant + ikon) og tint (bund).           */
  --tone-neutral:        var(--graa-800);
  --tone-neutral-tint:   #e6eaee;
  --tone-ok:             #0f6234;
  --tone-ok-tint:        #e2f2e8;
  --tone-opmaerksom:     #6f4700;
  --tone-opmaerksom-tint:#fbeecd;
  /* Tørkørslens skråstriber. 3,41:1 mod --tone-opmaerksom-tint; var 1,17:1,
     og ved det forhold var striberne usynlige — også i gråtoner og på et
     sort/hvidt print, hvor de er hele beviset for, at arket ikke
     dokumenterer en rigtig kørsel. Se .baand--toerkoersel i komponenter.css
     for, hvorfor båndets tekst nu står på en solid plade. */
  --tone-opmaerksom-stribe: #9c7c33;
  --tone-alvorlig:       #9e1c24;
  --tone-alvorlig-tint:  #fbe7e7;

  /* --- Bånd med egen bund (ikke tints) ---------------------------------- */
  --baand-kritisk:       #8c151d;   /* nødstop, dødmandsknap               */
  --baand-impersonering: #8a4b00;   /* K-14                                */

  /* --- Fokus ------------------------------------------------------------
     2 px ring, 2 px afstand. Ringen ligger på sidens bund, ikke på
     elementet, og er derfor synlig oven på knapper og statusmærker.       */
  --fokus-ring:    var(--graa-900);
  --fokus-bredde:  2px;
  --fokus-afstand: 2px;

  /* --- Form ------------------------------------------------------------- */
  --radius-lille: 3px;   /* mærker, chips, inputfelter                      */
  --radius:       6px;   /* kort, paneler, knapper                          */
  --radius-stor:  8px;   /* dialoger                                        */

  --skygge-kort:   0 1px 2px rgba(18, 23, 28, 0.06);
  --skygge-hviler: 0 2px 6px rgba(18, 23, 28, 0.10);
  --skygge-skuffe: -4px 0 20px rgba(18, 23, 28, 0.18);
  --skygge-dialog: 0 10px 36px rgba(18, 23, 28, 0.26);

  /* --- Chrome (topbånd + venstremenu) ----------------------------------
     Standard = kundeadmin. tenantadmin.css overskriver disse ni tokens.
     Det er hele forskellen mellem de to flader.                           */
  --signatur:        var(--primaer);
  --chrome-bund:     var(--hvid);
  --chrome-tekst:    var(--tekst-krop);
  --chrome-daempet:  var(--tekst-daempet);
  --chrome-kant:     var(--kant-kort);
  --rail-bund:       var(--graa-75);
  --rail-tekst:      var(--tekst-krop);
  --rail-daempet:    var(--tekst-daempet);
  --rail-aktiv-bund: var(--hvid);
  --rail-aktiv-tekst:var(--tekst-overskrift);
  --chrome-fokus:    var(--graa-900);

  /* --- Mål -------------------------------------------------------------- */
  --raekkehojde:  40px;   /* K-1's rækkehøjde                               */
  --klikmaal:     40px;   /* mindste klikmål                                */
  --felt-bredde-tal: 8ch; /* antalsfelter — to cifre skal ikke have 140 px  */
  --rail-bredde:  216px;
  --skuffe-bredde:480px;  /* K-6                                            */
  --indhold-maks: 1440px;

  /* --- Bevægelse — sparsomt brugt --------------------------------------- */
  --overgang: 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :root { --overgang: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3 · DOKUMENT OG TYPOGRAFI
   -------------------------------------------------------------------------- */

body {
  font-family: var(--skrift);
  font-size: var(--tekst-brod);
  line-height: var(--linje-brod);
  color: var(--tekst-krop);
  background: var(--sideflade);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--tekst-overskrift);
  line-height: var(--linje-taet);
  font-weight: var(--vaegt-halvfed);
  text-wrap: balance;
}

h1 { font-size: var(--tekst-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--tekst-h2); }
h3 { font-size: var(--tekst-h3); }

/* ÉT TRIN, ÉN ROLLE.
   ------------------------------------------------------------------------
   Skalaen har fem trin mellem brødtekst og h1, men i praksis fandtes der
   intet niveau imellem: alt, der ikke var h1, blev 22 px. På aftalekortet
   stod fem ligeværdige råb, hvoraf to dækkede én sætning hver — og på
   platformsfladen bar 11 px versaler den samme opgave. Faktor to på det
   samme niveau.

   En sektion inde på en side er 18 px. `--tekst-h2` (22 px) er derefter
   reserveret til dét, der DELER siden i to — formulartrinnet (`.trin`) —
   og er ikke længere en «lidt vigtigere kortoverskrift». */
.indhold h2 { font-size: var(--tekst-h3); }
h4 { font-size: var(--tekst-brod); font-weight: var(--vaegt-fed); }

p { max-width: 72ch; }
p + p { margin-top: var(--rum-3); }

strong, b { font-weight: var(--vaegt-halvfed); }

small, .lille { font-size: var(--tekst-lille); }

.daempet { color: var(--tekst-daempet); }

.etikette {
  font-size: var(--tekst-mikro);
  font-weight: var(--vaegt-halvfed);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst-daempet);
}

code, kbd, samp, .sti {
  font-family: var(--skrift-tal);
  font-size: 0.9em;
  background: var(--fyld-svag);
  border: 1px solid var(--kant-fin);
  border-radius: var(--radius-lille);
  padding: 1px 5px;
}

/* --------------------------------------------------------------------------
   4 · LINKS
   -------------------------------------------------------------------------- */

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }
a:visited { color: var(--link-besogt); }

/* Links inde i tabeller ER UNDERSTREGET.

   Reglen fjernede før understregningen, indtil hover eller fokus, med den
   begrundelse at «farven bærer dem ikke alene: de står i deres egen kolonne».
   Placering er ikke en visuel forskel på et link og et ikke-link, og den
   holder ikke, når linket står i samme celle som almindelig tekst.

   Målt er farven det eneste, der er tilbage: --primaer (#0d5296) mod
   --tekst-krop (#1f2a33) er 1,85:1. WCAG 1.4.1 kræver mindst 3:1 mellem et
   link og teksten omkring det, når linket ikke har et andet kendetegn. De to
   kan ikke løftes til 3:1 og samtidig begge holde 4,5:1 mod den hvide bund —
   en lysere blå ville tabe det ene for at vinde det andet. Derfor er
   understregningen tilbage.

   På kørselslisten er kørslens navn den eneste indgang til detaljen; et link,
   der først viser sig ved hover, findes ikke på en telefon. */
.tabel a { font-weight: var(--vaegt-halvfed); }

/* --------------------------------------------------------------------------
   5 · FOKUS — aldrig outline: none
   -------------------------------------------------------------------------- */

:focus {
  outline: var(--fokus-bredde) solid var(--fokus-ring);
  outline-offset: var(--fokus-afstand);
}
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: var(--fokus-bredde) solid var(--fokus-ring);
  outline-offset: var(--fokus-afstand);
  border-radius: var(--radius-lille);
}

/* På mørk chrome skifter ringen til hvid — samme bredde, samme afstand. */
.topbaand :focus-visible,
.rail :focus-visible,
.baand--kritisk :focus-visible,
.baand--impersonering :focus-visible {
  outline-color: var(--chrome-fokus);
}

.spring-til-indhold {
  position: absolute;
  left: var(--rum-2);
  top: -100px;
  z-index: 200;
  background: var(--kortflade);
  color: var(--tekst-overskrift);
  border: 1px solid var(--kant-felt);
  border-radius: var(--radius);
  padding: var(--rum-2) var(--rum-4);
  font-weight: var(--vaegt-halvfed);
  text-decoration: none;
}
.spring-til-indhold:focus { top: var(--rum-2); }

/* --------------------------------------------------------------------------
   6 · LAYOUTSKELET — fælles for begge flader
   -------------------------------------------------------------------------- */

.side {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--rail-bredde) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "topbaand topbaand"
    "rail     indhold";
}

.topbaand {
  grid-area: topbaand;
  display: flex;
  align-items: center;
  gap: var(--rum-4);
  min-height: 56px;
  padding: 0 var(--rum-5);
  background: var(--chrome-bund);
  color: var(--chrome-tekst);
  border-bottom: 1px solid var(--chrome-kant);
  /* Signaturstriben er fladens kraftigste kendetegn ved siden af
     chrome-bunden. Den står altid øverst, i fuld bredde, 4 px. */
  box-shadow: inset 0 4px 0 0 var(--signatur);
  padding-top: 4px;
}

.topbaand__navn {
  font-weight: var(--vaegt-halvfed);
  font-size: var(--tekst-mellem);
  color: var(--chrome-tekst);
}
.topbaand__sekundaer { font-size: var(--tekst-lille); color: var(--chrome-daempet); }
.topbaand__hoejre { margin-left: auto; display: flex; align-items: center; gap: var(--rum-3); }
.topbaand a { color: var(--chrome-tekst); }

.rail {
  grid-area: rail;
  background: var(--rail-bund);
  color: var(--rail-tekst);
  border-right: 1px solid var(--chrome-kant);
  padding: var(--rum-2) 0 var(--rum-4);
}

/* Railen er grupperet, ikke flad.
   ------------------------------------------------------------------------
   Tolv punkter uden inddeling er tolv punkter, man læser forfra hver gang.
   Gruppen er et <li> med en etiket og sin egen <ul>, så en skærmlæser hører
   «Arbejde, liste med 5 elementer» — grupperingen er struktur og ikke kun
   en vandret streg. En gruppe, hvis punkter alle er skjult, fordi rollen
   ikke må se dem, tegnes slet ikke: en etiket over nul punkter ville røbe
   præcis det, skjulningen findes for. */
.rail__gruppe { display: flex; flex-direction: column; }
.rail__gruppe > .etikette { display: block; padding: var(--rum-3) var(--rum-4) var(--rum-1); }

.rail__punkt > a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--klikmaal);
  padding: 0 var(--rum-4) 0 13px;   /* 13 + 3 px kant = samme tekststart aktiv/inaktiv */
  color: var(--rail-tekst);
  text-decoration: none;
  border-left: 3px solid transparent;
  font-size: var(--tekst-brod);
}
.rail__punkt > a:hover { text-decoration: underline; }
.rail__punkt > a[aria-current="page"] {
  background: var(--rail-aktiv-bund);
  color: var(--rail-aktiv-tekst);
  font-weight: var(--vaegt-halvfed);
  border-left-color: var(--signatur);
}
/* Glyffen står ALTID ved siden af teksten, aldrig i stedet for den: farve og
   form er redundans, ordet er bæreren. Glyffen arver punktets farve — der er
   ingen ikonpalet at vedligeholde. */
.rail__punkt > a > .ikon { width: 18px; height: 18px; flex: 0 0 auto; }
.rail__sekundaer {
  display: block;
  padding: var(--rum-2) var(--rum-4);
  font-size: var(--tekst-lille);
  color: var(--rail-daempet);
}
.rail__skille {
  height: 1px;
  background: var(--chrome-kant);
  margin: var(--rum-3) var(--rum-4);
}

.indhold {
  grid-area: indhold;
  padding: var(--rum-5) var(--rum-6) var(--rum-8);
  max-width: var(--indhold-maks);
  width: 100%;
}

.stak      > * + * { margin-top: var(--rum-4); }
.stak-stor > * + * { margin-top: var(--rum-6); }

@media (max-width: 1023px) {
  .side {
    grid-template-columns: 1fr;
    grid-template-areas: "topbaand" "rail" "indhold";
  }
  .rail { border-right: none; border-bottom: 1px solid var(--chrome-kant); }
  .indhold { padding: var(--rum-4) var(--rum-4) var(--rum-7); }

  /* RAIL OG INDHOLD MÅ IKKE LANDE I SAMME CELLE.
     ---------------------------------------------------------------------
     Begge fladefiler sætter `grid-row: 3` på både .rail og .indhold, fordi
     de skubber alt ned under et bånd i række 1 og topbåndet i række 2. På
     desktop er det harmløst: de to står i hver sin KOLONNE. I ét-kolonne-
     layoutet lander de i SAMME celle og tegnes oven på hinanden — menuen
     stod bag h1'en, søgefeltet og hjælpeteksten. Fladen var ikke grim på en
     telefon, den var ubrugelig.

     Selve `grid-row`-rettelsen står i `kundeadmin.css` og `tenantadmin.css`
     og ikke her: en medieforespørgsel hæver ikke specificiteten, og de to
     fladefiler indlæses EFTER dette ark. En regel med samme specificitet i
     en tidligere fil taber — også inde i et @media. Her står kun det, der
     ikke kolliderer: railens form, når den ikke længere har en kolonne.

     Uden en kolonne at stå i bliver railen en vandret liste OVER indholdet:
     gruppeetiketten bryder linjen, punkterne bliver chips i klikmålshøjde. */
  .rail > ul { display: flex; flex-wrap: wrap; gap: var(--rum-1); padding: 0 var(--rum-2); }
  .rail__gruppe { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--rum-1); }
  .rail__gruppe > .etikette { flex: 0 0 auto; padding: var(--rum-2) var(--rum-2) var(--rum-1) 0; }
  .rail__gruppe > ul { display: flex; flex-wrap: wrap; gap: var(--rum-1); }
  .rail__punkt > a { min-height: 32px; padding: 0 var(--rum-3); border-left: none; border-bottom: 3px solid transparent; }
  .rail__punkt > a[aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--signatur); }
  .rail__skille, .rail__sekundaer { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   7 · KNAPPER
   Fast ordforråd i mikroteksten. Højst én primærknap pr. skærm (K-16).
   -------------------------------------------------------------------------- */

.knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rum-2);
  min-height: var(--klikmaal);
  padding: 0 var(--rum-4);
  border: 1px solid var(--kant-felt);
  border-radius: var(--radius);
  background: var(--kortflade);
  color: var(--tekst-krop);
  font-size: var(--tekst-brod);
  font-weight: var(--vaegt-halvfed);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--overgang), border-color var(--overgang);
}
.knap:hover { background: var(--fyld-svag); text-decoration: none; }
.knap:active { background: var(--graa-200); }

.knap--primaer {
  background: var(--primaer);
  border-color: var(--primaer);
  color: var(--hvid);
}
.knap--primaer:hover,
.knap--primaer:active {
  background: var(--primaer-moerk);
  border-color: var(--primaer-moerk);
}

.knap--farlig {
  background: var(--baand-kritisk);
  border-color: var(--baand-kritisk);
  color: var(--hvid);
}
.knap--farlig:hover { background: #731117; border-color: #731117; }

.knap--stille {              /* tertiær: ligner et link, klikmål som knap */
  border-color: transparent;
  background: none;
  color: var(--link);
  padding: 0 var(--rum-2);
}
.knap--stille:hover { background: var(--primaer-tint); }

.knap--lille { min-height: 32px; padding: 0 var(--rum-3); font-size: var(--tekst-tabel); }

/* Glyf på en knap er redundans, ikke bærer: teksten står altid ved siden af.
   Kun de knapper, der er navngivet i designsporingen, bærer en glyf —
   «Filtrér», «Ryd filtre», «Annullér» og «Gem» er tekst alene. */
.knap > .ikon { width: 16px; height: 16px; }

/* Topbåndets «Log ud» må ikke ombryde til «Log / ud» på en telefon. */
.topbaand .knap { white-space: nowrap; }

/* Under 768 px er der ikke plads til tre ting i båndet.
   ------------------------------------------------------------------------
   Tenantnavn, miljømærkat og «Administrator · UX Kigger» ombrød til tre
   linjer og skubbede hele siden ned. Rolle og bruger står i forvejen i
   railens fod, så de siges ikke to gange — de siges ét sted, hvor der er
   plads til dem. Miljømærkatet BLIVER: det er hele forskellen på at rette
   en fejl i test og at rette den i produktion, og det er den eneste af de
   tre, der ikke står andre steder på skærmen. «Log ud» bliver, fordi den er
   en handling og ikke en oplysning. */
@media (max-width: 767px) {
  .topbaand { gap: var(--rum-2); padding: 4px var(--rum-4) 0; }
  .topbaand__sekundaer { display: none; }
  .topbaand__navn { min-width: 0; overflow-wrap: anywhere; }
}

.knap[disabled],
.knap[aria-disabled="true"] {
  background: var(--fyld-svag);
  border-color: var(--graa-400);
  color: var(--tekst-deaktiv);
  cursor: not-allowed;
  box-shadow: none;
}
/* Deaktiverede handlinger forklares — de skjules ikke.
   Begrundelsen står som .knap-forklaring ved siden af, ikke i title. */
.knap-forklaring {
  display: block;
  font-size: var(--tekst-lille);
  color: var(--tekst-daempet);
  margin-top: var(--rum-1);
  max-width: 40ch;
}

.knapgruppe { display: flex; flex-wrap: wrap; gap: var(--rum-2); align-items: center; }

/* --------------------------------------------------------------------------
   8 · FORMULARER
   -------------------------------------------------------------------------- */

/* ÉN FORMULARRYTME: etiket → kontrol → hjælp → fejl. Altid, uden undtagelse.
   ---------------------------------------------------------------------------
   Auditen fandt FIRE konventioner i brug for den samme opgave — etiket over,
   etiket til venstre, hjælp til højre, etiket skjult. De tre sidste opstod
   ikke af en beslutning: de opstod dér, hvor en skabelon ikke brugte
   `Komponenter\Felt`, og dér hvor `.felt--beloeb` gjorde `.felt` til en
   flexrække og trak etiket og hjælpetekst med op på inputtets linje.

   `.felt` er derfor nu en LODRET STAK. Rækkefølgen er DOM-rækkefølgen, som
   den altid har været i `Felt::`; det er kun visningen, der holder op med at
   modsige den. */
.felt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rum-1);
}
.felt + .felt { margin-top: var(--rum-4); }

/* To kolonner, når felterne hører sammen. Erstatter den brudte
   `.feltraekke`-brug; `.feltraekke` bliver stående til to KORTE felter uden
   hjælpetekst og bruges ikke til andet. */
.feltgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  align-items: start;
}
.feltgrid > .felt { margin-top: 0; }
@media (max-width: 767px) {
  .feltgrid { grid-template-columns: 1fr; }
}

.felt__etiket {
  display: block;
  font-weight: var(--vaegt-halvfed);
  font-size: var(--tekst-brod);
  color: var(--tekst-overskrift);
  margin-bottom: 0;
}
/* Påkrævet markeres. Valgfrit markeres ikke. */
.felt__paakraevet {
  font-weight: var(--vaegt-normal);
  color: var(--tekst-daempet);
  font-size: var(--tekst-lille);
}
.felt__hjaelp {
  display: block;
  font-size: var(--tekst-lille);
  color: var(--tekst-daempet);
  margin-top: var(--rum-1);
  max-width: 60ch;
}

input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], input[type="date"],
input[type="tel"], input[type="url"], select, textarea {
  width: 100%;
  max-width: 44ch;
  min-height: var(--klikmaal);
  padding: var(--rum-2) var(--rum-3);
  border: 1px solid var(--kant-felt);
  border-radius: var(--radius-lille);
  background: var(--kortflade);
  color: var(--tekst-krop);
  font-size: var(--tekst-brod);
}
textarea { min-height: 96px; resize: vertical; line-height: var(--linje-brod); }
select { max-width: 32ch; }

input[readonly], textarea[readonly] { background: var(--fyld-svag); }
input[disabled], select[disabled], textarea[disabled] {
  background: var(--fyld-svag);
  color: var(--tekst-deaktiv);
  border-color: var(--graa-400);
  cursor: not-allowed;
}

/* Beløb og tal: monospace, tabulærtal, højrestillet (K-15).
   ---------------------------------------------------------------------------
   REGLEN, SKREVET SÅ DEN KAN BRUGES I EN GENNEMGANG: monospace til værdier,
   der skal kunne sammenlignes LODRET eller læses op tegn for tegn — aldrig
   til en sætning. En indstillingsnøgle er korrekt i monospace; det er
   «Ingen rækker endnu», «Viser alle 3» og «10.09.2026 til og med 09.09.2027»
   ikke. I den sidste er det kun de to datoer, der er tal; «til og med» er
   ord, og taltypografien på dem var samtidig det, der låste periodekolonnen
   til 230 px og klemte resten af tabellen sammen. */
.felt--beloeb input, .tal, .beloeb {
  font-family: var(--skrift-tal);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-align: right;
}
/* `.felt--beloeb` styrer KUN `input + enhed` — ikke hele feltet.
   ---------------------------------------------------------------------------
   Reglen blev skrevet til «beløb + valutakode» og var rigtig for netop de to.
   Men `Felt::input()` lægger FIRE børn i `.felt`, og en flexrække trak alle
   fire op på samme linje: etiketten kom til venstre for sit felt, og
   hjælpeteksten blev en 110 px søjle over elleve linjer med 150 px dødt rum
   ved siden af. På 390 px blev talfeltet under 35 px bredt — smallere end de
   to cifre, det skal rumme.

   Flex bliver; etiket, hjælp og fejl tvinges ud på hver sin linje. */
.felt--beloeb {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--rum-2);
}
.felt--beloeb > .felt__etiket,
.felt--beloeb > .felt__hjaelp,
.felt--beloeb > .felt__fejl { flex: 1 0 100%; }
.felt--beloeb input { max-width: 16ch; }
/* Et ANTAL er ikke et beløb. 140 px til to cifre er spild (audit 05); et
   beløb skal derimod kunne rumme «1.234.567,89». Derfor to bredder. */
.felt--antal input { max-width: var(--felt-bredde-tal); }
/* … og den skal have den SAMME række-anatomi som `.felt--beloeb`, ellers
   falder enheden ned under feltet i stedet for at stå inline til højre for
   det (R15). Etiket, hjælp og fejl tvinges ud på egne linjer med
   `flex: 1 0 100%` — nøjagtig som ovenfor, og af nøjagtig samme grund. */
.felt--antal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--rum-2);
}
.felt--antal > .felt__etiket,
.felt--antal > .felt__hjaelp,
.felt--antal > .felt__fejl { flex: 1 0 100%; }
/* Tallet er tabulært, men IKKE højrestillet: et antal på to cifre i en 8ch
   boks læses fra venstre som alt andet. Højrestilling hører til beløb, der
   sammenlignes lodret. */
.felt--antal input {
  font-family: var(--skrift-tal);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Enheden («måneder», valutakoden) står INLINE til højre for kontrollen —
   ikke som et selvstændigt felt og ikke i etiketten. */
.felt__enhed {
  font-size: var(--tekst-lille);
  font-weight: var(--vaegt-halvfed);
  color: var(--tekst-daempet);
  padding-bottom: var(--rum-2);
}
.valuta {
  font-size: var(--tekst-lille);
  font-weight: var(--vaegt-halvfed);
  color: var(--tekst-daempet);
  padding-bottom: var(--rum-2);
}
.felt--dato input { max-width: 13ch; font-family: var(--skrift-tal); }

/* Fejl ved feltet: rød kant + 3 px venstrebjælke + ikon + tekst.
   Fire bærere, hvoraf tre overlever en gråtoneudskrift. */
.felt--fejl input, .felt--fejl select, .felt--fejl textarea {
  border-color: var(--tone-alvorlig);
  border-left-width: 3px;
  background: var(--tone-alvorlig-tint);
}
.felt__fejl {
  display: flex;
  align-items: flex-start;
  gap: var(--rum-1);
  margin-top: var(--rum-1);
  font-size: var(--tekst-lille);
  font-weight: var(--vaegt-halvfed);
  color: var(--tone-alvorlig);
  max-width: 60ch;
}

.fejlopsummering {
  border: 1px solid var(--tone-alvorlig);
  border-left-width: 4px;
  background: var(--tone-alvorlig-tint);
  border-radius: var(--radius);
  padding: var(--rum-4);
  color: var(--tone-alvorlig);
}
.fejlopsummering h2 { font-size: var(--tekst-mellem); color: var(--tone-alvorlig); }
.fejlopsummering ol { margin-top: var(--rum-2); padding-left: var(--rum-4); list-style: decimal; }
.fejlopsummering a { color: var(--tone-alvorlig); }

/* En radiogruppe er et <fieldset>, og <legend> er ikke et almindeligt barn:
   browserne tegner den uden for det normale flow. Stakken ovenfor gælder
   derfor ikke her — afstanden kommer fra margener i stedet. */
fieldset.felt { display: block; }
fieldset.felt > .felt__hjaelp,
fieldset.felt > .felt__fejl { margin-top: var(--rum-1); }

/* Checkbokse og radioknapper — 18 px kontrol, 40 px klikmål */
.valg {
  display: flex;
  align-items: center;
  gap: var(--rum-2);
  min-height: var(--klikmaal);
  cursor: pointer;
}
.valg input[type="checkbox"], .valg input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primaer);
  flex: 0 0 auto;
  cursor: pointer;
}

/* En mulighed med sin egen hjælpetekst.
   ------------------------------------------------------------------------
   Hjælpen ligger INDE i <label>, under etiketten, så en skærmlæser hører den
   sammen med muligheden — og ikke som en løs `aria-describedby` på hele
   gruppen, hvor den ville blive læst op tre gange i træk. Klikmålet er
   stadig 40 px, nu bare med to linjer i. */
.valg--stak {
  align-items: flex-start;
  padding: var(--rum-2) 0;
}
.valg--stak input[type="checkbox"], .valg--stak input[type="radio"] { margin-top: 3px; }
/* En mulighed, der ikke kan vælges: tegnet, ikke skjult. Titlen er dæmpet;
   hjælpen og forklaringen står i læsbar farve — man skal kunne LÆSE, hvorfor
   man ikke kan vælge. Aldrig opacity (den ville trække teksten under AA). */
.valg--deaktiv { cursor: not-allowed; }
.valg--deaktiv input[type="radio"], .valg--deaktiv input[type="checkbox"] { cursor: not-allowed; }
.valg--deaktiv .valg__tekst > span:first-child { color: var(--tekst-deaktiv); }
.valg--deaktiv .knap-forklaring { margin-top: var(--rum-1); max-width: none; }
.valg__tekst { display: flex; flex-direction: column; gap: 2px; }
.valg__hjaelp {
  font-size: var(--tekst-lille);
  font-weight: var(--vaegt-normal);
  color: var(--tekst-daempet);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   9 · TABEL — K-1's grundstil.
   Systemets vigtigste komponent. Bogholdere lever her.
   Variationer og tilstande ligger i komponenter.css.
   -------------------------------------------------------------------------- */

.tabel-ramme {
  background: var(--kortflade);
  border: 1px solid var(--kant-kort);
  border-radius: var(--radius);
  overflow: hidden;
}
.tabel-rul { overflow-x: auto; }

.tabel {
  width: 100%;
  font-size: var(--tekst-tabel);
  line-height: var(--linje-tabel);
}

.tabel caption {
  text-align: left;
  padding: var(--rum-3) var(--rum-4);
  font-size: var(--tekst-lille);
  color: var(--tekst-daempet);
  border-bottom: 1px solid var(--kant-fin);
}

.tabel thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--fyld-svag);
  color: var(--tekst-overskrift);
  text-align: left;
  font-weight: var(--vaegt-halvfed);
  font-size: var(--tekst-lille);
  white-space: nowrap;
  padding: var(--rum-2) var(--rum-3);
  border-bottom: 1px solid var(--kant-felt);
}

/* Sortering er et link i <th>, ikke JS. Retningen vises med en trekant
   OG med aria-sort — pilen er formen, ikke farven. */
.tabel thead th a {
  display: inline-flex;
  align-items: center;
  gap: var(--rum-1);
  color: inherit;
  text-decoration: none;
  min-height: 24px;
}
.tabel thead th a:hover { text-decoration: underline; }
.tabel th[aria-sort] a { font-weight: var(--vaegt-fed); }
/* Pilen tegnes ÉN gang, og den tegnes af dokumentet.
   Arket satte den også som `content:` her, så hver sorteret kolonne bar TO
   trekanter: «Periode ▲▲». Det er dokumentet, der ved, hvilken vej der
   sorteres — samme grund som til, at udskriftshovedet og fladens mærkat er
   elementer og ikke `content:`. Et ark, der ikke når frem, tager ellers
   retningen med sig, mens `aria-sort` bliver.
   Trekantens størrelse hører derimod stadig i arket. */
.tabel th[aria-sort] a > span[aria-hidden] { font-size: 9px; }

.tabel tbody td {
  height: var(--raekkehojde);
  padding: var(--rum-2) var(--rum-3);
  border-bottom: 1px solid var(--kant-fin);
  vertical-align: middle;
}
.tabel tbody tr:last-child td { border-bottom: none; }

/* Zebra tændes først fra 10 rækker — sæt klassen serverside. */
.tabel--zebra tbody tr:nth-child(even) { background: var(--zebra); }
.tabel tbody tr:hover { background: var(--primaer-tint); }

.tabel tfoot td {
  background: var(--fyld-svag);
  border-top: 1px solid var(--kant-felt);
  font-size: var(--tekst-lille);
  padding: var(--rum-3);
}

/* Tal- og datokolonner */
.tabel .kol-tal, .tabel .kol-beloeb, .tabel th.kol-tal, .tabel th.kol-beloeb {
  text-align: right;
  font-family: var(--skrift-tal);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.tabel .kol-dato {
  font-family: var(--skrift-tal);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tabel .kol-vaelg { width: var(--klikmaal); padding: 0; }
.tabel .kol-vaelg label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--klikmaal);
  height: var(--klikmaal);
  cursor: pointer;
}
.tabel .kol-handling { width: 1%; white-space: nowrap; text-align: right; }

/* Tom celle: — og aldrig blankt. aria-label sættes i HTML. */
.tom-vaerdi { color: var(--tekst-daempet); }

/* Valgt række: bund + 3 px venstrebjælke, så valget ses uden farve. */
.tabel tbody tr[aria-selected="true"] td { background: var(--primaer-tint); }
.tabel tbody tr[aria-selected="true"] td:first-child {
  box-shadow: inset 3px 0 0 0 var(--primaer);
}

/* --------------------------------------------------------------------------
   10 · HJÆLPEKLASSER
   -------------------------------------------------------------------------- */

.visuelt-skjult {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ikon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ikon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
}
.ikon--fyldt { fill: currentColor; stroke: none; }
.ikon--stor  { width: 1.25em; height: 1.25em; }

.kun-udskrift { display: none; }

.hoejre { text-align: right; }
.nowrap { white-space: nowrap; }