/* FAKTIVE videnshubben 2026 (viden/index.html). Hører sammen med assets/viden-2026.js.

   Siden er et opslagsværk: den skal vise vej, ikke forklare sig selv. Fire flader, der skifter:
     top (creme) med et nordisk bibliotek, der åbner sig til fuld bredde, når man scroller ·
     regelsæt (lys) · kravkortenes register (aubergine) · seneste gennemgange (creme) · footer
   Ved "Seneste gennemgange" står et foto over den nyeste artikel.
   Kendetegnet er registeret: alle 28 kontroller i deres syv grupper, som et opslagsregister,
   hvor de målte kontroller lyser op i kobber.

   Taget ud fra den gamle side, fordi det gentog sig: talbjælken, "Hvad er det her", og anden
   halvdel af siden, der viste regelsæt, kravkort og artikler en gang til. Ordbogen står her
   ikke, før opslagene er skrevet (alle ti står som "opslag kommer"). Videoen er erstattet af
   et foto. */

:root{--vi-aub:#3C2A44; --vi-aub2:#2E2036; --vi-kobber:#E45724; --vi-kobber-tekst:#B23F14; --vi-kobber-lys:#F08A5D;
  --vi-creme:#F2E7DC; --vi-lys:#FFFDFB; --vi-blaek:#2A2321; --vi-tekst:#5C4F48; --vi-sand:#D7B7A3;
  --vi-streg:rgba(60,42,68,.14); --vi-streg-lys:rgba(242,231,220,.14); --vi-ud:cubic-bezier(.16,1,.3,1);
  --vi-kant:max(32px,calc((100vw - 1200px)/2 + 32px))}
.vi-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- toppen ---------- */
nav + section.hero.vi-top{min-height:0 !important;padding:calc(var(--nav-h) + clamp(56px,8vw,120px)) 0 0 !important}
section.hero.vi-top{display:block;position:relative;background:var(--vi-creme);color:var(--vi-blaek);overflow:clip;
  grid-template-columns:none;gap:0}
.vi-top::after,.vi-top::before{display:none !important}
.vi-in{max-width:1200px;margin:0 auto;padding:0 32px}
.vi-top .kicker{color:var(--vi-kobber-tekst) !important;font-size:12px !important;letter-spacing:.24em !important;margin-bottom:24px !important}
section.hero.vi-top h1{font-size:clamp(42px,5.6vw,92px) !important;line-height:1.02 !important;color:var(--vi-aub);
  max-width:13em;margin:0 0 28px;text-wrap:balance}
.vi-top h1 i{font-style:normal;color:var(--vi-kobber)}
.vi-top p.sub{font-size:19px;line-height:1.55;color:var(--vi-tekst) !important;font-weight:400;max-width:34em;margin:0}

/* biblioteket: starter som et vindue inden for spalten og åbner sig til fuld bredde,
   mens man scroller (--vi-p fra 0 til 1, sat af viden-2026.js) */
.vi-foto{position:relative;margin:clamp(48px,6vw,88px) 0 0;height:clamp(300px,50vw,700px);overflow:hidden;
  --vi-p:0;
  clip-path:inset(0 calc(var(--vi-kant) * (1 - var(--vi-p))) 0 calc(var(--vi-kant) * (1 - var(--vi-p))) round calc(20px * (1 - var(--vi-p))) calc(20px * (1 - var(--vi-p))) 0 0)}
.vi-foto img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;object-position:50% 12%;
  transform:translate3d(0,calc(var(--vi-p) * 5%),0) scale(calc(1.1 - var(--vi-p) * .1));will-change:transform}

/* toppen kommer roligt frem */
.vi-js .vi-in > *{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform 1.1s var(--vi-ud)}
.vi-klar .vi-in > *{opacity:1;transform:none}
.vi-klar .vi-in > h1{transition-delay:.08s}
.vi-klar .vi-in > .sub{transition-delay:.2s}
.vi-js .vi-foto{opacity:0;transition:opacity 1.2s ease .3s}
.vi-klar .vi-foto{opacity:1}

/* ---------- fælles ---------- */
.vi-sek{padding:clamp(88px,10vw,140px) 0;position:relative}
.vi-hoved{max-width:780px;margin-bottom:clamp(40px,5vw,64px)}
.vi-hoved .lede{margin-top:20px}
.vi-mere{display:inline-flex;align-items:center;gap:10px;margin-top:36px;font-family:var(--font-display);font-stretch:125%;
  font-weight:500;font-size:17px;color:var(--vi-aub);text-decoration:none;border-bottom:1px solid rgba(60,42,68,.3);padding-bottom:3px;
  transition:border-color .25s ease,gap .35s var(--vi-ud)}
