/* WhoHasWhat — "Segl og register".
   Egen identitet: blækmarine + porcelæn + seglrød (notar/revisor), til
   beslutningstagere. Samme håndværksniveau som weakestlink.io, andet udtryk.
   Ingen inline styles — CSP uden unsafe-inline. */

:root {
  /* flader — køligt porcelæn, ikke varm creme */
  --c-paper:       #F4F4F1;
  --c-surface:     #FFFFFF;
  --c-surface-2:   #EAEAE5;
  --c-border:      #DEDED7;
  --c-border-strong:#C6C6BC;

  /* blæk — marine, ikke sort */
  --c-ink:         #151A2D;
  --c-ink-2:       #3A4256;
  --c-ink-mute:    #63697D;

  /* dybt bånd (hero, footer) */
  --c-deep:        #101423;
  --c-deep-2:      #1B2138;
  --c-on-deep:     #EDEEF2;
  --c-on-deep-mute:#9BA2B8;

  /* segl — brandaccent, bruges sparsomt og modigt */
  --c-seal:        #A32E3E;
  --c-seal-bright: #C8404F;
  --c-seal-tint:   #F6E4E5;
  --c-seal-on-deep:#E8737F;

  /* semantik */
  --c-ok:          #2C6E52;
  --c-ok-tint:     #DFEEE6;
  --c-warn:        #96591A;
  --c-warn-tint:   #F7EBD8;
  --c-info:        #2C5C77;
  --c-info-tint:   #DEEAF1;
  --c-gruppe:      #5B4E8C;
  --c-gruppe-tint: #E7E4F2;

  /* type */
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --t-2xs: .6875rem; --t-xs: .75rem; --t-sm: .8125rem;
  --t-md: .875rem; --t-base: .95rem; --t-body: 1rem;
  --t-lg: clamp(1.05rem, 1.4vw, 1.2rem);
  --t-xl: clamp(1.2rem, 2vw, 1.45rem);
  --t-2xl: clamp(1.5rem, 3vw, 2rem);
  --t-3xl: clamp(1.9rem, 4vw, 2.7rem);
  --t-hero: clamp(2.4rem, 6.2vw, 4.6rem);

  /* rum og form */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-8: 3rem; --s-10: 4.5rem; --s-12: 7rem;
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px;

  --sh-1: 0 1px 2px rgba(21,26,45,.06), 0 1px 3px rgba(21,26,45,.04);
  --sh-2: 0 4px 6px -2px rgba(21,26,45,.07), 0 12px 24px -8px rgba(21,26,45,.14);
  --sh-3: 0 24px 56px -28px rgba(21,26,45,.38);

  --ease: cubic-bezier(.2,.7,.2,1);
  --focus: 0 0 0 2px var(--c-paper), 0 0 0 4.5px var(--c-seal);
  --maxw: 70rem;
  --topbar-h: 3.4rem;

  /* kanter og støttefarver til typemærker — var hardkodede hex */
  --b-seal: #EBC9CC; --b-info: #C7DCE8; --b-gruppe: #D2CCE6;
  --b-pc: #C9DAD8;   --b-ok: #C6E2D4;   --b-warn: #E8D4B4;
  --c-pc: #2F5F5A;   --c-pc-tint: #E4EBEA;
  --c-post: #7A4E6B; --c-post-tint: #F2E4EE; --b-post: #E3CCDC;
  --c-hover: #E9E9E2; --c-print-linje: #B9B9AE;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-paper);
  min-height: 100dvh;
  font-feature-settings: 'cv05' 1;
}

a { color: var(--c-ink); text-decoration-color: var(--c-seal); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--c-seal); }
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus); }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }

