/* ============================================================
   FORTA SMS — designsprog
   Ét sted for hele fladen. Roligt, præcist, tillidsvækkende.
   Tal er hovedpersonen; advarsler og fejl kan skelnes på et
   halvt sekund. Lys og mørk tilstand er hver især bevidste.

   Lag i fladen (dybde-hierarkiet, brugt konsekvent):
     0 · grundfladen        --bg, ingen skygge
     1 · hvilende kort      hårfin kant + --skygge
     2 · løftede paneler    --skygge-mellem (hover, klæbende måling)
     3 · svævende flader    --skygge-loft (login, forhåndsvisningens
                            regnestykke, handlingsbjælken uden fortrydelse)
   ============================================================ */

/* ------------------------------------------------------------
   0 · SKRIFT — Inter, indlejret lokalt.
   🔴 INGEN CDN: serveren har ingen garanti for udgaaende netvaerk,
   saa skriften bor i /static/fonts og lastes derfra. Variabel
   vaegt 400-800 med optisk akse; dansk (æøå) ligger i latin-
   subsettet. Falder tilbage til systemskrifterne i --skrift.
   ------------------------------------------------------------ */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ------------------------------------------------------------
   1 · TOKENS
   ------------------------------------------------------------ */
:root{
  /* flade */
  --bg:#f4f5f7;
  --bg-dyb:#eceef1;
  --kort:#ffffff;
  --linje:#e5e8ed;
  --linje-staerk:#d3d8df;

  /* tekst */
  --ink:#14171f;
  --ink2:#5b6472;
  /* 🔴 LOEFTET 25-09-2026: #8b93a0 laa paa 2,84:1 mod --bg og 3,10:1 mod
     --kort. Tonen baerer TEKST (tomme tilstande, pladsholdere, «Glemt
     kode», fejlkoden, trinene) — saa den skal naa 4,5:1 paa BEGGE
     flader. #687080 giver 4,56 / 4,98. Den er stadig den svageste tone;
     afstanden til --ink2 baeres nu af brugen, ikke af at den ikke kan
     laeses. Maalt med drift/maal_design.py. */
  --ink3:#687080;

  /* accent — produktfarven ROSA (S30, 17-10-2026).
     Andreas 15-10 («A»): SMS faar nye farver efter tabel K i
     Torpnet/forta-sign BESLUTNING-FAELLESDESIGN-15-10.md:
         lys flise #c8306e · knap med hvid tekst #a3225a · moerkt tema #ff8fa8
     --acc er KNAP-tonen, ikke flisen: links og knaptekst er broedtekst
     og skal naa 4,5:1. Maalt: hvid paa #a3225a 7,16 · #a3225a paa --bg
     6,56. Flisen (#c8306e) gav 4,69 paa --bg — bestaar, men med mindre
     luft, saa den baerer kun favicon'et. Den blaa #2557d6 er erstattet.
     🔴 Roed (--roed), gul og groen er IKKE rosa og maa ikke blive det:
     ΔE2000 rosa/fejlroed er 20,5 lys og 14,4 moerk (se S30-leverancen). */
  --acc:#a3225a;
  --acc-hover:#8a1c4c;
  --acc-dyb:#7a1843;
  --acc-svag:#fbeaf1;
  --acc-ring:rgba(163,34,90,.25);
  --knap-ink:#ffffff;
  /* 🔴 FAREKNAPPENS TEKST ER ET TOKEN, IKKE #fff. I moerk tilstand er
     --roed lys (#f07067), og hvid tekst paa den laa paa 2,91:1 — den
     eneste knap i fladen man ikke kunne laese i moerk tilstand, og det
     var den der sletter noget. */
  --knap-fare-ink:#ffffff;

  /* knappens flade som ét token, saa en DEAKTIVERET knap kan stilles
     tilbage til den uden at gentage gradienten (se 8b) */
  --knap-flade:linear-gradient(180deg,color-mix(in srgb,var(--acc) 90%,#fff),var(--acc) 72%);

  /* semantik */
  /* #15803d laa paa 4,47:1 mod sin egen svage flade — .m-groen og .b-ok
     var de eneste maerker under 4,5:1. Et trin moerkere. */
  --groen:#137638;
  --groen-svag:#e8f5ed;
  --roed:#b3261e;
  --roed-svag:#fcecea;
  --roed-linje:#eab8b4;
  --gul:#875b00;
  --gul-svag:#fdf3dd;
  --gul-linje:#ecd9a8;

  /* form — fem radier: 6 · 9 · 12 · 16 · pille */
  --radius-mini:6px;
  --radius:12px;
  --radius-lille:9px;
  --radius-stor:16px;

  /* ── SKRIFTSKALA — ni trin, loeftet 25-09-2026 ────────────────
     Maalt foer: 22 forskellige stoerrelser paa tvaers af CSS'en og
     skabelonerne. Trinene staar
     ~10 % fra hinanden i broedteksten og aabner sig mod overskrifterne.
     Undtagelser (og de er ikke trin): 16 px i felter paa mobil (iOS-
     zoomgulvet, 24.2) og 10 px i menuens gruppe-etiket (maalt til at
     passe ved 1440 px — se 3). */
  --t-xs:11px;      /* versal-etiketter, kolonneoverskrifter */
  --t-s:12.5px;     /* hjaelp, maerker, mono */
  --t-m:13.5px;     /* smaa tekst, tabeller, faner, feltetiketter */
  --t-grund:15px;   /* broedtekst og knapper */
  --t-l:16.5px;     /* h2, mærket, store knapper */
  --t-xl:20px;
  --t-2xl:24px;     /* h1 paa mobil */
  --t-3xl:28px;     /* h1 */
  --t-4xl:32px;     /* noegletal, ogsaa i forhaandsvisningen */

  /* ── AFSTANDSSKALA — 4-punkts, loeftet 25-09-2026 ─────────────
     Maalt foer: 35 forskellige laengder, 23 uden for et 4-punkts-net.
     Tokens bruges hvor TAETHEDEN bor (kort, raekker, sider, celler);
     smaa indre afstande staar som tal paa samme net. 2 og 6 er
     halvtrin til chips og maerker. */
  --r-1:4px;
  --r-2:8px;
  --r-3:12px;
  --r-4:16px;
  --r-5:20px;
  --r-6:24px;
  --r-8:32px;
  --r-12:48px;

  /* ── FOKUS — én ring for alt der kan trykkes ─────────────────
     🔴 Knappens ring var 3 px --acc-ring (25 % alfa): 1,47:1 mod kortet
     i lys tilstand, under WCAG 1.4.11's 3:1 for en ikke-tekst-markering.
     Nu en massiv accentring med et mellemrum i kortets farve, saa den
     ogsaa ses paa en blaa knap. */
  --fokus-farve:var(--acc);
  --fokus-ring:0 0 0 2px var(--kort),0 0 0 4px var(--fokus-farve);

  /* ── SKYGGER UDEN FOR DE TRE LAG — tidligere raa rgba i komponenterne,
     med KUN en lys udgave. Nu har de hver en moerk. */
  --skygge-fin:0 1px 2px rgba(16,24,40,.04);
  --skygge-symbol:0 1px 2px rgba(16,24,40,.18);
  --skygge-knap:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(16,24,40,.14);
  --skygge-knap-loeft:inset 0 1px 0 rgba(255,255,255,.14),0 3px 8px rgba(16,24,40,.18);
  --skygge-knap-tryk:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(16,24,40,.12);
  /* rulleskyggen i en tabels kant (24.6) — stod som raa rgba i to
     kopier af samme blok, én pr. tema. Nu én blok og to vaerdier. */
  --rul-skygge:rgba(16,24,40,.16);

  /* maalerens gradient-ender — samme vaerdier som foer, nu navngivne */
  --maaler-acc-ende:#ff8fa8;
  --maaler-gul-start:#c98a12;
  --maaler-roed-start:#d84b40;

  /* dybde — tre bevidste lag, bløde og lagdelte frem for tunge */
  --skygge:
    0 1px 1px rgba(16,24,40,.04),
    0 1px 2px rgba(16,24,40,.04),
    0 2px 8px rgba(16,24,40,.03);
  --skygge-mellem:
    0 1px 2px rgba(16,24,40,.05),
    0 4px 10px rgba(16,24,40,.05),
    0 12px 28px rgba(16,24,40,.06);
  --skygge-loft:
    0 1px 2px rgba(16,24,40,.05),
    0 6px 16px rgba(16,24,40,.06),
    0 16px 40px rgba(16,24,40,.08),
    0 32px 72px rgba(16,24,40,.07);
  --hoved-flade:rgba(255,255,255,.85);
  --hoved-tet:#fdfdfd;    /* FU1 28.2 · toppens flade over --bg, uigennemsigtig */
  --sloer:rgba(10,12,15,.45);   /* S46 · sloeret bag sessionsadvarslen */

  /* bevægelse — én kurve, to tempi. Bruges hvor noget SKIFTER
     tilstand; aldrig til pynt. */
  --kurve:cubic-bezier(.4,0,.2,1);
  --kurve-blod:cubic-bezier(.22,1,.36,1);
  --fart:.15s;
  --fart-lang:.45s;

  --skrift:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
           "Helvetica Neue",Arial,sans-serif;
  --skrift-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

/* Mørk tilstand — komponeret, ikke inverteret: næsten sort skifer,
   kort en anelse lysere, accenten løftet så den bærer på mørk grund.
   Dybde tegnes med indre toplys + mørke, ikke med grå kasser. */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d0f13;
    --bg-dyb:#0a0c0f;
    --kort:#15181e;
    --linje:#262b34;
    --linje-staerk:#333a45;

    --ink:#e8eaee;
    --ink2:#9aa3b0;
    --ink3:#7a8391;        /* var #68717f: 3,60:1 paa kort -> nu 4,64 */

    --acc:#ff8fa8;           /* tabel K, moerkt tema */
    --acc-hover:#ffa9bc;
    --acc-dyb:#f06f8f;
    --acc-svag:rgba(255,143,168,.13);
    --acc-ring:rgba(255,143,168,.35);
    --knap-ink:#0b1220;
    --knap-fare-ink:#1a0706;  /* moerk tekst paa lys roed: 6,70:1 (hvid gav 2,91) */

    --groen:#4cc38a;
    --groen-svag:rgba(76,195,138,.13);
    --roed:#f07067;
    --roed-svag:rgba(240,112,103,.13);
    --roed-linje:rgba(240,112,103,.35);
    --gul:#e2b04a;
    --gul-svag:rgba(226,176,74,.12);
    --gul-linje:rgba(226,176,74,.35);

    --skygge:
      0 1px 2px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.035);
    --skygge-mellem:
      0 6px 18px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.045);
    --skygge-loft:
      0 8px 24px rgba(0,0,0,.5),
      0 24px 64px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.05);
    --hoved-flade:rgba(13,15,19,.8);
    --hoved-tet:#0d0f13;  /* = --hoved-flade over --bg (begge #0d0f13) */
    --sloer:rgba(0,0,0,.6);

    --skygge-fin:0 1px 2px rgba(0,0,0,.3);
    --skygge-symbol:0 1px 3px rgba(0,0,0,.5);
    --skygge-knap:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(0,0,0,.4);
    --skygge-knap-loeft:inset 0 1px 0 rgba(255,255,255,.14),0 3px 8px rgba(0,0,0,.45);
    --skygge-knap-tryk:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.35);
    /* .55 gav 3-6 luminanstrin paa --kort (#15181e) mod 12-17 i lys
       tilstand — maalt 26-09-2026, drift/maal_mobil.py --moerk. Paa en
       naesten sort flade er der kun ~24 trin at moerkne med. */
    --rul-skygge:rgba(0,0,0,.85);
  }
}

/* ------------------------------------------------------------
   2 · GRUNDFLADE OG TYPOGRAFISK RYTME
   Skalaen er tokens (--t-*, se 1): 11 · 12.5 · 13.5 · 15 · 16.5 ·
   20 · 24 · 28 · 32. Overskrifter og store tal strammes optisk;
   cifre er tabulære OVERALT, så kolonner og målinger står stille.
   ------------------------------------------------------------ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:var(--t-grund)/1.55 var(--skrift);
  font-optical-sizing:auto;
  font-variant-numeric:tabular-nums lining-nums;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;              /* aldrig vandret scroll på body */
}
/* et stille lysfald i accentens tone oeverst paa HVER side — samme
   signatur som login-siden, blot svagere. Fladen faar dybde og et
   genkendeligt ansigt uden at et eneste element flytter sig. */
body::before{
  content:"";position:fixed;inset:0 0 62%;z-index:-1;pointer-events:none;
  background:radial-gradient(72% 100% at 50% 0,
    color-mix(in srgb,var(--acc) 5%,transparent),transparent 72%);
}
::selection{background:var(--acc-svag);color:var(--ink)}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
/* 🔴 T3 · ET LINK I LOEBENDE TEKST BAERES IKKE AF FARVEN ALENE (WCAG 1.4.1).
   Maalt 01-10-2026 med axe-core: 60 `link-in-text-block` (serious) paa
   tvaers af 18 sider — --acc mod --ink2 er under 3:1 indbyrdes, saa et link
   midt i en hjaelpetekst var kun til at finde for den der ser farver.
   Understregning i de tekstbaerende blokke; menuer, knapper, faner og
   tabelceller er uroerte (de er ikke «tekst med et link i»). */
:where(p,.hjaelp,.smaa,.besked,.und):not(td,th) a:not(.knap):not(.fane):not(.tilbage){
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
}
:where(p,.hjaelp,.smaa,.besked,.und):not(td,th) a:not(.knap):not(.fane):not(.tilbage):hover{
  text-decoration-thickness:2px;
}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
/* T3 · tekst KUN til skaermlaesere — fx overskriften paa en handlingskolonne,
   som synligt er tom med vilje, men ellers laeses som «tom overskrift». */
/* S38 · TG-10 (WCAG 2.4.1): «Spring til indhold» — foerste tabstop, skjult
   til det faar fokus. Uden det var der 12 tryk foer <main>. */
.spring-til-indhold{
  position:absolute;left:var(--r-3);top:-200px;z-index:100;
  /* 44-gulvet (test_vaern_mobilfladen): maalt 145x39 uden min-height */
  display:inline-flex;align-items:center;min-height:44px;
  padding:var(--r-2) var(--r-3);border-radius:var(--radius-lille);
  background:var(--kort);color:var(--ink);font-weight:600;
  box-shadow:var(--skygge-loft);
}
.spring-til-indhold:focus{top:var(--r-3)}
main:focus{outline:none}
.kun-skaermlaeser{
  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;
}

h1{
  font-size:var(--t-3xl);font-weight:730;letter-spacing:-.032em;line-height:1.15;
  margin:0 0 4px;text-wrap:balance;
}
h2{
  font-size:var(--t-l);font-weight:670;letter-spacing:-.014em;line-height:1.3;
  margin:var(--r-8) 0 var(--r-3);
}
.und{color:var(--ink2);margin:0 0 var(--r-6);max-width:68ch;text-wrap:pretty}

main{max-width:1120px;margin:0 auto;padding:var(--r-8) var(--r-5) 96px}

/* sidehoved for en enkelt side */
.side-hoved{margin-bottom:var(--r-6)}
.side-hoved .und{margin-bottom:0}

@media (max-width:760px){
  h1{font-size:var(--t-2xl)}
}

/* ------------------------------------------------------------
   3 · TOPBJÆLKE
   ------------------------------------------------------------ */
