/* =====================================================================
   123Tivoli designsystem (Primer-bud). Fælles komponentlag for alle moduler.
   Kun var(--ds-*); værdierne står i tokens.css. Moduler (viden.css, atlas.css,
   bestillinger.css, udlaeg.css) må ikke rette her, kun bygge ovenpå.

   DÆKKER (klasse → Primer-komponent):
     1  Grund og typografi   body, a, :focus-visible, h1-h4 i .indhold, .sektion-intro,
                             checkbox/radio (accent-color), hr, kbd/code, ::selection
     2  Sideramme            .site-header/.header-inner (Box), .logo, .topnav-list (+ .sub-menu),
                             .site-wrap (ingen ydre flade: Box'e ligger på grunden), .enkel-side .indhold,
                             .site-footer, .menu-toggle/.menu-close/.sidebar-close/.sidebar-mobile-toggle,
                             mobilskuffen (.menu-kompakt .topnav, .sektion-skuffe)
     3  SegmentedControl     .sektion-nav/.sektion-knap, .udlaeg-segment, .atlas-seg, .overview-toggle
        ActionMenu (header)  .sektion-vaelger(-menu), .personmenu(-knap/-liste)
        ToggleSwitch         .theme-toggle (.toggle-track/-thumb), .kontakt
     4  Button               .udlaeg-knap, .atlas .atlas-knap, .modulrolle-knap, .mi-knap, .udlaeg-fold > summary
                             varianter: .er-primaer, .er-farlig, .er-farlig-fyldt, .er-godkend (outline),
                             :disabled; IconButton: .modulrolle-fjern, .atlas summary.atlas-knap[aria-label]
                             Link-knap (invisible): .udlaeg-csv, .udlaeg-nulstil, .atlas-tilbage, .udlaeg-sorter
     5  FormControl          .udlaeg-felt (label, input, select, textarea), .udlaeg-soeg, .udlaeg-inline-form select,
                             .udlaeg-filter select, .atlas-felt/.atlas input/select/textarea, .mi-felter input,
                             .sidebar-filter, .vaelger-felt, .vaelger-combo-felt (+ .vaelger-chip = Token),
                             .vaelger-enkeltvalg, hjælpetekster (.udlaeg-hjaelp, .atlas-hjaelp, .vaelger-hjaelp),
                             [aria-invalid="true"]
     6  Box                  .atlas .atlas-blok (+ Box-header: > h2 / > .atlas-sektion-top), .udlaeg-boks,
                             .udlaeg-gruppe.er-kort, .udlaeg-raekkeliste (Box med rækker), .udlaeg-tabel-wrap
        Blankslate           .udlaeg-tom, .udlaeg-tom-tilstand, .atlas-tom-tilstand
     7  Label/StateLabel     .sektion-status, .udlaeg-status (.er-gemt/-indsendt/-klar/-betalt/-afvist),
                             .udlaeg-gl-chip, .atlas-tag, .atlas .atlas-fakta-chip (Label large)
        CounterLabel         .tivoli-fane-antal
     8  DataTable            .udlaeg-tabel, .atlas-tabel (header-række muted, 14px celler)
     9  UnderlineNav         .tivoli-faner/.tivoli-fane
        NavList              .sidebar (.kategori-toggle, .sidebar-post-link + SubNav .kategori-posts, .sidebar-mobil-top, .bogmaerke)
    10  Flash/Banner         .udlaeg-besked (.er-ok/.er-fejl), .atlas-besked, .udlaeg-advarsel, .mi-besked
    11  Overlay/ActionMenu   .atlas .atlas-menu-pop/.atlas-menu-punkt, .udlaeg-menu-liste/.udlaeg-menu-punkt,
                             .vaelger-combo-liste, .vaelger-enkeltvalg ul, .udlaeg-forslag, .search-suggestions
    12  Dialog               .atlas .atlas-dialog (+ .atlas-dialog-baggrund), .udlaeg-modal (+ ::backdrop)
    13  Timeline             .atlas .atlas-tidslinje (badges, kommentar-Box), .udlaeg-traad (kommentarer)
    14  Avatar               .person/.person-billede, .atlas-personer, .modulrolle-person
    15  Postside (Atlas-post og Bestilling bruger den samme)
                             .atlas-post-top/-handlinger/-hoved, .atlas-meta, .atlas-post-kol/-venstre/-hoejre,
                             .atlas-tekst, .atlas-felter-dl, .atlas-status-raekke, .atlas-minikort
    16  Leaflet              .leaflet-bar (zoomknapper som Button-gruppe), .leaflet-control-attribution
    17  Telefon              kontroller 40px (Primer large), mindre sidetitel

   Ikke her (fase 2): artikelindhold (.entry-content, .tivoli-styled-box), forsidens søgefelt og kategorikort,
   kanban, udlægslinjer/kvittering/"Næste skridt", kortsidens paneler og popup, lister i Atlas.
   ===================================================================== */


/* =====================================================================
   1. Grund og typografi
   ===================================================================== */
body {
  background: var(--ds-grund);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  line-height: var(--ds-lh);
}
a { color: var(--ds-primaer-tekst); }
a:hover { color: var(--ds-primaer-tekst); text-decoration: underline; }
:focus-visible { outline-color: var(--ds-fokus); }
::selection { background: var(--ds-primaer-svag); color: var(--ds-tekst); }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--ds-primaer); }
hr { border: 0; border-top: var(--ds-streg) solid var(--ds-kant); }

h1, h2, h3, h4 { color: var(--ds-tekst); }
/* Sidetitlen: Primers title-large. h2-h4 har modulernes størrelser, kun vægten er fælles. */
.indhold h1 {
  font-size: var(--ds-fs-xl);
  font-weight: var(--ds-vaegt-fed);
  line-height: var(--ds-lh-tet);
}
h2, h3, h4 { font-weight: var(--ds-vaegt-fed); }
.sektion-intro { color: var(--ds-tekst-daempet); font-size: var(--ds-fs); }


/* =====================================================================
   2. Sideramme: header-Box på grunden, indholdets Box'e direkte på grunden
   ===================================================================== */
.site-header { padding-top: var(--ds-4); }
[data-theme] .site-header { background: transparent; }
.header-inner {
  min-height: calc(var(--ds-8) + var(--ds-6));
  padding: 0 var(--ds-4);
  gap: var(--ds-4);
  background: var(--ds-flade);
  border: var(--ds-streg) solid var(--ds-kant);
  border-radius: var(--ds-r);
  box-shadow: var(--ds-skygge-1);
}
.logo { font-size: var(--ds-fs); font-weight: var(--ds-vaegt-fed); }
.logo a { color: var(--ds-tekst); }
.logo a:hover { text-decoration: none; }
.topnav { margin-left: var(--ds-2); }

/* UnderlineNav i headeren: punkter 32px, hover = neutral flade, aktivt = fed + 2px streg i primær */
.topnav-list { gap: var(--ds-1); }
[data-theme] .topnav-list > li > a {
  min-height: var(--ds-kontrol-m);
  padding: 0 var(--ds-2);
  border-radius: var(--ds-r);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  line-height: var(--ds-lh);
}
[data-theme] .topnav-list > li > a:hover,
[data-theme] .topnav-list > li > a:focus-visible { background: var(--ds-neutral-svag); color: var(--ds-tekst); }
[data-theme] .topnav-list > :is(.current-menu-item, .current-menu-parent, .current-menu-ancestor) > a,
[data-theme] .topnav-list > :is(.current-menu-item, .current-menu-parent, .current-menu-ancestor) > a:hover {
  background: transparent;
  color: var(--ds-tekst);
  font-weight: var(--ds-vaegt-fed);
  text-decoration: underline;
  text-decoration-color: var(--ds-primaer);
  text-decoration-thickness: var(--ds-streg-tyk);
  text-underline-offset: var(--ds-2);
}
.topnav-list .menu-item-has-children > a::after { margin-left: var(--ds-1); font-size: var(--ds-fs-sm); color: var(--ds-tekst-daempet); }
/* Undermenu = ActionMenu-overlag */
[data-theme] .topnav-list .sub-menu {
  min-width: calc(var(--ds-8) * 5);
  padding: var(--ds-2);
  border: 0;
  border-radius: var(--ds-r-lg);
  background: var(--ds-overlag);
  box-shadow: var(--ds-skygge-3);
}
.topnav-list .sub-menu li a {
  min-height: var(--ds-kontrol-m);
  padding: var(--ds-1) var(--ds-2);
  border-radius: var(--ds-r);
  font-size: var(--ds-fs-sm);
}
.topnav-list .sub-menu li a:hover,
.topnav-list .sub-menu li a:focus-visible { background: var(--ds-neutral-svag); color: var(--ds-tekst); }
.topnav-list .sub-menu .current-menu-item > a { background: var(--ds-primaer-svag); color: var(--ds-tekst); }
.submenu-toggle { border-radius: var(--ds-r); color: var(--ds-tekst-daempet); }
.submenu-toggle:hover { background: var(--ds-neutral-svag); }