/* Fælles: seglmærket (brandmark) */
.segl {
  width: 1.55em; height: 1.55em; border-radius: 50%; flex-shrink: 0;
  background: var(--c-seal);
  display: inline-grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.32), inset 0 0 0 3px var(--c-seal);
  clip-path: polygon(50% 0%,60% 4%,69% 2%,77% 9%,86% 10%,91% 18%,98% 23%,98% 33%,
    100% 42%,96% 50%,100% 58%,98% 67%,98% 77%,91% 82%,86% 90%,77% 91%,69% 98%,
    60% 96%,50% 100%,40% 96%,31% 98%,23% 91%,14% 90%,9% 82%,2% 77%,2% 67%,
    0% 58%,4% 50%,0% 42%,2% 33%,2% 23%,9% 18%,14% 10%,23% 9%,31% 2%,40% 4%);
}
.segl::after {
  content: ''; width: .42em; height: .42em; border-radius: 1.5px;
  background: var(--c-on-deep); transform: rotate(45deg);
}

/* ---------- Topbjælke ---------- */
.top {
  background: var(--c-deep); color: var(--c-on-deep);
  padding: var(--s-3) var(--s-5);
  display: flex; align-items: center; gap: var(--s-4);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.top .maerke {
  font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0;
  color: var(--c-on-deep); text-decoration: none;
  display: inline-flex; align-items: center; gap: .55rem;
}
.top .maerke b { color: var(--c-seal-on-deep); font-weight: 400; }
.demo-badge {
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .12em;
  background: rgba(232,115,127,.16); color: var(--c-seal-on-deep);
  border: 1px solid rgba(232,115,127,.35);
  padding: .2rem .6rem; border-radius: var(--r-sm); font-weight: 500;
}
.top .firma { margin-left: auto; font-size: var(--t-sm); color: var(--c-on-deep-mute); }

/* ---------- Skelet ---------- */
/* min-width:0 — uden den kan grid-børn ikke krympe under deres indhold,
   og den vandrette sidenav sprænger hele dokumentet på mobil. */
.skelet { display: grid; grid-template-columns: 244px 1fr; min-height: calc(100dvh - var(--topbar-h)); }
.skelet > * { min-width: 0; }

.sidenav {
  padding: var(--s-5) var(--s-3);
  border-right: 1px solid var(--c-border);
  background: var(--c-surface);
  display: flex; flex-direction: column; gap: 1px;
}
.sidenav a {
  display: block; padding: .5rem .8rem; border-radius: var(--r-sm);
  text-decoration: none; color: var(--c-ink-2); font-size: .92rem; font-weight: 400;
  white-space: nowrap; border-left: 2px solid transparent;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.sidenav a:hover { background: var(--c-paper); color: var(--c-ink); }
.sidenav a.aktiv {
  background: var(--c-paper); color: var(--c-ink); font-weight: 600;
  border-left-color: var(--c-seal);
}
.sidenav .navtitel {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-ink-mute);
  padding: var(--s-5) .8rem var(--s-2);
}
.sidenav .navtitel:first-child { padding-top: 0; }

main { padding: var(--s-6) var(--s-8) var(--s-12); max-width: var(--maxw); }

/* Tabeller må aldrig sprænge siden på mobil */
.tabelrum { overflow-x: auto; -webkit-overflow-scrolling: touch; }
main h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-3xl); letter-spacing: -0.01em; margin: 0 0 var(--s-2); }
main h2 { font-size: var(--t-xl); margin: var(--s-8) 0 var(--s-3); }
.undertekst { color: var(--c-ink-mute); margin: 0 0 var(--s-5); max-width: 54ch; }

