/* ==========================================================================
   Unilyd - designsystem (site.css)

   Fælles for hele siden. Sidespecifik CSS ligger i assets/css/page-*.css
   og slås til med "css: page-xxx.css" i toppen af siden.

   Faste regler (læs før du retter):
   - Hjørner: 0-2px overalt. Ingen pille-knapper, ingen runde kort.
   - Ingen glød, ingen store bløde skygger, ingen farveforløb som pynt.
   - Orange tekst på lys baggrund: brug var(--orange-text), ikke var(--orange).
   - Tekst på orange: altid mørk (var(--ink)), aldrig hvid.
   - Kun systemskrifter. Ingen eksterne filer.

   Indhold:
    1. Farver og mål
    2. Grundlag (reset, typografi, links, fokus)
    3. Layout (wrap, sektioner, gitter)
    4. Header og menu
    5. Footer
    6. Knapper og links
    7. Hero (forside)
    8. Sidehoved med brødkrummer (undersider)
    9. Sektionshoved og label
   10. Nummereret liste (01, 02 ...)
   11. Billede + tekst (split)
   12. Billeder: media, ratio og galleri
   13. Spec-tabel og definitionsliste
   14. Trin (proces)
   15. Fakta i spalter
   16. FAQ
   17. CTA-bånd
   18. Kontaktblok
   19. Tegnede skærme (butiksskærm, touchskærm)
   20. Pixelafstand (P6 / P8 / P10)
   21. Brødtekst (prose) og små hjælpeklasser
   22. Videoklip (kort, lydløst, i løkke)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Farver og mål
   -------------------------------------------------------------------------- */
:root {
  /* Mørke flader: header, hero, oversigtsbånd, footer */
  --graphite: #16181a;
  --graphite-2: #1f2225;
  --graphite-3: #2a2e32;
  --screen: #0d0e10;            /* "slukket skærm" i tegninger */

  /* Lyse flader */
  --paper: #f6f2ec;             /* varm råhvid */
  --white: #ffffff;

  /* Tekst */
  --ink: #1d1d1b;
  --muted: #6b6b66;             /* 4.8:1 på --paper */
  --grey: #777776;              /* logoets grå. Kun til streger og store ting */
  --on-dark: #f3f1ed;
  --on-dark-muted: #a9aaa8;     /* 7.6:1 på --graphite */
  --body-light: #3d3d39;        /* brødtekst på lys baggrund (ca. 10:1 på --paper) */
  --body-dark: #c9cac6;         /* brødtekst på mørk baggrund */

  /* Accent */
  --orange: #e7792b;            /* flader, streger, tekst på mørk baggrund */
  --orange-hover: #f08a40;
  --orange-text: #ad5216;       /* orange TEKST på lys baggrund (4.7:1 på --paper) */
  --orange-large: #c4601a;      /* kun til stor tekst (24px+) på lys baggrund */

  /* Streger */
  --line: #ddd6cb;
  --line-strong: #bfb7aa;
  --line-dark: rgba(255, 255, 255, .14);
  --line-dark-strong: rgba(255, 255, 255, .32);

  /* Mål */
  --radius: 2px;
  --max: 1200px;
  --gutter: 20px;
  --header-h: 64px;
  --section-y: clamp(64px, 9vw, 120px);
  --gap: clamp(24px, 4vw, 64px);

  /* Skrift (kun systemskrifter) */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Temafarver. Komponenterne bruger disse, så de virker på både lys og mørk. */
  --fg: var(--ink);
  --fg-muted: var(--muted);     /* kun billedtekster, små overskrifter, noter */
  --body: var(--body-light);    /* almindelig brødtekst */
  --rule: var(--line);
  --rule-strong: var(--line-strong);
  --accent-text: var(--orange-text);
}
@media (min-width: 600px) { :root { --gutter: 32px; } }
@media (min-width: 1080px) { :root { --gutter: 40px; --header-h: 76px; } }

/* Mørke flader skifter temafarverne */
.section--dark,
.section--dark-2,
.hero,
.page-head,
.cta,
.site-header,
.site-footer,
.on-dark {
  --fg: var(--on-dark);
  --fg-muted: var(--on-dark-muted);
  --body: var(--body-dark);
  --rule: var(--line-dark);
  --rule-strong: var(--line-dark-strong);
  --accent-text: var(--orange);
  color: var(--fg);
}

/* Hjælpeklasse: lille overskrift i versaler, fx <p class="caps">Firma</p>.
   Samme stil som dt i kontaktlister, tabelhoveder og footer. Sans, ikke mono.
   Mono bruges kun til .label (01 · Udendørs), P-værdier, mål og årstal. */
.caps {
  font: 600 13px/1.5 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-muted);
}


/* --------------------------------------------------------------------------
   2. Grundlag
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (min-width: 900px) { body { font-size: 18px; } }

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

h1, h2, h3, h4 {
  margin: 0;
  color: var(--fg);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* Vægte: højst 700. Windows (Segoe UI) og Android (Roboto) har ikke 750-800,
   så de bliver til Black (900) dér. 650 bliver til 700 på Windows. */
h1, .h1 { font-size: clamp(2.25rem, 1.3rem + 4.2vw, 4.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; }
h2, .h2 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); font-weight: 700; letter-spacing: -0.015em; }
h3, .h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; }
h4, .h4 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; }

p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--orange); }

