/*
 * Compaknee, stilark. Skrevet forfra 5. september 2026, anden gang.
 *
 * Forbilledet er kernel.ai, og denne gang er det taget bogstaveligt, maalt i
 * deres stilark: hvid flade, koksgraa tekst (ikke sort), graa broedtekst,
 * lysegraa paneler med 8 px hjoerner, knapper med 6 px hjoerner, EEN daempet
 * accentfarve der bruges til overlinjer, knapper og store tal, og moerke
 * paneler med et abstrakt boelgemotiv til de faa steder der skal have vaegt.
 *
 * Kernels accent er salviegroen. Vores er navy fra ikonet. Rav bruges kun
 * til det ene sted paa siden der skal lyse: nummeret der bliver fundet.
 *
 * Kun lyst tema. Kernel har intet moerkt tema, og det gav ScamZam-stemning
 * at have en knap til det. Skriften er Chakra Petch (SIL OFL), lagt paa egen
 * server i brand/, fire vaegte, kun latin.
 *
 * Ingen tankestreger nogen steder, heller ikke i kommentarer.
 */

@font-face { font-family: 'Chakra Petch'; font-weight: 400; font-style: normal; font-display: swap; src: url('brand/chakra-petch-400.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 500; font-style: normal; font-display: swap; src: url('brand/chakra-petch-500.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-style: normal; font-display: swap; src: url('brand/chakra-petch-600.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 700; font-style: normal; font-display: swap; src: url('brand/chakra-petch-700.woff2') format('woff2'); }

/* ===============================================================
   1. FARVER OG MAAL. Maalt paa kernel.ai 5. september 2026.
   =============================================================== */
/*
 * FARVERNE SIDDER I TO SAET.
 *
 * Lys tilstand er standard og er CREMEFARVET, ikke hvid. Martins valg
 * 6. september 2026: cremen er husets farve, navy er den moerke.
 * Kortene ovenpaa er naesten hvide, saa de loefter sig fra fladen.
 *
 * Moerk tilstand foelger systemets indstilling. Der er ingen temaknap:
 * kernel.ai har ingen, og en knap gav ScamZam-stemning.
 *
 * Semantikken, saa et navn ikke lyver naar temaet skifter:
 *   --flade       sidens baggrund
 *   --kort        flader der ligger OVENPAA siden (kort, felter, knapper)
 *   --panel       den daempede flade (sektioner, tabelhoveder)
 *   --ink         overskrifter
 *   --graa        broedtekst
 *   --accent      den farve links og overlinjer har
 *   --paa-accent  tekst OVENPAA accentfarven, altid lys
 */
:root {
  color-scheme: light;

  --flade: #F4EEDD;          /* cremen, husets farve */
  --kort: #FFFCF5;           /* varm hvid, kort ovenpaa cremen */
  --panel: #EFE7D2;          /* daempet creme */
  --panel-2: #E7DCC1;
  --linje: #E0D5B9;

  /*
   * GRAATONERNE ER MAALT, IKKE VALGT. Kontrasten blev gennemgaaet 6.
   * september 2026 mod WCAG AA (4,5:1 for almindelig tekst, 3:1 for stor).
   * Cremen er lys, og de foerste vaerdier laa lige under: --graa gav 4,17
   * paa cremen, --graa-lys 4,26 og --advarsel 3,90 paa det daempede panel.
   * De her tre er de naermeste toner der klarer 4,5 paa ALLE fire flader:
   * flade, kort, panel og panel-2. Goer dem lysere igen, og maal saa.
   * Moerk tilstand bestod i forvejen.
   */
  --ink: #2C2E33;            /* overskrifter */
  --ink-2: #32343A;          /* broedtekst der skal staa lidt kraftigere */
  --dyb: #0F2A44;            /* de moerke paneler: boelgebaand, demoramme */
  --dyb-kant: transparent;
  --graa: #5B616B;           /* broedtekst */
  --graa-lys: #635E4E;       /* bitekst, varm graa der kan laeses paa cremen */

  --accent: #17395B;         /* navy */
  --accent-hover: #244B73;
  --accent-svag: #E4E9F0;
  --paa-accent: #FFFFFF;

  --rav: #D9941B;            /* raven paa lys flade: den moerke */
  --rav-svag: #F6E3BE;
  --advarsel: #9C4438;

  --bredde: 1230px;
  --kant: 24px;
  --r: 8px;
  --r-lille: 6px;

  --fart: 200ms;
  --kurve: cubic-bezier(.2, .7, .2, 1);
}

/*
 * MOERK TILSTAND ER ET VALG, IKKE EN AFLAESNING AF STYRESYSTEMET.
 * Cremen er husets farve og staar som standard for alle. Vaelger man
 * moerk med knappen i topbjaelken, saetter scriptet data-tema="moerk"
 * paa <html>, og valget staar i localStorage til naeste gang.
 */
:root[data-tema="moerk"] {
    color-scheme: dark;

    --flade: #0F2A44;        /* navy, samme som boelgernes bund */
    --kort: #173A5C;
    --panel: #143552;
    --panel-2: #1B4569;
    --linje: rgba(244, 238, 221, .16);

    --ink: #F4EEDD;          /* overskrifter i creme */
    --ink-2: #DCE6F0;
    --dyb: #081B2E;
    --dyb-kant: rgba(244, 238, 221, .16);
    --graa: #BFCBD9;
    --graa-lys: #8FA2B6;

    --accent: #9CC2E8;       /* navy kan ikke ses paa navy */
    --accent-hover: #C3DBF4;
    --accent-svag: rgba(156, 194, 232, .14);
    --paa-accent: #0F2A44;

    --rav: #F2B84B;          /* raven paa moerk flade: den lyse */
    --rav-svag: rgba(242, 184, 75, .2);
    --advarsel: #E0897C;
}

/* ===============================================================
   2. GRUNDLAG
   =============================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Chakra Petch', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.55;
  color: var(--graa); background: var(--flade);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 { color: var(--ink); font-weight: 500; margin: 0; letter-spacing: 0; text-wrap: balance; }
h1 { font-size: clamp(42px, 5.4vw, 70px); line-height: 1.0; }
h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.18; }
h3 { font-size: 18px; line-height: 1.35; }
p { margin: 0; }
strong { font-weight: 600; color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--rav-svag); color: var(--ink); }

.wrap { max-width: var(--bredde); margin: 0 auto; padding: 0 var(--kant); }

/* Overlinjen. Kernel: 16 px, versaler, regular, i accentfarven, ingen
   spatiering. Det er den der ser "dyr" ud, saa den maa ikke goeres lille. */
.eti { display: block; font-size: 15px; font-weight: 400; text-transform: uppercase; color: var(--accent); letter-spacing: .01em; }

/* Knapper. Maalt: 6 px hjoerner, 14 px paa 16 px, ingen skygge, ingen loeft. */
.knap, .knap-moerk, .knap-lys {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 15px; font-weight: 500; line-height: 1;
  padding: 14px 20px; border-radius: var(--r-lille); border: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--fart) var(--kurve), color var(--fart);
}
.knap { background: var(--accent); color: var(--paa-accent); }
.knap:hover { background: var(--accent-hover); color: var(--paa-accent); }
.knap-moerk { background: var(--ink); color: var(--flade); }
.knap-moerk:hover { background: var(--graa); color: var(--flade); }
.knap-lys { background: var(--kort); color: var(--ink); border: 1px solid var(--linje); }
.knap-lys:hover { border-color: var(--ink); color: var(--ink); }
.knap .pil, .knap-moerk .pil { width: 16px; height: 16px; }

/* ===============================================================
   3. TOPBJAELKEN. 70 px, klaebende, hvid med 85 procent, ingen streg.
   =============================================================== */
.top {
  position: sticky; top: 0; z-index: 50;
  /* Klaebende bjaelke i sidens egen farve, saa indhold under den toner ud. */
  background: color-mix(in srgb, var(--flade) 85%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.top .wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; height: 70px; }
.mark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.mark svg { width: 30px; height: 30px; flex: none; }
.mark .navn { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1; }
.mark .del { color: var(--accent); }
.mark:hover { color: var(--ink); }
.top nav { display: flex; gap: 34px; align-items: center; justify-content: center; }
.top nav a { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--accent); }
.handlinger { display: flex; gap: 10px; align-items: center; justify-self: end; }

/* Rullemenu: <details>, nul JavaScript. */
details { position: relative; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.hent-liste, .menu-liste {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
  background: var(--kort); border: 1px solid var(--linje); border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(23, 57, 91, .10); padding: 6px; display: grid; gap: 2px; z-index: 60;
}
.hent-liste a, .menu-liste a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-lille);
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500;
}
.hent-liste a:hover, .menu-liste a:hover { background: var(--panel); color: var(--ink); }
.hent-liste img { width: 22px; height: 22px; }
/* Temaknappen. Uden JavaScript kan den intet, saa uden JavaScript er den
   der ikke. Maanen staar i lys tilstand, solen i moerk: ikonet viser hvad
   knappen skifter TIL, ikke hvad man ser nu. */
.temaknap {
  display: none; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 1px solid var(--linje); border-radius: var(--r-lille); background: transparent;
  color: var(--ink); place-items: center; transition: border-color var(--fart), background-color var(--fart);
}
html.js .temaknap { display: grid; }
.temaknap:hover { border-color: var(--ink); background: var(--panel); }
.temaknap svg { width: 18px; height: 18px; }
.temaknap .sol { display: none; }
:root[data-tema="moerk"] .temaknap .maane { display: none; }
:root[data-tema="moerk"] .temaknap .sol { display: block; }

/* Den store hentemenu i hero'en og de to browserknapper i slutbaandet.
   Samme rullemenu som i topbjaelken, bare i knapstoerrelse og aabnet mod
   venstre, fordi den staar i venstre side af siden og ikke i hoejre. */
/* .kort er kortene paa siden, saa den korte etiket hedder noget andet. */
.handlinger .knap .afkortet { display: none; }
.hent.stor > summary { padding: 15px 22px; font-size: 16px; }
.hent.stor .pil.ned { width: 16px; height: 16px; transition: transform var(--fart); }
.hent.stor[open] .pil.ned { transform: rotate(180deg); }
.hent.stor .hent-liste { left: 0; right: auto; min-width: 240px; }
.knapper img { width: 18px; height: 18px; flex: none; }

.menu { display: none; }
.menu > summary { width: 40px; height: 40px; border: 1px solid var(--linje); border-radius: var(--r-lille); display: grid; place-items: center; color: var(--ink); }
.menu > summary svg { width: 18px; height: 18px; }

@media (max-width: 1000px) {
  .top .wrap { grid-template-columns: auto auto; }
  .top nav { display: none; }
  .menu { display: block; }
}
@media (max-width: 560px) {
  /* Maalt paa 375 px: topbjaelken var foerst 2 px for bred, og igen 5 px
     for bred da temaknappen kom til. Knapperne er smallere her. */
  .top .wrap { gap: 10px; }
  .mark .navn { font-size: 20px; }
  .handlinger { gap: 6px; }
  .handlinger .knap { padding: 12px 14px; font-size: 14px; }
  .temaknap, .menu > summary { width: 36px; height: 36px; }
  /* "Installer gratis" er for langt til 375 px, naar der ogsaa skal vaere
     plads til logo, temaknap og menu. Her staar der bare "Installer". */
  .handlinger .knap .fuldt { display: none; }
  .handlinger .knap .afkortet { display: inline; }
}

/* ===============================================================
   4. SEKTIONER. Kernel: 80 px op og ned, ingen tonede sektioner. Alt der
      skal skille sig ud, er et panel inde i sektionen, ikke sektionen selv.
   =============================================================== */
section { padding: 80px 0; }
section.taet { padding-top: 24px; padding-bottom: 40px; }
.sektion-hoved { max-width: 800px; margin-bottom: 40px; display: grid; gap: 14px; }
.sektion-hoved.midt { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.sektion-hoved p { font-size: 18px; line-height: 1.45; color: var(--ink-2); max-width: 62ch; }
@media (max-width: 760px) { section { padding: 56px 0; } }

/* Panel: den lysegraa flade med 8 px hjoerner, som naesten alt paa kernel
   ligger i. Indeni staar hvide kort med 1 px kant. */
.panel { background: var(--panel); border-radius: var(--r); padding: 16px; }
.kort { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--r); }

/* ===============================================================
   5. HERO. Ingen overlinje, ingen prik. Overskrift, en linje, to knapper.
   =============================================================== */
.hero { padding: 56px 0 56px; }
.hero h1 { max-width: 18ch; }
.hero .under { font-size: 18px; line-height: 1.45; color: var(--ink-2); max-width: 60ch; margin-top: 18px; }
.hero .knapper { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 44px; }
@media (max-width: 760px) { .hero { padding-top: 32px; } .hero .knapper .knap, .hero .knapper .knap-moerk { width: 100%; justify-content: center; } }

/* Registerstriben, kernels logostribe: overlinje, graat panel, hvide fliser. */
.registre .eti { margin-bottom: 14px; }
.registre-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.registre-liste a {
  display: grid; gap: 3px; padding: 18px 20px; text-decoration: none;
  background: var(--kort); border: 1px solid var(--linje); border-radius: var(--r-lille); color: var(--ink);
  transition: border-color var(--fart);
}
.registre-liste a:hover { border-color: var(--ink); color: var(--ink); }
.registre-liste .navn { font-size: 15px; font-weight: 600; }
.registre-liste .land { font-size: 13px; color: var(--graa); }

/* ===============================================================
   6. GAMMEL MAADE / MED COMPAKNEE. Kernels to paneler: lyst med roedlig
      kant, moerkt med boelger. Tallene staar i tynde cirkler.
   =============================================================== */
.to-veje { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.vej { border-radius: var(--r); padding: 32px 34px 28px; display: flex; flex-direction: column; gap: 22px; min-height: 340px; }
.vej.gammel { background: var(--panel); border: 1px solid var(--advarsel); }
.vej.ny { background: var(--dyb) var(--boelger) center / cover no-repeat; border: 1px solid rgba(244, 238, 221, .18); color: #fff; }
.vej .eti { font-size: 14px; }
.vej.gammel .eti { color: var(--advarsel); }
.vej.ny .eti { color: #C9D6E4; }
.vej ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: trin; }
.vej li { display: flex; gap: 14px; align-items: flex-start; font-size: 18px; line-height: 1.35; color: var(--ink-2); counter-increment: trin; }
.vej.ny li { color: #fff; }
.vej li::before {
  content: counter(trin); flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid currentColor;
  display: grid; place-items: center; font-size: 14px; font-weight: 500; margin-top: -1px;
}
.vej.gammel li::before { color: var(--advarsel); }
.vej.ny li::before { color: #C9D6E4; }
.vej .sum { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--linje); font-weight: 600; font-size: 15px; color: var(--ink); }
.vej.ny .sum { border-top-color: rgba(255, 255, 255, .35); color: #fff; }
@media (max-width: 860px) { .to-veje { grid-template-columns: 1fr; } .vej { min-height: 0; padding: 24px; } }

/* Boelgerne. Kernel bruger et foto; vi tegner dem, saa der intet er at
   koebe eller kreditere. Tynde lyse kurver, uden bund, saa farven bagved
   er var(--dyb) og altsaa foelger lys og moerk tilstand. */
:root {
  --boelger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23F4EEDD' stroke-width='1.2'%3E%3Cpath d='M-50 420 C 200 300 350 520 600 400 S 1000 250 1250 380' opacity='.22'/%3E%3Cpath d='M-50 460 C 220 340 380 560 620 440 S 1010 300 1250 420' opacity='.16'/%3E%3Cpath d='M-50 500 C 240 380 410 600 640 480 S 1020 350 1250 460' opacity='.12'/%3E%3Cpath d='M-50 540 C 260 420 440 640 660 520 S 1030 400 1250 500' opacity='.09'/%3E%3Cpath d='M-50 380 C 180 260 320 480 580 360 S 990 200 1250 340' opacity='.14'/%3E%3Cpath d='M-50 340 C 160 220 300 440 560 320 S 980 150 1250 300' opacity='.09'/%3E%3Cpath d='M-50 300 C 140 180 280 400 540 280 S 970 100 1250 260' opacity='.06'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===============================================================
   7. DE TRE TRIN. Kernels "three steps, one outcome": pr. trin et graat
      panel med et kaempe tal i accentfarven, overskrift, et hvidt kort med
      plus-punkter, og under det en mockup i en moerk ramme.
   =============================================================== */
.trin { display: grid; gap: 32px; }
.trin-panel { background: var(--panel); border-radius: var(--r); padding: 40px 40px 32px; display: grid; gap: 32px; }
.trin-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.trin-titel { display: flex; gap: 22px; align-items: flex-start; }
.trin-titel .tal { font-size: 90px; line-height: .9; font-weight: 500; color: var(--accent); letter-spacing: -0.02em; flex: none; }
.trin-titel h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; line-height: 1.15; }
.plus { list-style: none; margin: 0; padding: 26px 28px; display: grid; gap: 14px; }
.plus li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.plus li::before { content: '+'; color: var(--accent); font-weight: 500; flex: none; width: 14px; }
.ramme-moerk { background: var(--dyb); border: 1px solid var(--dyb-kant); border-radius: var(--r); padding: 22px; }
.ramme-moerk > .kort { padding: 36px 40px; }
@media (max-width: 900px) { .trin-panel { padding: 24px; } .trin-top { grid-template-columns: 1fr; } .trin-titel .tal { font-size: 64px; } .ramme-moerk { padding: 12px; } .ramme-moerk > .kort { padding: 20px; } }

/* Mockup 1: sidefoden. Graa streger som tekst, og det fundne nummer. */
.mock-sidefod { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.mock-sidefod .side { background: var(--panel); border: 1px solid var(--linje); border-radius: var(--r-lille); padding: 22px; display: grid; gap: 10px; }
.mock-sidefod .linje { height: 8px; border-radius: 4px; background: var(--panel-2); }
.mock-sidefod .linje.kort { width: 50%; }
.mock-sidefod .linje.mellem { width: 72%; }
.mock-sidefod .tekst { font-size: 13px; color: var(--graa); line-height: 1.7; }
.fund { color: var(--ink); font-weight: 600; background: var(--rav-svag); border-radius: 4px; padding: 1px 6px; }
.mock-sidefod .resultat { display: grid; gap: 10px; }
.mock-sidefod .resultat .eti { font-size: 13px; }
.mock-sidefod .tjek { display: grid; gap: 6px; font-size: 14px; color: var(--ink); }
.mock-sidefod .tjek span { display: flex; gap: 10px; align-items: baseline; }
.mock-sidefod .tjek b { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 500; font-size: 13px; color: var(--graa); min-width: 96px; }
@media (max-width: 760px) { .mock-sidefod { grid-template-columns: 1fr; } }

/* Mockup 2: rejsen. Tre bokse med pile imellem, som kernels entity resolution. */
.mock-rejse { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: center; }
.mock-rejse .boks { background: var(--panel); border: 1px solid var(--linje); border-radius: var(--r-lille); padding: 18px 20px; display: grid; gap: 4px; min-height: 108px; align-content: center; }
.mock-rejse .boks .eti { font-size: 12.5px; color: var(--graa); }
.mock-rejse .boks .v { font-size: 15px; font-weight: 600; color: var(--ink); }
.mock-rejse .boks .s { font-size: 13px; color: var(--graa); }
.mock-rejse .boks.midt { background: var(--kort); border-color: var(--accent); }
.mock-rejse .pil { color: var(--accent); width: 22px; height: 22px; }
.mock-rejse .ikke { grid-column: 1 / -1; font-size: 13px; color: var(--graa); padding-top: 14px; border-top: 1px solid var(--linje); margin-top: 6px; }
@media (max-width: 760px) { .mock-rejse { grid-template-columns: 1fr; } .mock-rejse .pil { transform: rotate(90deg); margin: 0 auto; } }

/* Mockup 3: opslaget, som kernels "structured output". Etiket over vaerdi. */
.opslag { max-width: 640px; margin: 0 auto; border: 1px solid var(--linje); border-radius: var(--r); overflow: hidden; }
.opslag-hoved { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--accent-svag); color: var(--ink); font-size: 13px; }
.opslag-hoved .navnet { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.opslag-hoved .navnet svg { width: 18px; height: 18px; }
.opslag-hoved .nr { color: var(--graa); font-family: ui-monospace, Menlo, Consolas, monospace; }
.opslag-krop { padding: 20px 18px 6px; }
.opslag-krop .firma { font-size: 22px; font-weight: 600; color: var(--ink); }
.opslag-krop .under { font-size: 13px; color: var(--graa); margin-bottom: 8px; }
.raekke { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--linje); }
.raekke .eti { font-size: 12.5px; color: var(--graa); }
.raekke .vaerdi { font-weight: 500; color: var(--ink); text-align: right; font-size: 15px; }
.raekke .vaerdi small { display: block; font-weight: 400; font-size: 12.5px; color: var(--graa); }
.opslag-fod { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 18px 14px; border-top: 1px solid var(--linje); background: var(--panel); font-size: 12.5px; color: var(--graa); }
.pille { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink); background: var(--kort); border: 1px solid var(--linje); border-radius: 999px; padding: 4px 10px; }
.pille .prik { width: 7px; height: 7px; border-radius: 50%; background: var(--rav); }

/* ===============================================================
   8. TABELLEN. Kernels "explore Kernel data": en rigtig tabel med graat
      hoved og tynde linjer. Her: hvad hvert register leverer.
   =============================================================== */
.tabel-hoved { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.tabel-hoved h3 { font-size: 20px; font-weight: 500; }
.tabel-hoved .tal { font-size: 13px; color: var(--graa); }
.tabel-hoved .tal b { color: var(--ink); font-weight: 600; }
.tabel-rul { overflow-x: auto; border: 1px solid var(--linje); border-radius: var(--r); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
table.data th { text-align: left; font-weight: 500; color: var(--ink); background: var(--panel); padding: 12px 16px; border-bottom: 1px solid var(--linje); font-size: 13px; }
table.data td { padding: 12px 16px; border-bottom: 1px solid var(--linje); color: var(--ink); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data td:first-child { font-weight: 500; white-space: nowrap; }
table.data td a, .kilde .licens a { display: inline-block; padding: 6px 0; }
table.data .ja { color: var(--ink); }
table.data .nej { color: var(--graa-lys); }
table.data .del { color: var(--graa); }
.tabel-note { font-size: 13px; color: var(--graa-lys); margin-top: 12px; }
/* Paa smalle skaerme stables raekkerne, og hver celle faar sin overskrift
   fra data-label, som er den samme i18n-noegle som th. Drejebogen 5.8:
   en tabel med min-width klipper ord paa en telefon. */
@media (max-width: 640px) {
  .tabel-rul { overflow: visible; border: 0; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; min-width: 0; width: auto; }
  table.data thead { display: none; }
  table.data tr { border: 1px solid var(--linje); border-radius: var(--r); padding: 8px 14px; margin-bottom: 10px; }
  table.data td { border: 0; padding: 6px 0; white-space: normal; max-width: none; }
  table.data td::before { content: attr(data-label); display: block; font-size: 12.5px; color: var(--graa-lys); font-weight: 400; }
  table.data td:first-child { font-weight: 600; padding-bottom: 2px; }
  table.data td:first-child::before { display: none; }
}
table.data.bred td:first-child { white-space: normal; min-width: 220px; }
table.data.bred td { max-width: 360px; }

/* ===============================================================
   8b. DEMOEN. Popup'en fra extension/ i en iframe, i en moerk ramme som
       mockup'erne. Popup'en er 400 px bred og kan ikke blive smallere, saa
       paa en telefon skaleres den ned i stedet for at rulle sidelaens.
   =============================================================== */
.demo { display: grid; gap: 14px; justify-items: center; }
.demo-ramme { border: 1px solid var(--dyb-kant); background: var(--dyb) var(--boelger) center / cover no-repeat; border-radius: var(--r); padding: 18px; }
.demo-ramme iframe { display: block; width: 400px; height: 640px; border: 0; border-radius: var(--r-lille); background: var(--kort); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.tabel-note.midt { text-align: center; max-width: 60ch; }
@media (max-width: 460px) {
  .demo-ramme { padding: 10px; width: 100%; overflow: hidden; }
  .demo-ramme iframe { transform: scale(.78); transform-origin: top left; margin-right: -88px; margin-bottom: -141px; }
}

/* ===============================================================
   9. FELTER. Et gitter af hvide kort med kant, hvert kort et link eller
      en oplysning. Bruges paa 404-siden, kontaktsiden og kildesiden.
   =============================================================== */
.felter { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.felt { display: grid; gap: 8px; align-content: start; padding: 24px 26px; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: border-color var(--fart); }
a.felt:hover { border-color: var(--ink); color: var(--ink); }
.felter.fem { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.felt h3 { font-size: 18px; }
.felt p { font-size: 14.5px; color: var(--graa); }
.felt .eti { font-size: 12.5px; }
.felt .stor { font-size: 22px; font-weight: 500; color: var(--ink); }

/* ===============================================================
   10. FANER. Kernels use cases: liste til venstre, indhold til hoejre.
   =============================================================== */
.faner { display: grid; grid-template-columns: 250px 1fr; border: 1px solid var(--linje); border-radius: var(--r); overflow: hidden; }
.faner-liste { background: var(--panel); padding: 10px; display: grid; gap: 4px; align-content: start; border-right: 1px solid var(--linje); }
.faner-liste button {
  font: inherit; text-align: left; font-size: 15px; font-weight: 500; color: var(--ink); background: transparent; border: 1px solid transparent;
  border-radius: var(--r-lille); padding: 14px 16px; cursor: pointer; line-height: 1.3; transition: background-color var(--fart);
}
.faner-liste button:hover { background: var(--panel-2); }
.faner-liste button[aria-selected="true"] { background: var(--kort); border-color: var(--linje); }
.faner-indhold { padding: 36px 40px 40px; background: var(--kort); }
.faner-indhold [role="tabpanel"] { display: none; }
.faner-indhold [role="tabpanel"].aktiv { display: block; }
.faner-indhold h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; line-height: 1.2; margin-bottom: 18px; }
.faner-indhold .plus { padding: 0; }
.faner-indhold .plus li { font-size: 15px; }
@media (max-width: 800px) { .faner { grid-template-columns: 1fr; } .faner-liste { border-right: 0; border-bottom: 1px solid var(--linje); } .faner-indhold { padding: 24px; } }

/* ===============================================================
   11. UNDERSIDER. Sidehoved oeverst, saa tekst i 760 px, som kernels
       artikelsider. Grupper i FAQ faar en overlinje hver.
   =============================================================== */
.sidehoved { padding: 56px 0 8px; }
.sidehoved h1 { max-width: 16ch; }
.sidehoved .under { font-size: 18px; line-height: 1.45; color: var(--ink-2); max-width: 60ch; margin-top: 18px; }
.sidehoved .eti { margin-bottom: 16px; }
@media (max-width: 760px) { .sidehoved { padding-top: 32px; } }

/* Sidehoved med demoen ved siden af: tekst til venstre, popup til hoejre.
   Bruges baade i forsidens hero og paa saadan-virker-det. Popup'en er
   400 px plus 18 px ramme i hver side, altsaa 436 px. */
.sidehoved.med-demo { padding-bottom: 24px; }
.hero.med-demo { padding: 40px 0 48px; }
.hero.med-demo .knapper { margin-top: 36px; }
.hoved-gitter { display: grid; grid-template-columns: minmax(0, 1fr) 436px; gap: 56px; align-items: center; }
.hoved-gitter .hoved-tekst h1 { max-width: 14ch; }
.hoved-gitter .hoved-tekst .under { max-width: 46ch; }
.hoved-demo { display: grid; justify-items: center; }
.hoved-demo .tabel-note { max-width: 44ch; text-align: center; }
.hoved-demo .demo-ramme iframe { height: 588px; }
@media (max-width: 1040px) {
  .hoved-gitter { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
  .hoved-gitter .hoved-tekst { justify-self: stretch; }
  .hoved-gitter .hoved-tekst h1, .hoved-gitter .hoved-tekst .under { max-width: 60ch; }
  .hero.med-demo { padding-top: 32px; }
  /* Rammen skal fylde spalten ud, ellers kan den 436 px brede popup ikke
     skaleres ned paa en telefon, og siden bliver bredere end skaermen. */
  .hoved-gitter .hoved-demo { justify-self: stretch; }
}
.gruppe + .gruppe { margin-top: 56px; }
.gruppe .eti { margin-bottom: 10px; }
.gruppe h2 { margin-bottom: 20px; font-size: clamp(24px, 2.4vw, 30px); }
.to-kol { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.to-kol.med-nav { grid-template-columns: 260px 1fr; gap: 48px; }
.to-kol.med-nav nav { position: sticky; top: 90px; display: grid; gap: 10px; align-content: start; }
.to-kol.med-nav nav a { text-decoration: none; font-weight: 500; color: var(--ink); font-size: 15px; padding: 4px 0; }
.to-kol.med-nav nav a:hover { color: var(--accent); }
.vej.ny a { color: #fff; }
@media (max-width: 860px) { .to-kol, .to-kol.med-nav { grid-template-columns: 1fr; } .to-kol.med-nav nav { position: static; } }
.spm { border-top: 1px solid var(--linje); }
.spm details { border-bottom: 1px solid var(--linje); }
.spm summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; font-size: 17px; font-weight: 500; color: var(--ink); }
.spm summary::after { content: '+'; color: var(--accent); font-size: 22px; line-height: 1; flex: none; transition: transform var(--fart) var(--kurve); }
.spm details[open] summary::after { transform: rotate(45deg); }
.spm .svar { padding: 0 0 20px; max-width: 70ch; font-size: 15px; }
.spm .svar p + p { margin-top: 10px; }
.mere { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 4px 0; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
.mere .pil { width: 16px; height: 16px; }
.mere:hover { color: var(--accent); }

/* ===============================================================
   12. AFSLUTNING. Kernels moerke boelgebaand i fuld bredde med overskrift
       og to knapper. Ingen indramning, det ER sektionen.
   =============================================================== */
.slut { padding: 0; }
.slut .baand { background: var(--dyb) var(--boelger) center / cover no-repeat; padding: 96px 24px; text-align: center; }
.slut h2 { color: #fff; max-width: 24ch; margin: 0 auto; }
.slut .knapper { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.slut .knap-moerk { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: #fff; }
.slut .knap-moerk:hover { background: rgba(255, 255, 255, .2); }

/* ===============================================================
   13. TEKSTSIDER (saadan, kilder, faq, kontakt, privatliv, vilkaar)
   =============================================================== */
.tekst { max-width: 760px; }
.tekst h1 { font-size: clamp(36px, 4.4vw, 56px); margin-bottom: 18px; }
.tekst .ingress { font-size: 18px; color: var(--ink-2); margin-bottom: 40px; line-height: 1.45; }
.tekst h2 { font-size: 28px; margin: 48px 0 14px; }
.tekst h2:first-child { margin-top: 0; }
.tekst h3 { font-size: 19px; margin: 30px 0 8px; }
.tekst p + p { margin-top: 14px; }
.tekst ul, .tekst ol { padding-left: 22px; margin: 12px 0; }
.tekst li + li { margin-top: 6px; }
.tekst .dato { font-size: 13px; color: var(--graa-lys); margin-bottom: 28px; }
.tekst .boks { background: var(--panel); border-radius: var(--r); padding: 20px 24px; margin: 20px 0; }
.tekst table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; }
.tekst th, .tekst td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linje); vertical-align: top; }
.tekst th { font-size: 13px; color: var(--ink); font-weight: 500; background: var(--panel); }

.kilder { display: grid; gap: 20px; margin-top: 32px; }
.kilde { border: 1px solid var(--linje); border-radius: var(--r); padding: 26px 28px; display: grid; gap: 12px; }
.kilde .top-linje { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.kilde h3 { font-size: 20px; }
.kilde .to { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kilde .to h4 { font-size: 13px; color: var(--graa); font-weight: 500; margin-bottom: 6px; }
.kilde ul { margin: 0; padding-left: 18px; font-size: 14px; }
.kilde .licens { font-size: 13px; color: var(--graa-lys); padding-top: 12px; border-top: 1px solid var(--linje); }
@media (max-width: 620px) { .kilde .to { grid-template-columns: 1fr; } }

.formular { display: grid; gap: 16px; max-width: 560px; }
.formular label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
.formular input, .formular textarea, .formular select {
  font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--linje); border-radius: var(--r-lille);
  background: var(--kort); color: var(--ink); width: 100%;
}
.formular input:focus, .formular textarea:focus, .formular select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.formular textarea { min-height: 160px; resize: vertical; }
.formular .status { font-size: 14px; min-height: 1.5em; }
.formular .status.ok { color: #2A7052; }
.formular .status.fejl { color: var(--advarsel); }
.formular .honning { position: absolute; left: -9999px; }

/* ===============================================================
   14. SIDEFOD. Kernel: logo, to kolonner links, knap til hoejre, tynd
       linje, og nederst adresse og copyright i 13 px.
   =============================================================== */
footer { padding: 64px 0 40px; }
.fod-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 32px; align-items: start; padding-bottom: 40px; border-bottom: 1px solid var(--linje); }
.fod-top .mark svg { width: 30px; height: 30px; }
.fod-top .kol { display: grid; gap: 10px; align-content: start; }
.fod-top .kol span { font-size: 13px; color: var(--graa-lys); }
.fod-top .kol a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; padding: 4px 0; }
.fod-top .kol a:hover { color: var(--accent); }
.fod-bund { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 28px; font-size: 13px; color: var(--graa); }
.fod-bund a { color: var(--graa); display: inline-block; padding: 6px 0; }
.fod-bund .hoejre { text-align: right; }
@media (max-width: 860px) {
  .fod-top { grid-template-columns: 1fr 1fr; }
  .fod-top .mark { grid-column: 1 / -1; }
  .fod-bund .hoejre { text-align: left; }
}

/* ===============================================================
   15. BEVAEGELSE. Kernel: kort fade og loeft naar afsnit rulles ind,
       ellers intet. Elementer med data-vis faar "vist" af scriptet i
       _ramme.html. Uden JavaScript vises alt med det samme.
   =============================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-vis] { opacity: 0; transform: translateY(14px); transition: opacity 560ms var(--kurve), transform 560ms var(--kurve); }
  html.js [data-vis].vist { opacity: 1; transform: none; }
  html.js [data-vis="2"] { transition-delay: 100ms; }
  html.js [data-vis="3"] { transition-delay: 200ms; }
  html.js .opslag .raekke { opacity: 0; transition: opacity 400ms var(--kurve); }
  html.js .opslag.vist .raekke { opacity: 1; }
  html.js .opslag.vist .raekke:nth-child(3) { transition-delay: 150ms; }
  html.js .opslag.vist .raekke:nth-child(4) { transition-delay: 250ms; }
  html.js .opslag.vist .raekke:nth-child(5) { transition-delay: 350ms; }
  html.js .opslag.vist .raekke:nth-child(6) { transition-delay: 450ms; }
  html.js .opslag.vist .raekke:nth-child(7) { transition-delay: 550ms; }
  html.js .opslag.vist .raekke:nth-child(8) { transition-delay: 650ms; }
  html.js .fund { background: transparent; transition: background-color 500ms var(--kurve) 300ms; }
  html.js .vist .fund { background: var(--rav-svag); }
}

/* ===============================================================
   LOGOET FOELGER FLADEN. Navy firkant paa den lyse creme, cremefarvet
   firkant paa den moerke navy. Begge staar i HTML; CSS viser det ene.
   =============================================================== */
.mark .moerkt, .opslag-hoved .navnet .moerkt { display: none; }
:root[data-tema="moerk"] .mark .lyst,
:root[data-tema="moerk"] .opslag-hoved .navnet .lyst { display: none; }
:root[data-tema="moerk"] .mark .moerkt,
:root[data-tema="moerk"] .opslag-hoved .navnet .moerkt { display: block; }