/* Indholdsrammen: ingen ydre flade */
.site-wrap.container {
  padding: var(--ds-6) 0 var(--ds-7);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.enkel-side .indhold { padding: 0; background: transparent; }
.site-footer {
  padding: var(--ds-4) 0 var(--ds-6);
  border-top: var(--ds-streg) solid var(--ds-kant);
  color: var(--ds-tekst-daempet);
  font-size: var(--ds-fs-xs);
}

/* Små header-knapper = Button default */
.menu-toggle,
.menu-close,
.sidebar-close,
.sidebar-mobile-toggle {
  min-height: var(--ds-kontrol-m);
  padding: 0 var(--ds-3);
  border: var(--ds-streg) solid var(--ds-kant-felt);
  border-radius: var(--ds-r);
  background: var(--ds-kontrol);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-vaegt-medium);
  box-shadow: var(--ds-skygge-knap);
}
.menu-toggle:hover,
.menu-close:hover,
.sidebar-close:hover,
.sidebar-mobile-toggle:hover { background: var(--ds-kontrol-hover); }

/* Mobilskuffen = Overlay (side) */
.menu-kompakt .header-inner { padding: var(--ds-3); gap: var(--ds-3); }
.menu-kompakt .topnav {
  padding: var(--ds-4);
  background: var(--ds-overlag);
  border-left: 0;
  box-shadow: var(--ds-skygge-3);
}
.menu-kompakt body.menu-er-aaben::before { background: var(--ds-baggrund-dialog); opacity: 1; }
.menu-kompakt .topnav-list { gap: var(--ds-1); }
[data-theme] .menu-kompakt .topnav-list > li > a { min-height: var(--ds-kontrol-l); padding: 0 var(--ds-3); font-size: var(--ds-fs); font-weight: var(--ds-vaegt-normal); }
.menu-kompakt .sektion-skuffe {
  gap: var(--ds-1);
  margin: 0 0 var(--ds-4);
  padding: var(--ds-1);
  border: var(--ds-streg) solid var(--ds-kant);
  border-radius: var(--ds-r);
  background: var(--ds-kontrol-hover);
}
.menu-kompakt .sektion-skuffe .sektion-knap {
  min-height: calc(var(--ds-8) + var(--ds-6));
  padding: var(--ds-2) var(--ds-1);
  border: var(--ds-streg) solid transparent;
  border-radius: var(--ds-r);
  background: transparent;
  color: var(--ds-tekst);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-vaegt-medium);
}
.menu-kompakt .sektion-skuffe .sektion-knap.er-aktiv {
  background: var(--ds-flade);
  border-color: var(--ds-kant-felt);
  font-weight: var(--ds-vaegt-fed);
  box-shadow: var(--ds-skygge-1);
}


/* =====================================================================
   3. SegmentedControl, header-menuer, kontakter
   SegmentedControl: kontrol-spor, valgt segment = flade med kant-felt og skygge
   ===================================================================== */
.sektion-nav,
.udlaeg-segment,
.atlas-seg,
[data-theme] .overview-toggle {
  display: inline-flex;
  gap: 0;
  padding: 0;
  border: var(--ds-streg) solid var(--ds-kant);
  border-radius: var(--ds-r);
  background: var(--ds-kontrol-hover);
  overflow: visible;
  flex-wrap: wrap; /* smal skærm: segmenterne brydes i stedet for at løbe ud over kanten */
  max-width: 100%;
}
.sektion-knap,
.sektion-nav .sektion-knap,
.udlaeg-segment span,
.udlaeg-segment button,
.atlas-seg a,
[data-theme] .overview-toggle-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-kontrol-m);
  padding: 0 var(--ds-3);
  gap: var(--ds-2);
  border: var(--ds-streg) solid transparent;
  border-radius: var(--ds-r);
  background: transparent;
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-vaegt-medium);
  text-decoration: none;
  box-shadow: none;
}
.atlas-seg a + a { border-left: var(--ds-streg) solid transparent; }
.sektion-knap .icon-lucide { color: var(--ds-tekst-daempet); }
.sektion-nav .sektion-knap:hover,
.udlaeg-segment label:hover span,
.udlaeg-segment button:hover,
.atlas-seg a:hover,
[data-theme] .overview-toggle-btn:hover { background: var(--ds-kontrol-aktiv); border-color: transparent; color: var(--ds-tekst); text-decoration: none; }
.sektion-knap.er-aktiv,
.sektion-nav .sektion-knap.er-aktiv,
.sektion-nav .sektion-knap.er-aktiv:hover,
.udlaeg-segment input:checked + span,
.udlaeg-segment button[aria-checked="true"],
.atlas-seg a[aria-current="page"],
[data-theme] .overview-toggle-btn.is-active {
  margin: calc(var(--ds-streg) * -1);
  min-height: calc(var(--ds-kontrol-m) + var(--ds-streg) * 2);
  background: var(--ds-flade);
  border-color: var(--ds-kant-felt);
  color: var(--ds-tekst);
  font-weight: var(--ds-vaegt-fed);
  box-shadow: var(--ds-skygge-1);
}
.sektion-knap.er-aktiv .icon-lucide { color: var(--ds-primaer-tekst); }
.udlaeg-segment input:focus-visible + span { outline: var(--ds-streg-tyk) solid var(--ds-fokus); outline-offset: calc(var(--ds-streg-tyk) * -1); }

/* Kompakt sektionsvælger (details/summary) = Button med ActionMenu */
.sektion-vaelger > summary.sektion-knap {
  min-height: var(--ds-kontrol-m);
  background: var(--ds-kontrol);
  border-color: var(--ds-kant-felt);
  box-shadow: var(--ds-skygge-knap);
  margin: 0;
}
.sektion-vaelger > summary.sektion-knap:hover { background: var(--ds-kontrol-hover); border-color: var(--ds-kant-felt); color: var(--ds-tekst); }
.sektion-vaelger-menu,
.personmenu-liste {
  gap: 0;
  padding: var(--ds-2);
  border: 0;
  border-radius: var(--ds-r-lg);
  background: var(--ds-overlag);
  box-shadow: var(--ds-skygge-3);
}
.sektion-vaelger-menu a,
.personmenu-liste a {
  min-height: var(--ds-kontrol-m);
  padding: var(--ds-1) var(--ds-2);
  gap: var(--ds-2);
  border-radius: var(--ds-r);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-vaegt-normal);
}
.sektion-vaelger-menu a .icon-lucide { color: var(--ds-tekst-daempet); }
.sektion-vaelger-menu a:hover,
.personmenu-liste a:hover,
.personmenu-liste a:focus-visible { background: var(--ds-neutral-svag); color: var(--ds-tekst); text-decoration: none; }
.sektion-vaelger-menu a.er-aktiv { background: var(--ds-primaer-svag); color: var(--ds-tekst); font-weight: var(--ds-vaegt-fed); }
.personmenu-hvem {
  margin: 0 0 var(--ds-2);
  padding: var(--ds-1) var(--ds-2) var(--ds-2);
  border-bottom: var(--ds-streg) solid var(--ds-kant-svag);
  font-size: var(--ds-fs-sm);
}
.personmenu-hvem span { color: var(--ds-tekst-daempet); font-size: var(--ds-fs-xs); }

/* Avatar-knappen i headeren */
.personmenu-knap,
.personmenu-knap img { border-radius: var(--ds-r-rund); }
.personmenu-knap {
  border: 0;
  background: var(--ds-neutral-svag);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-vaegt-fed);
  box-shadow: 0 0 0 var(--ds-streg) var(--ds-kant-gennemsigtig);
}
.personmenu[open] .personmenu-knap,
.personmenu[open] .personmenu-knap.har-billede { background: var(--ds-neutral-svag); color: var(--ds-tekst); box-shadow: 0 0 0 var(--ds-streg-tyk) var(--ds-fokus); }