strong, b { font-weight: 650; }
small { font-size: .875em; }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--gap) 0; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.btn--primary:focus-visible { outline-color: var(--fg); }

::selection { background: var(--orange); color: var(--ink); }

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--orange); color: var(--ink);
  padding: 12px 16px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: calc(820px + 2 * var(--gutter)); }

/* Sektioner. Vælg baggrund med en modifier. */
.section { padding-block: var(--section-y); background: var(--white); }
.section--paper { background: var(--paper); }
.section--dark { background: var(--graphite); }
.section--dark-2 { background: var(--graphite-2); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--flush-top { padding-top: 0; }
.section--rule { border-top: 1px solid var(--rule); }

/* 12-kolonne-gitter. Alle børn er fuld bredde på mobil. */
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.grid12 > * { grid-column: 1 / -1; }
@media (max-width: 899.98px) {
  .grid12 > .sm-6 { grid-column: span 6; }
}
@media (min-width: 900px) {
  .grid12 > .col-3 { grid-column: span 3; }
  .grid12 > .col-4 { grid-column: span 4; }
  .grid12 > .col-5 { grid-column: span 5; }
  .grid12 > .col-6 { grid-column: span 6; }
  .grid12 > .col-7 { grid-column: span 7; }
  .grid12 > .col-8 { grid-column: span 8; }
  .grid12 > .col-9 { grid-column: span 9; }
  .grid12 > .col-12 { grid-column: 1 / -1; }
  .grid12 > .push-1 { grid-column-start: 2; }
}

/* Enkle spalter */
.cols { display: grid; gap: var(--gap); }
@media (min-width: 900px) {
  .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols--wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cols--wide-right { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .cols--center { align-items: center; }
  /* Spalte, der bliver stående, mens man læser ved siden af (fx overskrift ved FAQ) */
  .sticky-col { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}

/* Lodret rytme: giver luft mellem alle børn */
.flow > * + * { margin-top: var(--flow, 1em); }
.flow > h2 + *, .flow > h3 + * { margin-top: .6em; }
.flow > * + h2, .flow > * + h3 { margin-top: 1.6em; }


/* --------------------------------------------------------------------------
   4. Header og menu
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--graphite);
  border-bottom: 1px solid var(--line-dark);
}
.site-header__inner { display: flex; align-items: center; gap: 10px; height: var(--header-h); }

.site-logo { display: block; margin-right: auto; padding: 6px 0; flex: 0 0 auto; }
.site-logo img { height: 34px; width: auto; }
@media (min-width: 1080px) { .site-logo img { height: 42px; } }

/* "Ring 30 26 85 00" i headeren */
.head-call {
  display: inline-flex; align-items: center; gap: .45em;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-dark-strong); border-radius: var(--radius);
  color: var(--on-dark); text-decoration: none;
  font-size: 15px; font-weight: 650; white-space: nowrap;
}
.head-call:hover { border-color: var(--orange); color: var(--on-dark); }
.head-call__lbl { color: var(--orange); }
@media (max-width: 459.98px) { .head-call__num { display: none; } }

/* Menu-knap (mobil, tablet og smalle computerskærme). Menuen på computer
   kommer først ved 1100px, så de syv punkter og ring-knappen kan stå på én linje.
   Ret samme tal i assets/js/site.js (desktop = matchMedia), hvis det ændres. */
.menu-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line-dark-strong); border-radius: var(--radius);
  color: var(--on-dark); text-decoration: none;
  font-size: 15px; font-weight: 650;
}
/* Tre streger, der bliver til et kryds, når menuen er åben */
.menu-toggle__bars { position: relative; width: 18px; height: 12px; display: block; }
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; }
.menu-toggle__bars { background-size: 100% 2px; background-position: 0 50%; }
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background-size: 100% 100%;
  transition: transform .15s ease, top .15s ease;
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { top: 10px; }
.menu-open .menu-toggle__bars { background-size: 0 0; }
.menu-open .menu-toggle__bars::before { top: 5px; transform: rotate(45deg); }
.menu-open .menu-toggle__bars::after { top: 5px; transform: rotate(-45deg); }
.menu-open .menu-toggle { border-color: var(--orange); }

/* Menu på mobil: fuld bredde under headeren */
.site-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--header-h);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--graphite);
  border-top: 1px solid var(--line-dark);
  padding: 8px var(--gutter) 48px;
}
.menu-open .site-nav,
html:not(.js) .site-nav:target { display: block; }
.menu-open body { overflow: hidden; }

.site-nav__list { list-style: none; margin: 0; padding: 0; }
.site-nav__item { border-bottom: 1px solid var(--line-dark); }
.site-nav__link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; padding: 8px 0;
  color: var(--on-dark); text-decoration: none;
  font-size: 21px; font-weight: 650; letter-spacing: -0.01em;
}
.site-nav__item.is-active > .site-nav__link { color: var(--orange); }
/* LED-gruppen står først og fylder mest. Stregen under den skiller den fra resten. */
.site-nav__item--led > .site-nav__link { min-height: 72px; font-size: 24px; font-weight: 700; }
.site-nav__item--led.is-group-end { border-bottom: 2px solid var(--orange); margin-bottom: 6px; }
.site-nav__item:not(.site-nav__item--led) > .site-nav__link { min-height: 54px; font-size: 18px; font-weight: 600; color: var(--on-dark); }
.site-nav__item:not(.site-nav__item--led).is-active > .site-nav__link { color: var(--orange); }
.site-nav__name { display: flex; flex-direction: column; gap: 2px; }
.site-nav__note { font-size: 14.5px; font-weight: 400; letter-spacing: 0; color: var(--on-dark-muted); }
.site-nav__sub { list-style: none; margin: -4px 0 14px; padding: 0 0 0 16px; border-left: 1px solid var(--line-dark-strong); }
.site-nav__sub a {
  display: flex; align-items: center; min-height: 46px;
  color: var(--on-dark-muted); text-decoration: none; font-size: 17px; font-weight: 550;
}
.site-nav__sub small { display: none; }
.site-nav__sub a[aria-current="page"] { color: var(--orange); }
.site-nav__caret { display: none; }

