/*
 * site.css — hele sitets udseende i én fil.
 *
 * MOBIL FØRST. Alle grundregler er skrevet til den smalle skærm, og
 * media queries lægger kun til. Det er ikke en stilpræference: over
 * halvdelen af gavesøgninger sker på telefon, tit stående i en butik,
 * og en side der først bliver god ved 1200 px, er god for ingen.
 *
 * Ingen ramme, ingen build-trin, ingen eksterne kald. Filen indlæses som
 * den er. Det holder Content Security Policy stram og siden hurtig.
 *
 * Rækkefølge: variabler → nulstilling → typografi → layout → komponenter.
 */

/* ------------------------------------------------------------------ *
 * 1. Designvariabler
 * ------------------------------------------------------------------ */

:root {
  /* Farver. Hindbær som primær — varm og gaveagtig, og den skiller sig ud
     fra den blå tone, alle prissammenligninger har. Rav bruges kun til
     priser og mærkater, så øjet lærer, hvad gult betyder. */
  --ink: #1b1419;
  --ink-daempet: #5c5158;
  --ink-svag: #857a81;

  --bund: #fbf8f6;
  --flade: #ffffff;
  --flade-2: #f4eeea;
  --kant: #e8ded8;
  --kant-stærk: #d6c7be;

  --accent: #a4133c;
  --accent-mørk: #7d0e2e;
  --accent-lys: #fdeef2;
  --rav: #b45309;
  --rav-lys: #fef3e2;
  --grøn: #14663f;
  --grøn-lys: #e7f4ed;

  /* Flydende typografi. clamp betyder, at der ikke er spring mellem
     brudpunkter — teksten vokser jævnt med skærmen. */
  --tekst-xs: 0.78rem;
  --tekst-s: 0.875rem;
  --tekst-m: 1rem;
  --tekst-l: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  --tekst-xl: clamp(1.3rem, 1.15rem + 0.75vw, 1.6rem);
  --tekst-2xl: clamp(1.6rem, 1.35rem + 1.25vw, 2.1rem);
  --tekst-3xl: clamp(2rem, 1.55rem + 2.2vw, 3rem);

  --skrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --skrift-display: var(--skrift);

  /* Afstande på en 4 px-skala. */
  --rum-1: 0.25rem;
  --rum-2: 0.5rem;
  --rum-3: 0.75rem;
  --rum-4: 1rem;
  --rum-5: 1.5rem;
  --rum-6: 2rem;
  --rum-7: 3rem;
  --rum-8: 4rem;

  --runding: 14px;
  --runding-s: 9px;
  --runding-stor: 22px;

  --skygge: 0 1px 2px rgb(27 20 25 / 0.05), 0 4px 12px rgb(27 20 25 / 0.05);
  --skygge-løft: 0 2px 6px rgb(27 20 25 / 0.07), 0 12px 28px rgb(27 20 25 / 0.10);

  --baand: 1180px;
  --læsebredde: 42rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f6f0f2;
    --ink-daempet: #b7a9b0;
    --ink-svag: #8d7f86;

    --bund: #141013;
    --flade: #1e1820;
    --flade-2: #271f29;
    --kant: #352b37;
    --kant-stærk: #4b3d4c;

    --accent: #ff89a8;
    --accent-mørk: #ffb3c6;
    --accent-lys: #33161f;
    --rav: #f0b060;
    --rav-lys: #33240f;
    --grøn: #7bd6a5;
    --grøn-lys: #10281c;

    --skygge: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 14px rgb(0 0 0 / 0.35);
    --skygge-løft: 0 2px 8px rgb(0 0 0 / 0.45), 0 14px 32px rgb(0 0 0 / 0.5);
  }
}

/* ------------------------------------------------------------------ *
 * 2. Nulstilling
 * ------------------------------------------------------------------ */

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

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

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

body {
  margin: 0;
  background: var(--bund);
  color: var(--ink);
  font-family: var(--skrift);
  font-size: var(--tekst-m);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-mørk); }

:where(a, button, summary, input):focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ *
 * 3. Typografi
 * ------------------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--skrift-display);
  line-height: 1.18;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0 0 var(--rum-3);
  font-weight: 700;
}

h1 { font-size: var(--tekst-3xl); letter-spacing: -0.03em; }
h2 { font-size: var(--tekst-2xl); margin-top: var(--rum-7); }
h3 { font-size: var(--tekst-xl); margin-top: var(--rum-5); }
h4 { font-size: var(--tekst-l); margin-top: var(--rum-4); }