header{
  background:var(--hoved-flade);
  -webkit-backdrop-filter:saturate(1.7) blur(16px);
  backdrop-filter:saturate(1.7) blur(16px);
  border-bottom:1px solid var(--linje);
  padding:0 20px;
  display:flex;align-items:center;gap:20px;
  position:sticky;top:0;z-index:20;
}
.mrk{
  font-weight:750;letter-spacing:-.03em;font-size:var(--t-l);
  padding:15px 0;color:var(--ink);white-space:nowrap;
  display:flex;align-items:center;gap:var(--r-2);
}
.mrk:hover{text-decoration:none;color:var(--ink)}
.mrk::before{               /* lille signalprik — fald tilbage hvor symbolet ikke er sat ind */
  content:"";width:9px;height:9px;border-radius:3px;
  background:var(--acc);
  box-shadow:0 0 0 4px var(--acc-svag);
}
.mrk span{color:var(--acc)}

/* mærket som SVG-symbol — tre stigende segmenter i en rolig flise.
   Klassen med-symbol slår prik-faldbacken fra; operatørfladen
   beholder sin (røde) prik som sikkerhedssignatur. */
.mrk.med-symbol::before,
.mrk-stor.med-symbol::before{display:none}
.mrk-symbol{display:block;flex:none;border-radius:var(--radius-mini);box-shadow:var(--skygge-symbol)}

nav{
  display:flex;gap:2px;flex:1;
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
nav::-webkit-scrollbar{display:none}

/* 🔴 PAA BREDE SKAERME OMBRYDER MENUEN — DEN RULLER IKKE.
   `overflow-x:auto` med SKJULT scrollbar betyder at et menupunkt der ikke
   er plads til, forsvinder UDEN at noget antyder at der er mere. FORTA WEB
   maalte 28-08 «Effekt» klippet til «Eff» ved 1440 px paa alle ti skud.
   ⚠️ Og at forkorte ét punkt flytter bare klippet til det naeste — de
   maalte selv at fejlen var «flyttet, ikke fjernet». Femten punkter i én
   raekke passer ikke, og det er ikke et spoergsmaal om hvilke ord der
   staar der. Ombrydning kan pr. konstruktion ikke skjule noget.
   Paa smalle skaerme er rulningen stadig den rigtige form — der er
   ombrydning til fem raekker vaerre end at kunne stryge sidelaens. */
@media (min-width:761px){
  nav{flex-wrap:wrap;overflow-x:visible}
  nav a{padding-top:12px;padding-bottom:10px}
  header{align-items:flex-start;flex-wrap:wrap}
  .mrk{padding:13px 0}
  .hoejre{padding:14px 0}
  /* haarstregen mellem de to raekker gaar til kant, som headerens egen */
  .nav-sekundaer{
    border-top:1px solid var(--linje);
    margin:0 -20px;padding:0 20px;
  }
  /* strammere polstring end den primaere: 14 punkter + fire etiketter
     skal kunne staa i ÉN raekke ved 1440 px (maalt 19-09-2026: med
     12 px sider broed OPSAETNING til en tredje raekke) */
  .nav-sekundaer a{padding:9px 8px 7px}
}
nav a{
  padding:16px 12px 14px;color:var(--ink2);font-weight:520;font-size:var(--t-m);
  letter-spacing:-.006em;
  border-bottom:2px solid transparent;white-space:nowrap;
  transition:color var(--fart) var(--kurve),border-bottom-color var(--fart) var(--kurve);
}
nav a.aktiv{color:var(--ink);border-bottom-color:var(--acc);font-weight:620}
nav a:hover{color:var(--ink);text-decoration:none}

/* to bevidste raekker — se kommentaren i tenant/templates/base.html.
   Den sekundaere raekke er FULD bredde (flex-basis:100% ombryder den i
   headerens flex-wrap), lidt mindre i skriften og delt i navngivne
   grupper med et lodret skel. Admin-fladens ene <nav> roeres ikke. */
.nav-primaer{flex:1}          /* som nav altid var — navnet skelner raekkerne */
.nav-sekundaer{flex:1 0 100%}
/* 12,5 px: maalt 19-09-2026 var indholdet 1.411 px mod 1.400 px plads ved
   1440 — med 13 px skrift broed OPSAETNING til en tredje headerraekke */
.nav-sekundaer a{font-size:var(--t-s)}
.nav-gruppe{display:flex;align-items:center}
.nav-gruppe+.nav-gruppe{margin-left:var(--r-2);padding-left:var(--r-2);border-left:1px solid var(--linje)}
/* etiketten er ink2, ikke ink3 — samme laere som F7 om tabeloverskrifter:
   en lille versal-tekst under 4,5:1 er pynt der ikke kan laeses */
.nav-etiket{
  font-size:10px;font-weight:640;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink2);margin-right:6px;white-space:nowrap;
}

.hoejre{display:flex;align-items:center;gap:var(--r-3);font-size:var(--t-m);color:var(--ink2);white-space:nowrap}
.hoejre-id{display:flex;flex-direction:column;line-height:1.25;text-align:right}
.hoejre-id strong{color:var(--ink);font-weight:600;letter-spacing:-.006em}
.hoejre-id span{font-size:var(--t-s);color:var(--ink3)}
.hoejre a{color:var(--ink2);font-weight:520;transition:color var(--fart) var(--kurve)}
.hoejre a:hover{color:var(--ink);text-decoration:none}
/* S9 · «Log ud» er en POST-formular (S6 fund 2e), men skal se ud som
   linket den erstattede. */
.logud-form{margin:0;display:inline}
.hoejre .logud-knap{background:none;border:0;padding:0;font:inherit;color:var(--ink2);font-weight:520;cursor:pointer;transition:color var(--fart) var(--kurve)}
.hoejre .logud-knap:hover{color:var(--ink)}

@media (max-width:760px){
  .hoejre-id span{display:none}
  /* header- og main-polstringen paa mobil bor i 24.3 og 24.4. Her stod
     to regler mere i SAMME mediespoergsmaal, og hver egenskab i dem
     blev overskrevet dér — de var doede og viste tal ingen saa. */
}

/* ------------------------------------------------------------
   4 · KORT OG RÆKKER — lag 1 i dybden: hårfin kant, blød skygge
   ------------------------------------------------------------ */
.kort{
  background:var(--kort);
  border:1px solid var(--linje);
  border-radius:var(--radius);
  padding:var(--r-5);
  margin-bottom:var(--r-4);
  box-shadow:var(--skygge);
}
/* 🔴 21 skabeloner satte style="margin-top:0" paa kortets foerste h2.
   Det er en egenskab ved KORTET, ikke ved hver side: en overskrift
   oeverst i en kasse skal ikke have luft over sig. Nu staar det ét sted. */
.kort>h2:first-child{margin-top:0}
.raek{display:flex;gap:var(--r-4);flex-wrap:wrap}
.raek>*{flex:1;min-width:230px}

/* kort der kun rummer en tabel */
.tabel-kort{padding:0;overflow:hidden}
.tabel-kort .smaa{padding:var(--r-3) var(--r-4);margin:0}
/* position:relative — T3: `.kun-skaermlaeser` i en tabeloverskrift er
   position:absolute. Uden en positioneret forfader inden for rullet placeres
   den relativt til SIDEN, og en 959 px tabel gav saa 394 px vandret rul paa
   hele /skabeloner (maalt 01-10-2026, drift/maal_mobil.py). */
.tabel-rul{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}

/* ------------------------------------------------------------
   5 · TAL — hovedpersonen
   ------------------------------------------------------------ */
.tal{
  font-size:var(--t-4xl);font-weight:720;letter-spacing:-.035em;line-height:1.1;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1;
  color:var(--ink);
}
.tal span{font-size:var(--t-m);color:var(--ink2);font-weight:450;letter-spacing:-.006em}
.tal-und{
  font-size:var(--t-xs);color:var(--ink3);font-weight:660;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--r-2);
}

/* måler — kvotens tilstand i ét blik. Bredden GLIDER når værdien
   skifter: bevægelsen viser at tallet er nyt, ikke at siden er pæn. */
.maaler{
  height:8px;background:var(--bg-dyb);border:1px solid var(--linje);
  border-radius:99px;overflow:hidden;margin-top:var(--r-3);
}
.maaler i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--acc),color-mix(in srgb,var(--acc) 75%,var(--maaler-acc-ende)));
  transition:width var(--fart-lang) var(--kurve-blod);
  min-width:2px;
}
.maaler i.advar{background:linear-gradient(90deg,var(--maaler-gul-start),var(--gul))}
.maaler i.fuld{background:linear-gradient(90deg,var(--maaler-roed-start),var(--roed))}

/* ------------------------------------------------------------
   6 · TABELLER
   ------------------------------------------------------------ */
table{width:100%;border-collapse:collapse;font-size:var(--t-m)}
th{
  /* 🔴 F7 · tabeloverskrifter laa paa 2,993:1 (lyst) / 3,725:1 (moerkt).
     En kolonneoverskrift er det der goer tallet under den laeseligt; er
     den svagere end indholdet, laeser man tal uden at vide hvad de er. */
  text-align:left;color:var(--ink2);font-weight:640;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.07em;
  padding:var(--r-3) var(--r-4);border-bottom:1px solid var(--linje);
  background:color-mix(in srgb,var(--kort) 60%,var(--bg));
  white-space:nowrap;
}
td{
  padding:var(--r-3) var(--r-4);border-bottom:1px solid var(--linje);
  vertical-align:top;line-height:1.5;
  font-variant-numeric:tabular-nums;
}
/* 🔴 EN DATO OG ET NUMMER MAA ALDRIG OMBRYDE. Maalt 18-09-2026 ved 393 px:
   tabellerne staar allerede i .tabel-rul med rullet og kantskygger — men
   table{width:100%} faar cellerne til at KLEMME sig ned til min-bredde
   FOER rullet tages i brug. «+45 80 08 80 08» stod over fire linjer paa
   /log og forsiden, og datoer knak midt i klokkeslaettet. Et tal der er
   brudt over linjer, kan ikke laeses som ét tal. Celler hvis INDHOLD er
   mono (datoer, numre, e-mails, korte links) holder linjen; loebende
   tekst (fx beskedtekster i .smaa.mono-elementer INDE i cellen) rammes
   ikke, for reglen sidder paa selve cellen. */
td.mono{white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr,table tr{transition:background var(--fart) var(--kurve)}
tr:hover td{background:color-mix(in srgb,var(--kort) 70%,var(--bg))}

/* ------------------------------------------------------------
   7 · FORMULARER
   ------------------------------------------------------------ */
label{display:block;font-weight:600;font-size:var(--t-m);margin:0 0 6px;color:var(--ink);letter-spacing:-.006em}
.felt{margin-bottom:var(--r-4)}
input,select,textarea{
  width:100%;padding:var(--r-2) var(--r-3);
  border:1px solid var(--linje-staerk);
  border-radius:var(--radius-lille);
  font:inherit;background:var(--kort);color:var(--ink);
  box-shadow:var(--skygge-fin);
  transition:border-color var(--fart) var(--kurve),box-shadow var(--fart) var(--kurve);
}
input::placeholder,textarea::placeholder{color:var(--ink3)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-ring);
}
input[type="checkbox"],input[type="radio"]{
  width:auto;accent-color:var(--acc);margin:0;box-shadow:none;
}
/* S38 · TG-1 (WCAG 2.4.7): reglen over fjerner ringen, og `input:focus`
   (0,1,1) slaar husets globale `:focus-visible` (0,1,0) — maalt i S34:
   afkrydsningsfelter havde INGEN synlig fokus. 0,2,1 vinder over begge. */
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{
  outline:2px solid var(--fokus-farve);outline-offset:2px;
}
textarea{
  resize:vertical;min-height:120px;
  font-family:var(--skrift-mono);font-size:var(--t-m);line-height:1.6;
}
select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238b93a0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:var(--r-8);
}

/* felternes hover og deaktiverede tilstand — maalt fravaerende 25-09-2026.
   Hover: kanten moerkner en anelse, saa feltet svarer paa musen FOER
   klikket (fokus har sin egen, staerkere accentkant). Filfeltet har sin
   egen hover (21) og holdes ude. Deaktiveret: fladen synker ned i
   grunden, og teksten tager den svageste tone. */
input:hover:not(:focus):not(:disabled):not([type="file"]),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled){border-color:var(--ink3)}
input:disabled,select:disabled,textarea:disabled{
  background-color:var(--bg-dyb);color:var(--ink3);
  box-shadow:none;cursor:not-allowed;
}

/* valgrække — kontakt eller gruppe med afkrydsning */
.valg-rk{
  display:flex;gap:var(--r-2);align-items:center;
  font-weight:450;font-size:var(--t-m);color:var(--ink);
  padding:var(--r-2);margin:0 calc(-1 * var(--r-2));border-radius:var(--radius-mini);
  cursor:pointer;transition:background var(--fart) var(--kurve);
}
.valg-rk:hover{background:var(--acc-svag)}
.valg-rk .maerke{margin-left:auto}

/* ------------------------------------------------------------
   8 · KNAPPER — svag lodret gradient + toplys giver stof;
   hover løfter en anelse, tryk sætter den ned igen.
   ------------------------------------------------------------ */
