@font-face{font-family:"Outfit";src:url(/filer/fonts/outfit-200.woff2) format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url(/filer/fonts/outfit-300.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url(/filer/fonts/outfit-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/filer/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/filer/fonts/barlow-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/filer/fonts/barlow-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/filer/fonts/jetbrains-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* surround-sound.dk – tema "Lytterummet".
   Ultramarin farveflade, kridhvide ark, natblå beregnere og fire faste kanalfarver:
   koral = front/center, gul = surround, cyan = højde, lime = subwoofer/LFE. */

:root {
  --zv-ul: #2236D9;
  --zv-nat: #0A0E2A;
  --zv-lrd: #121A4A;
  --zv-hv: #FFFFFF;
  --zv-gr: #EEF1F8;
  --zv-ln: #D5DBEA;
  --zv-sk: #4A5070;
  --zv-is: #C9D2FF;
  --zv-ko: #FF6A5A;
  --zv-gu: #FFC93C;
  --zv-cy: #3FD8F2;
  --zv-li: #B5F23D;
  --zv-max: 1200px;
  --zv-pil: 999px;
  --zv-rund: 1.75rem;
  --zv-fh: "Outfit", "Barlow", system-ui, sans-serif;
  --zv-fb: "Barlow", system-ui, sans-serif;
  --zv-fm: "JetBrains Mono", ui-monospace, "Consolas", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--zv-ul);
  color: var(--zv-nat);
  font-family: var(--zv-fb);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--zv-gu); outline-offset: 3px; border-radius: 6px; }
.zv-sh :focus-visible, .zv-sd-hv :focus-visible, .zv-sd-gul :focus-visible, .zv-wg-tb :focus-visible, .zv-sc:focus-visible { outline-color: var(--zv-ul); }

.zv-skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 10;
  background: var(--zv-gu); color: var(--zv-nat); padding: .7rem 1.2rem; border-radius: var(--zv-pil);
  font-weight: 600; text-decoration: none;
}
.zv-skip:focus { top: 1rem; }

.zv-w { width: 100%; max-width: var(--zv-max); margin: 0 auto; padding: 0 .75rem; }
@media (min-width: 720px) { .zv-w { padding: 0 1.5rem; } }

/* ---------- Header: minimal, på én linje ---------- */
.zv-hd { color: var(--zv-hv); }
.zv-hd-i { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; padding-top: 1rem; padding-bottom: 1rem; }
.zv-lg { display: inline-flex; align-items: center; padding: .3rem 0; margin-right: auto; border-radius: 6px; }
.zv-lg svg { display: block; height: 1.45rem; width: auto; }
.zv-lg svg path { fill: var(--zv-hv); }
.zv-nv { flex: 1 1 100%; }
.zv-nv-l { list-style: none; margin: 0 0 0 -.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.zv-nv-a {
  display: inline-block; padding: .4rem .8rem; border-radius: var(--zv-pil);
  color: var(--zv-hv); text-decoration: none; font-weight: 600; font-size: .95rem; line-height: 1.25;
}
.zv-nv-a:hover { background: rgba(255, 255, 255, .16); }
.zv-nv-a[aria-current="page"] { background: var(--zv-gu); color: var(--zv-nat); }
@media (min-width: 1000px) {
  .zv-nv { flex: 0 1 auto; }
  .zv-nv-l { margin: 0; justify-content: flex-end; }
}

/* ---------- Typografi ---------- */
.zv-h1 {
  font-family: var(--zv-fh); font-weight: 200;
  font-size: clamp(2.45rem, 1.5rem + 4.4vw, 5rem); line-height: 1.02; letter-spacing: -.02em;
  margin: 0 0 1.25rem; hyphens: auto;
}
.zv-ey, .zv-wg-ey {
  font-family: var(--zv-fm); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--zv-gu); margin: 0 0 1rem;
}
.zv-ld { font-size: 1.2rem; line-height: 1.5; color: var(--zv-is); max-width: 40rem; margin: 0 0 1.75rem; }