.site-nav__contact { margin-top: 28px; display: grid; gap: 4px; }
.site-nav__contact p { font: 600 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-muted); }
.site-nav__phone { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; color: var(--on-dark); text-decoration: none; padding: 4px 0; }
.site-nav__mail { color: var(--on-dark-muted); padding: 8px 0; }
.site-nav__close { display: none; margin-top: 20px; color: var(--on-dark-muted); padding: 12px 0; }
html:not(.js) .site-nav:target .site-nav__close { display: inline-block; }

/* Menu på computer */
@media (min-width: 1100px) {
  .menu-toggle { display: none; }
  .site-header__inner { gap: 20px; }
  .site-logo { margin-right: auto; }
  .site-nav,
  html:not(.js) .site-nav:target {
    display: block; position: static; padding: 0; border: 0; background: none; overflow: visible;
  }
  .site-nav__list { display: flex; align-items: stretch; }
  .site-nav__item { border: 0; position: relative; }
  .site-nav__link,
  .site-nav__item--led > .site-nav__link,
  .site-nav__item:not(.site-nav__item--led) > .site-nav__link {
    position: relative;
    min-height: var(--header-h); padding: 0 11px; gap: 8px;
    font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--on-dark-muted);
  }
  /* LED-punkterne står lysest. En tynd streg skiller dem fra resten. */
  .site-nav__item--led > .site-nav__link { color: var(--on-dark); }
  .site-nav__item--led.is-group-end { border: 0; margin: 0 10px 0 0; }
  .site-nav__item--led.is-group-end::after {
    content: ""; position: absolute; right: -5px; top: 50%; width: 1px; height: 22px; margin-top: -11px;
    background: var(--line-dark-strong);
  }
  .site-nav__note { display: none; }
  .site-nav__link:hover, .site-nav__item:focus-within > .site-nav__link,
  .site-nav__item:not(.site-nav__item--led) > .site-nav__link:hover { color: var(--on-dark); }
  .site-nav__item.is-active > .site-nav__link,
  .site-nav__item:not(.site-nav__item--led).is-active > .site-nav__link { color: var(--on-dark); }
  .site-nav__item.is-active > .site-nav__link::after {
    content: ""; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 2px; background: var(--orange);
  }
  .site-nav__caret {
    display: block; width: 7px; height: 7px; margin-top: -4px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  /* Undermenu: vises ved hover og ved tastatur-fokus */
  .site-nav__sub {
    display: none;
    position: absolute; top: 100%; left: 0; z-index: 10;
    min-width: 320px; margin: 0; padding: 8px 0;
    background: var(--graphite-3);
    border: 1px solid var(--line-dark-strong); border-top: 2px solid var(--orange);
  }
  .has-sub:hover > .site-nav__sub,
  .has-sub:focus-within > .site-nav__sub { display: block; }
  .site-nav__sub a {
    display: block; min-height: 0; padding: 12px 20px;
    color: var(--on-dark); font-size: 15.5px; font-weight: 650;
  }
  .site-nav__sub a:hover { background: #363b40; }
  .site-nav__sub small { display: block; margin-top: 2px; color: var(--on-dark-muted); font-size: 13.5px; font-weight: 400; }
  .site-nav__sub a[aria-current="page"] span { color: var(--orange); }
  .site-nav__contact, .site-nav__close { display: none !important; }
  .head-call { min-height: 46px; padding: 0 18px; }
}
@media (min-width: 1100px) and (max-width: 1319.98px) {
  .site-header__inner { gap: 14px; }
  .site-nav__link,
  .site-nav__item--led > .site-nav__link,
  .site-nav__item:not(.site-nav__item--led) > .site-nav__link { padding: 0 8px; font-size: 14.5px; }
  .site-nav__item.is-active > .site-nav__link::after { left: 8px; right: 8px; }
  .head-call { padding: 0 14px; }
}


/* --------------------------------------------------------------------------
   5. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--graphite);
  color: var(--on-dark-muted);
  border-top: 1px solid var(--line-dark);
  padding: 64px 0 28px;
  font-size: 15.5px;
}
.site-footer__grid { display: grid; gap: 40px; }
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 64px; } }
.site-footer__logo { display: inline-block; margin-bottom: 20px; }
.site-footer__logo img { height: 44px; width: auto; }
.site-footer__brand p + p { margin-top: .9em; }
.site-footer__h {
  font: 600 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-dark); margin-bottom: 14px;
}
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.site-footer__contact > div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: center; }
.site-footer__contact dt { color: var(--on-dark-muted); }
.site-footer__contact a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.site-footer__person { margin-top: 10px; }
/* To spalter: LED-gruppen til venstre, resten til højre */
.site-footer__links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.site-footer__links ul { list-style: none; margin: 0; padding: 0; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__links .is-sub a { color: var(--on-dark-muted); padding-left: 14px; }
.site-footer__links span { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark-muted); }
.site-footer__bottom {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-size: 14px;
}
.site-footer__bottom p + p { margin-top: 0; }


/* --------------------------------------------------------------------------
   6. Knapper og links
   Én primær knap pr. sektion. Sekundære handlinger er tekstlinks med pil.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 50px; padding: 12px 22px;
  border: 1px solid transparent; border-radius: var(--radius);
  font: 650 16.5px/1.2 var(--sans);
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn--primary:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: var(--ink); }
.btn--outline { background: transparent; border-color: var(--rule-strong); color: var(--fg); }
.btn--outline:hover { border-color: var(--orange); color: var(--fg); }
.btn--block { display: flex; width: 100%; }
@media (max-width: 599.98px) { .btn--block-sm { display: flex; width: 100%; } }
.btn__arrow { transition: transform .15s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Tekstlink med pil: <a class="link-arrow" href="...">Se pyloner</a> */
.link-arrow {
  display: inline-flex; align-items: baseline; gap: .5em;
  padding-block: 11px;
  color: var(--fg); font-weight: 650;
  text-decoration: underline; text-decoration-color: var(--orange);
  text-decoration-thickness: 1.5px; text-underline-offset: .3em;
}
.link-arrow::after {
  content: "\2192"; content: "\2192" / "";
  color: var(--accent-text);
  transition: transform .15s ease;
}
.link-arrow:hover::after { transform: translateX(4px); }

/* Række med knap + link */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 32px; }