/* ---------- Scroll-reveal ----------
   Moderne browsere: ren CSS via animation-timeline: view().
   Firefox m.fl.: IntersectionObserver i /reveal.js sætter .er-synlig.
   Uden JS og uden view(): alt er synligt fra start — aldrig skjult indhold. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rejs-op linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
  @supports not (animation-timeline: view()) {
    html.js-reveal .reveal { opacity: 0; transform: translateY(14px);
      transition: opacity .5s var(--ease), transform .5s var(--ease); }
    html.js-reveal .reveal.er-synlig { opacity: 1; transform: none; }
    html.js-reveal .reveal:nth-child(2) { transition-delay: 110ms; }
    html.js-reveal .reveal:nth-child(3) { transition-delay: 220ms; }
    html.js-reveal .reveal:nth-child(4) { transition-delay: 330ms; }
    html.js-reveal .reveal:nth-child(5) { transition-delay: 440ms; }
    html.js-reveal .reveal:nth-child(6) { transition-delay: 550ms; }
  }
}
@keyframes rejs-op { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal:nth-child(2) { animation-range: entry 14% entry 56%; }
    .reveal:nth-child(3) { animation-range: entry 28% entry 70%; }
    .reveal:nth-child(4) { animation-range: entry 40% entry 82%; }
    .reveal:nth-child(5) { animation-range: entry 50% entry 92%; }
    .reveal:nth-child(6) { animation-range: entry 58% entry 98%; }
  }
}

/* Seglet der "stemples" ved sideindlæsning */
@keyframes segl-stempel {
  0%   { transform: scale(1.5) rotate(-14deg); opacity: 0; }
  55%  { transform: scale(.94) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
/* Linje der løber gennem tabelhovedet — "vi aflæser" */
@keyframes aflaes {
  from { transform: translateX(-100%); } to { transform: translateX(100%); }
}

/* ---------- Nøgletal ---------- */
.fliser { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 1px;
          background: var(--c-border); border: 1px solid var(--c-border);
          border-radius: var(--r-md); overflow: hidden; margin: var(--s-5) 0; }
.flise { background: var(--c-surface); padding: var(--s-4) var(--s-5); }
.flise .tal {
  font-family: var(--font-mono); font-size: 1.75rem; font-weight: 500;
  letter-spacing: -0.03em; color: var(--c-ink); font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.flise.alarm { box-shadow: inset 3px 0 0 var(--c-seal); }
.flise.alarm .tal { color: var(--c-seal); }
.flise .navn { font-size: var(--t-sm); color: var(--c-ink-mute); margin-top: .15rem; }

.kort { background: var(--c-surface); border: 1px solid var(--c-border);
        border-radius: var(--r-lg); padding: var(--s-5) var(--s-5); margin: var(--s-4) 0;
        box-shadow: var(--sh-1); }

/* ---------- Fund ---------- */
.fund { list-style: none; padding: 0; margin: var(--s-4) 0; display: flex; flex-direction: column; gap: var(--s-2); }
.fund li {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
  display: flex; gap: var(--s-4); align-items: flex-start;
  box-shadow: var(--sh-1);
  transition: box-shadow 180ms var(--ease), border-color 180ms var(--ease);
  position: relative; overflow: hidden;
}
.fund li::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--c-seal); opacity: .85;
}
.fund li:hover { box-shadow: var(--sh-2); border-color: var(--c-border-strong); }
.fund .nr {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  color: var(--c-ink-mute); padding-top: .28rem; min-width: 1.4rem;
  font-variant-numeric: tabular-nums;
}
.fund .hvad { font-weight: 600; display: block; letter-spacing: -0.005em; }
.fund .hvorfor { color: var(--c-ink-mute); font-size: .9rem; display: block; margin-top: .1rem; }

/* ---------- Typemærker ---------- */
.brik {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 500;
  padding: .18rem .5rem; border-radius: var(--r-sm);
  background: var(--c-surface-2); color: var(--c-ink-2);
  border: 1px solid var(--c-border); white-space: nowrap;
}
.brik::before { content: ''; width: 6px; height: 6px; border-radius: 1px; background: var(--c-ink-mute); }
.brik.adminrolle { background: var(--c-seal-tint); color: var(--c-seal); border-color: var(--b-seal); }
.brik.adminrolle::before { background: var(--c-seal); }
.brik.mappe, .brik.websted { background: var(--c-info-tint); color: var(--c-info); border-color: var(--b-info); }
.brik.mappe::before, .brik.websted::before { background: var(--c-info); }
.brik.gruppe { background: var(--c-gruppe-tint); color: var(--c-gruppe); border-color: var(--b-gruppe); }
.brik.gruppe::before { background: var(--c-gruppe); }
.brik.pc { background: var(--c-pc-tint); color: var(--c-pc); border-color: var(--b-pc); }
.brik.pc::before { background: var(--c-pc); border-radius: 50%; }
.brik.postkasse { background: var(--c-post-tint); color: var(--c-post); border-color: var(--b-post); }
.brik.postkasse::before { background: var(--c-post); border-radius: 50% 50% 2px 2px; }
.brik.program { background: var(--c-ok-tint); color: var(--c-ok); border-color: var(--b-ok); }
.brik.program::before { background: var(--c-ok); }
.brik.aktiv-ting, .brik.system { background: var(--c-warn-tint); color: var(--c-warn); border-color: var(--b-warn); }
.brik.aktiv-ting::before, .brik.system::before { background: var(--c-warn); }
.brik.system::before { border-radius: 50%; }

/* ---------- Status ---------- */
.status { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em;
          padding: .16rem .45rem; border-radius: var(--r-sm); font-weight: 500; white-space: nowrap; }
/* Farvelov: ét ord = én farve, navngivet efter BETYDNING.
   god = i orden · krav = kræver handling · advarsel = bemærk · info = ændring · neutral */
.status.god { background: var(--c-ok-tint); color: var(--c-ok); }
.status.krav { background: var(--c-seal); color: #fff; }
.status.advarsel { background: var(--c-warn-tint); color: var(--c-warn); }
.status.info { background: var(--c-info-tint); color: var(--c-info); }
.status.neutral { background: var(--c-surface-2); color: var(--c-ink-mute); }

/* ---------- Tabeller: registret ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0;
        background: var(--c-surface); border: 1px solid var(--c-border);
        border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); }
thead { position: relative; }
thead::after {
  content: ''; position: absolute; inset: auto 0 -1px 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-seal), transparent);
  animation: aflaes 2.6s var(--ease) .3s 1 both;
}
@media (prefers-reduced-motion: reduce) { thead::after { animation: none; opacity: 0; } }
th {
  text-align: left; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-mute);
  font-weight: 500; padding: .6rem var(--s-4);
  border-bottom: 1px solid var(--c-border-strong); background: var(--c-paper);
}
td { padding: .68rem var(--s-4); border-bottom: 1px solid var(--c-border); vertical-align: baseline; font-size: .95rem; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 100ms var(--ease); }
tbody tr:hover, tbody tr:focus-within { background: var(--c-hover); box-shadow: inset 2px 0 0 var(--c-ink); }
td.dato, .dato { font-family: var(--font-mono); font-size: .78rem; color: var(--c-ink-mute); font-variant-numeric: tabular-nums; }
td .detalje { color: var(--c-ink-mute); font-size: .85rem; margin-top: .1rem; }
.via { color: var(--c-ink-mute); font-size: .82rem; font-style: italic; }

/* ---------- Personhoved ---------- */
.personhoved { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-2) 0 var(--s-5);
               padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-border); }
