/* AiNews.dk — designsystem.
 *
 * Dansk avisformsprog: hvid flade, tung sort typografi, én varm accent, høj
 * tæthed. Referencen er eb.dk's designsprog — ikke deres identitet. Deres
 * brandfarve og skrifttype er deres; sproget er alles.
 *
 * ── Accentreglen ────────────────────────────────────────────────────────
 * Accenten bruges KUN til fart og tal. Aldrig til dekoration. Ser man rødt,
 * er det fordi noget bevæger sig. Den varme farve er samtidig bedre semantik
 * end den grønne, vi startede med: det brænder, og det er præcis hvad
 * fartbjælken måler.
 *
 * To accent-tokens, ikke ét: --accent bærer TAL, som er tekst og derfor skal
 * over 4,5:1. --accent-flade bærer bjælker og mærkater, som er grafik og kun
 * skal over 3:1. Ét token ville tvinge fladen til at være unødigt mørk.
 */

/* ── SKRIFT ──────────────────────────────────────────────────────────────
 * Selvhostet, ikke Google Fonts: ingen tredjepartsforbindelse i CSP'en,
 * ingen diskussion om IP-adresser til Google, og subsettene er mindre end
 * det Google leverer.
 *
 * To familier med hver sin opgave. Inter Tight bærer overskrifter, forside
 * og grænseflade — tabloidens greb. Source Serif bærer artiklens brødtekst
 * og kun den: en serif siger "det her skal læses" frem for "det her skal
 * skimmes", og det er forskellen på os og enhver anden AI-blog.
 *
 * latin-subsettet indeholder æ (U+00E6), ø (U+00F8) og å (U+00E5) i ALLE
 * vægte, fordi filen er variabel — ikke ét snit per vægt. latin-ext er
 * erklæret men hentes kun hvis en side faktisk bruger tegnene; på en dansk
 * side koster den ingenting.
 *
 * Source Serif hentes uden optisk-størrelse-aksen. Med den vejer latin-
 * subsettet 119 kB, uden den 50. Vi bruger aldrig aksen.
 */
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url("/skrift/intertight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url("/skrift/intertight-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url("/skrift/sourceserif4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url("/skrift/sourceserif4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --papir:        #f7f3eb;
  --hvid:         #fffdf8;
  --blaek:        #111315;
  --graa-700:     #4f5962;
  --graa-300:     #d8d4cc;
  --radar-roed:   #d3341a;
  --radar-blaa:   #155fbd;
  --signal-gul:   #f2c94c;
  --boost-lime:   #e1ff78;
  --bg:           #ffffff;
  --bg-flade:     #f6f6f6;
  --bg-kort:      #fbfbfb;
  --fg:           #111315;
  --fg-daempet:   #5a6570;
  --accent:       #d3341a;   /* 4,91:1 mod hvid — tal, links, mærkater */
  --accent-flade: #f45531;   /* 3,39:1 — KUN bjælker, aldrig med tekst */
  --advarsel:     #a8320c;
  --linje:        #e4e6e8;
  --linje-staerk: #c9ced2;

  /* 8-punkts rytme. Ingen ad hoc-værdier. */
  --r1: 0.5rem;  --r2: 1rem;   --r3: 1.5rem;  --r4: 2rem;
  --r5: 3rem;    --r6: 4rem;   --r7: 5rem;

  --radius: 0.2rem;
  --maalebredde: 66ch;
  --skal: 80rem;

  --sans:  "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:  ui-monospace, "SF Mono", Menlo, monospace;
}

/* Mørk tilstand er nu tilvalget. En avisforside er hvid. */
:root[data-tema="moerk"] {
  color-scheme: dark;
  --bg:           #101214;
  --bg-flade:     #191c1f;
  --bg-kort:      #16191c;
  --fg:           #f2f4f5;
  --fg-daempet:   #98a2ac;
  --accent:       #ff7a5c;   /* lysnes mod mørk flade — 6,4:1 */
  --accent-flade: #f45531;
  --advarsel:     #ff8a6b;
  --linje:        #2a2f34;
  --linje-staerk: #3d444b;
}

@media (prefers-contrast: more) {
  :root {
    --fg-daempet: #343a40;
    --linje: #747b81;
    --linje-staerk: #111315;
  }
  :root[data-tema="moerk"] {
    --fg-daempet: #d7dce0;
    --linje: #aab1b7;
    --linje-staerk: #f2f4f5;
  }
}

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

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.55;   /* WCAG-gulv er 1.5 på brødtekst */
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  -webkit-font-smoothing: antialiased;
}

/* Tabloidtypografi: tungt, tæt, sort. Overskriften bærer siden — derfor
   vægt 800 og negativ tracking, ikke den luftige display-stil.

   Tracking følger graden. Optisk kompensation: en stor grad ser løs ud ved
   normal spatiering, en lille grad ser klemt ud ved den samme negative
   værdi. Én værdi til alle tre var noget jeg valgte mens skærmen viste
   Helvetica — Inter Tight er i forvejen tæt, og -0,035em lukkede de små
   overskrifter sammen. */
h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  line-height: 1.04;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.1rem + 4.4vw, 3.6rem);  letter-spacing: -0.032em; }
h2 { font-size: clamp(1.35rem, 1.05rem + 1.4vw, 1.9rem); letter-spacing: -0.022em; }
h3 { font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.28rem); letter-spacing: -0.014em; }

p { margin: 0 0 var(--r2); text-wrap: pretty; }
a { color: inherit; }

:where(a, button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

.spring-til {
  position: absolute; top: -100vh; left: var(--r2); z-index: 50;
  padding: var(--r1) var(--r2);
  background: var(--accent); color: #fff;
  font-weight: 700; text-decoration: none;
}
.spring-til:focus { top: var(--r2); }

.mono {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--fg-daempet);
}

/* ── FARTBJÆLKEN — sidens signatur ─────────────────────────────────────
   Længden er historiens fart i forhold til dagens hurtigste. Man ser på tre
   sekunder hvad der løber, uden at læse et tal. Eneste sted accenten
   optræder som flade. */
.fart { display: flex; align-items: center; gap: 0.45rem; }