.knap{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--knap-flade);
  color:var(--knap-ink);
  border:1px solid color-mix(in srgb,var(--acc-dyb) 55%,var(--acc));
  border-radius:var(--radius-lille);
  padding:var(--r-2) var(--r-5);font:inherit;font-size:var(--t-grund);font-weight:620;
  letter-spacing:-.008em;cursor:pointer;
  box-shadow:var(--skygge-knap);
  transition:background var(--fart) var(--kurve),box-shadow var(--fart) var(--kurve),
             transform var(--fart) var(--kurve),border-color var(--fart) var(--kurve);
  -webkit-user-select:none;user-select:none;
}
.knap:hover{
  background:var(--acc-hover);color:var(--knap-ink);text-decoration:none;
  transform:translateY(-1px);
  box-shadow:var(--skygge-knap-loeft);
}
.knap:active{transform:translateY(0);box-shadow:var(--skygge-knap-tryk)}
.knap.sekundaer{
  background:var(--kort);color:var(--ink);
  border-color:var(--linje-staerk);box-shadow:var(--skygge);
}
.knap.sekundaer:hover{background:var(--bg-dyb);color:var(--ink);box-shadow:var(--skygge-mellem)}
.knap.fare{background:var(--roed);color:var(--knap-fare-ink);border-color:color-mix(in srgb,var(--roed) 80%,#000)}
.knap.fare:hover{background:color-mix(in srgb,var(--roed) 85%,#000);color:var(--knap-fare-ink)}
.knap.bred{width:100%}
.knap.stor{padding:var(--r-3) var(--r-6);font-size:var(--t-l)}

/* ------------------------------------------------------------
   8b · KNAPPENS TILSTANDE — fokus og deaktiveret
   Staar EFTER varianterne med vilje, og det er hele pointen.
   🔴 Maalt 25-09-2026 i kaskaden: `.knap:focus-visible` satte
   outline:none og tegnede ringen med box-shadow — og `.knap.sekundaer`
   stod LAENGERE NEDE med samme specificitet og sin egen box-shadow.
   Ringen blev overskrevet. 60 steder i skabelonerne skriver
   class="knap sekundaer" (45 + 15 med knap-lille), og ingen af dem
   havde en synlig fokus — omridset var slaaet fra, ringen tegnet over.
   🔴 Og en deaktiveret knap reagerede paa hover: [disabled] satte ikke
   baggrunden, saa :hover gav den accentens hover-farve — en knap der
   ikke kan trykkes, sagde at den kunne.
   ------------------------------------------------------------ */
.knap:focus-visible,
.knap.sekundaer:focus-visible,
.knap.fare:focus-visible{outline:none;box-shadow:var(--fokus-ring)}
/* fareknappens ring er roed. ⚠️ Ikke ved at saette --fokus-farve her:
   --fokus-ring er regnet ud paa :root, og et custom property der bruger
   et andet, loeses DER det erklaeres — en overskrivning paa elementet
   naar aldrig frem til ringen. */
.knap.fare:focus-visible{box-shadow:0 0 0 2px var(--kort),0 0 0 4px var(--roed)}
.knap:disabled,.knap[disabled],
.knap:disabled:hover,.knap[disabled]:hover{
  background:var(--knap-flade);color:var(--knap-ink);
  opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;
}
.knap.sekundaer:disabled,.knap.sekundaer[disabled],
.knap.sekundaer:disabled:hover,.knap.sekundaer[disabled]:hover{
  background:var(--kort);color:var(--ink);
}
.knap.fare:disabled,.knap.fare[disabled],
.knap.fare:disabled:hover,.knap.fare[disabled]:hover{
  background:var(--roed);color:var(--knap-fare-ink);
}

/* ------------------------------------------------------------
   9 · MÆRKER (badges) — hårfin kant i egen farve giver dem kontur
   uden at de råber op
   ------------------------------------------------------------ */
.maerke{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px var(--r-2);border-radius:99px;
  font-size:var(--t-s);font-weight:600;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  border:1px solid color-mix(in srgb,currentColor 18%,transparent);
}
.maerke::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor;opacity:.75}
.m-groen{background:var(--groen-svag);color:var(--groen)}
.m-roed{background:var(--roed-svag);color:var(--roed)}
.m-gul{background:var(--gul-svag);color:var(--gul)}
/* 🔴 M22 · FJERDE MAERKE-FARVE, FLYTTET OP FRA admin/templates/base.html:70.
   Den fandtes KUN i admin-fladens egen <style>, saa kundens flade kunne
   ikke bruge «i brug»-maerket paa sit afsendernavn — og maaleren i
   tests/test_mobil.py fangede det praecis dér: en klasse uden en regel.
   ⚠️ Reglen er den SAMME som admins, saa de to flader ikke faar hver sin
   blaa. Admins egen linje staar uroert; den er nu en gentagelse og ikke
   en anden farve. */
.m-blaa{background:var(--acc-svag);color:var(--acc)}
.m-graa{background:var(--bg-dyb);color:var(--ink2)}
.m-graa::before{display:none}

/* ------------------------------------------------------------
   10 · BESKEDER — fejl og advarsel skal kunne skelnes
        på et halvt sekund: farve + kant + eget ikon.
        Ankomsten glider ind: en besked der VISER SIG, er nyheden.
   ------------------------------------------------------------ */
.besked{
  position:relative;
  padding:var(--r-3) var(--r-4) var(--r-3) var(--r-12);
  border-radius:var(--radius-lille);
  margin-bottom:var(--r-4);font-size:var(--t-m);line-height:1.55;
  border:1px solid transparent;
  animation:dukop .3s var(--kurve-blod) both;
}
.besked::before{
  position:absolute;left:var(--r-4);top:var(--r-3);
  width:19px;height:19px;border-radius:99px;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-s);font-weight:800;line-height:19px;text-align:center;
}
.b-ok{background:var(--groen-svag);color:var(--groen);border-color:color-mix(in srgb,var(--groen) 25%,transparent)}
.b-ok::before{content:"✓";background:var(--groen);color:var(--kort)}
/* FEJL = stop. Massiv venstrekant, kryds i cirkel. */
.b-fejl{
  background:var(--roed-svag);color:var(--roed);
  border-color:var(--roed-linje);
  border-left:4px solid var(--roed);
  /* den tykke kant aeder 3 px af polstringen — ikonet og teksten skal
     staa samme sted som i de andre beskeder */
  padding-left:calc(var(--r-12) - 3px);
}
.b-fejl::before{content:"✕";background:var(--roed);color:var(--kort);left:calc(var(--r-4) - 3px)}
/* .smaa og .und i en besked arver beskedens farve — --ink2 paa --roed-svag
   holdt ikke 4,5:1 (axe paa /paamindelser, fejlet paamindelse med grund). */
.besked .smaa,.besked .und{color:inherit}
/* ADVARSEL = bemærk. Blødere gul flade, udråbstegn i omrids. */
.b-adv{background:var(--gul-svag);color:var(--gul);border-color:var(--gul-linje)}
.b-adv::before{
  content:"!";background:transparent;color:var(--gul);
  border:2px solid var(--gul);width:17px;height:17px;line-height:15px;
}
.besked strong{font-weight:700}
.besked .mono{font-size:var(--t-s)}

/* ------------------------------------------------------------
   10b · ATTRAP-STRIBEN (M33)
        En attrap der ikke kan skelnes fra den ægte, er en løgn
        om at der blev sendt. Striben ligger ØVERST og over hele
        bredden — ikke som en besked i en kolonne — fordi den
        gælder hele fladen og ikke den side man tilfældigvis står
        på. Gul og ikke rød: der er intet i stykker, der er bare
        ikke nogen der får en SMS.
   ------------------------------------------------------------ */
.attrap-stribe{
  background:var(--gul-svag);color:var(--gul);
  border-bottom:1px solid var(--gul-linje);
  padding:var(--r-2) var(--r-5);font-size:var(--t-m);line-height:1.5;
  display:flex;gap:var(--r-2);align-items:baseline;flex-wrap:wrap;
}
.attrap-stribe strong{font-weight:700;letter-spacing:.02em}
.attrap-stribe .attrap-grund{color:var(--ink2);font-size:var(--t-s)}

/* ------------------------------------------------------------
   11 · SMÅTING
   ------------------------------------------------------------ */
.smaa{font-size:var(--t-m);color:var(--ink2)}
.mono{font-family:var(--skrift-mono);font-size:var(--t-s);font-variant-numeric:tabular-nums}
/* 🔴 F7 · --ink2, IKKE --ink3. Maalt af GPT-6 Astra 10-09-2026 paa
   faktiske elementer med ikke-nul boks, og efterproevet 11-09:
       .hjaelp paa --ink3   lyst 3,098:1   moerkt 3,604:1
       .hjaelp paa --ink2   lyst 5,982:1   moerkt 6,888:1
   Maalet er mindst 4,5:1 for saa lille tekst. Hjaelpen forklarer
   AFSENDELSESVILKAAR — hvad der taeller som et segment, hvad kvoten er —
   saa den er ikke pynt man kan springe over.
   ⚠️ Den svageste tone er ikke afskaffet: den er reserveret til mindre
   betydningsfuld metadata (placeholders, tomme tilstande). En tone der
   bruges til ALT er ikke et hierarki. */
.hjaelp{font-size:var(--t-s);color:var(--ink2);margin:6px 0 0;line-height:1.5}
.handling-rk{display:flex;gap:var(--r-3);align-items:center;flex-wrap:wrap}

/* den tomme tilstand er komponeret, ikke bare fraværende:
   et stille, stiplet felt med en prik — «her kommer noget til at bo» */
.tom{text-align:center;padding:var(--r-12) var(--r-6) 56px;color:var(--ink3)}
.tom::before{
  content:"";display:block;width:46px;height:46px;margin:0 auto var(--r-4);
  border:1.5px dashed var(--linje-staerk);border-radius:var(--radius);
  background:radial-gradient(circle at 50% 50%,var(--linje-staerk) 0 3px,transparent 3.5px);
}
.tom a{font-weight:600}

/* rullelister og tabeller får en diskret, tematiseret rullebjælke */
.rulleliste,.tabel-rul{scrollbar-width:thin;scrollbar-color:var(--linje-staerk) transparent}
.rulleliste::-webkit-scrollbar,.tabel-rul::-webkit-scrollbar{width:8px;height:8px}
.rulleliste::-webkit-scrollbar-thumb,.tabel-rul::-webkit-scrollbar-thumb{
  background:var(--linje-staerk);border-radius:99px;
}
.rulleliste::-webkit-scrollbar-track,.tabel-rul::-webkit-scrollbar-track{background:transparent}

/* ------------------------------------------------------------
   12 · LOGIN — lag 3: kortet svæver, og et stille lysfald i
   accentens tone giver rummet dybde uden at forstyrre.
   ------------------------------------------------------------ */
.login-flade{max-width:392px;margin:9vh auto 0;padding:0 4px;position:relative}
.login-flade::before{
  content:"";position:fixed;inset:0 0 55%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0,
    color-mix(in srgb,var(--acc) 7%,transparent),transparent 70%);
}
.login-mrk{text-align:center;margin-bottom:var(--r-6)}
.login-mrk .mrk-stor{
  font-size:var(--t-3xl);font-weight:750;letter-spacing:-.03em;
  display:inline-flex;align-items:center;gap:var(--r-3);
}
.login-mrk .mrk-stor::before{
  content:"";width:12px;height:12px;border-radius:4px;
  background:var(--acc);box-shadow:0 0 0 5px var(--acc-svag);
}
.login-mrk .mrk-stor span{color:var(--acc)}
.login-mrk .mrk-symbol{border-radius:var(--radius-lille)}
.login-mrk p{margin:var(--r-2) 0 0;color:var(--ink2)}
.login-flade .kort{padding:var(--r-6);box-shadow:var(--skygge-loft)}
.login-fod{text-align:center;margin-top:var(--r-4)}
.login-fod a{color:var(--ink2);font-size:var(--t-m)}  /* S38 · TG-9: --ink3 gav 3,88:1 paa lysfaldet */
/* S91 · M2: adgangskoden som noedvej under «Log ind med Forta». */
.login-lokalt{margin-top:var(--r-4)}
.login-lokalt summary{cursor:pointer;color:var(--ink2);font-size:var(--t-m);text-align:center}
.login-lokalt form{margin-top:var(--r-3)}

/* ------------------------------------------------------------
   13 · SEND — to spor: beskeden og modtagerne
   ------------------------------------------------------------ */
.send-net{display:flex;gap:var(--r-4);align-items:flex-start;flex-wrap:wrap}
.send-besked{flex:1.35;min-width:320px}
.send-side{flex:1;min-width:270px}
@media (max-width:700px){
  .send-besked,.send-side{flex:1 1 100%;min-width:0}
}

/* live-måling under tekstfeltet — hver chip dukker op når målingen
   skifter: bevægelsen SIGER at tallet er regnet om */
.maal-vis{
  display:flex;flex-wrap:wrap;gap:6px var(--r-2);align-items:center;
  margin-top:var(--r-3);min-height:26px;
}
.maal-vis>*{animation:dukop .22s var(--kurve-blod) both}
.maal-vis .m-tal{
  display:inline-flex;align-items:baseline;gap:var(--r-1);
  background:var(--bg-dyb);border:1px solid var(--linje);
  border-radius:var(--radius-mini);padding:2px var(--r-2);
  font-size:var(--t-s);color:var(--ink2);
  font-variant-numeric:tabular-nums;
}
.maal-vis .m-tal strong{color:var(--ink);font-weight:700;font-size:var(--t-m);letter-spacing:-.01em}
.maal-vis .m-kode{
  display:inline-flex;align-items:center;
  background:var(--acc-svag);color:var(--acc);
  border-radius:var(--radius-mini);padding:2px var(--r-2);
  font-size:var(--t-xs);font-weight:660;letter-spacing:.05em;text-transform:uppercase;
}
.maal-vis .m-rest{font-size:var(--t-s);color:var(--ink3)}
.maal-vis .m-adv{
  flex-basis:100%;
  background:var(--gul-svag);color:var(--gul);
  border:1px solid var(--gul-linje);border-radius:var(--radius-mini);
  padding:var(--r-1) var(--r-3);font-size:var(--t-s);font-weight:520;
}

/* fyldet af det sidste segment under beskedfeltet — samme form som
   kvotemaaleren, for det ER samme udsagn: brugt af det man betaler for.
   Baaren bor i skabelonen og genbygges ikke, saa bredden GLIDER. */
.seg-maaler{margin-top:var(--r-3);height:6px}

.rulleliste{max-height:216px;overflow:auto;margin-top:var(--r-1)}

/* ------------------------------------------------------------
   14 · FORHÅNDSVISNING — produktets vigtigste øjeblik.
        Regnestykket står som ét sammenhængende forløb:
        modtagere → segmenter der trækkes → kvote bagefter → prisen.
        Det svæver (lag 3), og KONKLUSIONEN — sidste trin — står
        i massiv accent: dét er tallet man betaler.
   ------------------------------------------------------------ */
.fv-hero{gap:0;align-items:stretch;margin-bottom:var(--r-5);
  border-radius:var(--radius-stor);
  border:1px solid var(--linje);
  box-shadow:var(--skygge-loft);
  overflow:hidden;background:var(--kort);
}
.fv-hero .kort{
  border:0;border-radius:0;box-shadow:none;margin:0;
  padding:var(--r-6);position:relative;
}
.fv-hero .kort+.kort{border-left:1px solid var(--linje)}
/* pil mellem trinnene — forløbet læses venstre mod højre */
.fv-hero .kort+.kort::before{
  content:"→";
  position:absolute;left:-13px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:99px;
  background:var(--kort);border:1px solid var(--linje);
  box-shadow:var(--skygge);
  color:var(--ink3);font-size:var(--t-m);font-weight:600;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
}
/* det trin der trækkes fra kvoten — fremhævet med et blidt accentfald */
.fv-traek{
  background:linear-gradient(180deg,var(--acc-svag),
    color-mix(in srgb,var(--acc-svag) 45%,var(--kort)));
}
.fv-traek .tal{color:var(--acc)}
.fv-traek .tal-und{color:var(--acc)}
/* 🔴 HER STOD TO STOERRELSER, OG DEN ENE VAR DOED. `.fv-traek .tal`
   sagde 38 px og `.fv-hero .tal` 34 px — samme specificitet, og heltens
   regel stod EFTER. Traekket ER et kort i helten, saa alle tre tal stod
   paa 34, og de 38 viste sig aldrig. Maalt i kaskaden 25-09-2026.
   Loeftet goer ikke det usete synligt uden oejne: de tre tal staar
   stadig ens, nu paa noegletallenes 32 (34 var et trin kun her).
   Traekket skilles ud af sin farve og sit accentfald, som foer. */
.fv-hero .tal{font-size:var(--t-4xl)}
.fv-hero .smaa{margin:var(--r-2) 0 0}
/* konklusionen — prisen i kroner — bærer massiv accent og lyser
   resten af forløbet op bagfra */
.fv-hero .kort:last-child{
  background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 92%,#fff),var(--acc-dyb));
}
.fv-hero .kort:last-child .tal,
.fv-hero .kort:last-child .tal-und{color:var(--knap-ink)}
.fv-hero .kort:last-child .smaa{color:color-mix(in srgb,var(--knap-ink) 72%,transparent)}
@media (prefers-color-scheme: dark){
  .fv-hero .kort:last-child{
    background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 90%,#fff),var(--acc-dyb));
  }
}
@media (max-width:760px){
  .fv-hero{display:block}
  .fv-hero .kort+.kort{border-left:0;border-top:1px solid var(--linje)}
  .fv-hero .kort+.kort::before{
    content:"↓";left:24px;top:-13px;transform:none;
  }
}

/* beskedteksten vist som den ser ud hos modtageren */
.sms-boble{
  display:inline-block;
  background:var(--bg-dyb);border:1px solid var(--linje);
  border-radius:var(--radius-stor);border-top-left-radius:4px;
  padding:var(--r-2) var(--r-3);max-width:44ch;
  box-shadow:var(--skygge-fin);
  font-size:var(--t-m);line-height:1.5;color:var(--ink);
  white-space:pre-wrap;word-break:break-word;
}

/* handlingsbjælken — punktet uden fortrydelse. Den glider op
   nedefra: HER slutter fortrydelsesretten, og det skal mærkes. */
.fv-handling{
  position:sticky;bottom:0;z-index:15;
  margin-top:var(--r-5);
  background:var(--hoved-flade);
  -webkit-backdrop-filter:saturate(1.7) blur(16px);
  backdrop-filter:saturate(1.7) blur(16px);
  border:1px solid color-mix(in srgb,var(--acc) 22%,var(--linje));
  border-radius:var(--radius);
  box-shadow:var(--skygge-loft);
  padding:var(--r-3) var(--r-5);
  display:flex;gap:var(--r-3);align-items:center;flex-wrap:wrap;
  animation:dukop .4s var(--kurve-blod) both;
}
.fv-handling .smaa{margin-left:auto;color:var(--ink3)}
.fv-handling .fv-ingen{font-weight:600;color:var(--gul)}
@media (max-width:600px){
  .fv-handling{position:static}
  .fv-handling .knap{width:100%}
  .fv-handling .smaa{margin-left:0}
}

/* ------------------------------------------------------------
   15 · BEVÆGELSE — én betydning pr. bevægelse:
        dukop   = «dette er nyt / lige regnet om»
        glid    = «værdien flyttede sig» (måleren)
        løft    = «dette kan trykkes» (knapper)
        Slukkes for dem der har bedt om ro.
   ------------------------------------------------------------ */
@keyframes dukop{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}

/* ------------------------------------------------------------
   16 · VÆRKTØJSLINJE — søgning og handlinger over en liste
   ------------------------------------------------------------ */
.vaerktoej{display:flex;gap:var(--r-3);align-items:center;flex-wrap:wrap}
.vaerktoej .soeg{display:flex;gap:var(--r-2);flex:1;min-width:260px}
.vaerktoej .fyld{flex:1}

/* ------------------------------------------------------------
   17 · FANER — statusfiltre som rolige piller.
   Aktiv-tilstanden bæres af skabelonens eksisterende inline
   font-weight:700 — udtrykket er fredet, så CSS'en læser det
   som signal i stedet for at kræve en ny klasse.
   ------------------------------------------------------------ */
.fane{
  display:inline-flex;align-items:center;gap:var(--r-2);
  padding:var(--r-2) var(--r-4);border-radius:99px;
  border:1px solid var(--linje-staerk);background:var(--kort);
  color:var(--ink2);font-size:var(--t-m);font-weight:520;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  box-shadow:var(--skygge-fin);
  transition:background var(--fart) var(--kurve),color var(--fart) var(--kurve),
             border-color var(--fart) var(--kurve),box-shadow var(--fart) var(--kurve);
}
.fane:hover{background:var(--bg-dyb);color:var(--ink);text-decoration:none}
.fane[style*="font-weight:700"]{
  background:var(--acc-svag);border-color:var(--acc);color:var(--acc);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 18%,transparent);
}
/* fanen er en pille — det globale omrids med 4 px hjoerner tegnede en
   firkant rundt om en rund form. Ringen foelger formen. */