/* Henvisning: et kort spørgsmål og et link på linjen under.
   <div class="crosslink"><p>Skal kunderne selv trykke?</p><a class="link-arrow" href="...">Se touchskærme</a></div> */
.crosslink { margin-top: 32px; }
.crosslink p { color: var(--body); }


/* --------------------------------------------------------------------------
   7. Hero (forside). Mørk, tekst til venstre, stort foto til højre.
   -------------------------------------------------------------------------- */
.hero { background: var(--graphite); padding-top: clamp(40px, 7vw, 88px); overflow: hidden; }
.hero__grid { display: grid; gap: 40px; }
.hero__text { max-width: 720px; }
.hero__title { font-size: clamp(2.4rem, 1.2rem + 4.8vw, 4.6rem); letter-spacing: -0.02em; }
.hero__lead { margin-top: 24px; font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.5; color: var(--body); max-width: 34em; }
.hero__meta { margin-top: 40px; border-top: 1px solid var(--rule); display: grid; }
.hero__meta > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.hero__meta dt { font: 600 13px/1.9 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.hero__meta dd { color: var(--fg); }
.hero__meta a { text-decoration-color: var(--orange); }

/* Fotoet går helt ud i kanten på mobil og står på sektionens bund */
.hero__media { position: relative; margin: 0 calc(-1 * var(--gutter)); background: var(--screen); }
.hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--pos, 50% 30%); }
.hero__media figcaption {
  position: absolute; left: 0; bottom: 0;
  background: var(--graphite); color: var(--on-dark-muted);
  font: 500 14px/1.3 var(--sans);
  padding: 10px 14px 10px var(--gutter);
}
/* Mobil: fotoet skal kunne ses på første skærm. Kontaktlinjerne står i bunden af siden. */
@media (max-width: 599.98px) {
  .hero { padding-top: 32px; }
  .hero__grid { gap: 28px; }
  .hero__meta { display: none; }
}
@media (min-width: 600px) {
  .hero__media { margin: 0; }
  .hero__media figcaption { padding-left: 14px; }
}
/* Tablet: pylonen er et højformat-foto. Beskær det ikke til liggende. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .hero__media { max-width: 520px; }
  .hero__media img { aspect-ratio: 4 / 5; }
}
/* Computer: fotoet går fra toppen af LED-tavlen helt ned til bunden af hero,
   så der ikke står et tomt, sort felt over det. Teksten bestemmer højden. */
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: stretch; }
  .hero__text { padding-bottom: clamp(56px, 7vw, 96px); align-self: center; }
  .hero__media { min-height: 480px; }
  .hero__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}


/* --------------------------------------------------------------------------
   8. Sidehoved med brødkrummer (undersider)
   -------------------------------------------------------------------------- */
.page-head { background: var(--graphite); padding: clamp(28px, 4vw, 40px) 0 clamp(48px, 7vw, 96px); }
.page-head__grid { display: grid; gap: 36px; margin-top: clamp(28px, 5vw, 56px); }
.page-head__text { max-width: 760px; }
.page-head__lead { margin-top: 20px; font-size: clamp(1.1rem, 1rem + .45vw, 1.28rem); line-height: 1.5; color: var(--body); max-width: 36em; }
.page-head__media { margin: 0; }
.page-head__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--pos, 50% 50%); background: var(--screen); }
.page-head__media figcaption { margin-top: 10px; font-size: 14.5px; line-height: 1.45; color: var(--fg-muted); }
@media (min-width: 900px) {
  .page-head--media .page-head__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
}

.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 14.5px; color: var(--fg-muted); }
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li + li::before { content: "/"; margin: 0 10px; color: var(--rule-strong); }
.breadcrumb a { display: inline-block; padding: 12px 0; color: var(--fg-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--orange); }
.breadcrumb [aria-current="page"] { color: var(--fg); }