p, ul, ol { margin: 0 0 var(--rum-4); }
p { text-wrap: pretty; }

/* Læsebredde på brødtekst, så linjerne ikke bliver for lange at følge.
   :not([class]) er afgørende: uden den rammer reglen også .kortnet, og så
   klemmes tre kolonner sammen på 672 px midt i et 1180 px bånd. Alt med
   en klasse styrer selv sin bredde. */
main :where(p, ul, ol, blockquote):not([class]) { max-width: var(--læsebredde); }

.manchet {
  font-size: var(--tekst-l);
  color: var(--ink-daempet);
  max-width: var(--læsebredde);
}

small, .fin { font-size: var(--tekst-s); color: var(--ink-daempet); }

/* ------------------------------------------------------------------ *
 * 4. Layout
 * ------------------------------------------------------------------ */

.baand {
  width: 100%;
  max-width: var(--baand);
  margin-inline: auto;
  padding-inline: var(--rum-4);
}

@media (min-width: 48rem) { .baand { padding-inline: var(--rum-6); } }

main { padding-bottom: var(--rum-8); }

section { margin-block: var(--rum-6); }

.springover {
  position: absolute;
  left: -9999px;
  background: var(--accent);
  color: #fff;
  padding: var(--rum-3) var(--rum-4);
  border-radius: 0 0 var(--runding-s) 0;
  z-index: 100;
}
.springover:focus { left: 0; top: 0; color: #fff; }

/* ------------------------------------------------------------------ *
 * 5. Toplinje
 * ------------------------------------------------------------------ */

.annoncelinje {
  margin: 0;
  background: var(--flade-2);
  color: var(--ink-daempet);
  font-size: var(--tekst-xs);
  text-align: center;
  padding: var(--rum-2) var(--rum-4);
  border-bottom: 1px solid var(--kant);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bund) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--kant);
}

.topbar .baand {
  display: flex;
  align-items: center;
  gap: var(--rum-3);
  min-height: 60px;
}

/* min-width: 0 på begge flex-børn. Uden den kan et flex-element ikke
   krympe under sit indhold, og så skubber "Find Oplevelsesgaver" plus
   seks menupunkter siden ud over skærmkanten på en 360 px telefon —
   hele siden får vandret rullebjælke, ikke kun menuen. */
.topbar nav { min-width: 0; flex: 1 1 auto; }

/* Navnet må ikke kunne krympe — det blev til "Fin…" på en 375 px
   telefon, da mærket og menuen delte pladsen. Menuen ruller i stedet;
   den har overflow-x: auto, så siden kan aldrig løbe ud over kanten. */
.mærke {
  display: inline-flex;
  align-items: center;
  gap: var(--rum-3);
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}

.mærke-navn,
.mærke-under { white-space: nowrap; }

.mærke-ikon { flex: 0 0 auto; color: var(--accent); }

.mærke-navn {
  display: block;
  font-weight: 750;
  font-size: 1.02rem;
  letter-spacing: -0.024em;
  line-height: 1.15;
}

.mærke-under {
  display: none;
  font-size: var(--tekst-xs);
  color: var(--ink-svag);
  font-weight: 400;
  letter-spacing: 0;
}

@media (min-width: 30rem) { .mærke-under { display: block; } }

/* Menuen ruller vandret på telefon i stedet for at folde ud i en
   hamburger. Der er seks punkter — de kan ses, og et rul er billigere
   end et klik plus en udfoldning. */