.vi-mere::after{content:"→";font-family:var(--font-text);font-stretch:100%}
.vi-mere:hover{border-color:var(--vi-aub);gap:14px}

/* ---------- regelsæt: fire linjer med navnet i husets brede skrift ---------- */
.vi-regelsaet{background:var(--vi-lys)}
.vi-rs-liste{border-top:1px solid var(--vi-aub)}
.vi-rs{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) 28px;gap:clamp(20px,4vw,64px);align-items:center;
  padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--vi-streg);text-decoration:none;color:inherit;position:relative}
.vi-rs::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--vi-kobber);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--vi-ud)}
.vi-rs:hover::before{transform:scaleX(1)}
.vi-rs-navn{font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:clamp(38px,5vw,76px);line-height:1;
  letter-spacing:-.02em;color:var(--vi-aub);transition:transform .6s var(--vi-ud),color .3s ease;white-space:nowrap}
.vi-rs:hover .vi-rs-navn{transform:translateX(10px);color:var(--vi-kobber-tekst)}
.vi-rs-hvad{display:block;font-size:17px;line-height:1.5;color:var(--vi-blaek);max-width:32em}
.vi-rs-dyb{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--vi-tekst)}
.vi-pil{width:24px;height:24px;fill:none;stroke:var(--vi-aub);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--vi-ud),stroke .3s ease}
.vi-rs:hover .vi-pil{transform:translateX(6px);stroke:var(--vi-kobber)}
.vi-rs:focus-visible{outline:2px solid var(--vi-kobber);outline-offset:4px;border-radius:4px}

/* ---------- kravkortenes register ---------- */
.vi-krav{background:var(--vi-aub);color:#EADDD2;overflow:clip;isolation:isolate}
/* baggrunden: to store, bløde lysfelter i lysere og mørkere aubergine, der glider langsomt rundt om
   hinanden og forskydes lidt, mens man scroller (--vi-s, sat af viden-2026.js). Kun transform ændres;
   ved reduceret bevægelse står de stille. */
.vi-krav{--vi-s:.5}
.vi-krav-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.vi-bg-felt{position:absolute;width:70vmax;height:70vmax;border-radius:50%;will-change:transform}
.vi-bg-felt.a{left:-10%;top:-30%;background:radial-gradient(closest-side,rgba(98,70,112,.75),rgba(98,70,112,0));
  translate:0 calc((var(--vi-s) - .5) * 18%);animation:vi-felt-a 38s ease-in-out infinite alternate}
.vi-bg-felt.b{right:-15%;bottom:-40%;background:radial-gradient(closest-side,rgba(34,22,40,.7),rgba(34,22,40,0));
  translate:0 calc((var(--vi-s) - .5) * -14%);animation:vi-felt-b 46s ease-in-out infinite alternate}
@keyframes vi-felt-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(38vw,12vh,0) scale(1.15)}}
@keyframes vi-felt-b{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-34vw,-10vh,0) scale(.95)}}
.vi-krav .eyeline{color:var(--vi-kobber-lys) !important}
.vi-krav h2.big{color:#fff}
.vi-krav .lede{color:var(--vi-sand)}
.vi-register{border-top:1px solid rgba(242,231,220,.35)}
.vi-gruppe{display:grid;grid-template-columns:236px minmax(0,1fr);gap:24px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--vi-streg-lys)}
#krav .vi-gruppe h3{margin:0;font-family:var(--font-display) !important;font-stretch:125% !important;font-weight:500 !important;
  font-size:12px;line-height:1.4 !important;letter-spacing:.14em !important;text-transform:uppercase;color:#BCA394}