/* --------------------------------------------------------------------------
   9. Sektionshoved og label
   -------------------------------------------------------------------------- */
/* Label: "01 · Udendørs". Mono, versaler, orange. Brug den med mening, ikke over alt. */
.label {
  display: block;
  font: 600 12.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 16px;
}
.label--muted { color: var(--fg-muted); }

.section-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head__intro { margin-top: 18px; font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem); color: var(--body); max-width: 40em; }
@media (min-width: 900px) {
  /* Overskrift til venstre, intro til højre. Første linje i begge står på samme linje.
     Brug den sparsomt. Den almindelige .section-head (intro under overskriften) er standard. */
  .section-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 var(--gap); align-items: first baseline; }
  .section-head--split .label { grid-column: 1 / -1; }
  .section-head--split .section-head__intro { margin-top: 0; }
}
.section-head--rule { padding-top: 24px; border-top: 1px solid var(--rule-strong); }


/* --------------------------------------------------------------------------
   10. Nummereret liste (01, 02 ...). Som skitse 1: label, titel, tekst, link.
       Med eller uden billede/tegning i højre side.
   -------------------------------------------------------------------------- */
.numlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.numlist__item { position: relative; display: grid; gap: 20px; padding: 36px 0 40px; border-bottom: 1px solid var(--rule); }
.numlist__item .label { margin-bottom: 12px; }
.numlist__title { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 700; letter-spacing: -0.015em; }
.numlist__text { margin-top: 14px; color: var(--body); max-width: 34em; }
.numlist__body .link-arrow { margin-top: 10px; }
.numlist__media { margin: 0; }
.numlist__media > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: var(--pos, 50% 50%); background: var(--screen); }
@media (max-width: 899.98px) {
  /* På mobil kommer billedet efter titlen */
  .numlist__body { display: contents; }
  .numlist__more .numlist__text { margin-top: 0; }
  .numlist__item > * { min-width: 0; }
  .numlist__head { order: 1; }
  .numlist__media { order: 2; }
  .numlist__more { order: 3; }
}
/* Uden billede (.numlist--plain): mindre titel og tættere rækker */
.numlist--plain .numlist__title { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.numlist--plain .numlist__text { max-width: 44em; margin-top: 10px; }
@media (max-width: 899.98px) {
  .numlist--plain .numlist__item { gap: 0; padding: 24px 0 28px; }
}
@media (min-width: 900px) {
  .numlist__item { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap); align-items: center; padding: 48px 0; }
  .numlist--plain .numlist__item { grid-template-columns: 200px minmax(0, 1fr); align-items: first baseline; padding: 28px 0; }
}
/* Hele rækken er klikbar via linket (kun når listen har .numlist--linked) */
.numlist--linked .numlist__item .link-arrow::before { content: ""; position: absolute; inset: 0; }
.numlist--linked .numlist__item:hover .numlist__title { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .15em; }


/* --------------------------------------------------------------------------
   11. Billede + tekst (split). DOM-rækkefølgen er mobil-rækkefølgen.
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(28px, 4vw, 40px); }
.split__media { margin: 0; }
.split__media img { width: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); background: var(--screen); }
.split__text { max-width: 620px; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }
  .split--wide-media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--narrow-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--media-right > .split__media { order: 2; }
  .split--media-right.split--wide-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--media-right.split--narrow-media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--top { align-items: start; }
}


/* --------------------------------------------------------------------------
   12. Billeder: media, ratio og galleri. Skarpe hjørner, tekst under billedet.
   -------------------------------------------------------------------------- */
.media { margin: 0; }
.media img { width: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); background: var(--screen); }
.media--contain img { object-fit: contain; background: transparent; }

/* Fast billedformat. Sæt klassen på <figure>, så gælder den <img> indeni. */
.ratio-16x9 img { aspect-ratio: 16 / 9; }
.ratio-16x10 img { aspect-ratio: 16 / 10; }
.ratio-3x2 img { aspect-ratio: 3 / 2; }
.ratio-4x3 img { aspect-ratio: 4 / 3; }
.ratio-1x1 img { aspect-ratio: 1 / 1; }
.ratio-4x5 img { aspect-ratio: 4 / 5; }
.ratio-3x4 img { aspect-ratio: 3 / 4; }
.ratio-2x3 img { aspect-ratio: 2 / 3; }

/* Billedtekst */
.caption, .media figcaption, .gallery figcaption, .split__media figcaption {
  margin-top: 10px; font-size: 14.5px; line-height: 1.45; color: var(--fg-muted);
}
.caption b, .media figcaption b, .gallery figcaption b, .split__media figcaption b { color: var(--fg); font-weight: 650; margin-right: .35em; }

/* Galleri: brug .grid12-kolonner på hvert billede (col-4, col-6, col-8 ...) */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px) clamp(12px, 2vw, 24px); }
.gallery > * { grid-column: 1 / -1; }
.gallery__item { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.gallery__item img { width: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); background: var(--screen); }
@media (max-width: 899.98px) {
  .gallery > .sm-6 { grid-column: span 6; }
}
/* .fill: billedet ligger i en .frame og strækkes på computer, så det flugter
   med naboen i samme række. På mobil bruger rammen --ratio (standard 4 / 5). */