.menu {
  display: flex;
  gap: var(--rum-1);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  /* Starter fra venstre og ruller mod højre, med en fade i højre kant som
     hint om, at der er mere. Den var højrestillet før — og i en rulle-
     container ligger det, der stikker ud til venstre, uden for rækkevidde:
     de to første menupunkter kunne slet ikke nås på telefon. */
  justify-content: flex-start;
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.menu::-webkit-scrollbar { display: none; }

@media (min-width: 60rem) { .menu { justify-content: flex-end; mask-image: none; } }

.menu a {
  display: block;
  white-space: nowrap;
  padding: var(--rum-2) var(--rum-3);
  border-radius: 999px;
  color: var(--ink-daempet);
  text-decoration: none;
  font-size: var(--tekst-s);
  font-weight: 550;
  transition: background 0.15s, color 0.15s;
}

.menu a:hover { background: var(--flade-2); color: var(--ink); }
.menu a[aria-current="page"] { background: var(--accent-lys); color: var(--accent); }

/* ------------------------------------------------------------------ *
 * 6. Brødkrummer
 * ------------------------------------------------------------------ */

.brødkrummer {
  font-size: var(--tekst-xs);
  color: var(--ink-svag);
  padding-block: var(--rum-4) 0;
}
.brødkrummer ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rum-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.brødkrummer li + li::before { content: "›"; margin-right: var(--rum-2); color: var(--kant-stærk); }
.brødkrummer a { color: var(--ink-daempet); text-decoration: none; }
.brødkrummer a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * 7. Sidehoved på en temaside
 * ------------------------------------------------------------------ */

.sidehoved { padding-block: var(--rum-5) var(--rum-4); }

.sidehoved h1 { margin-bottom: var(--rum-3); }

.nøgletal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rum-2);
  list-style: none;
  margin: var(--rum-4) 0 0;
  padding: 0;
}

.nøgletal li {
  background: var(--flade);
  border: 1px solid var(--kant);
  border-radius: 999px;
  padding: var(--rum-2) var(--rum-4);
  font-size: var(--tekst-s);
  color: var(--ink-daempet);
  box-shadow: var(--skygge);
}

.nøgletal b { color: var(--ink); font-weight: 650; }

/* ------------------------------------------------------------------ *
 * 8. Oplevelseskort — sidens vigtigste komponent
 * ------------------------------------------------------------------ */

.kortnet {
  display: grid;
  gap: var(--rum-4);
  grid-template-columns: 1fr;
  padding: 0;
  margin: var(--rum-5) 0;
  list-style: none;
}

@media (min-width: 34rem) { .kortnet { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .kortnet { grid-template-columns: repeat(3, 1fr); gap: var(--rum-5); } }

.kort {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--flade);
  border: 1px solid var(--kant);
  border-radius: var(--runding);
  overflow: hidden;
  box-shadow: var(--skygge);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.kort:hover {
  transform: translateY(-3px);
  box-shadow: var(--skygge-løft);
  border-color: var(--kant-stærk);
}

@media (hover: none) { .kort:hover { transform: none; } }

.kort-billede {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--flade-2), var(--accent-lys));
  overflow: hidden;
}

.kort-billede img { width: 100%; height: 100%; object-fit: cover; }

/* Uden billede står der et roligt mønster i stedet for et tomt hul. */
.kort-billede--tom {
  display: grid;
  place-items: center;
  color: var(--accent);
  opacity: 0.5;
}

.kort-mærkat {
  position: absolute;
  top: var(--rum-3);
  left: var(--rum-3);
  background: color-mix(in srgb, var(--flade) 94%, transparent);
  color: var(--ink-daempet);
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--rum-1) var(--rum-3);
  border-radius: 999px;
  border: 1px solid var(--kant);
}

.kort-krop {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--rum-4);
  gap: var(--rum-2);
}

.kort-titel {
  font-size: var(--tekst-l);
  font-weight: 650;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.012em;
}

.kort-titel a { color: var(--ink); text-decoration: none; }

/* Hele kortet er klikbart, men kun titlen er selve linket. Så får
   skærmlæsere ét meningsfuldt link i stedet for tre, der siger det samme. */
.kort-titel a::after { content: ""; position: absolute; inset: 0; }

.kort:hover .kort-titel a { color: var(--accent); }

.kort-tekst {
  font-size: var(--tekst-s);
  color: var(--ink-daempet);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kort-sted {
  font-size: var(--tekst-xs);
  color: var(--ink-svag);
  display: flex;
  align-items: center;
  gap: var(--rum-1);
}

.kort-fod {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rum-3);
  margin-top: auto;
  padding-top: var(--rum-3);
  border-top: 1px solid var(--kant);
}