.initialbrik {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--c-deep); color: var(--c-on-deep);
  font-family: var(--font-mono); font-weight: 500; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.initialbrik.stoppet { background: var(--c-surface-2); color: var(--c-ink-mute); box-shadow: inset 0 0 0 1px var(--c-border-strong); }
.personhoved .rolle { color: var(--c-ink-mute); font-size: .9rem; }

/* ---------- Tidsrejse + formularer ---------- */
.tidsrejse {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-left: 2px solid var(--c-ink); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); margin: var(--s-4) 0 var(--s-5);
}
.tidsrejse label { font-size: var(--t-md); color: var(--c-ink-2); font-weight: 500; }
.tidsrejse > * { min-width: 0; }
input[type='date'], select {
  font-family: var(--font-mono); font-size: var(--t-sm); color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm); padding: .42rem .55rem; line-height: 1.4;
}
select {
  appearance: none; padding-right: 1.9rem;
  max-width: 100%; min-width: 0; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-ink-2) 50%),
                    linear-gradient(135deg, var(--c-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
input[type='date']::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input[type='date']::-webkit-calendar-picker-indicator:hover { opacity: 1; }

button, .knap {
  font-family: var(--font-sans); font-weight: 600; font-size: .9rem;
  background: var(--c-ink); color: var(--c-on-deep); border: 1px solid var(--c-ink);
  border-radius: var(--r-sm); padding: .48rem 1rem; cursor: pointer;
  text-decoration: none; display: inline-block; line-height: 1.4;
  transition: background 140ms var(--ease), transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
button:hover, .knap:hover { background: var(--c-deep-2); color: var(--c-on-deep); transform: translateY(-1px); box-shadow: var(--sh-2); }
button:active, .knap:active { transform: none; box-shadow: none; }
.knap.stor { font-size: 1rem; padding: .72rem 1.5rem; }
.knap.sekundaer { background: transparent; color: var(--c-ink); border-color: var(--c-border-strong); }
.knap.sekundaer:hover { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-ink); }

/* ---------- Landingsside: mørkt hero-bånd ---------- */
.hero {
  background:
    radial-gradient(46rem 30rem at 78% -20%, rgba(200,64,79,.20) 0%, transparent 62%),
    radial-gradient(38rem 26rem at 6% 108%, rgba(70,90,150,.16) 0%, transparent 60%),
    var(--c-deep);
  color: var(--c-on-deep);
  padding: clamp(3.5rem, 9vw, 7rem) var(--s-5) clamp(7rem, 13vw, 11rem);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,115,127,.5), transparent);
}
.hero .indhold { max-width: 48rem; margin: 0 auto; }
.hero .kicker {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--c-seal-on-deep);
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: var(--s-4);
}
.hero .kicker .segl { animation: segl-stempel 700ms var(--ease) both; }
.hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-hero); line-height: 1.04; letter-spacing: -0.02em;
  margin: 0 0 var(--s-5); color: #fff; text-wrap: balance;
}
.hero h1 em {
  font-style: italic; color: var(--c-seal-on-deep);
  background: linear-gradient(180deg, transparent 74%, rgba(232,115,127,.22) 74%);
}
.hero .manchet {
  font-size: var(--t-lg); color: var(--c-on-deep-mute); margin: 0 0 var(--s-6);
  max-width: 44ch; line-height: 1.65;
}
.hero .valg { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.hero .knap { background: var(--c-seal); border-color: var(--c-seal); color: #fff; }
.hero .knap:hover { background: var(--c-seal-bright); border-color: var(--c-seal-bright); }
.hero .knap.sekundaer { background: transparent; color: var(--c-on-deep); border-color: rgba(255,255,255,.28); }
.hero .knap.sekundaer:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.5); }