.fane:focus-visible{outline:none;box-shadow:var(--fokus-ring)}

/* ------------------------------------------------------------
   18 · TRIN — importens forløb: fil → tørkørsel → gennemført
   ------------------------------------------------------------ */
.trin-rk{display:flex;align-items:center;gap:var(--r-3);margin:0 0 var(--r-6);flex-wrap:wrap}
.trin{
  display:inline-flex;align-items:center;gap:var(--r-2);
  font-size:var(--t-m);font-weight:520;color:var(--ink3);white-space:nowrap;
}
.trin i{
  font-style:normal;width:22px;height:22px;border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--t-xs);font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--bg-dyb);border:1px solid var(--linje-staerk);color:var(--ink3);
  transition:background var(--fart) var(--kurve),color var(--fart) var(--kurve),
             border-color var(--fart) var(--kurve);
}
.trin.aktiv{color:var(--ink);font-weight:650}
.trin.aktiv i{background:var(--acc);border-color:var(--acc);color:var(--knap-ink);
  box-shadow:0 0 0 4px var(--acc-svag)}
.trin.ovre{color:var(--ink2)}
.trin.ovre i{background:var(--groen-svag);border-color:transparent;color:var(--groen)}
.trin-pil{color:var(--linje-staerk);font-size:var(--t-m);user-select:none}

/* ------------------------------------------------------------
   19 · PRIKKER OG FREMHÆVET KORT — to tal må ikke ligne ét.
   Prikken farvelægger ETIKETTEN (sendt/fejlet), ikke tallet,
   så et nul ikke råber op.
   ------------------------------------------------------------ */
.prik{
  display:inline-block;width:7px;height:7px;border-radius:99px;
  background:var(--ink3);margin-right:var(--r-1);vertical-align:1px;
}
.prik-groen{background:var(--groen)}
.prik-roed{background:var(--roed)}
.prik-gul{background:var(--gul)}

.kort.fremhaev{
  background:linear-gradient(180deg,var(--acc-svag),
    color-mix(in srgb,var(--acc-svag) 55%,var(--kort)));
  border-color:color-mix(in srgb,var(--acc) 30%,transparent);
}
.kort.fremhaev .tal{color:var(--acc)}
.kort.fremhaev .tal-und{color:var(--acc)}

/* ------------------------------------------------------------
   20 · TABELKORT MED EGET HOVED — overskrift og forklaring
   inde i kortet, tabellen kant til kant nedenunder
   ------------------------------------------------------------ */
.tabel-kort .tabel-hoved{padding:var(--r-4) var(--r-4) var(--r-3)}
.tabel-kort .tabel-hoved h2{margin:0 0 4px}
.tabel-kort .tabel-hoved .smaa{padding:0;margin:0}

/* ------------------------------------------------------------
   21 · FILFELT — importens første trin
   ------------------------------------------------------------ */
input[type="file"]{
  padding:var(--r-2);border-style:dashed;background:var(--bg-dyb);cursor:pointer;
}
input[type="file"]:hover{border-color:var(--acc)}
input[type="file"]::file-selector-button{
  font:inherit;font-size:var(--t-m);font-weight:600;
  border:1px solid var(--linje-staerk);border-radius:var(--radius-mini);
  background:var(--kort);color:var(--ink);
  padding:6px var(--r-3);margin-right:var(--r-3);cursor:pointer;
}

/* ------------------------------------------------------------
   22 · BEKRÆFTELSESBOKS — operatør-felter kræver et bevidst ja.
   Gul som advarslen den hører til, men en HANDLING, ikke en tekst.
   ------------------------------------------------------------ */
.bekraeft-boks{
  background:var(--gul-svag);border:1px solid var(--gul-linje);
  border-radius:var(--radius-lille);padding:var(--r-3) var(--r-4);
}
.bekraeft-boks label{
  display:flex;gap:var(--r-2);align-items:flex-start;
  font-weight:600;margin:0;color:var(--gul);cursor:pointer;
}
.bekraeft-boks input[type="checkbox"]{margin-top:var(--r-1)}

/* panel der følger med under rul — live-målingen ved siden af feltet.
   Det er løftet ét lag: det FØLGER dig, så det står en anelse over. */
.klaeb{position:sticky;top:74px}
.kort.klaeb{box-shadow:var(--skygge-mellem)}
@media (max-width:700px){.klaeb{position:static}}

/* ------------------------------------------------------------
   23 · INFO-BESKED — en rolig ventetilstand eller oplysning.
   Neutral og stille: hverken fejl (rød/stop) eller advarsel (gul/
   bemærk). Bruges hvor tilstanden er NORMAL og bare skal siges.
   🔴 S30 · FLADEN ER NEUTRAL, IKKE ACCENTEN. Med rosa som accent laa
   --acc-svag 4,2 (lys) / 2,9 (moerk) ΔE00 fra --roed-svag — en info
   lignede en fejl paa fladen. Kun «i»'et baerer produktfarven.
   ⚠️ Hvorfor --linje-staerk og ikke --bg-dyb: maalt 17-10-2026 giver
   --bg-dyb, --bg, --kort og --linje 7,4-8,6 ΔE00 mod --roed-svag i lys
   tilstand (en bleg graa og en bleg rosa ligger altid taet). Kun
   --linje-staerk naar gulvet 10 (10,9 / 13,3). Paa den flade naar
   --ink2 kun 4,18:1, saa teksten er --ink (12,51 / 9,52).
   Holdt fast i tests/test_vaern_produktfarve.py.
   ------------------------------------------------------------ */
.b-info{
  background:var(--linje-staerk);color:var(--ink);
  border-color:var(--linje-staerk);
}
.b-info::before{
  content:"i";background:transparent;color:var(--acc);
  border:2px solid var(--acc);width:17px;height:17px;line-height:15px;
  font-family:var(--skrift-mono);
}

/* ------------------------------------------------------------
   23b · PRIS-PANEL — «hvad koster det» som et roligt, indlagt
   felt under en formular. Fandtes foer som en .maaler (8 px hoej,
   overflow:hidden), saa hele indholdet var klippet vaek — prisen
   var altsaa USYNLIG, og det er produktets pointe at vise den.
   ------------------------------------------------------------ */
.pris-panel{
  margin-top:var(--r-4);
  padding:var(--r-4);
  background:color-mix(in srgb,var(--bg-dyb) 60%,var(--kort));
  border:1px solid var(--linje);
  border-radius:var(--radius-lille);
}
.pris-panel .tal-und{margin-bottom:0}

/* ============================================================
   23c · SIDERNE — DA2, 26-09-2026
   Designsystemet (tokens, skala, kontrast, fokus) er DA1's. Her er
   SIDERNES form: skal, navigation, tabeller, tomme tilstande,
   handlingsraekker. Kun tokens; ingen raa farver, ingen px uden for
   skalaen (drift/maal_design.py). Afsnittet staar FOER mobilafsnittet
   med vilje: 24.x skal stadig vinde paa telefonen, og et andet spor
   retter dér samtidig — saa de to diffs roerer hver sit sted.
   Foer/efter-billeder: udkast/da2/foer og udkast/da2/opus.
   ============================================================ */
:root{
  --sidebjaelke:248px;        /* kundefladens venstre kolonne, >=1100 px */
  /* 🔴 SIDEBJAELKENS PUNKTER ER 36 PX — UNDER 44-GULVET, MED VILJE.
     21 punkter a 44 px + fire gruppeoverskrifter er ~1.240 px, og ved
     900 px skaermhoejde skulle man rulle i menuen for at naa «Log ud».
     44-gulvet i 24.1 gaelder tommelen (nav a kun <=760 px); her er det en
     mus. WCAG 2.5.8 (AA) kraever 24 px. Vil man have 44 ogsaa her, er
     det dette ene tal — og prisen er en menu der ruller. */
  --sidepunkt:36px;
}

/* ------------------------------------------------------------
   23c.1 · KUNDEFLADENS SKAL — navigationen som sidebjaelke
   MAALT i «foer»-billederne ved 1440 px: 21 menupunkter i to
   vandrette raekker, 120 px topbjaelke FOER sidens overskrift, og
   et hul paa 20 px mellem raekkerne (headerens `gap` gaelder ogsaa
   mellem ombrudte linjer). Paa en bred skaerm er hoejden det knappe
   og bredden det rigelige — saa menuen flytter ud i en kolonne, hvor
   de fire grupper staar som det de er: overskrifter med punkter
   under. Under 1100 px staar topbjaelken som foer.
   F7b (02-10-2026): menuen er nu 9 punkter, og raekke to baerer KUN
   den aktive gruppes faner — se tenant/templates/base.html.
   ------------------------------------------------------------ */
@media (min-width:761px) and (max-width:1099px){
  header{row-gap:0}             /* hullet mellem de to menuraekker */
}
@media (min-width:1100px){
  /* Kolonnen er OGSAA malet paa body: den faste bjaelke er kun et
     vindue hoej, og i et fuldsidebillede (og under en lang side der
     rulles forbi med et tastatur) skal kolonnen fortsaette ned. */
  body.med-sidebjaelke{
    padding-left:var(--sidebjaelke);
    /* baggrundsFARVEN staar for sig: en kontrastmaaler der laeser
       background-color, skal stadig finde grundfladen under teksten */
    background:var(--bg) linear-gradient(to right,var(--kort) calc(var(--sidebjaelke) - 1px),
      var(--linje) 0 var(--sidebjaelke),var(--bg) 0);
  }
  .med-sidebjaelke header{
    position:fixed;top:0;bottom:0;left:0;width:var(--sidebjaelke);
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;
    padding:var(--r-4) var(--r-3);
    background:var(--kort);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom:0;border-right:1px solid var(--linje);
    overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--linje-staerk) transparent;
  }
  .med-sidebjaelke .mrk{padding:var(--r-1) var(--r-3) var(--r-5)}
  .med-sidebjaelke header nav{
    flex:none;flex-direction:column;flex-wrap:nowrap;gap:2px;
    overflow:visible;margin:0;padding:0;border:0;
  }
  .med-sidebjaelke header nav a{
    display:flex;align-items:center;gap:var(--r-3);
    padding:6px var(--r-3);min-height:var(--sidepunkt);
    border-bottom:0;border-radius:var(--radius-lille);
    font-size:var(--t-m);font-weight:540;color:var(--ink2);
    transition:background var(--fart) var(--kurve),color var(--fart) var(--kurve);
  }
  .med-sidebjaelke header nav a::before{
    content:"";width:18px;height:18px;flex:none;
    background:currentColor;opacity:.8;
    -webkit-mask:var(--ikon) center/contain no-repeat;
    mask:var(--ikon) center/contain no-repeat;
  }
  .med-sidebjaelke header nav a:hover{background:var(--bg-dyb);color:var(--ink)}
  .med-sidebjaelke header nav a.aktiv{
    background:var(--acc-svag);color:var(--acc);font-weight:640;
  }
  .med-sidebjaelke header nav a.aktiv::before{opacity:1}
  .med-sidebjaelke header nav a:focus-visible{outline:none;box-shadow:var(--fokus-ring)}
  /* de fire grupper: etiketten bliver en overskrift over sine punkter */
  .med-sidebjaelke .nav-sekundaer{margin-top:var(--r-2)}
  .med-sidebjaelke .nav-gruppe{flex-direction:column;align-items:stretch;gap:2px}
  .med-sidebjaelke .nav-gruppe+.nav-gruppe{margin-left:0;padding-left:0;border-left:0}
  .med-sidebjaelke .nav-etiket{
    font-size:var(--t-xs);margin:var(--r-4) 0 var(--r-1);padding:0 var(--r-3);
  }
  /* brugeren og «Log ud» nederst — der hvor man leder efter dem */
  .med-sidebjaelke .hoejre{
    order:3;margin-top:auto;padding:var(--r-4) var(--r-3) var(--r-1);
    border-top:1px solid var(--linje);
    justify-content:space-between;white-space:normal;
  }
  .med-sidebjaelke .hoejre-id{text-align:left;min-width:0}
  .med-sidebjaelke .hoejre-id span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* S38 · TG-15 (WCAG 1.4.12): navnet brydes om i stedet for at klippes —
     med oeget tekstafstand stod det som «…» og ingen andre steder. */
  .med-sidebjaelke .hoejre-id strong{overflow-wrap:anywhere}
  .med-sidebjaelke .hoejre a,
  .med-sidebjaelke .hoejre .logud-knap{
    display:inline-flex;align-items:center;gap:6px;
    padding:var(--r-2);border-radius:var(--radius-lille);min-height:40px;
  }
  .med-sidebjaelke .hoejre a::before,
  .med-sidebjaelke .hoejre .logud-knap::before{
    content:"";width:16px;height:16px;flex:none;background:currentColor;
    -webkit-mask:var(--ikon) center/contain no-repeat;
    mask:var(--ikon) center/contain no-repeat;
  }
  .med-sidebjaelke .hoejre a:hover,
  .med-sidebjaelke .hoejre .logud-knap:hover{background:var(--bg-dyb)}
  /* der er ingen topbjaelke at klaebe under laengere */
  .med-sidebjaelke .klaeb{top:var(--r-6)}
  /* demostriben hoerer til indholdet, ikke til menuen */
  .med-sidebjaelke .attrap-stribe{padding:var(--r-2) var(--r-8)}
  .med-sidebjaelke main{padding-top:var(--r-8)}
}
/* TELEFONEN. `.nav-primaer{flex:1 0 100%}` stod ogsaa her (DA2 fandt
   samme fejl som N5); mobilsporets regel i 24.3 er nu den ene. */