.pris {
  font-size: var(--tekst-l);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.pris small { display: block; font-size: var(--tekst-xs); font-weight: 400; color: var(--ink-svag); }

.pris-før {
  font-size: var(--tekst-s);
  color: var(--ink-svag);
  text-decoration: line-through;
  font-weight: 400;
  margin-right: var(--rum-2);
}

.knap {
  display: inline-flex;
  align-items: center;
  gap: var(--rum-2);
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: var(--rum-2) var(--rum-4);
  font: inherit;
  font-size: var(--tekst-s);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, transform 0.15s;
}

.knap:hover { background: var(--accent-mørk); color: #fff; }
.knap:active { transform: scale(0.97); }

@media (prefers-color-scheme: dark) {
  .knap { color: #21121a; }
  .knap:hover { color: #21121a; }
}

.knap--rolig {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--kant-stærk);
}
.knap--rolig:hover { background: var(--accent-lys); color: var(--accent); }

.leverandør {
  font-size: var(--tekst-xs);
  color: var(--ink-svag);
}

.udsolgt { opacity: 0.55; }
.udsolgt .knap { background: var(--ink-svag); pointer-events: none; }

/* ------------------------------------------------------------------ *
 * 9. Faktaboks, FAQ og noter
 * ------------------------------------------------------------------ */

.faktaboks {
  background: var(--flade);
  border: 1px solid var(--kant);
  border-left: 4px solid var(--accent);
  border-radius: var(--runding-s);
  padding: var(--rum-4) var(--rum-5);
  margin: var(--rum-5) 0;
  max-width: var(--læsebredde);
  box-shadow: var(--skygge);
}

.faktaboks h2, .faktaboks h3 { margin-top: 0; font-size: var(--tekst-l); }
.faktaboks :last-child { margin-bottom: 0; }

.faq { max-width: var(--læsebredde); margin-block: var(--rum-5); }

.faq details {
  border-bottom: 1px solid var(--kant);
  padding: var(--rum-4) 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 620;
  font-size: var(--tekst-l);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--rum-4);
  align-items: start;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  color: var(--accent);
  font-weight: 400;
  font-size: 1.6em;
  line-height: 1;
  transition: transform 0.2s;
  flex: 0 0 auto;
}

.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > :not(summary) { margin-top: var(--rum-3); color: var(--ink-daempet); }

.note {
  font-size: var(--tekst-xs);
  color: var(--ink-svag);
  margin-top: var(--rum-2);
}

/* ------------------------------------------------------------------ *
 * 10. Prisændringer — vores egen historik
 * ------------------------------------------------------------------ */

.historik { list-style: none; padding: 0; margin: var(--rum-4) 0; max-width: var(--læsebredde); }

.historik li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rum-2) var(--rum-3);
  align-items: baseline;
  padding: var(--rum-3) 0;
  border-bottom: 1px dashed var(--kant);
  font-size: var(--tekst-s);
}

/* 7,5rem, ikke 5,5: "19. september 2026" skal kunne stå på én linje. */
.historik time { color: var(--ink-svag); font-variant-numeric: tabular-nums; flex: 0 0 7.5rem; }
.historik .op { color: var(--accent); font-weight: 600; }
.historik .ned { color: var(--grøn); font-weight: 600; }

/* Navnet får resten af linjen, så beløbet ikke bliver klemt væk på
   telefon, hvor rækken alligevel ombryder. */
.historik-navn { flex: 1 1 12rem; min-width: 0; }

/*
 * Prisændringen på selve kortet. Den må ikke ligne udbyderens egen
 * "førpris" (.pris-før), for den siger noget andet: at VI har set prisen
 * skifte mellem to hentninger. Derfor står den på sin egen linje under
 * prisen og ikke som en overstreget pris ved siden af.
 */
.pris-vores {
  margin: var(--rum-2) 0 0;
  font-size: var(--tekst-xs);
  color: var(--ink-svag);
}

.pris-vores.ned { color: var(--grøn); }
.pris-vores.op { color: var(--ink-daempet); }
.pris-vores time { color: inherit; opacity: 0.75; }

/* ------------------------------------------------------------------ *
 * 11. Temaoversigt
 * ------------------------------------------------------------------ */

.temanet {
  display: grid;
  gap: var(--rum-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  list-style: none;
  padding: 0;
  margin: var(--rum-5) 0;
}

.temanet a {
  display: flex;
  flex-direction: column;
  gap: var(--rum-1);
  padding: var(--rum-4);
  background: var(--flade);
  border: 1px solid var(--kant);
  border-radius: var(--runding-s);
  text-decoration: none;
  color: var(--ink);
  font-weight: 620;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.temanet a:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--skygge);
  color: var(--accent);
}

.temanet span { font-size: var(--tekst-xs); color: var(--ink-svag); font-weight: 400; }

/* ------------------------------------------------------------------ *
 * 12. Bund
 * ------------------------------------------------------------------ */

.bund {
  background: var(--flade);
  border-top: 1px solid var(--kant);
  margin-top: var(--rum-8);
  padding-block: var(--rum-6) var(--rum-5);
  font-size: var(--tekst-s);
}