.gallery__item.fill .frame { position: relative; aspect-ratio: var(--ratio, 4 / 5); background: var(--screen); }
.gallery__item.fill .frame img { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 900px) {
  .gallery__item.fill .frame { aspect-ratio: auto; flex: 1 1 auto; min-height: 220px; }
  .gallery > .col-3 { grid-column: span 3; }
  .gallery > .col-4 { grid-column: span 4; }
  .gallery > .col-5 { grid-column: span 5; }
  .gallery > .col-6 { grid-column: span 6; }
  .gallery > .col-7 { grid-column: span 7; }
  .gallery > .col-8 { grid-column: span 8; }
  .gallery > .col-12 { grid-column: 1 / -1; }
}


/* --------------------------------------------------------------------------
   13. Spec-tabel og definitionsliste
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.spec caption { text-align: left; caption-side: top; padding-bottom: 14px; font: 650 1.05rem/1.3 var(--sans); color: var(--fg); }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-top: 1px solid var(--rule); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 1px solid var(--rule); }
.spec tbody th { font-weight: 500; color: var(--fg-muted); }
.spec:not(:has(thead)) tbody th { width: 42%; }
.spec td { color: var(--fg); }
.spec thead th { font: 600 13px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); border-top: 0; padding-top: 0; }
.spec .num, .mono { font-family: var(--mono); font-size: .94em; letter-spacing: 0; }
.spec-note { margin-top: 12px; font-size: 14.5px; color: var(--fg-muted); }

/* Definitionsliste: begreb til venstre, forklaring til højre */
.deflist { border-top: 1px solid var(--rule); }
.deflist > div { padding: 18px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 4px; }
.deflist dt { font-weight: 700; color: var(--fg); }
.deflist dd { color: var(--body); }
@media (min-width: 700px) {
  .deflist > div { grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr); gap: 24px; }
}
.deflist--compact > div { padding: 12px 0; }
.deflist--compact dt { font: 600 13px/1.9 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.deflist--compact dd { color: var(--fg); }


/* --------------------------------------------------------------------------
   14. Trin (proces). Tallene kommer automatisk: 01, 02, 03 ...
   -------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; }
.steps > li {
  counter-increment: step;
  display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px;
  padding: 22px 0 24px; border-top: 1px solid var(--rule-strong);
  align-content: start;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: 1 / span 3;
  font: 700 15px/1.6 var(--mono); color: var(--accent-text);
}
.steps h3 { font-size: 1.2rem; }
.steps p { margin-top: 8px; color: var(--body); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: 32px; }
  .steps > li { grid-template-columns: 1fr; padding: 24px 0 0; border-top: 2px solid var(--fg); }
  .steps > li::before { grid-row: auto; margin-bottom: 12px; font-size: 14px; }
}


/* --------------------------------------------------------------------------
   15. Fakta i spalter (ikke kort, bare spalter med en streg over)
   -------------------------------------------------------------------------- */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--gap); }
.facts > li { padding: 22px 0 26px; border-top: 1px solid var(--rule); }
.facts h3, .facts h4 { font-size: 1.15rem; }
.facts p { margin-top: 8px; color: var(--body); }
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   16. FAQ med <details>
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule-strong); max-width: 880px; }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 64px; padding: 16px 0;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight: 650; color: var(--fg);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
  content: ""; flex: 0 0 16px; width: 16px; height: 16px;
  background:
    linear-gradient(var(--accent-text), var(--accent-text)) center / 16px 2px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) center / 2px 16px no-repeat;
}
.faq__item[open] > summary::after {
  background: linear-gradient(var(--accent-text), var(--accent-text)) center / 16px 2px no-repeat;
}
.faq__item > summary:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: .2em; }
.faq__answer { padding: 0 0 24px; max-width: 42em; color: var(--body); }
.faq__answer > * + * { margin-top: .8em; }


/* --------------------------------------------------------------------------
   17. CTA-bånd. Mørkt som standard. Én knap + evt. et tekstlink.
   -------------------------------------------------------------------------- */
.cta { background: var(--graphite-2); padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--line-dark); }
.cta--paper { background: var(--paper); border-top: 0;
  --fg: var(--ink); --fg-muted: var(--muted); --body: var(--body-light); --rule: var(--line); --rule-strong: var(--line-strong); --accent-text: var(--orange-text); }
.cta__grid { display: grid; gap: 40px; }
.cta__title { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); font-weight: 700; letter-spacing: -0.02em; }
.cta__text { margin-top: 18px; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--body); max-width: 32em; }
@media (min-width: 900px) {
  .cta__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gap); align-items: center; }
}
/* På mobil er knappen og mail-linket nok. Numrene står også i footeren lige under. */
@media (max-width: 899.98px) {
  .cta .contact__list { display: none; }
}

/* Lille afslutning inde i en sektion: streg over, tekst og handling */
.callout { margin-top: clamp(40px, 6vw, 72px); padding-top: 28px; border-top: 2px solid var(--orange); display: grid; gap: 20px; }
.callout__title { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); }
.callout p { color: var(--body); margin-top: 8px; max-width: 36em; }
.callout .actions { margin-top: 0; }
@media (min-width: 900px) {
  .callout { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--gap); }
}


/* --------------------------------------------------------------------------
   18. Kontaktblok
   -------------------------------------------------------------------------- */
.contact__list { border-top: 1px solid var(--rule); }
.contact__list > div {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--rule);
}
.contact__list dt { font: 600 13px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.contact__list dd { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); font-weight: 650; color: var(--fg); overflow-wrap: anywhere; }
.contact__list dd a { display: inline-flex; align-items: center; min-height: 44px; padding: 2px 0; text-decoration: none; }
.contact__list dd a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.contact__list .is-main dd { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 700; letter-spacing: -0.01em; }
.contact__list dd.plain { font-size: 1.05rem; font-weight: 500; line-height: 1.5; padding: 6px 0; }