/* ---------- Bevis: rapporten som overlapper hero-båndet ---------- */
.bevis { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5); }
.bevisark { margin: clamp(-5.5rem, -7vw, -3.5rem) auto var(--s-8); max-width: 40rem; }
.bevisark figcaption {
  font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-on-deep-mute);
  text-align: center; margin-bottom: var(--s-3);
}
.ark {
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm); box-shadow: var(--sh-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
  transform: rotate(-.4deg);
}
.arkhoved {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid var(--c-ink); padding-bottom: .45rem; margin-bottom: var(--s-4);
}
.arkhoved .afsender { display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-size: 1.05rem; }
.arkhoved .sagsnr { font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: .1em; color: var(--c-ink-mute); }
.arkbrød { margin: 0 0 var(--s-4); font-size: var(--t-base); }
.arktabel { box-shadow: none; border: none; }
.arktabel td { padding: .4rem 0; font-size: var(--t-sm); border-bottom: 1px solid var(--c-border); }
.arktabel td:nth-child(2), .arktabel td:last-child { text-align: right; white-space: nowrap; width: 1%; padding-left: var(--s-3); }
.arktabel tbody tr:hover { background: none; box-shadow: none; }
.arkfod { margin: var(--s-3) 0 0; font-size: var(--t-2xs); color: var(--c-ink-mute);
  font-family: var(--font-mono); }