/* ToggleSwitch: temakontakten og .kontakt (afkrydsning, der ligner en kontakt) */
.toggle-track,
[data-theme="dark"] .toggle-track { background: var(--ds-kontrol); border: var(--ds-streg) solid var(--ds-kant-felt); }
.toggle-thumb { background: var(--ds-primaer); color: var(--ds-tekst-paa-primaer); }
.kontakt input { background: var(--ds-kontrol); box-shadow: inset 0 0 0 var(--ds-streg) var(--ds-kant-felt); }
.kontakt input::after { background: var(--ds-flade); box-shadow: 0 0 0 var(--ds-streg) var(--ds-kant-felt); }
.kontakt input:checked { background: var(--ds-primaer); box-shadow: none; }
.kontakt input:checked::after { box-shadow: none; }
.kontakt-tekst small { color: var(--ds-tekst-daempet); font-size: var(--ds-fs-xs); }


/* =====================================================================
   4. Button
   default: kontrol-fyld + kant-felt + lille skygge, 32px, 14px medium
   primary: fyldt primær; danger: rød tekst, fyldt rød ved hover; invisible: ingen kant
   ===================================================================== */
.udlaeg-knap,
.atlas .atlas-knap,
.modulrolle-knap,
.mi-knap,
.udlaeg-fold > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-kontrol-m);
  padding: 0 var(--ds-3);
  gap: var(--ds-2);
  border: var(--ds-streg) solid var(--ds-kant-felt);
  border-radius: var(--ds-r);
  background: var(--ds-kontrol);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-vaegt-medium);
  line-height: var(--ds-lh);
  text-decoration: none;
  box-shadow: var(--ds-skygge-knap);
  filter: none;
  transition: background-color var(--ds-overgang);
}
.udlaeg-knap svg,
.atlas .atlas-knap > svg,
.udlaeg-fold > summary svg { color: var(--ds-tekst-daempet); }
.udlaeg-knap:hover,
.atlas .atlas-knap:hover,
.udlaeg-fold > summary:hover { background: var(--ds-kontrol-hover); color: var(--ds-tekst); text-decoration: none; filter: none; }
.udlaeg-knap:active,
.atlas .atlas-knap:active { background: var(--ds-kontrol-aktiv); }
.udlaeg-knap:focus-visible,
.atlas .atlas-knap:focus-visible,
.modulrolle-knap:focus-visible,
.mi-knap:focus-visible,
.udlaeg-fold > summary:focus-visible { outline: var(--ds-streg-tyk) solid var(--ds-fokus); outline-offset: calc(var(--ds-streg-tyk) * -1); }
.udlaeg-fold[open] > summary { background: var(--ds-kontrol-aktiv); }

/* Primary */
.udlaeg-knap.er-primaer,
.atlas .atlas-knap.er-primaer,
.modulrolle-knap,
.mi-knap {
  border-color: var(--ds-kant-gennemsigtig);
  background: var(--ds-primaer);
  color: var(--ds-tekst-paa-primaer);
}
.udlaeg-knap.er-primaer svg,
.atlas .atlas-knap.er-primaer > svg { color: inherit; }
.udlaeg-knap.er-primaer:hover,
.atlas .atlas-knap.er-primaer:hover,
.modulrolle-knap:hover,
.mi-knap:hover { background: var(--ds-primaer-hover); color: var(--ds-tekst-paa-primaer); }
.udlaeg-knap.er-primaer:focus-visible,
.atlas .atlas-knap.er-primaer:focus-visible,
.modulrolle-knap:focus-visible,
.mi-knap:focus-visible { outline-offset: var(--ds-streg-tyk); }

/* Outline (Atlas' Godkend): primær tekst og kant, fyldt ved hover */
.atlas .atlas-knap.er-godkend { border-color: var(--ds-primaer-tekst); color: var(--ds-primaer-tekst); }
.atlas .atlas-knap.er-godkend:hover { background: var(--ds-primaer); border-color: var(--ds-primaer); color: var(--ds-tekst-paa-primaer); }

/* Danger */
[data-theme] .udlaeg-knap.er-farlig,
[data-theme] .indhold.atlas .atlas-knap.er-farlig,
[data-theme] .udlaeg-fold.er-farlig > summary { border-color: var(--ds-kant-felt); color: var(--ds-fejl); }
[data-theme] .udlaeg-knap.er-farlig svg,
[data-theme] .udlaeg-fold.er-farlig > summary svg { color: inherit; }
[data-theme] .udlaeg-knap.er-farlig:hover,
[data-theme] .indhold.atlas .atlas-knap.er-farlig:hover,
[data-theme] .udlaeg-fold.er-farlig > summary:hover,
[data-theme] .udlaeg-knap.er-farlig-fyldt,
[data-theme] .udlaeg-knap.er-farlig-fyldt:hover {
  border-color: var(--ds-kant-gennemsigtig);
  background: var(--ds-fejl-fyldt);
  color: var(--ds-tekst-paa-primaer);
}

/* Disabled */
.udlaeg-knap:disabled,
.udlaeg-knap.er-primaer:disabled,
.indhold.atlas .atlas-knap:disabled,
.indhold.atlas .atlas-knap[aria-disabled="true"],
.modulrolle-knap:disabled {
  border-color: var(--ds-kant);
  background: var(--ds-kontrol);
  color: var(--ds-tekst-deaktiv);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

/* IconButton */
.atlas summary.atlas-knap[aria-label] { min-width: var(--ds-kontrol-m); padding: 0 var(--ds-2); }
.modulrolle-fjern {
  width: var(--ds-kontrol-m);
  height: var(--ds-kontrol-m);
  border: var(--ds-streg) solid transparent;
  border-radius: var(--ds-r);
  color: var(--ds-tekst-daempet);
}
.modulrolle-fjern:hover,
.modulrolle-fjern:focus-visible { border-color: transparent; background: var(--ds-neutral-svag); color: var(--ds-fejl); }

/* Invisible / link-knapper */
.udlaeg-csv,
.udlaeg-nulstil,
.atlas-tilbage {
  color: var(--ds-primaer-tekst);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-vaegt-fed);
}
.udlaeg-sorter { gap: var(--ds-1); border-radius: var(--ds-r-sm); color: inherit; font-weight: inherit; }
.udlaeg-sorter:focus-visible { outline: var(--ds-streg-tyk) solid var(--ds-fokus); }


/* =====================================================================
   5. FormControl / TextInput / Select / Textarea
   kant-felt, flade, inset-skygge, fokus = 2px ring i fokusfarve
   ===================================================================== */
.udlaeg-felt,
.vaelger-felt,
.atlas .atlas-felt { gap: var(--ds-2); font-size: var(--ds-fs-sm); }
.udlaeg-felt > label,
.udlaeg-felt > legend,
.vaelger-felt > label,
.vaelger-felt > legend,
.atlas .atlas-felt > label,
.atlas .atlas-felt > legend,
.atlas-label,
.udlaeg-label,
.mi-felter label { color: var(--ds-tekst); font-size: var(--ds-fs-sm); font-weight: var(--ds-vaegt-fed); }
.udlaeg-hjaelp,
.atlas-hjaelp,
.vaelger-hjaelp,
.mi-hjaelp,
.modulrolle-hjaelp,
.udlaeg-valgfri { color: var(--ds-tekst-daempet); font-size: var(--ds-fs-xs); }

.udlaeg-felt input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.udlaeg-felt select,
.udlaeg-felt textarea,
.udlaeg-soeg,
.udlaeg-inline-form select,
.udlaeg-filter select,
.mi-felter input,
.sidebar-filter,
.atlas textarea,
.atlas input[type="text"],
.atlas select,
.indhold.atlas .atlas-felt input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]):not([type="range"]):not([type="search"][role="combobox"]),
.indhold.atlas .atlas-felt select,
.indhold.atlas .atlas-felt textarea,
.vaelger-combo-felt {
  min-height: var(--ds-kontrol-m);
  padding: var(--ds-1) var(--ds-3);
  border: var(--ds-streg) solid var(--ds-kant-felt);
  border-radius: var(--ds-r);
  background-color: var(--ds-flade);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  line-height: var(--ds-lh);
  box-shadow: var(--ds-skygge-felt);
}
.udlaeg-felt input[type="text"],
.udlaeg-felt input[type="date"],
.udlaeg-felt input[type="number"],
.udlaeg-felt input[type="search"],
.udlaeg-felt select { height: var(--ds-kontrol-m); }
.udlaeg-felt select,
.udlaeg-inline-form select,
.udlaeg-filter select { padding-right: var(--ds-7); background-position: right var(--ds-2) center; }
.udlaeg-felt textarea,
.atlas textarea,
.indhold.atlas .atlas-felt textarea { padding-block: var(--ds-2); }
.udlaeg-felt input[type="file"] { padding: var(--ds-1); }
.udlaeg-felt input::placeholder,
.udlaeg-felt textarea::placeholder,
.udlaeg-soeg::placeholder,
.atlas textarea::placeholder,
.atlas input::placeholder,
.sidebar-filter::placeholder,
.vaelger-combo input::placeholder { color: var(--ds-tekst-daempet); opacity: 1; }