.person { display: grid; gap: 6px; align-content: start; }
.person__name { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }
.person__role { color: var(--fg-muted); }
.person p:not([class]) { color: var(--body); }
.person__photo { margin: 0 0 16px; max-width: 360px; }
.person__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }


/* --------------------------------------------------------------------------
   19. Tegnede skærme. Ren CSS, skalerer med boksen (container queries).
       Brug role="img" og en aria-label, der siger hvad tegningen viser.
   -------------------------------------------------------------------------- */
.ill {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #111315;
  border: 1px solid var(--line-dark);
  container-type: inline-size;
  display: grid; place-items: center;
  color: #1d1f22;
}
.ill--light { background: #e9e3d9; border-color: var(--line); }
.ill__tag {
  position: absolute; top: 10px; right: 10px;
  font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-dark-muted); border: 1px solid var(--line-dark-strong); padding: 5px 7px;
}
.ill--light .ill__tag { color: var(--muted); border-color: var(--line-strong); }

/* 19a. Butiksskærm på væggen over en disk */
.ill-shop { position: absolute; inset: 0; }
.ill-shop__wall { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: #1b1e21; border-top: 1px solid #2c3035; }
.ill-shop__counter { position: absolute; left: 12%; right: 12%; bottom: 0; height: 22%; background: #24282c; border-top: 3px solid #3a3f45; }
.ill-shop__screen {
  position: absolute; left: 50%; top: 11%; transform: translateX(-50%);
  width: 56%; aspect-ratio: 16 / 9;
  background: #050506; border: 1px solid #34383d; padding: 1.2cqw;
}
.ill-shop__screen::after { /* vægbeslag */
  content: ""; position: absolute; left: 46%; right: 46%; top: -9%; height: 9%; background: #34383d;
}
.ill-shop__content {
  height: 100%; background: var(--orange); color: #1b0f04;
  display: grid; grid-template-rows: 1fr auto; padding: 6% 6% 5%;
}
.ill-shop__content strong { display: block; font-size: clamp(11px, 4.4cqw, 30px); line-height: 1.02; font-weight: 700; letter-spacing: -0.01em; }
.ill-shop__content small { display: block; margin-top: 4%; font: 600 clamp(8px, 1.9cqw, 13px)/1.2 var(--mono); opacity: .8; }
.ill-shop__plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2%; }
.ill-shop__plan span {
  font: 600 clamp(6px, 1.45cqw, 10px)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  text-align: center; padding: 4% 2%; background: rgba(0, 0, 0, .16); color: rgba(27, 15, 4, .78);
}
.ill-shop__plan span.on { background: #1b0f04; color: #f6c08e; }
.ill-shop__goods { position: absolute; left: 20%; right: 20%; bottom: 22%; height: 6%; display: flex; gap: 3%; align-items: flex-end; }
.ill-shop__goods i { flex: 1; height: 100%; background: #3a3f45; }
.ill-shop__goods i:nth-child(2n) { height: 70%; }

/* 19b. Touchskærm på fod (den digitale infoskranke) */
.ill-kiosk { position: absolute; inset: 0; }
.ill-kiosk__post { position: absolute; left: 50%; bottom: 0; width: 5%; height: 16%; transform: translateX(-50%); background: #2c3035; }
.ill-kiosk__base { position: absolute; left: 50%; bottom: 0; width: 22%; height: 2.5%; transform: translateX(-50%); background: #3a3f45; }
.ill-kiosk__screen {
  position: absolute; left: 50%; top: 7%; transform: translateX(-50%);
  height: 77%; aspect-ratio: 10 / 13;
  background: #050506; border: 1px solid #34383d; padding: 1.1cqw;
}
.ill-kiosk__ui {
  height: 100%; background: #f3f1ec; color: #1d1f22;
  display: grid; grid-template-columns: 38% 1fr; grid-template-rows: auto 1fr; gap: 4%;
  padding: 6%;
}
.ill-kiosk__top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; font-size: clamp(8px, 2.1cqw, 15px); font-weight: 700; }
.ill-kiosk__top span { font: 500 clamp(6px, 1.4cqw, 10px)/1 var(--mono); color: #6b6f74; }
.ill-kiosk__menu { display: grid; gap: 5%; align-content: start; }
.ill-kiosk__menu span {
  display: block; padding: 9% 7%;
  font-size: clamp(6px, 1.45cqw, 11px); font-weight: 650; line-height: 1.1;
  background: #ffffff; border: 1px solid #e0dbd1; border-left: 3px solid var(--c, #c9c2b6);
}
.ill-kiosk__menu span.on { background: var(--orange); border-color: var(--orange); color: #1b0f04; }
.ill-kiosk__map { position: relative; background: #ffffff; border: 1px solid #e0dbd1; }
.ill-kiosk__map i { position: absolute; background: #c9ccd0; }
.ill-kiosk__map .r1 { left: 10%; top: 12%; width: 34%; height: 20%; background: #f7d97a; }
.ill-kiosk__map .r2 { left: 52%; top: 12%; width: 38%; height: 20%; background: #9fd6e8; }
.ill-kiosk__map .r3 { left: 10%; top: 62%; width: 34%; height: 24%; background: #e7b3e3; }
.ill-kiosk__map .r4 { left: 52%; top: 62%; width: 38%; height: 24%; background: #cfe7c0; }
.ill-kiosk__map .hall { left: 10%; top: 42%; width: 80%; height: 10%; background: #dcdfe2; }
.ill-kiosk__map .path { left: 22%; top: 46%; width: 50%; height: 0; background: none; border-top: 2px dashed #d23b2b; }
.ill-kiosk__map .you { left: 70%; top: 43%; width: 6%; aspect-ratio: 1; background: #d23b2b; }
.ill-kiosk__map .goal { left: 20%; top: 33%; width: 5%; aspect-ratio: 1; background: #d23b2b; }
.ill-kiosk__map em {
  position: absolute; left: 6%; bottom: 4%;
  font: 600 clamp(5px, 1.2cqw, 9px)/1 var(--mono); font-style: normal; color: #6b6f74;
}


/* --------------------------------------------------------------------------
   20. Pixelafstand (P6 / P8 / P10). Prikkerne er lysdioder, afstand i mm.
       --mm styrer skalaen (px pr. millimeter).
   -------------------------------------------------------------------------- */
.pitch { --mm: 1.05px; margin: 0; }
@media (min-width: 600px) { .pitch { --mm: 1.3px; } }
.pitch__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 16px); }
.pitch__cell { display: grid; gap: 10px; }
.pitch__dots {
  aspect-ratio: 1;
  background-color: #08090a;
  border: 1px solid var(--line-dark);
  background-image: radial-gradient(circle, var(--orange) 0 1.25px, transparent 1.75px);
  /* "space" fordeler hele felter i boksen, så ingen prik bliver skåret over ved kanten */
  background-repeat: space;
  background-position: 0 0;
}
.pitch__cell--p6 .pitch__dots { background-size: calc(6 * var(--mm)) calc(6 * var(--mm)); }
.pitch__cell--p8 .pitch__dots { background-size: calc(8 * var(--mm)) calc(8 * var(--mm)); }
.pitch__cell--p10 .pitch__dots { background-size: calc(10 * var(--mm)) calc(10 * var(--mm)); }
.pitch__name { display: flex; flex-direction: column; gap: 5px; }
@media (min-width: 600px) { .pitch__name { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px; } }
.pitch__name b { font: 700 15px/1 var(--mono); color: var(--fg); }
.pitch__name small { font: 500 12px/1 var(--mono); color: var(--fg-muted); }
.pitch figcaption { margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--fg-muted); max-width: 36em; }
/* Stor udgave til en mørk boks (fx i .numlist__media) */
.pitch--panel { background: #111315; border: 1px solid var(--line-dark); padding: clamp(18px, 3vw, 32px); --fg: var(--on-dark); --fg-muted: var(--on-dark-muted); --body: var(--body-dark); }
@media (min-width: 900px) { .pitch--panel { --mm: 1.6px; } }


/* --------------------------------------------------------------------------
   21. Brødtekst og små hjælpeklasser
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose > * + h2 { margin-top: 1.8em; }
.prose > * + h3 { margin-top: 1.5em; }
.prose h2 + *, .prose h3 + * { margin-top: .55em; }
.prose a { text-decoration-color: var(--orange); }
.prose ul, .list-square { list-style: none; padding: 0; }
.prose ul > li, .list-square > li { position: relative; padding-left: 22px; }
.prose ul > li + li, .list-square > li + li { margin-top: .45em; }
.prose ul > li::before, .list-square > li::before {
  content: ""; position: absolute; left: 2px; top: .68em; width: 7px; height: 7px; background: var(--orange);
}
.prose ol { padding-left: 1.3em; }

.lead { font-size: clamp(1.1rem, 1rem + .45vw, 1.28rem); line-height: 1.5; color: var(--body); }
.muted { color: var(--fg-muted); }
.accent { color: var(--accent-text); }
.nowrap { white-space: nowrap; }
.measure { max-width: 38em; }
.mt-0 { margin-top: 0 !important; }
.mt-s { margin-top: 16px !important; }
.mt-m { margin-top: 32px !important; }
.mt-l { margin-top: clamp(48px, 6vw, 80px) !important; }
.note { font-size: 14.5px; color: var(--fg-muted); }


/* --------------------------------------------------------------------------
   22. Videoklip. Kort, lydløst klip i løkke med billedtekst.
       <figure class="loop-video"><video src="/assets/video/..." poster="/assets/img/..."
         width="560" height="448" muted loop playsinline autoplay preload="metadata"></video>
         <figcaption>LED-skærm i drift</figcaption></figure>
       site.js giver den en pauseknap og stopper den ved "reducer bevægelse".
   -------------------------------------------------------------------------- */
.loop-video { margin: 0; }
.loop-video video { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; background: var(--screen); }
/* Klippet er kun 560 px bredt. Stræk det ikke ud over hele bredden, når det står alene i én spalte (tablet). */
@media (max-width: 899.98px) { .loop-video { max-width: 560px; } }
.loop-video figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 10px; font-size: 14.5px; line-height: 1.45; color: var(--fg-muted);
}
.loop-video__toggle {
  appearance: none; flex: 0 0 auto;
  min-height: 40px; padding: 0 14px;
  background: transparent; color: var(--fg);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font: 600 14px/1 var(--sans); cursor: pointer;
}
.loop-video__toggle:hover { border-color: var(--orange); }