.vi-gruppe h3 a{color:inherit;text-decoration:none}
.vi-gruppe h3 a:hover{color:#fff}
.vi-gruppe ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 20px}
.vi-gruppe li a{display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.35;color:#EADDD2;text-decoration:none;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere;transition:color .2s ease}
.vi-gruppe li a:hover{color:#fff}
.vi-gruppe li a:hover span:first-of-type{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(242,231,220,.4)}
/* prikkerne: fyldt kobber = måles automatisk, tynd ring = dokumenteres */
.vi-gruppe li i,.vi-prik{flex:none;display:inline-block;width:8px;height:8px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(242,231,220,.45);transform:translateY(-1px)}
.vi-maalt i,.vi-prik-maalt{background:var(--vi-kobber);box-shadow:none}
.vi-js .vi-maalt i{transform:translateY(-1px) scale(0);transition:transform .5s var(--vi-ud)}
.vi-js .vi-maalt.is-taendt i{transform:translateY(-1px) scale(1)}
.vi-krav-fod{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px 32px;margin-top:8px}
.vi-noegle{display:flex;gap:24px;margin:36px 0 0;font-size:13.5px;color:#BCA394}
.vi-noegle span{display:inline-flex;align-items:center;gap:8px}
.vi-krav .vi-mere{color:#fff;border-color:rgba(242,231,220,.3)}
.vi-krav .vi-mere:hover{border-color:#fff}

/* ---------- seneste gennemgange ---------- */
.vi-nyt{background:var(--vi-creme)}
.vi-artikler{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);border-top:1px solid var(--vi-aub)}
.vi-art{display:block;padding:26px 0;text-decoration:none;color:inherit}
/* den nyeste står stille, mens man læser listen ved siden af */
/* den nyeste artikel står stille med fotoet over sig, mens man læser listen ved siden af */
.vi-lead{position:sticky;top:96px;align-self:start;padding-top:28px}
.vi-nyt-foto{position:relative;margin:0 0 4px;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#e6d9cc;--vi-a:1;--vi-s:.5;
  clip-path:inset(calc((1 - var(--vi-a)) * 22%) 0 0 0 round 16px)}
/* fotoet løftes frem nedefra, og kameraet trækker sig tilbage, mens det kommer ind (--vi-a) */
.vi-nyt-lag{position:absolute;inset:0;display:block;will-change:transform;
  transform:scale(calc(1.14 - var(--vi-a) * .14)) translate3d(0,calc((var(--vi-s) - .5) * -5%),0)}
.vi-nyt-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.vi-art-liste .vi-art{border-bottom:1px solid var(--vi-streg)}
.vi-art-liste .vi-art:last-child{border-bottom:0}
.vi-art-meta{display:block;margin-bottom:10px;font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--vi-kobber-tekst)}
.vi-art-titel{display:inline;font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:20px;line-height:1.2;
  letter-spacing:-.01em;color:var(--vi-aub);
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--vi-ud)}
.vi-art:hover .vi-art-titel{background-size:100% 1px}
.vi-art-stor .vi-art-titel{font-size:clamp(28px,2.8vw,40px);line-height:1.1}
.vi-art-tekst{display:block;margin-top:12px;font-size:15.5px;line-height:1.55;color:var(--vi-tekst);max-width:36em}
.vi-art-stor .vi-art-tekst{font-size:17px;margin-top:18px}
.vi-art-min{display:block;margin-top:12px;font-size:13px;color:#8A7B72}
.vi-art:focus-visible{outline:2px solid var(--vi-kobber);outline-offset:4px;border-radius:4px}

/* sektionerne kommer frem, når de når skærmen (viden-2026.js sætter .is-inde) */
.vi-js .vi-hoved,.vi-js .vi-rs,.vi-js .vi-gruppe,.vi-js .vi-art{opacity:0;transform:translateY(16px)}
.vi-js .is-inde{opacity:1 !important;transform:none !important;transition:opacity .8s ease,transform 1s var(--vi-ud)}

@media (max-width:900px){
  .vi-rs{grid-template-columns:1fr 24px;gap:10px 16px}
  .vi-rs-navn{grid-column:1/-1}
  .vi-gruppe{grid-template-columns:1fr;gap:12px}
  .vi-gruppe ul{grid-template-columns:1fr 1fr}
  .vi-artikler{grid-template-columns:1fr;gap:0}
  .vi-lead{position:static}
  .vi-art-stor{border-bottom:1px solid var(--vi-streg)}
}
@media (max-width:560px){
  .vi-in{padding:0 20px}
  .vi-foto{clip-path:none;height:260px}
  .vi-gruppe ul{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .vi-js .vi-in > *,.vi-js .vi-foto,.vi-js .vi-hoved,.vi-js .vi-rs,.vi-js .vi-gruppe,.vi-js .vi-art{opacity:1;transform:none;transition:none}
  .vi-js .vi-maalt i{transform:translateY(-1px)}
  .vi-foto{clip-path:none}
  .vi-foto img{transform:none}
  .vi-bg-felt{animation:none}
  .vi-bg-felt{translate:none}
  .vi-nyt-foto{clip-path:none}
  .vi-nyt-lag{transform:none}
}

/* ---------- ordbogen: under opbygning ----------
   Opslagene er ikke skrevet endnu; ordene står uden links, i dæmpet skrift, så siden ikke lover
   noget, der ikke findes. Når ordbogen er skrevet, bliver ordene til links til hvert opslag. */
.vi-ordbog{background:var(--vi-lys)}
.vi-ord-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.vi-ordbog .vi-hoved{margin-bottom:0}
.vi-ord{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;align-content:flex-end}
.vi-ord li{font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1.3;
  color:rgba(60,42,68,.34);padding:6px 0;border-bottom:1px dashed rgba(60,42,68,.22)}
@media (max-width:900px){ .vi-ord-in{grid-template-columns:1fr} }