.fart-spor {
  flex: 1 1 auto; min-width: 2.5rem; height: 0.25rem;
  background: var(--linje);
  overflow: hidden;
}

.fart-fyld { display: block; height: 100%; background: var(--accent-flade); }

.fart b {
  font-family: var(--mono);
  font-size: 0.78rem; font-weight: 700;
  color: var(--accent);
}

.fart span {
  font-family: var(--mono);
  font-size: 0.6rem; color: var(--fg-daempet);
}

/* ── skelet ────────────────────────────────────────────────────────────── */
.skal {
  max-width: var(--skal);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

/* Toplinjen er sort. Det er tabloidens greb: mærket skiller sig ud som en
   bjælke, ikke som endnu et element på den hvide flade. */
.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--fg);
  color: var(--bg);
}

.top-inder {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r2); min-height: 3.25rem;
}

.maerke {
  display: flex; align-items: baseline; gap: 0.1rem;
  font-size: 1.3rem; font-weight: 800;
  letter-spacing: -0.045em; text-decoration: none;
  color: var(--bg);
}

.maerke i { font-style: normal; color: #ff7a5c; }   /* på sort bjælke: 6,4:1 */

/* Den fulde identitet skal være i markup. På smalle skærme skjules kun den
   visuelle undertitel; skærmlæsere beholder den ordrette formulering. */
.maerke-blok { display: flex; align-items: baseline; gap: var(--r2); min-width: 0; }
.maerke-undertitel {
  color: color-mix(in srgb, var(--bg) 76%, transparent);
  font-size: 0.76rem; font-weight: 500; letter-spacing: 0;
  white-space: nowrap;
}

.top nav { display: flex; align-items: center; gap: var(--r3); }

.top nav a {
  font-size: 0.82rem; font-weight: 600;
  color: color-mix(in srgb, var(--bg) 72%, transparent);
  text-decoration: none;
}

.top nav a:hover, .top nav a[aria-current] { color: var(--bg); }

.tema-knap {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: color-mix(in srgb, var(--bg) 72%, transparent);
  font-size: 0.95rem; cursor: pointer;
}
.tema-knap:hover { color: var(--bg); }

main { padding-block: var(--r4) var(--r7); }

.fod {
  border-top: 3px solid var(--fg);
  padding-block: var(--r3);
  color: var(--fg-daempet);
  font-size: 0.8rem;
}
.fod p { max-width: var(--maalebredde); }

/* ── forsiden ──────────────────────────────────────────────────────────── */
.dagens {
  display: block;
  padding-bottom: var(--r4);
  margin-bottom: var(--r4);
  border-bottom: 3px solid var(--fg);
  text-decoration: none;
}

/* Understøtter både den nuværende teksthero og produktionsmarkup med billede.
   Billedet har altid mål/aspect-ratio, så det ikke giver layoutskift. */
.dagens-medie { display: grid; gap: var(--r3); }
.dagens-billede {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; background: var(--papir); border-radius: var(--radius);
}

@media (min-width: 48rem) {
  .dagens-medie {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.92fr);
    align-items: center; gap: var(--r4);
  }
}

/* Mærkatet er en fyldt bjælke, ikke bare farvet tekst — tabloidens måde at
   sige "det her er det vigtigste på siden".
   Fladen er den MØRKE accent: hvid tekst på den lyse gav 3,39:1, under
   gulvet. Bjælkefyldet må gerne være lyst, for det bærer ingen tekst. */
.mærkat {
  display: inline-block;
  margin-bottom: var(--r2);
  padding: 0.2rem 0.5rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.dagens h1 { margin-bottom: var(--r2); }
.dagens:hover h1 { color: var(--accent); }

.dagens .manchet {
  max-width: 54ch;
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  color: var(--fg-daempet);
  margin-bottom: var(--r2);
}

.metalinje {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.4rem var(--r2);
  font-family: var(--mono); font-size: 0.66rem;
  color: var(--fg-daempet);
}
.metalinje .fart { flex: 0 0 auto; min-width: 10rem; }

.spalter { display: grid; gap: var(--r4); }

@media (min-width: 62rem) {
  .spalter { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--r5); }
}

.spalte-titel {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 0.3rem; margin-bottom: var(--r2);
  border-bottom: 2px solid var(--fg);
  font-family: var(--mono); font-size: 0.66rem;
  font-weight: 700; letter-spacing: 0.1em;
}

.spalte-titel h2 { font-size: 0.66rem; letter-spacing: 0.1em; }
.spalte-titel a, .spalte-titel span { color: var(--fg-daempet); text-decoration: none; }

/* Tættere end første udgave. En avisforside skal kunne rumme mange historier
   uden at man skal scrolle for at opdage at der er flere. */
.stroem { display: grid; }

.historie {
  display: block;
  padding-block: var(--r2);
  border-bottom: 1px solid var(--linje);
  text-decoration: none;
}

.historie:first-child { padding-top: 0; }
.historie:last-child { border-bottom: 0; }
.historie h3 { margin-bottom: 0.25rem; }
.historie:hover h3 { color: var(--accent); }

.historie .resume {
  max-width: 60ch; margin-bottom: 0.5rem;
  color: var(--fg-daempet); font-size: 0.9rem; line-height: 1.5;
}

/* ── videokort ─────────────────────────────────────────────────────────── */
.videoliste { display: grid; }

.videokort {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding-block: var(--r2);
  border-bottom: 1px solid var(--linje);
  text-decoration: none;
}

.videokort:first-child { padding-top: 0; }
.videokort:last-child { border-bottom: 0; }

.videokort-billede {
  position: relative; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--bg-flade);
}

.videokort-billede img { width: 100%; height: 100%; object-fit: cover; display: block; }

.videokort-plads {
  position: absolute; left: 0; top: 0;
  padding: 0.1rem 0.35rem;
  background: var(--accent); color: #fff;   /* mørk accent — bærer tekst */
  font-family: var(--mono); font-size: 0.62rem; font-weight: 800;
}

.videokort h3 { font-size: 0.95rem; margin-bottom: 0.2rem; }
.videokort:hover h3 { color: var(--accent); }
.videokort .kanal {
  color: var(--fg-daempet); font-size: 0.76rem; margin-bottom: 0.4rem;
}