.udlaeg-felt input:focus:not([role="combobox"]),
.udlaeg-felt select:focus,
.udlaeg-felt textarea:focus,
.udlaeg-soeg:focus,
.udlaeg-inline-form select:focus,
.udlaeg-filter select:focus,
.mi-felter input:focus,
.sidebar-filter:focus,
.atlas textarea:focus,
.atlas input[type="text"]:focus,
.atlas select:focus,
.indhold.atlas .atlas-felt input:focus:not([role="combobox"]), /* vælgerens søgefelt: rammen sidder på .vaelger-combo-felt, ellers boks i boks */
.indhold.atlas .atlas-felt select:focus,
.indhold.atlas .atlas-felt textarea:focus,
.vaelger-combo-felt:focus-within {
  border-color: var(--ds-fokus);
  outline: var(--ds-streg-tyk) solid var(--ds-fokus);
  outline-offset: calc(var(--ds-streg) * -1);
  box-shadow: none;
}
/* Fejl i feltet: rød kant (FormControl validation) */
.udlaeg-felt [aria-invalid="true"],
.indhold.atlas [aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]) {
  border-color: var(--ds-fejl) !important; /* temaet bruger !important her */
  box-shadow: none;
  background-color: var(--ds-flade);
}
.udlaeg-felt-fejl,
.udlaeg-stop-fejl,
.udlaeg-upload-fejl { color: var(--ds-fejl); font-size: var(--ds-fs-xs); font-weight: var(--ds-vaegt-fed); }

/* Personvælger (søgbar combobox) og Token-chips */
.vaelger-combo-felt { gap: var(--ds-1); padding: var(--ds-1); }
.vaelger-combo .vaelger-combo-felt input[type="search"] { min-height: calc(var(--ds-kontrol-m) - var(--ds-2)); padding: 0 var(--ds-2); font-size: var(--ds-fs-sm); color: var(--ds-tekst); }
.vaelger-chip {
  gap: var(--ds-1);
  padding: 0 var(--ds-1) 0 var(--ds-2);
  border: var(--ds-streg) solid var(--ds-kant);
  border-radius: var(--ds-r-rund);
  background: var(--ds-neutral-svag);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-vaegt-medium);
  line-height: var(--ds-lh);
}
.vaelger-chip span:last-child { width: var(--ds-4); height: var(--ds-4); font-size: var(--ds-fs-sm); color: var(--ds-tekst-daempet); opacity: 1; }
.vaelger-chip:hover span:last-child,
.vaelger-chip:focus-visible span:last-child { background: var(--ds-neutral-svag); color: var(--ds-tekst); }
.vaelger-valg.er-brugere { border: var(--ds-streg) solid var(--ds-kant); border-radius: var(--ds-r); background: var(--ds-flade); }
.vaelger-combo-avatar { background: var(--ds-primaer-svag); color: var(--ds-primaer-tekst); font-size: var(--ds-fs-xs); font-weight: var(--ds-vaegt-fed); }
.vaelger-combo-email,
.vaelger-combo-tom,
.vaelger-combo-tom span,
.vaelger-enkeltvalg li small,
.vaelger-enkeltvalg-tom { color: var(--ds-tekst-daempet); font-size: var(--ds-fs-xs); }
.vaelger-enkeltvalg-pil,
.vaelger-enkeltvalg-tjek { color: var(--ds-tekst-daempet); }
.vaelger-enkeltvalg li[aria-selected="true"] .vaelger-enkeltvalg-tjek { color: var(--ds-primaer-tekst); }


/* =====================================================================
   6. Box (og Blankslate)
   1px kant, 6px radius, flade, resting-small skygge; Box-header = muted række med kant under
   ===================================================================== */
.atlas .atlas-blok,
.atlas .atlas-post-kol .atlas-blok,
.udlaeg-boks:not(.udlaeg-bilag-boks),
.udlaeg-gruppe.er-kort {
  padding: var(--ds-4);
  border: var(--ds-streg) solid var(--ds-kant);
  border-radius: var(--ds-r);
  background: var(--ds-flade);
  box-shadow: var(--ds-skygge-1);
}
.udlaeg-gruppe.er-kort.er-fremhaevet { border-color: var(--ds-kant); border-left-width: var(--ds-streg); background: var(--ds-flade); box-shadow: var(--ds-skygge-1); }
.udlaeg-gruppe.er-kort.er-fremhaevet h2 { color: var(--ds-tekst); }
.udlaeg-boks + .udlaeg-boks,
.udlaeg-boks + .udlaeg-kommentarer { margin-top: var(--ds-6); }
.udlaeg-boks > h2 { margin: var(--ds-6) 0 var(--ds-3); }

/* Box-header: overskriften (eller overskrift + handling) bliver en muted række med kant under */
.atlas .atlas-post-kol .atlas-blok > h2,
.atlas .atlas-post-kol .atlas-blok > .atlas-sektion-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-2);
  min-height: calc(var(--ds-kontrol-m) + var(--ds-1));
  margin: calc(var(--ds-4) * -1) calc(var(--ds-4) * -1) var(--ds-4);
  padding: var(--ds-2) var(--ds-4);
  border-bottom: var(--ds-streg) solid var(--ds-kant);
  border-radius: calc(var(--ds-r) - var(--ds-streg)) calc(var(--ds-r) - var(--ds-streg)) 0 0;
  background: var(--ds-flade-haevet);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-vaegt-fed);
  line-height: var(--ds-lh);
}
.atlas .atlas-post-kol .atlas-blok > .atlas-sektion-top h2 { margin: 0; font-size: var(--ds-fs-sm); font-weight: var(--ds-vaegt-fed); }
.atlas .atlas-post-kol .atlas-blok > .atlas-sektion-top > .atlas-knap { margin-block: 0; }
.atlas-post-kol .atlas-sektion-top > .atlas-knap { min-height: var(--ds-kontrol-s); padding: 0 var(--ds-2); font-size: var(--ds-fs-xs); }
.atlas .atlas-sektion-top .atlas-hjaelp { font-size: var(--ds-fs-xs); }

/* Box med rækker: navigationslister */
.udlaeg-raekkeliste {
  padding: 0;
  border: var(--ds-streg) solid var(--ds-kant);
  border-radius: var(--ds-r);
  background: var(--ds-flade);
  box-shadow: var(--ds-skygge-1);
  overflow: hidden;
}
.udlaeg-raekkeliste li + li { border-top: var(--ds-streg) solid var(--ds-kant); }
.udlaeg-raekkeliste a {
  min-height: calc(var(--ds-8) + var(--ds-2));
  padding: var(--ds-3) var(--ds-4);
  gap: var(--ds-3);
  border-radius: 0;
  color: var(--ds-tekst);
}
.udlaeg-raekkeliste a:hover { background: var(--ds-flade-haevet); }
.udlaeg-raekkeliste a:focus-visible { outline: var(--ds-streg-tyk) solid var(--ds-fokus); outline-offset: calc(var(--ds-streg-tyk) * -1); }
.udlaeg-raekke-titel { color: var(--ds-primaer-tekst); font-size: var(--ds-fs-sm); font-weight: var(--ds-vaegt-fed); }
.udlaeg-raekke-status { color: var(--ds-tekst-daempet); font-size: var(--ds-fs-xs); }
.udlaeg-raekke-status.er-staerk { color: var(--ds-tekst); font-size: var(--ds-fs-sm); font-weight: var(--ds-vaegt-fed); }
.udlaeg-raekke-status.er-haster {
  padding: 0 var(--ds-2);
  border-radius: var(--ds-r-rund);
  background: var(--ds-primaer);
  color: var(--ds-tekst-paa-primaer);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-vaegt-fed);
}
.udlaeg-raekke-chevron,
.udlaeg-raekke-pil { color: var(--ds-tekst-daempet); font-size: var(--ds-fs-lg); }