/* ---------- Knapper og piller ---------- */
.zv-bt {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: .7rem 1.45rem; border-radius: var(--zv-pil);
  font-family: var(--zv-fb); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
}
.zv-bt-gul { background: var(--zv-gu); color: var(--zv-nat); }
.zv-bt-gul:hover { background: var(--zv-hv); }
.zv-bt-ln { border-color: var(--zv-hv); color: var(--zv-hv); background: transparent; }
.zv-bt-ln:hover { background: var(--zv-hv); color: var(--zv-ul); }
.zv-bt-ul { background: var(--zv-ul); color: var(--zv-hv); }
.zv-bt-ul:hover { background: var(--zv-nat); }
.zv-ac { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.zv-pi {
  display: inline-block; padding: .35rem .85rem; border-radius: var(--zv-pil);
  border: 1.5px solid rgba(255, 255, 255, .75); color: var(--zv-hv);
  text-decoration: none; font-size: .92rem; font-weight: 600; line-height: 1.3;
}
.zv-pi:hover { background: var(--zv-hv); color: var(--zv-ul); }
.zv-tg {
  display: inline-block; font-family: var(--zv-fm); font-size: .76rem; letter-spacing: .03em;
  padding: .3rem .8rem; border-radius: var(--zv-pil); background: var(--zv-gu); color: var(--zv-nat);
  text-decoration: none; line-height: 1.4;
}
.zv-tg-ln { background: transparent; color: var(--zv-hv); border: 1.5px solid rgba(255, 255, 255, .75); }
a.zv-tg-ln:hover { background: var(--zv-hv); color: var(--zv-ul); }

/* ---------- Kanalfarver ---------- */
.zv-sw { display: inline-block; width: .95rem; height: .95rem; border-radius: 50%; flex: none; border: 2px solid var(--zv-nat); }
.zv-c-f { background: var(--zv-ko); }
.zv-c-s { background: var(--zv-gu); }
.zv-c-h { background: var(--zv-nat); border-color: var(--zv-cy); border-width: 3px; border-radius: 4px; }
.zv-c-l { background: var(--zv-li); border-radius: 4px; }
.zv-kf { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .9rem; }
.zv-kf li { display: inline-flex; align-items: center; gap: .45rem; }

/* ---------- Forside: hero med plantegning ---------- */
.zv-hr { color: var(--zv-hv); padding: 1.25rem 0 3rem; }
.zv-hr-g { display: grid; gap: 2rem; }
@media (min-width: 960px) {
  .zv-hr { padding: 2.5rem 0 4.5rem; }
  .zv-hr-g { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 3.5rem; }
}
.zv-rm { margin: 0; background: var(--zv-nat); border-radius: var(--zv-rund); padding: 1rem; color: var(--zv-hv); }
.zv-rm-s { display: block; width: 100%; height: auto; }
.zv-rm-k text { font-family: var(--zv-fm); font-size: 10px; font-weight: 500; fill: var(--zv-nat); }
.zv-rm-hk text { fill: var(--zv-cy); font-size: 8.5px; }
.zv-rm-x, .zv-rm-x text { font-family: var(--zv-fm); font-size: 10px; fill: var(--zv-is); }
.zv-rm-c { padding: .5rem .35rem .25rem; }
.zv-rm-p { margin: 0; font-size: .92rem; color: var(--zv-is); }
.zv-rm-c .zv-sw { border-color: var(--zv-hv); }
.zv-rm-c .zv-c-h { border-color: var(--zv-cy); }
.zv-rm-a { display: inline-block; margin-top: .9rem; color: var(--zv-gu); font-weight: 600; text-underline-offset: 3px; }
.zv-rm-a:hover { color: var(--zv-hv); }

/* ---------- Forside: fire trin som signalkæde ---------- */
.zv-st { color: var(--zv-hv); padding: 2.75rem 0 3.25rem; border-top: 1px solid rgba(255, 255, 255, .22); }
.zv-st-h { font-family: var(--zv-fh); font-weight: 200; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1.05; margin: 0 0 2rem; }
.zv-st-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; }
.zv-st-i { position: relative; padding-top: 1.1rem; border-top: 4px solid var(--zv-gu); }
.zv-st-i::before {
  content: ""; position: absolute; top: -10px; left: 0; width: 16px; height: 16px;
  border-radius: 50%; background: var(--zv-gu);
}
.zv-st-n { display: block; font-family: var(--zv-fh); font-weight: 200; font-size: 4.2rem; line-height: 1; letter-spacing: -.03em; }
.zv-st-t { font-family: var(--zv-fh); font-weight: 300; font-size: 1.7rem; line-height: 1.15; margin: .4rem 0 .5rem; }
.zv-st-p { color: var(--zv-is); margin: 0 0 1rem; max-width: 34rem; }
.zv-st-lk { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
@media (min-width: 900px) {
  .zv-st-l { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .zv-st-i { padding-right: 1.5rem; }
  .zv-st-i:last-child::after {
    content: ""; position: absolute; top: -12px; right: 0;
    border-left: 14px solid var(--zv-gu); border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  }
}

/* ---------- Sidehoved på undersider ---------- */
.zv-ph { color: var(--zv-hv); padding: .5rem 0 2.5rem; }
.zv-bc-l { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.4rem; font-size: .9rem; color: var(--zv-is); }
.zv-bc-l li + li::before { content: "/"; margin-right: .4rem; opacity: .7; }
.zv-bc-l a { color: var(--zv-hv); text-underline-offset: 3px; }
.zv-ph-tg { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.zv-ph-h { font-size: clamp(2.2rem, 1.45rem + 3.4vw, 4.1rem); max-width: 22ch; }
.zv-ph-ld { margin-bottom: 1rem; }
.zv-mt { margin: 0; font-family: var(--zv-fm); font-size: .8rem; color: var(--zv-is); }

/* ---------- Indhold: hvidt ark + sidekolonne ---------- */
.zv-gr { display: grid; gap: 1.25rem; padding-bottom: 2.5rem; }
@media (min-width: 1000px) {
  .zv-gr { grid-template-columns: minmax(0, 1fr) 19rem; gap: 2rem; align-items: start; padding-bottom: 3.5rem; }
  .zv-gr-1 { grid-template-columns: minmax(0, 1fr); }
}
.zv-sh { background: var(--zv-hv); border-radius: var(--zv-rund); padding: 1.35rem 1.1rem 1.75rem; min-width: 0; }
@media (min-width: 720px) { .zv-sh { padding: 2.5rem 3rem 3rem; } }
.zv-gr-1 .zv-sh { max-width: 56rem; }

/* Billeder (alle AI-genererede, mærket i figcaption) */
.zv-fg { margin: 0 0 2rem; }
.zv-fg-i { display: block; width: 100%; height: auto; border-radius: 1.25rem; background: var(--zv-gr); }
.zv-fg-c { margin-top: .5rem; font-family: var(--zv-fm); font-size: .74rem; color: var(--zv-sk); }

/* Brødtekst */
.zv-tx { max-width: 46rem; overflow-wrap: anywhere; }
.zv-tx > :first-child { margin-top: 0; }
.zv-tx h2 {
  font-family: var(--zv-fh); font-weight: 300; color: var(--zv-ul);
  font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.3rem); line-height: 1.12; letter-spacing: -.01em;
  margin: 2.6rem 0 .8rem; hyphens: auto;
}
.zv-tx h3 { font-family: var(--zv-fh); font-weight: 500; font-size: 1.3rem; line-height: 1.25; margin: 2rem 0 .5rem; }
.zv-tx h4 { font-family: var(--zv-fm); font-weight: 500; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; margin: 1.6rem 0 .4rem; }
.zv-tx p, .zv-tx ul, .zv-tx ol { margin: 0 0 1.1rem; }
.zv-tx ul, .zv-tx ol { padding-left: 1.4rem; }
.zv-tx li { margin: .3rem 0; }
.zv-tx li > ul, .zv-tx li > ol { margin: .3rem 0 0; }
.zv-tx ul li::marker { color: var(--zv-ul); }
.zv-tx ol li::marker { color: var(--zv-ul); font-family: var(--zv-fm); font-size: .9em; }
.zv-tx a { color: var(--zv-ul); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.zv-tx a:hover { color: var(--zv-nat); }
.zv-tx strong { font-weight: 600; }
.zv-tx blockquote {
  margin: 1.6rem 0; padding: 1rem 1.3rem; background: var(--zv-gr);
  border-left: 6px solid var(--zv-gu); border-radius: 0 1.1rem 1.1rem 0;
}
.zv-tx blockquote > :last-child { margin-bottom: 0; }
.zv-tx code { font-family: var(--zv-fm); font-size: .88em; background: var(--zv-gr); padding: .1em .35em; border-radius: .4em; }
.zv-tx table {
  display: block; width: fit-content; max-width: 100%; overflow-x: auto;
  border-collapse: collapse; margin: 1.6rem 0; font-size: .95rem; overflow-wrap: normal;
}
.zv-tx th, .zv-tx td { padding: .55rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--zv-ln); min-width: 6rem; }
.zv-tx thead th { background: var(--zv-ul); color: var(--zv-hv); font-weight: 600; border-bottom: 0; }
.zv-tx thead th:first-child { border-top-left-radius: .8rem; }
.zv-tx thead th:last-child { border-top-right-radius: .8rem; }
.zv-tx tbody tr:nth-child(even) { background: var(--zv-gr); }

/* Ordbog A–Å */
.zv-az { margin: 0 0 2rem; }
.zv-az-l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.zv-az-a {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--zv-ul); color: var(--zv-hv); text-decoration: none;
  font-family: var(--zv-fh); font-weight: 500; font-size: 1.05rem;
}
a.zv-az-a:hover { background: var(--zv-nat); }
.zv-az-x { background: var(--zv-gr); color: var(--zv-sk); }
.zv-tx-ob .zv-bo {
  font-weight: 200; font-size: 3rem; line-height: 1; color: var(--zv-ul);
  border-bottom: 3px solid var(--zv-gu); padding-bottom: .4rem; margin-top: 2.8rem;
}
.zv-tx-ob h3 { font-weight: 600; font-size: 1.15rem; margin-top: 1.5rem; }

/* FAQ og kilder */
.zv-fq { margin-top: 3rem; max-width: 46rem; }
.zv-fq-h, .zv-kl-h { font-family: var(--zv-fh); font-weight: 300; color: var(--zv-ul); font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.1rem); line-height: 1.15; margin: 0 0 1rem; }
.zv-fq-d { border-top: 1px solid var(--zv-ln); }
.zv-fq-d:last-child { border-bottom: 1px solid var(--zv-ln); }
.zv-fq-q { cursor: pointer; list-style: none; position: relative; padding: .95rem 3rem .95rem 0; font-weight: 600; font-size: 1.05rem; }
.zv-fq-q::-webkit-details-marker { display: none; }
.zv-fq-q::after {
  content: "+"; position: absolute; right: .25rem; top: .7rem; width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center; border-radius: 50%; background: var(--zv-gu); color: var(--zv-nat);
  font-family: var(--zv-fm); font-weight: 500;
}
.zv-fq-d[open] .zv-fq-q::after { content: "−"; }
.zv-fq-a { margin: 0 0 1.1rem; max-width: 42rem; }
.zv-kl { margin-top: 2.5rem; padding: 1.25rem 1.4rem; background: var(--zv-gr); border-radius: 1.25rem; max-width: 46rem; }
.zv-kl-h { font-size: 1.3rem; margin-bottom: .6rem; }
.zv-kl-l { margin: 0; padding-left: 1.2rem; font-size: .95rem; overflow-wrap: anywhere; }
.zv-kl-l li { margin: .25rem 0; }
.zv-kl-l a { color: var(--zv-ul); text-underline-offset: 3px; }