/* ── artikelsiden ──────────────────────────────────────────────────────── */
.artikel { max-width: var(--maalebredde); }
.artikel h1 { margin-bottom: var(--r2); }

.artikel .manchet {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.32rem);
  line-height: 1.45; color: var(--fg-daempet);
  margin-bottom: var(--r3);
}

.faktalinje {
  display: flex; flex-wrap: wrap; gap: 0.4rem var(--r2);
  padding-block: 0.6rem;
  border-block: 1px solid var(--linje);
  margin-bottom: var(--r3);
  font-family: var(--mono); font-size: 0.66rem;
  color: var(--fg-daempet);
}

/* Serifen gælder brødteksten alene. Overskrifterne inde i artiklen bliver
   i grotesken, så siden holder sammen med forsiden. */
.krop {
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.02rem + 0.28vw, 1.19rem);
  line-height: 1.62;
}
.krop p { max-width: var(--maalebredde); }
.krop h2 {
  font-family: var(--sans);
  margin-top: var(--r3); margin-bottom: var(--r1);
}

.forbehold {
  margin-top: var(--r3);
  padding: var(--r2);
  border-left: 4px solid var(--advarsel);
  background: var(--bg-flade);
  font-size: 0.9rem;
}
.forbehold b { color: var(--advarsel); }

.kilder {
  margin-top: var(--r4);
  padding-top: var(--r2);
  border-top: 2px solid var(--fg);
}

.kilder h2 {
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.1em; color: var(--fg-daempet);
  margin-bottom: var(--r2); font-weight: 700;
}

.kilder ol { margin: 0; padding-left: 1.2rem; }
.kilder li { margin-bottom: 0.4rem; font-size: 0.9rem; }
.kilder a { text-decoration-color: var(--linje-staerk); }
.kilder a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.kilder .vaert { color: var(--fg-daempet); font-family: var(--mono); font-size: 0.66rem; }

.om-artiklen {
  margin-top: var(--r3);
  padding: var(--r2);
  background: var(--bg-flade);
  font-size: 0.86rem; color: var(--fg-daempet);
}
.om-artiklen b { color: var(--fg); }
.om-artiklen p:last-child { margin-bottom: 0; }

.tom {
  padding: var(--r4) var(--r2);
  color: var(--fg-daempet);
  background: var(--bg-flade);
  font-size: 0.9rem;
}

/* Radar-kort er redaktionelle signaler, ikke færdige historier. Den blå
   venstrekant, tekstetiketten og forklaringslinket gør forskellen synlig
   uden at afhænge af farve alene. */
.radar-gitter { display: grid; gap: var(--r2); }
.radar-kort {
  padding: var(--r2); border: 1px solid var(--linje);
  border-left: 4px solid var(--radar-blaa); background: var(--bg-kort);
}
.radar-kort[data-signal="stiger"] { border-left-color: var(--radar-roed); }
.radar-kort[data-signal="uklart"] { border-left-color: #9b7200; }
.radar-etiket {
  display: inline-flex; align-items: center; min-height: 1.5rem;
  margin-bottom: var(--r1); font: 700 0.66rem/1 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.radar-forklaring { color: var(--fg-daempet); font-size: 0.85rem; }

[role="search"] { max-width: 46rem; margin-block: var(--r3); }
[role="search"] label { display: block; margin-bottom: var(--r1); }
[role="search"] > div { display: flex; gap: var(--r1); }
[role="search"] input {
  min-width: 0; min-height: 2.75rem; flex: 1;
  border: 1px solid var(--linje-staerk); border-radius: var(--radius);
  padding: 0.65rem 0.8rem; background: var(--bg); color: var(--fg);
  font: inherit;
}
[role="search"] button {
  min-height: 2.75rem; padding-inline: var(--r2); border: 1px solid var(--fg);
  border-radius: var(--radius); background: var(--fg); color: var(--bg);
  font: 700 0.9rem/1 var(--sans); cursor: pointer;
}
[role="search"] input:focus-visible,
[role="search"] button:focus-visible { outline: 3px solid var(--radar-blaa); outline-offset: 2px; }
[data-soegepost][hidden] { display: none; }

.artikel-billede {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  margin-bottom: var(--r3); background: var(--bg-flade);
}

@media (max-width: 47.99rem) {
  .maerke-undertitel:not(.skjult-visuelt) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  main { padding-top: var(--r3); }
}

@media (max-width: 22rem) {
  .videokort { grid-template-columns: 6rem minmax(0, 1fr); }
}

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

@media (prefers-reduced-motion: no-preference) {
  a, .tema-knap, h1, h3 { transition: color 140ms ease; }
}

/* ── Radaravisen ────────────────────────────────────────────────────────
   En varm, redaktionel flade med tydeligt nyhedshierarki. Disse regler er
   samlet sidst, så de også fungerer som migrationslag for ældre sidetyper. */
:root {
  --bg: #f3ead9;
  --bg-flade: #eadfca;
  --bg-kort: transparent;
  --linje: #d0c3aa;
  --linje-staerk: #a99a80;
}

body {
  background:
    linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--fg) 2%, transparent) 50%, transparent 100%),
    var(--bg);
}

.top {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  border-top: 0.35rem solid var(--accent);
}

/* Tre selvstændige lag holder genveje, identitet og emner fra at konkurrere
   om den samme linje. Mastheaden flytter sig derfor ikke, når et link bliver
   aktivt eller et emnenavn er længere end de andre. */
.nytte-række { border-bottom: 1px solid var(--linje-staerk); }
.nytte-inder {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r2);
}
.top .nytte-nav,
.nytte-handlinger { display: flex; align-items: center; gap: 1.15rem; }
.top .nytte-nav a,
.nytte-handlinger > a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--fg-daempet);
  font: 700 0.69rem/1 var(--sans);
  letter-spacing: 0.075em;
  text-decoration: none;
  text-transform: uppercase;
}
.top .nytte-nav a:hover,
.nytte-handlinger > a:hover { color: var(--fg); }
.top .nytte-nav a[aria-current],
.nytte-handlinger > a[aria-current] {
  color: var(--fg);
  box-shadow: inset 0 -0.18rem var(--accent);
}