/* Blankslate */
.udlaeg-tom {
  padding: var(--ds-7) var(--ds-4);
  border: var(--ds-streg) dashed var(--ds-kant);
  border-radius: var(--ds-r);
  background: transparent;
  color: var(--ds-tekst-daempet);
  font-size: var(--ds-fs-sm);
}
.udlaeg-tom-titel,
.atlas-tom-titel { color: var(--ds-tekst); font-size: var(--ds-fs-lg); font-weight: var(--ds-vaegt-fed); }
.udlaeg-tom-tekst,
.atlas-tom-tekst { color: var(--ds-tekst-daempet); font-size: var(--ds-fs-sm); }


/* =====================================================================
   7. Label / StateLabel / CounterLabel
   Label: pille, 1px kant, 12px medium. Statusvarianter: svag statusflade, statusfarvet tekst og kant.
   ===================================================================== */
[data-theme] .sektion-status,
[data-theme] .udlaeg-status,
[data-theme] .udlaeg-gl-chip,
.atlas-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-1);
  min-height: calc(var(--ds-5) + var(--ds-streg) * 2);
  padding: 0 var(--ds-2);
  border: var(--ds-streg) solid var(--ds-kant);
  border-radius: var(--ds-r-rund);
  background: transparent;
  color: var(--ds-tekst-daempet);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-vaegt-medium);
  line-height: var(--ds-lh);
  white-space: nowrap;
}
[data-theme] :is(.sektion-status, .udlaeg-status, .udlaeg-gl-chip):is(.er-klar, .er-aktiv, .er-ok, .er-godkendt, .er-planlagt) {
  border-color: var(--ds-ok-kant);
  background: var(--ds-ok-svag);
  color: var(--ds-ok);
}
[data-theme] :is(.sektion-status, .udlaeg-status, .udlaeg-gl-chip):is(.er-indsendt, .er-venter, .er-afventer, .er-mellem, .er-uafklaret) {
  border-color: var(--ds-advarsel-kant);
  background: var(--ds-advarsel-svag);
  color: var(--ds-advarsel);
}
[data-theme] :is(.sektion-status, .udlaeg-status, .udlaeg-gl-chip):is(.er-betalt, .er-ny) {
  border-color: var(--ds-primaer-kant);
  background: var(--ds-primaer-svag);
  color: var(--ds-primaer-tekst);
}
[data-theme] :is(.sektion-status, .udlaeg-status, .udlaeg-gl-chip):is(.er-afvist, .er-droppet) {
  border-color: var(--ds-kant-gennemsigtig);
  background: var(--ds-fejl-fyldt);
  color: var(--ds-tekst-paa-primaer);
}
[data-theme] :is(.sektion-status, .udlaeg-status):is(.er-gemt, .er-inaktiv) {
  border-color: var(--ds-kant);
  background: var(--ds-flade);
  color: var(--ds-tekst-daempet);
}
h1 .udlaeg-status { font-size: var(--ds-fs-xs); vertical-align: middle; }

/* Label (large) med nøgle: Atlas-postens og bestillingens fakta */
.atlas .atlas-fakta { gap: var(--ds-2); margin-top: var(--ds-3); }
.atlas .atlas-fakta-chip {
  min-height: var(--ds-kontrol-s);
  gap: var(--ds-2);
  padding: 0 var(--ds-3);
  border: var(--ds-streg) solid var(--ds-kant);
  border-radius: var(--ds-r-rund);
  background: var(--ds-flade);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-vaegt-medium);
  box-shadow: var(--ds-skygge-1);
  flex-wrap: wrap;
  max-width: 100%;
  row-gap: 0;
}
.atlas .atlas-fakta-chip > span:first-child {
  color: var(--ds-tekst-daempet);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-vaegt-medium);
  letter-spacing: 0;
  text-transform: none;
}
.atlas .atlas-fakta-chip b { font-weight: var(--ds-vaegt-fed); gap: var(--ds-1); }
.atlas .atlas-fakta-chip.er-status b { color: var(--ds-advarsel); }

/* CounterLabel */
.tivoli-fane-antal {
  min-width: var(--ds-5);
  padding: 0 var(--ds-2);
  border: var(--ds-streg) solid transparent;
  border-radius: var(--ds-r-rund);
  background: var(--ds-neutral-svag);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-vaegt-medium);
  line-height: var(--ds-lh);
}
.tivoli-fane-antal.er-nul { border-color: var(--ds-kant); background: transparent; color: var(--ds-tekst-daempet); }
.tivoli-fane:is(.er-aktiv, [aria-current="page"], [aria-selected="true"], [aria-pressed="true"]) .tivoli-fane-antal:not(.er-nul) { background: var(--ds-neutral-svag); color: var(--ds-tekst); }


/* =====================================================================
   8. DataTable
   ===================================================================== */
.udlaeg-tabel-wrap,
.atlas-tabel-wrap {
  border: var(--ds-streg) solid var(--ds-kant);
  border-radius: var(--ds-r);
  background: var(--ds-flade);
  box-shadow: var(--ds-skygge-1);
}
.udlaeg-tabel,
.atlas-tabel { font-size: var(--ds-fs-sm); font-variant-numeric: tabular-nums; }
.udlaeg-tabel th,
.udlaeg-tabel td,
.atlas-tabel th,
.atlas-tabel td {
  padding: var(--ds-2) var(--ds-4);
  border-bottom: var(--ds-streg) solid var(--ds-kant);
  line-height: var(--ds-lh);
}
.udlaeg-tabel thead th,
.atlas-tabel thead th {
  background: var(--ds-flade-haevet);
  color: var(--ds-tekst-daempet);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-vaegt-fed);
}
.udlaeg-tabel tbody tr:last-child > *,
.atlas-tabel tbody tr:last-child > * { border-bottom: 0; }
.udlaeg-tabel tfoot th,
.udlaeg-tabel tfoot td { border-top: var(--ds-streg) solid var(--ds-kant); border-bottom: 0; color: var(--ds-tekst); font-size: var(--ds-fs-sm); font-weight: var(--ds-vaegt-fed); }
.udlaeg-tabel em,
.udlaeg-tabel td em,
.atlas-tabel em,
.udlaeg-tabel td.udlaeg-type { color: var(--ds-tekst-daempet); }
.udlaeg-tabel td a { font-weight: var(--ds-vaegt-medium); }
.udlaeg-admin-tabel tr.er-klikbar:hover td { background: var(--ds-flade-haevet); }
.udlaeg-tabel tr.er-afvist td:first-child { box-shadow: inset var(--ds-1) 0 0 var(--ds-fejl); }
.udlaeg-tabelfilter-antal { color: var(--ds-tekst-daempet); font-size: var(--ds-fs-xs); }


/* =====================================================================
   9. UnderlineNav (faner) og NavList (sidebar)
   ===================================================================== */
.tivoli-faner { gap: 0 var(--ds-2); border-bottom: var(--ds-streg) solid var(--ds-kant); }
.tivoli-fane {
  position: relative;
  min-height: calc(var(--ds-8) + var(--ds-2));
  padding: 0 var(--ds-2);
  border-bottom: var(--ds-streg-tyk) solid transparent;
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-vaegt-normal);
  gap: var(--ds-2);
}
.tivoli-fane:hover { color: var(--ds-tekst); border-bottom-color: var(--ds-kant-felt); text-decoration: none; }
.tivoli-fane:is(.er-aktiv, [aria-current="page"], [aria-selected="true"], [aria-pressed="true"]) {
  border-bottom-color: var(--ds-primaer);
  color: var(--ds-tekst);
  font-weight: var(--ds-vaegt-fed);
}
.tivoli-fane:focus-visible { outline: var(--ds-streg-tyk) solid var(--ds-fokus); outline-offset: calc(var(--ds-streg-tyk) * -1); border-radius: var(--ds-r); }
.tivoli-fane.er-aendret::after { width: var(--ds-2); height: var(--ds-2); margin-left: 0; background: var(--ds-primaer-tekst); }