@media (max-width:760px){
  /* «Log ud» var 21 px hoej ved 390 px (drift/maal_sider.py) — det eneste
     punkt i topbjaelken under 44-gulvet fra 24.1 */
  .hoejre a,.hoejre .logud-knap{display:inline-flex;align-items:center;min-height:44px}
  /* to mere fra samme maaling: «Tilfoej en bruger» (summary, 20 px) og
     «Ogsaa hele loerdag og soendag» (en etiket om en afkrydsning, 23 px) */
  summary{padding:var(--r-3) 0}
  label:has(>input[type="checkbox"]){display:flex;align-items:center;gap:var(--r-2);min-height:44px}
  /* Astras sektionslinks («Alle udsendelser →») var 21 px hoeje */
  .da2-sektionshoved>a{display:inline-flex;align-items:center;min-height:44px}
  /* OB1 · husets navn paa /admin/husapi er et link til kunden (24 px) */
  .da2-afsnit-hoved h2>a{display:inline-flex;align-items:center;min-height:44px}
}
/* importens trin: pilen stod i --linje-staerk (1,31:1 lys / 1,67:1 moerk)
   og trinnets tal i --ink3 paa --bg-dyb (4,28:1). Pilen er tekst, og
   tallet ER trinnet — begge skal kunne laeses. */
.trin-pil{color:var(--ink3)}
.trin i{color:var(--ink2)}

/* ikonerne — ét pr. menupunkt, tegnet som maske i tekstens farve, saa
   lys, moerk og aktiv foelger af sig selv. Streg, ingen fyld. */
.med-sidebjaelke header a[href="/"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7v7H4zM13 4h7v4h-7zM13 10h7v10h-7zM4 13h7v7H4z'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/hurtig"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 14h6l-1 7 8-11h-6l1-7z'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/send"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L10 14M21 3l-7 18-4-7-7-4z'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/indbakke"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/udsendelser"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/kartotek"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18H6zM10 3v18M13 8h3M13 12h3'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/skabeloner"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6zM14 3v5h5M9 13h7M9 17h5'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/grupper"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM2.5 20c0-3.5 3-5.5 6.5-5.5s6.5 2 6.5 5.5M16 4.5a3.5 3.5 0 0 1 0 6.5M18 14.8c2 .6 3.5 2.3 3.5 5.2'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/dyngrupper"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 8v6l-4 2v-8z'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/paamindelser"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16v-5a6 6 0 1 1 12 0v5l2 2H4zM10 21h4'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/hul"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v14H4zM4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/jobslut"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM8 12l3 3 5-6'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/log"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/advarsler"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3zM12 10v4M12 17h.01'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/forbrug"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20v-6M11 20V8M17 20V4M3 20h18'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/effekt"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/abtest"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h8v14H3zM13 5h8v14h-8z'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/indsigt"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.8.8 1 1.5 1 2.5h6c0-1 .2-1.7 1-2.5A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/links"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/brugere"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/indstillinger"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1M15 4v4M9 10v4M17 16v4'/%3E%3C/svg%3E")}
/* S38 · TG-12: de tre punkter tegnedes som en graa firkant uden --ikon */
.med-sidebjaelke header a[href="/kalender"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v14H4zM4 10h16M8 3v4M16 3v4M8 14h.01M12 14h.01M16 14h.01M8 17h.01M12 17h.01'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/economic"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/integrationer"]{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v5M15 3v5M7 8h10v3a5 5 0 0 1-10 0zM12 16v5'/%3E%3C/svg%3E")}
.med-sidebjaelke header a[href="/logud"],
.med-sidebjaelke header .logud-knap{--ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4v16h-4M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E")}
/* ------------------------------------------------------------
   23c.2 · TABELLER — raekkerne var dobbelt saa hoeje som indholdet
   🔴 `.tabel-kort .smaa` (afsnit 4) er skrevet til noten UNDER en
   tabel — men den rammer OGSAA hver `.smaa` INDE i en celle.
   Maalt i «foer»-billederne: kundenummeret under et navn i kartoteket
   stod rykket 16 px ind med 12 px luft over og under, og hver raekke
   blev ~88 px hoej. Kun cellerne rettes; noten beholder sin polstring.
   ------------------------------------------------------------ */
.tabel-kort td .smaa:not(input,select,textarea,summary){padding:0}
.tabel-kort td div.smaa{margin-top:2px}
@media (min-width:761px){
  th:first-child,td:first-child{padding-left:var(--r-5)}
  th:last-child,td:last-child{padding-right:var(--r-5)}
}
td a:not(.knap){font-weight:560}
/* en formular i en celle staar paa én linje: felt og knap side om
   side, ikke knappen under feltet (superadminens afsender-ID'er) */
td form{display:flex;flex-wrap:wrap;gap:var(--r-2);align-items:center}
td form+form{margin-top:var(--r-2)}
td form input:not([type="hidden"]):not([type="checkbox"]){flex:1 1 180px;min-width:0}
td[style*="text-align:right"] form,.kol-handling form{justify-content:flex-end}

/* ------------------------------------------------------------
   23c.3 · HANDLINGSRAEKKER — knapper er ikke indhold
   En raekke knapper i et hvidt kort ligner en boks med indhold. Uden
   kortet laeses den som det den er: sidens vaerktoejslinje.
   ------------------------------------------------------------ */
.kort.handling-rk{
  background:transparent;border:0;box-shadow:none;padding:0;
  margin:var(--r-1) 0 var(--r-6);
}

/* ------------------------------------------------------------
   23c.4 · TOMME TILSTANDE — komponeret, men ikke en halv skaerm
   Maalt i «foer»-billederne: superadminens kundeside havde tre tomme
   kort paa hver ~190 px, og «Revision: Intet registreret.» fyldte
   mere end tabellen med indhold over den.
   ------------------------------------------------------------ */
.kort.tom,.kort .tom{padding:var(--r-6) var(--r-6) var(--r-8)}
.tom::before{
  width:40px;height:40px;margin-bottom:var(--r-3);
  border:0;border-radius:99px;
  background:
    radial-gradient(circle at 50% 50%,var(--acc) 0 3px,transparent 3.5px),
    var(--acc-svag);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--acc-svag) 50%,transparent);
}
.tom{color:var(--ink2)}

/* ------------------------------------------------------------
   23c.5 · NOEGLETAL — kortene paa oversigten
   ------------------------------------------------------------ */
.raek>.kort{display:flex;flex-direction:column}
.raek>.kort .tal-und{display:flex;align-items:center;gap:var(--r-2)}
.raek>.kort .tal-und:not(:has(.prik))::before{
  content:"";width:6px;height:6px;border-radius:99px;background:var(--acc);flex:none;
}
.raek>.kort.fremhaev .tal-und::before{box-shadow:0 0 0 3px var(--acc-svag)}

/* ------------------------------------------------------------
   23c.6 · SIDEHOVED OG SEKTIONER
   ------------------------------------------------------------ */
.side-hoved{padding-bottom:var(--r-2)}
main>h2{display:flex;align-items:center;gap:var(--r-2)}
.kort>h2:first-child{font-size:var(--t-l)}

/* ------------------------------------------------------------
   23c.7 · SUPERADMIN — den moerke topbjaelke beholdes (signaturen),
   rollemaerket stod klistret til bjaelkens overkant.
   ------------------------------------------------------------ */
header>.rolle{align-self:center}

/* ============================================================
   24 · MOBIL — fladen betjent med tommelen fra en bil
   ------------------------------------------------------------
   Køberen står i en varevogn med handsker på. Alt herunder er
   TILFØJELSER; ingen klasse ovenfor er fjernet eller omdøbt,
   fordi 17 skabeloner jeg ikke rører arver dem.

   Tre valg der bærer resten:
     · 44 px er gulvet for alt der kan trykkes — også når en
       skabelon har sat en lille inline-padding.
     · 16 px er gulvet for skriftstørrelsen i felter: under det
       ZOOMER iOS ind ved fokus, og så flytter hele siden sig.
     · Brede tabeller ruller i .tabel-rul — aldrig body.
   ============================================================ */

/* ------------------------------------------------------------
   24.1 · TRYKFLADER — gulvet på 44 px
   min-height, ikke height: en skabelons egen padding må gerne
   gøre knappen større, aldrig mindre.
   ------------------------------------------------------------ */
.knap,.fane{min-height:44px}
.knap,.fane,nav a,.valg-rk,label,summary{
  touch-action:manipulation;                /* ingen 300 ms tap-forsinkelse */
  -webkit-tap-highlight-color:var(--acc-ring);
}
input,select{min-height:44px}
input[type="checkbox"],input[type="radio"]{min-height:0}
input[type="file"]{min-height:48px}
.valg-rk{min-height:44px}

/* ------------------------------------------------------------
   24.2 · FELTER — 16 px er ikke en smagssag
   Safari på iOS zoomer ind på et felt med skrift under 16 px og
   efterlader siden forskudt. Det ligner vandret rul og er det.
   ------------------------------------------------------------ */
@media (max-width:760px){
  input,select,textarea{font-size:16px}
  textarea{line-height:1.55}
  label{font-size:var(--t-grund)}
  .valg-rk{font-size:var(--t-grund);padding:var(--r-2)}
  .valg-rk input[type="checkbox"],
  .valg-rk input[type="radio"]{width:20px;height:20px;flex:none}
  /* 🔴 N5 · MAALT 26-09-2026 i en browser: kartotekets nummerfelter
     (input.mono) stod paa 12,5 px. `.mono` er en KLASSE og slaar
     `input` (et typenavn) paa specificitet, uanset raekkefoelgen. Gulvet
     skal derfor naevne klassen — og vaernet maaler det gengivne tal. */
  .mono:is(input,select,textarea){font-size:16px}
}

/* ------------------------------------------------------------
   24.2b · TRYKFLADER DER IKKE ER KNAPPER — maalt, ikke antaget
   N5 26-09-2026, drift/maal_mobil.py paa 390 px: 60 af 60 sider
   havde mindst én trykflade under 44 px. «Log ud» (44x21) paa
   hver side; tilbage-linket (19 px hoejt); hvert navn, nummer og
   gruppenavn i en tabel (15-36 px); afkrydsninger i tabelceller
   (13x13). Reglen i 24.1 daekkede .knap og felter — ikke links.
   ------------------------------------------------------------ */
.celle-valg{cursor:pointer}
.celle-valg input{width:auto}
@media (max-width:760px){
  /* .tilbage og ikke `.und a`: et link midt i en saetning (hul_kaploeb's
     «modsat Svar, hvor …») er loebende tekst og skal blive i linjen */
  .hoejre a,
  .hoejre .logud-knap,
  .tilbage,
  .login-fod a,
  td a:not(.knap){
    display:inline-flex;align-items:center;min-height:44px;
  }
  /* et kort ord («Svar», 32 px bredt) er lige saa svaert at ramme som
     en lav linje — bredden faar samme gulv */
  td a:not(.knap){min-width:44px}
  /* afkrydsning/radio i en celle: etiketten ER trykfladen */
  .celle-valg{
    display:flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;margin:calc(-1 * var(--r-3)) auto;
    cursor:pointer;
  }
  .celle-valg input{width:20px;height:20px;margin:0}
  /* en etiket der baerer sin egen afkrydsning (fx «Også hele lørdag og
     søndag») — hele raekken skal kunne rammes */
  label:has(>input[type="checkbox"],>input[type="radio"]){min-height:44px}
}

/* ------------------------------------------------------------
   24.3 · TOPBJÆLKE — navigationen på sin egen række
   Femten punkter, mærket og brugernavnet kan ikke dele én række
   på 360 px. Mærke + bruger står øverst, navigationen ruller
   vandret nedenunder — i sit EGET spor, ikke i body's.
   ------------------------------------------------------------ */
@media (max-width:760px){
  /* sidekanten er 16 px (var 14): samme tal som kortets polstring paa
     mobil, saa topbjaelkens tekst, menuen og kortenes indhold staar paa
     ÉN lodret linje. Menuens negative margen foelger med — de to tal
     er ét tal, og derfor er de ét token. */
  header{flex-wrap:wrap;gap:0 var(--r-3);padding:0 var(--r-4)}
  .mrk{padding:12px 0;font-size:var(--t-l)}
  .hoejre{margin-left:auto;gap:var(--r-3)}
  nav{
    order:5;flex:1 0 100%;width:100%;
    margin:0 calc(-1 * var(--r-4));padding:0 var(--r-4);
    border-top:1px solid var(--linje);
    gap:0;
  }
  /* 🔴 N5 · MAALT 26-09-2026 i en browser: `.nav-primaer{flex:1}` (afsnit 3)
     er en KLASSE og slog `nav{flex:1 0 100%}` her paa specificitet. Hoved-
     menuen stod som en 112 px strimmel til hoejre for «Log ud» paa 390 px
     — ét af syv punkter synligt. Samme mekanisme som input.mono i 24.2. */
  .nav-primaer{flex:1 0 100%}
  nav a{
    display:inline-flex;align-items:center;
    min-height:44px;padding:0 var(--r-3);font-size:var(--t-grund);
    border-bottom-width:3px;
  }
  /* det klæbende panel ligger under en topbjælke der nu er to rækker høj */
  .klaeb{position:static}
}

/* ------------------------------------------------------------
   24.4 · SIDEFLADEN — intet må tvinge vandret rul
   .raek's min-width:230px vælter først under ~420 px; tre
   skabeloner sætter desuden min-width i en style-attribut, og
   den kan KUN slås af med !important. Det er ikke pynt: 300 px
   plus 28 px sidepolstring er 328 og passer ikke i 320.
   ------------------------------------------------------------ */
@media (max-width:760px){
  main{padding:var(--r-5) var(--r-4) 96px}     /* plads under klæbende handlingsbjælker */
  .kort{padding:var(--r-4)}
  .raek{gap:var(--r-3)}
  h2{margin-top:var(--r-6)}
  .sms-boble{max-width:100%}
  table{font-size:var(--t-m)}
  th{padding:var(--r-2) var(--r-3)}
  td{padding:var(--r-3)}
}
/* 🔴 MIN-WIDTH:0 ALENE KLEMMER — DEN STAKKER IKKE. Maalt 18-09-2026 i en
   koerende app ved 393 px: forsidens fire noegletalskort stod SIDE OM SIDE
   som 82 px smalle soejler («32 af 2000 segmenter» brudt til ét ord pr.
   linje), fordi min-width:0 tillader flex at presse alle fire ind paa én
   raekke i stedet for at lade dem ombryde. Hensigten (intet vandret rul)
   var rigtig; virkningen var en ulaeselig forside paa praecis de skaerme
   reglen var skrevet til. Kortene skal STAKKE i fuld bredde — det er det
   ombrydningen ved 421-760 px allerede goer, bare fuldt ud. */