/* ---------- Bånd: sådan virker det ---------- */
.baand { background: var(--c-surface-2); border-block: 1px solid var(--c-border); }
.baandindhold { max-width: var(--maxw); margin: 0 auto; padding: var(--s-8) var(--s-5); }
.baandindhold h2 { margin-top: 0; font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-2xl); }
.trin { list-style: none; padding: 0; margin: var(--s-5) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-5); }
.trin li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-3); row-gap: .15rem; align-items: baseline; }
.trin .trinnr {
  grid-row: span 2; font-family: var(--font-mono); font-size: var(--t-sm);
  color: var(--c-seal); border: 1px solid var(--c-seal); border-radius: 50%;
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center; align-self: start;
}
.trin b { font-size: 1.02rem; }
.trin span:last-child { color: var(--c-ink-mute); font-size: var(--t-base); }

/* ---------- Afslutning ---------- */
.afslut { background: var(--c-deep); color: var(--c-on-deep); }
.afslutindhold { max-width: 44rem; margin: 0 auto; padding: var(--s-10) var(--s-5); text-align: center; }
.afslutindhold h2 { margin: 0 0 var(--s-2); font-family: var(--font-display);
  font-weight: 400; font-size: var(--t-2xl); color: #fff; }
.afslutindhold p { color: var(--c-on-deep-mute); margin: 0 0 var(--s-5); }
.afslutindhold .valg { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
.afslutindhold .knap { background: var(--c-seal); border-color: var(--c-seal); color: #fff; }
.afslutindhold .knap:hover { background: var(--c-seal-bright); border-color: var(--c-seal-bright); }
.afslutindhold .knap.sekundaer { background: transparent; color: var(--c-on-deep); border-color: rgba(255,255,255,.28); }
.afslutindhold .knap.sekundaer:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.5); }

/* Løfter: bånd i porcelæn under hero'en */
.loefter {
  max-width: var(--maxw); margin: 0 auto; padding: var(--s-8) var(--s-5) var(--s-10);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-5);
}
.loefte { border-top: 2px solid var(--c-ink); padding-top: var(--s-3); }
.loefte:nth-child(2) { border-top-color: var(--c-seal); }
.loefte b { display: block; margin-bottom: var(--s-2); font-size: 1.02rem; font-weight: 600; }
.loefte span { color: var(--c-ink-mute); font-size: .93rem; }

.sidefod { border-top: 1px solid var(--c-border); padding: var(--s-5); text-align: center;
           color: var(--c-ink-mute); font-size: var(--t-sm); }

.konklusion {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-seal); border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-4); box-shadow: var(--sh-1);
}
.konklusion b { color: var(--c-seal); }

.tom { color: var(--c-ink-mute); background: var(--c-surface);
       border: 1px dashed var(--c-border-strong); border-radius: var(--r-md);
       padding: var(--s-6); text-align: center; }
.fodnote { color: var(--c-ink-mute); font-size: .86rem; margin-top: var(--s-5); max-width: 62ch; }

/* ---------- Rapporten: et trykt bilag, ikke en app-side ---------- */
.rapport { max-width: 46rem; }
.rapport h1 { margin-bottom: .1rem; }
.rapport .kort p:first-child { margin-top: 0; }
.udskrivrad { margin: 0 0 var(--s-5); }
.udskrivhint { font-size: var(--t-sm); color: var(--c-ink-mute); }
kbd { font-family: var(--font-mono); font-size: var(--t-2xs);
  background: var(--c-surface-2); border: 1px solid var(--c-border-strong);
  border-bottom-width: 2px; border-radius: var(--r-sm); padding: .05rem .3rem; }