/* NavList (docs-sidebar): 14/20 tekst i 32px rækker, 8px vandret padding, radius 6, hover neutral flade.
   Gruppe = ikon 16 + navn (semibold) + fold-pil til højre. Underpunkter (SubNav) indrykket, så teksten flugter
   med gruppenavnet, med en tynd linje under gruppeikonet. Aktiv = flade + semibold + 4px lilla bjælke uden for
   rækken, ligesom indholdsfortegnelsen (.ttoc i viden.css), så de to menuer er ens. */
@media (min-width: 769px) {
  /* Primer PageLayout.Pane medium (296px); 280px gav 224px efter zoom, så næsten alle titler brød */
  .to-kolonner:not(.sidebar-kollapset) { grid-template-columns: calc(var(--ds-7) * 9 + var(--ds-2)) minmax(0, 1fr); }
}
.sidebar-mobil-top { gap: var(--ds-2); margin-bottom: var(--ds-2); padding-left: var(--ds-2); }
.sidebar h2,
.sidebar-mobil-top h2 { margin: 0; color: var(--ds-tekst-daempet); font-size: var(--ds-fs-xs); font-weight: var(--ds-vaegt-fed); line-height: var(--ds-5); letter-spacing: 0; text-transform: none; }
.sidebar-kollaps {
  width: var(--ds-kontrol-m);
  height: var(--ds-kontrol-m);
  border-radius: var(--ds-r);
  color: var(--ds-tekst-daempet);
}
.sidebar-kollaps:hover { background: var(--ds-neutral-svag); color: var(--ds-tekst); }
.sidebar-kollaps .icon-lucide { width: var(--ds-4); height: var(--ds-4); }
.sidebar .sidebar-filter { width: 100%; height: var(--ds-kontrol-m); margin: 0 0 var(--ds-3); }
.sidebar-filter-tom { margin: var(--ds-1) var(--ds-2); color: var(--ds-tekst-daempet); font-size: var(--ds-fs-sm); }

/* Grupper og rækker står tæt; ingen skillestreg mellem grupperne */
.sidebar-kategori + .sidebar-kategori,
.kategori-posts li + li { margin-top: 0; }

/* Bogmærkede sider: let tonet Box over kategorierne, altid åben. Overskriften er en NavList group heading
   (12px, dæmpet, semibold) med ikonet på gruppeikonernes plads; rækkerne flugter med gruppenavnene. */
.sidebar-bogmaerker {
  margin: 0 0 var(--ds-3);
  padding: var(--ds-2) 0 var(--ds-1);
  border-radius: var(--ds-r);
  background: var(--ds-flade-haevet);
}
.sidebar-bogmaerker-titel {
  display: flex;
  align-items: center;
  gap: var(--ds-2);
  margin: 0;
  padding: 0 var(--ds-2) var(--ds-1);
  color: var(--ds-tekst-daempet);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-vaegt-fed);
  line-height: var(--ds-5);
}
.sidebar-bogmaerker-titel .icon-lucide { flex: none; width: var(--ds-4); height: var(--ds-4); }
.sidebar-bogmaerker .kategori-posts { box-shadow: none; }
.sidebar-bogmaerker-liste { margin: 0; padding: 0; list-style: none; }
.sidebar-bogmaerker-ikon { display: none; }
.sidebar-bogmaerker-tom {
  margin: 0;
  padding: 0 var(--ds-2) var(--ds-1);
  color: var(--ds-tekst-daempet);
  font-size: var(--ds-fs-xs);
  line-height: var(--ds-5);
}
.sidebar-bogmaerker-liste:not(:empty) + .sidebar-bogmaerker-tom { display: none; }

.kategori-toggle,
.sidebar-post-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ds-2);
  min-height: var(--ds-kontrol-m);
  padding: calc((var(--ds-kontrol-m) - var(--ds-5)) / 2) var(--ds-2);
  border-radius: var(--ds-r);
  background: transparent;
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-vaegt-normal);
  line-height: var(--ds-5);
  text-decoration: none;
  transition: background-color var(--ds-overgang);
}
.kategori-toggle,
.er-aktiv-kategori .kategori-toggle { background: transparent; color: var(--ds-tekst); font-weight: var(--ds-vaegt-fed); }
.kategori-ikon,
.kategori-toggle .chevron { display: inline-flex; color: var(--ds-tekst-daempet); opacity: 1; }
.kategori-ikon .icon-lucide,
.kategori-toggle .chevron .icon-lucide { width: var(--ds-4); height: var(--ds-4); }
.kategori-toggle:hover .kategori-ikon,
.er-aktiv-kategori .kategori-ikon { color: var(--ds-tekst-daempet); }
.kategori-toggle:hover,
.sidebar-post-link:hover { background: var(--ds-neutral-svag); color: var(--ds-tekst); text-decoration: none; }
.kategori-toggle:active,
.sidebar-post-link:active { background: var(--ds-kontrol-aktiv); }
.kategori-toggle:focus-visible,
.sidebar-post-link:focus-visible { outline: var(--ds-streg-tyk) solid var(--ds-fokus); outline-offset: calc(var(--ds-streg-tyk) * -1); }

/* SubNav: linjen står midt under gruppeikonet (8 + 16/2), teksten flugter med gruppenavnet (8 + 16 + 8) */
.kategori-posts {
  margin: 0 0 0 var(--ds-4);
  padding: 0 0 0 var(--ds-2);
  box-shadow: inset var(--ds-streg) 0 0 var(--ds-kant-svag);
}
/* Rail-flyout = ActionMenu: ingen SubNav-linje og ingen bjælke (den ville hænge i hover-broen uden for panelet) */
.sidebar-kollapset .kategori-posts { box-shadow: none; }
.sidebar-kollapset .sidebar-post-link::after { content: none; }
/* Flyout'en som Primer Overlay: overlagets flade og en tynd kant (via drop-shadow, fordi venstre kant er en gennemsigtig
   hover-bro i style.css), så den kan skelnes fra siden også i mørk */
.sidebar-kollapset .kategori-posts,
.sidebar-kollapset .kategori-posts[hidden] {
  background-color: var(--ds-overlag);
  border-radius: var(--ds-r-lg);
  filter: drop-shadow(0 0 var(--ds-streg) var(--ds-kant)) drop-shadow(0 var(--ds-2) var(--ds-4) var(--ds-baggrund-dialog));
}
/* Rail: Bogmærkede sider er et ikon øverst som kategoriernes; flyouten (style.css) viser bogmærkerne eller hjælpeteksten */
@media (min-width: 769px) {
  .sidebar-kollapset .sidebar-bogmaerker { margin: 0 0 var(--ds-1); padding: 0; border-radius: 0; background: transparent; }
  .sidebar-kollapset .sidebar-bogmaerker-titel { display: none; }
  .sidebar-kollapset .sidebar-bogmaerker-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--ds-kontrol-m);
    padding: 0;
    border: 0;
    border-radius: var(--ds-r);
    background: transparent;
    color: var(--ds-tekst-daempet);
    cursor: pointer;
  }
  .sidebar-kollapset .sidebar-bogmaerker-ikon .icon-lucide { width: var(--ds-4); height: var(--ds-4); }
  .sidebar-kollapset .sidebar-bogmaerker-ikon:hover { background: var(--ds-neutral-svag); color: var(--ds-tekst); }
  .sidebar-kollapset .sidebar-bogmaerker-ikon:focus-visible { outline: var(--ds-streg-tyk) solid var(--ds-fokus); outline-offset: calc(var(--ds-streg-tyk) * -1); }
  .sidebar-kollapset .sidebar-bogmaerker-tom { padding: var(--ds-1) var(--ds-2); }
}
.post-item .sidebar-post-link { padding-right: calc(var(--ds-6) + var(--ds-2)); }
.sidebar-post-link.er-aktiv-post,
.sidebar-post-link.is-active,
.sidebar-post-link[aria-current="page"] {
  background: var(--ds-neutral-svag);
  color: var(--ds-tekst);
  font-weight: var(--ds-vaegt-fed);
  box-shadow: none;
}
.sidebar-post-link:is(.er-aktiv-post, .is-active, [aria-current="page"])::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--ds-3));
  left: calc(var(--ds-2) * -1);
  width: var(--ds-1);
  height: var(--ds-6);
  border-radius: var(--ds-r);
  background: var(--ds-primaer);
}