@media (max-width:420px){
  .raek>*{flex-basis:100%;min-width:0}
  .raek>*[style*="min-width"]{flex-basis:100%;min-width:0 !important}
  .vaerktoej .soeg{min-width:0}
}

/* ------------------------------------------------------------
   24.5 · VÆRKTØJSLINJE OG HANDLINGSRÆKKE
   Søgefeltet får hele bredden; knapper deler den næste række.
   Under 600 px står hver handling for sig — en fejlramt tommel
   må ikke kunne ramme «Importér» i stedet for «Ny kontakt».
   ------------------------------------------------------------ */
@media (max-width:760px){
  .vaerktoej{gap:var(--r-2)}
  .vaerktoej .soeg{flex:1 1 100%;min-width:0}
  .vaerktoej .soeg input{flex:1;min-width:0}
  .vaerktoej>.knap{flex:1 1 auto;justify-content:center}
}
@media (max-width:600px){
  .handling-rk>.knap{flex:1 1 100%}
  .vaerktoej>.knap{flex:1 1 100%}
}

/* ------------------------------------------------------------
   24.6 · BREDE TABELLER — rullet skal kunne SES
   Skyggerne i kanten dukker op når der er mere at hente og
   forsvinder når man er ude i enden. Uden dem ligner en
   afskåret kolonne en manglende kolonne.
   ------------------------------------------------------------ */