.kort.alarm { border-left: 3px solid var(--c-seal); }
.kort.alarm b { color: var(--c-seal); }
/* Brevhovedet vises også på skærmen — det er identiteten produktet lover */
.rapport .rapporthoved { display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 2px solid var(--c-ink); padding-bottom: .5rem; margin-bottom: var(--s-5); }
td form { margin: 0; }

/* Brevhoved — kun i print, hvor topbjælken forsvinder */
.rapporthoved { display: none; }
.rapporthoved .afsender { display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: 1.15rem; }
.rapporthoved .modtager { text-align: right; font-size: var(--t-sm); line-height: 1.5; }
.rapporthoved .sagsnr { font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: .08em; color: var(--c-ink-mute); }

.rapportfod { display: none; }
.underskrift { display: none; }


/* ---------- Mobil: SKAL stå sidst, ellers taber reglerne kaskaden ---------- */
@media (max-width: 860px) {
  .skelet { grid-template-columns: 1fr;   .tabelrum { mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
}
  .sidenav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; border-right: none;
             border-bottom: 1px solid var(--c-border); padding: var(--s-2) var(--s-3); gap: var(--s-1); }
  .sidenav a, .sidenav .navtitel { flex: 0 0 auto; }
  .sidenav .navtitel { padding: 0 .3rem; align-self: center; opacity: .7; }
  main { padding: var(--s-5) var(--s-4) var(--s-10); }
  .tabelrum { mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
}

@media (max-width: 560px) {
  .fliser { grid-template-columns: repeat(2, 1fr); }
  .tidsrejse { flex-direction: column; align-items: stretch; }
  .tidsrejse label { margin-bottom: -.35rem; }
  .personhoved { gap: var(--s-3); }
  .hero .valg .knap, .afslutindhold .knap { width: 100%; text-align: center; }
}

@page { size: A4; margin: 18mm 16mm 20mm; }

@media print {
  .top, .sidenav, form, .knap, button, .tidsrejse, .udskrivrad { display: none !important; }
  .skelet { display: block; }
  main { padding: 0; max-width: none; }
  html { font-size: 10.5pt; }        /* rem refererer til html — ikke body */
  body { background: #fff; font-size: 1rem; }
  .tabelrum { overflow: visible; }   /* ellers kan kolonner falde af papiret */

  /* Farvekodningen ER produktets sprog — den må ikke forsvinde på papir */
  *, *::before, *::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  /* Tabeller der brydes over sider skal beholde deres overskrifter */
  thead { display: table-header-group; }
  thead::after { display: none; }
  tr, .fund li, .konklusion { break-inside: avoid; }
  .kort { break-inside: auto; }      /* et helt bilag må gerne brydes */
  h1, h2 { break-after: avoid; }
  .rapport { max-width: none; }

  .kort, table, .flise, .fund li { border-color: var(--c-print-linje); box-shadow: none; }

  .rapporthoved {
    display: flex; justify-content: space-between; align-items: flex-start;
    border-bottom: 2px solid var(--c-ink); padding-bottom: .5rem; margin-bottom: 1.2rem;
  }
  .rapportfod {
    margin-top: 1.6rem; padding-top: .5rem;
    border-top: 1px solid var(--c-border-strong);
    font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--c-ink-mute);
    display: flex; justify-content: space-between; gap: 1rem;
  }
  .underskrift {
    display: flex; gap: 3rem; margin-top: 15mm; break-inside: avoid;
  }
  .underskrift div { flex: 1; border-top: 1px solid var(--c-ink); padding-top: .35rem;
    font-size: var(--t-xs); color: var(--c-ink-mute); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; }
}