/* Bogmærke = IconButton invisible small (24px) som trailing action */
.bogmaerke {
  right: var(--ds-1);
  width: var(--ds-6);
  height: var(--ds-6);
  border-radius: var(--ds-r);
  color: var(--ds-tekst-daempet);
}
.bogmaerke .icon-lucide { width: var(--ds-4); height: var(--ds-4); }
.bogmaerke:hover { background: var(--ds-kontrol-aktiv); color: var(--ds-tekst); }
.bogmaerke[aria-pressed="true"] { color: var(--ds-primaer-tekst); }


/* =====================================================================
   10. Flash / Banner
   ===================================================================== */
.udlaeg-besked,
.atlas-besked,
.mi-besked,
.udlaeg-advarsel {
  padding: var(--ds-3) var(--ds-4);
  border: var(--ds-streg) solid var(--ds-primaer-kant);
  border-radius: var(--ds-r);
  background: var(--ds-primaer-svag);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  line-height: var(--ds-lh);
}
.udlaeg-besked.er-ok,
.mi-besked.er-ok { border-color: var(--ds-ok-kant); background: var(--ds-ok-svag); color: var(--ds-tekst); }
.udlaeg-besked.er-fejl,
.atlas-besked.er-fejl,
.mi-besked.er-fejl,
.udlaeg-advarsel { border-color: var(--ds-fejl-kant); background: var(--ds-fejl-svag); color: var(--ds-tekst); }
[data-theme] .udlaeg-fejl-ikon,
[data-theme] .udlaeg-fejl-titel,
[data-theme] .udlaeg-advarsel svg,
[data-theme] .atlas-besked.er-fejl strong { color: var(--ds-fejl); }
.udlaeg-besked.er-fejl:focus { outline: var(--ds-streg-tyk) solid var(--ds-fejl); }


/* =====================================================================
   11. Overlay / ActionMenu
   overlag, 12px radius, floating-small; punkter 32px med 6px radius
   ===================================================================== */
.atlas .atlas-menu-pop,
.udlaeg-menu-liste,
.vaelger-combo-liste,
.vaelger-enkeltvalg ul,
.udlaeg-forslag,
.search-suggestions {
  gap: 0;
  padding: var(--ds-2);
  border: 0;
  border-radius: var(--ds-r-lg);
  background: var(--ds-overlag);
  box-shadow: var(--ds-skygge-3);
}
.atlas .atlas-menu-punkt,
.udlaeg-menu-punkt,
.vaelger-combo-valg,
.vaelger-enkeltvalg li[role="option"],
.udlaeg-forslag li {
  min-height: var(--ds-kontrol-m);
  padding: var(--ds-1) var(--ds-2);
  gap: var(--ds-2);
  border-radius: var(--ds-r);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
}
.atlas .atlas-menu-punkt:hover,
.udlaeg-menu-punkt:hover,
.udlaeg-menu-punkt:focus-visible,
.vaelger-combo-valg:hover,
.vaelger-combo-valg.er-aktiv,
.vaelger-enkeltvalg li:hover,
.vaelger-enkeltvalg li.er-aktiv,
.udlaeg-forslag li[aria-selected="true"] { background: var(--ds-neutral-svag); }
/* Søgeforslag: hover og piletast-valg skal kunne ses (style.css' surface-2 er næsten overlagets farve) */
.search-suggestions li a:hover,
.search-suggestions li.aktiv a { background: var(--ds-neutral-svag); border-radius: var(--ds-r); text-decoration: none; }
.atlas .atlas-menu-punkt[aria-current="true"],
.vaelger-enkeltvalg li[aria-selected="true"] { background: var(--ds-primaer-svag); }
.udlaeg-menu[open] > summary { background: var(--ds-kontrol-aktiv); }
[data-theme] .udlaeg-menu-punkt.er-farlig,
[data-theme] .indhold.atlas .atlas-menu-punkt.er-farlig { color: var(--ds-fejl); }
[data-theme] .udlaeg-menu-punkt.er-farlig:hover,
[data-theme] .indhold.atlas .atlas-menu-punkt.er-farlig:hover { background: var(--ds-fejl-svag); }


/* =====================================================================
   12. Dialog (Overlay, medium)
   ===================================================================== */
.atlas .atlas-dialog,
.udlaeg-modal {
  gap: var(--ds-3);
  padding: var(--ds-4);
  border: 0;
  border-radius: var(--ds-r-lg);
  background: var(--ds-overlag);
  color: var(--ds-tekst);
  box-shadow: var(--ds-skygge-3);
  font-size: var(--ds-fs-sm);
}
.atlas .atlas-dialog h2,
.udlaeg-modal h2 { margin: 0 0 var(--ds-2); font-size: var(--ds-fs-sm); font-weight: var(--ds-vaegt-fed); }
.udlaeg-modal::backdrop,
.atlas-dialog-baggrund { background: var(--ds-baggrund-dialog); }

/* Bekræftelsesdialogen (udlaeg-modal) som Primers ConfirmationDialog: titel i normal størrelse, brødtekst uden farvet boks,
   knapperne til højre med Annullér til venstre og handlingen til højre, og en farlig handling som fyldt rød knap. Gælder alle
   moduler, der bruger .udlaeg-modal. */
.udlaeg-modal { width: min(28rem, calc(100vw - var(--ds-6))); box-sizing: border-box; padding: var(--ds-5); line-height: var(--ds-lh); }
.udlaeg-modal h2 { margin: 0 0 var(--ds-3); font-size: var(--ds-fs-lg); line-height: 1.3; }
.udlaeg-modal .udlaeg-advarsel { display: block; margin: 0; padding: 0; border: 0; background: none; color: var(--ds-tekst-daempet); font-size: var(--ds-fs-sm); }
.udlaeg-modal .udlaeg-advarsel > svg { display: none; }
.udlaeg-modal .udlaeg-advarsel p { margin: 0; }
.udlaeg-modal .udlaeg-advarsel p + p { margin-top: var(--ds-2); }
.udlaeg-modal .udlaeg-handlinger { flex-direction: row-reverse; justify-content: flex-start; flex-wrap: wrap; gap: var(--ds-2); margin: var(--ds-5) 0 0; }
[data-theme] .udlaeg-modal .udlaeg-knap.er-farlig,
[data-theme] .udlaeg-modal .udlaeg-knap.er-farlig:hover { border-color: var(--ds-kant-gennemsigtig); background: var(--ds-fejl-fyldt); color: var(--ds-tekst-paa-primaer); }
@media (max-width: 480px) {
  .udlaeg-modal .udlaeg-handlinger { flex-direction: column; align-items: stretch; }
  .udlaeg-modal .udlaeg-handlinger .udlaeg-knap { justify-content: center; }
}


/* =====================================================================
   13. Timeline
   2px streg, condensed 16px-ikoner for hændelser, kommentar = Box med header og pil mod avataren
   ===================================================================== */