.tabel-rul{overscroll-behavior-x:contain}
@media (max-width:760px){
  .tabel-rul{
    background:
      linear-gradient(to right,var(--kort) 30%,color-mix(in srgb,var(--kort) 0%,transparent)),
      linear-gradient(to left,var(--kort) 30%,color-mix(in srgb,var(--kort) 0%,transparent)) 100% 0,
      radial-gradient(farthest-side at 0 50%,var(--rul-skygge),transparent),
      radial-gradient(farthest-side at 100% 50%,var(--rul-skygge),transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:34px 100%,34px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll;
  }
}

/* ------------------------------------------------------------
   24.7 · HURTIG BESKED — fladens egentlige pointe
   «Vi er på vej, fremme om 30 min» skal kunne sendes med én
   hånd, med handsker, uden at læse.

   🔴 Knapperne styles UAFHÆNGIGT af .knap/.sekundaer.
   Skabelonens JavaScript fjerner .knap fra de fravalgte
   (`x.classList.remove('knap')||x.classList.add('sekundaer')`),
   så en knap der hviler sin form på .knap står uden form efter
   det første tryk. Derfor bærer .hurtigknap hele sin egen form,
   og valgtilstanden læses på FRAVÆRET af .sekundaer — det er
   det eneste signal JavaScript'et sætter pålideligt.
   ------------------------------------------------------------ */
.hurtig-valg{
  display:grid;gap:var(--r-3);margin-top:var(--r-2);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.hurtigknap{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  width:100%;min-height:66px;
  padding:var(--r-3) 40px var(--r-3) var(--r-4);
  text-align:left;
  font:inherit;font-size:var(--t-grund);
  border:1px solid var(--linje-staerk);
  border-radius:var(--radius-lille);
  background:var(--kort);color:var(--ink);
  box-shadow:var(--skygge);
  cursor:pointer;
  -webkit-user-select:none;user-select:none;
  transition:background var(--fart) var(--kurve),border-color var(--fart) var(--kurve),
             box-shadow var(--fart) var(--kurve),transform var(--fart) var(--kurve);
}
.hurtigknap:hover,
.hurtigknap.sekundaer:hover{
  background:var(--bg-dyb);color:var(--ink);
  box-shadow:var(--skygge-mellem);transform:translateY(-1px);
}
.hurtigknap:active{transform:translateY(0)}
.hurtigknap.sekundaer{
  background:var(--kort);color:var(--ink);
  border-color:var(--linje-staerk);box-shadow:var(--skygge);
}
/* VALGT — den ene knap JavaScript'et har taget .sekundaer af */
.hurtigknap:not(.sekundaer),
.hurtigknap:not(.sekundaer):hover{
  background:var(--acc-svag);color:var(--ink);
  border-color:var(--acc);
  box-shadow:inset 0 0 0 1px var(--acc),var(--skygge-mellem);
}
.hurtigknap:not(.sekundaer)::after{
  content:"✓";
  position:absolute;top:50%;right:14px;transform:translateY(-50%);
  width:24px;height:24px;border-radius:99px;
  display:flex;align-items:center;justify-content:center;
  background:var(--acc);color:var(--knap-ink);
  font-size:var(--t-m);font-weight:800;line-height:1;
}
/* fokus paa en hurtig besked: samme ring som knapperne. Den VALGTE
   beholder sin indre accentkant indenfor ringen, saa «valgt» og «her er
   tastaturet» kan ses paa samme knap paa én gang. */
.hurtigknap:focus-visible{outline:none;box-shadow:var(--fokus-ring)}
.hurtigknap:not(.sekundaer):focus-visible{
  box-shadow:inset 0 0 0 1px var(--acc),var(--fokus-ring);
}
.hurtigknap .hk-navn{
  font-weight:700;font-size:var(--t-l);letter-spacing:-.012em;line-height:1.25;
}
.hurtigknap .hk-tekst{
  margin-top:var(--r-1);font-weight:400;color:var(--ink2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.hurtigknap:not(.sekundaer) .hk-tekst{color:var(--acc)}

/* modtagerlisten — en listeboks, ikke en rullemenu: pilen fra
   select-reglen hører ikke hjemme her, og rækkerne skal være
   høje nok til en tommel. */
.hurtig-liste{
  background-image:none;padding:var(--r-1);
  min-height:0;
}
.hurtig-liste option{padding:var(--r-3) var(--r-2);border-radius:var(--radius-mini)}
.hurtig-soeg{margin-bottom:var(--r-2)}
.hurtig-felter{margin-top:var(--r-3)}
.hurtig-visning{margin-top:var(--r-3)}

/* M34 · «ELLER TAST ET NUMMER» — den anden modtagervej.
   🔴 Skillelinjen bærer ordet «eller» og ikke bare et mellemrum: to
   felter under hinanden læses som «udfyld begge», og det er præcis den
   fejl der sender to beskeder fra en bil. Ordet gør valget til et valg.
   Farverne er tokens, så mørk tilstand følger med uden at nogen husker
   det — se 24.5's måling. */
.hurtig-eller{
  display:flex;align-items:center;gap:var(--r-3);
  margin:var(--r-4) 0 var(--r-2);color:var(--ink3);font-size:var(--t-s);
  text-transform:uppercase;letter-spacing:.06em;
}
.hurtig-eller::before,.hurtig-eller::after{
  content:"";flex:1;height:1px;background:var(--linje);
}
/* cifre i tabulær form, så et nummer kan læses i et blik */
.hurtig-manuelt{font-variant-numeric:tabular-nums lining-nums;letter-spacing:.02em}

@media (max-width:760px){
  /* ét valg pr. række — to kolonner på 360 px giver 160 px knapper */
  .hurtig-valg{grid-template-columns:1fr;gap:var(--r-2)}
  .hurtigknap{min-height:72px;font-size:var(--t-l)}
  .hurtigknap .hk-navn{font-size:var(--t-l)}
  .hurtig-liste option{padding:var(--r-4) var(--r-2)}
  /* 🔴 Skillelinjen må ikke koste en tommelbredde af den korte skærm —
     men den skal stadig kunne SES som et valg og ikke som en fejl. */
  .hurtig-eller{margin:var(--r-3) 0 var(--r-2)}
  .hurtig-manuelt{min-height:48px}

  /* 🔴 Når valget ER truffet, må de otte andre skabeloner ikke
     stå mellem tommelen og send-knappen. De trækker sig sammen
     til én linje; den valgte bliver stående i fuld højde.
     :has() findes ikke i ældre browsere — så ruller man som før,
     og intet går i stykker. */
  .hurtig-valg:has(.hurtigknap:not(.sekundaer)) .hurtigknap.sekundaer{
    min-height:48px;padding:var(--r-2) var(--r-4);
  }
  .hurtig-valg:has(.hurtigknap:not(.sekundaer)) .hurtigknap.sekundaer .hk-tekst{
    display:none;
  }
}

/* SEND-KNAPPEN — klæber til bunden af sit trin, så den kan nås
   uden at rulle forbi modtagerlisten. Ikke position:fixed: en
   fast bjælke ville dække den nederste kontakt i listen. */
@media (max-width:760px){
  .hurtig-send{
    position:sticky;bottom:0;z-index:15;
    margin:var(--r-3) calc(-1 * var(--r-4)) calc(-1 * var(--r-4));
    padding:var(--r-3) var(--r-4) calc(var(--r-3) + env(safe-area-inset-bottom,0px));
    background:var(--hoved-flade);
    -webkit-backdrop-filter:saturate(1.7) blur(16px);
    backdrop-filter:saturate(1.7) blur(16px);
    border-top:1px solid var(--linje);
    border-radius:0 0 var(--radius) var(--radius);
    gap:var(--r-2);
  }
  .hurtig-send .knap{flex:1 1 100%;min-height:54px;font-size:var(--t-l)}
  .hurtig-send .smaa{flex:1 1 100%;text-align:center;margin:0}
}

/* ------------------------------------------------------------
   24.8 · SEND SMS — forhåndsvisningsknappen i tommelhøjde
   ------------------------------------------------------------ */
@media (max-width:760px){
  .send-net{gap:var(--r-3)}
  .rulleliste{max-height:260px}
  /* live-målingens chips må bryde frit; ingen af dem må skubbe */
  .maal-vis{gap:6px}
  .maal-vis .m-rest{flex-basis:100%}
}
@media (max-width:600px){
  .send-send{width:100%;min-height:54px;font-size:var(--t-l)}
}

/* ------------------------------------------------------------
   24.9 · SMÅ KNAPPER OG HANDLINGSKOLONNER
   Tre skabeloner satte «padding:4px 10px;font-size:12px» direkte
   i style-attributten. Det er en STØRRELSE, ikke en trykflade —
   og en inline-padding kan ikke overrules af en klasse. Derfor
   en klasse med samme visuelle vægt, men et gulv på 44 px.
   ------------------------------------------------------------ */
.knap-lille{
  padding:0 var(--r-3);font-size:var(--t-s);font-weight:640;
  min-height:44px;
}
/* handlingskolonnen yderst til højre — samme sted i hver tabel */
.kol-handling{text-align:right;white-space:nowrap}
/* svarets tekst må gerne bryde, men ikke koge kolonnen ned til ét ord */
.kol-svartekst{min-width:190px}
/* beskeduddragets kolonne — samme princip som .kol-svartekst, men bredere:
   uddraget er op til 70 tegn, og maalt 18-09-2026 ved 393 px kogte den ned
   til ét-to ord pr. linje naar nabokolonnernes datoer og numre holdt
   linjen. Raekkerne blev taarnhoeje og tomme at se paa. Et gulv paa 30ch
   lader teksten staa i to-tre laeselige linjer og lader .tabel-rul om
   resten. */
.kol-tekst{min-width:30ch}

/* ------------------------------------------------------------
   24.10 · SAMLET SIKKERHEDSNET
   Alt der kan brede sig ud over sin kasse, klippes i sin egen
   beholder — aldrig i body. Ordet uden mellemrum (en lang URL i
   et svar, et firmanavn uden ende) er den hyppigste årsag til
   vandret rul på 360 px.
   ------------------------------------------------------------ */
/* 🔴 Ikke paa td generelt: overflow-wrap:anywhere aendrer en celles
   min-content-bredde, og saa presses HELE tabellen sammen i stedet for
   at rulle. Kun der hvor teksten er fri prosa. */
.valg-rk,.besked,.und,.hjaelp,.kol-svartekst,.hk-tekst{overflow-wrap:anywhere}
img,svg,video{max-width:100%}

/* ------------------------------------------------------------
   25 · FEJLSIDE — 404 og 500 som en flade, ikke som råtekst.
   Målt 01-09-2026: en indlogget kunde der ramte en død adresse
   fik «404: Not Found» i browserens systemskrift, og en uventet
   fejl fik «Der gik noget galt. Fejlen er logget.» — samme sted.
   En dansk flade der pludselig siger «Not Found» ligner et
   nedbrud, ikke en forkert adresse.
   Ingen nye farver: kun tokens fladen bruger i forvejen.
   ------------------------------------------------------------ */
.fejl-flade{max-width:540px;margin:8vh auto 0;padding:0 4px}
.fejl-kode{
  font-size:var(--t-s);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 var(--r-2);
}
.fejl-flade h1{margin-top:0}

/* ------------------------------------------------------------
   26 · DUBLETTER — de to udfald ved siden af hinanden.
   M35. Valget af hvem der bliver stående er det eneste mennesket
   skal træffe, og de to udfald skal kunne SAMMENLIGNES uden at
   rulle. Derfor et grid og ikke to kort under hinanden.
   Under 640 px falder det til én kolonne af sig selv — auto-fit
   frem for et mediespørgsmål, så reglen står ét sted.
   ------------------------------------------------------------ */
.kort-rk{
  display:grid;gap:var(--r-4);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.kort-rk .kort{margin:0}
.kort-rk h3{margin:0 0 var(--r-1);font-size:var(--t-l)}
.kort-rk ul{margin:6px 0 var(--r-4);padding-left:var(--r-5)}

/* ------------------------------------------------------------
   24.6b · FROSSET NAVNEKOLONNE — AFLOEST 16-10-2026 af 29.2.
   Kartoteket var den eneste tabel med `.tabel-frys`. Navnet stod
   fast, men samtykket laa stadig bag rullet (maalt: 9 af 9 ved
   390 px); kontaktkortene viser begge uden rul. Reglerne og
   scriptet i flade.js er fjernet sammen med deres eneste bruger.
   ------------------------------------------------------------ */

/* ============================================================
   27 · DA2 — SIDERNES HIERARKI
   Kun bruger- og admin-skabeloner med .da2. Alle farver, skrifter,
   afstande og skygger laanes fra designsystemet ovenfor.
   UDLEDT fra foer-billederne; skal ses i browser af dirigenten.
   ============================================================ */
.da2 main{padding-top:var(--r-8)}
.da2 .side-hoved{
  padding-bottom:var(--r-6);margin-bottom:var(--r-6);
  border-bottom:calc(var(--r-1) / 4) solid var(--linje);
}
.da2 .side-hoved h1{font-size:var(--t-4xl);overflow-wrap:anywhere}
.da2 .side-hoved .und{margin-top:var(--r-2);max-width:76ch}
.da2 .side-kategori{
  display:flex;align-items:center;gap:var(--r-2);
  margin:0 0 var(--r-3);color:var(--ink2);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.da2 .side-kategori::before{
  content:"";width:var(--r-4);height:var(--r-1);
  border-radius:var(--radius-mini);background:var(--acc);
}
.da2-admin .side-kategori::before{background:var(--stribe)}
.da2 .kort{border-radius:var(--radius-stor)}
.da2 .fv-hero .kort{border-radius:0}
.da2 .kort:not(.tabel-kort):not(.tom):not(.vaerktoej):not(.handling-rk){padding:var(--r-6)}
.da2 .kort>h2:first-child,.da2 .da2-formkort>h2:first-child{
  padding-bottom:var(--r-4);margin:0 0 var(--r-5);
  border-bottom:calc(var(--r-1) / 4) solid var(--linje);
  font-size:var(--t-xl);
}
.da2 .da2-sektionshoved{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:var(--r-2) var(--r-4);margin:var(--r-8) 0 var(--r-4);
}
.da2 .da2-sektionshoved h2{margin:0}
.da2 .da2-sektionshoved a{font-size:var(--t-m);font-weight:600}

/* Navigation: egen raekke paa mobil, uden en ny menuinteraktion.
   .nav-primaer{flex:1} vandt over den gamle nav-regel paa mobil. */
.da2-bruger>header{column-gap:var(--r-4);row-gap:0}
.da2-bruger .nav-primaer a.aktiv{background:var(--acc-svag)}
.da2-bruger .nav-primaer a:hover{background:var(--bg-dyb)}
.da2 header nav a:focus-visible{outline-offset:calc(-1 * var(--r-1))}
.da2-admin>header{row-gap:0}

/* Startfelt og noegletal: handlingen foerst, derefter kontoens status.
   Lang forklaring beholder fuld bredde paa mobil. Kun oversigtens
   korte kort deles i to; kvotekortet fylder altid hele mobilraekken. */
.da2 .da2-start{
  background:linear-gradient(110deg,var(--acc-svag),var(--kort) 70%);
  border-color:var(--linje-staerk);
}
.da2 .da2-start-hoved{margin-bottom:var(--r-5)}
.da2 .da2-start-hoved h2{margin:0 0 var(--r-1);font-size:var(--t-xl)}
.da2 .da2-start-hoved p{margin:0}
.da2 .da2-noegletal{gap:var(--r-4);margin-bottom:var(--r-6)}
.da2 .da2-noegletal>.kort{margin-bottom:0;min-width:0;flex-basis:calc(25% - var(--r-4))}
.da2 .da2-noegletal .tal-und{color:var(--ink2);line-height:1.5}
.da2 .da2-noegletal .tal{margin-top:var(--r-3)}
.da2 .da2-noegletal .tal span{display:inline-block;line-height:1.5}
.da2 .da2-kvote{border-top:var(--r-1) solid var(--acc)}
.da2 .da2-overblik{
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
}
.da2 .da2-overblik>.da2-kvote{flex-grow:2}
.da2 .da2-side-log .da2-noegletal>.kort{flex-basis:calc(33.333% - var(--r-4))}

/* Tabeller: cellen har polstring; metadata INDE i cellen har ikke.
   Den tidligere .tabel-kort .smaa gav indlejret metadata endnu et
   lag polstring, bl.a. omkring samtykke og afsendergrundlag. */
.da2 .tabel-kort td :is(span,div,p,ul).smaa{padding:0}
.da2 .tabel-kort td div.smaa{margin-top:var(--r-1)}
.da2 .tabel-kort>p.smaa{
  margin:0;padding:var(--r-4) var(--r-5);
  border-top:calc(var(--r-1) / 4) solid var(--linje);
  background:var(--bg);
}
.da2 .tabel-kort>h2{padding:var(--r-5);margin:0}
/* kun fra 761 px: paa telefonen slog den 24.4's 8 px og gjorde
   overskriftsraekken 50 px — og da skyggen tegnes BAG cellerne, daekkede
   den hoejere th mere af rulleskyggen (test_vaern_mobilfladen, moerk:
   /kartotek/<id> 3,8 mod gulvet 4). Maalt ved fletningen med N5. */
@media (min-width:761px){
  .da2 th{padding-top:var(--r-4);padding-bottom:var(--r-4)}
}
.da2 td a:not(.knap){font-weight:550}
.da2 .maerke{line-height:1.4;vertical-align:middle}
.da2 .tabel-rul{max-width:100%}
.da2 .da2-person{min-width:16ch}
.da2 .da2-svarpaa{min-width:26ch;max-width:38ch}
.da2 .da2-side-skabeloner td:nth-child(5){min-width:28ch}
.da2 .da2-side-skabelon-form td:nth-child(2){min-width:30ch}
.da2 .da2-side-links td:nth-child(3){min-width:24ch;overflow-wrap:anywhere}
.da2 .da2-licenstabel select{min-width:12ch}
.da2 .da2-licenstabel input:not([type="checkbox"]){min-width:9ch}
.da2 .da2-side-tenant td form{min-width:24ch}
.da2 .da2-side-tenant td form .knap{margin-top:var(--r-2)}
/* F9 · afsender-tabellen paa superadminens tenant-side. Handlingerne
   staar i deres egen raekke under hvert navn (se tenant.html), saa de
   fire kolonner over dem altid kan vaere i kortet. MAALT 02-10-2026 ved
   1280 px: med handlingen som femte kolonne var tabellen 898 px i 865. */
.da2 .da2-afsendertabel tr.da2-afsender-info td{border-bottom:0;padding-bottom:var(--r-2)}
.da2 .da2-afsendertabel tr.da2-afsender-handling td{padding-top:0}
.da2 .da2-afsender-handlinger{display:flex;flex-wrap:wrap;gap:var(--r-2) var(--r-4)}
.da2 .da2-side-tenant .da2-afsender-handlinger form{flex:1 1 34ch;min-width:0;margin:0}
.da2 .da2-side-tenant .da2-afsender-handlinger form .knap{margin-top:0}
.da2 .da2-afsendertabel tr.da2-afsender-handling:hover td,
.da2 .da2-afsendertabel tr.da2-afsender-info:hover td{background:transparent}
/* Under 761 px: én afsender er én stak. Fire kolonner med et navn og en
   dato der ikke maa ombryde, er bredere end 390 px, og saa ville rullet
   skjule knapperne igen. Overskrifterne flytter ind i cellen. */
@media (max-width:760px){
  .da2 .da2-afsendertabel,.da2 .da2-afsendertabel :is(tbody,tr,td){display:block}
  .da2 .da2-afsendertabel tr:first-child{display:none}
  .da2 .da2-afsendertabel tr.da2-afsender-info td{padding:var(--r-1) var(--r-4)}
  .da2 .da2-afsendertabel tr.da2-afsender-info td:first-child{padding-top:var(--r-3)}
  .da2 .da2-afsendertabel td[data-etiket]::before{
    content:attr(data-etiket);display:block;color:var(--ink2);font-weight:640;
    font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.07em;
    font-family:var(--skrift);
  }
  .da2 .da2-afsendertabel td.mono{white-space:normal}
  .da2 .da2-afsendertabel td.mono b{white-space:nowrap}
  .da2 .da2-afsendertabel tr.da2-afsender-handling td{padding:var(--r-2) var(--r-4) var(--r-3)}
  .da2 .da2-side-tenant .da2-afsender-handlinger form{flex-basis:100%}
}

/* Formularernes rytme. Ingen regler overskriver hidden eller skjul.
   Filtre, betingelser og kvitteringer beholder deres eksisterende JS. */
.da2 .felt{margin-bottom:var(--r-5)}
.da2 .felt:last-child{margin-bottom:0}
.da2 .kort .felt .hjaelp{margin-top:var(--r-2)}
.da2 .kort.vaerktoej{gap:var(--r-3);padding:var(--r-4) var(--r-5)}
.da2 .da2-formskel{
  margin:var(--r-6) 0 var(--r-5);padding-top:var(--r-5);
  border-top:calc(var(--r-1) / 4) solid var(--linje);
}
.da2 .da2-kolonneoverskrift{margin:0 0 var(--r-4);font-size:var(--t-xl)}
.da2 .da2-formfod{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:var(--r-3);margin-top:var(--r-2);padding:var(--r-5) var(--r-6);
  background:var(--kort);border:calc(var(--r-1) / 4) solid var(--linje);
  border-radius:var(--radius-stor);box-shadow:var(--skygge);
}
.da2 .da2-formfod p{margin:0}
.da2 .da2-forvisning{border-top:var(--r-1) solid var(--acc)}
.da2 .da2-forvisning h2{margin-top:0}
.da2 .da2-trinoverskrift{font-size:var(--t-xl);margin-bottom:var(--r-5)}
.da2 .da2-hurtigform>.kort:first-of-type{border-top:var(--r-1) solid var(--acc)}
.da2 .hurtig-valg{gap:var(--r-4)}
.da2 .hurtigknap{padding:var(--r-5) var(--r-12) var(--r-5) var(--r-5)}
.da2 .da2-sammenlign{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--r-5)}
.da2 .da2-sammenlign>.felt{
  padding:var(--r-4);background:var(--bg);border-radius:var(--radius);
}
.da2 .da2-kodeform,.da2 .da2-kortformular{max-width:64ch}
.da2 .da2-kodeform .knap{width:100%}
.da2 .da2-import input[type="file"]{padding:var(--r-5);background:var(--bg)}
.da2 .da2-side-dyngrupper .b-raek{
  padding:var(--r-3);background:var(--bg);border-radius:var(--radius);
}
.da2 .da2-side-dyngrupper .b-maal{box-shadow:none;border-color:var(--linje-staerk)}

/* Lange sider opdeles med en forklaring til venstre for selve
   arbejdet. Mobil laeser samme raekkefoelge lodret. */
.da2 .da2-afsnit{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);
  gap:var(--r-6);padding-top:var(--r-6);margin-top:var(--r-8);
  border-top:calc(var(--r-1) / 4) solid var(--linje);
}
.da2 .da2-afsnit-hoved h2{margin:0 0 var(--r-2);font-size:var(--t-xl)}
.da2 .da2-afsnit-hoved p{margin:0;max-width:30ch}
.da2 .da2-afsnit-indhold{min-width:0}
.da2 .da2-afsnit-indhold>.kort:last-child{margin-bottom:0}
.da2 .da2-afsnit-indhold>.smaa:last-child{margin-bottom:0}
.da2 .da2-sektionsmenu{
  display:flex;flex-wrap:wrap;gap:var(--r-2);padding:var(--r-3);
  border:calc(var(--r-1) / 4) solid var(--linje);
  background:var(--kort);border-radius:var(--radius);
}
.da2 .da2-sektionsmenu a{
  display:inline-flex;align-items:center;padding:var(--r-3) var(--r-4);
  font-size:var(--t-m);font-weight:600;border-radius:var(--radius-mini);
}
.da2 .da2-sektionsmenu a:hover{background:var(--bg);text-decoration:none}
.da2 .da2-afsnit[id]{scroll-margin-top:calc(var(--r-12) * 4)}
.da2 .da2-kontokort{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--r-5);margin-top:var(--r-8);
}
.da2 .da2-fareafsnit{
  border-color:var(--roed-linje);border-inline-start:var(--r-1) solid var(--roed);
  margin-top:var(--r-8);
}

/* Tomme tilstande: laesbar forklaring og eksisterende naeste handling.
   Symbolet er neutralt; ingen tom liste faar et falsk succesmaerke. */
.da2 .tom{padding:var(--r-8) var(--r-6);color:var(--ink2);line-height:1.6}
.da2 .tom::before{
  width:var(--r-8);height:var(--r-8);border:calc(var(--r-1) / 4) solid var(--linje-staerk);
  border-radius:var(--radius-lille);background:var(--bg);
  box-shadow:inset 0 calc(-1 * var(--r-2)) 0 var(--linje);
  margin-bottom:var(--r-4);
}
.da2 .tom>p{max-width:64ch;margin-inline:auto}
.da2 .tom>p:first-of-type{color:var(--ink);font-weight:600}
.da2 .tom>p.smaa{font-weight:400}
.da2 .tom .handling-rk{justify-content:center}
.da2 .login-flade .da2-login-titel{
  font-size:var(--t-xl);letter-spacing:-.014em;margin:0 0 var(--r-6);
}
.da2 .login-flade .kort{border-top:var(--r-1) solid var(--acc)}
.da2-admin .login-flade .kort{border-top-color:var(--stribe)}
.da2 .fejl-flade .kort{border-top:var(--r-1) solid var(--linje-staerk)}
.da2 .da2-offentlig{max-width:52ch;margin:var(--r-12) auto}
.da2 .da2-offentlig .kort{border-top:var(--r-1) solid var(--acc)}

@media (max-width:1100px){
  .da2 .da2-afsnit{grid-template-columns:minmax(0,1fr)}
  .da2 .da2-afsnit-hoved p{max-width:64ch}
}
@media (max-width:760px){
  .da2 main{padding-top:var(--r-6)}
  .da2 .side-hoved{padding-bottom:var(--r-5);margin-bottom:var(--r-5)}
  .da2 .side-hoved h1{font-size:var(--t-2xl)}
  .da2 .side-kategori{margin-bottom:var(--r-2)}
  .da2 .kort:not(.tabel-kort):not(.tom):not(.vaerktoej):not(.handling-rk){padding:var(--r-4)}
  .da2 .kort.vaerktoej{padding:var(--r-4)}
  /* `.da2 .tabel-kort{padding:0}` stod her (Astra). Fjernet ved fletningen
     med N5: kant-i-kant gjorde rulleskyggen for svag i moerk tilstand
     (test_vaern_mobilfladen: /grupper 2,9 mod gulvet 4). Main har 16 px
     her fra 24.4, og det er den form der er maalt groen og udrullet. */
  .da2 .da2-noegletal>.kort,.da2 .da2-side-log .da2-noegletal>.kort{flex-basis:100%}
  .da2 .da2-overblik{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .da2 .da2-overblik>.da2-kvote{grid-column:1 / -1}
  .da2 .da2-overblik>.kort:last-child{grid-column:1 / -1}
  .da2 .da2-sammenlign,.da2 .da2-kontokort{grid-template-columns:minmax(0,1fr)}
  .da2 .da2-formfod{padding:var(--r-4)}
  .da2 .da2-formfod .knap{width:100%}
  .da2 .da2-afsnit{gap:var(--r-4)}
  .da2 .da2-sektionsmenu{gap:var(--r-1);padding:var(--r-2)}
  .da2 .da2-sektionsmenu a{padding:var(--r-3)}
  .da2 .tom{padding:var(--r-6) var(--r-4)}
  .da2 .kort-rk{grid-template-columns:minmax(0,1fr)}
  .da2-bruger>header{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:0 var(--r-2);padding:0 var(--r-4);
  }
  .da2-bruger>header>.mrk{grid-column:1;grid-row:1;min-width:0}
  .da2-bruger>header>.hoejre{grid-column:2;grid-row:1;min-width:0;white-space:normal}
  .da2-bruger .hoejre-id{min-width:0}
  .da2-bruger .hoejre-id strong{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .da2-bruger .hoejre>a,
  .da2-bruger .hoejre .logud-knap{white-space:nowrap;padding-block:var(--r-3)}
  .da2-bruger>header>.nav-primaer,.da2-bruger>header>.nav-sekundaer{
    grid-column:1 / -1;min-width:0;width:calc(100% + var(--r-8));
    margin-inline:calc(-1 * var(--r-4));padding-inline:var(--r-4);
    flex-wrap:nowrap;overflow-x:auto;
  }
  .da2-bruger>header>.nav-primaer{grid-row:2}
  .da2-bruger>header>.nav-sekundaer{grid-row:3}
  /* F7b · paa telefonen fremhaever raekken over allerede gruppen, og
     <nav aria-label> navngiver raekken for en skaermlaeser — etiketten
     ville kun tage plads fra fanerne */
  .da2-bruger .nav-sekundaer .nav-etiket{display:none}
}

/* ------------------------------------------------------------
   F7 · «KOM I GANG» — forsidens tjekliste for en ny konto.
   Genbruger .trin-cirklerne fra importens trinrække: samme
   tegn for «gjort» og «næste» to steder i produktet.
   ------------------------------------------------------------ */
.komigang{border-top:var(--r-1) solid var(--acc)}
.komigang-hoved h2{margin:0 0 var(--r-1)}
.komigang-hoved p{margin:0 0 var(--r-4)}
.komigang-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--r-3)}
.komigang-liste .trin{display:flex;align-items:flex-start;white-space:normal;font-weight:inherit}
.komigang-liste .trin i{flex:none;margin-top:1px}
.komigang-liste .trin p{margin:var(--r-1) 0 var(--r-2)}
.komigang-liste .trin.ovre strong{font-weight:520;text-decoration:line-through;
  text-decoration-color:var(--linje-staerk)}

/* ------------------------------------------------------------
   F10 (O2 F5) · ÉT KORT mens «Kom i gang» staar. «Kom godt videre»
   (fem knapper) ventede under listen og skubbede tallene ~1 300 px
   ned paa en telefon. De to DAGLIGE veje bliver i listens fod — M34:
   den hurtige vej er forsidens foerste handling, ogsaa for en kunde
   hvis tjekliste staar aaben laenge.
   ------------------------------------------------------------ */
.komigang-fod{margin-top:var(--r-5);padding-top:var(--r-4);border-top:1px solid var(--linje)}
.komigang-fod p{margin:0 0 var(--r-3)}
.komigang-fod .kort.handling-rk{margin:0}
@media (max-width:600px){
  .komigang-fod .handling-rk>.knap{flex:1 1 0}
}

/* ------------------------------------------------------------
   28 · FU1 — DET DER GEMTE SIG PAA TELEFONEN (designløft, 11-10-2026)

   MAALT ved 390 px paa en skrab-base (udkast/fu1/opus/maal_skjult.py,
   lys og moerk): alle 8 statuskolonner (forsiden, /log, /udsendelser,
   /hul) stod UDEN FOR rulleboksen ved start, og indbakken viste 1 af 6
   kolonner — selve SVARET laa bag et vandret rul, og én raekke var
   ~500 px hoej fordi en skjult kolonne braekkede ord for ord.
   Hovedmenuen viste 3-4 af 9 punkter uden tegn paa at der var flere.

   28.1 · .tabel-stak: en raekke bliver et lille kort med etiketten foran
          hver vaerdi (`data-etiket` paa cellen). Kun ≤760 px; paa bred
          skaerm er det samme tabel som foer. Tabellen ligger stadig i
          .tabel-rul (24.6 og mobilvaernet), den ruller bare ikke laengere.
   28.2 · hovedmenuen faar 24.6's rulleskygge: kanten mørknes hvor der er
          mere at hente og forsvinder i enden. Daekfarven skal vaere
          UIGENNEMSIGTIG og ligne toppens halvgennemsigtige flade over
          --bg; derfor sit eget token (--hoved-tet, afsnit 1).
   ------------------------------------------------------------ */
@media (max-width:760px){
  /* en stablet tabel ruller ikke: 24.6's kantskygge er overfloedig, og
     gradienten goer teksten umaalelig for drift/maal_sider.py */
  .tabel-rul:has(>table.tabel-stak){background:none}
  table.tabel-stak,table.tabel-stak>tbody{display:block;width:100%}
  table.tabel-stak tr:has(>th){display:none}
  table.tabel-stak tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:var(--r-2) var(--r-4);align-items:start;
    padding:var(--r-3) 0;border-bottom:1px solid var(--linje);
  }
  table.tabel-stak tr:last-child{border-bottom:0}
  .tabel-kort table.tabel-stak td,table.tabel-stak td{
    display:block;padding:0;border:0;min-width:0;white-space:normal;
  }
  table.tabel-stak td.stak-bred{grid-column:1 / -1}
  table.tabel-stak td.stak-hoejre{text-align:right;justify-self:end}
  table.tabel-stak td[data-etiket]::before{
    content:attr(data-etiket);display:block;
    font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink3);margin-bottom:2px;
  }

  .da2-bruger>header>.nav-primaer{
    background:
      linear-gradient(to right,var(--hoved-tet) 30%,color-mix(in srgb,var(--hoved-tet) 0%,transparent)),
      linear-gradient(to left,var(--hoved-tet) 30%,color-mix(in srgb,var(--hoved-tet) 0%,transparent)) 100% 0,
      radial-gradient(farthest-side at 0 50%,var(--rul-skygge),transparent),
      radial-gradient(farthest-side at 100% 50%,var(--rul-skygge),transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:34px 100%,34px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll;
  }
}

/* ------------------------------------------------------------
   29 · S24 — MOBILKORT (16-10-2026, FU1 punkt A + Astra P3)

   MAALT ved 390x844 FOER (tests/test_vaern_s24_mobilkort.py):
   kartotekets 9 af 9 samtykkemaerker og licensernes 14 af 14 felter
   laa bag det vandrette rul, og forhaandsvisningens pris var aldrig i
   samme synsfelt som sendeknappen. Formen er 28.1's (.tabel-stak) —
   intet nyt designsprog, ingen nye farver, kun eksisterende tokens.
   Paa bred skaerm er alt herunder enten usynligt eller samme vaerdi
   som de inline-stilarter det afloeser.
   ------------------------------------------------------------ */

/* 29.1 · forhaandsvisningens sidste kontrol — kun paa telefonen */
.fv-sidste{display:none}
.fv-sidste-til{margin:var(--r-2) 0}
.fv-sidste .sms-boble{max-width:100%}
.fv-sidste-pris{margin:var(--r-3) 0 0}
.fv-sidste-pris strong{font-size:var(--t-xl)}
@media (max-width:760px){
  .fv-sidste{display:block;margin-top:var(--r-5)}
}

/* 29.2 · kartotekets kontaktkort: navn | samtykke, firma, numre | Ret */
@media (max-width:760px){
  table.kontaktkort td.kk-navn{grid-column:1;grid-row:1}
  table.kontaktkort td.kk-status{grid-column:2;grid-row:1}
  table.kontaktkort td.kk-firma{grid-column:1 / -1;grid-row:2;color:var(--ink2)}
  table.kontaktkort td.kk-firma:empty{display:none}
  table.kontaktkort td.kk-numre{grid-column:1;grid-row:3}
  table.kontaktkort td.kk-ret{grid-column:2;grid-row:3;align-self:end}
  table.kontaktkort td.kk-navn a{font-size:var(--t-l)}
}

/* 29.3 · licensernes redigeringskort. Bredderne stod inline paa cellerne;
   en inline-bredde ville ogsaa gaelde kortets celler, saa de bor her. */
.lic-firma{min-width:170px}
.lic-forbrug{min-width:130px}
.lic-b120{width:120px}
.lic-b110{width:110px}
.lic-b100{width:100px}
.lic-flueben{text-align:center}
.lic-flueben label{display:inline;margin:0;font-weight:inherit;font-size:inherit}
.lic-gem{text-align:right}
.lic-hjaelp{display:none}
@media (max-width:760px){
  .lic-forklaring{display:none}
  /* to lige kolonner: de to lofter staar side om side, resten fylder bredden */
  table.da2-licenstabel tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  table.da2-licenstabel td{width:auto;min-width:0;text-align:left}
  table.da2-licenstabel td.lic-firma{font-size:var(--t-l)}
  table.da2-licenstabel td input:not([type="checkbox"]),
  table.da2-licenstabel td select{width:100%;min-width:0}
  .lic-hjaelp{display:block;margin-top:var(--r-1);font-size:var(--t-s);
    color:var(--ink2);font-weight:400;letter-spacing:0;text-transform:none}
  .lic-flueben label{display:flex;gap:var(--r-2);align-items:center;min-height:44px}
  .lic-flueben .lic-hjaelp{margin:0;font-size:var(--t-m);color:var(--ink)}
  .lic-gem .knap{width:100%;margin-top:var(--r-2)}
}

/* ============================================================
   30 · S25 — APPS-MENUEN OG VORT GODKENDTE LOGO (17-10-2026)
   Faellesdesignets trin 2 (Andreas: «Ja apps til alle»). Markup i
   faelles/templates/_apps_menu.html, listen i appsmenu.py. Formen er
   CRM's og Signs (.ft-*-klasserne er de AFTALTE navne), oversat til
   vores egne tokens — INGEN nye farver og ingen produktfarve: farven
   staar i logoet selv. Lys/moerk logo vaelges paa prefers-color-scheme,
   som resten af fladen.
   Placering: paa smal og mellem skaerm ved «Log ud»; i kundefladens
   sidebjaelke (>=1100) oeverst ved maerket, og menuen aabner TIL HOEJRE
   for bjaelken (position:fixed — bjaelken ruller lodret og ville ellers
   klippe et 340 px panel i en 248 px kolonne).
   ============================================================ */
.ft-logo-moerk{display:none}
@media (prefers-color-scheme: dark){
  .ft-logo-lys{display:none}
  .ft-logo-moerk{display:block}
}
/* maerket i topbjaelken: logoet i stedet for det selvtegnede symbol.
   🔴 INGEN `display` her: samme specificitet som .ft-logo-moerk og
   senere i filen — maalt 17-10 i foerste efter-skud stod BEGGE logoer
   side om side. Som flex-element er billedet en blok i forvejen. */
.mrk-logo{flex:none;height:30px;width:auto}

.ft-apps{position:relative;flex:none;align-self:center}
.ft-apps>summary{list-style:none}
.ft-apps>summary::-webkit-details-marker{display:none}
.ft-apps-knap{
  display:inline-flex;align-items:center;gap:var(--r-2);height:34px;padding:0 var(--r-3);
  border-radius:var(--radius-stor);border:1px solid var(--linje-staerk);background:var(--kort);
  color:var(--ink);font-size:var(--t-m);font-weight:600;line-height:1;
  cursor:pointer;user-select:none;white-space:nowrap;
  transition:background var(--fart) var(--kurve);
}
.ft-apps-knap svg{width:14px;height:14px;color:var(--ink2)}
.ft-apps-knap:hover,.ft-apps[open]>.ft-apps-knap{background:var(--bg-dyb)}
.ft-apps-knap:focus-visible{outline:none;box-shadow:var(--fokus-ring)}
.ft-apps .ft-menu{
  position:absolute;right:0;top:calc(100% + var(--r-2));z-index:60;width:340px;
  max-width:calc(100vw - var(--r-4));padding:var(--r-2);
  background:var(--kort);color:var(--ink);border:1px solid var(--linje);
  border-radius:var(--radius-stor);box-shadow:var(--skygge-loft);
  white-space:normal;text-align:left;
}
/* S38 · TG-3 (WCAG 1.4.10/2.4.11): ved 320x256 (= 400 %) laa punkt 4-8
   under synsfeltet, og fordi menuen sidder i en sticky topbjaelke, rullede
   den med siden. Nu ruller menuen selv. 5rem = knappens 44 px + afstand +
   luft; i fuld hoejde rammer loftet aldrig (8 punkter ~ 470 px). */
.ft-apps .ft-menu{max-height:calc(100dvh - 5rem);overflow-y:auto;overscroll-behavior:contain}
.ft-menu-h{
  margin:var(--r-2) var(--r-3);font-size:var(--t-xs);font-weight:600;line-height:1;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);
}
.ft-liste{list-style:none;margin:0;padding:0}
.ft-app{
  display:flex;align-items:center;gap:var(--r-3);padding:var(--r-2) var(--r-3);
  border-radius:var(--radius-lille);color:var(--ink);text-decoration:none;
}
.ft-app:hover{background:var(--bg-dyb);color:var(--ink);text-decoration:none}
.ft-app:focus-visible{outline:none;box-shadow:var(--fokus-ring)}
.ft-app[aria-current="true"]{background:var(--acc-svag)}
.ft-app-navn{min-width:0}
.ft-app-navn b{display:block;font-weight:600;font-size:var(--t-m)}
.ft-app-navn small{display:block;color:var(--ink2);font-size:var(--t-s)}
.ft-her{margin-left:auto;white-space:nowrap;font-size:var(--t-xs);font-weight:600;color:var(--acc)}
.ft-logo-boks{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center}
.ft-logo-boks img{height:34px;width:auto;max-width:36px}
.ft-menu-fod{
  margin:var(--r-2) var(--r-3) var(--r-1);padding-top:var(--r-2);border-top:1px solid var(--linje);
  font-size:var(--t-s);color:var(--ink2);
}
/* FRATAG · kontrakt v2, DESIGN GODKENDT 31-10: et frataget produkt er den
   samme komponent i graa, ikke-klikbar tilstand — ingen hover, ingen markoer. */
.ft-app-frataget,.ft-app-frataget:hover{background:none;color:var(--ink2);cursor:default}
.ft-app-frataget .ft-logo-boks{opacity:.45;filter:grayscale(1)}
.ft-app-frataget .ft-app-navn b{font-weight:500}
/* telefonen: hvert punkt naar 44-gulvet (24.1), og ordet «Apps» viger
   for brugernavnet — knappen beholder sit aria-label */
@media (max-width:760px){
  .ft-apps-knap{height:44px;width:44px;padding:0;justify-content:center}
  .ft-apps-ord{display:none}
  /* kundefladens topbjaelke er et GRID paa telefonen (afsnit 27, to
     kolonner: maerke | bruger). Knappen faar sin egen tredje kolonne i
     raekke 1 — maalt 17-10: uden den lagde griddet knappen i en ny
     raekke UNDER menuen. Kolonnelisten er gentaget her, ikke rettet i 27. */
  .da2-bruger>header{grid-template-columns:minmax(0,1fr) auto auto}
  .da2-bruger>header>.ft-apps{grid-column:3;grid-row:1}
  .ft-app{min-height:44px}
}
@media (min-width:1100px){
  /* kun prikkerne i den 248 px brede kolonne — ordet «Apps» daekkede
     «SMS» i maerket (maalt 17-10, foerste efter-skud) */
  .med-sidebjaelke .ft-apps{
    position:absolute;top:var(--r-4);right:var(--r-3);
  }
  .med-sidebjaelke .ft-apps-ord{display:none}
  .med-sidebjaelke .ft-apps-knap{width:34px;padding:0;justify-content:center}
  .med-sidebjaelke .ft-apps .ft-menu{
    position:fixed;top:var(--r-3);right:auto;
    left:calc(var(--sidebjaelke) + var(--r-2));
  }
}

/* 30 · S46 · S32-ROLLE-1: et laast fieldset for en ikke-ejer. Feltet er
   stadig synligt (vaerdierne gaelder ogsaa for brugeren); kun rammen fra
   browserens standard-fieldset fjernes. Selve det graa ligger i afsnittet
   for :disabled ovenfor. */
.ejer-laas{border:0;margin:0;padding:0;min-width:0}

/* 31 · S46 · S34-TG-13: advarslen foer sessionsudloeb. Over alt andet,
   centreret, og laesbar ved 400 % (320 px): bredden er en loft, ikke et krav. */
.sessionsadvarsel-bag{position:fixed;inset:0;background:var(--sloer);z-index:1000}
.sessionsadvarsel{position:fixed;z-index:1001;left:50%;top:50%;
  transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);overflow:auto;
  box-shadow:var(--skygge-loft)}
.sessionsadvarsel h2{margin-top:0}
.sessionsadvarsel-knapper{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.sessionsadvarsel[hidden],.sessionsadvarsel-bag[hidden]{display:none}