.bund-net {
  display: grid;
  gap: var(--rum-6);
  grid-template-columns: 1fr;
}

@media (min-width: 44rem) { .bund-net { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--rum-5); } }

.bund h2 {
  font-size: var(--tekst-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-svag);
  margin: 0 0 var(--rum-3);
  font-weight: 650;
}

.bund p { color: var(--ink-daempet); }

.bund-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rum-2); }
.bund-liste a { color: var(--ink-daempet); text-decoration: none; }
.bund-liste a:hover { color: var(--accent); text-decoration: underline; }

.bund-udgiver { font-size: var(--tekst-xs); color: var(--ink-svag); }

.bund-linje {
  display: flex;
  flex-direction: column;
  gap: var(--rum-2);
  margin-top: var(--rum-6);
  padding-top: var(--rum-4);
  border-top: 1px solid var(--kant);
  font-size: var(--tekst-xs);
  color: var(--ink-svag);
}

.bund-linje p { margin: 0; color: inherit; }

@media (min-width: 44rem) {
  .bund-linje { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ------------------------------------------------------------------ *
 * 13. Print — nogen printer en gaveliste. Så skal den kunne læses.
 * ------------------------------------------------------------------ */

@media print {
  .topbar, .annoncelinje, .bund, .springover, .knap { display: none; }
  body { background: #fff; color: #000; }
  .kort { break-inside: avoid; border: 1px solid #999; box-shadow: none; }
  .kortnet { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------------ *
 * 14. Kun for skærmlæsere
 *
 * Knapperne hedder alle sammen "Se pris". For en seende er det klart,
 * hvilken oplevelse knappen hører til — den står i kortet. En skærmlæser,
 * der læser links op i en liste, får tredive gange "Se pris". Derfor
 * ligger oplevelsens navn i knappen, skjult for øjet.
 * ------------------------------------------------------------------ */

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

/* ------------------------------------------------------------------ *
 * 15. Brødtekst fra Content Machine og redaktionelle sider
 * ------------------------------------------------------------------ */

.byline {
  font-size: var(--tekst-xs);
  color: var(--ink-svag);
  margin: var(--rum-2) 0 0;
}
.byline a { color: var(--ink-daempet); }

main section[aria-labelledby] { margin-block: var(--rum-6); max-width: var(--læsebredde); }

/* Sektioner med et kortgitter skal have hele båndets bredde. Læsebredden
   er sat for brødtekst; den klemte gitteret ned til to kolonner på en
   skærm, der havde plads til fire. */
main section[aria-labelledby].sektion--bred { max-width: none; }

.punkter, .kort-liste { padding-left: 1.2em; }
.punkter li, .kort-liste li { margin-bottom: var(--rum-2); }
.kort-liste { list-style: none; padding: 0; }
.kort-liste li { padding-left: 1.1em; position: relative; }
.kort-liste li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }

main code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--flade-2);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

/* Infografik fra artiklen. Begrænses til læsebredden, så den ikke
   sprænger spalten på desktop. */
.artikel-figur {
  margin: var(--rum-6) 0;
  max-width: var(--læsebredde);
}
.artikel-figur img {
  width: 100%;
  height: auto;
  border-radius: var(--runding);
  border: 1px solid var(--kant);
}
.artikel-figur figcaption {
  font-size: var(--tekst-xs);
  color: var(--ink-svag);
  margin-top: var(--rum-2);
}

/* ------------------------------------------------------------------ *
 * 16. Tabeller
 *
 * På desktop en almindelig tabel, der kan rulle vandret, hvis den er
 * bred. På mobil foldes hver række ud til et kort, hvor kolonne-
 * overskriften står foran værdien (data-etiket sættes ved import).
 * Ellers skulle læseren rulle vandret for at se sammenhængen.
 * ------------------------------------------------------------------ */

.tabel-rulle {
  overflow-x: auto;
  margin: var(--rum-5) 0;
  border: 1px solid var(--kant);
  border-radius: var(--runding-s);
  background: var(--flade);
  box-shadow: var(--skygge);
  max-width: 100%;
}

table.data {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--tekst-s);
}
table.data th {
  text-align: left;
  font-size: var(--tekst-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-svag);
  font-weight: 650;
  padding: var(--rum-3) var(--rum-4);
  background: var(--flade-2);
  border-bottom: 1px solid var(--kant);
  white-space: nowrap;
}
table.data td {
  padding: var(--rum-3) var(--rum-4);
  border-bottom: 1px solid var(--kant);
  vertical-align: top;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--flade-2); }

@media (max-width: 40rem) {
  .tabel-rulle { overflow: visible; border: 0; background: none; box-shadow: none; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  table.data tr {
    background: var(--flade);
    border: 1px solid var(--kant);
    border-radius: var(--runding-s);
    padding: var(--rum-3) var(--rum-4);
    margin-bottom: var(--rum-3);
    box-shadow: var(--skygge);
  }
  table.data td {
    padding: var(--rum-1) 0;
    border: 0;
    display: grid;
    grid-template-columns: minmax(7rem, 40%) 1fr;
    gap: var(--rum-3);
  }
  table.data td::before {
    content: attr(data-etiket);
    font-size: var(--tekst-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-svag);
    font-weight: 650;
  }
  table.data td:not([data-etiket]) { display: block; }
}

/* ------------------------------------------------------------------ *
 * 17. AI-mærkat
 *
 * Står på hvert eneste billede — kortene, temakortene og artiklernes
 * infografikker. Diskret: lille, dæmpet, men læsbart på både lyse og
 * mørke billeder, fordi det ligger på en halvgennemsigtig mørk bund.
 * Det må ikke kunne overses, og det må ikke råbe.
 *
 * Overlayet kræver en position:relative-ramme omkring billedet, og
 * rammen skal stå på listen herunder. Tilføjer du en ny billedramme,
 * så skriv den ind — ellers falder mærkatet ud i normalt flow og bliver
 * klippet væk af rammens overflow:hidden. Det er sket før.
 * ------------------------------------------------------------------ */

.kort-billede .ai-maerke {
  position: absolute;
  right: var(--rum-2);
  bottom: var(--rum-2);
  font-size: 0.62rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 0.9);
  /* Ingen backdrop-filter: det lægger hvert mærkat i sit eget kompositlag.
     På 1.110 kort koster det GPU, og i nogle paint-stier males laget slet
     ikke — mærkatet stod i DOM'en, men ikke på skærmen. */
  background: rgb(20 12 16 / 0.62);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  pointer-events: none;
  max-width: calc(100% - var(--rum-4));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Under billedet i stedet for oven på. Bruges på temakortene, hvor der
   ikke er bredde nok til et overlay, uden at det fylder billedet. */
.ai-maerke--under {
  display: block;
  font-size: 0.6rem;
  line-height: 1.25;
  color: var(--ink-svag);
  padding: var(--rum-2) var(--rum-3) var(--rum-3);
  margin-top: auto;
}

.ai-maerke--figur {
  font-size: var(--tekst-xs);
  color: var(--ink-svag);
  margin: var(--rum-1) 0 0;
  max-width: none;
}

/* ------------------------------------------------------------------ *
 * 18. Temakort med billede
 *
 * Til /oplevelser/ og forsiden: temaets hero-billede over navnet, så man
 * kan vælge på et blik. Samme kortsprog som oplevelseskortene, men
 * lavere — de er en indgang, ikke en vare.
 * ------------------------------------------------------------------ */

.temanet--billeder {
  /* To ad gangen på telefon. 25 fuldbredde-kort blev til 6.000 px, man
     skulle forbi, før resten af forsiden overhovedet begyndte. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--rum-3);
}

@media (min-width: 40rem) {
  .temanet--billeder {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--rum-4);
  }
}

.temanet--billeder a {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.temanet--billeder .temakort-navn { font-size: var(--tekst-sm); }
.temanet--billeder .temakort-tal { font-size: var(--tekst-xs); }

@media (min-width: 40rem) {
  .temanet--billeder .temakort-navn { font-size: var(--tekst-base); }
}

.temakort-billede {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--flade-2);
  overflow: hidden;
}

.temakort-billede img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.temanet--billeder a:hover .temakort-billede img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .temanet--billeder a:hover .temakort-billede img { transform: none; }
}

.temakort-navn {
  display: block;
  padding: var(--rum-3) var(--rum-4) 0;
  font-weight: 650;
  font-size: var(--tekst-l);
  letter-spacing: -0.012em;
}

.temakort-tal {
  display: block;
  padding: var(--rum-1) var(--rum-4) var(--rum-4);
  font-size: var(--tekst-xs);
  color: var(--ink-svag);
  font-weight: 400;
}