.top-inder {
  min-height: 8.5rem;
  display: grid;
  place-items: center;
  padding-block: var(--r2);
}
.maerke-blok { display: grid; justify-items: center; gap: 0.45rem; min-width: 0; }
.maerke {
  color: var(--fg);
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 0.86;
  letter-spacing: -0.065em;
}
.maerke i { color: var(--accent); }
.maerke-undertitel {
  display: block;
  color: var(--fg-daempet);
  font: 700 0.67rem/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.menu,
.mobil-tema { display: none; }
.menu summary { display: none; }
.emne-række { border-block: 1px solid var(--fg); }
.emne-kun-mobil { display: none !important; }
.desktop-nav { min-width: 0; }
.menu:not([open]) > nav, .menu[open] > nav { display: flex; }
.top .desktop-nav {
  width: 100%;
  max-width: var(--skal);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  min-height: 3rem;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(1.1rem, 2.8vw, 2.6rem);
}
.top .desktop-nav a {
  color: var(--fg-daempet);
  min-height: 3rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.065em;
}
.top .desktop-nav a:hover, .top .desktop-nav a[aria-current] { color: var(--fg); }
.top .desktop-nav a[aria-current] { box-shadow: inset 0 -0.22rem var(--accent); }
.top .desktop-nav .nav-breaking { color: #b82017; }
.top .desktop-nav .nav-breaking[aria-current] { box-shadow: inset 0 -0.22rem #d92d20; }
.tema-knap {
  width: auto;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: 0.55rem;
  color: var(--fg-daempet);
  font: 700 0.75rem/1 var(--sans);
  text-transform: uppercase;
}
.tema-knap:hover { color: var(--fg); }

.fod { border-top: 1px solid var(--fg); padding-block: var(--r4); }
.fod-inder {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto minmax(16rem, 1fr);
  align-items: start;
  gap: var(--r4);
}
.fod-maerke {
  color: var(--fg);
  font: 600 1.55rem/1 var(--serif);
  letter-spacing: -0.035em;
  text-decoration: none;
}
.fod-inder p { margin: 0.45rem 0 0; }
.fod-inder nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.15rem; }
.fod-inder nav a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.fod-loefte { justify-self: end; max-width: 34ch; text-align: right; }

main { padding-top: var(--r3); }
.forside-layout { display: grid; gap: var(--r4); }
.forside-top {
  display: grid;
  gap: var(--r3);
  border-bottom: 3px double var(--fg);
  padding-bottom: var(--r4);
  align-items: stretch;
}
.forside-under { display: grid; gap: var(--r4); align-items: start; }
.dagens { position: relative; padding: 0; margin: 0; border: 0; min-width: 0; }
.dagens-illustration { position: relative; margin: 0; overflow: hidden; background: var(--papir); }
.dagens-billede { border-radius: 0; }
.dagens-illustration figcaption {
  position: absolute;
  right: 0.5rem;
  bottom: 0.4rem;
  padding: 0.18rem 0.35rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--fg-daempet);
  font: 600 0.58rem/1.2 var(--mono);
}
.dagens-tekst { display: block; color: var(--fg); text-decoration: none; }
.dagens h1 {
  max-width: 12ch;
  font-size: clamp(2.65rem, 5vw, 4.8rem);
  line-height: 0.92;
  overflow-wrap: anywhere;
}
.dagens .manchet { color: var(--fg); max-width: 48ch; }
.mærkat { border-radius: 0; text-transform: uppercase; }
.niveau-b {
  display: grid;
  align-content: stretch;
  border-top: 1px solid var(--fg);
}
.niveau-etiket {
  display: block;
  color: var(--accent);
  font: 800 0.6rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.niveau-b .historie { min-height: 0; padding-block: var(--r3); border-color: var(--fg); display: flex; flex-direction: column; justify-content: center; }
.niveau-b .historie h3 { font-size: clamp(1.35rem, 2.1vw, 1.9rem); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.niveau-b .historie .resume { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.forside-stroem { margin: 0; padding: clamp(1rem, 2vw, 1.6rem); background: color-mix(in srgb, var(--bg) 58%, var(--hvid)); }
.forside-stroem .historie { padding-block: 0.75rem; }
.forside-stroem .historie h3 { max-width: 38ch; }
.forside-stroem .historie .resume { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.forside-stroem .metalinje, .niveau-b .metalinje { font-size: 0.72rem; }

.radar-puls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  border-block: 1px solid var(--fg);
  background: color-mix(in srgb, var(--bg) 88%, var(--radar-blaa));
}
.radar-puls-hoved {
  min-width: 8.2rem;
  padding: 0.6rem 0.8rem;
  display: grid;
  align-content: center;
  border-right: 1px solid var(--fg);
  background: var(--radar-blaa);
  color: #fff;
}
.radar-puls-hoved span { font: 800 0.72rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.radar-puls-hoved small { margin-top: 0.35rem; font: 600 0.56rem/1 var(--mono); opacity: 0.8; }
.radar-puls ol { min-width: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.radar-puls li { min-width: 0; padding: 0.7rem 0.8rem; display: flex; align-items: center; gap: 0.55rem; border-right: 1px solid var(--linje-staerk); }
.radar-puls li:last-child { border-right: 0; }
.radar-puls li b { color: var(--radar-blaa); font: 800 0.62rem/1 var(--mono); }
.radar-puls li a, .radar-puls li > span { min-width: 0; color: var(--fg); font-size: 0.78rem; font-weight: 700; line-height: 1.15; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radar-puls li a:hover { color: var(--accent); }

/* Dagens Breaking er en redaktionel alarm, ikke endnu et almindeligt kort. */
.breaking-rubrik {
  display: grid;
  grid-template-columns: minmax(10rem, 0.28fr) minmax(0, 1fr);
  background: #d92d20;
  color: #fff;
  border: 1px solid #a71d14;
}
.breaking-rubrik > header {
  padding: 1rem;
  display: grid;
  align-content: start;
  gap: 0.45rem;
  border-right: 1px solid color-mix(in srgb, #fff 50%, transparent);
  font-family: var(--mono);
  text-transform: uppercase;
}
.breaking-rubrik > header span { font-size: 1rem; font-weight: 800; letter-spacing: 0.12em; }
.breaking-rubrik > header time { font-size: 0.62rem; font-weight: 700; }
.breaking-rubrik > header a { margin-top: auto; color: #fff; font-size: 0.61rem; font-weight: 800; }
.breaking-historie {
  min-width: 0;
  display: block;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  color: #fff;
  text-decoration: none;
}
.breaking-historie > span { font: 800 0.62rem/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; }
.breaking-historie h2 { max-width: 28ch; margin-block: 0.45rem 0.75rem; font-size: clamp(1.65rem, 3vw, 3rem); line-height: 0.98; }
.breaking-rubrik .metalinje { color: color-mix(in srgb, #fff 82%, transparent); }
.breaking-rubrik--tom p { padding: 1.4rem; font-weight: 800; }

.vibeboost {
  border: 2px solid var(--fg);
  background: var(--boost-lime);
  color: #111315;
}
.vibeboost-hoved {
  min-height: 3.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r2);
  padding: 0.55rem 0.8rem;
  border-bottom: 2px solid #111315;
}
.vibeboost-hoved > span { font: 800 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.vibeboost-hoved > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem 0.8rem; font: 700 0.62rem/1.2 var(--mono); text-transform: uppercase; }
.vibeboost-fakta { display: inline-flex; gap: 0.8rem; }
.vibeboost-hoved time { font-weight: 600; }
.vibeboost-indhold { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.vibeboost-intro, .vibeboost-gor { min-width: 0; padding: clamp(1rem, 2.5vw, 2rem); }
.vibeboost-intro { border-right: 2px solid #111315; }
.vibeboost h2 { max-width: 16ch; margin-bottom: var(--r2); font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: 0.96; }
.vibeboost-intro p { max-width: 42ch; margin: 0; font-size: 1rem; line-height: 1.4; }
.vibeboost-gor ol { margin: 0 0 var(--r2); padding-left: 1.35rem; }
.vibeboost-gor li { margin-bottom: 0.45rem; padding-left: 0.25rem; font-weight: 650; line-height: 1.35; }
.vibeboost details { border-top: 1px solid #111315; padding-top: var(--r2); }
.vibeboost details[open] { padding: var(--r2); border: 1px solid #111315; background: color-mix(in srgb, #fffdf8 88%, var(--boost-lime)); }
.vibeboost summary { min-height: 2.75rem; display: flex; align-items: center; width: fit-content; cursor: pointer; font: 800 0.72rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.vibeboost pre { max-width: 100%; margin: 0 0 var(--r2); padding: 0.8rem; overflow-x: auto; border: 1px solid #111315; background: #fffdf8; color: #111315; white-space: pre-wrap; overflow-wrap: anywhere; font: 600 0.76rem/1.45 var(--mono); }
.vibeboost button { min-height: 2.75rem; padding: 0.65rem 0.9rem; border: 1px solid #111315; background: #111315; color: #fff; cursor: pointer; font: 800 0.72rem/1 var(--mono); text-transform: uppercase; }
.vibeboost button:focus-visible, .vibeboost summary:focus-visible { outline: 3px solid var(--radar-blaa); outline-offset: 3px; }
.kopi-status { margin-left: var(--r2); font: 700 0.68rem/1 var(--mono); }
.vibeboost-kilde { margin: var(--r2) 0 0; font: 600 0.62rem/1.4 var(--mono); }
.vibeboost-kilde a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

.radar-skinne {
  align-self: start;
  padding: 0.8rem clamp(0.8rem, 1.5vw, 1.25rem) 1rem;
  border-top: 0.35rem solid var(--radar-blaa);
  background: color-mix(in srgb, var(--bg) 90%, var(--radar-blaa));
}
.radar-hoved {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--fg);
  padding-bottom: 0.4rem;
  gap: var(--r2);
}
.radar-hoved h2 { font-family: var(--serif); font-size: 2rem; }
.radar-hoved a { font: 700 0.63rem/1 var(--mono); text-transform: uppercase; text-decoration: none; }
.radar-status, .radar-tom {
  margin: 0;
  padding-block: 0.55rem;
  color: var(--fg-daempet);
  font: 600 0.65rem/1.35 var(--mono);
}
.radar-status--foraeldet { margin-top: 0.55rem; padding: 0.55rem 0.65rem; display: flex; justify-content: space-between; gap: 0.7rem; background: color-mix(in srgb, var(--bg) 72%, var(--signal-gul)); color: var(--fg); }
.radar-status--foraeldet span { color: var(--fg-daempet); }
.radar-gruppe { margin-top: var(--r2); }
.radar-gruppe > h3 {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--linje-staerk);
  color: var(--fg-daempet);
  font: 800 0.64rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.radar-gitter { gap: 0; }
.radar-kort, .radar-kort[data-signal] {
  padding: 0.7rem 0;
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--linje);
  background: transparent;
}
.radar-nummer { padding-top: 0.1rem; color: var(--radar-blaa); font: 800 0.58rem/1 var(--mono); }
.radar-kort h3 { margin-bottom: 0.4rem; font-size: 1rem; line-height: 1.08; overflow-wrap: anywhere; }
.radar-kort h3 a { text-decoration: none; }
.radar-kort h3 a:hover { color: var(--accent); }
.radar-etiket {
  min-height: 0;
  margin-bottom: 0.35rem;
  color: var(--radar-blaa);
  font-size: 0.56rem;
}
.radar-kort[data-signal="stiger"] .radar-etiket { color: var(--accent); }
.radar-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.65rem; margin: 0; color: var(--fg-daempet); font: 600 0.58rem/1.3 var(--mono); }
.radar-gruppe--tom { margin-top: 0.7rem; display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.radar-gruppe--tom > h3 { flex: 0 0 auto; border: 0; padding: 0; }
.radar-gruppe--tom .radar-tom { padding: 0; text-align: right; }

@media (min-width: 48rem) {
  .forside-top {
    grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr);
    gap: clamp(1.5rem, 3vw, 3rem);
  }
  .niveau-b { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .dagens-illustration { min-height: 34rem; height: 100%; }
  .dagens-billede { height: 100%; aspect-ratio: auto; object-fit: cover; }
  .dagens-tekst {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: 72%;
    padding: clamp(1rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 98%, transparent) 0 66%, color-mix(in srgb, var(--bg) 82%, transparent) 84%, transparent 100%);
  }
}

@media (min-width: 64rem) {
  .forside-under { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); gap: var(--r4); }
  .radar-skinne {
    position: sticky;
    top: var(--r2);
  }
}

@media (max-width: 47.99rem) {
  .nytte-række { display: none; }
  .top-inder {
    min-height: 5.65rem;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    gap: var(--r1);
    padding-block: 0.55rem;
  }
  .maerke-blok { grid-column: 2; gap: 0.3rem; }
  .maerke { font-size: clamp(1.85rem, 9.5vw, 2.55rem); }
  .maerke-undertitel:not(.skjult-visuelt) {
    position: static; width: auto; height: auto; padding: 0; margin: 0;
    overflow: visible; clip-path: none; white-space: nowrap;
    font-size: clamp(0.43rem, 1.8vw, 0.56rem);
    letter-spacing: 0.055em;
  }
  .top .desktop-nav { display: none; }
  .emne-række .desktop-nav {
    min-height: 3rem;
    display: flex;
    justify-content: flex-start;
    gap: 1.35rem;
    padding-inline: 1.25rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .top .emne-række .nav-emne { display: none; }
  .top .emne-række .nav-mobil-vis { display: inline-flex; }
  .top .emne-række .emne-kun-mobil { display: inline-flex !important; }
  .emne-række .desktop-nav::after {
    content: "";
    flex: 0 0 0.05rem;
  }
  .menu {
    grid-column: 1;
    grid-row: 1;
    display: block;
    position: relative;
    justify-self: start;
  }
  .breaking-rubrik { grid-template-columns: minmax(0, 1fr); }
  .breaking-rubrik > header { grid-template-columns: auto 1fr auto; align-items: center; border-right: 0; border-bottom: 1px solid color-mix(in srgb, #fff 50%, transparent); }
  .breaking-rubrik > header a { margin-top: 0; text-align: right; }
  .breaking-historie h2 { font-size: clamp(1.7rem, 8.5vw, 2.4rem); overflow-wrap: anywhere; }
  .menu summary {
    min-height: 2.75rem;
    width: 2.75rem;
    padding: 0;
    border: 1px solid var(--fg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    list-style: none;
    text-align: center;
  }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary span {
    width: 1.2rem;
    overflow: hidden;
    color: transparent;
    font: 800 0/1 var(--mono);
  }
  .menu summary span::before {
    content: "";
    display: block;
    width: 1.2rem;
    height: 0.75rem;
    border-block: 2px solid var(--fg);
    background: linear-gradient(var(--fg), var(--fg)) center / 100% 2px no-repeat;
  }
  .menu summary b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .menu:not([open]) > nav { display: none; }
  .menu[open] > nav {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.55rem);
    left: 0;
    width: min(18rem, calc(100vw - 1.8rem));
    padding: 0.55rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: visible;
    overscroll-behavior: auto;
    background: var(--bg);
    border: 1px solid var(--fg);
    box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--fg) 18%, transparent);
  }
  .top .menu[open] > nav { width: min(20rem, calc(100vw - 2.5rem)); }
  .top .mobil-nav a {
    min-height: 2.75rem;
    padding-inline: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--fg-daempet);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
  }
  .top .mobil-nav a[aria-current] { color: var(--fg); background: var(--bg-flade); box-shadow: inset 0.2rem 0 var(--accent); }
  .mobil-tema {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 2.75rem;
    padding: 0;
    border: 1px solid var(--fg);
  }
  .fod-inder { grid-template-columns: minmax(0, 1fr); gap: var(--r2); }
  .fod-inder nav { gap: 0.2rem 1rem; }
  .fod-loefte { justify-self: start; text-align: left; }
  .dagens { display: flex; flex-direction: column; }
  .dagens-illustration { order: 2; margin-top: var(--r2); }
  .dagens-tekst { order: 1; }
  .dagens h1 { font-size: clamp(2.25rem, 13vw, 3.55rem); }
  .dagens-illustration figcaption { max-width: 75%; }
  .niveau-b { border-top-width: 3px; }
  .forside-layout, .forside-topgrid, .forside-under { grid-template-columns: minmax(0, 1fr); }
  .radar-puls { grid-template-columns: minmax(0, 1fr); }
  .radar-puls-hoved { min-width: 0; display: flex; align-items: center; justify-content: space-between; border-right: 0; }
  .radar-puls-hoved small { margin-top: 0; }
  .radar-puls ol { display: flex; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .radar-puls li { flex: 0 0 min(17rem, 78vw); }
  .vibeboost-indhold { grid-template-columns: minmax(0, 1fr); }
  .vibeboost-intro { border-right: 0; border-bottom: 2px solid #111315; }
  .vibeboost-hoved { align-items: flex-start; }
  .vibeboost-hoved > div { display: grid; justify-items: start; justify-content: flex-start; gap: 0.35rem; font-size: 0.72rem; line-height: 1.35; }
  .vibeboost-fakta { gap: 0.65rem; }
  .vibeboost h2 { font-size: clamp(1.9rem, 9vw, 2.75rem); }
  .radar-skinne { margin-top: 0; }
  .dagens-tekst {
    background: none;
    box-shadow: none;
    padding: 0;
  }
}

@media (max-width: 22rem) {
  .top nav a:not([aria-current]) { display: inline-flex; }
  .maerke-undertitel { max-width: 17rem; }
  h1, h2, h3 { overflow-wrap: anywhere; hyphens: auto; }
}

/* ── Internationalt magasinlayout ───────────────────────────────────────
   Forsiden bruger samme arbejdsdeling som et moderne globalt techmagasin:
   en kompakt latest-skinne, én dominerende hero og to billedkort. */
.forside-layout { gap: clamp(3rem, 5vw, 4.75rem); }
.forside-layout > * { min-width: 0; }
.forside-layout > .radar-puls { margin-bottom: clamp(-2rem, -2.5vw, -1.25rem); }

.forside-topgrid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hero" "topstories" "latest";
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.topgrid-hero { grid-area: hero; min-width: 0; display: grid; gap: 1.15rem; }
.topgrid-seneste { grid-area: latest; min-width: 0; }
.topgrid-topstories { grid-area: topstories; min-width: 0; display: grid; gap: 1.75rem; }
.topgrid-billede {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 82%, var(--radar-blaa));
}
.topgrid-billede img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.02);
}
.topgrid-billede figcaption {
  position: absolute;
  right: 0.45rem;
  bottom: 0.4rem;
  max-width: calc(100% - 0.9rem);
  padding: 0.2rem 0.35rem;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  color: var(--fg-daempet);
  font: 650 0.55rem/1.25 var(--mono);
}
.topgrid-hero .dagens-tekst {
  position: static;
  inset: auto;
  width: auto;
  display: block;
  padding: 0;
  background: none;
  box-shadow: none;
}
.topgrid-hero h1 {
  max-width: 14ch;
  margin-block: 0.6rem 0.7rem;
  font-size: clamp(2.45rem, 5.1vw, 4.8rem);
  line-height: 0.94;
}
.topgrid-hero .manchet {
  max-width: 50ch;
  margin-bottom: 0.75rem;
  color: var(--fg);
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
  line-height: 1.35;
}
.topgrid-topstory { min-width: 0; border-bottom: 1px solid var(--linje-staerk); padding-bottom: 1.35rem; }
.topgrid-topstory:last-child { border-bottom: 0; }
.topgrid-emneflade {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  align-items: end;
  overflow: hidden;
  padding: 0.8rem;
  background:
    radial-gradient(circle at 72% 32%, color-mix(in srgb, var(--signal-gul) 76%, transparent) 0 8%, transparent 8.5%),
    linear-gradient(145deg, color-mix(in srgb, var(--radar-blaa) 88%, var(--bg)) 0 58%, color-mix(in srgb, var(--radar-blaa) 28%, var(--bg)) 58%);
  color: #fff;
}
.topgrid-topstory:nth-child(2) .topgrid-emneflade {
  background:
    repeating-linear-gradient(120deg, transparent 0 1.8rem, rgb(255 255 255 / 18%) 1.8rem 1.9rem),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 86%, #782522), color-mix(in srgb, var(--accent) 25%, var(--bg)));
}
.topgrid-emneflade::after {
  content: "";
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  right: -8%;
  top: -18%;
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 50%;
  box-shadow: 0 0 0 2.2rem rgb(255 255 255 / 8%), 0 0 0 4.4rem rgb(255 255 255 / 7%);
}
.topgrid-emneflade span { position: relative; z-index: 1; font: 800 0.63rem/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.topgrid-topstory > a { display: block; margin-top: 0.75rem; color: var(--fg); text-decoration: none; }
.topgrid-topstory h2 { margin-block: 0.35rem 0.55rem; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.02; }
.topgrid-topstory a:hover h2 { color: var(--accent); }
.topgrid-topstory .topgrid-billede { aspect-ratio: 16 / 9; }
.topgrid-topstory:nth-child(2) .topgrid-billede img { object-position: 72% 50%; filter: saturate(0.84) contrast(1.08); }
.topgrid-seneste {
  padding: 1.15rem;
  border: 1px solid var(--linje-staerk);
  background: color-mix(in srgb, var(--bg) 72%, var(--hvid));
}
.topgrid-seneste > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--linje-staerk);
}
.topgrid-seneste > header h2,
.topgrid-seneste > header a { font: 750 0.7rem/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; }
.topgrid-seneste > header a { color: var(--radar-blaa); text-decoration: none; }
.topgrid-seneste ol { margin: 0; padding: 0; list-style: none; }
.topgrid-seneste li { border-bottom: 1px solid var(--linje); }
.topgrid-seneste li:last-child { border-bottom: 0; }
.topgrid-seneste li > a { display: block; padding-block: 0.85rem; color: var(--fg); text-decoration: none; }
.topgrid-seneste h3 {
  margin-bottom: 0.35rem;
  font-size: 0.98rem;
  line-height: 1.08;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topgrid-seneste li > a:hover h3 { color: var(--accent); }
.topgrid-seneste .metalinje { font-size: 0.58rem; }

/* Det blå panel er AiNews' produktløfte og et rytmisk kapitel, ikke en annonce. */
.identitetspanel {
  position: relative;
  min-width: 0;
  min-height: clamp(26rem, 38vw, 35rem);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
  overflow: hidden;
  background: linear-gradient(135deg, #0b397f 0%, #173eb6 50%, #2525df 100%);
  color: #fff;
}
.identitetspanel-tekst {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: clamp(3rem, 7vw, 6rem);
}
.identitetspanel-eyebrow,
.video-forside-eyebrow {
  display: block;
  margin-bottom: 0.9rem;
  font: 800 0.72rem/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.identitetspanel h2 {
  max-width: 12ch;
  margin-bottom: 1.2rem;
  color: #fff;
  font-size: clamp(2.8rem, 6vw, 5.75rem);
  line-height: 0.9;
}
.identitetspanel p {
  max-width: 45ch;
  margin-bottom: 1.7rem;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.4rem);
  line-height: 1.4;
}
.identitetspanel-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.identitetspanel-cta {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid #fff;
  color: #fff;
  font: 800 0.72rem/1 var(--mono);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}
.identitetspanel-cta--primaer { background: #fff; color: #102e86; }
.identitetspanel-cta:hover { outline: 3px solid #fff; outline-offset: 3px; }
.identitetspanel-grafik { position: relative; min-height: 22rem; overflow: hidden; opacity: 0.92; }
.identitetspanel-grafik::before {
  content: "";
  position: absolute;
  inset: 12% -18% -12% -8%;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 50%;
  background: radial-gradient(circle at 45% 48%, #ff7059 0 4%, transparent 4.5%), radial-gradient(circle at 65% 28%, #dfff78 0 3%, transparent 3.5%);
}
.identitetspanel-grafik svg { position: absolute; inset: 0; width: 115%; height: 100%; }
.identitetspanel-baner { stroke: rgb(255 255 255 / 72%); stroke-width: 2; }
.identitetspanel-punkter { fill: #e1ff78; }
.identitetspanel-ringe { stroke: rgb(255 255 255 / 28%); stroke-width: 1.5; }

/* Kalenderdøgnene står som to redaktionelle desks, ikke som en karrusel. */
.video-forside { min-width: 0; padding-block: clamp(0.5rem, 1vw, 1rem); }
.video-forside-hoved {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--fg);
}
.video-forside-eyebrow { margin-bottom: 0.35rem; color: var(--radar-blaa); }
.video-forside-hoved h2 { font-size: clamp(2.35rem, 5vw, 4.5rem); line-height: 0.9; }
.video-forside-hoved > a { font: 750 0.68rem/1.2 var(--mono); text-decoration: none; text-transform: uppercase; }
.video-forside-dage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); }
.video-forside-dag { min-width: 0; }
.video-forside-dag > header {
  min-height: 2.7rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}
.video-forside-dag > header h3 { font-size: clamp(1.25rem, 2.5vw, 1.85rem); }
.video-forside-dag > header time { color: var(--fg-daempet); font: 650 0.58rem/1.2 var(--mono); }
.video-forside-vinder,
.video-forside-kompakt { color: var(--fg); text-decoration: none; }
.video-forside-vinder { display: block; margin-bottom: 0.75rem; }
.video-forside-billede { position: relative; display: block; overflow: hidden; background: var(--bg-flade); }
.video-forside-billede::after {
  content: "▶";
  position: absolute;
  left: 0.65rem;
  bottom: 0.65rem;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
}
.video-forside-billede img,
.video-forside-billede--tom { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-forside-billede--tom { background: linear-gradient(135deg, var(--radar-blaa), color-mix(in srgb, var(--radar-blaa) 30%, var(--bg))); }
.video-forside-korttekst { display: block; min-width: 0; padding-top: 0.65rem; }
.video-forside-placering { color: var(--radar-blaa); font: 800 0.65rem/1 var(--mono); }
.video-forside-vinder h3 { margin-block: 0.3rem; font-size: clamp(1.35rem, 2.5vw, 2.05rem); line-height: 1; }
.video-forside-meta { display: block; color: var(--fg-daempet); font: 650 0.64rem/1.35 var(--mono); }
.video-forside-liste { display: grid; }
.video-forside-kompakt {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(7.5rem, 32%) minmax(0, 1fr);
  gap: 0.85rem;
  padding-block: 0.8rem;
  border-top: 1px solid var(--linje);
}
.video-forside-kompakt .video-forside-billede::after { width: 1.7rem; height: 1.7rem; left: 0.35rem; bottom: 0.35rem; font-size: 0.55rem; }
.video-forside-kompakt .video-forside-korttekst { padding-top: 0; }
.video-forside-kompakt h3 { margin-block: 0.25rem; font-size: 1rem; line-height: 1.08; }
.video-forside-vinder:hover h3,
.video-forside-kompakt:hover h3 { color: var(--accent); }
.video-forside-dag--nedtonet { opacity: 0.82; }
.video-forside-dag--nedtonet:hover,
.video-forside-dag--nedtonet:focus-within { opacity: 1; }
.video-forside-tom {
  min-height: 12rem;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  border: 1px solid var(--linje-staerk);
  color: var(--fg-daempet);
  font-family: var(--serif);
  text-align: center;
}
.video-forside-faelles-tom,
.video-forside-utilgaengelig {
  min-height: 8rem;
  display: grid;
  align-content: center;
  gap: 0.45rem;
  padding: 1.5rem;
  border: 1px solid var(--linje-staerk);
  color: var(--fg-daempet);
  text-align: center;
}
.video-forside-faelles-tom p,
.video-forside-utilgaengelig p { margin: 0; color: var(--fg); font-family: var(--serif); font-size: 1.1rem; }
.video-forside-faelles-tom span,
.video-forside-utilgaengelig span { font: 650 0.63rem/1.4 var(--mono); }
.video-forside-tom--kompakt { min-height: 5.5rem; }

:root[data-tema="moerk"] .topgrid-seneste,
:root[data-tema="moerk"] .forside-stroem { background: var(--bg-flade); }

@media (min-width: 64rem) {
  .forside-topgrid {
    grid-template-columns: minmax(13rem, 3fr) minmax(0, 6fr) minmax(15rem, 3fr);
    grid-template-areas: "latest hero topstories";
  }
  .topgrid-hero h1 { font-size: clamp(2.7rem, 4.2vw, 4.6rem); }
}

@media (max-width: 47.99rem) {
  .forside-layout { gap: 3.25rem; }
  .forside-layout > .radar-puls { margin-bottom: -1.5rem; }
  .topgrid-hero { display: grid; }
  .topgrid-hero .topgrid-billede { order: 1; margin: 0; }
  .topgrid-hero .dagens-tekst { order: 2; }
  .topgrid-hero h1 { font-size: clamp(2.35rem, 12vw, 3.65rem); overflow-wrap: anywhere; hyphens: auto; }
  .topgrid-topstories { gap: 2.25rem; }
  .topgrid-topstory h2 { font-size: clamp(1.55rem, 8vw, 2.2rem); }
  .identitetspanel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .identitetspanel-tekst { padding: 2.75rem 1.5rem 1.5rem; }
  .identitetspanel h2 { font-size: clamp(2.65rem, 13vw, 4.1rem); overflow-wrap: anywhere; hyphens: auto; }
  .identitetspanel-grafik { min-height: 15rem; }
  .identitetspanel-links { display: grid; }
  .identitetspanel-cta { justify-content: center; text-align: center; }
  .video-forside-hoved { display: grid; align-items: start; }
  .video-forside-hoved > a { max-width: none; text-align: left; }
  .video-forside-dage { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
  .video-forside-dag--nedtonet { opacity: 1; padding-top: 2rem; border-top: 1px solid var(--fg); }
  .vibeboost-hoved { display: grid; grid-template-columns: minmax(0, 1fr); }
  .vibeboost h2,
  .topgrid-topstory h2,
  .video-forside h2,
  .video-forside h3 { overflow-wrap: anywhere; hyphens: auto; }
}

@media (max-width: 22rem) {
  .identitetspanel-tekst { padding-inline: 1.25rem; }
  .video-forside-hoved { display: grid; }
  .video-forside-hoved > a { max-width: none; text-align: left; }
  .video-forside-kompakt { grid-template-columns: 6.5rem minmax(0, 1fr); }
}