.atlas .atlas-tidslinje { gap: 0; margin-top: 0; }
.atlas .atlas-tidslinje::before {
  left: calc(var(--ds-7) / 2 - var(--ds-streg));
  width: var(--ds-streg-tyk);
  border-radius: 0;
  background: var(--ds-kant-svag);
}
.atlas .atlas-tidslinje > li {
  grid-template-columns: var(--ds-7) minmax(0, 1fr);
  gap: var(--ds-3);
  padding: var(--ds-2) 0;
  font-size: var(--ds-fs-sm);
}
.atlas .atlas-tidslinje > li.er-kommentar { padding: var(--ds-3) 0; }
.atlas .atlas-tl-node {
  width: var(--ds-6);
  height: var(--ds-6);
  margin-top: 0;
  border: 0;
  border-radius: var(--ds-r-rund);
  background: var(--ds-flade);
  color: var(--ds-tekst-daempet);
}
.atlas .atlas-tl-node svg { width: var(--ds-4); height: var(--ds-4); }
.atlas .atlas-tidslinje li.er-ok .atlas-tl-node { border: 0; background: var(--ds-flade); color: var(--ds-ok); }
.atlas .atlas-tidslinje li.er-fejl .atlas-tl-node { border: 0; background: var(--ds-flade); color: var(--ds-fejl); }
.atlas .atlas-tl-linje { color: var(--ds-tekst-daempet); line-height: var(--ds-lh); }
.atlas .atlas-tl-linje strong { color: var(--ds-tekst); font-weight: var(--ds-vaegt-fed); }
.atlas .atlas-tidslinje time { color: var(--ds-tekst-daempet); font-size: var(--ds-fs-xs); }
.atlas .atlas-tl-indhold > time { opacity: 1; }
.atlas .atlas-tl-citat { margin-top: var(--ds-1); padding-left: var(--ds-3); border-left: var(--ds-streg-tyk) solid var(--ds-kant); color: var(--ds-tekst-daempet); font-style: normal; }
.atlas .atlas-tl-node.er-person { width: var(--ds-7); height: var(--ds-7); background: none; }
.atlas .atlas-tl-node.er-person .person-billede { width: var(--ds-7); height: var(--ds-7); box-shadow: 0 0 0 var(--ds-streg-tyk) var(--ds-flade); }
.atlas .atlas-tl-kort {
  padding: 0;
  border: var(--ds-streg) solid var(--ds-kant);
  border-radius: var(--ds-r);
  background: var(--ds-flade);
  box-shadow: var(--ds-skygge-1);
}
.atlas .atlas-tl-kort::before {
  left: calc(var(--ds-2) * -1 + var(--ds-streg) * -1);
  top: var(--ds-3);
  width: var(--ds-3);
  height: var(--ds-3);
  border-left: var(--ds-streg) solid var(--ds-kant);
  border-bottom: var(--ds-streg) solid var(--ds-kant);
  background: var(--ds-flade-haevet);
}
.atlas .atlas-tl-hvem {
  gap: 0 var(--ds-2);
  padding: var(--ds-2) var(--ds-4);
  border-bottom: var(--ds-streg) solid var(--ds-kant);
  border-radius: calc(var(--ds-r) - var(--ds-streg)) calc(var(--ds-r) - var(--ds-streg)) 0 0;
  background: var(--ds-flade-haevet);
  color: var(--ds-tekst-daempet);
  font-size: var(--ds-fs-sm);
}
.atlas .atlas-tl-hvem strong { color: var(--ds-tekst); font-weight: var(--ds-vaegt-fed); }
.atlas .atlas-tl-hvem time { font-size: var(--ds-fs-sm); }
.atlas .atlas-tl-tekst {
  margin: 0;
  padding: var(--ds-3) var(--ds-4);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  line-height: var(--ds-lh);
}
.atlas .atlas-kommentarform { gap: var(--ds-2); margin-bottom: var(--ds-4); }
.atlas .atlas-kommentarform textarea { min-height: calc(var(--ds-8) * 2); }

/* Udlægs kommentarer: hver kommentar som en Box (samme udtryk som tidslinjens kommentarer) */
.udlaeg-traad { gap: var(--ds-3); }
.udlaeg-traad li,
.udlaeg-traad li.er-egen {
  padding: var(--ds-3) var(--ds-4);
  border: var(--ds-streg) solid var(--ds-kant);
  border-radius: var(--ds-r);
  background: var(--ds-flade);
  box-shadow: var(--ds-skygge-1);
  font-size: var(--ds-fs-sm);
}


/* =====================================================================
   14. Avatar
   ===================================================================== */
.person { gap: var(--ds-2); }
.person-billede { box-shadow: 0 0 0 var(--ds-streg) var(--ds-kant-gennemsigtig); }
.person-billede.er-initialer { font-size: var(--ds-fs-xs); font-weight: var(--ds-vaegt-fed); letter-spacing: 0; }
.atlas .atlas-personer { gap: var(--ds-3); }
.atlas .atlas-personer .person { font-size: var(--ds-fs-sm); font-weight: var(--ds-vaegt-fed); }
.atlas .atlas-personer .person-billede { width: var(--ds-6); height: var(--ds-6); }
.atlas .atlas-personer small { margin-left: calc(var(--ds-6) + var(--ds-2)); color: var(--ds-tekst-daempet); font-size: var(--ds-fs-xs); }
.modulrolle-personer { border-top-color: var(--ds-kant); }
.modulrolle-person { min-height: calc(var(--ds-8) + var(--ds-2)); padding: var(--ds-2) 0 var(--ds-2) var(--ds-2); border-bottom-color: var(--ds-kant); }
.modulrolle-navn { font-weight: var(--ds-vaegt-fed); }
.modulrolle-mail { color: var(--ds-tekst-daempet); font-size: var(--ds-fs-xs); }


/* =====================================================================
   15. Postside: Atlas-posten og bestillingen deler opbygningen
   ===================================================================== */
.atlas-post-top { margin-bottom: var(--ds-4); gap: var(--ds-2); }
.atlas-post-handlinger { gap: var(--ds-2); }
.atlas-post-hoved {
  margin-bottom: var(--ds-6);
  padding-bottom: var(--ds-4);
  border-bottom: var(--ds-streg) solid var(--ds-kant);
}
.atlas-post-hoved h1 {
  margin: 0 0 var(--ds-2);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-xl);
  font-weight: var(--ds-vaegt-fed);
  line-height: var(--ds-lh-tet);
}
.atlas-meta { margin: 0; color: var(--ds-tekst-daempet); font-size: var(--ds-fs-sm); }
.atlas-meta a { font-weight: var(--ds-vaegt-medium); }

.atlas .atlas-post-kol { gap: var(--ds-6); }
.atlas .atlas-post-venstre,
.atlas .atlas-post-hoejre { gap: var(--ds-4); grid-template-columns: minmax(0, 1fr); }

.atlas-tekst { color: var(--ds-tekst); font-size: var(--ds-fs); line-height: var(--ds-lh); }
.atlas-felter-dl {
  margin-top: var(--ds-4);
  padding-top: var(--ds-3);
  border-top: var(--ds-streg) solid var(--ds-kant-svag);
  font-size: var(--ds-fs-sm);
}
.atlas-felter-dl dt { color: var(--ds-tekst-daempet); }
.atlas-status-raekke { gap: var(--ds-3); }
.atlas-statusknap svg { color: var(--ds-advarsel); }
.atlas .atlas-minikort {
  border: var(--ds-streg) solid var(--ds-kant);
  border-radius: var(--ds-r);
  background: var(--ds-nedsaenket);
}
.atlas .atlas-sektion-top + .atlas-minikort { margin-top: 0; }


/* =====================================================================
   16. Leaflet: zoomknapper som Button-gruppe (kun farver, radius og kant)
   ===================================================================== */
.leaflet-container .leaflet-bar {
  border: var(--ds-streg) solid var(--ds-kant-felt);
  border-radius: var(--ds-r);
  box-shadow: var(--ds-skygge-knap);
}
.leaflet-container .leaflet-bar a {
  background: var(--ds-kontrol);
  border-bottom-color: var(--ds-kant);
  color: var(--ds-tekst);
}
.leaflet-container .leaflet-bar a:hover { background: var(--ds-kontrol-hover); }
.leaflet-container .leaflet-bar a:first-child { border-top-left-radius: calc(var(--ds-r) - var(--ds-streg)); border-top-right-radius: calc(var(--ds-r) - var(--ds-streg)); }
.leaflet-container .leaflet-bar a:last-child { border-bottom-left-radius: calc(var(--ds-r) - var(--ds-streg)); border-bottom-right-radius: calc(var(--ds-r) - var(--ds-streg)); }
.leaflet-container .leaflet-control-attribution { background: var(--ds-overlag); color: var(--ds-tekst-daempet); }
.leaflet-container .leaflet-control-attribution a { color: var(--ds-primaer-tekst); }


/* =====================================================================
   17. Telefon: Primer size="large" som tryk-mål
   ===================================================================== */
@media (max-width: 768px) {
  .site-wrap.container { padding-top: var(--ds-4); }
  .udlaeg-knap,
  .atlas .atlas-knap,
  .modulrolle-knap,
  .mi-knap,
  .udlaeg-fold > summary,
  .menu-toggle,
  .menu-close,
  .sidebar-close,
  .sidebar-mobile-toggle { min-height: var(--ds-kontrol-l); }
  .udlaeg-felt input[type="text"],
  .udlaeg-felt input[type="date"],
  .udlaeg-felt input[type="number"],
  .udlaeg-felt input[type="search"],
  .udlaeg-felt select { height: var(--ds-kontrol-l); }
  .indhold h1,
  .atlas-post-hoved h1 { font-size: var(--ds-fs-lg); }
  .udlaeg-boks:not(.udlaeg-bilag-boks),
  .udlaeg-gruppe.er-kort { padding: var(--ds-3); }
}