/* Sidekolonne */
.zv-sd { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.zv-sd-b { border-radius: 1.5rem; padding: 1.2rem 1.35rem 1.35rem; }
.zv-sd-nat { background: var(--zv-nat); color: var(--zv-hv); }
.zv-sd-gul { background: var(--zv-gu); color: var(--zv-nat); }
.zv-sd-hv { background: var(--zv-hv); color: var(--zv-nat); }
.zv-sd-h { font-family: var(--zv-fm); font-size: .76rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .85rem; }
.zv-sd-nat .zv-sd-h { color: var(--zv-gu); }
.zv-sd-p { margin: 0; font-size: .92rem; color: var(--zv-sk); }
.zv-sd-tr { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.zv-sd-tt { display: flex; align-items: center; gap: .55rem; font-family: var(--zv-fh); font-weight: 300; font-size: 1.2rem; }
.zv-sd-n {
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  border: 1.5px solid var(--zv-is); font-family: var(--zv-fm); font-size: .78rem; font-weight: 500;
}
.zv-on .zv-sd-n { background: var(--zv-gu); border-color: var(--zv-gu); color: var(--zv-nat); }
.zv-sd-tl { list-style: none; margin: .35rem 0 0 2.25rem; padding: 0; display: grid; gap: .15rem; font-size: .95rem; }
.zv-sd-tl a { color: var(--zv-is); text-decoration: none; display: inline-block; padding: .12rem 0; }
.zv-sd-tl a:hover { color: var(--zv-hv); text-decoration: underline; }
.zv-sd-tl a[aria-current="page"] { color: var(--zv-nat); background: var(--zv-gu); border-radius: var(--zv-pil); padding: .12rem .65rem; margin-left: -.65rem; font-weight: 600; }
.zv-sd-nat > .zv-sd-tl { margin-left: 0; }
.zv-sd-bl { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.zv-sd-bl a { display: block; text-decoration: none; padding: .7rem .9rem; border-radius: 1rem; background: rgba(255, 255, 255, .5); }
.zv-sd-bl a:hover { background: var(--zv-hv); }
.zv-sd-bl strong { display: block; font-family: var(--zv-fh); font-weight: 500; font-size: 1.1rem; }
.zv-sd-bl span { display: block; font-size: .9rem; }
.zv-kf-sd { flex-direction: column; gap: .45rem; }
.zv-sd-toc nav ol { margin: 0; padding-left: 1.2rem; font-size: .92rem; display: grid; gap: .3rem; }
.zv-sd-toc { background: var(--zv-hv); }
.zv-sd-toc a { color: var(--zv-ul); text-underline-offset: 3px; }
@media (max-width: 999px) { .zv-sd-toc { display: none; } }

/* Forrige/næste */
.zv-pn { padding-bottom: 3rem; }
.zv-pn-g { display: grid; gap: .9rem; }
@media (min-width: 720px) { .zv-pn-g { grid-template-columns: 1fr 1fr; } }
.zv-pn-a {
  display: block; padding: 1.1rem 1.4rem; border-radius: 1.5rem; border: 2px solid rgba(255, 255, 255, .7);
  color: var(--zv-hv); text-decoration: none;
}
.zv-pn-a:hover { background: var(--zv-hv); color: var(--zv-nat); }
.zv-pn-nx { text-align: right; }
.zv-pn-d { display: block; font-family: var(--zv-fm); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--zv-gu); margin-bottom: .2rem; }
.zv-pn-a:hover .zv-pn-d { color: var(--zv-ul); }
.zv-pn-t { display: block; font-family: var(--zv-fh); font-weight: 300; font-size: 1.25rem; line-height: 1.25; }

/* ---------- Beregnere ---------- */
.zv-wg { padding-bottom: 1.25rem; scroll-margin-top: 1rem; }
.zv-wg-b {
  background: var(--zv-nat); color: var(--zv-hv); border-radius: var(--zv-rund);
  padding: 1.35rem 1.1rem 1.5rem; display: grid; gap: 1.5rem; min-width: 0;
}
.zv-wg-b > * { min-width: 0; }
@media (min-width: 900px) {
  .zv-wg-b { padding: 2.25rem 2.5rem 2.5rem; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 2.5rem; }
  .zv-wg-hd, .zv-wg-tb, .zv-wg-nt, .zv-wg-ls, .zv-wg-b > noscript { grid-column: 1 / -1; }
  .zv-wg-rr .zv-wg-tb { grid-column: auto; }
}
.zv-wg-h { font-family: var(--zv-fh); font-weight: 200; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); line-height: 1.08; margin: 0 0 .75rem; }
.zv-wg-h3 { font-family: var(--zv-fh); font-weight: 300; font-size: 1.4rem; margin: 0 0 .75rem; }
.zv-wg-p { margin: 0; color: var(--zv-is); max-width: 52rem; }
.zv-wg-f { align-self: start; }
.zv-fl { display: grid; gap: .3rem; margin-bottom: 1rem; }
.zv-fl-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .75rem; align-items: end; margin-bottom: 1rem; }
.zv-fl-2 .zv-fl { margin-bottom: .3rem; }
.zv-fl-hj { grid-column: 1 / -1; }
.zv-lb { font-weight: 600; font-size: .98rem; }
.zv-in {
  font: inherit; color: var(--zv-nat); background: var(--zv-hv);
  border: 2px solid var(--zv-hv); border-radius: var(--zv-pil);
  padding: .6rem 1.1rem; min-height: 2.9rem; width: 100%; max-width: 22rem;
}
.zv-wg .zv-in:focus-visible { outline-color: var(--zv-gu); }
.zv-hj { margin: 0; font-size: .86rem; color: var(--zv-is); }
.zv-wg-f .zv-hj + .zv-bt, .zv-wg-f .zv-fl + .zv-bt, .zv-wg-f .zv-fl-2 + .zv-bt { margin-top: .25rem; }
.zv-wg-f > .zv-hj { margin-bottom: 1rem; }
.zv-wg-st { margin: .75rem 0 0; min-height: 1.5em; color: var(--zv-gu); font-weight: 600; }
.zv-wg-res { font-family: var(--zv-fh); font-weight: 300; font-size: 1.35rem; line-height: 1.3; margin: 0 0 .5rem; }
.zv-wg-sm { margin: 0 0 .9rem; font-family: var(--zv-fm); font-size: .82rem; color: var(--zv-is); }
.zv-wg-sm:empty { display: none; }
.zv-wg-tg { background: var(--zv-lrd); border-radius: 1.25rem; padding: .6rem; }
.zv-wg-tg svg { display: block; width: 100%; height: auto; max-height: 30rem; margin: 0 auto; }
.zv-wg-tg text { font-family: var(--zv-fm); }
.zv-wg-ud .zv-kf .zv-sw { border-color: var(--zv-hv); }
.zv-wg-ud .zv-kf .zv-c-h { border-color: var(--zv-cy); }
.zv-wg-tb { position: relative; background: var(--zv-hv); color: var(--zv-nat); border-radius: 1.25rem; padding: .35rem .5rem .5rem; overflow-x: auto; }
.zv-tb { border-collapse: collapse; width: 100%; font-size: .92rem; }
.zv-tb-c { text-align: left; font-weight: 600; padding: .6rem .6rem .4rem; }
.zv-tb th, .zv-tb td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--zv-ln); white-space: nowrap; }
.zv-tb thead th { font-family: var(--zv-fm); font-size: .74rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--zv-sk); }
.zv-tb tbody tr:last-child > * { border-bottom: 0; }
.zv-tb .zv-nr { text-align: right; font-family: var(--zv-fm); font-variant-numeric: tabular-nums; }
.zv-tb td.zv-nr { font-size: .88rem; }
.zv-tb-n { display: inline-flex; align-items: center; gap: .5rem; }
.zv-tb-k { font-family: var(--zv-fm); font-size: .82rem; font-weight: 500; }
.zv-tb-m { color: var(--zv-sk); }
.zv-tb .zv-uo { color: var(--zv-sk); }
@media (max-width: 599px) {
  .zv-tb th, .zv-tb td { padding: .45rem .35rem; }
  .zv-tb thead th { white-space: normal; vertical-align: bottom; }
  .zv-tb-fn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.zv-wg-nt { font-size: .92rem; color: var(--zv-is); }
.zv-wg-nt p { margin: 0 0 .7rem; max-width: 60rem; }
.zv-wg-nt strong { color: var(--zv-hv); }
.zv-wg-nt a, .zv-wg-kl a { color: var(--zv-hv); text-underline-offset: 3px; }
.zv-wg-kl { font-size: .86rem; }

/* Rumresonans: liste og spektrum */
.zv-wg-sp { margin-bottom: 1rem; }
.zv-rr-l { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
@media (min-width: 720px) { .zv-rr-l { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; } }
@media (min-width: 1100px) { .zv-rr-l { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zv-rr-i { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding: .55rem .85rem; border-radius: 1rem; background: var(--zv-lrd); }
.zv-rr-f { font-family: var(--zv-fm); font-weight: 500; font-size: 1rem; }
.zv-rr-d { font-size: .9rem; color: var(--zv-is); }
.zv-rr-s { box-shadow: inset 0 0 0 2px var(--zv-ko); }
.zv-rr-t { font-family: var(--zv-fm); font-size: .72rem; background: var(--zv-ko); color: var(--zv-nat); border-radius: var(--zv-pil); padding: .1rem .55rem; }

/* ---------- Kontakt ---------- */
.zv-fm { margin-top: 1.5rem; max-width: 36rem; position: relative; }
.zv-fm .zv-in { max-width: none; border-color: var(--zv-sk); }
.zv-fm .zv-in:focus-visible { outline-color: var(--zv-ul); }
.zv-in-ta { border-radius: 1.4rem; min-height: 10rem; resize: vertical; }
.zv-fm-s { margin-top: .5rem; }
.zv-fm-nt { font-size: .9rem; color: var(--zv-sk); margin: 1rem 0 0; }
.zv-fm-nt a { color: var(--zv-ul); }
.zv-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.zv-sh-k [role="status"] { background: var(--zv-gu); color: var(--zv-nat); padding: .8rem 1.1rem; border-radius: 1rem; font-weight: 600; }

/* ---------- Oversigt (list) og 404 ---------- */
.zv-ov { display: grid; gap: 2rem; margin-top: 1.5rem; }
.zv-ov-h { display: flex; align-items: center; gap: .7rem; font-family: var(--zv-fh); font-weight: 300; font-size: 1.7rem; color: var(--zv-ul); margin: 0 0 .7rem; }
.zv-ov-n, .zv-nf-n {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; flex: none;
  background: var(--zv-gu); color: var(--zv-nat); font-family: var(--zv-fm); font-size: .95rem; font-weight: 500;
}
.zv-ov-l { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.zv-ov-l a { color: var(--zv-ul); font-weight: 600; text-underline-offset: 3px; }
.zv-ov-l span { display: block; font-size: .95rem; color: var(--zv-sk); }
.zv-nf { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .7rem; }
.zv-nf-a {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; padding: .9rem 1.1rem;
  border-radius: 1.25rem; background: var(--zv-gr); text-decoration: none;
  font-family: var(--zv-fh); font-size: 1.3rem; font-weight: 300; color: var(--zv-nat);
}
.zv-nf-a:hover { background: var(--zv-gu); }
.zv-nf-t { flex-basis: 100%; font-family: var(--zv-fb); font-size: .95rem; color: var(--zv-sk); padding-left: 3rem; }
.zv-nf-f { margin: 0; }

/* ---------- Footer i kolonner ---------- */
.zv-ft { background: var(--zv-nat); color: var(--zv-hv); }
.zv-ft-k { display: grid; grid-template-columns: repeat(4, 1fr); height: 8px; }
.zv-k-f { background: var(--zv-ko); }
.zv-k-s { background: var(--zv-gu); }
.zv-k-h { background: var(--zv-cy); }
.zv-k-l { background: var(--zv-li); }
.zv-ft-g { display: grid; gap: 2rem; padding-top: 2.5rem; padding-bottom: 2rem; }
@media (min-width: 720px) { .zv-ft-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .zv-ft-g { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; } }
.zv-ft-nm { font-family: var(--zv-fh); font-weight: 200; font-size: 2rem; line-height: 1.1; margin: 0 0 .6rem; }
.zv-ft-p { margin: 0; color: var(--zv-is); font-size: .95rem; max-width: 26rem; }
.zv-kf-ft .zv-sw { border-color: var(--zv-hv); }
.zv-kf-ft .zv-c-h { border-color: var(--zv-cy); }
.zv-kf-ft { color: var(--zv-is); font-size: .85rem; }
.zv-ft-h { font-family: var(--zv-fm); font-size: .76rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--zv-gu); margin: 0 0 .8rem; }
.zv-ft-l { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.zv-ft-l a { color: var(--zv-hv); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.zv-ft-l a:hover { text-decoration: underline; text-underline-offset: 3px; }
.zv-ft-n {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1.5px solid var(--zv-is); font-family: var(--zv-fm); font-size: .72rem;
}
.zv-ft-bd { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 1.1rem; padding-bottom: 1.6rem; }
.zv-ft-bd p { margin: 0; font-size: .85rem; color: var(--zv-is); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}